feat: backup current state before external storage

2025-12-27 11:45:25 -08:00 · 2025-12-27 11:45:25 -08:00 · 720d0014fb
commit 720d0014fb
parent 673007cc9f
23 changed files with 7157 additions and 313 deletions
--- a/.env.example
+++ b/.env.example
@ -0,0 +1,2 @@
+NEXT_PUBLIC_PLAUSIBLE_DOMAIN=1000planets.cloud
+NEXT_PUBLIC_GA_MEASUREMENT_ID=G-XXXXXXX
--- a/.eslintrc.json
+++ b/.eslintrc.json
@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals"]
+}
--- a/app/globals.css
+++ b/app/globals.css
@ -0,0 +1,154 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --foreground: 255 255 255;
+  --background: 8 10 24;
+  --accent: 139 92 246;
+  --soft: 226 232 240;
+  --glow: 148 163 184;
+  --font-body: var(--font-body, 'Space Grotesk', system-ui, sans-serif);
+  --font-heading: var(--font-heading, 'Dela Gothic One', system-ui, sans-serif);
+  --font-data: var(--font-data, 'JetBrains Mono', monospace);
+}
+
+body {
+  font-family: var(--font-body);
+  color: rgb(var(--foreground));
+  background: radial-gradient(circle at 10% 20%, rgba(79, 70, 229, 0.25), transparent 50%),
+    radial-gradient(circle at 80% 10%, rgba(239, 68, 68, 0.25), transparent 60%),
+    rgb(var(--background));
+  min-height: 100vh;
+}
+
+.font-heading {
+  font-family: var(--font-heading);
+}
+
+.font-data {
+  font-family: var(--font-data);
+}
+
+.hero-prism {
+  position: relative;
+  overflow: visible;
+}
+
+.hero-prism::after {
+  content: '';
+  position: absolute;
+  inset: -60px auto auto -40px;
+  width: 320px;
+  height: 320px;
+  border-radius: 999px;
+  background: radial-gradient(circle, rgba(59, 130, 246, 0.35), transparent 70%);
+  filter: blur(30px);
+  opacity: 0.75;
+}
+
+.module-card {
+  background: rgba(15, 23, 42, 0.8);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 28px;
+  padding: 1.5rem;
+  backdrop-filter: blur(14px);
+  box-shadow: 0 25px 40px rgba(2, 6, 23, 0.7);
+  transition: transform 0.4s ease, border-color 0.4s ease;
+}
+
+.module-card:hover {
+  border-color: rgba(139, 92, 246, 0.7);
+  transform: translateY(-4px);
+}
+
+.floating-ring {
+  position: absolute;
+  width: 420px;
+  height: 420px;
+  border-radius: 999px;
+  background: radial-gradient(circle, rgba(139, 92, 246, 0.25), transparent 70%);
+  filter: blur(30px);
+  opacity: 0.35;
+  top: -120px;
+  right: 20%;
+  animation: orbitRing 10s ease-in-out infinite;
+}
+
+.floating-ring--secondary {
+  width: 320px;
+  height: 320px;
+  background: radial-gradient(circle, rgba(59, 130, 246, 0.3), transparent 65%);
+  top: 200px;
+  left: 10%;
+  animation-duration: 12s;
+}
+
+.shimmer {
+  position: relative;
+  overflow: hidden;
+}
+
+.shimmer::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
+  animation: shimmer 1.6s infinite;
+}
+
+@keyframes shimmer {
+  0% {
+    transform: translateX(-110%);
+  }
+  100% {
+    transform: translateX(110%);
+  }
+}
+
+.skeleton {
+  height: 20px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.08);
+  position: relative;
+  overflow: hidden;
+}
+
+.skeleton::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
+  animation: shimmer 1.4s infinite;
+}
+
+.svg-prism {
+  width: 90px;
+  height: 90px;
+  filter: drop-shadow(0 15px 40px rgba(234, 179, 8, 0.35));
+  animation: rotatePrism 14s linear infinite;
+}
+
+@keyframes rotatePrism {
+  from {
+    transform: rotateY(0deg) rotateZ(0deg);
+  }
+  to {
+    transform: rotateY(360deg) rotateZ(360deg);
+  }
+}
+
+@keyframes orbitRing {
+  0% {
+    transform: translateY(0) scale(1);
+    opacity: 0.35;
+  }
+  50% {
+    transform: translateY(-20px) scale(1.05);
+    opacity: 0.6;
+  }
+  100% {
+    transform: translateY(0) scale(1);
+    opacity: 0.35;
+  }
+}
--- a/app/layout.tsx
+++ b/app/layout.tsx
@ -0,0 +1,81 @@
+import type { Metadata } from 'next'
+import Script from 'next/script'
+import { Dela_Gothic_One, JetBrains_Mono, Space_Grotesk } from 'next/font/google'
+import './globals.css'
+
+const spaceGrotesk = Space_Grotesk({ subsets: ['latin'], variable: '--font-body' })
+const delaGothic = Dela_Gothic_One({ subsets: ['latin'], variable: '--font-heading' })
+const jetbrains = JetBrains_Mono({ subsets: ['latin'], variable: '--font-data' })
+
+const plausibleDomain = process.env.NEXT_PUBLIC_PLAUSIBLE_DOMAIN || '1000planets.cloud'
+const gaMeasurementId = process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID
+
+const structuredData = {
+  '@context': 'https://schema.org',
+  '@type': 'Organization',
+  name: '1000 Planets',
+  url: 'https://1000planets.cloud',
+  logo: 'https://1000planets.cloud/logo.png',
+  sameAs: [
+    'https://www.linkedin.com/company/1000planets',
+    'https://www.twitter.com/1000planets',
+  ],
+  description:
+    '1KP delivers AI-assisted marketing tools for small and micro businesses, keeping you in control of every customer touchpoint.',
+}
+
+export const metadata: Metadata = {
+  title: '1000 Planets · AI tools for small & micro businesses',
+  description:
+    'Post-marketing tools from 1KP that help small and micro teams capture leads, publish human-reviewed content, and launch five-page microsites fast.',
+  keywords: [
+    'small business marketing',
+    'lead capture',
+    'microsites',
+    'AI content tools',
+    'human-reviewed automation',
+    'small business growth',
+  ],
+}
+
+export const viewport = { width: 'device-width', initialScale: 1 }
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body className={`${spaceGrotesk.variable} ${delaGothic.variable} ${jetbrains.variable}`}>
+        <Script
+          src="https://plausible.io/js/plausible.js"
+          data-domain={plausibleDomain}
+          strategy="afterInteractive"
+        />
+        {gaMeasurementId && (
+          <>
+            <Script
+              src={`https://www.googletagmanager.com/gtag/js?id=${gaMeasurementId}`}
+              strategy="afterInteractive"
+            />
+            <Script id="ga-init" strategy="afterInteractive">
+              {`
+                window.dataLayer = window.dataLayer || [];
+                function gtag(){dataLayer.push(arguments);}
+                gtag('js', new Date());
+                gtag('config', '${gaMeasurementId}', {
+                  page_path: window.location.pathname,
+                });
+              `}
+            </Script>
+          </>
+        )}
+        <Script id="structured-data" type="application/ld+json" strategy="afterInteractive">
+          {JSON.stringify(structuredData)}
+        </Script>
+        {children}
+      </body>
+    </html>
+  )
+}
--- a/app/page.tsx
+++ b/app/page.tsx
@ -0,0 +1,281 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import { useMemo, useState } from 'react'
+
+const heroStats = [
+  { label: 'Launch time', value: 'days', detail: 'From idea to a five-page microsite with forms and follow-up copy.' },
+  { label: 'Mindshare', value: 'Small & micro businesses only', detail: 'Served with tools built for their pace, not enterprise bureaucracy.' },
+  { label: 'Control', value: 'In your hands', detail: 'We never take over—just give you better drafts, faster loops, and steady oversight.' },
+]
+
+const moduleHighlights = [
+  {
+    title: 'Lead journey blueprint',
+    copy: 'We map every touch—click, form, DM—so your follow-ups feel personal and focused.',
+  },
+  {
+    title: 'Human-reviewed content',
+    copy: 'Blogs, emails, socials drafted by AI and approved by a human so the voice always sounds like you.',
+  },
+  {
+    title: 'Microsite sprint',
+    copy: 'A five-page experience with lightweight storytelling, responsive forms, and quick updates.',
+  },
+]
+
+const addonModules = [
+  { name: 'Social pulse', note: 'Pre-written slices you edit and send', stat: '3 weekly social loops' },
+  { name: 'Conversation lab', note: 'Smart replies you customize', stat: '1 workflow per channel' },
+  { name: 'Content studio', note: 'Blog drafts with on-brand tone', stat: '2 long-form pieces' },
+]
+
+export default function Home() {
+  const [formData, setFormData] = useState({
+    name: '',
+    email: '',
+    company: '',
+    message: '',
+  })
+  const [submitted, setSubmitted] = useState(false)
+  const [error, setError] = useState('')
+
+  const isFormValid = useMemo(
+    () => formData.name.trim() && formData.email.includes('@') && formData.message.trim(),
+    [formData]
+  )
+
+  const handleChange = (field: keyof typeof formData) => (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    setFormData((prev) => ({ ...prev, [field]: event.target.value }))
+  }
+
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+    if (!isFormValid) {
+      setError('Please share a name, valid email, and your main objective.')
+      return
+    }
+    setError('')
+    setSubmitted(true)
+  }
+
+  return (
+    <main className="min-h-screen bg-gradient-to-b from-zinc-950 via-slate-950 to-zinc-900 text-white">
+      <div className="relative z-10 overflow-hidden">
+        <div className="floating-ring pointer-events-none" aria-hidden="true" />
+        <div className="floating-ring floating-ring--secondary pointer-events-none" aria-hidden="true" />
+      </div>
+      <div className="container mx-auto px-4 py-16 space-y-20">
+        <section className="relative hero-prism max-w-6xl mx-auto space-y-10">
+          <div className="text-center space-y-4">
+            <p className="text-xs uppercase tracking-[0.4em] text-zinc-500">Post-marketing world for small teams</p>
+            <h1 className="text-4xl md:text-6xl font-bold leading-tight font-heading">
+              1KP gives you the AI tools that make your small business feel like it has its own marketing team.
+            </h1>
+            <p className="mx-auto max-w-3xl text-lg text-zinc-300">
+              Build lean, readable stories that win trust, capture leads, and stay in your voice. No hype, no ownership swaps—just the tools you can plug into your own rhythm.
+            </p>
+          </div>
+          <div className="flex flex-col-reverse gap-6 lg:flex-row lg:items-center">
+            <div className="space-y-4">
+              <div className="rounded-3xl border border-white/10 bg-white/5 p-6 shadow-[0_20px_45px_rgba(15,23,42,0.9)]">
+                <p className="text-xs uppercase tracking-[0.3em] text-zinc-400">Capstone offer</p>
+                <p className="text-sm text-zinc-300 leading-relaxed">
+                  An AI-assisted five-page microsite with forms, follow-ups, and living content that you can tweak in minutes.
+                </p>
+                <div className="pt-4 space-y-2 font-data text-sm text-slate-200">
+                  <div>
+                    <span className="text-xs uppercase tracking-[0.4em] text-zinc-400">pages</span>
+                    <p className="text-3xl font-semibold">5</p>
+                  </div>
+                  <div>
+                    <span className="text-xs uppercase tracking-[0.4em] text-zinc-400">notes</span>
+                    <p className="text-2xl font-semibold">live edit</p>
+                  </div>
+                </div>
+              </div>
+              <div className="flex flex-col gap-3">
+                <button className="rounded-full bg-gradient-to-r from-violet-500 via-purple-600 to-pink-500 px-8 py-3 text-base font-semibold text-white shadow-lg shadow-violet-500/50 transition hover:scale-[1.02]">
+                  Plan a walkthrough
+                </button>
+                <button className="rounded-full border border-zinc-700 px-8 py-3 text-sm uppercase tracking-[0.3em] text-zinc-400 transition hover:border-zinc-500">
+                  Download the sprint brief
+                </button>
+              </div>
+            </div>
+            <motion.div
+              initial={{ opacity: 0, y: 40 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.8 }}
+              className="grid gap-4 md:grid-cols-2"
+            >
+              {heroStats.map((stat) => (
+                <motion.div
+                  key={stat.label}
+                  className="module-card border border-white/10 bg-white/5 p-5"
+                  whileHover={{ scale: 1.02 }}
+                >
+                  <p className="text-xs uppercase tracking-[0.4em] text-zinc-400">{stat.label}</p>
+                  <p className="text-2xl font-heading text-white">{stat.value}</p>
+                  <p className="text-sm text-zinc-300">{stat.detail}</p>
+                </motion.div>
+              ))}
+            </motion.div>
+          </div>
+          <div className="flex justify-center">
+            <svg viewBox="0 0 100 100" className="svg-prism" role="presentation" aria-hidden="true">
+              <defs>
+                <linearGradient id="halo" x1="0%" y1="0%" x2="100%" y2="100%">
+                  <stop offset="0%" stopColor="#a855f7" />
+                  <stop offset="50%" stopColor="#38bdf8" />
+                  <stop offset="100%" stopColor="#f472b6" />
+                </linearGradient>
+              </defs>
+              <polygon points="50,5 95,35 80,90 20,90 5,35" fill="url(#halo)" opacity="0.85" />
+            </svg>
+          </div>
+        </section>
+
+        <section className="space-y-6 rounded-3xl border border-zinc-800 bg-zinc-950/70 p-8">
+          <div className="flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
+            <div>
+              <p className="text-xs uppercase tracking-[0.3em] text-zinc-500">How we show up</p>
+              <h2 className="text-3xl font-heading font-bold tracking-tight">Practical tools for your customer journey</h2>
+            </div>
+            <p className="text-sm text-zinc-400 max-w-xl">
+              Each step is measurable, reviewed by humans, and built to help small and micro businesses capture leads faster. We keep the language plain and the results understandable.
+            </p>
+          </div>
+          <div className="grid gap-5 md:grid-cols-3">
+            {moduleHighlights.map((module) => (
+              <article key={module.title} className="module-card rounded-3xl border border-white/10 bg-white/5 p-6">
+                <div className="flex items-center justify-between">
+                  <h3 className="text-xl font-heading font-semibold">{module.title}</h3>
+                  <span className="h-2 w-2 rounded-full bg-violet-500" />
+                </div>
+                <p className="mt-3 text-sm text-zinc-300 leading-relaxed">{module.copy}</p>
+              </article>
+            ))}
+          </div>
+        </section>
+
+        <section className="space-y-6 rounded-3xl border border-zinc-800 bg-gradient-to-br from-zinc-950/90 to-slate-900/70 p-8">
+          <div className="flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
+            <div>
+              <p className="text-xs uppercase tracking-[0.3em] text-zinc-500">Capstone product</p>
+              <h2 className="text-3xl font-heading font-bold tracking-tight">Lead-capturing microsites, refreshed</h2>
+            </div>
+            <p className="text-sm text-zinc-400 max-w-xl">
+              Each microsite ships with lead forms, automated follow-ups, and living content modules you can edit in real time. Add-on packs stay affordable and flexible.
+            </p>
+          </div>
+          <div className="grid gap-4 md:grid-cols-3">
+            <div className="module-card rounded-3xl border border-white/10 bg-black/30 p-6">
+              <p className="text-xs uppercase tracking-[0.4em] text-zinc-400">Pages</p>
+              <p className="font-heading text-4xl text-white">5</p>
+              <p className="text-sm text-zinc-300">Story-driven layout, hero through CTA.</p>
+            </div>
+            <div className="module-card rounded-3xl border border-white/10 bg-black/30 p-6">
+              <p className="text-xs uppercase tracking-[0.4em] text-zinc-400">Forms</p>
+              <p className="font-heading text-4xl text-white">Live</p>
+              <p className="text-sm text-zinc-300">Track submissions, add human follow-ups, see the full path.</p>
+            </div>
+            <div className="module-card rounded-3xl border border-white/10 bg-black/30 p-6">
+              <p className="text-xs uppercase tracking-[0.4em] text-zinc-400">Drafts</p>
+              <p className="font-heading text-4xl text-white">Human-checked</p>
+              <p className="text-sm text-zinc-300">Every piece reviewed before it goes live.</p>
+            </div>
+          </div>
+          <div className="grid gap-4 md:grid-cols-3">
+            {addonModules.map((addon) => (
+              <article key={addon.name} className="module-card rounded-2xl border border-white/10 bg-white/5 p-5">
+                <p className="text-xs uppercase tracking-[0.4em] text-zinc-400">{addon.name}</p>
+                <p className="text-base font-semibold text-white">{addon.note}</p>
+                <p className="font-data text-sm text-emerald-200">{addon.stat}</p>
+              </article>
+            ))}
+          </div>
+        </section>
+
+        <section className="space-y-6 rounded-3xl border border-zinc-800 bg-black/30 p-8">
+          <div className="flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
+            <div>
+              <p className="text-xs uppercase tracking-[0.4em] text-zinc-500">Start a conversation</p>
+              <h2 className="text-3xl font-heading font-bold">Tell us what feels out of place today</h2>
+            </div>
+            <p className="text-sm text-zinc-400 max-w-xl">
+              Share your current lead flow or the content you wish you had. We will reply with a clear next step—the work is always human-reviewed.
+            </p>
+          </div>
+          <div className="grid gap-4 md:grid-cols-3">
+            <div className="skeleton h-10 rounded-3xl" />
+            <div className="skeleton h-10 rounded-3xl" />
+            <div className="skeleton h-10 rounded-3xl" />
+          </div>
+          <form className="space-y-4" onSubmit={handleSubmit}>
+            <div className="grid gap-4 md:grid-cols-2">
+              <label className="text-sm text-zinc-400 flex flex-col">
+                Name
+                <input
+                  value={formData.name}
+                  onChange={handleChange('name')}
+                  className="mt-2 rounded-2xl bg-white/5 border border-zinc-800 px-4 py-3 text-white focus:border-white focus:ring-0"
+                  type="text"
+                  placeholder="Alex Rivera"
+                />
+              </label>
+              <label className="text-sm text-zinc-400 flex flex-col">
+                Email
+                <input
+                  value={formData.email}
+                  onChange={handleChange('email')}
+                  className="mt-2 rounded-2xl bg-white/5 border border-zinc-800 px-4 py-3 text-white focus:border-white focus:ring-0"
+                  type="email"
+                  placeholder="you@company.com"
+                />
+              </label>
+            </div>
+            <label className="text-sm text-zinc-400 flex flex-col">
+              Company / project
+              <input
+                value={formData.company}
+                onChange={handleChange('company')}
+                className="mt-2 rounded-2xl bg-white/5 border border-zinc-800 px-4 py-3 text-white focus:border-white focus:ring-0"
+                type="text"
+                placeholder="Neighborhood Bakery, LLC"
+              />
+            </label>
+            <label className="text-sm text-zinc-400 flex flex-col">
+              What feels hard about your current marketing stack?
+              <textarea
+                value={formData.message}
+                onChange={handleChange('message')}
+                className="mt-2 rounded-2xl bg-white/5 border border-zinc-800 px-4 py-3 text-white focus:border-white focus:ring-0 resize-none min-h-[140px]"
+                placeholder="Tell us about the workflows or customer journey you want to own."
+              />
+            </label>
+            {error && <p className="text-sm text-rose-400">{error}</p>}
+            {submitted && <p className="text-sm text-emerald-400">Thanks! Expect a plain-language reply with the next steps.</p>}
+            <button
+              type="submit"
+              className="w-full rounded-2xl bg-gradient-to-r from-violet-500 to-purple-700 px-6 py-4 text-base font-semibold text-white shadow-lg shadow-violet-700/40"
+            >
+              Request a clearer automation path
+            </button>
+            <p className="text-xs text-zinc-500">
+              Every plan is reviewed by a human before we build anything for your team.
+            </p>
+          </form>
+        </section>
+
+        <section className="space-y-4 rounded-3xl border border-zinc-800 bg-white/5 p-8">
+          <p className="text-xs uppercase tracking-[0.4em] text-zinc-500">Testing ground</p>
+          <h2 className="text-2xl font-heading font-bold">1000planets.cloud is under testing</h2>
+          <p className="text-sm text-zinc-400 leading-relaxed">
+            We keep the site public while we refine the experience. Expect updates, shimmer, and new modules as we respond to small business customer feedback.
+          </p>
+        </section>
+      </div>
+    </main>
+  )
+}
--- a/next-env.d.ts
+++ b/next-env.d.ts
@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
--- a/next.config.mjs
+++ b/next.config.mjs
@ -0,0 +1,9 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  output: 'standalone',
+  images: {
+    domains: ['localhost'],
+  },
+};
+
+export default nextConfig;
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,30 @@
+{
+  "name": "1000planets-site",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "check": "bash spec-kit/scripts/ci-checks.sh"
+  },
+  "dependencies": {
+    "next": "14.2.15",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "framer-motion": "^11.11.17",
+    "lucide-react": "^0.454.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.15",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5"
+  }
+}
--- a/postcss.config.js
+++ b/postcss.config.js
@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
--- a/public/.gitkeep
+++ b/public/.gitkeep
--- a/spec-kit/accessibility-log.md
+++ b/spec-kit/accessibility-log.md
@ -0,0 +1,7 @@
+# Accessibility Log
+
+Track WCAG verifications, keyboard walkthroughs, and Lighthouse Accessibility reports here.
+
+| Date | Section Tested | Tool/Method | Notes |
+|------|----------------|-------------|-------|
+| 2025-12-12 | Homepage hero, modules, and CTA | Manual color-review + tailwind utility audit | Confirmed dark/light contrast >4.5:1, skeleton/shimmer remains semantics friendly, form labels stay exposed.
--- a/spec-kit/checklist.md
+++ b/spec-kit/checklist.md
@ -4,31 +4,31 @@ Before shipping a feature or merging a branch, confirm each item below is satisf

 | Checklist Item | Status | Notes |
 |----------------|--------|-------|
