Template
47 lines
2.0 KiB
TypeScript
47 lines
2.0 KiB
TypeScript
import Link from 'next/link';
|
|
import { ArrowRight } from 'lucide-react';
|
|
import { Button } from '@/components/ui/button';
|
|
|
|
export type HeroProps = {
|
|
heading?: string;
|
|
description?: string;
|
|
primaryLabel?: string;
|
|
primaryUrl?: string;
|
|
secondaryLabel?: string;
|
|
secondaryUrl?: string;
|
|
imageUrl?: string;
|
|
imageAlt?: string;
|
|
imagePosition?: 'left' | 'right';
|
|
};
|
|
|
|
export default function Hero({
|
|
heading = '', description = '', primaryLabel = '', primaryUrl = '#', secondaryLabel = '', secondaryUrl = '#', imageUrl = '', imageAlt = '', imagePosition = 'right',
|
|
}: HeroProps) {
|
|
const copy = (
|
|
<div className="flex max-w-xl flex-col items-start justify-center py-14 sm:py-20 lg:py-28">
|
|
<h1 className="text-5xl font-normal leading-[0.96] tracking-[-0.05em] sm:text-6xl lg:text-7xl xl:text-8xl">{heading}</h1>
|
|
{description && <p className="mt-6 max-w-lg text-base leading-7 text-muted-foreground sm:text-lg">{description}</p>}
|
|
<div className="mt-8 flex flex-wrap gap-3">
|
|
{primaryLabel && <Button asChild size="lg"><Link href={primaryUrl}>{primaryLabel}<ArrowRight aria-hidden="true" /></Link></Button>}
|
|
{secondaryLabel && <Button asChild variant="outline" size="lg"><Link href={secondaryUrl}>{secondaryLabel}</Link></Button>}
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
const image = (
|
|
<div className="flex py-8 sm:py-12 lg:py-16">
|
|
<div className="min-h-80 w-full overflow-hidden rounded-xl lg:min-h-[32rem]">
|
|
{imageUrl ? <img src={imageUrl} alt={imageAlt} className="h-full min-h-80 w-full object-cover lg:min-h-[32rem]" /> : <div className="flex h-full min-h-80 items-center justify-center bg-secondary text-sm text-muted-foreground lg:min-h-[32rem]">Add a hero image</div>}
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<section className="bg-background">
|
|
<div className="section-shell grid items-stretch gap-10 lg:grid-cols-2 lg:gap-16">
|
|
{imagePosition === 'left' ? <>{image}{copy}</> : <>{copy}{image}</>}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|