ship-create 1.0.0

package/templates/starter-kit/app/member/(app)/layout.tsx

@@ -0,0 +1,130 @@
+"use client";
+
+import * as React from "react";
+import Link from "next/link";
+import { usePathname, useRouter } from "next/navigation";
+import {
+  LayoutDashboard,
+  BookOpen,
+  CreditCard,
+  Settings,
+  LogOut,
+} from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { users } from "@/lib/mock-data";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+
+const mockUser = users[0];
+
+const navItems = [
+  { label: "Dashboard", href: "/member/dashboard", icon: LayoutDashboard },
+  { label: "Courses", href: "/member/content", icon: BookOpen },
+  { label: "Billing", href: "/member/billing", icon: CreditCard },
+  { label: "Settings", href: "/member/settings", icon: Settings },
+];
+
+function initials(name: string) {
+  return name
+    .split(" ")
+    .map((part) => part[0])
+    .join("")
+    .slice(0, 2)
+    .toUpperCase();
+}
+
+const pageTitles: Record<string, string> = {
+  "/member/dashboard": "Dashboard",
+  "/member/content": "Courses",
+  "/member/billing": "Billing",
+  "/member/settings": "Settings",
+};
+
+export default function MemberAppLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const pathname = usePathname();
+  const router = useRouter();
+
+  const title = pageTitles[pathname] ?? "Member Area";
+
+  return (
+    <div className="flex min-h-screen bg-background">
+      <aside className="flex w-64 flex-col border-r border-border/70 bg-card shadow-soft">
+        <div className="flex items-center gap-3 border-b border-border/70 px-6 py-6">
+          <span className="font-display text-xl font-medium tracking-tight text-foreground">
+            SHIP<span className="text-primary">.</span>
+          </span>
+        </div>
+
+        <div className="flex items-center gap-3 border-b border-border/70 px-6 py-5">
+          <Avatar>
+            <AvatarFallback>{initials(mockUser.name)}</AvatarFallback>
+          </Avatar>
+          <div className="min-w-0">
+            <p className="truncate text-sm font-semibold leading-tight">
+              {mockUser.name}
+            </p>
+            <p className="label-mono truncate text-muted-foreground">
+              {mockUser.plan} plan
+            </p>
+          </div>
+        </div>
+
+        <nav className="flex-1 space-y-1 px-3 py-5">
+          <p className="label-mono px-3 pb-2 text-muted-foreground/70">Menu</p>
+          {navItems.map((item) => {
+            const Icon = item.icon;
+            const active = pathname === item.href;
+            return (
+              <Link
+                key={item.href}
+                href={item.href}
+                className={cn(
+                  "group relative flex items-center gap-3 rounded-full px-3 py-2.5 text-sm font-medium transition-all duration-200",
+                  active
+                    ? "bg-primary text-primary-foreground shadow-soft"
+                    : "text-foreground/70 hover:bg-muted hover:text-foreground"
+                )}
+              >
+                {active && (
+                  <span className="absolute -left-3 top-1/2 h-5 w-1 -translate-y-1/2 rounded-full bg-primary" />
+                )}
+                <Icon className="h-4 w-4" />
+                {item.label}
+              </Link>
+            );
+          })}
+        </nav>
+
+        <div className="border-t border-border/70 px-3 py-4">
+          <button
+            type="button"
+            onClick={() => router.push("/member/login")}
+            className="flex w-full items-center gap-3 rounded-full px-3 py-2.5 text-sm font-medium text-foreground/70 transition-all duration-200 hover:bg-muted hover:text-foreground"
+          >
+            <LogOut className="h-4 w-4" />
+            Logout
+          </button>
+        </div>
+      </aside>
+
+      <div className="flex flex-1 flex-col">
+        <header className="flex items-center justify-between border-b border-border/70 bg-card/60 px-8 py-4">
+          <h1 className="font-display text-lg font-medium tracking-tight">{title}</h1>
+          <div className="flex items-center gap-3">
+            <Avatar className="h-8 w-8">
+              <AvatarFallback className="text-xs">
+                {initials(mockUser.name)}
+              </AvatarFallback>
+            </Avatar>
+          </div>
+        </header>
+
+        <main className="flex-1 p-8">{children}</main>
+      </div>
+    </div>
+  );
+}