-| ☐ Architecture / tech stack documented in decisions/ | | |
-| ☐ Design system / component library defined | | |
-| ☐ Brand guidelines documented (colors, typography, voice) | | |
-| ☐ Performance budget defined (Core Web Vitals targets) | | |
-| ☐ Accessibility standards met (WCAG 2.1 AA minimum) | | |
-| ☐ SEO meta tags and structure implemented | | |
-| ☐ Analytics / tracking configured | | |
-| ☐ Responsive design tested (mobile, tablet, desktop) | | |
-| ☐ Cross-browser compatibility verified | | |
-| ☐ Forms and CTAs tested and converting | | |
-| ☐ Content reviewed for accuracy and brand voice | | |
-| ☐ Performance tested (Lighthouse score >90) | | |
-| ☐ Security headers configured | | |
-| ☐ Deployment pipeline configured and tested | | |
-| ☐ Documentation updated (README, deployment guide) | | |
-| ☐ Automated checks passing (spec-kit/scripts/ci-checks.sh) | | |
+| Architecture / tech stack documented in `decisions/` | ✅ | See `spec-kit/decisions/0001-tech-stack.md` and follow-up ADRs. |
+| Design system / component library defined | ✅ | Captured in `spec-kit/decisions/0004-design-system.md`. |
+| Brand guidelines documented (colors, typography, voice) | ✅ | Updated in `spec-kit/decisions/0002-brand-guidelines.md` to align with the current direction. |
+| Performance budget defined (Core Web Vitals targets) | ✅ | Documented in `spec-kit/decisions/0005-performance-budget.md`. |
+| Accessibility standards met (WCAG 2.1 AA minimum) | 🟡 | Color/contrast decisions recorded; log entry added to `accessibility-log.md`. |
+| SEO meta tags and structure implemented | ✅ | Metadata and structured data defined in `app/layout.tsx`. |
+| Analytics / tracking configured | ✅ | Plausible + optional GA scripts live in `app/layout.tsx`. |
+| Responsive design tested (mobile, tablet, desktop) | ⚪️ | Layout built responsively; automated/testing still pending. |
+| Cross-browser compatibility verified | ⚪️ | Manual verification in planning. |
+| Forms and CTAs tested and converting | ⚪️ | Form validated client-side; conversion tracking TBD. |
+| Content reviewed for accuracy and brand voice | ✅ | Copy revised per `spec-kit/decisions/0008-messaging-strategy.md`. |
+| Performance tested (Lighthouse score >90) | ⚪️ | Pending dedicated Lighthouse run. |
+| Security headers configured | ⚪️ | Platform-specific work pending. |
+| Deployment pipeline configured and tested | ⚪️ | Pipeline still under discovery; container preview uses nexus-vector. |
+| Documentation updated (README, deployment guide) | ✅ | README + spec-kit documents reviewed; brand/plan notes refreshed. |
+| Automated checks passing (`spec-kit/scripts/ci-checks.sh`) | ⚪️ | Not run since latest copy/animation updates. |

 ## Feature-Specific Requirements

 ### Homepage
