create-landing-app 0.1.0

package/templates/nextjs/optional/zustand/inject/components__providers.tsx

@@ -0,0 +1,3 @@
+MARKER:__PROVIDERS_IMPORT__
+// Zustand store is imported per-component — no provider needed (it's global)
+// import { useUIStore } from "@/store/ui-store";

package/templates/nextjs/optional/zustand/pkg.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "zustand": "^5.0.0"
+  }
+}

package/templates/nextjs/themes/dark.css

@@ -0,0 +1,36 @@
+/* Dark Theme — dark-first, neutral monochrome */
+:root {
+  --radius: 0.5rem;
+  --background: oklch(0.12 0.005 250);
+  --foreground: oklch(0.95 0.005 250);
+  --card: oklch(0.18 0.007 250);
+  --card-foreground: oklch(0.95 0.005 250);
+  --popover: oklch(0.18 0.007 250);
+  --popover-foreground: oklch(0.95 0.005 250);
+  --primary: oklch(0.92 0.005 250);
+  --primary-foreground: oklch(0.12 0.005 250);
+  --secondary: oklch(0.22 0.008 250);
+  --secondary-foreground: oklch(0.92 0.005 250);
+  --muted: oklch(0.22 0.008 250);
+  --muted-foreground: oklch(0.6 0.008 250);
+  --accent: oklch(0.28 0.01 250);
+  --accent-foreground: oklch(0.92 0.005 250);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 12%);
+  --input: oklch(1 0 0 / 12%);
+  --ring: oklch(0.6 0.01 250);
+  --brand-primary: #e2e8f0;
+  --brand-action: #cbd5e1;
+  --brand-footer-from: #1e293b;
+  --brand-footer-to: #0f172a;
+  --brand-surface: #1e293b;
+  --brand-border: #334155;
+  --brand-gradient-from: #94a3b8;
+  --brand-gradient-to: #e2e8f0;
+}
+
+.dark {
+  /* Dark theme is already dark by default — .dark class mirrors :root */
+  --background: oklch(0.12 0.005 250);
+  --foreground: oklch(0.95 0.005 250);
+}

package/templates/nextjs/themes/forest.css

@@ -0,0 +1,58 @@
+/* Forest Theme — green + emerald */
+:root {
+  --radius: 0.75rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.15 0.02 150);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.15 0.02 150);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.15 0.02 150);
+  --primary: oklch(0.45 0.18 155); /* forest green */
+  --primary-foreground: oklch(1 0 0);
+  --secondary: oklch(0.95 0.04 140);
+  --secondary-foreground: oklch(0.15 0.02 150);
+  --muted: oklch(0.95 0.04 140);
+  --muted-foreground: oklch(0.5 0.05 150);
+  --accent: oklch(0.88 0.08 145);
+  --accent-foreground: oklch(0.15 0.02 150);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.88 0.06 145);
+  --input: oklch(0.88 0.06 145);
+  --ring: oklch(0.6 0.15 155);
+  --brand-primary: #16a34a;
+  --brand-action: #15803d;
+  --brand-footer-from: #166534;
+  --brand-footer-to: #052e16;
+  --brand-surface: #dcfce7;
+  --brand-border: #bbf7d0;
+  --brand-gradient-from: #4ade80;
+  --brand-gradient-to: #059669;
+}
+
+.dark {
+  --background: oklch(0.1 0.02 150);
+  --foreground: oklch(0.98 0 0);
+  --card: oklch(0.14 0.02 150);
+  --card-foreground: oklch(0.98 0 0);
+  --popover: oklch(0.14 0.02 150);
+  --popover-foreground: oklch(0.98 0 0);
+  --primary: oklch(0.65 0.18 155);
+  --primary-foreground: oklch(0.1 0.02 150);
+  --secondary: oklch(0.2 0.03 150);
+  --muted: oklch(0.2 0.03 150);
+  --muted-foreground: oklch(0.6 0.05 150);
+  --accent: oklch(0.2 0.03 150);
+  --accent-foreground: oklch(0.98 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.55 0.12 155);
+  --brand-primary: #4ade80;
+  --brand-action: #22c55e;
+  --brand-footer-from: #14532d;
+  --brand-footer-to: #052e16;
+  --brand-surface: #0d2818;
+  --brand-border: #166534;
+  --brand-gradient-from: #4ade80;
+  --brand-gradient-to: #86efac;
+}

