create-cronus-app 0.6.0

package/templates/marketing/components/feature-grid.tsx

@@ -0,0 +1,67 @@
+import { Badge } from "@cronus-ui/ui/badge";
+import { Card, CardDescription, CardHeader, CardTitle } from "@cronus-ui/ui/card";
+import { BarChart3, Layers, Lock, Palette, Workflow, Zap } from "lucide-react";
+
+const FEATURES = [
+  {
+    icon: Zap,
+    title: "Lightning fast",
+    description: "Optimized rendering and zero-runtime styling keep every interaction instant.",
+  },
+  {
+    icon: Palette,
+    title: "Themeable by design",
+    description: "Swap a palette and every surface, border, and gradient updates live.",
+  },
+  {
+    icon: Lock,
+    title: "Secure by default",
+    description: "SOC 2 compliant infrastructure with end-to-end encryption on every request.",
+  },
+  {
+    icon: Layers,
+    title: "Composable primitives",
+    description: "Build complex layouts from small, predictable, accessible building blocks.",
+  },
+  {
+    icon: BarChart3,
+    title: "Insightful analytics",
+    description: "Understand how people use your product with real-time usage dashboards.",
+  },
+  {
+    icon: Workflow,
+    title: "Automate anything",
+    description: "Connect your favorite tools and wire up workflows without writing glue code.",
+  },
+] as const;
+
+/** Six capability cards with gradient icon chips. */
+export function FeatureGrid() {
+  return (
+    <section id="features" className="scroll-mt-16 px-6 py-20">
+      <div className="mx-auto max-w-2xl text-center">
+        <Badge variant="secondary">Features</Badge>
+        <h2 className="mt-4 font-display text-4xl font-semibold tracking-tight text-fg">
+          Everything you need, nothing you don&apos;t
+        </h2>
+        <p className="mt-4 text-balance text-fg-secondary">
+          A thoughtfully crafted set of tools that scales from your first prototype to production.
+        </p>
+      </div>
+
+      <div className="mx-auto mt-14 grid max-w-5xl grid-cols-[repeat(auto-fit,minmax(min(100%,16rem),1fr))] gap-6">
+        {FEATURES.map((feature) => (
+          <Card key={feature.title} className="border-border">
+            <CardHeader>
+              <span className="grid size-11 place-items-center rounded-xl bg-gradient-primary text-primary-foreground shadow-glow">
+                <feature.icon aria-hidden="true" className="size-5" />
+              </span>
+              <CardTitle className="mt-4">{feature.title}</CardTitle>
+              <CardDescription>{feature.description}</CardDescription>
+            </CardHeader>
+          </Card>
+        ))}
+      </div>
+    </section>
+  );
+}

package/templates/marketing/components/hero.tsx

@@ -0,0 +1,61 @@
+import { Avatar, AvatarFallback } from "@cronus-ui/ui/avatar";
+import { Badge } from "@cronus-ui/ui/badge";
+import { Button } from "@cronus-ui/ui/button";
+import { ArrowRight, Sparkles } from "lucide-react";
+
+const FOUNDER_INITIALS = ["AK", "MR", "JD", "SL"] as const;
+
+/** Centered hero: announcement badge, display headline, CTAs, social proof. */
+export function Hero() {
+  return (
+    <section className="relative overflow-hidden px-6 py-24 sm:py-32">
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute inset-x-0 -top-24 -z-10 h-80 bg-gradient-primary opacity-20 blur-3xl"
+      />
+      <div className="mx-auto flex max-w-3xl flex-col items-center text-center">
+        <Badge variant="primary" className="gap-1.5">
+          <Sparkles aria-hidden="true" className="size-3.5" />
+          Now in public beta
+        </Badge>
+
+        <h1 className="mt-6 text-balance font-display text-5xl font-semibold leading-[1.05] tracking-tight text-fg sm:text-6xl">
+          Ship products your team is{" "}
+          <span className="bg-gradient-primary bg-clip-text text-transparent">proud of</span>
+        </h1>
+
+        <p className="mt-6 max-w-xl text-balance text-lg text-fg-secondary">
+          A modern toolkit for building accessible, themeable interfaces — so you spend less time on
+          plumbing and more time on the product your customers love.
+        </p>
+
+        <div className="mt-9 flex flex-col items-center gap-3 sm:flex-row">
+          <Button variant="primary" size="lg" asChild>
+            <a href="#waitlist">
+              Join the waitlist
+              <ArrowRight aria-hidden="true" />
+            </a>
+          </Button>
+          <Button variant="outline" size="lg" asChild>
+            <a href="#features">See what's inside</a>
+          </Button>
+        </div>
+
+        <div className="mt-10 flex flex-col items-center gap-3 sm:flex-row sm:gap-4">
+          <div className="flex -space-x-2">
+            {FOUNDER_INITIALS.map((initials) => (
+              <Avatar key={initials} className="size-9 border-2 border-surface-base shadow-xs">
+                <AvatarFallback className="bg-surface-overlay text-xs text-fg-secondary">
+                  {initials}
+                </AvatarFallback>
+              </Avatar>
+            ))}
+          </div>
+          <p className="text-sm text-fg-tertiary">
+            Loved by <span className="font-medium text-fg">9,000+</span> builders
+          </p>
+        </div>
+      </div>
+    </section>
+  );
+}

