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,57 @@
+import Link from 'next/link';
+import { Check } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
+
+export type PricingProps = {
+  heading?: string;
+  description?: string;
+  billingNote?: string;
+  plans?: Array<{
+    name: string;
+    price: string;
+    period: string;
+    description: string;
+    features: string;
+    ctaLabel: string;
+    ctaUrl: string;
+    badge?: string;
+    highlighted?: 'yes' | 'no';
+  }>;
+};
+
+export default function Pricing({ heading = '', description = '', billingNote = '', plans = [] }: PricingProps) {
+  return (
+    <section id="pricing" className="scroll-mt-20 bg-background py-20 sm:py-28">
+      <div className="section-shell">
+        <div className="mx-auto max-w-2xl text-center">
+          <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 text-base leading-7 text-muted-foreground">{description}</p>}
+          {billingNote && <p className="mt-3 text-sm text-muted-foreground">{billingNote}</p>}
+        </div>
+        <div className={`mx-auto mt-12 grid max-w-6xl gap-8 ${plans.length > 2 ? 'lg:grid-cols-3' : 'md:grid-cols-2'}`}>
+          {plans.map((plan, index) => (
+            <article key={`${plan.name}-${index}`} className="h-full">
+              <Card className={`h-full gap-0 bg-background py-0 shadow-none ${plan.highlighted === 'yes' ? 'border-brand ring-1 ring-brand/15' : ''}`}>
+                <CardHeader className="p-7 pb-0">
+                  <CardTitle><h3 className="text-xl font-medium">{plan.name}</h3></CardTitle>
+                  {plan.badge && <CardAction><span className="rounded-full bg-background px-2.5 py-1 text-[10px] font-semibold uppercase tracking-wider text-brand">{plan.badge}</span></CardAction>}
+                  <div className="col-span-full mt-5 flex items-end gap-1.5"><span className="text-5xl font-medium tracking-[-0.05em]">{plan.price}</span><span className="pb-1 text-sm text-muted-foreground">{plan.period}</span></div>
+                  <CardDescription className="col-span-full mt-3 min-h-12 leading-6">{plan.description}</CardDescription>
+                </CardHeader>
+                <CardContent className="flex-1 px-7 pt-8">
+                  <ul className="space-y-3">
+                    {plan.features.split('\n').map((feature) => feature.trim()).filter(Boolean).map((feature) => <li key={feature} className="flex gap-2.5 text-sm"><Check className="mt-0.5 size-4 shrink-0 text-brand" aria-hidden="true" />{feature}</li>)}
+                  </ul>
+                </CardContent>
+                <CardFooter className="p-7 pt-9">
+                  <Button asChild variant={plan.highlighted === 'yes' ? 'default' : 'outline'} size="lg" className="w-full"><Link href={plan.ctaUrl}>{plan.ctaLabel}</Link></Button>
+                </CardFooter>
+              </Card>
+            </article>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}