@tangle-network/starter-foundry 0.1.0 → 0.2.0

package/registry/layers/capability/layout-landing/files/features-section.tsx

@@ -1,98 +1,75 @@
-import { Zap, Shield, BarChart3, Layers, Globe, Lock } from 'lucide-react'
+import * as Icons from 'lucide-react'
+import type { LucideIcon } from 'lucide-react'
+import personalize from '@/personalize.json'
 
-const primaryFeatures = [
-  {
-    icon: Zap,
-    title: 'Lightning Fast',
-    description:
-      'Optimized for speed with edge-first architecture. Sub-second response times out of the box with automatic CDN distribution.',
-  },
-  {
-    icon: Shield,
-    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.',
-  },
-  {
-    icon: BarChart3,
-    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' },
-]
+function getIcon(name: string): LucideIcon {
+  const Icon = (Icons as unknown as Record<string, LucideIcon>)[name]
+  return Icon ?? Icons.Sparkles
+}
 
 export function FeaturesSection() {
+  const { features } = personalize
   return (
-    <section className="relative bg-muted/30 py-24 dark:bg-muted/10 sm:py-32">
-      <style>{`
-        @keyframes fadeInUp {
-          from {
-            opacity: 0;
-            transform: translateY(20px);
-          }
-          to {
-            opacity: 1;
-            transform: translateY(0);
-          }
-        }
-      `}</style>
-
+    <section id="features" className="relative bg-background py-24 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">
-            Everything you need to ship
+          <p className="text-sm font-semibold uppercase tracking-wider text-primary">
+            {features.eyebrow}
+          </p>
+          <h2 className="mt-3 text-4xl font-bold tracking-tight text-foreground sm:text-5xl">
+            {features.headline}
           </h2>
-          <p className="mt-4 text-lg leading-relaxed text-muted-foreground">
-            A complete toolkit so your team can focus on building product, not plumbing.
+          <p className="mt-6 text-lg leading-relaxed text-muted-foreground">
+            {features.subheadline}
           </p>
         </div>
 
-        <div className="mx-auto mt-16 grid max-w-5xl gap-6 lg:grid-cols-3">
-          {primaryFeatures.map((feature, i) => (
-            <div
-              key={feature.title}
-              className="relative rounded-xl border border-border/50 bg-card p-8 opacity-0 transition-all duration-200 hover:border-border hover:shadow-md [animation:fadeInUp_0.5s_ease_forwards]"
-              style={{ animationDelay: `${0.1 + i * 0.15}s` }}
-            >
-              {/* Gradient top border */}
+        <div className="mt-20 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+          {features.primary.map((feature, i) => {
+            const Icon = getIcon(feature.icon)
+            return (
               <div
-                aria-hidden="true"
-                className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-primary/50 to-transparent"
-              />
-              <div className="flex h-11 w-11 items-center justify-center rounded-lg bg-gradient-to-br from-primary/20 to-primary/5 text-primary">
-                <feature.icon className="h-5 w-5" />
+                key={feature.title}
+                className="group relative overflow-hidden rounded-xl border border-border/50 bg-card p-8 shadow-sm transition-all duration-200 hover:border-border hover:shadow-md"
+                style={{ animation: `fadeInUp 0.6s ease ${i * 0.15}s both` }}
+              >
+                <div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-primary/50 to-transparent" />
+                <div className="flex h-11 w-11 items-center justify-center rounded-lg bg-gradient-to-br from-primary/20 to-primary/5 text-primary">
+                  <Icon className="h-5 w-5" />
+                </div>
+                <h3 className="mt-6 text-lg font-semibold text-foreground">{feature.title}</h3>
+                <p className="mt-3 text-sm leading-relaxed text-muted-foreground">
+                  {feature.description}
+                </p>
               </div>
-              <h3 className="mt-5 text-lg font-semibold text-foreground">
-                {feature.title}
-              </h3>
-              <p className="mt-2 text-sm leading-relaxed text-muted-foreground">
-                {feature.description}
-              </p>
-            </div>
-          ))}
+            )
+          })}
         </div>
 