package/templates/starter-kit/app/member/(app)/settings/page.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import * as React from "react";
+
+import { users } from "@/lib/mock-data";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+
+const mockUser = users[0];
+
+export default function MemberSettingsPage() {
+  const [name, setName] = React.useState(mockUser.name);
+  const [email, setEmail] = React.useState(mockUser.email);
+
+  function handleSave(e: React.FormEvent) {
+    e.preventDefault();
+    // Mock save only — no backend wired up.
+  }
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="font-display text-3xl font-medium tracking-tight">
+          Settings
+        </h2>
+        <p className="mt-1 text-muted-foreground">
+          Manage your account details and preferences.
+        </p>
+      </div>
+
+      <Card className="animate-fade-up">
+        <CardHeader>
+          <CardTitle className="text-base">Account Information</CardTitle>
+          <CardDescription>
+            Update your name and email address.
+          </CardDescription>
+        </CardHeader>
+        <form onSubmit={handleSave}>
+          <CardContent className="space-y-4">
+            <div className="space-y-2">
+              <label htmlFor="settings-name" className="text-sm font-medium">
+                Name
+              </label>
+              <Input
+                id="settings-name"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+              />
+            </div>
+            <div className="space-y-2">
+              <label htmlFor="settings-email" className="text-sm font-medium">
+                Email
+              </label>
+              <Input
+                id="settings-email"
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+              />
+            </div>
+          </CardContent>
+          <CardFooter>
+            <Button type="submit">Save Changes</Button>
+          </CardFooter>
+        </form>
+      </Card>
+
+      <Card
+        className="animate-fade-up border-destructive/40 bg-destructive/[0.06]"
+        style={{ animationDelay: "80ms" }}
+      >
+        <CardHeader>
+          <span className="label-mono text-destructive">Danger Zone</span>
+          <CardTitle className="text-base text-destructive">
+            Delete account
+          </CardTitle>
+          <CardDescription>
+            Permanently delete your account and all associated data. This
+            action cannot be undone.
+          </CardDescription>
+        </CardHeader>
+        <CardFooter>
+          <Button variant="destructive">Delete Account</Button>
+        </CardFooter>
+      </Card>
+    </div>
+  );
+}

package/templates/starter-kit/app/member/login/page.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import * as React from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+} from "@/components/ui/card";
+
+export default function MemberLoginPage() {
+  const router = useRouter();
+  const [email, setEmail] = React.useState("");
+  const [password, setPassword] = React.useState("");
+
+  function handleLogin(e: React.FormEvent) {
+    e.preventDefault();
+    router.push("/member/dashboard");
+  }
+
+  return (
+    <div className="flex min-h-screen bg-background">
+      {/* Decorative panel — desktop only */}
+      <div className="relative hidden w-1/2 flex-col justify-between overflow-hidden bg-card px-12 py-12 lg:flex">
+        <div className="bg-grid absolute inset-0" />
+        <div className="relative z-10">
+          <span className="label-mono text-muted-foreground">SHIP Method OS</span>
+        </div>
+        <div className="relative z-10 max-w-md">
+          <p className="font-display text-4xl leading-tight tracking-tight text-foreground">
+            “Build the thing, ship the thing,
+            <span className="text-primary"> repeat</span> the thing.”
+          </p>
+          <p className="label-mono mt-6 text-muted-foreground">
+            Member Area — 2026
+          </p>
+        </div>
+        <div className="relative z-10 h-px w-24 bg-primary/40" />
+      </div>
+
+      {/* Form panel */}
+      <div className="flex w-full flex-1 items-center justify-center px-4 py-12 lg:w-1/2">
+        <Card className="animate-fade-up w-full max-w-sm">
+          <CardHeader className="space-y-1">
+            <span className="label-mono text-primary">Welcome back</span>
+            <CardTitle className="text-3xl">Log in</CardTitle>
+            <CardDescription>
+              Access your member dashboard and pick up where you left off.
+            </CardDescription>
+          </CardHeader>
+          <form onSubmit={handleLogin}>
+            <CardContent className="space-y-4">
+              <div className="space-y-2">
+                <label htmlFor="email" className="label-mono text-muted-foreground">
+                  Email
+                </label>
+                <Input
+                  id="email"
+                  type="email"
+                  placeholder="you@example.com"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  required
+                />
+              </div>
+              <div className="space-y-2">
+                <label htmlFor="password" className="label-mono text-muted-foreground">
+                  Password
+                </label>
+                <Input
+                  id="password"
+                  type="password"
+                  placeholder="••••••••"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  required
+                />
+              </div>
+            </CardContent>
+            <CardFooter className="flex flex-col gap-4">
+              <Button type="submit" className="w-full">
+                Log In
+              </Button>
+              <p className="text-center text-sm text-muted-foreground">
+                Don&apos;t have an account?{" "}
+                <Link
+                  href="/member/signup"
+                  className="font-medium text-primary hover:underline"
+                >
+                  Sign up
+                </Link>
+              </p>
+            </CardFooter>
+          </form>
+        </Card>
+      </div>
+    </div>
+  );
+}