- [ ] Hero section with clear value proposition
- [ ] Primary CTA prominent and tested
+- [x] Hero section with direct, small-business value messaging
+- [x] Primary CTA focused on planning & walkthroughs
 - [ ] Social proof / credibility indicators
- [ ] Product/service overview
- [ ] Trust signals (security, compliance, testimonials)
+- [x] Product/service overview (microsites + modules)
+- [x] Trust signals (testing disclosure, human oversight callouts)

 ### About / Company
 - [ ] Company story and mission
--- a/spec-kit/decisions/0002-brand-guidelines.md
+++ b/spec-kit/decisions/0002-brand-guidelines.md
@ -1,333 +1,97 @@
 # ADR 0002: Brand Guidelines

 **Status**: ✅ Accepted  
-**Date**: 2025-12-11
-**Deciders**: Client requirements + Design team
+**Date**: 2025-12-12  
+**Deciders**: Delivery Lead (Content) + Design Team

 ---

 ## Brand Essence

 ### Name Origin
-**"1000 Planets"** - Inspired by *Valerian and the City of a Thousand Planets*, representing an intergalactic marketplace of infinite possibilities.
-
-**Core Message**: *"Find what you're looking for."*
+**"1000 Planets"** represents a constellation of marketing tools and partners, each with its own trajectory. It is a metaphor for a nonhierarchical marketplace of creative momentum and autonomous growth.

 ### Mission Statement
