@tangle-network/starter-foundry 0.1.0 → 0.2.0

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