import { Input } from '@/components/ui/Input';

<div className="space-y-2">
  <label htmlFor="email" className="text-sm font-medium">
    Email Address
  </label>
  <Input
    id="email"
    type="email"
    placeholder="[email protected]"
  />
</div>

import { Input } from '@/components/ui/Input';
import { Button } from '@/components/ui/Button';

<form className="space-y-4">
  <div>
    <label className="text-sm font-medium">Name</label>
    <Input placeholder="Your full name" />
  </div>
  <div>
    <label className="text-sm font-medium">Email</label>
    <Input type="email" placeholder="[email protected]" />
  </div>
  <div>
    <label className="text-sm font-medium">Message</label>
    <textarea 
      className="w-full p-3 border rounded-md"
      rows={4}
      placeholder="Your message..."
    />
  </div>
  <Button type="submit">Send Message</Button>
</form>

import Link from 'next/link';

<nav className="flex" aria-label="Breadcrumb">
  <ol className="flex items-center space-x-2">
    <li>
      <Link href="/" className="text-gray-500 hover:text-gray-700">
        Home
      </Link>
    </li>
    <li className="text-gray-400">/</li>
    <li>
      <Link href="/seminars" className="text-gray-500 hover:text-gray-700">
        Seminars
      </Link>
    </li>
    <li className="text-gray-400">/</li>
    <li className="text-gray-900 font-medium">
      Understanding Tawheed
    </li>
  </ol>
</nav>

import Link from 'next/link';
import { usePathname } from 'next/navigation';

const navItems = [
  { name: 'About', href: '/about' },
  { name: 'Seminars', href: '/seminars' },
  { name: 'Contact', href: '/contact' },
  { name: 'Donate', href: '/donate' },
];

<nav className="flex space-x-8">
  {navItems.map((item) => (
    <Link
      key={item.name}
      href={item.href}
      className={cn(
        'text-sm font-medium transition-colors hover:text-primary-green',
        pathname === item.href 
          ? 'text-primary-green' 
          : 'text-gray-700'
      )}
    >
      {item.name}
    </Link>
  ))}
</nav>

// Status badge variants
<span className="bg-primary-green text-white text-xs px-2 py-1 rounded-full">
  Upcoming
</span>

<span className="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded-full">
  Completed
</span>

<span className="bg-red-100 text-red-800 text-xs px-2 py-1 rounded-full">
  Cancelled
</span>

<span className="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">
  Live
</span>

// Success alert
<div className="bg-green-50 border border-green-200 rounded-lg p-4">
  <div className="flex">
    <CheckIcon className="h-5 w-5 text-green-400" />
    <div className="ml-3">
      <p className="text-sm font-medium text-green-800">
        Success! Your message has been sent.
      </p>
    </div>
  </div>
</div>

// Error alert
<div className="bg-red-50 border border-red-200 rounded-lg p-4">
  <div className="flex">
    <XIcon className="h-5 w-5 text-red-400" />
    <div className="ml-3">
      <p className="text-sm font-medium text-red-800">
        Error: Please check your input and try again.
      </p>
    </div>
  </div>
</div>

<div className="mb-12">
  <h1 className="text-4xl font-bold text-deep-forest-green mb-4">
    Page Title
  </h1>
  <p className="text-lg text-gray-700">
    Page description or subtitle that provides context about the content.
  </p>
</div>

<section className="mb-16">
  <div className="mb-8">
    <h2 className="text-3xl font-bold text-gray-900 mb-2">
      Section Title
    </h2>
    <p className="text-lg text-gray-600">
      Section description explaining the content below.
    </p>
  </div>
  
  <div className="border-t border-gray-200 pt-8">
    {/* Section content goes here */}
  </div>
</section>