create-lacspace-app 1.10.0 → 1.12.0

package/dist/index.js

@@ -189,6 +189,8 @@ body {
   animation: gradient-pan 6s ease infinite;
 }
 .marquee-track { display: flex; width: max-content; animation: marquee-x 32s linear infinite; }
+@keyframes draw { to { stroke-dashoffset: 0; } }
+.animate-draw { stroke-dasharray: 2000; stroke-dashoffset: 2000; animation: draw 1.8s ease forwards; }
 .marquee-mask { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
 
 /* soft entrance for content */
@@ -775,6 +777,27 @@ export async function submitContact(prev: ContactState, formData: FormData): Pro
   console.log("New contact message:", r.data);
   return { ok: true };
 }
+
+const newsletter = createForm({
+  schema: v.object({ email: v.string().email("Enter a valid email").toLowerCase() }),
+  honeypot: "website",
+  minSubmitMs: 500,
+});
+
+export type SubscribeState =
+  | { ok: true }
+  | { ok: false; errors: Record<string, string>; values: Record<string, unknown> }
+  | null;
+
+export async function submitNewsletter(prev: SubscribeState, formData: FormData): Promise<SubscribeState> {
+  const r = newsletter.action(prev, formData);
+  if (!r.ok) return r;
+
+  // \u2705 r.data is fully typed: { email }
+  // TODO: add r.data.email to your list (Resend, Mailchimp, a database\u2026).
+  console.log("New subscriber:", r.data.email);
+  return { ok: true };
+}
 `;
 var contactForm = () => `"use client";
 import { useActionState } from "react";
