@tangle-network/starter-foundry 0.1.0 → 0.3.0

package/registry/layers/capability/layout-landing/variants/default/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."
+  }
+}

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

@@ -4,147 +4,100 @@ 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,
-  },
-]
+import personalize from '@/personalize.json'
 
 export function PricingSection() {
   const [yearly, setYearly] = React.useState(false)
+  const { pricing } = personalize
 
   return (
-    <section className="py-24 sm:py-32">
+    <section id="pricing" 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">
-            Simple, transparent pricing
+          <p className="text-sm font-semibold uppercase tracking-wider text-primary">
+            {pricing.eyebrow}
+          </p>
+          <h2 className="mt-3 text-4xl font-bold tracking-tight text-foreground sm:text-5xl">
+            {pricing.headline}
           </h2>
-          <p className="mt-4 text-lg leading-relaxed text-muted-foreground">
-            Choose your plan. Start free, upgrade when you are ready.
+          <p className="mt-6 text-lg leading-relaxed text-muted-foreground">
+            {pricing.subheadline}
           </p>
+        </div>
 
-          {/* Pill toggle */}
-          <div className="relative mt-8 inline-flex items-center rounded-full border bg-muted/50 p-1 dark:bg-muted/20">
-            {/* Sliding indicator */}
-            <div
-              className={cn(
-                'absolute inset-y-1 w-[calc(50%-4px)] rounded-full bg-primary shadow-sm transition-transform duration-200 ease-out',
-                yearly ? 'translate-x-[calc(100%+4px)]' : 'translate-x-0.5'
-              )}
-            />
+        <div className="mt-12 flex justify-center">
+          <div className="inline-flex items-center rounded-full border border-border/50 bg-muted/50 p-1 shadow-sm">
             <button
               type="button"
               onClick={() => setYearly(false)}
               className={cn(
-                'relative z-10 rounded-full px-5 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2',
-                !yearly
-                  ? 'text-primary-foreground'
-                  : 'text-muted-foreground hover:text-foreground'
+                'rounded-full px-5 py-2 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2',
+                !yearly ? 'bg-primary text-primary-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground',
               )}
             >
-              Monthly
+              {pricing.toggleMonthly}
             </button>
             <button
               type="button"
               onClick={() => setYearly(true)}
               className={cn(
-                'relative z-10 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-primary focus-visible:ring-offset-2',
-                yearly
-                  ? 'text-primary-foreground'
-                  : 'text-muted-foreground hover:text-foreground'
+                'inline-flex items-center gap-2 rounded-full px-5 py-2 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2',
+                yearly ? 'bg-primary text-primary-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground',
               )}
             >
-              Yearly
-              {!yearly && <span className="text-xs font-medium text-primary">Save 20%</span>}
+              {pricing.toggleYearly}
+              {!yearly && (
+                <span className="rounded-full bg-primary/10 px-2 py-0.5 text-xs font-semibold text-primary">
+                  {pricing.yearlyDiscount}
+                </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 className="mt-16 grid gap-8 lg:grid-cols-3 lg:gap-6">
+          {pricing.tiers.map((tier) => (
             <div
               key={tier.name}
               className={cn(
-                'flex flex-col rounded-xl border p-8',
+                'relative rounded-2xl bg-card p-8 transition-all',
                 tier.highlighted
-                  ? 'relative z-10 border-2 border-primary bg-gradient-to-b from-primary/5 to-transparent shadow-2xl shadow-primary/10 ring-1 ring-primary/20 lg:scale-105'
-                  : 'border-border/50 bg-card shadow-sm'
+                  ? 'border-2 border-primary bg-gradient-to-b from-primary/5 to-transparent shadow-2xl shadow-primary/10 ring-1 ring-primary/20 lg:scale-105'
+                  : 'border border-border/50 shadow-sm hover:shadow-md',
               )}
             >
               {tier.highlighted && (
-                <div className="absolute -top-4 left-1/2 -translate-x-1/2 rounded-full bg-primary px-4 py-1 text-xs font-medium text-primary-foreground">
-                  Most Popular
+                <div className="absolute -top-4 left-1/2 -translate-x-1/2">
+                  <span className="rounded-full bg-primary px-4 py-1 text-xs font-semibold uppercase tracking-wider text-primary-foreground shadow-md">
+                    Most Popular
+                  </span>
                 </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>
+                  <h3 className="text-lg font-semibold text-foreground">{tier.name}</h3>
+                  <p className="mt-2 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}
+                    {tier.price}
                   </span>
-                  {tier.price.monthly !== 'Custom' && (
-                    <span className="text-sm text-muted-foreground">/mo</span>
+                  {tier.period && (
+                    <span className="text-sm font-medium text-muted-foreground">
+                      {tier.period}
+                    </span>
                   )}
                 </div>
 
                 <ul className="space-y-4">
                   {tier.features.map((feature) => (
-                    <li key={feature} className="flex items-start gap-2.5 text-sm">
+                    <li key={feature} className="flex items-start gap-3">
                       <span className="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-primary/10">
                         <Check className="h-3 w-3 text-primary" />
                       </span>
-                      <span className="text-muted-foreground">{feature}</span>
+                      <span className="text-sm text-foreground">{feature}</span>
                     </li>
                   ))}
                 </ul>
@@ -154,15 +107,13 @@ export function PricingSection() {
                     variant={tier.highlighted ? 'default' : 'outline'}
                     className={cn(
                       'h-12 w-full rounded-lg font-medium transition-transform hover:scale-[1.02] active:scale-[0.98] focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2',
-                      tier.highlighted && 'shadow-lg shadow-primary/25'
+                      tier.highlighted ? 'shadow-lg shadow-primary/25' : 'border-2',
                     )}
                   >
                     {tier.cta}
                   </Button>
-                  {tier.name === 'Free' && (
-                    <p className="mt-3 text-center text-xs text-muted-foreground">
-                      No credit card required
-                    </p>
+                  {tier.note && (
+                    <p className="mt-3 text-center text-xs text-muted-foreground">{tier.note}</p>
                   )}
                 </div>
               </div>

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>
   )
 }