package/templates/marketing/components/pricing.tsx

@@ -0,0 +1,116 @@
+import { Badge } from "@cronus-ui/ui/badge";
+import { Button } from "@cronus-ui/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@cronus-ui/ui/card";
+import { Check, Sparkles } from "lucide-react";
+
+const PRICING_TIERS = [
+  {
+    name: "Starter",
+    price: "$0",
+    cadence: "/ month",
+    description: "Everything you need to launch your first project.",
+    features: ["Up to 3 projects", "Community support", "1 GB storage", "Basic analytics"],
+    cta: "Get started",
+    featured: false,
+  },
+  {
+    name: "Pro",
+    price: "$29",
+    cadence: "/ month",
+    description: "For growing teams that need more power and polish.",
+    features: [
+      "Unlimited projects",
+      "Priority support",
+      "50 GB storage",
+      "Advanced analytics",
+      "Custom domains",
+    ],
+    cta: "Start free trial",
+    featured: true,
+  },
+  {
+    name: "Enterprise",
+    price: "Custom",
+    cadence: "",
+    description: "Dedicated infrastructure and support at scale.",
+    features: ["Everything in Pro", "SSO & SAML", "Dedicated success manager", "99.99% uptime SLA"],
+    cta: "Contact sales",
+    featured: false,
+  },
+] as const;
+
+/** Three pricing tiers with a featured middle card. */
+export function Pricing() {
+  return (
+    <section id="pricing" className="scroll-mt-16 px-6 py-20">
+      <div className="mx-auto max-w-2xl text-center">
+        <Badge variant="secondary">Pricing</Badge>
+        <h2 className="mt-4 font-display text-4xl font-semibold tracking-tight text-fg">
+          Simple, transparent pricing
+        </h2>
+        <p className="mt-4 text-balance text-fg-secondary">
+          Start for free and scale as you grow. No hidden fees, cancel anytime.
+        </p>
+      </div>
+
+      <div className="mx-auto mt-14 grid max-w-5xl grid-cols-[repeat(auto-fit,minmax(min(100%,16rem),1fr))] items-start gap-6">
+        {PRICING_TIERS.map((tier) => (
+          <Card
+            key={tier.name}
+            className={
+              tier.featured
+                ? "relative border-primary shadow-glow lg:-translate-y-3"
+                : "border-border"
+            }
+          >
+            {tier.featured ? (
+              <Badge
+                variant="primary"
+                className="absolute -top-3 left-1/2 -translate-x-1/2 gap-1.5"
+              >
+                <Sparkles aria-hidden="true" className="size-3.5" />
+                Most popular
+              </Badge>
+            ) : null}
+            <CardHeader>
+              <CardTitle>{tier.name}</CardTitle>
+              <CardDescription>{tier.description}</CardDescription>
+              <div className="mt-2 flex items-baseline gap-1">
+                <span className="font-display text-4xl font-semibold tracking-tight text-fg">
+                  {tier.price}
+                </span>
+                {tier.cadence ? (
+                  <span className="text-sm text-fg-tertiary">{tier.cadence}</span>
+                ) : null}
+              </div>
+            </CardHeader>
+            <CardContent>
+              <ul className="flex flex-col gap-3">
+                {tier.features.map((feature) => (
+                  <li key={feature} className="flex items-center gap-2.5 text-sm text-fg-secondary">
+                    <span className="grid size-5 shrink-0 place-items-center rounded-full bg-primary/15">
+                      <Check aria-hidden="true" className="size-3 text-primary" />
+                    </span>
+                    {feature}
+                  </li>
+                ))}
+              </ul>
+            </CardContent>
+            <CardFooter>
+              <Button variant={tier.featured ? "primary" : "outline"} className="w-full">
+                {tier.cta}
+              </Button>
+            </CardFooter>
+          </Card>
+        ))}
+      </div>
+    </section>
+  );
+}

