@vadimcomanescu/nadicode-design-system 2.0.0

package/.agents/skills/seed/recipes/checkout.md

@@ -0,0 +1,311 @@
+# Recipe: Checkout
+
+Payment flow with Stripe integration, order summary, and success state.
+
+## Route Patterns
+
+- `/checkout`
+- `/checkout/success`
+
+## Shell
+
+`marketing-shell` (minimal: logo + trust badge, no full nav to avoid abandonment)
+
+---
+
+## Layout Blueprint (Desktop)
+
+```
++------------------------------------------------+
+| Logo            Secure checkout   [Back to cart]|
++------------------------------------------------+
+|                                                 |
+|  +-------------------------+  +-------------+   |
+|  | Checkout Form           |  | Order       |   |
+|  |                         |  | Summary     |   |
+|  | Contact Information     |  |             |   |
+|  | [Email input]           |  | Item 1  $29 |   |
+|  |                         |  | Item 2  $49 |   |
+|  | Payment                 |  |             |   |
+|  | [Stripe Card Element]   |  | Subtotal $78|   |
+|  |                         |  | Tax      $8 |   |
+|  | Billing Address         |  | ----------- |   |
+|  | [Address fields]        |  | Total    $86|   |
+|  |                         |  |             |   |
+|  | [Pay $86.00]            |  | [Coupon]    |   |
+|  +-------------------------+  +-------------+   |
+|                                                 |
+|  [Stripe] [SSL] [Money-back guarantee badges]   |
++------------------------------------------------+
+
+Success Page:
++------------------------------------------------+
+| Logo                                  [Home]    |
++------------------------------------------------+
+|                                                 |
+|           [ConfettiBurst]                       |
+|           [SuccessCheck]                        |
+|                                                 |
+|        Payment successful!                      |
+|        Order #12345 confirmed.                  |
+|                                                 |
+|    We've sent a confirmation to your email.     |
+|                                                 |
+|    [Go to Dashboard]    [View Receipt]          |
+|                                                 |
++------------------------------------------------+
+```
+
+---
+
+## Section Sequence
+
+### 1. Minimal Header
+
+```tsx
+<header className="flex items-center justify-between px-6 py-4 border-b border-border">
+  <Logo className="h-6" />
+  <div className="flex items-center gap-2 text-text-secondary">
+    <LockIcon size={14} />
+    <Typography variant="small">Secure checkout</Typography>
+  </div>
+  <Button variant="ghost" size="sm" asChild>
+    <a href="/pricing">Back</a>
+  </Button>
+</header>
+```
+
+### 2. Checkout Form + Order Summary (2-column)
+
+```tsx
+<div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8 md:py-12">
+  <div className="grid grid-cols-1 lg:grid-cols-[1fr_380px] gap-8">
+    {/* Left: Form */}
+    <div className="space-y-6">
+      {/* Contact */}
+      <Card className="glass-panel p-6">
+        <Heading level={4} size="title"  className="mb-4">Contact information</Heading>
+        <div className="space-y-4">
+          <FormField>
+            <FormLabel>Email</FormLabel>
+            <FormControl><Input type="email" /></FormControl>
+          </FormField>
+        </div>
+      </Card>
+
+      {/* Payment */}
+      <Card className="glass-panel p-6">
+        <Heading level={4} size="title"  className="mb-4">Payment</Heading>
+        <CheckoutForm
+          amount={totalAmount}
+          onSuccess={handlePaymentSuccess}
+          onError={handlePaymentError}
+        />
+      </Card>
+
+      {/* Billing Address */}
+      <Card className="glass-panel p-6">
+        <Heading level={4} size="title"  className="mb-4">Billing address</Heading>
+        <div className="grid grid-cols-2 gap-4">
+          <FormField>
+            <FormLabel>First name</FormLabel>
+            <FormControl><Input /></FormControl>
+          </FormField>
+          <FormField>
+            <FormLabel>Last name</FormLabel>
+            <FormControl><Input /></FormControl>
+          </FormField>
+          <FormField className="col-span-2">
+            <FormLabel>Address</FormLabel>
+            <FormControl><Input /></FormControl>
+          </FormField>
+          {/* City, State, ZIP */}
+        </div>
+      </Card>
+    </div>
+
+    {/* Right: Order Summary */}
+    <div className="lg:sticky lg:top-8 self-start">
+      <Card className="glass-panel p-6">
+        <Heading level={4} size="title"  className="mb-4">Order summary</Heading>
+        <div className="space-y-3">
+          {items.map(item => (
+            <div key={item.id} className="flex items-center justify-between">
+              <Typography variant="small">{item.name}</Typography>
+              <Typography variant="small" className="font-medium">${item.price}</Typography>
+            </div>
+          ))}
+        </div>
+        <Separator className="my-4" />
+        <div className="space-y-2">
+          <div className="flex justify-between text-text-secondary text-sm">
+            <span>Subtotal</span><span>${subtotal}</span>
+          </div>
+          <div className="flex justify-between text-text-secondary text-sm">
+            <span>Tax</span><span>${tax}</span>
+          </div>
+        </div>
+        <Separator className="my-4" />
+        <div className="flex justify-between font-bold text-lg">
+          <span>Total</span><span>${total}</span>
+        </div>
+
+        {/* Coupon input */}
+        <div className="mt-4">
+          <InputGroup>
+            <Input placeholder="Coupon code" />
+            <Button variant="outline">Apply</Button>
+          </InputGroup>
+        </div>
+      </Card>
+    </div>
+  </div>
+
+  {/* Trust badges */}
+  <div className="flex items-center justify-center gap-6 mt-8 text-text-tertiary">
+    <div className="flex items-center gap-1 text-sm">
+      <ShieldIcon size={14} /> SSL Encrypted
+    </div>
+    <div className="flex items-center gap-1 text-sm">
+      <RefreshIcon size={14} /> 30-day guarantee
+    </div>
+  </div>
+</div>
+```
+
+### 3. Success Page
+
+```tsx
+<div className="min-h-dvh flex flex-col items-center justify-center p-6 text-center">
+  <ConfettiBurst trigger={showCelebration} />
+  <SuccessCheck className="mb-6" />
+  <Heading level={2} size="section" >Payment successful!</Heading>
+  <Typography variant="p" className="text-text-secondary mt-2 mb-2">
+    Order #{orderId} confirmed.
+  </Typography>
+  <Typography variant="small" className="text-text-tertiary mb-8">
+    We've sent a confirmation to {email}
+  </Typography>
+  <div className="flex gap-4">
+    <Button asChild><a href="/dashboard">Go to Dashboard</a></Button>
+    <Button variant="outline" asChild><a href={receiptUrl}>View Receipt</a></Button>
+  </div>
+</div>
+```
+
+---
+
+## Animation Storyboard
+
+```
+ANIMATION STORYBOARD
+====================
+
+CHECKOUT PAGE:
+BUDGET: 400ms | SPRING: snappy | REDUCED: opacity-only
+
+T+0ms     [header]    Minimal header visible        (instant)
+T+50ms    [contact]   Contact section               {fadeInUp, snappy}
+T+150ms   [payment]   Payment section               {fadeInUp, snappy}
+T+250ms   [address]   Billing address section       {fadeInUp, snappy}
+T+100ms   [summary]   Order summary (right column)  {fadeIn, snappy}
+
+SUCCESS PAGE:
+BUDGET: 500ms | SPRING: bouncy | REDUCED: check visible, no confetti
+
+T+0ms     [confetti]  ConfettiBurst fires            (particle animation)
+T+100ms   [check]     SuccessCheck animates           {scaleIn, bouncy}
+T+300ms   [title]     Success title fades in          {fadeInUp, gentle}
+T+400ms   [details]   Order details fade in           {fadeIn, snappy}
+T+500ms   [actions]   Buttons fade in                 {fadeIn, snappy}
+
+REDUCED MOTION: All items visible immediately, no confetti
+```
+
+---
+
+## Required Components
+
+| Component | Import Path | Purpose |
+|-----------|-------------|---------|
+| `CheckoutForm` | `@vadimcomanescu/nadicode-design-system/checkout-form` | Stripe Elements payment |
+| `Card` | `@vadimcomanescu/nadicode-design-system/card` | Section containers, order summary |
+| `Input` | `@vadimcomanescu/nadicode-design-system/input` | Contact, address fields |
+| `InputGroup` | `@vadimcomanescu/nadicode-design-system/input-group` | Coupon input + apply button |
+| `Button` | `@vadimcomanescu/nadicode-design-system/button` | Submit, apply, navigation |
+| `Typography` | `@vadimcomanescu/nadicode-design-system/typography` | Headings, text |
+| `Separator` | `@vadimcomanescu/nadicode-design-system/separator` | Price dividers |
+| `Logo` | `@vadimcomanescu/nadicode-design-system/logo` | Brand mark |
+| `Form` / `FormField` | `@vadimcomanescu/nadicode-design-system/form` | Form management |
+| `ConfettiBurst` | `@vadimcomanescu/nadicode-design-system/confetti-burst` | Success celebration |
+| `SuccessCheck` | `@vadimcomanescu/nadicode-design-system/success-check` | Success checkmark |
+| `Alert` | `@vadimcomanescu/nadicode-design-system/alert` | Payment errors |
+| `Spinner` | `@vadimcomanescu/nadicode-design-system/spinner` | Processing state |
+
+### Allowed (optional)
+
+`CheckoutFormDemo`, `Label`, `Select` (country picker), `NativeSelect`, `Badge`, `Tooltip`
+
+### Forbidden
+
+`Sidebar`, `NavigationMenu`, `DataTable`, chart components, agentic components, decorative effects, marketing blocks
+
+---
+
+## Required States
+
+| State | Trigger | Visual |
+|-------|---------|--------|
+| `default` | Page loaded | Form ready for input |
+| `submitting` | Pay button clicked | Button shows Spinner, form disabled |
+| `processing` | Stripe processing | "Processing payment..." message |
+| `error` | Payment failed | `Alert` variant="destructive" with error + retry |
+| `success` | Payment succeeded | Redirect to success page with celebration |
+
+---
+
+## Responsive Contract
+
+| Breakpoint | Layout | Order Summary |
+|------------|--------|---------------|
+| Mobile | Single column, summary above form | Collapsible or stacked above form |
+| `lg:` | 2-column: form (flex-1) + summary (380px sticky) | Sticky sidebar |
+
+---
+
+## Styling Rules
+
+- Form sections: `glass-panel p-6`
+- Order summary: `glass-panel p-6`, sticky on desktop
+- Trust badges: `text-text-tertiary`, small, centered
+- No heavy decoration (reduce friction)
+- Minimal navigation (prevent abandonment)
+- Labels always stacked above inputs
+
+---
+
+## Accessibility
+
+- Payment form has proper labels (Stripe Elements handle internal a11y)
+- Error messages use `role="alert"`
+- Form fields have `autocomplete` attributes (email, name, address)
+- Tab order: contact -> payment -> address -> submit
+- Success page auto-announces via `aria-live`
+
+---
+
+## Reference Implementations
+
+- `src/components/ui/CheckoutForm.tsx`
+- `src/components/ui/CheckoutFormDemo.tsx`
+
+---
+
+## Verification
+
+```bash
+npx tsc --noEmit
+npm run lint
+npm run test
+npx vitest run src/test/css-variable-usage.test.ts
+```