@@ -1463,6 +1486,7 @@ function buildFiles(ctx) {
   for (const page of stubPages(ctx)) {
     files[`app${page.path}/page.tsx`] = isDash ? dashboardStubPage(page) : underDevPage(page);
   }
+  Object.assign(files, uiKitFiles());
   Object.assign(files, realPageFiles(ctx));
   if (isBlog) {
     files["lib/posts.ts"] = postsLib();
@@ -1487,7 +1511,7 @@ function pagesFor(ctx) {
   const k = ctx.template.key;
   if (k === "dashboard") {
     return [
-      { path: "/analytics", label: "Analytics", nav: true, group: "Product" },
+      { path: "/analytics", label: "Analytics", nav: true, group: "Product", real: true },
       { path: "/customers", label: "Customers", nav: true, group: "Product" },
       { path: "/billing", label: "Billing", nav: true, group: "Product" },
       { path: "/settings", label: "Settings", nav: true, group: "Product", real: true },
@@ -1529,7 +1553,7 @@ function pagesFor(ctx) {
     blog: [
       { path: "/blog", label: "Articles", nav: true, group: "Product", real: true },
       { path: "/topics", label: "Topics", nav: true, group: "Product", real: true },
-      { path: "/newsletter", label: "Newsletter", group: "Resources" }
+      { path: "/newsletter", label: "Newsletter", group: "Resources", real: true }
     ],
     docs: [
       { path: "/docs", label: "Docs", nav: true, group: "Product", real: true },
@@ -1878,39 +1902,58 @@ export function DashboardShell({ title, subtitle, children }: { title: string; s
 };
 var dashboardHome = (ctx) => `import { site } from "@/lib/site";
 import { DashboardShell } from "@/components/dashboard-shell";
-import { LiveStats } from "@/components/live-stats";
+import { StatCard, AreaChart } from "@/components/ui";
 
 export const metadata = site.meta({ title: "Overview", path: "/" });
 
 export default function Home() {
   return (
     <DashboardShell title="Overview" subtitle=${JSON.stringify(ctx.template.siteDescription)}>
-      <LiveStats />
-      <div className="mt-6 rounded-2xl border border-hairline bg-surface p-6">
-        <div className="mb-4 font-semibold">Recent activity</div>
-        <div className="space-y-3">
-          {[1, 2, 3, 4].map((i) => (
-            <div key={i} className="flex items-center justify-between border-b border-hairline pb-3 text-sm">
-              <span className="text-muted">Event #{i}</span>
-              <span className="text-faint">just now</span>
-            </div>
-          ))}
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+        <StatCard label="Revenue" value="$48.2k" delta="+12%" />
+        <StatCard label="Orders" value="1,204" delta="+8%" />
+        <StatCard label="Customers" value="8,430" delta="+3.4%" />
+        <StatCard label="Churn" value="1.2%" delta="-0.3%" />
+      </div>
+      <div className="mt-6 grid gap-6 lg:grid-cols-3">
+        <div className="rounded-2xl border border-hairline bg-surface p-6 lg:col-span-2">
+          <div className="mb-4 flex items-center justify-between">
+            <h2 className="font-semibold">Revenue</h2>
+            <span className="text-sm font-medium text-emerald-400">+12.4%</span>
+          </div>
+          <AreaChart data={[12, 18, 15, 22, 20, 28, 26, 34, 30, 38, 42, 48]} />
+        </div>
+        <div className="rounded-2xl border border-hairline bg-surface p-6">
+          <div className="mb-4 font-semibold">Recent activity</div>
+          <div className="space-y-3">
+            {[1, 2, 3, 4].map((i) => (
+              <div key={i} className="flex items-center justify-between border-b border-hairline pb-3 text-sm">
+                <span className="text-muted">Event #{i}</span>
+                <span className="text-faint">just now</span>
+              </div>
+            ))}
+          </div>
         </div>
       </div>
     </DashboardShell>
   );
 }
 `;
+var ctaBandJsx = (c2) => `      <CTABand title=${JSON.stringify(c2.title)}${c2.subtitle ? ` subtitle=${JSON.stringify(c2.subtitle)}` : ""}${c2.label ? ` ctaLabel=${JSON.stringify(c2.label)}` : ""}${c2.href ? ` ctaHref=${JSON.stringify(c2.href)}` : ""} />`;
 var pageFile = (o) => `import type { Metadata } from "next";
 import Link from "next/link";
 import { site } from "@/lib/site";
+import { Aurora } from "@/components/aurora";
+import { Section, Pill, StatCard, FeatureCard, Testimonial, Steps, CTABand, Bento, AreaChart, Newsletter } from "@/components/ui";
 
 export const metadata: Metadata = site.meta({ title: ${JSON.stringify(o.title)}, path: ${JSON.stringify(o.path)}, description: ${JSON.stringify(o.description)} });
 
 export default function Page() {
   return (
-    <main className="min-h-screen">
+    <main className="relative min-h-screen overflow-hidden">
+      <Aurora />
 ${o.body}
+${o.cta ? ctaBandJsx(o.cta) : ""}
     </main>
   );
 }
@@ -1919,9 +1962,10 @@ var pricingPage = (ctx) => pageFile({
   title: "Pricing",
   path: "/pricing",
   description: `Simple, transparent pricing for ${ctx.template.siteName}. Start free and upgrade anytime.`,
+  cta: { title: "Still deciding?", subtitle: "Talk to us and we'll help you pick the right plan.", label: "Contact sales", href: "/contact" },
   body: `      <section className="mx-auto max-w-3xl px-6 py-24 text-center">
-        <p className="text-sm font-semibold uppercase tracking-widest text-faint">Pricing</p>
-        <h1 className="mt-3 text-4xl font-bold sm:text-5xl">Simple, transparent <span className="gradient-text">pricing</span></h1>
+        <Pill>Pricing</Pill>
+        <h1 className="mt-4 text-4xl font-bold sm:text-5xl">Simple, transparent <span className="gradient-text">pricing</span></h1>
         <p className="mx-auto mt-4 max-w-xl text-lg text-muted">Start free. Upgrade when you're ready. Cancel anytime.</p>
       </section>
       <section className="mx-auto max-w-6xl px-6 pb-24">
@@ -1949,15 +1993,19 @@ var pricingPage = (ctx) => pageFile({
           ))}
         </div>
         <p className="mt-10 text-center text-sm text-faint">All plans include SSL, unlimited bandwidth and a 14-day money-back guarantee.</p>
+      </section>
+      <section className="px-6 pb-8">
+        <Testimonial quote="We switched in an afternoon and never looked back. Worth every penny." author="Sam Rivera" role="CTO, Globex" />
       </section>`
 });
 var servicesPage = (ctx) => pageFile({
   title: "Services",
   path: "/services",
   description: `What ${ctx.template.siteName} can do for you \u2014 from strategy to launch.`,
+  cta: { title: "Have a project in mind?", subtitle: "Tell us what you're building and we'll take it from there.", label: "Start a conversation", href: "/contact" },
   body: `      <section className="mx-auto max-w-3xl px-6 py-24 text-center">
-        <p className="text-sm font-semibold uppercase tracking-widest text-faint">Services</p>
-        <h1 className="mt-3 text-4xl font-bold sm:text-5xl">What we <span className="gradient-text">do</span></h1>
+        <Pill>Services</Pill>
+        <h1 className="mt-4 text-4xl font-bold sm:text-5xl">What we <span className="gradient-text">do</span></h1>
         <p className="mx-auto mt-4 max-w-xl text-lg text-muted">End-to-end help \u2014 from the first sketch to a product your customers love.</p>
       </section>
       <section className="mx-auto max-w-6xl px-6 pb-16">
@@ -1970,29 +2018,25 @@ var servicesPage = (ctx) => pageFile({
             { icon: "\u{1F4C8}", title: "Growth", desc: "Experiments and optimization that move the numbers." },
             { icon: "\u{1F91D}", title: "Support", desc: "Ongoing care so your product keeps getting better." },
           ].map((s) => (
-            <div key={s.title} className="rounded-2xl border border-hairline bg-surface p-6 transition hover:-translate-y-1">
-              <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-xl gradient-bg text-2xl">{s.icon}</div>
-              <h3 className="font-semibold">{s.title}</h3>
-              <p className="mt-1 text-sm text-muted">{s.desc}</p>
-            </div>
+            <FeatureCard key={s.title} icon={s.icon} title={s.title} desc={s.desc} />
           ))}
         </div>
       </section>
-      <section className="mx-auto max-w-3xl px-6 pb-24 text-center">
-        <h2 className="text-2xl font-bold">Have a project in mind?</h2>
-        <Link href="/contact" className="mt-6 inline-block rounded-full gradient-bg px-8 py-3 font-semibold text-black">Start a conversation</Link>
+      <section className="px-6 pb-8">
+        <Testimonial quote="They shipped faster than we thought possible \u2014 and it looked incredible." author="Jordan Ellis" role="Founder, Northwind" />
       </section>`
 });
 var featuresPage = (ctx) => pageFile({
   title: "Features",
   path: "/features",
   description: `Everything ${ctx.template.siteName} gives your team, in one place.`,
+  cta: { title: "Ready to ship faster?", subtitle: "Start free \u2014 no credit card required.", label: "See pricing", href: "/pricing" },
   body: `      <section className="mx-auto max-w-3xl px-6 py-24 text-center">
-        <p className="text-sm font-semibold uppercase tracking-widest text-faint">Features</p>
-        <h1 className="mt-3 text-4xl font-bold sm:text-5xl">Built to <span className="gradient-text">ship faster</span></h1>
+        <Pill>Features</Pill>
+        <h1 className="mt-4 text-4xl font-bold sm:text-5xl">Built to <span className="gradient-text">ship faster</span></h1>
         <p className="mx-auto mt-4 max-w-xl text-lg text-muted">A focused set of features that do the heavy lifting so your team can move.</p>
       </section>
-      <section className="mx-auto max-w-6xl px-6 pb-24">
+      <section className="mx-auto max-w-6xl px-6 pb-16">
         <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
           {[
             { icon: "\u26A1", title: "Fast by default", desc: "Edge-rendered and cached \u2014 instant everywhere." },
@@ -2002,25 +2046,37 @@ var featuresPage = (ctx) => pageFile({
             { icon: "\u{1F9E9}", title: "Extensible", desc: "A clean API and webhooks for anything custom." },
             { icon: "\u{1F317}", title: "Delightful UX", desc: "Dark mode, a \u2318K palette and thoughtful details." },
           ].map((f) => (
-            <div key={f.title} className="rounded-2xl border border-hairline bg-surface p-6 transition hover:-translate-y-1">
-              <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-xl gradient-bg text-2xl">{f.icon}</div>
-              <h3 className="font-semibold">{f.title}</h3>
-              <p className="mt-1 text-sm text-muted">{f.desc}</p>
-            </div>
+            <FeatureCard key={f.title} icon={f.icon} title={f.title} desc={f.desc} />
           ))}
         </div>
-        <div className="mt-12 text-center">
-          <Link href="/pricing" className="inline-block rounded-full gradient-bg px-8 py-3 font-semibold text-black">See pricing</Link>
-        </div>
+      </section>
+      <section className="mx-auto max-w-5xl px-6 pb-8">
+        <h2 className="mb-8 text-center text-2xl font-bold">How it works</h2>
+        <Steps items={[
+          { title: "Connect", desc: "Sign up and link the tools you already use." },
+          { title: "Configure", desc: "Set it up your way in a few clicks \u2014 no code required." },
+          { title: "Ship", desc: "Go live and watch the numbers in real time." },
+        ]} />
+      </section>
+      <section className="mx-auto max-w-6xl px-6 py-8">
+        <h2 className="mb-8 text-center text-2xl font-bold">One platform, everything included</h2>
+        <Bento items={[
+          { title: "Realtime dashboard", desc: "Everything as it happens, in one view.", icon: "\u{1F4CA}", className: "sm:col-span-2 sm:row-span-2" },
+          { title: "Webhooks", desc: "Automate anything.", icon: "\u{1F50C}" },
+          { title: "SSO & SAML", desc: "Enterprise-ready.", icon: "\u{1F510}" },
+          { title: "Audit logs", desc: "Full history.", icon: "\u{1F9FE}" },
+          { title: "99.99% uptime", desc: "Rock solid.", icon: "\u26A1" },
+        ]} />
       </section>`
 });
 var workPage = (ctx) => pageFile({
   title: "Work",
   path: "/work",
   description: `Selected projects by ${ctx.template.siteName}.`,
+  cta: { title: "Have something in mind?", subtitle: "I'm currently open to new projects.", label: "Get in touch", href: "/contact" },
   body: `      <section className="mx-auto max-w-3xl px-6 py-24">
-        <p className="text-sm font-semibold uppercase tracking-widest text-faint">Work</p>
-        <h1 className="mt-3 text-4xl font-bold sm:text-5xl">Selected <span className="gradient-text">work</span></h1>
+        <Pill>Work</Pill>
+        <h1 className="mt-4 text-4xl font-bold sm:text-5xl">Selected <span className="gradient-text">work</span></h1>
         <p className="mt-4 text-lg text-muted">A few things I've designed and built recently.</p>
       </section>
       <section className="mx-auto max-w-6xl px-6 pb-24">
@@ -2049,9 +2105,10 @@ var menuPage = (ctx) => pageFile({
   title: "Menu",
   path: "/menu",
   description: `The menu at ${ctx.template.siteName} \u2014 seasonal plates and natural wine.`,
+  cta: { title: "Hungry?", subtitle: "Book a table \u2014 we can't wait to cook for you.", label: "Reserve a table", href: "/reservations" },
   body: `      <section className="mx-auto max-w-3xl px-6 py-24 text-center">
-        <p className="text-sm font-semibold uppercase tracking-widest text-faint">Menu</p>
-        <h1 className="mt-3 text-4xl font-bold sm:text-5xl gradient-text">Tonight's menu</h1>
+        <Pill>Menu</Pill>
+        <h1 className="mt-4 text-4xl font-bold sm:text-5xl gradient-text">Tonight's menu</h1>
         <p className="mx-auto mt-4 max-w-xl text-lg text-muted">Seasonal, ingredient-led and always changing. Here's what we're serving now.</p>
       </section>
       <section className="mx-auto max-w-3xl px-6 pb-24">
@@ -2072,18 +2129,16 @@ var menuPage = (ctx) => pageFile({
             </div>
           </div>
         ))}
-        <div className="text-center">
-          <Link href="/reservations" className="inline-block rounded-full gradient-bg px-8 py-3 font-semibold text-black">Book a table</Link>
-        </div>
       </section>`
 });
 var cardGridPage = (o) => pageFile({
   title: o.title,
   path: o.path,
   description: o.lead,
+  cta: o.cta,
   body: `      <section className="mx-auto max-w-3xl px-6 py-24">
-        <p className="text-sm font-semibold uppercase tracking-widest text-faint">${o.eyebrow}</p>
-        <h1 className="mt-3 text-4xl font-bold sm:text-5xl">${o.heading}</h1>
+        <Pill>${o.eyebrow}</Pill>
+        <h1 className="mt-4 text-4xl font-bold sm:text-5xl">${o.heading}</h1>
         <p className="mt-4 text-lg text-muted">${o.lead}</p>
       </section>
       <section className="mx-auto max-w-6xl px-6 pb-24">
@@ -2103,6 +2158,7 @@ var topicsPage = (ctx) => cardGridPage({
   eyebrow: "Topics",
   heading: "Browse by topic",
   lead: "Find what you care about \u2014 from deep dives to quick notes.",
+  cta: { title: "Never miss a post", subtitle: "Subscribe and get new pieces in your inbox.", label: "Join the newsletter", href: "/newsletter" },
   items: [
     { title: "Engineering", desc: "How we build and the decisions behind it." },
     { title: "Design", desc: "Craft, systems and the details that matter." },
@@ -2118,6 +2174,7 @@ var guidesPage = (ctx) => cardGridPage({
   eyebrow: "Guides",
   heading: "Guides & tutorials",
   lead: "Task-focused walkthroughs to get you productive fast.",
+  cta: { title: "Can't find what you need?", subtitle: "We're happy to help \u2014 reach out any time.", label: "Contact us", href: "/contact" },
   items: [
     { title: "Getting started", desc: "Install, configure and run your first build." },
     { title: "Authentication", desc: "Add sign-in, sessions and protected routes." },
@@ -2127,6 +2184,51 @@ var guidesPage = (ctx) => cardGridPage({
     { title: "Troubleshooting", desc: "Fix the most common issues quickly." }
   ]
 });
+var newsletterPage = (ctx) => pageFile({
+  title: "Newsletter",
+  path: "/newsletter",
+  description: `Subscribe to ${ctx.template.siteName} \u2014 new posts straight to your inbox.`,
+  body: `      <section className="mx-auto max-w-3xl px-6 py-24 text-center">
+        <Pill>Newsletter</Pill>
+        <h1 className="mt-4 text-4xl font-bold sm:text-5xl">Join the <span className="gradient-text">list</span></h1>
+        <p className="mx-auto mt-4 max-w-xl text-lg text-muted">${ctx.template.siteDescription}</p>
+      </section>
+      <section className="px-6 pb-24">
+        <Newsletter title="Get new posts in your inbox" subtitle="A short email when we publish something new. Unsubscribe anytime." />
+      </section>`
+});
+var analyticsPage = (ctx) => `import type { Metadata } from "next";
+import { site } from "@/lib/site";
+import { DashboardShell } from "@/components/dashboard-shell";
+import { LiveStats } from "@/components/live-stats";
+import { StatCard, AreaChart } from "@/components/ui";
+
+export const metadata: Metadata = site.meta({ title: "Analytics", path: "/analytics", description: ${JSON.stringify(`Analytics for ${ctx.template.siteName}.`)} });
+
+export default function Page() {
+  return (
+    <DashboardShell title="Analytics" subtitle="Traffic, signups and revenue at a glance.">
+      <LiveStats />
+      <div className="mt-6 grid gap-6 lg:grid-cols-2">
+        <div className="rounded-2xl border border-hairline bg-surface p-6">
+          <div className="mb-4 flex items-center justify-between"><h2 className="font-semibold">Traffic</h2><span className="text-sm font-medium text-emerald-400">+18%</span></div>
+          <AreaChart gradientId="g-traffic" data={[8, 12, 10, 16, 14, 20, 22, 19, 26, 30, 28, 34]} />
+        </div>
+        <div className="rounded-2xl border border-hairline bg-surface p-6">
+          <div className="mb-4 flex items-center justify-between"><h2 className="font-semibold">Signups</h2><span className="text-sm font-medium text-emerald-400">+9%</span></div>
+          <AreaChart gradientId="g-signups" data={[3, 5, 4, 7, 9, 8, 11, 13, 12, 15, 18, 21]} />
+        </div>
+      </div>
+      <div className="mt-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+        <StatCard label="Sessions" value="48.2k" delta="+12%" />
+        <StatCard label="Avg. time" value="3m 14s" delta="+4%" />
+        <StatCard label="Bounce rate" value="38%" delta="-2%" />
+        <StatCard label="Conversion" value="3.4%" delta="+0.6%" />
+      </div>
+    </DashboardShell>
+  );
+}
+`;
 var shopPage = (ctx) => `import type { Metadata } from "next";
 import { site } from "@/lib/site";
 import { ProductGrid } from "@/components/product-grid";
@@ -2301,6 +2403,174 @@ export function SettingsPanel() {
   );
 }
 `;
+var uiKitFiles = () => ({
+  "components/ui/section.tsx": `import type { ReactNode } from "react";
+
+export function Section({ eyebrow, title, lead, children, className = "" }: { eyebrow?: string; title?: string; lead?: string; children?: ReactNode; className?: string }) {
+  return (
+    <section className={"mx-auto max-w-6xl px-6 py-16 " + className}>
+      {eyebrow ? <p className="text-sm font-semibold uppercase tracking-widest text-faint">{eyebrow}</p> : null}
+      {title ? <h2 className="mt-3 text-3xl font-bold sm:text-4xl">{title}</h2> : null}
+      {lead ? <p className="mt-4 max-w-2xl text-lg text-muted">{lead}</p> : null}
+      {children ? <div className="mt-10">{children}</div> : null}
+    </section>
+  );
+}
+`,
+  "components/ui/pill.tsx": `import type { ReactNode } from "react";
+
+export function Pill({ children, className = "" }: { children: ReactNode; className?: string }) {
+  return <span className={"inline-flex items-center gap-1 rounded-full border border-hairline bg-surface px-3 py-1 text-xs font-semibold uppercase tracking-widest text-muted " + className}>{children}</span>;
+}
+`,
+  "components/ui/stat-card.tsx": `export function StatCard({ label, value, delta }: { label: string; value: string; delta?: string }) {
+  return (
+    <div className="rounded-2xl border border-hairline bg-surface p-6 transition hover:-translate-y-1">
+      <div className="text-3xl font-bold tabular-nums">{value}</div>
+      <div className="mt-1 text-sm text-muted">{label}</div>
+      {delta ? <div className="mt-2 text-xs font-medium text-emerald-400">{delta}</div> : null}
+    </div>
+  );
+}
+`,
+  "components/ui/feature-card.tsx": `import type { ReactNode } from "react";
+
+export function FeatureCard({ icon, title, desc }: { icon?: ReactNode; title: string; desc: string }) {
+  return (
+    <div className="rounded-2xl border border-hairline bg-surface p-6 transition hover:-translate-y-1 hover:border-[color:var(--accent-to)]">
+      {icon ? <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-xl gradient-bg text-2xl">{icon}</div> : null}
+      <h3 className="font-semibold">{title}</h3>
+      <p className="mt-1 text-sm leading-relaxed text-muted">{desc}</p>
+    </div>
+  );
+}
+`,
+  "components/ui/testimonial.tsx": `export function Testimonial({ quote, author, role }: { quote: string; author: string; role?: string }) {
+  return (
+    <figure className="mx-auto max-w-2xl rounded-3xl border border-hairline bg-surface p-8 text-center">
+      <div className="text-4xl leading-none gradient-text">&ldquo;</div>
+      <blockquote className="mt-2 text-lg font-medium leading-relaxed">{quote}</blockquote>
+      <figcaption className="mt-4 text-sm text-muted">\u2014 {author}{role ? ", " + role : ""}</figcaption>
+    </figure>
+  );
+}
+`,
+  "components/ui/steps.tsx": `export function Steps({ items }: { items: { title: string; desc: string }[] }) {
+  return (
+    <ol className="grid gap-6 sm:grid-cols-3">
+      {items.map((s, i) => (
+        <li key={s.title} className="rounded-2xl border border-hairline bg-surface p-6">
+          <div className="mb-3 inline-flex h-8 w-8 items-center justify-center rounded-full gradient-bg text-sm font-bold text-black">{i + 1}</div>
+          <h3 className="font-semibold">{s.title}</h3>
+          <p className="mt-1 text-sm text-muted">{s.desc}</p>
+        </li>
+      ))}
+    </ol>
+  );
+}
+`,
+  "components/ui/cta-band.tsx": `import Link from "next/link";
+
+export function CTABand({ title, subtitle, ctaLabel = "Get started", ctaHref = "/contact" }: { title: string; subtitle?: string; ctaLabel?: string; ctaHref?: string }) {
+  return (
+    <section className="mx-auto max-w-6xl px-6 py-20">
+      <div className="relative overflow-hidden rounded-3xl border border-hairline bg-surface p-10 text-center sm:p-16">
+        <div aria-hidden className="pointer-events-none absolute -right-16 -top-16 h-56 w-56 rounded-full gradient-bg opacity-40 blur-3xl animate-floaty" />
+        <div aria-hidden className="pointer-events-none absolute -bottom-16 -left-16 h-56 w-56 rounded-full gradient-bg opacity-30 blur-3xl animate-floaty-slow" />
+        <h2 className="relative text-3xl font-bold sm:text-4xl">{title}</h2>
+        {subtitle ? <p className="relative mx-auto mt-3 max-w-xl text-muted">{subtitle}</p> : null}
+        <Link href={ctaHref} className="relative mt-8 inline-block rounded-full gradient-bg px-8 py-3 font-semibold text-black transition hover:opacity-90">{ctaLabel}</Link>
+      </div>
+    </section>
+  );
+}
+`,
+  "components/ui/bento.tsx": `import type { ReactNode } from "react";
+
+interface BentoItem { title: string; desc?: string; icon?: ReactNode; className?: string; }
+
+/** A modern, asymmetric "bento" grid. Pass className like "sm:col-span-2" to span. */
+export function Bento({ items }: { items: BentoItem[] }) {
+  return (
+    <div className="grid auto-rows-[minmax(150px,auto)] grid-cols-2 gap-4 sm:grid-cols-3">
+      {items.map((it) => (
+        <div key={it.title} className={"relative overflow-hidden rounded-3xl border border-hairline bg-surface p-6 transition hover:-translate-y-1 " + (it.className ?? "")}>
+          <div aria-hidden className="pointer-events-none absolute -right-8 -top-8 h-24 w-24 rounded-full gradient-bg opacity-20 blur-2xl" />
+          {it.icon ? <div className="mb-3 text-2xl">{it.icon}</div> : null}
+          <h3 className="relative font-semibold">{it.title}</h3>
+          {it.desc ? <p className="relative mt-1 text-sm text-muted">{it.desc}</p> : null}
+        </div>
+      ))}
+    </div>
+  );
+}
+`,
+  "components/ui/area-chart.tsx": `/** A dependency-free, theme-aware area chart with an animated draw. */
+export function AreaChart({ data, height = 160, gradientId = "lac-area", className = "" }: { data: number[]; height?: number; gradientId?: string; className?: string }) {
+  const w = 600;
+  const max = Math.max(...data, 1);
+  const min = Math.min(...data, 0);
+  const range = max - min || 1;
+  const step = data.length > 1 ? w / (data.length - 1) : w;
+  const pts = data.map((d, i) => [i * step, height - ((d - min) / range) * (height - 24) - 12] as const);
+  const line = pts.map((p, i) => (i === 0 ? "M" : "L") + p[0].toFixed(1) + " " + p[1].toFixed(1)).join(" ");
+  const area = line + " L" + w + " " + height + " L0 " + height + " Z";
+  return (
+    <svg viewBox={"0 0 " + w + " " + height} preserveAspectRatio="none" className={"w-full " + className} style={{ height }} role="img" aria-label="Chart">
+      <defs>
+        <linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0%" stopColor="var(--accent-to)" stopOpacity="0.35" />
+          <stop offset="100%" stopColor="var(--accent-to)" stopOpacity="0" />
+        </linearGradient>
+      </defs>
+      <path d={area} fill={"url(#" + gradientId + ")"} />
+      <path d={line} fill="none" stroke="var(--accent-to)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" className="animate-draw" />
+    </svg>
+  );
+}
+`,
+  "components/ui/newsletter.tsx": `"use client";
+
+import { useActionState } from "react";
+import { honeypotProps, timestampValue } from "@lacspace/form";
+import { submitNewsletter, type SubscribeState } from "@/app/actions";
+
+/** An email capture block \u2014 validated & spam-protected via @lacspace/form. */
+export function Newsletter({ title = "Stay in the loop", subtitle = "Occasional updates. No spam \u2014 unsubscribe anytime." }: { title?: string; subtitle?: string }) {
+  const [state, action, pending] = useActionState<SubscribeState, FormData>(submitNewsletter, null);
+  const err = state && !state.ok ? (state.errors.email ?? state.errors._form) : undefined;
+
+  return (
+    <div className="mx-auto max-w-xl rounded-3xl border border-hairline bg-surface p-8 text-center">
+      <h2 className="text-2xl font-bold">{title}</h2>
+      <p className="mt-2 text-sm text-muted">{subtitle}</p>
+      {state?.ok ? (
+        <p className="mt-6 rounded-xl border border-hairline bg-app p-4 text-sm">You&rsquo;re subscribed \u2014 thanks! \u2705</p>
+      ) : (
+        <form action={action} className="mt-6 flex flex-col gap-3 sm:flex-row">
+          <input name="email" type="email" placeholder="you@example.com" aria-label="Email" className="w-full flex-1 rounded-full border border-hairline bg-app px-5 py-3 outline-none focus:border-[color:var(--accent-to)]" />
+          <input {...honeypotProps("website")} />
+          <input type="hidden" name="_ts" defaultValue={timestampValue()} />
+          <button disabled={pending} className="rounded-full gradient-bg px-6 py-3 font-semibold text-black transition hover:opacity-90 disabled:opacity-60">{pending ? "Joining\u2026" : "Subscribe"}</button>
+        </form>
+      )}
+      {err ? <p className="mt-3 text-sm text-red-400">{err}</p> : null}
+    </div>
+  );
+}
+`,
+  "components/ui/index.ts": `export * from "./section";
+export * from "./pill";
+export * from "./stat-card";
+export * from "./feature-card";
+export * from "./testimonial";
+export * from "./steps";
+export * from "./cta-band";
+export * from "./bento";
+export * from "./area-chart";
+export * from "./newsletter";
+`
+});
 function realPageFiles(ctx) {
   const k = ctx.template.key;
   const f = {};
@@ -2319,12 +2589,16 @@ function realPageFiles(ctx) {
     f["components/product-grid.tsx"] = productGrid();
     f["components/cart-view.tsx"] = cartView();
   }
-  if (k === "blog") f["app/topics/page.tsx"] = topicsPage();
+  if (k === "blog") {
+    f["app/topics/page.tsx"] = topicsPage();
+    f["app/newsletter/page.tsx"] = newsletterPage(ctx);
+  }
   if (k === "docs") f["app/guides/page.tsx"] = guidesPage();
   if (k === "restaurant") f["app/menu/page.tsx"] = menuPage(ctx);
   if (k === "dashboard") {
     f["app/settings/page.tsx"] = settingsPage(ctx);
     f["components/settings-panel.tsx"] = settingsPanel();
+    f["app/analytics/page.tsx"] = analyticsPage(ctx);
   }
   return f;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-lacspace-app",
-  "version": "1.10.0",
+  "version": "1.12.0",
   "description": "Scaffold a beautiful, production-ready Next.js app from a Lacspace template — portfolio, business, e-commerce, SaaS, blog, docs, dashboard or restaurant — pre-wired with SEO, security headers, sitemap and robots. Like create-next-app, but you start gorgeous.",
   "type": "module",
   "bin": {