ship-create 1.0.0

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

@@ -0,0 +1,134 @@
+"use client";
+
+import * as React from "react";
+import { UserPlus } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { users, type MockUser } from "@/lib/mock-data";
+
+const statusVariant: Record<string, "default" | "secondary" | "outline" | "destructive"> = {
+  active: "default",
+  trialing: "secondary",
+  past_due: "destructive",
+  canceled: "outline",
+};
+
+function initials(name: string) {
+  return name
+    .split(" ")
+    .map((part) => part[0])
+    .join("")
+    .slice(0, 2)
+    .toUpperCase();
+}
+
+function UsersTable({ data }: { data: MockUser[] }) {
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead>Name</TableHead>
+          <TableHead>Email</TableHead>
+          <TableHead>Plan</TableHead>
+          <TableHead>Status</TableHead>
+          <TableHead>Joined</TableHead>
+          <TableHead className="text-right">Actions</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {data.map((user) => (
+          <TableRow key={user.id}>
+            <TableCell className="py-3 font-medium">
+              <div className="flex items-center gap-3">
+                <Avatar className="h-8 w-8">
+                  <AvatarFallback className="text-xs">
+                    {initials(user.name)}
+                  </AvatarFallback>
+                </Avatar>
+                <span className="text-foreground">{user.name}</span>
+              </div>
+            </TableCell>
+            <TableCell className="py-3 text-muted-foreground">{user.email}</TableCell>
+            <TableCell className="py-3">
+              <Badge variant="outline">{user.plan}</Badge>
+            </TableCell>
+            <TableCell className="py-3">
+              <Badge variant={statusVariant[user.status] ?? "outline"}>
+                {user.status.replace("_", " ")}
+              </Badge>
+            </TableCell>
+            <TableCell className="py-3 text-muted-foreground">
+              {new Date(user.joinedAt).toLocaleDateString()}
+            </TableCell>
+            <TableCell className="py-3 text-right">
+              <Button variant="outline" size="sm" onClick={() => {}}>
+                View
+              </Button>
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+}
+
+export default function BackofficeUsersPage() {
+  const active = users.filter((u) => u.status === "active");
+  const inactive = users.filter((u) => u.status !== "active");
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between gap-4">
+        <div>
+          <p className="label-mono text-primary">Accounts</p>
+          <h1 className="font-display text-2xl font-medium tracking-tight text-foreground">
+            Users
+          </h1>
+          <p className="mt-1 text-sm text-muted-foreground">
+            Manage all registered accounts.
+          </p>
+        </div>
+        <Button onClick={() => {}}>
+          <UserPlus className="h-4 w-4" />
+          Invite User
+        </Button>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>All Users</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Tabs defaultValue="all">
+            <TabsList>
+              <TabsTrigger value="all">All ({users.length})</TabsTrigger>
+              <TabsTrigger value="active">Active ({active.length})</TabsTrigger>
+              <TabsTrigger value="inactive">Inactive ({inactive.length})</TabsTrigger>
+            </TabsList>
+            <TabsContent value="all">
+              <UsersTable data={users} />
+            </TabsContent>
+            <TabsContent value="active">
+              <UsersTable data={active} />
+            </TabsContent>
+            <TabsContent value="inactive">
+              <UsersTable data={inactive} />
+            </TabsContent>
+          </Tabs>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/templates/starter-kit/app/globals.css

@@ -0,0 +1,141 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/*
+  "Ember Editorial" — the SHIP Starter Kit's 2026 visual direction.
+  A warm-ink dark theme (not slate/blue-black) with a single confident
+  ember-coral accent, replacing the generic purple-gradient-on-white default.
+  Values are HSL triplets so Tailwind's hsl(var(--x)) usage works.
+*/
+
+@layer base {
+  :root {
+    --background: 27 18% 8%;       /* warm espresso ink, not cold slate */
+    --foreground: 39 38% 93%;      /* warm parchment white */
+
+    --card: 26 16% 11%;
+    --card-foreground: 39 38% 93%;
+
+    --primary: 14 92% 58%;         /* ember coral */
+    --primary-foreground: 27 30% 8%;
+
+    --secondary: 84 22% 52%;       /* moss green, the cool counterweight */
+    --secondary-foreground: 27 30% 8%;
+
+    --accent: 38 78% 62%;          /* warm gold for highlights / eyebrow text */
+    --accent-foreground: 27 30% 8%;
+
+    --muted: 27 14% 16%;
+    --muted-foreground: 36 16% 65%;
+
+    --destructive: 6 78% 58%;
+    --destructive-foreground: 39 38% 93%;
+
+    --success: 84 30% 48%;
+    --success-foreground: 27 30% 8%;
+
+    --border: 27 14% 19%;
+    --input: 27 14% 19%;
+    --ring: 14 92% 58%;
+
+    --radius: 0.85rem;
+  }
+
+  /* .dark is identical to :root — this kit commits to one confident theme
+     rather than a light/dark toggle. Kept for component compatibility. */
+  .dark {
+    --background: 27 18% 8%;
+    --foreground: 39 38% 93%;
+    --card: 26 16% 11%;
+    --card-foreground: 39 38% 93%;
+    --primary: 14 92% 58%;
+    --primary-foreground: 27 30% 8%;
+    --secondary: 84 22% 52%;
+    --secondary-foreground: 27 30% 8%;
+    --accent: 38 78% 62%;
+    --accent-foreground: 27 30% 8%;
+    --muted: 27 14% 16%;
+    --muted-foreground: 36 16% 65%;
+    --destructive: 6 78% 58%;
+    --destructive-foreground: 39 38% 93%;
+    --success: 84 30% 48%;
+    --success-foreground: 27 30% 8%;
+    --border: 27 14% 19%;
+    --input: 27 14% 19%;
+    --ring: 14 92% 58%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+
+  html {
+    color-scheme: dark;
+  }
+
+  body {
+    @apply bg-background text-foreground font-sans;
+    font-feature-settings: "ss01", "ss02";
+  }
+
+  /* Grain overlay — gives the warm-ink background depth instead of flat color. */
+  body::before {
+    content: "";
+    position: fixed;
+    inset: 0;
+    z-index: 60;
+    pointer-events: none;
+    opacity: 0.05;
+    mix-blend-mode: overlay;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+  }
+
+  ::selection {
+    background-color: hsl(var(--primary) / 0.35);
+    color: hsl(var(--foreground));
+  }
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+
+  /* Eyebrow / label style used across the kit for mono uppercase tags. */
+  .label-mono {
+    font-family: var(--font-mono);
+    text-transform: uppercase;
+    letter-spacing: 0.14em;
+    font-size: 0.7rem;
+    font-weight: 500;
+  }
+
+  .glow-primary {
+    box-shadow: 0 0 0 1px hsl(var(--primary) / 0.25), 0 8px 30px -8px hsl(var(--primary) / 0.45);
+  }
+
+  .bg-grid {
+    background-image:
+      linear-gradient(to right, hsl(var(--border) / 0.4) 1px, transparent 1px),
+      linear-gradient(to bottom, hsl(var(--border) / 0.4) 1px, transparent 1px);
+    background-size: 56px 56px;
+  }
+
+  .animate-in-up {
+    animation: fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
+  }
+}
+
+@keyframes fade-up {
+  from {
+    opacity: 0;
+    transform: translateY(14px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

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

@@ -0,0 +1,43 @@
+import type { Metadata } from "next";
+import { Fraunces, Work_Sans, JetBrains_Mono } from "next/font/google";
+import "./globals.css";
+
+const display = Fraunces({
+  subsets: ["latin"],
+  variable: "--font-display",
+  axes: ["opsz", "SOFT", "WONK"],
+  style: ["normal", "italic"],
+});
+
+const sans = Work_Sans({
+  subsets: ["latin"],
+  variable: "--font-sans",
+  weight: ["400", "500", "600", "700"],
+});
+
+const mono = JetBrains_Mono({
+  subsets: ["latin"],
+  variable: "--font-mono",
+  weight: ["400", "500"],
+});
+
+export const metadata: Metadata = {
+  title: "SHIP Starter Kit",
+  description:
+    "The SHIP Method OS starter kit — a working UI shell for the sale, member, and backoffice route groups.",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html
+      lang="en"
+      className={`dark ${display.variable} ${sans.variable} ${mono.variable}`}
+    >
+      <body className="font-sans antialiased">{children}</body>
+    </html>
+  );
+}

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

@@ -0,0 +1,137 @@
+"use client";
+
+import { users } from "@/lib/mock-data";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+} from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Table,
+  TableHeader,
+  TableBody,
+  TableRow,
+  TableHead,
+  TableCell,
+} from "@/components/ui/table";
+
+const mockUser = users[0];
+
+interface MockInvoice {
+  date: string;
+  description: string;
+  amount: string;
+  status: "Paid" | "Pending" | "Failed";
+}
+
+const invoices: MockInvoice[] = [
+  {
+    date: "2026-06-01",
+    description: "Pro Plan — Monthly Subscription",
+    amount: "$49.00",
+    status: "Paid",
+  },
+  {
+    date: "2026-05-01",
+    description: "Pro Plan — Monthly Subscription",
+    amount: "$49.00",
+    status: "Paid",
+  },
+  {
+    date: "2026-04-01",
+    description: "Pro Plan — Monthly Subscription",
+    amount: "$49.00",
+    status: "Paid",
+  },
+  {
+    date: "2026-03-01",
+    description: "Pro Plan — Monthly Subscription",
+    amount: "$49.00",
+    status: "Failed",
+  },
+];
+
+const statusVariant: Record<
+  MockInvoice["status"],
+  "default" | "secondary" | "outline" | "destructive"
+> = {
+  Paid: "default",
+  Pending: "secondary",
+  Failed: "destructive",
+};
+
+export default function MemberBillingPage() {
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="font-display text-3xl font-medium tracking-tight">
+          Billing
+        </h2>
+        <p className="mt-1 text-muted-foreground">
+          Manage your subscription and view past invoices.
+        </p>
+      </div>
+
+      <Card className="animate-fade-up">
+        <CardHeader>
+          <span className="label-mono text-muted-foreground">Current Plan</span>
+          <CardTitle className="font-display text-3xl font-medium">
+            {mockUser.plan} Plan
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="text-sm text-muted-foreground">
+            Status:{" "}
+            <span className="font-medium text-foreground">
+              {mockUser.status}
+            </span>{" "}
+            • Member since {mockUser.joinedAt}
+          </p>
+        </CardContent>
+        <CardFooter>
+          <Button>Manage Subscription</Button>
+        </CardFooter>
+      </Card>
+
+      <Card className="animate-fade-up" style={{ animationDelay: "80ms" }}>
+        <CardHeader>
+          <CardTitle className="text-base">Invoice History</CardTitle>
+          <CardDescription>
+            Your billing history for the past few months.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Date</TableHead>
+                <TableHead>Description</TableHead>
+                <TableHead>Amount</TableHead>
+                <TableHead>Status</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {invoices.map((invoice) => (
+                <TableRow key={invoice.date}>
+                  <TableCell>{invoice.date}</TableCell>
+                  <TableCell>{invoice.description}</TableCell>
+                  <TableCell>{invoice.amount}</TableCell>
+                  <TableCell>
+                    <Badge variant={statusVariant[invoice.status]}>
+                      {invoice.status}
+                    </Badge>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

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

@@ -0,0 +1,111 @@
+"use client";
+
+import * as React from "react";
+
+import { members, type MockMemberContent } from "@/lib/mock-data";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardContent,
+  CardFooter,
+} from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+
+const tiers = ["All", "Free", "Starter", "Pro", "Lifetime"] as const;
+
+const tierBadgeVariant: Record<
+  string,
+  "default" | "secondary" | "outline" | "destructive"
+> = {
+  Free: "outline",
+  Starter: "secondary",
+  Pro: "default",
+  Lifetime: "destructive",
+};
+
+function ContentGrid({ items }: { items: MockMemberContent[] }) {
+  if (items.length === 0) {
+    return (
+      <p className="py-12 text-center text-sm text-muted-foreground">
+        No courses in this tier yet.
+      </p>
+    );
+  }
+
+  return (
+    <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+      {items.map((item, idx) => (
+        <Card
+          key={item.id}
+          className="animate-fade-up group transition-all duration-200 hover:-translate-y-0.5 hover:border-primary/40 hover:shadow-[0_0_0_1px_hsl(var(--primary)/0.25),0_8px_30px_-8px_hsl(var(--primary)/0.45)]"
+          style={{ animationDelay: `${idx * 60}ms` }}
+        >
+          <CardHeader>
+            <div className="flex items-center justify-between gap-2">
+              <CardTitle className="text-base">{item.title}</CardTitle>
+              <Badge variant={tierBadgeVariant[item.tier] ?? "outline"}>
+                {item.tier}
+              </Badge>
+            </div>
+          </CardHeader>
+          <CardContent className="space-y-2">
+            <div className="h-2 w-full overflow-hidden rounded-full bg-muted">
+              <div
+                className="h-full rounded-full bg-primary transition-all"
+                style={{ width: `${item.progress}%` }}
+              />
+            </div>
+            <p className="label-mono text-muted-foreground">
+              {item.progress}% complete
+            </p>
+          </CardContent>
+          <CardFooter>
+            <Button size="sm" className="w-full">
+              Continue
+            </Button>
+          </CardFooter>
+        </Card>
+      ))}
+    </div>
+  );
+}
+
+export default function MemberContentPage() {
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="font-display text-3xl font-medium tracking-tight">
+          Courses
+        </h2>
+        <p className="mt-1 text-muted-foreground">
+          Browse everything available across your plan.
+        </p>
+      </div>
+
+      <Tabs defaultValue="All">
+        <TabsList>
+          {tiers.map((tier) => (
+            <TabsTrigger key={tier} value={tier}>
+              {tier}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+
+        {tiers.map((tier) => (
+          <TabsContent key={tier} value={tier}>
+            <ContentGrid
+              items={
+                tier === "All"
+                  ? members
+                  : members.filter((item) => item.tier === tier)
+              }
+            />
+          </TabsContent>
+        ))}
+      </Tabs>
+    </div>
+  );
+}

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

@@ -0,0 +1,129 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { TrendingUp, TrendingDown } from "lucide-react";
+
+import { users, members, metrics } from "@/lib/mock-data";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+} from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+
+const mockUser = users[0];
+
+const tierBadgeVariant: Record<
+  string,
+  "default" | "secondary" | "outline" | "destructive"
+> = {
+  Free: "outline",
+  Starter: "secondary",
+  Pro: "default",
+  Lifetime: "destructive",
+};
+
+export default function MemberDashboardPage() {
+  const router = useRouter();
+
+  return (
+    <div className="space-y-10">
+      <div className="animate-fade-up">
+        <h2 className="font-display text-3xl font-medium tracking-tight">
+          Welcome back, {mockUser.name.split(" ")[0]}
+        </h2>
+        <p className="mt-1 text-muted-foreground">
+          Here&apos;s what&apos;s happening with your account today.
+        </p>
+      </div>
+
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+        {metrics.slice(0, 4).map((metric, idx) => {
+          const positive = metric.change >= 0;
+          return (
+            <Card
+              key={metric.label}
+              className="animate-fade-up"
+              style={{ animationDelay: `${idx * 80}ms` }}
+            >
+              <CardHeader className="pb-2">
+                <span className="label-mono text-muted-foreground">
+                  {metric.label}
+                </span>
+                <CardTitle className="font-display text-3xl font-medium">
+                  {metric.value}
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div
+                  className={
+                    "inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium " +
+                    (positive
+                      ? "bg-success/15 text-success"
+                      : "bg-destructive/15 text-destructive")
+                  }
+                >
+                  {positive ? (
+                    <TrendingUp className="h-3.5 w-3.5" />
+                  ) : (
+                    <TrendingDown className="h-3.5 w-3.5" />
+                  )}
+                  {positive ? "+" : ""}
+                  {metric.change}%
+                </div>
+              </CardContent>
+            </Card>
+          );
+        })}
+      </div>
+
+      <div>
+        <h3 className="label-mono mb-4 text-muted-foreground">
+          Continue Learning
+        </h3>
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+          {members.map((item, idx) => (
+            <Card
+              key={item.id}
+              className="animate-fade-up group transition-all duration-200 hover:-translate-y-0.5 hover:border-primary/40"
+              style={{ animationDelay: `${(idx + 4) * 80}ms` }}
+            >
+              <CardHeader>
+                <div className="flex items-center justify-between gap-2">
+                  <CardTitle className="text-base">{item.title}</CardTitle>
+                  <Badge variant={tierBadgeVariant[item.tier] ?? "outline"}>
+                    {item.tier}
+                  </Badge>
+                </div>
+              </CardHeader>
+              <CardContent className="space-y-2">
+                <div className="h-2 w-full overflow-hidden rounded-full bg-muted">
+                  <div
+                    className="h-full rounded-full bg-primary transition-all"
+                    style={{ width: `${item.progress}%` }}
+                  />
+                </div>
+                <p className="label-mono text-muted-foreground">
+                  {item.progress}% complete
+                </p>
+              </CardContent>
+              <CardFooter>
+                <Button
+                  size="sm"
+                  className="w-full"
+                  onClick={() => router.push("/member/content")}
+                >
+                  Continue
+                </Button>
+              </CardFooter>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}