package/.agents/skills/seed/recipes/company-about.md

@@ -0,0 +1,276 @@
+# Recipe: Company About
+
+About, manifesto, or team page showcasing company mission, values, team, and partnerships.
+
+## Route Pattern
+
+`/about`, `/manifesto`, or `/chi-siamo`
+
+## Shell
+
+`marketing-shell` (HeaderBlock + FooterBlock)
+
+---
+
+## Layout Blueprint (Desktop)
+
+```
++------------------------------------------------+
+| HeaderBlock: Logo  [Nav links]  [CTA Button]   |
++------------------------------------------------+
+|                                                 |
+|              MISSION HERO                       |
+|    Company mission statement                    |
+|    Subtitle: founding story or tagline          |
+|                                                 |
++------------------------------------------------+
+|                                                 |
+|         VALUES GRID (3-col)                     |
+|  +----------+ +----------+ +----------+         |
+|  | Value 1  | | Value 2  | | Value 3  |         |
+|  +----------+ +----------+ +----------+         |
+|  +----------+ +----------+ +----------+         |
+|  | Value 4  | | Value 5  | | Value 6  |         |
+|  +----------+ +----------+ +----------+         |
+|                                                 |
++------------------------------------------------+
+|                                                 |
+|         TEAM SECTION                            |
+|   +--------+ +--------+ +--------+ +--------+  |
+|   | Member | | Member | | Member | | Member |  |
+|   +--------+ +--------+ +--------+ +--------+  |
+|                                                 |
++------------------------------------------------+
+|        COMPANY STATS                            |
+|   +------+  +------+  +------+  +------+       |
+|   | Year |  | Team |  | Clients| | Projects   |
+|   | 2020 |  |  25  |  |  100+  | |  500+  |   |
+|   +------+  +------+  +------+  +------+       |
++------------------------------------------------+
+|         PARTNERS / LOGO CLOUD                   |
+|   Partner and technology logos                   |
++------------------------------------------------+
+|         FINAL CTA SECTION                       |
+|    "Join our mission" + [CTA Button]            |
++------------------------------------------------+
+| FooterBlock: columns + social + legal           |
++------------------------------------------------+
+```
+
+---
+
+## Section Sequence
+
+### 1. Header
+
+```tsx
+<HeaderBlock logo={<Logo />} links={navLinks} actions={<Button>Contact Us</Button>} />
+```
+
+### 2. Mission Hero
+
+```tsx
+<section className="relative py-24 md:py-32 overflow-hidden">
+  <ShaderBackground shader="meshGradient" intent="hero" opacity={0.15} />
+  <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">Our Story</Badge>
+      </motion.div>
+      <motion.h1 variants={heroStagger.child} className="text-4xl md:text-6xl font-bold tracking-tight">
+        {missionStatement}
+      </motion.h1>
+      <motion.p variants={heroStagger.child} className="mt-6 text-lg md:text-xl text-text-secondary max-w-3xl mx-auto">
+        {foundingStory}
+      </motion.p>
+    </motion.div>
+  </div>
+</section>
+```
+
+### 3. Values 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 Values</Heading>
+        <Typography variant="lead" className="mt-4 text-text-secondary">
+          The principles that guide everything we do
+        </Typography>
+      </div>
+      <FeatureGridBlock features={values} columns={3} />
+    </div>
+  </section>
+</ScrollFadeIn>
+```
+
+### 4. Team Section
+
+```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" >Meet the Team</Heading>
+        <Typography variant="lead" className="mt-4 text-text-secondary">
+          The people behind the mission
+        </Typography>
+      </div>
+      <TeamBlock members={teamMembers} />
+    </div>
+  </section>
+</ScrollFadeIn>
+```
+
+### 5. Company Stats
+
+```tsx
+<ScrollFadeIn>
+  <section className="py-16 md:py-24">
+    <StatsMarketingBlock stats={companyStats} />
+  </section>
+</ScrollFadeIn>
+```
+
+### 6. Partners / Logo Cloud
+
+```tsx
+<ScrollFadeIn>
+  <section className="py-12 md:py-16 bg-muted">
+    <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">
+        Our partners and technology stack
+      </Typography>
+      <LogoCloud logos={partnerLogos} />
+    </div>
+  </section>
+</ScrollFadeIn>
+```
+
+### 7. Final CTA
+
+```tsx
+<ScrollFadeIn>
+  <section className="py-16 md:py-24">
+    <CallToActionBlock
+      title="Join our mission"
+      description="We're always looking for talented people who share our values."
+      action={<Button size="lg">Get in Touch</Button>}
+    />
+  </section>
+</ScrollFadeIn>
+```
+
+### 8. Footer
+
+```tsx
+<FooterBlock columns={footerColumns} social={socialLinks} legal={legalLinks} />
+```
+
+---
+
+## Animation Storyboard
+
+```
+ANIMATION STORYBOARD
+====================
+BUDGET: 800ms (above-fold) | SPRING: dramatic (hero), snappy (rest) | REDUCED: opacity-only
+
+T+0ms     [nav]        Header visible                  (instant)
+T+100ms   [badge]      Story badge                     {fadeIn, snappy}
+T+200ms   [headline]   Mission statement               {fadeInUp, dramatic}
+T+400ms   [subtitle]   Founding story                  {fadeInUp, dramatic}
+T+600ms   [shader]     Hero shader appears             {fadeIn, gentle}
+
+SCROLL-TRIGGERED (below fold):
+[values]       ScrollFadeIn at 20% visible    {fadeInUp, snappy, stagger 100ms}
+[team]         ScrollFadeIn at 20% visible    {fadeInUp, snappy, stagger 80ms}
+[stats]        ScrollFadeIn at 20% visible    {fadeInUp, snappy}
+[partners]     ScrollFadeIn at 20% visible    {fadeIn, gentle}
+[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 |
+| `TeamBlock` | `@vadimcomanescu/nadicode-design-system/team-block` | Team member grid |
+
+### Allowed (optional)
+
+`FeatureBlock`, `FeatureGridBlock`, `StatsMarketingBlock`, `LogoCloud`, `CallToActionBlock`, `HeroBlock`, `HeroSectionBlock`, `Card`, `ShaderBackground`, `TestimonialsBlock`
+
+### Forbidden
+
+`Sidebar`, `DataTable`, `Form`, `FormWizard`, `AgentTeamPanel`, `PricingBlock`, `SettingsLayout`, `ChatLayout`
+
+---
+
+## Required States
+
+| State | Trigger | Visual |
+|-------|---------|--------|
+| `default` | Page loaded | Full about page content |
+| `mobile-navigation` | Hamburger tap | Mobile nav drawer/sheet |
+
+---
+
+## Responsive Contract
+
+| Breakpoint | Hero | Values | Team | Stats | Content Width |
+|------------|------|--------|------|-------|---------------|
+| Mobile | Stacked, text-center | 1 col | 1 col | 2 col | px-4 |
+| `sm:` | Stacked, text-center | 2 col | 2 col | 2 col | px-6, max-w-7xl |
+| `lg:` | Centered | 3 col | 4 col | 4 col | px-8, max-w-7xl |
+
+---
+
+## Styling Rules
+
+- Mission hero uses `ShaderBackground` with low opacity for subtle ambient
+- Value cards use `glass-panel` with icon + heading + description
+- Team cards use circular avatar, name, role, and social links
+- Section backgrounds alternate: `bg-background` and `bg-muted`
+- Partner logos are grayscale with hover color reveal
+- No raw palette colors; semantic tokens only
+
+---
+
+## Accessibility
+
+- Hero heading is `<h1>`, section headings are `<h2>`
+- Skip-nav link to main content
+- Team member images have alt text with name and role
+- Social links have aria-labels
+- Mobile nav is keyboard accessible with focus trap
+
+---
+
+## Reference Implementations
+
+- `src/components/blocks/TeamBlock.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
+```