@tangle-network/starter-foundry 0.1.0 → 0.2.0

package/registry/layers/capability/layout-landing/variants/minimal-clean/personalize.json

@@ -0,0 +1,53 @@
+{
+  "_meta": { "variant": "minimal-clean", "doc": "Minimal whitespace variant" },
+  "brand": { "name": "Linear", "tagline": "The system for product teams" },
+  "hero": {
+    "badge": "ESSAYS BY THE TEAM",
+    "headline": "Less, but better.",
+    "subheadline": "A minimal, opinionated framework that gets out of your way so you can focus on the work.",
+    "ctaPrimary": "Get Started",
+    "ctaSecondary": "Read the Manifesto"
+  },
+  "trust": {
+    "label": "Used by 10,000+ thoughtful teams",
+    "logoNames": ["Ramp", "Vercel", "Linear", "Notion", "Stripe", "Figma"]
+  },
+  "features": {
+    "eyebrow": "Principles",
+    "headline": "Built on clear principles",
+    "subheadline": "Each decision considered. Every detail intentional.",
+    "primary": [
+      { "icon": "Minimize", "title": "Restraint", "description": "We say no to features that don't earn their place. Less surface, more depth." },
+      { "icon": "Focus", "title": "Focus", "description": "One thing at a time. The interface fades away so the work stays in front." },
+      { "icon": "Compass", "title": "Direction", "description": "Strong opinions about what good looks like, so you don't have to decide everything." }
+    ],
+    "secondary": [
+      { "icon": "Type", "title": "Typography", "description": "Set with care, leading and tracking refined for reading." },
+      { "icon": "Square", "title": "Geometry", "description": "Spacing follows a strict 4px grid throughout." },
+      { "icon": "Eye", "title": "Contrast", "description": "AAA-compliant color pairs across light and dark." }
+    ]
+  },
+  "pricing": {
+    "eyebrow": "Pricing",
+    "headline": "Honest pricing",
+    "subheadline": "No tiers we don't believe in. No tricks.",
+    "toggleMonthly": "Monthly",
+    "toggleYearly": "Yearly",
+    "yearlyDiscount": "Save 20%",
+    "tiers": [
+      { "name": "Free", "price": "$0", "period": "/mo", "description": "For thinking through ideas", "features": ["Unlimited drafts", "Markdown export", "Local-first"], "cta": "Get started", "highlighted": false, "note": "No account required" },
+      { "name": "Pro", "price": "$8", "period": "/mo", "description": "For people who care", "features": ["Sync across devices", "Themes and fonts", "Custom shortcuts", "Vim mode", "Priority support"], "cta": "Try Pro free", "highlighted": true },
+      { "name": "Team", "price": "$18", "period": "/seat/mo", "description": "For small teams", "features": ["Everything in Pro", "Shared workspaces", "Role-based access", "Audit log", "SAML SSO"], "cta": "Start team trial", "highlighted": false }
+    ]
+  },
+  "footer": {
+    "tagline": "Crafted with care in California.",
+    "sections": {
+      "Product": [{ "label": "Features", "href": "#features" }, { "label": "Pricing", "href": "#pricing" }, { "label": "Download", "href": "/download" }, { "label": "Changelog", "href": "/changelog" }],
+      "Company": [{ "label": "Manifesto", "href": "/manifesto" }, { "label": "Essays", "href": "/essays" }, { "label": "About", "href": "/about" }, { "label": "Contact", "href": "/contact" }],
+      "Resources": [{ "label": "Documentation", "href": "/docs" }, { "label": "Shortcuts", "href": "/shortcuts" }, { "label": "Themes", "href": "/themes" }, { "label": "Community", "href": "/community" }],
+      "Legal": [{ "label": "Privacy", "href": "/privacy" }, { "label": "Terms", "href": "/terms" }]
+    },
+    "copyright": "© 2026 Linear."
+  }
+}

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

@@ -4,134 +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-light 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 font-light 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>
 
