Template
44 lines
2.2 KiB
TypeScript
44 lines
2.2 KiB
TypeScript
import Link from 'next/link';
|
|
import { ArrowRight } from 'lucide-react';
|
|
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';
|
|
|
|
export type FeaturesProps = {
|
|
heading?: string;
|
|
description?: string;
|
|
imageUrl?: string;
|
|
imageAlt?: string;
|
|
imagePosition?: 'left' | 'right';
|
|
items?: Array<{ title: string; description: string; ctaLabel?: string; ctaUrl?: string }>;
|
|
};
|
|
|
|
export default function Features({ heading = '', description = '', imageUrl = '', imageAlt = '', imagePosition = 'left', items = [] }: FeaturesProps) {
|
|
const media = imageUrl ? <img src={imageUrl} alt={imageAlt} className="h-full min-h-96 w-full rounded-xl object-cover" /> : <div className="flex min-h-96 items-center justify-center rounded-xl bg-muted text-sm text-muted-foreground">Add a feature image</div>;
|
|
const details = (
|
|
<Accordion type="single" collapsible defaultValue="feature-0" className="border-t">
|
|
{items.map((item, index) => (
|
|
<AccordionItem key={index} value={`feature-${index}`}>
|
|
<AccordionTrigger className="py-7 text-2xl sm:text-3xl">{item.title}</AccordionTrigger>
|
|
<AccordionContent className="max-w-xl pb-7 text-base leading-7 text-muted-foreground">
|
|
<p>{item.description}</p>
|
|
{item.ctaLabel && <Link href={item.ctaUrl || '#'} className="mt-5 inline-flex items-center gap-2 text-sm font-medium text-brand hover:underline">{item.ctaLabel}<ArrowRight className="size-4" aria-hidden="true" /></Link>}
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
))}
|
|
</Accordion>
|
|
);
|
|
|
|
return (
|
|
<section id="features" className="scroll-mt-20 bg-background py-20 sm:py-28 lg:py-32">
|
|
<div className="section-shell">
|
|
<div className="max-w-4xl">
|
|
<h2 className="text-4xl font-normal leading-[0.98] tracking-[-0.04em] sm:text-5xl lg:text-6xl">{heading}</h2>
|
|
{description && <p className="mt-4 max-w-2xl leading-7 text-muted-foreground">{description}</p>}
|
|
</div>
|
|
<div className="mt-14 grid items-stretch gap-10 lg:grid-cols-2 lg:gap-16">
|
|
{imagePosition === 'left' ? <>{media}{details}</> : <>{details}{media}</>}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|