@utopia-studio-design/design-system-cli 0.6.1 → 0.7.0

package/data/templates/quantum-verification-story/src/components/ui/separator.tsx

@@ -0,0 +1,25 @@
+"use client"
+
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+import { cn } from "@/lib/utils"
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (
+  <SeparatorPrimitive.Root
+    ref={ref}
+    decorative={decorative}
+    orientation={orientation}
+    className={cn(
+      "shrink-0 bg-rule",
+      orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
+      className
+    )}
+    {...props}
+  />
+))
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }

package/data/templates/quantum-verification-story/src/components/ui/textarea.tsx

@@ -0,0 +1,19 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => (
+    <textarea
+      className={cn(
+        "flex min-h-[100px] w-full bg-[var(--surface)] border border-[var(--border)] px-4 py-3 text-sm font-sans text-[var(--foreground)] placeholder:text-[var(--muted-foreground)] focus-visible:outline-none focus-visible:border-[var(--primary)] transition-colors duration-200 resize-vertical disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  )
+)
+Textarea.displayName = "Textarea"
+export { Textarea }

package/data/templates/quantum-verification-story/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/data/templates/quantum-verification-story/tailwind.config.js

@@ -0,0 +1,95 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: ["class"],
+  content: [
+    './pages/**/*.{js,ts,jsx,tsx}',
+    './components/**/*.{js,ts,jsx,tsx}',
+    './app/**/*.{js,ts,jsx,tsx}',
+    './src/**/*.{js,ts,jsx,tsx}',
+  ],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans:    ['var(--font-sans)'],
+        display: ['var(--font-sans)'],
+        serif:   ['var(--font-sans)'],
+        mono:    ['var(--font-mono)'],
+      },
+      colors: {
+        border:     'var(--border)',
+        input:      'var(--input)',
+        ring:       'var(--ring)',
+        background: 'var(--background)',
+        foreground: 'var(--foreground)',
+        primary: {
+          DEFAULT:    'var(--primary)',
+          foreground: 'var(--primary-foreground)',
+        },
+        secondary: {
+          DEFAULT:    'var(--secondary)',
+          foreground: 'var(--secondary-foreground)',
+        },
+        muted: {
+          DEFAULT:    'var(--muted)',
+          foreground: 'var(--muted-foreground)',
+        },
+        accent: {
+          DEFAULT:    'var(--accent)',
+          foreground: 'var(--accent-foreground)',
+        },
+        destructive: {
+          DEFAULT:    'var(--destructive)',
+          foreground: 'var(--destructive-foreground)',
+        },
+        card: {
+          DEFAULT:    'var(--surface)',
+          foreground: 'var(--foreground)',
+        },
+        popover: {
+          DEFAULT:    'var(--surface)',
+          foreground: 'var(--foreground)',
+        },
+        gold:  { DEFAULT: '#b8933a', light: '#d0a055', pale: '#f7edda' },
+        deep:  { DEFAULT: '#1a3a2a', mid: '#1e573b', light: '#daeee4' },
+        ink:   '#1c1a17',
+        rule:  '#e5e3df',
+      },
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+      },
+      maxWidth: { container: '1200px' },
+      keyframes: {
+        ticker: {
+          from: { transform: 'translateX(0)' },
+          to:   { transform: 'translateX(-50%)' },
+        },
+        'fade-up': {
+          from: { opacity: '0', transform: 'translateY(16px)' },
+          to:   { opacity: '1', transform: 'translateY(0)' },
+        },
+        'pulse-dot': {
+          '0%, 100%': { opacity: '0.6', transform: 'scale(0.9)' },
+          '50%':       { opacity: '1',   transform: 'scale(1.1)' },
+        },
+        'accordion-down': {
+          from: { height: '0' },
+          to:   { height: 'var(--radix-accordion-content-height)' },
+        },
+        'accordion-up': {
+          from: { height: 'var(--radix-accordion-content-height)' },
+          to:   { height: '0' },
+        },
+      },
+      animation: {
+        ticker:           'ticker 35s linear infinite',
+        'fade-up':        'fade-up 0.5s ease-out',
+        'pulse-dot':      'pulse-dot 1.8s infinite',
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up':   'accordion-up 0.2s ease-out',
+      },
+    },
+  },
+  plugins: [require('tailwindcss-animate')],
+}

package/data/templates/quantum-verification-story/template.manifest.json

@@ -0,0 +1,23 @@
+{
+  "id": "template-quantum-verification-story",
+  "name": "Quantum Verification Story",
+  "category": "website-page",
+  "status": "available",
+  "purpose": "A code-level Next.js and shadcn presentation-style website rebuilt from the vy3 project with neutral branding and Ceramic theme tokens.",
+  "sourceFormat": "nextjs-shadcn",
+  "themeable": true,
+  "sourcePath": "templates/quantum-verification-story/src/app/page.tsx",
+  "entryPath": "templates/quantum-verification-story/src/app/page.tsx",
+  "pages": [
+    { "id": "home", "path": "src/app/page.tsx", "purpose": "Full-height verification narrative" },
+    { "id": "products", "path": "src/app/products/page.tsx", "purpose": "Product detail" },
+    { "id": "assessment", "path": "src/app/assessment/page.tsx", "purpose": "Readiness assessment" },
+    { "id": "deployment", "path": "src/app/deployment/page.tsx", "purpose": "Continuous verification" }
+  ],
+  "features": { "multiPage": true, "responsive": true, "shadcn": true, "presentationScroll": true, "ceramicThemeTokens": true },
+  "neverInvent": [
+    "Replace the Your Company placeholder with an approved brand name",
+    "Review all security, regulatory, and performance claims before release",
+    "Configure external console, form, and analytics integrations before production use"
+  ]
+}

package/data/templates/quantum-verification-story/tsconfig.json

@@ -0,0 +1,42 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

package/data/templates/saas-solution-homepage/main.tsx

@@ -48,13 +48,24 @@ import {
 } from '@utopia-studio-design/design-system'
 import '@utopia-studio-design/design-system/core.css'
 import '@utopia-studio-design/design-system/themes/utopia-default.css'
+import '@utopia-studio-design/design-system/themes/dextrum.css'
+import '@utopia-studio-design/design-system/themes/barrier-intelligence.css'
+import '@utopia-studio-design/design-system/themes/renacore.css'
+import '@utopia-studio-design/design-system/themes/vyapti.css'
+import '@utopia-studio-design/design-system/themes/utopia-cloudblur.css'
 import './styles.css'
 