package/templates/nextjs/themes/ocean.css

@@ -0,0 +1,58 @@
+/* Ocean Theme — sky blue + cyan */
+:root {
+  --radius: 0.5rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.15 0.01 220);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.15 0.01 220);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.15 0.01 220);
+  --primary: oklch(0.55 0.2 225); /* sky blue */
+  --primary-foreground: oklch(1 0 0);
+  --secondary: oklch(0.95 0.04 200);
+  --secondary-foreground: oklch(0.15 0.01 220);
+  --muted: oklch(0.95 0.04 200);
+  --muted-foreground: oklch(0.5 0.05 220);
+  --accent: oklch(0.85 0.1 195); /* cyan tint */
+  --accent-foreground: oklch(0.15 0.01 220);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.88 0.06 210);
+  --input: oklch(0.88 0.06 210);
+  --ring: oklch(0.65 0.15 225);
+  --brand-primary: #0ea5e9;
+  --brand-action: #0284c7;
+  --brand-footer-from: #0369a1;
+  --brand-footer-to: #0c4a6e;
+  --brand-surface: #e0f2fe;
+  --brand-border: #bae6fd;
+  --brand-gradient-from: #38bdf8;
+  --brand-gradient-to: #06b6d4;
+}
+
+.dark {
+  --background: oklch(0.1 0.02 220);
+  --foreground: oklch(0.98 0 0);
+  --card: oklch(0.15 0.02 220);
+  --card-foreground: oklch(0.98 0 0);
+  --popover: oklch(0.15 0.02 220);
+  --popover-foreground: oklch(0.98 0 0);
+  --primary: oklch(0.7 0.18 225);
+  --primary-foreground: oklch(0.1 0.02 220);
+  --secondary: oklch(0.2 0.03 220);
+  --muted: oklch(0.2 0.03 220);
+  --muted-foreground: oklch(0.6 0.05 220);
+  --accent: oklch(0.2 0.03 220);
+  --accent-foreground: oklch(0.98 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.6 0.1 225);
+  --brand-primary: #38bdf8;
+  --brand-action: #0ea5e9;
+  --brand-footer-from: #075985;
+  --brand-footer-to: #0c4a6e;
+  --brand-surface: #0c2d3f;
+  --brand-border: #164e63;
+  --brand-gradient-from: #38bdf8;
+  --brand-gradient-to: #67e8f9;
+}

package/templates/nextjs/themes/pila.css

