67 lines
2.2 KiB
TypeScript
67 lines
2.2 KiB
TypeScript
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>
|
|
);
|
|
}
|