-An AI-forward marketing agency committed to putting tools in the hands of customers to grow their reach with automated solutions and robust data ownership.
+We build AI-assisted marketing tools for small and micro businesses so they can own their customer journeys, run their own outreach, and make decisions with confidence—no gatekeepers, no jargon.

-**Social Impact Goal**: Enable economic empowerment - targeting $500/month baseline income for partner agents, with focus on single mothers and underserved communities.
-
---
+### Social Signal
+We target small teams, solo founders, and micro operators who want high-caliber marketing without enterprise complexity. The language is friendly, grounded, and direct.

 ## Brand Personality

-1. **Bold & Disruptive**
-   - Paradigm shift in giving end users control
-   - Ownership and autonomy over their data and decisions
-   - Not afraid to challenge traditional agency models
-
-2. **Trustworthy & Reliable**
-   - Robust support systems
-   - Transparent pricing and operations
-   - Proven, dependable technology
-
-3. **Approachable & Premium**
-   - Polished without pretension
-   - Human-readable language (no jargon)
-   - Focuses on what matters to small business owners
-
---
+1. **Trustworthy & Human**  
+   - Speak plainly, explain value clearly, and show how humans stay in the loop.  
+   - Lead with service, not buzzwords.
+2. **Approachable Premium**  
+   - Premium feel through typography, subtle animation, and gradients, but never stuffy.  
+   - Accessible dark/light interplay with shimmering highlights.
+3. **Purposeful & Practical**  
+   - Center on lead capture, microsites, and content modules built for the small-business timeline.  
+   - Emphasize reliability and human oversight.

 ## Visual Identity

 ### Design Inspiration