-        <div className="mx-auto mt-12 max-w-3xl border-t pt-10">
-          <div className="grid gap-6 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-gradient-to-br from-primary/20 to-primary/5 text-primary">
-                  <feature.icon className="h-4 w-4" />
+        <div className="mt-16 grid gap-8 border-t border-border/50 pt-16 sm:grid-cols-3">
+          {features.secondary.map((feature) => {
+            const Icon = getIcon(feature.icon)
+            return (
+              <div key={feature.title} className="flex gap-4">
+                <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground">
+                  <Icon className="h-4 w-4" />
+                </div>
+                <div>
+                  <h4 className="text-sm font-semibold text-foreground">{feature.title}</h4>
+                  <p className="mt-1 text-sm text-muted-foreground">{feature.description}</p>
                 </div>
-                <p className="text-sm leading-snug text-muted-foreground">
-                  {feature.label}
-                </p>
               </div>
-            ))}
-          </div>
+            )
+          })}
         </div>
       </div>
+
+      <style>{`
+        @keyframes fadeInUp {
+          from { opacity: 0; transform: translateY(20px); }
+          to { opacity: 1; transform: translateY(0); }
+        }
+      `}</style>
     </section>
   )
 }

package/registry/layers/capability/layout-landing/files/hero-section.tsx

@@ -1,16 +1,15 @@
 import { Button } from '@/components/ui/button'
 import { ArrowRight, Play } from 'lucide-react'
+import personalize from '@/personalize.json'
 
 export function HeroSection() {
+  const { hero, trust } = personalize
   return (
     <section className="relative overflow-hidden bg-background">
-      {/* Radial gradient backdrop */}
       <div
         aria-hidden="true"
         className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,hsl(var(--primary)/0.08),transparent)]"
       />
-
-      {/* Decorative blur orbs */}
       <div
         aria-hidden="true"
         className="pointer-events-none absolute -right-40 -top-40 h-[500px] w-[500px] rounded-full bg-primary/15 blur-3xl"
@@ -22,27 +21,25 @@ export function HeroSection() {
 
       <div className="relative mx-auto max-w-6xl px-6 py-28 sm:py-36 lg:px-8 lg:py-44">
         <div className="grid items-center gap-12 lg:grid-cols-2 lg:gap-16">
-          {/* Left column — text content */}
           <div className="flex flex-col items-center text-center lg:items-start lg:text-left">
-            <div className="rounded-full border border-white/20 bg-white/10 px-4 py-1.5 text-xs font-medium tracking-wider text-muted-foreground backdrop-blur-sm">
-              NOW IN BETA — GET EARLY ACCESS
+            <div className="rounded-full border border-border/40 bg-muted/50 px-4 py-1.5 text-xs font-medium tracking-wider text-muted-foreground backdrop-blur-sm">
+              {hero.badge}
             </div>
 
             <h1 className="mt-8 text-5xl font-bold tracking-tighter text-foreground sm:text-6xl lg:text-7xl">
-              {'{{headline}}'}
+              {hero.headline}
             </h1>
 
             <p className="mt-6 max-w-xl text-lg 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.
+              {hero.subheadline}
             </p>
 
-            <div className="mt-10 flex items-center gap-4">
+            <div className="mt-10 flex flex-wrap items-center justify-center gap-4 lg:justify-start">
               <Button
                 size="lg"
                 className="h-12 gap-2 rounded-lg px-8 font-medium shadow-lg shadow-primary/25 transition-transform hover:scale-105 active:scale-95 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2"
               >
-                Get Started
+                {hero.ctaPrimary}
                 <ArrowRight className="h-4 w-4" />
               </Button>
               <Button
@@ -51,11 +48,11 @@ export function HeroSection() {
                 className="h-12 gap-2 rounded-lg border-2 px-8 font-medium transition-transform hover:scale-105 active:scale-95 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2"
               >
                 <Play className="h-4 w-4" />
-                See a Demo
+                {hero.ctaSecondary}
               </Button>
             </div>
 
-            <div className="mt-10 flex items-center gap-3">
+            <div className="mt-12 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
@@ -65,20 +62,17 @@ export function HeroSection() {
                 ))}
               </div>
               <p className="text-sm font-medium text-muted-foreground">
-                Trusted by <span className="text-foreground">1,000+</span> teams
+                {trust.label}
               </p>
             </div>
           </div>
 
-          {/* Right column — product mockup */}
           <div className="relative mx-auto w-full max-w-lg lg:mx-0">
-            {/* Glow behind mockup */}
             <div
               aria-hidden="true"
               className="pointer-events-none absolute -inset-4 rounded-2xl bg-primary/10 blur-2xl"
             />