package/templates/starter-kit/app/member/signup/page.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import * as React from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+} from "@/components/ui/card";
+
+export default function MemberSignupPage() {
+  const router = useRouter();
+  const [name, setName] = React.useState("");
+  const [email, setEmail] = React.useState("");
+  const [password, setPassword] = React.useState("");
+
+  function handleSignup(e: React.FormEvent) {
+    e.preventDefault();
+    router.push("/member/dashboard");
+  }
+
+  return (
+    <div className="flex min-h-screen bg-background">
+      {/* Decorative panel — desktop only */}
+      <div className="relative hidden w-1/2 flex-col justify-between overflow-hidden bg-card px-12 py-12 lg:flex">
+        <div className="bg-grid absolute inset-0" />
+        <div className="relative z-10">
+          <span className="label-mono text-muted-foreground">SHIP Method OS</span>
+        </div>
+        <div className="relative z-10 max-w-md">
+          <p className="font-display text-4xl leading-tight tracking-tight text-foreground">
+            “Every course you finish is a
+            <span className="text-primary"> compounding</span> decision.”
+          </p>
+          <p className="label-mono mt-6 text-muted-foreground">
+            Member Area — 2026
+          </p>
+        </div>
+        <div className="relative z-10 h-px w-24 bg-primary/40" />
+      </div>
+
+      {/* Form panel */}
+      <div className="flex w-full flex-1 items-center justify-center px-4 py-12 lg:w-1/2">
+        <Card className="animate-fade-up w-full max-w-sm">
+          <CardHeader className="space-y-1">
+            <span className="label-mono text-primary">Get started</span>
+            <CardTitle className="text-3xl">Create your account</CardTitle>
+            <CardDescription>
+              Join the member area to start your courses.
+            </CardDescription>
+          </CardHeader>
+          <form onSubmit={handleSignup}>
+            <CardContent className="space-y-4">
+              <div className="space-y-2">
+                <label htmlFor="name" className="label-mono text-muted-foreground">
+                  Name
+                </label>
+                <Input
+                  id="name"
+                  type="text"
+                  placeholder="Jane Doe"
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                  required
+                />
+              </div>
+              <div className="space-y-2">
+                <label htmlFor="email" className="label-mono text-muted-foreground">
+                  Email
+                </label>
+                <Input
+                  id="email"
+                  type="email"
+                  placeholder="you@example.com"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  required
+                />
+              </div>
+              <div className="space-y-2">
+                <label htmlFor="password" className="label-mono text-muted-foreground">
+                  Password
+                </label>
+                <Input
+                  id="password"
+                  type="password"
+                  placeholder="••••••••"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  required
+                />
+              </div>
+            </CardContent>
+            <CardFooter className="flex flex-col gap-4">
+              <Button type="submit" className="w-full">
+                Create Account
+              </Button>
+              <p className="text-center text-sm text-muted-foreground">
+                Already have an account?{" "}
+                <Link
+                  href="/member/login"
+                  className="font-medium text-primary hover:underline"
+                >
+                  Log in
+                </Link>
+              </p>
+            </CardFooter>
+          </form>
+        </Card>
+      </div>
+    </div>
+  );
+}

package/templates/starter-kit/app/page.tsx

