@tangle-network/starter-foundry 0.1.0 → 0.2.0

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

@@ -1,79 +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="py-24 sm:py-32">
+    <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-20 max-w-5xl space-y-16">
-          {primaryFeatures.map((feature, i) => (
-            <div
-              key={feature.title}
-              className={`flex flex-col items-center gap-8 md:flex-row ${i % 2 === 1 ? 'md:flex-row-reverse' : ''}`}
-            >
-              <div className="flex h-24 w-24 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-violet-500 to-blue-500 text-white shadow-lg shadow-violet-500/25">
-                <feature.icon className="h-10 w-10" />
-              </div>
-              <div className={`text-center ${i % 2 === 1 ? 'md:text-right' : 'md:text-left'}`}>
-                <h3 className="text-xl font-semibold text-foreground">{feature.title}</h3>
-                <p className="mt-2 text-sm leading-relaxed text-muted-foreground">
+        <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
+                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>
-            </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-violet-500/20 to-blue-500/20 text-violet-600 dark:text-violet-400">
-                  <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/variants/gradient-hero/hero-section.tsx

@@ -1,71 +1,104 @@
 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 min-h-[90vh] overflow-hidden bg-gradient-to-br from-violet-600 via-blue-600 to-cyan-500 dark:from-violet-900 dark:via-blue-900 dark:to-cyan-800">
+    <section className="relative overflow-hidden bg-background">
       <div
         aria-hidden="true"
-        className="absolute inset-0 -z-0 opacity-30"
-      >
-        <div className="absolute left-1/4 top-1/4 h-96 w-96 animate-pulse rounded-full bg-white/20 blur-3xl" />
-        <div className="absolute bottom-1/4 right-1/4 h-80 w-80 animate-pulse rounded-full bg-purple-300/20 blur-3xl [animation-delay:1s]" />
-        <div className="absolute left-1/2 top-1/2 h-64 w-64 animate-pulse rounded-full bg-cyan-300/20 blur-3xl [animation-delay:2s]" />
-      </div>
+        className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,hsl(var(--primary)/0.08),transparent)]"
+      />
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute -right-40 -top-40 h-[500px] w-[500px] rounded-full bg-primary/15 blur-3xl"
+      />
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute -bottom-40 -left-40 h-[400px] w-[400px] rounded-full bg-chart-2/15 blur-3xl"
+      />
 
-      <div className="relative z-10 mx-auto flex max-w-6xl flex-col items-center justify-center px-6 py-32 sm:py-40 lg:px-8 lg:py-48">
-        <div className="rounded-full border border-white/20 bg-white/10 px-4 py-1.5 text-xs font-medium tracking-wider text-white/80">
-          NOW IN BETA — GET EARLY ACCESS
-        </div>
+      <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">
+          <div className="flex flex-col items-center text-center lg:items-start lg:text-left">
+            <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 max-w-3xl text-center text-5xl font-extrabold tracking-tight text-white sm:text-6xl lg:text-7xl">
-          {'{{headline}}'}
-        </h1>
+            <h1 className="mt-8 text-5xl font-bold tracking-tighter text-foreground sm:text-6xl lg:text-7xl">
+              {hero.headline}
+            </h1>
 
-        <p className="mt-6 max-w-xl text-center text-lg leading-relaxed text-white/80">
-          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>
+            <p className="mt-6 max-w-xl text-lg leading-relaxed text-muted-foreground">
+              {hero.subheadline}
+            </p>
 
-        <div className="mt-10 flex items-center gap-4">
-          <Button
-            size="lg"
-            className="h-12 gap-2 rounded-lg bg-white px-8 font-medium text-violet-700 shadow-lg shadow-white/25 transition-all hover:bg-white/90 hover:brightness-110 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-violet-600 dark:bg-white dark:text-violet-700"
-          >
-            Get Started
-            <ArrowRight className="h-4 w-4" />
-          </Button>
-          <Button
-            size="lg"
-            variant="outline"
-            className="h-12 gap-2 rounded-lg border-2 border-white/30 px-8 font-medium text-white transition-all hover:bg-white/10 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-violet-600"
-          >
-            <Play className="h-4 w-4" />
-            See a Demo
-          </Button>
-        </div>
+            <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"
+              >
+                {hero.ctaPrimary}
+                <ArrowRight className="h-4 w-4" />
+              </Button>
+              <Button
+                size="lg"
+                variant="outline"
+                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" />
+                {hero.ctaSecondary}
+              </Button>
+            </div>
+
+            <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
+                    key={i}
+                    className={`h-8 w-8 rounded-full border-2 border-background ${color}`}
+                  />
+                ))}
+              </div>
+              <p className="text-sm font-medium text-muted-foreground">
+                {trust.label}
+              </p>
+            </div>
+          </div>
 
