@vadimcomanescu/nadicode-design-system 2.0.0

package/.agents/skills/seed/intent-map.md

@@ -0,0 +1,320 @@
+# Intent Map
+
+THE lookup table for "what components do I use for X?" Every page in a consumer app must map to one of these 20 intents. If your page does not match any intent, stop and report it.
+
+For each intent: **Required** components must be present, **Allowed** may be used, **Forbidden** must never appear. **Blocks** are pre-composed sections. **States** are the UI states the page must handle.
+
+---
+
+### marketing-landing
+
+| Classification | Values |
+|----------------|--------|
+| Routes | `/`, `/landing` |
+| Shell | marketing-shell |
+| Required | HeaderBlock, FooterBlock, Button, Badge, Typography, ScrollFadeIn |
+| Allowed | HeroBlock, HeroSectionBlock, FeatureBlock, FeatureGridBlock, FAQBlock, CallToActionBlock, TestimonialsBlock, LogoCloud, StatsMarketingBlock, SocialProofBlock, ComparisonBlock, BannerBlock, AnnouncementBanner, InfiniteSlider, AnimatedGradientText, CountingNumber, PricingBlock, BentoGrid, ShaderBackground, Card, Separator |
+| Forbidden | Sidebar, DataTable, Form, FormWizard, AgentTeamPanel, AgentTerminal, SettingsLayout |
+| Blocks | HeroBlock, HeroSectionBlock, FeatureBlock, FeatureGridBlock, FAQBlock, CallToActionBlock, TestimonialsBlock, LogoCloud, StatsMarketingBlock, SocialProofBlock, ComparisonBlock, BannerBlock, HeaderBlock, FooterBlock, NewsletterBlock |
+| States | default, mobile-navigation |
+| Recipe | `recipes/marketing-landing.md` |
+
+---
+
+### dashboard
+
+| Classification | Values |
+|----------------|--------|
+| Routes | `/dashboard` |
+| Shell | app-shell |
+| Required | MetricCard, ChartCard, Card, Badge, Typography, Breadcrumb, Button, Skeleton, Empty, StaggerChildren |
+| Allowed | Sparkline, TrendIndicator, SlidingNumber, CountingNumber, ProgressRing, DataFreshness, AreaChart, BarChart, LineChart, PieChart, HeatmapChart, AgentMetricsCard, Tabs, Select, Progress, Timeline, DateRangePicker, DataTable, Tooltip, ScrollFadeIn, StatusDot |
+| Forbidden | HeroBlock, PricingBlock, FormWizard, AuthLayout, TextReveal, AnimatedGradientText, AuroraEffect, MeteorShower |
+| Blocks | StatsBlock, ChartBlock, ChartCollectionBlock, ActivityFeedBlock, BarChartBlock, InteractiveAreaChartBlock |
+| States | loading, empty, has-data, error |
+| Recipe | `recipes/dashboard.md` |
+
+---
+
+### crud-list-detail
+
+| Classification | Values |
+|----------------|--------|
+| Routes | `/[entity]`, `/[entity]/[id]` |
+| Shell | app-shell |
+| Required | DataTable, Pagination, Input, Select, Button, Badge, Card, Sheet, AlertDialog, Typography, Breadcrumb, Skeleton, Empty |
+| Allowed | Table, Dialog, Tabs, DropdownMenu, ContextMenu, Tooltip, Checkbox |
+| Forbidden | HeroBlock, PricingBlock, FormWizard, AreaChart, BarChart, AuroraEffect, TextReveal |
+| Blocks | DataGridBlock, DirectoryBlock |
+| States | loading, empty, has-data, error, filtering |
+| Recipe | `recipes/crud-list-detail.md` |
+
+---
+
+### kanban-board
+
+| Classification | Values |
+|----------------|--------|
+| Routes | `/runs`, `/board`, `/pipeline`, `/[entity]/board` |
+| Shell | app-shell |
+| Required | KanbanBoard, KanbanColumn, KanbanColumnHeader, KanbanItem, KanbanHandle, Badge, Typography, Empty, Button |
+| Allowed | Avatar, StatusDot, Tooltip, DropdownMenu, Sheet, Dialog, Skeleton, Tabs, Select, Input |
+| Forbidden | DataTable, HeroBlock, PricingBlock, FormWizard, AreaChart, AuroraEffect, AgentTeamPanel |
+| Blocks | KanbanDemoBlock |
+| States | loading, empty, has-data, error, dragging |
+| Recipe | See SKILL.md "Kanban Board" section |
+
+---
+
+### crud-form
+
+| Classification | Values |
+|----------------|--------|
+| Routes | `/[entity]/new`, `/[entity]/[id]/edit` |
+| Shell | app-shell |
+| Required | Form, FormField, FormItem, FormLabel, FormControl, FormMessage, Input, Button, Card, Typography, Breadcrumb, AlertDialog, Alert, Spinner, Skeleton |
+| Allowed | Field, Label, Textarea, Select, Switch, Checkbox, DatePicker, Combobox, TagInput, RadioGroup, Slider, FileUpload, InputOTP, NativeSelect, InputGroup, Tooltip |
+| Forbidden | DataTable, HeroBlock, AreaChart, BarChart, AuroraEffect, AgentTeamPanel |
+| Blocks | CreateBlock |
+| States | pristine, dirty, submitting, success, validation-error |
+| Recipe | `recipes/crud-form.md` |
+
+---
+
+### settings
+
+| Classification | Values |
+|----------------|--------|
+| Routes | `/settings`, `/settings/[section]` |
+| Shell | app-shell |
+| Required | Card, Button, Input, Switch, Select, Typography, Breadcrumb, Tabs, AlertDialog, AvatarUpload, Form, Skeleton, Sonner |
+| Allowed | PasswordInput, Checkbox, RadioGroup, Label, Badge, Tooltip, Separator |
+| Forbidden | DataTable, HeroBlock, AreaChart, AuroraEffect, AgentTeamPanel, TextReveal |
+| Blocks | SettingsLayout |
+| States | loading, default, dirty, saving, saved, error |
+| Recipe | `recipes/settings.md` |
+
+---
+
+### auth
+
+| Classification | Values |
+|----------------|--------|
+| Routes | `/login`, `/signup`, `/reset-password`, `/verify` |
+| Shell | auth-shell |
+| Required | Card, Label, Input, PasswordInput, Button, Alert, Logo, BrandIcons, Separator, Typography, Spinner |
+| Allowed | InputOTP, Checkbox, ShaderBackground |
+| Forbidden | Sidebar, DataTable, NavigationMenu, AreaChart, AuroraEffect |
+| Blocks | AuthLayout, LoginBlock, SignUpBlock, PasswordRecoveryBlock, ResetPasswordBlock, TwoFactorChallengeBlock, TwoFactorSetupBlock, AccountLockedBlock, AuthSuccessBlock |
+| States | default, submitting, error, success |
+| Recipe | `recipes/auth.md` |
+
+---
+
+### onboarding
+
+| Classification | Values |
+|----------------|--------|
+| Routes | `/onboarding`, `/onboarding/[step]` |
+| Shell | onboarding-shell |
+| Required | Progress, Button, Card, Typography, Logo, ConfettiBurst, SuccessCheck |
+| Allowed | FormWizard, Input, AvatarUpload, Select, Checkbox, RadioGroup, TagInput, Label, Form, FormField, Stepper, Step, Badge, Separator |
+| Forbidden | Sidebar, DataTable, NavigationMenu, HeroBlock, AgentTeamPanel |
+| Blocks | OnboardingBlock, WizardBlock |
+| States | step-active, step-valid, step-error, complete |
+| Recipe | `recipes/onboarding.md` |
+
+---
+
+### pricing
+
+| Classification | Values |
+|----------------|--------|
+| Routes | `/pricing` |
+| Shell | marketing-shell |
+| Required | Card, Badge, Button, Switch, Typography, Separator, ScrollFadeIn |
+| Allowed | PricingBlock, ComparisonBlock, Table, Tooltip, ToggleGroup, Tabs, Accordion, CountingNumber, FAQBlock, CallToActionBlock, HeaderBlock, FooterBlock, CheckoutForm |
+| Forbidden | Sidebar, DataTable, FormWizard, AgentTeamPanel, AuroraEffect |
+| Blocks | PricingBlock, FAQBlock, CallToActionBlock, ComparisonBlock, HeaderBlock, FooterBlock |
+| States | default, annual-toggle, cta-loading |
+| Recipe | `recipes/pricing.md` |
+
+---
+
+### analytics
+
+| Classification | Values |
+|----------------|--------|
+| Routes | `/analytics` |
+| Shell | app-shell |
+| Required | Card, Badge, Typography, Breadcrumb, Button, DateRangePicker, Tabs, Select, Skeleton, Empty |
+| Allowed | AreaChart, BarChart, LineChart, PieChart, RadarChart, RadialBarChart, HeatmapChart, DataTable, CountingNumber, Tooltip, Progress, Input |
+| Forbidden | HeroBlock, FormWizard, AuthLayout, AgentTeamPanel, AuroraEffect, TextReveal |
+| Blocks | StatsBlock, ChartBlock, ChartCollectionBlock, BarChartBlock, InteractiveAreaChartBlock, HeatmapChartBlock, UsageDonutBlock, DataGridBlock |
+| States | loading, empty, has-data, error, date-filtered |
+| Recipe | `recipes/analytics.md` |
+
+---
+
+### agents-chat
+
+| Classification | Values |
+|----------------|--------|
+| Routes | `/agents`, `/voice-agents` |
+| Shell | app-shell |
+| Required | AgentTeamPanel, AgentStatus, AgentMessageBubble, ThinkingIndicator, ToolCallCard, ApprovalCard, CodeDiffViewer, ArtifactCard, AgentTerminal, ContextMeter, Tabs, Textarea, Button, ScrollArea, Sheet |
+| Allowed | ConversationThread, AgentTimeline, AgentMetricsCard, WorkflowGraph, HandoffIndicator, MemoryInspector, SourceCitation, StreamingText, Badge, Avatar, AgentAvatar, Resizable |
+| Forbidden | HeroBlock, PricingBlock, FormWizard, DataTable, AuroraEffect, MeteorShower |
+| Blocks | AgentConversationBlock, ChatLayout |
+| States | empty, loading, running, thinking, blocked-approval, failed, complete |
+| Recipe | `recipes/agents-chat.md` |
+
+---
+
+### error
+
+| Classification | Values |
+|----------------|--------|
+| Routes | `/404`, `/500` |
+| Shell | fallback-shell |
+| Required | Button, Typography, Logo |
+| Allowed | Card, NotFoundBlock |
+| Forbidden | Sidebar, DataTable, NavigationMenu, AreaChart, FormWizard, AuroraEffect |
+| Blocks | NotFoundBlock |
+| States | not-found, server-error |
+| Recipe | `recipes/error-pages.md` |
+
+---
+
+### navigation-shell
+
+| Classification | Values |
+|----------------|--------|
+| Routes | `(layout)` |
+| Shell | app-shell |
+| Required | Sidebar, SidebarProvider, SidebarTrigger, SidebarInset, SidebarContent, SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuItem, SidebarMenuButton, Breadcrumb, SearchCommand, Dialog, ThemeToggle, Button, Avatar |
+| Allowed | SidebarMenuSub, SidebarMenuSubItem, SidebarMenuSubButton, SidebarRail, NotificationCenter, Badge, StyleToggle, Tooltip, DropdownMenu, ScrollArea, ContextMenu, Menubar |
+| Forbidden | HeroBlock, FooterBlock, AreaChart, Form, AgentTeamPanel |
+| Blocks | NavUser, AppBreadcrumb, AppSearch, WorkspaceSwitcher |
+| States | (none) |
+| Recipe | `recipes/navigation-shell.md` |
+
+---
+
+### blog-content
+
+| Classification | Values |
+|----------------|--------|
+| Routes | `/blog`, `/blog/[slug]`, `/changelog` |
+| Shell | marketing-shell |
+| Required | Card, Badge, Avatar, Typography, Pagination, Separator, Select, Button, ScrollFadeIn |
+| Allowed | Tabs, Input, Breadcrumb, Tooltip, HeaderBlock, FooterBlock |
+| Forbidden | Sidebar, DataTable, FormWizard, AgentTeamPanel, AreaChart |
+| Blocks | HeaderBlock, FooterBlock, ChangelogBlock, NewsletterBlock, CodeBlock |
+| States | loading, has-data, category-filtered |
+| Recipe | `recipes/blog-content.md` |
+
+---
+
+### checkout
+
+| Classification | Values |
+|----------------|--------|
+| Routes | `/checkout`, `/checkout/success` |
+| Shell | marketing-shell |
+| Required | CheckoutForm, Card, Input, InputGroup, Button, Typography, Separator, Logo, Form, Alert, Spinner, ConfettiBurst, SuccessCheck |
+| Allowed | CheckoutFormDemo, Label, Select, NativeSelect, Badge, Tooltip |
+| Forbidden | Sidebar, NavigationMenu, DataTable, AgentTeamPanel, AreaChart, AuroraEffect, HeroBlock |
+| Blocks | (none) |
+| States | default, submitting, processing, error, success |
+| Recipe | `recipes/checkout.md` |
+
+---
+
+### marketing-shell
+
+| Classification | Values |
+|----------------|--------|
+| Routes | `(marketing)` route group layout |
+| Shell | marketing-shell (this IS the definition) |
+| Required | HeaderBlock, FooterBlock, Logo, Button, ThemeToggle |
+| Allowed | BannerBlock, AnnouncementBanner, SkipNav |
+| Forbidden | Sidebar, SidebarProvider, DataTable, Form, FormWizard, AgentTeamPanel, AgentTerminal, SettingsLayout |
+| Blocks | HeaderBlock, FooterBlock |
+| States | default, mobile-navigation |
+| Recipe | `recipes/marketing-shell.md` |
+
+---
+
+### agency-home
+
+| Classification | Values |
+|----------------|--------|
+| Routes | `/`, `/home` |
+| Shell | marketing-shell |
+| Required | HeaderBlock, FooterBlock, Button, Badge, ScrollFadeIn, ProcessFlowBlock, FeatureGridBlock, StatsMarketingBlock |
+| Allowed | HeroBlock, HeroSectionBlock, TestimonialsBlock, LogoCloud, FAQBlock, CallToActionBlock, SocialProofBlock, InfiniteSlider, CountingNumber, ShaderBackground, Card, BentoGrid, AnimatedGradientText, Separator |
+| Forbidden | Sidebar, DataTable, Form, FormWizard, AgentTeamPanel, AgentTerminal, SettingsLayout |
+| Blocks | HeroBlock, HeroSectionBlock, FeatureGridBlock, ProcessFlowBlock, StatsMarketingBlock, TestimonialsBlock, LogoCloud, FAQBlock, CallToActionBlock, HeaderBlock, FooterBlock |
+| States | default, mobile-navigation |
+| Recipe | `recipes/agency-home.md` |
+
+---
+
+### digital-workers
+
+| Classification | Values |
+|----------------|--------|
+| Routes | `/digital-workers`, `/agents`, `/platform` |
+| Shell | marketing-shell |
+| Required | HeaderBlock, FooterBlock, Button, Badge, ScrollFadeIn, AgentProfileGridBlock |
+| Allowed | HeroBlock, HeroSectionBlock, FeatureBlock, FeatureGridBlock, WorkflowGraph, IntegrationsBlock, FAQBlock, CallToActionBlock, StatsMarketingBlock, Card, BentoGrid, ShaderBackground, LogoCloud, InfiniteSlider, Separator |
+| Forbidden | Sidebar, DataTable, Form, FormWizard, SettingsLayout, AgentTeamPanel |
+| Blocks | AgentProfileGridBlock, FeatureBlock, IntegrationsBlock, FAQBlock, CallToActionBlock, HeaderBlock, FooterBlock |
+| States | default, mobile-navigation |
+| Recipe | `recipes/digital-workers.md` |
+
+---
+
+### service-detail
+
+| Classification | Values |
+|----------------|--------|
+| Routes | `/services/[slug]`, `/products/[slug]`, `/agents/[slug]` |
+| Shell | marketing-shell |
+| Required | HeaderBlock, FooterBlock, Button, Badge, ScrollFadeIn, SolutionShowcaseBlock |
+| Allowed | ProcessFlowBlock, FeatureBlock, FeatureGridBlock, StatsMarketingBlock, TestimonialsBlock, FAQBlock, CallToActionBlock, HeroBlock, HeroSectionBlock, Card, ShaderBackground, BentoGrid, LogoCloud, InfiniteSlider, CountingNumber, Separator |
+| Forbidden | Sidebar, DataTable, AgentTeamPanel, SettingsLayout, FormWizard |
+| Blocks | SolutionShowcaseBlock, ProcessFlowBlock, FeatureBlock, FeatureGridBlock, StatsMarketingBlock, TestimonialsBlock, FAQBlock, CallToActionBlock, HeaderBlock, FooterBlock |
+| States | default, mobile-navigation |
+| Recipe | `recipes/service-detail.md` |
+
+---
+
+### company-about
+
+| Classification | Values |
+|----------------|--------|
+| Routes | `/about`, `/manifesto`, `/chi-siamo` |
+| Shell | marketing-shell |
+| Required | HeaderBlock, FooterBlock, Button, Badge, ScrollFadeIn, TeamBlock |
+| Allowed | FeatureBlock, FeatureGridBlock, StatsMarketingBlock, LogoCloud, CallToActionBlock, HeroBlock, HeroSectionBlock, Card, ShaderBackground, TestimonialsBlock, InfiniteSlider, Separator |
+| Forbidden | Sidebar, DataTable, Form, FormWizard, AgentTeamPanel, PricingBlock, SettingsLayout |
+| Blocks | TeamBlock, FeatureGridBlock, StatsMarketingBlock, LogoCloud, CallToActionBlock, HeaderBlock, FooterBlock |
+| States | default, mobile-navigation |
+| Recipe | `recipes/company-about.md` |
+
+---
+
+### company-contact
+
+| Classification | Values |
+|----------------|--------|
+| Routes | `/contact`, `/contatti` |
+| Shell | marketing-shell |
+| Required | HeaderBlock, FooterBlock, Button, ScrollFadeIn, ContactBlock |
+| Allowed | FAQBlock, Card, FeatureGridBlock, Badge, HeroBlock, HeroSectionBlock, CallToActionBlock, Separator |
+| Forbidden | Sidebar, DataTable, FormWizard, AgentTeamPanel, PricingBlock, SettingsLayout |
+| Blocks | ContactBlock, FAQBlock, HeaderBlock, FooterBlock |
+| States | default, form-submitting, form-success, form-error |
+| Recipe | `recipes/company-contact.md` |