@@ -0,0 +1,82 @@
+import Link from "next/link";
+import { Rocket, GraduationCap, Settings2, ArrowRight } from "lucide-react";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+
+const areas = [
+  {
+    href: "/sale",
+    icon: Rocket,
+    title: "Sale Page",
+    description:
+      "Public-facing offer page. Headline, pitch, pricing, and the CTA that turns visitors into members.",
+  },
+  {
+    href: "/member/login",
+    icon: GraduationCap,
+    title: "Member Area",
+    description:
+      "Logged-in member dashboard. Course access, progress tracking, and account settings.",
+  },
+  {
+    href: "/backoffice",
+    icon: Settings2,
+    title: "Backoffice",
+    description:
+      "Internal admin console. Member management, metrics, and operational tools.",
+  },
+];
+
+export default function Home() {
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-center bg-background px-6 py-24">
+      <div className="mx-auto max-w-3xl text-center">
+        <p className="text-sm font-medium uppercase tracking-wide text-muted-foreground">
+          The SHIP Method OS
+        </p>
+        <h1 className="mt-2 text-4xl font-bold tracking-tight text-foreground sm:text-5xl">
+          Pick your area
+        </h1>
+        <p className="mt-4 text-base text-muted-foreground">
+          This starter kit ships with three route groups. Each one is being
+          built independently on top of the shared UI and mock data layer
+          defined here.
+        </p>
+      </div>
+
+      <div className="mt-12 grid w-full max-w-5xl gap-6 sm:grid-cols-3">
+        {areas.map((area) => {
+          const Icon = area.icon;
+          return (
+            <Card key={area.href} className="flex flex-col">
+              <CardHeader>
+                <div className="mb-2 flex h-10 w-10 items-center justify-center rounded-md bg-primary/10 text-primary">
+                  <Icon className="h-5 w-5" />
+                </div>
+                <CardTitle>{area.title}</CardTitle>
+                <CardDescription>{area.description}</CardDescription>
+              </CardHeader>
+              <CardContent className="flex-1" />
+              <CardFooter>
+                <Button asChild className="w-full">
+                  <Link href={area.href}>
+                    Enter
+                    <ArrowRight className="h-4 w-4" />
+                  </Link>
+                </Button>
+              </CardFooter>
+            </Card>
+          );
+        })}
+      </div>
+    </main>
+  );
+}

package/templates/starter-kit/app/sale/_components/cta-footer.tsx

@@ -0,0 +1,66 @@
+import { ArrowRight } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+
+const footerLinks = [
+  { label: "Product", href: "#" },
+  { label: "Pricing", href: "#" },
+  { label: "About", href: "#" },
+  { label: "Contact", href: "#" },
+];
+
+export function CtaFooter() {
+  return (
+    <>
+      <section className="container mx-auto px-4 py-28">
+        <div className="relative overflow-hidden rounded-3xl border border-primary/30 bg-card px-6 py-20 sm:px-16">
+          <div className="bg-grid pointer-events-none absolute inset-0 opacity-40" />
+          <div className="pointer-events-none absolute -right-24 -top-24 h-72 w-72 rounded-full bg-primary/30 blur-[100px]" />
+          <span
+            aria-hidden
+            className="pointer-events-none absolute -bottom-10 -left-6 select-none font-display text-[10rem] font-medium leading-none text-foreground/[0.05]"
+          >
+            &rarr;
+          </span>
+
+          <div className="relative flex flex-col items-start gap-6 text-left">
+            <p className="label-mono text-primary">Ready when you are</p>
+            <h2 className="max-w-2xl font-display text-4xl font-medium leading-tight tracking-tight sm:text-5xl">
+              Ready to <span className="italic text-primary">ship</span>{" "}
+              faster?
+            </h2>
+            <p className="max-w-xl text-muted-foreground">
+              Join hundreds of teams who&apos;ve already ditched the
+              spreadsheet chaos. Start your free trial today — no credit card
+              required.
+            </p>
+            <Button size="lg" className="glow-primary gap-2">
+              Get Started
+              <ArrowRight className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+      </section>
+
+      <footer className="border-t border-border">
+        <div className="container mx-auto flex flex-col items-center justify-between gap-6 px-4 py-10 sm:flex-row">
+          <p className="font-display text-sm font-medium">SHIP Method OS</p>
+          <nav className="flex flex-wrap items-center justify-center gap-6 text-sm text-muted-foreground">
+            {footerLinks.map((link) => (
+              <a
+                key={link.label}
+                href={link.href}
+                className="transition-colors hover:text-foreground"
+              >
+                {link.label}
+              </a>
+            ))}
+          </nav>
+          <p className="label-mono text-muted-foreground">
+            Built with The SHIP Method OS
+          </p>
+        </div>
+      </footer>
+    </>
+  );
+}