@tangle-network/starter-foundry 0.1.0

package/registry/layers/capability/layout-landing/variants/gradient-hero/landing-page.tsx

@@ -0,0 +1,164 @@
+import { Button } from '@/components/ui/button'
+import { HeroSection } from '@/components/landing/hero-section'
+import { FeaturesSection } from '@/components/landing/features-section'
+import { PricingSection } from '@/components/landing/pricing-section'
+
+const footerLinks = {
+  Product: [
+    { label: 'Features', href: '#features' },
+    { label: 'Pricing', href: '#pricing' },
+    { label: 'Changelog', href: '/changelog' },
+    { label: 'Docs', href: '/docs' },
+  ],
+  Company: [
+    { label: 'About', href: '/about' },
+    { label: 'Blog', href: '/blog' },
+    { label: 'Careers', href: '/careers' },
+    { label: 'Contact', href: '/contact' },
+  ],
+  Resources: [
+    { label: 'Documentation', href: '/docs' },
+    { label: 'API Reference', href: '/docs/api' },
+    { label: 'Status', href: '/status' },
+    { label: 'Support', href: '/support' },
+  ],
+  Legal: [
+    { label: 'Privacy', href: '/privacy' },
+    { label: 'Terms', href: '/terms' },
+    { label: 'Security', href: '/security' },
+  ],
+}
+
+const trustLogos = [
+  'Acme Corp',
+  'TechFlow',
+  'Quantum',
+  'NovaSoft',
+  'BuildStack',
+  'DataPipe',
+]
+
+export default function LandingPage() {
+  return (
+    <div className="min-h-screen scroll-smooth bg-background text-foreground">
+      <a
+        href="#main"
+        className="sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-[100] focus:rounded-lg focus:bg-primary focus:px-4 focus:py-2 focus:text-sm focus:font-medium focus:text-primary-foreground focus:outline-none"
+      >
+        Skip to content
+      </a>
+
+      <header className="sticky top-0 z-50 border-b border-border/50 bg-background/80 backdrop-blur-md">
+        <div className="mx-auto flex h-16 max-w-6xl items-center justify-between px-6 lg:px-8">
+          <span className="flex items-center gap-2 text-lg font-semibold tracking-tight">
+            <img
+              src="/images/logo.svg"
+              alt="{{headline}}"
+              className="h-8 w-auto"
+              onError={(e) => { e.currentTarget.style.display = 'none' }}
+            />
+            <span>{'{{headline}}'}</span>
+          </span>
+          <nav className="hidden items-center gap-8 text-sm md:flex">
+            <a
+              href="#features"
+              className="font-medium text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:rounded"
+            >
+              Features
+            </a>
+            <a
+              href="#pricing"
+              className="font-medium text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:rounded"
+            >
+              Pricing
+            </a>
+            <a
+              href="/sign-in"
+              className="font-medium text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:rounded"
+            >
+              Sign in
+            </a>
+            <Button
+              size="sm"
+              className="rounded-lg font-medium transition-transform hover:scale-105 active:scale-95 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2"
+              asChild
+            >
+              <a href="/sign-up">Get Started</a>
+            </Button>
+          </nav>
+          <Button size="sm" className="md:hidden" variant="ghost" asChild>
+            <a href="/sign-in">Sign in</a>
+          </Button>
+        </div>
+      </header>
+
+      <main id="main">
+        <HeroSection />
+
+        {/* Trust section */}
+        <section className="border-y border-border/50 bg-muted/20 py-12 dark:bg-muted/5">
+          <div className="mx-auto max-w-6xl px-6 lg:px-8">
+            <p className="mb-8 text-center text-xs font-medium uppercase tracking-widest text-muted-foreground">
+              Trusted by teams at
+            </p>
+            <div className="flex flex-wrap items-center justify-center gap-x-10 gap-y-4 lg:gap-x-16">
+              {trustLogos.map((name) => (
+                <span
+                  key={name}
+                  className="text-lg font-semibold tracking-tight text-muted-foreground/30 select-none"
+                >
+                  {name}
+                </span>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* Gradient divider */}
+        <div aria-hidden="true" className="h-px bg-gradient-to-r from-transparent via-border to-transparent" />
+
+        <section id="features">
+          <FeaturesSection />
+        </section>
+
+        {/* Gradient divider */}
+        <div aria-hidden="true" className="h-px bg-gradient-to-r from-transparent via-border to-transparent" />
+
+        <section id="pricing">
+          <PricingSection />
+        </section>
+      </main>
+
+      <footer className="border-t bg-muted/30 dark:bg-muted/10">
+        <div className="mx-auto max-w-6xl px-6 py-16 lg:px-8">
+          <div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-4 lg:gap-12">
+            {Object.entries(footerLinks).map(([category, links]) => (
+              <div key={category}>
+                <h4 className="text-sm font-semibold text-foreground">
+                  {category}
+                </h4>
+                <ul className="mt-4 space-y-3">
+                  {links.map((link) => (
+                    <li key={link.label}>
+                      <a
+                        href={link.href}
+                        className="text-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:rounded"
+                      >
+                        {link.label}
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+          </div>
+          <div className="mt-12 border-t pt-8">
+            <p className="text-sm text-muted-foreground">
+              &copy; {new Date().getFullYear()} {'{{headline}}'}. All rights reserved.
+            </p>
+          </div>
+        </div>
+      </footer>
+    </div>
+  )
+}

package/registry/layers/capability/layout-landing/variants/gradient-hero/media-manifest.json

@@ -0,0 +1,44 @@
+{
+  "slots": [
+    {
+      "id": "hero-product",
+      "path": "public/images/hero-product.png",
+      "width": 1200,
+      "height": 800,
+      "purpose": "Product screenshot shown in the hero section browser mockup frame",
+      "prompt": "Clean SaaS dashboard screenshot showing analytics charts, user activity feed, and sidebar navigation on white background",
+      "fallback": "gradient",
+      "usedIn": "src/components/landing/hero-section.tsx"
+    },
+    {
+      "id": "og-image",
+      "path": "public/og-image.png",
+      "width": 1200,
+      "height": 630,
+      "purpose": "Open Graph social sharing image",
+      "prompt": "Marketing banner with product name, tagline, and abstract gradient background",
+      "fallback": "none",
+      "usedIn": "app/layout.tsx"
+    },
+    {
+      "id": "favicon",
+      "path": "public/favicon.svg",
+      "width": 32,
+      "height": 32,
+      "purpose": "Browser tab icon",
+      "prompt": "Simple geometric logo mark in primary brand color on transparent background",
+      "fallback": "none",
+      "usedIn": "index.html"
+    },
+    {
+      "id": "logo-wordmark",
+      "path": "public/images/logo.svg",
+      "width": 120,
+      "height": 32,
+      "purpose": "Logo wordmark in the navigation header",
+      "prompt": "Clean sans-serif wordmark logo for a SaaS product",
+      "fallback": "text",
+      "usedIn": "src/components/landing/landing-page.tsx"
+    }
+  ]
+}

package/registry/layers/capability/layout-landing/variants/gradient-hero/pricing-section.tsx

@@ -0,0 +1,165 @@
+'use client'
+
+import * as React from 'react'
+import { Button } from '@/components/ui/button'
+import { Check } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+const tiers = [
+  {
+    name: 'Free',
+    price: { monthly: '$0', yearly: '$0' },
+    description: 'For side projects and experimentation.',
+    features: [
+      'Up to 3 projects',
+      '1 GB storage',
+      'Community support',
+      'Basic analytics',
+    ],
+    cta: 'Get Started',
+    highlighted: false,
+  },
+  {
+    name: 'Pro',
+    price: { monthly: '$29', yearly: '$24' },
+    description: 'For growing teams that need more power.',
+    features: [
+      'Unlimited projects',
+      '100 GB storage',
+      'Priority support',
+      'Advanced analytics',
+      'Custom domains',
+      'Team roles',
+    ],
+    cta: 'Start Free Trial',
+    highlighted: true,
+  },
+  {
+    name: 'Enterprise',
+    price: { monthly: 'Custom', yearly: 'Custom' },
+    description: 'For organizations with advanced needs.',
+    features: [
+      'Everything in Pro',
+      'Unlimited storage',
+      'Dedicated support engineer',
+      'SSO / SAML',
+      'SLA guarantees',
+      'Audit logs',
+    ],
+    cta: 'Contact Sales',
+    highlighted: false,
+  },
+]
+
+export function PricingSection() {
+  const [yearly, setYearly] = React.useState(false)
+
+  return (
+    <section className="bg-muted/30 py-24 dark:bg-muted/10 sm:py-32">
+      <div className="mx-auto max-w-6xl px-6 lg:px-8">
+        <div className="mx-auto max-w-2xl text-center">
+          <h2 className="text-3xl font-semibold tracking-tight text-foreground sm:text-4xl">
+            Simple, transparent pricing
+          </h2>
+          <p className="mt-4 text-lg leading-relaxed text-muted-foreground">
+            Choose your plan. Start free, upgrade when you are ready.
+          </p>
+
+          <div className="mt-8 inline-flex items-center gap-1 rounded-full border bg-muted/50 p-1 dark:bg-muted/20">
+            <button
+              type="button"
+              onClick={() => setYearly(false)}
+              className={cn(
+                'rounded-full px-5 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-500 focus-visible:ring-offset-2',
+                !yearly
+                  ? 'bg-gradient-to-r from-violet-600 to-blue-600 text-white shadow-sm'
+                  : 'text-muted-foreground hover:text-foreground'
+              )}
+            >
+              Monthly
+            </button>
+            <button
+              type="button"
+              onClick={() => setYearly(true)}
+              className={cn(
+                'inline-flex items-center gap-2 rounded-full px-5 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-500 focus-visible:ring-offset-2',
+                yearly
+                  ? 'bg-gradient-to-r from-violet-600 to-blue-600 text-white shadow-sm'
+                  : 'text-muted-foreground hover:text-foreground'
+              )}
+            >
+              Yearly
+              {!yearly && <span className="text-xs font-medium text-violet-600 dark:text-violet-400">Save 20%</span>}
+            </button>
+          </div>
+        </div>
+
+        <div className="mx-auto mt-16 grid max-w-5xl items-start gap-8 lg:grid-cols-3">
+          {tiers.map((tier) => (
+            <div
+              key={tier.name}
+              className={cn(
+                'flex flex-col rounded-xl border bg-card p-8',
+                tier.highlighted
+                  ? 'relative z-10 border-2 border-violet-500 shadow-xl shadow-violet-500/10 ring-1 ring-violet-500/20 lg:scale-105'
+                  : 'border-border/50'
+              )}
+            >
+              {tier.highlighted && (
+                <div className="absolute -top-4 left-1/2 -translate-x-1/2 rounded-full bg-gradient-to-r from-violet-600 to-blue-600 px-4 py-1 text-xs font-medium text-white">
+                  Most Popular
+                </div>
+              )}
+
+              <div className="space-y-8">
+                <div>
+                  <h3 className="text-lg font-semibold text-foreground">
+                    {tier.name}
+                  </h3>
+                  <p className="mt-1 text-sm text-muted-foreground">
+                    {tier.description}
+                  </p>
+                </div>
+
+                <div className="flex items-baseline gap-1">
+                  <span className="text-5xl font-bold tracking-tight text-foreground">
+                    {yearly ? tier.price.yearly : tier.price.monthly}
+                  </span>
+                  {tier.price.monthly !== 'Custom' && (
+                    <span className="text-sm text-muted-foreground">/mo</span>
+                  )}
+                </div>
+
+                <ul className="space-y-4">
+                  {tier.features.map((feature) => (
+                    <li key={feature} className="flex items-start gap-2.5 text-sm">
+                      <Check className="mt-0.5 h-4 w-4 shrink-0 text-violet-500" />
+                      <span className="text-muted-foreground">{feature}</span>
+                    </li>
+                  ))}
+                </ul>
+
+                <div>
+                  <Button
+                    variant={tier.highlighted ? 'default' : 'outline'}
+                    className={cn(
+                      'h-12 w-full rounded-lg font-medium transition-all focus-visible:ring-2 focus-visible:ring-violet-500 focus-visible:ring-offset-2',
+                      tier.highlighted && 'bg-gradient-to-r from-violet-600 to-blue-600 shadow-lg shadow-violet-500/25 hover:from-violet-700 hover:to-blue-700'
+                    )}
+                  >
+                    {tier.cta}
+                  </Button>
+                  {tier.name === 'Free' && (
+                    <p className="mt-3 text-center text-xs text-muted-foreground">
+                      No credit card required
+                    </p>
+                  )}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}

package/registry/layers/capability/layout-landing/variants/minimal-clean/features-section.tsx

@@ -0,0 +1,73 @@
+import { Layers, Globe, Lock } from 'lucide-react'
+
+const primaryFeatures = [
+  {
+    title: 'Lightning Fast',
+    description:
+      'Optimized for speed with edge-first architecture. Sub-second response times out of the box with automatic CDN distribution.',
+  },
+  {
+    title: 'Secure by Default',
+    description:
+      'Enterprise-grade security with end-to-end encryption, SOC 2 compliance, and role-based access controls baked into every layer.',
+  },
+  {
+    title: 'Built-in Analytics',
+    description:
+      'Real-time dashboards and custom reports so you always know what is working. Track every metric that matters to your business.',
+  },
+]
+
+const secondaryFeatures = [
+  { icon: Layers, label: 'Composable modules — pick only the pieces you need' },
+  { icon: Globe, label: 'Deploy to 30+ regions with a single command' },
+  { icon: Lock, label: 'SSO, SAML, and audit logs for compliance' },
+]
+
+export function FeaturesSection() {
+  return (
+    <section className="bg-muted/20 py-24 dark:bg-muted/5 sm:py-32">
+      <div className="mx-auto max-w-6xl px-6 lg:px-8">
+        <div className="mx-auto max-w-2xl text-center">
+          <h2 className="text-3xl font-light tracking-tight text-foreground sm:text-4xl">
+            Everything you need to ship
+          </h2>
+          <p className="mt-4 text-lg font-light leading-relaxed text-muted-foreground">
+            A complete toolkit so your team can focus on building product, not plumbing.
+          </p>
+        </div>
+
+        <div className="mx-auto mt-20 max-w-2xl">
+          {primaryFeatures.map((feature, i) => (
+            <div key={feature.title}>
+              {i > 0 && <div className="border-t border-border/50" />}
+              <div className="py-10">
+                <h3 className="text-lg font-medium text-foreground">
+                  {feature.title}
+                </h3>
+                <p className="mt-3 text-sm font-light leading-relaxed text-muted-foreground">
+                  {feature.description}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <div className="mx-auto mt-4 max-w-2xl border-t pt-10">
+          <div className="grid gap-8 sm:grid-cols-3">
+            {secondaryFeatures.map((feature) => (
+              <div key={feature.label} className="flex items-start gap-3">
+                <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground">
+                  <feature.icon className="h-4 w-4" />
+                </div>
+                <p className="text-sm leading-snug text-muted-foreground">
+                  {feature.label}
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}

package/registry/layers/capability/layout-landing/variants/minimal-clean/hero-section.tsx

@@ -0,0 +1,65 @@
+import { Button } from '@/components/ui/button'
+import { ArrowRight } from 'lucide-react'
+
+export function HeroSection() {
+  return (
+    <section className="bg-background">
+      <div className="mx-auto max-w-6xl px-6 py-28 sm:py-36 lg:px-8 lg:py-44">
+        <div className="mx-auto flex max-w-2xl flex-col items-center text-center">
+          <p className="text-sm font-medium uppercase tracking-wider text-muted-foreground">
+            NOW IN BETA
+          </p>
+
+          <h1 className="mt-8 text-4xl font-light tracking-tight text-foreground sm:text-5xl lg:text-6xl">
+            {'{{headline}}'}
+          </h1>
+
+          <p className="mt-8 max-w-xl text-lg font-light leading-relaxed text-muted-foreground">
+            Build faster, ship sooner, and scale with confidence. The modern platform
+            that gives your team everything it needs to go from idea to production.
+          </p>
+
+          <div className="mt-10 flex items-center gap-4">
+            <Button
+              size="lg"
+              className="h-12 rounded-lg px-8 font-medium shadow-lg shadow-primary/25 transition-all hover:brightness-110 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2"
+            >
+              Get Started
+            </Button>
+            <Button
+              size="lg"
+              variant="ghost"
+              className="group h-12 gap-2 rounded-lg border-2 border-transparent px-8 font-medium text-foreground underline decoration-muted-foreground/30 underline-offset-4 transition-all hover:bg-transparent hover:decoration-foreground focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2"
+            >
+              Learn more
+              <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
+            </Button>
+          </div>
+
+          <div className="mt-14 flex items-center justify-center gap-8">
+            {Array.from({ length: 5 }).map((_, i) => (
+              <div
+                key={i}
+                className="h-6 w-16 rounded bg-muted-foreground/10"
+              />
+            ))}
+          </div>
+
+          <div className="mt-8 flex items-center gap-3">
+            <div className="flex -space-x-2">
+              {['bg-primary', 'bg-chart-1', 'bg-chart-2', 'bg-chart-3', 'bg-chart-4'].map((color, i) => (
+                <div
+                  key={i}
+                  className={`h-8 w-8 rounded-full border-2 border-background ${color}`}
+                />
+              ))}
+            </div>
+            <p className="text-sm font-medium text-muted-foreground">
+              Trusted by <span className="text-foreground">1,000+</span> teams
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}

package/registry/layers/capability/layout-landing/variants/minimal-clean/landing-page.tsx

@@ -0,0 +1,164 @@
+import { Button } from '@/components/ui/button'
+import { HeroSection } from '@/components/landing/hero-section'
+import { FeaturesSection } from '@/components/landing/features-section'
+import { PricingSection } from '@/components/landing/pricing-section'
+
+const footerLinks = {
+  Product: [
+    { label: 'Features', href: '#features' },
+    { label: 'Pricing', href: '#pricing' },
+    { label: 'Changelog', href: '/changelog' },
+    { label: 'Docs', href: '/docs' },
+  ],
+  Company: [
+    { label: 'About', href: '/about' },
+    { label: 'Blog', href: '/blog' },
+    { label: 'Careers', href: '/careers' },
+    { label: 'Contact', href: '/contact' },
+  ],
+  Resources: [
+    { label: 'Documentation', href: '/docs' },
+    { label: 'API Reference', href: '/docs/api' },
+    { label: 'Status', href: '/status' },
+    { label: 'Support', href: '/support' },
+  ],
+  Legal: [
+    { label: 'Privacy', href: '/privacy' },
+    { label: 'Terms', href: '/terms' },
+    { label: 'Security', href: '/security' },
+  ],
+}
+
+const trustLogos = [
+  'Acme Corp',
+  'TechFlow',
+  'Quantum',
+  'NovaSoft',
+  'BuildStack',
+  'DataPipe',
+]
+
+export default function LandingPage() {
+  return (
+    <div className="min-h-screen scroll-smooth bg-background text-foreground">
+      <a
+        href="#main"
+        className="sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-[100] focus:rounded-lg focus:bg-primary focus:px-4 focus:py-2 focus:text-sm focus:font-medium focus:text-primary-foreground focus:outline-none"
+      >
+        Skip to content
+      </a>
+
+      <header className="sticky top-0 z-50 border-b border-border/50 bg-background/80 backdrop-blur-md">
+        <div className="mx-auto flex h-16 max-w-6xl items-center justify-between px-6 lg:px-8">
+          <span className="flex items-center gap-2 text-lg font-semibold tracking-tight">
+            <img
+              src="/images/logo.svg"
+              alt="{{headline}}"
+              className="h-8 w-auto"
+              onError={(e) => { e.currentTarget.style.display = 'none' }}
+            />
+            <span>{'{{headline}}'}</span>
+          </span>
+          <nav className="hidden items-center gap-8 text-sm md:flex">
+            <a
+              href="#features"
+              className="font-medium text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:rounded"
+            >
+              Features
+            </a>
+            <a
+              href="#pricing"
+              className="font-medium text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:rounded"
+            >
+              Pricing
+            </a>
+            <a
+              href="/sign-in"
+              className="font-medium text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:rounded"
+            >
+              Sign in
+            </a>
+            <Button
+              size="sm"
+              className="rounded-lg font-medium transition-transform hover:scale-105 active:scale-95 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2"
+              asChild
+            >
+              <a href="/sign-up">Get Started</a>
+            </Button>
+          </nav>
+          <Button size="sm" className="md:hidden" variant="ghost" asChild>
+            <a href="/sign-in">Sign in</a>
+          </Button>
+        </div>
+      </header>
+
+      <main id="main">
+        <HeroSection />
+
+        {/* Trust section */}
+        <section className="border-y border-border/50 bg-muted/20 py-12 dark:bg-muted/5">
+          <div className="mx-auto max-w-6xl px-6 lg:px-8">
+            <p className="mb-8 text-center text-xs font-medium uppercase tracking-widest text-muted-foreground">
+              Trusted by teams at
+            </p>
+            <div className="flex flex-wrap items-center justify-center gap-x-10 gap-y-4 lg:gap-x-16">
+              {trustLogos.map((name) => (
+                <span
+                  key={name}
+                  className="text-lg font-semibold tracking-tight text-muted-foreground/30 select-none"
+                >
+                  {name}
+                </span>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* Gradient divider */}
+        <div aria-hidden="true" className="h-px bg-gradient-to-r from-transparent via-border to-transparent" />
+
+        <section id="features">
+          <FeaturesSection />
+        </section>
+
+        {/* Gradient divider */}
+        <div aria-hidden="true" className="h-px bg-gradient-to-r from-transparent via-border to-transparent" />
+
+        <section id="pricing">
+          <PricingSection />
+        </section>
+      </main>
+
+      <footer className="border-t bg-muted/30 dark:bg-muted/10">
+        <div className="mx-auto max-w-6xl px-6 py-16 lg:px-8">
+          <div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-4 lg:gap-12">
+            {Object.entries(footerLinks).map(([category, links]) => (
+              <div key={category}>
+                <h4 className="text-sm font-semibold text-foreground">
+                  {category}
+                </h4>
+                <ul className="mt-4 space-y-3">
+                  {links.map((link) => (
+                    <li key={link.label}>
+                      <a
+                        href={link.href}
+                        className="text-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:rounded"
+                      >
+                        {link.label}
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+          </div>
+          <div className="mt-12 border-t pt-8">
+            <p className="text-sm text-muted-foreground">
+              &copy; {new Date().getFullYear()} {'{{headline}}'}. All rights reserved.
+            </p>
+          </div>
+        </div>
+      </footer>
+    </div>
+  )
+}