-          <div className="mt-8 inline-flex items-center gap-3 text-sm">
+        <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(
-                'pb-1 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2',
-                !yearly ? 'border-b-2 border-foreground text-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>
-            <span className="text-muted-foreground/40">/</span>
             <button
               type="button"
               onClick={() => setYearly(true)}
               className={cn(
-                'inline-flex items-center gap-2 pb-1 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2',
-                yearly ? 'border-b-2 border-foreground text-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 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-lg p-8',
+                'relative rounded-2xl bg-card p-8 transition-all',
                 tier.highlighted
-                  ? 'relative bg-muted/40 ring-1 ring-border dark:bg-muted/15'
-                  : 'bg-transparent'
+                  ? '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-foreground px-4 py-1 text-xs font-medium text-background">
-                  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-sm font-medium text-foreground">{tier.name}</h3>
-                  <p className="mt-1 text-sm font-light 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-4xl font-light tracking-tight text-foreground">
-                    {yearly ? tier.price.yearly : tier.price.monthly}
+                  <span className="text-5xl font-bold tracking-tight text-foreground">
+                    {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>
 
-                <div className="border-t border-border/50" />
-
-                <ul className="flex-1 space-y-4">
+                <ul className="space-y-4">
                   {tier.features.map((feature) => (
-                    <li key={feature} className="flex items-start gap-2.5 text-sm">
-                      <Check className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" />
-                      <span className="font-light text-muted-foreground">{feature}</span>
+                    <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-sm text-foreground">{feature}</span>
                     </li>
                   ))}
                 </ul>
@@ -140,16 +106,14 @@ export function PricingSection() {
                   <Button
                     variant={tier.highlighted ? 'default' : 'outline'}
                     className={cn(
-                      'h-12 w-full rounded-lg font-medium transition-all focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2',
-                      tier.highlighted && 'shadow-lg shadow-primary/25'
+                      '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' : '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/framework/nextjs-app-router/files/layout.tsx

@@ -1,4 +1,5 @@
 import './globals.css'
+import './personalize.css'
 
 export const metadata = {
   title: '{{headline}}',

package/registry/layers/framework/nextjs-app-router/files/personalize.css

@@ -0,0 +1 @@
+/* Personalization layer — overridden by industry layer or blueprint-agent */

package/registry/layers/framework/nextjs-app-router/manifest.json

@@ -31,6 +31,10 @@
       "source": "files/globals.css",
       "target": "app/globals.css"
     },
+    {
+      "source": "files/personalize.css",
+      "target": "app/personalize.css"
+    },
     {
       "source": "files/preview-index.html",
       "target": "preview/index.html"

package/registry/layers/framework/react-vite-ts/files/main.ts

@@ -1,4 +1,5 @@
 import './styles.css'
+import './personalize.css'
 import { createElement } from 'react'
 import { createRoot } from 'react-dom/client'
 import App from './App'

package/registry/layers/framework/react-vite-ts/files/personalize.css

@@ -0,0 +1 @@
+/* Personalization layer — overridden by industry layer or blueprint-agent */

package/registry/layers/framework/react-vite-ts/manifest.json

@@ -15,6 +15,10 @@
       "source": "files/styles.css",
       "target": "src/styles.css"
     },
+    {
+      "source": "files/personalize.css",
+      "target": "src/personalize.css"
+    },
     {
       "source": "files/preview-client.js",
       "target": "preview-client.js"

package/registry/layers/industry/creative/files/personalize.css

@@ -0,0 +1,11 @@
+/* Industry: creative — overrides Tailwind v4 @theme defaults at runtime */
+:root {
+  --color-primary: hsl(280 65% 50%);
+  --color-accent: hsl(320 75% 55%);
+  --color-ring: hsl(280 65% 50%);
+}
+.dark {
+  --color-primary: hsl(280 65% 50%);
+  --color-accent: hsl(320 75% 55%);
+  --color-ring: hsl(280 65% 50%);
+}

package/registry/layers/industry/creative/manifest.json

@@ -0,0 +1,39 @@
+{
+  "id": "creative",
+  "description": "Photography, design, art, portfolio, creative work",
+  "group": "industry",
+  "appliesTo": [
+    "nextjs-ts",
+    "react-vite-ts",
+    "fullstack-ts",
+    "remix-ts",
+    "sveltekit-ts",
+    "vue-ts",
+    "frontend-static"
+  ],
+  "keywords": [
+    "portfolio",
+    "photographer",
+    "photography",
+    "designer",
+    "artist",
+    "illustrator",
+    "creative",
+    "gallery",
+    "studio",
+    "agency"
+  ],
+  "files": [
+    {
+      "source": "files/personalize.css",
+      "target": "src/personalize.css"
+    },
+    {
+      "source": "files/personalize.css",
+      "target": "app/personalize.css"
+    }
+  ],
+  "defaults": {
+    "industryTone": "distinctive, refined, expressive"
+  }
+}

package/registry/layers/industry/crypto/files/personalize.css

@@ -0,0 +1,11 @@
+/* Industry: crypto — overrides Tailwind v4 @theme defaults at runtime */
+:root {
+  --color-primary: hsl(160 84% 39%);
+  --color-accent: hsl(142 76% 36%);
+  --color-ring: hsl(160 84% 39%);
+}
+.dark {
+  --color-primary: hsl(160 84% 39%);
+  --color-accent: hsl(142 76% 36%);
+  --color-ring: hsl(160 84% 39%);
+}

package/registry/layers/industry/crypto/manifest.json

@@ -0,0 +1,41 @@
+{
+  "id": "crypto",
+  "description": "Crypto, web3, defi, blockchain, NFT applications",
+  "group": "industry",
+  "appliesTo": [
+    "nextjs-ts",
+    "react-vite-ts",
+    "fullstack-ts",
+    "remix-ts",
+    "sveltekit-ts",
+    "vue-ts",
+    "frontend-static"
+  ],
+  "keywords": [
+    "crypto",
+    "web3",
+    "defi",
+    "blockchain",
+    "nft",
+    "token",
+    "wallet",
+    "staking",
+    "dao",
+    "evm",
+    "solana",
+    "ethereum"
+  ],
+  "files": [
+    {
+      "source": "files/personalize.css",
+      "target": "src/personalize.css"
+    },
+    {
+      "source": "files/personalize.css",
+      "target": "app/personalize.css"
+    }
+  ],
+  "defaults": {
+    "industryTone": "bold, technical, future-forward"
+  }
+}

package/registry/layers/industry/ecommerce/files/personalize.css

@@ -0,0 +1,11 @@
+/* Industry: ecommerce — overrides Tailwind v4 @theme defaults at runtime */
+:root {
+  --color-primary: hsl(340 82% 52%);
+  --color-accent: hsl(24 95% 53%);
+  --color-ring: hsl(340 82% 52%);
+}
+.dark {
+  --color-primary: hsl(340 82% 52%);
+  --color-accent: hsl(24 95% 53%);
+  --color-ring: hsl(340 82% 52%);
+}

package/registry/layers/industry/ecommerce/manifest.json

@@ -0,0 +1,39 @@
+{
+  "id": "ecommerce",
+  "description": "Online stores, marketplaces, shopping, retail",
+  "group": "industry",
+  "appliesTo": [
+    "nextjs-ts",
+    "react-vite-ts",
+    "fullstack-ts",
+    "remix-ts",
+    "sveltekit-ts",
+    "vue-ts",
+    "frontend-static"
+  ],
+  "keywords": [
+    "ecommerce",
+    "shop",
+    "store",
+    "retail",
+    "shopify",
+    "woocommerce",
+    "product catalog",
+    "checkout",
+    "cart",
+    "inventory"
+  ],
+  "files": [
+    {
+      "source": "files/personalize.css",
+      "target": "src/personalize.css"
+    },
+    {
+      "source": "files/personalize.css",
+      "target": "app/personalize.css"
+    }
+  ],
+  "defaults": {
+    "industryTone": "inviting, trustworthy, conversion-focused"
+  }
+}

package/registry/layers/industry/education/files/personalize.css

@@ -0,0 +1,11 @@
+/* Industry: education — overrides Tailwind v4 @theme defaults at runtime */
+:root {
+  --color-primary: hsl(45 93% 47%);
+  --color-accent: hsl(220 90% 56%);
+  --color-ring: hsl(45 93% 47%);
+}
+.dark {
+  --color-primary: hsl(45 93% 47%);
+  --color-accent: hsl(220 90% 56%);
+  --color-ring: hsl(45 93% 47%);
+}

package/registry/layers/industry/education/manifest.json

@@ -0,0 +1,39 @@
+{
+  "id": "education",
+  "description": "Learning, courses, tutoring, educational platforms",
+  "group": "industry",
+  "appliesTo": [
+    "nextjs-ts",
+    "react-vite-ts",
+    "fullstack-ts",
+    "remix-ts",
+    "sveltekit-ts",
+    "vue-ts",
+    "frontend-static"
+  ],
+  "keywords": [
+    "education",
+    "learning",
+    "course",
+    "tutoring",
+    "student",
+    "teacher",
+    "school",
+    "university",
+    "lesson",
+    "curriculum"
+  ],
+  "files": [
+    {
+      "source": "files/personalize.css",
+      "target": "src/personalize.css"
+    },
+    {
+      "source": "files/personalize.css",
+      "target": "app/personalize.css"
+    }
+  ],
+  "defaults": {
+    "industryTone": "encouraging, clear, accessible"
+  }
+}

package/registry/layers/industry/finance/files/personalize.css

@@ -0,0 +1,11 @@
+/* Industry: finance — overrides Tailwind v4 @theme defaults at runtime */
+:root {
+  --color-primary: hsl(142 71% 45%);
+  --color-accent: hsl(220 90% 56%);
+  --color-ring: hsl(142 71% 45%);
+}
+.dark {
+  --color-primary: hsl(142 71% 45%);
+  --color-accent: hsl(220 90% 56%);
+  --color-ring: hsl(142 71% 45%);
+}

package/registry/layers/industry/finance/manifest.json

@@ -0,0 +1,39 @@
+{
+  "id": "finance",
+  "description": "Personal finance, banking, budgeting, investing",
+  "group": "industry",
+  "appliesTo": [
+    "nextjs-ts",
+    "react-vite-ts",
+    "fullstack-ts",
+    "remix-ts",
+    "sveltekit-ts",
+    "vue-ts",
+    "frontend-static"
+  ],
+  "keywords": [
+    "finance",
+    "banking",
+    "budget",
+    "investing",
+    "stocks",
+    "savings",
+    "wealth",
+    "fintech",
+    "expense",
+    "accounting"
+  ],
+  "files": [
+    {
+      "source": "files/personalize.css",
+      "target": "src/personalize.css"
+    },
+    {
+      "source": "files/personalize.css",
+      "target": "app/personalize.css"
+    }
+  ],
+  "defaults": {
+    "industryTone": "trustworthy, precise, professional"
+  }
+}

package/registry/layers/industry/fitness/files/personalize.css

@@ -0,0 +1,11 @@
+/* Industry: fitness — overrides Tailwind v4 @theme defaults at runtime */
+:root {
+  --color-primary: hsl(14 90% 53%);
+  --color-accent: hsl(45 96% 56%);
+  --color-ring: hsl(14 90% 53%);
+}
+.dark {
+  --color-primary: hsl(14 90% 53%);
+  --color-accent: hsl(45 96% 56%);
+  --color-ring: hsl(14 90% 53%);
+}

package/registry/layers/industry/fitness/manifest.json

@@ -0,0 +1,43 @@
+{
+  "id": "fitness",
+  "description": "Fitness, training, gym, workout, and athletic apps",
+  "group": "industry",
+  "appliesTo": [
+    "nextjs-ts",
+    "react-vite-ts",
+    "fullstack-ts",
+    "remix-ts",
+    "sveltekit-ts",
+    "vue-ts",
+    "frontend-static"
+  ],
+  "keywords": [
+    "fitness",
+    "gym",
+    "workout",
+    "training",
+    "exercise",
+    "muscle",
+    "athletic",
+    "running",
+    "marathon",
+    "crossfit",
+    "yoga",
+    "pilates",
+    "cardio",
+    "strength"
+  ],
+  "files": [
+    {
+      "source": "files/personalize.css",
+      "target": "src/personalize.css"
+    },
+    {
+      "source": "files/personalize.css",
+      "target": "app/personalize.css"
+    }
+  ],
+  "defaults": {
+    "industryTone": "energetic, direct, motivational"
+  }
+}

package/registry/layers/industry/gaming/files/personalize.css

@@ -0,0 +1,11 @@
+/* Industry: gaming — overrides Tailwind v4 @theme defaults at runtime */
+:root {
+  --color-primary: hsl(262 83% 58%);
+  --color-accent: hsl(320 75% 55%);
+  --color-ring: hsl(262 83% 58%);
+}
+.dark {
+  --color-primary: hsl(262 83% 58%);
+  --color-accent: hsl(320 75% 55%);
+  --color-ring: hsl(262 83% 58%);
+}