@vadimcomanescu/nadicode-design-system 4.0.0 → 4.0.2

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

@@ -1,276 +0,0 @@
-# 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
-```

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

@@ -1,234 +0,0 @@
-# Recipe: Company Contact
-
-Contact page with form, company information, and FAQ.
-
-## Route Pattern
-
-`/contact` or `/contatti`
-
-## Shell
-
-`marketing-shell` (HeaderBlock + FooterBlock)
-
----
-
-## Layout Blueprint (Desktop)
-
-```
-+------------------------------------------------+
-| HeaderBlock: Logo  [Nav links]  [CTA Button]   |
-+------------------------------------------------+
-|                                                 |
-|              HEADING                            |
-|    "Get in Touch"                               |
-|    Subtitle                                     |
-|                                                 |
-+------------------------------------------------+
-|                                                 |
-|   CONTACT BLOCK (2-col)                         |
-|   +-------------------+ +------------------+    |
-|   | Contact form      | | Company info     |    |
-|   | Name, Email,      | | Address, phone,  |    |
-|   | Subject, Message  | | email, map       |    |
-|   | [Submit]          | |                  |    |
-|   +-------------------+ +------------------+    |
-|                                                 |
-+------------------------------------------------+
-|                                                 |
-|   INFO CARDS (3-col)                            |
-|   +----------+ +----------+ +----------+        |
-|   | Email    | | Phone    | | Office   |        |
-|   +----------+ +----------+ +----------+        |
-|                                                 |
-+------------------------------------------------+
-|                                                 |
-|         FAQ (Accordion)                         |
-|                                                 |
-+------------------------------------------------+
-| FooterBlock: columns + social + legal           |
-+------------------------------------------------+
-```
-
----
-
-## Section Sequence
-
-### 1. Header
-
-```tsx
-<HeaderBlock logo={<Logo />} links={navLinks} actions={<Button>Book a Call</Button>} />
-```
-
-### 2. Heading
-
-```tsx
-<section className="py-16 md:py-24">
-  <div className="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.h1 variants={heroStagger.child} className="text-4xl md:text-5xl font-bold tracking-tight">
-        Get in Touch
-      </motion.h1>
-      <motion.p variants={heroStagger.child} className="mt-4 text-lg text-text-secondary max-w-xl mx-auto">
-        Have a question or want to work together? We'd love to hear from you.
-      </motion.p>
-    </motion.div>
-  </div>
-</section>
-```
-
-### 3. Contact Block
-
-```tsx
-<ScrollFadeIn>
-  <section className="pb-16 md:pb-24">
-    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-      <ContactBlock
-        fields={contactFields}
-        companyInfo={companyInfo}
-        onSubmit={handleSubmit}
-      />
-    </div>
-  </section>
-</ScrollFadeIn>
-```
-
-### 4. Info Cards
-
-```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="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
-        {contactChannels.map(channel => (
-          <Card key={channel.id} className="glass-panel p-6 text-center">
-            <channel.icon className="mx-auto mb-4 h-8 w-8 text-accent" />
-            <Heading level={4} size="title" >{channel.label}</Heading>
-            <Typography variant="body" className="mt-2 text-text-secondary">
-              {channel.value}
-            </Typography>
-          </Card>
-        ))}
-      </div>
-    </div>
-  </section>
-</ScrollFadeIn>
-```
-
-### 5. FAQ
-
-```tsx
-<ScrollFadeIn>
-  <section className="py-16 md:py-24">
-    <FAQBlock items={contactFaqItems} />
-  </section>
-</ScrollFadeIn>
-```
-
-### 6. Footer
-
-```tsx
-<FooterBlock columns={footerColumns} social={socialLinks} legal={legalLinks} />
-```
-
----
-
-## Animation Storyboard
-
-```
-ANIMATION STORYBOARD
-====================
-BUDGET: 600ms (above-fold) | SPRING: dramatic (heading), snappy (rest) | REDUCED: opacity-only
-
-T+0ms     [nav]        Header visible                  (instant)
-T+100ms   [headline]   Page heading                    {fadeInUp, dramatic}
-T+250ms   [subtitle]   Subtitle                        {fadeInUp, dramatic}
-
-SCROLL-TRIGGERED (below fold):
-[contact]      ScrollFadeIn at 20% visible    {fadeInUp, snappy}
-[info-cards]   ScrollFadeIn at 20% visible    {fadeInUp, snappy, stagger 100ms}
-[faq]          ScrollFadeIn at 20% visible    {fadeInUp, snappy}
-
-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 and form submit |
-| `ScrollFadeIn` | `@vadimcomanescu/nadicode-design-system/scroll-fade-in` | Below-fold animations |
-| `ContactBlock` | `@vadimcomanescu/nadicode-design-system/contact-block` | Contact form + company info |
-
-### Allowed (optional)
-
-`FAQBlock`, `Card`, `FeatureGridBlock`, `Badge`, `HeroBlock`, `HeroSectionBlock`, `CallToActionBlock`, `Typography`
-
-### Forbidden
-
-`Sidebar`, `DataTable`, `FormWizard`, `AgentTeamPanel`, `PricingBlock`, `SettingsLayout`, `ChatLayout`
-
----
-
-## Required States
-
-| State | Trigger | Visual |
-|-------|---------|--------|
-| `default` | Page loaded | Form ready for input |
-| `form-submitting` | Form submit | Button shows loading spinner, fields disabled |
-| `form-success` | Submission succeeds | Success toast/message, form resets |
-| `form-error` | Submission fails | Error toast/message, form retains values |
-
----
-
-## Responsive Contract
-
-| Breakpoint | Heading | Contact Block | Info Cards | Content Width |
-|------------|---------|---------------|------------|---------------|
-| Mobile | text-center | Stacked (form above info) | 1 col | px-4 |
-| `sm:` | text-center | Stacked (form above info) | 2 col | px-6, max-w-7xl |
-| `lg:` | text-center | Side-by-side (form left, info right) | 3 col | px-8, max-w-7xl |
-
----
-
-## Styling Rules
-
-- Contact form container uses `glass-panel` for visual depth
-- Info cards use `glass-panel` with centered icon layout
-- Section backgrounds alternate: `bg-background` and `bg-muted`
-- Form inputs use standard Seed Input/Textarea components
-- Submit button uses `Button` with loading state
-- No raw palette colors; semantic tokens only
-
----
-
-## Accessibility
-
-- Page heading is `<h1>`, section headings are `<h2>`
-- Form fields have visible stacked labels (no floating labels)
-- Required fields marked with `aria-required="true"`
-- Form errors announced via `aria-live="polite"` region
-- Submit button disabled during submission with `aria-disabled`
-- Skip-nav link to main content
-- Mobile nav is keyboard accessible with focus trap
-
----
-
-## Reference Implementations
-
-- `src/components/blocks/ContactBlock.tsx`
-- `src/components/blocks/FAQBlock.tsx`
-
----
-
-## Verification
-
-```bash
-npx tsc --noEmit
-npm run lint
-npm run test
-npx vitest run src/test/css-variable-usage.test.ts
-```