package/templates/marketing/components/site-footer.tsx

@@ -0,0 +1,91 @@
+import { Separator } from "@cronus-ui/ui/separator";
+import { Sparkles } from "lucide-react";
+
+const FOOTER_COLUMNS = [
+  {
+    heading: "Product",
+    links: [
+      { label: "Features", href: "#features" },
+      { label: "Pricing", href: "#pricing" },
+      { label: "FAQ", href: "#faq" },
+      { label: "Waitlist", href: "#waitlist" },
+    ],
+  },
+  {
+    heading: "Company",
+    links: [
+      { label: "About", href: "#about" },
+      { label: "Careers", href: "#careers" },
+      { label: "Contact", href: "#contact" },
+    ],
+  },
+  {
+    heading: "Resources",
+    links: [
+      { label: "Documentation", href: "#docs" },
+      { label: "Guides", href: "#guides" },
+      { label: "Support", href: "#support" },
+    ],
+  },
+] as const;
+
+/** Brand block, link columns, and the legal bottom bar. */
+export function SiteFooter() {
+  return (
+    <footer className="border-t border-border bg-surface-base px-6 py-16">
+      <div className="mx-auto max-w-6xl">
+        <div className="grid gap-12 lg:grid-cols-[1.5fr_repeat(3,1fr)]">
+          <div className="max-w-xs">
+            <div className="flex items-center gap-2.5">
+              <span className="grid size-9 place-items-center rounded-xl bg-gradient-primary text-primary-foreground shadow-glow">
+                <Sparkles aria-hidden="true" className="size-5" />
+              </span>
+              <span className="font-display text-lg font-semibold text-fg">__APP_NAME__</span>
+            </div>
+            <p className="mt-4 text-sm leading-6 text-fg-secondary">
+              Built with Cronus UI — themeable, accessible React components for teams who ship
+              polished products fast.
+            </p>
+          </div>
+
+          {FOOTER_COLUMNS.map((column) => (
+            <div key={column.heading}>
+              <h3 className="text-sm font-medium text-fg">{column.heading}</h3>
+              <ul className="mt-4 flex flex-col gap-3">
+                {column.links.map((link) => (
+                  <li key={link.label}>
+                    <a
+                      href={link.href}
+                      className="text-sm text-fg-secondary transition-colors hover:text-fg"
+                    >
+                      {link.label}
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+
+        <Separator className="my-8" />
+
+        <div className="flex flex-col items-center justify-between gap-4 sm:flex-row">
+          <p className="text-sm text-fg-tertiary">
+            © {new Date().getFullYear()} __APP_NAME__. All rights reserved.
+          </p>
+          <div className="flex items-center gap-6">
+            <a
+              href="#privacy"
+              className="text-sm text-fg-secondary transition-colors hover:text-fg"
+            >
+              Privacy
+            </a>
+            <a href="#terms" className="text-sm text-fg-secondary transition-colors hover:text-fg">
+              Terms
+            </a>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}

package/templates/marketing/components/site-header.tsx

@@ -0,0 +1,47 @@
+import { Button } from "@cronus-ui/ui/button";
+import { Sparkles } from "lucide-react";
+import Link from "next/link";
+
+const NAV_LINKS = [
+  { label: "Features", href: "#features" },
+  { label: "Pricing", href: "#pricing" },
+  { label: "FAQ", href: "#faq" },
+] as const;
+
+/** Sticky translucent header: brand, anchor nav, and the primary CTA. */
+export function SiteHeader() {
+  return (
+    <header className="sticky top-0 z-50 border-b border-border/70 bg-surface-base/70 backdrop-blur-xl">
+      <nav
+        aria-label="Primary"
+        className="mx-auto flex h-16 w-full max-w-6xl items-center justify-between gap-4 px-6"
+      >
+        <Link href="/" className="flex items-center gap-2.5">
+          <span className="grid size-8 place-items-center rounded-lg bg-gradient-primary text-primary-foreground shadow-glow">
+            <Sparkles className="size-4" aria-hidden="true" />
+          </span>
+          <span className="font-display text-base font-semibold tracking-tight text-fg">
+            __APP_NAME__
+          </span>
+        </Link>
+
+        <ul className="hidden items-center gap-1 sm:flex">
+          {NAV_LINKS.map((link) => (
+            <li key={link.href}>
+              <a
+                href={link.href}
+                className="rounded-lg px-3 py-2 text-sm text-fg-secondary transition-colors hover:text-fg"
+              >
+                {link.label}
+              </a>
+            </li>
+          ))}
+        </ul>
+
+        <Button variant="primary" size="sm" asChild>
+          <a href="#waitlist">Join the waitlist</a>
+        </Button>
+      </nav>
+    </header>
+  );
+}

package/templates/marketing/components/testimonials.tsx

@@ -0,0 +1,91 @@
+import { Avatar, AvatarFallback } from "@cronus-ui/ui/avatar";
+import { Badge } from "@cronus-ui/ui/badge";
+import { Card, CardContent } from "@cronus-ui/ui/card";
+import { Sparkles } from "lucide-react";
+
+const TESTIMONIALS = [
+  {
+    quote:
+      "We replaced a tangle of one-off components with one themeable system. Our redesign shipped weeks early.",
+    name: "Amara Okafor",
+    role: "VP Design, Northwind",
+    initials: "AO",
+  },
+  {
+    quote:
+      "Every surface inherits our brand the moment we change a token. It's the closest thing to magic our team has shipped.",
+    name: "Marco Rossi",
+    role: "Staff Engineer, Lumen",
+    initials: "MR",
+  },
+  {
+    quote:
+      "Accessibility used to be an afterthought. Now it's the default — we pass audits without a scramble before launch.",
+    name: "Priya Nair",
+    role: "Head of Product, Cobalt",
+    initials: "PN",
+  },
+  {
+    quote:
+      "We onboarded three new engineers in a day. The sections read like documentation you can paste straight into the app.",
+    name: "Jonas Berg",
+    role: "Engineering Lead, Fathom",
+    initials: "JB",
+  },
+  {
+    quote:
+      "The cards, the gradients, the polish — it all feels premium out of the box. Our marketing site looks bespoke.",
+    name: "Sofia Lindqvist",
+    role: "Founder, Driftwood",
+    initials: "SL",
+  },
+  {
+    quote:
+      "This is the first design system our designers and engineers actually agree on. That alone paid for itself.",
+    name: "David Chen",
+    role: "CTO, Parallel",
+    initials: "DC",
+  },
+] as const;
+
+/** Quote cards in a responsive three-column grid. */
+export function Testimonials() {
+  return (
+    <section className="px-6 py-20">
+      <div className="mx-auto flex max-w-2xl flex-col items-center text-center">
+        <Badge variant="secondary" className="gap-1.5">
+          <Sparkles aria-hidden="true" className="size-3.5" />
+          Loved by teams
+        </Badge>
+        <h2 className="mt-4 text-balance font-display text-3xl font-semibold tracking-tight text-fg sm:text-4xl">
+          Loved by modern product teams
+        </h2>
+        <p className="mt-4 text-balance text-fg-secondary">
+          From seed-stage startups to public companies — teams ship faster when every surface is
+          accessible, themeable, and consistent.
+        </p>
+      </div>
+
+      <div className="mx-auto mt-14 grid max-w-5xl gap-6 sm:grid-cols-2 lg:grid-cols-3">
+        {TESTIMONIALS.map((testimonial) => (
+          <Card key={testimonial.name} className="border-border">
+            <CardContent className="flex h-full flex-col gap-5 pt-6">
+              <p className="text-sm leading-6 text-fg-secondary">“{testimonial.quote}”</p>
+              <div className="mt-auto flex items-center gap-3">
+                <Avatar className="size-9">
+                  <AvatarFallback className="bg-surface-overlay text-xs text-fg-secondary">
+                    {testimonial.initials}
+                  </AvatarFallback>
+                </Avatar>
+                <div className="min-w-0">
+                  <p className="truncate text-sm font-medium text-fg">{testimonial.name}</p>
+                  <p className="truncate text-xs text-fg-tertiary">{testimonial.role}</p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    </section>
+  );
+}

package/templates/marketing/components/waitlist-cta.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import { Button } from "@cronus-ui/ui/button";
+import { Input } from "@cronus-ui/ui/input";
+import { Label } from "@cronus-ui/ui/label";
+import { ArrowRight, Check } from "lucide-react";
+import { useState } from "react";
+
+/**
+ * Waitlist email capture that swaps to a joined confirmation on submit. The
+ * swap area is a persistent `aria-live` region so the change is announced to
+ * screen readers. Replace the `onSubmit` with your API call or server action.
+ */
+export function WaitlistCta() {
+  const [email, setEmail] = useState("");
+  const [joined, setJoined] = useState(false);
+
+  return (
+    <section id="waitlist" className="scroll-mt-16 px-6 py-20">
+      <div className="relative mx-auto max-w-5xl overflow-hidden rounded-2xl bg-gradient-primary px-8 py-16 text-center shadow-glow sm:px-16">
+        <div
+          aria-hidden="true"
+          className="pointer-events-none absolute inset-0 [mask-image:radial-gradient(ellipse_at_center,black,transparent_75%)]"
+          style={{
+            backgroundImage: "radial-gradient(circle, rgba(255,255,255,0.25) 1px, transparent 1px)",
+            backgroundSize: "22px 22px",
+          }}
+        />
+        <div className="relative mx-auto max-w-2xl">
+          <h2 className="font-display text-4xl font-semibold tracking-tight text-primary-foreground sm:text-5xl">
+            Be first in line
+          </h2>
+          <p className="mt-4 text-balance text-lg text-primary-foreground/80">
+            Join the waitlist and we&apos;ll email your invite the moment a spot opens. No spam, and
+            you can leave the list any time.
+          </p>
+
+          <div aria-live="polite" className="mx-auto mt-8 max-w-md">
+            {joined ? (
+              <div
+                role="status"
+                className="flex items-center gap-3 rounded-xl bg-surface-base px-4 py-3 text-left shadow-sm"
+              >
+                <span className="inline-flex size-9 shrink-0 items-center justify-center rounded-full bg-success/10 text-success">
+                  <Check aria-hidden="true" className="size-4" />
+                </span>
+                <div className="min-w-0 flex-1">
+                  <p className="text-sm font-medium text-fg">You&apos;re on the list</p>
+                  <p className="truncate text-sm text-fg-tertiary">
+                    We&apos;ll email {email} when your invite is ready.
+                  </p>
+                </div>
+              </div>
+            ) : (
+              <form
+                aria-label="Join the waitlist"
+                className="flex flex-col gap-3 sm:flex-row"
+                onSubmit={(event) => {
+                  event.preventDefault();
+                  setJoined(true);
+                }}
+              >
+                <div className="flex-1 text-left">
+                  <Label htmlFor="waitlist-email" className="sr-only">
+                    Email address
+                  </Label>
+                  <Input
+                    id="waitlist-email"
+                    type="email"
+                    required
+                    autoComplete="email"
+                    placeholder="you@company.com"
+                    value={email}
+                    onChange={(event) => setEmail(event.target.value)}
+                    className="h-11 border-transparent bg-surface-base text-fg placeholder:text-fg-tertiary"
+                  />
+                </div>
+                <Button type="submit" variant="secondary" size="lg">
+                  Join the waitlist
+                  <ArrowRight aria-hidden="true" />
+                </Button>
+              </form>
+            )}
+          </div>
+
+          <p className="mt-4 text-sm text-primary-foreground/70">
+            No spam. Unsubscribe at any time.
+          </p>
+        </div>
+      </div>
+    </section>
+  );
+}

package/templates/marketing/cronus-ui.json

@@ -0,0 +1,17 @@
+{
+  "aliases": {
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "blocks": "@/components/blocks"
+  },
+  "paths": {
+    "ui": "components/ui",
+    "lib": "lib",
+    "blocks": "components/blocks"
+  },
+  "registry": "https://raw.githubusercontent.com/pedrogbraz/cronus-ui/v0.6.0/registry",
+  "theme": {
+    "name": "__THEME__",
+    "mode": "__MODE__"
+  }
+}

package/templates/marketing/gitignore

@@ -0,0 +1,34 @@
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files
+.env*.local
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# lockfiles (keep the one your package manager writes)
+# package-lock.json
+# pnpm-lock.yaml
+# yarn.lock
+# bun.lockb

package/templates/marketing/next.config.mjs

@@ -0,0 +1,11 @@
+/**
+ * @cronus-ui/ui ships ESM with its `"use client"` boundaries already in place,
+ * so no `transpilePackages` is needed when it's installed (the normal case).
+ *
+ * @type {import('next').NextConfig}
+ */
+const nextConfig = {
+  reactStrictMode: true,
+};
+
+export default nextConfig;

package/templates/marketing/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "__APP_NAME__",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@cronus-ui/theme": "^0.6.0",
+    "@cronus-ui/tokens": "^0.6.0",
+    "@cronus-ui/ui": "^0.6.0",
+    "lucide-react": "^0.577.0",
+    "next": "16.2.10",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.3.0",
+    "@types/node": "^22.10.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "tailwindcss": "^4.3.0",
+    "typescript": "^6.0.3"
+  }
+}

package/templates/marketing/postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;