-        <div className="mt-14 flex items-center justify-center gap-8">
-          {Array.from({ length: 5 }).map((_, i) => (
+          <div className="relative mx-auto w-full max-w-lg lg:mx-0">
             <div
-              key={i}
-              className="h-6 w-16 rounded bg-white/15"
+              aria-hidden="true"
+              className="pointer-events-none absolute -inset-4 rounded-2xl bg-primary/10 blur-2xl"
             />
-          ))}
-        </div>
-
-        <div className="mt-8 flex items-center gap-3">
-          <div className="flex -space-x-2">
-            {['bg-white', 'bg-cyan-300', 'bg-violet-300', 'bg-blue-300', 'bg-emerald-300'].map((color, i) => (
-              <div
-                key={i}
-                className={`h-8 w-8 rounded-full border-2 border-white/30 ${color}`}
-              />
-            ))}
+            <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" />
+                  <div className="h-3 w-3 rounded-full bg-yellow-400/80" />
+                  <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">
+                  {personalize.brand.name.toLowerCase()}.com
+                </div>
+              </div>
+              <div className="relative aspect-[4/3]">
+                <img
+                  src="/images/hero-product.png"
+                  alt={`${personalize.brand.name} product screenshot`}
+                  className="h-full w-full object-cover"
+                  onError={(e) => { e.currentTarget.style.display = 'none' }}
+                />
+                <div className="absolute inset-0 flex items-center justify-center bg-gradient-to-br from-primary/10 to-accent/10">
+                  <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>
           </div>
-          <p className="text-sm font-medium text-white/70">
-            Trusted by <span className="text-white">1,000+</span> teams
-          </p>
         </div>
       </div>
     </section>

package/registry/layers/capability/layout-landing/variants/gradient-hero/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/variants/gradient-hero/personalize.json

@@ -0,0 +1,53 @@
+{
+  "_meta": { "variant": "gradient-hero", "doc": "Bold gradient hero variant" },
+  "brand": { "name": "Aurora", "tagline": "Bold by design" },
+  "hero": {
+    "badge": "JUST LAUNCHED",
+    "headline": "Make something bold.",
+    "subheadline": "A vibrant, gradient-first design system for products that refuse to blend in.",
+    "ctaPrimary": "Start Building",
+    "ctaSecondary": "Watch the Demo"
+  },
+  "trust": {
+    "label": "Loved by 2,500+ creators",
+    "logoNames": ["Vivid", "Spectrum", "Prism", "Aurora", "Radiance", "Glow"]
+  },
+  "features": {
+    "eyebrow": "Why Aurora",
+    "headline": "Designed to stand out",
+    "subheadline": "Every detail crafted for impact and conversion.",
+    "primary": [
+      { "icon": "Sparkles", "title": "Distinctive design", "description": "Eye-catching gradients and animations that grab attention immediately." },
+      { "icon": "Rocket", "title": "Built for growth", "description": "Conversion-optimized components proven across thousands of launches." },
+      { "icon": "Wand", "title": "Customize everything", "description": "Drop-in components that adapt to your brand without fighting you." }
+    ],
+    "secondary": [
+      { "icon": "Palette", "title": "Theme system", "description": "8 base palettes, infinite custom." },
+      { "icon": "Layers", "title": "Composable", "description": "Mix any sections you need." },
+      { "icon": "Heart", "title": "Crafted with love", "description": "Every pixel intentional." }
+    ]
+  },
+  "pricing": {
+    "eyebrow": "Pricing",
+    "headline": "Fair pricing for builders",
+    "subheadline": "Free to start. Upgrade when you ship.",
+    "toggleMonthly": "Monthly",
+    "toggleYearly": "Yearly",
+    "yearlyDiscount": "Save 25%",
+    "tiers": [
+      { "name": "Starter", "price": "$0", "period": "/mo", "description": "For solo builders", "features": ["3 projects", "Community support", "Aurora basics"], "cta": "Start free", "highlighted": false, "note": "Free forever" },
+      { "name": "Creator", "price": "$24", "period": "/mo", "description": "For active builders", "features": ["Unlimited projects", "Priority support", "All Aurora themes", "Custom branding", "Export to React"], "cta": "Start trial", "highlighted": true },
+      { "name": "Studio", "price": "$99", "period": "/mo", "description": "For teams and agencies", "features": ["Everything in Creator", "Unlimited team seats", "White-label rights", "Premium support", "Source files"], "cta": "Contact sales", "highlighted": false }
+    ]
+  },
+  "footer": {
+    "tagline": "Design systems for the bold.",
+    "sections": {
+      "Product": [{ "label": "Features", "href": "#features" }, { "label": "Pricing", "href": "#pricing" }, { "label": "Showcase", "href": "/showcase" }, { "label": "Templates", "href": "/templates" }],
+      "Company": [{ "label": "About", "href": "/about" }, { "label": "Blog", "href": "/blog" }, { "label": "Careers", "href": "/careers" }, { "label": "Press", "href": "/press" }],
+      "Resources": [{ "label": "Docs", "href": "/docs" }, { "label": "Changelog", "href": "/changelog" }, { "label": "Community", "href": "/community" }, { "label": "Support", "href": "/support" }],
+      "Legal": [{ "label": "Privacy", "href": "/privacy" }, { "label": "Terms", "href": "/terms" }, { "label": "License", "href": "/license" }]
+    },
+    "copyright": "© 2026 Aurora Studio."
+  }
+}