Initial react editor website template

2026-08-29 14:03:50 -04:00
commit 3e072967e6
61 changed files with 7041 additions and 0 deletions
@@ -0,0 +1,43 @@
+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>
+  );
+}