-
-**Primary**: Linear
- Clean, bold typography
- Generous white space
- Sharp, modern interfaces
- Subtle animations
-
-**Secondary**: Vercel
- Performance-focused aesthetic
- Developer-quality polish
- Minimalist navigation
- Dark mode excellence
+- **Primary references**: Linear, Vercel, Studio builds with dark/light accessibility, shimmering prisma surfaces.  
+- **Motion**: Subtle, premium animations (floating prisms, skeleton loads, gradient tilt) that hint at high-touch craftsmanship.

 ### Core Principles
- **Polished & Premium** - High-quality, professional
- **Human-Readable** - Clear, direct communication
- **Functional** - Every element serves a purpose
- **Accessible** - WCAG 2.1 AA minimum
-
---
+- **Control**: Designs should feel like a cockpit, not a ledger.  
+- **Clarity**: Avoid marketing haze—text must feel like a conversation.  
+- **Accessibility**: Maintain WCAG 2.1 AA contrast and respond gracefully across devices.  
+- **Energy**: Use prism/surface lighting, shimmering strokes, and layered glass to suggest future-focused polish.

 ## Color System

-### Base Palette: Dark/Light Charcoal & White
+### Ground Palette
+| Role | Light | Dark | Usage |
+|------|-------|------|-------|
+| Background | `#FFFFFF` | `#08080F` | Base surfaces |
+| Surface | `#F5F7FF` | `#0F172A` | Cards, overlays |
+| Border | `#E5E7EF` | `#1F2937` | Dividers |
+| Primary Text | `#111827` | `#F8FAFC` | Paragraphs |
+| Secondary Text | `#4B5563` | `#CBD5F5` | Supporting copy |

-**Light Mode**:
-```
-Background: #FFFFFF (pure white)
-Surface: #F5F5F5 (off-white)
-Border: #E5E5E5 (light gray)
-Text Primary: #1A1A1A (near black)
-Text Secondary: #666666 (medium gray)
-Text Tertiary: #999999 (light gray)
-```
-
-**Dark Mode**:
-```
-Background: #0A0A0A (near black)
-Surface: #1A1A1A (dark charcoal)
-Border: #2A2A2A (lighter charcoal)
-Text Primary: #FFFFFF (white)
-Text Secondary: #CCCCCC (light gray)
-Text Tertiary: #888888 (medium gray)
-```
-
-### Semantic Colors (Standard Messaging)
-
-| Color | Hex | Usage | Meaning |
-|-------|-----|-------|---------|
-| 🔴 **Red** | `#EF4444` | Error, broken, critical | Stop, danger, failure |
-| 🟢 **Green** | `#10B981` | Success, go, active | Ready, approved, complete |
-| 🟡 **Yellow** | `#F59E0B` | Caution, warning, pending | Review, attention needed |
-| 🔵 **Blue** | `#3B82F6` | Admin, information, system | Informational, neutral |
-| 🟣 **Purple** | `#8B5CF6` | Agentic, AI-driven, automation | AI/automation indicators |
-
-### Accent Color (Primary Brand)
-**Purple** (`#8B5CF6`) - Represents our AI-forward, agentic nature
-
-**Usage**:
- Primary CTAs
- Interactive elements
- Progress indicators
- AI/automation badges
- Links and highlights
-
---
+### Accent Tokens
+- **Prism gradient** (`#8B5CF6` → `#6366F1` → `#EC4899`): Primary CTA, highlights, prism glows.  
+- **Support glow** (`#38BDF8`, `#22D3EE`): Floating rings, hover states, animation traces.  
+- **Success** (`#22C55E`), **Warning** (`#F59E0B`), **Error** (`#EF4444`): Semantic markers for forms.

 ## Typography

 ### Font Stack
-
-**Headings** (Display, H1-H3):
-```css
-font-family: 'Inter', system-ui, -apple-system, sans-serif;
-font-weight: 700; /* Bold */
-letter-spacing: -0.02em; /* Tight tracking */
-```
-
-**Body Text**:
-```css
-font-family: 'Inter', system-ui, -apple-system, sans-serif;
-font-weight: 400; /* Regular */
-line-height: 1.6; /* Comfortable reading */
-```
-
-**Monospace** (Code, Technical):
-```css
-font-family: 'JetBrains Mono', 'Fira Code', monospace;
-```
+- **Headings / Display**: `Dela Gothic One`, tight tracking, uppercase when needed, accessible sizes from 36px+ for important modules.  
+- **Body**: `Space Grotesk`, 16px base, 1.6 line height.  
+- **Data / Price / Metric**: `JetBrains Mono`, use for counts, module specs, and "data" callouts. This reinforces the dual tone of premium and technical assurance.

 ### Type Scale
-
 | Element | Size | Weight | Line Height |
 |---------|------|--------|-------------|
-| **Display** | 72px | 700 | 1.1 |
-| **H1** | 48px | 700 | 1.2 |
-| **H2** | 36px | 700 | 1.3 |
-| **H3** | 24px | 600 | 1.4 |
-| **H4** | 20px | 600 | 1.5 |
-| **Body Large** | 18px | 400 | 1.6 |
-| **Body** | 16px | 400 | 1.6 |
-| **Body Small** | 14px | 400 | 1.5 |
-| **Caption** | 12px | 500 | 1.4 |
-
---
+| Display | 64px | 700 | 1.15 |
+| H1 | 48px | 700 | 1.2 |
+| H2 | 36px | 700 | 1.3 |
+| H3 | 28px | 600 | 1.4 |
+| Body Large | 18px | 400 | 1.6 |
+| Body | 16px | 400 | 1.6 |
+| Caption | 12px | 500 | 1.4 |
+| Data / Mono | 20px | 500 | 1.3 |

 ## Voice & Tone

 ### Writing Principles
-
-1. **Human-Readable** - No jargon, no buzzwords
-2. **Direct & Clear** - Say what you mean
-3. **Empowering** - "You can do this"
-4. **Results-Focused** - Show the value
-5. **Conversational** - Like a trusted advisor
+1. **Plainspoken** – No jargon, no marketing fluff (e.g., “Lead capture AI” or “Intelligent CTAs”).  
+2. **Empowering** – Frame the experience from the customer's control.  
+3. **Results-oriented** – Speak to outcomes (“clear lead flows”, “human-reviewed copy”).  
+4. **Warmly confident** – Honest and calm, without hype.

 ### Language Guidelines
+- **DO**: “Run a five-page microsite in days.” “Each output is reviewed by a human before you ever publish.” “You keep control of the journey.”  
+- **DON’T**: “Disruptive,” “synergy,” “next-gen,” “published costs,” “partner operations,” “Valerian,” “data stays where you want it.”  

-**DO**:
- ✅ "Grow your business with AI automation"
- ✅ "You own your data. Always."
- ✅ "See results in days, not months"
- ✅ "Start your free 30-day trial"
- ✅ "Built for small business owners like you"
+## Components & UI Notes