-const activeTheme = 'utopia-default'
+const supportedThemes = ['utopia-default', 'dextrum', 'barrier-intelligence', 'renacore', 'vyapti', 'utopia-cloudblur'] as const
+type TemplateTheme = (typeof supportedThemes)[number]
+const defaultTheme: TemplateTheme = 'utopia-default'
+const requestedTheme = new URLSearchParams(window.location.search).get('theme') as TemplateTheme | null
+const activeTheme: TemplateTheme = requestedTheme && supportedThemes.includes(requestedTheme) ? requestedTheme : defaultTheme
+document.documentElement.dataset.theme = activeTheme
+document.documentElement.dataset.brand = activeTheme
 
 type Locale = 'en' | 'ar'
 type PreviewMode = 'overview' | 'automations' | 'insights'
-type PageKey = 'home' | 'product' | 'agents' | 'integrations' | 'integration-detail' | 'customers' | 'customer-story' | 'pricing' | 'changelog' | 'contact-sales'
+type PageKey = 'home' | 'product' | 'agents' | 'integrations' | 'integration-detail' | 'customers' | 'customer-story' | 'pricing' | 'team' | 'changelog' | 'contact-sales' | 'terms' | 'privacy'
 
 type DemoData = {
   product: string
@@ -78,14 +89,22 @@ function getPageKey(): PageKey {
   if (route === 'customers') return 'customers'
   if (route === 'customers/aster-labs') return 'customer-story'
   if (route === 'pricing') return 'pricing'
+  if (route === 'team') return 'team'
   if (route === 'changelog') return 'changelog'
   if (route === 'contact-sales') return 'contact-sales'
+  if (route === 'terms') return 'terms'
+  if (route === 'privacy') return 'privacy'
   return 'home'
 }
 
 function pageHref(page: string, seed: number) {
   const suffix = page ? `/${page}/` : '/index.html'
-  return `${templateBase}${suffix}?seed=${seed}`
+  return `${templateBase}${suffix}?seed=${seed}&theme=${activeTheme}`
+}
+
+function navigateTo(href: string) {
+  window.history.pushState(null, '', href)
+  window.dispatchEvent(new PopStateEvent('popstate'))
 }
 
 const copy = {
@@ -339,7 +358,7 @@ function PageCta({ locale, seed }: { locale: Locale; seed: number }) {
   return (
     <section className="section page-cta">
       <div><p className="eyebrow">{locale === 'ar' ? 'الخطوة التالية' : 'Next step'}</p><h2>{locale === 'ar' ? 'حوّل أول سير عمل إلى نظام مشترك.' : 'Turn your first workflow into a shared system.'}</h2></div>
-      <Button endContent={<ArrowIcon />} onClick={() => { window.location.href = pageHref('contact-sales', seed) }} size="lg">{locale === 'ar' ? 'تحدث مع فريقنا' : 'Talk to our team'}</Button>
+      <Button endContent={<ArrowIcon />} onClick={() => { navigateTo(pageHref('contact-sales', seed)) }} size="lg">{locale === 'ar' ? 'تحدث مع فريقنا' : 'Talk to our team'}</Button>
     </section>
   )
 }
@@ -350,7 +369,7 @@ function ProductPage({ demo, locale, previewMode, seed, setPreviewMode }: { demo
     : [['Intake', 'Turn email, forms, and events into structured work.'], ['Planning', 'Connect goals to projects and daily decisions.'], ['Execution', 'Keep ownership, approvals, and work state legible.'], ['Insights', 'Read bottlenecks and outcomes from one operating model.']]
   return <>
     <PageHero body={locale === 'ar' ? 'مساحة تشغيل واحدة تربط التخطيط والتنفيذ والأتمتة من دون فقدان السياق.' : 'One operating workspace connects planning, execution, and automation without losing context.'} eyebrow={locale === 'ar' ? 'المنتج' : 'Product'} title={locale === 'ar' ? 'خطّط للعمل وشغّله من النظام نفسه.' : 'Plan the work. Run it from the same system.'}>
-      <Button endContent={<ArrowIcon />} onClick={() => { window.location.href = pageHref('contact-sales', seed) }} size="lg">{locale === 'ar' ? 'اطلب عرضاً' : 'Request a demo'}</Button>
+      <Button endContent={<ArrowIcon />} onClick={() => { navigateTo(pageHref('contact-sales', seed)) }} size="lg">{locale === 'ar' ? 'اطلب عرضاً' : 'Request a demo'}</Button>
       <Button onClick={() => document.getElementById('interface')?.scrollIntoView({ behavior: 'smooth' })} size="lg" variant="outline">{locale === 'ar' ? 'استكشف الواجهة' : 'Explore the interface'}</Button>
     </PageHero>
     <section className="section" id="interface"><SectionHeading body={locale === 'ar' ? 'تتغير الواجهات مع المهمة، لكنها تبقى متصلة بالبيانات نفسها.' : 'Views change with the task while staying connected to the same underlying data.'} eyebrow={locale === 'ar' ? 'نظام عمل حي' : 'A living work system'} title={locale === 'ar' ? 'كل فريق يرى ما يحتاجه، من دون إنشاء مصدر حقيقة جديد.' : 'Every team gets the view it needs without creating a new source of truth.'} /><ProductPreview locale={locale} mode={previewMode} product={demo.product} setMode={setPreviewMode} /></section>
@@ -365,7 +384,7 @@ function AgentsPage({ demo, locale, seed }: { demo: DemoData; locale: Locale; se
     : [['Request triage', 'Read the request, set priority, and identify an owner before it reaches the team queue.'], ['Decision preparation', 'Collect context, options, and risk before the approval moment.'], ['Commitment follow-up', 'Watch deadlines and dependencies, escalating only when intervention is needed.']]
   return <>
     <PageHero body={locale === 'ar' ? 'وكلاء يعملون داخل حدود واضحة، ويتركون القرارات الحساسة للأشخاص المناسبين.' : 'Agents work inside explicit boundaries and leave consequential decisions to the right people.'} eyebrow={locale === 'ar' ? 'الوكلاء والأتمتة' : 'Agents & automation'} title={locale === 'ar' ? 'أتمت العمل المتكرر، لا المساءلة.' : 'Automate the repeatable work, not accountability.'}>
-      <Button endContent={<ArrowIcon />} onClick={() => { window.location.href = pageHref('contact-sales', seed) }} size="lg">{locale === 'ar' ? 'صمّم أول وكيل' : 'Design your first agent'}</Button>
+      <Button endContent={<ArrowIcon />} onClick={() => { navigateTo(pageHref('contact-sales', seed)) }} size="lg">{locale === 'ar' ? 'صمّم أول وكيل' : 'Design your first agent'}</Button>
     </PageHero>
     <section className="section agents-detail-layout"><div><p className="eyebrow">{locale === 'ar' ? 'داخل سير العمل' : 'Inside the workflow'}</p><h2>{locale === 'ar' ? 'كل إجراء قابل للفهم والمراجعة والإيقاف.' : 'Every action can be understood, reviewed, and stopped.'}</h2><p>{locale === 'ar' ? 'يشاهد الفريق الإشارة والقاعدة والنتيجة في المكان نفسه.' : 'The team sees the signal, rule, and outcome in one place.'}</p></div><div className="agent-console"><div className="console-head"><span><Bot aria-hidden="true" />{locale === 'ar' ? 'وكيل الفرز' : 'Triage agent'}</span><Badge variant="success">{locale === 'ar' ? 'نشط' : 'Active'}</Badge></div><div className="agent-flow"><div><span>01</span><p>{locale === 'ar' ? 'تم اكتشاف إشارة جديدة' : 'New signal detected'}</p><small>09:42</small></div><i /><div><span>02</span><p>{locale === 'ar' ? 'تم تجهيز السياق والاقتراح' : 'Context and recommendation prepared'}</p><small>09:43</small></div><i /><div className="requires-review"><span>03</span><p>{locale === 'ar' ? 'مطلوب اعتماد بشري' : 'Human approval required'}</p><Button size="sm">{locale === 'ar' ? 'مراجعة' : 'Review'}</Button></div></div><div className="console-note"><ShieldCheck aria-hidden="true" /><span>{locale === 'ar' ? `جميع الإجراءات مسجلة في ${demo.product}.` : `Every action is recorded in ${demo.product}.`}</span></div></div></section>
     <section className="section"><SectionHeading body={locale === 'ar' ? 'نقاط بداية عملية يمكن مراجعتها قبل التوسع.' : 'Practical starting points that can be reviewed before they scale.'} eyebrow={locale === 'ar' ? 'أنماط الوكلاء' : 'Agent patterns'} title={locale === 'ar' ? 'ابدأ من عمل يعرفه فريقك بالفعل.' : 'Begin with work your team already understands.'} /><div className="security-grid">{useCases.map(([title, body]) => <Card accent="hover" key={title}><CardHeader><div className="security-icon"><Sparkles aria-hidden="true" /></div><CardTitle>{title}</CardTitle><CardDescription>{body}</CardDescription></CardHeader></Card>)}</div></section>
@@ -416,7 +435,7 @@ function PricingPage({ demo, locale, seed }: { demo: DemoData; locale: Locale; s
     : [['Starter', `$${demo.price}`, 'For a team launching its first workflow.', ['5 core members', 'Native integrations', 'Activity history']], ['Scale', `$${demo.price + 30}`, 'For teams connecting multiple operations.', ['Unlimited members', 'Agents and automation', 'Advanced analytics']], ['Enterprise', 'Custom', 'For governance and regional scale.', ['Granular access', 'Data regions', 'Dedicated support']]]
   return <>
     <PageHero body={locale === 'ar' ? 'ابدأ صغيراً مع كل الأساسيات، ثم أضف الأتمتة والحوكمة عندما تحتاجها.' : 'Start small with the full foundation, then add automation and governance when needed.'} eyebrow={locale === 'ar' ? 'الأسعار' : 'Pricing'} title={locale === 'ar' ? 'سعر واضح لكل مرحلة من الاعتماد.' : 'Clear pricing for every stage of adoption.'} />
-    <section className="section pricing-page-grid">{plans.map(([name, price, description, features], index) => <Card accent={index === 1 ? 'always' : 'hover'} key={name as string}><CardHeader><Badge variant={index === 1 ? 'default' : 'outline'}>{index === 1 ? (locale === 'ar' ? 'الأكثر اختياراً' : 'Most selected') : (locale === 'ar' ? 'خطة' : 'Plan')}</Badge><CardTitle>{name as string}</CardTitle><CardDescription>{description as string}</CardDescription></CardHeader><CardContent><div className="plan-price"><strong>{price as string}</strong>{price !== 'Custom' && price !== 'مخصص' ? <span>{locale === 'ar' ? '/ شهرياً' : '/ month'}</span> : null}</div><ul>{(features as string[]).map((feature) => <li key={feature}><Check aria-hidden="true" />{feature}</li>)}</ul><Button onClick={() => { window.location.href = pageHref('contact-sales', seed) }} size="lg" variant={index === 1 ? 'default' : 'outline'}>{locale === 'ar' ? 'اختر الخطة' : 'Choose plan'}</Button></CardContent></Card>)}</section>
+    <section className="section pricing-page-grid">{plans.map(([name, price, description, features], index) => <Card accent={index === 1 ? 'always' : 'hover'} key={name as string}><CardHeader><Badge variant={index === 1 ? 'default' : 'outline'}>{index === 1 ? (locale === 'ar' ? 'الأكثر اختياراً' : 'Most selected') : (locale === 'ar' ? 'خطة' : 'Plan')}</Badge><CardTitle>{name as string}</CardTitle><CardDescription>{description as string}</CardDescription></CardHeader><CardContent><div className="plan-price"><strong>{price as string}</strong>{price !== 'Custom' && price !== 'مخصص' ? <span>{locale === 'ar' ? '/ شهرياً' : '/ month'}</span> : null}</div><ul>{(features as string[]).map((feature) => <li key={feature}><Check aria-hidden="true" />{feature}</li>)}</ul><Button onClick={() => { navigateTo(pageHref('contact-sales', seed)) }} size="lg" variant={index === 1 ? 'default' : 'outline'}>{locale === 'ar' ? 'اختر الخطة' : 'Choose plan'}</Button></CardContent></Card>)}</section>
     <section className="section comparison-section"><SectionHeading body={locale === 'ar' ? 'قارن الحدود التي تتغير مع حجم المؤسسة.' : 'Compare the controls that change with organizational scale.'} eyebrow={locale === 'ar' ? 'المقارنة' : 'Compare'} title={locale === 'ar' ? 'الأساس مشترك في كل الخطط.' : 'The foundation is shared across every plan.'} /><div className="comparison-table" role="table"><div role="row"><strong role="columnheader">{locale === 'ar' ? 'القدرة' : 'Capability'}</strong><strong role="columnheader">Starter</strong><strong role="columnheader">Scale</strong><strong role="columnheader">Enterprise</strong></div>{[['Workflows', '3', 'Unlimited', 'Unlimited'], ['Automation runs', '1k', '25k', 'Custom'], ['Audit history', '90 days', '1 year', 'Custom'], ['Data regions', '—', '2', '4']].map((row) => <div role="row" key={row[0]}>{row.map((cell) => <span role="cell" key={cell}>{cell}</span>)}</div>)}</div></section>
     <section className="section faq-section"><SectionHeading body={locale === 'ar' ? 'إجابات مختصرة قبل البدء.' : 'Short answers before you begin.'} eyebrow={locale === 'ar' ? 'الأسئلة الشائعة' : 'FAQ'} title={locale === 'ar' ? 'ما تحتاج إلى معرفته.' : 'What you need to know.'} /><div>{(locale === 'ar' ? [['هل يمكن تغيير الخطة؟', 'نعم، يمكن الترقية أو التخفيض مع بداية دورة الفوترة التالية.'], ['هل يشمل السعر المشاهدين؟', 'المشاهدون بلا حد في جميع الخطط.'], ['هل تتوفر تجربة؟', 'تتضمن كل مساحة عمل فترة تقييم موجهة.']] : [['Can I change plans?', 'Yes. Upgrade or downgrade at the next billing cycle.'], ['Are viewers included?', 'Unlimited viewers are included on every plan.'], ['Is there a trial?', 'Every workspace includes a guided evaluation period.']]).map(([question, answer]) => <details key={question}><summary>{question}</summary><p>{answer}</p></details>)}</div></section>
   </>
@@ -441,6 +460,31 @@ function ContactSalesPage({ demo, locale }: { demo: DemoData; locale: Locale })
   return <section className="contact-layout" id="top"><div><p className="eyebrow">{locale === 'ar' ? 'تواصل مع المبيعات' : 'Contact sales'}</p><h1>{locale === 'ar' ? 'صمّم مسار اعتماد يناسب فريقك.' : 'Design an adoption path for your team.'}</h1><p>{locale === 'ar' ? 'اطلب عرضاً، اختر الخطة المناسبة، واحصل على مساعدة في الإعداد.' : 'Request a demo, choose the right plan, and get help with setup.'}</p><ul>{(locale === 'ar' ? ['عرض مخصص لسير عملك', 'توصية بالخطة والحوكمة', 'دعم للإعداد والتكامل'] : ['A demo tailored to your workflow', 'Plan and governance recommendation', 'Setup and integration support']).map((item) => <li key={item}><Check aria-hidden="true" />{item}</li>)}</ul></div><form onSubmit={(event) => { event.preventDefault(); setSubmitted(true) }}><label>{locale === 'ar' ? 'الاسم' : 'Name'}<TextInput name="name" required /></label><label>{locale === 'ar' ? 'البريد للعمل' : 'Work email'}<TextInput name="email" required type="email" /></label><label>{locale === 'ar' ? 'الشركة' : 'Company'}<TextInput name="company" required /></label><label>{locale === 'ar' ? 'حجم الفريق' : 'Team size'}<Select name="team-size"><SelectTrigger aria-label={locale === 'ar' ? 'حجم الفريق' : 'Team size'}><SelectValue placeholder={locale === 'ar' ? 'اختر' : 'Select'} /></SelectTrigger><SelectContent><SelectItem value="1-20">1–20</SelectItem><SelectItem value="21-100">21–100</SelectItem><SelectItem value="101-500">101–500</SelectItem><SelectItem value="500-plus">500+</SelectItem></SelectContent></Select></label><label>{locale === 'ar' ? 'ما سير العمل الذي تريد تحسينه؟' : 'Which workflow do you want to improve?'}<Textarea name="workflow" rows={5} /></label><Button endContent={<ArrowIcon />} size="lg" type="submit">{locale === 'ar' ? 'إرسال الطلب' : 'Submit request'}</Button><small>{locale === 'ar' ? 'بيانات تجريبية فقط — لا يتم إرسالها إلى خدمة خارجية.' : 'Demo only — data is not sent to an external service.'}</small></form></section>
 }
 
+function LegalPage({ demo, kind, locale }: { demo: DemoData; kind: 'terms' | 'privacy'; locale: Locale }) {
+  const isPrivacy = kind === 'privacy'
+  const sections = isPrivacy
+    ? (locale === 'ar' ? [['المعلومات التي نجمعها', 'قد نجمع معلومات الحساب وبيانات الاتصال وسجلات الاستخدام والمعلومات التي تختار إرسالها إلى الخدمة.'], ['كيف نستخدم المعلومات', 'نستخدم المعلومات لتقديم الخدمة وتأمينها وتحسينها والتواصل معك والامتثال للالتزامات القانونية.'], ['المشاركة والمعالجون', 'قد نشارك البيانات مع مزودي الخدمة المعتمدين عند الحاجة لتشغيل المنتج، ولا نبيع معلوماتك الشخصية.'], ['الاحتفاظ والأمان', 'نحتفظ بالمعلومات للمدة اللازمة للأغراض الموضحة ونطبق ضوابط تقنية وتنظيمية مناسبة.'], ['اختياراتك وحقوقك', 'يمكنك طلب الوصول أو التصحيح أو الحذف أو التصدير، وفقاً للقانون المعمول به.'], ['تواصل معنا', 'للأسئلة أو الطلبات المتعلقة بالخصوصية، استخدم قناة الاتصال المنشورة من قبل شركتك.']] : [['Information we collect', 'We may collect account details, contact information, usage logs, and information you choose to submit to the service.'], ['How we use information', 'We use information to provide, secure, and improve the service, communicate with you, and meet legal obligations.'], ['Sharing and processors', 'We may share data with approved service providers when needed to operate the product. We do not sell personal information.'], ['Retention and security', 'We retain information for as long as necessary for the stated purposes and apply appropriate technical and organizational safeguards.'], ['Your choices and rights', 'You may request access, correction, deletion, or export where provided by applicable law.'], ['Contact us', 'For privacy questions or requests, use the contact channel published by your organization.']])
+    : (locale === 'ar' ? [['استخدام الخدمة', 'يجوز لك استخدام الخدمة فقط بما يتوافق مع هذه الشروط والقوانين المعمول بها ووثائق الحساب.'], ['الحسابات والوصول', 'أنت مسؤول عن بيانات الاعتماد ونشاط الحساب والأشخاص الذين تسمح لهم بالوصول إلى مساحة العمل.'], ['الاستخدام المقبول', 'لا يجوز إساءة استخدام الخدمة أو محاولة تجاوز ضوابط الأمان أو التدخل في تشغيلها أو حقوق الآخرين.'], ['المحتوى والملكية', 'تحتفظ بملكية المحتوى الذي تقدمه، بينما يحتفظ المزود بحقوقه في الخدمة والبرمجيات والعلامات.'], ['التوفر والضمانات', 'يتم توفير الخدمة وفق الخطة والاتفاق المعمول بهما، وقد تتغير الميزات مع استمرار تطوير المنتج.'], ['المسؤولية والإنهاء', 'تخضع حدود المسؤولية وحقوق التعليق أو الإنهاء للاتفاق المعمول به والقانون الساري.']] : [['Using the service', 'You may use the service only in accordance with these terms, applicable laws, and your account documentation.'], ['Accounts and access', 'You are responsible for credentials, account activity, and the people you authorize to access your workspace.'], ['Acceptable use', 'You may not misuse the service, bypass security controls, interfere with its operation, or violate the rights of others.'], ['Content and ownership', 'You retain ownership of content you provide. The provider retains its rights in the service, software, and brand.'], ['Availability and warranties', 'The service is provided under the applicable plan and agreement, and features may change as the product develops.'], ['Liability and termination', 'Liability limits and rights to suspend or terminate access are governed by the applicable agreement and law.']])
+  return <article className="legal-page" id="top"><header><p className="eyebrow">{locale === 'ar' ? 'قانوني' : 'Legal'}</p><h1>{isPrivacy ? (locale === 'ar' ? 'سياسة الخصوصية' : 'Privacy Policy') : (locale === 'ar' ? 'شروط الاستخدام' : 'Terms of Use')}</h1><p>{locale === 'ar' ? `مسودة نموذجية لـ ${demo.product}. يجب مراجعتها واعتمادها قانونياً قبل النشر.` : `A structured template draft for ${demo.product}. Review and approve it with legal counsel before publishing.`}</p><small>{locale === 'ar' ? 'آخر تحديث: 20 أغسطس 2026' : 'Last updated: August 20, 2026'}</small></header><div className="legal-layout"><aside aria-label={locale === 'ar' ? 'محتويات الصفحة' : 'On this page'}>{sections.map(([title], index) => <a href={`#legal-${index + 1}`} key={title}>{String(index + 1).padStart(2, '0')} · {title}</a>)}</aside><div>{sections.map(([title, body], index) => <section id={`legal-${index + 1}`} key={title}><span>{String(index + 1).padStart(2, '0')}</span><h2>{title}</h2><p>{body}</p></section>)}</div></div></article>
+}
+
+function TeamPage({ demo, locale, seed }: { demo: DemoData; locale: Locale; seed: number }) {
+  const people = locale === 'ar'
+    ? [[demo.leaders[0], 'المنتج والاستراتيجية', 'يربط احتياجات العملاء بنظام عمل واضح وقابل للقياس.'], [demo.leaders[1], 'الهندسة', 'يبني أنظمة موثوقة تحافظ على بساطة العمل المعقد.'], ['نور حداد', 'التصميم', 'تجعل القرارات والواجهات والعمليات مفهومة للجميع.'], ['آدم ريفيرا', 'أنظمة العملاء', 'يحوّل أنماط العمل الواقعية إلى عمليات قابلة للتوسع.']]
+    : [[demo.leaders[0], 'Product & strategy', 'Connects customer reality to a clear, measurable operating model.'], [demo.leaders[1], 'Engineering', 'Builds reliable systems that keep complex work calm and legible.'], ['Noor Haddad', 'Design', 'Makes decisions, interfaces, and operations understandable to everyone.'], ['Adam Rivera', 'Customer systems', 'Turns real working patterns into operations that can scale.']]
+  const principles = locale === 'ar'
+    ? [['الوضوح قبل السرعة', 'نكتب القرار والسبب والمالك قبل أن نزيد وتيرة التنفيذ.'], ['المنتج في قلب العمل', 'يعمل الباحثون والمصممون والمهندسون معاً منذ اليوم الأول.'], ['الثقة تُبنى بالتفاصيل', 'نصمم الأذونات والسجل والمراجعة كجزء من التجربة نفسها.']]
+    : [['Clarity before velocity', 'We make the decision, reason, and owner visible before increasing execution speed.'], ['Product is a team sport', 'Research, design, and engineering work together from the first day.'], ['Trust lives in the details', 'Permissions, history, and review are designed into the experience itself.']]
+  return <>
+    <PageHero body={locale === 'ar' ? `فريق متعدد التخصصات يبني ${demo.product} من خلال فهم عميق لكيفية عمل الفرق فعلياً.` : `A multidisciplinary team building ${demo.product} from a deep understanding of how modern teams actually work.`} eyebrow={locale === 'ar' ? 'من نحن' : 'Company'} title={locale === 'ar' ? 'نبني أنظمة تجعل العمل الجيد أسهل.' : 'We build systems that make good work easier.'}><Button endContent={<ArrowIcon />} onClick={() => navigateTo(pageHref('contact-sales', seed))} size="lg">{locale === 'ar' ? 'تحدث معنا' : 'Talk with us'}</Button></PageHero>
+    <section className="section team-intro"><div><p className="eyebrow">{locale === 'ar' ? 'كيف نعمل' : 'How we work'}</p><h2>{locale === 'ar' ? 'صغير بما يكفي للتحرك معاً، وخبير بما يكفي للتعمق.' : 'Small enough to move together. Experienced enough to go deep.'}</h2></div><p>{locale === 'ar' ? 'نحن فريق موزع من المصممين والمهندسين والباحثين ومشغلي العملاء. نبدأ بالمشكلة كما تحدث في الواقع، ثم نبني أقل نظام قادر على جعلها أوضح وأكثر موثوقية.' : 'We are a distributed group of designers, engineers, researchers, and customer operators. We start with the problem as it happens in the real world, then build the smallest system that makes it clearer and more reliable.'}</p></section>
+    <section className="section"><SectionHeading body={locale === 'ar' ? 'مبادئ ثابتة تساعدنا على اتخاذ قرارات أفضل مع نمو المنتج.' : 'A few durable principles help us make better decisions as the product grows.'} eyebrow={locale === 'ar' ? 'مبادئنا' : 'Our principles'} title={locale === 'ar' ? 'طريقة العمل جزء من المنتج.' : 'How we work is part of what we ship.'} /><div className="team-principles">{principles.map(([title, body], index) => <article className="team-principle" key={title}><span>0{index + 1}</span><h3>{title}</h3><p>{body}</p></article>)}</div></section>
+    <section className="section"><SectionHeading body={locale === 'ar' ? 'أسماء ومحتوى تجريبيان قابلان للاستبدال ببيانات الفريق المعتمدة.' : 'Seeded demo profiles are ready to replace with approved team data.'} eyebrow={locale === 'ar' ? 'الفريق' : 'The team'} title={locale === 'ar' ? 'خبرات مختلفة، معيار واحد للعمل.' : 'Different disciplines. One standard for the work.'} /><div className="team-grid">{people.map(([name, role, body]) => <article className="team-card" key={name}><div className="team-avatar" aria-hidden="true">{name.split(' ').map((part) => part[0]).slice(0, 2).join('')}</div><div><p>{role}</p><h3>{name}</h3><span>{body}</span></div></article>)}</div></section>
+    <section className="section team-presence"><div><p className="eyebrow">{locale === 'ar' ? 'فريق موزع' : 'Distributed by design'}</p><h2>{locale === 'ar' ? 'سياقات محلية. معيار عالمي.' : 'Local context. One shared standard.'}</h2></div><div><strong>{locale === 'ar' ? 'الدوحة · لندن · نيويورك · دبي' : 'Doha · London · New York · Dubai'}</strong><p>{locale === 'ar' ? 'نتعاون عبر المناطق الزمنية ونلتقي حول القرارات التي تستحق الاهتمام الكامل.' : 'We collaborate across time zones and come together around the decisions that deserve full attention.'}</p></div></section>
+    <PageCta locale={locale} seed={seed} />
+  </>
+}
+
 function SecondaryPage({ demo, locale, page, previewMode, seed, setPreviewMode }: { demo: DemoData; locale: Locale; page: PageKey; previewMode: PreviewMode; seed: number; setPreviewMode: (mode: PreviewMode) => void }) {
   if (page === 'product') return <ProductPage demo={demo} locale={locale} previewMode={previewMode} seed={seed} setPreviewMode={setPreviewMode} />
   if (page === 'agents') return <AgentsPage demo={demo} locale={locale} seed={seed} />
@@ -449,15 +493,22 @@ function SecondaryPage({ demo, locale, page, previewMode, seed, setPreviewMode }
   if (page === 'customers') return <CustomersPage demo={demo} locale={locale} seed={seed} />
   if (page === 'customer-story') return <CustomerStoryPage demo={demo} locale={locale} seed={seed} />
   if (page === 'pricing') return <PricingPage demo={demo} locale={locale} seed={seed} />
+  if (page === 'team') return <TeamPage demo={demo} locale={locale} seed={seed} />
   if (page === 'changelog') return <ChangelogPage locale={locale} />
+  if (page === 'terms') return <LegalPage demo={demo} kind="terms" locale={locale} />
+  if (page === 'privacy') return <LegalPage demo={demo} kind="privacy" locale={locale} />
   return <ContactSalesPage demo={demo} locale={locale} />
 }
 
 function App() {
   const params = new URLSearchParams(window.location.search)
   const seed = Number(params.get('seed')) || 1974341818
-  const page = getPageKey()
-  const [locale, setLocale] = useState<Locale>(() => window.localStorage.getItem('ceramic-saas-locale') === 'ar' ? 'ar' : 'en')
+  const [page, setPage] = useState<PageKey>(() => getPageKey())
+  const [locale, setLocale] = useState<Locale>(() => {
+    const requestedLocale = new URLSearchParams(window.location.search).get('locale')
+    if (requestedLocale?.startsWith('ar')) return 'ar'
+    return window.localStorage.getItem('ceramic-saas-locale') === 'ar' ? 'ar' : 'en'
+  })
   const [colorMode, setColorMode] = useState<'dark' | 'light'>(() => window.localStorage.getItem('ceramic-saas-mode') === 'light' ? 'light' : 'dark')
   const [previewMode, setPreviewMode] = useState<PreviewMode>('overview')
   const [isolated, setIsolated] = useState(false)
@@ -471,12 +522,38 @@ function App() {
     { key: 'integrations', label: locale === 'ar' ? 'التكاملات' : 'Integrations', href: pageHref('integrations', seed) },
     { key: 'customers', label: locale === 'ar' ? 'العملاء' : 'Customers', href: pageHref('customers', seed) },
     { key: 'pricing', label: locale === 'ar' ? 'الأسعار' : 'Pricing', href: pageHref('pricing', seed) },
+    { key: 'team', label: locale === 'ar' ? 'الفريق' : 'Team', href: pageHref('team', seed) },
     { key: 'changelog', label: locale === 'ar' ? 'التحديثات' : 'Changelog', href: pageHref('changelog', seed) },
   ]
   const goTo = (id: string) => {
     window.history.pushState(null, '', `#${id}`)
     document.getElementById(id)?.scrollIntoView({ behavior: 'smooth', block: 'start' })
   }
+
+  useEffect(() => {
+    const syncRoute = () => {
+      setPage(getPageKey())
+      setMenuOpen(false)
+      window.scrollTo({ top: 0 })
+    }
+    const onInternalLink = (event: MouseEvent) => {
+      if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return
+      const anchor = (event.target as Element | null)?.closest<HTMLAnchorElement>('a[href]')
+      if (!anchor || anchor.target === '_blank' || anchor.hasAttribute('download')) return
+      const next = new URL(anchor.href, window.location.href)
+      if (next.origin !== window.location.origin) return
+      if (next.pathname === window.location.pathname && next.search === window.location.search && next.hash) return
+      event.preventDefault()
+      window.history.pushState(null, '', `${next.pathname}${next.search}${next.hash}`)
+      syncRoute()
+    }
+    document.addEventListener('click', onInternalLink)
+    window.addEventListener('popstate', syncRoute)
+    return () => {
+      document.removeEventListener('click', onInternalLink)
+      window.removeEventListener('popstate', syncRoute)
+    }
+  }, [])
   const demo = useMemo(() => {
     const set = seededIndex(seed, 11, demoSets.product.length)
     return {
@@ -536,7 +613,7 @@ function App() {
               {colorMode === 'dark' ? <Sun aria-hidden="true" /> : <Moon aria-hidden="true" />}
             </Button>
             <Button aria-label={locale === 'en' ? 'Switch to Arabic' : 'Switch to English'} className="language-button" onClick={() => setLocale(locale === 'en' ? 'ar' : 'en')} size="sm" startContent={<Languages aria-hidden="true" />} variant="ghost">{t.language}</Button>
-            <Button className="nav-cta" onClick={() => { window.location.href = pageHref('contact-sales', seed) }} size="sm">{t.contact}</Button>
+            <Button className="nav-cta" onClick={() => { navigateTo(pageHref('contact-sales', seed)) }} size="sm">{t.contact}</Button>
             <Button aria-expanded={menuOpen} aria-label={menuOpen ? t.closeMenu : t.menu} className="menu-button" isIconOnly onClick={() => setMenuOpen(!menuOpen)} size="icon" variant="ghost">
               {menuOpen ? <X aria-hidden="true" /> : <Menu aria-hidden="true" />}
             </Button>
@@ -549,10 +626,10 @@ function App() {
 
       <AnimatePresence mode="wait">
       <motion.main
-        animate={{ opacity: 1, y: 0 }}
-        exit={pageMotion.enabled ? { opacity: 0, y: -6 } : undefined}
+        animate={{ y: 0 }}
+        exit={pageMotion.enabled ? { y: -6 } : undefined}
         id="main-content"
-        initial={pageMotion.enabled ? { opacity: 0, y: 8 } : false}
+        initial={pageMotion.enabled ? { y: 8 } : false}
         key={`${page}-${locale}`}
         transition={pageMotion.transition}
       >
@@ -638,7 +715,7 @@ function App() {
       </motion.main>
       </AnimatePresence>
 
-      <footer className="site-footer"><a className="product-logo" href={pageHref('', seed)}><span className="brand-mark" />{demo.product}</a><p>{t.footer}</p><div><a href={pageHref('product', seed)}>{locale === 'ar' ? 'المنتج' : 'Product'}</a><a href={pageHref('customers', seed)}>{locale === 'ar' ? 'العملاء' : 'Customers'}</a><a href={pageHref('pricing', seed)}>{locale === 'ar' ? 'الأسعار' : 'Pricing'}</a><a href={pageHref('contact-sales', seed)}>{locale === 'ar' ? 'اتصل بنا' : 'Contact'}</a></div><small>© 2026 {demo.product}. Seed {seed}.</small></footer>
+      <footer className="site-footer"><a className="product-logo" href={pageHref('', seed)}><span className="brand-mark" />{demo.product}</a><p>{t.footer}</p><div><a href={pageHref('product', seed)}>{locale === 'ar' ? 'المنتج' : 'Product'}</a><a href={pageHref('customers', seed)}>{locale === 'ar' ? 'العملاء' : 'Customers'}</a><a href={pageHref('pricing', seed)}>{locale === 'ar' ? 'الأسعار' : 'Pricing'}</a><a href={pageHref('contact-sales', seed)}>{locale === 'ar' ? 'اتصل بنا' : 'Contact'}</a><a href={pageHref('terms', seed)}>{locale === 'ar' ? 'الشروط' : 'Terms'}</a><a href={pageHref('privacy', seed)}>{locale === 'ar' ? 'الخصوصية' : 'Privacy'}</a></div><small>© 2026 {demo.product}. Seed {seed}.</small></footer>
     </div>
   )
 }

package/data/templates/saas-solution-homepage/privacy/index.html

@@ -0,0 +1 @@
+<!doctype html><html lang="en" dir="ltr" data-theme="utopia-default" data-color-mode="dark"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta name="color-scheme" content="dark light" /><style>html{color-scheme:dark}html[data-color-mode="light"]{color-scheme:light}html,body,#root{min-block-size:100%;margin:0;background:Canvas;color:CanvasText}</style><script>try{const mode=localStorage.getItem("ceramic-saas-mode");const locale=localStorage.getItem("ceramic-saas-locale");if(mode==="light")document.documentElement.dataset.colorMode="light";if(locale==="ar"){document.documentElement.lang="ar";document.documentElement.dir="rtl"}}catch{}</script><meta name="description" content="Privacy Policy template." /><title>Privacy Policy — SaaS Solution Template</title></head><body><a class="skip-link" href="#main-content">Skip to content</a><div id="root"></div><script type="module" src="../main.tsx"></script></body></html>

package/data/templates/saas-solution-homepage/styles.css

@@ -398,7 +398,7 @@ a { -webkit-tap-highlight-color: transparent; }
 .workflow-step { position: relative; min-block-size: 21rem; padding-block: var(--space-6); padding-inline: var(--space-6); border-block: var(--border-width-hairline) solid var(--border); border-inline-start: var(--border-width-hairline) solid var(--border); }
 .workflow-step:last-child { border-inline-end: var(--border-width-hairline) solid var(--border); }
 .workflow-step > span { color: var(--primary); font-family: var(--font-mono); font-size: var(--font-size-small); }
-.workflow-step > div { display: grid; align-content: end; block-size: 100%; }
+.workflow-step > div { display: grid; margin-block-start: var(--space-24); }
 .workflow-step h3 { margin: 0 0 var(--space-3); font-size: 1.6rem; font-weight: var(--font-weight-medium); }
 .workflow-step p { margin: 0; color: var(--muted-foreground); }
 .step-arrow { position: absolute; inset-block-start: var(--space-6); inset-inline-end: calc(-1 * var(--space-3)); z-index: 1; inline-size: var(--space-6); block-size: var(--space-6); padding: var(--space-1); background: var(--background); color: var(--muted-foreground); }
@@ -741,6 +741,40 @@ a { -webkit-tap-highlight-color: transparent; }
 .contact-success h1 { max-inline-size: 54rem; font-size: clamp(3rem, 6vw, 6rem); }
 .contact-success > p:last-child { color: var(--muted-foreground); font-size: var(--font-size-body-lg); }
 
+.team-intro { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: var(--space-16); align-items: start; }
+.team-intro h2 { margin: var(--space-4) 0 0; max-inline-size: 14ch; font-size: clamp(2.5rem, 5vw, 4.8rem); line-height: .98; letter-spacing: -.04em; }
+.team-intro > p { margin: 0; max-inline-size: 42rem; color: var(--muted-foreground); font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.55; }
+.team-principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: var(--border-width-hairline) solid var(--border); }
+.team-principle { min-block-size: 19rem; padding: var(--space-6); }
+.team-principle + .team-principle { border-inline-start: var(--border-width-hairline) solid var(--border); }
+.team-principle > span { color: var(--primary); font-family: var(--font-mono); font-size: var(--font-size-caption); }
+.team-principle h3 { margin: var(--space-16) 0 var(--space-4); font-size: clamp(1.45rem, 2.2vw, 2rem); }
+.team-principle p { margin: 0; color: var(--muted-foreground); line-height: 1.65; }
+.team-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-block-start: var(--border-width-hairline) solid var(--border); border-inline-start: var(--border-width-hairline) solid var(--border); }
+.team-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-6); min-block-size: 18rem; padding: var(--space-6); border-inline-end: var(--border-width-hairline) solid var(--border); border-block-end: var(--border-width-hairline) solid var(--border); align-items: end; }
+.team-avatar { display: grid; place-items: center; inline-size: var(--space-16); block-size: var(--space-16); border: var(--border-width-hairline) solid var(--border); border-radius: 50%; background: color-mix(in srgb, var(--primary) 12%, var(--surface)); color: var(--primary); font-family: var(--font-mono); }
+.team-card p { margin: 0 0 var(--space-2); color: var(--primary); font-family: var(--font-mono); font-size: var(--font-size-caption); text-transform: uppercase; letter-spacing: .08em; }
+.team-card h3 { margin: 0 0 var(--space-3); font-size: clamp(1.5rem, 2vw, 2rem); }
+.team-card span { display: block; max-inline-size: 32rem; color: var(--muted-foreground); line-height: 1.6; }
+.team-presence { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12); padding-block: var(--space-16); border-block: var(--border-width-hairline) solid var(--border); }
+.team-presence h2 { margin: var(--space-4) 0 0; font-size: clamp(2.4rem, 4.5vw, 4rem); }
+.team-presence strong { display: block; margin-block-end: var(--space-5); color: var(--primary); font-family: var(--font-mono); }
+.team-presence p { margin: 0; max-inline-size: 36rem; color: var(--muted-foreground); line-height: 1.65; }
+
+.legal-page { inline-size: min(100%, var(--template-max-inline)); margin-inline: auto; padding-block: calc(var(--template-header-block) + var(--space-16)) var(--space-16); padding-inline: var(--gutter); }
+.legal-page > header { max-inline-size: 58rem; padding-block-end: var(--space-16); }
+.legal-page h1 { margin-block: var(--space-5); font-size: clamp(3.5rem, 8vw, 7.5rem); line-height: .92; letter-spacing: -.055em; }
+.legal-page > header > p:not(.eyebrow) { max-inline-size: 46rem; color: var(--muted-foreground); font-size: var(--font-size-body-lg); line-height: 1.6; }
+.legal-page > header small { display: block; margin-block-start: var(--space-6); color: var(--muted-foreground); font-family: var(--font-mono); }
+.legal-layout { display: grid; grid-template-columns: minmax(13rem, .55fr) minmax(0, 1.45fr); gap: var(--space-16); border-block-start: var(--border-width-hairline) solid var(--border); }
+.legal-layout > aside { position: sticky; inset-block-start: calc(var(--template-header-block) + var(--space-6)); display: grid; align-content: start; gap: var(--space-3); block-size: fit-content; padding-block: var(--space-8); }
+.legal-layout > aside a { color: var(--muted-foreground); font-size: var(--font-size-small); text-decoration: none; }
+.legal-layout > aside a:hover { color: var(--foreground); }
+.legal-layout section { scroll-margin-block-start: calc(var(--template-header-block) + var(--space-6)); padding-block: var(--space-12); border-block-end: var(--border-width-hairline) solid var(--border); }
+.legal-layout section > span { color: var(--primary); font-family: var(--font-mono); font-size: var(--font-size-caption); }
+.legal-layout section h2 { margin: var(--space-4) 0 var(--space-5); font-size: clamp(2rem, 4vw, 3.5rem); }
+.legal-layout section p { max-inline-size: var(--template-reading-inline); margin: 0; color: var(--muted-foreground); font-size: var(--font-size-body-lg); line-height: 1.7; }
+
 @keyframes row-in { from { opacity: 0; translate: 0 var(--space-2); } to { opacity: 1; translate: 0; } }
 
 @media (max-width: 68rem) {
@@ -770,6 +804,12 @@ a { -webkit-tap-highlight-color: transparent; }
   .featured-story { grid-template-columns: 1fr; }
   .pricing-page-grid { grid-template-columns: 1fr; }
   .pricing-page-grid .uds-card { min-block-size: auto; }
+  .legal-layout { grid-template-columns: 1fr; gap: 0; }
+  .legal-layout > aside { position: static; grid-template-columns: repeat(3, minmax(0, 1fr)); }
+  .team-intro { grid-template-columns: 1fr; gap: var(--space-8); }
+  .team-principles { grid-template-columns: 1fr; }
+  .team-principle { min-block-size: auto; }
+  .team-principle + .team-principle { border-inline-start: 0; border-block-start: var(--border-width-hairline) solid var(--border); }
 }
 
 @media (max-width: 48rem) {
@@ -807,7 +847,7 @@ a { -webkit-tap-highlight-color: transparent; }
   .workflow-grid { grid-template-columns: 1fr; }
   .workflow-step { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); min-block-size: auto; border-inline-end: var(--border-width-hairline) solid var(--border); border-block-end: 0; }
   .workflow-step:last-child { border-block-end: var(--border-width-hairline) solid var(--border); }
-  .workflow-step > div { block-size: auto; }
+  .workflow-step > div { margin-block-start: 0; }
   .step-arrow { inset-block-end: calc(-1 * var(--space-3)); inset-block-start: auto; inset-inline-end: var(--space-6); transform: rotate(90deg); }
   :dir(rtl) .step-arrow { transform: rotate(90deg) scaleX(-1); }
   .agent-flow > div { grid-template-columns: auto minmax(0, 1fr); padding-block: var(--space-3); }
@@ -855,6 +895,11 @@ a { -webkit-tap-highlight-color: transparent; }
   .changelog-layout article { grid-template-columns: 1fr; }
   .contact-layout { padding-block-start: calc(var(--template-header-block) + var(--space-8)); padding-inline: var(--space-4); }
   .contact-layout form { padding: var(--space-4); }
+  .team-grid,
+  .team-presence { grid-template-columns: 1fr; }
+  .team-card { min-block-size: 15rem; }
+  .legal-page { padding-inline: var(--space-4); }
+  .legal-layout > aside { grid-template-columns: 1fr 1fr; }
 }
 
 @media (prefers-reduced-motion: reduce) {

package/data/templates/saas-solution-homepage/team/index.html

@@ -0,0 +1 @@
+<!doctype html><html lang="en" dir="ltr" data-theme="utopia-default" data-color-mode="dark"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta name="color-scheme" content="dark light" /><style>html{color-scheme:dark}html[data-color-mode="light"]{color-scheme:light}html,body,#root{min-block-size:100%;margin:0;background:Canvas;color:CanvasText}</style><script>try{const mode=localStorage.getItem("ceramic-saas-mode");const locale=localStorage.getItem("ceramic-saas-locale");if(mode==="light")document.documentElement.dataset.colorMode="light";if(locale==="ar"){document.documentElement.lang="ar";document.documentElement.dir="rtl"}}catch{}</script><meta name="description" content="Team, principles, and company story for the Ceramic SaaS solution template." /><title>Team — SaaS Solution Template</title></head><body><a class="skip-link" href="#main-content">Skip to content</a><div id="root"></div><script type="module" src="../main.tsx"></script></body></html>