Add complete project files

components/hero.tsx

@@ -0,0 +1,66 @@
+import Link from 'next/link';
+import Image from 'next/image';
+import { Button } from '@/components/ui/button';
+
+interface HeroProps {
+  title: string;
+  subtitle: string;
+  ctaText: string;
+  ctaHref: string;
+  imageSrc: string;
+  imageAlt: string;
+  reverse?: boolean;
+}
+
+export function Hero({
+  title,
+  subtitle,
+  ctaText,
+  ctaHref,
+  imageSrc,
+  imageAlt,
+  reverse = false,
+}: HeroProps) {
+  return (
+    <div className="relative isolate overflow-hidden bg-navy">
+      <div className="mx-auto max-w-7xl px-4 pb-16 pt-8 sm:pb-24 lg:flex lg:px-6 lg:py-24">
+        <div className={`mx-auto max-w-2xl flex-shrink-0 lg:mx-0 lg:max-w-xl lg:pt-8 ${reverse ? 'lg:order-2' : ''}`}>
+          <div className="mt-16 sm:mt-20 lg:mt-12">
+            <Link href="/contact" className="inline-flex space-x-6">
+              <span className="rounded-full bg-teal/10 px-3 py-1 text-sm font-semibold leading-6 text-teal ring-1 ring-inset ring-teal/10">
+                Book Your Consultation
+              </span>
+            </Link>
+          </div>
+          <h1 className="mt-10 text-4xl font-bold tracking-tight text-cloud sm:text-6xl">
+            {title}
+          </h1>
+          <p className="mt-6 text-lg leading-8 text-cloud/90">
+            {subtitle}
+          </p>
+          <div className="mt-10 flex items-center gap-x-6">
+            <Button asChild size="lg">
+              <Link href={ctaHref}>
+                {ctaText}
+              </Link>
+            </Button>
+            <Link href="/about" className="text-sm font-semibold leading-6 text-cloud hover:text-cloud/80 transition-colors">
+              Learn more <span aria-hidden="true">→</span>
+            </Link>
+          </div>
+        </div>
+        <div className={`mx-auto mt-12 flex max-w-2xl sm:mt-16 lg:ml-8 lg:mr-0 lg:mt-0 lg:max-w-none lg:flex-none xl:ml-20 ${reverse ? 'lg:order-1' : ''}`}>
+          <div className="max-w-2xl flex-none sm:max-w-3xl lg:max-w-none">
+            <Image
+              src={imageSrc}
+              alt={imageAlt}
+              width={1200}
+              height={800}
+              className="w-[40rem] rounded-md bg-white/5 shadow-2xl ring-1 ring-white/10"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}