ship-create 1.0.0

package/templates/starter-kit/app/sale/_components/faq.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import { useState } from "react";
+import { Plus } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const faqs = [
+  {
+    question: "Can I try it before I pay?",
+    answer:
+      "Yes — every plan includes a free 14-day trial with full access to features. No credit card required to start.",
+  },
+  {
+    question: "Can I change plans later?",
+    answer:
+      "Absolutely. You can upgrade, downgrade, or cancel at any time from your account settings — changes apply immediately.",
+  },
+  {
+    question: "Is my data secure?",
+    answer:
+      "All data is encrypted in transit and at rest. Business plans also include SSO, audit logs, and role-based permissions.",
+  },
+  {
+    question: "Do you offer discounts for annual billing?",
+    answer:
+      "Yes, switching to annual billing saves roughly two months compared to paying monthly. You can switch from your billing page.",
+  },
+  {
+    question: "What kind of support do you provide?",
+    answer:
+      "Starter includes email support, Pro includes priority support, and Business includes a dedicated success manager.",
+  },
+  {
+    question: "Can I cancel anytime?",
+    answer:
+      "Yes, there are no long-term contracts. You can cancel from your account at any time and you won't be charged again.",
+  },
+];
+
+export function Faq() {
+  const [openIndex, setOpenIndex] = useState<number | null>(0);
+
+  return (
+    <section className="container mx-auto px-4 py-28">
+      <div className="mx-auto mb-16 flex max-w-2xl flex-col items-center gap-3 text-center">
+        <p className="label-mono text-primary">FAQ</p>
+        <h2 className="font-display text-4xl font-medium tracking-tight sm:text-5xl">
+          Frequently asked{" "}
+          <span className="italic text-primary">questions</span>
+        </h2>
+        <p className="mt-2 text-muted-foreground">
+          Everything you need to know before you get started.
+        </p>
+      </div>
+      <div className="mx-auto max-w-2xl divide-y divide-border rounded-2xl border border-border">
+        {faqs.map((faq, index) => {
+          const isOpen = openIndex === index;
+          return (
+            <div key={faq.question}>
+              <button
+                type="button"
+                onClick={() => setOpenIndex(isOpen ? null : index)}
+                className="flex w-full items-center gap-4 px-6 py-5 text-left transition-colors hover:bg-muted/40"
+                aria-expanded={isOpen}
+              >
+                <span className="label-mono shrink-0 text-muted-foreground/50">
+                  {String(index + 1).padStart(2, "0")}
+                </span>
+                <span
+                  className={cn(
+                    "flex-1 text-sm font-medium transition-colors",
+                    isOpen && "text-primary"
+                  )}
+                >
+                  {faq.question}
+                </span>
+                <span
+                  className={cn(
+                    "flex h-7 w-7 shrink-0 items-center justify-center rounded-full border border-border text-muted-foreground transition-all duration-300",
+                    isOpen && "rotate-45 border-primary/50 text-primary"
+                  )}
+                >
+                  <Plus className="h-3.5 w-3.5" />
+                </span>
+              </button>
+              <div
+                className={cn(
+                  "grid overflow-hidden transition-all duration-300 ease-out",
+                  isOpen
+                    ? "grid-rows-[1fr] opacity-100"
+                    : "grid-rows-[0fr] opacity-0"
+                )}
+              >
+                <div className="overflow-hidden">
+                  <p className="px-6 pb-5 pl-16 text-sm leading-relaxed text-muted-foreground">
+                    {faq.answer}
+                  </p>
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </section>
+  );
+}

package/templates/starter-kit/app/sale/_components/features.tsx

@@ -0,0 +1,95 @@
+import {
+  BarChart3,
+  Bell,
+  Layers,
+  Lock,
+  Workflow,
+  Zap,
+} from "lucide-react";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+
+const features = [
+  {
+    icon: Workflow,
+    title: "Unified workflows",
+    description:
+      "Build pipelines that connect every step of your process, from intake to delivery, without switching tools.",
+  },
+  {
+    icon: BarChart3,
+    title: "Real-time analytics",
+    description:
+      "See what's working and what's not with dashboards that update the moment your data changes.",
+  },
+  {
+    icon: Bell,
+    title: "Smart notifications",
+    description:
+      "Only get pinged when it matters. Configurable alerts keep noise down and signal up.",
+  },
+  {
+    icon: Layers,
+    title: "Flexible templates",
+    description:
+      "Start from a proven template or build your own — every workspace adapts to how your team actually works.",
+  },
+  {
+    icon: Lock,
+    title: "Enterprise-grade security",
+    description:
+      "Role-based access, audit logs, and encryption at rest keep your data safe by default.",
+  },
+  {
+    icon: Zap,
+    title: "Built for speed",
+    description:
+      "A fast, responsive interface so your team spends time working, not waiting on spinners.",
+  },
+];
+
+export function Features() {
+  return (
+    <section className="bg-grid relative py-28">
+      <div className="container relative mx-auto px-4">
+        <div className="mx-auto mb-16 flex max-w-2xl flex-col items-center gap-3 text-center">
+          <p className="label-mono text-primary">Capabilities</p>
+          <h2 className="font-display text-4xl font-medium tracking-tight sm:text-5xl">
+            Everything your team{" "}
+            <span className="italic text-primary">needs</span>
+          </h2>
+          <p className="mt-2 text-muted-foreground">
+            One platform, every workflow — no more duct-taping five tools
+            together.
+          </p>
+        </div>
+        <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+          {features.map((feature) => {
+            const Icon = feature.icon;
+            return (
+              <Card
+                key={feature.title}
+                className="bg-card/90 backdrop-blur transition-transform duration-300 hover:-translate-y-1"
+              >
+                <CardHeader>
+                  <div className="mb-3 flex h-11 w-11 items-center justify-center rounded-full bg-primary/15 text-primary">
+                    <Icon className="h-5 w-5" />
+                  </div>
+                  <CardTitle>{feature.title}</CardTitle>
+                  <CardDescription>{feature.description}</CardDescription>
+                </CardHeader>
+                <CardContent />
+              </Card>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+}

package/templates/starter-kit/app/sale/_components/hero.tsx

@@ -0,0 +1,106 @@
+import { ArrowRight } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+
+export function Hero() {
+  return (
+    <section className="relative overflow-hidden pb-24 pt-28 md:pt-36">
+      {/* Decorative grid panel, off to the right, faded */}
+      <div className="bg-grid pointer-events-none absolute inset-y-0 right-0 hidden w-1/2 [mask-image:linear-gradient(to_left,black,transparent)] lg:block" />
+
+      {/* Soft ember glow blob behind the headline */}
+      <div className="pointer-events-none absolute -left-32 top-10 h-[28rem] w-[28rem] rounded-full bg-primary/20 blur-[110px]" />
+
+      {/* Giant faint serif numeral as a decorative mark */}
+      <span
+        aria-hidden
+        className="pointer-events-none absolute -right-6 top-4 select-none font-display text-[16rem] font-medium leading-none text-foreground/[0.04] sm:text-[22rem]"
+      >
+        01
+      </span>
+
+      <div className="container relative mx-auto px-4">
+        <div className="grid items-end gap-12 lg:grid-cols-[1.15fr_0.85fr]">
+          <div className="flex flex-col items-start gap-7 text-left">
+            <span
+              className="label-mono animate-fade-up inline-flex items-center gap-2 text-primary"
+              style={{ animationDelay: "0s" }}
+            >
+              <span className="h-1.5 w-1.5 rounded-full bg-primary" />
+              Now in public beta
+            </span>
+
+            <h1
+              className="animate-fade-up max-w-2xl font-display text-5xl font-medium leading-[1.05] tracking-tight sm:text-6xl md:text-7xl"
+              style={{ animationDelay: "0.1s" }}
+            >
+              Manage your entire workflow{" "}
+              <span className="relative inline-block italic text-primary">
+                in one place
+                <svg
+                  aria-hidden
+                  viewBox="0 0 300 18"
+                  className="absolute -bottom-2 left-0 h-3 w-full text-primary/70"
+                  preserveAspectRatio="none"
+                >
+                  <path
+                    d="M2 13C58 4 130 2 178 7C220 11 262 13 298 6"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="4"
+                    strokeLinecap="round"
+                  />
+                </svg>
+              </span>
+            </h1>
+
+            <p
+              className="animate-fade-up max-w-md text-lg leading-relaxed text-muted-foreground"
+              style={{ animationDelay: "0.2s" }}
+            >
+              Replace your spreadsheets, sticky notes, and ten disconnected
+              tools with a single platform built for teams who want to move
+              faster.
+            </p>
+
+            <div
+              className="animate-fade-up flex flex-col gap-3 sm:flex-row"
+              style={{ animationDelay: "0.3s" }}
+            >
+              <Button size="lg" className="glow-primary gap-2">
+                Get Started
+                <ArrowRight className="h-4 w-4" />
+              </Button>
+              <Button size="lg" variant="outline">
+                See Pricing
+              </Button>
+            </div>
+
+            <p
+              className="label-mono animate-fade-up text-muted-foreground"
+              style={{ animationDelay: "0.4s" }}
+            >
+              No credit card required &middot; Free 14-day trial
+            </p>
+          </div>
+
+          <div
+            className="animate-fade-up relative"
+            style={{ animationDelay: "0.25s" }}
+          >
+            <div className="bg-grid relative aspect-[4/5] w-full overflow-hidden rounded-2xl border border-border bg-card shadow-soft">
+              <div className="absolute inset-0 bg-gradient-to-br from-primary/15 via-transparent to-transparent" />
+              <div className="absolute bottom-6 left-6 right-6 rounded-xl border border-border bg-background/80 p-4 backdrop-blur">
+                <p className="label-mono text-primary">Live workspace</p>
+                <p className="mt-1 font-display text-lg">
+                  Everything in sync, automatically.
+                </p>
+              </div>
+            </div>
+            <div className="absolute -bottom-5 -left-5 hidden h-20 w-20 rounded-full border border-primary/40 bg-primary/20 blur-sm sm:block" />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

package/templates/starter-kit/app/sale/_components/pricing.tsx

@@ -0,0 +1,133 @@
+import { Check } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+const tiers = [
+  {
+    name: "Starter",
+    price: "$19",
+    period: "/mo",
+    description: "For individuals and small teams getting started.",
+    features: [
+      "Up to 3 workspaces",
+      "Basic analytics",
+      "Email support",
+      "1 GB storage",
+    ],
+    cta: "Start Free Trial",
+    highlighted: false,
+  },
+  {
+    name: "Pro",
+    price: "$49",
+    period: "/mo",
+    description: "For growing teams that need more power and automation.",
+    features: [
+      "Unlimited workspaces",
+      "Advanced analytics",
+      "Priority support",
+      "50 GB storage",
+      "Custom integrations",
+    ],
+    cta: "Start Free Trial",
+    highlighted: true,
+  },
+  {
+    name: "Business",
+    price: "$129",
+    period: "/mo",
+    description: "For organizations that need scale, security, and control.",
+    features: [
+      "Everything in Pro",
+      "SSO & advanced permissions",
+      "Dedicated success manager",
+      "Unlimited storage",
+      "SLA & audit logs",
+    ],
+    cta: "Contact Sales",
+    highlighted: false,
+  },
+];
+
+export function Pricing() {
+  return (
+    <section className="container mx-auto px-4 py-28">
+      <div className="mx-auto mb-16 flex max-w-2xl flex-col items-center gap-3 text-center">
+        <p className="label-mono text-primary">Pricing</p>
+        <h2 className="font-display text-4xl font-medium tracking-tight sm:text-5xl">
+          Simple, <span className="italic text-primary">transparent</span>{" "}
+          pricing
+        </h2>
+        <p className="mt-2 text-muted-foreground">
+          Choose the plan that fits your team. Upgrade or downgrade anytime.
+        </p>
+      </div>
+      <div className="grid items-center gap-8 lg:grid-cols-3">
+        {tiers.map((tier) => (
+          <Card
+            key={tier.name}
+            className={cn(
+              "relative flex flex-col transition-transform duration-300",
+              tier.highlighted &&
+                "glow-primary z-10 border-primary/60 lg:scale-110"
+            )}
+          >
+            {tier.highlighted && (
+              <Badge className="absolute -top-3 left-1/2 -translate-x-1/2">
+                Most Popular
+              </Badge>
+            )}
+            <CardHeader>
+              <p className="label-mono text-muted-foreground">{tier.name}</p>
+              <CardTitle
+                className={cn(
+                  "text-2xl",
+                  tier.highlighted && "text-primary"
+                )}
+              >
+                {tier.description}
+              </CardTitle>
+              <div className="mt-4 flex items-baseline gap-1">
+                <span className="font-display text-5xl font-medium tracking-tight">
+                  {tier.price}
+                </span>
+                <span className="text-sm text-muted-foreground">
+                  {tier.period}
+                </span>
+              </div>
+            </CardHeader>
+            <CardContent className="flex-1">
+              <ul className="space-y-3">
+                {tier.features.map((feature) => (
+                  <li key={feature} className="flex items-start gap-2 text-sm">
+                    <Check className="mt-0.5 h-4 w-4 shrink-0 text-success" />
+                    <span>{feature}</span>
+                  </li>
+                ))}
+              </ul>
+            </CardContent>
+            <CardFooter>
+              <Button
+                className="w-full"
+                size={tier.highlighted ? "lg" : "default"}
+                variant={tier.highlighted ? "default" : "outline"}
+              >
+                {tier.cta}
+              </Button>
+            </CardFooter>
+          </Card>
+        ))}
+      </div>
+    </section>
+  );
+}

package/templates/starter-kit/app/sale/_components/problem.tsx

@@ -0,0 +1,59 @@
+import { AlertTriangle, Clock, FolderX } from "lucide-react";
+
+const problems = [
+  {
+    icon: Clock,
+    title: "Hours lost to busywork",
+    description:
+      "Your team spends more time updating status docs than actually doing the work that moves the business forward.",
+  },
+  {
+    icon: FolderX,
+    title: "Context scattered everywhere",
+    description:
+      "Decisions live in chat threads, files live in five different drives, and nobody can find the latest version of anything.",
+  },
+  {
+    icon: AlertTriangle,
+    title: "No visibility until it's too late",
+    description:
+      "Problems surface in a status meeting instead of the moment they happen, so small issues turn into missed deadlines.",
+  },
+];
+
+export function Problem() {
+  return (
+    <section className="container mx-auto px-4 py-28">
+      <div className="mb-16 grid gap-6 lg:grid-cols-[0.6fr_1fr] lg:items-end">
+        <p className="label-mono text-primary">The problem</p>
+        <h2 className="max-w-xl font-display text-4xl font-medium leading-tight tracking-tight sm:text-5xl">
+          Sound <span className="italic text-primary">familiar?</span>
+        </h2>
+      </div>
+      <div className="grid gap-px overflow-hidden rounded-2xl border border-border bg-border sm:grid-cols-3">
+        {problems.map((problem, index) => {
+          const Icon = problem.icon;
+          return (
+            <div
+              key={problem.title}
+              className="flex flex-col gap-5 bg-background p-8"
+            >
+              <span className="label-mono text-muted-foreground/60">
+                {String(index + 1).padStart(2, "0")}
+              </span>
+              <div className="flex h-12 w-12 items-center justify-center rounded-full bg-destructive/10 text-destructive">
+                <Icon className="h-5 w-5" />
+              </div>
+              <h3 className="font-display text-xl font-medium leading-snug">
+                {problem.title}
+              </h3>
+              <p className="text-sm leading-relaxed text-muted-foreground">
+                {problem.description}
+              </p>
+            </div>
+          );
+        })}
+      </div>
+    </section>
+  );
+}

package/templates/starter-kit/app/sale/_components/testimonials.tsx

@@ -0,0 +1,100 @@
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { Card, CardContent } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+const testimonials = [
+  {
+    name: "Jordan Mills",
+    role: "Operations Lead, Northwind Co.",
+    initials: "JM",
+    quote:
+      "We replaced four separate tools with this in under a month. Our team finally has one source of truth.",
+    featured: true,
+  },
+  {
+    name: "Priya Anand",
+    role: "Founder, Lattice Studio",
+    initials: "PA",
+    quote:
+      "The automation alone saved us about 10 hours a week. It paid for itself in the first quarter.",
+    featured: false,
+  },
+  {
+    name: "Marcus Webb",
+    role: "Head of Product, Brightline",
+    initials: "MW",
+    quote:
+      "Setup took an afternoon, not a quarter. Our team adopted it without any real onboarding pain.",
+    featured: false,
+  },
+];
+
+export function Testimonials() {
+  const [featured, ...rest] = testimonials;
+
+  return (
+    <section className="bg-grid relative py-28">
+      <div className="container relative mx-auto px-4">
+        <div className="mb-16 grid gap-6 lg:grid-cols-[0.6fr_1fr] lg:items-end">
+          <p className="label-mono text-primary">Social proof</p>
+          <h2 className="max-w-xl font-display text-4xl font-medium leading-tight tracking-tight sm:text-5xl">
+            Loved by teams{" "}
+            <span className="italic text-primary">everywhere</span>
+          </h2>
+        </div>
+
+        <div className="grid gap-6 lg:grid-cols-5">
+          <Card className="bg-card/90 backdrop-blur lg:col-span-3 lg:row-span-2">
+            <CardContent className="flex h-full flex-col justify-between gap-8 p-8">
+              <p className="font-display text-2xl font-medium leading-snug sm:text-3xl">
+                &ldquo;{featured.quote}&rdquo;
+              </p>
+              <div className="flex items-center gap-3">
+                <Avatar className="h-12 w-12">
+                  <AvatarFallback className="bg-primary/15 text-primary">
+                    {featured.initials}
+                  </AvatarFallback>
+                </Avatar>
+                <div>
+                  <p className="text-sm font-semibold">{featured.name}</p>
+                  <p className="label-mono text-muted-foreground">
+                    {featured.role}
+                  </p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          {rest.map((testimonial, index) => (
+            <Card
+              key={testimonial.name}
+              className={cn(
+                "bg-card/90 backdrop-blur lg:col-span-2",
+                index === 0 ? "lg:translate-y-6" : "lg:-translate-y-2"
+              )}
+            >
+              <CardContent className="flex flex-col gap-5 p-6">
+                <p className="text-sm leading-relaxed text-muted-foreground">
+                  &ldquo;{testimonial.quote}&rdquo;
+                </p>
+                <div className="flex items-center gap-3">
+                  <Avatar>
+                    <AvatarFallback>{testimonial.initials}</AvatarFallback>
+                  </Avatar>
+                  <div>
+                    <p className="text-sm font-semibold">
+                      {testimonial.name}
+                    </p>
+                    <p className="text-xs text-muted-foreground">
+                      {testimonial.role}
+                    </p>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,21 @@
+import { CtaFooter } from "./_components/cta-footer";
+import { Faq } from "./_components/faq";
+import { Features } from "./_components/features";
+import { Hero } from "./_components/hero";
+import { Pricing } from "./_components/pricing";
+import { Problem } from "./_components/problem";
+import { Testimonials } from "./_components/testimonials";
+
+export default function SalePage() {
+  return (
+    <main className="flex flex-col">
+      <Hero />
+      <Problem />
+      <Features />
+      <Pricing />
+      <Testimonials />
+      <Faq />
+      <CtaFooter />
+    </main>
+  );
+}

package/templates/starter-kit/components/ui/avatar.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+
+import { cn } from "@/lib/utils";
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    )}
+    {...props}
+  />
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted text-sm font-medium text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export { Avatar, AvatarImage, AvatarFallback };