@tangle-network/starter-foundry 0.1.0 → 0.2.0

package/registry/layers/capability/layout-landing/files/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/manifest.json

@@ -35,6 +35,10 @@
     {
       "source": "files/media-manifest.json",
       "target": "media-manifest.json"
+    },
+    {
+      "source": "files/personalize.json",
+      "target": "src/personalize.json"
     }
   ],
   "variants": [

package/registry/layers/capability/layout-landing/variants/dark-product/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="bg-zinc-950 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-zinc-50 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-zinc-400">
-            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-8 sm:grid-cols-2 lg:grid-cols-3">
-          {primaryFeatures.map((feature) => (
-            <div
-              key={feature.title}
-              className="rounded-xl border border-zinc-800/50 bg-zinc-900/50 p-8 transition-all duration-200 hover:border-emerald-500/30 hover:shadow-[0_0_24px_-6px_rgba(16,185,129,0.15)]"
-            >
-              <div className="mb-4 flex h-11 w-11 items-center justify-center rounded-lg bg-emerald-500/10 text-emerald-400">
-                <feature.icon className="h-5 w-5" />
+        <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>
-              <h3 className="text-lg font-semibold text-zinc-50">
-                {feature.title}
-              </h3>
-              <p className="mt-2 text-sm leading-relaxed text-zinc-400">
-                {feature.description}
-              </p>
-            </div>
-          ))}
+            )
+          })}
         </div>
 
-        <div className="mx-auto mt-12 max-w-3xl border-t border-zinc-800 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-emerald-500/10 text-emerald-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-zinc-400">
-                  {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/dark-product/hero-section.tsx

@@ -1,78 +1,106 @@
 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-zinc-950">
+    <section className="relative overflow-hidden bg-background">
       <div
         aria-hidden="true"
-        className="absolute inset-0 bg-[linear-gradient(to_right,rgba(255,255,255,0.03)_1px,transparent_1px),linear-gradient(to_bottom,rgba(255,255,255,0.03)_1px,transparent_1px)] bg-[size:4rem_4rem]"
+        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 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">
-          <div className="rounded-full border border-zinc-700 bg-zinc-800/50 px-4 py-1.5 text-xs font-medium tracking-wider text-zinc-400">
-            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 text-4xl font-bold tracking-tight text-zinc-50 sm:text-5xl lg:text-6xl">
-            {'{{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-lg leading-relaxed text-zinc-400">
-            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-emerald-500 px-8 font-medium text-zinc-950 shadow-lg shadow-emerald-500/25 transition-all hover:bg-emerald-400 focus-visible:ring-2 focus-visible:ring-emerald-500 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950"
-            >
-              Get Started
-              <ArrowRight className="h-4 w-4" />
-            </Button>
-            <Button
-              size="lg"
-              variant="outline"
-              className="h-12 gap-2 rounded-lg border-2 border-zinc-700 px-8 font-medium text-zinc-300 transition-all hover:bg-zinc-800 hover:text-zinc-50 focus-visible:ring-2 focus-visible:ring-emerald-500 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950"
-            >
-              <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-14 flex items-center justify-center gap-8">
-            {Array.from({ length: 5 }).map((_, i) => (
-              <div
-                key={i}
-                className="h-6 w-16 rounded bg-zinc-700/40"
-              />
-            ))}
+            <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-8 flex items-center gap-3">
-            <div className="flex -space-x-2">
-              {['bg-emerald-400', 'bg-zinc-400', 'bg-emerald-300', 'bg-zinc-300', 'bg-emerald-500'].map((color, i) => (
-                <div
-                  key={i}
-                  className={`h-8 w-8 rounded-full border-2 border-zinc-950 ${color}`}
+          <div className="relative mx-auto w-full max-w-lg lg:mx-0">
+            <div
+              aria-hidden="true"
+              className="pointer-events-none absolute -inset-4 rounded-2xl bg-primary/10 blur-2xl"
+            />
+            <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>
-            <p className="text-sm font-medium text-zinc-500">
-              Trusted by <span className="text-zinc-300">1,000+</span> teams
-            </p>
           </div>
         </div>
       </div>
-
-      <div
-        aria-hidden="true"
-        className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
-      >
-        <div className="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-emerald-500 to-emerald-500/30 opacity-10 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]" />
-      </div>
     </section>
   )
 }