create-lacspace-app 1.8.0 → 1.10.0

package/dist/index.js

@@ -174,6 +174,23 @@ body {
 /* indeterminate progress bar (used by the "under development" pages) */
 @keyframes loadbar { 0% { transform: translateX(-120%); } 100% { transform: translateX(340%); } }
 
+/* ambient motion for illustrations & the aurora background */
+@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
+@keyframes spin-slow { to { transform: rotate(360deg); } }
+@keyframes gradient-pan { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
+@keyframes marquee-x { from { transform: translateX(0); } to { transform: translateX(-50%); } }
+.animate-floaty { animation: floaty 6s ease-in-out infinite; }
+.animate-floaty-slow { animation: floaty 9s ease-in-out infinite; }
+.animate-spin-slow { animation: spin-slow 26s linear infinite; }
+.gradient-text-animated {
+  background: linear-gradient(120deg, var(--accent-from), var(--accent-to), var(--accent-from));
+  background-size: 200% 200%;
+  -webkit-background-clip: text; background-clip: text; color: transparent;
+  animation: gradient-pan 6s ease infinite;
+}
+.marquee-track { display: flex; width: max-content; animation: marquee-x 32s linear infinite; }
+.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 */
 @keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
 main > section, main > * { animation: rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; }
@@ -323,7 +340,7 @@ boring-but-essential stuff already done. Here's what's in the box.
 - **\u2728 A working contact form** \u2014 \`/contact\` is live, typed, validated and spam-protected (honeypot + timing) via \`@lacspace/form\` + \`@lacspace/validate\`. Just point it at your inbox.
 - **\u2728 A \u2318K command palette** \u2014 press \`\u2318K\` / \`Ctrl-K\` anywhere, powered by \`@lacspace/ui\`. Also try \`<Reveal>\`, \`<Counter>\`, \`<GradientText>\`, \`<TiltCard>\`, \`<Marquee>\`, \`<Typewriter>\`.
 - **\u2728 Dark / light / system theme** \u2014 a no-flash toggle in the header via \`@lacspace/theme\` + \`@lacspace/hooks\`. The whole template is theme-aware.
-- **\u2728 Multiple pages + auto header & footer** \u2014 the nav and a full footer are generated from one page map. Every link resolves to a real, branded page \u2014 pages you haven't filled in yet show a friendly **"under development"** screen instead of a 404. Add content in \`app/<route>/page.tsx\`.
+- **\u2728 Multiple pages + auto header & footer** \u2014 the nav and a full footer are generated from one page map. The highest-value page for your template ships with **real content** (e.g. a pricing table, a shop with a working cart, a menu, a settings panel). Every other link still resolves to a real, branded page \u2014 ones you haven't filled in yet show a friendly **"under development"** screen instead of a 404. Add content in \`app/<route>/page.tsx\`.
 - **\u2728 Global state + data fetching** \u2014 a dismissible announcement bar and the mobile menu use \`@lacspace/store\` (with \`persist\`); the home page's live "By the numbers" strip fetches \`/api/stats\` with \`@lacspace/query\` (shared cache, revalidate-on-focus).
 - **\u2728 Per-page SEO** \u2014 see \`app/about\` & \`app/contact\`: one \`site.meta()\` call gives each route its own title, canonical & OG image.
 - **\u2728 An SEO CI gate** \u2014 \`.github/workflows/seo.yml\` audits every page on each push and fails below grade A, so SEO can never regress.
@@ -407,14 +424,21 @@ function homePage(ctx) {
   if (ctx.template.key === "dashboard") return dashboardHome(ctx);
   const shell = (inner) => `import { site } from "@/lib/site";
 import { LiveStats } from "@/components/live-stats";
+import { Aurora } from "@/components/aurora";
+import { HeroArt } from "@/components/hero-art";
 
 // \u2728 Self-canonical home page \u2014 one line, full SEO (title, canonical, OG, Twitter).
 export const metadata = site.meta({ title: ${JSON.stringify(n)}, path: "/" });
 
 export default function Home() {
   return (
-    <main className="min-h-screen">
+    <main className="relative min-h-screen overflow-hidden">
+      {/* \u2728 Animated, theme-aware gradient backdrop */}
+      <Aurora />
       ${inner}
+      ${showcaseSection(ctx)}
+      ${marqueeSection(ctx)}
+      ${faqSection(ctx)}
       ${builtWithSection(ctx)}
     </main>
   );
@@ -1433,10 +1457,13 @@ function buildFiles(ctx) {
     files["components/site-header.tsx"] = siteHeader(ctx);
     files["components/site-footer.tsx"] = siteFooter(ctx);
     files["components/announcement-bar.tsx"] = announcementBar();
+    files["components/aurora.tsx"] = aurora();
+    files["components/hero-art.tsx"] = heroArt(ctx);
   }
   for (const page of stubPages(ctx)) {
     files[`app${page.path}/page.tsx`] = isDash ? dashboardStubPage(page) : underDevPage(page);
   }
+  Object.assign(files, realPageFiles(ctx));
   if (isBlog) {
     files["lib/posts.ts"] = postsLib();
     files["app/blog/page.tsx"] = blogListPage(ctx);
@@ -1463,7 +1490,7 @@ function pagesFor(ctx) {
       { path: "/analytics", label: "Analytics", nav: true, group: "Product" },
       { path: "/customers", label: "Customers", nav: true, group: "Product" },
       { path: "/billing", label: "Billing", nav: true, group: "Product" },
-      { path: "/settings", label: "Settings", nav: true, group: "Product" },
+      { path: "/settings", label: "Settings", nav: true, group: "Product", real: true },
       { path: "/help", label: "Help", group: "Resources" }
     ];
   }
@@ -1476,41 +1503,42 @@ function pagesFor(ctx) {
   ];
   const specific = {
     personal: [
-      { path: "/work", label: "Work", nav: true, group: "Product" },
+      { path: "/work", label: "Work", nav: true, group: "Product", real: true },
       { path: "/blog", label: "Blog", nav: true, group: "Product" },
       { path: "/uses", label: "Uses", group: "Resources" }
     ],
     business: [
-      { path: "/services", label: "Services", nav: true, group: "Product" },
+      { path: "/services", label: "Services", nav: true, group: "Product", real: true },
       { path: "/work", label: "Work", nav: true, group: "Product" },
-      { path: "/pricing", label: "Pricing", nav: true, group: "Product" },
+      { path: "/pricing", label: "Pricing", nav: true, group: "Product", real: true },
       { path: "/faq", label: "FAQ", group: "Resources" }
     ],
     ecommerce: [
-      { path: "/shop", label: "Shop", nav: true, group: "Product" },
+      { path: "/shop", label: "Shop", nav: true, group: "Product", real: true },
       { path: "/collections", label: "Collections", nav: true, group: "Product" },
+      { path: "/cart", label: "Cart", group: "Product", real: true },
       { path: "/shipping", label: "Shipping", group: "Resources" },
       { path: "/returns", label: "Returns", group: "Resources" }
     ],
     saas: [
-      { path: "/features", label: "Features", nav: true, group: "Product" },
-      { path: "/pricing", label: "Pricing", nav: true, group: "Product" },
+      { path: "/features", label: "Features", nav: true, group: "Product", real: true },
+      { path: "/pricing", label: "Pricing", nav: true, group: "Product", real: true },
       { path: "/integrations", label: "Integrations", group: "Product" },
       { path: "/changelog", label: "Changelog", group: "Resources" }
     ],
     blog: [
       { path: "/blog", label: "Articles", nav: true, group: "Product", real: true },
-      { path: "/topics", label: "Topics", nav: true, group: "Product" },
+      { path: "/topics", label: "Topics", nav: true, group: "Product", real: true },
       { path: "/newsletter", label: "Newsletter", group: "Resources" }
     ],
     docs: [
       { path: "/docs", label: "Docs", nav: true, group: "Product", real: true },
-      { path: "/guides", label: "Guides", nav: true, group: "Product" },
+      { path: "/guides", label: "Guides", nav: true, group: "Product", real: true },
       { path: "/api-reference", label: "API", nav: true, group: "Product" },
       { path: "/changelog", label: "Changelog", group: "Resources" }
     ],
     restaurant: [
-      { path: "/menu", label: "Menu", nav: true, group: "Product" },
+      { path: "/menu", label: "Menu", nav: true, group: "Product", real: true },
       { path: "/reservations", label: "Reservations", nav: true, group: "Product" },
       { path: "/gallery", label: "Gallery", nav: true, group: "Product" },
       { path: "/events", label: "Private events", group: "Resources" }
@@ -1522,30 +1550,45 @@ function stubPages(ctx) {
   return pagesFor(ctx).filter((p) => !p.real);
 }
 var linkLiteral = (pages) => pages.map((l) => `{ href: ${JSON.stringify(l.path)}, label: ${JSON.stringify(l.label)} }`).join(", ");
-var siteHeader = (ctx) => `"use client";
+var siteHeader = (ctx) => {
+  const isEcom = ctx.template.key === "ecommerce";
+  const cartImport = isEcom ? `
+import { useCart } from "@/lib/store";
+import { useIsMounted } from "@lacspace/hooks";` : "";
+  const cartHook = isEcom ? `
+  const count = useCart((s) => s.items.length);
+  const mounted = useIsMounted();` : "";
+  const cartBtn = isEcom ? `
+          <Link href="/cart" aria-label="Cart" className="relative inline-flex h-9 w-9 items-center justify-center rounded-full border border-hairline text-muted transition hover:text-fg">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden><circle cx="9" cy="21" r="1" /><circle cx="20" cy="21" r="1" /><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6" /></svg>
+            {mounted() && count > 0 ? (
+              <span className="absolute -right-1 -top-1 inline-flex h-4 min-w-4 items-center justify-center rounded-full gradient-bg px-1 text-[10px] font-bold text-black">{count}</span>
+            ) : null}
+          </Link>` : "";
+  return `"use client";
 
 import Link from "next/link";
 import { useUI } from "@/lib/store";
-import { ThemeToggle } from "./theme-toggle";
+import { ThemeToggle } from "./theme-toggle";${cartImport}
 
 const LINKS = [${linkLiteral(pagesFor(ctx).filter((p) => p.nav))}];
 
 export function SiteHeader() {
   const open = useUI((s) => s.navOpen);
   const toggle = useUI((s) => s.toggleNav);
-  const setOpen = useUI((s) => s.setNavOpen);
+  const setOpen = useUI((s) => s.setNavOpen);${cartHook}
   return (
     <header className="sticky top-0 z-40 border-b border-hairline bg-app/90 backdrop-blur">
       <nav className="mx-auto flex max-w-6xl items-center justify-between px-6 py-4">
         <Link href="/" className="text-lg font-black gradient-text">${ctx.template.siteName}</Link>
-        <div className="hidden items-center gap-8 md:flex">
+        <div className="hidden items-center gap-6 md:flex">
           {LINKS.map((l) => (
             <Link key={l.href} href={l.href} className="text-sm text-muted transition hover:text-fg">{l.label}</Link>
           ))}
-          <ThemeToggle />
+          <ThemeToggle />${cartBtn}
         </div>
         <div className="flex items-center gap-2 md:hidden">
-          <ThemeToggle />
+          <ThemeToggle />${cartBtn}
           <button type="button" aria-label="Menu" onClick={toggle} className="inline-flex h-9 w-9 items-center justify-center rounded-full border border-hairline text-muted transition hover:text-fg">
             <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden><path d="M3 6h18M3 12h18M3 18h18" /></svg>
           </button>
@@ -1564,6 +1607,7 @@ export function SiteHeader() {
   );
 }
 `;
+};
 var siteFooter = (ctx) => {
   const pages = pagesFor(ctx);
   const groups = ["Product", "Company", "Resources"].map((title) => ({ title, items: pages.filter((p) => p.group === title) })).filter((g) => g.items.length > 0);
@@ -1707,6 +1751,32 @@ export const useAnnouncement = create<AnnouncementState>(
     { name: "announcement" },
   ),
 );
+
+/** A tiny shopping cart \u2014 persisted to localStorage. */
+export interface CartItem { id: string; name: string; price: number; }
+interface CartState {
+  items: CartItem[];
+  add: (item: CartItem) => void;
+  remove: (id: string) => void;
+  clear: () => void;
+}
+export const useCart = create<CartState>(
+  persist(
+    (set) => ({
+      items: [],
+      add: (item) => set((s) => ({ items: [...s.items, item] })),
+      remove: (id) => set((s) => {
+        const i = s.items.findIndex((x) => x.id === id);
+        if (i === -1) return {};
+        const items = s.items.slice();
+        items.splice(i, 1);
+        return { items };
+      }),
+      clear: () => set({ items: [] }),
+    }),
+    { name: "cart" },
+  ),
+);
 `;
 var statsRoute = () => `import { NextResponse } from "next/server";
 
@@ -1831,6 +1901,621 @@ export default function Home() {
   );
 }
 `;
+var pageFile = (o) => `import type { Metadata } from "next";
+import Link from "next/link";
+import { site } from "@/lib/site";
+
+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">
+${o.body}
+    </main>
+  );
+}
+`;
+var pricingPage = (ctx) => pageFile({
+  title: "Pricing",
+  path: "/pricing",
+  description: `Simple, transparent pricing for ${ctx.template.siteName}. Start free and upgrade anytime.`,
+  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>
+        <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">
+        <div className="grid gap-6 md:grid-cols-3">
+          {[
+            { name: "Starter", price: "$0", period: "/mo", tagline: "For side projects", features: ["1 project", "Community support", "Basic analytics"], cta: "Get started", highlight: false },
+            { name: "Pro", price: "$29", period: "/mo", tagline: "For growing teams", features: ["Unlimited projects", "Priority support", "Advanced analytics", "Custom domain"], cta: "Start free trial", highlight: true },
+            { name: "Scale", price: "Custom", period: "", tagline: "For organizations", features: ["SSO & SAML", "Dedicated support", "SLA & audit logs", "Guided onboarding"], cta: "Contact sales", highlight: false },
+          ].map((tier) => (
+            <div key={tier.name} className={"flex flex-col rounded-3xl border p-8 " + (tier.highlight ? "border-transparent bg-surface ring-2 ring-[color:var(--accent-to)]" : "border-hairline bg-surface")}>
+              {tier.highlight ? <span className="mb-4 inline-block w-fit rounded-full gradient-bg px-3 py-1 text-xs font-bold text-black">Most popular</span> : null}
+              <h2 className="text-lg font-semibold">{tier.name}</h2>
+              <p className="mt-1 text-sm text-muted">{tier.tagline}</p>
+              <div className="mt-6 flex items-baseline gap-1">
+                <span className="text-4xl font-black">{tier.price}</span>
+                <span className="text-muted">{tier.period}</span>
+              </div>
+              <ul className="mt-6 flex-1 space-y-3 text-sm">
+                {tier.features.map((f) => (
+                  <li key={f} className="flex items-center gap-2 text-muted"><span className="text-[color:var(--accent-to)]">\u2713</span> {f}</li>
+                ))}
+              </ul>
+              <Link href="/contact" className={"mt-8 rounded-full px-6 py-3 text-center font-semibold transition " + (tier.highlight ? "gradient-bg text-black" : "border border-hairline hover:bg-app")}>{tier.cta}</Link>
+            </div>
+          ))}
+        </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>`
+});
+var servicesPage = (ctx) => pageFile({
+  title: "Services",
+  path: "/services",
+  description: `What ${ctx.template.siteName} can do for you \u2014 from strategy to launch.`,
+  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>
+        <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">
+        <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+          {[
+            { icon: "\u{1F3AF}", title: "Strategy", desc: "Positioning, roadmaps and the plan to get there." },
+            { icon: "\u{1F3A8}", title: "Design", desc: "Brand, UX and interfaces people enjoy using." },
+            { icon: "\u{1F6E0}\uFE0F", title: "Development", desc: "Fast, accessible, maintainable web and mobile apps." },
+            { icon: "\u{1F680}", title: "Launch", desc: "Ship with confidence \u2014 SEO, analytics and monitoring." },
+            { 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>
+          ))}
+        </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>`
+});
+var featuresPage = (ctx) => pageFile({
+  title: "Features",
+  path: "/features",
+  description: `Everything ${ctx.template.siteName} gives your team, in one place.`,
+  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>
+        <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">
+        <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." },
+            { icon: "\u{1F512}", title: "Secure", desc: "Hardened headers, auth and audit logs out of the box." },
+            { icon: "\u{1F4CA}", title: "Analytics", desc: "Understand usage without bolting on a dozen tools." },
+            { icon: "\u{1F50C}", title: "Integrations", desc: "Connect the tools you already use in a click." },
+            { 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>
+          ))}
+        </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>`
+});
+var workPage = (ctx) => pageFile({
+  title: "Work",
+  path: "/work",
+  description: `Selected projects by ${ctx.template.siteName}.`,
+  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>
+        <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">
+        <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+          {[
+            { title: "Aurora", tag: "Product design", year: "2026" },
+            { title: "Northwind", tag: "Web app", year: "2025" },
+            { title: "Lumen", tag: "Branding", year: "2025" },
+            { title: "Harbor", tag: "Mobile app", year: "2024" },
+            { title: "Cadence", tag: "Design system", year: "2024" },
+            { title: "Meadow", tag: "Marketing site", year: "2023" },
+          ].map((p) => (
+            <div key={p.title} className="group rounded-2xl border border-hairline bg-surface p-6 transition hover:-translate-y-1">
+              <div className="mb-4 aspect-video rounded-xl gradient-bg opacity-80 transition group-hover:opacity-100" />
+              <div className="flex items-center justify-between">
+                <h3 className="font-semibold">{p.title}</h3>
+                <span className="text-xs text-faint">{p.year}</span>
+              </div>
+              <p className="mt-1 text-sm text-muted">{p.tag}</p>
+            </div>
+          ))}
+        </div>
+      </section>`
+});
+var menuPage = (ctx) => pageFile({
+  title: "Menu",
+  path: "/menu",
+  description: `The menu at ${ctx.template.siteName} \u2014 seasonal plates and natural wine.`,
+  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>
+        <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">
+        {[
+          { section: "Starters", items: [ { n: "Charred leeks, hazelnut", p: "$14" }, { n: "Burrata, heirloom tomato", p: "$16" }, { n: "Wood-fired sourdough", p: "$7" } ] },
+          { section: "Mains", items: [ { n: "Handmade tagliatelle", p: "$22" }, { n: "Wood-fired trout", p: "$28" }, { n: "Dry-aged sirloin", p: "$34" } ] },
+          { section: "Dessert", items: [ { n: "Olive oil cake", p: "$11" }, { n: "Dark chocolate tart", p: "$12" } ] },
+        ].map((group) => (
+          <div key={group.section} className="mb-12">
+            <h2 className="mb-6 text-2xl font-bold">{group.section}</h2>
+            <div className="space-y-4">
+              {group.items.map((d) => (
+                <div key={d.n} className="flex items-baseline justify-between gap-4 border-b border-hairline pb-3">
+                  <span className="font-medium">{d.n}</span>
+                  <span className="shrink-0 gradient-text font-bold">{d.p}</span>
+                </div>
+              ))}
+            </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,
+  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>
+        <p className="mt-4 text-lg text-muted">${o.lead}</p>
+      </section>
+      <section className="mx-auto max-w-6xl px-6 pb-24">
+        <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+          {${JSON.stringify(o.items)}.map((it) => (
+            <div key={it.title} className="rounded-2xl border border-hairline bg-surface p-6 transition hover:-translate-y-1 hover:border-[color:var(--accent-to)]">
+              <h3 className="font-semibold">{it.title}</h3>
+              <p className="mt-2 text-sm text-muted">{it.desc}</p>
+            </div>
+          ))}
+        </div>
+      </section>`
+});
+var topicsPage = (ctx) => cardGridPage({
+  title: "Topics",
+  path: "/topics",
+  eyebrow: "Topics",
+  heading: "Browse by topic",
+  lead: "Find what you care about \u2014 from deep dives to quick notes.",
+  items: [
+    { title: "Engineering", desc: "How we build and the decisions behind it." },
+    { title: "Design", desc: "Craft, systems and the details that matter." },
+    { title: "Product", desc: "What we're shipping and why." },
+    { title: "Culture", desc: "How we work and what we believe." },
+    { title: "Tutorials", desc: "Step-by-step, hands-on guides." },
+    { title: "Announcements", desc: "News and releases." }
+  ]
+});
+var guidesPage = (ctx) => cardGridPage({
+  title: "Guides",
+  path: "/guides",
+  eyebrow: "Guides",
+  heading: "Guides & tutorials",
+  lead: "Task-focused walkthroughs to get you productive fast.",
+  items: [
+    { title: "Getting started", desc: "Install, configure and run your first build." },
+    { title: "Authentication", desc: "Add sign-in, sessions and protected routes." },
+    { title: "Deployment", desc: "Ship to production the right way." },
+    { title: "Best practices", desc: "Patterns that scale as your app grows." },
+    { title: "Migrations", desc: "Upgrade safely between versions." },
+    { title: "Troubleshooting", desc: "Fix the most common issues quickly." }
+  ]
+});
+var shopPage = (ctx) => `import type { Metadata } from "next";
+import { site } from "@/lib/site";
+import { ProductGrid } from "@/components/product-grid";
+
+export const metadata: Metadata = site.meta({ title: "Shop", path: "/shop", description: ${JSON.stringify(`Shop everything at ${ctx.template.siteName}.`)} });
+
+export default function Page() {
+  return (
+    <main className="mx-auto min-h-screen max-w-6xl px-6 py-24">
+      <p className="text-sm font-semibold uppercase tracking-widest text-faint">Shop</p>
+      <h1 className="mt-3 text-4xl font-bold">Everything in the <span className="gradient-text">store</span></h1>
+      <p className="mt-4 max-w-xl text-muted">Add items to your bag \u2014 it's saved locally with @lacspace/store, so it survives a refresh.</p>
+      <div className="mt-12"><ProductGrid /></div>
+    </main>
+  );
+}
+`;
+var cartPage = () => `import type { Metadata } from "next";
+import { site } from "@/lib/site";
+import { CartView } from "@/components/cart-view";
+
+export const metadata: Metadata = site.meta({ title: "Your bag", path: "/cart", description: "Review the items in your bag." });
+
+export default function Page() {
+  return (
+    <main className="mx-auto min-h-screen max-w-6xl px-6 py-24">
+      <h1 className="text-4xl font-bold">Your <span className="gradient-text">bag</span></h1>
+      <div className="mt-12"><CartView /></div>
+    </main>
+  );
+}
+`;
+var productGrid = () => `"use client";
+
+import { useCart } from "@/lib/store";
+
+const PRODUCTS = [
+  { id: "p1", name: "Aurora Mug", price: 18, emoji: "\u2615" },
+  { id: "p2", name: "Field Notebook", price: 12, emoji: "\u{1F4D3}" },
+  { id: "p3", name: "Canvas Tote", price: 24, emoji: "\u{1F45C}" },
+  { id: "p4", name: "Enamel Pin", price: 8, emoji: "\u{1F4CC}" },
+  { id: "p5", name: "Cotton Tee", price: 28, emoji: "\u{1F455}" },
+  { id: "p6", name: "Sticker Pack", price: 6, emoji: "\u2728" },
+  { id: "p7", name: "Ceramic Vase", price: 42, emoji: "\u{1F3FA}" },
+  { id: "p8", name: "Linen Apron", price: 34, emoji: "\u{1F9F5}" },
+];
+
+export function ProductGrid() {
+  const add = useCart((s) => s.add);
+  return (
+    <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
+      {PRODUCTS.map((p) => (
+        <div key={p.id} className="flex flex-col rounded-2xl border border-hairline bg-surface p-5">
+          <div className="mb-4 flex aspect-square items-center justify-center rounded-xl gradient-bg text-5xl">{p.emoji}</div>
+          <h3 className="font-semibold">{p.name}</h3>
+          <div className="mt-1 text-muted">{"$" + p.price.toFixed(2)}</div>
+          <button type="button" onClick={() => add({ id: p.id, name: p.name, price: p.price })} className="mt-4 rounded-full gradient-bg px-4 py-2 text-sm font-semibold text-black transition hover:opacity-90">Add to bag</button>
+        </div>
+      ))}
+    </div>
+  );
+}
+`;
+var cartView = () => `"use client";
+
+import Link from "next/link";
+import { useCart } from "@/lib/store";
+import { useIsMounted } from "@lacspace/hooks";
+
+export function CartView() {
+  const items = useCart((s) => s.items);
+  const remove = useCart((s) => s.remove);
+  const clear = useCart((s) => s.clear);
+  const mounted = useIsMounted();
+
+  if (!mounted()) return <div className="py-16 text-center text-muted">Loading your bag\u2026</div>;
+
+  if (items.length === 0) {
+    return (
+      <div className="mx-auto max-w-md py-16 text-center">
+        <p className="text-lg text-muted">Your bag is empty.</p>
+        <Link href="/shop" className="mt-6 inline-block rounded-full gradient-bg px-6 py-3 font-semibold text-black">Browse the shop</Link>
+      </div>
+    );
+  }
+
+  const total = items.reduce((sum, i) => sum + i.price, 0);
+
+  return (
+    <div className="mx-auto max-w-2xl">
+      <ul className="divide-y divide-hairline">
+        {items.map((i, idx) => (
+          <li key={i.id + "-" + idx} className="flex items-center justify-between py-4">
+            <span className="font-medium">{i.name}</span>
+            <span className="flex items-center gap-4">
+              <span className="tabular-nums text-muted">{"$" + i.price.toFixed(2)}</span>
+              <button type="button" onClick={() => remove(i.id)} aria-label="Remove" className="text-faint transition hover:text-fg">\u2715</button>
+            </span>
+          </li>
+        ))}
+      </ul>
+      <div className="mt-6 flex items-center justify-between border-t border-hairline pt-6">
+        <button type="button" onClick={clear} className="text-sm text-muted transition hover:text-fg">Clear bag</button>
+        <span className="text-lg font-bold">Total {"$" + total.toFixed(2)}</span>
+      </div>
+      <button type="button" className="mt-8 w-full rounded-full gradient-bg px-6 py-3 font-semibold text-black">Checkout</button>
+    </div>
+  );
+}
+`;
+var settingsPage = (ctx) => `import type { Metadata } from "next";
+import { site } from "@/lib/site";
+import { DashboardShell } from "@/components/dashboard-shell";
+import { SettingsPanel } from "@/components/settings-panel";
+
+export const metadata: Metadata = site.meta({ title: "Settings", path: "/settings", description: ${JSON.stringify(`Manage your ${ctx.template.siteName} preferences.`)} });
+
+export default function Page() {
+  return (
+    <DashboardShell title="Settings" subtitle="Manage your preferences.">
+      <SettingsPanel />
+    </DashboardShell>
+  );
+}
+`;
+var settingsPanel = () => `"use client";
+
+import { useLocalStorage } from "@lacspace/hooks";
+import { useTheme } from "@lacspace/theme";
+
+export function SettingsPanel() {
+  // Persisted to the browser with @lacspace/hooks.
+  const [emailNotifs, setEmailNotifs] = useLocalStorage("settings:emailNotifs", true);
+  const [weekly, setWeekly] = useLocalStorage("settings:weeklyDigest", false);
+  const { theme, setTheme } = useTheme();
+
+  const toggle = (on: boolean) =>
+    "relative h-6 w-11 rounded-full transition " + (on ? "gradient-bg" : "bg-panel");
+  const knob = (on: boolean) =>
+    "absolute top-0.5 h-5 w-5 rounded-full bg-white transition-all " + (on ? "left-[1.375rem]" : "left-0.5");
+
+  return (
+    <div className="max-w-xl space-y-8">
+      <section className="rounded-2xl border border-hairline bg-surface p-6">
+        <h2 className="font-semibold">Notifications</h2>
+        <p className="mt-1 text-sm text-muted">Saved to your browser with @lacspace/hooks (useLocalStorage).</p>
+        <div className="mt-5 space-y-4">
+          <label className="flex items-center justify-between gap-4">
+            <span className="text-sm">Email notifications</span>
+            <button type="button" role="switch" aria-checked={emailNotifs} onClick={() => setEmailNotifs((v) => !v)} className={toggle(emailNotifs)}>
+              <span className={knob(emailNotifs)} />
+            </button>
+          </label>
+          <label className="flex items-center justify-between gap-4">
+            <span className="text-sm">Weekly digest</span>
+            <button type="button" role="switch" aria-checked={weekly} onClick={() => setWeekly((v) => !v)} className={toggle(weekly)}>
+              <span className={knob(weekly)} />
+            </button>
+          </label>
+        </div>
+      </section>
+      <section className="rounded-2xl border border-hairline bg-surface p-6">
+        <h2 className="font-semibold">Appearance</h2>
+        <p className="mt-1 text-sm text-muted">Theme via @lacspace/theme.</p>
+        <div className="mt-4 inline-flex rounded-full border border-hairline p-1">
+          {["light", "dark", "system"].map((t) => (
+            <button key={t} type="button" onClick={() => setTheme(t)} className={"rounded-full px-4 py-1.5 text-sm capitalize transition " + (theme === t ? "gradient-bg font-semibold text-black" : "text-muted hover:text-fg")}>{t}</button>
+          ))}
+        </div>
+      </section>
+    </div>
+  );
+}
+`;
+function realPageFiles(ctx) {
+  const k = ctx.template.key;
+  const f = {};
+  if (k === "personal") f["app/work/page.tsx"] = workPage(ctx);
+  if (k === "business") {
+    f["app/services/page.tsx"] = servicesPage(ctx);
+    f["app/pricing/page.tsx"] = pricingPage(ctx);
+  }
+  if (k === "saas") {
+    f["app/features/page.tsx"] = featuresPage(ctx);
+    f["app/pricing/page.tsx"] = pricingPage(ctx);
+  }
+  if (k === "ecommerce") {
+    f["app/shop/page.tsx"] = shopPage(ctx);
+    f["app/cart/page.tsx"] = cartPage();
+    f["components/product-grid.tsx"] = productGrid();
+    f["components/cart-view.tsx"] = cartView();
+  }
+  if (k === "blog") f["app/topics/page.tsx"] = topicsPage();
+  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();
+  }
+  return f;
+}
+function creativeData(ctx) {
+  const n = ctx.template.siteName;
+  const map = {
+    personal: {
+      emoji: "\u{1F44B}",
+      chips: ["Design", "Code", "Ship"],
+      showcaseTitle: "Design & build, end to end",
+      showcaseLead: `${n} turns ideas into polished products \u2014 from the first sketch to the last pixel.`,
+      bullets: ["10+ years shipping web & mobile", "Design systems that scale", "Obsessed with the details"],
+      marqueeLabel: "Worked with",
+      marquee: ["Aurora", "Northwind", "Lumen", "Harbor", "Cadence", "Meadow"],
+      faq: [
+        { q: "Are you available for freelance?", a: "Yes \u2014 I take on a couple of projects each quarter. Reach out via the contact page." },
+        { q: "What do you work with?", a: "React, Next.js and TypeScript, with a lot of care for UX and performance." },
+        { q: "Do you do both design and development?", a: "Both \u2014 I can take a project from concept all the way to production." }
+      ]
+    },
+    business: {
+      emoji: "\u{1F3E2}",
+      chips: ["Strategy", "Design", "Launch"],
+      showcaseTitle: "Everything you need to grow",
+      showcaseLead: `${n} partners with you from strategy to launch \u2014 one senior team, accountable for outcomes.`,
+      bullets: ["Senior team, no hand-offs", "Fixed timelines & clear pricing", "We sweat the details"],
+      marqueeLabel: "Trusted by teams at",
+      marquee: ["Northwind", "Globex", "Initech", "Umbrella", "Soylent", "Hooli"],
+      faq: [
+        { q: "How do engagements work?", a: "We scope a clear plan, agree a fixed timeline, and ship in weekly increments." },
+        { q: "What does it cost?", a: "See our pricing page for plans, or contact us for a custom quote." },
+        { q: "How soon can we start?", a: "Usually within two weeks. Get in touch to check availability." }
+      ]
+    },
+    ecommerce: {
+      emoji: "\u{1F6CD}\uFE0F",
+      chips: ["Shop", "Bag", "Checkout"],
+      showcaseTitle: "Thoughtfully made, delivered fast",
+      showcaseLead: `${n} curates beautiful things and ships them worldwide \u2014 with easy returns, always.`,
+      bullets: ["Free worldwide shipping", "30-day easy returns", "Sustainably sourced"],
+      marqueeLabel: "Why shop with us",
+      marquee: ["Free shipping", "Easy returns", "Secure checkout", "Ethically made", "Gift wrapping", "Loved by 10k+"],
+      faq: [
+        { q: "How long is shipping?", a: "Most orders arrive in 3\u20135 business days with free worldwide shipping." },
+        { q: "What's your return policy?", a: "30 days, no questions asked \u2014 see the returns page for details." },
+        { q: "Is checkout secure?", a: "Yes \u2014 payments are encrypted and we never store your card details." }
+      ]
+    },
+    saas: {
+      emoji: "\u26A1",
+      chips: ["Analytics", "Billing", "API"],
+      showcaseTitle: "The platform your team will love",
+      showcaseLead: `${n} brings analytics, billing and automation into one fast, secure place.`,
+      bullets: ["Set up in minutes", "SOC 2-ready security", "Scales with you"],
+      marqueeLabel: "Powering teams at",
+      marquee: ["Globex", "Initech", "Hooli", "Pied Piper", "Umbrella", "Stark"],
+      faq: [
+        { q: "Is there a free plan?", a: "Yes \u2014 start free and upgrade when you're ready. See the pricing page." },
+        { q: "How is my data secured?", a: "Encryption in transit and at rest, audit logs, and SSO on higher plans." },
+        { q: "Can I self-host?", a: "Contact sales \u2014 we offer flexible deployment options." }
+      ]
+    },
+    blog: {
+      emoji: "\u270D\uFE0F",
+      chips: ["Essays", "Notes", "Stories"],
+      showcaseTitle: "Words worth your time",
+      showcaseLead: `${n} publishes essays and notes on building things that matter \u2014 no fluff.`,
+      bullets: ["New pieces most weeks", "No clickbait, ever", "Written by practitioners"],
+      marqueeLabel: "Topics we cover",
+      marquee: ["Engineering", "Design", "Product", "Culture", "Tutorials", "Announcements"],
+      faq: [
+        { q: "How often do you publish?", a: "A new piece most weeks \u2014 subscribe so you never miss one." },
+        { q: "Can I contribute?", a: "We love guest posts. Pitch us via the contact page." },
+        { q: "Is there a newsletter?", a: "Yes \u2014 head to the newsletter page to join." }
+      ]
+    },
+    docs: {
+      emoji: "\u{1F4DA}",
+      chips: ["Guides", "API", "Examples"],
+      showcaseTitle: "Everything you need to build",
+      showcaseLead: `${n} gives you guides, API references and copy-paste examples \u2014 all in one place.`,
+      bullets: ["Quickstart in 5 minutes", "Searchable & versioned", "Real, runnable examples"],
+      marqueeLabel: "What you'll find",
+      marquee: ["Quickstart", "Guides", "API reference", "Examples", "Migrations", "Troubleshooting"],
+      faq: [
+        { q: "Where do I start?", a: "Head to the guides for a 5-minute quickstart." },
+        { q: "Is there an API reference?", a: "Yes \u2014 the API page has the full reference." },
+        { q: "How do I report a docs issue?", a: "Use the contact page \u2014 we fix docs fast." }
+      ]
+    },
+    restaurant: {
+      emoji: "\u{1F377}",
+      chips: ["Menu", "Wine", "Reserve"],
+      showcaseTitle: "Seasonal plates, natural wine",
+      showcaseLead: `${n} serves ingredient-led plates and natural wine in a warm, low-lit room.`,
+      bullets: ["Menu changes with the seasons", "Natural, low-intervention wine", "Walk-ins welcome"],
+      marqueeLabel: "On the pass",
+      marquee: ["Wood-fired", "Local produce", "Natural wine", "House-made pasta", "Seasonal", "Fresh sourdough"],
+      faq: [
+        { q: "Do you take reservations?", a: "Yes \u2014 book via the reservations page. Walk-ins are welcome too." },
+        { q: "Any dietary options?", a: "Plenty \u2014 vegetarian and vegan plates change weekly. Just ask about allergies." },
+        { q: "When are you open?", a: "Wednesday to Sunday, 5pm till late." }
+      ]
+    }
+  };
+  return map[ctx.template.key] ?? map.business;
+}
+var aurora = () => `export function Aurora() {
+  return (
+    <div aria-hidden className="pointer-events-none absolute inset-x-0 top-0 -z-10 h-[720px] overflow-hidden">
+      <div className="absolute -left-20 -top-16 h-96 w-96 rounded-full opacity-30 blur-3xl animate-floaty" style={{ background: "radial-gradient(circle, var(--accent-from), transparent 70%)" }} />
+      <div className="absolute -right-10 top-40 h-80 w-80 rounded-full opacity-25 blur-3xl animate-floaty-slow" style={{ background: "radial-gradient(circle, var(--accent-to), transparent 70%)" }} />
+      <div className="absolute left-1/3 top-72 h-72 w-72 rounded-full opacity-20 blur-3xl animate-floaty" style={{ background: "radial-gradient(circle, var(--accent-to), transparent 70%)" }} />
+    </div>
+  );
+}
+`;
+var heroArt = (ctx) => {
+  const d = creativeData(ctx);
+  const initials = ctx.template.siteName.trim().split(/\s+/).slice(0, 2).map((w) => (w[0] ?? "").toUpperCase()).join("") || "A";
+  return `export function HeroArt() {
+  return (
+    <div className="relative mx-auto aspect-square w-full max-w-sm select-none">
+      {/* orbiting rings */}
+      <div className="absolute inset-0 rounded-full border border-hairline animate-spin-slow" />
+      <div className="absolute inset-10 rounded-full border border-hairline animate-spin-slow" style={{ animationDirection: "reverse" }} />
+      <div className="absolute inset-0 rounded-full opacity-40 blur-2xl gradient-bg" />
+      {/* center badge with the platform initials */}
+      <div className="absolute left-1/2 top-1/2 flex h-28 w-28 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-3xl gradient-bg text-4xl font-black text-black shadow-2xl animate-floaty">
+        ${JSON.stringify(initials)}
+      </div>
+      {/* floating labels */}
+      <div className="absolute left-0 top-10 flex items-center gap-2 rounded-xl border border-hairline bg-app px-3 py-2 text-xs font-medium shadow-lg animate-floaty">
+        <span>${d.emoji}</span> ${JSON.stringify(d.chips[0])}
+      </div>
+      <div className="absolute right-0 top-28 rounded-xl border border-hairline bg-app px-3 py-2 text-xs font-medium shadow-lg animate-floaty-slow">
+        ${JSON.stringify(d.chips[1])}
+      </div>
+      <div className="absolute bottom-8 left-6 rounded-xl border border-hairline bg-app px-3 py-2 text-xs font-medium shadow-lg animate-floaty" style={{ animationDelay: "1.2s" }}>
+        ${JSON.stringify(d.chips[2])}
+      </div>
+    </div>
+  );
+}
+`;
+};
+var showcaseSection = (ctx) => {
+  const d = creativeData(ctx);
+  const bullets = d.bullets.map((b) => `<li className="flex items-center gap-2 text-muted"><span className="text-[color:var(--accent-to)]">\u2713</span> ${b}</li>`).join("\n            ");
+  return `<section className="mx-auto grid max-w-6xl items-center gap-12 px-6 py-20 md:grid-cols-2">
+        <div>
+          <p className="text-sm font-semibold uppercase tracking-widest text-faint">${ctx.template.siteName}</p>
+          <h2 className="mt-3 text-3xl font-bold sm:text-4xl">${d.showcaseTitle}</h2>
+          <p className="mt-4 max-w-md text-lg text-muted">${d.showcaseLead}</p>
+          <ul className="mt-6 space-y-3 text-sm">
+            ${bullets}
+          </ul>
+        </div>
+        <HeroArt />
+      </section>`;
+};
+var marqueeSection = (ctx) => {
+  const d = creativeData(ctx);
+  const chip = (t) => `<span className="rounded-full border border-hairline bg-surface px-5 py-2 text-sm font-medium text-muted">${t}</span>`;
+  const track = d.marquee.map(chip).join("\n            ");
+  return `<section className="border-y border-hairline py-10">
+        <p className="mb-6 text-center text-xs font-semibold uppercase tracking-widest text-faint">${d.marqueeLabel}</p>
+        <div className="marquee-mask overflow-hidden">
+          <div className="marquee-track gap-4">
+            ${track}
+            ${track}
+          </div>
+        </div>
+      </section>`;
+};
+var faqSection = (ctx) => {
+  const d = creativeData(ctx);
+  const items = d.faq.map((f) => `<details className="group rounded-2xl border border-hairline bg-surface p-5">
+            <summary className="flex cursor-pointer list-none items-center justify-between gap-4 font-medium">
+              ${f.q}
+              <span className="text-muted transition group-open:rotate-45">+</span>
+            </summary>
+            <p className="mt-3 text-sm leading-relaxed text-muted">${f.a}</p>
+          </details>`).join("\n          ");
+  return `<section className="mx-auto max-w-3xl px-6 py-20">
+        <h2 className="text-center text-3xl font-bold">Frequently asked</h2>
+        <div className="mt-10 space-y-3">
+          ${items}
+        </div>
+      </section>`;
+};
 function parseArgs(list) {
   const a = { yes: false, install: true, git: true, pm: "npm", help: false };
   for (let i = 0; i < list.length; i++) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-lacspace-app",
-  "version": "1.8.0",
+  "version": "1.10.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": {