package/.agents/skills/seed/recipes/agency-home.md

@@ -0,0 +1,311 @@
+# Recipe: Agency Home
+
+AI agency/platform homepage oriented around selling AI services, showcasing process and outcomes.
+
+## Route Pattern
+
+`/` or `/home`
+
+## Shell
+
+`marketing-shell` (HeaderBlock + FooterBlock)
+
+---
+
+## Layout Blueprint (Desktop)
+
+```
++------------------------------------------------+
+| HeaderBlock: Logo  [Nav links]  [CTA Button]   |
++------------------------------------------------+
+|                                                 |
+|              HERO SECTION                       |
+|    Agency headline (centered)                   |
+|    Subtitle: what the agency delivers           |
+|    [Primary CTA]  [Secondary CTA]              |
+|    ShaderBackground / ambient visual            |
+|                                                 |
++------------------------------------------------+
+| Logo Cloud: client logos (InfiniteSlider)       |
++------------------------------------------------+
+|                                                 |
+|         SERVICES GRID (3-col)                   |
+|  +----------+ +----------+ +----------+         |
+|  | Service 1| | Service 2| | Service 3|         |
+|  +----------+ +----------+ +----------+         |
+|  +----------+ +----------+ +----------+         |
+|  | Service 4| | Service 5| | Service 6|         |
+|  +----------+ +----------+ +----------+         |
+|                                                 |
++------------------------------------------------+
+|         PROCESS FLOW                            |
+|  [Step 1] → [Step 2] → [Step 3] → [Step 4]     |
+|  How we work: discovery → design → deliver      |
++------------------------------------------------+
+|        OUTCOME STATS                            |
+|   +------+  +------+  +------+  +------+       |
+|   | ROI  |  | Time |  | Cost |  | Scale|       |
+|   | 340% |  | -60% |  | -45% |  | 10x |       |
+|   +------+  +------+  +------+  +------+       |
++------------------------------------------------+
+|                                                 |
+|         TESTIMONIALS (carousel or grid)         |
+|                                                 |
++------------------------------------------------+
+|                                                 |
+|         FAQ (Accordion)                         |
+|                                                 |
++------------------------------------------------+
+|         FINAL CTA SECTION                       |
+|    Headline + [CTA Button]                      |
++------------------------------------------------+
+| FooterBlock: columns + social + legal           |
++------------------------------------------------+
+```
+
+---
+
+## Section Sequence
+
+### 1. Header
+
+```tsx
+<HeaderBlock logo={<Logo />} links={navLinks} actions={<Button>Book a Call</Button>} />
+```
+
+### 2. Hero Section
+
+```tsx
+<section className="relative py-24 md:py-32 overflow-hidden">
+  <ShaderBackground shader="meshGradient" intent="hero" opacity={0.25} />
+  <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+    <motion.div variants={heroStagger.container} initial="hidden" animate="visible">
+      <motion.div variants={heroStagger.child}>
+        <Badge variant="outline" className="mb-4">AI-Powered Solutions</Badge>
+      </motion.div>
+      <motion.h1 variants={heroStagger.child} className="text-4xl md:text-6xl font-bold tracking-tight">
+        {headline}
+      </motion.h1>
+      <motion.p variants={heroStagger.child} className="mt-6 text-lg md:text-xl text-text-secondary max-w-2xl mx-auto">
+        {subtitle}
+      </motion.p>
+      <motion.div variants={heroStagger.child} className="mt-8 flex flex-col sm:flex-row gap-4 justify-center">
+        <Button size="lg">Book a Call</Button>
+        <Button size="lg" variant="outline">See Our Work</Button>
+      </motion.div>
+    </motion.div>
+  </div>
+</section>
+```
+
+### 3. Logo Cloud
+
+```tsx
+<section className="py-12 border-y border-border-subtle">
+  <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <Typography variant="small" className="text-center text-text-tertiary mb-6">
+      Trusted by forward-thinking companies
+    </Typography>
+    <LogoCloud logos={clientLogos} />
+  </div>
+</section>
+```
+
+### 4. Services Grid
+
+```tsx
+<ScrollFadeIn>
+  <section className="py-16 md:py-24">
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div className="text-center mb-12">
+        <Heading level={2} size="section" >Our Services</Heading>
+        <Typography variant="lead" className="mt-4 text-text-secondary">
+          End-to-end AI solutions tailored to your business
+        </Typography>
+      </div>
+      <FeatureGridBlock features={services} columns={3} />
+    </div>
+  </section>
+</ScrollFadeIn>
+```
+
+### 5. Process Flow
+
+```tsx
+<ScrollFadeIn>
+  <section className="py-16 md:py-24 bg-muted">
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div className="text-center mb-12">
+        <Heading level={2} size="section" >How We Work</Heading>
+        <Typography variant="lead" className="mt-4 text-text-secondary">
+          A proven process from discovery to deployment
+        </Typography>
+      </div>
+      <ProcessFlowBlock steps={processSteps} />
+    </div>
+  </section>
+</ScrollFadeIn>
+```
+
+### 6. Outcome Stats
+
+```tsx
+<ScrollFadeIn>
+  <section className="py-16 md:py-24">
+    <StatsMarketingBlock stats={outcomeStats} />
+  </section>
+</ScrollFadeIn>
+```
+
+### 7. Testimonials
+
+```tsx
+<ScrollFadeIn>
+  <section className="py-16 md:py-24 bg-muted">
+    <TestimonialsBlock testimonials={testimonials} />
+  </section>
+</ScrollFadeIn>
+```
+
+### 8. FAQ
+
+```tsx
+<ScrollFadeIn>
+  <section className="py-16 md:py-24">
+    <FAQBlock items={faqItems} />
+  </section>
+</ScrollFadeIn>
+```
+
+### 9. Final CTA
+
+```tsx
+<ScrollFadeIn>
+  <section className="py-16 md:py-24">
+    <CallToActionBlock
+      title="Ready to transform your business with AI?"
+      description="Book a free discovery call and see how we can help."
+      action={<Button size="lg">Book a Call</Button>}
+    />
+  </section>
+</ScrollFadeIn>
+```
+
+### 10. Footer
+
+```tsx
+<FooterBlock columns={footerColumns} social={socialLinks} legal={legalLinks} />
+```
+
+---
+
+## Animation Storyboard
+
+```
+ANIMATION STORYBOARD
+====================
+BUDGET: 1000ms (above-fold) | SPRING: dramatic (hero), snappy (rest) | REDUCED: opacity-only
+
+T+0ms     [nav]        Header visible                  (instant)
+T+100ms   [badge]      Agency badge                    {fadeIn, snappy}
+T+200ms   [headline]   Hero headline                   {fadeInUp, dramatic}
+T+350ms   [subtitle]   Hero subtitle                   {fadeInUp, dramatic}
+T+500ms   [ctas]       CTA buttons                     {fadeInUp, dramatic}
+T+700ms   [shader]     Hero visual/shader appears      {fadeIn, gentle}
+T+900ms   [logos]      Logo cloud fades in             {fadeIn, snappy}
+
+SCROLL-TRIGGERED (below fold):
+[services]     ScrollFadeIn at 20% visible    {fadeInUp, snappy, stagger 100ms}
+[process]      ScrollFadeIn at 20% visible    {fadeInUp, snappy, stagger 150ms}
+[stats]        ScrollFadeIn at 20% visible    {fadeInUp, snappy}
+[testimonials] ScrollFadeIn at 20% visible    {fadeIn, gentle}
+[faq]          ScrollFadeIn at 20% visible    {fadeInUp, snappy}
+[cta]          ScrollFadeIn at 20% visible    {scaleIn, gentle}
+
+REDUCED MOTION: All items visible immediately, opacity 0->1 in 10ms
+```
+
+---
+
+## Required Components
+
+| Component | Import Path | Purpose |
+|-----------|-------------|---------|
+| `HeaderBlock` | `@vadimcomanescu/nadicode-design-system/header-block` | Site navigation |
+| `FooterBlock` | `@vadimcomanescu/nadicode-design-system/footer-block` | Site footer |
+| `Button` | `@vadimcomanescu/nadicode-design-system/button` | CTAs |
+| `Badge` | `@vadimcomanescu/nadicode-design-system/badge` | Hero tag |
+| `Typography` | `@vadimcomanescu/nadicode-design-system/typography` | Headings, body text |
+| `ScrollFadeIn` | `@vadimcomanescu/nadicode-design-system/scroll-fade-in` | Below-fold animations |
+| `ProcessFlowBlock` | `@vadimcomanescu/nadicode-design-system/process-flow-block` | How-we-work process |
+| `FeatureGridBlock` | `@vadimcomanescu/nadicode-design-system/feature-grid-block` | Services grid |
+| `StatsMarketingBlock` | `@vadimcomanescu/nadicode-design-system/stats-marketing-block` | Outcome metrics (ROI, time saved) |
+
+### Allowed (optional)
+
+`HeroBlock`, `HeroSectionBlock`, `TestimonialsBlock`, `LogoCloud`, `FAQBlock`, `CallToActionBlock`, `SocialProofBlock`, `InfiniteSlider`, `CountingNumber`, `ShaderBackground`, `Card`, `BentoGrid`
+
+### Forbidden
+
+`Sidebar`, `DataTable`, `Form`, `FormWizard`, `AgentTeamPanel`, `AgentTerminal`, `SettingsLayout`, `ChatLayout`
+
+---
+
+## Required States
+
+| State | Trigger | Visual |
+|-------|---------|--------|
+| `default` | Page loaded | Full marketing content |
+| `mobile-navigation` | Hamburger tap | Mobile nav drawer/sheet |
+
+---
+
+## Responsive Contract
+
+| Breakpoint | Hero | Services | Process | Stats | Content Width |
+|------------|------|----------|---------|-------|---------------|
+| Mobile | Stacked, text-center | 1 col | Vertical stack | 2 col | px-4 |
+| `sm:` | Stacked, text-center | 2 col | Vertical stack | 2 col | px-6, max-w-7xl |
+| `lg:` | Centered | 3 col | Horizontal flow | 4 col | px-8, max-w-7xl |
+
+---
+
+## Styling Rules
+
+- Hero: `ShaderBackground` for ambient glow, `glass-floating` for elevated cards
+- Section backgrounds alternate: `bg-background` and `bg-muted`
+- Process flow uses connected step indicators with semantic `border-accent`
+- Stats use `CountingNumber` for animated counters
+- CTAs use `Button` with `size="lg"` for prominence
+- No raw palette colors; semantic tokens only
+
+---
+
+## Accessibility
+
+- Hero heading is `<h1>`, section headings are `<h2>`
+- Skip-nav link to main content
+- All images have alt text
+- CTA buttons have descriptive text (not just "Click here")
+- Mobile nav is keyboard accessible with focus trap
+- Process flow steps are in an ordered list
+
+---
+
+## Reference Implementations
+
+- `src/app/landing/page.tsx`
+- `src/components/blocks/ProcessFlowBlock.tsx`
+- `src/components/blocks/FeatureGridBlock.tsx`
+- `src/components/blocks/StatsMarketingBlock.tsx`
+
+---
+
+## Verification
+
+```bash
+npx tsc --noEmit
+npm run lint
+npm run test
+npx vitest run src/test/css-variable-usage.test.ts
+```