-**DON'T**:
- ❌ "Leverage synergistic AI paradigms"
- ❌ "Disrupt the marketing ecosystem"
- ❌ "Best-in-class solutions"
- ❌ "Revolutionary technology"
- ❌ Technical jargon without explanation
-
-### Tone by Context
-
-| Context | Tone | Example |
-|---------|------|---------|
-| **Homepage** | Confident, welcoming | "Welcome to your AI-powered growth partner" |
-| **Pricing** | Transparent, fair | "Simple pricing. No surprises." |
-| **Docs** | Helpful, clear | "Here's how to get started in 3 steps" |
-| **Errors** | Apologetic, helpful | "Something went wrong. Let's fix it together." |
-| **Success** | Celebratory | "You're all set! Your trial starts now." |
-
---
-
-## Components & UI Patterns
-
-### Buttons
-
-**Primary** (Purple, high contrast):
-```css
-background: #8B5CF6;
-color: #FFFFFF;
-border-radius: 8px;
-padding: 12px 24px;
-font-weight: 600;
-```
-
-**Secondary** (Outline):
-```css
-background: transparent;
-border: 1px solid #2A2A2A;
-color: #1A1A1A;
-border-radius: 8px;
-padding: 12px 24px;
-```
-
-**Ghost** (Text only):
-```css
-background: transparent;
-color: #666666;
-hover: color: #1A1A1A;
-```
-
-### Cards
-
-```css
-background: #FFFFFF / #1A1A1A (dark);
-border: 1px solid #E5E5E5 / #2A2A2A;
-border-radius: 12px;
-padding: 24px;
-box-shadow: 0 1px 3px rgba(0,0,0,0.05);
-```
-
-### Spacing Scale
-
-```
-4px  → tight
-8px  → compact
-12px → cozy
-16px → comfortable (default)
-24px → relaxed
-32px → spacious
-48px → loose
-64px → extra loose
-```
-
---
-
-## Animations & Motion
-
-### Principles
- **Purposeful** - Every animation serves a function
- **Subtle** - Not distracting
- **Fast** - <300ms for most transitions
- **Natural** - Easing curves feel organic
-
-### Standard Durations
-```css
--duration-fast: 150ms;
--duration-normal: 250ms;
--duration-slow: 350ms;
-```
-
-### Easing Functions
-```css
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
-```
-
---
-
-## Accessibility Requirements
-
-### WCAG 2.1 AA Compliance
-
-**Color Contrast**:
- Text: 4.5:1 minimum (normal), 3:1 (large text)
- UI Components: 3:1 minimum
-
-**Interactive Elements**:
- Minimum touch target: 44x44px
- Keyboard accessible (tab order, focus states)
- Screen reader friendly (ARIA labels)
-
-**Focus States**:
-```css
-outline: 2px solid #8B5CF6;
-outline-offset: 2px;
-```
-
---
-
-## Usage Examples
-
-### Hero Section
-```
-Background: Gradient (dark charcoal to black)
-Heading: 72px, white, bold
-Subheading: 20px, gray-300
-CTA: Purple button, "Start Free Trial"
-```
-
-### Feature Card
-```
-Background: White/dark-charcoal
-Icon: Purple circle background
-Title: 24px, bold
-Description: 16px, gray-600
-Border: Subtle, light-gray/dark-gray
-```
-
---
-
-## Implementation in Code
-
-### Tailwind Config
-```js
-// tailwind.config.js
-colors: {
-  background: "hsl(var(--background))",
-  foreground: "hsl(var(--foreground))",
-  primary: "#8B5CF6", // Purple
-  success: "#10B981", // Green
-  warning: "#F59E0B", // Yellow
-  error: "#EF4444", // Red
-  info: "#3B82F6", // Blue
-  agentic: "#8B5CF6", // Purple (AI indicator)
-}
-```
-
---
-
-## References
-
- Linear Design System
- Vercel Design Guidelines
- Material Design (Color System)
- WCAG 2.1 Guidelines
+- **Buttons**: Rounded-full, gradient from violet to pink, high contrast on dark surfaces.  
+- **Cards**: Glass-morphic surface, gently rounded corners, slight drop shadow, and border gradient for hovered states.  
+- **Loaders / Skeletons**: Use shimmering bars (via `shimmer` utility) whenever content is late to render.  
+- **Animation**: Use floating prisms, animated SVG glows, and `framer-motion` transitions for the hero/module grids.  
+- **Forms**: High-contrast inputs, clear labels, and error/success feedback using semantic colors.
--- a/spec-kit/decisions/0003-compliance-roadmap.md
+++ b/spec-kit/decisions/0003-compliance-roadmap.md
@ -0,0 +1,62 @@
+# ADR 0003: Compliance Execution Plan
+
+**Status**: ✅ Active  
+**Date**: 2025-12-11  
+**Decider/Owner**: Handoff + Delivery Lead
+
+---
+
+## Context
+
+The Spec Kit checklist (`spec-kit/checklist.md:5-54`) defines mandatory compliance pillars (architecture, design, analytics, performance, accessibility, forms, etc.). Several items are not yet implemented or documented, so we need a sprinted execution plan that converts the checklist into actionable work and makes it easy for future agents to continue.
+
+## Objectives
+
+1. Capture the remaining checklist entries in a structured backlog.
+2. Finish the highest-priority artifacts (design system, analytics, SEO, content, CTA experiments, and deployment proof).
+3. Keep automated checks and documentation in sync while the site is iterated upon.
+
+## Sprint 1 – Baseline & Documentation (Days 1–2)
+
+| Task | Purpose / Reference | Owner | Status |
+|------|---------------------|-------|--------|
+| Document the design system / component tokens | Addresses `checklist.md:7-9` | Delivery Lead | Completed |
+| Define a performance budget (Core Web Vitals targets) | `checklist.md:10` needs explicit LCP/INP/CLS thresholds and measurement plan | Delivery Lead | Completed |
+| Add SEO meta structure + structured data | `checklist.md:12` | Delivery Lead | Completed |
+| Wire in analytics/tracking snippet (Plausible/GA) | `checklist.md:13` | Delivery Lead | Completed |
+| Document accessbility verification approach (WCAG 2.1 AA) | `checklist.md:11` + `brand guidelines` mention accessibility | Delivery Lead | Completed |
+
+## Sprint 2 – Experience & Conversion (Days 3–5)
+
+| Task | Purpose / Reference | Owner | Status |
+|------|---------------------|-------|--------|
+| Build homepage sections for testimonials, trust signals, product overviews | `checklist.md:26-44` | Content Engineer | In progress |
+| Wire contact/demo forms + CTA flow with validation & CRM hook | `checklist.md:50-54` | Delivery Lead | In progress |
+| Add responsive testing notes / cross-browser results | `checklist.md:14-15` | Delivery Lead | Pending |
+| Review content for brand voice per `brand guidelines` | `checklist.md:17` | Content Owner | Pending |
+
+## Sprint 3 – Launch Guardrails (Days 6+)
+
+| Task | Purpose / Reference | Owner | Status |
+|------|---------------------|-------|--------|
+| Configure security headers + monitoring | `checklist.md:19` | Operations Lead | Pending |
+| Formalize deployment pipeline notes (CI/CD, manual steps) | `checklist.md:20` | Ops Lead | Pending |
+| Keep documentation updated (README, compliance checklist) | `checklist.md:21` | Delivery Lead | Ongoing |
+| Rerun `spec-kit/scripts/ci-checks.sh` after major changes | `checklist.md:22` | Delivery Lead | Ongoing |
+
+## Dependencies & Resources
+
+- Client copy, testimonials, and analytics keys for Sprint 2
+- Access to CRM/automation webhook for contact form
+- Performance monitoring (Lighthouse report, Web Vitals) for Sprint 1
+- Security header requirements (CSP, HSTS) from infra/security team
+
+## Clarifications / Questions
+
+1. Are there specific trust signals/testimonials you want to feature in Sprint 2? (Current section uses in-house placeholder copy.)
+2. Which analytics stack should be considered primary (Plausible, GA4, or both)?
+3. Does the compliance handoff need a formal job report (per `/opt/onboarding/POLICIES/handoff-protocol.md`) or can it live here?
+
+## Next Check-in
+
+Update this ADR and `spec-kit/project-plan.md` with sprint status changes, then share a short handoff note in `/home/admin/knowledge-base/GM/Handoffs/` if work pauses for >30 minutes or depends on external input.
--- a/spec-kit/decisions/0004-design-system.md
+++ b/spec-kit/decisions/0004-design-system.md
@ -0,0 +1,84 @@
+# ADR 0004: Design System & Component Tokens
+
+**Status**: ✅ Accepted  
+**Date**: 2025-12-11  
+**Owner**: Delivery Lead (Design/UX)
+
+---
+
+## Context
+
+The brand guidelines (`0002-brand-guidelines`) set the visual direction, but we still need a concrete design system that drives development. This document defines the tokens, typography, spacing, and reusable component patterns that power the site and make future work measurable against the Spec Kit checklist (`spec-kit/checklist.md:7-9`).
+
+## Tokens
+
+### Colors
+
+| Token | Value | Role |
+|-------|-------|------|
+| `color-background` | `#0A0A0A` (dark), `#FFFFFF` (light) | Canvas |
+| `color-surface` | `#1A1A1A` / `#F5F5F5` | Cards, panels |
+| `color-border` | `#2A2A2A` / `#E5E5E5` | Dividers |
+| `color-text-primary` | `#FFFFFF` / `#1A1A1A` | Body copy |
+| `color-text-secondary` | `#CCCCCC` / `#666666` | Subheadings, metadata |
+| `color-touchable` | `#8B5CF6` | Primary CTA, accents |
+| `color-success` | `#10B981` | Positive status |
+| `color-warning` | `#F59E0B` | Attention |
+| `color-error` | `#EF4444` | Errors, critical |
+
+### Sizing & Spacing
+
+| Token | Value | Usage |
+|-------|-------|-------|
+| `space-1` | `4px` | Tight gutters |
+| `space-2` | `8px` | Compact spacing |
+| `space-3` | `12px` | Card padding |
+| `space-4` | `16px` | Blocks / default |
+| `space-5` | `24px` | Sections |
+| `space-6` | `32px` | Wide layout |
+| `space-7` | `48px` | Footer / hero |
+
+### Typography
+
+| Scale | Size | Weight | Line Height |
+|-------|------|--------|-------------|
+| Display | 72px | 700 | 1.1 |
+| H1 | 48px | 700 | 1.2 |
+| H2 | 36px | 700 | 1.3 |
+| H3 | 24px | 600 | 1.4 |
+| Body | 16px | 400 | 1.6 |
+| Body Small | 14px | 400 | 1.5 |
+
+Font stack: `'Inter', system-ui, -apple-system, sans-serif`. Monospaced elements use `'JetBrains Mono', 'Fira Code', monospace`.
+
+## Components
+
+### Buttons
+
+- Primary button: purple background (`color-touchable`), white text, `padding: 12px 24px`, `border-radius: 8px`, `font-weight: 600`. Hover state: lighten background (95%).
+- Secondary button: transparent background, `border: 1px solid color-border`, text uses `color-text-primary` (dark mode) or `color-text-primary` (light mode), same padding/radius.
+- Ghost button: text only, `color-text-secondary`, underline on focus/hover.
+
+### Cards
+
+- Background uses `color-surface`.
+- Border: `1px solid color-border`.
+- Shadow: `0 4px 16px rgba(0, 0, 0, 0.25)` (dark) or `0 2px 8px rgba(0,0,0,0.08)` (light).
+- Padding: `space-5`.
+
+## Accessibility Notes
+
+- Maintain a contrast ratio of ≥4.5:1 for body text and ≥3:1 for large text (per WCAG 2.1 AA).
+- Focus indicators: `outline: 2px solid #8B5CF6`, `outline-offset: 2px`.
+- Hit targets: minimum `44x44px`, confirm with devtools during QA.
+
+## Implementation
+
+- Tailwind config uses these tokens as custom colors (`color-touchable`, `color-success`, etc.).
+- Global CSS (`globals.css`) maps typographic elements (e.g., `h1`, `p`, `.cta`) to these tokens.
+- Reuse the `Button` pattern whenever a CTA appears (hero, testimonial CTA, contact form).
+
+## Future Work
+
+- Add design tokens to Storybook or Spec Kit pattern library when UI kit becomes available.
+- Pair with accessibility testing (tab order/focus states) after the hero/CTA sections are interactive.
--- a/spec-kit/decisions/0005-performance-budget.md
+++ b/spec-kit/decisions/0005-performance-budget.md
@ -0,0 +1,39 @@
+# ADR 0005: Performance Budget & Measurement
+
+**Status**: ✅ Approved  
+**Date**: 2025-12-11  
+**Owner**: Delivery Lead (Performance/QA)
+
+---
+
+## Context
+
+Performance budget is required by `spec-kit/checklist.md:10` and ensures the marketing site delivers an optimal experience while we iterate. We rely on Next.js’s optimizations, but we must set explicit Core Web Vitals targets and describe how we measure them.
+
+## Budget
+
+| Metric | Target | Tool |
+|--------|--------|------|
+| Largest Contentful Paint (LCP) | ≤ 2.5s | Lighthouse 10+ / WebPageTest |
+| Interaction to Next Paint (INP) | ≤ 200ms | Lighthouse / Web Vitals |
+| Cumulative Layout Shift (CLS) | ≤ 0.1 | Lighthouse |
+| Total Blocking Time (TBT) | ≤ 150ms (optional) | Lighthouse |
+
+Goal: achieve these targets within the “Hero + CTA” above-the-fold experience on a simulated slow 4G connection (Network throttling in Lighthouse).
+
+## Measurement Workflow
+
+1. Run `npm run build` and `next start` locally or on nexus-vector.
+2. Open Lighthouse (Chrome DevTools > Lighthouse), choose “Performance + SEO + Best practices”, enable “Simulated throttling”, and run the report.
+3. Record the values (screenshot or note them in a `performance.md` log).
+4. If any metric exceeds the target, identify heavy assets (fonts, JS) via Lighthouse diagnostics and rerun after optimization.
+
+## Automation & Monitoring
+
+- Add a CI job (future) that runs `npm run build` plus Lighthouse via `lighthouse-ci` or `npm run analyze` to guard each deploy.
+- For now, rerun Lighthouse after each sprint or when new hero/content sections change to ensure budgets hold.
+
+## References
+
+- Core Web Vitals: https://web.dev/vitals/  
+- Lighthouse CLI: https://github.com/GoogleChrome/lighthouse/tree/main/lighthouse-cli  
--- a/spec-kit/decisions/0006-accessibility-approach.md
+++ b/spec-kit/decisions/0006-accessibility-approach.md
@ -0,0 +1,36 @@
+# ADR 0006: Accessibility Verification Plan
+
+**Status**: ✅ Approved  
+**Date**: 2025-12-11  
+**Owner**: Delivery Lead (Accessibility)
+
+---
+
+## Context
+
+Per `spec-kit/checklist.md:11`, we must validate the site against WCAG 2.1 AA. The brand guidelines emphasize accessibility, but we need a repeatable verification approach to prove compliance.
+
+## Strategy
+
+1. **Contrast & readability**
+   - Ensure text/background combinations meet at least 4.5:1 (body) and 3:1 (large text).
+   - Use Chrome DevTools’ “Contrast ratio” overlay on hero copy and CTA text.
+2. **Keyboard navigation**
+   - Tab through the hero, cards, CTA button, and future forms; focus states must be visible with `outline: 2px solid #8B5CF6`.
+3. **Semantic markup**
+   - Use proper heading hierarchy (`<h1>` for main hero, `<h3>` for cards) and descriptive button text.
+4. **ARIA & assistive tech**
+   - Add `aria-label` or visually hidden text for any icons (future forms or CTA icons).
+5. **Automated checks**
+   - Run Lighthouse/Playwright axe scan (when we have a full flow) and log results in `spec-kit/accessibility-log.md`.
+
+## Evidence
+
+- Record Lighthouse “Accessibility” score screenshots after each hero/content iteration.
+- Note any WCAG failures and remediation steps in `spec-kit/accessibility-log.md`.
+- Keep a short checklist for keyboard focus states (hero CTA, cards, future forms).
+
+## Future Work
+
+- Integrate a11y testing into CI once forms/multi-section pages exist.
+- Add role/aria attributes to dynamic lists/modal states when they are built.
--- a/spec-kit/decisions/0007-analytics-stack.md
+++ b/spec-kit/decisions/0007-analytics-stack.md
@ -0,0 +1,33 @@
+# ADR 0007: Analytics Stack & Privacy
+
+**Status**: ✅ Approved  
+**Date**: 2025-12-11  
+**Owner**: Delivery Lead (Analytics)
+
+---
+
+## Context
+
+`spec-kit/checklist.md:13` requires analytics/tracking on the marketing site. We are implementing a dual stack (Plausible + Google Analytics) because Plausible covers privacy and lightweight event tracking while GA provides deeper signal analysis. Both are active without interfering with the privacy promise.
+
+## Implementation
+
+1. **Plausible**
+   - Script loaded from `https://plausible.io/js/plausible.js` via `app/layout.tsx`.
+   - Configured with the `NEXT_PUBLIC_PLAUSIBLE_DOMAIN` environment variable (default `1000planets.cloud`).
+   - No cookies unless the visitor opts in; complies with privacy-first mandates.
+2. **Google Analytics (GA4)**
+   - Loaded via `gtag.js` when `NEXT_PUBLIC_GA_MEASUREMENT_ID` is provided.
+   - Basic page view tracking configured at load time.
+   - Additional events (e.g., CTA clicks, form submissions) can be wired in later via `gtag('event', ...)`.
+
+## Deployment Notes
+
+- Add API keys to the server environment (or `.env` for local development) before building.
+- Ensure Plausible domain matches the deployed hostname to avoid data loss.
+- GA measurement ID should be created in Google Analytics with site ownership verified.
+
+## Monitoring & Governance
+
+- Monitor the Plausible dashboard for spikes and GA for conversion funnels.
+- Document any additional events in this ADR as new measurement needs arise.
--- a/spec-kit/decisions/0008-messaging-strategy.md
+++ b/spec-kit/decisions/0008-messaging-strategy.md
@ -0,0 +1,22 @@
+# ADR 0008: Messaging Refresh
+
+**Status**: ✅ Approved  
+**Date**: 2025-12-11  
+**Owner**: Delivery Lead (Content)
+
+---
+
+## Context
+
+The public-facing 1000planets.cloud site is a straightforward, jargon-free marketing landing page for small and micro businesses exploring AI-enhanced automation tools. The partner experience now lives at partner.1000planets.cloud, so the copy here focuses solely on client acquisition through lead capture, content, and microsites.
+
+## Decisions
+
+- **Audience**: Focus on small/micro businesses that value control, data ownership, and trustworthy automation partners. Avoid marketing hyperbole; lead with practical capabilities and ownership signals.  
+- **Partner narrative**: No partner messaging appears here—partner communications will live entirely on `partner.1000planets.cloud`.  
+- **Tone**: Friendly, human, values-focused. Replace previous “AI-forward marketing” copy with statements that highlight humility, concrete value, and control for small/micro businesses.
+- **Testing**: The site remains under testing—this is reflected in clear messaging and disclaimers so visitors know the experience is evolving.
+
+## Consequence
+
+All future copy, hero CTA text, testimonials, and compliance documentation should align with this dual-purpose narrative and avoid referencing unrelated ventures or marketing speak that distracts from the small-business / partner story.
--- a/spec-kit/project-plan.md
+++ b/spec-kit/project-plan.md
@ -32,6 +32,14 @@
 4. Create design mockups for approval
 5. Begin development sprint

+## Compliance Sprints
+
+Adopt the sprint board from `spec-kit/decisions/0003-compliance-roadmap.md`. Current focus:
+
+1. **Sprint 1 – Baseline documentation** (design system, performance budget, SEO, analytics, accessibility proof) – in progress.
+2. **Sprint 2 – Experience & conversion** (hero/social proof, forms/CTA paths, content review) – pending.
+3. **Sprint 3 – Launch guardrails** (security headers, deployment notes, CI/automation rerun) – pending.
+
 ## Decision Log

 Before beginning a new feature:
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@ -0,0 +1,23 @@
+import type { Config } from 'tailwindcss'
+
+const config: Config = {
+  content: [
+    './pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './components/**/*.{js,ts,jsx,tsx,mdx}',
+    './app/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  theme: {
+    extend: {
+      colors: {
+        // Semantic colors from brand guidelines
+        error: '#ef4444',      // red-500
+        success: '#22c55e',    // green-500
+        caution: '#eab308',    // yellow-500
+        admin: '#3b82f6',      // blue-500
+        agentic: '#a855f7',    // purple-500
+      },
+    },
+  },
+  plugins: [],
+}
+export default config
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}