-            <div className="relative rounded-xl border border-border/50 bg-card shadow-2xl shadow-primary/5 overflow-hidden">
-              {/* Browser toolbar */}
+            <div className="relative overflow-hidden rounded-xl border border-border/50 bg-card shadow-2xl shadow-primary/5">
               <div className="flex items-center gap-2 border-b border-border/50 bg-muted/50 px-4 py-3">
                 <div className="flex items-center gap-1.5">
                   <div className="h-3 w-3 rounded-full bg-red-400/80" />
@@ -86,20 +80,21 @@ export function HeroSection() {
                   <div className="h-3 w-3 rounded-full bg-green-400/80" />
                 </div>
                 <div className="ml-3 flex-1 rounded-md bg-background/80 px-3 py-1 text-xs text-muted-foreground">
-                  yourapp.com
+                  {personalize.brand.name.toLowerCase()}.com
                 </div>
               </div>
-              {/* Content area */}
               <div className="relative aspect-[4/3]">
                 <img
                   src="/images/hero-product.png"
-                  alt="Product screenshot"
+                  alt={`${personalize.brand.name} product screenshot`}
                   className="h-full w-full object-cover"
                   onError={(e) => { e.currentTarget.style.display = 'none' }}
                 />
-                {/* Gradient fallback shown when image hasn't been generated yet */}
                 <div className="absolute inset-0 flex items-center justify-center bg-gradient-to-br from-primary/10 to-accent/10">
-                  <span className="text-sm text-muted-foreground">Generate with: media-manifest.json</span>
+                  <div className="text-center">
+                    <p className="text-sm font-medium text-foreground">{personalize.brand.name}</p>
+                    <p className="mt-1 text-xs text-muted-foreground">{personalize.brand.tagline}</p>
+                  </div>
                 </div>
               </div>
             </div>

package/registry/layers/capability/layout-landing/files/landing-page.tsx

@@ -2,43 +2,10 @@ 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',
-]
+import personalize from '@/personalize.json'
 
 export default function LandingPage() {
+  const { brand, trust, footer } = personalize
   return (
     <div className="min-h-screen scroll-smooth bg-background text-foreground">
       <a
@@ -53,28 +20,28 @@ export default function LandingPage() {
           <span className="flex items-center gap-2 text-lg font-semibold tracking-tight">
             <img
               src="/images/logo.svg"
-              alt="{{headline}}"
+              alt={brand.name}
               className="h-8 w-auto"
               onError={(e) => { e.currentTarget.style.display = 'none' }}
             />
-            <span>{'{{headline}}'}</span>
+            <span>{brand.name}</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"
+              className="font-medium text-muted-foreground transition-colors hover:text-foreground focus-visible:rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2"
             >
               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"
+              className="font-medium text-muted-foreground transition-colors hover:text-foreground focus-visible:rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2"
             >
               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"
+              className="font-medium text-muted-foreground transition-colors hover:text-foreground focus-visible:rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2"
             >
               Sign in
             </a>
@@ -95,17 +62,16 @@ export default function LandingPage() {
       <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) => (
+              {trust.logoNames.map((name) => (
                 <span
                   key={name}
-                  className="text-lg font-semibold tracking-tight text-muted-foreground/30 select-none"
+                  className="select-none text-lg font-semibold tracking-tight text-muted-foreground/30"
                 >
                   {name}
                 </span>
@@ -114,35 +80,33 @@ export default function LandingPage() {
           </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>
+        <FeaturesSection />
 
-        {/* Gradient divider */}
         <div aria-hidden="true" className="h-px bg-gradient-to-r from-transparent via-border to-transparent" />
 
-        <section id="pricing">
-          <PricingSection />
-        </section>
+        <PricingSection />
       </main>
 
-      <footer className="border-t bg-muted/30 dark:bg-muted/10">
+      <footer className="border-t border-border/50 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>
+          <div className="grid gap-8 lg:grid-cols-5 lg:gap-12">
+            <div className="lg:col-span-1">
+              <span className="text-lg font-semibold tracking-tight">{brand.name}</span>
+              <p className="mt-3 text-sm leading-relaxed text-muted-foreground">
+                {footer.tagline}
+              </p>
+            </div>
+            {Object.entries(footer.sections).map(([title, links]) => (
+              <div key={title}>
+                <h4 className="text-sm font-semibold text-foreground">{title}</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"
+                        className="text-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2"
                       >
                         {link.label}
                       </a>
@@ -152,10 +116,8 @@ export default function LandingPage() {
               </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 className="mt-12 border-t border-border/50 pt-8">
+            <p className="text-sm text-muted-foreground">{footer.copyright}</p>
           </div>
         </div>
       </footer>

package/registry/layers/capability/layout-landing/files/personalize.json

@@ -0,0 +1,146 @@
+{
+  "_meta": {
+    "doc": "Edit this file to customize ALL copy, branding, and content on the landing page. Components read from this at build time. Agents personalizing scaffolds should rewrite this file based on the user's actual product.",
+    "version": 1
+  },
+  "brand": {
+    "name": "Acme",
+    "tagline": "The platform for shipping fast"
+  },
+  "hero": {
+    "badge": "NOW IN BETA — GET EARLY ACCESS",
+    "headline": "Build something people want.",
+    "subheadline": "The modern platform that gives your team everything it needs to go from idea to production.",
+    "ctaPrimary": "Get Started",
+    "ctaSecondary": "See a Demo"
+  },
+  "trust": {
+    "label": "Trusted by 1,000+ teams worldwide",
+    "logoNames": ["Acme Corp", "TechFlow", "Quantum", "NovaSoft", "BuildStack", "DataPipe"]
+  },
+  "features": {
+    "eyebrow": "Features",
+    "headline": "Everything you need, nothing you don't",
+    "subheadline": "Built for teams who care about craft and ship fast.",
+    "primary": [
+      {
+        "icon": "Zap",
+        "title": "Lightning fast",
+        "description": "Optimized for speed at every layer. Sub-second cold starts, instant hot reload."
+      },
+      {
+        "icon": "Shield",
+        "title": "Secure by default",
+        "description": "Authentication, authorization, and encryption built in. SOC 2 ready out of the box."
+      },
+      {
+        "icon": "BarChart3",
+        "title": "Built-in analytics",
+        "description": "Real-time metrics, custom dashboards, and automatic alerting on what matters."
+      }
+    ],
+    "secondary": [
+      {
+        "icon": "Layers",
+        "title": "Composable architecture",
+        "description": "Mix and match the pieces you need."
+      },
+      {
+        "icon": "Globe",
+        "title": "Global by default",
+        "description": "Edge-deployed across 200+ regions."
+      },
+      {
+        "icon": "Lock",
+        "title": "Privacy-first",
+        "description": "Your data stays yours. No tracking, no telemetry."
+      }
+    ]
+  },
+  "pricing": {
+    "eyebrow": "Pricing",
+    "headline": "Simple, transparent pricing",
+    "subheadline": "Start free. Upgrade when you're ready. Cancel anytime.",
+    "toggleMonthly": "Monthly",
+    "toggleYearly": "Yearly",
+    "yearlyDiscount": "Save 20%",
+    "tiers": [
+      {
+        "name": "Free",
+        "price": "$0",
+        "period": "/mo",
+        "description": "For side projects and exploration",
+        "features": [
+          "Up to 3 projects",
+          "Community support",
+          "Basic analytics",
+          "1 team member"
+        ],
+        "cta": "Start for free",
+        "highlighted": false,
+        "note": "No credit card required"
+      },
+      {
+        "name": "Pro",
+        "price": "$29",
+        "period": "/mo",
+        "description": "For growing teams shipping in production",
+        "features": [
+          "Unlimited projects",
+          "Priority support",
+          "Advanced analytics",
+          "Up to 10 team members",
+          "Custom integrations",
+          "API access"
+        ],
+        "cta": "Start free trial",
+        "highlighted": true
+      },
+      {
+        "name": "Enterprise",
+        "price": "Custom",
+        "period": "",
+        "description": "For organizations with custom needs",
+        "features": [
+          "Everything in Pro",
+          "Unlimited team members",
+          "Dedicated support",
+          "Custom SLAs",
+          "SSO and SAML",
+          "On-premise deployment"
+        ],
+        "cta": "Contact sales",
+        "highlighted": false
+      }
+    ]
+  },
+  "footer": {
+    "tagline": "Built with care by people who give a damn.",
+    "sections": {
+      "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" }
+      ]
+    },
+    "copyright": "© 2026 Acme. All rights reserved."
+  }
+}