@@ -0,0 +1,75 @@
+/* Pila Theme — white + deep blue brand */
+/* Edit this file to rebrand your site */
+
+:root {
+  --radius: 0.625rem;
+
+  /* Surfaces */
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.147 0.004 49.25);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.147 0.004 49.25);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.147 0.004 49.25);
+
+  /* Brand primary — deep blue #1849a9 */
+  --primary: oklch(0.45 0.18 250);
+  --primary-foreground: oklch(0.98 0 0);
+
+  /* Secondary — very light blue tint #f2fffe */
+  --secondary: oklch(0.97 0.015 210);
+  --secondary-foreground: oklch(0.216 0.006 56.043);
+
+  /* Muted */
+  --muted: oklch(0.97 0.015 210);
+  --muted-foreground: oklch(0.553 0.013 58.071);
+
+  /* Accent — light blue #e0f2ff */
+  --accent: oklch(0.95 0.03 220);
+  --accent-foreground: oklch(0.45 0.18 250);
+
+  /* System */
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.88 0.04 220); /* ~#d1e9ff */
+  --input: oklch(0.88 0.04 220);
+  --ring: oklch(0.65 0.12 230); /* ~#84caff */
+
+  /* Brand-specific tokens */
+  --brand-primary: #1849a9;
+  --brand-action: #1570ef;
+  --brand-footer-from: #1764eb;
+  --brand-footer-to: #002d7b;
+  --brand-surface: #daf8ff;
+  --brand-border: #d1e9ff;
+  --brand-gradient-from: #327eff;
+  --brand-gradient-to: #ffffff;
+}
+
+.dark {
+  --background: oklch(0.1 0.02 250);
+  --foreground: oklch(0.985 0.001 106.423);
+  --card: oklch(0.15 0.03 250);
+  --card-foreground: oklch(0.985 0.001 106.423);
+  --popover: oklch(0.15 0.03 250);
+  --popover-foreground: oklch(0.985 0.001 106.423);
+  --primary: oklch(0.65 0.16 250);
+  --primary-foreground: oklch(0.1 0.02 250);
+  --secondary: oklch(0.2 0.03 250);
+  --secondary-foreground: oklch(0.985 0.001 106.423);
+  --muted: oklch(0.2 0.03 250);
+  --muted-foreground: oklch(0.6 0.06 250);
+  --accent: oklch(0.2 0.03 250);
+  --accent-foreground: oklch(0.985 0.001 106.423);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.553 0.013 58.071);
+  --brand-primary: #6aaeff;
+  --brand-action: #3b82f6;
+  --brand-footer-from: #1e3a8a;
+  --brand-footer-to: #0f172a;
+  --brand-surface: #1e293b;
+  --brand-border: #334155;
+  --brand-gradient-from: #6aaeff;
+  --brand-gradient-to: #dbeafe;
+}

package/templates/nextjs/themes/purple.css

@@ -0,0 +1,58 @@
+/* Purple Theme — violet + indigo */
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.13 0.02 280);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.13 0.02 280);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.13 0.02 280);
+  --primary: oklch(0.5 0.24 280); /* violet */
+  --primary-foreground: oklch(1 0 0);
+  --secondary: oklch(0.95 0.04 280);
+  --secondary-foreground: oklch(0.13 0.02 280);
+  --muted: oklch(0.95 0.04 280);
+  --muted-foreground: oklch(0.5 0.05 280);
+  --accent: oklch(0.9 0.07 285);
+  --accent-foreground: oklch(0.13 0.02 280);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.88 0.06 280);
+  --input: oklch(0.88 0.06 280);
+  --ring: oklch(0.65 0.18 280);
+  --brand-primary: #7c3aed;
+  --brand-action: #6d28d9;
+  --brand-footer-from: #5b21b6;
+  --brand-footer-to: #2e1065;
+  --brand-surface: #ede9fe;
+  --brand-border: #ddd6fe;
+  --brand-gradient-from: #a78bfa;
+  --brand-gradient-to: #818cf8;
+}
+
+.dark {
+  --background: oklch(0.1 0.03 280);
+  --foreground: oklch(0.98 0 0);
+  --card: oklch(0.14 0.03 280);
+  --card-foreground: oklch(0.98 0 0);
+  --popover: oklch(0.14 0.03 280);
+  --popover-foreground: oklch(0.98 0 0);
+  --primary: oklch(0.68 0.22 280);
+  --primary-foreground: oklch(0.1 0.03 280);
+  --secondary: oklch(0.2 0.04 280);
+  --muted: oklch(0.2 0.04 280);
+  --muted-foreground: oklch(0.6 0.06 280);
+  --accent: oklch(0.2 0.04 280);
+  --accent-foreground: oklch(0.98 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.6 0.15 280);
+  --brand-primary: #a78bfa;
+  --brand-action: #8b5cf6;
+  --brand-footer-from: #4c1d95;
+  --brand-footer-to: #2e1065;
+  --brand-surface: #1e1040;
+  --brand-border: #4c1d95;
+  --brand-gradient-from: #a78bfa;
+  --brand-gradient-to: #c4b5fd;
+}