commit 47f63ee3902435f6c1f46bda48c7bb99da1ac86b
Author: dk <kudin.dima@gmail.com>
Date:   Wed Apr 15 09:58:35 2026 +0000

    Initial commit

diff --git a/.env b/.env
new file mode 100644
index 0000000..f762bcd
--- /dev/null
+++ b/.env
@@ -0,0 +1,4 @@
+
+        NEXT_PUBLIC_API_URL=https://api.webild.io
+        NEXT_PUBLIC_PROJECT_ID=5ba6637d-cc62-45b3-b459-eacdb570d950
+        
\ No newline at end of file
diff --git a/.gitea/workflows/build.yml b/.gitea/workflows/build.yml
new file mode 100644
index 0000000..9aa1e08
--- /dev/null
+++ b/.gitea/workflows/build.yml
@@ -0,0 +1,37 @@
+name: Code Check
+
+on:
+  workflow_dispatch:
+
+jobs:
+  check:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        run: git clone --depth 1 --branch ${{ gitea.ref_name }} ${{ gitea.server_url }}/${{ gitea.repository }}.git . || exit 1
+
+      - name: Install dependencies
+        run: |
+          if [ -d "/var/node_modules_cache/node_modules" ]; then
+            ln -s /var/node_modules_cache/node_modules ./node_modules
+          else
+            npm ci --prefer-offline --no-audit
+          fi
+        timeout-minutes: 5
+
+      - name: TypeScript check
+        run: npm run typecheck 2>&1 | tee build.log
+        timeout-minutes: 3
+
+      - name: ESLint check
+        run: npm run lint 2>&1 | tee -a build.log
+        timeout-minutes: 3
+
+      - name: Upload build log on failure
+        if: failure()
+        uses: actions/upload-artifact@v3
+        with:
+          name: build-log
+          path: build.log
+          retention-days: 1
diff --git a/NEW.md b/NEW.md
new file mode 100644
index 0000000..27cb6d0
--- /dev/null
+++ b/NEW.md
@@ -0,0 +1,218 @@
+# AI-Friendly Component Library
+
+## The Problem
+
+Current architecture is optimized for human developers (DRY, reusable, flexible) but this makes AI editing fail. AI can't trace through ThemeProvider indirection, 40+ prop interfaces, nested component layers, and custom Tailwind scales. It hallucinates because it can't see the actual output.
+
+## The Solution
+
+Shift from human-optimized to AI-optimized code:
+- **Explicit over implicit** - All styles visible in file, no ThemeProvider magic
+- **Flat over nested** - Direct components, no wrapper layers to trace through
+- **Concrete over abstract** - Actual Tailwind classes, not prop names that map to hidden styles
+- **Standard over custom** - Default Tailwind values AI already knows
+- **Simple over flexible** - One way to do things, not 11 variants
+
+Components become templates that AI reads, understands, and edits directly.
+
+---
+
+## 1. Backend-Driven Sections
+
+Generated website repository only contains what is used, plus general UI components. Section components are stored on the backend and injected when needed, not bundled in the boilerplate.
+
+**Alternative:** If backend approach takes too long, keep all sections in the boilerplate but with the new simplified structure defined below.
+
+---
+
+## 2. Props & Structure
+
+Remove all styling/className props. AI edits classes directly in the component file.
+
+**Option A - Minimal props:** Keep text, links, assets, arrays, icons as props. Backend passes content, AI edits props in page file.
+
+**Option B - No props:** All content hardcoded in section file. Backend injects entire file with content baked in. AI edits section file directly. Maximum explicitness.
+
+**Flat structure:** Sections use direct components (TextAnimation, Button, MediaContent) not wrapper components like TextBox that nest other components inside.
+
+---
+
+## 3. Framer Motion for Element Animations
+
+Replace GSAP (ScrollTrigger, `gsap.context()`, `ctx.revert()`) with Framer Motion `motion` divs for cards, buttons, tags, and other elements. Use `whileInView` for scroll-triggered animations.
+
+---
+
+## 4. Simplified Tailwind & Single CSS File
+
+Remove all custom Tailwind values (spacing, widths, gaps). Use default Tailwind classes.
+
+**Keep:**
+- Content width approach (for page width and carousels)
+- Fluid font sizes (AI picks bad font sizes otherwise)
+
+**One globals.css file with:**
+- Color variables in `:root`
+- `--radius` variable, applied globally via `@layer base`
+- Card styles
+- Button styles
+- Utility classes (masks, animations) - consolidated, fewer variants
+- Base styling (body defaults, scrollbar, heading font-family)
+
+AI picks from a reference list of available styles and writes them directly to globals.css.
+
+---
+
+## 5. Remove ThemeProvider
+
+Delete the entire ThemeProvider system. No dynamic style injection.
+
+**Card/button styles:** AI chooses on backend, adds one card style, one primary button style, one secondary button style to globals.css.
+
+**Text animations:** Remove TextBox component. Use simple `TextAnimation` component in section files with `text` and `animationType` props.
+
+**Button:** Single `components/ui/Button.tsx` with `text`, `href`, and `className` (e.g. `primary-button` defined in globals.css).
+
+**Content width:** Fixed value in globals.css.
+
+**Text sizing:** Fixed values in globals.css. Future: AI picks from 3 presets on backend and adds to globals.css.
+
+**Background components:** Remove all (aurora, grid, floatingGradient, etc.).
+
+**Fonts:** Keep current logic.
+
+---
+
+## 6. New Folder Structure
+
+```
+src/
+├── app/                    # Pages
+├── components/
+│   ├── ui/                 # Atomic UI components
+│   └── [sections]          # Section components flat, not nested (injected from backend)
+├── hooks/                  # Common hooks
+├── lib/                    # Utilities
+└── styles/
+    └── globals.css         # Single CSS file
+```
+
+Remove: `providers/themeProvider/`, multiple CSS files, `button/` variants folder, `text/` folder, `background/` folder.
+
+---
+
+## 7. Atomic UI Components
+
+Add simple, single-purpose components to `components/ui/`:
+
+Button, TextAnimation, MediaContent, Toggle, Dropdown, Accordion, Avatar, Badge, Breadcrumb, Calendar, Chart, Checkbox, Form, Input, Label, Tooltip
+
+Expand as needed.
+
+---
+
+## 8. Simplify Complex Components
+
+**Navbar:** Separate navbar components instead of one with variants. AI chooses which one. Reduce to 4 navbars for now.
+
+**CardStack → GridLayout:** Replace complex CardStack (mode, gridVariant, carouselThreshold, ~40 props) with simple wrapper. Children as items. Single prop: items per row (3 or 4). Under = grid, over = carousel. Carousel mode keeps controls (prev/next, progress bar). No title/description/animation props - sections handle all that directly. Remove timelines, grid configs, auto-carousel variants for now, refactor later.
+
+**TextBox:** Remove completely. Use TextAnimation and Button directly in sections.
+
+---
+
+## 9. Consistent File Patterns
+
+Every section file follows the EXACT same structure. AI sees one section, knows how all work.
+
+**Template:**
+```
+1. IMPORTS (same order: react, framer-motion, ui components, icons)
+2. CONTENT (variables at top if Option B)
+3. COMPONENT (predictable JSX order)
+4. EXPORT (always at bottom)
+```
+
+**JSX order:** tag → title → description → buttons → media (always same sequence)
+
+---
+
+## 10. Short Files, No Sub-components
+
+**Line limits:**
+- Sections: under 100 lines
+- UI components: under 50 lines
+
+**Key rule:** Don't split into sub-components to achieve this. Sub-components add nesting/indirection. Instead, simplify the section itself.
+
+If a section is too long, it's too complex. Simplify the design, don't extract parts.
+
+---
+
+## 11. Content at Top
+
+If using Option B (no props), put all editable content as variables at the very top of the file.
+
+AI immediately knows: "edit content? check the top."
+
+---
+
+## 12. Remove Complex Components
+
+Remove overly complex components for now. Add back simplified versions later if needed.
+
+---
+
+## 13. CSS Class Organization
+
+**Consistent class order:** layout → spacing → sizing → typography → colors → effects
+
+**Keep className short.** Too many classes = section too complex. Use global CSS (`.card`, `.btn-primary`) for repeated patterns.
+
+**No dynamic classes in sections.** Avoid `cls(condition && "class")`. Keep it explicit.
+
+**One line if short, split by category if long.**
+
+---
+
+## Implementation Roadmap
+
+### Phase 1: Foundation (Delete)
+- Delete `providers/themeProvider/` (13 files)
+- Delete `components/background/` (27 files)
+- Delete `components/Textbox.tsx`
+- Delete `components/text/` (GSAP TextAnimation)
+- Consolidate all CSS → single `styles/globals.css`
+
+### Phase 2: Core Simplification
+- Button → single `ui/Button.tsx` (50 lines max)
+- Navbar → 4 separate components, no animation hooks
+- TextAnimation → new Framer Motion version
+- CardStack → simple GridLayout wrapper
+
+### Phase 3: Section Refactoring
+- Remove all className/containerClassName props
+- Remove useTheme() calls
+- Each section under 100 lines
+- Content variables at top (if Option B)
+- Flat structure, no nested wrappers
+
+### Phase 4: Organize
+- Create `components/ui/` with atomic components
+- Move hooks to `hooks/` folder
+- Update all imports
+
+---
+
+## Current → Target
+
+| Metric | Current | Target |
+|--------|---------|--------|
+| Total files | ~270 | ~100 |
+| Lines of code | ~25,000 | ~10,000 |
+| Props per section | 20-40 | 5-10 |
+| CSS files | 37 | 1 |
+| Button variants | 11 | 1 |
+| Navbar variants | 5 | 4 |
+
+---
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..e215bc4
--- /dev/null
+++ b/README.md
@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
diff --git a/THEME_PROVIDER_OPTIONS.txt b/THEME_PROVIDER_OPTIONS.txt
new file mode 100644
index 0000000..92415cc
--- /dev/null
+++ b/THEME_PROVIDER_OPTIONS.txt
@@ -0,0 +1,117 @@
+================================================================================
+                        THEME PROVIDER OPTIONS
+================================================================================
+
+PROPS (All Required except showBlurBottom)
+-------------------------------------------
+
+1. defaultButtonVariant
+   • "hover-magnetic"
+   • "hover-bubble"
+   • "expand-hover"
+   • "elastic-effect"
+   • "bounce-effect"
+   • "icon-arrow"
+   • "shift-hover"
+   • "text-stagger"
+   • "text-shift"
+   • "directional-hover"
+
+2. defaultTextAnimation
+   • "entrance-slide"
+   • "reveal-blur"
+   • "background-highlight"
+
+3. borderRadius
+   • "rounded"
+   • "soft"
+   • "pill"
+
+4. contentWidth
+   • "small"
+   • "smallMedium"
+   • "compact"
+   • "mediumSmall"
+   • "medium"
+   • "mediumLarge"
+
+5. sizing
+   • "medium"
+   • "mediumLarge"
+   • "largeSmall"
+   • "large"
+   • "mediumSizeLargeTitles"
+   • "mediumLargeSizeLargeTitles"
+   • "largeSmallSizeLargeTitles"
+   • "largeSizeMediumTitles"
+   • "mediumLargeSizeMediumTitles"
+   • "largeSmallSizeMediumTitles"
+
+6. background
+   • "none"
+   • "circleGradient"
+   • "aurora"
+   • "floatingGradient"
+   • "noise"
+   • "noiseDiagonalGradient"
+   • "fluid"
+   • "blurBottom"
+   • "grid"
+
+7. cardStyle
+   • "solid"
+   • "outline"
+   • "gradient-mesh"
+   • "gradient-radial"
+   • "inset"
+   • "glass-elevated"
+   • "glass-depth"
+   • "gradient-bordered"
+   • "layered-gradient"
+   • "soft-shadow"
+   • "subtle-shadow"
+
+8. primaryButtonStyle
+   • "gradient"
+   • "shadow"
+   • "flat"
+   • "radial-glow"
+   • "diagonal-gradient"
+   • "double-inset"
+   • "primary-glow"
+
+9. secondaryButtonStyle
+   • "glass"
+   • "solid"
+   • "layered"
+   • "radial-glow"
+
+10. headingFontWeight
+    • "light"
+    • "normal"
+    • "medium"
+    • "semibold"
+    • "bold"
+    • "extrabold"
+
+================================================================================
+
+EXAMPLE USAGE:
+
+<ThemeProvider
+  defaultButtonVariant="text-stagger"
+  defaultTextAnimation="entrance-slide"
+  borderRadius="pill"
+  contentWidth="medium"
+  sizing="medium"
+  background="aurora"
+  cardStyle="glass-elevated"
+  primaryButtonStyle="gradient"
+  secondaryButtonStyle="glass"
+  headingFontWeight="medium"
+  showBlurBottom={false}
+>
+  {children}
+</ThemeProvider>
+
+================================================================================
diff --git a/colorThemes.css b/colorThemes.css
new file mode 100644
index 0000000..43d4f5a
--- /dev/null
+++ b/colorThemes.css
@@ -0,0 +1,804 @@
+/* ============================================ */
+/* LIGHT THEME VARIANTS */
+/* ============================================ */
+
+/* Light Theme - Minimal Dark Blue */
+:root[data-theme="minimal-dark-blue"] {
+  --background: #ffffff;
+  --card: #f9f9f9;
+  --foreground: #000612e6;
+  --primary-cta: #15479c;
+  --primary-cta-text: #ffffff;
+  --secondary-cta: #f9f9f9;
+  --secondary-cta-text: #000612e6;
+  --accent: #e2e2e2;
+  --background-accent: #c4c4c4;
+}
+
+/* Light Theme - Minimal Dark Green */
+:root[data-theme="minimal-dark-green"] {
+  --background: #ffffff;
+  --card: #f9f9f9;
+  --foreground: #000f06e6;
+  --primary-cta: #0a7039;
+  --primary-cta-text: #ffffff;
+  --secondary-cta: #f9f9f9;
+  --secondary-cta-text: #000f06e6;
+  --accent: #e2e2e2;
+  --background-accent: #c4c4c4;
+}
+
+/* Light Theme - Minimal Light Red */
+:root[data-theme="minimal-light-red"] {
+  --background: #ffffff;
+  --card: #f9f9f9;
+  --foreground: #120006e6;
+  --primary-cta: #e63946;
+  --primary-cta-text: #ffffff;
+  --secondary-cta: #f9f9f9;
+  --secondary-cta-text: #120006e6;
+  --accent: #e2e2e2;
+  --background-accent: #c4c4c4;
+}
+
+/* Light Theme - Minimal Bright Blue */
+:root[data-theme="minimal-bright-blue"] {
+  --background: #ffffff;
+  --card: #f9f9f9;
+  --foreground: #000612e6;
+  --primary-cta: #106EFB;
+  --primary-cta-text: #ffffff;
+  --secondary-cta: #f9f9f9;
+  --secondary-cta-text: #000612e6;
+  --accent: #e2e2e2;
+  --background-accent: #106EFB;
+}
+
+/* Light Theme - Minimal Bright Orange */
+:root[data-theme="minimal-bright-orange"] {
+  --background: #ffffff;
+  --card: #f9f9f9;
+  --foreground: #120a00e6;
+  --primary-cta: #E34400;
+  --primary-cta-text: #ffffff;
+  --secondary-cta: #f9f9f9;
+  --secondary-cta-text: #120a00e6;
+  --accent: #e2e2e2;
+  --background-accent: #E34400;
+}
+
+/* Light Theme - Minimal Golden Orange */
+:root[data-theme="minimal-golden-orange"] {
+  --background: #ffffff;
+  --card: #f9f9f9;
+  --foreground: #120a00e6;
+  --primary-cta: #FF7B05;
+  --primary-cta-text: #ffffff;
+  --secondary-cta: #f9f9f9;
+  --secondary-cta-text: #120a00e6;
+  --accent: #e2e2e2;
+  --background-accent: #FF7B05;
+}
+
+/* Light Theme - Minimal Light Orange */
+:root[data-theme="minimal-light-orange"] {
+  --background: #ffffff;
+  --card: #f9f9f9;
+  --foreground: #120a00e6;
+  --primary-cta: #ff8c42;
+  --primary-cta-text: #ffffff;
+  --secondary-cta: #f9f9f9;
+  --secondary-cta-text: #120a00e6;
+  --accent: #e2e2e2;
+  --background-accent: #c4c4c4;
+}
+
+/* Light Theme - Dark Blue */
+:root[data-theme="dark-blue"] {
+  --background: #f5faff;
+  --card: #f1f8ff;
+  --foreground: #001122;
+  --primary-cta: #15479c;
+  --primary-cta-text: #f5faff;
+  --secondary-cta: #ffffff;
+  --secondary-cta-text: #001122;
+  --accent: #a8cce8;
+  --background-accent: #7ba3cf;
+}
+
+/* Light Theme - Dark Green */
+:root[data-theme="dark-green"] {
+  --background: #fafffb;
+  --card: #f7fffa;
+  --foreground: #001a0a;
+  --primary-cta: #0a7039;
+  --primary-cta-text: #fafffb;
+  --secondary-cta: #ffffff;
+  --secondary-cta-text: #001a0a;
+  --accent: #a8d9be;
+  --background-accent: #6bbf8e;
+}
+
+/* Light Theme - Light Red */
+:root[data-theme="light-red"] {
+  --background: #fffafa;
+  --card: #fff7f7;
+  --foreground: #1a0000;
+  --primary-cta: #e63946;
+  --primary-cta-text: #fffafa;
+  --secondary-cta: #ffffff;
+  --secondary-cta-text: #1a0000;
+  --accent: #f5c4c7;
+  --background-accent: #f09199;
+}
+
+/* Light Theme - Light Purple */
+:root[data-theme="light-purple"] {
+  --background: #fbfaff;
+  --card: #f7f5ff;
+  --foreground: #0f0022;
+  --primary-cta: #8b5cf6;
+  --primary-cta-text: #fbfaff;
+  --secondary-cta: #ffffff;
+  --secondary-cta-text: #0f0022;
+  --accent: #d8cef5;
+  --background-accent: #c4a8f9;
+}
+
+/* Light Theme - Warm Cream */
+:root[data-theme="warm-cream"] {
+  --background: #f6f0e9;
+  --card: #efe7dd;
+  --foreground: #2b180a;
+  --primary-cta: #2b180a;
+  --primary-cta-text: #f6f0e9;
+  --secondary-cta: #efe7dd;
+  --secondary-cta-text: #2b180a;
+  --accent: #94877c;
+  --background-accent: #afa094;
+}
+
+/* Light Theme - Gray Blue Accent */
+:root[data-theme="gray-blue-accent"] {
+  --background: #f5f5f5;
+  --card: #ffffff;
+  --foreground: #1c1c1c;
+  --primary-cta: #1c1c1c;
+  --primary-cta-text: #f5f5f5;
+  --secondary-cta: #ffffff;
+  --secondary-cta-text: #1c1c1c;
+  --accent: #15479c;
+  --background-accent: #a8cce8;
+}
+
+/* Light Theme - Gray Green Accent */
+:root[data-theme="gray-green-accent"] {
+  --background: #f5f5f5;
+  --card: #ffffff;
+  --foreground: #1c1c1c;
+  --primary-cta: #1c1c1c;
+  --primary-cta-text: #f5f5f5;
+  --secondary-cta: #ffffff;
+  --secondary-cta-text: #1c1c1c;
+  --accent: #159c49;
+  --background-accent: #a8e8ba;
+}
+
+/* Light Theme - Gray Red Accent */
+:root[data-theme="gray-red-accent"] {
+  --background: #f5f5f5;
+  --card: #ffffff;
+  --foreground: #1c1c1c;
+  --primary-cta: #1c1c1c;
+  --primary-cta-text: #f5f5f5;
+  --secondary-cta: #ffffff;
+  --secondary-cta-text: #1c1c1c;
+  --accent: #e63946;
+  --background-accent: #e8bea8;
+}
+
+/* Light Theme - Gray Purple Accent */
+:root[data-theme="gray-purple-accent"] {
+  --background: #f5f5f5;
+  --card: #ffffff;
+  --foreground: #1c1c1c;
+  --primary-cta: #1c1c1c;
+  --primary-cta-text: #f5f5f5;
+  --secondary-cta: #ffffff;
+  --secondary-cta-text: #1c1c1c;
+  --accent: #6139e6;
+  --background-accent: #b3a8e8;
+}
+
+/* Light Theme - Warm Beige */
+:root[data-theme="warm-beige"] {
+  --background: #efebe5;
+  --card: #f7f2ea;
+  --foreground: #000000;
+  --primary-cta: #000000;
+  --primary-cta-text: #efebe5;
+  --secondary-cta: #ffffff;
+  --secondary-cta-text: #000000;
+  --accent: #ffffff;
+  --background-accent: #e1b875;
+}
+
+/* Light Theme - Gray Teal Green */
+:root[data-theme="gray-teal-green"] {
+  --background: #f5f5f5;
+  --card: #ffffff;
+  --foreground: #1c1c1c;
+  --primary-cta: #1f514c;
+  --primary-cta-text: #f5f5f5;
+  --secondary-cta: #ffffff;
+  --secondary-cta-text: #1c1c1c;
+  --accent: #159c49;
+  --background-accent: #a8e8ba;
+}
+
+/* Light Theme - Gray Navy Blue */
+:root[data-theme="gray-navy-blue"] {
+  --background: #f5f5f5;
+  --card: #ffffff;
+  --foreground: #1c1c1c;
+  --primary-cta: #1f3251;
+  --primary-cta-text: #f5f5f5;
+  --secondary-cta: #ffffff;
+  --secondary-cta-text: #1c1c1c;
+  --accent: #15479c;
+  --background-accent: #a8cce8;
+}
+
+/* Light Theme - Gray Burgundy Red */
+:root[data-theme="gray-burgundy-red"] {
+  --background: #f5f5f5;
+  --card: #ffffff;
+  --foreground: #1c1c1c;
+  --primary-cta: #511f1f;
+  --primary-cta-text: #f5f5f5;
+  --secondary-cta: #ffffff;
+  --secondary-cta-text: #1c1c1c;
+  --accent: #e63946;
+  --background-accent: #e8bea8;
+}
+
+/* Light Theme - Gray Indigo Purple */
+:root[data-theme="gray-indigo-purple"] {
+  --background: #f5f5f5;
+  --card: #ffffff;
+  --foreground: #1c1c1c;
+  --primary-cta: #341f51;
+  --primary-cta-text: #f5f5f5;
+  --secondary-cta: #ffffff;
+  --secondary-cta-text: #1c1c1c;
+  --accent: #6139e6;
+  --background-accent: #b3a8e8;
+}
+
+/* Light Theme - Warm Gray Pink */
+:root[data-theme="warmgray-pink"] {
+  --background: #f7f6f7;
+  --card: #ffffff;
+  --foreground: #1b0c25;
+  --primary-cta: #1b0c25;
+  --primary-cta-text: #f7f6f7;
+  --secondary-cta: #ffffff;
+  --secondary-cta-text: #1b0c25;
+  --accent: #ff93e4;
+  --background-accent: #e8a8c3;
+}
+
+/* Light Theme - Warm Gray Orange */
+:root[data-theme="warmgray-orange"] {
+  --background: #f7f6f7;
+  --card: #ffffff;
+  --foreground: #25190c;
+  --primary-cta: #ff6207;
+  --primary-cta-text: #f7f6f7;
+  --secondary-cta: #ffffff;
+  --secondary-cta-text: #25190c;
+  --accent: #ffce93;
+  --background-accent: #e8cfa8;
+}
+
+/* Light Theme - Warm Gray Blue */
+:root[data-theme="warmgray-blue"] {
+  --background: #f7f6f7;
+  --card: #ffffff;
+  --foreground: #0c1325;
+  --primary-cta: #0798ff;
+  --primary-cta-text: #f7f6f7;
+  --secondary-cta: #ffffff;
+  --secondary-cta-text: #0c1325;
+  --accent: #93c7ff;
+  --background-accent: #a8cde8;
+}
+
+/* Light Theme - Warm Gray Indigo */
+:root[data-theme="warmgray-indigo"] {
+  --background: #f7f6f7;
+  --card: #ffffff;
+  --foreground: #0c1325;
+  --primary-cta: #0b07ff;
+  --primary-cta-text: #f7f6f7;
+  --secondary-cta: #ffffff;
+  --secondary-cta-text: #0c1325;
+  --accent: #93b7ff;
+  --background-accent: #a8bae8;
+}
+
+/* Light Theme - Lavender Peach */
+:root[data-theme="lavender-peach"] {
+  --background: #e3deea;
+  --card: #ffffff;
+  --foreground: #27231f;
+  --primary-cta: #27231f;
+  --primary-cta-text: #e3deea;
+  --secondary-cta: #ffffff;
+  --secondary-cta-text: #27231f;
+  --accent: #c68a62;
+  --background-accent: #c68a62;
+}
+
+/* Light Theme - Lavender Blue */
+:root[data-theme="lavender-blue"] {
+  --background: #e3deea;
+  --card: #ffffff;
+  --foreground: #1f2027;
+  --primary-cta: #1f2027;
+  --primary-cta-text: #e3deea;
+  --secondary-cta: #ffffff;
+  --secondary-cta-text: #1f2027;
+  --accent: #627dc6;
+  --background-accent: #627dc6;
+}
+
+/* Light Theme - Warm Stone */
+:root[data-theme="warm-stone"] {
+  --background: #f5f4ef;
+  --card: #dad6cd;
+  --foreground: #2a2928;
+  --primary-cta: #2a2928;
+  --primary-cta-text: #f5f4ef;
+  --secondary-cta: #ecebea;
+  --secondary-cta-text: #2a2928;
+  --accent: #ffffff;
+  --background-accent: #c6b180;
+}
+
+/* Light Theme - Warm Stone Gray */
+:root[data-theme="warm-stone-gray"] {
+  --background: #f5f4f0;
+  --card: #ffffff;
+  --foreground: #1a1a1a;
+  --primary-cta: #2c2c2c;
+  --primary-cta-text: #f5f4f0;
+  --secondary-cta: #f5f4f0;
+  --secondary-cta-text: #1a1a1a;
+  --accent: #8a8a8a;
+  --background-accent: #e8e6e1;
+}
+
+/* Light Theme - Warm Green */
+:root[data-theme="warm-green"] {
+  --background: #fffefe;
+  --card: #f6f7f4;
+  --foreground: #080908;
+  --primary-cta: #0e3a29;
+  --primary-cta-text: #fffefe;
+  --secondary-cta: #e7eecd;
+  --secondary-cta-text: #080908;
+  --accent: #35c18b;
+  --background-accent: #ecebe4;
+}
+
+/* Light Theme - Warm Sand */
+:root[data-theme="warm-sand"] {
+  --background: #fcf6ec;
+  --card: #f3ede2;
+  --foreground: #2e2521;
+  --primary-cta: #2e2521;
+  --primary-cta-text: #fcf6ec;
+  --secondary-cta: #ffffff;
+  --secondary-cta-text: #2e2521;
+  --accent: #b2a28b;
+  --background-accent: #b2a28b;
+}
+
+/* Light Theme - Warm Gray Red */
+:root[data-theme="warmgray-red"] {
+  --background: #f7f6f7;
+  --card: #ffffff;
+  --foreground: #250c0d;
+  --primary-cta: #b82b40;
+  --primary-cta-text: #f7f6f7;
+  --secondary-cta: #ffffff;
+  --secondary-cta-text: #250c0d;
+  --accent: #b90941;
+  --background-accent: #e8a8b6;
+}
+
+
+/* ============================================ */
+/* DARK THEME VARIANTS */
+/* ============================================ */
+
+/* Dark Theme - Minimal */
+:root[data-theme="dark"] {
+  --background: #0a0a0a;
+  --card: #1a1a1a;
+  --foreground: #ffffffe6;
+  --primary-cta: #e6e6e6;
+  --primary-cta-text: #0a0a0a;
+  --secondary-cta: #1a1a1a;
+  --secondary-cta-text: #ffffffe6;
+  --accent: #737373;
+  --background-accent: #737373;
+}
+
+/* Dark Theme - Minimal Light Blue */
+:root[data-theme="dark-minimal-light-blue"] {
+  --background: #0a0a0a;
+  --card: #1a1a1a;
+  --foreground: #f0f8ffe6;
+  --primary-cta: #cee7ff;
+  --primary-cta-text: #0a0a0a;
+  --secondary-cta: #1a1a1a;
+  --secondary-cta-text: #f0f8ffe6;
+  --accent: #737373;
+  --background-accent: #737373;
+}
+
+/* Dark Theme - Minimal Light Green */
+:root[data-theme="dark-minimal-light-green"] {
+  --background: #0a0a0a;
+  --card: #1a1a1a;
+  --foreground: #f5fffae6;
+  --primary-cta: #80da9b;
+  --primary-cta-text: #0a0a0a;
+  --secondary-cta: #1a1a1a;
+  --secondary-cta-text: #f5fffae6;
+  --accent: #737373;
+  --background-accent: #737373;
+}
+
+/* Dark Theme - Minimal Light Red */
+:root[data-theme="dark-minimal-light-red"] {
+  --background: #0a0a0a;
+  --card: #1a1a1a;
+  --foreground: #fff5f5e6;
+  --primary-cta: #ff7a7a;
+  --primary-cta-text: #0a0a0a;
+  --secondary-cta: #1a1a1a;
+  --secondary-cta-text: #fff5f5e6;
+  --accent: #737373;
+  --background-accent: #737373;
+}
+
+/* Dark Theme - Minimal Light Purple */
+:root[data-theme="dark-minimal-light-purple"] {
+  --background: #0a0a0a;
+  --card: #1a1a1a;
+  --foreground: #f8f5ffe6;
+  --primary-cta: #c89bff;
+  --primary-cta-text: #0a0a0a;
+  --secondary-cta: #1a1a1a;
+  --secondary-cta-text: #f8f5ffe6;
+  --accent: #737373;
+  --background-accent: #737373;
+}
+
+/* Dark Theme - Light Blue White */
+:root[data-theme="dark-light-blue-white"] {
+  --background: #010912;
+  --card: #152840;
+  --foreground: #e6f0ff;
+  --primary-cta: #cee7ff;
+  --primary-cta-text: #010912;
+  --secondary-cta: #0e1a29;
+  --secondary-cta-text: #ffffff;
+  --accent: #3f5c79;
+  --background-accent: #004a93;
+}
+
+/* Dark Theme - Lime */
+:root[data-theme="dark-lime"] {
+  --background: #0a0a0a;
+  --card: #1a1a1a;
+  --foreground: #f5f5f5;
+  --primary-cta: #dfff1c;
+  --primary-cta-text: #0a0a0a;
+  --secondary-cta: #1a1a1a;
+  --secondary-cta-text: #ffffff;
+  --accent: #8b9a1b;
+  --background-accent: #5d6b00;
+}
+
+/* Dark Theme - Gold */
+:root[data-theme="dark-gold"] {
+  --background: #0a0a0a;
+  --card: #1a1a1a;
+  --foreground: #f5f5f5;
+  --primary-cta: #ffdf7d;
+  --primary-cta-text: #0a0a0a;
+  --secondary-cta: #1a1a1a;
+  --secondary-cta-text: #ffffff;
+  --accent: #b8860b;
+  --background-accent: #8b6914;
+}
+
+/* Dark Theme - Crimson */
+:root[data-theme="dark-crimson"] {
+  --background: #0a0a0a;
+  --card: #1a1a1a;
+  --foreground: #f5f5f5;
+  --primary-cta: #ff0000;
+  --primary-cta-text: #ffffff;
+  --secondary-cta: #1a1a1a;
+  --secondary-cta-text: #ffffff;
+  --accent: #991b1b;
+  --background-accent: #7f1d1d;
+}
+
+/* Dark Theme - Midnight Ice */
+:root[data-theme="dark-midnight-ice"] {
+  --background: #000000;
+  --card: #0c0c0c;
+  --foreground: #ffffff;
+  --primary-cta: #cee7ff;
+  --primary-cta-text: #000000;
+  --secondary-cta: #000000;
+  --secondary-cta-text: #ffffff;
+  --accent: #535353;
+  --background-accent: #CEE7FF;
+}
+
+/* Dark Theme - Midnight Blue */
+:root[data-theme="dark-midnight-blue"] {
+  --background: #000000;
+  --card: #0c0c0c;
+  --foreground: #ffffff;
+  --primary-cta: #106EFB;
+  --primary-cta-text: #ffffff;
+  --secondary-cta: #000000;
+  --secondary-cta-text: #ffffff;
+  --accent: #535353;
+  --background-accent: #106EFB;
+}
+
+/* Dark Theme - Blue Orange Accent */
+:root[data-theme="dark-blue-orange-accent"] {
+  --background: #0a0a0a;
+  --card: #1a1a1a;
+  --foreground: #ffffff;
+  --primary-cta: #1f7cff;
+  --primary-cta-text: #ffffff;
+  --secondary-cta: #010101;
+  --secondary-cta-text: #ffffff;
+  --accent: #1f7cff;
+  --background-accent: #f96b2f;
+}
+
+/* Dark Theme - Orange Blue Accent */
+:root[data-theme="dark-orange-blue-accent"] {
+  --background: #0a0a0a;
+  --card: #1a1a1a;
+  --foreground: #ffffff;
+  --primary-cta: #e34400;
+  --primary-cta-text: #ffffff;
+  --secondary-cta: #010101;
+  --secondary-cta-text: #ffffff;
+  --accent: #ff7b05;
+  --background-accent: #106efb;
+}
+
+/* Dark Theme - Minimal Bright Orange */
+:root[data-theme="dark-minimal-bright-orange"] {
+  --background: #0a0a0a;
+  --card: #1a1a1a;
+  --foreground: #ffffff;
+  --primary-cta: #e34400;
+  --primary-cta-text: #ffffff;
+  --secondary-cta: #010101;
+  --secondary-cta-text: #ffffff;
+  --accent: #737373;
+  --background-accent: #e34400;
+}
+
+/* Dark Theme - Minimal Light Orange */
+:root[data-theme="dark-minimal-light-orange"] {
+  --background: #0a0a0a;
+  --card: #1a1a1a;
+  --foreground: #fffaf5e6;
+  --primary-cta: #ffaa70;
+  --primary-cta-text: #0a0a0a;
+  --secondary-cta: #1a1a1a;
+  --secondary-cta-text: #fffaf5e6;
+  --accent: #737373;
+  --background-accent: #737373;
+}
+
+
+/* Dark Theme - Minimal Light Yellow */
+:root[data-theme="dark-minimal-light-yellow"] {
+  --background: #0a0a0a;
+  --card: #1a1a1a;
+  --foreground: #fffffae6;
+  --primary-cta: #fde047;
+  --primary-cta-text: #0a0a0a;
+  --secondary-cta: #1a1a1a;
+  --secondary-cta-text: #fffffae6;
+  --accent: #737373;
+  --background-accent: #737373;
+}
+
+/* Dark Theme - Light Blue */
+:root[data-theme="dark-light-blue"] {
+  --background: #010912;
+  --card: #152840;
+  --foreground: #e6f0ff;
+  --primary-cta: #cee7ff;
+  --primary-cta-text: #010912;
+  --secondary-cta: #0e1a29;
+  --secondary-cta-text: #e6f0ff;
+  --accent: #3f5c79;
+  --background-accent: #004a93;
+}
+
+/* Dark Theme - Light Green */
+:root[data-theme="dark-light-green"] {
+  --background: #000802;
+  --card: #0b1a0b;
+  --foreground: #e6ffe6;
+  --primary-cta: #80da9b;
+  --primary-cta-text: #000802;
+  --secondary-cta: #07170b;
+  --secondary-cta-text: #e6ffe6;
+  --accent: #38714a;
+  --background-accent: #2c6541;
+}
+
+/* Dark Theme - Light Red */
+:root[data-theme="dark-light-red"] {
+  --background: #080000;
+  --card: #1e0d0d;
+  --foreground: #ffe6e6;
+  --primary-cta: #ff7a7a;
+  --primary-cta-text: #080000;
+  --secondary-cta: #1e0909;
+  --secondary-cta-text: #ffe6e6;
+  --accent: #7b4242;
+  --background-accent: #65292c;
+}
+
+/* Dark Theme - Dark Red */
+:root[data-theme="dark-dark-red"] {
+  --background: #060000;
+  --card: #1d0d0d;
+  --foreground: #ffe6e6;
+  --primary-cta: #ff3d4a;
+  --primary-cta-text: #ffffff;
+  --secondary-cta: #1f0a0a;
+  --secondary-cta-text: #ffe6e6;
+  --accent: #7b2d2d;
+  --background-accent: #b8111f;
+}
+
+/* Dark Theme - Light Purple */
+:root[data-theme="dark-light-purple"] {
+  --background: #050012;
+  --card: #040121;
+  --foreground: #f0e6ff;
+  --primary-cta: #c89bff;
+  --primary-cta-text: #050012;
+  --secondary-cta: #1d123b;
+  --secondary-cta-text: #f0e6ff;
+  --accent: #684f7b;
+  --background-accent: #65417c;
+}
+
+/* Dark Theme - Light Orange */
+:root[data-theme="dark-light-orange"] {
+  --background: #080200;
+  --card: #1a0d0b;
+  --foreground: #ffe6d5;
+  --primary-cta: #ffaa70;
+  --primary-cta-text: #080200;
+  --secondary-cta: #170b07;
+  --secondary-cta-text: #ffe6d5;
+  --accent: #7b5e4a;
+  --background-accent: #b8541e;
+}
+
+/* Dark Theme - Deep Blue */
+:root[data-theme="dark-deep-blue"] {
+  --background: #020617;
+  --card: #0f172a;
+  --foreground: #e2e8f0;
+  --primary-cta: #c4d8f9;
+  --primary-cta-text: #020617;
+  --secondary-cta: #041633;
+  --secondary-cta-text: #e2e8f0;
+  --accent: #2d30f3;
+  --background-accent: #1d4ed8;
+}
+
+/* Dark Theme - Violet */
+:root[data-theme="dark-violet"] {
+  --background: #030128;
+  --card: #241f48;
+  --foreground: #ffffff;
+  --primary-cta: #ffffff;
+  --primary-cta-text: #030128;
+  --secondary-cta: #131136;
+  --secondary-cta-text: #d5d4f6;
+  --accent: #44358a;
+  --background-accent: #b597fe;
+}
+
+/* Dark Theme - Ruby */
+:root[data-theme="dark-ruby"] {
+  --background: #000000;
+  --card: #481f1f;
+  --foreground: #ffffff;
+  --primary-cta: #ffffff;
+  --primary-cta-text: #280101;
+  --secondary-cta: #361311;
+  --secondary-cta-text: #f6d4d4;
+  --accent: #51000b;
+  --background-accent: #ff2231;
+}
+
+/* Dark Theme - Emerald */
+:root[data-theme="dark-emerald"] {
+  --background: #000000;
+  --card: #1f4035;
+  --foreground: #ffffff;
+  --primary-cta: #ffffff;
+  --primary-cta-text: #051a12;
+  --secondary-cta: #0d2b1f;
+  --secondary-cta-text: #d4f6e8;
+  --accent: #0d5238;
+  --background-accent: #10b981;
+}
+
+/* Dark Theme - Indigo */
+:root[data-theme="dark-indigo"] {
+  --background: #000000;
+  --card: #1f1f40;
+  --foreground: #ffffff;
+  --primary-cta: #ffffff;
+  --primary-cta-text: #0a051a;
+  --secondary-cta: #0d0d2b;
+  --secondary-cta-text: #d4d4f6;
+  --accent: #3d2880;
+  --background-accent: #663cff;
+}
+
+/* Dark Theme - Forest */
+:root[data-theme="dark-forest"] {
+  --background: #000000;
+  --card: #1a2f1d;
+  --foreground: #ffffff;
+  --primary-cta: #ffffff;
+  --primary-cta-text: #0a1a0c;
+  --secondary-cta: #0d200f;
+  --secondary-cta-text: #d4f6d8;
+  --accent: #1a3d1f;
+  --background-accent: #355e3b;
+}
+
+/* Dark Theme - Mint */
+:root[data-theme="dark-mint"] {
+  --background: #000000;
+  --card: #1a2a1a;
+  --foreground: #ffffff;
+  --primary-cta: #ffffff;
+  --primary-cta-text: #0a150a;
+  --secondary-cta: #0d1a0d;
+  --secondary-cta-text: #e1f6e1;
+  --accent: #2d4a2d;
+  --background-accent: #c1e1c1;
+}
+
+
diff --git a/colorThemes.json b/colorThemes.json
new file mode 100644
index 0000000..2e4fccc
--- /dev/null
+++ b/colorThemes.json
@@ -0,0 +1,677 @@
+{
+  "lightTheme": {
+    "minimalDarkBlue": {
+      "--background": "#ffffff",
+      "--card": "#f9f9f9",
+      "--foreground": "#000612e6",
+      "--primary-cta": "#15479c",
+      "--secondary-cta": "#f9f9f9",
+      "--accent": "#e2e2e2",
+      "--background-accent": "#c4c4c4",
+      "--primary-cta-text": "#ffffff",
+      "--secondary-cta-text": "#000612e6"
+    },
+    "minimalDarkGreen": {
+      "--background": "#ffffff",
+      "--card": "#f9f9f9",
+      "--foreground": "#000f06e6",
+      "--primary-cta": "#0a7039",
+      "--secondary-cta": "#f9f9f9",
+      "--accent": "#e2e2e2",
+      "--background-accent": "#c4c4c4",
+      "--primary-cta-text": "#ffffff",
+      "--secondary-cta-text": "#000f06e6"
+    },
+    "minimalLightRed": {
+      "--background": "#ffffff",
+      "--card": "#f9f9f9",
+      "--foreground": "#120006e6",
+      "--primary-cta": "#e63946",
+      "--secondary-cta": "#f9f9f9",
+      "--accent": "#e2e2e2",
+      "--background-accent": "#c4c4c4",
+      "--primary-cta-text": "#ffffff",
+      "--secondary-cta-text": "#120006e6"
+    },
+    "minimalBrightBlue": {
+      "--background": "#ffffff",
+      "--card": "#f9f9f9",
+      "--foreground": "#000612e6",
+      "--primary-cta": "#106EFB",
+      "--secondary-cta": "#f9f9f9",
+      "--accent": "#e2e2e2",
+      "--background-accent": "#106EFB",
+      "--primary-cta-text": "#ffffff",
+      "--secondary-cta-text": "#000612e6"
+    },
+    "minimalBrightOrange": {
+      "--background": "#ffffff",
+      "--card": "#f9f9f9",
+      "--foreground": "#120a00e6",
+      "--primary-cta": "#E34400",
+      "--secondary-cta": "#f9f9f9",
+      "--accent": "#e2e2e2",
+      "--background-accent": "#E34400",
+      "--primary-cta-text": "#ffffff",
+      "--secondary-cta-text": "#120a00e6"
+    },
+    "minimalGoldenOrange": {
+      "--background": "#ffffff",
+      "--card": "#f9f9f9",
+      "--foreground": "#120a00e6",
+      "--primary-cta": "#FF7B05",
+      "--secondary-cta": "#f9f9f9",
+      "--accent": "#e2e2e2",
+      "--background-accent": "#FF7B05",
+      "--primary-cta-text": "#ffffff",
+      "--secondary-cta-text": "#120a00e6"
+    },
+    "minimalLightOrange": {
+      "--background": "#ffffff",
+      "--card": "#f9f9f9",
+      "--foreground": "#120a00e6",
+      "--primary-cta": "#ff8c42",
+      "--secondary-cta": "#f9f9f9",
+      "--accent": "#e2e2e2",
+      "--background-accent": "#c4c4c4",
+      "--primary-cta-text": "#ffffff",
+      "--secondary-cta-text": "#120a00e6"
+    },
+    "darkBlue": {
+      "--background": "#f5faff",
+      "--card": "#f1f8ff",
+      "--foreground": "#001122",
+      "--primary-cta": "#15479c",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#a8cce8",
+      "--background-accent": "#7ba3cf",
+      "--primary-cta-text": "#f5faff",
+      "--secondary-cta-text": "#001122"
+    },
+    "darkGreen": {
+      "--background": "#fafffb",
+      "--card": "#f7fffa",
+      "--foreground": "#001a0a",
+      "--primary-cta": "#0a7039",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#a8d9be",
+      "--background-accent": "#6bbf8e",
+      "--primary-cta-text": "#fafffb",
+      "--secondary-cta-text": "#001a0a"
+    },
+    "lightRed": {
+      "--background": "#fffafa",
+      "--card": "#fff7f7",
+      "--foreground": "#1a0000",
+      "--primary-cta": "#e63946",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#f5c4c7",
+      "--background-accent": "#f09199",
+      "--primary-cta-text": "#fffafa",
+      "--secondary-cta-text": "#1a0000"
+    },
+    "lightPurple": {
+      "--background": "#fbfaff",
+      "--card": "#f7f5ff",
+      "--foreground": "#0f0022",
+      "--primary-cta": "#8b5cf6",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#d8cef5",
+      "--background-accent": "#c4a8f9",
+      "--primary-cta-text": "#fbfaff",
+      "--secondary-cta-text": "#0f0022"
+    },
+    "warmCream": {
+      "--background": "#f6f0e9",
+      "--card": "#efe7dd",
+      "--foreground": "#2b180a",
+      "--primary-cta": "#2b180a",
+      "--secondary-cta": "#efe7dd",
+      "--accent": "#94877c",
+      "--background-accent": "#afa094",
+      "--primary-cta-text": "#f6f0e9",
+      "--secondary-cta-text": "#2b180a"
+    },
+    "grayBlueAccent": {
+      "--background": "#f5f5f5",
+      "--card": "#ffffff",
+      "--foreground": "#1c1c1c",
+      "--primary-cta": "#1c1c1c",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#15479c",
+      "--background-accent": "#a8cce8",
+      "--primary-cta-text": "#f5f5f5",
+      "--secondary-cta-text": "#1c1c1c"
+    },
+    "grayGreenAccent": {
+      "--background": "#f5f5f5",
+      "--card": "#ffffff",
+      "--foreground": "#1c1c1c",
+      "--primary-cta": "#1c1c1c",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#159c49",
+      "--background-accent": "#a8e8ba",
+      "--primary-cta-text": "#f5f5f5",
+      "--secondary-cta-text": "#1c1c1c"
+    },
+    "grayRedAccent": {
+      "--background": "#f5f5f5",
+      "--card": "#ffffff",
+      "--foreground": "#1c1c1c",
+      "--primary-cta": "#1c1c1c",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#e63946",
+      "--background-accent": "#e8bea8",
+      "--primary-cta-text": "#f5f5f5",
+      "--secondary-cta-text": "#1c1c1c"
+    },
+    "grayPurpleAccent": {
+      "--background": "#f5f5f5",
+      "--card": "#ffffff",
+      "--foreground": "#1c1c1c",
+      "--primary-cta": "#1c1c1c",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#6139e6",
+      "--background-accent": "#b3a8e8",
+      "--primary-cta-text": "#f5f5f5",
+      "--secondary-cta-text": "#1c1c1c"
+    },
+    "warmBeige": {
+      "--background": "#efebe5",
+      "--card": "#f7f2ea",
+      "--foreground": "#000000",
+      "--primary-cta": "#000000",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#ffffff",
+      "--background-accent": "#e1b875",
+      "--primary-cta-text": "#efebe5",
+      "--secondary-cta-text": "#000000"
+    },
+    "grayTealGreen": {
+      "--background": "#f5f5f5",
+      "--card": "#ffffff",
+      "--foreground": "#1c1c1c",
+      "--primary-cta": "#1f514c",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#159c49",
+      "--background-accent": "#a8e8ba",
+      "--primary-cta-text": "#f5f5f5",
+      "--secondary-cta-text": "#1c1c1c"
+    },
+    "grayNavyBlue": {
+      "--background": "#f5f5f5",
+      "--card": "#ffffff",
+      "--foreground": "#1c1c1c",
+      "--primary-cta": "#1f3251",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#15479c",
+      "--background-accent": "#a8cce8",
+      "--primary-cta-text": "#f5f5f5",
+      "--secondary-cta-text": "#1c1c1c"
+    },
+    "grayBurgundyRed": {
+      "--background": "#f5f5f5",
+      "--card": "#ffffff",
+      "--foreground": "#1c1c1c",
+      "--primary-cta": "#511f1f",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#e63946",
+      "--background-accent": "#e8bea8",
+      "--primary-cta-text": "#f5f5f5",
+      "--secondary-cta-text": "#1c1c1c"
+    },
+    "grayIndigoPurple": {
+      "--background": "#f5f5f5",
+      "--card": "#ffffff",
+      "--foreground": "#1c1c1c",
+      "--primary-cta": "#341f51",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#6139e6",
+      "--background-accent": "#b3a8e8",
+      "--primary-cta-text": "#f5f5f5",
+      "--secondary-cta-text": "#1c1c1c"
+    },
+    "warmgrayPink": {
+      "--background": "#f7f6f7",
+      "--card": "#ffffff",
+      "--foreground": "#1b0c25",
+      "--primary-cta": "#1b0c25",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#ff93e4",
+      "--background-accent": "#e8a8c3",
+      "--primary-cta-text": "#f7f6f7",
+      "--secondary-cta-text": "#1b0c25"
+    },
+    "warmgrayOrange": {
+      "--background": "#f7f6f7",
+      "--card": "#ffffff",
+      "--foreground": "#25190c",
+      "--primary-cta": "#ff6207",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#ffce93",
+      "--background-accent": "#e8cfa8",
+      "--primary-cta-text": "#f7f6f7",
+      "--secondary-cta-text": "#25190c"
+    },
+    "warmgrayBlue": {
+      "--background": "#f7f6f7",
+      "--card": "#ffffff",
+      "--foreground": "#0c1325",
+      "--primary-cta": "#0798ff",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#93c7ff",
+      "--background-accent": "#a8cde8",
+      "--primary-cta-text": "#f7f6f7",
+      "--secondary-cta-text": "#0c1325"
+    },
+    "warmgrayIndigo": {
+      "--background": "#f7f6f7",
+      "--card": "#ffffff",
+      "--foreground": "#0c1325",
+      "--primary-cta": "#0b07ff",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#93b7ff",
+      "--background-accent": "#a8bae8",
+      "--primary-cta-text": "#f7f6f7",
+      "--secondary-cta-text": "#0c1325"
+    },
+    "lavenderPeach": {
+      "--background": "#e3deea",
+      "--card": "#ffffff",
+      "--foreground": "#27231f",
+      "--primary-cta": "#27231f",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#c68a62",
+      "--background-accent": "#c68a62",
+      "--primary-cta-text": "#e3deea",
+      "--secondary-cta-text": "#27231f"
+    },
+    "lavenderBlue": {
+      "--background": "#e3deea",
+      "--card": "#ffffff",
+      "--foreground": "#1f2027",
+      "--primary-cta": "#1f2027",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#627dc6",
+      "--background-accent": "#627dc6",
+      "--primary-cta-text": "#e3deea",
+      "--secondary-cta-text": "#1f2027"
+    },
+    "warmStone": {
+      "--background": "#f5f4ef",
+      "--card": "#dad6cd",
+      "--foreground": "#2a2928",
+      "--primary-cta": "#2a2928",
+      "--secondary-cta": "#ecebea",
+      "--accent": "#ffffff",
+      "--background-accent": "#c6b180",
+      "--primary-cta-text": "#f5f4ef",
+      "--secondary-cta-text": "#2a2928"
+    },
+    "warmStoneGray": {
+      "--background": "#f5f4f0",
+      "--card": "#ffffff",
+      "--foreground": "#1a1a1a",
+      "--primary-cta": "#2c2c2c",
+      "--secondary-cta": "#f5f4f0",
+      "--accent": "#8a8a8a",
+      "--background-accent": "#e8e6e1",
+      "--primary-cta-text": "#f5f4f0",
+      "--secondary-cta-text": "#1a1a1a"
+    },
+    "warmGreen": {
+      "--background": "#fffefe",
+      "--card": "#f6f7f4",
+      "--foreground": "#080908",
+      "--primary-cta": "#0e3a29",
+      "--secondary-cta": "#e7eecd",
+      "--accent": "#35c18b",
+      "--background-accent": "#ecebe4",
+      "--primary-cta-text": "#fffefe",
+      "--secondary-cta-text": "#080908"
+    },
+    "warmSand": {
+      "--background": "#fcf6ec",
+      "--card": "#f3ede2",
+      "--foreground": "#2e2521",
+      "--primary-cta": "#2e2521",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#b2a28b",
+      "--background-accent": "#b2a28b",
+      "--primary-cta-text": "#fcf6ec",
+      "--secondary-cta-text": "#2e2521"
+    },
+    "warmgrayRed": {
+      "--background": "#f7f6f7",
+      "--card": "#ffffff",
+      "--foreground": "#250c0d",
+      "--primary-cta": "#b82b40",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#b90941",
+      "--background-accent": "#e8a8b6",
+      "--primary-cta-text": "#f7f6f7",
+      "--secondary-cta-text": "#250c0d"
+    }
+  },
+  "darkTheme": {
+    "minimal": {
+      "--background": "#0a0a0a",
+      "--card": "#1a1a1a",
+      "--foreground": "#ffffffe6",
+      "--primary-cta": "#e6e6e6",
+      "--secondary-cta": "#1a1a1a",
+      "--accent": "#737373",
+      "--background-accent": "#737373",
+      "--primary-cta-text": "#0a0a0a",
+      "--secondary-cta-text": "#ffffffe6"
+    },
+    "minimalLightBlue": {
+      "--background": "#0a0a0a",
+      "--card": "#1a1a1a",
+      "--foreground": "#f0f8ffe6",
+      "--primary-cta": "#cee7ff",
+      "--secondary-cta": "#1a1a1a",
+      "--accent": "#737373",
+      "--background-accent": "#737373",
+      "--primary-cta-text": "#0a0a0a",
+      "--secondary-cta-text": "#f0f8ffe6"
+    },
+    "minimalLightGreen": {
+      "--background": "#0a0a0a",
+      "--card": "#1a1a1a",
+      "--foreground": "#f5fffae6",
+      "--primary-cta": "#80da9b",
+      "--secondary-cta": "#1a1a1a",
+      "--accent": "#737373",
+      "--background-accent": "#737373",
+      "--primary-cta-text": "#0a0a0a",
+      "--secondary-cta-text": "#f5fffae6"
+    },
+    "minimalLightRed": {
+      "--background": "#0a0a0a",
+      "--card": "#1a1a1a",
+      "--foreground": "#fff5f5e6",
+      "--primary-cta": "#ff7a7a",
+      "--secondary-cta": "#1a1a1a",
+      "--accent": "#737373",
+      "--background-accent": "#737373",
+      "--primary-cta-text": "#0a0a0a",
+      "--secondary-cta-text": "#fff5f5e6"
+    },
+    "minimalLightPurple": {
+      "--background": "#0a0a0a",
+      "--card": "#1a1a1a",
+      "--foreground": "#f8f5ffe6",
+      "--primary-cta": "#c89bff",
+      "--secondary-cta": "#1a1a1a",
+      "--accent": "#737373",
+      "--background-accent": "#737373",
+      "--primary-cta-text": "#0a0a0a",
+      "--secondary-cta-text": "#f8f5ffe6"
+    },
+    "lightBlueWhite": {
+      "--background": "#010912",
+      "--card": "#152840",
+      "--foreground": "#e6f0ff",
+      "--primary-cta": "#cee7ff",
+      "--secondary-cta": "#0e1a29",
+      "--accent": "#3f5c79",
+      "--background-accent": "#004a93",
+      "--primary-cta-text": "#010912",
+      "--secondary-cta-text": "#ffffff"
+    },
+    "lime": {
+      "--background": "#0a0a0a",
+      "--card": "#1a1a1a",
+      "--foreground": "#f5f5f5",
+      "--primary-cta": "#dfff1c",
+      "--secondary-cta": "#1a1a1a",
+      "--accent": "#8b9a1b",
+      "--background-accent": "#5d6b00",
+      "--primary-cta-text": "#0a0a0a",
+      "--secondary-cta-text": "#ffffff"
+    },
+    "gold": {
+      "--background": "#0a0a0a",
+      "--card": "#1a1a1a",
+      "--foreground": "#f5f5f5",
+      "--primary-cta": "#ffdf7d",
+      "--secondary-cta": "#1a1a1a",
+      "--accent": "#b8860b",
+      "--background-accent": "#8b6914",
+      "--primary-cta-text": "#0a0a0a",
+      "--secondary-cta-text": "#ffffff"
+    },
+    "crimson": {
+      "--background": "#0a0a0a",
+      "--card": "#1a1a1a",
+      "--foreground": "#f5f5f5",
+      "--primary-cta": "#ff0000",
+      "--secondary-cta": "#1a1a1a",
+      "--accent": "#991b1b",
+      "--background-accent": "#7f1d1d",
+      "--primary-cta-text": "#ffffff",
+      "--secondary-cta-text": "#ffffff"
+    },
+    "midnightIce": {
+      "--background": "#000000",
+      "--card": "#0c0c0c",
+      "--foreground": "#ffffff",
+      "--primary-cta": "#cee7ff",
+      "--secondary-cta": "#000000",
+      "--accent": "#535353",
+      "--background-accent": "#CEE7FF",
+      "--primary-cta-text": "#000000",
+      "--secondary-cta-text": "#ffffff"
+    },
+    "midnightBlue": {
+      "--background": "#000000",
+      "--card": "#0c0c0c",
+      "--foreground": "#ffffff",
+      "--primary-cta": "#106EFB",
+      "--secondary-cta": "#000000",
+      "--accent": "#535353",
+      "--background-accent": "#106EFB",
+      "--primary-cta-text": "#ffffff",
+      "--secondary-cta-text": "#ffffff"
+    },
+    "blueOrangeAccent": {
+      "--background": "#0a0a0a",
+      "--card": "#1a1a1a",
+      "--foreground": "#ffffff",
+      "--primary-cta": "#1f7cff",
+      "--secondary-cta": "#010101",
+      "--accent": "#1f7cff",
+      "--background-accent": "#f96b2f",
+      "--primary-cta-text": "#ffffff",
+      "--secondary-cta-text": "#ffffff"
+    },
+    "orangeBlueAccent": {
+      "--background": "#0a0a0a",
+      "--card": "#1a1a1a",
+      "--foreground": "#ffffff",
+      "--primary-cta": "#e34400",
+      "--secondary-cta": "#010101",
+      "--accent": "#ff7b05",
+      "--background-accent": "#106efb",
+      "--primary-cta-text": "#ffffff",
+      "--secondary-cta-text": "#ffffff"
+    },
+    "minimalBrightOrange": {
+      "--background": "#0a0a0a",
+      "--card": "#1a1a1a",
+      "--foreground": "#ffffff",
+      "--primary-cta": "#e34400",
+      "--secondary-cta": "#010101",
+      "--accent": "#737373",
+      "--background-accent": "#e34400",
+      "--primary-cta-text": "#ffffff",
+      "--secondary-cta-text": "#ffffff"
+    },
+    "minimalLightOrange": {
+      "--background": "#0a0a0a",
+      "--card": "#1a1a1a",
+      "--foreground": "#fffaf5e6",
+      "--primary-cta": "#ffaa70",
+      "--secondary-cta": "#1a1a1a",
+      "--accent": "#737373",
+      "--background-accent": "#737373",
+      "--primary-cta-text": "#0a0a0a",
+      "--secondary-cta-text": "#fffaf5e6"
+    },
+    "minimalLightYellow": {
+      "--background": "#0a0a0a",
+      "--card": "#1a1a1a",
+      "--foreground": "#fffffae6",
+      "--primary-cta": "#fde047",
+      "--secondary-cta": "#1a1a1a",
+      "--accent": "#737373",
+      "--background-accent": "#737373",
+      "--primary-cta-text": "#0a0a0a",
+      "--secondary-cta-text": "#fffffae6"
+    },
+    "lightBlue": {
+      "--background": "#010912",
+      "--card": "#152840",
+      "--foreground": "#e6f0ff",
+      "--primary-cta": "#cee7ff",
+      "--secondary-cta": "#0e1a29",
+      "--accent": "#3f5c79",
+      "--background-accent": "#004a93",
+      "--primary-cta-text": "#010912",
+      "--secondary-cta-text": "#e6f0ff"
+    },
+    "lightGreen": {
+      "--background": "#000802",
+      "--card": "#0b1a0b",
+      "--foreground": "#e6ffe6",
+      "--primary-cta": "#80da9b",
+      "--secondary-cta": "#07170b",
+      "--accent": "#38714a",
+      "--background-accent": "#2c6541",
+      "--primary-cta-text": "#000802",
+      "--secondary-cta-text": "#e6ffe6"
+    },
+    "lightRed": {
+      "--background": "#080000",
+      "--card": "#1e0d0d",
+      "--foreground": "#ffe6e6",
+      "--primary-cta": "#ff7a7a",
+      "--secondary-cta": "#1e0909",
+      "--accent": "#7b4242",
+      "--background-accent": "#65292c",
+      "--primary-cta-text": "#080000",
+      "--secondary-cta-text": "#ffe6e6"
+    },
+    "darkRed": {
+      "--background": "#060000",
+      "--card": "#1d0d0d",
+      "--foreground": "#ffe6e6",
+      "--primary-cta": "#ff3d4a",
+      "--secondary-cta": "#1f0a0a",
+      "--accent": "#7b2d2d",
+      "--background-accent": "#b8111f",
+      "--primary-cta-text": "#ffffff",
+      "--secondary-cta-text": "#ffe6e6"
+    },
+    "lightPurple": {
+      "--background": "#050012",
+      "--card": "#040121",
+      "--foreground": "#f0e6ff",
+      "--primary-cta": "#c89bff",
+      "--secondary-cta": "#1d123b",
+      "--accent": "#684f7b",
+      "--background-accent": "#65417c",
+      "--primary-cta-text": "#050012",
+      "--secondary-cta-text": "#f0e6ff"
+    },
+    "lightOrange": {
+      "--background": "#080200",
+      "--card": "#1a0d0b",
+      "--foreground": "#ffe6d5",
+      "--primary-cta": "#ffaa70",
+      "--secondary-cta": "#170b07",
+      "--accent": "#7b5e4a",
+      "--background-accent": "#b8541e",
+      "--primary-cta-text": "#080200",
+      "--secondary-cta-text": "#ffe6d5"
+    },
+    "deepBlue": {
+      "--background": "#020617",
+      "--card": "#0f172a",
+      "--foreground": "#e2e8f0",
+      "--primary-cta": "#c4d8f9",
+      "--secondary-cta": "#041633",
+      "--accent": "#2d30f3",
+      "--background-accent": "#1d4ed8",
+      "--primary-cta-text": "#020617",
+      "--secondary-cta-text": "#e2e8f0"
+    },
+    "violet": {
+      "--background": "#030128",
+      "--card": "#241f48",
+      "--foreground": "#ffffff",
+      "--primary-cta": "#ffffff",
+      "--secondary-cta": "#131136",
+      "--accent": "#44358a",
+      "--background-accent": "#b597fe",
+      "--primary-cta-text": "#030128",
+      "--secondary-cta-text": "#d5d4f6"
+    },
+    "ruby": {
+      "--background": "#000000",
+      "--card": "#481f1f",
+      "--foreground": "#ffffff",
+      "--primary-cta": "#ffffff",
+      "--secondary-cta": "#361311",
+      "--accent": "#51000b",
+      "--background-accent": "#ff2231",
+      "--primary-cta-text": "#280101",
+      "--secondary-cta-text": "#f6d4d4"
+    },
+    "emerald": {
+      "--background": "#000000",
+      "--card": "#1f4035",
+      "--foreground": "#ffffff",
+      "--primary-cta": "#ffffff",
+      "--secondary-cta": "#0d2b1f",
+      "--accent": "#0d5238",
+      "--background-accent": "#10b981",
+      "--primary-cta-text": "#051a12",
+      "--secondary-cta-text": "#d4f6e8"
+    },
+    "indigo": {
+      "--background": "#000000",
+      "--card": "#1f1f40",
+      "--foreground": "#ffffff",
+      "--primary-cta": "#ffffff",
+      "--secondary-cta": "#0d0d2b",
+      "--accent": "#3d2880",
+      "--background-accent": "#663cff",
+      "--primary-cta-text": "#0a051a",
+      "--secondary-cta-text": "#d4d4f6"
+    },
+    "forest": {
+      "--background": "#000000",
+      "--card": "#1a2f1d",
+      "--foreground": "#ffffff",
+      "--primary-cta": "#ffffff",
+      "--secondary-cta": "#0d200f",
+      "--accent": "#1a3d1f",
+      "--background-accent": "#355e3b",
+      "--primary-cta-text": "#0a1a0c",
+      "--secondary-cta-text": "#d4f6d8"
+    },
+    "mint": {
+      "--background": "#000000",
+      "--card": "#1a2a1a",
+      "--foreground": "#ffffff",
+      "--primary-cta": "#ffffff",
+      "--secondary-cta": "#0d1a0d",
+      "--accent": "#2d4a2d",
+      "--background-accent": "#c1e1c1",
+      "--primary-cta-text": "#0a150a",
+      "--secondary-cta-text": "#e1f6e1"
+    }
+  }
+}
diff --git a/docs/ACCESSIBILITY.md b/docs/ACCESSIBILITY.md
new file mode 100644
index 0000000..8303571
--- /dev/null
+++ b/docs/ACCESSIBILITY.md
@@ -0,0 +1,500 @@
+# Accessibility Standards
+
+This document outlines accessibility (a11y) requirements for all components in the library, ensuring compatibility with screen readers and assistive technologies.
+
+## Interactive Components
+
+For buttons, links, and other interactive elements.
+
+### Required Props
+
+```tsx
+interface ButtonProps {
+  text: string;
+  onClick?: () => void;
+  className?: string;
+  // Accessibility props
+  disabled?: boolean;
+  ariaLabel?: string;
+  type?: "button" | "submit" | "reset";
+}
+```
+
+### Implementation Pattern
+
+```tsx
+const Button = ({
+  text,
+  onClick,
+  className = "",
+  disabled = false,
+  ariaLabel,
+  type = "button",
+}: ButtonProps) => {
+  return (
+    <button
+      type={type}
+      onClick={onClick}
+      disabled={disabled}
+      aria-label={ariaLabel || text}
+      className={cls(
+        "base-button-styles",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+    >
+      {text}
+    </button>
+  );
+};
+```
+
+### Key Points
+
+**ariaLabel:**
+- Optional prop with sensible fallback
+- Falls back to `text` content for buttons
+- Provides context for screen readers
+
+**type:**
+- Default: `"button"`
+- Options: `"button" | "submit" | "reset"`
+- Prevents accidental form submission
+
+**disabled:**
+- Default: `false`
+- Includes visual disabled states:
+  - `disabled:cursor-not-allowed` - Shows not-allowed cursor
+  - `disabled:opacity-50` - Reduces opacity for visual feedback
+
+## Media Components
+
+### Images
+
+**Required Props:**
+```tsx
+interface ImageProps {
+  imageSrc: string;
+  imageAlt?: string;  // Empty string for decorative images
+  className?: string;
+}
+```
+
+**Implementation:**
+```tsx
+const ImageComponent = ({
+  imageSrc,
+  imageAlt = "",
+  className = "",
+}: ImageProps) => {
+  return (
+    <Image
+      src={imageSrc}
+      alt={imageAlt}
+      aria-hidden={imageAlt === ""}
+      className={className}
+    />
+  );
+};
+```
+
+**Key Points:**
+- `imageAlt` - Alt text for images
+  - Provide descriptive alt text for meaningful images
+  - Use empty string (`""`) for decorative images
+- `aria-hidden={true}` - When alt is empty, mark as decorative
+- Screen readers will skip decorative images
+
+### Videos
+
+**Required Props:**
+```tsx
+interface VideoProps {
+  videoSrc: string;
+  videoAriaLabel?: string;
+  className?: string;
+}
+```
+
+**Implementation:**
+```tsx
+const VideoComponent = ({
+  videoSrc,
+  videoAriaLabel = "Video content",
+  className = "",
+}: VideoProps) => {
+  return (
+    <video
+      src={videoSrc}
+      aria-label={videoAriaLabel}
+      autoPlay
+      loop
+      muted
+      playsInline
+      className={className}
+    />
+  );
+};
+```
+
+**Key Points:**
+- `videoAriaLabel` - Descriptive label for video element
+- Default: Sensible fallback like "Video content" or "Hero video"
+- Always include for screen reader context
+
+### Media Content Pattern
+
+For components supporting both images and videos:
+
+```tsx
+interface HeroProps {
+  imageSrc?: string;
+  imageAlt?: string;
+  videoSrc?: string;
+  videoAriaLabel?: string;
+}
+
+const Hero = ({
+  imageSrc,
+  imageAlt = "",
+  videoSrc,
+  videoAriaLabel = "Hero video",
+}: HeroProps) => {
+  return (
+    <>
+      {videoSrc ? (
+        <video
+          src={videoSrc}
+          aria-label={videoAriaLabel}
+          autoPlay
+          loop
+          muted
+          playsInline
+        />
+      ) : (
+        imageSrc && (
+          <Image
+            src={imageSrc}
+            alt={imageAlt}
+            aria-hidden={imageAlt === ""}
+          />
+        )
+      )}
+    </>
+  );
+};
+```
+
+## Section Components
+
+### Semantic HTML
+
+Use semantic HTML elements for proper document structure:
+
+```tsx
+<section>      // For sections of content
+<header>       // For page/section headers
+<nav>          // For navigation
+<footer>       // For page/section footers
+<article>      // For self-contained content
+<aside>        // For tangentially related content
+<main>         // For main content area
+```
+
+### Section Pattern
+
+```tsx
+interface SectionProps {
+  title: string;
+  description: string;
+  ariaLabel?: string;
+  className?: string;
+}
+
+const Section = ({
+  title,
+  description,
+  ariaLabel = "Section name",
+  className = "",
+}: SectionProps) => {
+  return (
+    <section
+      aria-label={ariaLabel}
+      className={cls("w-full py-20", className)}
+    >
+      <div className="w-content-width mx-auto">
+        <h2>{title}</h2>
+        <p>{description}</p>
+      </div>
+    </section>
+  );
+};
+```
+
+### Sensible Default aria-labels
+
+Each section type should have a descriptive default:
+
+```tsx
+// Hero section
+ariaLabel = "Hero section"
+
+// About section
+ariaLabel = "About section"
+
+// Feature section
+ariaLabel = "Features section"
+
+// Testimonial section
+ariaLabel = "Testimonials section"
+
+// Footer
+ariaLabel = "Footer"
+
+// Navigation
+ariaLabel = "Navigation"
+```
+
+### Heading Hierarchy
+
+Maintain proper heading levels:
+
+```tsx
+<h1>          // Page title (once per page)
+  <h2>        // Section titles
+    <h3>      // Subsection titles
+      <h4>    // Card/component titles
+```
+
+**Example:**
+```tsx
+<section aria-label="Features section">
+  <h2>Our Features</h2>           {/* Section title */}
+  <div>
+    <h3>Feature One</h3>          {/* Feature title */}
+    <p>Description...</p>
+  </div>
+</section>
+```
+
+## Form Components
+
+### Input Fields
+
+```tsx
+interface InputProps {
+  label: string;
+  id: string;
+  type?: string;
+  required?: boolean;
+  ariaLabel?: string;
+  ariaDescribedBy?: string;
+}
+
+const Input = ({
+  label,
+  id,
+  type = "text",
+  required = false,
+  ariaLabel,
+  ariaDescribedBy,
+}: InputProps) => {
+  return (
+    <div>
+      <label htmlFor={id}>
+        {label}
+        {required && <span aria-label="required">*</span>}
+      </label>
+      <input
+        id={id}
+        type={type}
+        required={required}
+        aria-label={ariaLabel || label}
+        aria-describedby={ariaDescribedBy}
+      />
+    </div>
+  );
+};
+```
+
+**Key Points:**
+- Always associate `<label>` with input using `htmlFor` and `id`
+- Mark required fields visually and semantically
+- Use `aria-describedby` for error messages or hints
+
+### Form Validation
+
+```tsx
+const [error, setError] = useState("");
+
+<input
+  aria-invalid={!!error}
+  aria-describedby={error ? "error-message" : undefined}
+/>
+{error && (
+  <p id="error-message" role="alert">
+    {error}
+  </p>
+)}
+```
+
+## Focus Management
+
+### Focus Indicators
+
+Never remove focus outlines without providing alternatives:
+
+```tsx
+// ❌ WRONG
+className="outline-none"
+
+// ✅ CORRECT - Custom focus indicator
+className="focus:outline-none focus:ring-2 focus:ring-foreground/50"
+```
+
+### Focus Trap (for modals/dialogs)
+
+When implementing modals or dialogs, ensure:
+- Focus moves to modal when opened
+- Tab/Shift+Tab cycles through modal elements only
+- Focus returns to trigger element when closed
+- Escape key closes modal
+
+## Keyboard Navigation
+
+### Interactive Elements
+
+All interactive elements must be keyboard accessible:
+
+```tsx
+// Buttons and links work by default
+<button onClick={handleClick}>Click me</button>
+<a href="/page">Link</a>
+
+// Custom interactive elements need tabIndex and keyboard handlers
+<div
+  role="button"
+  tabIndex={0}
+  onClick={handleClick}
+  onKeyDown={(e) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      handleClick();
+    }
+  }}
+>
+  Custom button
+</div>
+```
+
+### Skip Links
+
+For navigation-heavy pages, provide skip links:
+
+```tsx
+<a href="#main-content" className="sr-only focus:not-sr-only">
+  Skip to main content
+</a>
+```
+
+## Screen Reader Only Content
+
+Use the `sr-only` class for content that should only be read by screen readers:
+
+```tsx
+<span className="sr-only">Additional context for screen readers</span>
+```
+
+Tailwind's `sr-only` class:
+```css
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+```
+
+## ARIA Roles
+
+Use ARIA roles when semantic HTML isn't sufficient:
+
+```tsx
+// Navigation
+<nav role="navigation" aria-label="Main navigation">
+
+// Button (for non-button elements)
+<div role="button" tabIndex={0}>
+
+// Alert/Status messages
+<div role="alert">Error message</div>
+<div role="status">Loading...</div>
+
+// Presentation (decorative)
+<div role="presentation">
+
+// Dialog/Modal
+<div role="dialog" aria-modal="true" aria-labelledby="dialog-title">
+```
+
+## Loading States
+
+Provide feedback for loading states:
+
+```tsx
+const [isLoading, setIsLoading] = useState(false);
+
+<button disabled={isLoading} aria-busy={isLoading}>
+  {isLoading ? (
+    <>
+      <span className="sr-only">Loading...</span>
+      <Spinner aria-hidden="true" />
+    </>
+  ) : (
+    "Submit"
+  )}
+</button>
+```
+
+## Accessibility Checklist
+
+### Interactive Components
+- [ ] Add `ariaLabel` prop (optional with sensible fallback)
+- [ ] Add `type` prop for buttons (default: `"button"`)
+- [ ] Add `disabled` prop with visual states
+- [ ] Include disabled state styling (`disabled:cursor-not-allowed disabled:opacity-50`)
+- [ ] Ensure keyboard accessibility (Enter/Space for custom elements)
+- [ ] Provide custom focus indicators if removing default outline
+
+### Media Components
+- [ ] Images: Add `imageAlt` prop
+- [ ] Images: Use `aria-hidden={true}` when alt is empty (decorative)
+- [ ] Videos: Add `videoAriaLabel` prop with sensible default
+- [ ] Provide meaningful default labels
+
+### Section Components
+- [ ] Use semantic HTML (`<section>`, `<header>`, `<nav>`, `<footer>`)
+- [ ] Add `ariaLabel` prop with sensible default
+- [ ] Follow proper heading hierarchy (h1 → h2 → h3)
+- [ ] Use `w-full py-20` for section spacing (except hero/footer)
+- [ ] Use `w-content-width mx-auto` for content wrapper
+
+### Form Components
+- [ ] Associate labels with inputs using `htmlFor` and `id`
+- [ ] Mark required fields semantically
+- [ ] Use `aria-invalid` for validation errors
+- [ ] Use `aria-describedby` for error messages/hints
+- [ ] Provide `role="alert"` for error messages
+
+### General
+- [ ] Test with keyboard navigation (Tab, Shift+Tab, Enter, Space, Escape)
+- [ ] Test with screen reader (VoiceOver, NVDA, JAWS)
+- [ ] Ensure sufficient color contrast (WCAG AA minimum)
+- [ ] Provide focus indicators for all interactive elements
+- [ ] Use semantic HTML before ARIA roles
+- [ ] Include screen reader only text when needed (`sr-only`)
diff --git a/docs/CARDSTACK_SECTIONS.md b/docs/CARDSTACK_SECTIONS.md
new file mode 100644
index 0000000..4d9dc36
--- /dev/null
+++ b/docs/CARDSTACK_SECTIONS.md
@@ -0,0 +1,489 @@
+# CardStack Section Pattern
+
+This document covers the CardStack pattern used in Feature, Product, Pricing, Testimonial, Team, Blog, and Metrics section components.
+
+## Required Type Imports
+
+```tsx
+// Centralized type definitions
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+import type { ButtonConfig, GridVariant, CardAnimationType, TitleSegment } from "@/components/cardStack/types";
+```
+
+**Key Types:**
+- `TextboxLayout` - Layout options for section headers ("default" | "split" | "split-actions" | "split-description" | "inline-image")
+- `InvertedBackground` - Background inversion options ("noInvert" | "invertDefault")
+- `TitleSegment` - Type for inline image segments ({ type: "text" | "image", content/src, alt? })
+- `ButtonConfig` - Button configuration interface
+- `GridVariant` - Grid layout variants
+- `CardAnimationType` - Card animation types
+
+## Overview
+
+CardStack is an intelligent layout component that automatically switches between grid and carousel layouts based on item count and configuration.
+
+**Mode Selection (Automatic):**
+- **1-4 items**: Grid mode (displays as bento grid)
+- **5+ items**: Carousel mode (auto-scrolling or button-controlled)
+
+## Grid Variants
+
+There are 9 bento grid layouts plus uniform layouts:
+
+### Uniform Layouts
+- `uniform-all-items-equal` - All items same size (default)
+- `uniform-2-items` - Two equal columns
+- `uniform-3-items` - Three equal columns
+- `uniform-4-items` - Four equal columns
+
+### Bento Layouts (Asymmetric)
+- `two-columns-alternating-heights` - Alternating tall/short columns
+- `asymmetric-60-wide-40-narrow` - 60% wide left, 40% narrow right
+- `three-columns-all-equal-width` - Three equal columns
+- `four-items-2x2-equal-grid` - Perfect 2x2 grid
+- `one-large-right-three-stacked-left` - Left: 3 items, Right: 1 large
+- `items-top-row-full-width-bottom` - Top: full width, Bottom: items
+- `full-width-top-items-bottom-row` - Full width top, items below
+- `one-large-left-three-stacked-right` - Left: 1 large, Right: 3 items
+
+## Height Control Pattern
+
+### uniformGridCustomHeightClasses Prop
+
+All CardStack-based components should accept this optional prop to control item heights in both grid and carousel modes.
+
+```tsx
+interface SectionCardProps {
+  items: ItemType[];
+  gridVariant: GridVariant;
+  uniformGridCustomHeightClasses?: string;
+  carouselMode?: "auto" | "buttons";
+  // ... other props
+}
+```
+
+### Default Values by Component Type
+
+**Most components (Feature, Product, Pricing, Team, Metrics, Blog):**
+```tsx
+uniformGridCustomHeightClasses = "min-h-80 2xl:min-h-90"
+```
+
+**Testimonial components (need flexible heights):**
+```tsx
+uniformGridCustomHeightClasses = "min-h-none"
+```
+
+**Hero carousel components (no minimum):**
+```tsx
+uniformGridCustomHeightClasses = "min-h-0"
+```
+
+**Feature components (optimized for compact layout):**
+```tsx
+// Hardcoded in FeatureCardFour
+uniformGridCustomHeightClasses = "min-h-0"
+```
+
+### Implementation Pattern
+
+The prop flows: Section Component → CardStack → GridLayout/Carousel
+
+```tsx
+// In section component (e.g., ProductCardOne.tsx)
+const ProductCardOne = ({
+  products,
+  gridVariant,
+  uniformGridCustomHeightClasses = "min-h-80 2xl:min-h-90",
+  // ... other props
+}: ProductCardOneProps) => {
+  return (
+    <CardStack
+      gridVariant={gridVariant}
+      uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+      // ... other props
+    >
+      {products.map((product) => (
+        <div className="card">...</div>
+      ))}
+    </CardStack>
+  );
+};
+```
+
+**Individual card elements must use `min-h-0`:**
+```tsx
+<div className={cls("card p-6 rounded-theme-capped h-full min-h-0")}>
+  {/* Product content */}
+</div>
+```
+
+This prevents height conflicts and ensures proper flex behavior.
+
+## Carousel Modes
+
+### carouselMode Prop
+
+```tsx
+carouselMode?: "auto" | "buttons"
+```
+
+- **`"auto"`** - Auto-scrolling carousel (uses AutoCarousel with embla-carousel-auto-scroll)
+- **`"buttons"`** - Button-controlled carousel (uses ButtonCarousel with prev/next buttons)
+
+**Default is typically `"buttons"`** for better accessibility and user control.
+
+## TextBox Integration
+
+CardStack components integrate with TextBox for section headers.
+
+### TextBox Layout Options
+
+```tsx
+import type { TextboxLayout } from "@/providers/themeProvider/config/constants";
+
+textboxLayout: TextboxLayout // "default" | "split" | "split-actions" | "split-description" | "inline-image"
+```
+
+**Layout Modes:**
+
+1. **`"default"`** - Title and description stacked vertically, centered or left-aligned
+   ```
+   [Tag]
+   Title
+   Description
+   [Buttons]
+   ```
+
+2. **`"split"`** - Title and description on left (60%), buttons on right (40%)
+   ```
+   [Tag]
+   Title | Description    |  [Buttons]
+   ```
+
+3. **`"split-actions"`** - Title and description on left, buttons on right (no description on right)
+   ```
+   [Tag]
+   Title                   |  [Buttons]
+   Description             |
+   ```
+
+4. **`"split-description"`** - Title on left, description on right, buttons below
+   ```
+   [Tag]
+   Title                   |  Description
+   [Buttons]
+   ```
+
+5. **`"inline-image"`** - Centered heading with inline images between text segments, buttons below
+   ```
+   Text [Image] Text [Image] Text
+   [Buttons]
+   ```
+
+   **Special props for inline-image layout:**
+   ```tsx
+   import type { TitleSegment } from "@/components/cardStack/types";
+
+   titleSegments?: TitleSegment[] // Array of text and image segments
+   titleImageWrapperClassName?: string // Styling for image wrapper
+   titleImageClassName?: string // Styling for the image itself
+   ```
+
+   **Example usage:**
+   ```tsx
+   <FeatureCardOne
+     titleSegments={[
+       { type: "text", content: "Discover" },
+       { type: "image", src: "/icon.png", alt: "Icon" },
+       { type: "text", content: "powerful features" }
+     ]}
+     textboxLayout="inline-image"
+     // ... other props
+   />
+   ```
+
+   **Inline Image Behavior:**
+   - Images are styled with `primary-button` background
+   - Automatic rotation alternation: 1st: -rotate-12, 2nd: rotate-12, etc.
+   - Square aspect ratio (1.1em height)
+   - Proper spacing with mx-1 margins
+   - Supports both local paths and external URLs
+
+### TextBox Props in CardStack
+
+```tsx
+<CardStack
+  title="Our Products"
+  titleSegments={[
+    { type: "text", content: "Our" },
+    { type: "image", src: "/icon.png", alt: "Product Icon" },
+    { type: "text", content: "Products" }
+  ]} // Optional: use titleSegments for inline-image layout
+  description="Discover our latest offerings"
+  tag="Products"
+  tagIcon={Package}
+  buttons={[
+    { text: "View All", href: "/products" }
+  ]}
+  textboxLayout="split" // or "inline-image" with titleSegments
+  useInvertedBackground="noInvert" // "noInvert" | "invertDefault"
+  // TextBox className overrides
+  textBoxClassName=""
+  titleClassName=""
+  titleImageWrapperClassName="" // For inline-image layout
+  titleImageClassName="" // For inline-image layout
+  descriptionClassName=""
+  tagClassName=""
+  buttonContainerClassName=""
+  buttonClassName=""
+  buttonTextClassName=""
+  // ... other props
+>
+```
+
+## Button System
+
+### ButtonConfig Interface
+
+```tsx
+interface ButtonConfig {
+  text: string;
+  onClick?: () => void;
+  href?: string;
+  props?: Partial<ButtonPropsForVariant<CTAButtonVariant>>;
+  // NO variant property - controlled by ThemeProvider
+}
+```
+
+### Button Rendering Logic
+
+Buttons are rendered with automatic primary/secondary styling:
+
+- **Index 0**: Primary button (`primary-button` class)
+- **Index 1+**: Secondary button (`secondary-button` class)
+
+**Maximum 2 buttons** per section (enforced in TextBox component).
+
+```tsx
+const buttons: ButtonConfig[] = [
+  { text: "Get Started", href: "/signup" },     // Primary
+  { text: "Learn More", onClick: () => {} }      // Secondary
+];
+```
+
+The `variant` is determined by ThemeProvider's `defaultButtonVariant` setting.
+
+## Complete CardStack Section Example
+
+```tsx
+"use client";
+
+import React, { memo } from "react";
+import CardStack from "@/components/cardStack/CardStack";
+import { cls } from "@/lib/utils";
+import type { GridVariant, ButtonConfig } from "@/components/cardStack/types";
+import type { LucideIcon } from "lucide-react";
+
+type Product = {
+  title: string;
+  description: string;
+  price: string;
+  image: string;
+};
+
+interface ProductCardOneProps {
+  products: Product[];
+  carouselMode?: "auto" | "buttons";
+  gridVariant: GridVariant;
+  uniformGridCustomHeightClasses?: string;
+  title: string;
+  description: string;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  buttons?: ButtonConfig[];
+  textboxLayout: "default" | "split" | "split-actions" | "split-description";
+  ariaLabel?: string;
+  // Main wrapper
+  className?: string;
+  // CardStack customization
+  cardStackClassName?: string;
+  // TextBox customization
+  textBoxClassName?: string;
+  titleClassName?: string;
+  descriptionClassName?: string;
+  tagClassName?: string;
+  buttonsWrapperClassName?: string;
+  // Card customization
+  cardClassName?: string;
+  cardTitleClassName?: string;
+  cardDescriptionClassName?: string;
+  cardPriceClassName?: string;
+  cardImageClassName?: string;
+}
+
+const ProductCardOne = ({
+  products,
+  carouselMode = "buttons",
+  gridVariant,
+  uniformGridCustomHeightClasses = "min-h-80 2xl:min-h-90",
+  title,
+  description,
+  tag,
+  tagIcon,
+  buttons,
+  textboxLayout,
+  ariaLabel = "Product section",
+  className = "",
+  cardStackClassName = "",
+  textBoxClassName = "",
+  titleClassName = "",
+  descriptionClassName = "",
+  tagClassName = "",
+  buttonsWrapperClassName = "",
+  cardClassName = "",
+  cardTitleClassName = "",
+  cardDescriptionClassName = "",
+  cardPriceClassName = "",
+  cardImageClassName = "",
+}: ProductCardOneProps) => {
+  return (
+    <section
+      aria-label={ariaLabel}
+      className={cls("w-full py-20", className)}
+    >
+      <div className="w-content-width mx-auto">
+        <CardStack
+          mode={carouselMode}
+          gridVariant={gridVariant}
+          uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+          title={title}
+          description={description}
+          tag={tag}
+          tagIcon={tagIcon}
+          buttons={buttons}
+          textboxLayout={textboxLayout}
+          className={cardStackClassName}
+          textBoxClassName={textBoxClassName}
+          titleClassName={titleClassName}
+          descriptionClassName={descriptionClassName}
+          tagClassName={tagClassName}
+          buttonsWrapperClassName={buttonsWrapperClassName}
+        >
+          {products.map((product, index) => (
+            <div
+              key={`${product.title}-${index}`}
+              className={cls(
+                "card p-6 rounded-theme-capped h-full min-h-0 flex flex-col",
+                cardClassName
+              )}
+            >
+              <img
+                src={product.image}
+                alt={product.title}
+                className={cls("w-full h-48 object-cover mb-4", cardImageClassName)}
+              />
+              <h3 className={cls("text-xl font-semibold mb-2", cardTitleClassName)}>
+                {product.title}
+              </h3>
+              <p className={cls("text-foreground/75 flex-1", cardDescriptionClassName)}>
+                {product.description}
+              </p>
+              <p className={cls("text-2xl font-bold mt-4", cardPriceClassName)}>
+                {product.price}
+              </p>
+            </div>
+          ))}
+        </CardStack>
+      </div>
+    </section>
+  );
+};
+
+ProductCardOne.displayName = "ProductCardOne";
+
+export default memo(ProductCardOne);
+```
+
+## Animation Types
+
+CardStack supports GSAP-powered scroll-triggered animations:
+
+```tsx
+animationType?: "none" | "opacity" | "slide-up" | "scale-rotate" | "blur-reveal"
+```
+
+**Animation Descriptions:**
+- **`none`** - No animation
+- **`opacity`** - Fade in
+- **`slide-up`** - Slide up from below with stagger
+- **`scale-rotate`** - Scale + rotate entrance with stagger
+- **`blur-reveal`** - Blur to clear reveal with stagger
+
+Each animation uses GSAP ScrollTrigger with staggered effect on children.
+
+## Best Practices
+
+### ✅ DO:
+
+- Accept `uniformGridCustomHeightClasses` as optional prop with sensible default
+- Use `min-h-0` on individual card elements for proper flex behavior
+- Pass through all CardStack customization props (className overrides)
+- Use appropriate default height for your component type
+- Document the default value in registry propsSchema
+- Provide className props for all card sub-elements
+- Use `card` class for consistent card styling (theme-aware)
+- Use `rounded-theme-capped` for card border radius
+- Set `carouselMode` default to `"buttons"` for accessibility
+
+### ❌ DO NOT:
+
+- Hardcode height classes in CardStack (let it be controlled via prop)
+- Remove the `uniformGridCustomHeightClasses` prop without specific reason
+- Use different height classes for grid vs carousel (they should match)
+- Forget to apply `min-h-0` on card wrapper divs
+- Specify button `variant` in ButtonConfig (controlled by ThemeProvider)
+- Create more than 2 buttons per section
+- Use `lg:` or `xl:` breakpoints for layout changes
+
+## CardStack Component Checklist
+
+When creating a new CardStack-based section component:
+
+### Props & Configuration
+- [ ] Accept `uniformGridCustomHeightClasses` prop with appropriate default
+- [ ] Accept `carouselMode` prop (default: `"buttons"`)
+- [ ] Accept `gridVariant` as required prop (or hardcode if single variant)
+- [ ] Accept `textboxLayout` for TextBox configuration
+- [ ] Accept `animationType` for scroll animations (optional)
+
+### CardStack Integration
+- [ ] Pass `uniformGridCustomHeightClasses` to CardStack
+- [ ] Pass all TextBox props (title, description, tag, tagIcon, buttons)
+- [ ] Pass all TextBox className overrides
+- [ ] Pass cardStackClassName for CardStack wrapper customization
+
+### Card Implementation
+- [ ] Apply `min-h-0` to individual card wrapper divs
+- [ ] Use `card` class for card background/border styling
+- [ ] Use `rounded-theme-capped` for border radius
+- [ ] Provide className override props for all card sub-elements
+- [ ] Use `h-full` on cards for consistent heights within grid
+
+### Button System
+- [ ] Use ButtonConfig type for buttons array
+- [ ] Do NOT specify variant in ButtonConfig
+- [ ] Maximum 2 buttons
+- [ ] Let ThemeProvider control button variant
+
+### Section Structure
+- [ ] Use semantic `<section>` tag with aria-label
+- [ ] Use `w-full py-20` on section
+- [ ] Use `w-content-width mx-auto` wrapper
+- [ ] Provide section className override
+
+### Documentation
+- [ ] Document `uniformGridCustomHeightClasses` default in registry
+- [ ] Document all grid variants supported
+- [ ] Document carousel mode options
+- [ ] Include usage example with typical props
diff --git a/docs/COMPONENT_IMPLEMENTATION.md b/docs/COMPONENT_IMPLEMENTATION.md
new file mode 100644
index 0000000..f0461a5
--- /dev/null
+++ b/docs/COMPONENT_IMPLEMENTATION.md
@@ -0,0 +1,433 @@
+# Component Implementation Standards
+
+This document outlines the core implementation patterns for creating components in this library, optimized for AI website builders.
+
+## Component Structure Template
+
+Every component should follow this structure:
+
+```tsx
+"use client";
+
+import React from "react";
+import { cls } from "@/lib/utils";
+
+interface ComponentProps {
+  // Required props first
+  text: string;
+  // Optional props with explicit types
+  onClick?: () => void;
+  className?: string;
+  disabled?: boolean;
+  ariaLabel?: string;
+  type?: "button" | "submit" | "reset";
+}
+
+const Component = ({
+  text,
+  onClick,
+  className = "",
+  disabled = false,
+  ariaLabel,
+  type = "button",
+}: ComponentProps) => {
+  return (
+    <element
+      type={type}
+      onClick={onClick}
+      disabled={disabled}
+      aria-label={ariaLabel || text}
+      className={cls("base-classes", "disabled-states", className)}
+    >
+      {text}
+    </element>
+  );
+};
+
+Component.displayName = "Component";
+
+export default React.memo(Component);
+```
+
+**Key Requirements:**
+- `"use client"` directive when needed (interactive components, hooks)
+- Named exports with `displayName` for debugging
+- Wrap in `React.memo()` for performance optimization
+- Use `cls()` utility for class composition (never plain string concatenation)
+
+## Prop Structure & Defaults
+
+### Required Props
+Core content props should be **required** with no default values:
+- Section components: `title`, `description`
+- Button components: `text`
+- Media components: `imageSrc` or `videoSrc` (when applicable)
+
+### Optional Props with Defaults
+
+**Standard className defaults:**
+```tsx
+className = "",
+textClassName = "",
+iconClassName = "",
+containerClassName = "",
+```
+
+Empty string defaults prevent undefined checks and are standard practice.
+
+**Common optional props:**
+```tsx
+disabled = false,
+type = "button",
+ariaLabel,  // No default, falls back to sensible value in component
+```
+
+**Component-specific props:**
+Document defaults clearly in both code and registry:
+```tsx
+strengthFactor = 20,
+carouselMode = "buttons",
+uniformGridCustomHeightClasses = "min-h-80 2xl:min-h-90",
+```
+
+## Naming Conventions
+
+### Section Components (Hero, About, Feature, etc.)
+
+**✅ CORRECT:**
+```tsx
+interface HeroProps {
+  title: string;           // Primary heading
+  description: string;     // Supporting text
+  buttons?: ButtonConfig[];
+}
+```
+
+**❌ WRONG:**
+```tsx
+interface HeroProps {
+  heading: string;         // Should be "title"
+  subtitle: string;        // Should be "description"
+  text: string;            // Ambiguous
+}
+```
+
+### Button Components
+
+**✅ CORRECT:**
+```tsx
+interface ButtonProps {
+  text: string;            // Button label
+  onClick?: () => void;
+}
+```
+
+**❌ WRONG:**
+```tsx
+interface ButtonProps {
+  title: string;           // Should be "text"
+  label: string;           // Should be "text"
+}
+```
+
+### Button Config (for sections)
+
+```tsx
+interface ButtonConfig {
+  text: string;            // Button label (not "title" or "label")
+  href?: string;
+  onClick?: () => void;
+  props?: Partial<ButtonPropsForVariant<CTAButtonVariant>>;
+  // NO variant property - controlled by ThemeProvider
+}
+```
+
+**Consistency is critical:**
+- All hero sections must use the same prop names
+- All about sections must use the same prop names
+- Registry documentation must match component prop names exactly
+
+## Component Customizability
+
+Provide className props for **all major elements** to allow full styling control:
+
+```tsx
+interface SectionProps {
+  title: string;
+  description: string;
+  // Main wrapper
+  className?: string;
+  // Inner container
+  containerClassName?: string;
+  // Content areas
+  textClassName?: string;
+  mediaWrapperClassName?: string;
+  imageClassName?: string;
+}
+
+const Section = ({
+  title,
+  description,
+  className = "",
+  containerClassName = "",
+  textClassName = "",
+  mediaWrapperClassName = "",
+  imageClassName = "",
+}: SectionProps) => {
+  return (
+    <section className={cls("base-section-styles", className)}>
+      <div className={cls("base-container-styles", containerClassName)}>
+        <div className={cls("base-text-styles", textClassName)}>
+          {/* content */}
+        </div>
+        <div className={cls("base-media-wrapper-styles", mediaWrapperClassName)}>
+          <img className={cls("base-image-styles", imageClassName)} />
+        </div>
+      </div>
+    </section>
+  );
+};
+```
+
+**Naming convention:**
+- `className` - Main wrapper element
+- `containerClassName` - Inner container
+- `[element]ClassName` - Specific elements (e.g., `textClassName`, `imageClassName`)
+
+## Component Composition & Base Styles
+
+When composing higher-level components from base components, **set sensible base styles** while accepting className overrides:
+
+```tsx
+interface HeroProps {
+  title: string;
+  description: string;
+  titleClassName?: string;
+  descriptionClassName?: string;
+  textBoxClassName?: string;
+}
+
+const Hero = ({
+  title,
+  description,
+  titleClassName = "",
+  descriptionClassName = "",
+  textBoxClassName = "",
+}: HeroProps) => {
+  return (
+    <section>
+      <TextBox
+        title={title}
+        description={description}
+        // Set base styles, allow overrides
+        className={cls("flex flex-col gap-3 md:gap-1", textBoxClassName)}
+        titleClassName={cls("text-6xl font-medium", titleClassName)}
+        descriptionClassName={cls("text-lg leading-[1.2]", descriptionClassName)}
+        center={true}
+      />
+    </section>
+  );
+};
+```
+
+**Key principles:**
+- Base styles come first in `cls()`, overrides second
+- This ensures good defaults while maintaining full customizability
+- AI builders can use components without styling knowledge, but advanced users can override
+- Use `cls()` utility for proper class merging (prevents Tailwind conflicts)
+
+## Type Safety
+
+### Use Explicit Prop Interfaces
+```tsx
+// ✅ CORRECT - Clear and explicit
+interface ButtonProps {
+  text: string;
+  onClick?: () => void;
+  variant?: "primary" | "secondary";
+}
+
+// ❌ WRONG - Over-complicated
+interface ButtonProps extends React.ComponentPropsWithoutRef<'button'> {
+  // ... harder for AI to understand
+}
+```
+
+### Use Discriminated Unions for Variants
+```tsx
+type MediaProps =
+  | {
+      imageSrc: string;
+      imageAlt?: string;
+      videoSrc?: never;
+    }
+  | {
+      videoSrc: string;
+      videoAriaLabel?: string;
+      imageSrc?: never;
+    };
+```
+
+### Export Reusable Types
+```tsx
+export type ButtonConfig = {
+  text: string;
+  href?: string;
+  onClick?: () => void;
+};
+
+export type GridVariant =
+  | "uniform-all-items-equal"
+  | "two-columns-alternating-heights"
+  | "asymmetric-60-wide-40-narrow"
+  // ... etc
+```
+
+## Responsive Design
+
+### Mobile-First Approach
+
+**Default styles apply to mobile devices:**
+```tsx
+// ✅ CORRECT - Mobile until md breakpoint (768px)
+<div className="flex-col md:flex-row">
+  <img className="w-full h-auto md:h-8 md:w-auto" />
+</div>
+
+// ❌ WRONG - Using lg: breakpoint
+<div className="flex-col lg:flex-row">
+  <img className="w-full h-auto lg:h-8 lg:w-auto" />
+</div>
+```
+
+**Breakpoint Rules:**
+- **Mobile styles**: No prefix (default)
+- **Desktop styles**: `md:` prefix only (768px breakpoint)
+- **Never use**: `lg:`, `xl:`, `2xl:` breakpoints for layout changes
+
+**Exceptions:** Only use larger breakpoints for minor tweaks:
+```tsx
+// Acceptable for minor adjustments
+className="min-h-80 2xl:min-h-90"
+```
+
+## Content Width Pattern
+
+All section content must follow this structure:
+
+```tsx
+<section aria-label={ariaLabel || "Section name"} className="w-full py-20">
+  <div className="w-content-width mx-auto">
+    {/* content */}
+  </div>
+</section>
+```
+
+**Rules:**
+- Section: `w-full py-20` (full width with vertical padding)
+- Inner div: `w-content-width mx-auto` (centered content with max width)
+- `w-content-width` is controlled by ThemeProvider (small/medium/large)
+
+**Exceptions:**
+- Heroes and footers do NOT use `py-20` (they have custom spacing)
+- Full-bleed sections may skip inner wrapper
+
+## Vertical Spacing
+
+**Standard sections:**
+```tsx
+className="w-full py-20"
+```
+
+**Exceptions (NO py-20):**
+- Hero sections (custom spacing)
+- Footer sections (custom spacing)
+- Full-bleed sections with background colors
+
+## Text Constraints
+
+For button text and short labels:
+```tsx
+{
+  "text": {
+    "required": true,
+    "example": "Get Started",
+    "minChars": 2,
+    "maxChars": 15
+  }
+}
+```
+
+**Button text rules:**
+- Minimum: 2 characters
+- Maximum: 15 characters
+- Single-line only (no multiline support)
+
+## Section Structure Pattern
+
+```tsx
+<section
+  aria-label={ariaLabel || "Default section label"}
+  className={cls(
+    "relative py-20 w-full",
+    useInvertedBackground === "invertDefault" && "bg-foreground",
+    className
+  )}
+>
+  <div className="w-content-width mx-auto">
+    <TextBox
+      title={title}
+      description={description}
+      tag={tag}
+      tagIcon={tagIcon}
+      buttons={buttons}
+      textboxLayout={textboxLayout}
+      useInvertedBackground={useInvertedBackground}
+      // ... className overrides
+    />
+
+    {/* Section-specific content */}
+  </div>
+</section>
+```
+
+**Key Pattern Notes:**
+- `useInvertedBackground` is a required prop: `"noInvert" | "invertDefault"`
+- `"invertDefault"` creates a full-width inverted section with `bg-foreground`
+- `"noInvert"` is the standard section with no background
+- Always use explicit string equality checks (not truthy/falsy)
+- Text colors should check for `"invertDefault"` mode
+
+## Implementation Checklist
+
+### Core Requirements
+- [ ] Add `"use client"` directive if needed (hooks, interactivity)
+- [ ] Use explicit prop interfaces (no over-complicated types)
+- [ ] Set appropriate defaults for optional props
+- [ ] Add `displayName` for debugging
+- [ ] Wrap in `React.memo()` for performance
+- [ ] Use semantic HTML tags (`<section>`, `<button>`, etc.)
+
+### Customizability
+- [ ] Provide className props for all major elements
+- [ ] Use `cls()` utility for class composition
+- [ ] Set base styles with override capability
+- [ ] Follow naming convention (className, containerClassName, [element]ClassName)
+
+### Responsive Design
+- [ ] Mobile-first styles (no prefix)
+- [ ] Desktop styles with `md:` prefix only
+- [ ] Avoid `lg:`, `xl:`, `2xl:` for layout changes
+- [ ] Use `w-content-width mx-auto` pattern
+
+### Naming Conventions
+- [ ] Section components: Use `title` and `description`
+- [ ] Button components: Use `text`
+- [ ] Button configs: Use `text` (not variant - controlled by theme)
+- [ ] Consistent naming across similar component types
+
+### Structure
+- [ ] Required props first in interface
+- [ ] Optional props with defaults after
+- [ ] Empty string defaults for className props
+- [ ] Document default values clearly
diff --git a/docs/PREVIEW_PAGE_STANDARDS.md b/docs/PREVIEW_PAGE_STANDARDS.md
new file mode 100644
index 0000000..7ed66ef
--- /dev/null
+++ b/docs/PREVIEW_PAGE_STANDARDS.md
@@ -0,0 +1,499 @@
+# Preview Page Standards
+
+This document outlines how to create preview pages for components in `/app/components/`.
+
+## Purpose
+
+Preview pages allow developers and AI builders to:
+- See components in isolation
+- Test component behavior and styling
+- Verify responsive design
+- Experiment with different prop configurations
+- Ensure smooth scrolling and theme integration
+
+## File Structure
+
+### Location Pattern
+
+```
+/app/components/
+  ├── sections/
+  │   ├── hero/
+  │   │   ├── billboard/
+  │   │   │   └── page.tsx          // Preview for HeroBillboard
+  │   │   ├── split/
+  │   │   │   └── page.tsx          // Preview for HeroSplit
+  │   ├── feature/
+  │   │   ├── card-one/
+  │   │   │   └── page.tsx          // Preview for FeatureCardOne
+  ├── buttons/
+  │   ├── text-stagger/
+  │   │   └── page.tsx              // Preview for ButtonTextStagger
+  └── page.tsx                      // Main components index
+```
+
+**Pattern:** `/app/components/[category]/[component-name]/page.tsx`
+
+**Component name formatting:**
+- Use kebab-case for folder names
+- `HeroBillboard` → `hero/billboard/`
+- `FeatureCardOne` → `feature/card-one/`
+- `ButtonTextStagger` → `buttons/text-stagger/`
+
+## Preview Page Template
+
+### Basic Template (Non-Section Components)
+
+```tsx
+"use client";
+
+import React from "react";
+import ReactLenis from "lenis/react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ComponentName from "@/components/category/ComponentName";
+
+export default function ComponentPreviewPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="plain"
+      cardStyle="glass-flat"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="medium"
+    >
+      <ReactLenis root>
+        <ComponentName
+          // Add realistic props here
+          text="Example"
+          onClick={() => console.log("clicked")}
+        />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}
+```
+
+### Section Component Template
+
+```tsx
+"use client";
+
+import React from "react";
+import ReactLenis from "lenis/react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import SectionName from "@/components/sections/category/SectionName";
+
+export default function SectionPreviewPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="icon-arrow"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="pill"
+      contentWidth="medium"
+      sizing="medium"
+      background="animatedGrid"
+      cardStyle="glass-flat"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="medium"
+    >
+      <ReactLenis root>
+        <SectionName
+          title="Preview Section Title"
+          description="This is a preview of the section component with example content."
+          buttons={[
+            { text: "Get Started", href: "#" },
+            { text: "Learn More", onClick: () => console.log("Learn more") }
+          ]}
+          // Add section-specific props
+        />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}
+```
+
+### CardStack Section Template
+
+```tsx
+"use client";
+
+import React from "react";
+import ReactLenis from "lenis/react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import { Package, Zap, Shield, Sparkles } from "lucide-react";
+import FeatureCardOne from "@/components/sections/feature/FeatureCardOne";
+
+export default function FeatureCardOnePreviewPage() {
+  const features = [
+    {
+      icon: Package,
+      title: "Feature One",
+      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+    },
+    {
+      icon: Zap,
+      title: "Feature Two",
+      description: "Sed do eiusmod tempor incididunt ut labore et dolore."
+    },
+    {
+      icon: Shield,
+      title: "Feature Three",
+      description: "Ut enim ad minim veniam, quis nostrud exercitation."
+    },
+    {
+      icon: Sparkles,
+      title: "Feature Four",
+      description: "Duis aute irure dolor in reprehenderit in voluptate."
+    }
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="icon-arrow"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="animatedGrid"
+      cardStyle="glass-flat"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="medium"
+    >
+      <ReactLenis root>
+        <FeatureCardOne
+          features={features}
+          gridVariant="uniform-all-items-equal"
+          textboxLayout="default"
+          title="Our Features"
+          description="Discover what makes us unique"
+          tag="Features"
+          tagIcon={Sparkles}
+          buttons={[
+            { text: "View All", href: "#" }
+          ]}
+        />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}
+```
+
+## Critical Requirements
+
+### Wrapper Order
+
+**MUST follow this order:**
+
+```tsx
+<ThemeProvider>
+  <ReactLenis root>
+    <Component />
+  </ReactLenis>
+</ThemeProvider>
+```
+
+**❌ WRONG:**
+```tsx
+<ReactLenis root>
+  <ThemeProvider>
+    <Component />
+  </ThemeProvider>
+</ReactLenis>
+```
+
+ReactLenis must be **inside** ThemeProvider, not outside.
+
+### "use client" Directive
+
+All preview pages must include `"use client"` at the top:
+
+```tsx
+"use client";
+
+import React from "react";
+// ...
+```
+
+This is required because:
+- ReactLenis uses client-side hooks
+- ThemeProvider uses React Context
+- Components may use interactive features
+
+### ReactLenis Root Prop
+
+Always include the `root` prop:
+
+```tsx
+<ReactLenis root>
+  {/* components */}
+</ReactLenis>
+```
+
+This enables page-wide smooth scrolling.
+
+## Theme Configuration
+
+### Recommended Defaults
+
+**For most previews:**
+```tsx
+<ThemeProvider
+  defaultButtonVariant="icon-arrow"
+  defaultTextAnimation="entrance-slide"
+  borderRadius="rounded"
+  contentWidth="medium"
+  sizing="medium"
+  background="animatedGrid"
+  cardStyle="glass-flat"
+  primaryButtonStyle="gradient"
+  secondaryButtonStyle="glass"
+  headingFontWeight="medium"
+>
+```
+
+**For button previews:**
+```tsx
+<ThemeProvider
+  defaultButtonVariant="text-stagger"  // Match button being previewed
+  defaultTextAnimation="entrance-slide"
+  borderRadius="pill"
+  contentWidth="medium"
+  sizing="medium"
+  background="plain"
+  cardStyle="glass-flat"
+  primaryButtonStyle="gradient"
+  secondaryButtonStyle="glass"
+  headingFontWeight="medium"
+>
+```
+
+**For hero previews:**
+```tsx
+<ThemeProvider
+  defaultButtonVariant="icon-arrow"
+  defaultTextAnimation="entrance-slide"
+  borderRadius="rounded"
+  contentWidth="large"  // Wider for heroes
+  sizing="large"        // Larger sizing for heroes
+  background="aurora"   // Visual background
+  cardStyle="glass-flat"
+  primaryButtonStyle="gradient"
+  secondaryButtonStyle="glass"
+  headingFontWeight="semibold"  // Bolder for heroes
+>
+```
+
+### When to Customize
+
+Customize theme settings when:
+- Testing different button variants
+- Showcasing card styles
+- Demonstrating responsive behavior
+- Highlighting specific theme features
+
+## Realistic Props
+
+### Use Realistic Content
+
+**✅ GOOD:**
+```tsx
+<HeroBillboard
+  title="Build Amazing Websites Faster"
+  description="Create stunning, responsive websites with our modern component library. Ship faster, iterate quicker."
+  buttons={[
+    { text: "Get Started", href: "/signup" },
+    { text: "View Demo", onClick: () => window.open("/demo") }
+  ]}
+/>
+```
+
+**❌ BAD:**
+```tsx
+<HeroBillboard
+  title="Test"
+  description="Test description"
+  buttons={[
+    { text: "Click", href: "#" }
+  ]}
+/>
+```
+
+### Sample Data Patterns
+
+**Features:**
+```tsx
+const features = [
+  {
+    icon: Package,
+    title: "Fast Shipping",
+    description: "Get your order delivered within 2-3 business days."
+  },
+  // ... more features
+];
+```
+
+**Products:**
+```tsx
+const products = [
+  {
+    title: "Premium Headphones",
+    description: "Wireless noise-cancelling headphones with 30-hour battery life.",
+    price: "$299",
+    image: "/images/headphones.jpg"
+  },
+  // ... more products
+];
+```
+
+**Testimonials:**
+```tsx
+const testimonials = [
+  {
+    name: "Sarah Johnson",
+    role: "CEO, TechCorp",
+    content: "This component library transformed our development workflow. Highly recommend!",
+    image: "/images/avatar-1.jpg",
+    rating: 5
+  },
+  // ... more testimonials
+];
+```
+
+## Multiple Sections Example
+
+Preview pages can show multiple components together:
+
+```tsx
+"use client";
+
+import React from "react";
+import ReactLenis from "lenis/react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import HeroBillboard from "@/components/sections/hero/HeroBillboard";
+import FeatureCardOne from "@/components/sections/feature/FeatureCardOne";
+import Footer from "@/components/sections/footer/FooterBase";
+
+export default function FullPagePreview() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="icon-arrow"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="animatedGrid"
+      cardStyle="glass-flat"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="medium"
+    >
+      <ReactLenis root>
+        <HeroBillboard {...heroProps} />
+        <FeatureCardOne {...featureProps} />
+        <Footer {...footerProps} />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}
+```
+
+## Preview Page Checklist
+
+### File Setup
+- [ ] Create in correct location: `/app/components/[category]/[component-name]/page.tsx`
+- [ ] Use kebab-case for folder names
+- [ ] Add `"use client"` directive at top
+- [ ] Export default function with descriptive name
+
+### Wrapper Configuration
+- [ ] Wrap in ThemeProvider (outer)
+- [ ] Wrap in ReactLenis with `root` prop (inner)
+- [ ] Correct order: ThemeProvider > ReactLenis > Component
+- [ ] Import both wrappers
+
+### Component Props
+- [ ] Use realistic, representative content
+- [ ] Include all required props
+- [ ] Test with typical prop combinations
+- [ ] Use proper TypeScript types (no `any`)
+
+### Theme Settings
+- [ ] Configure appropriate theme settings for component type
+- [ ] Use sensible defaults that showcase the component well
+- [ ] Test with different theme configurations if needed
+
+### Quality Checks
+- [ ] Component renders without errors
+- [ ] Smooth scrolling works
+- [ ] Responsive design functions correctly
+- [ ] Animations trigger properly
+- [ ] No console warnings or errors
+
+## Common Patterns
+
+### Background for Preview
+
+If the component needs a background color to be visible:
+
+```tsx
+<ReactLenis root>
+  <div className="min-h-screen bg-background">
+    <Component {...props} />
+  </div>
+</ReactLenis>
+```
+
+### Centered Preview
+
+For small components that need centering:
+
+```tsx
+<ReactLenis root>
+  <div className="min-h-screen flex items-center justify-center bg-background">
+    <Component {...props} />
+  </div>
+</ReactLenis>
+```
+
+### Multiple Variants
+
+Show multiple variants of the same component:
+
+```tsx
+<ReactLenis root>
+  <div className="min-h-screen bg-background py-20 space-y-20">
+    <ComponentName variant="primary" {...props} />
+    <ComponentName variant="secondary" {...props} />
+    <ComponentName variant="ghost" {...props} />
+  </div>
+</ReactLenis>
+```
+
+## Best Practices
+
+### ✅ DO:
+
+- Use realistic, production-quality content
+- Test responsive behavior
+- Include all ThemeProvider configuration
+- Use ReactLenis for smooth scrolling
+- Follow naming conventions (kebab-case folders)
+- Include required props only (let optional props use defaults)
+- Test with different theme settings
+
+### ❌ DO NOT:
+
+- Use placeholder text like "Lorem ipsum" (use realistic content)
+- Skip ThemeProvider or ReactLenis
+- Put ReactLenis outside ThemeProvider
+- Use hardcoded colors that break theming
+- Create overly complex multi-component demos (keep focused)
+- Forget "use client" directive
+- Use incorrect folder structure
diff --git a/docs/README.md b/docs/README.md
new file mode 100644
index 0000000..768b147
--- /dev/null
+++ b/docs/README.md
@@ -0,0 +1,161 @@
+# Component Library Documentation
+
+This directory contains focused documentation for building components in this AI-optimized component library.
+
+## Documentation Files
+
+### 📋 [COMPONENT_IMPLEMENTATION.md](./COMPONENT_IMPLEMENTATION.md)
+**Core component implementation patterns**
+
+Load when: Creating or modifying component code
+
+Covers:
+- Component structure template
+- Prop structure & defaults
+- Naming conventions
+- Component customizability
+- Type safety
+- Responsive design
+- Content width pattern
+- Implementation checklist
+
+---
+
+### 🎴 [CARDSTACK_SECTIONS.md](./CARDSTACK_SECTIONS.md)
+**CardStack-based section components**
+
+Load when: Creating Feature, Product, Pricing, Testimonial, Team, Blog, or Metrics sections
+
+Covers:
+- CardStack pattern overview
+- Grid variants (10+ layouts)
+- Height control (`uniformGridCustomHeightClasses`)
+- Carousel modes
+- TextBox integration
+- Button system
+- Animation types
+- Complete examples & checklist
+
+---
+
+### 🎨 [THEME_AND_STYLING.md](./THEME_AND_STYLING.md)
+**Theme system and styling patterns**
+
+Load when: Setting up themes, working with colors, or styling components
+
+Covers:
+- Theme Provider configuration
+- Color theming (CSS variables)
+- Inverted background pattern
+- Content width pattern
+- Card styling
+- Border radius patterns
+- Button styling classes
+- Styling checklist
+
+---
+
+### ♿ [ACCESSIBILITY.md](./ACCESSIBILITY.md)
+**Accessibility (a11y) standards**
+
+Load when: Adding interactive elements, media, or sections
+
+Covers:
+- Interactive components (buttons, links)
+- Media components (images, videos)
+- Section components (semantic HTML)
+- Form components
+- Focus management
+- Keyboard navigation
+- ARIA roles
+- Accessibility checklist
+
+---
+
+### 📚 [REGISTRY_STANDARDS.md](./REGISTRY_STANDARDS.md)
+**Registry documentation rules**
+
+Load when: Adding or updating component entries in `registry.json`
+
+Covers:
+- Registry structure
+- Component entry format
+- Field descriptions
+- propsSchema rules
+- Constraints format
+- Usage examples
+- What to include/exclude
+- Validation checklist
+
+---
+
+### 📁 [REGISTRY_FOLDER_STRUCTURE.md](./REGISTRY_FOLDER_STRUCTURE.md)
+**New folder-based registry structure**
+
+Load when: Working with files in `/registry/` folder
+
+Covers:
+- Folder overview (index.json, intents.json, components/, schemas/)
+- File purposes and use cases
+- When to update each file
+- Common prop patterns (animations, backgrounds, buttons)
+- Validation checklist for each file type
+- File relationships and quick reference
+
+---
+
+### 📄 [PREVIEW_PAGE_STANDARDS.md](./PREVIEW_PAGE_STANDARDS.md)
+**Preview page setup and patterns**
+
+Load when: Creating preview pages in `/app/components/`
+
+Covers:
+- File structure & location
+- Preview page templates
+- Wrapper order (ThemeProvider > ReactLenis)
+- Theme configuration
+- Realistic props
+- Multiple sections example
+- Preview page checklist
+
+---
+
+## Quick Reference
+
+### When creating a new component:
+1. Load `COMPONENT_IMPLEMENTATION.md` for structure
+2. Load `ACCESSIBILITY.md` for a11y requirements
+3. Load `THEME_AND_STYLING.md` for styling patterns
+4. Load `CARDSTACK_SECTIONS.md` if using CardStack
+
+### When updating the registry:
+1. Load `REGISTRY_FOLDER_STRUCTURE.md` for the new folder structure
+2. Load `REGISTRY_STANDARDS.md` for documentation rules
+
+### When creating a preview page:
+1. Load `PREVIEW_PAGE_STANDARDS.md` only
+
+### When modifying themes:
+1. Load `THEME_AND_STYLING.md` only
+
+---
+
+## Documentation Principles
+
+These docs are optimized for:
+- **AI builders** (Lovable, V0, Claude Code)
+- **Focused context** (load only what you need)
+- **Quick reference** (checklists and examples)
+- **Consistency** (standardized patterns across all components)
+
+Each file is:
+- **Single-purpose** - covers one concern thoroughly
+- **Self-contained** - minimal cross-references
+- **Example-driven** - shows good/bad patterns
+- **Checklist-equipped** - actionable validation steps
+
+---
+
+## Legacy Documentation
+
+The original `COMPONENT_STANDARDS.md` file has been split into these focused documents. Refer to these new files for all component development.
diff --git a/docs/REGISTRY_FOLDER_STRUCTURE.md b/docs/REGISTRY_FOLDER_STRUCTURE.md
new file mode 100644
index 0000000..1003662
--- /dev/null
+++ b/docs/REGISTRY_FOLDER_STRUCTURE.md
@@ -0,0 +1,299 @@
+# Registry Folder Structure
+
+This document explains the new folder-based registry structure in `/registry/` and how to work with it.
+
+## Folder Overview
+
+```
+registry/
+├── index.json           # Quick lookup index for all components
+├── intents.json         # Intent-based component grouping
+├── components/          # Full component documentation
+│   ├── HeroBillboard.json
+│   ├── FeatureCardOne.json
+│   └── ...
+└── schemas/             # Simplified prop schemas
+    ├── HeroBillboard.schema.json
+    ├── FeatureCardOne.schema.json
+    └── ...
+```
+
+## File Purposes
+
+### index.json
+
+**Quick lookup index** for component discovery and selection.
+
+**Use case:** AI builders use this to find the right component for a given intent.
+
+```json
+{
+  "HeroBillboard": {
+    "category": "hero",
+    "intent": "hero with media",
+    "bestFor": ["landing pages", "feature showcases", "capability displays"],
+    "avoidWhen": ["multiple items"],
+    "requires": ["buttons?[]"],
+    "import": "@/components/sections/hero/HeroBillboard"
+  }
+}
+```
+
+**Fields:**
+- `category` - Component category (hero, feature, pricing, team, etc.)
+- `intent` - Primary use case
+- `bestFor` - Ideal scenarios for this component
+- `avoidWhen` - When NOT to use this component
+- `requires` - Required prop arrays (use `?[]` for optional)
+- `import` - Import path for the component
+
+---
+
+### intents.json
+
+**Intent-based grouping** for semantic component discovery.
+
+**Use case:** AI builders use this to find all components that match a specific intent.
+
+```json
+{
+  "hero with media": [
+    "HeroBillboard",
+    "HeroBillboardCarousel",
+    "HeroSplit",
+    "HeroOverlay"
+  ],
+  "feature showcase": [
+    "FeatureCardOne",
+    "FeatureCardThree",
+    "FeatureBento"
+  ],
+  "testimonials": [
+    "TestimonialCardOne",
+    "TestimonialCardTwo"
+  ]
+}
+```
+
+**Common intents:**
+- `hero with media` - Hero sections with images/videos
+- `feature showcase` - Feature display sections
+- `testimonials` - Customer testimonial sections
+- `sequential process` - Step-by-step or timeline sections
+- `metrics display` - Statistics and KPI sections
+- `contact form` - Contact and CTA sections
+- `pricing plans` - Pricing tier sections
+
+---
+
+### components/*.json
+
+**Full component documentation** with constraints, examples, and rules.
+
+**Use case:** AI builders use this for detailed implementation guidance.
+
+```json
+{
+  "name": "HeroBillboard",
+  "description": "Full-width hero section with centered text content...",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Welcome to Our Platform",
+        "minChars": 2,
+        "maxChars": 36
+      }
+    },
+    "mediaRules": {...},
+    "buttonRules": {...}
+  },
+  "propsSchema": {
+    "title": "string",
+    "description": "string",
+    "tag?": "string",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "mediaAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'"
+  },
+  "usageExample": "<HeroBillboard title=\"...\" ... />",
+  "do": ["Use for landing pages", "Use for feature showcases"],
+  "dont": ["Do not use multiple items"],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
+```
+
+**Sections:**
+- `name` - Component name
+- `description` - Brief component description
+- `constraints` - Text length limits, media rules, button rules
+- `propsSchema` - All props with types and defaults
+- `usageExample` - Complete usage example with ThemeProvider
+- `do` - Recommended use cases
+- `dont` - Anti-patterns to avoid
+- `editRules` - What can/cannot be customized
+
+---
+
+### schemas/*.schema.json
+
+**Simplified prop schemas** for quick reference.
+
+**Use case:** AI builders use this for prop validation and code generation.
+
+```json
+{
+  "name": "HeroBillboard",
+  "propsSchema": {
+    "title": "string",
+    "description": "string",
+    "background": "{ variant: 'plain' | 'animated-grid' | ... } (required)",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "mediaAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "className?": "string",
+    "containerClassName?": "string",
+    "titleClassName?": "string"
+  }
+}
+```
+
+**Note:** Schema files include ALL className props while component files may omit them for brevity.
+
+---
+
+## When to Update Each File
+
+### Adding a New Component
+
+1. Add entry to `index.json` with category, intent, bestFor, avoidWhen, requires, import
+2. Add component name to appropriate intent(s) in `intents.json`
+3. Create `components/ComponentName.json` with full documentation
+4. Create `schemas/ComponentName.schema.json` with prop schema
+
+### Adding a New Prop
+
+1. Update `components/ComponentName.json` propsSchema
+2. Update `schemas/ComponentName.schema.json` propsSchema
+3. If prop affects usage, update `usageExample` in component file
+
+### Modifying Constraints
+
+1. Only update `components/ComponentName.json` constraints section
+
+### Changing Component Intent/Category
+
+1. Update `index.json` entry
+2. Move component name between arrays in `intents.json`
+
+---
+
+## Common Prop Patterns
+
+### Animation Props
+
+All animation props follow the same pattern:
+
+```json
+"tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+"buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+"mediaAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'"
+```
+
+### Background Props
+
+Hero sections use background variant:
+
+```json
+"background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | ... } (required)"
+```
+
+### Button Config
+
+Standard button array structure:
+
+```json
+"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>"
+```
+
+### ClassName Props
+
+Always include standard className props in schema files:
+
+```json
+"className?": "string",
+"containerClassName?": "string",
+"textBoxClassName?": "string",
+"titleClassName?": "string",
+"descriptionClassName?": "string",
+"tagClassName?": "string",
+"buttonContainerClassName?": "string",
+"buttonClassName?": "string",
+"buttonTextClassName?": "string",
+"mediaWrapperClassName?": "string",
+"imageClassName?": "string"
+```
+
+---
+
+## Validation Checklist
+
+When updating registry files:
+
+### index.json
+- [ ] Category matches component type
+- [ ] Intent matches primary use case
+- [ ] bestFor list is comprehensive
+- [ ] avoidWhen captures real limitations
+- [ ] requires uses `?[]` for optional arrays
+- [ ] import path is correct
+
+### intents.json
+- [ ] Component is listed under correct intent(s)
+- [ ] No duplicate entries
+- [ ] Intent names are consistent
+
+### components/*.json
+- [ ] name matches filename
+- [ ] description is concise
+- [ ] constraints have realistic examples
+- [ ] propsSchema matches component interface
+- [ ] usageExample is valid JSX
+- [ ] do/dont provide useful guidance
+- [ ] editRules are accurate
+
+### schemas/*.schema.json
+- [ ] name matches filename
+- [ ] propsSchema matches component file
+- [ ] All className props included
+- [ ] Optional props use `?` suffix
+- [ ] Defaults noted with `(default: value)`
+
+---
+
+## Quick Reference: File Relationships
+
+```
+Component: HeroBillboard
+
+registry/
+├── index.json
+│   └── "HeroBillboard": { category, intent, bestFor, ... }
+│
+├── intents.json
+│   └── "hero with media": ["HeroBillboard", ...]
+│
+├── components/HeroBillboard.json
+│   └── Full documentation with constraints, examples, rules
+│
+└── schemas/HeroBillboard.schema.json
+    └── Simplified propsSchema for code generation
+```
diff --git a/docs/REGISTRY_STANDARDS.md b/docs/REGISTRY_STANDARDS.md
new file mode 100644
index 0000000..865d7a7
--- /dev/null
+++ b/docs/REGISTRY_STANDARDS.md
@@ -0,0 +1,487 @@
+# Registry Documentation Standards
+
+This document outlines how to document components in `registry.json` for AI website builders.
+
+## Registry Structure
+
+The registry is organized into two main sections:
+
+```json
+{
+  "componentRegistry": {
+    "button": [...],
+    "text": [...],
+    "navbar": [...],
+    "layout": [...]
+  },
+  "sectionRegistry": {
+    "hero": [...],
+    "about": [...],
+    "feature": [...],
+    "testimonial": [...],
+    "pricing": [...],
+    "team": [...],
+    "product": [...],
+    "metrics": [...],
+    "blog": [...],
+    "footer": [...],
+    "contact": [...],
+    "faq": [...],
+    "socialProof": [...]
+  }
+}
+```
+
+**componentRegistry** - Base/utility components (buttons, text, navbar, CardStack, etc.)
+**sectionRegistry** - Section components (hero, about, feature, etc.)
+
+## Component Entry Format
+
+Every component entry must follow this structure:
+
+```json
+{
+  "import": "import ComponentName from '@/components/category/ComponentName';",
+  "name": "ComponentName",
+  "path": "@/components/category/ComponentName",
+  "description": "Brief one-line description of what the component is.",
+  "details": "Longer description of when to use it, behavior, and constraints.",
+  "constraints": {
+    "textRules": {
+      "text": {
+        "required": true,
+        "example": "Example text",
+        "minChars": 2,
+        "maxChars": 15
+      }
+    }
+  },
+  "propsSchema": {
+    "text": "string",
+    "onClick?": "() => void",
+    "className?": "string",
+    "disabled?": "boolean (default: false)",
+    "ariaLabel?": "string",
+    "type?": "'button' | 'submit' | 'reset' (default: 'button')"
+  },
+  "usage": "<ComponentName text=\"Example\" onClick={() => console.log('clicked')} />"
+}
+```
+
+## Field Descriptions
+
+### import
+The exact import statement AI should use.
+
+**Format:**
+```json
+"import": "import ComponentName from '@/components/category/ComponentName';"
+```
+
+**Examples:**
+```json
+"import": "import HeroBillboard from '@/components/sections/hero/HeroBillboard';"
+"import": "import ButtonTextStagger from '@/components/button/text-stagger/ButtonTextStagger';"
+"import": "import CardStack from '@/components/cardStack/CardStack';"
+```
+
+### name
+Component name exactly as exported.
+
+**Format:**
+```json
+"name": "ComponentName"
+```
+
+### path
+File path without extension.
+
+**Format:**
+```json
+"path": "@/components/category/ComponentName"
+```
+
+### description
+One-line summary of what the component is. Focus on visual/behavioral characteristics.
+
+**Format:** 1 sentence, under 100 characters
+
+**Good Examples:**
+```json
+"description": "CTA button with character stagger animation on hover."
+"description": "Full-width hero section with centered text and billboard layout."
+"description": "Feature section with grid or carousel layout for feature cards."
+```
+
+**Bad Examples:**
+```json
+"description": "A really cool button component with lots of features and animations that can be used anywhere."  // Too verbose
+"description": "Button"  // Too vague
+```
+
+### details
+Longer description covering:
+- When to use it
+- Key behavior notes
+- Important constraints
+
+**Format:** 2-4 sentences
+
+**Good Example:**
+```json
+"details": "Use for primary or secondary CTAs where subtle text motion adds emphasis. On hover, the label's characters animate in sequence (stagger). Includes background styling and supports all standard button props."
+```
+
+**Bad Example:**
+```json
+"details": "This is a button that you can click and it will do something when you click it. It has animations."  // Too obvious, not helpful
+```
+
+### constraints
+
+Defines text length constraints for string props.
+
+**Format:**
+```json
+"constraints": {
+  "textRules": {
+    "propName": {
+      "required": true,
+      "example": "Example value",
+      "minChars": 2,
+      "maxChars": 15
+    }
+  }
+}
+```
+
+**Common Patterns:**
+
+**Button text:**
+```json
+"constraints": {
+  "textRules": {
+    "text": {
+      "required": true,
+      "example": "Get Started",
+      "minChars": 2,
+      "maxChars": 15
+    }
+  }
+}
+```
+
+**Section titles and descriptions:**
+```json
+"constraints": {
+  "textRules": {
+    "title": {
+      "required": true,
+      "example": "Welcome to Our Platform",
+      "minChars": 5,
+      "maxChars": 60
+    },
+    "description": {
+      "required": true,
+      "example": "Build amazing websites with our component library",
+      "minChars": 10,
+      "maxChars": 200
+    }
+  }
+}
+```
+
+### propsSchema
+
+Documents all component props with types and defaults.
+
+**Format Rules:**
+
+**Required props:**
+```json
+"propName": "type"
+```
+
+**Optional props:**
+```json
+"propName?": "type"
+```
+
+**Optional props with defaults:**
+```json
+"propName?": "type (default: value)"
+```
+
+**Examples:**
+
+**Simple types:**
+```json
+"text": "string",
+"count": "number",
+"enabled": "boolean"
+```
+
+**Functions:**
+```json
+"onClick?": "() => void",
+"onChange?": "(value: string) => void",
+"onSubmit?": "(data: FormData) => Promise<void>"
+```
+
+**Union types:**
+```json
+"type?": "'button' | 'submit' | 'reset' (default: 'button')",
+"variant?": "'primary' | 'secondary' | 'ghost'",
+"size?": "'sm' | 'md' | 'lg' (default: 'md')"
+```
+
+**Array types:**
+```json
+"items": "Array<{ title: string; description: string }>",
+"buttons?": "ButtonConfig[]",
+"features": "Feature[]"
+```
+
+**Complex types:**
+```json
+"gridVariant": "'uniform-all-items-equal' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | ...",
+"icon?": "LucideIcon",
+"image?": "string (URL or path)"
+```
+
+**With defaults:**
+```json
+"className?": "string",
+"disabled?": "boolean (default: false)",
+"carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+"uniformGridCustomHeightClasses?": "string (default: 'min-h-80 2xl:min-h-90')"
+```
+
+### usage
+
+Single-line example showing typical implementation.
+
+**Format:** One line, realistic props, valid JSX
+
+**Good Examples:**
+
+**Button:**
+```json
+"usage": "<ButtonTextStagger text=\"Get Started\" onClick={() => console.log('clicked')} />"
+```
+
+**Section with minimal props:**
+```json
+"usage": "<HeroBillboard title=\"Welcome\" description=\"Start building today\" buttons={[{ text: 'Get Started', href: '/signup' }]} />"
+```
+
+**CardStack section:**
+```json
+"usage": "<FeatureCardOne features={featuresData} gridVariant=\"uniform-all-items-equal\" textboxLayout=\"default\" title=\"Features\" description=\"Our key features\" />"
+```
+
+**Bad Examples:**
+```json
+"usage": "<Component />"  // Missing required props
+"usage": "<Component\n  prop1=\"value\"\n  prop2=\"value\"\n/>"  // Multi-line, hard to read
+"usage": "Component({ text: 'Hi' })"  // Not JSX
+```
+
+## What to Include
+
+### ✅ DO Include:
+
+**Default values in propsSchema** - Critical for AI to generate correct code
+```json
+"disabled?": "boolean (default: false)",
+"type?": "'button' | 'submit' | 'reset' (default: 'button')"
+```
+
+**Usage examples** - Helps AI understand context
+```json
+"usage": "<ButtonTextStagger text=\"Click me\" onClick={() => alert('Hi')} />"
+```
+
+**Text constraints** - Min/max character limits
+```json
+"constraints": {
+  "textRules": {
+    "text": {
+      "required": true,
+      "example": "Get Started",
+      "minChars": 2,
+      "maxChars": 15
+    }
+  }
+}
+```
+
+**Accurate descriptions** - Ensure description matches actual behavior
+```json
+"description": "CTA button with character stagger animation on hover.",
+"details": "Use for primary or secondary CTAs where subtle text motion adds emphasis."
+```
+
+**Use case guidance** - When to use this vs alternatives
+```json
+"details": "Use for hero sections with centered content and billboard layout. Best for landing pages and marketing sites."
+```
+
+## What NOT to Include
+
+### ❌ DO NOT Include:
+
+**Metadata field** - Unnecessary complexity
+```json
+// Don't do this:
+"metadata": {
+  "category": "button",
+  "version": "1.0.0",
+  "author": "..."
+}
+```
+
+**Verbose descriptions** - Keep concise and obvious
+```json
+// Don't do this:
+"description": "This is an amazing button component that you can use to create buttons with stagger animations that look really cool and modern and will make your website stand out from the competition."
+```
+
+**Dependencies** - AI builders can infer from imports
+```json
+// Don't do this:
+"dependencies": ["lucide-react", "framer-motion"]
+```
+
+**Over-documentation** - If it's obvious from the name, skip it
+```json
+// Don't do this:
+"details": "This is a button. You can click it. It accepts text to display on the button."
+```
+
+**Implementation details** - Focus on usage, not internals
+```json
+// Don't do this:
+"details": "Uses GSAP ScrollTrigger with stagger: 0.1 and uses React.memo for performance and has displayName set to ButtonTextStagger."
+```
+
+## Complete Examples
+
+### Button Component
+
+```json
+{
+  "import": "import ButtonTextStagger from '@/components/button/text-stagger/ButtonTextStagger';",
+  "name": "ButtonTextStagger",
+  "path": "@/components/button/text-stagger/ButtonTextStagger",
+  "description": "CTA button with character stagger animation on hover.",
+  "details": "Use for primary or secondary CTAs where subtle text motion adds emphasis. On hover, the label's characters animate in sequence (stagger). Includes background styling.",
+  "constraints": {
+    "textRules": {
+      "text": {
+        "required": true,
+        "example": "Get Started",
+        "minChars": 2,
+        "maxChars": 15
+      }
+    }
+  },
+  "propsSchema": {
+    "text": "string",
+    "onClick?": "() => void",
+    "href?": "string",
+    "className?": "string",
+    "textClassName?": "string",
+    "disabled?": "boolean (default: false)",
+    "ariaLabel?": "string",
+    "type?": "'button' | 'submit' | 'reset' (default: 'button')"
+  },
+  "usage": "<ButtonTextStagger text=\"Get Started\" onClick={() => console.log('clicked')} />"
+}
+```
+
+### Section Component (CardStack-based)
+
+```json
+{
+  "import": "import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';",
+  "name": "FeatureCardOne",
+  "path": "@/components/sections/feature/FeatureCardOne",
+  "description": "Feature section with grid or carousel layout for feature cards.",
+  "details": "Displays feature cards in a responsive grid (1-4 items) or carousel (5+ items). Supports TextBox header with multiple layout options. Each card includes icon, title, and description.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Our Features",
+        "minChars": 5,
+        "maxChars": 60
+      },
+      "description": {
+        "required": true,
+        "example": "Discover what makes us unique",
+        "minChars": 10,
+        "maxChars": 200
+      }
+    }
+  },
+  "propsSchema": {
+    "features": "Array<{ icon: LucideIcon; title: string; description: string }>",
+    "gridVariant": "'uniform-all-items-equal' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | ...",
+    "title": "string",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "buttons?": "ButtonConfig[]",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description'",
+    "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+    "uniformGridCustomHeightClasses?": "string (default: 'min-h-80 2xl:min-h-90')",
+    "ariaLabel?": "string",
+    "className?": "string"
+  },
+  "usage": "<FeatureCardOne features={featuresData} gridVariant=\"uniform-all-items-equal\" textboxLayout=\"default\" title=\"Features\" description=\"Our key features\" />"
+}
+```
+
+## Registry Validation Checklist
+
+When adding a new component to the registry:
+
+### Required Fields
+- [ ] `import` - Exact import statement
+- [ ] `name` - Component name
+- [ ] `path` - File path without extension
+- [ ] `description` - One-line summary
+- [ ] `details` - When to use, behavior, constraints
+- [ ] `propsSchema` - All props documented
+- [ ] `usage` - Single-line example
+
+### Constraints (if applicable)
+- [ ] Add `textRules` for text props
+- [ ] Set `minChars` and `maxChars`
+- [ ] Provide realistic `example` values
+- [ ] Mark `required: true` for required props
+
+### propsSchema Format
+- [ ] Required props: `"prop": "type"`
+- [ ] Optional props: `"prop?": "type"`
+- [ ] Defaults: `"prop?": "type (default: value)"`
+- [ ] All types match component implementation
+- [ ] Union types use single quotes inside double quotes
+
+### Quality Checks
+- [ ] Description is concise (under 100 chars)
+- [ ] Details provide use case guidance
+- [ ] Usage example is valid JSX
+- [ ] Usage example shows realistic props
+- [ ] Default values documented in propsSchema
+- [ ] No over-documentation or verbose descriptions
+- [ ] No unnecessary metadata or dependencies
+
+### Consistency Checks
+- [ ] Component name matches file name
+- [ ] Path matches actual file location
+- [ ] Import statement is correct
+- [ ] Props match actual component interface
+- [ ] Defaults in registry match component defaults
+- [ ] Naming follows conventions (title/description for sections, text for buttons)
diff --git a/docs/THEME_AND_STYLING.md b/docs/THEME_AND_STYLING.md
new file mode 100644
index 0000000..20e85dc
--- /dev/null
+++ b/docs/THEME_AND_STYLING.md
@@ -0,0 +1,521 @@
+# Theme and Styling Standards
+
+This document covers the centralized theme system, color theming, and styling patterns used throughout the component library.
+
+## Theme Provider System
+
+All sections and components use a centralized ThemeProvider to maintain consistent styling across the entire site.
+
+### Location & Setup
+
+**Import:**
+```tsx
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+```
+
+**Usage:** Wrap the entire app/page (not individual sections) in a **single** ThemeProvider:
+
+```tsx
+export default function Page() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="animatedGrid"
+      cardStyle="glass-flat"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="medium"
+    >
+      <HeroBillboard {...props} />
+      <FeatureSection {...props} />
+      <Footer {...props} />
+    </ThemeProvider>
+  );
+}
+```
+
+### Theme Configuration Options
+
+#### defaultButtonVariant
+Controls the button style for ALL buttons in sections.
+
+**Options:**
+- `"text-stagger"` - Character stagger animation on hover (default)
+- `"shift-hover"` - Text shifts on hover
+- `"icon-arrow"` - Text + right arrow icon
+- `"hover-magnetic"` - Cursor-tracking magnetic effect
+- `"hover-bubble"` - Expanding circle on hover
+- `"expand-hover"` - Width expansion on hover
+
+#### defaultTextAnimation
+Controls the text animation type for ALL text in sections.
+
+**Options:**
+- `"entrance-slide"` - Slide up from below (default)
+- `"reveal-blur"` - Blur to clear reveal
+- `"background-highlight"` - Background highlight effect
+
+#### borderRadius
+Controls border radius for buttons and cards.
+
+**Options:**
+- `"rounded"` - Standard rounded corners
+- `"pill"` - Fully rounded (pill shape)
+- `"sharp"` - No border radius
+
+#### contentWidth
+Controls the max width of section content.
+
+**Options:**
+- `"small"` - Narrow content width
+- `"medium"` - Standard content width (default)
+- `"large"` - Wide content width
+
+Maps to `w-content-width` CSS class.
+
+#### sizing
+Controls spacing and size scale throughout components.
+
+**Options:**
+- `"small"` - Compact spacing
+- `"medium"` - Standard spacing (default)
+- `"large"` - Generous spacing
+
+#### background
+Default background pattern for the page.
+
+**Options:**
+- `"plain"` - Solid background color
+- `"animatedGrid"` - Animated grid pattern
+- `"aurora"` - Aurora gradient effect
+- `"dotGrid"` - Dot grid pattern
+- And more...
+
+#### cardStyle
+Visual style for all card components.
+
+**Options:**
+- `"glass-flat"` - Flat glass effect (default)
+- `"glass-depth"` - Glass with depth/shadow
+- `"glass-outline"` - Outlined glass
+- `"solid-accent-light"` - Solid light accent
+- `"outline"` - Simple outline
+- `"elevated"` - Elevated shadow effect
+- `"frosted"` - Frosted glass
+- And more...
+
+#### primaryButtonStyle
+Style for primary buttons (first button in array).
+
+**Options:**
+- `"gradient"` - Gradient background
+- `"solid"` - Solid color background
+- `"glass"` - Glass effect
+- `"outline"` - Outlined button
+
+#### secondaryButtonStyle
+Style for secondary buttons (second+ button in array).
+
+**Options:**
+- `"glass"` - Glass effect (default)
+- `"outline"` - Outlined button
+- `"solid"` - Solid color background
+- `"gradient"` - Gradient background
+
+#### headingFontWeight
+Font weight for all headings.
+
+**Options:**
+- `"normal"` - Regular weight
+- `"medium"` - Medium weight (default)
+- `"semibold"` - Semi-bold weight
+- `"bold"` - Bold weight
+
+### Using Theme in Components
+
+#### useTheme Hook
+
+```tsx
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+
+const Component = () => {
+  const theme = useTheme();
+
+  // Access theme properties:
+  // - theme.defaultButtonVariant
+  // - theme.defaultTextAnimation
+  // - theme.borderRadius
+  // - theme.cardStyle
+  // - theme.contentWidth
+  // - theme.sizing
+  // - theme.background
+  // - theme.primaryButtonStyle
+  // - theme.secondaryButtonStyle
+  // - theme.headingFontWeight
+
+  return <div>{/* component */}</div>;
+};
+```
+
+#### TextBox Component Example
+
+TextBox automatically applies theme defaults:
+
+```tsx
+const TextBox = ({ type, buttons, ...props }: TextBoxProps) => {
+  const theme = useTheme();
+
+  // Use default text animation from theme if not specified
+  const animationType = type || theme.defaultTextAnimation;
+
+  // Button variant comes from theme
+  const variant = theme.defaultButtonVariant;
+
+  // ...
+};
+```
+
+### Important Rules
+
+❌ **DO NOT:**
+- Specify button `variant` in section button configs (controlled by ThemeProvider)
+- Wrap individual sections in ThemeProvider (use ONE provider per site/page)
+- Override theme defaults unless explicitly required by component design
+
+✅ **DO:**
+- Wrap the entire app/page in a single ThemeProvider
+- Let all sections inherit theme defaults automatically
+- Use `useTheme()` hook to access theme configuration
+- Document when components don't follow theme defaults (with clear reason)
+
+## Color & Theming
+
+### CSS Custom Properties
+
+**Always use CSS custom properties for colors** to ensure theme consistency:
+
+```tsx
+// ✅ CORRECT - Uses theme variables
+<div className="bg-background text-foreground">
+  <button className="bg-foreground text-background">Click me</button>
+</div>
+
+// ❌ WRONG - Hardcoded colors break theming
+<div className="bg-white text-black">
+  <button className="bg-black text-white">Click me</button>
+</div>
+```
+
+### Standard Color Variables
+
+**Background & Text:**
+- `bg-background` - Main background color
+- `text-foreground` - Main text color
+- `bg-foreground` - Inverse background (for buttons, accents)
+- `text-background` - Inverse text (for text on dark backgrounds)
+
+**Cards & Surfaces:**
+- `card` - Card/surface background with border (theme-aware)
+- Maps to different styles based on `theme.cardStyle`
+
+**Buttons:**
+- `primary-button` - Primary button styling (index 0)
+- `secondary-button` - Secondary button styling (index 1+)
+
+**Opacity Modifiers:**
+```tsx
+text-foreground/75    // 75% opacity
+text-background/50    // 50% opacity
+bg-foreground/10      // 10% opacity
+```
+
+### When to Use Theme Colors
+
+✅ **Always prefer theme variables:**
+- Backgrounds, text, borders, shadows
+- Ensures proper dark mode support
+- Allows theme customization
+- Maintains visual consistency
+
+❌ **Only use hardcoded colors:**
+- Very specific one-off cases with clear justification
+- Decorative elements that shouldn't change with theme
+- Must be documented in component comments
+
+## Inverted Background Pattern
+
+Section components support three modes for background styling, allowing flexible visual contrast and card-style layouts.
+
+### Three Background Modes
+
+**`"noInvert"`** - Standard background (default page background color)
+- No background color applied to section
+- Text uses standard `text-foreground` color
+- Full-width section
+
+**`"invertDefault"`** - Full-width inverted background
+- Section gets `bg-foreground` background
+- Text uses `text-background` color for contrast
+- Full-width section with inverted colors
+
+### Implementation Pattern
+
+```tsx
+import { cls } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+
+interface SectionProps {
+  title: string;
+  description: string;
+  useInvertedBackground: "noInvert" | "invertDefault"; // Required
+  // ... other props
+}
+
+const Section = ({
+  title,
+  description,
+  useInvertedBackground,
+  className = "",
+  // ... other props
+}: SectionProps) => {
+  const theme = useTheme();
+
+  return (
+    <section
+      className={cls(
+        "relative py-20 w-full",
+        useInvertedBackground === "invertDefault" && "bg-foreground",
+        className
+      )}
+    >
+      <div className="w-content-width mx-auto">
+        <h1 className={cls(
+          "text-6xl font-medium",
+          useInvertedBackground === "invertDefault" && "text-background",
+          titleClassName
+        )}>
+          {title}
+        </h1>
+        <p className={cls(
+          "text-lg",
+          useInvertedBackground === "invertDefault"
+            ? "text-background/75"
+            : "text-foreground/75",
+          descriptionClassName
+        )}>
+          {description}
+        </p>
+      </div>
+    </section>
+  );
+};
+```
+
+### Key Points
+
+1. **Required Prop**: `useInvertedBackground` should be a required string union type (no `?`), forcing explicit choice
+2. **Two Modes**: `"noInvert"`, `"invertDefault"`
+3. **Section Width**: Always `w-full`
+4. **Background Color**:
+   - `"invertDefault"` → `bg-foreground`
+   - `"noInvert"` → no background
+5. **Text Colors**: Apply `text-background` or `text-background/75` for `"invertDefault"` mode
+6. **Relative Positioning**: Section needs `relative` class for proper z-index stacking
+7. **Conditional Logic**: Use explicit string equality checks (not truthy/falsy)
+
+### Section className Pattern
+
+**Standard pattern for all sections:**
+
+```tsx
+<section
+  className={cls(
+    "relative py-20 w-full",
+    useInvertedBackground === "invertDefault" && "bg-foreground",
+    className
+  )}
+>
+```
+
+### Text Color Pattern
+
+**For text elements:**
+
+```tsx
+// Single check for invert mode:
+useInvertedBackground === "invertDefault" && "text-background"
+
+// Ternary for opacity variants:
+useInvertedBackground === "invertDefault"
+  ? "text-background/75"
+  : "text-foreground/75"
+```
+
+### For Components with Cards (Advanced)
+
+When a section contains cards with light backgrounds, use the `shouldUseInvertedText` utility:
+
+```tsx
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+
+const SectionWithCards = ({
+  useInvertedBackground,
+  // ... other props
+}: SectionProps) => {
+  const theme = useTheme();
+  const shouldUseLightText = shouldUseInvertedText(
+    useInvertedBackground,
+    theme.cardStyle
+  );
+
+  return (
+    <section
+      className={cls(
+        "relative py-20 w-full",
+        useInvertedBackground === "invertDefault" && "bg-foreground",
+        className
+      )}
+    >
+      {/* For elements inside cards or with card backgrounds */}
+      <h3 className={cls(
+        "text-xl",
+        shouldUseLightText && "text-background",
+        bulletTitleClassName
+      )}>
+        {point.title}
+      </h3>
+    </section>
+  );
+};
+```
+
+**What it does:**
+The `shouldUseInvertedText` utility checks if:
+- `useInvertedBackground` is `"invertDefault"` AND
+- Current `cardStyle` is a "light" style (e.g., `glass-elevated`, `outline`, etc.)
+
+This ensures text inside cards remains readable regardless of theme configuration.
+
+### Width Classes Explained
+
+**`w-content-width`** - Content container width
+- Controlled by `theme.contentWidth` (small/medium/large)
+- Used for inner content wrapper in all sections
+
+## Content Width Pattern
+
+All section content must use the `w-content-width` class:
+
+```tsx
+<section className="w-full py-20">
+  <div className="w-content-width mx-auto">
+    {/* content */}
+  </div>
+</section>
+```
+
+**What it does:**
+- Controlled by `theme.contentWidth` (small/medium/large)
+- Automatically adjusts max-width based on theme setting
+- Centers content with `mx-auto`
+
+## Section Spacing
+
+**Standard sections:**
+```tsx
+className="w-full py-20"
+```
+
+Vertical padding of `py-20` (5rem = 80px) on top and bottom.
+
+**Exceptions (NO py-20):**
+- Hero sections (custom spacing based on design)
+- Footer sections (custom spacing)
+- Full-bleed sections with background colors/images
+
+## Card Styling Pattern
+
+Use the `card` class for all card components:
+
+```tsx
+<div className={cls("card p-6 rounded-theme-capped h-full min-h-0", cardClassName)}>
+  {/* card content */}
+</div>
+```
+
+**Classes explained:**
+- `card` - Theme-aware background/border (maps to `theme.cardStyle`)
+- `p-6` - Standard padding (1.5rem = 24px)
+- `rounded-theme-capped` - Border radius from theme (respects `theme.borderRadius`)
+- `h-full` - Fill parent height (for grid layouts)
+- `min-h-0` - Prevent height conflicts (important for flex layouts)
+
+## Border Radius Pattern
+
+**For cards:**
+```tsx
+className="rounded-theme-capped"
+```
+
+**For buttons:**
+```tsx
+className="rounded-theme"
+```
+
+Both respect `theme.borderRadius` setting (rounded/pill/sharp).
+
+## Button Styling Classes
+
+**Primary button (first in array):**
+```tsx
+className="primary-button"
+```
+
+**Secondary button (second+ in array):**
+```tsx
+className="secondary-button"
+```
+
+These classes are theme-aware and map to:
+- `theme.primaryButtonStyle` (gradient/solid/glass/outline)
+- `theme.secondaryButtonStyle` (glass/outline/solid/gradient)
+
+## Styling Checklist
+
+### Color Usage
+- [ ] Use `bg-background` and `text-foreground` for main colors
+- [ ] Use `bg-foreground` and `text-background` for inverted sections
+- [ ] Use `card` class for card backgrounds
+- [ ] Use `primary-button` and `secondary-button` for buttons
+- [ ] Avoid hardcoded colors (white, black, gray-X) unless justified
+
+### Theme Integration
+- [ ] Wrap app/page in single ThemeProvider
+- [ ] Use `useTheme()` hook when needed
+- [ ] Don't specify button variants in ButtonConfig
+- [ ] Let TextBox inherit default text animation
+- [ ] Use `w-content-width mx-auto` for content
+
+### Inverted Background (if applicable)
+- [ ] Accept `useInvertedBackground` as required string union: `"noInvert" | "invertDefault"`
+- [ ] Add `relative` class to section
+- [ ] Implement two-mode section className pattern (invertDefault with bg-foreground, noInvert standard)
+- [ ] Apply `text-background` to text for `"invertDefault"` mode (not `"noInvert"`)
+- [ ] Use explicit string equality checks (not truthy/falsy)
+- [ ] Use `shouldUseInvertedText` for card content if needed
+
+### Card Styling
+- [ ] Use `card` class for theme-aware background
+- [ ] Use `rounded-theme-capped` for border radius
+- [ ] Include `min-h-0` for flex compatibility
+- [ ] Provide `cardClassName` override prop
+
+### Spacing
+- [ ] Use `py-20` on sections (except hero/footer)
+- [ ] Use `w-content-width mx-auto` wrapper
+- [ ] Follow theme spacing guidelines
diff --git a/eslint.config.mjs b/eslint.config.mjs
new file mode 100644
index 0000000..aa5b4fa
--- /dev/null
+++ b/eslint.config.mjs
@@ -0,0 +1,55 @@
+import tseslint from "typescript-eslint";
+import reactPlugin from "eslint-plugin-react";
+import reactHooksPlugin from "eslint-plugin-react-hooks";
+import nextPlugin from "@next/eslint-plugin-next";
+
+export default tseslint.config(
+    ...tseslint.configs.recommended,
+    {
+      files: ["**/*.{js,jsx,ts,tsx}"],
+      rules: {
+        "@typescript-eslint/no-unused-vars": "warn",
+        "@typescript-eslint/no-unused-expressions": "warn",
+        "@typescript-eslint/no-explicit-any": "off",
+      },
+    },
+    {
+      files: ["src/app/*.{js,jsx,ts,tsx}"],
+      plugins: {
+        react: reactPlugin,
+        "react-hooks": reactHooksPlugin,
+        "@next/next": nextPlugin,
+      },
+      languageOptions: {
+        ecmaVersion: "latest",
+        sourceType: "module",
+        parserOptions: {
+          ecmaFeatures: {
+            jsx: true,
+          },
+        },
+      },
+      settings: {
+        react: {
+          version: "detect",
+        },
+      },
+      rules: {
+        ...reactPlugin.configs["jsx-runtime"].rules,
+        ...reactHooksPlugin.configs.recommended.rules,
+        ...nextPlugin.configs.recommended.rules,
+        ...nextPlugin.configs["core-web-vitals"].rules,
+        "react/no-unescaped-entities": "off",
+        "@typescript-eslint/no-explicit-any": "off",
+      },
+    },
+    {
+      ignores: [
+        "node_modules/**",
+        ".next/**",
+        "out/**",
+        "build/**",
+        "next-env.d.ts",
+      ],
+    }
+);
diff --git a/fontThemes.json b/fontThemes.json
new file mode 100644
index 0000000..e14bbca
--- /dev/null
+++ b/fontThemes.json
@@ -0,0 +1,237 @@
+{
+  "singleFonts": {
+    "interTight": {
+      "name": "Inter Tight",
+      "import": "import { Inter_Tight } from \"next/font/google\";",
+      "initialization": "const interTight = Inter_Tight({\n  variable: \"--font-inter-tight\",\n  subsets: [\"latin\"],\n  weight: [\"100\", \"200\", \"300\", \"400\", \"500\", \"600\", \"700\", \"800\", \"900\"],\n});",
+      "className": "${interTight.variable}",
+      "cssVariable": "font-family: var(--font-inter-tight), sans-serif;"
+    },
+    "inter": {
+      "name": "Inter",
+      "import": "import { Inter } from \"next/font/google\";",
+      "initialization": "const inter = Inter({\n  variable: \"--font-inter\",\n  subsets: [\"latin\"],\n});",
+      "className": "${inter.variable}",
+      "cssVariable": "font-family: var(--font-inter), sans-serif;"
+    },
+    "poppins": {
+      "name": "Poppins",
+      "import": "import { Poppins } from \"next/font/google\";",
+      "initialization": "const poppins = Poppins({\n  variable: \"--font-poppins\",\n  subsets: [\"latin\"],\n  weight: [\"100\", \"200\", \"300\", \"400\", \"500\", \"600\", \"700\", \"800\", \"900\"],\n});",
+      "className": "${poppins.variable}",
+      "cssVariable": "font-family: var(--font-poppins), sans-serif;"
+    },
+    "montserrat": {
+      "name": "Montserrat",
+      "import": "import { Montserrat } from \"next/font/google\";",
+      "initialization": "const montserrat = Montserrat({\n  variable: \"--font-montserrat\",\n  subsets: [\"latin\"],\n});",
+      "className": "${montserrat.variable}",
+      "cssVariable": "font-family: var(--font-montserrat), sans-serif;"
+    },
+    "roboto": {
+      "name": "Roboto",
+      "import": "import { Roboto } from \"next/font/google\";",
+      "initialization": "const roboto = Roboto({\n  variable: \"--font-roboto\",\n  subsets: [\"latin\"],\n  weight: [\"100\", \"300\", \"400\", \"500\", \"700\", \"900\"],\n});",
+      "className": "${roboto.variable}",
+      "cssVariable": "font-family: var(--font-roboto), sans-serif;"
+    },
+    "openSans": {
+      "name": "Open Sans",
+      "import": "import { Open_Sans } from \"next/font/google\";",
+      "initialization": "const openSans = Open_Sans({\n  variable: \"--font-open-sans\",\n  subsets: [\"latin\"],\n});",
+      "className": "${openSans.variable}",
+      "cssVariable": "font-family: var(--font-open-sans), sans-serif;"
+    },
+    "lato": {
+      "name": "Lato",
+      "import": "import { Lato } from \"next/font/google\";",
+      "initialization": "const lato = Lato({\n  variable: \"--font-lato\",\n  subsets: [\"latin\"],\n  weight: [\"100\", \"300\", \"400\", \"700\", \"900\"],\n});",
+      "className": "${lato.variable}",
+      "cssVariable": "font-family: var(--font-lato), sans-serif;"
+    },
+    "dmSans": {
+      "name": "DM Sans",
+      "import": "import { DM_Sans } from \"next/font/google\";",
+      "initialization": "const dmSans = DM_Sans({\n  variable: \"--font-dm-sans\",\n  subsets: [\"latin\"],\n});",
+      "className": "${dmSans.variable}",
+      "cssVariable": "font-family: var(--font-dm-sans), sans-serif;"
+    },
+    "manrope": {
+      "name": "Manrope",
+      "import": "import { Manrope } from \"next/font/google\";",
+      "initialization": "const manrope = Manrope({\n  variable: \"--font-manrope\",\n  subsets: [\"latin\"],\n});",
+      "className": "${manrope.variable}",
+      "cssVariable": "font-family: var(--font-manrope), sans-serif;"
+    },
+    "sourceSans3": {
+      "name": "Source Sans 3",
+      "import": "import { Source_Sans_3 } from \"next/font/google\";",
+      "initialization": "const sourceSans3 = Source_Sans_3({\n  variable: \"--font-source-sans-3\",\n  subsets: [\"latin\"],\n});",
+      "className": "${sourceSans3.variable}",
+      "cssVariable": "font-family: var(--font-source-sans-3), sans-serif;"
+    },
+    "publicSans": {
+      "name": "Public Sans",
+      "import": "import { Public_Sans } from \"next/font/google\";",
+      "initialization": "const publicSans = Public_Sans({\n  variable: \"--font-public-sans\",\n  subsets: [\"latin\"],\n});",
+      "className": "${publicSans.variable}",
+      "cssVariable": "font-family: var(--font-public-sans), sans-serif;"
+    },
+    "mulish": {
+      "name": "Mulish",
+      "import": "import { Mulish } from \"next/font/google\";",
+      "initialization": "const mulish = Mulish({\n  variable: \"--font-mulish\",\n  subsets: [\"latin\"],\n});",
+      "className": "${mulish.variable}",
+      "cssVariable": "font-family: var(--font-mulish), sans-serif;"
+    },
+    "nunito": {
+      "name": "Nunito",
+      "import": "import { Nunito } from \"next/font/google\";",
+      "initialization": "const nunito = Nunito({\n  variable: \"--font-nunito\",\n  subsets: [\"latin\"],\n});",
+      "className": "${nunito.variable}",
+      "cssVariable": "font-family: var(--font-nunito), sans-serif;"
+    },
+    "nunitoSans": {
+      "name": "Nunito Sans",
+      "import": "import { Nunito_Sans } from \"next/font/google\";",
+      "initialization": "const nunitoSans = Nunito_Sans({\n  variable: \"--font-nunito-sans\",\n  subsets: [\"latin\"],\n});",
+      "className": "${nunitoSans.variable}",
+      "cssVariable": "font-family: var(--font-nunito-sans), sans-serif;"
+    },
+    "raleway": {
+      "name": "Raleway",
+      "import": "import { Raleway } from \"next/font/google\";",
+      "initialization": "const raleway = Raleway({\n  variable: \"--font-raleway\",\n  subsets: [\"latin\"],\n});",
+      "className": "${raleway.variable}",
+      "cssVariable": "font-family: var(--font-raleway), sans-serif;"
+    },
+    "archivo": {
+      "name": "Archivo",
+      "import": "import { Archivo } from \"next/font/google\";",
+      "initialization": "const archivo = Archivo({\n  variable: \"--font-archivo\",\n  subsets: [\"latin\"],\n});",
+      "className": "${archivo.variable}",
+      "cssVariable": "font-family: var(--font-archivo), sans-serif;"
+    },
+    "figtree": {
+      "name": "Figtree",
+      "import": "import { Figtree } from \"next/font/google\";",
+      "initialization": "const figtree = Figtree({\n  variable: \"--font-figtree\",\n  subsets: [\"latin\"],\n});",
+      "className": "${figtree.variable}",
+      "cssVariable": "font-family: var(--font-figtree), sans-serif;"
+    }
+  },
+  "fontPairings": {
+    "interOpenSans": {
+      "name": "Inter + Open Sans",
+      "description": "Neutral headings with friendly body. Clean and approachable.",
+      "headingFont": "inter",
+      "bodyFont": "openSans",
+      "imports": "import { Inter } from \"next/font/google\";\nimport { Open_Sans } from \"next/font/google\";",
+      "initializations": "const inter = Inter({\n  variable: \"--font-inter\",\n  subsets: [\"latin\"],\n});\n\nconst openSans = Open_Sans({\n  variable: \"--font-open-sans\",\n  subsets: [\"latin\"],\n});",
+      "classNames": "${inter.variable} ${openSans.variable}",
+      "globalsCss": {
+        "instructions": "Update the font-family property within the existing CSS rules in globals.css (@layer base section)",
+        "bodyRule": "body {\n  /* ... existing properties ... */\n  font-family: var(--font-open-sans), sans-serif;\n}",
+        "headingsRule": "h1, h2, h3, h4, h5, h6 {\n  font-family: var(--font-inter), sans-serif;\n}",
+        "bodyFontFamily": "var(--font-open-sans), sans-serif",
+        "headingsFontFamily": "var(--font-inter), sans-serif"
+      }
+    },
+    "dmSansInter": {
+      "name": "DM Sans + Inter",
+      "description": "Modern geometric headings with neutral body. Contemporary and clean.",
+      "headingFont": "dmSans",
+      "bodyFont": "inter",
+      "imports": "import { DM_Sans } from \"next/font/google\";\nimport { Inter } from \"next/font/google\";",
+      "initializations": "const dmSans = DM_Sans({\n  variable: \"--font-dm-sans\",\n  subsets: [\"latin\"],\n});\n\nconst inter = Inter({\n  variable: \"--font-inter\",\n  subsets: [\"latin\"],\n});",
+      "classNames": "${dmSans.variable} ${inter.variable}",
+      "globalsCss": {
+        "instructions": "Update the font-family property within the existing CSS rules in globals.css (@layer base section)",
+        "bodyRule": "body {\n  /* ... existing properties ... */\n  font-family: var(--font-inter), sans-serif;\n}",
+        "headingsRule": "h1, h2, h3, h4, h5, h6 {\n  font-family: var(--font-dm-sans), sans-serif;\n}",
+        "bodyFontFamily": "var(--font-inter), sans-serif",
+        "headingsFontFamily": "var(--font-dm-sans), sans-serif"
+      }
+    },
+    "manropeDmSans": {
+      "name": "Manrope + DM Sans",
+      "description": "Geometric headings with clean body. Modern and professional.",
+      "headingFont": "manrope",
+      "bodyFont": "dmSans",
+      "imports": "import { Manrope } from \"next/font/google\";\nimport { DM_Sans } from \"next/font/google\";",
+      "initializations": "const manrope = Manrope({\n  variable: \"--font-manrope\",\n  subsets: [\"latin\"],\n});\n\nconst dmSans = DM_Sans({\n  variable: \"--font-dm-sans\",\n  subsets: [\"latin\"],\n});",
+      "classNames": "${manrope.variable} ${dmSans.variable}",
+      "globalsCss": {
+        "instructions": "Update the font-family property within the existing CSS rules in globals.css (@layer base section)",
+        "bodyRule": "body {\n  /* ... existing properties ... */\n  font-family: var(--font-dm-sans), sans-serif;\n}",
+        "headingsRule": "h1, h2, h3, h4, h5, h6 {\n  font-family: var(--font-manrope), sans-serif;\n}",
+        "bodyFontFamily": "var(--font-dm-sans), sans-serif",
+        "headingsFontFamily": "var(--font-manrope), sans-serif"
+      }
+    },
+    "publicSansInter": {
+      "name": "Public Sans + Inter",
+      "description": "Government-inspired headings with neutral body. Professional and trustworthy.",
+      "headingFont": "publicSans",
+      "bodyFont": "inter",
+      "imports": "import { Public_Sans } from \"next/font/google\";\nimport { Inter } from \"next/font/google\";",
+      "initializations": "const publicSans = Public_Sans({\n  variable: \"--font-public-sans\",\n  subsets: [\"latin\"],\n});\n\nconst inter = Inter({\n  variable: \"--font-inter\",\n  subsets: [\"latin\"],\n});",
+      "classNames": "${publicSans.variable} ${inter.variable}",
+      "globalsCss": {
+        "instructions": "Update the font-family property within the existing CSS rules in globals.css (@layer base section)",
+        "bodyRule": "body {\n  /* ... existing properties ... */\n  font-family: var(--font-inter), sans-serif;\n}",
+        "headingsRule": "h1, h2, h3, h4, h5, h6 {\n  font-family: var(--font-public-sans), sans-serif;\n}",
+        "bodyFontFamily": "var(--font-inter), sans-serif",
+        "headingsFontFamily": "var(--font-public-sans), sans-serif"
+      }
+    },
+    "mulishInter": {
+      "name": "Mulish + Inter",
+      "description": "Minimal headings with neutral body. Clean and modern.",
+      "headingFont": "mulish",
+      "bodyFont": "inter",
+      "imports": "import { Mulish } from \"next/font/google\";\nimport { Inter } from \"next/font/google\";",
+      "initializations": "const mulish = Mulish({\n  variable: \"--font-mulish\",\n  subsets: [\"latin\"],\n});\n\nconst inter = Inter({\n  variable: \"--font-inter\",\n  subsets: [\"latin\"],\n});",
+      "classNames": "${mulish.variable} ${inter.variable}",
+      "globalsCss": {
+        "instructions": "Update the font-family property within the existing CSS rules in globals.css (@layer base section)",
+        "bodyRule": "body {\n  /* ... existing properties ... */\n  font-family: var(--font-inter), sans-serif;\n}",
+        "headingsRule": "h1, h2, h3, h4, h5, h6 {\n  font-family: var(--font-mulish), sans-serif;\n}",
+        "bodyFontFamily": "var(--font-inter), sans-serif",
+        "headingsFontFamily": "var(--font-mulish), sans-serif"
+      }
+    },
+    "montserratInter": {
+      "name": "Montserrat + Inter",
+      "description": "Geometric sans-serif headings with neutral body. Popular and reliable.",
+      "headingFont": "montserrat",
+      "bodyFont": "inter",
+      "imports": "import { Montserrat } from \"next/font/google\";\nimport { Inter } from \"next/font/google\";",
+      "initializations": "const montserrat = Montserrat({\n  variable: \"--font-montserrat\",\n  subsets: [\"latin\"],\n});\n\nconst inter = Inter({\n  variable: \"--font-inter\",\n  subsets: [\"latin\"],\n});",
+      "classNames": "${montserrat.variable} ${inter.variable}",
+      "globalsCss": {
+        "instructions": "Update the font-family property within the existing CSS rules in globals.css (@layer base section)",
+        "bodyRule": "body {\n  /* ... existing properties ... */\n  font-family: var(--font-inter), sans-serif;\n}",
+        "headingsRule": "h1, h2, h3, h4, h5, h6 {\n  font-family: var(--font-montserrat), sans-serif;\n}",
+        "bodyFontFamily": "var(--font-inter), sans-serif",
+        "headingsFontFamily": "var(--font-montserrat), sans-serif"
+      }
+    },
+    "libreBaskervilleInter": {
+      "name": "Libre Baskerville + Inter",
+      "description": "Classic serif headings with neutral body. Elegant and readable.",
+      "headingFont": "libreBaskerville",
+      "bodyFont": "inter",
+      "imports": "import { Libre_Baskerville } from \"next/font/google\";\nimport { Inter } from \"next/font/google\";",
+      "initializations": "const libreBaskerville = Libre_Baskerville({\n  variable: \"--font-libre-baskerville\",\n  subsets: [\"latin\"],\n  weight: [\"400\", \"700\"],\n});\n\nconst inter = Inter({\n  variable: \"--font-inter\",\n  subsets: [\"latin\"],\n});",
+      "classNames": "${libreBaskerville.variable} ${inter.variable}",
+      "globalsCss": {
+        "instructions": "Update the font-family property within the existing CSS rules in globals.css (@layer base section)",
+        "bodyRule": "body {\n  /* ... existing properties ... */\n  font-family: var(--font-inter), sans-serif;\n}",
+        "headingsRule": "h1, h2, h3, h4, h5, h6 {\n  font-family: var(--font-libre-baskerville), serif;\n}",
+        "bodyFontFamily": "var(--font-inter), sans-serif",
+        "headingsFontFamily": "var(--font-libre-baskerville), serif"
+      }
+    }
+  }
+}
diff --git a/next-env.d.ts b/next-env.d.ts
new file mode 100644
index 0000000..9edff1c
--- /dev/null
+++ b/next-env.d.ts
@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+import "./.next/types/routes.d.ts";
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/next.config.ts b/next.config.ts
new file mode 100644
index 0000000..9649322
--- /dev/null
+++ b/next.config.ts
@@ -0,0 +1,32 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  allowedDevOrigins: ["*.sandbox-staging.webild.io", "*.webildsbx.cc", "*.webild.io"],
+  devIndicators: false,
+  experimental: {
+      serverComponentsHmrCache: false,
+  },
+  images: {
+            localPatterns: [
+          {
+              pathname: '/**',
+          },
+      ],
+      remotePatterns: [
+          {
+              protocol: 'https',
+              hostname: 'webuild-dev.s3.eu-north-1.amazonaws.com',
+          },
+          {
+              protocol: 'https',
+              hostname: 'img.b2bpic.net',
+          },
+          {
+              protocol: 'https',
+              hostname: 'freepik.com',
+          },
+      ],
+  }
+};
+
+export default nextConfig;
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..3398796
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,8321 @@
+{
+  "name": "webild-components-2",
+  "version": "0.1.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "webild-components-2",
+      "version": "0.1.0",
+      "dependencies": {
+        "@gsap/react": "^2.1.2",
+        "@react-three/drei": "^10.7.7",
+        "@react-three/fiber": "^9.4.0",
+        "@rive-app/react-canvas": "^4.26.2",
+        "@tsparticles/engine": "^3.9.1",
+        "@tsparticles/react": "^3.0.0",
+        "@tsparticles/slim": "^3.9.1",
+        "clsx": "^2.1.1",
+        "cobe": "^0.6.5",
+        "embla-carousel-auto-scroll": "^8.6.0",
+        "embla-carousel-react": "^8.6.0",
+        "gsap": "^3.13.0",
+        "lenis": "^1.3.15",
+        "lucide-react": "^0.555.0",
+        "motion-number": "^1.0.0",
+        "next": "16.0.7",
+        "react": "19.2.1",
+        "react-dom": "19.2.1",
+        "react-fast-marquee": "^1.6.5",
+        "recharts": "^3.6.0",
+        "tailwind-merge": "^3.4.0",
+        "three": "^0.181.2"
+      },
+      "devDependencies": {
+        "@eslint/eslintrc": "^3",
+        "@tailwindcss/postcss": "^4",
+        "@types/node": "^20",
+        "@types/react": "^19",
+        "@types/react-dom": "^19",
+        "eslint": "^9",
+        "eslint-config-next": "16.0.7",
+        "tailwindcss": "^4",
+        "typescript": "^5"
+      }
+    },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@babel/code-frame": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz",
+      "integrity": "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.27.1",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/compat-data": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.28.5.tgz",
+      "integrity": "sha512-6uFXyCayocRbqhZOB+6XcuZbkMNimwfVGFji8CTZnCzOHVGvDqzvitu1re2AU5LROliz7eQPhB8CpAMvnx9EjA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/core": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.5.tgz",
+      "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.27.1",
+        "@babel/generator": "^7.28.5",
+        "@babel/helper-compilation-targets": "^7.27.2",
+        "@babel/helper-module-transforms": "^7.28.3",
+        "@babel/helpers": "^7.28.4",
+        "@babel/parser": "^7.28.5",
+        "@babel/template": "^7.27.2",
+        "@babel/traverse": "^7.28.5",
+        "@babel/types": "^7.28.5",
+        "@jridgewell/remapping": "^2.3.5",
+        "convert-source-map": "^2.0.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.2.3",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
+      }
+    },
+    "node_modules/@babel/core/node_modules/json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@babel/core/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/generator": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.28.5.tgz",
+      "integrity": "sha512-3EwLFhZ38J4VyIP6WNtt2kUdW9dokXA9Cr4IVIFHuCpZ3H8/YFOl5JjZHisrn1fATPBmKKqXzDFvh9fUwHz6CQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.28.5",
+        "@babel/types": "^7.28.5",
+        "@jridgewell/gen-mapping": "^0.3.12",
+        "@jridgewell/trace-mapping": "^0.3.28",
+        "jsesc": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets": {
+      "version": "7.27.2",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.27.2.tgz",
+      "integrity": "sha512-2+1thGUUWWjLTYTHZWK1n8Yga0ijBz1XAhUXcKy81rd5g6yh7hGqMp45v7cadSbEHc9G3OTv45SyneRN3ps4DQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/compat-data": "^7.27.2",
+        "@babel/helper-validator-option": "^7.27.1",
+        "browserslist": "^4.24.0",
+        "lru-cache": "^5.1.1",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/helper-globals": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.28.0.tgz",
+      "integrity": "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.27.1.tgz",
+      "integrity": "sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.27.1",
+        "@babel/types": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-transforms": {
+      "version": "7.28.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.28.3.tgz",
+      "integrity": "sha512-gytXUbs8k2sXS9PnQptz5o0QnpLL51SwASIORY6XaBKF88nsOT0Zw9szLqlSGQDP/4TljBAD5y98p2U1fqkdsw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.27.1",
+        "@babel/traverse": "^7.28.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
+      "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
+      "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-option": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.27.1.tgz",
+      "integrity": "sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helpers": {
+      "version": "7.28.4",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.28.4.tgz",
+      "integrity": "sha512-HFN59MmQXGHVyYadKLVumYsA9dBFun/ldYxipEjzA4196jpLZd8UjEEBLkbEkvfYreDqJhZxYAWFPtrfhNpj4w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/template": "^7.27.2",
+        "@babel/types": "^7.28.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.5.tgz",
+      "integrity": "sha512-KKBU1VGYR7ORr3At5HAtUQ+TV3SzRCXmA/8OdDZiLDBIZxVyzXuztPjfLd3BV1PRAQGCMWWSHYhL0F8d5uHBDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.28.5"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/runtime": {
+      "version": "7.28.4",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.4.tgz",
+      "integrity": "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/template": {
+      "version": "7.27.2",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz",
+      "integrity": "sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.27.1",
+        "@babel/parser": "^7.27.2",
+        "@babel/types": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.28.5.tgz",
+      "integrity": "sha512-TCCj4t55U90khlYkVV/0TfkJkAkUg3jZFA3Neb7unZT8CPok7iiRfaX0F+WnqWqt7OxhOn0uBKXCw4lbL8W0aQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.27.1",
+        "@babel/generator": "^7.28.5",
+        "@babel/helper-globals": "^7.28.0",
+        "@babel/parser": "^7.28.5",
+        "@babel/template": "^7.27.2",
+        "@babel/types": "^7.28.5",
+        "debug": "^4.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.5.tgz",
+      "integrity": "sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.28.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@dimforge/rapier3d-compat": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/@dimforge/rapier3d-compat/-/rapier3d-compat-0.12.0.tgz",
+      "integrity": "sha512-uekIGetywIgopfD97oDL5PfeezkFpNhwlzlaEYNOA0N6ghdsOvh/HYjSMek5Q2O1PYvRSDFcqFVJl4r4ZBwOow==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@emnapi/core": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.5.0.tgz",
+      "integrity": "sha512-sbP8GzB1WDzacS8fgNPpHlp6C9VZe+SJP3F90W9rLemaQj2PzIuTEl1qDOYQf58YIpyjViI24y9aPWCjEzY2cg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.1.0",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.5.0.tgz",
+      "integrity": "sha512-97/BJ3iXHww3djw6hYIfErCZFee7qCtrneuLa20UXFCOTCfBM2cvQHjWJ2EG0s0MtdNwInarqCTz35i4wWXHsQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/wasi-threads": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.1.0.tgz",
+      "integrity": "sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@eslint-community/eslint-utils": {
+      "version": "4.9.0",
+      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.9.0.tgz",
+      "integrity": "sha512-ayVFHdtZ+hsq1t2Dy24wCmGXGe4q9Gu3smhLYALJrr473ZH27MsnSL+LKUlimp4BWJqMDMLmPpx/Q9R3OAlL4g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eslint-visitor-keys": "^3.4.3"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
+      }
+    },
+    "node_modules/@eslint-community/eslint-utils/node_modules/eslint-visitor-keys": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@eslint-community/regexpp": {
+      "version": "4.12.1",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.1.tgz",
+      "integrity": "sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@eslint/config-array": {
+      "version": "0.21.0",
+      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.21.0.tgz",
+      "integrity": "sha512-ENIdc4iLu0d93HeYirvKmrzshzofPw6VkZRKQGe9Nv46ZnWUzcF1xV01dcvEg/1wXUR61OmmlSfyeyO7EvjLxQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/object-schema": "^2.1.6",
+        "debug": "^4.3.1",
+        "minimatch": "^3.1.2"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/config-helpers": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.3.1.tgz",
+      "integrity": "sha512-xR93k9WhrDYpXHORXpxVL5oHj3Era7wo6k/Wd8/IsQNnZUTzkGS29lyn3nAT05v6ltUuTFVCCYDEGfy2Or/sPA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/core": {
+      "version": "0.15.2",
+      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.15.2.tgz",
+      "integrity": "sha512-78Md3/Rrxh83gCxoUc0EiciuOHsIITzLy53m3d9UyiW8y9Dj2D29FeETqyKA+BRK76tnTp6RXWb3pCay8Oyomg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@types/json-schema": "^7.0.15"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/eslintrc": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.3.1.tgz",
+      "integrity": "sha512-gtF186CXhIl1p4pJNGZw8Yc6RlshoePRvE0X91oPGb3vZ8pM3qOS9W9NGPat9LziaBV7XrJWGylNQXkGcnM3IQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ajv": "^6.12.4",
+        "debug": "^4.3.2",
+        "espree": "^10.0.1",
+        "globals": "^14.0.0",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.2.1",
+        "js-yaml": "^4.1.0",
+        "minimatch": "^3.1.2",
+        "strip-json-comments": "^3.1.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@eslint/js": {
+      "version": "9.36.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.36.0.tgz",
+      "integrity": "sha512-uhCbYtYynH30iZErszX78U+nR3pJU3RHGQ57NXy5QupD4SBVwDeU8TNBy+MjMngc1UyIW9noKqsRqfjQTBU2dw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://eslint.org/donate"
+      }
+    },
+    "node_modules/@eslint/object-schema": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.6.tgz",
+      "integrity": "sha512-RBMg5FRL0I0gs51M/guSAj5/e14VQ4tpZnQNWwuDT66P14I43ItmPfIZRhO9fUVIPOAQXU47atlywZ/czoqFPA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/plugin-kit": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.3.5.tgz",
+      "integrity": "sha512-Z5kJ+wU3oA7MMIqVR9tyZRtjYPr4OC004Q4Rw7pgOKUOKkJfZ3O24nz3WYfGRpMDNmcOi3TwQOmgm7B7Tpii0w==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/core": "^0.15.2",
+        "levn": "^0.4.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@gsap/react": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@gsap/react/-/react-2.1.2.tgz",
+      "integrity": "sha512-JqliybO1837UcgH2hVOM4VO+38APk3ECNrsuSM4MuXp+rbf+/2IG2K1YJiqfTcXQHH7XlA0m3ykniFYstfq0Iw==",
+      "license": "SEE LICENSE AT https://gsap.com/standard-license",
+      "peerDependencies": {
+        "gsap": "^3.12.5",
+        "react": ">=17"
+      }
+    },
+    "node_modules/@humanfs/core": {
+      "version": "0.19.1",
+      "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
+      "integrity": "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanfs/node": {
+      "version": "0.16.7",
+      "resolved": "https://registry.npmjs.org/@humanfs/node/-/node-0.16.7.tgz",
+      "integrity": "sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@humanfs/core": "^0.19.1",
+        "@humanwhocodes/retry": "^0.4.0"
+      },
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanwhocodes/module-importer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
+      "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12.22"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@humanwhocodes/retry": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.4.3.tgz",
+      "integrity": "sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@img/colour": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.0.0.tgz",
+      "integrity": "sha512-A5P/LfWGFSl6nsckYtjw9da+19jB8hkJ6ACTGcDfEJ0aE+l2n2El7dsVM7UVHZQ9s2lmYMWlrS21YLy2IR1LUw==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@img/sharp-darwin-arm64": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.34.4.tgz",
+      "integrity": "sha512-sitdlPzDVyvmINUdJle3TNHl+AG9QcwiAMsXmccqsCOMZNIdW2/7S26w0LyU8euiLVzFBL3dXPwVCq/ODnf2vA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-arm64": "1.2.3"
+      }
+    },
+    "node_modules/@img/sharp-darwin-x64": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.34.4.tgz",
+      "integrity": "sha512-rZheupWIoa3+SOdF/IcUe1ah4ZDpKBGWcsPX6MT0lYniH9micvIU7HQkYTfrx5Xi8u+YqwLtxC/3vl8TQN6rMg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-x64": "1.2.3"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-arm64": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.2.3.tgz",
+      "integrity": "sha512-QzWAKo7kpHxbuHqUC28DZ9pIKpSi2ts2OJnoIGI26+HMgq92ZZ4vk8iJd4XsxN+tYfNJxzH6W62X5eTcsBymHw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-x64": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.2.3.tgz",
+      "integrity": "sha512-Ju+g2xn1E2AKO6YBhxjj+ACcsPQRHT0bhpglxcEf+3uyPY+/gL8veniKoo96335ZaPo03bdDXMv0t+BBFAbmRA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.2.3.tgz",
+      "integrity": "sha512-x1uE93lyP6wEwGvgAIV0gP6zmaL/a0tGzJs/BIDDG0zeBhMnuUPm7ptxGhUbcGs4okDJrk4nxgrmxpib9g6HpA==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm64": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.2.3.tgz",
+      "integrity": "sha512-I4RxkXU90cpufazhGPyVujYwfIm9Nk1QDEmiIsaPwdnm013F7RIceaCc87kAH+oUB1ezqEvC6ga4m7MSlqsJvQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-ppc64": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.2.3.tgz",
+      "integrity": "sha512-Y2T7IsQvJLMCBM+pmPbM3bKT/yYJvVtLJGfCs4Sp95SjvnFIjynbjzsa7dY1fRJX45FTSfDksbTp6AGWudiyCg==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-s390x": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.2.3.tgz",
+      "integrity": "sha512-RgWrs/gVU7f+K7P+KeHFaBAJlNkD1nIZuVXdQv6S+fNA6syCcoboNjsV2Pou7zNlVdNQoQUpQTk8SWDHUA3y/w==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-x64": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.2.3.tgz",
+      "integrity": "sha512-3JU7LmR85K6bBiRzSUc/Ff9JBVIFVvq6bomKE0e63UXGeRw2HPVEjoJke1Yx+iU4rL7/7kUjES4dZ/81Qjhyxg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.2.3.tgz",
+      "integrity": "sha512-F9q83RZ8yaCwENw1GieztSfj5msz7GGykG/BA+MOUefvER69K/ubgFHNeSyUu64amHIYKGDs4sRCMzXVj8sEyw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-x64": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.2.3.tgz",
+      "integrity": "sha512-U5PUY5jbc45ANM6tSJpsgqmBF/VsL6LnxJmIf11kB7J5DctHgqm0SkuXzVWtIY90GnJxKnC/JT251TDnk1fu/g==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.34.4.tgz",
+      "integrity": "sha512-Xyam4mlqM0KkTHYVSuc6wXRmM7LGN0P12li03jAnZ3EJWZqj83+hi8Y9UxZUbxsgsK1qOEwg7O0Bc0LjqQVtxA==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm": "1.2.3"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm64": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.34.4.tgz",
+      "integrity": "sha512-YXU1F/mN/Wu786tl72CyJjP/Ngl8mGHN1hST4BGl+hiW5jhCnV2uRVTNOcaYPs73NeT/H8Upm3y9582JVuZHrQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm64": "1.2.3"
+      }
+    },
+    "node_modules/@img/sharp-linux-ppc64": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-ppc64/-/sharp-linux-ppc64-0.34.4.tgz",
+      "integrity": "sha512-F4PDtF4Cy8L8hXA2p3TO6s4aDt93v+LKmpcYFLAVdkkD3hSxZzee0rh6/+94FpAynsuMpLX5h+LRsSG3rIciUQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-ppc64": "1.2.3"
+      }
+    },
+    "node_modules/@img/sharp-linux-s390x": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.34.4.tgz",
+      "integrity": "sha512-qVrZKE9Bsnzy+myf7lFKvng6bQzhNUAYcVORq2P7bDlvmF6u2sCmK2KyEQEBdYk+u3T01pVsPrkj943T1aJAsw==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-s390x": "1.2.3"
+      }
+    },
+    "node_modules/@img/sharp-linux-x64": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.34.4.tgz",
+      "integrity": "sha512-ZfGtcp2xS51iG79c6Vhw9CWqQC8l2Ot8dygxoDoIQPTat/Ov3qAa8qpxSrtAEAJW+UjTXc4yxCjNfxm4h6Xm2A==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-x64": "1.2.3"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-arm64": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.34.4.tgz",
+      "integrity": "sha512-8hDVvW9eu4yHWnjaOOR8kHVrew1iIX+MUgwxSuH2XyYeNRtLUe4VNioSqbNkB7ZYQJj9rUTT4PyRscyk2PXFKA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-arm64": "1.2.3"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-x64": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.34.4.tgz",
+      "integrity": "sha512-lU0aA5L8QTlfKjpDCEFOZsTYGn3AEiO6db8W5aQDxj0nQkVrZWmN3ZP9sYKWJdtq3PWPhUNlqehWyXpYDcI9Sg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-x64": "1.2.3"
+      }
+    },
+    "node_modules/@img/sharp-wasm32": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.34.4.tgz",
+      "integrity": "sha512-33QL6ZO/qpRyG7woB/HUALz28WnTMI2W1jgX3Nu2bypqLIKx/QKMILLJzJjI+SIbvXdG9fUnmrxR7vbi1sTBeA==",
+      "cpu": [
+        "wasm32"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/runtime": "^1.5.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-arm64": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.34.4.tgz",
+      "integrity": "sha512-2Q250do/5WXTwxW3zjsEuMSv5sUU4Tq9VThWKlU2EYLm4MB7ZeMwF+SFJutldYODXF6jzc6YEOC+VfX0SZQPqA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-ia32": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.34.4.tgz",
+      "integrity": "sha512-3ZeLue5V82dT92CNL6rsal6I2weKw1cYu+rGKm8fOCCtJTR2gYeUfY3FqUnIJsMUPIH68oS5jmZ0NiJ508YpEw==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-x64": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.34.4.tgz",
+      "integrity": "sha512-xIyj4wpYs8J18sVN3mSQjwrw7fKUqRw+Z5rnHNCy5fYTxigBz81u5mOMPmFumwjcn8+ld1ppptMBCLic1nz6ig==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@isaacs/fs-minipass": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@isaacs/fs-minipass/-/fs-minipass-4.0.1.tgz",
+      "integrity": "sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^7.0.4"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@mediapipe/tasks-vision": {
+      "version": "0.10.17",
+      "resolved": "https://registry.npmjs.org/@mediapipe/tasks-vision/-/tasks-vision-0.10.17.tgz",
+      "integrity": "sha512-CZWV/q6TTe8ta61cZXjfnnHsfWIdFhms03M9T7Cnd5y2mdpylJM0rF1qRq+wsQVRMLz1OYPVEBU9ph2Bx8cxrg==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@monogrid/gainmap-js": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@monogrid/gainmap-js/-/gainmap-js-3.1.0.tgz",
+      "integrity": "sha512-Obb0/gEd/HReTlg8ttaYk+0m62gQJmCblMOjHSMHRrBP2zdfKMHLCRbh/6ex9fSUJMKdjjIEiohwkbGD3wj2Nw==",
+      "license": "MIT",
+      "dependencies": {
+        "promise-worker-transferable": "^1.0.4"
+      },
+      "peerDependencies": {
+        "three": ">= 0.159.0"
+      }
+    },
+    "node_modules/@napi-rs/wasm-runtime": {
+      "version": "0.2.12",
+      "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-0.2.12.tgz",
+      "integrity": "sha512-ZVWUcfwY4E/yPitQJl481FjFo3K22D6qF0DuFH6Y/nbnE11GY5uguDxZMGXPQ8WQ0128MXQD7TnfHyK4oWoIJQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.4.3",
+        "@emnapi/runtime": "^1.4.3",
+        "@tybys/wasm-util": "^0.10.0"
+      }
+    },
+    "node_modules/@next/env": {
+      "version": "16.0.7",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-16.0.7.tgz",
+      "integrity": "sha512-gpaNgUh5nftFKRkRQGnVi5dpcYSKGcZZkQffZ172OrG/XkrnS7UBTQ648YY+8ME92cC4IojpI2LqTC8sTDhAaw==",
+      "license": "MIT"
+    },
+    "node_modules/@next/eslint-plugin-next": {
+      "version": "16.0.7",
+      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-16.0.7.tgz",
+      "integrity": "sha512-hFrTNZcMEG+k7qxVxZJq3F32Kms130FAhG8lvw2zkKBgAcNOJIxlljNiCjGygvBshvaGBdf88q2CqWtnqezDHA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-glob": "3.3.1"
+      }
+    },
+    "node_modules/@next/swc-darwin-arm64": {
+      "version": "16.0.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-16.0.7.tgz",
+      "integrity": "sha512-LlDtCYOEj/rfSnEn/Idi+j1QKHxY9BJFmxx7108A6D8K0SB+bNgfYQATPk/4LqOl4C0Wo3LACg2ie6s7xqMpJg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-darwin-x64": {
+      "version": "16.0.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-16.0.7.tgz",
+      "integrity": "sha512-rtZ7BhnVvO1ICf3QzfW9H3aPz7GhBrnSIMZyr4Qy6boXF0b5E3QLs+cvJmg3PsTCG2M1PBoC+DANUi4wCOKXpA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-gnu": {
+      "version": "16.0.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-16.0.7.tgz",
+      "integrity": "sha512-mloD5WcPIeIeeZqAIP5c2kdaTa6StwP4/2EGy1mUw8HiexSHGK/jcM7lFuS3u3i2zn+xH9+wXJs6njO7VrAqww==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-musl": {
+      "version": "16.0.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-16.0.7.tgz",
+      "integrity": "sha512-+ksWNrZrthisXuo9gd1XnjHRowCbMtl/YgMpbRvFeDEqEBd523YHPWpBuDjomod88U8Xliw5DHhekBC3EOOd9g==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-gnu": {
+      "version": "16.0.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-16.0.7.tgz",
+      "integrity": "sha512-4WtJU5cRDxpEE44Ana2Xro1284hnyVpBb62lIpU5k85D8xXxatT+rXxBgPkc7C1XwkZMWpK5rXLXTh9PFipWsA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-musl": {
+      "version": "16.0.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-16.0.7.tgz",
+      "integrity": "sha512-HYlhqIP6kBPXalW2dbMTSuB4+8fe+j9juyxwfMwCe9kQPPeiyFn7NMjNfoFOfJ2eXkeQsoUGXg+O2SE3m4Qg2w==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-arm64-msvc": {
+      "version": "16.0.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-16.0.7.tgz",
+      "integrity": "sha512-EviG+43iOoBRZg9deGauXExjRphhuYmIOJ12b9sAPy0eQ6iwcPxfED2asb/s2/yiLYOdm37kPaiZu8uXSYPs0Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-x64-msvc": {
+      "version": "16.0.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-16.0.7.tgz",
+      "integrity": "sha512-gniPjy55zp5Eg0896qSrf3yB1dw4F/3s8VK1ephdsZZ129j2n6e1WqCbE2YgcKhW9hPB9TVZENugquWJD5x0ug==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nolyfill/is-core-module": {
+      "version": "1.0.39",
+      "resolved": "https://registry.npmjs.org/@nolyfill/is-core-module/-/is-core-module-1.0.39.tgz",
+      "integrity": "sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.4.0"
+      }
+    },
+    "node_modules/@react-three/drei": {
+      "version": "10.7.7",
+      "resolved": "https://registry.npmjs.org/@react-three/drei/-/drei-10.7.7.tgz",
+      "integrity": "sha512-ff+J5iloR0k4tC++QtD/j9u3w5fzfgFAWDtAGQah9pF2B1YgOq/5JxqY0/aVoQG5r3xSZz0cv5tk2YuBob4xEQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.26.0",
+        "@mediapipe/tasks-vision": "0.10.17",
+        "@monogrid/gainmap-js": "^3.0.6",
+        "@use-gesture/react": "^10.3.1",
+        "camera-controls": "^3.1.0",
+        "cross-env": "^7.0.3",
+        "detect-gpu": "^5.0.56",
+        "glsl-noise": "^0.0.0",
+        "hls.js": "^1.5.17",
+        "maath": "^0.10.8",
+        "meshline": "^3.3.1",
+        "stats-gl": "^2.2.8",
+        "stats.js": "^0.17.0",
+        "suspend-react": "^0.1.3",
+        "three-mesh-bvh": "^0.8.3",
+        "three-stdlib": "^2.35.6",
+        "troika-three-text": "^0.52.4",
+        "tunnel-rat": "^0.1.2",
+        "use-sync-external-store": "^1.4.0",
+        "utility-types": "^3.11.0",
+        "zustand": "^5.0.1"
+      },
+      "peerDependencies": {
+        "@react-three/fiber": "^9.0.0",
+        "react": "^19",
+        "react-dom": "^19",
+        "three": ">=0.159"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@react-three/fiber": {
+      "version": "9.4.0",
+      "resolved": "https://registry.npmjs.org/@react-three/fiber/-/fiber-9.4.0.tgz",
+      "integrity": "sha512-k4iu1R6e5D54918V4sqmISUkI5OgTw3v7/sDRKEC632Wd5g2WBtUS5gyG63X0GJO/HZUj1tsjSXfyzwrUHZl1g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.17.8",
+        "@types/react-reconciler": "^0.32.0",
+        "@types/webxr": "*",
+        "base64-js": "^1.5.1",
+        "buffer": "^6.0.3",
+        "its-fine": "^2.0.0",
+        "react-reconciler": "^0.31.0",
+        "react-use-measure": "^2.1.7",
+        "scheduler": "^0.25.0",
+        "suspend-react": "^0.1.3",
+        "use-sync-external-store": "^1.4.0",
+        "zustand": "^5.0.3"
+      },
+      "peerDependencies": {
+        "expo": ">=43.0",
+        "expo-asset": ">=8.4",
+        "expo-file-system": ">=11.0",
+        "expo-gl": ">=11.0",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0",
+        "react-native": ">=0.78",
+        "three": ">=0.156"
+      },
+      "peerDependenciesMeta": {
+        "expo": {
+          "optional": true
+        },
+        "expo-asset": {
+          "optional": true
+        },
+        "expo-file-system": {
+          "optional": true
+        },
+        "expo-gl": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@react-three/fiber/node_modules/scheduler": {
+      "version": "0.25.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.25.0.tgz",
+      "integrity": "sha512-xFVuu11jh+xcO7JOAGJNOXld8/TcEHK/4CituBUeUb5hqxJLj9YuemAEuvm9gQ/+pgXYfbQuqAkiYu+u7YEsNA==",
+      "license": "MIT"
+    },
+    "node_modules/@reduxjs/toolkit": {
+      "version": "2.11.2",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.11.2.tgz",
+      "integrity": "sha512-Kd6kAHTA6/nUpp8mySPqj3en3dm0tdMIgbttnQ1xFMVpufoj+ADi8pXLBsd4xzTRHQa7t/Jv8W5UnCuW4kuWMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@standard-schema/spec": "^1.0.0",
+        "@standard-schema/utils": "^0.3.0",
+        "immer": "^11.0.0",
+        "redux": "^5.0.1",
+        "redux-thunk": "^3.1.0",
+        "reselect": "^5.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.0 || ^18 || ^19",
+        "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-redux": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@reduxjs/toolkit/node_modules/immer": {
+      "version": "11.1.3",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-11.1.3.tgz",
+      "integrity": "sha512-6jQTc5z0KJFtr1UgFpIL3N9XSC3saRaI9PwWtzM2pSqkNGtiNkYY2OSwkOGDK2XcTRcLb1pi/aNkKZz0nxVH4Q==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
+    "node_modules/@rive-app/canvas": {
+      "version": "2.34.2",
+      "resolved": "https://registry.npmjs.org/@rive-app/canvas/-/canvas-2.34.2.tgz",
+      "integrity": "sha512-s+Um9xHNDkZQTJ8oZZpJFLwQqJ2w7OA9Dsai+5vi1Y6fwUSHG8eRzgWVe6idT1rj1JkjXYZEWV1vlP0jkLQ4bw==",
+      "license": "MIT"
+    },
+    "node_modules/@rive-app/react-canvas": {
+      "version": "4.26.2",
+      "resolved": "https://registry.npmjs.org/@rive-app/react-canvas/-/react-canvas-4.26.2.tgz",
+      "integrity": "sha512-AAP0/jmU53io/qv26O8cT20FfgajS+8n0MSL6s52bCEX/zfKkbEZkJoqX5BS9BLbQkItiteiiZJR83KdgzHZ4w==",
+      "license": "MIT",
+      "dependencies": {
+        "@rive-app/canvas": "2.34.2"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0"
+      }
+    },
+    "node_modules/@rtsao/scc": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
+      "integrity": "sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@standard-schema/spec": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
+      "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
+      "license": "MIT"
+    },
+    "node_modules/@standard-schema/utils": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
+      "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
+      "license": "MIT"
+    },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.15",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
+      "integrity": "sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.8.0"
+      }
+    },
+    "node_modules/@tailwindcss/node": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.13.tgz",
+      "integrity": "sha512-eq3ouolC1oEFOAvOMOBAmfCIqZBJuvWvvYWh5h5iOYfe1HFC6+GZ6EIL0JdM3/niGRJmnrOc+8gl9/HGUaaptw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/remapping": "^2.3.4",
+        "enhanced-resolve": "^5.18.3",
+        "jiti": "^2.5.1",
+        "lightningcss": "1.30.1",
+        "magic-string": "^0.30.18",
+        "source-map-js": "^1.2.1",
+        "tailwindcss": "4.1.13"
+      }
+    },
+    "node_modules/@tailwindcss/oxide": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.13.tgz",
+      "integrity": "sha512-CPgsM1IpGRa880sMbYmG1s4xhAy3xEt1QULgTJGQmZUeNgXFR7s1YxYygmJyBGtou4SyEosGAGEeYqY7R53bIA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "dependencies": {
+        "detect-libc": "^2.0.4",
+        "tar": "^7.4.3"
+      },
+      "engines": {
+        "node": ">= 10"
+      },
+      "optionalDependencies": {
+        "@tailwindcss/oxide-android-arm64": "4.1.13",
+        "@tailwindcss/oxide-darwin-arm64": "4.1.13",
+        "@tailwindcss/oxide-darwin-x64": "4.1.13",
+        "@tailwindcss/oxide-freebsd-x64": "4.1.13",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.13",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.1.13",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.1.13",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.1.13",
+        "@tailwindcss/oxide-linux-x64-musl": "4.1.13",
+        "@tailwindcss/oxide-wasm32-wasi": "4.1.13",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.1.13",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.1.13"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-android-arm64": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.13.tgz",
+      "integrity": "sha512-BrpTrVYyejbgGo57yc8ieE+D6VT9GOgnNdmh5Sac6+t0m+v+sKQevpFVpwX3pBrM2qKrQwJ0c5eDbtjouY/+ew==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-arm64": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.13.tgz",
+      "integrity": "sha512-YP+Jksc4U0KHcu76UhRDHq9bx4qtBftp9ShK/7UGfq0wpaP96YVnnjFnj3ZFrUAjc5iECzODl/Ts0AN7ZPOANQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-x64": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.13.tgz",
+      "integrity": "sha512-aAJ3bbwrn/PQHDxCto9sxwQfT30PzyYJFG0u/BWZGeVXi5Hx6uuUOQEI2Fa43qvmUjTRQNZnGqe9t0Zntexeuw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-freebsd-x64": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.13.tgz",
+      "integrity": "sha512-Wt8KvASHwSXhKE/dJLCCWcTSVmBj3xhVhp/aF3RpAhGeZ3sVo7+NTfgiN8Vey/Fi8prRClDs6/f0KXPDTZE6nQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.13.tgz",
+      "integrity": "sha512-mbVbcAsW3Gkm2MGwA93eLtWrwajz91aXZCNSkGTx/R5eb6KpKD5q8Ueckkh9YNboU8RH7jiv+ol/I7ZyQ9H7Bw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.13.tgz",
+      "integrity": "sha512-wdtfkmpXiwej/yoAkrCP2DNzRXCALq9NVLgLELgLim1QpSfhQM5+ZxQQF8fkOiEpuNoKLp4nKZ6RC4kmeFH0HQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.13.tgz",
+      "integrity": "sha512-hZQrmtLdhyqzXHB7mkXfq0IYbxegaqTmfa1p9MBj72WPoDD3oNOh1Lnxf6xZLY9C3OV6qiCYkO1i/LrzEdW2mg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.13.tgz",
+      "integrity": "sha512-uaZTYWxSXyMWDJZNY1Ul7XkJTCBRFZ5Fo6wtjrgBKzZLoJNrG+WderJwAjPzuNZOnmdrVg260DKwXCFtJ/hWRQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-musl": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.13.tgz",
+      "integrity": "sha512-oXiPj5mi4Hdn50v5RdnuuIms0PVPI/EG4fxAfFiIKQh5TgQgX7oSuDWntHW7WNIi/yVLAiS+CRGW4RkoGSSgVQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.13.tgz",
+      "integrity": "sha512-+LC2nNtPovtrDwBc/nqnIKYh/W2+R69FA0hgoeOn64BdCX522u19ryLh3Vf3F8W49XBcMIxSe665kwy21FkhvA==",
+      "bundleDependencies": [
+        "@napi-rs/wasm-runtime",
+        "@emnapi/core",
+        "@emnapi/runtime",
+        "@tybys/wasm-util",
+        "@emnapi/wasi-threads",
+        "tslib"
+      ],
+      "cpu": [
+        "wasm32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.4.5",
+        "@emnapi/runtime": "^1.4.5",
+        "@emnapi/wasi-threads": "^1.0.4",
+        "@napi-rs/wasm-runtime": "^0.2.12",
+        "@tybys/wasm-util": "^0.10.0",
+        "tslib": "^2.8.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.13.tgz",
+      "integrity": "sha512-dziTNeQXtoQ2KBXmrjCxsuPk3F3CQ/yb7ZNZNA+UkNTeiTGgfeh+gH5Pi7mRncVgcPD2xgHvkFCh/MhZWSgyQg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.13.tgz",
+      "integrity": "sha512-3+LKesjXydTkHk5zXX01b5KMzLV1xl2mcktBJkje7rhFUpUlYJy7IMOLqjIRQncLTa1WZZiFY/foAeB5nmaiTw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/postcss": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.1.13.tgz",
+      "integrity": "sha512-HLgx6YSFKJT7rJqh9oJs/TkBFhxuMOfUKSBEPYwV+t78POOBsdQ7crhZLzwcH3T0UyUuOzU/GK5pk5eKr3wCiQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "@tailwindcss/node": "4.1.13",
+        "@tailwindcss/oxide": "4.1.13",
+        "postcss": "^8.4.41",
+        "tailwindcss": "4.1.13"
+      }
+    },
+    "node_modules/@tsparticles/basic": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/basic/-/basic-3.9.1.tgz",
+      "integrity": "sha512-ijr2dHMx0IQHqhKW3qA8tfwrR2XYbbWYdaJMQuBo2CkwBVIhZ76U+H20Y492j/NXpd1FUnt2aC0l4CEVGVGdeQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/matteobruni"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/tsparticles"
+        },
+        {
+          "type": "buymeacoffee",
+          "url": "https://www.buymeacoffee.com/matteobruni"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1",
+        "@tsparticles/move-base": "3.9.1",
+        "@tsparticles/plugin-hex-color": "3.9.1",
+        "@tsparticles/plugin-hsl-color": "3.9.1",
+        "@tsparticles/plugin-rgb-color": "3.9.1",
+        "@tsparticles/shape-circle": "3.9.1",
+        "@tsparticles/updater-color": "3.9.1",
+        "@tsparticles/updater-opacity": "3.9.1",
+        "@tsparticles/updater-out-modes": "3.9.1",
+        "@tsparticles/updater-size": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/engine": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/engine/-/engine-3.9.1.tgz",
+      "integrity": "sha512-DpdgAhWMZ3Eh2gyxik8FXS6BKZ8vyea+Eu5BC4epsahqTGY9V3JGGJcXC6lRJx6cPMAx1A0FaQAojPF3v6rkmQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/matteobruni"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/tsparticles"
+        },
+        {
+          "type": "buymeacoffee",
+          "url": "https://www.buymeacoffee.com/matteobruni"
+        }
+      ],
+      "hasInstallScript": true,
+      "license": "MIT"
+    },
+    "node_modules/@tsparticles/interaction-external-attract": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-attract/-/interaction-external-attract-3.9.1.tgz",
+      "integrity": "sha512-5AJGmhzM9o4AVFV24WH5vSqMBzOXEOzIdGLIr+QJf4fRh9ZK62snsusv/ozKgs2KteRYQx+L7c5V3TqcDy2upg==",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/interaction-external-bounce": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-bounce/-/interaction-external-bounce-3.9.1.tgz",
+      "integrity": "sha512-bv05+h70UIHOTWeTsTI1AeAmX6R3s8nnY74Ea6p6AbQjERzPYIa0XY19nq/hA7+Nrg+EissP5zgoYYeSphr85A==",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/interaction-external-bubble": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-bubble/-/interaction-external-bubble-3.9.1.tgz",
+      "integrity": "sha512-tbd8ox/1GPl+zr+KyHQVV1bW88GE7OM6i4zql801YIlCDrl9wgTDdDFGIy9X7/cwTvTrCePhrfvdkUamXIribQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/interaction-external-connect": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-connect/-/interaction-external-connect-3.9.1.tgz",
+      "integrity": "sha512-sq8YfUNsIORjXHzzW7/AJQtfi/qDqLnYG2qOSE1WOsog39MD30RzmiOloejOkfNeUdcGUcfsDgpUuL3UhzFUOA==",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/interaction-external-grab": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-grab/-/interaction-external-grab-3.9.1.tgz",
+      "integrity": "sha512-QwXza+sMMWDaMiFxd8y2tJwUK6c+nNw554+/9+tEZeTTk2fCbB0IJ7p/TH6ZGWDL0vo2muK54Njv2fEey191ow==",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/interaction-external-pause": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-pause/-/interaction-external-pause-3.9.1.tgz",
+      "integrity": "sha512-Gzv4/FeNir0U/tVM9zQCqV1k+IAgaFjDU3T30M1AeAsNGh/rCITV2wnT7TOGFkbcla27m4Yxa+Fuab8+8pzm+g==",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/interaction-external-push": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-push/-/interaction-external-push-3.9.1.tgz",
+      "integrity": "sha512-GvnWF9Qy4YkZdx+WJL2iy9IcgLvzOIu3K7aLYJFsQPaxT8d9TF8WlpoMlWKnJID6H5q4JqQuMRKRyWH8aAKyQw==",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/interaction-external-remove": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-remove/-/interaction-external-remove-3.9.1.tgz",
+      "integrity": "sha512-yPThm4UDWejDOWW5Qc8KnnS2EfSo5VFcJUQDWc1+Wcj17xe7vdSoiwwOORM0PmNBzdDpSKQrte/gUnoqaUMwOA==",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/interaction-external-repulse": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-repulse/-/interaction-external-repulse-3.9.1.tgz",
+      "integrity": "sha512-/LBppXkrMdvLHlEKWC7IykFhzrz+9nebT2fwSSFXK4plEBxDlIwnkDxd3FbVOAbnBvx4+L8+fbrEx+RvC8diAw==",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/interaction-external-slow": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-slow/-/interaction-external-slow-3.9.1.tgz",
+      "integrity": "sha512-1ZYIR/udBwA9MdSCfgADsbDXKSFS0FMWuPWz7bm79g3sUxcYkihn+/hDhc6GXvNNR46V1ocJjrj0u6pAynS1KQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/interaction-particles-attract": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-particles-attract/-/interaction-particles-attract-3.9.1.tgz",
+      "integrity": "sha512-CYYYowJuGwRLUixQcSU/48PTKM8fCUYThe0hXwQ+yRMLAn053VHzL7NNZzKqEIeEyt5oJoy9KcvubjKWbzMBLQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/interaction-particles-collisions": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-particles-collisions/-/interaction-particles-collisions-3.9.1.tgz",
+      "integrity": "sha512-ggGyjW/3v1yxvYW1IF1EMT15M6w31y5zfNNUPkqd/IXRNPYvm0Z0ayhp+FKmz70M5p0UxxPIQHTvAv9Jqnuj8w==",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/interaction-particles-links": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/interaction-particles-links/-/interaction-particles-links-3.9.1.tgz",
+      "integrity": "sha512-MsLbMjy1vY5M5/hu/oa5OSRZAUz49H3+9EBMTIOThiX+a+vpl3sxc9AqNd9gMsPbM4WJlub8T6VBZdyvzez1Vg==",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/move-base": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/move-base/-/move-base-3.9.1.tgz",
+      "integrity": "sha512-X4huBS27d8srpxwOxliWPUt+NtCwY+8q/cx1DvQxyqmTA8VFCGpcHNwtqiN+9JicgzOvSuaORVqUgwlsc7h4pQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/move-parallax": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/move-parallax/-/move-parallax-3.9.1.tgz",
+      "integrity": "sha512-whlOR0bVeyh6J/hvxf/QM3DqvNnITMiAQ0kro6saqSDItAVqg4pYxBfEsSOKq7EhjxNvfhhqR+pFMhp06zoCVA==",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/plugin-easing-quad": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/plugin-easing-quad/-/plugin-easing-quad-3.9.1.tgz",
+      "integrity": "sha512-C2UJOca5MTDXKUTBXj30Kiqr5UyID+xrY/LxicVWWZPczQW2bBxbIbfq9ULvzGDwBTxE2rdvIB8YFKmDYO45qw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/matteobruni"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/tsparticles"
+        },
+        {
+          "type": "buymeacoffee",
+          "url": "https://www.buymeacoffee.com/matteobruni"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/plugin-hex-color": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/plugin-hex-color/-/plugin-hex-color-3.9.1.tgz",
+      "integrity": "sha512-vZgZ12AjUicJvk7AX4K2eAmKEQX/D1VEjEPFhyjbgI7A65eX72M465vVKIgNA6QArLZ1DLs7Z787LOE6GOBWsg==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/matteobruni"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/tsparticles"
+        },
+        {
+          "type": "buymeacoffee",
+          "url": "https://www.buymeacoffee.com/matteobruni"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/plugin-hsl-color": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/plugin-hsl-color/-/plugin-hsl-color-3.9.1.tgz",
+      "integrity": "sha512-jJd1iGgRwX6eeNjc1zUXiJivaqC5UE+SC2A3/NtHwwoQrkfxGWmRHOsVyLnOBRcCPgBp/FpdDe6DIDjCMO715w==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/matteobruni"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/tsparticles"
+        },
+        {
+          "type": "buymeacoffee",
+          "url": "https://www.buymeacoffee.com/matteobruni"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/plugin-rgb-color": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/plugin-rgb-color/-/plugin-rgb-color-3.9.1.tgz",
+      "integrity": "sha512-SBxk7f1KBfXeTnnklbE2Hx4jBgh6I6HOtxb+Os1gTp0oaghZOkWcCD2dP4QbUu7fVNCMOcApPoMNC8RTFcy9wQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/matteobruni"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/tsparticles"
+        },
+        {
+          "type": "buymeacoffee",
+          "url": "https://www.buymeacoffee.com/matteobruni"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/react": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@tsparticles/react/-/react-3.0.0.tgz",
+      "integrity": "sha512-hjGEtTT1cwv6BcjL+GcVgH++KYs52bIuQGW3PWv7z3tMa8g0bd6RI/vWSLj7p//NZ3uTjEIeilYIUPBh7Jfq/Q==",
+      "peerDependencies": {
+        "@tsparticles/engine": "^3.0.2",
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@tsparticles/shape-circle": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/shape-circle/-/shape-circle-3.9.1.tgz",
+      "integrity": "sha512-DqZFLjbuhVn99WJ+A9ajz9YON72RtCcvubzq6qfjFmtwAK7frvQeb6iDTp6Ze9FUipluxVZWVRG4vWTxi2B+/g==",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/shape-emoji": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/shape-emoji/-/shape-emoji-3.9.1.tgz",
+      "integrity": "sha512-ifvY63usuT+hipgVHb8gelBHSeF6ryPnMxAAEC1RGHhhXfpSRWMtE6ybr+pSsYU52M3G9+TF84v91pSwNrb9ZQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/shape-image": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/shape-image/-/shape-image-3.9.1.tgz",
+      "integrity": "sha512-fCA5eme8VF3oX8yNVUA0l2SLDKuiZObkijb0z3Ky0qj1HUEVlAuEMhhNDNB9E2iELTrWEix9z7BFMePp2CC7AA==",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/shape-line": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/shape-line/-/shape-line-3.9.1.tgz",
+      "integrity": "sha512-wT8NSp0N9HURyV05f371cHKcNTNqr0/cwUu6WhBzbshkYGy1KZUP9CpRIh5FCrBpTev34mEQfOXDycgfG0KiLQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/shape-polygon": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/shape-polygon/-/shape-polygon-3.9.1.tgz",
+      "integrity": "sha512-dA77PgZdoLwxnliH6XQM/zF0r4jhT01pw5y7XTeTqws++hg4rTLV9255k6R6eUqKq0FPSW1/WBsBIl7q/MmrqQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/shape-square": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/shape-square/-/shape-square-3.9.1.tgz",
+      "integrity": "sha512-DKGkDnRyZrAm7T2ipqNezJahSWs6xd9O5LQLe5vjrYm1qGwrFxJiQaAdlb00UNrexz1/SA7bEoIg4XKaFa7qhQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/shape-star": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/shape-star/-/shape-star-3.9.1.tgz",
+      "integrity": "sha512-kdMJpi8cdeb6vGrZVSxTG0JIjCwIenggqk0EYeKAwtOGZFBgL7eHhF2F6uu1oq8cJAbXPujEoabnLsz6mW8XaA==",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/slim": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/slim/-/slim-3.9.1.tgz",
+      "integrity": "sha512-CL5cDmADU7sDjRli0So+hY61VMbdroqbArmR9Av+c1Fisa5ytr6QD7Jv62iwU2S6rvgicEe9OyRmSy5GIefwZw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/matteobruni"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/tsparticles"
+        },
+        {
+          "type": "buymeacoffee",
+          "url": "https://www.buymeacoffee.com/matteobruni"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/basic": "3.9.1",
+        "@tsparticles/engine": "3.9.1",
+        "@tsparticles/interaction-external-attract": "3.9.1",
+        "@tsparticles/interaction-external-bounce": "3.9.1",
+        "@tsparticles/interaction-external-bubble": "3.9.1",
+        "@tsparticles/interaction-external-connect": "3.9.1",
+        "@tsparticles/interaction-external-grab": "3.9.1",
+        "@tsparticles/interaction-external-pause": "3.9.1",
+        "@tsparticles/interaction-external-push": "3.9.1",
+        "@tsparticles/interaction-external-remove": "3.9.1",
+        "@tsparticles/interaction-external-repulse": "3.9.1",
+        "@tsparticles/interaction-external-slow": "3.9.1",
+        "@tsparticles/interaction-particles-attract": "3.9.1",
+        "@tsparticles/interaction-particles-collisions": "3.9.1",
+        "@tsparticles/interaction-particles-links": "3.9.1",
+        "@tsparticles/move-parallax": "3.9.1",
+        "@tsparticles/plugin-easing-quad": "3.9.1",
+        "@tsparticles/shape-emoji": "3.9.1",
+        "@tsparticles/shape-image": "3.9.1",
+        "@tsparticles/shape-line": "3.9.1",
+        "@tsparticles/shape-polygon": "3.9.1",
+        "@tsparticles/shape-square": "3.9.1",
+        "@tsparticles/shape-star": "3.9.1",
+        "@tsparticles/updater-life": "3.9.1",
+        "@tsparticles/updater-rotate": "3.9.1",
+        "@tsparticles/updater-stroke-color": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/updater-color": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/updater-color/-/updater-color-3.9.1.tgz",
+      "integrity": "sha512-XGWdscrgEMA8L5E7exsE0f8/2zHKIqnTrZymcyuFBw2DCB6BIV+5z6qaNStpxrhq3DbIxxhqqcybqeOo7+Alpg==",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/updater-life": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/updater-life/-/updater-life-3.9.1.tgz",
+      "integrity": "sha512-Oi8aF2RIwMMsjssUkCB6t3PRpENHjdZf6cX92WNfAuqXtQphr3OMAkYFJFWkvyPFK22AVy3p/cFt6KE5zXxwAA==",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/updater-opacity": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/updater-opacity/-/updater-opacity-3.9.1.tgz",
+      "integrity": "sha512-w778LQuRZJ+IoWzeRdrGykPYSSaTeWfBvLZ2XwYEkh/Ss961InOxZKIpcS6i5Kp/Zfw0fS1ZAuqeHwuj///Osw==",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/updater-out-modes": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/updater-out-modes/-/updater-out-modes-3.9.1.tgz",
+      "integrity": "sha512-cKQEkAwbru+hhKF+GTsfbOvuBbx2DSB25CxOdhtW2wRvDBoCnngNdLw91rs+0Cex4tgEeibkebrIKFDDE6kELg==",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/updater-rotate": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/updater-rotate/-/updater-rotate-3.9.1.tgz",
+      "integrity": "sha512-9BfKaGfp28JN82MF2qs6Ae/lJr9EColMfMTHqSKljblwbpVDHte4umuwKl3VjbRt87WD9MGtla66NTUYl+WxuQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/updater-size": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/updater-size/-/updater-size-3.9.1.tgz",
+      "integrity": "sha512-3NSVs0O2ApNKZXfd+y/zNhTXSFeG1Pw4peI8e6z/q5+XLbmue9oiEwoPy/tQLaark3oNj3JU7Q903ZijPyXSzw==",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tsparticles/updater-stroke-color": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@tsparticles/updater-stroke-color/-/updater-stroke-color-3.9.1.tgz",
+      "integrity": "sha512-3x14+C2is9pZYTg9T2TiA/aM1YMq4wLdYaZDcHm3qO30DZu5oeQq0rm/6w+QOGKYY1Z3Htg9rlSUZkhTHn7eDA==",
+      "license": "MIT",
+      "dependencies": {
+        "@tsparticles/engine": "3.9.1"
+      }
+    },
+    "node_modules/@tweenjs/tween.js": {
+      "version": "23.1.3",
+      "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-23.1.3.tgz",
+      "integrity": "sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA==",
+      "license": "MIT"
+    },
+    "node_modules/@tybys/wasm-util": {
+      "version": "0.10.1",
+      "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz",
+      "integrity": "sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@types/d3-array": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.2.tgz",
+      "integrity": "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-color": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
+      "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-ease": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
+      "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-interpolate": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+      "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-color": "*"
+      }
+    },
+    "node_modules/@types/d3-path": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
+      "integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-scale": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
+      "integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-time": "*"
+      }
+    },
+    "node_modules/@types/d3-shape": {
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.8.tgz",
+      "integrity": "sha512-lae0iWfcDeR7qt7rA88BNiqdvPS5pFVPpo5OfjElwNaT2yyekbM0C9vK+yqBqEmHr6lDkRnYNoTBYlAgJa7a4w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-path": "*"
+      }
+    },
+    "node_modules/@types/d3-time": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
+      "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-timer": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
+      "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/draco3d": {
+      "version": "1.4.10",
+      "resolved": "https://registry.npmjs.org/@types/draco3d/-/draco3d-1.4.10.tgz",
+      "integrity": "sha512-AX22jp8Y7wwaBgAixaSvkoG4M/+PlAcm3Qs4OW8yT9DM4xUpWKeFhLueTAyZF39pviAdcDdeJoACapiAceqNcw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
+      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/json-schema": {
+      "version": "7.0.15",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
+      "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/json5": {
+      "version": "0.0.29",
+      "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
+      "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/node": {
+      "version": "20.19.17",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.17.tgz",
+      "integrity": "sha512-gfehUI8N1z92kygssiuWvLiwcbOB3IRktR6hTDgJlXMYh5OvkPSRmgfoBUmfZt+vhwJtX7v1Yw4KvvAf7c5QKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~6.21.0"
+      }
+    },
+    "node_modules/@types/offscreencanvas": {
+      "version": "2019.7.3",
+      "resolved": "https://registry.npmjs.org/@types/offscreencanvas/-/offscreencanvas-2019.7.3.tgz",
+      "integrity": "sha512-ieXiYmgSRXUDeOntE1InxjWyvEelZGP63M+cGuquuRLuIKKT1osnkXjxev9B7d1nXSug5vpunx+gNlbVxMlC9A==",
+      "license": "MIT"
+    },
+    "node_modules/@types/react": {
+      "version": "19.1.14",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.14.tgz",
+      "integrity": "sha512-ukd93VGzaNPMAUPy0gRDSC57UuQbnH9Kussp7HBjM06YFi9uZTFhOvMSO2OKqXm1rSgzOE+pVx1k1PYHGwlc8Q==",
+      "license": "MIT",
+      "dependencies": {
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "19.1.9",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.9.tgz",
+      "integrity": "sha512-qXRuZaOsAdXKFyOhRBg6Lqqc0yay13vN7KrIg4L7N4aaHN68ma9OK3NE1BoDFgFOTfM7zg+3/8+2n8rLUH3OKQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^19.0.0"
+      }
+    },
+    "node_modules/@types/react-reconciler": {
+      "version": "0.32.3",
+      "resolved": "https://registry.npmjs.org/@types/react-reconciler/-/react-reconciler-0.32.3.tgz",
+      "integrity": "sha512-cMi5ZrLG7UtbL7LTK6hq9w/EZIRk4Mf1Z5qHoI+qBh7/WkYkFXQ7gOto2yfUvPzF5ERMAhaXS5eTQ2SAnHjLzA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/stats.js": {
+      "version": "0.17.4",
+      "resolved": "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.4.tgz",
+      "integrity": "sha512-jIBvWWShCvlBqBNIZt0KAshWpvSjhkwkEu4ZUcASoAvhmrgAUI2t1dXrjSL4xXVLB4FznPrIsX3nKXFl/Dt4vA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/three": {
+      "version": "0.181.0",
+      "resolved": "https://registry.npmjs.org/@types/three/-/three-0.181.0.tgz",
+      "integrity": "sha512-MLF1ks8yRM2k71D7RprFpDb9DOX0p22DbdPqT/uAkc6AtQXjxWCVDjCy23G9t1o8HcQPk7woD2NIyiaWcWPYmA==",
+      "license": "MIT",
+      "dependencies": {
+        "@dimforge/rapier3d-compat": "~0.12.0",
+        "@tweenjs/tween.js": "~23.1.3",
+        "@types/stats.js": "*",
+        "@types/webxr": "*",
+        "@webgpu/types": "*",
+        "fflate": "~0.8.2",
+        "meshoptimizer": "~0.22.0"
+      }
+    },
+    "node_modules/@types/three/node_modules/fflate": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
+      "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==",
+      "license": "MIT"
+    },
+    "node_modules/@types/use-sync-external-store": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
+      "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/webxr": {
+      "version": "0.5.24",
+      "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.24.tgz",
+      "integrity": "sha512-h8fgEd/DpoS9CBrjEQXR+dIDraopAEfu4wYVNY2tEPwk60stPWhvZMf4Foo5FakuQ7HFZoa8WceaWFervK2Ovg==",
+      "license": "MIT"
+    },
+    "node_modules/@typescript-eslint/eslint-plugin": {
+      "version": "8.48.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.48.1.tgz",
+      "integrity": "sha512-X63hI1bxl5ohelzr0LY5coufyl0LJNthld+abwxpCoo6Gq+hSqhKwci7MUWkXo67mzgUK6YFByhmaHmUcuBJmA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/regexpp": "^4.10.0",
+        "@typescript-eslint/scope-manager": "8.48.1",
+        "@typescript-eslint/type-utils": "8.48.1",
+        "@typescript-eslint/utils": "8.48.1",
+        "@typescript-eslint/visitor-keys": "8.48.1",
+        "graphemer": "^1.4.0",
+        "ignore": "^7.0.0",
+        "natural-compare": "^1.4.0",
+        "ts-api-utils": "^2.1.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/parser": "^8.48.1",
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/eslint-plugin/node_modules/ignore": {
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.5.tgz",
+      "integrity": "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/@typescript-eslint/parser": {
+      "version": "8.48.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.48.1.tgz",
+      "integrity": "sha512-PC0PDZfJg8sP7cmKe6L3QIL8GZwU5aRvUFedqSIpw3B+QjRSUZeeITC2M5XKeMXEzL6wccN196iy3JLwKNvDVA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/scope-manager": "8.48.1",
+        "@typescript-eslint/types": "8.48.1",
+        "@typescript-eslint/typescript-estree": "8.48.1",
+        "@typescript-eslint/visitor-keys": "8.48.1",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/project-service": {
+      "version": "8.48.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.48.1.tgz",
+      "integrity": "sha512-HQWSicah4s9z2/HifRPQ6b6R7G+SBx64JlFQpgSSHWPKdvCZX57XCbszg/bapbRsOEv42q5tayTYcEFpACcX1w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/tsconfig-utils": "^8.48.1",
+        "@typescript-eslint/types": "^8.48.1",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/scope-manager": {
+      "version": "8.48.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.48.1.tgz",
+      "integrity": "sha512-rj4vWQsytQbLxC5Bf4XwZ0/CKd362DkWMUkviT7DCS057SK64D5lH74sSGzhI6PDD2HCEq02xAP9cX68dYyg1w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.48.1",
+        "@typescript-eslint/visitor-keys": "8.48.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/tsconfig-utils": {
+      "version": "8.48.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.48.1.tgz",
+      "integrity": "sha512-k0Jhs4CpEffIBm6wPaCXBAD7jxBtrHjrSgtfCjUvPp9AZ78lXKdTR8fxyZO5y4vWNlOvYXRtngSZNSn+H53Jkw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils": {
+      "version": "8.48.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.48.1.tgz",
+      "integrity": "sha512-1jEop81a3LrJQLTf/1VfPQdhIY4PlGDBc/i67EVWObrtvcziysbLN3oReexHOM6N3jyXgCrkBsZpqwH0hiDOQg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.48.1",
+        "@typescript-eslint/typescript-estree": "8.48.1",
+        "@typescript-eslint/utils": "8.48.1",
+        "debug": "^4.3.4",
+        "ts-api-utils": "^2.1.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/types": {
+      "version": "8.48.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.48.1.tgz",
+      "integrity": "sha512-+fZ3LZNeiELGmimrujsDCT4CRIbq5oXdHe7chLiW8qzqyPMnn1puNstCrMNVAqwcl2FdIxkuJ4tOs/RFDBVc/Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree": {
+      "version": "8.48.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.48.1.tgz",
+      "integrity": "sha512-/9wQ4PqaefTK6POVTjJaYS0bynCgzh6ClJHGSBj06XEHjkfylzB+A3qvyaXnErEZSaxhIo4YdyBgq6j4RysxDg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/project-service": "8.48.1",
+        "@typescript-eslint/tsconfig-utils": "8.48.1",
+        "@typescript-eslint/types": "8.48.1",
+        "@typescript-eslint/visitor-keys": "8.48.1",
+        "debug": "^4.3.4",
+        "minimatch": "^9.0.4",
+        "semver": "^7.6.0",
+        "tinyglobby": "^0.2.15",
+        "ts-api-utils": "^2.1.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
+      "version": "9.0.9",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.9.tgz",
+      "integrity": "sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@typescript-eslint/utils": {
+      "version": "8.48.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.48.1.tgz",
+      "integrity": "sha512-fAnhLrDjiVfey5wwFRwrweyRlCmdz5ZxXz2G/4cLn0YDLjTapmN4gcCsTBR1N2rWnZSDeWpYtgLDsJt+FpmcwA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.7.0",
+        "@typescript-eslint/scope-manager": "8.48.1",
+        "@typescript-eslint/types": "8.48.1",
+        "@typescript-eslint/typescript-estree": "8.48.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/visitor-keys": {
+      "version": "8.48.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.48.1.tgz",
+      "integrity": "sha512-BmxxndzEWhE4TIEEMBs8lP3MBWN3jFPs/p6gPm/wkv02o41hI6cq9AuSmGAaTTHPtA1FTi2jBre4A9rm5ZmX+Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.48.1",
+        "eslint-visitor-keys": "^4.2.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@unrs/resolver-binding-android-arm-eabi": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-android-arm-eabi/-/resolver-binding-android-arm-eabi-1.11.1.tgz",
+      "integrity": "sha512-ppLRUgHVaGRWUx0R0Ut06Mjo9gBaBkg3v/8AxusGLhsIotbBLuRk51rAzqLC8gq6NyyAojEXglNjzf6R948DNw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-android-arm64": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-android-arm64/-/resolver-binding-android-arm64-1.11.1.tgz",
+      "integrity": "sha512-lCxkVtb4wp1v+EoN+HjIG9cIIzPkX5OtM03pQYkG+U5O/wL53LC4QbIeazgiKqluGeVEeBlZahHalCaBvU1a2g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-darwin-arm64": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-darwin-arm64/-/resolver-binding-darwin-arm64-1.11.1.tgz",
+      "integrity": "sha512-gPVA1UjRu1Y/IsB/dQEsp2V1pm44Of6+LWvbLc9SDk1c2KhhDRDBUkQCYVWe6f26uJb3fOK8saWMgtX8IrMk3g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-darwin-x64": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-darwin-x64/-/resolver-binding-darwin-x64-1.11.1.tgz",
+      "integrity": "sha512-cFzP7rWKd3lZaCsDze07QX1SC24lO8mPty9vdP+YVa3MGdVgPmFc59317b2ioXtgCMKGiCLxJ4HQs62oz6GfRQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-freebsd-x64": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-freebsd-x64/-/resolver-binding-freebsd-x64-1.11.1.tgz",
+      "integrity": "sha512-fqtGgak3zX4DCB6PFpsH5+Kmt/8CIi4Bry4rb1ho6Av2QHTREM+47y282Uqiu3ZRF5IQioJQ5qWRV6jduA+iGw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-arm-gnueabihf": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm-gnueabihf/-/resolver-binding-linux-arm-gnueabihf-1.11.1.tgz",
+      "integrity": "sha512-u92mvlcYtp9MRKmP+ZvMmtPN34+/3lMHlyMj7wXJDeXxuM0Vgzz0+PPJNsro1m3IZPYChIkn944wW8TYgGKFHw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-arm-musleabihf": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm-musleabihf/-/resolver-binding-linux-arm-musleabihf-1.11.1.tgz",
+      "integrity": "sha512-cINaoY2z7LVCrfHkIcmvj7osTOtm6VVT16b5oQdS4beibX2SYBwgYLmqhBjA1t51CarSaBuX5YNsWLjsqfW5Cw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-arm64-gnu": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm64-gnu/-/resolver-binding-linux-arm64-gnu-1.11.1.tgz",
+      "integrity": "sha512-34gw7PjDGB9JgePJEmhEqBhWvCiiWCuXsL9hYphDF7crW7UgI05gyBAi6MF58uGcMOiOqSJ2ybEeCvHcq0BCmQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-arm64-musl": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm64-musl/-/resolver-binding-linux-arm64-musl-1.11.1.tgz",
+      "integrity": "sha512-RyMIx6Uf53hhOtJDIamSbTskA99sPHS96wxVE/bJtePJJtpdKGXO1wY90oRdXuYOGOTuqjT8ACccMc4K6QmT3w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-ppc64-gnu": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-ppc64-gnu/-/resolver-binding-linux-ppc64-gnu-1.11.1.tgz",
+      "integrity": "sha512-D8Vae74A4/a+mZH0FbOkFJL9DSK2R6TFPC9M+jCWYia/q2einCubX10pecpDiTmkJVUH+y8K3BZClycD8nCShA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-riscv64-gnu": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-riscv64-gnu/-/resolver-binding-linux-riscv64-gnu-1.11.1.tgz",
+      "integrity": "sha512-frxL4OrzOWVVsOc96+V3aqTIQl1O2TjgExV4EKgRY09AJ9leZpEg8Ak9phadbuX0BA4k8U5qtvMSQQGGmaJqcQ==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-riscv64-musl": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-riscv64-musl/-/resolver-binding-linux-riscv64-musl-1.11.1.tgz",
+      "integrity": "sha512-mJ5vuDaIZ+l/acv01sHoXfpnyrNKOk/3aDoEdLO/Xtn9HuZlDD6jKxHlkN8ZhWyLJsRBxfv9GYM2utQ1SChKew==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-s390x-gnu": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-s390x-gnu/-/resolver-binding-linux-s390x-gnu-1.11.1.tgz",
+      "integrity": "sha512-kELo8ebBVtb9sA7rMe1Cph4QHreByhaZ2QEADd9NzIQsYNQpt9UkM9iqr2lhGr5afh885d/cB5QeTXSbZHTYPg==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-x64-gnu": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-x64-gnu/-/resolver-binding-linux-x64-gnu-1.11.1.tgz",
+      "integrity": "sha512-C3ZAHugKgovV5YvAMsxhq0gtXuwESUKc5MhEtjBpLoHPLYM+iuwSj3lflFwK3DPm68660rZ7G8BMcwSro7hD5w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-x64-musl": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-x64-musl/-/resolver-binding-linux-x64-musl-1.11.1.tgz",
+      "integrity": "sha512-rV0YSoyhK2nZ4vEswT/QwqzqQXw5I6CjoaYMOX0TqBlWhojUf8P94mvI7nuJTeaCkkds3QE4+zS8Ko+GdXuZtA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-wasm32-wasi": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-wasm32-wasi/-/resolver-binding-wasm32-wasi-1.11.1.tgz",
+      "integrity": "sha512-5u4RkfxJm+Ng7IWgkzi3qrFOvLvQYnPBmjmZQ8+szTK/b31fQCnleNl1GgEt7nIsZRIf5PLhPwT0WM+q45x/UQ==",
+      "cpu": [
+        "wasm32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@napi-rs/wasm-runtime": "^0.2.11"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@unrs/resolver-binding-win32-arm64-msvc": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-arm64-msvc/-/resolver-binding-win32-arm64-msvc-1.11.1.tgz",
+      "integrity": "sha512-nRcz5Il4ln0kMhfL8S3hLkxI85BXs3o8EYoattsJNdsX4YUU89iOkVn7g0VHSRxFuVMdM4Q1jEpIId1Ihim/Uw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-win32-ia32-msvc": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-ia32-msvc/-/resolver-binding-win32-ia32-msvc-1.11.1.tgz",
+      "integrity": "sha512-DCEI6t5i1NmAZp6pFonpD5m7i6aFrpofcp4LA2i8IIq60Jyo28hamKBxNrZcyOwVOZkgsRp9O2sXWBWP8MnvIQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-win32-x64-msvc": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-x64-msvc/-/resolver-binding-win32-x64-msvc-1.11.1.tgz",
+      "integrity": "sha512-lrW200hZdbfRtztbygyaq/6jP6AKE8qQN2KvPcJ+x7wiD038YtnYtZ82IMNJ69GJibV7bwL3y9FgK+5w/pYt6g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@use-gesture/core": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmjs.org/@use-gesture/core/-/core-10.3.1.tgz",
+      "integrity": "sha512-WcINiDt8WjqBdUXye25anHiNxPc0VOrlT8F6LLkU6cycrOGUDyY/yyFmsg3k8i5OLvv25llc0QC45GhR/C8llw==",
+      "license": "MIT"
+    },
+    "node_modules/@use-gesture/react": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmjs.org/@use-gesture/react/-/react-10.3.1.tgz",
+      "integrity": "sha512-Yy19y6O2GJq8f7CHf7L0nxL8bf4PZCPaVOCgJrusOeFHY1LvHgYXnmnXg6N5iwAnbgbZCDjo60SiM6IPJi9C5g==",
+      "license": "MIT",
+      "dependencies": {
+        "@use-gesture/core": "10.3.1"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0"
+      }
+    },
+    "node_modules/@webgpu/types": {
+      "version": "0.1.66",
+      "resolved": "https://registry.npmjs.org/@webgpu/types/-/types-0.1.66.tgz",
+      "integrity": "sha512-YA2hLrwLpDsRueNDXIMqN9NTzD6bCDkuXbOSe0heS+f8YE8usA6Gbv1prj81pzVHrbaAma7zObnIC+I6/sXJgA==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/acorn": {
+      "version": "8.15.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
+      "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/acorn-jsx": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
+    "node_modules/ajv": {
+      "version": "6.14.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.14.0.tgz",
+      "integrity": "sha512-IWrosm/yrn43eiKqkfkHis7QioDleaXQHdDVPKg0FSwwd/DuvyX79TZnFOnYpB7dcsFAMmtFztZuXPDvSePkFw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true,
+      "license": "Python-2.0"
+    },
+    "node_modules/aria-query": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
+      "integrity": "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/array-buffer-byte-length": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.2.tgz",
+      "integrity": "sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "is-array-buffer": "^3.0.5"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array-includes": {
+      "version": "3.1.9",
+      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.9.tgz",
+      "integrity": "sha512-FmeCCAenzH0KH381SPT5FZmiA/TmpndpcaShhfgEN9eCVjnFBqq3l1xrI42y8+PPLI6hypzou4GXw00WHmPBLQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.24.0",
+        "es-object-atoms": "^1.1.1",
+        "get-intrinsic": "^1.3.0",
+        "is-string": "^1.1.1",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.findlast": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/array.prototype.findlast/-/array.prototype.findlast-1.2.5.tgz",
+      "integrity": "sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.findlastindex": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.6.tgz",
+      "integrity": "sha512-F/TKATkzseUExPlfvmwQKGITM3DGTK+vkAsCZoDc5daVygbJBnjEUCbgkAvVFsgfXfX4YIqZ/27G3k3tdXrTxQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.9",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "es-shim-unscopables": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.flat": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.3.tgz",
+      "integrity": "sha512-rwG/ja1neyLqCuGZ5YYrznA62D4mZXg0i1cIskIUKSiqF3Cje9/wXAls9B9s1Wa2fomMsIv8czB8jZcPmxCXFg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.flatmap": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.3.tgz",
+      "integrity": "sha512-Y7Wt51eKJSyi80hFrJCePGGNo5ktJCslFuboqJsbf57CCPcm5zztluPlc4/aD8sWsKvlwatezpV4U1efk8kpjg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.tosorted": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/array.prototype.tosorted/-/array.prototype.tosorted-1.1.4.tgz",
+      "integrity": "sha512-p6Fx8B7b7ZhL/gmUsAy0D15WhvDccw3mnGNbZpi3pmeJdxtWsj2jEaI4Y6oo3XiHfzuSgPwKc04MYt6KgvC/wA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.3",
+        "es-errors": "^1.3.0",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/arraybuffer.prototype.slice": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.4.tgz",
+      "integrity": "sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-buffer-byte-length": "^1.0.1",
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "is-array-buffer": "^3.0.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/ast-types-flow": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.8.tgz",
+      "integrity": "sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/async-function": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/async-function/-/async-function-1.0.0.tgz",
+      "integrity": "sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/available-typed-arrays": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
+      "integrity": "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "possible-typed-array-names": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/axe-core": {
+      "version": "4.10.3",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.10.3.tgz",
+      "integrity": "sha512-Xm7bpRXnDSX2YE2YFfBk2FnF0ep6tmG7xPh8iHee8MIcrgq762Nkce856dYtJYLkuIoYZvGfTs/PbZhideTcEg==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/axobject-query": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
+      "integrity": "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/baseline-browser-mapping": {
+      "version": "2.10.8",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.8.tgz",
+      "integrity": "sha512-PCLz/LXGBsNTErbtB6i5u4eLpHeMfi93aUv5duMmj6caNu6IphS4q6UevDnL36sZQv9lrP11dbPKGMaXPwMKfQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "baseline-browser-mapping": "dist/cli.cjs"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/bidi-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/bidi-js/-/bidi-js-1.0.3.tgz",
+      "integrity": "sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==",
+      "license": "MIT",
+      "dependencies": {
+        "require-from-string": "^2.0.2"
+      }
+    },
+    "node_modules/brace-expansion": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.28.1",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.1.tgz",
+      "integrity": "sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "baseline-browser-mapping": "^2.9.0",
+        "caniuse-lite": "^1.0.30001759",
+        "electron-to-chromium": "^1.5.263",
+        "node-releases": "^2.0.27",
+        "update-browserslist-db": "^1.2.0"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/buffer": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
+      "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.2.1"
+      }
+    },
+    "node_modules/call-bind": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz",
+      "integrity": "sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.0",
+        "es-define-property": "^1.0.0",
+        "get-intrinsic": "^1.2.4",
+        "set-function-length": "^1.2.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/call-bound": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
+      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "get-intrinsic": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/camera-controls": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/camera-controls/-/camera-controls-3.1.1.tgz",
+      "integrity": "sha512-zC3DcoQPJ0CbTZ8WHthzi8nMvVF71cppOTBcH4cMLreMkU3y3fzBPViGvz1BefWPo9+kv9BP41tvIsabsXTz+Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=24.4.0",
+        "npm": ">=11.4.2"
+      },
+      "peerDependencies": {
+        "three": ">=0.126.1"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001759",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001759.tgz",
+      "integrity": "sha512-Pzfx9fOKoKvevQf8oCXoyNRQ5QyxJj+3O0Rqx2V5oxT61KGx8+n6hV/IUyJeifUci2clnmmKVpvtiqRzgiWjSw==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/chownr": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-3.0.0.tgz",
+      "integrity": "sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/client-only": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
+      "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
+      "license": "MIT"
+    },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/cobe": {
+      "version": "0.6.5",
+      "resolved": "https://registry.npmjs.org/cobe/-/cobe-0.6.5.tgz",
+      "integrity": "sha512-MA8bu81EFY6JjQpj+FovEuhyJ25khx2Q7Lh+ot/UkCJe5yKyDgzdc6u2lGZIOmsZTXK6Itg1i4lQZIJZbPWnAg==",
+      "license": "MIT",
+      "dependencies": {
+        "phenomenon": "^1.6.0"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/cross-env": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz",
+      "integrity": "sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==",
+      "license": "MIT",
+      "dependencies": {
+        "cross-spawn": "^7.0.1"
+      },
+      "bin": {
+        "cross-env": "src/bin/cross-env.js",
+        "cross-env-shell": "src/bin/cross-env-shell.js"
+      },
+      "engines": {
+        "node": ">=10.14",
+        "npm": ">=6",
+        "yarn": ">=1"
+      }
+    },
+    "node_modules/cross-spawn": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
+      "license": "MIT",
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "license": "MIT"
+    },
+    "node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "license": "ISC",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-format": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.2.tgz",
+      "integrity": "sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/damerau-levenshtein": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
+      "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==",
+      "dev": true,
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/data-view-buffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.2.tgz",
+      "integrity": "sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/data-view-byte-length": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/data-view-byte-length/-/data-view-byte-length-1.0.2.tgz",
+      "integrity": "sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/inspect-js"
+      }
+    },
+    "node_modules/data-view-byte-offset": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/data-view-byte-offset/-/data-view-byte-offset-1.0.1.tgz",
+      "integrity": "sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/decimal.js-light": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
+      "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==",
+      "license": "MIT"
+    },
+    "node_modules/deep-is": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
+      "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/define-data-property": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
+      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/define-properties": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
+      "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.0.1",
+        "has-property-descriptors": "^1.0.0",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/detect-gpu": {
+      "version": "5.0.70",
+      "resolved": "https://registry.npmjs.org/detect-gpu/-/detect-gpu-5.0.70.tgz",
+      "integrity": "sha512-bqerEP1Ese6nt3rFkwPnGbsUF9a4q+gMmpTVVOEzoCyeCc+y7/RvJnQZJx1JwhgQI5Ntg0Kgat8Uu7XpBqnz1w==",
+      "license": "MIT",
+      "dependencies": {
+        "webgl-constants": "^1.1.1"
+      }
+    },
+    "node_modules/detect-libc": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.1.tgz",
+      "integrity": "sha512-ecqj/sy1jcK1uWrwpR67UhYrIFQ+5WlGxth34WquCbamhFA6hkkwiu37o6J5xCHdo1oixJRfVRw+ywV+Hq/0Aw==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/doctrine": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
+      "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "esutils": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/draco3d": {
+      "version": "1.5.7",
+      "resolved": "https://registry.npmjs.org/draco3d/-/draco3d-1.5.7.tgz",
+      "integrity": "sha512-m6WCKt/erDXcw+70IJXnG7M3awwQPAsZvJGX5zY7beBqpELw6RDGkYVU0W43AFxye4pDZ5i2Lbyc/NNGqwjUVQ==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.266",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.266.tgz",
+      "integrity": "sha512-kgWEglXvkEfMH7rxP5OSZZwnaDWT7J9EoZCujhnpLbfi0bbNtRkgdX2E3gt0Uer11c61qCYktB3hwkAS325sJg==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/embla-carousel": {
+      "version": "8.6.0",
+      "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.6.0.tgz",
+      "integrity": "sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==",
+      "license": "MIT"
+    },
+    "node_modules/embla-carousel-auto-scroll": {
+      "version": "8.6.0",
+      "resolved": "https://registry.npmjs.org/embla-carousel-auto-scroll/-/embla-carousel-auto-scroll-8.6.0.tgz",
+      "integrity": "sha512-WT9fWhNXFpbQ6kP+aS07oF5IHYLZ1Dx4DkwgCY8Hv2ZyYd2KMCPfMV1q/cA3wFGuLO7GMgKiySLX90/pQkcOdQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "embla-carousel": "8.6.0"
+      }
+    },
+    "node_modules/embla-carousel-react": {
+      "version": "8.6.0",
+      "resolved": "https://registry.npmjs.org/embla-carousel-react/-/embla-carousel-react-8.6.0.tgz",
+      "integrity": "sha512-0/PjqU7geVmo6F734pmPqpyHqiM99olvyecY7zdweCw+6tKEXnrE90pBiBbMMU8s5tICemzpQ3hi5EpxzGW+JA==",
+      "license": "MIT",
+      "dependencies": {
+        "embla-carousel": "8.6.0",
+        "embla-carousel-reactive-utils": "8.6.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.1 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/embla-carousel-reactive-utils": {
+      "version": "8.6.0",
+      "resolved": "https://registry.npmjs.org/embla-carousel-reactive-utils/-/embla-carousel-reactive-utils-8.6.0.tgz",
+      "integrity": "sha512-fMVUDUEx0/uIEDM0Mz3dHznDhfX+znCCDCeIophYb1QGVM7YThSWX+wz11zlYwWFOr74b4QLGg0hrGPJeG2s4A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "embla-carousel": "8.6.0"
+      }
+    },
+    "node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/enhanced-resolve": {
+      "version": "5.18.3",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.3.tgz",
+      "integrity": "sha512-d4lC8xfavMeBjzGr2vECC3fsGXziXZQyJxD868h2M/mBI3PwAuODxAkLkq5HYuvrPYcUtiLzsTo8U3PgX3Ocww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/es-abstract": {
+      "version": "1.24.0",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.24.0.tgz",
+      "integrity": "sha512-WSzPgsdLtTcQwm4CROfS5ju2Wa1QQcVeT37jFjYzdFz1r9ahadC8B8/a4qxJxM+09F18iumCdRmlr96ZYkQvEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-buffer-byte-length": "^1.0.2",
+        "arraybuffer.prototype.slice": "^1.0.4",
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "data-view-buffer": "^1.0.2",
+        "data-view-byte-length": "^1.0.2",
+        "data-view-byte-offset": "^1.0.1",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "es-set-tostringtag": "^2.1.0",
+        "es-to-primitive": "^1.3.0",
+        "function.prototype.name": "^1.1.8",
+        "get-intrinsic": "^1.3.0",
+        "get-proto": "^1.0.1",
+        "get-symbol-description": "^1.1.0",
+        "globalthis": "^1.0.4",
+        "gopd": "^1.2.0",
+        "has-property-descriptors": "^1.0.2",
+        "has-proto": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "internal-slot": "^1.1.0",
+        "is-array-buffer": "^3.0.5",
+        "is-callable": "^1.2.7",
+        "is-data-view": "^1.0.2",
+        "is-negative-zero": "^2.0.3",
+        "is-regex": "^1.2.1",
+        "is-set": "^2.0.3",
+        "is-shared-array-buffer": "^1.0.4",
+        "is-string": "^1.1.1",
+        "is-typed-array": "^1.1.15",
+        "is-weakref": "^1.1.1",
+        "math-intrinsics": "^1.1.0",
+        "object-inspect": "^1.13.4",
+        "object-keys": "^1.1.1",
+        "object.assign": "^4.1.7",
+        "own-keys": "^1.0.1",
+        "regexp.prototype.flags": "^1.5.4",
+        "safe-array-concat": "^1.1.3",
+        "safe-push-apply": "^1.0.0",
+        "safe-regex-test": "^1.1.0",
+        "set-proto": "^1.0.0",
+        "stop-iteration-iterator": "^1.1.0",
+        "string.prototype.trim": "^1.2.10",
+        "string.prototype.trimend": "^1.0.9",
+        "string.prototype.trimstart": "^1.0.8",
+        "typed-array-buffer": "^1.0.3",
+        "typed-array-byte-length": "^1.0.3",
+        "typed-array-byte-offset": "^1.0.4",
+        "typed-array-length": "^1.0.7",
+        "unbox-primitive": "^1.1.0",
+        "which-typed-array": "^1.1.19"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-iterator-helpers": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.2.1.tgz",
+      "integrity": "sha512-uDn+FE1yrDzyC0pCo961B2IHbdM8y/ACZsKD4dG6WqrjV53BADjwa7D+1aom2rsNVfLyDgU/eigvlJGJ08OQ4w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.6",
+        "es-errors": "^1.3.0",
+        "es-set-tostringtag": "^2.0.3",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.6",
+        "globalthis": "^1.0.4",
+        "gopd": "^1.2.0",
+        "has-property-descriptors": "^1.0.2",
+        "has-proto": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "internal-slot": "^1.1.0",
+        "iterator.prototype": "^1.1.4",
+        "safe-array-concat": "^1.1.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-shim-unscopables": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.1.0.tgz",
+      "integrity": "sha512-d9T8ucsEhh8Bi1woXCf+TIKDIROLG5WCkxg8geBCbvk22kzwC5G2OnXVMO6FUsvQlgUUXQ2itephWDLqDzbeCw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-to-primitive": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.3.0.tgz",
+      "integrity": "sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-callable": "^1.2.7",
+        "is-date-object": "^1.0.5",
+        "is-symbol": "^1.0.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/es-toolkit": {
+      "version": "1.44.0",
+      "resolved": "https://registry.npmjs.org/es-toolkit/-/es-toolkit-1.44.0.tgz",
+      "integrity": "sha512-6penXeZalaV88MM3cGkFZZfOoLGWshWWfdy0tWw/RlVVyhvMaWSBTOvXNeiW3e5FwdS5ePW0LGEu17zT139ktg==",
+      "license": "MIT",
+      "workspaces": [
+        "docs",
+        "benchmarks"
+      ]
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint": {
+      "version": "9.36.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.36.0.tgz",
+      "integrity": "sha512-hB4FIzXovouYzwzECDcUkJ4OcfOEkXTv2zRY6B9bkwjx/cprAq0uvm1nl7zvQ0/TsUk0zQiN4uPfJpB9m+rPMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.8.0",
+        "@eslint-community/regexpp": "^4.12.1",
+        "@eslint/config-array": "^0.21.0",
+        "@eslint/config-helpers": "^0.3.1",
+        "@eslint/core": "^0.15.2",
+        "@eslint/eslintrc": "^3.3.1",
+        "@eslint/js": "9.36.0",
+        "@eslint/plugin-kit": "^0.3.5",
+        "@humanfs/node": "^0.16.6",
+        "@humanwhocodes/module-importer": "^1.0.1",
+        "@humanwhocodes/retry": "^0.4.2",
+        "@types/estree": "^1.0.6",
+        "@types/json-schema": "^7.0.15",
+        "ajv": "^6.12.4",
+        "chalk": "^4.0.0",
+        "cross-spawn": "^7.0.6",
+        "debug": "^4.3.2",
+        "escape-string-regexp": "^4.0.0",
+        "eslint-scope": "^8.4.0",
+        "eslint-visitor-keys": "^4.2.1",
+        "espree": "^10.4.0",
+        "esquery": "^1.5.0",
+        "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
+        "file-entry-cache": "^8.0.0",
+        "find-up": "^5.0.0",
+        "glob-parent": "^6.0.2",
+        "ignore": "^5.2.0",
+        "imurmurhash": "^0.1.4",
+        "is-glob": "^4.0.0",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "lodash.merge": "^4.6.2",
+        "minimatch": "^3.1.2",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.9.3"
+      },
+      "bin": {
+        "eslint": "bin/eslint.js"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://eslint.org/donate"
+      },
+      "peerDependencies": {
+        "jiti": "*"
+      },
+      "peerDependenciesMeta": {
+        "jiti": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-config-next": {
+      "version": "16.0.7",
+      "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-16.0.7.tgz",
+      "integrity": "sha512-WubFGLFHfk2KivkdRGfx6cGSFhaQqhERRfyO8BRx+qiGPGp7WLKcPvYC4mdx1z3VhVRcrfFzczjjTrbJZOpnEQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@next/eslint-plugin-next": "16.0.7",
+        "eslint-import-resolver-node": "^0.3.6",
+        "eslint-import-resolver-typescript": "^3.5.2",
+        "eslint-plugin-import": "^2.32.0",
+        "eslint-plugin-jsx-a11y": "^6.10.0",
+        "eslint-plugin-react": "^7.37.0",
+        "eslint-plugin-react-hooks": "^7.0.0",
+        "globals": "16.4.0",
+        "typescript-eslint": "^8.46.0"
+      },
+      "peerDependencies": {
+        "eslint": ">=9.0.0",
+        "typescript": ">=3.3.1"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-config-next/node_modules/globals": {
+      "version": "16.4.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-16.4.0.tgz",
+      "integrity": "sha512-ob/2LcVVaVGCYN+r14cnwnoDPUufjiYgSqRhiFD0Q1iI4Odora5RE8Iv1D24hAz5oMophRGkGz+yuvQmmUMnMw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint-import-resolver-node": {
+      "version": "0.3.9",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz",
+      "integrity": "sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^3.2.7",
+        "is-core-module": "^2.13.0",
+        "resolve": "^1.22.4"
+      }
+    },
+    "node_modules/eslint-import-resolver-node/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/eslint-import-resolver-typescript": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-3.10.1.tgz",
+      "integrity": "sha512-A1rHYb06zjMGAxdLSkN2fXPBwuSaQ0iO5M/hdyS0Ajj1VBaRp0sPD3dn1FhME3c/JluGFbwSxyCfqdSbtQLAHQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "@nolyfill/is-core-module": "1.0.39",
+        "debug": "^4.4.0",
+        "get-tsconfig": "^4.10.0",
+        "is-bun-module": "^2.0.0",
+        "stable-hash": "^0.0.5",
+        "tinyglobby": "^0.2.13",
+        "unrs-resolver": "^1.6.2"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint-import-resolver-typescript"
+      },
+      "peerDependencies": {
+        "eslint": "*",
+        "eslint-plugin-import": "*",
+        "eslint-plugin-import-x": "*"
+      },
+      "peerDependenciesMeta": {
+        "eslint-plugin-import": {
+          "optional": true
+        },
+        "eslint-plugin-import-x": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-module-utils": {
+      "version": "2.12.1",
+      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.12.1.tgz",
+      "integrity": "sha512-L8jSWTze7K2mTg0vos/RuLRS5soomksDPoJLXIslC7c8Wmut3bx7CPpJijDcBZtxQ5lrbUdM+s0OlNbz0DCDNw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^3.2.7"
+      },
+      "engines": {
+        "node": ">=4"
+      },
+      "peerDependenciesMeta": {
+        "eslint": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-module-utils/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/eslint-plugin-import": {
+      "version": "2.32.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.32.0.tgz",
+      "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@rtsao/scc": "^1.1.0",
+        "array-includes": "^3.1.9",
+        "array.prototype.findlastindex": "^1.2.6",
+        "array.prototype.flat": "^1.3.3",
+        "array.prototype.flatmap": "^1.3.3",
+        "debug": "^3.2.7",
+        "doctrine": "^2.1.0",
+        "eslint-import-resolver-node": "^0.3.9",
+        "eslint-module-utils": "^2.12.1",
+        "hasown": "^2.0.2",
+        "is-core-module": "^2.16.1",
+        "is-glob": "^4.0.3",
+        "minimatch": "^3.1.2",
+        "object.fromentries": "^2.0.8",
+        "object.groupby": "^1.0.3",
+        "object.values": "^1.2.1",
+        "semver": "^6.3.1",
+        "string.prototype.trimend": "^1.0.9",
+        "tsconfig-paths": "^3.15.0"
+      },
+      "engines": {
+        "node": ">=4"
+      },
+      "peerDependencies": {
+        "eslint": "^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8 || ^9"
+      }
+    },
+    "node_modules/eslint-plugin-import/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/eslint-plugin-import/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/eslint-plugin-jsx-a11y": {
+      "version": "6.10.2",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.10.2.tgz",
+      "integrity": "sha512-scB3nz4WmG75pV8+3eRUQOHZlNSUhFNq37xnpgRkCCELU3XMvXAxLk1eqWWyE22Ki4Q01Fnsw9BA3cJHDPgn2Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "aria-query": "^5.3.2",
+        "array-includes": "^3.1.8",
+        "array.prototype.flatmap": "^1.3.2",
+        "ast-types-flow": "^0.0.8",
+        "axe-core": "^4.10.0",
+        "axobject-query": "^4.1.0",
+        "damerau-levenshtein": "^1.0.8",
+        "emoji-regex": "^9.2.2",
+        "hasown": "^2.0.2",
+        "jsx-ast-utils": "^3.3.5",
+        "language-tags": "^1.0.9",
+        "minimatch": "^3.1.2",
+        "object.fromentries": "^2.0.8",
+        "safe-regex-test": "^1.0.3",
+        "string.prototype.includes": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependencies": {
+        "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9"
+      }
+    },
+    "node_modules/eslint-plugin-react": {
+      "version": "7.37.5",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.37.5.tgz",
+      "integrity": "sha512-Qteup0SqU15kdocexFNAJMvCJEfa2xUKNV4CC1xsVMrIIqEy3SQ/rqyxCWNzfrd3/ldy6HMlD2e0JDVpDg2qIA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-includes": "^3.1.8",
+        "array.prototype.findlast": "^1.2.5",
+        "array.prototype.flatmap": "^1.3.3",
+        "array.prototype.tosorted": "^1.1.4",
+        "doctrine": "^2.1.0",
+        "es-iterator-helpers": "^1.2.1",
+        "estraverse": "^5.3.0",
+        "hasown": "^2.0.2",
+        "jsx-ast-utils": "^2.4.1 || ^3.0.0",
+        "minimatch": "^3.1.2",
+        "object.entries": "^1.1.9",
+        "object.fromentries": "^2.0.8",
+        "object.values": "^1.2.1",
+        "prop-types": "^15.8.1",
+        "resolve": "^2.0.0-next.5",
+        "semver": "^6.3.1",
+        "string.prototype.matchall": "^4.0.12",
+        "string.prototype.repeat": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      },
+      "peerDependencies": {
+        "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7"
+      }
+    },
+    "node_modules/eslint-plugin-react-hooks": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-7.0.1.tgz",
+      "integrity": "sha512-O0d0m04evaNzEPoSW+59Mezf8Qt0InfgGIBJnpC0h3NH/WjUAR7BIKUfysC6todmtiZ/A0oUVS8Gce0WhBrHsA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.24.4",
+        "@babel/parser": "^7.24.4",
+        "hermes-parser": "^0.25.1",
+        "zod": "^3.25.0 || ^4.0.0",
+        "zod-validation-error": "^3.5.0 || ^4.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0"
+      }
+    },
+    "node_modules/eslint-plugin-react/node_modules/resolve": {
+      "version": "2.0.0-next.5",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.5.tgz",
+      "integrity": "sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-core-module": "^2.13.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/eslint-plugin-react/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/eslint-scope": {
+      "version": "8.4.0",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.4.0.tgz",
+      "integrity": "sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint-visitor-keys": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
+      "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/espree": {
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-10.4.0.tgz",
+      "integrity": "sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "acorn": "^8.15.0",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^4.2.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/esquery": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.6.0.tgz",
+      "integrity": "sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "estraverse": "^5.1.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/esrecurse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/eventemitter3": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.4.tgz",
+      "integrity": "sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw==",
+      "license": "MIT"
+    },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-glob": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz",
+      "integrity": "sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fast-glob/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-levenshtein": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fastq": {
+      "version": "1.19.1",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.1.tgz",
+      "integrity": "sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "node_modules/file-entry-cache": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
+      "integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flat-cache": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/find-up": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^6.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/flat-cache": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz",
+      "integrity": "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flatted": "^3.2.9",
+        "keyv": "^4.5.4"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/flatted": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.4.2.tgz",
+      "integrity": "sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/for-each": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz",
+      "integrity": "sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-callable": "^1.2.7"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/framer-motion": {
+      "version": "12.23.22",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.22.tgz",
+      "integrity": "sha512-ZgGvdxXCw55ZYvhoZChTlG6pUuehecgvEAJz0BHoC5pQKW1EC5xf1Mul1ej5+ai+pVY0pylyFfdl45qnM1/GsA==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.23.21",
+        "motion-utils": "^12.23.6",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/function.prototype.name": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.8.tgz",
+      "integrity": "sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "functions-have-names": "^1.2.3",
+        "hasown": "^2.0.2",
+        "is-callable": "^1.2.7"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/functions-have-names": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
+      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/gensync": {
+      "version": "1.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/get-symbol-description": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.1.0.tgz",
+      "integrity": "sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-tsconfig": {
+      "version": "4.10.1",
+      "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.10.1.tgz",
+      "integrity": "sha512-auHyJ4AgMz7vgS8Hp3N6HXSmlMdUyhSUrfBF16w153rxtLIEOE+HGqaBppczZvnHLqQJfiHotCYpNhl0lUROFQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "resolve-pkg-maps": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/privatenumber/get-tsconfig?sponsor=1"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/globals": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz",
+      "integrity": "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/globalthis": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.4.tgz",
+      "integrity": "sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-properties": "^1.2.1",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/glsl-noise": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/glsl-noise/-/glsl-noise-0.0.0.tgz",
+      "integrity": "sha512-b/ZCF6amfAUb7dJM/MxRs7AetQEahYzJ8PtgfrmEdtw6uyGOr+ZSGtgjFm6mfsBkxJ4d2W7kg+Nlqzqvn3Bc0w==",
+      "license": "MIT"
+    },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/graphemer": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
+      "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/gsap": {
+      "version": "3.13.0",
+      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.13.0.tgz",
+      "integrity": "sha512-QL7MJ2WMjm1PHWsoFrAQH/J8wUeqZvMtHO58qdekHpCfhvhSL4gSiz6vJf5EeMP0LOn3ZCprL2ki/gjED8ghVw==",
+      "license": "Standard 'no charge' license: https://gsap.com/standard-license."
+    },
+    "node_modules/has-bigints": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.1.0.tgz",
+      "integrity": "sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/has-property-descriptors": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
+      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-define-property": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-proto": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.2.0.tgz",
+      "integrity": "sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/hermes-estree": {
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/hermes-estree/-/hermes-estree-0.25.1.tgz",
+      "integrity": "sha512-0wUoCcLp+5Ev5pDW2OriHC2MJCbwLwuRx+gAqMTOkGKJJiBCLjtrvy4PWUGn6MIVefecRpzoOZ/UV6iGdOr+Cw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/hermes-parser": {
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/hermes-parser/-/hermes-parser-0.25.1.tgz",
+      "integrity": "sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hermes-estree": "0.25.1"
+      }
+    },
+    "node_modules/hls.js": {
+      "version": "1.6.14",
+      "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.6.14.tgz",
+      "integrity": "sha512-CSpT2aXsv71HST8C5ETeVo+6YybqCpHBiYrCRQSn3U5QUZuLTSsvtq/bj+zuvjLVADeKxoebzo16OkH8m1+65Q==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/ignore": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+      "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
+      "license": "MIT"
+    },
+    "node_modules/immer": {
+      "version": "10.2.0",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-10.2.0.tgz",
+      "integrity": "sha512-d/+XTN3zfODyjr89gM3mPq1WNX2B8pYsu7eORitdwyA2sBubnTl3laYlBk4sXY5FUa5qTZGBDPJICVbvqzjlbw==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
+    "node_modules/import-fresh": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
+      "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/imurmurhash": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+      "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.19"
+      }
+    },
+    "node_modules/internal-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.1.0.tgz",
+      "integrity": "sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "hasown": "^2.0.2",
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/is-array-buffer": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
+      "integrity": "sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-async-function": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.1.1.tgz",
+      "integrity": "sha512-9dgM/cZBnNvjzaMYHVoxxfPj2QXt22Ev7SuuPrs+xav0ukGB0S6d4ydZdEiM48kLx5kDV+QBPrpVnFyefL8kkQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "async-function": "^1.0.0",
+        "call-bound": "^1.0.3",
+        "get-proto": "^1.0.1",
+        "has-tostringtag": "^1.0.2",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-bigint": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.1.0.tgz",
+      "integrity": "sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-bigints": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-boolean-object": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.2.2.tgz",
+      "integrity": "sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-bun-module": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-bun-module/-/is-bun-module-2.0.0.tgz",
+      "integrity": "sha512-gNCGbnnnnFAUGKeZ9PdbyeGYJqewpmc2aKHUEMO5nQPWU9lOmv7jcmQIv+qHD8fXW6W7qfuCwX4rY9LNRjXrkQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "semver": "^7.7.1"
+      }
+    },
+    "node_modules/is-callable": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
+      "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
+      "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-data-view": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-data-view/-/is-data-view-1.0.2.tgz",
+      "integrity": "sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "get-intrinsic": "^1.2.6",
+        "is-typed-array": "^1.1.13"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-date-object": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.1.0.tgz",
+      "integrity": "sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-finalizationregistry": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-finalizationregistry/-/is-finalizationregistry-1.1.1.tgz",
+      "integrity": "sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-generator-function": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.0.tgz",
+      "integrity": "sha512-nPUB5km40q9e8UfN/Zc24eLlzdSf9OfKByBw9CIdw4H1giPMeA0OIJvbchsCu4npfI2QcMVBsGEBHKZ7wLTWmQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "get-proto": "^1.0.0",
+        "has-tostringtag": "^1.0.2",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-map": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz",
+      "integrity": "sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-negative-zero": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.3.tgz",
+      "integrity": "sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/is-number-object": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.1.1.tgz",
+      "integrity": "sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-promise": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.2.2.tgz",
+      "integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==",
+      "license": "MIT"
+    },
+    "node_modules/is-regex": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
+      "integrity": "sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "gopd": "^1.2.0",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-set": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.3.tgz",
+      "integrity": "sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-shared-array-buffer": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.4.tgz",
+      "integrity": "sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-string": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.1.1.tgz",
+      "integrity": "sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-symbol": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.1.1.tgz",
+      "integrity": "sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "has-symbols": "^1.1.0",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-typed-array": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.15.tgz",
+      "integrity": "sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "which-typed-array": "^1.1.16"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakmap": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.2.tgz",
+      "integrity": "sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakref": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.1.1.tgz",
+      "integrity": "sha512-6i9mGWSlqzNMEqpCp93KwRS1uUOodk2OJ6b+sq7ZPDSy2WuI5NFIxp/254TytR8ftefexkWn5xNiHUNpPOfSew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakset": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.4.tgz",
+      "integrity": "sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/isarray": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "license": "ISC"
+    },
+    "node_modules/iterator.prototype": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/iterator.prototype/-/iterator.prototype-1.1.5.tgz",
+      "integrity": "sha512-H0dkQoCa3b2VEeKQBOxFph+JAbcrQdE7KC0UkqwpLmv2EC4P41QXP+rqo9wYodACiG5/WM5s9oDApTU8utwj9g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.6",
+        "get-proto": "^1.0.0",
+        "has-symbols": "^1.1.0",
+        "set-function-name": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/its-fine": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/its-fine/-/its-fine-2.0.0.tgz",
+      "integrity": "sha512-KLViCmWx94zOvpLwSlsx6yOCeMhZYaxrJV87Po5k/FoZzcPSahvK5qJ7fYhS61sZi5ikmh2S3Hz55A2l3U69ng==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/react-reconciler": "^0.28.9"
+      },
+      "peerDependencies": {
+        "react": "^19.0.0"
+      }
+    },
+    "node_modules/its-fine/node_modules/@types/react-reconciler": {
+      "version": "0.28.9",
+      "resolved": "https://registry.npmjs.org/@types/react-reconciler/-/react-reconciler-0.28.9.tgz",
+      "integrity": "sha512-HHM3nxyUZ3zAylX8ZEyrDNd2XZOnQ0D5XfunJF5FLQnZbHHYq4UWvW1QfelQNXv1ICNkwYhfxjwfnqivYB6bFg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*"
+      }
+    },
+    "node_modules/jiti": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.0.tgz",
+      "integrity": "sha512-VXe6RjJkBPj0ohtqaO8vSWP3ZhAKo66fKrFNCll4BTcwljPLz03pCbaNKfzGP5MbrCYcbJ7v0nOYYwUzTEIdXQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jiti": "lib/jiti-cli.mjs"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/js-yaml": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
+      "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/jsesc": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
+      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/json-buffer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
+      "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json-stable-stringify-without-jsonify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json5": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+      "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "minimist": "^1.2.0"
+      },
+      "bin": {
+        "json5": "lib/cli.js"
+      }
+    },
+    "node_modules/jsx-ast-utils": {
+      "version": "3.3.5",
+      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
+      "integrity": "sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-includes": "^3.1.6",
+        "array.prototype.flat": "^1.3.1",
+        "object.assign": "^4.1.4",
+        "object.values": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/keyv": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
+      "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "json-buffer": "3.0.1"
+      }
+    },
+    "node_modules/language-subtag-registry": {
+      "version": "0.3.23",
+      "resolved": "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.23.tgz",
+      "integrity": "sha512-0K65Lea881pHotoGEa5gDlMxt3pctLi2RplBb7Ezh4rRdLEOtgi7n4EwK9lamnUCkKBqaeKRVebTq6BAxSkpXQ==",
+      "dev": true,
+      "license": "CC0-1.0"
+    },
+    "node_modules/language-tags": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/language-tags/-/language-tags-1.0.9.tgz",
+      "integrity": "sha512-MbjN408fEndfiQXbFQ1vnd+1NoLDsnQW41410oQBXiyXDMYH5z505juWa4KUE1LqxRC7DgOgZDbKLxHIwm27hA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "language-subtag-registry": "^0.3.20"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/lenis": {
+      "version": "1.3.15",
+      "resolved": "https://registry.npmjs.org/lenis/-/lenis-1.3.15.tgz",
+      "integrity": "sha512-zSYOFs0ydafX70uygFoipaHHQouPeE4DpZZhdOUyLJxVf2ZVvBCBBaolDDaQztTRsa6+stBlxq2GmFGJPAVryQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/darkroomengineering"
+      },
+      "peerDependencies": {
+        "@nuxt/kit": ">=3.0.0",
+        "react": ">=17.0.0",
+        "vue": ">=3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@nuxt/kit": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "vue": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/levn": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "^1.2.1",
+        "type-check": "~0.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/lie": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
+      "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "immediate": "~3.0.5"
+      }
+    },
+    "node_modules/lightningcss": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.1.tgz",
+      "integrity": "sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-darwin-arm64": "1.30.1",
+        "lightningcss-darwin-x64": "1.30.1",
+        "lightningcss-freebsd-x64": "1.30.1",
+        "lightningcss-linux-arm-gnueabihf": "1.30.1",
+        "lightningcss-linux-arm64-gnu": "1.30.1",
+        "lightningcss-linux-arm64-musl": "1.30.1",
+        "lightningcss-linux-x64-gnu": "1.30.1",
+        "lightningcss-linux-x64-musl": "1.30.1",
+        "lightningcss-win32-arm64-msvc": "1.30.1",
+        "lightningcss-win32-x64-msvc": "1.30.1"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.1.tgz",
+      "integrity": "sha512-c8JK7hyE65X1MHMN+Viq9n11RRC7hgin3HhYKhrMyaXflk5GVplZ60IxyoVtzILeKr+xAJwg6zK6sjTBJ0FKYQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.1.tgz",
+      "integrity": "sha512-k1EvjakfumAQoTfcXUcHQZhSpLlkAuEkdMBsI/ivWw9hL+7FtilQc0Cy3hrx0AAQrVtQAbMI7YjCgYgvn37PzA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.1.tgz",
+      "integrity": "sha512-kmW6UGCGg2PcyUE59K5r0kWfKPAVy4SltVeut+umLCFoJ53RdCUWxcRDzO1eTaxf/7Q2H7LTquFHPL5R+Gjyig==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.1.tgz",
+      "integrity": "sha512-MjxUShl1v8pit+6D/zSPq9S9dQ2NPFSQwGvxBCYaBYLPlCWuPh9/t1MRS8iUaR8i+a6w7aps+B4N0S1TYP/R+Q==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.1.tgz",
+      "integrity": "sha512-gB72maP8rmrKsnKYy8XUuXi/4OctJiuQjcuqWNlJQ6jZiWqtPvqFziskH3hnajfvKB27ynbVCucKSm2rkQp4Bw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.1.tgz",
+      "integrity": "sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.1.tgz",
+      "integrity": "sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.1.tgz",
+      "integrity": "sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.1.tgz",
+      "integrity": "sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.1.tgz",
+      "integrity": "sha512-PVqXh48wh4T53F/1CCu8PIPCxLzWyCnn/9T5W1Jpmdy5h9Cwd+0YQS6/LwhHXSafuc61/xg9Lv5OrCby6a++jg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/locate-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/lru-cache": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^3.0.2"
+      }
+    },
+    "node_modules/lru-cache/node_modules/yallist": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/lucide-react": {
+      "version": "0.555.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.555.0.tgz",
+      "integrity": "sha512-D8FvHUGbxWBRQM90NZeIyhAvkFfsh3u9ekrMvJ30Z6gnpBHS6HC6ldLg7tL45hwiIz/u66eKDtdA23gwwGsAHA==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/maath": {
+      "version": "0.10.8",
+      "resolved": "https://registry.npmjs.org/maath/-/maath-0.10.8.tgz",
+      "integrity": "sha512-tRvbDF0Pgqz+9XUa4jjfgAQ8/aPKmQdWXilFu2tMy4GWj4NOsx99HlULO4IeREfbO3a0sA145DZYyvXPkybm0g==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/three": ">=0.134.0",
+        "three": ">=0.134.0"
+      }
+    },
+    "node_modules/magic-string": {
+      "version": "0.30.19",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.19.tgz",
+      "integrity": "sha512-2N21sPY9Ws53PZvsEpVtNuSW+ScYbQdp4b9qUaL+9QkHUrGFKo56Lg9Emg5s9V/qrtNBmiR01sYhUOwu3H+VOw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.5"
+      }
+    },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/meshline": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/meshline/-/meshline-3.3.1.tgz",
+      "integrity": "sha512-/TQj+JdZkeSUOl5Mk2J7eLcYTLiQm2IDzmlSvYm7ov15anEcDJ92GHqqazxTSreeNgfnYu24kiEvvv0WlbCdFQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "three": ">=0.137"
+      }
+    },
+    "node_modules/meshoptimizer": {
+      "version": "0.22.0",
+      "resolved": "https://registry.npmjs.org/meshoptimizer/-/meshoptimizer-0.22.0.tgz",
+      "integrity": "sha512-IebiK79sqIy+E4EgOr+CAw+Ke8hAspXKzBd0JdgEmPHiAwmvEj2S4h1rfvo+o/BnfEYd/jAOg5IeeIjzlzSnDg==",
+      "license": "MIT"
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
+      "integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/minipass": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/minizlib": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-3.1.0.tgz",
+      "integrity": "sha512-KZxYo1BUkWD2TVFLr0MQoM8vUUigWD3LlD83a/75BqC+4qE0Hb1Vo5v1FgcfaNXvfXzr+5EhQ6ing/CaBijTlw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "minipass": "^7.1.2"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/motion": {
+      "version": "12.23.22",
+      "resolved": "https://registry.npmjs.org/motion/-/motion-12.23.22.tgz",
+      "integrity": "sha512-iSq6X9vLHbeYwmHvhK//+U74ROaPnZmBuy60XZzqNl0QtZkWfoZyMDHYnpKuWFv0sNMqHgED8aCXk94LCoQPGg==",
+      "license": "MIT",
+      "dependencies": {
+        "framer-motion": "^12.23.22",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/motion-dom": {
+      "version": "12.23.21",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.21.tgz",
+      "integrity": "sha512-5xDXx/AbhrfgsQmSE7YESMn4Dpo6x5/DTZ4Iyy4xqDvVHWvFVoV+V2Ri2S/ksx+D40wrZ7gPYiMWshkdoqNgNQ==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.23.6"
+      }
+    },
+    "node_modules/motion-number": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/motion-number/-/motion-number-1.0.0.tgz",
+      "integrity": "sha512-gFVxzQoX2RwZATHGjhYlnAe//+ygC1bx6tDbYlZWuOBhaDDrgkx6bOtgMhoqtYHJ7srEp5qLmTnuCnfzIvo2Tg==",
+      "dependencies": {
+        "motion": "^12.0.6"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.23.6",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.23.6.tgz",
+      "integrity": "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==",
+      "license": "MIT"
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/napi-postinstall": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/napi-postinstall/-/napi-postinstall-0.3.3.tgz",
+      "integrity": "sha512-uTp172LLXSxuSYHv/kou+f6KW3SMppU9ivthaVTXian9sOt3XM/zHYHpRZiLgQoxeWfYUnslNWQHF1+G71xcow==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "napi-postinstall": "lib/cli.js"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/napi-postinstall"
+      }
+    },
+    "node_modules/natural-compare": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/next": {
+      "version": "16.0.7",
+      "resolved": "https://registry.npmjs.org/next/-/next-16.0.7.tgz",
+      "integrity": "sha512-3mBRJyPxT4LOxAJI6IsXeFtKfiJUbjCLgvXO02fV8Wy/lIhPvP94Fe7dGhUgHXcQy4sSuYwQNcOLhIfOm0rL0A==",
+      "deprecated": "This version has a security vulnerability. Please upgrade to a patched version. See https://nextjs.org/blog/security-update-2025-12-11 for more details.",
+      "license": "MIT",
+      "dependencies": {
+        "@next/env": "16.0.7",
+        "@swc/helpers": "0.5.15",
+        "caniuse-lite": "^1.0.30001579",
+        "postcss": "8.4.31",
+        "styled-jsx": "5.1.6"
+      },
+      "bin": {
+        "next": "dist/bin/next"
+      },
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "optionalDependencies": {
+        "@next/swc-darwin-arm64": "16.0.7",
+        "@next/swc-darwin-x64": "16.0.7",
+        "@next/swc-linux-arm64-gnu": "16.0.7",
+        "@next/swc-linux-arm64-musl": "16.0.7",
+        "@next/swc-linux-x64-gnu": "16.0.7",
+        "@next/swc-linux-x64-musl": "16.0.7",
+        "@next/swc-win32-arm64-msvc": "16.0.7",
+        "@next/swc-win32-x64-msvc": "16.0.7",
+        "sharp": "^0.34.4"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": "^1.1.0",
+        "@playwright/test": "^1.51.1",
+        "babel-plugin-react-compiler": "*",
+        "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0",
+        "react-dom": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0",
+        "sass": "^1.3.0"
+      },
+      "peerDependenciesMeta": {
+        "@opentelemetry/api": {
+          "optional": true
+        },
+        "@playwright/test": {
+          "optional": true
+        },
+        "babel-plugin-react-compiler": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/next/node_modules/postcss": {
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.6",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.27",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.27.tgz",
+      "integrity": "sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-inspect": {
+      "version": "1.13.4",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
+      "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object-keys": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.assign": {
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.7.tgz",
+      "integrity": "sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0",
+        "has-symbols": "^1.1.0",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object.entries": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.9.tgz",
+      "integrity": "sha512-8u/hfXFRBD1O0hPUjioLhoWFHRmt6tKA4/vZPyckBr18l1KE9uHrFaFaUi8MDRTpi4uak2goyPTSNJLXX2k2Hw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.fromentries": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.8.tgz",
+      "integrity": "sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object.groupby": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/object.groupby/-/object.groupby-1.0.3.tgz",
+      "integrity": "sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.values": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.2.1.tgz",
+      "integrity": "sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/optionator": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
+      "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "deep-is": "^0.1.3",
+        "fast-levenshtein": "^2.0.6",
+        "levn": "^0.4.1",
+        "prelude-ls": "^1.2.1",
+        "type-check": "^0.4.0",
+        "word-wrap": "^1.2.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/own-keys": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/own-keys/-/own-keys-1.0.1.tgz",
+      "integrity": "sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "get-intrinsic": "^1.2.6",
+        "object-keys": "^1.1.1",
+        "safe-push-apply": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/p-limit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "yocto-queue": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-locate": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "callsites": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/phenomenon": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/phenomenon/-/phenomenon-1.6.0.tgz",
+      "integrity": "sha512-7h9/fjPD3qNlgggzm88cY58l9sudZ6Ey+UmZsizfhtawO6E3srZQXywaNm2lBwT72TbpHYRPy7ytIHeBUD/G0A==",
+      "license": "MIT"
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/possible-typed-array-names": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
+      "integrity": "sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.6",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
+      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.11",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/potpack": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/potpack/-/potpack-1.0.2.tgz",
+      "integrity": "sha512-choctRBIV9EMT9WGAZHn3V7t0Z2pMQyl0EZE6pFc/6ml3ssw7Dlf/oAOvFwjm1HVsqfQN8GfeFyJ+d8tRzqueQ==",
+      "license": "ISC"
+    },
+    "node_modules/prelude-ls": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+      "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/promise-worker-transferable": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/promise-worker-transferable/-/promise-worker-transferable-1.0.4.tgz",
+      "integrity": "sha512-bN+0ehEnrXfxV2ZQvU2PetO0n4gqBD4ulq3MI1WOPLgr7/Mg9yRQkX5+0v1vagr74ZTsl7XtzlaYDo2EuCeYJw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "is-promise": "^2.1.0",
+        "lie": "^3.0.2"
+      }
+    },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
+    "node_modules/punycode": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/react": {
+      "version": "19.2.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.2.1.tgz",
+      "integrity": "sha512-DGrYcCWK7tvYMnWh79yrPHt+vdx9tY+1gPZa7nJQtO/p8bLTDaHp4dzwEhQB7pZ4Xe3ok4XKuEPrVuc+wlpkmw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "19.2.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.1.tgz",
+      "integrity": "sha512-ibrK8llX2a4eOskq1mXKu/TGZj9qzomO+sNfO98M6d9zIPOEhlBkMkBUBLd1vgS0gQsLDBzA+8jJBVXDnfHmJg==",
+      "license": "MIT",
+      "dependencies": {
+        "scheduler": "^0.27.0"
+      },
+      "peerDependencies": {
+        "react": "^19.2.1"
+      }
+    },
+    "node_modules/react-fast-marquee": {
+      "version": "1.6.5",
+      "resolved": "https://registry.npmjs.org/react-fast-marquee/-/react-fast-marquee-1.6.5.tgz",
+      "integrity": "sha512-swDnPqrT2XISAih0o74zQVE2wQJFMvkx+9VZXYYNSLb/CUcAzU9pNj637Ar2+hyRw6b4tP6xh4GQZip2ZCpQpg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">= 16.8.0 || ^18.0.0",
+        "react-dom": ">= 16.8.0 || ^18.0.0"
+      }
+    },
+    "node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "license": "MIT"
+    },
+    "node_modules/react-reconciler": {
+      "version": "0.31.0",
+      "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.31.0.tgz",
+      "integrity": "sha512-7Ob7Z+URmesIsIVRjnLoDGwBEG/tVitidU0nMsqX/eeJaLY89RISO/10ERe0MqmzuKUUB1rmY+h1itMbUHg9BQ==",
+      "license": "MIT",
+      "dependencies": {
+        "scheduler": "^0.25.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      },
+      "peerDependencies": {
+        "react": "^19.0.0"
+      }
+    },
+    "node_modules/react-reconciler/node_modules/scheduler": {
+      "version": "0.25.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.25.0.tgz",
+      "integrity": "sha512-xFVuu11jh+xcO7JOAGJNOXld8/TcEHK/4CituBUeUb5hqxJLj9YuemAEuvm9gQ/+pgXYfbQuqAkiYu+u7YEsNA==",
+      "license": "MIT"
+    },
+    "node_modules/react-redux": {
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
+      "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/use-sync-external-store": "^0.0.6",
+        "use-sync-external-store": "^1.4.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^18.2.25 || ^19",
+        "react": "^18.0 || ^19",
+        "redux": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "redux": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-use-measure": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.1.7.tgz",
+      "integrity": "sha512-KrvcAo13I/60HpwGO5jpW7E9DfusKyLPLvuHlUyP5zqnmAPhNc6qTRjUQrdTADl0lpPpDVU2/Gg51UlOGHXbdg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.13",
+        "react-dom": ">=16.13"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/recharts": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/recharts/-/recharts-3.6.0.tgz",
+      "integrity": "sha512-L5bjxvQRAe26RlToBAziKUB7whaGKEwD3znoM6fz3DrTowCIC/FnJYnuq1GEzB8Zv2kdTfaxQfi5GoH0tBinyg==",
+      "license": "MIT",
+      "workspaces": [
+        "www"
+      ],
+      "dependencies": {
+        "@reduxjs/toolkit": "1.x.x || 2.x.x",
+        "clsx": "^2.1.1",
+        "decimal.js-light": "^2.5.1",
+        "es-toolkit": "^1.39.3",
+        "eventemitter3": "^5.0.1",
+        "immer": "^10.1.1",
+        "react-redux": "8.x.x || 9.x.x",
+        "reselect": "5.1.1",
+        "tiny-invariant": "^1.3.3",
+        "use-sync-external-store": "^1.2.2",
+        "victory-vendor": "^37.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-is": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/redux": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
+      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
+      "license": "MIT"
+    },
+    "node_modules/redux-thunk": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
+      "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "redux": "^5.0.0"
+      }
+    },
+    "node_modules/reflect.getprototypeof": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
+      "integrity": "sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.9",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.7",
+        "get-proto": "^1.0.1",
+        "which-builtin-type": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/regexp.prototype.flags": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz",
+      "integrity": "sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-errors": "^1.3.0",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "set-function-name": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/reselect": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
+      "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==",
+      "license": "MIT"
+    },
+    "node_modules/resolve": {
+      "version": "1.22.10",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
+      "integrity": "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-core-module": "^2.16.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/resolve-pkg-maps": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz",
+      "integrity": "sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
+      }
+    },
+    "node_modules/reusify": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
+      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "node_modules/safe-array-concat": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.3.tgz",
+      "integrity": "sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.2",
+        "get-intrinsic": "^1.2.6",
+        "has-symbols": "^1.1.0",
+        "isarray": "^2.0.5"
+      },
+      "engines": {
+        "node": ">=0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/safe-push-apply": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/safe-push-apply/-/safe-push-apply-1.0.0.tgz",
+      "integrity": "sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "isarray": "^2.0.5"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/safe-regex-test": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.1.0.tgz",
+      "integrity": "sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "is-regex": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
+      "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
+      "license": "MIT"
+    },
+    "node_modules/semver": {
+      "version": "7.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
+      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+      "devOptional": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/set-function-length": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
+      "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/set-function-name": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.2.tgz",
+      "integrity": "sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "functions-have-names": "^1.2.3",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/set-proto": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/set-proto/-/set-proto-1.0.0.tgz",
+      "integrity": "sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/sharp": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.4.tgz",
+      "integrity": "sha512-FUH39xp3SBPnxWvd5iib1X8XY7J0K0X7d93sie9CJg2PO8/7gmg89Nve6OjItK53/MlAushNNxteBYfM6DEuoA==",
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "dependencies": {
+        "@img/colour": "^1.0.0",
+        "detect-libc": "^2.1.0",
+        "semver": "^7.7.2"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-darwin-arm64": "0.34.4",
+        "@img/sharp-darwin-x64": "0.34.4",
+        "@img/sharp-libvips-darwin-arm64": "1.2.3",
+        "@img/sharp-libvips-darwin-x64": "1.2.3",
+        "@img/sharp-libvips-linux-arm": "1.2.3",
+        "@img/sharp-libvips-linux-arm64": "1.2.3",
+        "@img/sharp-libvips-linux-ppc64": "1.2.3",
+        "@img/sharp-libvips-linux-s390x": "1.2.3",
+        "@img/sharp-libvips-linux-x64": "1.2.3",
+        "@img/sharp-libvips-linuxmusl-arm64": "1.2.3",
+        "@img/sharp-libvips-linuxmusl-x64": "1.2.3",
+        "@img/sharp-linux-arm": "0.34.4",
+        "@img/sharp-linux-arm64": "0.34.4",
+        "@img/sharp-linux-ppc64": "0.34.4",
+        "@img/sharp-linux-s390x": "0.34.4",
+        "@img/sharp-linux-x64": "0.34.4",
+        "@img/sharp-linuxmusl-arm64": "0.34.4",
+        "@img/sharp-linuxmusl-x64": "0.34.4",
+        "@img/sharp-wasm32": "0.34.4",
+        "@img/sharp-win32-arm64": "0.34.4",
+        "@img/sharp-win32-ia32": "0.34.4",
+        "@img/sharp-win32-x64": "0.34.4"
+      }
+    },
+    "node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "license": "MIT",
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/side-channel": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
+      "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3",
+        "side-channel-list": "^1.0.0",
+        "side-channel-map": "^1.0.1",
+        "side-channel-weakmap": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-list": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
+      "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-map": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
+      "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-weakmap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
+      "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3",
+        "side-channel-map": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/stable-hash": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/stable-hash/-/stable-hash-0.0.5.tgz",
+      "integrity": "sha512-+L3ccpzibovGXFK+Ap/f8LOS0ahMrHTf3xu7mMLSpEGU0EO9ucaysSylKo9eRDFNhWve/y275iPmIZ4z39a9iA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/stats-gl": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/stats-gl/-/stats-gl-2.4.2.tgz",
+      "integrity": "sha512-g5O9B0hm9CvnM36+v7SFl39T7hmAlv541tU81ME8YeSb3i1CIP5/QdDeSB3A0la0bKNHpxpwxOVRo2wFTYEosQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/three": "*",
+        "three": "^0.170.0"
+      },
+      "peerDependencies": {
+        "@types/three": "*",
+        "three": "*"
+      }
+    },
+    "node_modules/stats-gl/node_modules/three": {
+      "version": "0.170.0",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.170.0.tgz",
+      "integrity": "sha512-FQK+LEpYc0fBD+J8g6oSEyyNzjp+Q7Ks1C568WWaoMRLW+TkNNWmenWeGgJjV105Gd+p/2ql1ZcjYvNiPZBhuQ==",
+      "license": "MIT"
+    },
+    "node_modules/stats.js": {
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/stats.js/-/stats.js-0.17.0.tgz",
+      "integrity": "sha512-hNKz8phvYLPEcRkeG1rsGmV5ChMjKDAWU7/OJJdDErPBNChQXxCo3WZurGpnWc6gZhAzEPFad1aVgyOANH1sMw==",
+      "license": "MIT"
+    },
+    "node_modules/stop-iteration-iterator": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.1.0.tgz",
+      "integrity": "sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "internal-slot": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/string.prototype.includes": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/string.prototype.includes/-/string.prototype.includes-2.0.1.tgz",
+      "integrity": "sha512-o7+c9bW6zpAdJHTtujeePODAhkuicdAryFsfVKwA+wGw89wJ4GTY484WTucM9hLtDEOpOvI+aHnzqnC5lHp4Rg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/string.prototype.matchall": {
+      "version": "4.0.12",
+      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.12.tgz",
+      "integrity": "sha512-6CC9uyBL+/48dYizRf7H7VAYCMCNTBeM78x/VTUe9bFEaxBepPJDa1Ow99LqI/1yF7kuy7Q3cQsYMrcjGUcskA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.6",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.6",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "internal-slot": "^1.1.0",
+        "regexp.prototype.flags": "^1.5.3",
+        "set-function-name": "^2.0.2",
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.repeat": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/string.prototype.repeat/-/string.prototype.repeat-1.0.0.tgz",
+      "integrity": "sha512-0u/TldDbKD8bFCQ/4f5+mNRrXwZ8hg2w7ZR8wa16e8z9XpePWl3eGEcUD0OXpEH/VJH/2G3gjUtR3ZOiBe2S/w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.17.5"
+      }
+    },
+    "node_modules/string.prototype.trim": {
+      "version": "1.2.10",
+      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.10.tgz",
+      "integrity": "sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.2",
+        "define-data-property": "^1.1.4",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-object-atoms": "^1.0.0",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.trimend": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.9.tgz",
+      "integrity": "sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.2",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.trimstart": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.8.tgz",
+      "integrity": "sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/strip-bom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
+      "integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/strip-json-comments": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/styled-jsx": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.6.tgz",
+      "integrity": "sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA==",
+      "license": "MIT",
+      "dependencies": {
+        "client-only": "0.0.1"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0 || 17.x.x || ^18.0.0-0 || ^19.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "babel-plugin-macros": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/suspend-react": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/suspend-react/-/suspend-react-0.1.3.tgz",
+      "integrity": "sha512-aqldKgX9aZqpoDp3e8/BZ8Dm7x1pJl+qI3ZKxDN0i/IQTWUwBx/ManmlVJ3wowqbno6c2bmiIfs+Um6LbsjJyQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=17.0"
+      }
+    },
+    "node_modules/tailwind-merge": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.4.0.tgz",
+      "integrity": "sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
+    "node_modules/tailwindcss": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.13.tgz",
+      "integrity": "sha512-i+zidfmTqtwquj4hMEwdjshYYgMbOrPzb9a0M3ZgNa0JMoZeFC6bxZvO8yr8ozS6ix2SDz0+mvryPeBs2TFE+w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tapable": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.3.tgz",
+      "integrity": "sha512-ZL6DDuAlRlLGghwcfmSn9sK3Hr6ArtyudlSAiCqQ6IfE+b+HHbydbYDIG15IfS5do+7XQQBdBiubF/cV2dnDzg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/tar": {
+      "version": "7.5.11",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-7.5.11.tgz",
+      "integrity": "sha512-ChjMH33/KetonMTAtpYdgUFr0tbz69Fp2v7zWxQfYZX4g5ZN2nOBXm1R2xyA+lMIKrLKIoKAwFj93jE/avX9cQ==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "@isaacs/fs-minipass": "^4.0.0",
+        "chownr": "^3.0.0",
+        "minipass": "^7.1.2",
+        "minizlib": "^3.1.0",
+        "yallist": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/three": {
+      "version": "0.181.2",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.181.2.tgz",
+      "integrity": "sha512-k/CjiZ80bYss6Qs7/ex1TBlPD11whT9oKfT8oTGiHa34W4JRd1NiH/Tr1DbHWQ2/vMUypxksLnF2CfmlmM5XFQ==",
+      "license": "MIT"
+    },
+    "node_modules/three-mesh-bvh": {
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/three-mesh-bvh/-/three-mesh-bvh-0.8.3.tgz",
+      "integrity": "sha512-4G5lBaF+g2auKX3P0yqx+MJC6oVt6sB5k+CchS6Ob0qvH0YIhuUk1eYr7ktsIpY+albCqE80/FVQGV190PmiAg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "three": ">= 0.159.0"
+      }
+    },
+    "node_modules/three-stdlib": {
+      "version": "2.36.0",
+      "resolved": "https://registry.npmjs.org/three-stdlib/-/three-stdlib-2.36.0.tgz",
+      "integrity": "sha512-kv0Byb++AXztEGsULgMAs8U2jgUdz6HPpAB/wDJnLiLlaWQX2APHhiTJIN7rqW+Of0eRgcp7jn05U1BsCP3xBA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/draco3d": "^1.4.0",
+        "@types/offscreencanvas": "^2019.6.4",
+        "@types/webxr": "^0.5.2",
+        "draco3d": "^1.4.1",
+        "fflate": "^0.6.9",
+        "potpack": "^1.0.1"
+      },
+      "peerDependencies": {
+        "three": ">=0.128.0"
+      }
+    },
+    "node_modules/three-stdlib/node_modules/fflate": {
+      "version": "0.6.10",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.6.10.tgz",
+      "integrity": "sha512-IQrh3lEPM93wVCEczc9SaAOvkmcoQn/G8Bo1e8ZPlY3X3bnAxWaBdvTdvM1hP62iZp0BXWDy4vTAy4fF0+Dlpg==",
+      "license": "MIT"
+    },
+    "node_modules/tiny-invariant": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
+      "license": "MIT"
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.15",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
+      "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/tinyglobby/node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/tinyglobby/node_modules/picomatch": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/troika-three-text": {
+      "version": "0.52.4",
+      "resolved": "https://registry.npmjs.org/troika-three-text/-/troika-three-text-0.52.4.tgz",
+      "integrity": "sha512-V50EwcYGruV5rUZ9F4aNsrytGdKcXKALjEtQXIOBfhVoZU9VAqZNIoGQ3TMiooVqFAbR1w15T+f+8gkzoFzawg==",
+      "license": "MIT",
+      "dependencies": {
+        "bidi-js": "^1.0.2",
+        "troika-three-utils": "^0.52.4",
+        "troika-worker-utils": "^0.52.0",
+        "webgl-sdf-generator": "1.1.1"
+      },
+      "peerDependencies": {
+        "three": ">=0.125.0"
+      }
+    },
+    "node_modules/troika-three-utils": {
+      "version": "0.52.4",
+      "resolved": "https://registry.npmjs.org/troika-three-utils/-/troika-three-utils-0.52.4.tgz",
+      "integrity": "sha512-NORAStSVa/BDiG52Mfudk4j1FG4jC4ILutB3foPnfGbOeIs9+G5vZLa0pnmnaftZUGm4UwSoqEpWdqvC7zms3A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "three": ">=0.125.0"
+      }
+    },
+    "node_modules/troika-worker-utils": {
+      "version": "0.52.0",
+      "resolved": "https://registry.npmjs.org/troika-worker-utils/-/troika-worker-utils-0.52.0.tgz",
+      "integrity": "sha512-W1CpvTHykaPH5brv5VHLfQo9D1OYuo0cSBEUQFFT/nBUzM8iD6Lq2/tgG/f1OelbAS1WtaTPQzE5uM49egnngw==",
+      "license": "MIT"
+    },
+    "node_modules/ts-api-utils": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.1.0.tgz",
+      "integrity": "sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.12"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4"
+      }
+    },
+    "node_modules/tsconfig-paths": {
+      "version": "3.15.0",
+      "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz",
+      "integrity": "sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/json5": "^0.0.29",
+        "json5": "^1.0.2",
+        "minimist": "^1.2.6",
+        "strip-bom": "^3.0.0"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
+    "node_modules/tunnel-rat": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/tunnel-rat/-/tunnel-rat-0.1.2.tgz",
+      "integrity": "sha512-lR5VHmkPhzdhrM092lI2nACsLO4QubF0/yoOhzX7c+wIpbN1GjHNzCc91QlpxBi+cnx8vVJ+Ur6vL5cEoQPFpQ==",
+      "license": "MIT",
+      "dependencies": {
+        "zustand": "^4.3.2"
+      }
+    },
+    "node_modules/tunnel-rat/node_modules/zustand": {
+      "version": "4.5.7",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.7.tgz",
+      "integrity": "sha512-CHOUy7mu3lbD6o6LJLfllpjkzhHXSBlX8B9+qPddUsIfeF5S/UZ5q0kmCsnRqT1UHFQZchNFDDzMbQsuesHWlw==",
+      "license": "MIT",
+      "dependencies": {
+        "use-sync-external-store": "^1.2.2"
+      },
+      "engines": {
+        "node": ">=12.7.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.8",
+        "immer": ">=9.0.6",
+        "react": ">=16.8"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/type-check": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+      "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/typed-array-buffer": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.3.tgz",
+      "integrity": "sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "is-typed-array": "^1.1.14"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/typed-array-byte-length": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.3.tgz",
+      "integrity": "sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "for-each": "^0.3.3",
+        "gopd": "^1.2.0",
+        "has-proto": "^1.2.0",
+        "is-typed-array": "^1.1.14"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typed-array-byte-offset": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.4.tgz",
+      "integrity": "sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "for-each": "^0.3.3",
+        "gopd": "^1.2.0",
+        "has-proto": "^1.2.0",
+        "is-typed-array": "^1.1.15",
+        "reflect.getprototypeof": "^1.0.9"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typed-array-length": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.7.tgz",
+      "integrity": "sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "for-each": "^0.3.3",
+        "gopd": "^1.0.1",
+        "is-typed-array": "^1.1.13",
+        "possible-typed-array-names": "^1.0.0",
+        "reflect.getprototypeof": "^1.0.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "5.9.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.2.tgz",
+      "integrity": "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/typescript-eslint": {
+      "version": "8.48.1",
+      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.48.1.tgz",
+      "integrity": "sha512-FbOKN1fqNoXp1hIl5KYpObVrp0mCn+CLgn479nmu2IsRMrx2vyv74MmsBLVlhg8qVwNFGbXSp8fh1zp8pEoC2A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/eslint-plugin": "8.48.1",
+        "@typescript-eslint/parser": "8.48.1",
+        "@typescript-eslint/typescript-estree": "8.48.1",
+        "@typescript-eslint/utils": "8.48.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/unbox-primitive": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.1.0.tgz",
+      "integrity": "sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-bigints": "^1.0.2",
+        "has-symbols": "^1.1.0",
+        "which-boxed-primitive": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
+      "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/unrs-resolver": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/unrs-resolver/-/unrs-resolver-1.11.1.tgz",
+      "integrity": "sha512-bSjt9pjaEBnNiGgc9rUiHGKv5l4/TGzDmYw3RhnkJGtLhbnnA/5qJj7x3dNDCRx/PJxu774LlH8lCOlB4hEfKg==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "dependencies": {
+        "napi-postinstall": "^0.3.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/unrs-resolver"
+      },
+      "optionalDependencies": {
+        "@unrs/resolver-binding-android-arm-eabi": "1.11.1",
+        "@unrs/resolver-binding-android-arm64": "1.11.1",
+        "@unrs/resolver-binding-darwin-arm64": "1.11.1",
+        "@unrs/resolver-binding-darwin-x64": "1.11.1",
+        "@unrs/resolver-binding-freebsd-x64": "1.11.1",
+        "@unrs/resolver-binding-linux-arm-gnueabihf": "1.11.1",
+        "@unrs/resolver-binding-linux-arm-musleabihf": "1.11.1",
+        "@unrs/resolver-binding-linux-arm64-gnu": "1.11.1",
+        "@unrs/resolver-binding-linux-arm64-musl": "1.11.1",
+        "@unrs/resolver-binding-linux-ppc64-gnu": "1.11.1",
+        "@unrs/resolver-binding-linux-riscv64-gnu": "1.11.1",
+        "@unrs/resolver-binding-linux-riscv64-musl": "1.11.1",
+        "@unrs/resolver-binding-linux-s390x-gnu": "1.11.1",
+        "@unrs/resolver-binding-linux-x64-gnu": "1.11.1",
+        "@unrs/resolver-binding-linux-x64-musl": "1.11.1",
+        "@unrs/resolver-binding-wasm32-wasi": "1.11.1",
+        "@unrs/resolver-binding-win32-arm64-msvc": "1.11.1",
+        "@unrs/resolver-binding-win32-ia32-msvc": "1.11.1",
+        "@unrs/resolver-binding-win32-x64-msvc": "1.11.1"
+      }
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.2.tgz",
+      "integrity": "sha512-E85pfNzMQ9jpKkA7+TJAi4TJN+tBCuWh5rUcS/sv6cFi+1q9LYDwDI5dpUL0u/73EElyQ8d3TEaeW4sPedBqYA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
+    "node_modules/uri-js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "punycode": "^2.1.0"
+      }
+    },
+    "node_modules/use-sync-external-store": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/utility-types": {
+      "version": "3.11.0",
+      "resolved": "https://registry.npmjs.org/utility-types/-/utility-types-3.11.0.tgz",
+      "integrity": "sha512-6Z7Ma2aVEWisaL6TvBCy7P8rm2LQoPv6dJ7ecIaIixHcwfbJ0x7mWdbcwlIM5IGQxPZSFYeqRCqlOOeKoJYMkw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/victory-vendor": {
+      "version": "37.3.6",
+      "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-37.3.6.tgz",
+      "integrity": "sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ==",
+      "license": "MIT AND ISC",
+      "dependencies": {
+        "@types/d3-array": "^3.0.3",
+        "@types/d3-ease": "^3.0.0",
+        "@types/d3-interpolate": "^3.0.1",
+        "@types/d3-scale": "^4.0.2",
+        "@types/d3-shape": "^3.1.0",
+        "@types/d3-time": "^3.0.0",
+        "@types/d3-timer": "^3.0.0",
+        "d3-array": "^3.1.6",
+        "d3-ease": "^3.0.1",
+        "d3-interpolate": "^3.0.1",
+        "d3-scale": "^4.0.2",
+        "d3-shape": "^3.1.0",
+        "d3-time": "^3.0.0",
+        "d3-timer": "^3.0.1"
+      }
+    },
+    "node_modules/webgl-constants": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/webgl-constants/-/webgl-constants-1.1.1.tgz",
+      "integrity": "sha512-LkBXKjU5r9vAW7Gcu3T5u+5cvSvh5WwINdr0C+9jpzVB41cjQAP5ePArDtk/WHYdVj0GefCgM73BA7FlIiNtdg=="
+    },
+    "node_modules/webgl-sdf-generator": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/webgl-sdf-generator/-/webgl-sdf-generator-1.1.1.tgz",
+      "integrity": "sha512-9Z0JcMTFxeE+b2x1LJTdnaT8rT8aEp7MVxkNwoycNmJWwPdzoXzMh0BjJSh/AEFP+KPYZUli814h8bJZFIZ2jA==",
+      "license": "MIT"
+    },
+    "node_modules/which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/which-boxed-primitive": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.1.1.tgz",
+      "integrity": "sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-bigint": "^1.1.0",
+        "is-boolean-object": "^1.2.1",
+        "is-number-object": "^1.1.1",
+        "is-string": "^1.1.1",
+        "is-symbol": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-builtin-type": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/which-builtin-type/-/which-builtin-type-1.2.1.tgz",
+      "integrity": "sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "function.prototype.name": "^1.1.6",
+        "has-tostringtag": "^1.0.2",
+        "is-async-function": "^2.0.0",
+        "is-date-object": "^1.1.0",
+        "is-finalizationregistry": "^1.1.0",
+        "is-generator-function": "^1.0.10",
+        "is-regex": "^1.2.1",
+        "is-weakref": "^1.0.2",
+        "isarray": "^2.0.5",
+        "which-boxed-primitive": "^1.1.0",
+        "which-collection": "^1.0.2",
+        "which-typed-array": "^1.1.16"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-collection": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/which-collection/-/which-collection-1.0.2.tgz",
+      "integrity": "sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-map": "^2.0.3",
+        "is-set": "^2.0.3",
+        "is-weakmap": "^2.0.2",
+        "is-weakset": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-typed-array": {
+      "version": "1.1.19",
+      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.19.tgz",
+      "integrity": "sha512-rEvr90Bck4WZt9HHFC4DJMsjvu7x+r6bImz0/BrbWb7A2djJ8hnZMrWnHo9F8ssv0OMErasDhftrfROTyqSDrw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "for-each": "^0.3.5",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/word-wrap": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
+      "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/yallist": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-5.0.0.tgz",
+      "integrity": "sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/yocto-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/zod": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-4.1.13.tgz",
+      "integrity": "sha512-AvvthqfqrAhNH9dnfmrfKzX5upOdjUVJYFqNSlkmGf64gRaTzlPwz99IHYnVs28qYAybvAlBV+H7pn0saFY4Ig==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    },
+    "node_modules/zod-validation-error": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/zod-validation-error/-/zod-validation-error-4.0.2.tgz",
+      "integrity": "sha512-Q6/nZLe6jxuU80qb/4uJ4t5v2VEZ44lzQjPDhYJNztRQ4wyWc6VF3D3Kb/fAuPetZQnhS3hnajCf9CsWesghLQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "zod": "^3.25.0 || ^4.0.0"
+      }
+    },
+    "node_modules/zustand": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.8.tgz",
+      "integrity": "sha512-gyPKpIaxY9XcO2vSMrLbiER7QMAMGOQZVRdJ6Zi782jkbzZygq5GI9nG8g+sMgitRtndwaBSl7uiqC49o1SSiw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=18.0.0",
+        "immer": ">=9.0.6",
+        "react": ">=18.0.0",
+        "use-sync-external-store": ">=1.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "use-sync-external-store": {
+          "optional": true
+        }
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..e5257f8
--- /dev/null
+++ b/package.json
@@ -0,0 +1,47 @@
+{
+  "name": "webild-components-2",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint . --ext .ts,.tsx",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@gsap/react": "^2.1.2",
+    "@react-three/drei": "^10.7.7",
+    "@react-three/fiber": "^9.4.0",
+    "@rive-app/react-canvas": "^4.26.2",
+    "@tsparticles/engine": "^3.9.1",
+    "@tsparticles/react": "^3.0.0",
+    "@tsparticles/slim": "^3.9.1",
+    "clsx": "^2.1.1",
+    "cobe": "^0.6.5",
+    "embla-carousel-auto-scroll": "^8.6.0",
+    "embla-carousel-react": "^8.6.0",
+    "gsap": "^3.13.0",
+    "lenis": "^1.3.15",
+    "lucide-react": "^0.555.0",
+    "motion-number": "^1.0.0",
+    "next": "16.0.7",
+    "react": "19.2.1",
+    "react-dom": "19.2.1",
+    "react-fast-marquee": "^1.6.5",
+    "recharts": "^3.6.0",
+    "tailwind-merge": "^3.4.0",
+    "three": "^0.181.2"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3",
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "16.0.7",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  }
+}
diff --git a/postcss.config.mjs b/postcss.config.mjs
new file mode 100644
index 0000000..c7bcb4b
--- /dev/null
+++ b/postcss.config.mjs
@@ -0,0 +1,5 @@
+const config = {
+  plugins: ["@tailwindcss/postcss"],
+};
+
+export default config;
diff --git a/registry.json b/registry.json
new file mode 100644
index 0000000..7ed2227
--- /dev/null
+++ b/registry.json
@@ -0,0 +1,4767 @@
+{
+  "componentRegistry": {
+    "layout": [
+      {
+        "import": "import CardStack from '@/components/cardStack/CardStack';",
+        "name": "CardStack",
+        "path": "@/components/cardStack/CardStack",
+        "propsSchema": {
+          "children": "React.ReactNode",
+          "mode?": "'auto' | 'buttons' (default: 'buttons')",
+          "gridVariant?": "'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right' | 'two-items-per-row' (default: 'uniform-all-items-equal')",
+          "uniformGridCustomHeightClasses?": "string",
+          "gridRowsClassName?": "string",
+          "itemHeightClassesOverride?": "Array<string>",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d' (required - controls GSAP scroll animations with stagger effect) (required)",
+          "supports3DAnimation?": "boolean (default: false)",
+          "carouselThreshold?": "number (default: 5)",
+          "bottomContent?": "React.ReactNode",
+          "title?": "string",
+          "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+          "description?": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground?": "boolean",
+          "ariaLabel?": "string (default: 'Card stack')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "gridClassName?": "string",
+          "carouselClassName?": "string",
+          "carouselItemClassName?": "string",
+          "controlsClassName?": "string",
+          "textBoxClassName?": "string",
+          "titleClassName?": "string",
+          "titleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+          "titleImageClassName?": "string - For styling images in inline-image layout",
+          "descriptionClassName?": "string",
+          "tagClassName?": "string",
+          "buttonContainerClassName?": "string",
+          "buttonClassName?": "string",
+          "buttonTextClassName?": "string"
+        }
+      },
+      {
+        "import": "import TimelineHorizontalCardStack from '@/components/cardStack/layouts/timelines/TimelineHorizontalCardStack';",
+        "name": "TimelineHorizontalCardStack",
+        "path": "@/components/cardStack/layouts/timelines/TimelineHorizontalCardStack",
+        "propsSchema": {
+          "children": "React.ReactNode",
+          "title": "string",
+          "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground?": "boolean",
+          "mediaItems?": "Array<{ imageSrc?: string (recommended if no videoSrc), videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }>",
+          "ariaLabel?": "string (default: 'Timeline section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "textBoxClassName?": "string",
+          "titleClassName?": "string",
+          "titleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+          "titleImageClassName?": "string - For styling images in inline-image layout",
+          "descriptionClassName?": "string",
+          "tagClassName?": "string",
+          "buttonContainerClassName?": "string",
+          "buttonClassName?": "string",
+          "buttonTextClassName?": "string",
+          "cardClassName?": "string",
+          "progressBarClassName?": "string",
+          "mediaContainerClassName?": "string",
+          "mediaClassName?": "string"
+        }
+      },
+      {
+        "import": "import TimelineCardStack from '@/components/cardStack/layouts/timelines/TimelineCardStack';",
+        "name": "TimelineCardStack",
+        "path": "@/components/cardStack/layouts/timelines/TimelineCardStack",
+        "propsSchema": {
+          "children": "React.ReactNode",
+          "title": "string",
+          "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground?": "boolean",
+          "ariaLabel?": "string (default: 'Timeline section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "textBoxClassName?": "string",
+          "titleClassName?": "string",
+          "titleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+          "titleImageClassName?": "string - For styling images in inline-image layout",
+          "descriptionClassName?": "string",
+          "tagClassName?": "string",
+          "buttonContainerClassName?": "string",
+          "buttonClassName?": "string",
+          "buttonTextClassName?": "string"
+        }
+      },
+      {
+        "import": "import TimelinePhoneView from '@/components/cardStack/layouts/timelines/TimelinePhoneView';",
+        "name": "TimelinePhoneView",
+        "path": "@/components/cardStack/layouts/timelines/TimelinePhoneView",
+        "propsSchema": {
+          "items": "Array<{ trigger: string, content: React.ReactNode, imageOne?: string, videoOne?: string, imageAltOne?: string, videoAriaLabelOne?: string, imageTwo?: string, videoTwo?: string, imageAltTwo?: string, videoAriaLabelTwo?: string }> - Timeline items with triggers and dual phone media (required)",
+          "showTextBox?": "boolean (default: true - controls whether CardStackTextBox renders)",
+          "title": "string",
+          "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "ariaLabel?": "string (default: 'Timeline phone view section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "textBoxClassName?": "string",
+          "titleClassName?": "string",
+          "titleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+          "titleImageClassName?": "string - For styling images in inline-image layout",
+          "descriptionClassName?": "string",
+          "tagClassName?": "string",
+          "buttonContainerClassName?": "string",
+          "buttonClassName?": "string",
+          "buttonTextClassName?": "string",
+          "desktopContainerClassName?": "string",
+          "mobileContainerClassName?": "string",
+          "desktopContentClassName?": "string",
+          "desktopWrapperClassName?": "string",
+          "mobileWrapperClassName?": "string",
+          "phoneFrameClassName?": "string",
+          "mobilePhoneFrameClassName?": "string"
+        }
+      },
+      {
+        "import": "import TimelineProcessFlow from '@/components/cardStack/layouts/timelines/TimelineProcessFlow';",
+        "name": "TimelineProcessFlow",
+        "path": "@/components/cardStack/layouts/timelines/TimelineProcessFlow",
+        "propsSchema": {
+          "items": "Array<{ content: React.ReactNode, media: React.ReactNode, reverse: boolean }> - Timeline items with content and media",
+          "title": "string",
+          "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect) (required)",
+          "ariaLabel?": "string (default: 'Timeline process flow section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTitleClassName?": "string",
+          "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+          "textBoxTitleImageClassName?": "string - For styling images in inline-image layout",
+          "textBoxDescriptionClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string",
+          "itemClassName?": "string",
+          "mediaWrapperClassName?": "string",
+          "numberClassName?": "string",
+          "contentWrapperClassName?": "string",
+          "gapClassName?": "string"
+        }
+      },
+      {
+        "import": "import TextBox from '@/components/Textbox';",
+        "name": "TextBox",
+        "path": "@/components/Textbox",
+        "propsSchema": {
+          "title": "string",
+          "description": "string",
+          "type?": "'entrance-slide' | 'reveal-blur' | 'background-highlight'",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' (required)",
+          "center?": "boolean (default: false)",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "duration?": "number (default: 1)",
+          "start?": "string (default: 'top 80%')",
+          "end?": "string (default: 'top 20%')",
+          "gradientColors?": "{ from: string, to: string }",
+          "children?": "React.ReactNode",
+          "className?": "string",
+          "titleClassName?": "string",
+          "descriptionClassName?": "string",
+          "tagClassName?": "string",
+          "buttonContainerClassName?": "string",
+          "buttonClassName?": "string",
+          "buttonTextClassName?": "string",
+          "avatars?": "Array<{ src: string, alt?: string }> - User avatar images",
+          "avatarText?": "string",
+          "avatarGroupClassName?": "string"
+        }
+      },
+      {
+        "import": "import AvatarGroup from '@/components/shared/AvatarGroup';",
+        "name": "AvatarGroup",
+        "path": "@/components/shared/AvatarGroup",
+        "propsSchema": {
+          "avatars": "Array<{ src: string, alt?: string }> - User avatar images",
+          "text?": "string",
+          "maxVisible?": "number (default: 5)",
+          "className?": "string",
+          "avatarClassName?": "string",
+          "textClassName?": "string",
+          "ariaLabel?": "string (default: 'User avatars')"
+        }
+      },
+      {
+        "import": "import { BentoGlobe } from '@/components/bento/BentoGlobe';",
+        "name": "BentoGlobe",
+        "path": "@/components/bento/BentoGlobe",
+        "propsSchema": {
+          "className?": "string",
+          "config?": "COBEOptions - Custom globe configuration (see COBE docs)"
+        }
+      }
+    ],
+    "title": [
+      {
+        "import": "import TextAnimation from '@/components/text/TextAnimation';",
+        "name": "TextAnimation",
+        "path": "@/components/text/TextAnimation",
+        "propsSchema": {
+          "type?": "'entrance-slide' | 'reveal-blur' | 'background-highlight'",
+          "title": "string",
+          "children?": "React.ReactNode",
+          "variant?": "'trigger' | 'words-trigger'",
+          "className?": "string",
+          "duration?": "number",
+          "stagger?": "number",
+          "start?": "string",
+          "end?": "string",
+          "ariaLabel?": "string",
+          "gradientColors?": "{ from: string, to: string }"
+        }
+      },
+      {
+        "import": "import TextNumberCount from '@/components/text/TextNumberCount';",
+        "name": "TextNumberCount",
+        "path": "@/components/text/TextNumberCount",
+        "propsSchema": {
+          "value": "number",
+          "startFrom?": "number",
+          "duration?": "number",
+          "format?": "Intl.NumberFormatOptions",
+          "locales?": "string",
+          "prefix?": "string",
+          "suffix?": "string",
+          "animateOnScroll?": "boolean",
+          "threshold?": "number",
+          "className?": "string"
+        }
+      }
+    ],
+    "button": [
+      {
+        "import": "import ButtonTextUnderline from '@/components/button/ButtonTextUnderline';",
+        "name": "ButtonTextUnderline",
+        "path": "@/components/button/ButtonTextUnderline",
+        "propsSchema": {
+          "text": "string",
+          "onClick?": "() => void",
+          "href?": "string - External URLs open in new tab, internal values scroll to section",
+          "className?": "string",
+          "disabled?": "boolean (default: false)",
+          "ariaLabel?": "string",
+          "type?": "'button' | 'submit' | 'reset' (default: 'button')"
+        }
+      },
+      {
+        "import": "import ButtonIconArrow from '@/components/button/ButtonIconArrow';",
+        "name": "ButtonIconArrow",
+        "path": "@/components/button/ButtonIconArrow",
+        "propsSchema": {
+          "text": "string",
+          "onClick?": "() => void",
+          "href?": "string - External URLs open in new tab, internal values scroll to section",
+          "className?": "string",
+          "textClassName?": "string",
+          "iconClassName?": "string",
+          "disabled?": "boolean (default: false)",
+          "ariaLabel?": "string",
+          "type?": "'button' | 'submit' | 'reset' (default: 'button')"
+        }
+      },
+      {
+        "import": "import ButtonTextStagger from '@/components/button/ButtonTextStagger/ButtonTextStagger';",
+        "name": "ButtonTextStagger",
+        "path": "@/components/button/ButtonTextStagger/ButtonTextStagger",
+        "propsSchema": {
+          "text": "string",
+          "onClick?": "() => void",
+          "href?": "string - External URLs open in new tab, internal values scroll to section",
+          "className?": "string",
+          "bgClassName?": "string",
+          "textClassName?": "string",
+          "disabled?": "boolean (default: false)",
+          "ariaLabel?": "string",
+          "type?": "'button' | 'submit' | 'reset' (default: 'button')",
+          "scrollToSection?": "boolean"
+        }
+      },
+      {
+        "import": "import ButtonShiftHover from '@/components/button/ButtonShiftHover/ButtonShiftHover';",
+        "name": "ButtonShiftHover",
+        "path": "@/components/button/ButtonShiftHover/ButtonShiftHover",
+        "propsSchema": {
+          "text": "string",
+          "onClick?": "() => void",
+          "href?": "string - External URLs open in new tab, internal values scroll to section",
+          "className?": "string",
+          "bgClassName?": "string",
+          "textClassName?": "string",
+          "disabled?": "boolean (default: false)",
+          "ariaLabel?": "string",
+          "type?": "'button' | 'submit' | 'reset' (default: 'button')"
+        }
+      },
+      {
+        "import": "import ButtonHoverMagnetic from '@/components/button/ButtonHoverMagnetic/ButtonHoverMagnetic';",
+        "name": "ButtonHoverMagnetic",
+        "path": "@/components/button/ButtonHoverMagnetic/ButtonHoverMagnetic",
+        "propsSchema": {
+          "text": "string",
+          "onClick?": "() => void",
+          "href?": "string - External URLs open in new tab, internal values scroll to section",
+          "className?": "string",
+          "textClassName?": "string",
+          "strengthFactor?": "number (default: 20)",
+          "disabled?": "boolean (default: false)",
+          "ariaLabel?": "string",
+          "type?": "'button' | 'submit' | 'reset' (default: 'button')"
+        }
+      },
+      {
+        "import": "import ButtonHoverBubble from '@/components/button/ButtonHoverBubble';",
+        "name": "ButtonHoverBubble",
+        "path": "@/components/button/ButtonHoverBubble",
+        "propsSchema": {
+          "text": "string",
+          "onClick?": "() => void",
+          "href?": "string - External URLs open in new tab, internal values scroll to section",
+          "className?": "string",
+          "bgClassName?": "string - Applied to the text container (automatically set in sections)",
+          "textClassName?": "string - Applied to the text span",
+          "iconClassName?": "string - Applied to both arrow icon containers (automatically set in sections)",
+          "disabled?": "boolean (default: false)",
+          "ariaLabel?": "string",
+          "type?": "'button' | 'submit' | 'reset' (default: 'button')"
+        }
+      },
+      {
+        "import": "import ButtonExpandHover from '@/components/button/ButtonExpandHover';",
+        "name": "ButtonExpandHover",
+        "path": "@/components/button/ButtonExpandHover",
+        "propsSchema": {
+          "text": "string",
+          "onClick?": "() => void",
+          "href?": "string - External URLs open in new tab, internal values scroll to section",
+          "className?": "string",
+          "textClassName?": "string - Applied to the text span (automatically includes base and hover colors in sections)",
+          "iconClassName?": "string - Applied to the arrow icon container (automatically set in sections)",
+          "iconBgClassName?": "string - Applied to the expanding background (automatically set in sections)",
+          "disabled?": "boolean (default: false)",
+          "ariaLabel?": "string",
+          "type?": "'button' | 'submit' | 'reset' (default: 'button')"
+        }
+      },
+      {
+        "import": "import ButtonBounceEffect from '@/components/button/ButtonBounceEffect/ButtonBounceEffect';",
+        "name": "ButtonBounceEffect",
+        "path": "@/components/button/ButtonBounceEffect/ButtonBounceEffect",
+        "propsSchema": {
+          "text": "string",
+          "onClick?": "() => void",
+          "href?": "string - External URLs open in new tab, internal values scroll to section",
+          "className?": "string",
+          "bgClassName?": "string",
+          "textClassName?": "string",
+          "disabled?": "boolean (default: false)",
+          "ariaLabel?": "string",
+          "type?": "'button' | 'submit' | 'reset' (default: 'button')"
+        }
+      },
+      {
+        "import": "import ButtonDirectionalHover from '@/components/button/ButtonDirectionalHover/ButtonDirectionalHover';",
+        "name": "ButtonDirectionalHover",
+        "path": "@/components/button/ButtonDirectionalHover/ButtonDirectionalHover",
+        "propsSchema": {
+          "text": "string",
+          "onClick?": "() => void",
+          "href?": "string - External URLs open in new tab, internal values scroll to section",
+          "className?": "string",
+          "bgClassName?": "string",
+          "textClassName?": "string",
+          "circleClassName?": "string - Controls the expanding circle color",
+          "disabled?": "boolean (default: false)",
+          "ariaLabel?": "string",
+          "type?": "'button' | 'submit' | 'reset' (default: 'button')"
+        }
+      },
+      {
+        "import": "import ButtonElasticEffect from '@/components/button/ButtonElasticEffect/ButtonElasticEffect';",
+        "name": "ButtonElasticEffect",
+        "path": "@/components/button/ButtonElasticEffect/ButtonElasticEffect",
+        "propsSchema": {
+          "text": "string",
+          "onClick?": "() => void",
+          "href?": "string - External URLs open in new tab, internal values scroll to section",
+          "className?": "string",
+          "textClassName?": "string",
+          "disabled?": "boolean (default: false)",
+          "ariaLabel?": "string",
+          "type?": "'button' | 'submit' | 'reset' (default: 'button')"
+        }
+      },
+      {
+        "import": "import ButtonTextShift from '@/components/button/ButtonTextShift/ButtonTextShift';",
+        "name": "ButtonTextShift",
+        "path": "@/components/button/ButtonTextShift/ButtonTextShift",
+        "propsSchema": {
+          "text": "string",
+          "onClick?": "() => void",
+          "href?": "string - External URLs open in new tab, internal values scroll to section",
+          "className?": "string",
+          "bgClassName?": "string",
+          "textClassName?": "string",
+          "disabled?": "boolean (default: false)",
+          "ariaLabel?": "string",
+          "type?": "'button' | 'submit' | 'reset' (default: 'button')"
+        }
+      }
+    ],
+    "form": [
+      {
+        "import": "import Input from '@/components/form/Input';",
+        "name": "Input",
+        "path": "@/components/form/Input",
+        "propsSchema": {
+          "value": "string (required)",
+          "onChange": "(value: string) => void (required)",
+          "type?": "string (default: 'text')",
+          "placeholder?": "string",
+          "required?": "boolean (default: false)",
+          "disabled?": "boolean (default: false)",
+          "ariaLabel?": "string",
+          "className?": "string"
+        }
+      },
+      {
+        "import": "import Textarea from '@/components/form/Textarea';",
+        "name": "Textarea",
+        "path": "@/components/form/Textarea",
+        "propsSchema": {
+          "value": "string (required)",
+          "onChange": "(value: string) => void (required)",
+          "placeholder?": "string",
+          "rows?": "number (default: 5)",
+          "required?": "boolean (default: false)",
+          "disabled?": "boolean (default: false)",
+          "ariaLabel?": "string",
+          "className?": "string"
+        }
+      },
+      {
+        "import": "import EmailSignupForm from '@/components/form/EmailSignupForm';",
+        "name": "EmailSignupForm",
+        "path": "@/components/form/EmailSignupForm",
+        "propsSchema": {
+          "inputPlaceholder?": "string (default: 'Enter your email')",
+          "buttonText?": "string (default: 'Sign Up')",
+          "onSubmit?": "(email: string) => void",
+          "className?": "string",
+          "inputClassName?": "string",
+          "buttonClassName?": "string",
+          "buttonTextClassName?": "string"
+        }
+      },
+      {
+        "import": "import ContactForm from '@/components/form/ContactForm';",
+        "name": "ContactForm",
+        "path": "@/components/form/ContactForm",
+        "propsSchema": {
+          "title": "string (required)",
+          "description": "string (required)",
+          "tag": "string (required)",
+          "tagIcon?": "LucideIcon",
+          "inputPlaceholder?": "string (default: 'Enter your email')",
+          "buttonText?": "string (default: 'Sign Up')",
+          "termsText?": "string (default: 'By clicking Sign Up you're confirming that you agree with our Terms and Conditions.')",
+          "onSubmit?": "(email: string) => void",
+          "centered?": "boolean (default: false)",
+          "className?": "string",
+          "tagClassName?": "string",
+          "titleClassName?": "string",
+          "descriptionClassName?": "string",
+          "formWrapperClassName?": "string",
+          "formClassName?": "string",
+          "inputClassName?": "string",
+          "buttonClassName?": "string",
+          "buttonTextClassName?": "string",
+          "termsClassName?": "string"
+        }
+      }
+    ],
+    "navbar": [
+      {
+        "import": "import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';",
+        "name": "NavbarStyleApple",
+        "path": "@/components/navbar/NavbarStyleApple/NavbarStyleApple",
+        "propsSchema": {
+          "navItems": "Array<{name: string, id: string}>",
+          "brandName?": "string (default: 'Webild')"
+        }
+      },
+      {
+        "import": "import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';",
+        "name": "NavbarLayoutFloatingInline",
+        "path": "@/components/navbar/NavbarLayoutFloatingInline",
+        "propsSchema": {
+          "navItems": "Array<{name: string, id: string}>",
+          "logoSrc?": "string",
+          "logoAlt?": "string",
+          "brandName?": "string (default: 'Webild')",
+          "button": "{text: string, onClick?: () => void, href?: string}",
+          "animateOnLoad?": "boolean (default: true)",
+          "className?": "string (default: '')",
+          "logoClassName?": "string (default: '')",
+          "logoImageClassName?": "string (default: '')",
+          "navItemClassName?": "string (default: '')",
+          "buttonClassName?": "string (default: '')",
+          "buttonTextClassName?": "string (default: '')"
+        }
+      },
+      {
+        "import": "import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';",
+        "name": "NavbarLayoutFloatingOverlay",
+        "path": "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay",
+        "propsSchema": {
+          "navItems": "Array<{name: string, id: string}>",
+          "logoSrc?": "string",
+          "logoAlt?": "string",
+          "className?": "string",
+          "brandName?": "string (default: 'Webild')",
+          "button?": "{text: string, onClick?: () => void, href?: string}",
+          "logoClassName?": "string (default: '')",
+          "logoImageClassName?": "string (default: '')",
+          "buttonClassName?": "string (default: '')",
+          "buttonTextClassName?": "string (default: '')"
+        }
+      },
+      {
+        "import": "import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';",
+        "name": "NavbarStyleFullscreen",
+        "path": "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen",
+        "propsSchema": {
+          "navItems": "Array<{name: string, id: string}>",
+          "logoSrc?": "string",
+          "logoAlt?": "string",
+          "brandName?": "string (default: 'Webild')",
+          "bottomLeftText?": "string (default: 'Global Community')",
+          "bottomRightText?": "string (default: 'hello@example.com')",
+          "topBarClassName?": "string (default: '')",
+          "button?": "{text: string, onClick?: () => void, href?: string}",
+          "buttonClassName?": "string (default: '')",
+          "buttonTextClassName?": "string (default: '')",
+          "logoClassName?": "string (default: '')",
+          "logoImageClassName?": "string (default: '')"
+        }
+      },
+      {
+        "import": "import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';",
+        "name": "NavbarStyleCentered",
+        "path": "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered",
+        "propsSchema": {
+          "navItems": "Array<{name: string, id: string}>",
+          "button?": "{text: string, onClick?: () => void, href?: string}",
+          "topBarButton?": "{text: string, onClick?: () => void, href?: string}",
+          "logoSrc?": "string",
+          "logoAlt?": "string",
+          "brandName?": "string (default: 'Webild')",
+          "className?": "string (default: '')",
+          "logoClassName?": "string (default: '')",
+          "logoImageClassName?": "string (default: '')"
+        }
+      }
+    ],
+    "background": [
+      {
+        "import": "import PlainBackground from '@/components/background/PlainBackground';",
+        "name": "PlainBackground",
+        "path": "@/components/background/PlainBackground",
+        "propsSchema": {
+          "className?": "string"
+        }
+      },
+      {
+        "import": "import GridBackround from '@/components/background/GridBackround';",
+        "name": "GridBackround",
+        "path": "@/components/background/GridBackround",
+        "propsSchema": {
+          "size?": "'small' | 'medium' | 'large' (default: 'medium')",
+          "perspectiveThreeD?": "boolean (default: false)",
+          "className?": "string"
+        }
+      },
+      {
+        "import": "import DotGridBackground from '@/components/background/DotGridBackground';",
+        "name": "DotGridBackground",
+        "path": "@/components/background/DotGridBackground",
+        "propsSchema": {
+          "size?": "'small' | 'medium' | 'large' (default: 'medium')",
+          "perspectiveThreeD?": "boolean (default: false)",
+          "className?": "string"
+        }
+      },
+      {
+        "import": "import CircleGradientBackground from '@/components/background/CircleGradientBackground';",
+        "name": "CircleGradientBackground",
+        "path": "@/components/background/CircleGradientBackground",
+        "propsSchema": {
+          "diagonal?": "'primary' | 'secondary' (default: 'primary')",
+          "className?": "string"
+        }
+      },
+      {
+        "import": "import AuroraBackground from '@/components/background/AuroraBackground';",
+        "name": "AuroraBackground",
+        "path": "@/components/background/AuroraBackground",
+        "propsSchema": {
+          "className?": "string"
+        }
+      },
+      {
+        "import": "import FloatingGradientBackground from '@/components/background/floatingGradientBackground/FloatingGradientBackground';",
+        "name": "FloatingGradientBackground",
+        "path": "@/components/background/floatingGradientBackground/FloatingGradientBackground",
+        "propsSchema": {
+          "className?": "string"
+        }
+      },
+      {
+        "import": "import AnimatedGridBackground from '@/components/background/AnimatedGridBackground';",
+        "name": "AnimatedGridBackground",
+        "path": "@/components/background/AnimatedGridBackground",
+        "propsSchema": {
+          "squareSize?": "number (default: 100)",
+          "numSquares?": "number (default: 50)",
+          "maxOpacity?": "number (default: 0.15)",
+          "className?": "string"
+        }
+      },
+      {
+        "import": "import AnimatedAuroraBackground from '@/components/background/AnimatedAuroraBackground';",
+        "name": "AnimatedAuroraBackground",
+        "path": "@/components/background/AnimatedAuroraBackground",
+        "propsSchema": {
+          "className?": "string",
+          "showRadialGradient?": "boolean (default: true)",
+          "invertColors": "boolean (REQUIRED - true for light backgrounds, false for dark backgrounds)"
+        }
+      },
+      {
+        "import": "import FluidBackground from '@/components/background/FluidBackground';",
+        "name": "FluidBackground",
+        "path": "@/components/background/FluidBackground",
+        "propsSchema": {
+          "className?": "string"
+        }
+      },
+      {
+        "import": "import RadialGradientBackground from '@/components/background/RadialGradientBackground';",
+        "name": "RadialGradientBackground",
+        "path": "@/components/background/RadialGradientBackground",
+        "propsSchema": {
+          "className?": "string",
+          "centerColor?": "string (default: 'var(--background)')",
+          "edgeColor?": "string (default: 'var(--color-background-accent)')",
+          "size?": "string (default: '130% 130%')",
+          "position?": "string (default: '50% 15%')"
+        }
+      },
+      {
+        "import": "import GradientBarsBackground from '@/components/background/GradientBarsBackground';",
+        "name": "GradientBarsBackground",
+        "path": "@/components/background/GradientBarsBackground",
+        "propsSchema": {
+          "className?": "string",
+          "numBarsPerSide?": "number (default: 8)",
+          "gradientFrom?": "string (default: 'var(--color-primary-cta)')",
+          "gradientTo?": "string (default: 'transparent')",
+          "opacity?": "number (default: 0.075)",
+          "sideWidth?": "string (default: '35%')"
+        }
+      },
+      {
+        "import": "import CanvasRevealEffect from '@/components/background/CanvasRevealEffect';",
+        "name": "CanvasRevealEffect",
+        "path": "@/components/background/CanvasRevealEffect",
+        "propsSchema": {
+          "animationSpeed?": "number (default: 0.4)",
+          "opacities?": "number[] (default: [0.3, 0.3, 0.3, 0.5, 0.5, 0.5, 0.8, 0.8, 0.8, 1])",
+          "colors?": "number[][] - RGB arrays (default: [[0, 255, 255]])",
+          "containerClassName?": "string",
+          "dotSize?": "number (default: 3)",
+          "showGradient?": "boolean (default: true)"
+        }
+      },
+      {
+        "import": "import CanvasRevealBackground from '@/components/background/CanvasRevealBackground';",
+        "name": "CanvasRevealBackground",
+        "path": "@/components/background/CanvasRevealBackground",
+        "propsSchema": {
+          "className?": "string",
+          "animationSpeed?": "number (default: 5)",
+          "dotSize?": "number (default: 3)",
+          "height?": "string (default: '30%')",
+          "position?": "'center' | 'left' | 'right' (default: 'center')"
+        }
+      },
+      {
+        "import": "import CellWaveBackground from '@/components/background/CellWaveBackground';",
+        "name": "CellWaveBackground",
+        "path": "@/components/background/CellWaveBackground",
+        "propsSchema": {
+          "className?": "string",
+          "columns?": "number (default: 5)",
+          "rows?": "number (default: 24)",
+          "cellColor?": "string (default: 'var(--color-background-accent)')",
+          "duration?": "number (default: 0.25)",
+          "delay?": "number (default: 1.25)"
+        }
+      },
+      {
+        "import": "import GlowingOrbBackground from '@/components/background/GlowingOrbBackground';",
+        "name": "GlowingOrbBackground",
+        "path": "@/components/background/GlowingOrbBackground",
+        "propsSchema": {
+          "className?": "string",
+          "blurAmount?": "string (default: '57px')",
+          "glowColor?": "string (default: 'var(--color-primary-cta)')",
+          "backgroundColor?": "string (default: 'var(--background)')"
+        }
+      },
+      {
+        "import": "import BlurBottomBackground from '@/components/background/BlurBottomBackground';",
+        "name": "BlurBottomBackground",
+        "path": "@/components/background/BlurBottomBackground",
+        "propsSchema": {
+          "className?": "string"
+        }
+      },
+      {
+        "import": "import RotatedRaysBackground from '@/components/background/RotatedRaysBackground';",
+        "name": "RotatedRaysBackground",
+        "path": "@/components/background/RotatedRaysBackground",
+        "propsSchema": {
+          "animated": "boolean - Required. When true, rays animate with pulsing opacity. When false, rays display static opacity.",
+          "showGrid": "boolean - Required. When true, displays a grid overlay fading from top center. When false, no grid is shown.",
+          "className?": "string",
+          "containerClassName?": "string"
+        }
+      },
+      {
+        "import": "import DownwardRaysBackground from '@/components/background/DownwardRaysBackground';",
+        "name": "DownwardRaysBackground",
+        "path": "@/components/background/DownwardRaysBackground",
+        "propsSchema": {
+          "animated": "boolean - Required. When true, rays animate with pulsing opacity. When false, rays display static opacity.",
+          "showGrid": "boolean - Required. When true, displays a grid overlay fading from top center. When false, no grid is shown.",
+          "className?": "string",
+          "containerClassName?": "string"
+        }
+      },
+      {
+        "import": "import RotatingGradientBackground from '@/components/background/RotatingGradientBackground';",
+        "name": "RotatingGradientBackground",
+        "path": "@/components/background/RotatingGradientBackground",
+        "propsSchema": {
+          "className?": "string",
+          "gradientColorStart?": "string - Gradient start color. Default: 'var(--color-background-accent)'",
+          "gradientColorEnd?": "string - Gradient end color. Default: 'var(--color-background-accent)'",
+          "bigCircleSize?": "string - Size of the larger circle. Default: '28vw'",
+          "smallCircleSize?": "string - Size of the smaller circle. Default: '21vw'",
+          "blurAmount?": "string - Blur amount for gradient circles. Default: '10px'",
+          "opacity?": "number - Overall opacity of gradient effect. Default: 0.6",
+          "showSparkles?": "boolean - Show sparkle ring effect. Default: true"
+        }
+      },
+      {
+        "import": "import { Sparkles } from '@/components/background/Sparkles';",
+        "name": "Sparkles",
+        "path": "@/components/background/Sparkles",
+        "propsSchema": {
+          "id?": "string",
+          "className?": "string",
+          "background?": "string - Default: 'transparent'",
+          "particleSize?": "number - Deprecated, use minSize/maxSize instead",
+          "minSize?": "number - Minimum particle size. Default: 0.5",
+          "maxSize?": "number - Maximum particle size. Default: 1",
+          "speed?": "number - Animation speed. Default: 4",
+          "particleColor?": "string - Particle color, supports CSS variables. Default: 'var(--color-primary-cta)'",
+          "particleDensity?": "number - Number of particles. Default: 100"
+        }
+      },
+      {
+        "import": "import SparklesGradientBackground from '@/components/background/SparklesGradientBackground';",
+        "name": "SparklesGradientBackground",
+        "path": "@/components/background/SparklesGradientBackground",
+        "propsSchema": {
+          "className?": "string",
+          "gradientColor?": "string - Main gradient color. Default: 'var(--color-background-accent)'",
+          "accentColor?": "string - Inner accent gradient color. Default: 'var(--color-background-accent)'",
+          "blurAmount?": "string - Blur amount for gradients. Default: '6vw'"
+        }
+      },
+      {
+        "import": "import HeroBackgrounds from '@/components/background/HeroBackgrounds';",
+        "name": "HeroBackgrounds",
+        "path": "@/components/background/HeroBackgrounds",
+        "propsSchema": {
+          "variant": "'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'glowing-orb' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'rotating-gradient' | 'sparkles-gradient'"
+        }
+      }
+    ]
+  },
+  "sectionRegistry": {
+    "hero": [
+      {
+        "import": "import HeroBillboard from '@/components/sections/hero/HeroBillboard';",
+        "name": "HeroBillboard",
+        "path": "@/components/sections/hero/HeroBillboard",
+        "propsSchema": {
+          "title": "string",
+          "description": "string",
+          "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "avatars?": "Array<{src: string, alt: string}>",
+          "avatarText?": "string",
+          "imageSrc?": "string (RECOMMENDED — always provide an image for best visual result)",
+          "videoSrc?": "string",
+          "imageAlt?": "string (default: '')",
+          "videoAriaLabel?": "string (default: 'Hero video')",
+          "mediaAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "marqueeItems?": "Array<{ type: \"image\", src: string, alt?: string } | { type: \"text\", text: string }>",
+          "marqueeSpeed?": "number (default: 30)",
+          "showMarqueeCard?": "boolean (default: true)",
+          "ariaLabel?": "string (default: 'Hero section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "textBoxClassName?": "string",
+          "titleClassName?": "string",
+          "descriptionClassName?": "string",
+          "tagClassName?": "string",
+          "avatarGroupClassName?": "string",
+          "buttonContainerClassName?": "string",
+          "buttonClassName?": "string",
+          "buttonTextClassName?": "string",
+          "mediaWrapperClassName?": "string",
+          "imageClassName?": "string",
+          "marqueeClassName?": "string",
+          "marqueeItemClassName?": "string",
+          "marqueeCardClassName?": "string",
+          "marqueeImageClassName?": "string",
+          "marqueeTextClassName?": "string",
+          "marqueeIconClassName?": "string"
+        }
+      },
+      {
+        "import": "import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';",
+        "name": "HeroBillboardCarousel",
+        "path": "@/components/sections/hero/HeroBillboardCarousel",
+        "propsSchema": {
+          "title": "string",
+          "description": "string",
+          "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "mediaItems": "Array<{ imageSrc?: string (recommended if no videoSrc), videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }> - Each item requires either imageSrc or videoSrc",
+          "ariaLabel?": "string (default: 'Hero section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "textBoxClassName?": "string",
+          "titleClassName?": "string",
+          "descriptionClassName?": "string",
+          "tagClassName?": "string",
+          "buttonContainerClassName?": "string",
+          "buttonClassName?": "string",
+          "buttonTextClassName?": "string",
+          "mediaWrapperClassName?": "string"
+        }
+      },
+      {
+        "import": "import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';",
+        "name": "HeroBillboardGallery",
+        "path": "@/components/sections/hero/HeroBillboardGallery",
+        "propsSchema": {
+          "title": "string",
+          "description": "string",
+          "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "mediaItems": "Array<{ imageSrc?: string (recommended if no videoSrc), videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }> (MINIMUM 3 ITEMS REQUIRED, max 5)",
+          "mediaAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "ariaLabel?": "string (default: 'Hero section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "textBoxClassName?": "string",
+          "titleClassName?": "string",
+          "descriptionClassName?": "string",
+          "tagClassName?": "string",
+          "buttonContainerClassName?": "string",
+          "buttonClassName?": "string",
+          "buttonTextClassName?": "string",
+          "mediaWrapperClassName?": "string",
+          "imageClassName?": "string"
+        }
+      },
+      {
+        "import": "import HeroSplit from '@/components/sections/hero/HeroSplit';",
+        "name": "HeroSplit",
+        "path": "@/components/sections/hero/HeroSplit",
+        "propsSchema": {
+          "title": "string",
+          "description": "string",
+          "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'glowing-orb' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "avatars?": "Avatar[] - Array of avatar objects with src and alt properties",
+          "avatarText?": "string - Text displayed next to the avatar group",
+          "imageSrc?": "string (RECOMMENDED — always provide an image for best visual result)",
+          "videoSrc?": "string",
+          "imageAlt?": "string (default: '')",
+          "videoAriaLabel?": "string (default: 'Hero video')",
+          "mediaAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "ariaLabel?": "string (default: 'Hero section')",
+          "imagePosition?": "'left' | 'right' (default: 'right')",
+          "fixedMediaHeight?": "boolean (default: true) - When true, media wrapper is aspect-square on mobile and md:h-[65vh] on desktop",
+          "className?": "string",
+          "containerClassName?": "string",
+          "textBoxClassName?": "string",
+          "titleClassName?": "string",
+          "descriptionClassName?": "string",
+          "tagClassName?": "string",
+          "buttonContainerClassName?": "string",
+          "buttonClassName?": "string",
+          "buttonTextClassName?": "string",
+          "mediaWrapperClassName?": "string",
+          "imageClassName?": "string",
+          "avatarGroupClassName?": "string",
+          "marqueeItems?": "Array<{ type: 'image', src: string, alt?: string } | { type: 'text', text: string } | { type: 'text-icon', text: string, icon: LucideIcon }> - Optional marquee at bottom of hero",
+          "marqueeSpeed?": "number (default: 30)",
+          "showMarqueeCard?": "boolean (default: true) - Card styling for text/text-icon items, images never have cards",
+          "marqueeClassName?": "string",
+          "marqueeItemClassName?": "string",
+          "marqueeCardClassName?": "string",
+          "marqueeImageClassName?": "string",
+          "marqueeTextClassName?": "string",
+          "marqueeIconClassName?": "string"
+        }
+      },
+      {
+        "import": "import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';",
+        "name": "HeroSplitTestimonial",
+        "path": "@/components/sections/hero/HeroSplitTestimonial",
+        "propsSchema": {
+          "title": "string",
+          "description": "string",
+          "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'glowing-orb' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }",
+          "testimonials": "Array<{ name: string, handle: string, testimonial: string, rating: number, imageSrc?: string, imageAlt?: string }>",
+          "testimonialRotationInterval?": "number (default: 5000)",
+          "useInvertedBackground?": "boolean (default: false)",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "avatars?": "Array<{ src: string, alt: string }>",
+          "avatarText?": "string",
+          "imageSrc?": "string (RECOMMENDED — always provide an image for best visual result)",
+          "videoSrc?": "string",
+          "imageAlt?": "string (default: '')",
+          "videoAriaLabel?": "string (default: 'Hero video')",
+          "mediaAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "ariaLabel?": "string (default: 'Hero section')",
+          "imagePosition?": "'left' | 'right' (default: 'right')",
+          "fixedMediaHeight?": "boolean (default: true)",
+          "className?": "string",
+          "containerClassName?": "string",
+          "textBoxClassName?": "string",
+          "titleClassName?": "string",
+          "descriptionClassName?": "string",
+          "tagClassName?": "string",
+          "buttonContainerClassName?": "string",
+          "buttonClassName?": "string",
+          "buttonTextClassName?": "string",
+          "mediaWrapperClassName?": "string",
+          "imageClassName?": "string",
+          "avatarGroupClassName?": "string",
+          "testimonialCardClassName?": "string",
+          "testimonialContentClassName?": "string",
+          "testimonialTextClassName?": "string",
+          "testimonialRatingClassName?": "string",
+          "testimonialAuthorClassName?": "string",
+          "testimonialAuthorImageClassName?": "string",
+          "testimonialAuthorNameClassName?": "string",
+          "testimonialAuthorHandleClassName?": "string",
+          "marqueeItems?": "Array<{ type: 'image', src: string, alt?: string } | { type: 'text', text: string } | { type: 'text-icon', text: string, icon: LucideIcon }>",
+          "marqueeSpeed?": "number (default: 30)",
+          "showMarqueeCard?": "boolean (default: true)",
+          "marqueeClassName?": "string",
+          "marqueeItemClassName?": "string",
+          "marqueeCardClassName?": "string",
+          "marqueeImageClassName?": "string",
+          "marqueeTextClassName?": "string",
+          "marqueeIconClassName?": "string"
+        }
+      },
+      {
+        "import": "import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';",
+        "name": "HeroBillboardTestimonial",
+        "path": "@/components/sections/hero/HeroBillboardTestimonial",
+        "propsSchema": {
+          "title": "string",
+          "description": "string",
+          "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'glowing-orb' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }",
+          "testimonials": "Array<{ name: string, handle: string, testimonial: string, rating: number, imageSrc?: string, imageAlt?: string }>",
+          "testimonialRotationInterval?": "number (default: 5000)",
+          "useInvertedBackground?": "boolean (default: false)",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "avatars?": "Array<{ src: string, alt: string }>",
+          "avatarText?": "string",
+          "imageSrc?": "string (RECOMMENDED — always provide an image for best visual result)",
+          "videoSrc?": "string",
+          "imageAlt?": "string (default: '')",
+          "videoAriaLabel?": "string (default: 'Hero video')",
+          "mediaAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal' (default: 'none')",
+          "ariaLabel?": "string (default: 'Hero section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "textBoxClassName?": "string",
+          "titleClassName?": "string",
+          "descriptionClassName?": "string",
+          "tagClassName?": "string",
+          "avatarGroupClassName?": "string",
+          "buttonContainerClassName?": "string",
+          "buttonClassName?": "string",
+          "buttonTextClassName?": "string",
+          "mediaWrapperClassName?": "string",
+          "imageClassName?": "string",
+          "testimonialCardClassName?": "string",
+          "testimonialContentClassName?": "string",
+          "testimonialTextClassName?": "string",
+          "testimonialRatingClassName?": "string",
+          "testimonialAuthorClassName?": "string",
+          "testimonialAuthorImageClassName?": "string",
+          "testimonialAuthorNameClassName?": "string",
+          "testimonialAuthorHandleClassName?": "string",
+          "marqueeItems?": "Array<{ type: 'image', src: string, alt?: string } | { type: 'text', text: string } | { type: 'text-icon', text: string, icon: LucideIcon }>",
+          "marqueeSpeed?": "number (default: 30)",
+          "showMarqueeCard?": "boolean (default: true)",
+          "marqueeClassName?": "string",
+          "marqueeItemClassName?": "string",
+          "marqueeCardClassName?": "string",
+          "marqueeImageClassName?": "string",
+          "marqueeTextClassName?": "string",
+          "marqueeIconClassName?": "string"
+        }
+      },
+      {
+        "import": "import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';",
+        "name": "HeroSplitKpi",
+        "path": "@/components/sections/hero/HeroSplitKpi",
+        "propsSchema": {
+          "title": "string",
+          "description": "string",
+          "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'glowing-orb' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }",
+          "kpis": "[{ value: string, label: string }, { value: string, label: string }, { value: string, label: string }] - Array of exactly 3 KPI items with value and label",
+          "enableKpiAnimation": "boolean - Enable/disable mouse-following animation on KPI boxes",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "avatars?": "Avatar[] - Array of avatar objects with src and alt properties",
+          "avatarText?": "string - Text displayed next to the avatar group",
+          "imageSrc?": "string (RECOMMENDED — always provide an image for best visual result)",
+          "videoSrc?": "string",
+          "imageAlt?": "string (default: '')",
+          "videoAriaLabel?": "string (default: 'Hero video')",
+          "mediaAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "ariaLabel?": "string (default: 'Hero section')",
+          "imagePosition?": "'left' | 'right' (default: 'right')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "textBoxClassName?": "string",
+          "titleClassName?": "string",
+          "descriptionClassName?": "string",
+          "tagClassName?": "string",
+          "buttonContainerClassName?": "string",
+          "buttonClassName?": "string",
+          "buttonTextClassName?": "string",
+          "mediaWrapperClassName?": "string",
+          "imageClassName?": "string",
+          "avatarGroupClassName?": "string",
+          "kpiClassName?": "string",
+          "kpiValueClassName?": "string",
+          "kpiLabelClassName?": "string",
+          "marqueeItems?": "Array<{ type: 'image', src: string, alt?: string } | { type: 'text', text: string } | { type: 'text-icon', text: string, icon: LucideIcon }> - Optional marquee at bottom of hero",
+          "marqueeSpeed?": "number (default: 30)",
+          "showMarqueeCard?": "boolean (default: true) - Card styling for text/text-icon items, images never have cards",
+          "marqueeClassName?": "string",
+          "marqueeItemClassName?": "string",
+          "marqueeCardClassName?": "string",
+          "marqueeImageClassName?": "string",
+          "marqueeTextClassName?": "string",
+          "marqueeIconClassName?": "string"
+        }
+      },
+      {
+        "import": "import HeroOverlay from '@/components/sections/hero/HeroOverlay';",
+        "name": "HeroOverlay",
+        "path": "@/components/sections/hero/HeroOverlay",
+        "propsSchema": {
+          "title": "string",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "avatars?": "Array<{ src: string, alt: string }>",
+          "avatarText?": "string",
+          "imageSrc?": "string (RECOMMENDED — always provide an image for best visual result)",
+          "videoSrc?": "string",
+          "imageAlt?": "string (default: '')",
+          "videoAriaLabel?": "string (default: 'Hero video')",
+          "showDimOverlay?": "boolean (default: false)",
+          "showBlur?": "boolean (default: true)",
+          "textPosition?": "'top' | 'bottom' (default: 'bottom')",
+          "ariaLabel?": "string (default: 'Hero section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "textBoxClassName?": "string",
+          "titleClassName?": "string",
+          "descriptionClassName?": "string",
+          "tagClassName?": "string",
+          "buttonContainerClassName?": "string",
+          "buttonClassName?": "string",
+          "buttonTextClassName?": "string",
+          "avatarGroupClassName?": "string",
+          "mediaWrapperClassName?": "string",
+          "imageClassName?": "string",
+          "blurClassName?": "string",
+          "dimOverlayClassName?": "string"
+        }
+      },
+      {
+        "import": "import HeroOverlayTestimonial from '@/components/sections/hero/HeroOverlayTestimonial';",
+        "name": "HeroOverlayTestimonial",
+        "path": "@/components/sections/hero/HeroOverlayTestimonial",
+        "propsSchema": {
+          "title": "string",
+          "description": "string",
+          "testimonials": "Array<{ name: string, handle: string, testimonial: string, rating: number, imageSrc?: string, imageAlt?: string }>",
+          "testimonialRotationInterval?": "number (default: 5000)",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "avatars?": "Array<{ src: string, alt: string }>",
+          "avatarText?": "string",
+          "imageSrc?": "string (RECOMMENDED — always provide an image for best visual result)",
+          "videoSrc?": "string",
+          "imageAlt?": "string (default: '')",
+          "videoAriaLabel?": "string (default: 'Hero video')",
+          "showDimOverlay?": "boolean (default: false)",
+          "showBlur?": "boolean (default: true)",
+          "textPosition?": "'top' | 'bottom' (default: 'bottom')",
+          "ariaLabel?": "string (default: 'Hero section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "textBoxClassName?": "string",
+          "titleClassName?": "string",
+          "descriptionClassName?": "string",
+          "tagClassName?": "string",
+          "buttonContainerClassName?": "string",
+          "buttonClassName?": "string",
+          "buttonTextClassName?": "string",
+          "avatarGroupClassName?": "string",
+          "mediaWrapperClassName?": "string",
+          "imageClassName?": "string",
+          "blurClassName?": "string",
+          "dimOverlayClassName?": "string",
+          "testimonialCardClassName?": "string",
+          "testimonialContentClassName?": "string",
+          "testimonialTextClassName?": "string",
+          "testimonialRatingClassName?": "string",
+          "testimonialAuthorClassName?": "string",
+          "testimonialAuthorImageClassName?": "string",
+          "testimonialAuthorNameClassName?": "string",
+          "testimonialAuthorHandleClassName?": "string"
+        }
+      },
+      {
+        "import": "import HeroLogo from '@/components/sections/hero/HeroLogo';",
+        "name": "HeroLogo",
+        "path": "@/components/sections/hero/HeroLogo",
+        "propsSchema": {
+          "logoText": "string",
+          "description": "string",
+          "buttons": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "imageSrc?": "string (RECOMMENDED — always provide an image for best visual result)",
+          "videoSrc?": "string",
+          "imageAlt?": "string (default: '')",
+          "videoAriaLabel?": "string (default: 'Hero video')",
+          "showDimOverlay?": "boolean (default: false)",
+          "ariaLabel?": "string (default: 'Hero section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "contentContainerClassName?": "string",
+          "descriptionClassName?": "string",
+          "buttonContainerClassName?": "string",
+          "buttonClassName?": "string",
+          "buttonTextClassName?": "string",
+          "logoContainerClassName?": "string",
+          "logoClassName?": "string",
+          "mediaWrapperClassName?": "string",
+          "imageClassName?": "string",
+          "blurClassName?": "string",
+          "dimOverlayClassName?": "string"
+        }
+      },
+      {
+        "import": "import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';",
+        "name": "HeroLogoBillboard",
+        "path": "@/components/sections/hero/HeroLogoBillboard",
+        "propsSchema": {
+          "logoText": "string",
+          "description": "string",
+          "buttons": "Array<{ text: string, onClick?: () => void, href?: string }> - Primary and secondary buttons (required, max 2)",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'glowing-orb' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }",
+          "imageSrc?": "string (RECOMMENDED — always provide an image for best visual result)",
+          "videoSrc?": "string",
+          "imageAlt?": "string (default: '')",
+          "videoAriaLabel?": "string (default: 'Hero video')",
+          "mediaAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "frameStyle?": "'card' | 'browser' (default: 'card')",
+          "ariaLabel?": "string (default: 'Hero section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "logoContainerClassName?": "string",
+          "logoClassName?": "string",
+          "descriptionClassName?": "string",
+          "buttonContainerClassName?": "string",
+          "buttonClassName?": "string",
+          "buttonTextClassName?": "string",
+          "mediaWrapperClassName?": "string",
+          "imageClassName?": "string",
+          "browserBarClassName?": "string",
+          "addressBarClassName?": "string"
+        }
+      },
+      {
+        "import": "import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';",
+        "name": "HeroBillboardScroll",
+        "path": "@/components/sections/hero/HeroBillboardScroll",
+        "propsSchema": {
+          "title": "string",
+          "description": "string",
+          "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "imageSrc?": "string (RECOMMENDED — always provide an image for best visual result)",
+          "videoSrc?": "string",
+          "imageAlt?": "string (default: '')",
+          "videoAriaLabel?": "string (default: 'Hero video')",
+          "ariaLabel?": "string (default: 'Hero section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "textBoxClassName?": "string",
+          "titleClassName?": "string",
+          "descriptionClassName?": "string",
+          "tagClassName?": "string",
+          "buttonContainerClassName?": "string",
+          "buttonClassName?": "string",
+          "buttonTextClassName?": "string",
+          "cardWrapperClassName?": "string",
+          "cardInnerClassName?": "string",
+          "imageClassName?": "string"
+        }
+      },
+      {
+        "import": "import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';",
+        "name": "HeroBillboardRotatedCarousel",
+        "path": "@/components/sections/hero/HeroBillboardRotatedCarousel",
+        "propsSchema": {
+          "title": "string",
+          "description": "string",
+          "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "carouselItems": "Array<{ id: string, imageSrc?: string (recommended if no videoSrc), videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }> - Carousel items (minimum 6 items)",
+          "autoPlay?": "boolean (default: true)",
+          "autoPlayInterval?": "number (default: 4000)",
+          "ariaLabel?": "string (default: 'Hero section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "textBoxClassName?": "string",
+          "titleClassName?": "string",
+          "descriptionClassName?": "string",
+          "tagClassName?": "string",
+          "buttonContainerClassName?": "string",
+          "buttonClassName?": "string",
+          "buttonTextClassName?": "string",
+          "carouselClassName?": "string"
+        }
+      },
+      {
+        "import": "import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';",
+        "name": "HeroCarouselLogo",
+        "path": "@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo",
+        "propsSchema": {
+          "logoText": "string",
+          "description": "string",
+          "buttons": "Array<{text: string, onClick?: () => void, href?: string}> (required)",
+          "slides": "Array<{ imageSrc?: string (recommended if no videoSrc), videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }> - Carousel slide items",
+          "autoplayDelay?": "number (default: 3000)",
+          "showDimOverlay?": "boolean (default: false)",
+          "ariaLabel?": "string (default: 'Hero section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "contentContainerClassName?": "string",
+          "descriptionClassName?": "string",
+          "buttonContainerClassName?": "string",
+          "buttonClassName?": "string",
+          "buttonTextClassName?": "string",
+          "logoContainerClassName?": "string",
+          "logoClassName?": "string",
+          "mediaWrapperClassName?": "string",
+          "imageClassName?": "string",
+          "blurClassName?": "string",
+          "dimOverlayClassName?": "string",
+          "progressBarClassName?": "string"
+        }
+      },
+      {
+        "import": "import HeroCentered from '@/components/sections/hero/HeroCentered';",
+        "name": "HeroCentered",
+        "path": "@/components/sections/hero/HeroCentered",
+        "propsSchema": {
+          "title": "string",
+          "description": "string",
+          "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }",
+          "avatars": "Array<{ src: string, alt: string }> (required)",
+          "avatarText?": "string",
+          "buttons?": "Array<{ text: string, onClick?: () => void, href?: string }>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "ariaLabel?": "string (default: 'Hero section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "textBoxClassName?": "string",
+          "titleClassName?": "string",
+          "descriptionClassName?": "string",
+          "avatarGroupClassName?": "string",
+          "buttonContainerClassName?": "string",
+          "buttonClassName?": "string",
+          "buttonTextClassName?": "string",
+          "marqueeItems?": "Array<{ type: 'image', src: string, alt?: string } | { type: 'text', text: string } | { type: 'text-icon', text: string, icon: LucideIcon }> - Optional marquee at bottom of hero",
+          "marqueeSpeed?": "number (default: 30)",
+          "showMarqueeCard?": "boolean (default: true) - Card styling for text/text-icon items, images never have cards",
+          "marqueeClassName?": "string",
+          "marqueeItemClassName?": "string",
+          "marqueeCardClassName?": "string",
+          "marqueeImageClassName?": "string",
+          "marqueeTextClassName?": "string",
+          "marqueeIconClassName?": "string"
+        }
+      },
+      {
+        "import": "import HeroSignup from '@/components/sections/hero/HeroSignup';",
+        "name": "HeroSignup",
+        "path": "@/components/sections/hero/HeroSignup",
+        "propsSchema": {
+          "title": "string (required)",
+          "description": "string (required)",
+          "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'glowing-orb' | 'glowing-orb-sparkles' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }",
+          "tag": "string (required)",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "inputPlaceholder?": "string (default: 'Enter your email')",
+          "buttonText?": "string (default: 'Get Started')",
+          "onSubmit?": "(email: string) => void",
+          "ariaLabel?": "string (default: 'Hero section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "textBoxClassName?": "string",
+          "titleClassName?": "string",
+          "descriptionClassName?": "string",
+          "tagClassName?": "string",
+          "formWrapperClassName?": "string",
+          "formClassName?": "string",
+          "inputClassName?": "string",
+          "buttonClassName?": "string",
+          "buttonTextClassName?": "string"
+        }
+      },
+      {
+        "import": "import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';",
+        "name": "HeroSplitDualMedia",
+        "path": "@/components/sections/hero/HeroSplitDualMedia",
+        "propsSchema": {
+          "title": "string (required)",
+          "description": "string (required)",
+          "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'glowing-orb' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }",
+          "tag": "string (required)",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "mediaItems": "[{ imageSrc?: string (recommended if no videoSrc), videoSrc?: string, imageAlt?: string }, { imageSrc?: string (recommended if no videoSrc), videoSrc?: string, imageAlt?: string }] - Array of exactly 2 media items with imageSrc/videoSrc",
+          "mediaAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "rating": "number (required) - Number of stars to display",
+          "ratingText": "string (required) - Text displayed next to rating stars",
+          "ariaLabel?": "string (default: 'Hero section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "textBoxClassName?": "string",
+          "titleClassName?": "string",
+          "descriptionClassName?": "string",
+          "tagClassName?": "string",
+          "buttonContainerClassName?": "string",
+          "buttonClassName?": "string",
+          "buttonTextClassName?": "string",
+          "mediaWrapperClassName?": "string",
+          "mediaItemClassName?": "string",
+          "imageClassName?": "string",
+          "ratingClassName?": "string",
+          "ratingTextClassName?": "string"
+        }
+      },
+      {
+        "import": "import HeroBillboardDashboard from '@/components/sections/hero/HeroBillboardDashboard';",
+        "name": "HeroBillboardDashboard",
+        "path": "@/components/sections/hero/HeroBillboardDashboard",
+        "propsSchema": {
+          "title": "string",
+          "description": "string",
+          "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' } (default: { variant: 'plain' })",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal' (default: 'opacity')",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal' (default: 'slide-up')",
+          "dashboard": "{ title: string, stats: [{ title: string, titleMobile?: string, values: [number, number, number], valuePrefix?: string, valueSuffix?: string, valueFormat?: Intl.NumberFormatOptions, description: string }, { ... }, { ... }], logoIcon: LucideIcon, sidebarItems: Array<{ icon: LucideIcon, active?: boolean }>, searchPlaceholder?: string (default: 'Search'), buttons: Array<{ text: string, onClick?: () => void, href?: string }>, chartTitle?: string (default: 'Revenue Overview'), chartData?: Array<{ value: number }>, listItems: Array<{ icon: LucideIcon, title: string, status: string }>, listTitle?: string (default: 'Recent Transfers'), imageSrc: string(recommended if no videoSrc), videoSrc?: string, imageAlt?: string (default: ''), videoAriaLabel?: string (default: 'Avatar video'), className?: string, containerClassName?: string, sidebarClassName?: string, statClassName?: string, chartClassName?: string, listClassName?: string } (required)",
+          "ariaLabel?": "string (default: 'Hero section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "textBoxClassName?": "string",
+          "titleClassName?": "string",
+          "descriptionClassName?": "string",
+          "tagClassName?": "string",
+          "buttonContainerClassName?": "string",
+          "buttonClassName?": "string",
+          "buttonTextClassName?": "string",
+          "dashboardClassName?": "string"
+        }
+      },
+      {
+        "import": "import HeroPersonalLinks from '@/components/sections/hero/HeroPersonalLinks';",
+        "name": "HeroPersonalLinks",
+        "path": "@/components/sections/hero/HeroPersonalLinks",
+        "propsSchema": {
+          "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }",
+          "title": "string",
+          "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+          "socialLinks?": "Array<{ icon: LucideIcon, label: string, href: string }> - Social media links",
+          "linkCards": "Array<{ icon?: LucideIcon, imageSrc?: string (recommended if no videoSrc), videoSrc?: string, imageAlt?: string, videoAriaLabel?: string, title: string, description: string, button: ButtonConfig }> (required)",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "ariaLabel?": "string (default: 'Personal links section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "textboxClassName?": "string",
+          "titleClassName?": "string",
+          "titleImageWrapperClassName?": "string",
+          "titleImageClassName?": "string",
+          "socialLinksClassName?": "string",
+          "socialLinkClassName?": "string",
+          "linkCardsClassName?": "string",
+          "linkCardClassName?": "string",
+          "linkCardIconClassName?": "string",
+          "linkCardTitleClassName?": "string",
+          "linkCardDescriptionClassName?": "string",
+          "buttonClassName?": "string",
+          "buttonTextClassName?": "string"
+        }
+      },
+      {
+        "import": "import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';",
+        "name": "HeroSplitDoubleCarousel",
+        "path": "@/components/sections/hero/HeroSplitDoubleCarousel",
+        "propsSchema": {
+          "title": "string",
+          "description": "string",
+          "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'glowing-orb' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }",
+          "leftCarouselItems": "Array<{ imageSrc?: string (recommended if no videoSrc); videoSrc?: string; imageAlt?: string; videoAriaLabel?: string }>",
+          "rightCarouselItems": "Array<{ imageSrc?: string (recommended if no videoSrc); videoSrc?: string; imageAlt?: string; videoAriaLabel?: string }>",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "avatars?": "Avatar[] - Array of avatar objects with src and alt properties",
+          "avatarText?": "string - Text displayed next to the avatar group",
+          "carouselPosition?": "'left' | 'right' (default: 'right')",
+          "ariaLabel?": "string (default: 'Hero section')",
+          "marqueeItems?": "{ type: \"image\", src: string, alt?: string } | { type: \"text\", text: string }[] - Optional logo marquee items for bottom of section",
+          "marqueeSpeed?": "number (default: 30)",
+          "showMarqueeCard?": "boolean (default: true)",
+          "className?": "string",
+          "containerClassName?": "string",
+          "textBoxClassName?": "string",
+          "titleClassName?": "string",
+          "descriptionClassName?": "string",
+          "tagClassName?": "string",
+          "buttonContainerClassName?": "string",
+          "buttonClassName?": "string",
+          "buttonTextClassName?": "string",
+          "carouselWrapperClassName?": "string",
+          "carouselColumnClassName?": "string",
+          "carouselItemClassName?": "string",
+          "carouselImageClassName?": "string",
+          "avatarGroupClassName?": "string",
+          "marqueeClassName?": "string",
+          "marqueeItemClassName?": "string",
+          "marqueeCardClassName?": "string",
+          "marqueeImageClassName?": "string",
+          "marqueeTextClassName?": "string",
+          "marqueeIconClassName?": "string"
+        }
+      }
+    ],
+    "about": [
+      {
+        "import": "import SplitAbout from '@/components/sections/about/SplitAbout';",
+        "name": "SplitAbout",
+        "path": "@/components/sections/about/SplitAbout",
+        "propsSchema": {
+          "title": "string",
+          "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "bulletPoints": "Array<{ title: string, description: string, icon?: LucideIcon }>",
+          "imageSrc?": "string (RECOMMENDED — always provide an image for best visual result)",
+          "videoSrc?": "string",
+          "imageAlt?": "string (default: '')",
+          "videoAriaLabel?": "string (default: 'About section video')",
+          "mediaBadge?": "{ text: string, avatarSrc?: string, avatarAlt?: string, className?: string }",
+          "mediaAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "ariaLabel?": "string (default: 'About section')",
+          "imagePosition?": "'left' | 'right' (default: 'right')",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground": "boolean",
+          "className?": "string",
+          "containerClassName?": "string",
+          "textBoxClassName?": "string",
+          "titleClassName?": "string",
+          "titleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+          "titleImageClassName?": "string - For styling images in inline-image layout",
+          "descriptionClassName?": "string",
+          "tagClassName?": "string",
+          "buttonContainerClassName?": "string",
+          "buttonClassName?": "string",
+          "buttonTextClassName?": "string",
+          "contentClassName?": "string",
+          "bulletPointClassName?": "string",
+          "bulletTitleClassName?": "string",
+          "bulletDescriptionClassName?": "string",
+          "mediaWrapperClassName?": "string",
+          "imageClassName?": "string"
+        }
+      },
+      {
+        "import": "import TextSplitAbout from '@/components/sections/about/TextSplitAbout';",
+        "name": "TextSplitAbout",
+        "path": "@/components/sections/about/TextSplitAbout",
+        "propsSchema": {
+          "title": "string",
+          "description": "string[]",
+          "buttons?": "Array<{ text: string, onClick?: () => void, href?: string, props?: Partial<ButtonPropsForVariant<CTAButtonVariant>> }>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "showBorder?": "boolean (default: false)",
+          "useInvertedBackground": "boolean",
+          "ariaLabel?": "string (default: 'About section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "titleClassName?": "string",
+          "descriptionClassName?": "string",
+          "buttonContainerClassName?": "string",
+          "buttonClassName?": "string",
+          "buttonTextClassName?": "string"
+        }
+      },
+      {
+        "import": "import TextAbout from '@/components/sections/about/TextAbout';",
+        "name": "TextAbout",
+        "path": "@/components/sections/about/TextAbout",
+        "propsSchema": {
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "title": "string (required, max 150 chars)",
+          "buttons?": "Array<{ text: string, onClick?: () => void, href?: string, props?: Partial<ButtonPropsForVariant<CTAButtonVariant>> }>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "useInvertedBackground": "boolean",
+          "ariaLabel?": "string (default: 'About section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "titleClassName?": "string",
+          "buttonContainerClassName?": "string",
+          "buttonClassName?": "string",
+          "buttonTextClassName?": "string"
+        }
+      },
+      {
+        "import": "import MediaAbout from '@/components/sections/about/MediaAbout';",
+        "name": "MediaAbout",
+        "path": "@/components/sections/about/MediaAbout",
+        "propsSchema": {
+          "title": "string",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "imageSrc?": "string (RECOMMENDED — always provide an image for best visual result)",
+          "videoSrc?": "string",
+          "imageAlt?": "string",
+          "videoAriaLabel?": "string",
+          "useInvertedBackground": "boolean",
+          "ariaLabel?": "string (default: 'About section')",
+          "className?": "string",
+          "textBoxClassName?": "string",
+          "titleClassName?": "string",
+          "descriptionClassName?": "string",
+          "tagClassName?": "string",
+          "buttonContainerClassName?": "string",
+          "buttonClassName?": "string",
+          "buttonTextClassName?": "string",
+          "mediaWrapperClassName?": "string",
+          "mediaClassName?": "string"
+        }
+      },
+      {
+        "import": "import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';",
+        "name": "TestimonialAboutCard",
+        "path": "@/components/sections/about/TestimonialAboutCard",
+        "propsSchema": {
+          "tag": "string (required)",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "title": "string (required)",
+          "description": "string (required)",
+          "subdescription": "string (required)",
+          "icon": "LucideIcon (required - displayed in the icon box)",
+          "imageSrc": "string (required if no videoSrc)",
+          "imageAlt?": "string (default: '')",
+          "videoSrc": "string (required if no imageSrc)",
+          "videoAriaLabel?": "string (default: 'Testimonial video')",
+          "mediaAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "useInvertedBackground": "boolean",
+          "ariaLabel?": "string (default: 'Testimonial section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "cardClassName?": "string",
+          "contentClassName?": "string",
+          "tagClassName?": "string",
+          "titleClassName?": "string",
+          "descriptionClassName?": "string",
+          "subdescriptionClassName?": "string",
+          "footerClassName?": "string",
+          "iconBoxClassName?": "string",
+          "iconClassName?": "string",
+          "mediaWrapperClassName?": "string",
+          "mediaClassName?": "string"
+        }
+      },
+      {
+        "import": "import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';",
+        "name": "InlineImageSplitTextAbout",
+        "path": "@/components/sections/about/InlineImageSplitTextAbout",
+        "propsSchema": {
+          "heading": "Array<{ type: 'text'; content: string } | { type: 'image'; src: string; alt?: string }>",
+          "buttons?": "Array<{ text: string, onClick?: () => void, href?: string, props?: Partial<ButtonPropsForVariant<CTAButtonVariant>> }>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "useInvertedBackground": "boolean",
+          "ariaLabel?": "string (default: 'About section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "headingClassName?": "string",
+          "imageWrapperClassName?": "string",
+          "imageClassName?": "string",
+          "buttonContainerClassName?": "string",
+          "buttonClassName?": "string",
+          "buttonTextClassName?": "string"
+        }
+      },
+      {
+        "import": "import AboutMetric from '@/components/sections/about/AboutMetric';",
+        "name": "AboutMetric",
+        "path": "@/components/sections/about/AboutMetric",
+        "propsSchema": {
+          "title": "string",
+          "metrics": "Array<{ icon: LucideIcon, label: string, value: string }>",
+          "metricsAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "useInvertedBackground": "boolean",
+          "ariaLabel?": "string (default: 'About metrics section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "titleClassName?": "string",
+          "metricsContainerClassName?": "string",
+          "metricCardClassName?": "string",
+          "metricIconClassName?": "string",
+          "metricLabelClassName?": "string",
+          "metricValueClassName?": "string"
+        }
+      },
+      {
+        "import": "import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';",
+        "name": "MetricSplitMediaAbout",
+        "path": "@/components/sections/about/MetricSplitMediaAbout",
+        "propsSchema": {
+          "title": "string",
+          "description": "string",
+          "metrics": "Array<{ value: string, title: string }>",
+          "useInvertedBackground": "boolean",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "imageSrc?": "string (RECOMMENDED — always provide an image for best visual result)",
+          "videoSrc?": "string",
+          "imageAlt?": "string",
+          "videoAriaLabel?": "string (default: 'About section video')",
+          "mediaBadge?": "{ text: string, avatarSrc?: string, avatarAlt?: string, className?: string }",
+          "mediaAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "metricsAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "ariaLabel?": "string (default: 'About section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "gridClassName?": "string",
+          "leftColumnClassName?": "string",
+          "rightColumnClassName?": "string",
+          "textBoxClassName?": "string",
+          "titleClassName?": "string",
+          "descriptionClassName?": "string",
+          "tagClassName?": "string",
+          "metricsContainerClassName?": "string",
+          "metricCardClassName?": "string",
+          "metricValueClassName?": "string",
+          "metricTitleClassName?": "string",
+          "mediaWrapperClassName?": "string",
+          "imageClassName?": "string"
+        }
+      }
+    ],
+    "feature": [
+      {
+        "import": "import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';",
+        "name": "FeatureCardOne",
+        "path": "@/components/sections/feature/FeatureCardOne",
+        "propsSchema": {
+          "features": "Array<{ title: string, description: string, button?: {text: string, onClick?: () => void, href?: string} } & ({ imageSrc?: string (recommended if no videoSrc), imageAlt?: string } | { videoSrc: string, videoAriaLabel?: string })>",
+          "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+          "gridVariant": "'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right' | 'two-items-per-row'",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d' (required)",
+          "uniformGridCustomHeightClasses?": "string",
+          "title": "string",
+          "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "ariaLabel?": "string (default: 'Feature section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "cardClassName?": "string",
+          "mediaClassName?": "string",
+          "textBoxTitleClassName?": "string",
+          "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+          "textBoxTitleImageClassName?": "string - For styling images in inline-image layout",
+          "textBoxDescriptionClassName?": "string",
+          "cardTitleClassName?": "string",
+          "cardDescriptionClassName?": "string",
+          "cardButtonClassName?": "string",
+          "cardButtonTextClassName?": "string",
+          "gridClassName?": "string",
+          "carouselClassName?": "string",
+          "controlsClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string",
+          "useInvertedBackground": "boolean"
+        }
+      },
+      {
+        "import": "import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';",
+        "name": "FeatureCardThree",
+        "path": "@/components/sections/feature/featureCardThree/FeatureCardThree",
+        "propsSchema": {
+          "features": "Array<{ title: string, description: string, imageSrc: string, imageAlt?: string }>",
+          "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+          "gridVariant": "'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right' (required)",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect) (required)",
+          "uniformGridCustomHeightClasses?": "string",
+          "title": "string",
+          "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground": "boolean",
+          "ariaLabel?": "string (default: 'Feature section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "cardClassName?": "string",
+          "textBoxTitleClassName?": "string",
+          "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+          "textBoxTitleImageClassName?": "string - For styling images in inline-image layout",
+          "textBoxDescriptionClassName?": "string",
+          "cardTitleClassName?": "string",
+          "cardDescriptionClassName?": "string",
+          "gridClassName?": "string",
+          "carouselClassName?": "string",
+          "controlsClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string",
+          "itemContentClassName?": "string"
+        }
+      },
+      {
+        "import": "import FeatureCardTwentyNine from '@/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine';",
+        "name": "FeatureCardTwentyNine",
+        "path": "@/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine",
+        "propsSchema": {
+          "features": "Array<{ title: string, description: string, imageSrc: string, imageAlt?: string, titleImageSrc: string, buttonText: string, buttonHref?: string }>",
+          "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+          "gridVariant": "'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right' (required)",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
+          "uniformGridCustomHeightClasses?": "string",
+          "title": "string",
+          "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground": "boolean",
+          "ariaLabel?": "string (default: 'Feature section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "cardClassName?": "string",
+          "textBoxTitleClassName?": "string",
+          "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+          "textBoxTitleImageClassName?": "string - For styling images in inline-image layout",
+          "textBoxDescriptionClassName?": "string",
+          "cardTitleClassName?": "string",
+          "cardDescriptionClassName?": "string",
+          "gridClassName?": "string",
+          "carouselClassName?": "string",
+          "controlsClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string",
+          "itemContentClassName?": "string"
+        }
+      },
+      {
+        "import": "import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';",
+        "name": "FeatureCardSix",
+        "path": "@/components/sections/feature/FeatureCardSix",
+        "propsSchema": {
+          "features": "Array<{ title: string, description: string, buttons?: ButtonConfig[] } & ({ imageSrc?: string (recommended if no videoSrc), imageAlt?: string } | { videoSrc: string, videoAriaLabel?: string })>",
+          "title": "string",
+          "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground": "boolean",
+          "ariaLabel?": "string (default: 'Feature section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "textBoxTitleClassName?": "string",
+          "titleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+          "titleImageClassName?": "string - For styling images in inline-image layout",
+          "textBoxDescriptionClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string",
+          "cardContentClassName?": "string",
+          "stepNumberClassName?": "string",
+          "cardTitleClassName?": "string",
+          "cardDescriptionClassName?": "string",
+          "imageContainerClassName?": "string",
+          "imageClassName?": "string",
+          "cardButtonClassName?": "string",
+          "cardButtonTextClassName?": "string"
+        }
+      },
+      {
+        "import": "import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';",
+        "name": "FeatureCardSeven",
+        "path": "@/components/sections/feature/FeatureCardSeven",
+        "propsSchema": {
+          "features": "Array<{ title: string, description: string, buttons?: ButtonConfig[] } & ({ imageSrc?: string (recommended if no videoSrc), imageAlt?: string } | { videoSrc: string, videoAriaLabel?: string })>",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect) (required)",
+          "title": "string",
+          "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground": "boolean",
+          "ariaLabel?": "string (default: 'Feature section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "cardClassName?": "string",
+          "textBoxTitleClassName?": "string",
+          "titleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+          "titleImageClassName?": "string - For styling images in inline-image layout",
+          "textBoxDescriptionClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string",
+          "cardContentClassName?": "string",
+          "stepNumberClassName?": "string",
+          "cardTitleClassName?": "string",
+          "cardDescriptionClassName?": "string",
+          "imageContainerClassName?": "string",
+          "imageClassName?": "string",
+          "cardButtonClassName?": "string",
+          "cardButtonTextClassName?": "string"
+        }
+      },
+      {
+        "import": "import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';",
+        "name": "FeatureCardEight",
+        "path": "@/components/sections/feature/FeatureCardEight",
+        "propsSchema": {
+          "features": "Array<{ title: string, description: string } & ({ imageSrc?: string (recommended if no videoSrc), imageAlt?: string } | { videoSrc: string, videoAriaLabel?: string })>",
+          "title": "string",
+          "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground": "boolean",
+          "ariaLabel?": "string (default: 'Feature section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "textBoxTitleClassName?": "string",
+          "titleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+          "titleImageClassName?": "string - For styling images in inline-image layout",
+          "textBoxDescriptionClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string",
+          "cardClassName?": "string",
+          "progressBarClassName?": "string",
+          "cardContentClassName?": "string",
+          "stepNumberClassName?": "string",
+          "cardTitleClassName?": "string",
+          "cardDescriptionClassName?": "string",
+          "mediaContainerClassName?": "string",
+          "mediaClassName?": "string"
+        }
+      },
+      {
+        "import": "import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';",
+        "name": "FeatureCardNine",
+        "path": "@/components/sections/feature/FeatureCardNine",
+        "propsSchema": {
+          "features": "Array<{ title: string, description: string, buttons?: ButtonConfig[], phoneOne: ({ imageSrc?: string (recommended if no videoSrc), imageAlt?: string } | { videoSrc: string, videoAriaLabel?: string }), phoneTwo: ({ imageSrc?: string (recommended if no videoSrc), imageAlt?: string } | { videoSrc: string, videoAriaLabel?: string }) }>",
+          "showStepNumbers": "boolean (required - controls whether step number badges display)",
+          "title": "string",
+          "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)",
+          "textboxLayout": "'default' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground": "boolean",
+          "ariaLabel?": "string (default: 'Feature section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "textBoxTitleClassName?": "string",
+          "titleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+          "titleImageClassName?": "string - For styling images in inline-image layout",
+          "textBoxDescriptionClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string",
+          "desktopContainerClassName?": "string",
+          "mobileContainerClassName?": "string",
+          "desktopContentClassName?": "string",
+          "desktopWrapperClassName?": "string",
+          "mobileWrapperClassName?": "string",
+          "phoneFrameClassName?": "string",
+          "mobilePhoneFrameClassName?": "string",
+          "featureContentClassName?": "string",
+          "stepNumberClassName?": "string",
+          "featureTitleClassName?": "string",
+          "featureDescriptionClassName?": "string",
+          "cardButtonClassName?": "string",
+          "cardButtonTextClassName?": "string"
+        }
+      },
+      {
+        "import": "import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';",
+        "name": "FeatureCardTen",
+        "path": "@/components/sections/feature/FeatureCardTen",
+        "propsSchema": {
+          "features": "Array<{ title: string, description: string, media: ({ imageSrc?: string (recommended if no videoSrc), imageAlt?: string } | { videoSrc: string, videoAriaLabel?: string }), items: Array<{ icon: LucideIcon, text: string }>, reverse: boolean }>",
+          "title": "string",
+          "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)",
+          "useInvertedBackground": "boolean",
+          "ariaLabel?": "string (default: 'Feature section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTitleClassName?": "string",
+          "textBoxDescriptionClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string",
+          "titleImageWrapperClassName?": "string",
+          "titleImageClassName?": "string",
+          "itemClassName?": "string",
+          "mediaWrapperClassName?": "string",
+          "mediaCardClassName?": "string",
+          "numberClassName?": "string",
+          "contentWrapperClassName?": "string",
+          "featureTitleClassName?": "string",
+          "featureDescriptionClassName?": "string",
+          "listItemClassName?": "string",
+          "iconContainerClassName?": "string",
+          "iconClassName?": "string",
+          "gapClassName?": "string"
+        }
+      },
+      {
+        "import": "import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';",
+        "name": "FeatureHoverPattern",
+        "path": "@/components/sections/feature/featureHoverPattern/FeatureHoverPattern",
+        "propsSchema": {
+          "features": "Array<{ icon: LucideIcon, title: string, description: string, button?: ButtonConfig }> (required)",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)",
+          "title": "string (required)",
+          "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+          "description": "string (required)",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground": "boolean (required)",
+          "carouselMode?": "'auto' | 'buttons' (default: 'buttons' - for 5+ items)",
+          "uniformGridCustomHeightClasses?": "string (default: 'min-h-80 2xl:min-h-90')",
+          "ariaLabel?": "string (default: 'Feature section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "cardClassName?": "string",
+          "iconContainerClassName?": "string",
+          "iconClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTitleClassName?": "string",
+          "textBoxDescriptionClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string",
+          "titleImageWrapperClassName?": "string",
+          "titleImageClassName?": "string",
+          "cardTitleClassName?": "string",
+          "cardDescriptionClassName?": "string",
+          "gradientClassName?": "string - Custom gradient for hover pattern (default: 'bg-gradient-to-r from-accent to-background-accent')",
+          "gridClassName?": "string",
+          "carouselClassName?": "string",
+          "controlsClassName?": "string",
+          "cardButtonClassName?": "string",
+          "cardButtonTextClassName?": "string"
+        }
+      },
+      {
+        "import": "import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';",
+        "name": "FeatureBorderGlow",
+        "path": "@/components/sections/feature/featureBorderGlow/FeatureBorderGlow",
+        "propsSchema": {
+          "features": "Array<{ icon: LucideIcon, title: string, description: string }> (required)",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)",
+          "title": "string (required)",
+          "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+          "description": "string (required)",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground": "boolean (required)",
+          "carouselMode?": "'auto' | 'buttons' (default: 'buttons' - for 5+ items)",
+          "uniformGridCustomHeightClasses?": "string (default: 'min-h-75 2xl:min-h-85')",
+          "ariaLabel?": "string (default: 'Feature section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "cardClassName?": "string",
+          "iconContainerClassName?": "string",
+          "iconClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTitleClassName?": "string",
+          "textBoxTitleImageWrapperClassName?": "string",
+          "textBoxTitleImageClassName?": "string",
+          "textBoxDescriptionClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string",
+          "cardTitleClassName?": "string",
+          "cardDescriptionClassName?": "string",
+          "gridClassName?": "string",
+          "carouselClassName?": "string",
+          "controlsClassName?": "string"
+        }
+      },
+      {
+        "import": "import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';",
+        "name": "FeatureCardTwelve",
+        "path": "@/components/sections/feature/FeatureCardTwelve",
+        "propsSchema": {
+          "features": "Array<{ id: string, label: string, title: string, items: string[], buttons?: Array<{text: string, onClick?: () => void, href?: string}> }>",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)",
+          "title": "string",
+          "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+          "description": "string",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground": "boolean",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "ariaLabel?": "string (default: 'Feature section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "cardClassName?": "string",
+          "textBoxTitleClassName?": "string",
+          "textBoxDescriptionClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string",
+          "titleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+          "titleImageClassName?": "string - For styling images in inline-image layout",
+          "cardContentClassName?": "string",
+          "labelClassName?": "string",
+          "cardTitleClassName?": "string",
+          "itemsContainerClassName?": "string",
+          "itemTextClassName?": "string",
+          "cardButtonClassName?": "string",
+          "cardButtonTextClassName?": "string"
+        }
+      },
+      {
+        "import": "import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';",
+        "name": "FeatureCardSixteen",
+        "path": "@/components/sections/feature/FeatureCardSixteen",
+        "propsSchema": {
+          "negativeCard": "{ items: string[] } (required)",
+          "positiveCard": "{ items: string[] } (required)",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d' (required)",
+          "title": "string",
+          "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+          "description": "string",
+          "textboxLayout": "'default' | 'inline-image' (required)",
+          "useInvertedBackground": "boolean",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "ariaLabel?": "string (default: 'Feature comparison section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTitleClassName?": "string",
+          "titleImageWrapperClassName?": "string",
+          "titleImageClassName?": "string",
+          "textBoxDescriptionClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string",
+          "gridClassName?": "string",
+          "cardClassName?": "string",
+          "itemsListClassName?": "string",
+          "itemClassName?": "string",
+          "itemIconClassName?": "string",
+          "itemTextClassName?": "string"
+        }
+      },
+      {
+        "import": "import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';",
+        "name": "FeatureCardNineteen",
+        "path": "@/components/sections/feature/FeatureCardNineteen",
+        "propsSchema": {
+          "features": "Array<{ tag: string, title: string, subtitle: string, description: string, imageSrc?: string (recommended if no videoSrc), videoSrc?: string, imageAlt?: string, videoAriaLabel?: string, buttons?: Array<{text: string, onClick?: () => void, href?: string}> }> (required)",
+          "title": "string",
+          "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+          "description": "string",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required)",
+          "useInvertedBackground": "boolean",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "ariaLabel?": "string (default: 'Feature section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTitleClassName?": "string",
+          "textBoxDescriptionClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string",
+          "titleImageWrapperClassName?": "string",
+          "titleImageClassName?": "string",
+          "cardContentClassName?": "string",
+          "cardTagClassName?": "string",
+          "cardTitleClassName?": "string",
+          "cardDescriptionClassName?": "string",
+          "cardButtonClassName?": "string",
+          "cardButtonTextClassName?": "string",
+          "imageContainerClassName?": "string",
+          "imageClassName?": "string"
+        }
+      },
+      {
+        "import": "import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';",
+        "name": "FeatureCardTwentyOne",
+        "path": "@/components/sections/feature/FeatureCardTwentyOne",
+        "propsSchema": {
+          "title": "string",
+          "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "accordionItems": "Array<{ id: string, title: string, content: string }>",
+          "imageSrc?": "string (RECOMMENDED — always provide an image for best visual result)",
+          "imageAlt?": "string",
+          "videoSrc?": "string (either imageSrc or videoSrc required)",
+          "videoAriaLabel?": "string",
+          "mediaAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "useInvertedBackground": "boolean",
+          "mediaPosition?": "'left' | 'right' (default: 'left')",
+          "ariaLabel?": "string (default: 'Feature section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "mediaWrapperClassName?": "string",
+          "mediaClassName?": "string",
+          "contentClassName?": "string",
+          "textBoxClassName?": "string",
+          "titleClassName?": "string",
+          "descriptionClassName?": "string",
+          "tagClassName?": "string",
+          "buttonContainerClassName?": "string",
+          "buttonClassName?": "string",
+          "buttonTextClassName?": "string",
+          "titleImageWrapperClassName?": "string",
+          "titleImageClassName?": "string",
+          "accordionContainerClassName?": "string",
+          "accordionClassName?": "string",
+          "accordionTitleClassName?": "string",
+          "accordionContentClassName?": "string",
+          "accordionIconContainerClassName?": "string",
+          "accordionIconClassName?": "string"
+        }
+      },
+      {
+        "import": "import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';",
+        "name": "FeatureCardMedia",
+        "path": "@/components/sections/feature/FeatureCardMedia",
+        "propsSchema": {
+          "features": "Array<{ id: string, title: string, description: string, tag: string, imageSrc?: string (recommended if no videoSrc), videoSrc?: string, imageAlt?: string, videoAriaLabel?: string, buttons?: ButtonConfig[], onCardClick?: () => void }>",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)",
+          "title": "string",
+          "description": "string",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image'",
+          "useInvertedBackground": "boolean",
+          "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }>",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{ text: string, href?: string, onClick?: () => void }>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+          "uniformGridCustomHeightClasses?": "string",
+          "ariaLabel?": "string (default: 'Features section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "itemClassName?": "string",
+          "mediaWrapperClassName?": "string",
+          "mediaClassName?": "string",
+          "tagClassName?": "string",
+          "contentClassName?": "string",
+          "cardTitleClassName?": "string",
+          "cardDescriptionClassName?": "string",
+          "cardButtonContainerClassName?": "string",
+          "cardButtonClassName?": "string",
+          "cardButtonTextClassName?": "string",
+          "textBoxTitleClassName?": "string",
+          "textBoxTitleImageWrapperClassName?": "string",
+          "textBoxTitleImageClassName?": "string",
+          "textBoxDescriptionClassName?": "string",
+          "gridClassName?": "string",
+          "carouselClassName?": "string",
+          "controlsClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string"
+        }
+      },
+      {
+        "import": "import FeatureBento from '@/components/sections/feature/FeatureBento';",
+        "name": "FeatureBento",
+        "path": "@/components/sections/feature/FeatureBento",
+        "propsSchema": {
+          "features": "Array<{ title: string, description: string, button?: ButtonConfig } & ( { bentoComponent: 'globe' | 'animated-bar-chart' | 'map' | 'line-chart' } | { bentoComponent: 'reveal-icon', icon: LucideIcon } | { bentoComponent: 'chat', aiIcon: LucideIcon, userIcon: LucideIcon, exchanges: Array<{ userMessage: string, aiResponse: string }>, placeholder: string } | { bentoComponent: 'icon-info-cards', items: Array<{ icon: LucideIcon, label: string, value: string }> } | { bentoComponent: '3d-stack-cards', items: [{ icon: LucideIcon, title: string, subtitle: string, detail: string }, { icon: LucideIcon, title: string, subtitle: string, detail: string }, { icon: LucideIcon, title: string, subtitle: string, detail: string }] } | { bentoComponent: '3d-task-list', title: string, items: Array<{ icon: LucideIcon, label: string, time: string }> } | { bentoComponent: 'orbiting-icons', centerIcon: LucideIcon, items: Array<{ icon: LucideIcon, ring?: 1 | 2 | 3, duration?: number }> } | { bentoComponent: 'marquee', centerIcon: LucideIcon } & ( { variant: 'text', texts: string[] } | { variant: 'icon', icons: LucideIcon[] } ) | { bentoComponent: '3d-card-grid', items: [{ name: string, icon: LucideIcon }, { name: string, icon: LucideIcon }, { name: string, icon: LucideIcon }, { name: string, icon: LucideIcon }], centerIcon: LucideIcon } | { bentoComponent: 'phone', statusIcon: LucideIcon, alertIcon: LucideIcon, alertTitle: string, alertMessage: string, apps: Array<{ name: string, icon: LucideIcon }> (exactly 8 items) } | { bentoComponent: 'timeline', heading: string, subheading: string, items: [{ label: string, detail: string }, { label: string, detail: string }, { label: string, detail: string }], completedLabel: string } | { bentoComponent: 'media-stack', items: [{ imageSrc?: string (recommended if no videoSrc), videoSrc?: string, imageAlt?: string }, { imageSrc?: string, videoSrc?: string, imageAlt?: string }, { imageSrc?: string, videoSrc?: string, imageAlt?: string }] } )> - IMPORTANT: do not include id; do not nest bentoComponent inside an object.",
+          "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'blur-reveal' (required)",
+          "title": "string (required)",
+          "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+          "description": "string (required)",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground": "boolean (required)",
+          "ariaLabel?": "string (default: 'Feature section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "cardClassName?": "string",
+          "textBoxTitleClassName?": "string",
+          "textBoxTitleImageWrapperClassName?": "string",
+          "textBoxTitleImageClassName?": "string",
+          "textBoxDescriptionClassName?": "string",
+          "cardTitleClassName?": "string",
+          "cardDescriptionClassName?": "string",
+          "cardButtonClassName?": "string",
+          "cardButtonTextClassName?": "string",
+          "gridClassName?": "string",
+          "carouselClassName?": "string",
+          "controlsClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string"
+        }
+      },
+      {
+        "import": "import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';",
+        "name": "FeatureCardTwentyThree",
+        "path": "@/components/sections/feature/FeatureCardTwentyThree",
+        "propsSchema": {
+          "features": "Array<{ id: string, title: string, tags: string[], imageSrc?: string (recommended if no videoSrc), videoSrc?: string, imageAlt?: string, videoAriaLabel?: string, onFeatureClick?: () => void }>",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)",
+          "title": "string",
+          "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+          "description": "string",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required)",
+          "useInvertedBackground": "boolean",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+          "uniformGridCustomHeightClasses?": "string",
+          "ariaLabel?": "string (default: 'Features section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "itemClassName?": "string",
+          "mediaWrapperClassName?": "string",
+          "mediaClassName?": "string",
+          "cardClassName?": "string",
+          "cardTitleClassName?": "string",
+          "tagsContainerClassName?": "string",
+          "tagClassName?": "string",
+          "arrowClassName?": "string",
+          "textBoxTitleClassName?": "string",
+          "textBoxTitleImageWrapperClassName?": "string",
+          "textBoxTitleImageClassName?": "string",
+          "textBoxDescriptionClassName?": "string",
+          "gridClassName?": "string",
+          "carouselClassName?": "string",
+          "controlsClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string"
+        }
+      },
+      {
+        "import": "import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';",
+        "name": "FeatureCardTwentyFour",
+        "path": "@/components/sections/feature/FeatureCardTwentyFour",
+        "propsSchema": {
+          "features": "Array<{ id: string, title: string, author: string, description: string, tags: string[], imageSrc?: string (recommended if no videoSrc), imageAlt?: string, videoSrc?: string, videoAriaLabel?: string, onFeatureClick?: () => void }> - Feature card items (requires imageSrc or videoSrc)",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)",
+          "title": "string (required)",
+          "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+          "description": "string (required)",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required)",
+          "useInvertedBackground": "boolean (required)",
+          "ariaLabel?": "string (default: 'Features section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "cardClassName?": "string",
+          "textBoxTitleClassName?": "string",
+          "textBoxDescriptionClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string",
+          "titleImageWrapperClassName?": "string",
+          "titleImageClassName?": "string",
+          "cardContentClassName?": "string",
+          "cardTitleClassName?": "string",
+          "authorClassName?": "string",
+          "cardDescriptionClassName?": "string",
+          "tagsContainerClassName?": "string",
+          "tagClassName?": "string",
+          "mediaWrapperClassName?": "string",
+          "mediaClassName?": "string"
+        }
+      },
+      {
+        "import": "import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';",
+        "name": "FeatureCardTwentyFive",
+        "path": "@/components/sections/feature/FeatureCardTwentyFive",
+        "propsSchema": {
+          "features": "Array<{ title: string, description: string, icon: LucideIcon, mediaItems: [{ imageSrc?: string (recommended if no videoSrc), videoSrc?: string, imageAlt?: string }, { imageSrc?: string (recommended if no videoSrc), videoSrc?: string, imageAlt?: string }] }> - Feature cards with dual media",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d' (required)",
+          "title": "string (required)",
+          "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+          "description": "string (required)",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required)",
+          "useInvertedBackground": "boolean (required)",
+          "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+          "uniformGridCustomHeightClasses?": "string",
+          "ariaLabel?": "string (default: 'Feature section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "cardClassName?": "string",
+          "mediaClassName?": "string",
+          "textBoxTitleClassName?": "string",
+          "textBoxTitleImageWrapperClassName?": "string",
+          "textBoxTitleImageClassName?": "string",
+          "textBoxDescriptionClassName?": "string",
+          "cardTitleClassName?": "string",
+          "cardDescriptionClassName?": "string",
+          "cardIconClassName?": "string",
+          "cardIconWrapperClassName?": "string",
+          "gridClassName?": "string",
+          "carouselClassName?": "string",
+          "controlsClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string"
+        }
+      },
+      {
+        "import": "import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';",
+        "name": "FeatureCardTwentySix",
+        "path": "@/components/sections/feature/FeatureCardTwentySix",
+        "propsSchema": {
+          "features": "Array<{ title: string, description: string, imageSrc?: string (recommended if no videoSrc), videoSrc?: string, imageAlt?: string, videoAriaLabel?: string, buttonIcon: LucideIcon, buttonHref?: string, buttonOnClick?: () => void }> (MINIMUM 4 ITEMS REQUIRED)",
+          "title": "string (required)",
+          "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+          "description": "string (required)",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "textboxLayout": "'default' | 'inline-image' (required)",
+          "useInvertedBackground": "boolean (required)",
+          "ariaLabel?": "string (default: 'Feature section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "cardClassName?": "string",
+          "carouselClassName?": "string",
+          "controlsClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTitleClassName?": "string",
+          "textBoxTitleImageWrapperClassName?": "string",
+          "textBoxTitleImageClassName?": "string",
+          "textBoxDescriptionClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string",
+          "cardTitleClassName?": "string",
+          "cardDescriptionClassName?": "string",
+          "cardButtonClassName?": "string"
+        }
+      },
+      {
+        "import": "import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';",
+        "name": "FeatureCardTwentySeven",
+        "path": "@/components/sections/feature/FeatureCardTwentySeven",
+        "propsSchema": {
+          "features": "Array<{ id: string, title: string, descriptions: string[], imageSrc?: string (recommended if no videoSrc), videoSrc?: string, imageAlt?: string }>",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)",
+          "title": "string (required)",
+          "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+          "description": "string (required)",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required)",
+          "useInvertedBackground": "boolean",
+          "ariaLabel?": "string (default: 'Feature section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "cardClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTitleClassName?": "string",
+          "textBoxTitleImageWrapperClassName?": "string",
+          "textBoxTitleImageClassName?": "string",
+          "textBoxDescriptionClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string",
+          "cardTitleClassName?": "string",
+          "cardDescriptionClassName?": "string"
+        }
+      },
+      {
+        "import": "import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';",
+        "name": "FeatureCardTwentyEight",
+        "path": "@/components/sections/feature/FeatureCardTwentyEight",
+        "propsSchema": {
+          "features": "Array<{ id: string, title: string, subtitle: string, category: string, value: string, buttons?: Array<{text: string, onClick?: () => void, href?: string}> }>",
+          "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+          "uniformGridCustomHeightClasses?": "string",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal'",
+          "title": "string",
+          "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image'",
+          "useInvertedBackground": "boolean",
+          "ariaLabel?": "string (default: 'Features section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "cardClassName?": "string",
+          "textBoxTitleClassName?": "string",
+          "textBoxTitleImageWrapperClassName?": "string",
+          "textBoxTitleImageClassName?": "string",
+          "textBoxDescriptionClassName?": "string",
+          "cardTitleClassName?": "string",
+          "subtitleClassName?": "string",
+          "categoryClassName?": "string",
+          "valueClassName?": "string",
+          "footerClassName?": "string",
+          "cardButtonClassName?": "string",
+          "cardButtonTextClassName?": "string",
+          "gridClassName?": "string",
+          "carouselClassName?": "string",
+          "controlsClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string"
+        }
+      }
+    ],
+    "product": [
+      {
+        "import": "import ProductCardOne from '@/components/sections/product/ProductCardOne';",
+        "name": "ProductCardOne",
+        "path": "@/components/sections/product/ProductCardOne",
+        "propsSchema": {
+          "products?": "Array<{ id: string, name: string, price: string, imageSrc: string, imageAlt?: string, onFavorite?: () => void, onProductClick?: () => void, isFavorited?: boolean }>",
+          "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+          "gridVariant": "'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right' (required)",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect) (required)",
+          "uniformGridCustomHeightClasses?": "string (default: 'min-h-95 2xl:min-h-105')",
+          "title": "string",
+          "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground": "boolean",
+          "ariaLabel?": "string (default: 'Product section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "cardClassName?": "string",
+          "imageClassName?": "string",
+          "textBoxTitleClassName?": "string",
+          "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+          "textBoxTitleImageClassName?": "string - For styling images in inline-image layout",
+          "textBoxDescriptionClassName?": "string",
+          "cardNameClassName?": "string",
+          "cardPriceClassName?": "string",
+          "gridClassName?": "string",
+          "carouselClassName?": "string",
+          "controlsClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string"
+        }
+      },
+      {
+        "import": "import ProductCardTwo from '@/components/sections/product/ProductCardTwo';",
+        "name": "ProductCardTwo",
+        "path": "@/components/sections/product/ProductCardTwo",
+        "propsSchema": {
+          "products?": "Array<{ id: string, brand: string, name: string, price: string, rating: number, reviewCount: string, imageSrc: string, imageAlt?: string, onFavorite?: () => void, onProductClick?: () => void, isFavorited?: boolean }>",
+          "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+          "gridVariant": "'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' (required)",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect) (required)",
+          "uniformGridCustomHeightClasses?": "string (default: 'min-h-95 2xl:min-h-105')",
+          "title": "string",
+          "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground": "boolean",
+          "ariaLabel?": "string (default: 'Product section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "cardClassName?": "string",
+          "imageClassName?": "string",
+          "textBoxTitleClassName?": "string",
+          "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+          "textBoxTitleImageClassName?": "string - For styling images in inline-image layout",
+          "textBoxDescriptionClassName?": "string",
+          "cardBrandClassName?": "string",
+          "cardNameClassName?": "string",
+          "cardPriceClassName?": "string",
+          "cardRatingClassName?": "string",
+          "actionButtonClassName?": "string - Styles the action button on product image",
+          "gridClassName?": "string",
+          "carouselClassName?": "string",
+          "controlsClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string"
+        }
+      },
+      {
+        "import": "import ProductCardThree from '@/components/sections/product/ProductCardThree';",
+        "name": "ProductCardThree",
+        "path": "@/components/sections/product/ProductCardThree",
+        "propsSchema": {
+          "products": "Array<{ id: string, name: string, price: string, imageSrc: string, imageAlt?: string, onFavorite?: () => void, onProductClick?: () => void, onQuantityChange?: (quantity: number) => void, isFavorited?: boolean, initialQuantity?: number, priceButtonProps?: Partial<ButtonPropsForVariant<CTAButtonVariant>> }>",
+          "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+          "gridVariant": "'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'one-large-right-three-stacked-left' | 'one-large-left-three-stacked-right' (required)",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect) (required)",
+          "uniformGridCustomHeightClasses?": "string (default: 'min-h-95 2xl:min-h-105')",
+          "title": "string",
+          "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground": "boolean",
+          "ariaLabel?": "string (default: 'Product section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "cardClassName?": "string",
+          "imageClassName?": "string",
+          "textBoxTitleClassName?": "string",
+          "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+          "textBoxTitleImageClassName?": "string - For styling images in inline-image layout",
+          "textBoxDescriptionClassName?": "string",
+          "cardNameClassName?": "string",
+          "quantityControlsClassName?": "string",
+          "gridClassName?": "string",
+          "carouselClassName?": "string",
+          "controlsClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string"
+        }
+      },
+      {
+        "import": "import ProductCardFour from '@/components/sections/product/ProductCardFour';",
+        "name": "ProductCardFour",
+        "path": "@/components/sections/product/ProductCardFour",
+        "propsSchema": {
+          "products?": "Array<{ id: string, name: string, price: string, variant: string, imageSrc: string, imageAlt?: string, onFavorite?: () => void, onProductClick?: () => void, isFavorited?: boolean }> - Product items",
+          "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+          "gridVariant": "'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'one-large-right-three-stacked-left' | 'one-large-left-three-stacked-right' (required)",
+          "uniformGridCustomHeightClasses?": "string (default: 'min-h-95 2xl:min-h-105')",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)",
+          "title": "string",
+          "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground": "boolean (required)",
+          "ariaLabel?": "string (default: 'Product section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "cardClassName?": "string",
+          "imageClassName?": "string",
+          "textBoxTitleClassName?": "string",
+          "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+          "textBoxTitleImageClassName?": "string - For styling images in inline-image layout",
+          "textBoxDescriptionClassName?": "string",
+          "cardNameClassName?": "string",
+          "cardPriceClassName?": "string",
+          "cardVariantClassName?": "string",
+          "actionButtonClassName?": "string - Styles the action button on product image",
+          "gridClassName?": "string",
+          "carouselClassName?": "string",
+          "controlsClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string"
+        }
+      }
+    ],
+    "pricing": [
+      {
+        "import": "import PricingCardOne from '@/components/sections/pricing/PricingCardOne';",
+        "name": "PricingCardOne",
+        "path": "@/components/sections/pricing/PricingCardOne",
+        "propsSchema": {
+          "plans": "Array<{ id: string, badge: string, badgeIcon?: LucideIcon, price: string, subtitle: string, features: string[] }>",
+          "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+          "uniformGridCustomHeightClasses?": "string",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d' (required)",
+          "title": "string",
+          "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground": "boolean",
+          "ariaLabel?": "string (default: 'Pricing section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "cardClassName?": "string",
+          "textBoxTitleClassName?": "string",
+          "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+          "textBoxTitleImageClassName?": "string - For styling images in inline-image layout",
+          "textBoxDescriptionClassName?": "string",
+          "badgeClassName?": "string",
+          "priceClassName?": "string",
+          "subtitleClassName?": "string",
+          "featuresClassName?": "string",
+          "featureItemClassName?": "string",
+          "gridClassName?": "string",
+          "carouselClassName?": "string",
+          "controlsClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string"
+        }
+      },
+      {
+        "import": "import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';",
+        "name": "PricingCardTwo",
+        "path": "@/components/sections/pricing/PricingCardTwo",
+        "propsSchema": {
+          "plans": "Array<{ id: string, badge: string, badgeIcon?: LucideIcon, price: string, subtitle: string, buttons: Array<{text: string, onClick?: () => void, href?: string}>, features: string[] }>",
+          "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+          "uniformGridCustomHeightClasses?": "string",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect) (required)",
+          "title": "string",
+          "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground": "boolean",
+          "ariaLabel?": "string (default: 'Pricing section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "cardClassName?": "string",
+          "textBoxTitleClassName?": "string",
+          "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+          "textBoxTitleImageClassName?": "string - For styling images in inline-image layout",
+          "textBoxDescriptionClassName?": "string",
+          "badgeClassName?": "string",
+          "priceClassName?": "string",
+          "subtitleClassName?": "string",
+          "planButtonContainerClassName?": "string",
+          "planButtonClassName?": "string",
+          "featuresClassName?": "string",
+          "featureItemClassName?": "string",
+          "gridClassName?": "string",
+          "carouselClassName?": "string",
+          "controlsClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string"
+        }
+      },
+      {
+        "import": "import PricingCardThree from '@/components/sections/pricing/PricingCardThree';",
+        "name": "PricingCardThree",
+        "path": "@/components/sections/pricing/PricingCardThree",
+        "propsSchema": {
+          "plans": "Array<{ id: string, badge?: string, badgeIcon?: LucideIcon, price: string, name: string, buttons: Array<{text: string, onClick?: () => void, href?: string}>, features: string[] }>",
+          "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+          "uniformGridCustomHeightClasses?": "string",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect) (required)",
+          "title": "string",
+          "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground": "boolean",
+          "ariaLabel?": "string (default: 'Pricing section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "cardClassName?": "string",
+          "textBoxTitleClassName?": "string",
+          "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+          "textBoxTitleImageClassName?": "string - For styling images in inline-image layout",
+          "textBoxDescriptionClassName?": "string",
+          "badgeClassName?": "string",
+          "priceClassName?": "string",
+          "nameClassName?": "string",
+          "planButtonContainerClassName?": "string",
+          "planButtonClassName?": "string",
+          "featuresClassName?": "string",
+          "featureItemClassName?": "string",
+          "gridClassName?": "string",
+          "carouselClassName?": "string",
+          "controlsClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string"
+        }
+      },
+      {
+        "import": "import PricingCardFive from '@/components/sections/pricing/PricingCardFive';",
+        "name": "PricingCardFive",
+        "path": "@/components/sections/pricing/PricingCardFive",
+        "propsSchema": {
+          "plans": "Array<{ id: string, tag: string, tagIcon?: LucideIcon, price: string, period: string, description: string, button: {text: string, onClick?: () => void, href?: string}, featuresTitle: string, features: string[] }>",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)",
+          "title": "string",
+          "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+          "description": "string",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required)",
+          "useInvertedBackground": "boolean",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "ariaLabel?": "string (default: 'Pricing section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "cardClassName?": "string",
+          "textBoxTitleClassName?": "string",
+          "textBoxDescriptionClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string",
+          "titleImageWrapperClassName?": "string",
+          "titleImageClassName?": "string",
+          "cardContentClassName?": "string",
+          "planTagClassName?": "string",
+          "planPriceClassName?": "string",
+          "planPeriodClassName?": "string",
+          "planDescriptionClassName?": "string",
+          "planButtonClassName?": "string",
+          "planButtonTextClassName?": "string",
+          "featuresTitleClassName?": "string",
+          "featuresListClassName?": "string",
+          "featureItemClassName?": "string",
+          "featureIconClassName?": "string",
+          "featureTextClassName?": "string"
+        }
+      },
+      {
+        "import": "import PricingCardEight from '@/components/sections/pricing/PricingCardEight';",
+        "name": "PricingCardEight",
+        "path": "@/components/sections/pricing/PricingCardEight",
+        "propsSchema": {
+          "plans": "Array<{ id: string, badge: string, badgeIcon?: LucideIcon, price: string, subtitle: string, buttons: Array<{text: string, onClick?: () => void, href?: string}>, features: string[] }>",
+          "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+          "uniformGridCustomHeightClasses?": "string",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)",
+          "title": "string",
+          "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image'",
+          "useInvertedBackground": "boolean",
+          "ariaLabel?": "string (default: 'Pricing section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "cardClassName?": "string",
+          "textBoxTitleClassName?": "string",
+          "textBoxTitleImageWrapperClassName?": "string",
+          "textBoxTitleImageClassName?": "string",
+          "textBoxDescriptionClassName?": "string",
+          "badgeClassName?": "string",
+          "priceClassName?": "string",
+          "subtitleClassName?": "string",
+          "planButtonContainerClassName?": "string",
+          "planButtonClassName?": "string",
+          "featuresClassName?": "string",
+          "featureItemClassName?": "string",
+          "gridClassName?": "string",
+          "carouselClassName?": "string",
+          "controlsClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string"
+        }
+      },
+      {
+        "import": "import PricingCardNine from '@/components/sections/pricing/PricingCardNine';",
+        "name": "PricingCardNine",
+        "path": "@/components/sections/pricing/PricingCardNine",
+        "propsSchema": {
+          "plans": "Array<{ id: string, title: string, price: string, period: string, features: string[], button: {text: string, onClick?: () => void, href?: string}, imageSrc?: string (recommended if no videoSrc), videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }>",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)",
+          "title": "string",
+          "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+          "description": "string",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required)",
+          "useInvertedBackground": "boolean",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "ariaLabel?": "string (default: 'Pricing section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "cardClassName?": "string",
+          "textBoxTitleClassName?": "string",
+          "textBoxDescriptionClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string",
+          "titleImageWrapperClassName?": "string",
+          "titleImageClassName?": "string",
+          "cardContentClassName?": "string",
+          "planImageWrapperClassName?": "string",
+          "planImageClassName?": "string",
+          "planTitleClassName?": "string",
+          "planPriceClassName?": "string",
+          "planButtonClassName?": "string",
+          "planButtonTextClassName?": "string",
+          "featuresListClassName?": "string",
+          "featureItemClassName?": "string",
+          "featureIconClassName?": "string",
+          "featureTextClassName?": "string"
+        }
+      }
+    ],
+    "metric": [
+      {
+        "import": "import MetricCardOne from '@/components/sections/metrics/MetricCardOne';",
+        "name": "MetricCardOne",
+        "path": "@/components/sections/metrics/MetricCardOne",
+        "propsSchema": {
+          "metrics": "Array<{ id: string, value: string, title: string, description: string, icon: LucideIcon }>",
+          "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+          "gridVariant": "'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' (required)",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d' (required)",
+          "uniformGridCustomHeightClasses?": "string",
+          "title": "string",
+          "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground": "boolean",
+          "ariaLabel?": "string (default: 'Metrics section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "cardClassName?": "string",
+          "textBoxTitleClassName?": "string",
+          "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+          "textBoxTitleImageClassName?": "string - For styling images in inline-image layout",
+          "textBoxDescriptionClassName?": "string",
+          "valueClassName?": "string",
+          "titleClassName?": "string",
+          "descriptionClassName?": "string",
+          "iconContainerClassName?": "string",
+          "iconClassName?": "string",
+          "gridClassName?": "string",
+          "carouselClassName?": "string",
+          "controlsClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string"
+        }
+      },
+      {
+        "import": "import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';",
+        "name": "MetricCardTwo",
+        "path": "@/components/sections/metrics/MetricCardTwo",
+        "propsSchema": {
+          "metrics": "Array<{ id: string, value: string, description: string }>",
+          "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+          "gridVariant": "'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' (required)",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d' (required)",
+          "uniformGridCustomHeightClasses?": "string",
+          "title": "string",
+          "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground": "boolean",
+          "ariaLabel?": "string (default: 'Metrics section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "cardClassName?": "string",
+          "textBoxTitleClassName?": "string",
+          "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+          "textBoxTitleImageClassName?": "string - For styling images in inline-image layout",
+          "textBoxDescriptionClassName?": "string",
+          "valueClassName?": "string",
+          "metricDescriptionClassName?": "string",
+          "gridClassName?": "string",
+          "carouselClassName?": "string",
+          "controlsClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string"
+        }
+      },
+      {
+        "import": "import MetricCardThree from '@/components/sections/metrics/MetricCardThree';",
+        "name": "MetricCardThree",
+        "path": "@/components/sections/metrics/MetricCardThree",
+        "propsSchema": {
+          "metrics": "Array<{ id: string, icon: LucideIcon, title: string, value: string }>",
+          "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d' (required)",
+          "uniformGridCustomHeightClasses?": "string",
+          "title": "string",
+          "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground": "boolean",
+          "ariaLabel?": "string (default: 'Metrics section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "cardClassName?": "string",
+          "textBoxTitleClassName?": "string",
+          "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+          "textBoxTitleImageClassName?": "string - For styling images in inline-image layout",
+          "textBoxDescriptionClassName?": "string",
+          "iconContainerClassName?": "string",
+          "iconClassName?": "string",
+          "metricTitleClassName?": "string",
+          "valueClassName?": "string",
+          "gridClassName?": "string",
+          "carouselClassName?": "string",
+          "controlsClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string"
+        }
+      },
+      {
+        "import": "import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';",
+        "name": "MetricCardSeven",
+        "path": "@/components/sections/metrics/MetricCardSeven",
+        "propsSchema": {
+          "metrics": "Array<{ id: string, value: string, title: string, items: string[] }>",
+          "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d' (required)",
+          "uniformGridCustomHeightClasses?": "string",
+          "title": "string",
+          "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground": "boolean",
+          "ariaLabel?": "string (default: 'Metrics section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "cardClassName?": "string",
+          "textBoxTitleClassName?": "string",
+          "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+          "textBoxTitleImageClassName?": "string - For styling images in inline-image layout",
+          "textBoxDescriptionClassName?": "string",
+          "valueClassName?": "string - For styling the large metric value",
+          "metricTitleClassName?": "string - For styling the metric title text",
+          "featuresClassName?": "string - For styling the PricingFeatureList container",
+          "featureItemClassName?": "string - For styling individual feature items",
+          "gridClassName?": "string",
+          "carouselClassName?": "string",
+          "controlsClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string"
+        }
+      },
+      {
+        "import": "import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';",
+        "name": "MetricCardEleven",
+        "path": "@/components/sections/metrics/MetricCardEleven",
+        "propsSchema": {
+          "metrics": "Array<{ id: string, value: string, title: string, description: string } & ({ imageSrc: string, imageAlt?: string } | { videoSrc: string, videoAriaLabel?: string })> - REQUIRED: each metric MUST have EITHER imageSrc (string) OR videoSrc (string), not both, not neither",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)",
+          "title": "string",
+          "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image'",
+          "useInvertedBackground": "boolean",
+          "ariaLabel?": "string (default: 'Metrics section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTitleClassName?": "string",
+          "textBoxTitleImageWrapperClassName?": "string",
+          "textBoxTitleImageClassName?": "string",
+          "textBoxDescriptionClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string",
+          "gridClassName?": "string",
+          "cardClassName?": "string",
+          "valueClassName?": "string",
+          "cardTitleClassName?": "string",
+          "cardDescriptionClassName?": "string",
+          "mediaCardClassName?": "string",
+          "mediaClassName?": "string"
+        }
+      },
+      {
+        "import": "import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';",
+        "name": "MetricCardFourteen",
+        "path": "@/components/sections/metrics/MetricCardFourteen",
+        "propsSchema": {
+          "title": "string",
+          "tag": "string",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "metrics": "Array<{ id: string, value: string, description: string }>",
+          "metricsAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "useInvertedBackground": "boolean",
+          "ariaLabel?": "string (default: 'Metrics section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "titleClassName?": "string",
+          "tagClassName?": "string",
+          "metricsContainerClassName?": "string",
+          "metricClassName?": "string",
+          "valueClassName?": "string",
+          "descriptionClassName?": "string"
+        }
+      }
+    ],
+    "team": [
+      {
+        "import": "import TeamCardOne from '@/components/sections/team/TeamCardOne';",
+        "name": "TeamCardOne",
+        "path": "@/components/sections/team/TeamCardOne",
+        "propsSchema": {
+          "members": "Array<{ id: string, name: string, role: string, imageSrc?: string (recommended if no videoSrc), videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }>",
+          "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+          "gridVariant": "'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right' (required)",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d' (required)",
+          "uniformGridCustomHeightClasses?": "string (default: 'min-h-95 2xl:min-h-105')",
+          "title": "string",
+          "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground": "boolean",
+          "ariaLabel?": "string (default: 'Team section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "cardClassName?": "string",
+          "textBoxTitleClassName?": "string",
+          "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+          "textBoxTitleImageClassName?": "string - For styling images in inline-image layout",
+          "textBoxDescriptionClassName?": "string",
+          "imageClassName?": "string",
+          "overlayClassName?": "string",
+          "nameClassName?": "string",
+          "roleClassName?": "string",
+          "gridClassName?": "string",
+          "carouselClassName?": "string",
+          "controlsClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string"
+        }
+      },
+      {
+        "import": "import TeamCardTwo from '@/components/sections/team/TeamCardTwo';",
+        "name": "TeamCardTwo",
+        "path": "@/components/sections/team/TeamCardTwo",
+        "propsSchema": {
+          "members": "Array<{ id: string, name: string, role: string, description: string, imageSrc?: string (recommended if no videoSrc), videoSrc?: string, imageAlt?: string, videoAriaLabel?: string, socialLinks?: Array<{ icon: LucideIcon, url: string }> }>",
+          "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+          "gridVariant": "'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right' (required)",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect) (required)",
+          "uniformGridCustomHeightClasses?": "string (default: 'min-h-95 2xl:min-h-105')",
+          "title": "string",
+          "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground": "boolean",
+          "ariaLabel?": "string (default: 'Team section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "cardClassName?": "string",
+          "textBoxTitleClassName?": "string",
+          "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+          "textBoxTitleImageClassName?": "string - For styling images in inline-image layout",
+          "textBoxDescriptionClassName?": "string",
+          "imageClassName?": "string",
+          "overlayClassName?": "string",
+          "nameClassName?": "string",
+          "roleClassName?": "string",
+          "memberDescriptionClassName?": "string",
+          "socialLinksClassName?": "string",
+          "socialIconClassName?": "string",
+          "gridClassName?": "string",
+          "carouselClassName?": "string",
+          "controlsClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string"
+        }
+      },
+      {
+        "import": "import TeamCardFive from '@/components/sections/team/TeamCardFive';",
+        "name": "TeamCardFive",
+        "path": "@/components/sections/team/TeamCardFive",
+        "propsSchema": {
+          "team": "Array<{ id: string, name: string, role: string, imageSrc?: string (recommended if no videoSrc), videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }>",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)",
+          "title": "string",
+          "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+          "description": "string",
+          "textboxLayout": "'default' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground": "boolean",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "ariaLabel?": "string (default: 'Team section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "textBoxTitleClassName?": "string",
+          "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+          "textBoxTitleImageClassName?": "string - For styling images in inline-image layout",
+          "textBoxDescriptionClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string",
+          "gridClassName?": "string",
+          "cardClassName?": "string",
+          "mediaWrapperClassName?": "string",
+          "mediaClassName?": "string",
+          "nameClassName?": "string",
+          "roleClassName?": "string"
+        }
+      },
+      {
+        "import": "import TeamCardSix from '@/components/sections/team/TeamCardSix';",
+        "name": "TeamCardSix",
+        "path": "@/components/sections/team/TeamCardSix",
+        "propsSchema": {
+          "members": "Array<{ id: string, name: string, role: string, imageSrc?: string (recommended if no videoSrc), videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }>",
+          "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+          "gridVariant": "'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right' (required - determines grid layout or carousel trigger)",
+          "uniformGridCustomHeightClasses?": "string (default: 'min-h-95 2xl:min-h-105')",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d' (required)",
+          "title": "string",
+          "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground": "boolean",
+          "ariaLabel?": "string (default: 'Team section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "cardClassName?": "string",
+          "textBoxTitleClassName?": "string",
+          "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+          "textBoxTitleImageClassName?": "string - For styling images in inline-image layout",
+          "textBoxDescriptionClassName?": "string",
+          "imageClassName?": "string",
+          "overlayClassName?": "string",
+          "nameClassName?": "string",
+          "roleClassName?": "string",
+          "gridClassName?": "string",
+          "carouselClassName?": "string",
+          "controlsClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string"
+        }
+      },
+      {
+        "import": "import TeamCardTen from '@/components/sections/team/TeamCardTen';",
+        "name": "TeamCardTen",
+        "path": "@/components/sections/team/TeamCardTen",
+        "propsSchema": {
+          "title": "string",
+          "tag": "string",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "membersAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "members": "Array<{ id: string, name: string, imageSrc?: string (recommended if no videoSrc), imageAlt?: string, videoSrc?: string, videoAriaLabel?: string }>",
+          "memberVariant": "'default' | 'card' (required - 'default': no card styling, 'card': each member wrapped in card with rounded corners)",
+          "useInvertedBackground": "boolean",
+          "ariaLabel?": "string (default: 'Team section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "titleClassName?": "string",
+          "tagClassName?": "string",
+          "membersContainerClassName?": "string",
+          "memberClassName?": "string",
+          "mediaWrapperClassName?": "string",
+          "mediaClassName?": "string",
+          "nameClassName?": "string"
+        }
+      },
+      {
+        "import": "import TeamCardEleven from '@/components/sections/team/TeamCardEleven';",
+        "name": "TeamCardEleven",
+        "path": "@/components/sections/team/TeamCardEleven",
+        "propsSchema": {
+          "groups": "Array<{ id: string, groupTitle: string, members: Array<{ id: string, title: string, subtitle: string, detail: string, imageSrc?: string (recommended if no videoSrc), imageAlt?: string, videoSrc?: string, videoAriaLabel?: string }> }> (required)",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)",
+          "title": "string",
+          "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+          "description": "string",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required)",
+          "useInvertedBackground": "boolean",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "ariaLabel?": "string (default: 'Team section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "cardClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTitleClassName?": "string",
+          "textBoxDescriptionClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string",
+          "titleImageWrapperClassName?": "string",
+          "titleImageClassName?": "string",
+          "groupTitleClassName?": "string",
+          "memberClassName?": "string",
+          "memberImageClassName?": "string",
+          "memberTitleClassName?": "string",
+          "memberSubtitleClassName?": "string",
+          "memberDetailClassName?": "string"
+        }
+      }
+    ],
+    "testimonial": [
+      {
+        "import": "import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';",
+        "name": "TestimonialCardOne",
+        "path": "@/components/sections/testimonial/TestimonialCardOne",
+        "propsSchema": {
+          "testimonials": "Array<{ id: string, name: string, role: string, company: string, rating: number, imageSrc?: string (recommended if no videoSrc), videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }>",
+          "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+          "uniformGridCustomHeightClasses?": "string (default: 'min-h-95 2xl:min-h-105')",
+          "gridVariant": "'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right' (required)",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d' (required)",
+          "title": "string",
+          "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground": "boolean",
+          "ariaLabel?": "string (default: 'Testimonials section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "cardClassName?": "string",
+          "textBoxTitleClassName?": "string",
+          "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+          "textBoxTitleImageClassName?": "string - For styling images in inline-image layout",
+          "textBoxDescriptionClassName?": "string",
+          "imageClassName?": "string",
+          "overlayClassName?": "string",
+          "ratingClassName?": "string",
+          "nameClassName?": "string",
+          "roleClassName?": "string",
+          "companyClassName?": "string",
+          "gridClassName?": "string",
+          "carouselClassName?": "string",
+          "controlsClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string"
+        }
+      },
+      {
+        "import": "import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';",
+        "name": "TestimonialCardTwo",
+        "path": "@/components/sections/testimonial/TestimonialCardTwo",
+        "propsSchema": {
+          "testimonials": "Array<{ id: string, name: string, role: string, testimonial: string, imageSrc?: string, imageAlt?: string, icon?: LucideIcon }>",
+          "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+          "uniformGridCustomHeightClasses?": "string (default: 'min-h-none')",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d' (required)",
+          "title": "string",
+          "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground": "boolean",
+          "ariaLabel?": "string (default: 'Testimonials section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "cardClassName?": "string",
+          "textBoxTitleClassName?": "string",
+          "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+          "textBoxTitleImageClassName?": "string - For styling images in inline-image layout",
+          "textBoxDescriptionClassName?": "string",
+          "imageWrapperClassName?": "string",
+          "imageClassName?": "string",
+          "iconClassName?": "string",
+          "nameClassName?": "string",
+          "roleClassName?": "string",
+          "testimonialClassName?": "string",
+          "gridClassName?": "string",
+          "carouselClassName?": "string",
+          "controlsClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string"
+        }
+      },
+      {
+        "import": "import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';",
+        "name": "TestimonialCardFive",
+        "path": "@/components/sections/testimonial/TestimonialCardFive",
+        "propsSchema": {
+          "testimonials": "Array<{ id: string, name: string, date: string, title: string, quote: string, tag: string, avatarSrc: string, avatarAlt?: string, imageSrc?: string (recommended if no videoSrc), videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }>",
+          "title": "string",
+          "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground": "boolean",
+          "ariaLabel?": "string (default: 'Testimonials section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "cardClassName?": "string",
+          "textBoxTitleClassName?": "string",
+          "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+          "textBoxTitleImageClassName?": "string - For styling images in inline-image layout",
+          "textBoxDescriptionClassName?": "string",
+          "cardTagClassName?": "string",
+          "cardTitleClassName?": "string",
+          "cardQuoteClassName?": "string",
+          "cardAuthorClassName?": "string",
+          "cardAvatarWrapperClassName?": "string",
+          "cardAvatarClassName?": "string",
+          "cardNameClassName?": "string",
+          "cardDateClassName?": "string",
+          "cardImageClassName?": "string",
+          "carouselClassName?": "string",
+          "dotsClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string"
+        }
+      },
+      {
+        "import": "import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';",
+        "name": "TestimonialCardSix",
+        "path": "@/components/sections/testimonial/TestimonialCardSix",
+        "propsSchema": {
+          "testimonials": "Array<{ id: string, name: string, handle: string, testimonial: string, imageSrc?: string, imageAlt?: string, icon?: LucideIcon }>",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)",
+          "title": "string",
+          "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+          "description": "string",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground": "boolean",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "speed?": "number (default: 40)",
+          "topMarqueeDirection?": "'left' | 'right' (default: 'left')",
+          "ariaLabel?": "string (default: 'Testimonials section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "carouselClassName?": "string",
+          "bottomCarouselClassName?": "string",
+          "cardClassName?": "string",
+          "testimonialClassName?": "string",
+          "imageWrapperClassName?": "string",
+          "imageClassName?": "string",
+          "iconClassName?": "string",
+          "nameClassName?": "string",
+          "handleClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTitleClassName?": "string",
+          "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+          "textBoxTitleImageClassName?": "string - For styling images in inline-image layout",
+          "textBoxDescriptionClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string"
+        }
+      },
+      {
+        "import": "import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';",
+        "name": "TestimonialCardTen",
+        "path": "@/components/sections/testimonial/TestimonialCardTen",
+        "propsSchema": {
+          "testimonials": "Array<{ id: string, title: string, quote: string, name: string, role: string, imageSrc?: string (recommended if no videoSrc), videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }>",
+          "title": "string",
+          "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+          "description": "string",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required)",
+          "useInvertedBackground": "boolean",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "ariaLabel?": "string (default: 'Testimonials section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTitleClassName?": "string",
+          "textBoxDescriptionClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string",
+          "titleImageWrapperClassName?": "string",
+          "titleImageClassName?": "string",
+          "contentClassName?": "string",
+          "quoteCardClassName?": "string",
+          "testimonialTitleClassName?": "string",
+          "quoteClassName?": "string",
+          "nameClassName?": "string",
+          "roleClassName?": "string",
+          "navigationClassName?": "string",
+          "navigationButtonClassName?": "string",
+          "mediaCardClassName?": "string",
+          "mediaClassName?": "string"
+        }
+      },
+      {
+        "import": "import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';",
+        "name": "TestimonialCardTwelve",
+        "path": "@/components/sections/testimonial/TestimonialCardTwelve",
+        "propsSchema": {
+          "testimonials": "Array<{ id: string, name: string, imageSrc: string, imageAlt?: string }>",
+          "cardTitle": "string",
+          "cardTag": "string",
+          "cardTagIcon?": "LucideIcon",
+          "buttons?": "Array<{ text: string, href?: string, onClick?: () => void }>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "cardAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal' (required)",
+          "useInvertedBackground": "boolean",
+          "ariaLabel?": "string (default: 'Testimonials section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "cardClassName?": "string",
+          "avatarGroupClassName?": "string",
+          "avatarClassName?": "string",
+          "cardTitleClassName?": "string",
+          "cardTagClassName?": "string",
+          "buttonContainerClassName?": "string",
+          "buttonClassName?": "string",
+          "buttonTextClassName?": "string"
+        }
+      },
+      {
+        "import": "import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';",
+        "name": "TestimonialCardThirteen",
+        "path": "@/components/sections/testimonial/TestimonialCardThirteen",
+        "propsSchema": {
+          "testimonials": "Array<{ id: string, name: string, handle: string, testimonial: string, rating: number, imageSrc?: string, imageAlt?: string, icon?: LucideIcon }>",
+          "showRating": "boolean - true for star ratings, false for quote icon (required)",
+          "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+          "uniformGridCustomHeightClasses?": "string (default: 'min-h-none')",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d' (required)",
+          "title": "string",
+          "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+          "description": "string",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required)",
+          "useInvertedBackground": "boolean",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "ariaLabel?": "string (default: 'Testimonials section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "cardClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTitleClassName?": "string",
+          "textBoxTitleImageWrapperClassName?": "string",
+          "textBoxTitleImageClassName?": "string",
+          "textBoxDescriptionClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string",
+          "imageWrapperClassName?": "string",
+          "imageClassName?": "string",
+          "iconClassName?": "string",
+          "nameClassName?": "string",
+          "handleClassName?": "string",
+          "testimonialClassName?": "string",
+          "ratingClassName?": "string",
+          "contentWrapperClassName?": "string",
+          "gridClassName?": "string",
+          "carouselClassName?": "string",
+          "controlsClassName?": "string"
+        }
+      },
+      {
+        "import": "import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';",
+        "name": "TestimonialCardFifteen",
+        "path": "@/components/sections/testimonial/TestimonialCardFifteen",
+        "propsSchema": {
+          "testimonial": "string",
+          "rating": "number (0-5)",
+          "author": "string",
+          "avatars": "Array<{ src: string, alt: string }>",
+          "ratingAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal' (required)",
+          "avatarsAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal' (required)",
+          "useInvertedBackground": "boolean",
+          "ariaLabel?": "string (default: 'Testimonial section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "ratingClassName?": "string",
+          "starClassName?": "string",
+          "testimonialClassName?": "string",
+          "avatarGroupClassName?": "string",
+          "avatarClassName?": "string",
+          "avatarImageClassName?": "string"
+        }
+      },
+      {
+        "import": "import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';",
+        "name": "TestimonialCardSixteen",
+        "path": "@/components/sections/testimonial/TestimonialCardSixteen",
+        "propsSchema": {
+          "testimonials": "Array<{ id: string, name: string, role: string, company: string, rating: number, imageSrc?: string (recommended if no videoSrc), videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }>",
+          "kpiItems": "[{ value: string, label: string }, { value: string, label: string }, { value: string, label: string }] - Exactly 3 KPI stats (required)",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d' (required)",
+          "title": "string (required)",
+          "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+          "description": "string (required)",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required)",
+          "useInvertedBackground": "boolean (required)",
+          "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+          "uniformGridCustomHeightClasses?": "string (default: 'min-h-95 2xl:min-h-105')",
+          "ariaLabel?": "string (default: 'Testimonials section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "cardClassName?": "string",
+          "imageClassName?": "string",
+          "overlayClassName?": "string",
+          "ratingClassName?": "string",
+          "nameClassName?": "string",
+          "roleClassName?": "string",
+          "companyClassName?": "string",
+          "gridClassName?": "string",
+          "carouselClassName?": "string",
+          "controlsClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTitleClassName?": "string",
+          "textBoxTitleImageWrapperClassName?": "string",
+          "textBoxTitleImageClassName?": "string",
+          "textBoxDescriptionClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string"
+        }
+      }
+    ],
+    "faq": [
+      {
+        "import": "import FaqBase from '@/components/sections/faq/FaqBase';",
+        "name": "FaqBase",
+        "path": "@/components/sections/faq/FaqBase",
+        "propsSchema": {
+          "faqs": "Array<{ id: string, title: string, content: string }> - FAQ items",
+          "title": "string",
+          "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "faqsAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal' (required)",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground": "boolean",
+          "animationType?": "'smooth' | 'instant' (default: 'smooth')",
+          "showCard?": "boolean (default: true)",
+          "ariaLabel?": "string (default: 'FAQ section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "textBoxTitleClassName?": "string",
+          "titleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+          "titleImageClassName?": "string - For styling images in inline-image layout",
+          "textBoxDescriptionClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string",
+          "faqsContainerClassName?": "string",
+          "accordionClassName?": "string",
+          "accordionTitleClassName?": "string",
+          "accordionIconContainerClassName?": "string",
+          "accordionIconClassName?": "string",
+          "accordionContentClassName?": "string",
+          "separatorClassName?": "string"
+        }
+      },
+      {
+        "import": "import FaqDouble from '@/components/sections/faq/FaqDouble';",
+        "name": "FaqDouble",
+        "path": "@/components/sections/faq/FaqDouble",
+        "propsSchema": {
+          "faqs": "Array<{ id: string, title: string, content: string }> - FAQ items",
+          "title": "string",
+          "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "faqsAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal' (required)",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground": "boolean",
+          "animationType?": "'smooth' | 'instant' (default: 'smooth')",
+          "ariaLabel?": "string (default: 'FAQ section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "textBoxTitleClassName?": "string",
+          "titleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+          "titleImageClassName?": "string - For styling images in inline-image layout",
+          "textBoxDescriptionClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string",
+          "faqsContainerClassName?": "string",
+          "columnClassName?": "string",
+          "accordionClassName?": "string",
+          "accordionTitleClassName?": "string",
+          "accordionIconContainerClassName?": "string",
+          "accordionIconClassName?": "string",
+          "accordionContentClassName?": "string"
+        }
+      },
+      {
+        "import": "import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';",
+        "name": "FaqSplitMedia",
+        "path": "@/components/sections/faq/FaqSplitMedia",
+        "propsSchema": {
+          "faqs": "Array<{ id: string, title: string, content: string }> - FAQ items",
+          "imageSrc?": "string (RECOMMENDED — always provide an image for best visual result)",
+          "videoSrc?": "string",
+          "imageAlt?": "string (default: '')",
+          "videoAriaLabel?": "string (default: 'FAQ section video')",
+          "mediaAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "mediaPosition?": "'left' | 'right' (default: 'left')",
+          "title": "string",
+          "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "faqsAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal' (required)",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground": "boolean",
+          "animationType?": "'smooth' | 'instant' (default: 'smooth')",
+          "showCard?": "boolean (default: true)",
+          "ariaLabel?": "string (default: 'FAQ section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "textBoxTitleClassName?": "string",
+          "titleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+          "titleImageClassName?": "string - For styling images in inline-image layout",
+          "textBoxDescriptionClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string",
+          "contentClassName?": "string",
+          "mediaWrapperClassName?": "string",
+          "mediaClassName?": "string",
+          "faqsContainerClassName?": "string",
+          "accordionClassName?": "string",
+          "accordionTitleClassName?": "string",
+          "accordionIconContainerClassName?": "string",
+          "accordionIconClassName?": "string",
+          "accordionContentClassName?": "string",
+          "separatorClassName?": "string"
+        }
+      },
+      {
+        "import": "import FaqSplitText from '@/components/sections/faq/FaqSplitText';",
+        "name": "FaqSplitText",
+        "path": "@/components/sections/faq/FaqSplitText",
+        "propsSchema": {
+          "faqs": "Array<{ id: string, title: string, content: string }> - FAQ items",
+          "sideTitle": "string",
+          "sideDescription?": "string",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "faqsAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal' (required)",
+          "textPosition?": "'left' | 'right' (default: 'left')",
+          "useInvertedBackground": "boolean",
+          "animationType?": "'smooth' | 'instant' (default: 'smooth')",
+          "showCard?": "boolean (default: true)",
+          "ariaLabel?": "string (default: 'FAQ section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "contentClassName?": "string",
+          "textContainerClassName?": "string",
+          "sideTitleClassName?": "string",
+          "sideDescriptionClassName?": "string",
+          "buttonContainerClassName?": "string",
+          "buttonClassName?": "string",
+          "buttonTextClassName?": "string",
+          "faqsContainerClassName?": "string",
+          "accordionClassName?": "string",
+          "accordionTitleClassName?": "string",
+          "accordionIconContainerClassName?": "string",
+          "accordionIconClassName?": "string",
+          "accordionContentClassName?": "string",
+          "separatorClassName?": "string"
+        }
+      }
+    ],
+    "blog": [
+      {
+        "import": "import BlogCardOne from '@/components/sections/blog/BlogCardOne';",
+        "name": "BlogCardOne",
+        "path": "@/components/sections/blog/BlogCardOne",
+        "propsSchema": {
+          "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+          "uniformGridCustomHeightClasses?": "string",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect) (required)",
+          "title": "string",
+          "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground": "boolean",
+          "ariaLabel?": "string (default: 'Blog section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "cardClassName?": "string",
+          "imageWrapperClassName?": "string",
+          "imageClassName?": "string",
+          "categoryClassName?": "string",
+          "cardTitleClassName?": "string",
+          "excerptClassName?": "string",
+          "authorContainerClassName?": "string",
+          "authorAvatarClassName?": "string",
+          "authorNameClassName?": "string",
+          "dateClassName?": "string",
+          "textBoxTitleClassName?": "string",
+          "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+          "textBoxTitleImageClassName?": "string - For styling images in inline-image layout",
+          "textBoxDescriptionClassName?": "string",
+          "gridClassName?": "string",
+          "carouselClassName?": "string",
+          "controlsClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string",
+          "blogs?": "Array<{ id: string, category: string, title: string, excerpt: string, imageSrc: string, imageAlt?: string, authorName: string, authorAvatar: string, date: string, onBlogClick?: () => void }> - Blog card items"
+        }
+      },
+      {
+        "import": "import BlogCardTwo from '@/components/sections/blog/BlogCardTwo';",
+        "name": "BlogCardTwo",
+        "path": "@/components/sections/blog/BlogCardTwo",
+        "propsSchema": {
+          "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+          "uniformGridCustomHeightClasses?": "string",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect) (required)",
+          "title": "string",
+          "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground": "boolean",
+          "ariaLabel?": "string (default: 'Blog section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "cardClassName?": "string",
+          "imageWrapperClassName?": "string",
+          "imageClassName?": "string",
+          "authorAvatarClassName?": "string",
+          "authorDateClassName?": "string",
+          "cardTitleClassName?": "string",
+          "excerptClassName?": "string",
+          "categoryClassName?": "string",
+          "textBoxTitleClassName?": "string",
+          "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+          "textBoxTitleImageClassName?": "string - For styling images in inline-image layout",
+          "textBoxDescriptionClassName?": "string",
+          "gridClassName?": "string",
+          "carouselClassName?": "string",
+          "controlsClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string",
+          "blogs?": "Array<{ id: string, category: string | string[], title: string, excerpt: string, imageSrc: string, imageAlt?: string, authorName: string, authorAvatar: string, date: string, onBlogClick?: () => void }> - Blog card items"
+        }
+      },
+      {
+        "import": "import BlogCardThree from '@/components/sections/blog/BlogCardThree';",
+        "name": "BlogCardThree",
+        "path": "@/components/sections/blog/BlogCardThree",
+        "propsSchema": {
+          "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+          "uniformGridCustomHeightClasses?": "string (default: 'min-h-[600px]')",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect) (required)",
+          "title": "string",
+          "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground": "boolean",
+          "ariaLabel?": "string (default: 'Blog section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "cardClassName?": "string",
+          "cardContentClassName?": "string",
+          "categoryTagClassName?": "string",
+          "cardTitleClassName?": "string",
+          "excerptClassName?": "string",
+          "authorContainerClassName?": "string",
+          "authorAvatarClassName?": "string",
+          "authorNameClassName?": "string",
+          "dateClassName?": "string",
+          "mediaWrapperClassName?": "string",
+          "mediaClassName?": "string",
+          "textBoxTitleClassName?": "string",
+          "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+          "textBoxTitleImageClassName?": "string - For styling images in inline-image layout",
+          "textBoxDescriptionClassName?": "string",
+          "gridClassName?": "string",
+          "carouselClassName?": "string",
+          "controlsClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string",
+          "blogs?": "Array<{ id: string, category: string, title: string, excerpt: string, imageSrc: string, imageAlt?: string, authorName: string, authorAvatar: string, date: string, onBlogClick?: () => void }> - Blog card items"
+        }
+      }
+    ],
+    "contact": [
+      {
+        "import": "import ContactCenter from '@/components/sections/contact/ContactCenter';",
+        "name": "ContactCenter",
+        "path": "@/components/sections/contact/ContactCenter",
+        "propsSchema": {
+          "tag": "string",
+          "title": "string",
+          "description": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }",
+          "useInvertedBackground": "boolean",
+          "inputPlaceholder?": "string (default: 'Enter your email')",
+          "buttonText?": "string (default: 'Sign Up')",
+          "termsText?": "string (default: 'By clicking Sign Up you're confirming that you agree with our Terms and Conditions.')",
+          "onSubmit?": "(email: string) => void",
+          "ariaLabel?": "string (default: 'Contact section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "contentClassName?": "string",
+          "tagClassName?": "string",
+          "titleClassName?": "string",
+          "descriptionClassName?": "string",
+          "formWrapperClassName?": "string",
+          "formClassName?": "string",
+          "inputClassName?": "string",
+          "buttonClassName?": "string",
+          "buttonTextClassName?": "string",
+          "termsClassName?": "string"
+        }
+      },
+      {
+        "import": "import ContactSplit from '@/components/sections/contact/ContactSplit';",
+        "name": "ContactSplit",
+        "path": "@/components/sections/contact/ContactSplit",
+        "propsSchema": {
+          "tag": "string",
+          "title": "string",
+          "description": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }",
+          "useInvertedBackground": "boolean",
+          "imageSrc?": "string (RECOMMENDED — always provide an image for best visual result)",
+          "videoSrc?": "string",
+          "imageAlt?": "string (default: '')",
+          "videoAriaLabel?": "string (default: 'Contact section video')",
+          "mediaAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "mediaPosition?": "'left' | 'right' (default: 'right')",
+          "inputPlaceholder?": "string (default: 'Enter your email')",
+          "buttonText?": "string (default: 'Sign Up')",
+          "termsText?": "string (default: 'By clicking Sign Up you're confirming that you agree with our Terms and Conditions.')",
+          "onSubmit?": "(email: string) => void",
+          "ariaLabel?": "string (default: 'Contact section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "contentClassName?": "string",
+          "contactFormClassName?": "string",
+          "tagClassName?": "string",
+          "titleClassName?": "string",
+          "descriptionClassName?": "string",
+          "formWrapperClassName?": "string",
+          "formClassName?": "string",
+          "inputClassName?": "string",
+          "buttonClassName?": "string",
+          "buttonTextClassName?": "string",
+          "termsClassName?": "string",
+          "mediaWrapperClassName?": "string",
+          "mediaClassName?": "string"
+        }
+      },
+      {
+        "import": "import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';",
+        "name": "ContactSplitForm",
+        "path": "@/components/sections/contact/ContactSplitForm",
+        "propsSchema": {
+          "title": "string",
+          "description": "string",
+          "inputs": "Array<{ name: string, type: string, placeholder: string, required?: boolean, className?: string }> - Form input fields (min 2 required)",
+          "multiSelect?": "{ name: string, label: string, options: string[] } - Optional multi-select dropdown field",
+          "textarea?": "{ name: string, placeholder: string, rows?: number, required?: boolean, className?: string } - Optional textarea field",
+          "useInvertedBackground": "boolean",
+          "imageSrc?": "string (RECOMMENDED — always provide an image for best visual result)",
+          "videoSrc?": "string",
+          "imageAlt?": "string (default: '')",
+          "videoAriaLabel?": "string (default: 'Contact section video')",
+          "mediaAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal' (default: 'none')",
+          "mediaPosition?": "'left' | 'right' (default: 'right')",
+          "buttonText?": "string (default: 'Submit')",
+          "onSubmit?": "(data: Record<string, string>) => void",
+          "ariaLabel?": "string (default: 'Contact section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "contentClassName?": "string",
+          "formCardClassName?": "string",
+          "titleClassName?": "string",
+          "descriptionClassName?": "string",
+          "buttonClassName?": "string",
+          "buttonTextClassName?": "string",
+          "mediaWrapperClassName?": "string",
+          "mediaClassName?": "string"
+        }
+      },
+      {
+        "import": "import ContactText from '@/components/sections/contact/ContactText';",
+        "name": "ContactText",
+        "path": "@/components/sections/contact/ContactText",
+        "propsSchema": {
+          "text": "string",
+          "animationType?": "'entrance-slide' | 'reveal-blur' | 'background-highlight' (default: 'entrance-slide')",
+          "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+          "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' } (required)",
+          "useInvertedBackground": "boolean",
+          "ariaLabel?": "string (default: 'Contact section')",
+          "className?": "string",
+          "containerClassName?": "string - Outer wrapper styling",
+          "contentClassName?": "string - Card content wrapper styling",
+          "textClassName?": "string - TextAnimation heading styling",
+          "buttonContainerClassName?": "string",
+          "buttonClassName?": "string",
+          "buttonTextClassName?": "string"
+        }
+      },
+      {
+        "import": "import ContactCTA from '@/components/sections/contact/ContactCTA';",
+        "name": "ContactCTA",
+        "path": "@/components/sections/contact/ContactCTA",
+        "propsSchema": {
+          "tag": "string (required)",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "title": "string (required)",
+          "description": "string (required)",
+          "buttons": "Array<{text: string, onClick?: () => void, href?: string}> (required)",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "background": "{ variant: \"plain\" | \"glowing-orb\" | \"sparkles-gradient\" | \"radial-gradient\" } = { variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }",
+          "useInvertedBackground": "boolean",
+          "ariaLabel?": "string (default: 'Contact section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "contentClassName?": "string - Card content wrapper styling",
+          "textBoxClassName?": "string",
+          "titleClassName?": "string",
+          "descriptionClassName?": "string",
+          "tagClassName?": "string",
+          "buttonContainerClassName?": "string",
+          "buttonClassName?": "string",
+          "buttonTextClassName?": "string"
+        }
+      }
+    ],
+    "footer": [
+      {
+        "import": "import FooterBase from '@/components/sections/footer/FooterBase';",
+        "name": "FooterBase",
+        "path": "@/components/sections/footer/FooterBase",
+        "propsSchema": {
+          "columns": "Array<{ title: string, items: Array<{ label: string, href: string }> }> - Footer navigation columns (required)",
+          "logoSrc?": "string",
+          "logoAlt?": "string",
+          "logoText": "string (required)",
+          "copyrightText?": "string (default: '© 2025 | Webild')",
+          "onPrivacyClick?": "() => void",
+          "ariaLabel?": "string (default: 'Site footer')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "logoClassName?": "string",
+          "logoImageClassName?": "string",
+          "logoTextClassName?": "string",
+          "columnsClassName?": "string",
+          "columnClassName?": "string",
+          "columnTitleClassName?": "string",
+          "columnItemClassName?": "string",
+          "copyrightContainerClassName?": "string",
+          "copyrightTextClassName?": "string",
+          "privacyButtonClassName?": "string"
+        }
+      },
+      {
+        "import": "import FooterMedia from '@/components/sections/footer/FooterMedia';",
+        "name": "FooterMedia",
+        "path": "@/components/sections/footer/FooterMedia",
+        "propsSchema": {
+          "imageSrc": "string (required if no videoSrc)",
+          "imageAlt?": "string (default: '')",
+          "videoSrc": "string (required if no imageSrc)",
+          "videoAriaLabel?": "string (default: 'Footer video')",
+          "logoSrc?": "string",
+          "logoAlt?": "string",
+          "logoText": "string (required)",
+          "columns": "Array<{ title: string, items: Array<{ label: string, href: string }> }> - Footer navigation columns (required)",
+          "copyrightText?": "string (default: '© 2025 | Webild')",
+          "onPrivacyClick?": "() => void",
+          "ariaLabel?": "string (default: 'Site footer')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "mediaWrapperClassName?": "string",
+          "mediaClassName?": "string",
+          "logoClassName?": "string",
+          "logoImageClassName?": "string",
+          "logoTextClassName?": "string",
+          "columnsClassName?": "string",
+          "columnClassName?": "string",
+          "columnTitleClassName?": "string",
+          "columnItemClassName?": "string",
+          "copyrightContainerClassName?": "string",
+          "copyrightTextClassName?": "string",
+          "privacyButtonClassName?": "string"
+        }
+      },
+      {
+        "import": "import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';",
+        "name": "FooterBaseReveal",
+        "path": "@/components/sections/footer/FooterBaseReveal",
+        "propsSchema": {
+          "logoSrc?": "string",
+          "logoAlt?": "string",
+          "logoText": "string (required)",
+          "columns": "Array<{ title: string, items: Array<{ label: string, href: string }> }> - Footer navigation columns (required)",
+          "copyrightText?": "string",
+          "onPrivacyClick?": "() => void",
+          "ariaLabel?": "string",
+          "className?": "string",
+          "wrapperClassName?": "string",
+          "containerClassName?": "string",
+          "footerClassName?": "string",
+          "footerContainerClassName?": "string",
+          "logoClassName?": "string",
+          "logoImageClassName?": "string",
+          "logoTextClassName?": "string",
+          "columnsClassName?": "string",
+          "columnClassName?": "string",
+          "columnTitleClassName?": "string",
+          "columnItemClassName?": "string",
+          "copyrightContainerClassName?": "string",
+          "copyrightTextClassName?": "string",
+          "privacyButtonClassName?": "string"
+        }
+      },
+      {
+        "import": "import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';",
+        "name": "FooterLogoEmphasis",
+        "path": "@/components/sections/footer/FooterLogoEmphasis",
+        "propsSchema": {
+          "logoSrc?": "string",
+          "logoAlt?": "string",
+          "columns": "Array<{ items: Array<{ label: string, href?: string, onClick?: () => void }> }> - Footer navigation columns (required, max 5)",
+          "logoText": "string (required)",
+          "ariaLabel?": "string (default: 'Site footer')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "logoClassName?": "string",
+          "logoImageClassName?": "string",
+          "columnsClassName?": "string",
+          "columnClassName?": "string",
+          "itemClassName?": "string",
+          "iconClassName?": "string",
+          "buttonClassName?": "string"
+        }
+      },
+      {
+        "import": "import FooterCard from '@/components/sections/footer/FooterCard';",
+        "name": "FooterCard",
+        "path": "@/components/sections/footer/FooterCard",
+        "propsSchema": {
+          "logoSrc?": "string",
+          "logoAlt?": "string",
+          "logoText": "string (required)",
+          "copyrightText?": "string (default: '© 2025 | Webild')",
+          "socialLinks?": "Array<{ icon: LucideIcon, href: string, ariaLabel: string }> - Social media links",
+          "ariaLabel?": "string (default: 'Site footer')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "cardClassName?": "string",
+          "logoClassName?": "string",
+          "logoImageClassName?": "string",
+          "dividerClassName?": "string",
+          "copyrightContainerClassName?": "string",
+          "copyrightTextClassName?": "string",
+          "socialContainerClassName?": "string",
+          "socialIconClassName?": "string"
+        }
+      },
+      {
+        "import": "import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';",
+        "name": "FooterBaseCard",
+        "path": "@/components/sections/footer/FooterBaseCard",
+        "propsSchema": {
+          "logoSrc?": "string",
+          "logoAlt?": "string",
+          "logoText": "string (required)",
+          "columns": "Array<{ title: string, items: Array<{ label: string, href: string }> }> - Footer navigation columns (required)",
+          "copyrightText?": "string (default: '© 2025 | Webild')",
+          "onPrivacyClick?": "() => void",
+          "ariaLabel?": "string (default: 'Site footer')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "cardClassName?": "string",
+          "logoClassName?": "string",
+          "logoImageClassName?": "string",
+          "logoTextClassName?": "string",
+          "columnsClassName?": "string",
+          "columnClassName?": "string",
+          "columnTitleClassName?": "string",
+          "columnItemClassName?": "string",
+          "copyrightContainerClassName?": "string",
+          "copyrightTextClassName?": "string",
+          "privacyButtonClassName?": "string"
+        }
+      },
+      {
+        "import": "import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';",
+        "name": "FooterLogoReveal",
+        "path": "@/components/sections/footer/FooterLogoReveal",
+        "propsSchema": {
+          "logoSrc?": "string",
+          "logoAlt?": "string",
+          "logoText": "string (required)",
+          "leftLink": "{ text: string, onClick?: () => void, href?: string } (required)",
+          "rightLink": "{ text: string, onClick?: () => void, href?: string } (required)",
+          "ariaLabel?": "string (default: 'Site footer')",
+          "className?": "string",
+          "wrapperClassName?": "string",
+          "containerClassName?": "string",
+          "logoClassName?": "string",
+          "logoImageClassName?": "string",
+          "linkClassName?": "string"
+        }
+      },
+      {
+        "import": "import FooterSimple from '@/components/sections/footer/FooterSimple';",
+        "name": "FooterSimple",
+        "path": "@/components/sections/footer/FooterSimple",
+        "propsSchema": {
+          "columns": "Array<{ title: string, items: Array<{ label: string, href?: string, onClick?: () => void }> }>",
+          "bottomLeftText": "string",
+          "bottomRightText": "string",
+          "ariaLabel?": "string (default: 'Site footer')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "columnsClassName?": "string",
+          "columnClassName?": "string",
+          "columnTitleClassName?": "string",
+          "columnItemClassName?": "string",
+          "dividerClassName?": "string",
+          "bottomContainerClassName?": "string",
+          "bottomLeftTextClassName?": "string",
+          "bottomRightTextClassName?": "string"
+        }
+      }
+    ],
+    "ecommerce": [
+      {
+        "import": "import ProductDetailCard from '@/components/ecommerce/productDetail/ProductDetailCard';",
+        "name": "ProductDetailCard",
+        "path": "@/components/ecommerce/productDetail/ProductDetailCard",
+        "propsSchema": {
+          "layout": "'page' | 'section'",
+          "name": "string",
+          "price": "string",
+          "showRating?": "boolean (default: true)",
+          "rating?": "number (default: 0)",
+          "ratingIcon?": "LucideIcon (default: Star)",
+          "description?": "string",
+          "images": "Array<{ src: string; alt: string }>",
+          "variants?": "Array<{ label: string; options: string[]; selected: string; onChange: (value: string) => void }>",
+          "quantity?": "{ label: string; options: string[]; selected: string; onChange: (value: string) => void }",
+          "buttons": "Array<{ text: string, href?: string, onClick?: () => void }>",
+          "className?": "string",
+          "imageContainerClassName?": "string",
+          "infoContainerClassName?": "string",
+          "nameClassName?": "string",
+          "priceClassName?": "string",
+          "descriptionClassName?": "string",
+          "variantSelectClassName?": "string",
+          "variantLabelClassName?": "string",
+          "buttonClassName?": "string"
+        }
+      },
+      {
+        "import": "import ProductCart from '@/components/ecommerce/cart/ProductCart';",
+        "name": "ProductCart",
+        "path": "@/components/ecommerce/cart/ProductCart",
+        "propsSchema": {
+          "isOpen": "boolean",
+          "onClose": "() => void",
+          "items": "Array<{ id: string, name: string, variants?: string[], price: string, quantity: number, imageSrc: string, imageAlt?: string }>",
+          "onQuantityChange?": "(id: string, quantity: number) => void",
+          "onRemove?": "(id: string) => void",
+          "total": "string",
+          "buttons": "Array<{ text: string, href?: string, onClick?: () => void }>",
+          "title?": "string (default: 'Cart')",
+          "totalLabel?": "string (default: 'Total')",
+          "emptyMessage?": "string (default: 'Your cart is empty')",
+          "className?": "string",
+          "panelClassName?": "string",
+          "itemClassName?": "string",
+          "buttonClassName?": "string"
+        }
+      },
+      {
+        "import": "import ProductCartItem from '@/components/ecommerce/cart/ProductCartItem';",
+        "name": "ProductCartItem",
+        "path": "@/components/ecommerce/cart/ProductCartItem",
+        "propsSchema": {
+          "item": "{ id: string, name: string, variants?: string[], price: string, quantity: number, imageSrc: string } - { id: string; name: string; variants?: string[]; price: string; quantity: number; imageSrc: string; imageAlt?: string }",
+          "onQuantityChange?": "(id: string, quantity: number) => void",
+          "onRemove?": "(id: string) => void",
+          "className?": "string"
+        }
+      },
+      {
+        "import": "import ProductCatalog from '@/components/ecommerce/productCatalog/ProductCatalog';",
+        "name": "ProductCatalog",
+        "path": "@/components/ecommerce/productCatalog/ProductCatalog",
+        "propsSchema": {
+          "layout": "'page' | 'section'",
+          "products": "Array<{ id: string, category?: string, name: string, price: string, rating: number, reviewCount?: string, imageSrc: string, imageAlt?: string, onProductClick?: () => void, onFavorite?: () => void }>",
+          "searchValue?": "string (default: '')",
+          "onSearchChange?": "(value: string) => void",
+          "searchPlaceholder?": "string (default: 'Search products...')",
+          "filters?": "Array<{ label: string; options: string[]; selected: string; onChange: (value: string) => void }>",
+          "emptyMessage?": "string (default: 'No products found')",
+          "className?": "string",
+          "gridClassName?": "string",
+          "cardClassName?": "string",
+          "imageClassName?": "string",
+          "searchClassName?": "string",
+          "filterClassName?": "string",
+          "toolbarClassName?": "string"
+        }
+      },
+      {
+        "import": "import ProductCatalogItem from '@/components/ecommerce/productCatalog/ProductCatalogItem';",
+        "name": "ProductCatalogItem",
+        "path": "@/components/ecommerce/productCatalog/ProductCatalogItem",
+        "propsSchema": {
+          "product": "CatalogProduct - { id: string; category?: string; name: string; price: string; rating: number; reviewCount?: string; imageSrc: string; imageAlt?: string; onProductClick?: () => void; onFavorite?: () => void; isFavorited?: boolean }",
+          "className?": "string",
+          "imageClassName?": "string",
+          "categoryClassName?": "string",
+          "nameClassName?": "string",
+          "priceClassName?": "string",
+          "ratingClassName?": "string"
+        }
+      }
+    ],
+    "legal": [
+      {
+        "import": "import LegalSection from '@/components/legal/LegalSection';",
+        "name": "LegalSection",
+        "path": "@/components/legal/LegalSection",
+        "propsSchema": {
+          "layout": "'page' | 'section'",
+          "title": "string",
+          "subtitle?": "string",
+          "sections": "LegalContentSection[] - { heading: string; content: { type: \"paragraph\", text: string } | { type: \"list\", items: string[] } | { type: \"numbered-list\", items: string[] }[] } where { type: \"paragraph\", text: string } | { type: \"list\", items: string[] } | { type: \"numbered-list\", items: string[] } = { type: 'paragraph'; text: string } | { type: 'list'; items: string[] } | { type: 'numbered-list'; items: string[] }",
+          "className?": "string",
+          "titleClassName?": "string",
+          "subtitleClassName?": "string",
+          "sectionClassName?": "string",
+          "headingClassName?": "string",
+          "contentClassName?": "string",
+          "listClassName?": "string"
+        }
+      }
+    ],
+    "socialProof": [
+      {
+        "import": "import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';",
+        "name": "SocialProofOne",
+        "path": "@/components/sections/socialProof/SocialProofOne",
+        "propsSchema": {
+          "names": "string[] (required) - Array of company/partner names to display as text",
+          "title": "string",
+          "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }>",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "buttons?": "Array<{ text: string, href?: string, onClick?: () => void }>",
+          "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image'",
+          "useInvertedBackground": "boolean",
+          "speed?": "number (default: 40)",
+          "showCard?": "boolean (default: true) - Whether to show card styling around items",
+          "ariaLabel?": "string (default: 'Social proof section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "textBoxTitleClassName?": "string",
+          "titleImageWrapperClassName?": "string",
+          "titleImageClassName?": "string",
+          "textBoxDescriptionClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string",
+          "contentClassName?": "string",
+          "logoItemClassName?": "string",
+          "logoCardClassName?": "string",
+          "logoTextClassName?": "string"
+        }
+      }
+    ]
+  }
+}
diff --git a/registry/components/AboutMetric.json b/registry/components/AboutMetric.json
new file mode 100644
index 0000000..81ca7d6
--- /dev/null
+++ b/registry/components/AboutMetric.json
@@ -0,0 +1,58 @@
+{
+  "name": "AboutMetric",
+  "description": "About section with centered animated title and metric cards in a responsive grid.",
+  "details": "Use for showcasing company metrics, achievements, and statistics with visual impact. Features centered large animated title (2xl on mobile, 5xl on desktop) using words-trigger variant with theme's default text animation. Displays 2-4 metric cards in a responsive grid (1 column mobile, 2-4 columns desktop based on metric count). Each card includes an icon in a primary-button styled container, metric label, and large value text (6xl). Cards have fixed height (h-fit with py-8 md:py-10), rounded-theme-capped borders, and centered content. Perfect for highlighting key business achievements, statistics, or milestones.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "At Berco Inc. we redefine innovation by empowering businesses to reach their full potential",
+        "minChars": 20,
+        "maxChars": 300
+      }
+    },
+    "metricRules": {
+      "minMetrics": 2,
+      "maxMetrics": 4,
+      "structure": {
+        "icon": "LucideIcon - Icon component from lucide-react (required)",
+        "label": "string - Descriptive label for the metric (required, e.g., 'Conversions', 'Partnered Brands')",
+        "value": "string - Metric value to display (required, e.g., '7,000+', '2018', '30+', '100M+')"
+      },
+      "note": "Provide 2-4 metrics for optimal layout. Grid automatically adjusts columns based on metric count (2 metrics = 2 cols, 3 metrics = 3 cols, 4 metrics = 4 cols). Import icons from lucide-react."
+    }
+  },
+  "propsSchema": {
+    "title": "string",
+    "metrics": "Array<{ icon: LucideIcon, label: string, value: string }>",
+    "metricsAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'About metrics section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "titleClassName?": "string",
+    "metricsContainerClassName?": "string",
+    "metricCardClassName?": "string",
+    "metricIconClassName?": "string",
+    "metricLabelClassName?": "string",
+    "metricValueClassName?": "string"
+  },
+  "usageExample": "// Wrap in ThemeProvider\nimport { TrendingUp, ShoppingCart, Users, Globe } from 'lucide-react';\n\n<ThemeProvider defaultButtonVariant=\"icon-arrow\" defaultTextAnimation=\"reveal-blur\" borderRadius=\"soft\" background=\"aurora\" cardStyle=\"glass-elevated\" primaryButtonStyle=\"gradient\" secondaryButtonStyle=\"glass\">\n  <AboutMetric \n    title=\"At Berco Inc. we redefine innovation by empowering businesses to reach their full potential\" \n    useInvertedBackground={false}\n    metrics={[\n      { icon: TrendingUp, label: 'Conversions', value: '7,000+' },\n      { icon: ShoppingCart, label: 'Ecommerce Since', value: '2018' },\n      { icon: Users, label: 'Partnered Brands', value: '30+' },\n      { icon: Globe, label: 'Global Impressions Generated Annually', value: '100M+' }\n    ]} \n  />\n</ThemeProvider>",
+  "do": [
+    "Use for feature showcases",
+    "Use for capability displays",
+    "Use for about pages",
+    "Use for company information",
+    "Use for statistics displays",
+    "Use for achievement showcases",
+    "Requires metrics[]"
+  ],
+  "dont": [
+    "Do not use more than 4 items"
+  ],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/AnimatedAuroraBackground.json b/registry/components/AnimatedAuroraBackground.json
new file mode 100644
index 0000000..4a405e5
--- /dev/null
+++ b/registry/components/AnimatedAuroraBackground.json
@@ -0,0 +1,22 @@
+{
+  "name": "AnimatedAuroraBackground",
+  "description": "Aurora borealis effect with animated repeating gradients and mix-blend-difference.",
+  "details": "Use for premium, vibrant backgrounds with flowing aurora animation. Features repeating linear gradients with theme colors (primary-cta, accent, secondary-cta) that animate across the screen. Uses background color for base gradient with 10px blur filter. Optional radial gradient mask (default: true) creates elliptical spotlight effect from top-right. Uses mix-blend-difference blend mode and after pseudo-element for layered animation. Requires aurora keyframes animation in globals.css. Set invertColors to true for light backgrounds, false for dark backgrounds.",
+  "constraints": {},
+  "propsSchema": {
+    "className?": "string",
+    "showRadialGradient?": "boolean (default: true)",
+    "invertColors": "boolean (REQUIRED - true for light backgrounds, false for dark backgrounds)"
+  },
+  "usageExample": "<AnimatedAuroraBackground invertColors={true} showRadialGradient={true} />",
+  "do": [
+    "Use for feature showcases",
+    "Use for capability displays"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/AnimatedGridBackground.json b/registry/components/AnimatedGridBackground.json
new file mode 100644
index 0000000..b25e9b8
--- /dev/null
+++ b/registry/components/AnimatedGridBackground.json
@@ -0,0 +1,25 @@
+{
+  "name": "AnimatedGridBackground",
+  "description": "Grid pattern with animated pulsing squares using Framer Motion with 3D perspective and radial mask from top center.",
+  "details": "Use for modern, interactive backgrounds with subtle animation. Features SVG grid with randomly positioned squares that pulse in opacity. Includes 3D perspective with skew transform (skew-y-12) and stretched height (200%). Radial gradient mask positioned at top center (ellipse 100% 100% at 50% 0%) creates a dome-shaped spotlight effect fading towards edges and bottom. Uses accent color for grid lines (20% opacity) and background-accent for animated squares. Perfect for hero sections where grid should be most prominent at top. Requires framer-motion.",
+  "constraints": {},
+  "propsSchema": {
+    "squareSize?": "number (default: 100)",
+    "numSquares?": "number (default: 50)",
+    "maxOpacity?": "number (default: 0.15)",
+    "className?": "string"
+  },
+  "usageExample": "<AnimatedGridBackground squareSize={100} numSquares={50} maxOpacity={0.15} />",
+  "do": [
+    "Use for feature showcases",
+    "Use for capability displays"
+  ],
+  "dont": [
+    "Do not use more than 4 items"
+  ],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/AuroraBackground.json b/registry/components/AuroraBackground.json
new file mode 100644
index 0000000..f0ab541
--- /dev/null
+++ b/registry/components/AuroraBackground.json
@@ -0,0 +1,21 @@
+{
+  "name": "AuroraBackground",
+  "description": "Aurora borealis-style background with multiple rotated gradient bars and blur effect.",
+  "details": "Use for premium, visually striking hero sections or landing pages. Features 5 rotated gradient bars with backdrop-blur-3xl overlay creating an aurora effect. Uses background-accent color at varying opacities (5-10%). Fixed positioning with z-0.",
+  "constraints": {},
+  "propsSchema": {
+    "className?": "string"
+  },
+  "usageExample": "<AuroraBackground />",
+  "do": [
+    "Use for landing pages",
+    "Use for feature showcases",
+    "Use for capability displays"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/AvatarGroup.json b/registry/components/AvatarGroup.json
new file mode 100644
index 0000000..dfbd5f7
--- /dev/null
+++ b/registry/components/AvatarGroup.json
@@ -0,0 +1,36 @@
+{
+  "name": "AvatarGroup",
+  "description": "Displays a group of user avatars with overlapping layout and optional text label.",
+  "details": "Use for showing user participation, testimonials, or social proof. Displays up to 5 avatars by default with remaining count badge. Avatars overlap with card styling. Includes optional text label (e.g., 'Join 1,000+ members').",
+  "constraints": {
+    "textRules": {
+      "text": {
+        "required": false,
+        "example": "Join 1,000+ members",
+        "minChars": 2,
+        "maxChars": 50
+      }
+    }
+  },
+  "propsSchema": {
+    "avatars": "Array<{ src: string, alt?: string }> - User avatar images",
+    "text?": "string",
+    "maxVisible?": "number (default: 5)",
+    "className?": "string",
+    "avatarClassName?": "string",
+    "textClassName?": "string",
+    "ariaLabel?": "string (default: 'User avatars')"
+  },
+  "usageExample": "<AvatarGroup avatars={[{ src: '/avatar1.jpg', alt: 'User 1' }, { src: '/avatar2.jpg', alt: 'User 2' }]} text=\"Join 1,000+ members\" />",
+  "do": [
+    "Use for social proof",
+    "Use for customer reviews",
+    "Requires avatars[]"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/BentoGlobe.json b/registry/components/BentoGlobe.json
new file mode 100644
index 0000000..5769e20
--- /dev/null
+++ b/registry/components/BentoGlobe.json
@@ -0,0 +1,28 @@
+{
+  "name": "BentoGlobe",
+  "description": "Interactive 3D rotating globe component using COBE library with theme-aware colors and customizable markers.",
+  "details": "Use for showcasing global presence, international reach, or geographic data. Features auto-rotating 3D globe with location markers. Colors automatically sync with theme CSS variables (--card for base/glow, --primary-cta for markers). Fully customizable via COBEOptions config. Includes default world markers. Responsive with smooth opacity fade-in. Requires 'cobe' package. Best used within a card container with fixed dimensions.",
+  "constraints": {
+    "globeRules": {
+      "config": {
+        "required": false,
+        "note": "Optional COBEOptions object to customize globe appearance. Default config uses theme colors: baseColor and glowColor use --card, markerColor uses --primary-cta. Can override: phi (rotation), theta (tilt), dark (darkness 0-1), diffuse (lighting), mapSamples, mapBrightness, markers (array of {location: [lat, lng], size: number}), and more. See COBE documentation for full options."
+      }
+    }
+  },
+  "propsSchema": {
+    "className?": "string",
+    "config?": "COBEOptions - Custom globe configuration (see COBE docs)"
+  },
+  "usageExample": "<BentoGlobe className=\"w-full h-full\" config={{ markers: [{ location: [40.7128, -74.006], size: 0.1 }] }} />",
+  "do": [
+    "Use for feature showcases",
+    "Use for capability displays"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/BlogCardOne.json b/registry/components/BlogCardOne.json
new file mode 100644
index 0000000..d243f14
--- /dev/null
+++ b/registry/components/BlogCardOne.json
@@ -0,0 +1,90 @@
+{
+  "name": "BlogCardOne",
+  "description": "Blog section with card grid/carousel layout featuring image, category, title, excerpt, and author info.",
+  "details": "Use for displaying blog posts or articles. Uses CardStack for adaptive layout (grid for 1-4 items, carousel for 5+). Card structure: Image with overlay arrow button → Category badge → Title → Excerpt → Author (avatar + name + date). Image has zoom effect on hover. Category displayed in primary-button badge. Optional header with title, description, tag, and buttons via CardStack. Best for blog pages, news sections, or article listings.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Latest Articles",
+        "minChars": 2,
+        "maxChars": 50
+      },
+      "description": {
+        "required": true,
+        "example": "Insights and updates from our team",
+        "minChars": 5,
+        "maxChars": 250
+      },
+      "tag": {
+        "required": false,
+        "example": "Blog",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "blogRules": {
+      "blogs": {
+        "required": true,
+        "minItems": 1,
+        "example": "[{\"id\": \"1\", \"category\": \"Design\", \"title\": \"UX review presentations\", \"excerpt\": \"How to create compelling presentations\", \"imageSrc\": \"/blog-1.jpg\", \"authorName\": \"John Doe\", \"authorAvatar\": \"/avatar-1.jpg\", \"date\": \"20 Jan 2025\"}]",
+        "note": "Array of blog items. Each item requires id, category, title, excerpt, imageSrc, authorName, authorAvatar, and date."
+      }
+    }
+  },
+  "propsSchema": {
+    "blogs": "Array<{ id: string, category: string, title: string, excerpt: string, imageSrc: string, imageAlt?: string, authorName: string, authorAvatar: string, date: string, onBlogClick?: () => void }> - Blog card items",
+    "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+    "uniformGridCustomHeightClasses?": "string",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Blog section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "imageWrapperClassName?": "string",
+    "imageClassName?": "string",
+    "categoryClassName?": "string",
+    "cardTitleClassName?": "string",
+    "excerptClassName?": "string",
+    "authorContainerClassName?": "string",
+    "authorAvatarClassName?": "string",
+    "authorNameClassName?": "string",
+    "dateClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+    "textBoxTitleImageClassName?": "string - For styling images in inline-image layout",
+    "textBoxDescriptionClassName?": "string",
+    "gridClassName?": "string",
+    "carouselClassName?": "string",
+    "controlsClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string"
+  },
+  "usageExample": "<BlogCardOne blogs={[{id: '1', category: 'Design', title: 'UX review presentations', excerpt: 'How to create compelling presentations that wow your audience', imageSrc: '/blog-1.jpg', authorName: 'Olivia Rhye', authorAvatar: '/avatar-1.jpg', date: '20 Jan 2025', onBlogClick: () => console.log('clicked')}]} title=\"Latest Articles\" description=\"Stay updated with our latest insights\" textboxLayout=\"default\" useInvertedBackground={false} animationType=\"slide-up\" carouselMode=\"buttons\" />",
+  "do": [
+    "Use for blog listings",
+    "Use for article grids",
+    "Requires blogs[]",
+    "Requires titleSegments?[]",
+    "Requires buttons?[]"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/BlogCardThree.json b/registry/components/BlogCardThree.json
new file mode 100644
index 0000000..0807ad9
--- /dev/null
+++ b/registry/components/BlogCardThree.json
@@ -0,0 +1,94 @@
+{
+  "name": "BlogCardThree",
+  "description": "Blog section with vertical card layout featuring tag, title, excerpt, optional author info, and media with overlay button.",
+  "details": "Use for featured blog posts with prominent visual layout. Uses CardStack for adaptive layout (grid for 1-4 items, carousel for 5+). Card structure: Tag → Title → Excerpt → Optional Author (avatar + name + date) → Media content with overlay arrow button. Author info is optional and displays only when authorName or date is provided. Best for hero blog sections or featured articles.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Featured Articles",
+        "minChars": 2,
+        "maxChars": 50
+      },
+      "description": {
+        "required": true,
+        "example": "Explore our latest insights",
+        "minChars": 5,
+        "maxChars": 250
+      },
+      "tag": {
+        "required": false,
+        "example": "Blog",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "blogRules": {
+      "blogs": {
+        "required": true,
+        "minItems": 1,
+        "example": "[{\"id\": \"1\", \"category\": \"Software Development\", \"title\": \"Redefining Digital Performance\", \"excerpt\": \"Optimizing speed and scalability\", \"imageSrc\": \"/blog-1.jpg\"}]",
+        "note": "Array of blog items. Each item requires id, category, title, excerpt, and imageSrc."
+      }
+    }
+  },
+  "propsSchema": {
+    "blogs": "Array<{ id: string, category: string, title: string, excerpt: string, imageSrc: string, imageAlt?: string, authorName: string, authorAvatar: string, date: string, onBlogClick?: () => void }> - Blog card items",
+    "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+    "uniformGridCustomHeightClasses?": "string (default: 'min-h-[600px]')",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Blog section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "cardContentClassName?": "string",
+    "categoryTagClassName?": "string",
+    "cardTitleClassName?": "string",
+    "excerptClassName?": "string",
+    "authorContainerClassName?": "string",
+    "authorAvatarClassName?": "string",
+    "authorNameClassName?": "string",
+    "dateClassName?": "string",
+    "mediaWrapperClassName?": "string",
+    "mediaClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+    "textBoxTitleImageClassName?": "string - For styling images in inline-image layout",
+    "textBoxDescriptionClassName?": "string",
+    "gridClassName?": "string",
+    "carouselClassName?": "string",
+    "controlsClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string"
+  },
+  "usageExample": "<BlogCardThree blogs={[{id: '1', category: 'Software Development', title: 'Redefining Digital Performance at Scale', excerpt: 'Optimizing speed, scalability, and user experience.', imageSrc: '/blog-1.jpg', authorName: 'Alex Chen', authorAvatar: '/avatar.jpg', date: 'Jan 15, 2025', onBlogClick: () => console.log('clicked')}]} title=\"Featured Articles\" description=\"Explore our latest insights\" textboxLayout=\"default\" useInvertedBackground={false} animationType=\"slide-up\" />",
+  "do": [
+    "Use for landing pages",
+    "Use for feature showcases",
+    "Use for capability displays",
+    "Use for blog listings",
+    "Use for article grids",
+    "Requires blogs[]",
+    "Requires titleSegments?[]",
+    "Requires buttons?[]"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/BlogCardTwo.json b/registry/components/BlogCardTwo.json
new file mode 100644
index 0000000..f604166
--- /dev/null
+++ b/registry/components/BlogCardTwo.json
@@ -0,0 +1,88 @@
+{
+  "name": "BlogCardTwo",
+  "description": "Blog section with card grid/carousel layout featuring image, optional author avatar, author/date, title, excerpt, and category badge(s).",
+  "details": "Use for displaying blog posts with category categorization. Uses CardStack for adaptive layout (grid for 1-4 items, carousel for 5+). Card structure: Image with overlay arrow button → Optional Author Avatar + Author & Date → Title → Excerpt → Category badge(s). Image has zoom effect on hover. Category supports single string or array for multiple badges displayed as primary-button badges at bottom. Author avatar is optional. Optional header with title, description, tag, and buttons via CardStack. Best for blog pages with category filtering.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Latest Articles",
+        "minChars": 2,
+        "maxChars": 50
+      },
+      "description": {
+        "required": true,
+        "example": "Insights and updates from our team",
+        "minChars": 5,
+        "maxChars": 250
+      },
+      "tag": {
+        "required": false,
+        "example": "Blog",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "blogRules": {
+      "blogs": {
+        "required": true,
+        "minItems": 1,
+        "example": "[{\"id\": \"1\", \"category\": [\"Design\", \"Research\"], \"title\": \"UX review presentations\", \"excerpt\": \"How to create compelling presentations\", \"imageSrc\": \"/blog-1.jpg\", \"authorName\": \"Olivia Rhye\", \"authorAvatar\": \"/avatar.jpg\", \"date\": \"20 Jan 2025\"}]",
+        "note": "Array of blog items. Each item requires id, category (string or string[]), title, excerpt, imageSrc, authorName, and date. authorAvatar is optional."
+      }
+    }
+  },
+  "propsSchema": {
+    "blogs": "Array<{ id: string, category: string | string[], title: string, excerpt: string, imageSrc: string, imageAlt?: string, authorName: string, authorAvatar: string, date: string, onBlogClick?: () => void }> - Blog card items",
+    "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+    "uniformGridCustomHeightClasses?": "string",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Blog section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "imageWrapperClassName?": "string",
+    "imageClassName?": "string",
+    "authorAvatarClassName?": "string",
+    "authorDateClassName?": "string",
+    "cardTitleClassName?": "string",
+    "excerptClassName?": "string",
+    "categoryClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+    "textBoxTitleImageClassName?": "string - For styling images in inline-image layout",
+    "textBoxDescriptionClassName?": "string",
+    "gridClassName?": "string",
+    "carouselClassName?": "string",
+    "controlsClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string"
+  },
+  "usageExample": "<BlogCardTwo blogs={[{id: '1', category: ['Design', 'Research'], title: 'UX review presentations', excerpt: 'How to create compelling presentations that wow your audience', imageSrc: '/blog-1.jpg', authorName: 'Olivia Rhye', authorAvatar: '/avatar.jpg', date: '20 Jan 2025', onBlogClick: () => console.log('clicked')}]} title=\"Latest Articles\" description=\"Stay updated with our latest insights\" textboxLayout=\"default\" useInvertedBackground={false} animationType=\"slide-up\" carouselMode=\"buttons\" />",
+  "do": [
+    "Use for blog listings",
+    "Use for article grids",
+    "Requires blogs[]",
+    "Requires titleSegments?[]",
+    "Requires buttons?[]"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/BlurBottomBackground.json b/registry/components/BlurBottomBackground.json
new file mode 100644
index 0000000..878ae66
--- /dev/null
+++ b/registry/components/BlurBottomBackground.json
@@ -0,0 +1,20 @@
+{
+  "name": "BlurBottomBackground",
+  "description": "Backdrop blur effect positioned at the bottom of the page with linear gradient mask.",
+  "details": "Use for clean, minimal backgrounds with a subtle blur effect at the bottom of the page. Features fixed positioning with backdrop-blur-sm effect at the bottom using linear gradient mask (to bottom, transparent to black 60%). The blur is h-50 in height, fixed at bottom-left (left-0 bottom-0). Creates a frosted glass effect rising from the bottom of the page. Useful for creating depth and visual interest on pages with bottom-aligned content or CTAs without adding background color.",
+  "constraints": {},
+  "propsSchema": {
+    "className?": "string"
+  },
+  "usageExample": "<BlurBottomBackground />",
+  "do": [
+    "Use for feature showcases",
+    "Use for capability displays"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/ButtonBounceEffect.json b/registry/components/ButtonBounceEffect.json
new file mode 100644
index 0000000..13c976a
--- /dev/null
+++ b/registry/components/ButtonBounceEffect.json
@@ -0,0 +1,36 @@
+{
+  "name": "ButtonBounceEffect",
+  "description": "CTA button with bouncing character animation on hover.",
+  "details": "Use for primary or secondary CTAs where playful motion adds personality. On hover, each character bounces with a slight delay creating a wave effect. Includes background styling with bgClassName.",
+  "constraints": {
+    "textRules": {
+      "text": {
+        "required": true,
+        "example": "Get Started",
+        "minChars": 2,
+        "maxChars": 25
+      }
+    }
+  },
+  "propsSchema": {
+    "text": "string",
+    "onClick?": "() => void",
+    "href?": "string - External URLs open in new tab, internal values scroll to section",
+    "className?": "string",
+    "bgClassName?": "string",
+    "textClassName?": "string",
+    "disabled?": "boolean (default: false)",
+    "ariaLabel?": "string",
+    "type?": "'button' | 'submit' | 'reset' (default: 'button')"
+  },
+  "usageExample": "<ButtonBounceEffect text=\"Get Started\" href=\"contact\" />",
+  "do": [
+    "Use for general use"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/ButtonDirectionalHover.json b/registry/components/ButtonDirectionalHover.json
new file mode 100644
index 0000000..6669c3b
--- /dev/null
+++ b/registry/components/ButtonDirectionalHover.json
@@ -0,0 +1,37 @@
+{
+  "name": "ButtonDirectionalHover",
+  "description": "CTA button with a circle that expands from the mouse entry point on hover.",
+  "details": "Use for CTAs where directional awareness adds visual interest. On hover, a circle expands from where the cursor entered the button, creating a fluid reveal effect. The circleClassName controls the expanding circle color (bg-accent for primary, bg-accent/10 for secondary).",
+  "constraints": {
+    "textRules": {
+      "text": {
+        "required": true,
+        "example": "Get Started",
+        "minChars": 2,
+        "maxChars": 25
+      }
+    }
+  },
+  "propsSchema": {
+    "text": "string",
+    "onClick?": "() => void",
+    "href?": "string - External URLs open in new tab, internal values scroll to section",
+    "className?": "string",
+    "bgClassName?": "string",
+    "textClassName?": "string",
+    "circleClassName?": "string - Controls the expanding circle color",
+    "disabled?": "boolean (default: false)",
+    "ariaLabel?": "string",
+    "type?": "'button' | 'submit' | 'reset' (default: 'button')"
+  },
+  "usageExample": "<ButtonDirectionalHover text=\"Get Started\" href=\"contact\" />",
+  "do": [
+    "Use for general use"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/ButtonElasticEffect.json b/registry/components/ButtonElasticEffect.json
new file mode 100644
index 0000000..1b6711e
--- /dev/null
+++ b/registry/components/ButtonElasticEffect.json
@@ -0,0 +1,35 @@
+{
+  "name": "ButtonElasticEffect",
+  "description": "CTA button with elastic scale animation on hover.",
+  "details": "Use for CTAs where a springy, elastic feel adds playfulness. On hover, the button scales with an elastic easing that overshoots and settles, creating a bouncy tactile response.",
+  "constraints": {
+    "textRules": {
+      "text": {
+        "required": true,
+        "example": "Get Started",
+        "minChars": 2,
+        "maxChars": 25
+      }
+    }
+  },
+  "propsSchema": {
+    "text": "string",
+    "onClick?": "() => void",
+    "href?": "string - External URLs open in new tab, internal values scroll to section",
+    "className?": "string",
+    "textClassName?": "string",
+    "disabled?": "boolean (default: false)",
+    "ariaLabel?": "string",
+    "type?": "'button' | 'submit' | 'reset' (default: 'button')"
+  },
+  "usageExample": "<ButtonElasticEffect text=\"Get Started\" href=\"contact\" />",
+  "do": [
+    "Use for general use"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/ButtonExpandHover.json b/registry/components/ButtonExpandHover.json
new file mode 100644
index 0000000..7f205db
--- /dev/null
+++ b/registry/components/ButtonExpandHover.json
@@ -0,0 +1,37 @@
+{
+  "name": "ButtonExpandHover",
+  "description": "CTA button with expanding background animation from right to left on hover, with a fixed arrow icon.",
+  "details": "Use for CTAs where a smooth expanding effect adds visual interest. On hover (desktop only), the background expands from right to left across the button while the text transitions color. The arrow icon remains fixed on the right side throughout the animation. Mobile shows static button. Uses className for base button styling (primary-button or secondary-button), with iconClassName for arrow icon color and iconBgClassName for expanding background (automatically set via buttonUtils.ts).",
+  "constraints": {
+    "textRules": {
+      "text": {
+        "required": true,
+        "example": "Get Started",
+        "minChars": 2,
+        "maxChars": 25
+      }
+    }
+  },
+  "propsSchema": {
+    "text": "string",
+    "onClick?": "() => void",
+    "href?": "string - External URLs open in new tab, internal values scroll to section",
+    "className?": "string",
+    "textClassName?": "string - Applied to the text span (automatically includes base and hover colors in sections)",
+    "iconClassName?": "string - Applied to the arrow icon container (automatically set in sections)",
+    "iconBgClassName?": "string - Applied to the expanding background (automatically set in sections)",
+    "disabled?": "boolean (default: false)",
+    "ariaLabel?": "string",
+    "type?": "'button' | 'submit' | 'reset' (default: 'button')"
+  },
+  "usageExample": "<ButtonExpandHover text=\"Get Started\" href=\"contact\" />",
+  "do": [
+    "Use for general use"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/ButtonHoverBubble.json b/registry/components/ButtonHoverBubble.json
new file mode 100644
index 0000000..fce6b96
--- /dev/null
+++ b/registry/components/ButtonHoverBubble.json
@@ -0,0 +1,37 @@
+{
+  "name": "ButtonHoverBubble",
+  "description": "CTA button with expanding bubble animation where an arrow icon slides out and the text expands on hover.",
+  "details": "Use for CTAs where a playful expansion effect adds emphasis. On hover (desktop only), a circular arrow icon expands from the left while the text container slides into view. The initial state shows just the arrow on the right which transforms into the full button. Mobile shows static full button. Uses bgClassName for text container (primary-button for primary, secondary-button for secondary) and iconClassName for arrow icons (automatically set via buttonUtils.ts).",
+  "constraints": {
+    "textRules": {
+      "text": {
+        "required": true,
+        "example": "Contact Us",
+        "minChars": 2,
+        "maxChars": 25
+      }
+    }
+  },
+  "propsSchema": {
+    "text": "string",
+    "onClick?": "() => void",
+    "href?": "string - External URLs open in new tab, internal values scroll to section",
+    "className?": "string",
+    "bgClassName?": "string - Applied to the text container (automatically set in sections)",
+    "textClassName?": "string - Applied to the text span",
+    "iconClassName?": "string - Applied to both arrow icon containers (automatically set in sections)",
+    "disabled?": "boolean (default: false)",
+    "ariaLabel?": "string",
+    "type?": "'button' | 'submit' | 'reset' (default: 'button')"
+  },
+  "usageExample": "<ButtonHoverBubble text=\"Contact Us\" href=\"contact\" />",
+  "do": [
+    "Use for general use"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/ButtonHoverMagnetic.json b/registry/components/ButtonHoverMagnetic.json
new file mode 100644
index 0000000..220b495
--- /dev/null
+++ b/registry/components/ButtonHoverMagnetic.json
@@ -0,0 +1,36 @@
+{
+  "name": "ButtonHoverMagnetic",
+  "description": "CTA button that subtly follows the cursor with a magnetic hover effect.",
+  "details": "Use when you want a playful, high-affordance interaction. On hover, the button shifts toward the cursor and recenters on leave. Keep labels short; no multiline.",
+  "constraints": {
+    "textRules": {
+      "text": {
+        "required": true,
+        "example": "Button",
+        "minChars": 2,
+        "maxChars": 25
+      }
+    }
+  },
+  "propsSchema": {
+    "text": "string",
+    "onClick?": "() => void",
+    "href?": "string - External URLs open in new tab, internal values scroll to section",
+    "className?": "string",
+    "textClassName?": "string",
+    "strengthFactor?": "number (default: 20)",
+    "disabled?": "boolean (default: false)",
+    "ariaLabel?": "string",
+    "type?": "'button' | 'submit' | 'reset' (default: 'button')"
+  },
+  "usageExample": "<ButtonHoverMagnetic text=\"Button\" href=\"contact\" />",
+  "do": [
+    "Use for general use"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/ButtonIconArrow.json b/registry/components/ButtonIconArrow.json
new file mode 100644
index 0000000..90d87a5
--- /dev/null
+++ b/registry/components/ButtonIconArrow.json
@@ -0,0 +1,36 @@
+{
+  "name": "ButtonIconArrow",
+  "description": "Button with a trailing arrow icon that transforms on hover.",
+  "details": "Use for CTAs where a subtle icon transformation helps indicate forward navigation. The arrow icon transitions into a square on hover/focus. Keep label short and simple.",
+  "constraints": {
+    "textRules": {
+      "text": {
+        "required": true,
+        "example": "Button",
+        "minChars": 2,
+        "maxChars": 25
+      }
+    }
+  },
+  "propsSchema": {
+    "text": "string",
+    "onClick?": "() => void",
+    "href?": "string - External URLs open in new tab, internal values scroll to section",
+    "className?": "string",
+    "textClassName?": "string",
+    "iconClassName?": "string",
+    "disabled?": "boolean (default: false)",
+    "ariaLabel?": "string",
+    "type?": "'button' | 'submit' | 'reset' (default: 'button')"
+  },
+  "usageExample": "<ButtonIconArrow text=\"Continue\" href=\"next-section\" />",
+  "do": [
+    "Use for general use"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/ButtonShiftHover.json b/registry/components/ButtonShiftHover.json
new file mode 100644
index 0000000..33a1719
--- /dev/null
+++ b/registry/components/ButtonShiftHover.json
@@ -0,0 +1,38 @@
+{
+  "name": "ButtonShiftHover",
+  "description": "CTA button where the label nudges upward on hover and a trailing dot fills from outline to solid.",
+  "details": "Use for primary or secondary CTAs that benefit from a gentle motion cue. Keep the label short and single‑line. The trailing dot is purely decorative and fills on hover.",
+  "constraints": {
+    "textRules": {
+      "text": {
+        "required": true,
+        "example": "Get Started",
+        "minChars": 2,
+        "maxChars": 25
+      }
+    }
+  },
+  "propsSchema": {
+    "text": "string",
+    "onClick?": "() => void",
+    "href?": "string - External URLs open in new tab, internal values scroll to section",
+    "className?": "string",
+    "bgClassName?": "string",
+    "textClassName?": "string",
+    "disabled?": "boolean (default: false)",
+    "ariaLabel?": "string",
+    "type?": "'button' | 'submit' | 'reset' (default: 'button')"
+  },
+  "usageExample": "<ButtonShiftHover text=\"Get Started\" href=\"pricing\" />",
+  "do": [
+    "Use for general use"
+  ],
+  "dont": [
+    "Do not use multiple items"
+  ],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/ButtonTextShift.json b/registry/components/ButtonTextShift.json
new file mode 100644
index 0000000..414e2c8
--- /dev/null
+++ b/registry/components/ButtonTextShift.json
@@ -0,0 +1,36 @@
+{
+  "name": "ButtonTextShift",
+  "description": "CTA button with synchronized character shift animation on hover.",
+  "details": "Use for primary or secondary CTAs where uniform text motion adds emphasis. Similar to ButtonTextStagger but all characters shift together simultaneously instead of in sequence. Includes background styling with bgClassName.",
+  "constraints": {
+    "textRules": {
+      "text": {
+        "required": true,
+        "example": "Get Started",
+        "minChars": 2,
+        "maxChars": 25
+      }
+    }
+  },
+  "propsSchema": {
+    "text": "string",
+    "onClick?": "() => void",
+    "href?": "string - External URLs open in new tab, internal values scroll to section",
+    "className?": "string",
+    "bgClassName?": "string",
+    "textClassName?": "string",
+    "disabled?": "boolean (default: false)",
+    "ariaLabel?": "string",
+    "type?": "'button' | 'submit' | 'reset' (default: 'button')"
+  },
+  "usageExample": "<ButtonTextShift text=\"Get Started\" href=\"contact\" />",
+  "do": [
+    "Use for general use"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/ButtonTextStagger.json b/registry/components/ButtonTextStagger.json
new file mode 100644
index 0000000..876fcf9
--- /dev/null
+++ b/registry/components/ButtonTextStagger.json
@@ -0,0 +1,37 @@
+{
+  "name": "ButtonTextStagger",
+  "description": "CTA button with character stagger animation on hover.",
+  "details": "Use for primary or secondary CTAs where subtle text motion adds emphasis. On hover, the label's characters animate in sequence (stagger). Includes background styling.",
+  "constraints": {
+    "textRules": {
+      "text": {
+        "required": true,
+        "example": "Get Started",
+        "minChars": 2,
+        "maxChars": 25
+      }
+    }
+  },
+  "propsSchema": {
+    "text": "string",
+    "onClick?": "() => void",
+    "href?": "string - External URLs open in new tab, internal values scroll to section",
+    "className?": "string",
+    "bgClassName?": "string",
+    "textClassName?": "string",
+    "disabled?": "boolean (default: false)",
+    "ariaLabel?": "string",
+    "type?": "'button' | 'submit' | 'reset' (default: 'button')",
+    "scrollToSection?": "boolean"
+  },
+  "usageExample": "<ButtonTextStagger text=\"Get Started\" href=\"https://example.com\" />",
+  "do": [
+    "Use for general use"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/ButtonTextUnderline.json b/registry/components/ButtonTextUnderline.json
new file mode 100644
index 0000000..2377476
--- /dev/null
+++ b/registry/components/ButtonTextUnderline.json
@@ -0,0 +1,34 @@
+{
+  "name": "ButtonTextUnderline",
+  "description": "Text-only button where an underline animates in on hover.",
+  "details": "Use for inline or minimal CTAs or links where you want the hover state to reveal affordance without altering color or layout. The underline appears smoothly under the label when hovered.",
+  "constraints": {
+    "textRules": {
+      "text": {
+        "required": true,
+        "example": "Learn more",
+        "minChars": 2,
+        "maxChars": 25
+      }
+    }
+  },
+  "propsSchema": {
+    "text": "string",
+    "onClick?": "() => void",
+    "href?": "string - External URLs open in new tab, internal values scroll to section",
+    "className?": "string",
+    "disabled?": "boolean (default: false)",
+    "ariaLabel?": "string",
+    "type?": "'button' | 'submit' | 'reset' (default: 'button')"
+  },
+  "usageExample": "<ButtonTextUnderline text=\"Learn more\" href=\"about\" />",
+  "do": [
+    "Use for general use"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/CardStack.json b/registry/components/CardStack.json
new file mode 100644
index 0000000..402095d
--- /dev/null
+++ b/registry/components/CardStack.json
@@ -0,0 +1,77 @@
+{
+  "name": "CardStack",
+  "description": "Adaptive layout component that displays children in a grid or carousel based on item count.",
+  "details": "Use for displaying collections of cards. Automatically switches between grid (1-4 items) and carousel (5+ items). Carousel offers auto-scroll or button controls (recommended: keep default buttons). Optional header supports centered or split textbox layout (split: tag + title + description left, buttons right; split-actions: tag + title left, buttons only right; split-description: tag + title left, description only right).",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Features",
+        "minChars": 2,
+        "maxChars": 50
+      },
+      "description": {
+        "required": true,
+        "example": "Discover our products",
+        "minChars": 5,
+        "maxChars": 300
+      },
+      "tag": {
+        "required": false,
+        "example": "New",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    }
+  },
+  "propsSchema": {
+    "children": "React.ReactNode",
+    "mode?": "'auto' | 'buttons' (default: 'buttons')",
+    "gridVariant?": "'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right' | 'two-items-per-row' (default: 'uniform-all-items-equal')",
+    "uniformGridCustomHeightClasses?": "string",
+    "gridRowsClassName?": "string",
+    "itemHeightClassesOverride?": "Array<string>",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d' (required - controls GSAP scroll animations with stagger effect)",
+    "supports3DAnimation?": "boolean (default: false)",
+    "carouselThreshold?": "number (default: 5)",
+    "bottomContent?": "React.ReactNode",
+    "title?": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description?": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground?": "boolean",
+    "ariaLabel?": "string (default: 'Card stack')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "gridClassName?": "string",
+    "carouselClassName?": "string",
+    "carouselItemClassName?": "string",
+    "controlsClassName?": "string",
+    "textBoxClassName?": "string",
+    "titleClassName?": "string",
+    "titleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+    "titleImageClassName?": "string - For styling images in inline-image layout",
+    "descriptionClassName?": "string",
+    "tagClassName?": "string",
+    "buttonContainerClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string"
+  },
+  "usageExample": "<CardStack title=\"Features\" buttons={[{ text: 'View All', href: 'features' }]} animationType=\"slide-up\" textboxLayout=\"default\">{/* Card components */}</CardStack>",
+  "do": [
+    "Use for general use",
+    "Requires titleSegments?[]",
+    "Requires buttons?[]"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/CircleGradientBackground.json b/registry/components/CircleGradientBackground.json
new file mode 100644
index 0000000..b3e89f8
--- /dev/null
+++ b/registry/components/CircleGradientBackground.json
@@ -0,0 +1,21 @@
+{
+  "name": "CircleGradientBackground",
+  "description": "Two large gradient circles positioned diagonally in corners.",
+  "details": "Use for soft, modern backgrounds with subtle color accents. Features two blurred gradient circles in diagonal corners (primary: top-right + bottom-left, secondary: top-left + bottom-right). Circles are responsive (w-100 mobile, md:w-70 desktop) with 10% opacity. Uses background-accent color.",
+  "constraints": {},
+  "propsSchema": {
+    "diagonal?": "'primary' | 'secondary' (default: 'primary')",
+    "className?": "string"
+  },
+  "usageExample": "<CircleGradientBackground diagonal=\"primary\" />",
+  "do": [
+    "Use for feature showcases",
+    "Use for capability displays"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/ContactCTA.json b/registry/components/ContactCTA.json
new file mode 100644
index 0000000..1488c80
--- /dev/null
+++ b/registry/components/ContactCTA.json
@@ -0,0 +1,70 @@
+{
+  "name": "ContactCTA",
+  "description": "Centered contact CTA section with tag, title, description, and action buttons in a card container with background support.",
+  "details": "Use for call-to-action contact sections with full textbox support. Features a centered card layout with tag (optional icon), title, description, and buttons. Supports multiple background variants through HeroBackgrounds. Best for conversion-focused contact sections at the end of pages.",
+  "constraints": {
+    "textRules": {
+      "tag": {
+        "required": true,
+        "example": "Get in Touch",
+        "minChars": 2,
+        "maxChars": 30
+      },
+      "title": {
+        "required": true,
+        "example": "Ready to Build Your Next Project?",
+        "minChars": 5,
+        "maxChars": 100
+      },
+      "description": {
+        "required": true,
+        "example": "Let's work together to create something amazing. Our team is ready to help you bring your vision to life.",
+        "minChars": 10,
+        "maxChars": 300
+      }
+    },
+    "buttonRules": {
+      "maxButtons": 2,
+      "required": true,
+      "note": "At least one button is required. Supports up to 2 buttons with gap-4 spacing."
+    }
+  },
+  "propsSchema": {
+    "tag": "string (required)",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "title": "string (required)",
+    "description": "string (required)",
+    "buttons": "Array<{text: string, onClick?: () => void, href?: string}> (required)",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "background": "ContactCTABackgroundProps = { variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Contact section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "contentClassName?": "string - Card content wrapper styling",
+    "textBoxClassName?": "string",
+    "titleClassName?": "string",
+    "descriptionClassName?": "string",
+    "tagClassName?": "string",
+    "buttonContainerClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string"
+  },
+  "usageExample": "<ContactCTA tag=\"Get in Touch\" tagIcon={Mail} title=\"Ready to Build Your Next Project?\" description=\"Let's work together to create something amazing.\" buttons={[{ text: 'Contact Us', href: '/contact' }, { text: 'View Portfolio', href: '/portfolio' }]} background={{ variant: 'plain' }} useInvertedBackground={false} />",
+  "do": [
+    "Use for call-to-action contact sections",
+    "Place at the end of pages for conversion",
+    "Use with appropriate background variant",
+    "Requires at least one button"
+  ],
+  "dont": [
+    "Do not use without buttons",
+    "Do not use for general content sections"
+  ],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/ContactCenter.json b/registry/components/ContactCenter.json
new file mode 100644
index 0000000..15c1061
--- /dev/null
+++ b/registry/components/ContactCenter.json
@@ -0,0 +1,87 @@
+{
+  "name": "ContactCenter",
+  "description": "Centered contact section with tag, animated title and description, email signup form, and terms text.",
+  "details": "Use for newsletter signups, contact forms, or email capture. Features centered layout with tag (with optional icon), animated title and description using ThemeProvider's defaultTextAnimation, EmailSignupForm component, and customizable terms text. Content is placed in a card container with rounded-theme-capped styling. Ideal for prominently placed contact/signup sections with strong visual emphasis.",
+  "constraints": {
+    "textRules": {
+      "tag": {
+        "required": true,
+        "example": "Newsletter",
+        "minChars": 2,
+        "maxChars": 20
+      },
+      "title": {
+        "required": true,
+        "example": "Medium length heading goes here",
+        "minChars": 4,
+        "maxChars": 50
+      },
+      "description": {
+        "required": true,
+        "example": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
+        "minChars": 20,
+        "maxChars": 200
+      },
+      "inputPlaceholder": {
+        "required": false,
+        "default": "Enter your email",
+        "example": "Your email address",
+        "minChars": 5,
+        "maxChars": 30
+      },
+      "buttonText": {
+        "required": false,
+        "default": "Sign Up",
+        "example": "Subscribe",
+        "minChars": 2,
+        "maxChars": 15
+      },
+      "termsText": {
+        "required": false,
+        "default": "By clicking Sign Up you're confirming that you agree with our Terms and Conditions.",
+        "example": "We respect your privacy. Unsubscribe at any time.",
+        "minChars": 10,
+        "maxChars": 150
+      }
+    }
+  },
+  "propsSchema": {
+    "tag": "string",
+    "title": "string",
+    "description": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }",
+    "useInvertedBackground": "boolean",
+    "inputPlaceholder?": "string (default: 'Enter your email')",
+    "buttonText?": "string (default: 'Sign Up')",
+    "termsText?": "string (default: 'By clicking Sign Up you're confirming that you agree with our Terms and Conditions.')",
+    "onSubmit?": "(email: string) => void",
+    "ariaLabel?": "string (default: 'Contact section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "contentClassName?": "string",
+    "tagClassName?": "string",
+    "titleClassName?": "string",
+    "descriptionClassName?": "string",
+    "formWrapperClassName?": "string",
+    "formClassName?": "string",
+    "inputClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string",
+    "termsClassName?": "string"
+  },
+  "usageExample": "<ContactCenter tag=\"Newsletter\" title=\"Stay updated with our latest news\" description=\"Subscribe to our newsletter for weekly updates and exclusive content.\" background={{ variant: 'rotated-rays-animated-grid' }} useInvertedBackground={false} onSubmit={(email) => console.log(email)} />",
+  "do": [
+    "Use for feature showcases",
+    "Use for capability displays",
+    "Use for contact pages",
+    "Use for lead generation"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/ContactForm.json b/registry/components/ContactForm.json
new file mode 100644
index 0000000..b19a984
--- /dev/null
+++ b/registry/components/ContactForm.json
@@ -0,0 +1,83 @@
+{
+  "name": "ContactForm",
+  "description": "Complete contact form component with tag, animated title and description, email signup form, and terms text.",
+  "details": "Use for email signup sections with full context and branding. Features Tag component, TextAnimation for title and description using ThemeProvider defaults, EmailSignupForm for input, and terms/conditions text below. Supports centered layout for hero-style presentation. Returns email string on submit.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Join our newsletter",
+        "minChars": 4,
+        "maxChars": 60
+      },
+      "description": {
+        "required": true,
+        "example": "Get the latest updates and exclusive content delivered to your inbox",
+        "minChars": 10,
+        "maxChars": 200
+      },
+      "tag": {
+        "required": true,
+        "example": "Newsletter",
+        "minChars": 2,
+        "maxChars": 30
+      },
+      "inputPlaceholder": {
+        "required": false,
+        "default": "Enter your email",
+        "example": "Your email address",
+        "minChars": 5,
+        "maxChars": 50
+      },
+      "buttonText": {
+        "required": false,
+        "default": "Sign Up",
+        "example": "Subscribe",
+        "minChars": 2,
+        "maxChars": 15
+      },
+      "termsText": {
+        "required": false,
+        "default": "By clicking Sign Up you're confirming that you agree with our Terms and Conditions.",
+        "example": "We respect your privacy. Unsubscribe anytime.",
+        "minChars": 10,
+        "maxChars": 200
+      }
+    }
+  },
+  "propsSchema": {
+    "title": "string (required)",
+    "description": "string (required)",
+    "tag": "string (required)",
+    "tagIcon?": "LucideIcon",
+    "inputPlaceholder?": "string (default: 'Enter your email')",
+    "buttonText?": "string (default: 'Sign Up')",
+    "termsText?": "string (default: 'By clicking Sign Up you're confirming that you agree with our Terms and Conditions.')",
+    "onSubmit?": "(email: string) => void",
+    "centered?": "boolean (default: false)",
+    "className?": "string",
+    "tagClassName?": "string",
+    "titleClassName?": "string",
+    "descriptionClassName?": "string",
+    "formWrapperClassName?": "string",
+    "formClassName?": "string",
+    "inputClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string",
+    "termsClassName?": "string"
+  },
+  "usageExample": "<ContactForm title=\"Join our newsletter\" description=\"Get updates\" tag=\"Newsletter\" onSubmit={(email) => console.log(email)} />",
+  "do": [
+    "Use for landing pages",
+    "Use for feature showcases",
+    "Use for capability displays",
+    "Use for contact pages",
+    "Use for lead generation"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/ContactSplit.json b/registry/components/ContactSplit.json
new file mode 100644
index 0000000..cc8d4eb
--- /dev/null
+++ b/registry/components/ContactSplit.json
@@ -0,0 +1,96 @@
+{
+  "name": "ContactSplit",
+  "description": "Split layout contact section with tag, animated title and description on one side, media content on the other, and email signup form.",
+  "details": "Use for newsletter signups or email capture with visual context. Features split layout with ContactForm (tag with optional icon, animated title and description, EmailSignupForm) on one side and image or video media on the other. Form is placed in a card with constrained width on larger screens. Media can be positioned left or right. Media uses fixed height on desktop. Ideal for contact sections that benefit from visual storytelling alongside the signup form.",
+  "constraints": {
+    "textRules": {
+      "tag": {
+        "required": true,
+        "example": "Newsletter",
+        "minChars": 2,
+        "maxChars": 20
+      },
+      "title": {
+        "required": true,
+        "example": "Medium length heading goes here",
+        "minChars": 4,
+        "maxChars": 50
+      },
+      "description": {
+        "required": true,
+        "example": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
+        "minChars": 20,
+        "maxChars": 200
+      },
+      "inputPlaceholder": {
+        "required": false,
+        "default": "Enter your email",
+        "example": "Your email address",
+        "minChars": 5,
+        "maxChars": 30
+      },
+      "buttonText": {
+        "required": false,
+        "default": "Sign Up",
+        "example": "Subscribe",
+        "minChars": 2,
+        "maxChars": 15
+      },
+      "termsText": {
+        "required": false,
+        "default": "By clicking Sign Up you're confirming that you agree with our Terms and Conditions.",
+        "example": "We respect your privacy. Unsubscribe at any time.",
+        "minChars": 10,
+        "maxChars": 150
+      }
+    }
+  },
+  "propsSchema": {
+    "tag": "string",
+    "title": "string",
+    "description": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }",
+    "useInvertedBackground": "boolean",
+    "imageSrc?": "string",
+    "videoSrc?": "string",
+    "imageAlt?": "string (default: '')",
+    "videoAriaLabel?": "string (default: 'Contact section video')",
+    "mediaAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "mediaPosition?": "'left' | 'right' (default: 'right')",
+    "inputPlaceholder?": "string (default: 'Enter your email')",
+    "buttonText?": "string (default: 'Sign Up')",
+    "termsText?": "string (default: 'By clicking Sign Up you're confirming that you agree with our Terms and Conditions.')",
+    "onSubmit?": "(email: string) => void",
+    "ariaLabel?": "string (default: 'Contact section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "contentClassName?": "string",
+    "contactFormClassName?": "string",
+    "tagClassName?": "string",
+    "titleClassName?": "string",
+    "descriptionClassName?": "string",
+    "formWrapperClassName?": "string",
+    "formClassName?": "string",
+    "inputClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string",
+    "termsClassName?": "string",
+    "mediaWrapperClassName?": "string",
+    "mediaClassName?": "string"
+  },
+  "usageExample": "<ContactSplit tag=\"Newsletter\" title=\"Stay updated\" description=\"Subscribe to our newsletter for weekly updates and exclusive content.\" background={{ variant: 'sparkles-gradient' }} useInvertedBackground={false} imageSrc=\"/contact.jpg\" onSubmit={(email) => console.log(email)} />",
+  "do": [
+    "Use for feature showcases",
+    "Use for capability displays",
+    "Use for contact pages",
+    "Use for lead generation"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/ContactSplitForm.json b/registry/components/ContactSplitForm.json
new file mode 100644
index 0000000..04e024e
--- /dev/null
+++ b/registry/components/ContactSplitForm.json
@@ -0,0 +1,69 @@
+{
+  "name": "ContactSplitForm",
+  "description": "Split layout contact form with animated title and description, dynamic input fields, optional textarea, submit button, and media content.",
+  "details": "Use for full contact forms with visual context. Features split layout with form (animated title and description, dynamic input fields array with minimum 2 required, optional textarea, submit button) on one side and image or video media on the other. All form inputs use secondary-button styling with rounded-theme borders. Media can be positioned left or right. On mobile, media displays with natural aspect ratio; on desktop, uses absolute positioning to match form height. Returns Record<string, string> with all field values on submit. Ideal for contact pages that combine detailed forms with visual storytelling.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Medium length heading goes here",
+        "minChars": 4,
+        "maxChars": 50
+      },
+      "description": {
+        "required": true,
+        "example": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
+        "minChars": 20,
+        "maxChars": 200
+      },
+      "buttonText": {
+        "required": false,
+        "default": "Submit",
+        "example": "Send Message",
+        "minChars": 2,
+        "maxChars": 15
+      }
+    }
+  },
+  "propsSchema": {
+    "title": "string",
+    "description": "string",
+    "inputs": "Array<{ name: string, type: string, placeholder: string, required?: boolean, className?: string }> - Form input fields (min 2 required)",
+    "multiSelect?": "{ name: string, label: string, options: string[] } - Optional multi-select dropdown field",
+    "textarea?": "{ name: string, placeholder: string, rows?: number, required?: boolean, className?: string } - Optional textarea field",
+    "useInvertedBackground": "boolean",
+    "imageSrc?": "string",
+    "videoSrc?": "string",
+    "imageAlt?": "string (default: '')",
+    "videoAriaLabel?": "string (default: 'Contact section video')",
+    "mediaAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal' (default: 'none')",
+    "mediaPosition?": "'left' | 'right' (default: 'right')",
+    "buttonText?": "string (default: 'Submit')",
+    "onSubmit?": "(data: Record<string, string>) => void",
+    "ariaLabel?": "string (default: 'Contact section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "contentClassName?": "string",
+    "formCardClassName?": "string",
+    "titleClassName?": "string",
+    "descriptionClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string",
+    "mediaWrapperClassName?": "string",
+    "mediaClassName?": "string"
+  },
+  "usageExample": "// Wrap in ThemeProvider\n<ThemeProvider defaultButtonVariant=\"text-stagger\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"rounded\" background=\"aurora\" cardStyle=\"glass-elevated\" primaryButtonStyle=\"gradient\" secondaryButtonStyle=\"glass\">\n  <ContactSplitForm title=\"Get in touch\" description=\"We'd love to hear from you. Send us a message.\" inputs={[{ name: 'name', type: 'text', placeholder: 'Name', required: true }, { name: 'email', type: 'email', placeholder: 'Email', required: true }]} textarea={{ name: 'message', placeholder: 'Type your message...', rows: 5, required: true }} useInvertedBackground={false} imageSrc=\"/placeholders/placeholder-16-9.svg\" onSubmit={(data) => console.log(data)} />\n</ThemeProvider>",
+  "do": [
+    "Use for feature showcases",
+    "Use for capability displays",
+    "Use for contact pages",
+    "Use for lead generation",
+    "Requires inputs[]"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/ContactText.json b/registry/components/ContactText.json
new file mode 100644
index 0000000..8bf696e
--- /dev/null
+++ b/registry/components/ContactText.json
@@ -0,0 +1,56 @@
+{
+  "name": "ContactText",
+  "description": "Centered contact section with animated text and action buttons in a card container.",
+  "details": "Use for simple, focused contact call-to-actions with emphasis on messaging. Layout: Section wrapper with optional inverted background → Card container (w-content-width, card class, rounded-theme-capped, py-20 px-10) → Centered content area (w-3/4 on md+) with TextAnimation heading and buttons. Text uses GSAP scroll-triggered animation (words-trigger variant) with configurable animation type (entrance-slide, reveal-blur, or background-highlight). Supports up to 2 buttons with px-8 spacing in flex layout. Card background adapts to theme.cardStyle. Text color determined by shouldUseInvertedText utility based on useInvertedBackground and cardStyle. Best for clean contact sections, inquiry prompts, or call-to-action blocks with animated messaging.",
+  "constraints": {
+    "textRules": {
+      "text": {
+        "required": true,
+        "example": "Ready to start your next project? Let's create something amazing together.",
+        "minChars": 10,
+        "maxChars": 125
+      },
+      "animationType": {
+        "required": false,
+        "default": "entrance-slide",
+        "options": [
+          "entrance-slide",
+          "reveal-blur",
+          "background-highlight"
+        ],
+        "note": "GSAP scroll-triggered animation type for text"
+      }
+    },
+    "buttonRules": {
+      "maxButtons": 2,
+      "note": "Supports up to 2 buttons with px-8 spacing. Buttons use theme.defaultButtonVariant."
+    }
+  },
+  "propsSchema": {
+    "text": "string",
+    "animationType?": "'entrance-slide' | 'reveal-blur' | 'background-highlight' (default: 'entrance-slide')",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' } (required)",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Contact section')",
+    "className?": "string",
+    "containerClassName?": "string - Outer wrapper styling",
+    "contentClassName?": "string - Card content wrapper styling",
+    "textClassName?": "string - TextAnimation heading styling",
+    "buttonContainerClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string"
+  },
+  "usageExample": "<ContactText text=\"Ready to start your next project? Let's create something amazing together.\" animationType=\"entrance-slide\" buttons={[{ text: 'Get in Touch', href: '/contact' }, { text: 'View Portfolio', href: '/portfolio' }]} background={{ variant: 'plain' }} useInvertedBackground={false} />",
+  "do": [
+    "Use for contact pages",
+    "Use for lead generation",
+    "Requires buttons?[]"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/DotGridBackground.json b/registry/components/DotGridBackground.json
new file mode 100644
index 0000000..db2f129
--- /dev/null
+++ b/registry/components/DotGridBackground.json
@@ -0,0 +1,24 @@
+{
+  "name": "DotGridBackground",
+  "description": "Dot pattern background with radial gradient dots and optional 3D perspective effect.",
+  "details": "Use for subtle, modern backgrounds. Features dense dot grid (small: 100 dots, medium: 50 dots, large: 25 dots per 100vw). Optional perspectiveThreeD adds skew transform and radial mask. Uses background-accent color at 30% opacity. Has radial fade mask at 90%.",
+  "constraints": {},
+  "propsSchema": {
+    "size?": "'small' | 'medium' | 'large' (default: 'medium')",
+    "perspectiveThreeD?": "boolean (default: false)",
+    "className?": "string"
+  },
+  "usageExample": "<DotGridBackground size=\"medium\" perspectiveThreeD={false} />",
+  "do": [
+    "Use for feature showcases",
+    "Use for capability displays"
+  ],
+  "dont": [
+    "Do not use more than 4 items"
+  ],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/DownwardRaysBackground.json b/registry/components/DownwardRaysBackground.json
new file mode 100644
index 0000000..e46c3f8
--- /dev/null
+++ b/registry/components/DownwardRaysBackground.json
@@ -0,0 +1,28 @@
+{
+  "name": "DownwardRaysBackground",
+  "description": "Atmospheric light rays emanating from top center directly downward with blur and radial gradient effects, with optional grid overlay.",
+  "details": "Use for dramatic, atmospheric backgrounds with light rays cascading from above. Features 9 symmetrical rays with varying widths (15-40px), opacities, rotations fanning outward, and scales emanating from top center. Container is centered horizontally with 16px blur and masked with radial gradient for natural falloff. Includes 3 light sources for additional depth. Uses theme color via var(--color-primary-cta) for both rays and light sources. When animated=true, rays pulse between opacity 0 and their target opacity with staggered timing. When showGrid=true, displays a medium grid overlay (10vw spacing) that fades from top center. Perfect for hero sections, landing pages, or any area needing dramatic top-down lighting effects.",
+  "constraints": {},
+  "propsSchema": {
+    "animated": "boolean - Required. When true, rays animate with pulsing opacity. When false, rays display static opacity.",
+    "showGrid": "boolean - Required. When true, displays a grid overlay fading from top center. When false, no grid is shown.",
+    "className?": "string",
+    "containerClassName?": "string"
+  },
+  "usageExample": "<DownwardRaysBackground animated={true} showGrid={false} />",
+  "do": [
+    "Use for landing pages",
+    "Use for feature showcases",
+    "Use for capability displays",
+    "Use for statistics displays",
+    "Use for achievement showcases"
+  ],
+  "dont": [
+    "Do not use more than 4 items"
+  ],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/EmailSignupForm.json b/registry/components/EmailSignupForm.json
new file mode 100644
index 0000000..1ebe7e5
--- /dev/null
+++ b/registry/components/EmailSignupForm.json
@@ -0,0 +1,43 @@
+{
+  "name": "EmailSignupForm",
+  "description": "Compact email signup form with inline input and submit button in card container.",
+  "details": "Use for newsletter signups, waitlists, or email collection. Features inline layout with email input on left and submit button on right, all wrapped in a card with rounded-theme borders and 1-unit padding. Input is flex-1 to fill available space. Button uses ThemeProvider's defaultButtonVariant. Returns email string on submit.",
+  "constraints": {
+    "textRules": {
+      "inputPlaceholder": {
+        "required": false,
+        "default": "Enter your email",
+        "example": "Your email address",
+        "minChars": 5,
+        "maxChars": 50
+      },
+      "buttonText": {
+        "required": false,
+        "default": "Sign Up",
+        "example": "Subscribe",
+        "minChars": 2,
+        "maxChars": 15
+      }
+    }
+  },
+  "propsSchema": {
+    "inputPlaceholder?": "string (default: 'Enter your email')",
+    "buttonText?": "string (default: 'Sign Up')",
+    "onSubmit?": "(email: string) => void",
+    "className?": "string",
+    "inputClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string"
+  },
+  "usageExample": "<EmailSignupForm inputPlaceholder=\"Your email\" buttonText=\"Subscribe\" onSubmit={(email) => console.log(email)} />",
+  "do": [
+    "Use for feature showcases",
+    "Use for capability displays"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/FaqBase.json b/registry/components/FaqBase.json
new file mode 100644
index 0000000..5345603
--- /dev/null
+++ b/registry/components/FaqBase.json
@@ -0,0 +1,93 @@
+{
+  "name": "FaqBase",
+  "description": "FAQ section with accordion items and optional header.",
+  "details": "Use for displaying frequently asked questions in an expandable accordion format. Layout: Optional TextBox Header → Accordion List. Supports two animation types: 'smooth' (height transition) and 'instant' (immediate show/hide). Only one accordion item can be open at a time. Each FAQ requires a unique id, title (question), and content (answer). Content supports HTML for rich formatting. Optional header with title, description, tag, and buttons via CardStackTextBox. Best for FAQ pages, help sections, or any Q&A content.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Frequently Asked Questions",
+        "minChars": 2,
+        "maxChars": 50
+      },
+      "description": {
+        "required": true,
+        "example": "Find answers to common questions about our products and services",
+        "minChars": 5,
+        "maxChars": 250
+      },
+      "tag": {
+        "required": false,
+        "example": "Help",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "faqRules": {
+      "faqs": {
+        "required": true,
+        "minItems": 1,
+        "example": "[{\"id\": \"1\", \"title\": \"What is your return policy?\", \"content\": \"We offer a 30-day money-back guarantee.\"}]",
+        "note": "Array of FAQ items. Each item requires unique id, title (question), and content (answer with HTML support)."
+      },
+      "animationType": {
+        "required": false,
+        "default": "smooth",
+        "options": [
+          "smooth",
+          "instant"
+        ],
+        "note": "Animation type for accordion open/close. 'smooth' uses height transition, 'instant' shows/hides immediately."
+      }
+    }
+  },
+  "propsSchema": {
+    "faqs": "Array<{ id: string, title: string, content: string }> - FAQ items",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "faqsAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal' (required)",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground": "boolean",
+    "animationType?": "'smooth' | 'instant' (default: 'smooth')",
+    "showCard?": "boolean (default: true)",
+    "ariaLabel?": "string (default: 'FAQ section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "titleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+    "titleImageClassName?": "string - For styling images in inline-image layout",
+    "textBoxDescriptionClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string",
+    "faqsContainerClassName?": "string",
+    "accordionClassName?": "string",
+    "accordionTitleClassName?": "string",
+    "accordionIconContainerClassName?": "string",
+    "accordionIconClassName?": "string",
+    "accordionContentClassName?": "string",
+    "separatorClassName?": "string"
+  },
+  "usageExample": "<FaqBase faqs={[{id: '1', title: 'What is your return policy?', content: 'We offer a 30-day money-back guarantee on all our products.'}, {id: '2', title: 'How long does shipping take?', content: 'Standard shipping typically takes 5-7 business days.'}]} title=\"Frequently Asked Questions\" description=\"Find answers to common questions\" textboxLayout=\"default\" useInvertedBackground={false} faqsAnimation=\"slide-up\" />",
+  "do": [
+    "Use for help pages",
+    "Use for support sections",
+    "Requires faqs[]",
+    "Requires titleSegments?[]",
+    "Requires buttons?[]"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/FaqDouble.json b/registry/components/FaqDouble.json
new file mode 100644
index 0000000..05bd25a
--- /dev/null
+++ b/registry/components/FaqDouble.json
@@ -0,0 +1,92 @@
+{
+  "name": "FaqDouble",
+  "description": "FAQ section with two-column accordion layout and optional header.",
+  "details": "Use for displaying frequently asked questions in a two-column layout for better space utilization. Layout: Optional TextBox Header → Card Container with Two Columns of Accordions. FAQs are automatically split into two equal columns (first half in left column, second half in right). On mobile, columns stack vertically. Supports two animation types: 'smooth' (height transition) and 'instant' (immediate show/hide). Only one accordion item can be open at a time across both columns. Each FAQ requires a unique id, title (question), and content (answer). Content supports HTML for rich formatting. Card container has rounded-theme styling. Best for FAQ pages with many questions where horizontal space is available.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Frequently Asked Questions",
+        "minChars": 2,
+        "maxChars": 50
+      },
+      "description": {
+        "required": true,
+        "example": "Find answers to common questions about our products and services",
+        "minChars": 5,
+        "maxChars": 250
+      },
+      "tag": {
+        "required": false,
+        "example": "Help",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "faqRules": {
+      "faqs": {
+        "required": true,
+        "minItems": 1,
+        "example": "[{\"id\": \"1\", \"title\": \"What is your return policy?\", \"content\": \"We offer a 30-day money-back guarantee.\"}]",
+        "note": "Array of FAQ items. Each item requires unique id, title (question), and content (answer with HTML support). Items are automatically split into two columns."
+      },
+      "animationType": {
+        "required": false,
+        "default": "smooth",
+        "options": [
+          "smooth",
+          "instant"
+        ],
+        "note": "Animation type for accordion open/close. 'smooth' uses height transition, 'instant' shows/hides immediately."
+      }
+    }
+  },
+  "propsSchema": {
+    "faqs": "Array<{ id: string, title: string, content: string }> - FAQ items",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "faqsAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal' (required)",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground": "boolean",
+    "animationType?": "'smooth' | 'instant' (default: 'smooth')",
+    "ariaLabel?": "string (default: 'FAQ section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "titleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+    "titleImageClassName?": "string - For styling images in inline-image layout",
+    "textBoxDescriptionClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string",
+    "faqsContainerClassName?": "string",
+    "columnClassName?": "string",
+    "accordionClassName?": "string",
+    "accordionTitleClassName?": "string",
+    "accordionIconContainerClassName?": "string",
+    "accordionIconClassName?": "string",
+    "accordionContentClassName?": "string"
+  },
+  "usageExample": "<FaqDouble faqs={[{id: '1', title: 'What is your return policy?', content: 'We offer a 30-day money-back guarantee on all our products.'}, {id: '2', title: 'How long does shipping take?', content: 'Standard shipping typically takes 5-7 business days.'}, {id: '3', title: 'Do you ship internationally?', content: 'Yes, we ship to over 100 countries worldwide.'}]} title=\"Frequently Asked Questions\" description=\"Find answers to common questions\" textboxLayout=\"default\" useInvertedBackground={false} />",
+  "do": [
+    "Use for help pages",
+    "Use for support sections",
+    "Requires faqs[]",
+    "Requires titleSegments?[]",
+    "Requires buttons?[]"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/FaqSplitMedia.json b/registry/components/FaqSplitMedia.json
new file mode 100644
index 0000000..6556568
--- /dev/null
+++ b/registry/components/FaqSplitMedia.json
@@ -0,0 +1,123 @@
+{
+  "name": "FaqSplitMedia",
+  "description": "FAQ section with split layout featuring media (image/video) on one side and accordion list on the other.",
+  "details": "Use for displaying FAQs with visual context. Layout: Optional TextBox Header → Grid with Media (2/5 width) + Accordions (3/5 width). Media can be positioned left or right via mediaPosition prop. Uses CSS Grid with auto-rows-fr to ensure media and FAQ content match height exactly. Media container has fixed height on mobile (h-80) and auto height on desktop to match FAQ content. Supports both images and videos. Only one accordion item can be open at a time. Supports two animation types: 'smooth' (height transition) and 'instant' (immediate show/hide). Each FAQ requires unique id, title (question), and content (answer with HTML support). Best for FAQ pages where visual elements enhance understanding.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Frequently Asked Questions",
+        "minChars": 2,
+        "maxChars": 50
+      },
+      "description": {
+        "required": true,
+        "example": "Find answers to common questions about our products and services",
+        "minChars": 5,
+        "maxChars": 250
+      },
+      "tag": {
+        "required": false,
+        "example": "Help",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "faqRules": {
+      "faqs": {
+        "required": true,
+        "minItems": 1,
+        "example": "[{\"id\": \"1\", \"title\": \"What is your return policy?\", \"content\": \"We offer a 30-day money-back guarantee.\"}]",
+        "note": "Array of FAQ items. Each item requires unique id, title (question), and content (answer with HTML support)."
+      },
+      "animationType": {
+        "required": false,
+        "default": "smooth",
+        "options": [
+          "smooth",
+          "instant"
+        ],
+        "note": "Animation type for accordion open/close. 'smooth' uses height transition, 'instant' shows/hides immediately."
+      },
+      "mediaPosition": {
+        "required": false,
+        "default": "left",
+        "options": [
+          "left",
+          "right"
+        ],
+        "note": "Position of media relative to FAQ list."
+      }
+    },
+    "mediaRules": {
+      "imageSrc": {
+        "required": false,
+        "note": "Path to image file. Either imageSrc or videoSrc should be provided. Either imageSrc or videoSrc should be provided. Image is recommended if no videoSrc."
+      },
+      "videoSrc": {
+        "required": false,
+        "note": "Path to video file. Either imageSrc or videoSrc should be provided."
+      }
+    }
+  },
+  "propsSchema": {
+    "faqs": "Array<{ id: string, title: string, content: string }> - FAQ items",
+    "imageSrc?": "string",
+    "videoSrc?": "string",
+    "imageAlt?": "string (default: '')",
+    "videoAriaLabel?": "string (default: 'FAQ section video')",
+    "mediaAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "mediaPosition?": "'left' | 'right' (default: 'left')",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "faqsAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal' (required)",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground": "boolean",
+    "animationType?": "'smooth' | 'instant' (default: 'smooth')",
+    "showCard?": "boolean (default: true)",
+    "ariaLabel?": "string (default: 'FAQ section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "titleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+    "titleImageClassName?": "string - For styling images in inline-image layout",
+    "textBoxDescriptionClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string",
+    "contentClassName?": "string",
+    "mediaWrapperClassName?": "string",
+    "mediaClassName?": "string",
+    "faqsContainerClassName?": "string",
+    "accordionClassName?": "string",
+    "accordionTitleClassName?": "string",
+    "accordionIconContainerClassName?": "string",
+    "accordionIconClassName?": "string",
+    "accordionContentClassName?": "string",
+    "separatorClassName?": "string"
+  },
+  "usageExample": "<FaqSplitMedia faqs={[{id: '1', title: 'What is your return policy?', content: 'We offer a 30-day money-back guarantee on all our products.'}, {id: '2', title: 'How long does shipping take?', content: 'Standard shipping typically takes 5-7 business days.'}]} imageSrc=\"/images/faq-hero.jpg\" imageAlt=\"Customer support representative\" title=\"Frequently Asked Questions\" description=\"Find answers to common questions\" textboxLayout=\"default\" useInvertedBackground={false} mediaPosition=\"left\" />",
+  "do": [
+    "Use for help pages",
+    "Use for support sections",
+    "Requires faqs[]",
+    "Requires titleSegments?[]",
+    "Requires buttons?[]"
+  ],
+  "dont": [
+    "Do not use more than 4 items"
+  ],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/FaqSplitText.json b/registry/components/FaqSplitText.json
new file mode 100644
index 0000000..90dadff
--- /dev/null
+++ b/registry/components/FaqSplitText.json
@@ -0,0 +1,89 @@
+{
+  "name": "FaqSplitText",
+  "description": "FAQ section with split layout featuring animated text on one side and accordion list on the other.",
+  "details": "Use for displaying FAQs with a prominent title and optional description. Layout: Animated Title + Description (2/5 width) | Accordions (3/5 width). Text can be positioned left or right via textPosition prop. Text animations are controlled by ThemeProvider's defaultTextAnimation. Only one accordion item can be open at a time. Supports two animation types for accordions: 'smooth' (height transition) and 'instant' (immediate show/hide). Each FAQ requires unique id, title (question), and content (answer with HTML support). Best for FAQ pages with emphasis on section branding or when media isn't needed.",
+  "constraints": {
+    "textRules": {
+      "sideTitle": {
+        "required": true,
+        "example": "Frequently Asked Questions",
+        "minChars": 2,
+        "maxChars": 100
+      },
+      "sideDescription": {
+        "required": false,
+        "example": "Everything you need to know",
+        "minChars": 5,
+        "maxChars": 250
+      }
+    },
+    "faqRules": {
+      "faqs": {
+        "required": true,
+        "minItems": 1,
+        "example": "[{\"id\": \"1\", \"title\": \"What is your return policy?\", \"content\": \"We offer a 30-day money-back guarantee.\"}]",
+        "note": "Array of FAQ items. Each item requires unique id, title (question), and content (answer with HTML support)."
+      },
+      "animationType": {
+        "required": false,
+        "default": "smooth",
+        "options": [
+          "smooth",
+          "instant"
+        ],
+        "note": "Animation type for accordion open/close. 'smooth' uses height transition, 'instant' shows/hides immediately."
+      },
+      "textPosition": {
+        "required": false,
+        "default": "left",
+        "options": [
+          "left",
+          "right"
+        ],
+        "note": "Position of title/description text relative to FAQ list."
+      }
+    }
+  },
+  "propsSchema": {
+    "faqs": "Array<{ id: string, title: string, content: string }> - FAQ items",
+    "sideTitle": "string",
+    "sideDescription?": "string",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "faqsAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal' (required)",
+    "textPosition?": "'left' | 'right' (default: 'left')",
+    "useInvertedBackground": "boolean",
+    "animationType?": "'smooth' | 'instant' (default: 'smooth')",
+    "showCard?": "boolean (default: true)",
+    "ariaLabel?": "string (default: 'FAQ section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "contentClassName?": "string",
+    "textContainerClassName?": "string",
+    "sideTitleClassName?": "string",
+    "sideDescriptionClassName?": "string",
+    "buttonContainerClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string",
+    "faqsContainerClassName?": "string",
+    "accordionClassName?": "string",
+    "accordionTitleClassName?": "string",
+    "accordionIconContainerClassName?": "string",
+    "accordionIconClassName?": "string",
+    "accordionContentClassName?": "string",
+    "separatorClassName?": "string"
+  },
+  "usageExample": "<FaqSplitText faqs={[{id: '1', title: 'How can I be part of Buenro?', content: 'You can join by signing up on our platform.'}, {id: '2', title: 'Can anyone join Buenro?', content: 'Yes! We welcome remote workers and entrepreneurs.'}]} sideTitle=\"Frequently Asked Questions\" textPosition=\"left\" useInvertedBackground={false} />",
+  "do": [
+    "Use for help pages",
+    "Use for support sections",
+    "Requires faqs[]",
+    "Requires buttons?[]"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/FeatureBento.json b/registry/components/FeatureBento.json
new file mode 100644
index 0000000..08e6ae0
--- /dev/null
+++ b/registry/components/FeatureBento.json
@@ -0,0 +1,113 @@
+{
+  "name": "FeatureBento",
+  "description": "Feature section with bento-style cards displaying interactive visualizations (globe, charts, 3D cards, map).",
+  "details": "Use for feature showcases with rich interactive content. Each feature card contains a bento component visualization. Supports 11 bento types: globe (3D rotating globe), icon-info-cards (scrolling metric cards), animated-bar-chart (animated chart), 3d-stack-cards (three stacked notification cards), 3d-task-list (rotated task list card), orbiting-icons (orbiting integration icons on rings), map (world map with animated location markers), marquee (scrolling text/icon rows with centered icon), line-chart (area line chart with gradient fill), phone (interactive phone mockup with notification animation), or media-stack (three stacked images/videos that fan out on hover). Automatically switches between grid (1-4 items) and carousel (5+ items). Carousel offers auto-scroll or button controls (recommended: keep default buttons). Optional header with title, description, tag, and buttons. Supports centered or split textbox layouts. Best for modern landing pages showcasing platform capabilities with visual flair.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Our Features",
+        "minChars": 2,
+        "maxChars": 35
+      },
+      "description": {
+        "required": true,
+        "example": "Discover the tools and capabilities that make our platform powerful",
+        "minChars": 5,
+        "maxChars": 250
+      },
+      "tag": {
+        "required": false,
+        "example": "Features",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "featureCardRules": {
+      "title": {
+        "required": true,
+        "example": "Advanced Analytics",
+        "minChars": 2,
+        "maxChars": 35
+      },
+      "description": {
+        "required": true,
+        "example": "Get detailed insights into your business performance",
+        "minChars": 10,
+        "maxChars": 250
+      }
+    },
+    "bentoComponentRules": {
+      "note": "CRITICAL: Each feature MUST use a DIFFERENT bentoComponent type. Never repeat the same type across features (e.g., don't use 'globe' twice). Requirements vary by type:",
+      "types": {
+        "globe": "{ bentoComponent: 'globe' } - No additional fields required",
+        "animated-bar-chart": "{ bentoComponent: 'animated-bar-chart' } - No additional fields required",
+        "map": "{ bentoComponent: 'map' } - No additional fields required",
+        "line-chart": "{ bentoComponent: 'line-chart' } - No additional fields required",
+        "icon-info-cards": "{ bentoComponent: 'icon-info-cards', items: Array<{ icon: LucideIcon, label: string, value: string }> } - Requires items array",
+        "3d-stack-cards": "{ bentoComponent: '3d-stack-cards', items: [Bento3DItem, Bento3DItem, Bento3DItem] } - Requires exactly 3 items. Each item: { icon: LucideIcon, title: string, subtitle: string, detail: string }",
+        "3d-task-list": "{ bentoComponent: '3d-task-list', title: string, items: Array<{ icon: LucideIcon, label: string, time: string }> } - Requires title and items array",
+        "orbiting-icons": "{ bentoComponent: 'orbiting-icons', centerIcon: LucideIcon, items: Array<{ icon: LucideIcon, ring?: 1 | 2 | 3, duration?: number }> } - Requires centerIcon and items array. ring defaults to 2, duration defaults to 10s",
+        "marquee": "{ bentoComponent: 'marquee', centerIcon: LucideIcon, variant: 'text' | 'icon', texts?: string[], icons?: LucideIcon[] } - Requires centerIcon and variant. If variant='text', requires texts array. If variant='icon', requires icons array. Shows scrolling rows with centered icon",
+        "phone": "{ bentoComponent: 'phone', statusIcon: LucideIcon, alertIcon: LucideIcon, alertTitle: string, alertMessage: string, apps: PhoneApps8 } - Requires all fields. statusIcon is displayed at top (e.g. Lock), alertIcon for notification, alertTitle/alertMessage for notification content, apps is exactly 8 items Array<{ name: string, icon: LucideIcon }>. Interactive phone mockup with notification slide-in animation and app grid on hover",
+        "chat": "{ bentoComponent: 'chat', aiIcon: LucideIcon, userIcon: LucideIcon, exchanges: Array<{ userMessage: string, aiResponse: string }>, placeholder: string } - Requires aiIcon, userIcon, exchanges array, and placeholder. Each exchange contains a user message and AI response pair. Chat interface with vertical marquee animation",
+        "3d-card-grid": "{ bentoComponent: '3d-card-grid', items: [GridCardItem, GridCardItem, GridCardItem, GridCardItem], centerIcon: LucideIcon } - Requires exactly 4 items and centerIcon. Each item: { name: string, icon: LucideIcon }. 3D perspective grid with cards at corners and center icon",
+        "reveal-icon": "{ bentoComponent: 'reveal-icon', icon: LucideIcon } - Requires icon. Animated doors that slide open on hover revealing center icon with glow effect",
+        "timeline": "{ bentoComponent: 'timeline', heading: string, subheading: string, items: [TimelineItem, TimelineItem, TimelineItem], completedLabel: string } - Requires heading, subheading, exactly 3 items, and completedLabel. Each item: { label: string, detail: string }. Animated timeline with staggered reveal on hover",
+        "media-stack": "{ bentoComponent: 'media-stack', items: [MediaStackItem, MediaStackItem, MediaStackItem] } - Requires exactly 3 items. Each item: { imageSrc?: string, videoSrc?: string, imageAlt?: string }. Three stacked images/videos with rotation that fan out on hover"
+      }
+    }
+  },
+  "propsSchema": {
+    "features": "Array<FeatureCard> - Each card has { title: string, description: string, button?: ButtonConfig } and one of: { bentoComponent: 'globe' } | { bentoComponent: 'animated-bar-chart' } | { bentoComponent: 'map' } | { bentoComponent: 'line-chart' } | { bentoComponent: 'phone', statusIcon: LucideIcon, alertIcon: LucideIcon, alertTitle: string, alertMessage: string, apps: Array<{ name: string, icon: LucideIcon }> (exactly 8 items) } | { bentoComponent: 'chat', aiIcon: LucideIcon, userIcon: LucideIcon, exchanges: Array<{ userMessage: string, aiResponse: string }>, placeholder: string } | { bentoComponent: 'icon-info-cards', items: Array<{ icon: LucideIcon, label: string, value: string }> } | { bentoComponent: '3d-stack-cards', items: [{ icon: LucideIcon, title: string, subtitle: string, detail: string }, { icon: LucideIcon, title: string, subtitle: string, detail: string }, { icon: LucideIcon, title: string, subtitle: string, detail: string }] } | { bentoComponent: '3d-task-list', title: string, items: Array<{ icon: LucideIcon, label: string, time: string }> } | { bentoComponent: 'orbiting-icons', centerIcon: LucideIcon, items: Array<{ icon: LucideIcon, ring?: 1 | 2 | 3, duration?: number }> } | { bentoComponent: 'marquee', centerIcon: LucideIcon, variant: 'text', texts: string[] } | { bentoComponent: 'marquee', centerIcon: LucideIcon, variant: 'icon', icons: LucideIcon[] } | { bentoComponent: '3d-card-grid', items: [{ name: string, icon: LucideIcon }, { name: string, icon: LucideIcon }, { name: string, icon: LucideIcon }, { name: string, icon: LucideIcon }], centerIcon: LucideIcon } | { bentoComponent: 'reveal-icon', icon: LucideIcon } | { bentoComponent: 'timeline', heading: string, subheading: string, items: [{ label: string, detail: string }, { label: string, detail: string }, { label: string, detail: string }], completedLabel: string } | { bentoComponent: 'media-stack', items: [{ imageSrc?: string, videoSrc?: string, imageAlt?: string }, { imageSrc?: string, videoSrc?: string, imageAlt?: string }, { imageSrc?: string, videoSrc?: string, imageAlt?: string }] }",
+    "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'blur-reveal' (required)",
+    "title": "string (required)",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string (required)",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground": "boolean (required)",
+    "ariaLabel?": "string (default: 'Feature section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string",
+    "textBoxTitleImageClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "cardTitleClassName?": "string",
+    "cardDescriptionClassName?": "string",
+    "cardButtonClassName?": "string",
+    "cardButtonTextClassName?": "string",
+    "gridClassName?": "string",
+    "carouselClassName?": "string",
+    "controlsClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string"
+  },
+  "usageExample": "<FeatureBento features={[{ title: 'Global Reach', description: 'Worldwide presence', bentoComponent: 'globe' }, { title: 'Integrations', description: 'Connect your tools', bentoComponent: 'orbiting-icons', centerIcon: Shield, items: [{ icon: Users, ring: 1 }, { icon: Zap, ring: 2 }] }]} title=\"Features\" description=\"Discover our platform\" textboxLayout=\"default\" animationType=\"slide-up\" useInvertedBackground={false} />",
+  "do": [
+    "Use for showcasing features with interactive visualizations",
+    "Use appropriate bentoComponent for each feature type",
+    "Provide all required props for each bentoComponent type",
+    "Best for modern landing pages showcasing platform capabilities"
+  ],
+  "dont": [
+    "CRITICAL: NEVER use the same bentoComponent type for multiple features - each feature MUST have a unique/different bento type (e.g., if one uses 'globe', others must use 'map', 'timeline', 'chat', etc.)",
+    "Do not use without proper items for bento types that require them",
+    "Do not use for simple text-only feature lists"
+  ],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/FeatureBorderGlow.json b/registry/components/FeatureBorderGlow.json
new file mode 100644
index 0000000..68d7d48
--- /dev/null
+++ b/registry/components/FeatureBorderGlow.json
@@ -0,0 +1,104 @@
+{
+  "name": "FeatureBorderGlow",
+  "description": "CardStack feature section with animated glowing border effect that follows cursor/scroll.",
+  "details": "Use for feature showcases with premium animated border effect. Uses CardStack with uniform-all-items-equal grid (hardcoded). Each card displays an icon at top, title and description below, with an animated glowing border overlay using Motion React. The border glow dynamically follows mouse position on desktop (within proximity threshold of 64px), or activates on scroll for mobile. Effect uses CSS variables (accent, background-accent) for theme-aware colors. Border width is 1.5px with 40deg spread and smooth angle transitions (2s duration). Desktop: Glowing effect tracks mouse movement with conic gradient mask following cursor angle. Mobile: Effect centers on viewport when card enters view. Each card uses primary-button styling for icon container (3.75rem square) with card styling and rounded-theme-capped borders. All cards have min-h-75 2xl:min-h-85 default height. The glowing effect has inactive zone of 0.01 (nearly no dead zone in center). Best for 2-6 features to showcase premium product benefits with elegant visual polish.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Powerful Features with Border Glow",
+        "minChars": 2,
+        "maxChars": 35
+      },
+      "description": {
+        "required": true,
+        "example": "Hover over each card to reveal the glowing border effect",
+        "minChars": 5,
+        "maxChars": 250
+      },
+      "tag": {
+        "required": false,
+        "example": "Features",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "featureCardRules": {
+      "icon": {
+        "required": true,
+        "example": "Zap",
+        "note": "LucideIcon component displayed at top of card with glowing border"
+      },
+      "title": {
+        "required": true,
+        "example": "Lightning Fast",
+        "minChars": 2,
+        "maxChars": 40
+      },
+      "description": {
+        "required": true,
+        "example": "Optimized for performance with minimal overhead and blazing fast load times",
+        "minChars": 10,
+        "maxChars": 200
+      }
+    },
+    "itemRules": {
+      "minItems": 2,
+      "maxItems": 6,
+      "recommendedItems": "2-6",
+      "note": "Works best with 2-6 features for optimal grid layout"
+    }
+  },
+  "propsSchema": {
+    "features": "Array<{ icon: LucideIcon, title: string, description: string }> (required)",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)",
+    "title": "string (required)",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string (required)",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground": "boolean (required)",
+    "carouselMode?": "'auto' | 'buttons' (default: 'buttons' - for 5+ items)",
+    "uniformGridCustomHeightClasses?": "string (default: 'min-h-75 2xl:min-h-85')",
+    "ariaLabel?": "string (default: 'Feature section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "iconContainerClassName?": "string",
+    "iconClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string",
+    "textBoxTitleImageClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string",
+    "cardTitleClassName?": "string",
+    "cardDescriptionClassName?": "string",
+    "gridClassName?": "string",
+    "carouselClassName?": "string",
+    "controlsClassName?": "string"
+  },
+  "usageExample": "<FeatureBorderGlow features={[{ icon: Zap, title: 'Lightning Fast', description: 'Optimized for performance with minimal overhead' }, { icon: Shield, title: 'Secure by Default', description: 'Built with security best practices' }]} title=\"Powerful Features with Border Glow\" description=\"Hover over each card to reveal the glowing border effect\" textboxLayout=\"default\" animationType=\"slide-up\" useInvertedBackground={false} />",
+  "do": [
+    "Use for premium feature showcases with elegant visual polish",
+    "Best for 2-6 features",
+    "Each feature requires icon, title, and description",
+    "Use for modern landing pages"
+  ],
+  "dont": [
+    "Do not use for simple text-only feature lists",
+    "Do not use without icons for each feature"
+  ],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/FeatureCardEight.json b/registry/components/FeatureCardEight.json
new file mode 100644
index 0000000..68a0fab
--- /dev/null
+++ b/registry/components/FeatureCardEight.json
@@ -0,0 +1,125 @@
+{
+  "name": "FeatureCardEight",
+  "description": "Horizontal timeline feature section with auto-advancing progress bars, numbered step badges, and shared media display.",
+  "details": "Use for sequential feature presentations or process flows in a horizontal timeline layout. Displays 2-4 feature cards in a grid (2-4 columns on desktop, stacked on mobile) with auto-advancing progress bars that fill over 5 seconds. Each card shows a numbered step badge, title, and description. The shared media area above cards displays images/videos that smoothly transition (opacity fade) as cards advance. Media uses aspect-square on mobile and aspect-video on desktop. Active and previous cards are fully visible (opacity-100), future cards are dimmed (opacity-50). Users can click any card to jump to that step. Grid adapts: 2 items = 2 columns, 3 items = 3 columns, 4+ items = 4 columns. Automatically loops back to first card. Optional header with title, description, tag, and buttons. Header supports centered or split textbox layout (split: tag + title + description left, buttons right; split-actions: tag + title left, buttons only right; split-description: tag + title left, description only right).",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Our Process",
+        "minChars": 2,
+        "maxChars": 35
+      },
+      "description": {
+        "required": true,
+        "example": "Discover how we bring ideas to life",
+        "minChars": 5,
+        "maxChars": 250
+      },
+      "tag": {
+        "required": false,
+        "example": "How It Works",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "featureCardRules": {
+      "title": {
+        "required": true,
+        "example": "Research & Planning",
+        "minChars": 2,
+        "maxChars": 50
+      },
+      "description": {
+        "required": true,
+        "example": "Understanding user needs, market trends, and project requirements",
+        "minChars": 10,
+        "maxChars": 300
+      }
+    },
+    "mediaRules": {
+      "imageSrc": {
+        "required": true,
+        "example": "/feature1.jpg",
+        "note": "Either imageSrc or videoSrc required per card (discriminated union) Either imageSrc or videoSrc should be provided. Image is recommended if no videoSrc."
+      },
+      "videoSrc": {
+        "required": true,
+        "example": "/feature1.mp4",
+        "note": "Either imageSrc or videoSrc required per card (discriminated union)"
+      },
+      "imageAlt": {
+        "required": false,
+        "example": "Research and planning illustration",
+        "note": "Falls back to feature title if not provided"
+      },
+      "videoAriaLabel": {
+        "required": false,
+        "example": "Research and planning video",
+        "note": "Falls back to feature title if not provided"
+      }
+    },
+    "itemRules": {
+      "minItems": 2,
+      "maxItems": 4,
+      "recommendedItems": "2-4",
+      "note": "Works best with 2-4 features. Grid layout adapts based on item count."
+    }
+  },
+  "propsSchema": {
+    "features": "Array<{ title: string, description: string } & ({ imageSrc: string, imageAlt?: string } | { videoSrc: string, videoAriaLabel?: string })>",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Feature section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "titleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+    "titleImageClassName?": "string - For styling images in inline-image layout",
+    "textBoxDescriptionClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string",
+    "cardClassName?": "string",
+    "progressBarClassName?": "string",
+    "cardContentClassName?": "string",
+    "stepNumberClassName?": "string",
+    "cardTitleClassName?": "string",
+    "cardDescriptionClassName?": "string",
+    "mediaContainerClassName?": "string",
+    "mediaClassName?": "string"
+  },
+  "usageExample": "<FeatureCardEight features={[{ title: 'Research & Planning', description: 'Understanding user needs, market trends, and project requirements', imageSrc: '/feature1.jpg' }]} title=\"Our Process\" description=\"Discover how we bring ideas to life\" textboxLayout=\"default\" useInvertedBackground={false} />",
+  "do": [
+    "Use for process flows",
+    "Use for roadmaps",
+    "Use for step-by-step explanation",
+    "Use for feature showcases",
+    "Use for capability displays",
+    "Requires features[]",
+    "Requires titleSegments?[]",
+    "Requires buttons?[]"
+  ],
+  "dont": [
+    "Do not use non-sequential content",
+    "Do not use single item",
+    "Do not use more than 4 items",
+    "Do not use less than 2 items",
+    "Do not use more than 4 items"
+  ],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/FeatureCardMedia.json b/registry/components/FeatureCardMedia.json
new file mode 100644
index 0000000..2acd443
--- /dev/null
+++ b/registry/components/FeatureCardMedia.json
@@ -0,0 +1,96 @@
+{
+  "name": "FeatureCardMedia",
+  "description": "Feature section with media cards displaying tag overlay, title, description, and optional buttons.",
+  "details": "Displays feature cards in a responsive grid or carousel layout. Each card shows media (image/video) with required tag overlay positioned top-right, followed by title, description, and optional action buttons. Uses CardStack for layout management with grid (1-4 items) and carousel (5+ items) modes.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "From concept to launch, we've got you covered",
+        "minChars": 10,
+        "maxChars": 100
+      },
+      "description": {
+        "required": true,
+        "example": "Discover how we bring ideas to life through a proven methodology",
+        "minChars": 20,
+        "maxChars": 300
+      },
+      "tag": {
+        "required": false,
+        "example": "Our Process",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "featuresRules": {
+      "minItems": 2,
+      "recommendedItems": 3,
+      "maxItems": 6,
+      "structure": {
+        "id": "string - Unique identifier (required)",
+        "title": "string - Card title (required)",
+        "description": "string - Card description (required)",
+        "tag": "string - Tag displayed on media top-right (required)",
+        "imageSrc": "string - Image source URL (optional) Image is recommended if no videoSrc.",
+        "videoSrc": "string - Video source URL (optional)",
+        "buttons": "ButtonConfig[] - Optional action buttons for the card"
+      },
+      "note": "Each card requires id, title, description, and tag. Media (imageSrc or videoSrc) recommended. Buttons are optional per card."
+    }
+  },
+  "propsSchema": {
+    "features": "Array<{ id: string, title: string, description: string, tag: string, imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string, buttons?: ButtonConfig[], onCardClick?: () => void }>",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal'",
+    "title": "string",
+    "description": "string",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image'",
+    "useInvertedBackground": "boolean",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }>",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "ButtonConfig[]",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+    "uniformGridCustomHeightClasses?": "string",
+    "ariaLabel?": "string (default: 'Features section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "itemClassName?": "string",
+    "mediaWrapperClassName?": "string",
+    "mediaClassName?": "string",
+    "tagClassName?": "string",
+    "contentClassName?": "string",
+    "cardTitleClassName?": "string",
+    "cardDescriptionClassName?": "string",
+    "cardButtonContainerClassName?": "string",
+    "cardButtonClassName?": "string",
+    "cardButtonTextClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string",
+    "textBoxTitleImageClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "gridClassName?": "string",
+    "carouselClassName?": "string",
+    "controlsClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string"
+  },
+  "usageExample": "<FeatureCardMedia features={[{ id: '1', title: 'Research', description: 'Understanding user needs and market trends', tag: 'Phase 1', imageSrc: '/img.jpg', buttons: [{ text: 'Learn more', href: '#' }] }]} animationType=\"slide-up\" textboxLayout=\"default\" title=\"Our Process\" description=\"Discover how we work\" useInvertedBackground={false} />",
+  "do": [
+    "Use for feature showcases",
+    "Use for capability displays",
+    "Requires features[]",
+    "Requires titleSegments?[]"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/FeatureCardNine.json b/registry/components/FeatureCardNine.json
new file mode 100644
index 0000000..86c4549
--- /dev/null
+++ b/registry/components/FeatureCardNine.json
@@ -0,0 +1,150 @@
+{
+  "name": "FeatureCardNine",
+  "description": "Scroll-based timeline feature section with two animated phone frames and centered content.",
+  "details": "Use for mobile-first feature presentations with visual phone mockups. Creates a vertical scroll-based timeline where each feature takes up 100vh of height. Features are displayed with title and description in the center, flanked by two animated phone frames (left and right) that slide in and rotate on scroll. Phone frames use GSAP ScrollTrigger animations: start from off-screen with rotation (-200% left, 200% right with 45deg rotation), then animate to center position with subtle rotation tilt. Desktop phones are 20 (w-20) 2xl:25 (2xl:w-25) in width and 70vh in height. Mobile phones are 45 (w-45) in width and 100 (h-100) in height. Phones display as card with rounded-theme-capped and p-1 padding. Each phone can show either an image or video (discriminated union). Feature content displays in the center with large text (5xl md:6xl title, xl description). Section has py-20 spacing. Mobile layout stacks feature content above phone pairs vertically. Desktop layout uses sticky positioning for phones while content scrolls through. Best for 2-4 features to avoid excessive scroll height.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Powerful Features",
+        "minChars": 2,
+        "maxChars": 35
+      },
+      "description": {
+        "required": true,
+        "example": "Everything you need to build amazing products",
+        "minChars": 5,
+        "maxChars": 250
+      },
+      "tag": {
+        "required": false,
+        "example": "Features",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "featureCardRules": {
+      "title": {
+        "required": true,
+        "example": "Seamless Integration",
+        "minChars": 2,
+        "maxChars": 50
+      },
+      "description": {
+        "required": true,
+        "example": "Connect your tools and workflows effortlessly. Our platform integrates with your existing systems.",
+        "minChars": 10,
+        "maxChars": 300
+      }
+    },
+    "phoneMediaRules": {
+      "phoneOne": {
+        "imageSrc": {
+          "required": true,
+          "example": "/phone1.jpg",
+          "note": "Either imageSrc or videoSrc required for phoneOne (discriminated union) Either imageSrc or videoSrc should be provided. Image is recommended if no videoSrc."
+        },
+        "videoSrc": {
+          "required": true,
+          "example": "/phone1.mp4",
+          "note": "Either imageSrc or videoSrc required for phoneOne (discriminated union)"
+        },
+        "imageAlt": {
+          "required": false,
+          "example": "First phone mockup",
+          "note": "Falls back to '[title] - Phone 1' if not provided"
+        },
+        "videoAriaLabel": {
+          "required": false,
+          "example": "First phone video",
+          "note": "Falls back to '[title] - Phone 1 video' if not provided"
+        }
+      },
+      "phoneTwo": {
+        "imageSrc": {
+          "required": true,
+          "example": "/phone2.jpg",
+          "note": "Either imageSrc or videoSrc required for phoneTwo (discriminated union) Either imageSrc or videoSrc should be provided. Image is recommended if no videoSrc."
+        },
+        "videoSrc": {
+          "required": true,
+          "example": "/phone2.mp4",
+          "note": "Either imageSrc or videoSrc required for phoneTwo (discriminated union)"
+        },
+        "imageAlt": {
+          "required": false,
+          "example": "Second phone mockup",
+          "note": "Falls back to '[title] - Phone 2' if not provided"
+        },
+        "videoAriaLabel": {
+          "required": false,
+          "example": "Second phone video",
+          "note": "Falls back to '[title] - Phone 2 video' if not provided"
+        }
+      }
+    },
+    "itemRules": {
+      "minItems": 2,
+      "maxItems": 4,
+      "recommendedItems": "2-4",
+      "note": "Each feature takes 100vh height. Recommend 2-4 features to avoid excessive scroll."
+    }
+  },
+  "propsSchema": {
+    "features": "Array<{ title: string, description: string, buttons?: ButtonConfig[], phoneOne: ({ imageSrc: string, imageAlt?: string } | { videoSrc: string, videoAriaLabel?: string }), phoneTwo: ({ imageSrc: string, imageAlt?: string } | { videoSrc: string, videoAriaLabel?: string }) }>",
+    "showStepNumbers": "boolean (required - controls whether step number badges display)",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)",
+    "textboxLayout": "'default' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Feature section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "titleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+    "titleImageClassName?": "string - For styling images in inline-image layout",
+    "textBoxDescriptionClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string",
+    "desktopContainerClassName?": "string",
+    "mobileContainerClassName?": "string",
+    "desktopContentClassName?": "string",
+    "desktopWrapperClassName?": "string",
+    "mobileWrapperClassName?": "string",
+    "phoneFrameClassName?": "string",
+    "mobilePhoneFrameClassName?": "string",
+    "featureContentClassName?": "string",
+    "stepNumberClassName?": "string",
+    "featureTitleClassName?": "string",
+    "featureDescriptionClassName?": "string",
+    "cardButtonClassName?": "string",
+    "cardButtonTextClassName?": "string"
+  },
+  "usageExample": "<FeatureCardNine features={[{ title: 'Seamless Integration', description: 'Connect your tools and workflows effortlessly', phoneOne: { imageSrc: '/phone1.jpg' }, phoneTwo: { imageSrc: '/phone2.jpg' } }]} showStepNumbers={true} title=\"Powerful Features\" description=\"Everything you need to build amazing products\" textboxLayout=\"default\" useInvertedBackground={false} />",
+  "do": [
+    "Use for feature showcases",
+    "Use for capability displays",
+    "Requires features[]",
+    "Requires titleSegments?[]",
+    "Requires buttons?[]"
+  ],
+  "dont": [
+    "Do not use less than 2 items",
+    "Do not use more than 4 items"
+  ],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/FeatureCardNineteen.json b/registry/components/FeatureCardNineteen.json
new file mode 100644
index 0000000..c79eacd
--- /dev/null
+++ b/registry/components/FeatureCardNineteen.json
@@ -0,0 +1,127 @@
+{
+  "name": "FeatureCardNineteen",
+  "description": "Timeline feature section with full-width cards showing step numbers and rotated media.",
+  "details": "Use for process or step-by-step showcases with large visual impact. Layout: TextBox Header → Full-width timeline cards with scroll-triggered stacking. Each card has: Tag + Large title (left), Subtitle + Description + Buttons (bottom left), Step number (top right), Rotated image/video (right). Mobile: Single column with divider line, step number hidden. Best for showcasing 3-6 step processes or service phases.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Our Process",
+        "minChars": 2,
+        "maxChars": 50
+      },
+      "description": {
+        "required": true,
+        "example": "Discover how we bring ideas to life",
+        "minChars": 5,
+        "maxChars": 300
+      },
+      "tag": {
+        "required": false,
+        "example": "How it works",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "featureCardRules": {
+      "tag": {
+        "required": true,
+        "example": "Expertise",
+        "minChars": 2,
+        "maxChars": 30
+      },
+      "title": {
+        "required": true,
+        "example": "Strategy",
+        "minChars": 2,
+        "maxChars": 30
+      },
+      "subtitle": {
+        "required": true,
+        "example": "Data-driven decisions for growth.",
+        "minChars": 5,
+        "maxChars": 60
+      },
+      "description": {
+        "required": true,
+        "example": "We analyze market trends and user behavior to create strategies that drive real results.",
+        "minChars": 50,
+        "maxChars": 350
+      },
+      "imageSrc": {
+        "required": false,
+        "example": "/images/strategy.webp",
+        "note": "Image source URL (either imageSrc or videoSrc) Either imageSrc or videoSrc should be provided. Image is recommended if no videoSrc."
+      },
+      "videoSrc": {
+        "required": false,
+        "example": "/videos/strategy.mp4",
+        "note": "Video source URL (either imageSrc or videoSrc)"
+      },
+      "buttons": {
+        "required": false,
+        "example": [
+          {
+            "text": "Learn more",
+            "href": "/strategy"
+          }
+        ],
+        "note": "Optional buttons per feature card (max 2)"
+      }
+    }
+  },
+  "propsSchema": {
+    "features": "Array<{ tag: string, title: string, subtitle: string, description: string, imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string, buttons?: Array<{text: string, onClick?: () => void, href?: string}> }> (required)",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required)",
+    "useInvertedBackground": "boolean",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "ariaLabel?": "string (default: 'Feature section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string",
+    "titleImageWrapperClassName?": "string",
+    "titleImageClassName?": "string",
+    "cardContentClassName?": "string",
+    "cardTagClassName?": "string",
+    "cardTitleClassName?": "string",
+    "cardDescriptionClassName?": "string",
+    "cardButtonClassName?": "string",
+    "cardButtonTextClassName?": "string",
+    "imageContainerClassName?": "string",
+    "imageClassName?": "string"
+  },
+  "usageExample": "<FeatureCardNineteen features={[{ tag: 'Expertise', title: 'Strategy', subtitle: 'Data-driven decisions', description: 'We analyze market trends...', imageSrc: '/images/strategy.webp' }]} title=\"Our Process\" description=\"Discover how we bring ideas to life\" textboxLayout=\"default\" useInvertedBackground={false} />",
+  "do": [
+    "Use for process flows",
+    "Use for roadmaps",
+    "Use for step-by-step explanation",
+    "Use for feature showcases",
+    "Use for capability displays",
+    "Requires features[]",
+    "Requires titleSegments?[]",
+    "Requires buttons?[]"
+  ],
+  "dont": [
+    "Do not use multiple items",
+    "Do not use non-sequential content",
+    "Do not use single item"
+  ],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/FeatureCardOne.json b/registry/components/FeatureCardOne.json
new file mode 100644
index 0000000..813f360
--- /dev/null
+++ b/registry/components/FeatureCardOne.json
@@ -0,0 +1,96 @@
+{
+  "name": "FeatureCardOne",
+  "description": "Adaptive feature section with image/video-based cards in customizable bento grid layouts or carousel.",
+  "details": "Use for visually-rich feature showcases with images or videos. Each card displays media (image/video), title, description, and optional button. Automatically switches between grid (1-4 items) and carousel (5+ items). For grid layouts, choose from 9 bento variants: uniform-all-items-equal, two-columns-alternating-heights, asymmetric-60-wide-40-narrow, three-columns-all-equal-width, four-items-2x2-equal-grid, one-large-right-three-stacked-left, items-top-row-full-width-bottom, full-width-top-items-bottom-row, one-large-left-three-stacked-right. Carousel offers auto-scroll or button controls (recommended: keep default buttons for better UX). Optional header with title, description, tag, and buttons. Header supports centered or split textbox layout (split: tag + title + description left, buttons right; split-actions: tag + title left, buttons only right; split-description: tag + title left, description only right).",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Our Features",
+        "minChars": 2,
+        "maxChars": 35
+      },
+      "description": {
+        "required": true,
+        "example": "Discover the tools and capabilities that make our platform powerful",
+        "minChars": 5,
+        "maxChars": 250
+      },
+      "tag": {
+        "required": false,
+        "example": "Features",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "featureCardRules": {
+      "title": {
+        "required": true,
+        "example": "Advanced Analytics",
+        "minChars": 2,
+        "maxChars": 35
+      },
+      "description": {
+        "required": true,
+        "example": "Get detailed insights into your business performance",
+        "minChars": 10,
+        "maxChars": 250
+      }
+    }
+  },
+  "propsSchema": {
+    "features": "Array<{ title: string, description: string, button?: {text: string, onClick?: () => void, href?: string} } & ({ imageSrc: string, imageAlt?: string } | { videoSrc: string, videoAriaLabel?: string })>",
+    "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+    "gridVariant": "'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right' | 'two-items-per-row'",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d'",
+    "uniformGridCustomHeightClasses?": "string",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "ariaLabel?": "string (default: 'Feature section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "mediaClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+    "textBoxTitleImageClassName?": "string - For styling images in inline-image layout",
+    "textBoxDescriptionClassName?": "string",
+    "cardTitleClassName?": "string",
+    "cardDescriptionClassName?": "string",
+    "cardButtonClassName?": "string",
+    "cardButtonTextClassName?": "string",
+    "gridClassName?": "string",
+    "carouselClassName?": "string",
+    "controlsClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string",
+    "useInvertedBackground": "boolean",
+    "showVerifiedBadge?": "boolean"
+  },
+  "usageExample": "<FeatureCardOne features={[{ title: 'Analytics', description: 'Get insights', imageSrc: '/feature.jpg', button: { text: 'Learn More', href: '#' } }]} title=\"Our Features\" description=\"Discover what makes us different\" textboxLayout=\"default\" animationType=\"slide-up\" useInvertedBackground={false} />",
+  "do": [
+    "Use for feature showcases",
+    "Use for capability displays",
+    "Use for statistics displays",
+    "Use for achievement showcases",
+    "Requires features[]",
+    "Requires titleSegments?[]",
+    "Requires buttons?[]"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/FeatureCardSeven.json b/registry/components/FeatureCardSeven.json
new file mode 100644
index 0000000..c6fc1fc
--- /dev/null
+++ b/registry/components/FeatureCardSeven.json
@@ -0,0 +1,118 @@
+{
+  "name": "FeatureCardSeven",
+  "description": "Vertical stack feature section with alternating left/right layouts and numbered step cards with square images.",
+  "details": "Use for sequential feature presentations or process flows in a vertical layout. Each card displays a numbered step badge, title, description, and square aspect ratio media (image or video) in a two-column layout. On desktop, the layout alternates between text-left/image-right (even indices) and image-left/text-right (odd indices) creating a zigzag pattern. On mobile, always displays as flex-col (text on top, image below). Uses CardList component with GSAP scroll animations and stagger effect. Optional header with title, description, tag, and buttons. Header supports centered or split textbox layout (split: tag + title + description left, buttons right; split-actions: tag + title left, buttons only right; split-description: tag + title left, description only right).",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Our Features",
+        "minChars": 2,
+        "maxChars": 35
+      },
+      "description": {
+        "required": true,
+        "example": "Sequential features with numbered badges",
+        "minChars": 5,
+        "maxChars": 250
+      },
+      "tag": {
+        "required": false,
+        "example": "Features",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "featureCardRules": {
+      "title": {
+        "required": true,
+        "example": "Modern Architecture",
+        "minChars": 2,
+        "maxChars": 50
+      },
+      "description": {
+        "required": true,
+        "example": "Built with the latest technologies and best practices",
+        "minChars": 10,
+        "maxChars": 300
+      }
+    },
+    "mediaRules": {
+      "imageSrc": {
+        "required": false,
+        "example": "/feature1.jpg",
+        "note": "Either imageSrc or videoSrc required per card Either imageSrc or videoSrc should be provided. Image is recommended if no videoSrc."
+      },
+      "videoSrc": {
+        "required": false,
+        "example": "/feature1.mp4",
+        "note": "Either imageSrc or videoSrc required per card"
+      },
+      "imageAlt": {
+        "required": false,
+        "example": "Modern architecture illustration",
+        "note": "Falls back to feature title if not provided"
+      },
+      "videoAriaLabel": {
+        "required": false,
+        "example": "Modern architecture video",
+        "note": "Falls back to feature title if not provided"
+      }
+    }
+  },
+  "propsSchema": {
+    "features": "Array<{ title: string, description: string, buttons?: ButtonConfig[] } & ({ imageSrc: string, imageAlt?: string } | { videoSrc: string, videoAriaLabel?: string })>",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Feature section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "titleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+    "titleImageClassName?": "string - For styling images in inline-image layout",
+    "textBoxDescriptionClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string",
+    "cardContentClassName?": "string",
+    "stepNumberClassName?": "string",
+    "cardTitleClassName?": "string",
+    "cardDescriptionClassName?": "string",
+    "imageContainerClassName?": "string",
+    "imageClassName?": "string",
+    "cardButtonClassName?": "string",
+    "cardButtonTextClassName?": "string"
+  },
+  "usageExample": "<FeatureCardSeven features={[{ title: 'Modern Architecture', description: 'Built with the latest technologies and best practices', imageSrc: '/feature1.jpg' }]} title=\"Our Features\" description=\"Sequential features with numbered badges\" textboxLayout=\"default\" animationType=\"blur-reveal\" useInvertedBackground={false} />",
+  "do": [
+    "Use for process flows",
+    "Use for roadmaps",
+    "Use for step-by-step explanation",
+    "Use for feature showcases",
+    "Use for capability displays",
+    "Requires features[]",
+    "Requires titleSegments?[]",
+    "Requires buttons?[]"
+  ],
+  "dont": [
+    "Do not use non-sequential content",
+    "Do not use single item"
+  ],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/FeatureCardSix.json b/registry/components/FeatureCardSix.json
new file mode 100644
index 0000000..f3e4151
--- /dev/null
+++ b/registry/components/FeatureCardSix.json
@@ -0,0 +1,116 @@
+{
+  "name": "FeatureCardSix",
+  "description": "Timeline-based feature section with scroll-triggered stacking animations and numbered step cards.",
+  "details": "Use for process flows, roadmaps, or sequential feature presentations. Each card displays a numbered step badge, title, description, and media (image or video) in a two-column layout. As you scroll, cards stack on top of each other with fade animations. The timeline layout provides a clear visual progression through steps or stages. No grid/carousel modes - uses fixed timeline stacking layout with GSAP ScrollTrigger. Optional header with title, description, tag, and buttons. Header supports centered or split textbox layout (split: tag + title + description left, buttons right; split-actions: tag + title left, buttons only right; split-description: tag + title left, description only right).",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Our Process",
+        "minChars": 2,
+        "maxChars": 35
+      },
+      "description": {
+        "required": true,
+        "example": "Discover how we bring ideas to life",
+        "minChars": 5,
+        "maxChars": 250
+      },
+      "tag": {
+        "required": false,
+        "example": "Process",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "featureCardRules": {
+      "title": {
+        "required": true,
+        "example": "Research & Planning",
+        "minChars": 2,
+        "maxChars": 50
+      },
+      "description": {
+        "required": true,
+        "example": "Understanding user needs, market trends, and project requirements",
+        "minChars": 10,
+        "maxChars": 300
+      }
+    },
+    "mediaRules": {
+      "imageSrc": {
+        "required": false,
+        "example": "/step1.jpg",
+        "note": "Either imageSrc or videoSrc required per card Either imageSrc or videoSrc should be provided. Image is recommended if no videoSrc."
+      },
+      "videoSrc": {
+        "required": false,
+        "example": "/step1.mp4",
+        "note": "Either imageSrc or videoSrc required per card"
+      },
+      "imageAlt": {
+        "required": false,
+        "example": "Research phase illustration",
+        "note": "Falls back to feature title if not provided"
+      },
+      "videoAriaLabel": {
+        "required": false,
+        "example": "Research phase video",
+        "note": "Falls back to feature title if not provided"
+      }
+    }
+  },
+  "propsSchema": {
+    "features": "Array<{ title: string, description: string, buttons?: ButtonConfig[] } & ({ imageSrc: string, imageAlt?: string } | { videoSrc: string, videoAriaLabel?: string })>",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Feature section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "titleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+    "titleImageClassName?": "string - For styling images in inline-image layout",
+    "textBoxDescriptionClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string",
+    "cardContentClassName?": "string",
+    "stepNumberClassName?": "string",
+    "cardTitleClassName?": "string",
+    "cardDescriptionClassName?": "string",
+    "imageContainerClassName?": "string",
+    "imageClassName?": "string",
+    "cardButtonClassName?": "string",
+    "cardButtonTextClassName?": "string"
+  },
+  "usageExample": "<FeatureCardSix features={[{ title: 'Research & Planning', description: 'Understanding user needs and project requirements', imageSrc: '/step1.jpg' }]} title=\"Our Process\" description=\"Discover how we bring ideas to life\" textboxLayout=\"default\" useInvertedBackground={false} />",
+  "do": [
+    "Use for process flows",
+    "Use for roadmaps",
+    "Use for step-by-step explanation",
+    "Use for feature showcases",
+    "Use for capability displays",
+    "Requires features[]",
+    "Requires titleSegments?[]",
+    "Requires buttons?[]"
+  ],
+  "dont": [
+    "Do not use non-sequential content",
+    "Do not use single item"
+  ],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/FeatureCardSixteen.json b/registry/components/FeatureCardSixteen.json
new file mode 100644
index 0000000..98a933f
--- /dev/null
+++ b/registry/components/FeatureCardSixteen.json
@@ -0,0 +1,99 @@
+{
+  "name": "FeatureCardSixteen",
+  "description": "Comparison section with negative and positive cards showing contrasting features.",
+  "details": "Use for before/after comparisons, pros vs cons, or contrasting two approaches. Layout: TextBox Header → Two side-by-side cards (negative with X icons at 50% opacity, positive with Check icons). Always requires exactly one negative and one positive card. Best for comparison marketing or highlighting advantages over alternatives.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "What makes us stand out",
+        "minChars": 2,
+        "maxChars": 50
+      },
+      "description": {
+        "required": true,
+        "example": "See how we compare to traditional approaches",
+        "minChars": 5,
+        "maxChars": 300
+      },
+      "tag": {
+        "required": false,
+        "example": "Why us",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "negativeCardRules": {
+      "items": {
+        "required": true,
+        "example": [
+          "Time-consuming processes",
+          "Limited scalability",
+          "Higher costs"
+        ],
+        "minItems": 2,
+        "maxItems": 10,
+        "note": "List of negative aspects displayed with X icons"
+      }
+    },
+    "positiveCardRules": {
+      "items": {
+        "required": true,
+        "example": [
+          "Streamlined workflow",
+          "Scalable solutions",
+          "Better value"
+        ],
+        "minItems": 2,
+        "maxItems": 10,
+        "note": "List of positive aspects displayed with Check icons"
+      }
+    }
+  },
+  "propsSchema": {
+    "negativeCard": "{ items: string[] } (required)",
+    "positiveCard": "{ items: string[] } (required)",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d'",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "textboxLayout": "'default' | 'inline-image' (required)",
+    "useInvertedBackground": "boolean",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "ariaLabel?": "string (default: 'Feature comparison section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "titleImageWrapperClassName?": "string",
+    "titleImageClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string",
+    "gridClassName?": "string",
+    "cardClassName?": "string",
+    "itemsListClassName?": "string",
+    "itemClassName?": "string",
+    "itemIconClassName?": "string",
+    "itemTextClassName?": "string"
+  },
+  "usageExample": "<FeatureCardSixteen negativeCard={{ items: ['Time-consuming processes', 'Limited scalability'] }} positiveCard={{ items: ['Streamlined workflow', 'Scalable solutions'] }} animationType=\"slide-up\" title=\"What makes us stand out\" description=\"See how we compare\" textboxLayout=\"default\" useInvertedBackground={false} />",
+  "do": [
+    "Use for feature showcases",
+    "Use for capability displays",
+    "Requires titleSegments?[]",
+    "Requires buttons?[]"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/FeatureCardTen.json b/registry/components/FeatureCardTen.json
new file mode 100644
index 0000000..fc6319a
--- /dev/null
+++ b/registry/components/FeatureCardTen.json
@@ -0,0 +1,143 @@
+{
+  "name": "FeatureCardTen",
+  "description": "Timeline process flow feature section with numbered steps, alternating layout, and list items.",
+  "details": "Use for step-by-step process showcases with detailed feature lists. Creates a vertical timeline with a progress line that fills on scroll. Each feature displays as a horizontal layout with media (image/video card) on one side and content (title, description, icon list) on the other. Numbered badges appear on the timeline. Layout alternates between left/right based on reverse property. Desktop: centered vertical line with 30% width columns. Mobile: right-aligned vertical line with 70% width columns. Media displays in aspect-square on mobile, aspect-[16/10] on desktop with card styling. Each feature has a list of items with icons displayed in rounded icon containers. Best for 3-6 step processes to showcase detailed features with visual support.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Powerful Features",
+        "minChars": 2,
+        "maxChars": 35
+      },
+      "description": {
+        "required": true,
+        "example": "Everything you need to build and scale your business with confidence",
+        "minChars": 5,
+        "maxChars": 250
+      },
+      "tag": {
+        "required": false,
+        "example": "Features",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "featureCardRules": {
+      "title": {
+        "required": true,
+        "example": "Advanced Analytics Dashboard",
+        "minChars": 2,
+        "maxChars": 60
+      },
+      "description": {
+        "required": true,
+        "example": "Get comprehensive insights into your business performance with our powerful analytics tools and real-time reporting.",
+        "minChars": 10,
+        "maxChars": 300
+      },
+      "reverse": {
+        "required": true,
+        "example": "false",
+        "note": "Controls whether media and content positions are swapped (alternating layout)"
+      }
+    },
+    "mediaRules": {
+      "imageSrc": {
+        "required": true,
+        "example": "/feature.webp",
+        "note": "Either imageSrc or videoSrc required (discriminated union) Either imageSrc or videoSrc should be provided. Image is recommended if no videoSrc."
+      },
+      "videoSrc": {
+        "required": true,
+        "example": "/feature.mp4",
+        "note": "Either imageSrc or videoSrc required (discriminated union)"
+      },
+      "imageAlt": {
+        "required": false,
+        "example": "Analytics dashboard interface",
+        "note": "Falls back to feature title if not provided"
+      },
+      "videoAriaLabel": {
+        "required": false,
+        "example": "Analytics dashboard video",
+        "note": "Falls back to '[title] video' if not provided"
+      }
+    },
+    "listItemRules": {
+      "icon": {
+        "required": true,
+        "example": "Check",
+        "note": "LucideIcon component for list item"
+      },
+      "text": {
+        "required": true,
+        "example": "Real-time data visualization",
+        "minChars": 2,
+        "maxChars": 100
+      },
+      "minItems": 1,
+      "maxItems": 5,
+      "recommendedItems": "2-4"
+    },
+    "itemRules": {
+      "minItems": 3,
+      "maxItems": 6,
+      "recommendedItems": "3-6",
+      "note": "Works best with 3-6 features for optimal timeline length"
+    }
+  },
+  "propsSchema": {
+    "features": "Array<{ title: string, description: string, media: ({ imageSrc: string, imageAlt?: string } | { videoSrc: string, videoAriaLabel?: string }), items: Array<{ icon: LucideIcon, text: string }>, reverse: boolean }>",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Feature section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string",
+    "titleImageWrapperClassName?": "string",
+    "titleImageClassName?": "string",
+    "itemClassName?": "string",
+    "mediaWrapperClassName?": "string",
+    "mediaCardClassName?": "string",
+    "numberClassName?": "string",
+    "contentWrapperClassName?": "string",
+    "featureTitleClassName?": "string",
+    "featureDescriptionClassName?": "string",
+    "listItemClassName?": "string",
+    "iconContainerClassName?": "string",
+    "iconClassName?": "string",
+    "gapClassName?": "string"
+  },
+  "usageExample": "<FeatureCardTen features={[{ title: 'Advanced Analytics Dashboard', description: 'Get comprehensive insights into your business performance', media: { imageSrc: '/placeholder1.webp' }, items: [{ icon: Check, text: 'Real-time data visualization' }, { icon: Check, text: 'Custom report generation' }], reverse: false }]} title=\"Powerful Features\" description=\"Everything you need to build and scale your business\" textboxLayout=\"default\" animationType=\"slide-up\" useInvertedBackground={false} />",
+  "do": [
+    "Use for step-by-step process showcases",
+    "Best for 3-6 step processes",
+    "Alternate reverse property for visual variety",
+    "Include relevant icons for list items"
+  ],
+  "dont": [
+    "Do not use without media for each feature",
+    "Do not use without list items"
+  ],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/FeatureCardThree.json b/registry/components/FeatureCardThree.json
new file mode 100644
index 0000000..18086e1
--- /dev/null
+++ b/registry/components/FeatureCardThree.json
@@ -0,0 +1,103 @@
+{
+  "name": "FeatureCardThree",
+  "description": "Adaptive feature section with hover-reveal cards displaying numbered features with images.",
+  "details": "Use for interactive feature showcases with hover effects. Each card displays a numbered ID badge that flips to an info icon on hover, image background, title, and description that reveals with a slide-up background animation. Automatically switches between grid (1-4 items) and carousel (5+ items). Carousel offers auto-scroll or button controls (recommended: keep default buttons for better UX). Optional header with title, description, tag, and buttons. Header supports centered or split textbox layout (split: tag + title + description left, buttons right; split-actions: tag + title left, buttons only right; split-description: tag + title left, description only right).",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Our Features",
+        "minChars": 2,
+        "maxChars": 35
+      },
+      "description": {
+        "required": true,
+        "example": "Discover what makes us different",
+        "minChars": 5,
+        "maxChars": 250
+      },
+      "tag": {
+        "required": false,
+        "example": "Features",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "featureCardRules": {
+      "title": {
+        "required": true,
+        "example": "Advanced Analytics",
+        "minChars": 2,
+        "maxChars": 35
+      },
+      "description": {
+        "required": true,
+        "example": "Get detailed insights into your business performance",
+        "minChars": 10,
+        "maxChars": 250
+      }
+    },
+    "mediaRules": {
+      "imageSrc": {
+        "required": true,
+        "example": "/feature.jpg",
+        "note": "Supports external URLs with unoptimized prop"
+      },
+      "imageAlt": {
+        "required": false,
+        "example": "Feature background",
+        "note": "Empty string marks image as decorative (aria-hidden)"
+      }
+    }
+  },
+  "propsSchema": {
+    "features": "Array<{ title: string, description: string, imageSrc: string, imageAlt?: string }>",
+    "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+    "gridVariant": "'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right' (required)",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
+    "uniformGridCustomHeightClasses?": "string",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Feature section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+    "textBoxTitleImageClassName?": "string - For styling images in inline-image layout",
+    "textBoxDescriptionClassName?": "string",
+    "cardTitleClassName?": "string",
+    "cardDescriptionClassName?": "string",
+    "gridClassName?": "string",
+    "carouselClassName?": "string",
+    "controlsClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string",
+    "itemContentClassName?": "string"
+  },
+  "usageExample": "<FeatureCardThree features={[{ title: 'Analytics', description: 'Track performance with detailed insights', imageSrc: '/feature.jpg' }]} title=\"Our Features\" description=\"Discover what makes us different\" textboxLayout=\"default\" animationType=\"slide-up\" useInvertedBackground={false} />",
+  "do": [
+    "Use for feature showcases",
+    "Use for capability displays",
+    "Requires features[]",
+    "Requires titleSegments?[]",
+    "Requires buttons?[]"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/FeatureCardTwelve.json b/registry/components/FeatureCardTwelve.json
new file mode 100644
index 0000000..da7ae66
--- /dev/null
+++ b/registry/components/FeatureCardTwelve.json
@@ -0,0 +1,119 @@
+{
+  "name": "FeatureCardTwelve",
+  "description": "List-based feature section with large label on left and content with bullet points on right.",
+  "details": "Use for feature comparisons, tier showcases, or service level displays. Uses CardList with variant system for card or border layouts. Layout: Optional TextBox Header → Vertical Stack of Features. Each feature card has horizontal split (md breakpoint): Left side (50%): Large label text (5xl mobile / 6xl desktop). Right side (50%): Title + inline bullet list with accent-colored dots (•) + optional buttons (0-2). Card variant: Items wrapped in cards with full padding (p-6 md:p-15) and mobile divider line. Border variant: Items separated by accent divider lines with bottom padding (pb-6 md:pb-10), no mobile divider. Text colors conditional on variant: border uses useInvertedBackground directly, card uses shouldUseLightText. Supports 0-2 buttons per feature with automatic primary/secondary styling via getButtonProps. Best for pricing tiers, service levels, or feature breakdowns with clear labeling.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Choose Your Plan",
+        "minChars": 2,
+        "maxChars": 50
+      },
+      "description": {
+        "required": true,
+        "example": "Find the perfect fit for your needs",
+        "minChars": 5,
+        "maxChars": 300
+      },
+      "tag": {
+        "required": false,
+        "example": "Plans",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "featureRules": {
+      "id": {
+        "required": true,
+        "example": "premium",
+        "note": "Unique identifier for the feature"
+      },
+      "label": {
+        "required": true,
+        "example": "Premium",
+        "minChars": 2,
+        "maxChars": 30,
+        "note": "Large display label shown on left side (5xl mobile, 6xl desktop)"
+      },
+      "title": {
+        "required": true,
+        "example": "Premium features for your most demanding needs",
+        "minChars": 10,
+        "maxChars": 120,
+        "note": "Feature heading shown at xl (mobile) / 3xl (desktop)"
+      },
+      "items": {
+        "required": true,
+        "minItems": 1,
+        "maxItems": 8,
+        "structure": "string[]",
+        "note": "Inline bullet list with accent-colored dots. Each item should be 5-50 characters."
+      },
+      "buttons": {
+        "required": false,
+        "maxButtons": 2,
+        "structure": "Array<{text: string, onClick?: () => void, href?: string}>",
+        "note": "Optional buttons at bottom of content area. First button is primary, second is secondary."
+      }
+    },
+    "itemRules": {
+      "minItems": 1,
+      "maxItems": 8,
+      "recommendedItems": "2-5",
+      "note": "Works best with 2-5 features for clear comparison"
+    }
+  },
+  "propsSchema": {
+    "features": "Array<{ id: string, label: string, title: string, items: string[], buttons?: Array<{text: string, onClick?: () => void, href?: string}> }>",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground": "boolean",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "ariaLabel?": "string (default: 'Feature section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string",
+    "titleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+    "titleImageClassName?": "string - For styling images in inline-image layout",
+    "cardContentClassName?": "string",
+    "labelClassName?": "string",
+    "cardTitleClassName?": "string",
+    "itemsContainerClassName?": "string",
+    "itemTextClassName?": "string",
+    "cardButtonClassName?": "string",
+    "cardButtonTextClassName?": "string"
+  },
+  "usageExample": "<FeatureCardTwelve features={[{ id: 'premium', label: 'Premium', title: 'Premium features for your most demanding needs and growth goals', items: ['Priority support', 'Advanced features', 'Custom integrations'], buttons: [{ text: 'Learn more', href: '#' }, { text: 'Get started', onClick: () => console.log('clicked') }] }]} animationType=\"opacity\" variant=\"border\" title=\"Choose Your Plan\" description=\"Find the perfect fit for your needs\" textboxLayout=\"default\" useInvertedBackground={false} />",
+  "do": [
+    "Use for feature showcases",
+    "Use for capability displays",
+    "Use for pricing pages",
+    "Use for subscription tiers",
+    "Requires features[]",
+    "Requires titleSegments?[]",
+    "Requires buttons?[]"
+  ],
+  "dont": [
+    "Do not use more than 8 items"
+  ],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/FeatureCardTwentyEight.json b/registry/components/FeatureCardTwentyEight.json
new file mode 100644
index 0000000..a1a65c8
--- /dev/null
+++ b/registry/components/FeatureCardTwentyEight.json
@@ -0,0 +1,130 @@
+{
+  "name": "FeatureCardTwentyEight",
+  "description": "Job listing style feature cards with title, subtitle, category indicator, value, and optional footer buttons.",
+  "details": "Use for job listings, pricing tiers, or any feature display with detailed information. Layout: Title (job title/name) → Subtitle (location/details) → Bottom row with category indicator (dot + label, truncates) on left and value (salary/price) on right → Optional footer with accent background containing up to 2 buttons. Uses CardStack with hardcoded uniform-all-items-equal grid and carousel threshold of 4 (switches to carousel with 4+ items). Supports card or default container styles with inverted text logic.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Open Positions",
+        "minChars": 2,
+        "maxChars": 50
+      },
+      "description": {
+        "required": true,
+        "example": "Join our team and help shape the future of AI",
+        "minChars": 5,
+        "maxChars": 250
+      },
+      "tag": {
+        "required": false,
+        "example": "Careers",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "featureRules": {
+      "id": {
+        "required": true,
+        "example": "1",
+        "minChars": 1,
+        "maxChars": 20
+      },
+      "title": {
+        "required": true,
+        "example": "Senior Software Engineer, Platform",
+        "minChars": 5,
+        "maxChars": 80,
+        "note": "Main title displayed at top of card, truncates if too long"
+      },
+      "subtitle": {
+        "required": true,
+        "example": "San Francisco, CA · Full-time · Remote eligible",
+        "minChars": 5,
+        "maxChars": 100,
+        "note": "Secondary info like location, type, or details"
+      },
+      "category": {
+        "required": true,
+        "example": "Engineering",
+        "minChars": 2,
+        "maxChars": 30,
+        "note": "Category label with dot indicator, truncates on overflow"
+      },
+      "value": {
+        "required": true,
+        "example": "$185K – $265K",
+        "minChars": 1,
+        "maxChars": 25,
+        "note": "Value displayed on bottom right (salary, price, etc.)"
+      },
+      "buttons": {
+        "required": false,
+        "maxItems": 2,
+        "note": "Optional buttons in footer section with accent background"
+      }
+    },
+    "itemRules": {
+      "minItems": 1,
+      "maxItems": 12,
+      "recommendedItems": "3-6"
+    }
+  },
+  "propsSchema": {
+    "features": "Array<{ id: string, title: string, subtitle: string, category: string, value: string, buttons?: Array<{text: string, onClick?: () => void, href?: string}> }>",
+    "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+    "uniformGridCustomHeightClasses?": "string",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal'",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image'",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Features section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string",
+    "textBoxTitleImageClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "cardTitleClassName?": "string",
+    "subtitleClassName?": "string",
+    "categoryClassName?": "string",
+    "valueClassName?": "string",
+    "footerClassName?": "string",
+    "cardButtonClassName?": "string",
+    "cardButtonTextClassName?": "string",
+    "gridClassName?": "string",
+    "carouselClassName?": "string",
+    "controlsClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string"
+  },
+  "usageExample": "<FeatureCardTwentyEight features={[{ id: '1', title: 'Senior Software Engineer, Platform', subtitle: 'San Francisco, CA · Full-time · Remote eligible', category: 'Engineering', value: '$185K – $265K', buttons: [{ text: 'Apply Now', href: '#' }] }, { id: '2', title: 'Product Designer, Enterprise', subtitle: 'New York, NY · Full-time', category: 'Design', value: '$145K – $195K', buttons: [{ text: 'Apply Now', href: '#' }] }, { id: '3', title: 'Data Scientist, ML Platform', subtitle: 'Remote · Full-time', category: 'Data Science', value: '$168K – $238K', buttons: [{ text: 'Apply Now', href: '#' }] }]} title=\"Open Positions\" description=\"Join our team and help shape the future of AI\" textboxLayout=\"default\" useInvertedBackground={false} animationType=\"slide-up\" />",
+  "do": [
+    "Use for feature showcases",
+    "Use for capability displays",
+    "Use for pricing pages",
+    "Use for subscription tiers",
+    "Requires features[]",
+    "Requires titleSegments?[]",
+    "Requires buttons?[]"
+  ],
+  "dont": [
+    "Do not use more than 12 items"
+  ],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/FeatureCardTwentyFive.json b/registry/components/FeatureCardTwentyFive.json
new file mode 100644
index 0000000..0778822
--- /dev/null
+++ b/registry/components/FeatureCardTwentyFive.json
@@ -0,0 +1,97 @@
+{
+  "name": "FeatureCardTwentyFive",
+  "description": "Two-column grid feature cards with icon, title, description, and dual media items per card.",
+  "details": "Use for showcasing services or features with visual emphasis. Each card displays an icon in a primary button style box, title, description, and two side-by-side images/videos at the bottom. Uses fixed 'two-items-per-row' grid layout on desktop (2 cards per row), button carousel on mobile. Cards have flexible height with images filling remaining space.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Our Features",
+        "minChars": 2,
+        "maxChars": 50
+      },
+      "description": {
+        "required": true,
+        "example": "Discover what makes us different",
+        "minChars": 5,
+        "maxChars": 300
+      },
+      "tag": {
+        "required": false,
+        "example": "Services",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "featureRules": {
+      "minItems": 2,
+      "maxItems": 8,
+      "recommendedItems": "4",
+      "structure": {
+        "title": "string - Feature card title (required)",
+        "description": "string - Feature card description (required)",
+        "icon": "LucideIcon - Icon displayed in primary button box (required)",
+        "mediaItems": "[MediaItem, MediaItem] - Tuple of exactly 2 media items (required)"
+      },
+      "mediaItemStructure": {
+        "imageSrc": "string - Path to image (optional if videoSrc provided) Image is recommended if no videoSrc.",
+        "videoSrc": "string - Path to video (optional if imageSrc provided)",
+        "imageAlt": "string - Alt text for image",
+        "videoAriaLabel": "string - Aria label for video"
+      }
+    }
+  },
+  "propsSchema": {
+    "features": "Array<{ title: string, description: string, icon: LucideIcon, mediaItems: [MediaItem, MediaItem] }> - Feature cards with dual media",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d' (required)",
+    "title": "string (required)",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string (required)",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required)",
+    "useInvertedBackground": "boolean (required)",
+    "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+    "uniformGridCustomHeightClasses?": "string",
+    "ariaLabel?": "string (default: 'Feature section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "mediaClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string",
+    "textBoxTitleImageClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "cardTitleClassName?": "string",
+    "cardDescriptionClassName?": "string",
+    "cardIconClassName?": "string",
+    "cardIconWrapperClassName?": "string",
+    "gridClassName?": "string",
+    "carouselClassName?": "string",
+    "controlsClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string"
+  },
+  "usageExample": "<FeatureCardTwentyFive features={[{ title: 'Business Strategy', description: 'Crafting clear strategies for growth.', icon: Target, mediaItems: [{ imageSrc: '/img1.jpg', imageAlt: 'Strategy 1' }, { imageSrc: '/img2.jpg', imageAlt: 'Strategy 2' }] }]} animationType=\"depth-3d\" title=\"Our Features\" description=\"Discover what makes us different\" textboxLayout=\"default\" useInvertedBackground={false} />",
+  "do": [
+    "Use for features with visual examples",
+    "Each feature requires exactly 2 media items",
+    "Use relevant icons for each feature",
+    "Supports 3D animations"
+  ],
+  "dont": [
+    "Do not use without 2 media items per feature",
+    "Do not use without icons"
+  ],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/FeatureCardTwentyFour.json b/registry/components/FeatureCardTwentyFour.json
new file mode 100644
index 0000000..e010765
--- /dev/null
+++ b/registry/components/FeatureCardTwentyFour.json
@@ -0,0 +1,84 @@
+{
+  "name": "FeatureCardTwentyFour",
+  "description": "Two-column feature card list with title, author, description, tags, and media.",
+  "details": "Use for feature articles, case studies, or content with author attribution. Uses CardList component with card or border variants. Layout: CardStackTextBox header → Vertical list of items. Each card uses 10-column grid on desktop (6/10 text, 4/10 media). Text area includes title with inline author (lighter opacity), tags using Tag components, and description. Media on right side. Text colors adapt based on variant and useInvertedBackground settings. Best for featured content, case studies, or highlighted features.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Latest Features",
+        "minChars": 2,
+        "maxChars": 50
+      },
+      "description": {
+        "required": true,
+        "example": "Stay updated with our latest announcements",
+        "minChars": 5,
+        "maxChars": 300
+      },
+      "tag": {
+        "required": false,
+        "example": "Features",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "itemRules": {
+      "minItems": 1,
+      "maxItems": 10,
+      "recommendedItems": "2-4",
+      "note": "Each feature requires id, title, author, description, tags array. Media uses discriminated union: either imageSrc (with optional imageAlt) OR videoSrc (with optional videoAriaLabel)."
+    }
+  },
+  "propsSchema": {
+    "features": "Array<{ id: string, title: string, author: string, description: string, tags: string[], imageSrc?: string, imageAlt?: string, videoSrc?: string, videoAriaLabel?: string, onFeatureClick?: () => void }> - Feature card items (requires imageSrc or videoSrc)",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)",
+    "title": "string (required)",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string (required)",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required)",
+    "useInvertedBackground": "boolean (required)",
+    "ariaLabel?": "string (default: 'Features section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string",
+    "titleImageWrapperClassName?": "string",
+    "titleImageClassName?": "string",
+    "cardContentClassName?": "string",
+    "cardTitleClassName?": "string",
+    "authorClassName?": "string",
+    "cardDescriptionClassName?": "string",
+    "tagsContainerClassName?": "string",
+    "tagClassName?": "string",
+    "mediaWrapperClassName?": "string",
+    "mediaClassName?": "string"
+  },
+  "usageExample": "<FeatureCardTwentyFour features={[{ id: '1', title: 'New Genre Featured in Fonts in Use', author: 'Leon Brown', description: 'We have been featured in Fonts in Use for our typography choices.', tags: ['Feature', 'Design'], imageSrc: '/feature1.jpg' }]} animationType=\"slide-up\" title=\"Latest Features\" description=\"Stay updated with our latest announcements\" textboxLayout=\"default\" useInvertedBackground={false} />",
+  "do": [
+    "Use for feature articles, case studies, or content with author attribution",
+    "Best for 2-4 featured items",
+    "Include relevant tags for each feature",
+    "Use high-quality images or videos"
+  ],
+  "dont": [
+    "Do not use without author attribution",
+    "Do not use for simple feature lists without descriptions"
+  ],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/FeatureCardTwentyNine.json b/registry/components/FeatureCardTwentyNine.json
new file mode 100644
index 0000000..7ed81ab
--- /dev/null
+++ b/registry/components/FeatureCardTwentyNine.json
@@ -0,0 +1,114 @@
+{
+  "name": "FeatureCardTwentyNine",
+  "description": "Adaptive feature section with hover-reveal cards displaying features with title icons, verified badges, and action buttons.",
+  "details": "Use for interactive feature showcases with hover effects. Each card displays a title icon, title with verified badge, image background, and description that reveals with a slide-up background animation. Each card has an action button in the top-right corner. Automatically switches between grid (1-4 items) and carousel (5+ items). Carousel offers auto-scroll or button controls (recommended: keep default buttons for better UX). Optional header with title, description, tag, and buttons. Header supports centered or split textbox layout.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Our Features",
+        "minChars": 2,
+        "maxChars": 35
+      },
+      "description": {
+        "required": true,
+        "example": "Discover what makes us different",
+        "minChars": 5,
+        "maxChars": 250
+      },
+      "tag": {
+        "required": false,
+        "example": "Features",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "featureCardRules": {
+      "title": {
+        "required": true,
+        "example": "Advanced Analytics",
+        "minChars": 2,
+        "maxChars": 35
+      },
+      "description": {
+        "required": true,
+        "example": "Get detailed insights into your business performance",
+        "minChars": 10,
+        "maxChars": 250
+      },
+      "buttonText": {
+        "required": true,
+        "example": "Learn More",
+        "minChars": 2,
+        "maxChars": 20
+      }
+    },
+    "mediaRules": {
+      "imageSrc": {
+        "required": true,
+        "example": "/feature.jpg",
+        "note": "Supports external URLs with unoptimized prop"
+      },
+      "imageAlt": {
+        "required": false,
+        "example": "Feature background",
+        "note": "Empty string marks image as decorative (aria-hidden)"
+      },
+      "titleImageSrc": {
+        "required": true,
+        "example": "/image.jpg",
+        "note": "Image displayed next to the title"
+      }
+    }
+  },
+  "propsSchema": {
+    "features": "Array<{ title: string, description: string, imageSrc: string, imageAlt?: string, titleImageSrc: string, buttonText: string, buttonHref?: string }>",
+    "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+    "gridVariant": "'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right' (required)",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
+    "uniformGridCustomHeightClasses?": "string",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Feature section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+    "textBoxTitleImageClassName?": "string - For styling images in inline-image layout",
+    "textBoxDescriptionClassName?": "string",
+    "cardTitleClassName?": "string",
+    "cardDescriptionClassName?": "string",
+    "gridClassName?": "string",
+    "carouselClassName?": "string",
+    "controlsClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string",
+    "itemContentClassName?": "string"
+  },
+  "usageExample": "<FeatureCardTwentyNine features={[{ title: 'Analytics', description: 'Track performance with detailed insights', imageSrc: '/feature.jpg', titleImageSrc: '/icon.jpg', buttonText: 'Learn More', buttonHref: 'analytics' }]} title=\"Our Features\" description=\"Discover what makes us different\" textboxLayout=\"default\" gridVariant=\"uniform-all-items-equal\" animationType=\"slide-up\" useInvertedBackground={false} />",
+  "do": [
+    "Use for feature showcases with action buttons",
+    "Use for capability displays with brand icons",
+    "Requires features[]",
+    "Requires titleSegments?[]",
+    "Requires buttons?[]"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/FeatureCardTwentyOne.json b/registry/components/FeatureCardTwentyOne.json
new file mode 100644
index 0000000..93cc830
--- /dev/null
+++ b/registry/components/FeatureCardTwentyOne.json
@@ -0,0 +1,109 @@
+{
+  "name": "FeatureCardTwentyOne",
+  "description": "Split layout with media on one side and TextBox with accordion items on the other.",
+  "details": "Use for feature sections that need expandable content areas. Layout: 50/50 split with image/video on one side and TextBox + accordion on the other. Media position configurable (left/right). First accordion item open by default. Accordion items have divider lines between them. Mobile: stacked vertically with centered text. Supports inverted backgrounds.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Custom designs",
+        "minChars": 2,
+        "maxChars": 60
+      },
+      "description": {
+        "required": true,
+        "example": "Explore our range of customizable solutions designed to meet your unique needs.",
+        "minChars": 10,
+        "maxChars": 300
+      },
+      "tag": {
+        "required": false,
+        "example": "Features",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "accordionRules": {
+      "id": {
+        "required": true,
+        "example": "1",
+        "note": "Unique identifier for each accordion item"
+      },
+      "title": {
+        "required": true,
+        "example": "Inspiration + innovation",
+        "minChars": 2,
+        "maxChars": 60,
+        "note": "Accordion header text"
+      },
+      "content": {
+        "required": true,
+        "example": "From custom colourways to bespoke elements built from the ground up.",
+        "minChars": 10,
+        "maxChars": 500,
+        "note": "Accordion expanded content (supports HTML)"
+      }
+    },
+    "itemRules": {
+      "minItems": 2,
+      "maxItems": 6,
+      "recommendedItems": 3
+    }
+  },
+  "propsSchema": {
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "accordionItems": "Array<{ id: string, title: string, content: string }>",
+    "imageSrc?": "string (either imageSrc or videoSrc required)",
+    "imageAlt?": "string",
+    "videoSrc?": "string (either imageSrc or videoSrc required)",
+    "videoAriaLabel?": "string",
+    "mediaAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "useInvertedBackground": "boolean",
+    "mediaPosition?": "'left' | 'right' (default: 'left')",
+    "ariaLabel?": "string (default: 'Feature section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "mediaWrapperClassName?": "string",
+    "mediaClassName?": "string",
+    "contentClassName?": "string",
+    "textBoxClassName?": "string",
+    "titleClassName?": "string",
+    "descriptionClassName?": "string",
+    "tagClassName?": "string",
+    "buttonContainerClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string",
+    "titleImageWrapperClassName?": "string",
+    "titleImageClassName?": "string",
+    "accordionContainerClassName?": "string",
+    "accordionClassName?": "string",
+    "accordionTitleClassName?": "string",
+    "accordionContentClassName?": "string",
+    "accordionIconContainerClassName?": "string",
+    "accordionIconClassName?": "string"
+  },
+  "usageExample": "<FeatureCardTwentyOne title=\"Custom designs\" description=\"Explore our range of customizable solutions.\" tag=\"Features\" imageSrc=\"/images/feature.webp\" imageAlt=\"Feature showcase\" accordionItems={[{ id: '1', title: 'Inspiration + innovation', content: 'Collaborate with us on custom designs.' }, { id: '2', title: 'Sustainability + us', content: 'Committed to sustainable practices.' }, { id: '3', title: 'Request samples', content: 'Get in touch for samples and pricing.' }]} buttons={[{ text: 'Learn more', href: '#' }]} useInvertedBackground={false} mediaPosition=\"left\" />",
+  "do": [
+    "Use for feature showcases",
+    "Use for capability displays",
+    "Requires titleSegments?[]",
+    "Requires buttons?[]",
+    "Requires accordionItems[]"
+  ],
+  "dont": [
+    "Do not use less than 2 items",
+    "Do not use more than 6 items"
+  ],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/FeatureCardTwentySeven.json b/registry/components/FeatureCardTwentySeven.json
new file mode 100644
index 0000000..96d2953
--- /dev/null
+++ b/registry/components/FeatureCardTwentySeven.json
@@ -0,0 +1,87 @@
+{
+  "name": "FeatureCardTwentySeven",
+  "description": "Interactive flip cards with 3D rotation effect. Front shows title, icon, and media; back reveals multiple descriptions.",
+  "details": "Use for interactive feature showcases where users can explore details by clicking. Each card flips 180 degrees on Y-axis with 3D perspective. Front side displays title with Plus icon button and media content (image/video). Back side shows same title with X icon (rotated Plus) and multiple description texts. Uses CardStack for grid/carousel layout. Best for 3-6 items where engagement and exploration is desired.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Our Services",
+        "minChars": 2,
+        "maxChars": 50
+      },
+      "description": {
+        "required": true,
+        "example": "Discover what makes us different",
+        "minChars": 5,
+        "maxChars": 300
+      },
+      "tag": {
+        "required": false,
+        "example": "Services",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "featureRules": {
+      "minItems": 3,
+      "maxItems": 8,
+      "recommendedItems": "4",
+      "structure": {
+        "id": "string - Unique identifier (required)",
+        "title": "string - Card title on both sides (required)",
+        "descriptions": "string[] - Array of descriptions shown on back side (min: 1, recommended: 3, max: 5)",
+        "imageSrc": "string - Path to image (optional if videoSrc provided) Image is recommended if no videoSrc.",
+        "videoSrc": "string - Path to video (optional if imageSrc provided)",
+        "imageAlt": "string - Alt text for image"
+      },
+      "note": "Each feature requires id, title, descriptions array (1-5 items, recommended 3), and media (image or video). Cards flip to reveal descriptions on click."
+    }
+  },
+  "propsSchema": {
+    "features": "Array<{ id: string, title: string, descriptions: string[], imageSrc?: string, videoSrc?: string, imageAlt?: string }>",
+    "animationType": "CardAnimationType (required)",
+    "title": "string (required)",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string (required)",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required)",
+    "useInvertedBackground": "'noInvert' | 'invertDefault' (required)",
+    "ariaLabel?": "string (default: 'Feature section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string",
+    "textBoxTitleImageClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string",
+    "cardTitleClassName?": "string",
+    "cardDescriptionClassName?": "string"
+  },
+  "usageExample": "<FeatureCardTwentySeven features={[{ id: '1', title: 'Web Development', descriptions: ['Custom websites built with modern technologies', 'Best practices for optimal performance', 'Responsive design for all devices'], imageSrc: '/service1.jpg', imageAlt: 'Web Development' }]} animationType=\"slide-up\" title=\"Our Services\" description=\"Discover what makes us different\" textboxLayout=\"default\" useInvertedBackground={false} />",
+  "do": [
+    "Use for interactive feature showcases where exploration is desired",
+    "Best for 3-6 items (4 recommended)",
+    "Use high-quality images or videos for the front side",
+    "Keep descriptions concise for back side readability"
+  ],
+  "dont": [
+    "Do not use without media for each feature",
+    "Do not use for text-heavy content on front side",
+    "Do not use for more than 8 items"
+  ],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/FeatureCardTwentySix.json b/registry/components/FeatureCardTwentySix.json
new file mode 100644
index 0000000..0c102d3
--- /dev/null
+++ b/registry/components/FeatureCardTwentySix.json
@@ -0,0 +1,93 @@
+{
+  "name": "FeatureCardTwentySix",
+  "description": "Full-bleed media carousel feature cards with bottom text overlay and arrow navigation.",
+  "details": "Use for showcasing features or courses with strong visual media. Each card has full-bleed image/video with a frosted glass gradient overlay at the bottom containing title, description, and an icon button. Uses ArrowCarousel layout with centered alignment, looping, prev/next arrow controls, and mask-fade-x edges. Active item is full opacity and scale, inactive items are reduced.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Featured Courses",
+        "minChars": 2,
+        "maxChars": 50
+      },
+      "description": {
+        "required": true,
+        "example": "Handpicked by our team to help you start strong",
+        "minChars": 5,
+        "maxChars": 300
+      },
+      "tag": {
+        "required": false,
+        "example": "Popular",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "featureRules": {
+      "minItems": 4,
+      "maxItems": 12,
+      "recommendedItems": "6",
+      "note": "MINIMUM 4 ITEMS REQUIRED - carousel needs at least 4 items for proper display",
+      "structure": {
+        "title": "string - Card title displayed over media (required)",
+        "description": "string - Card description displayed over media (required)",
+        "imageSrc": "string - Path to background image (optional if videoSrc provided) Image is recommended if no videoSrc.",
+        "videoSrc": "string - Path to background video (optional if imageSrc provided)",
+        "imageAlt": "string - Alt text for background image",
+        "videoAriaLabel": "string - Aria label for background video",
+        "buttonIcon": "LucideIcon - Icon inside the card action button (required)",
+        "buttonHref": "string - Navigation target for button (optional)",
+        "buttonOnClick": "() => void - Click handler for button (optional)"
+      }
+    }
+  },
+  "propsSchema": {
+    "features": "Array<{ title: string, description: string, imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string, buttonIcon: LucideIcon, buttonHref?: string, buttonOnClick?: () => void }> (MINIMUM 4 ITEMS REQUIRED)",
+    "title": "string (required)",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string (required)",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'inline-image' (required)",
+    "useInvertedBackground": "boolean (required)",
+    "ariaLabel?": "string (default: 'Feature section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "carouselClassName?": "string",
+    "controlsClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string",
+    "textBoxTitleImageClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string",
+    "cardTitleClassName?": "string",
+    "cardDescriptionClassName?": "string",
+    "cardButtonClassName?": "string"
+  },
+  "usageExample": "<FeatureCardTwentySix features={[{ title: 'UX Design Fundamentals', description: 'Learn user-centered design from scratch', imageSrc: '/course1.jpg', imageAlt: 'UX Design course', buttonIcon: ArrowRight, buttonHref: '#courses' }]} title=\"Featured Courses\" description=\"Handpicked by our team\" textboxLayout=\"default\" useInvertedBackground={false} />",
+  "do": [
+    "Use for showcasing features or courses with strong visual media",
+    "Best for 4-12 items (6 recommended)",
+    "Use high-quality images or videos for full-bleed display",
+    "Each card requires a buttonIcon for the action button"
+  ],
+  "dont": [
+    "Do not use with fewer than 4 items - carousel requires minimum 4 items",
+    "Do not use without media for each feature",
+    "Do not use without buttonIcon",
+    "Do not use for text-heavy content"
+  ],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/FeatureCardTwentyThree.json b/registry/components/FeatureCardTwentyThree.json
new file mode 100644
index 0000000..a1099a5
--- /dev/null
+++ b/registry/components/FeatureCardTwentyThree.json
@@ -0,0 +1,123 @@
+{
+  "name": "FeatureCardTwentyThree",
+  "description": "Feature section with separate media and card layout, featuring tags and arrow navigation.",
+  "details": "Use for feature listings with prominent imagery. Layout: CardStackTextBox header → Grid of feature items. Each item has separate media (aspect-square) above a card containing title, tags row, and arrow icon. Media and card are visually distinct with gap-6 spacing. Tags use the Tag component and arrow rotates -45deg on hover. Best for visual-focused feature listings with clean separation between imagery and content.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Our Features",
+        "minChars": 2,
+        "maxChars": 50
+      },
+      "description": {
+        "required": true,
+        "example": "Stay updated with the latest trends and insights",
+        "minChars": 5,
+        "maxChars": 300
+      },
+      "tag": {
+        "required": false,
+        "example": "Features",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "featureRules": {
+      "id": {
+        "required": true,
+        "example": "1",
+        "note": "Unique identifier for the feature item"
+      },
+      "title": {
+        "required": true,
+        "example": "Discover the essential features of our app",
+        "minChars": 10,
+        "maxChars": 100
+      },
+      "tags": {
+        "required": true,
+        "minItems": 1,
+        "maxItems": 4,
+        "structure": "string[]",
+        "example": "['Features', 'Jan 29, 2025']",
+        "note": "Array of tag strings displayed using Tag component"
+      },
+      "imageSrc": {
+        "required": false,
+        "example": "/feature-1.jpg",
+        "note": "Either imageSrc or videoSrc should be provided Either imageSrc or videoSrc should be provided. Image is recommended if no videoSrc."
+      },
+      "videoSrc": {
+        "required": false,
+        "example": "/feature-1.mp4",
+        "note": "Either imageSrc or videoSrc should be provided"
+      },
+      "imageAlt": {
+        "required": false,
+        "example": "Feature preview image",
+        "note": "Falls back to feature title if not provided"
+      },
+      "videoAriaLabel": {
+        "required": false,
+        "example": "Feature video",
+        "note": "Falls back to feature title if not provided"
+      }
+    }
+  },
+  "propsSchema": {
+    "features": "Array<{ id: string, title: string, tags: string[], imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string, onFeatureClick?: () => void }>",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required)",
+    "useInvertedBackground": "boolean",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+    "uniformGridCustomHeightClasses?": "string",
+    "ariaLabel?": "string (default: 'Features section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "itemClassName?": "string",
+    "mediaWrapperClassName?": "string",
+    "mediaClassName?": "string",
+    "cardClassName?": "string",
+    "cardTitleClassName?": "string",
+    "tagsContainerClassName?": "string",
+    "tagClassName?": "string",
+    "arrowClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string",
+    "textBoxTitleImageClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "gridClassName?": "string",
+    "carouselClassName?": "string",
+    "controlsClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string"
+  },
+  "usageExample": "<FeatureCardTwentyThree features={[{ id: '1', title: 'Discover the essential features of our app', tags: ['Features', 'Jan 29, 2025'], imageSrc: '/feature1.jpg' }, { id: '2', title: 'How to organize your tasks effectively', tags: ['Guides', 'Feb 03, 2025'], imageSrc: '/feature2.jpg' }]} animationType=\"slide-up\" title=\"Our Features\" description=\"Stay updated with the latest trends and insights\" textboxLayout=\"default\" useInvertedBackground={false} />",
+  "do": [
+    "Use for visual-focused feature listings",
+    "Include 1-4 tags per feature",
+    "Use high-quality square images",
+    "Best for feature showcases with clean separation between imagery and content"
+  ],
+  "dont": [
+    "Do not use without tags",
+    "Do not use for text-heavy features"
+  ],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/FeatureHoverPattern.json b/registry/components/FeatureHoverPattern.json
new file mode 100644
index 0000000..a4e4637
--- /dev/null
+++ b/registry/components/FeatureHoverPattern.json
@@ -0,0 +1,107 @@
+{
+  "name": "FeatureHoverPattern",
+  "description": "CardStack feature section with interactive hover pattern effect revealing behind centered icons.",
+  "details": "Use for feature showcases with visual engagement through hover interactions. Uses CardStack with uniform-all-items-equal grid (hardcoded). Each card displays a centered icon in a container with hover-triggered pattern reveal using GSAP ScrollTrigger. Pattern appears on mouse movement (desktop) or scroll viewport visibility (mobile). Desktop: Mouse movement reveals radial gradient pattern with random character overlay. Mobile: Pattern activates when card enters viewport (20% threshold for pattern, 40% for icon). Each card has icon in center with card styling, title and description below. Icon containers have backdrop-blur-sm with border. Pattern uses Framer Motion with useMotionValue for smooth tracking. Supports custom gradient colors via gradientClassName. All cards have min-h-80 2xl:min-h-90 default height. Best for 2-6 features to showcase key product benefits with interactive visual appeal.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Powerful Features",
+        "minChars": 2,
+        "maxChars": 35
+      },
+      "description": {
+        "required": true,
+        "example": "Hover over each card to reveal the interactive pattern",
+        "minChars": 5,
+        "maxChars": 250
+      },
+      "tag": {
+        "required": false,
+        "example": "Features",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "featureCardRules": {
+      "icon": {
+        "required": true,
+        "example": "Zap",
+        "note": "LucideIcon component displayed in center of card with hover pattern"
+      },
+      "title": {
+        "required": true,
+        "example": "Lightning Fast",
+        "minChars": 2,
+        "maxChars": 40
+      },
+      "description": {
+        "required": true,
+        "example": "Optimized for performance with minimal overhead and blazing fast load times",
+        "minChars": 10,
+        "maxChars": 200
+      }
+    },
+    "itemRules": {
+      "minItems": 2,
+      "maxItems": 6,
+      "recommendedItems": "2-6",
+      "note": "Works best with 2-6 features for optimal grid layout"
+    }
+  },
+  "propsSchema": {
+    "features": "Array<{ icon: LucideIcon, title: string, description: string, button?: ButtonConfig }> (required)",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)",
+    "title": "string (required)",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string (required)",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground": "boolean (required)",
+    "carouselMode?": "'auto' | 'buttons' (default: 'buttons' - for 5+ items)",
+    "uniformGridCustomHeightClasses?": "string (default: 'min-h-80 2xl:min-h-90')",
+    "ariaLabel?": "string (default: 'Feature section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "iconContainerClassName?": "string",
+    "iconClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string",
+    "titleImageWrapperClassName?": "string",
+    "titleImageClassName?": "string",
+    "cardTitleClassName?": "string",
+    "cardDescriptionClassName?": "string",
+    "gradientClassName?": "string - Custom gradient for hover pattern (default: 'bg-gradient-to-r from-accent to-background-accent')",
+    "gridClassName?": "string",
+    "carouselClassName?": "string",
+    "controlsClassName?": "string",
+    "cardButtonClassName?": "string",
+    "cardButtonTextClassName?": "string"
+  },
+  "usageExample": "<FeatureHoverPattern features={[{ icon: Zap, title: 'Lightning Fast', description: 'Optimized for performance with minimal overhead' }, { icon: Shield, title: 'Secure by Default', description: 'Built with security best practices' }]} title=\"Powerful Features\" description=\"Hover over each card to reveal the interactive pattern\" textboxLayout=\"default\" animationType=\"slide-up\" useInvertedBackground={false} />",
+  "do": [
+    "Use for feature showcases with visual engagement",
+    "Best for 2-6 features",
+    "Each feature requires an icon",
+    "Supports custom gradient colors via gradientClassName"
+  ],
+  "dont": [
+    "Do not use without icons for each feature",
+    "Do not use for simple text-only feature lists"
+  ],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/FeatureTimelineBento.json b/registry/components/FeatureTimelineBento.json
new file mode 100644
index 0000000..61d001a
--- /dev/null
+++ b/registry/components/FeatureTimelineBento.json
@@ -0,0 +1,111 @@
+{
+  "name": "FeatureTimelineBento",
+  "description": "Timeline-based feature section with scroll-triggered stacking animations and bento component visualizations instead of images.",
+  "details": "Use for process flows, roadmaps, or sequential feature presentations with interactive visualizations. Each card displays a numbered step badge, title, description, and a bento component visualization in a two-column layout. As you scroll, cards stack on top of each other with fade animations. The timeline layout provides a clear visual progression through steps or stages. Supports 15 bento types: globe, icon-info-cards, animated-bar-chart, 3d-stack-cards, 3d-task-list, orbiting-icons, map, marquee, line-chart, 3d-card-grid, phone, chat, reveal-icon, timeline, media-stack. No grid/carousel modes - uses fixed timeline stacking layout with GSAP ScrollTrigger. Optional header with title, description, tag, and buttons. Header supports centered or split textbox layout.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Our Process",
+        "minChars": 2,
+        "maxChars": 35
+      },
+      "description": {
+        "required": true,
+        "example": "Discover how we bring ideas to life",
+        "minChars": 5,
+        "maxChars": 250
+      },
+      "tag": {
+        "required": false,
+        "example": "Process",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "featureCardRules": {
+      "title": {
+        "required": true,
+        "example": "Research & Planning",
+        "minChars": 2,
+        "maxChars": 50
+      },
+      "description": {
+        "required": true,
+        "example": "Understanding user needs, market trends, and project requirements",
+        "minChars": 10,
+        "maxChars": 300
+      }
+    },
+    "bentoComponentRules": {
+      "note": "CRITICAL: Each feature MUST use a DIFFERENT bentoComponent type. Never repeat the same type across features (e.g., don't use 'timeline' twice). Requirements vary by type:",
+      "types": {
+        "globe": "{ bentoComponent: 'globe' } - No additional fields required",
+        "animated-bar-chart": "{ bentoComponent: 'animated-bar-chart' } - No additional fields required",
+        "map": "{ bentoComponent: 'map' } - No additional fields required",
+        "line-chart": "{ bentoComponent: 'line-chart' } - No additional fields required",
+        "icon-info-cards": "{ bentoComponent: 'icon-info-cards', items: Array<{ icon: LucideIcon, label: string, value: string }> } - Requires items array",
+        "3d-stack-cards": "{ bentoComponent: '3d-stack-cards', items: [Bento3DItem, Bento3DItem, Bento3DItem] } - Requires exactly 3 items. Each item: { icon: LucideIcon, title: string, subtitle: string, detail: string }",
+        "3d-task-list": "{ bentoComponent: '3d-task-list', bentoTitle: string, items: Array<{ icon: LucideIcon, label: string, time: string }> } - Requires bentoTitle (not title) and items array",
+        "orbiting-icons": "{ bentoComponent: 'orbiting-icons', centerIcon: LucideIcon, items: Array<{ icon: LucideIcon, ring?: 1 | 2 | 3, duration?: number }> } - Requires centerIcon and items array",
+        "marquee": "{ bentoComponent: 'marquee', centerIcon: LucideIcon, variant: 'text' | 'icon', texts?: string[], icons?: LucideIcon[] } - Requires centerIcon and variant",
+        "phone": "{ bentoComponent: 'phone', statusIcon: LucideIcon, alertIcon: LucideIcon, alertTitle: string, alertMessage: string, apps: PhoneApps8 } - Requires all fields",
+        "chat": "{ bentoComponent: 'chat', aiIcon: LucideIcon, userIcon: LucideIcon, exchanges: Array<{ userMessage: string, aiResponse: string }>, placeholder: string } - Requires all fields",
+        "3d-card-grid": "{ bentoComponent: '3d-card-grid', items: [GridCardItem x4], centerIcon: LucideIcon } - Requires exactly 4 items and centerIcon",
+        "reveal-icon": "{ bentoComponent: 'reveal-icon', icon: LucideIcon } - Requires icon",
+        "timeline": "{ bentoComponent: 'timeline', heading: string, subheading: string, items: [TimelineItem x3], completedLabel: string } - Requires exactly 3 items",
+        "media-stack": "{ bentoComponent: 'media-stack', items: [MediaStackItem x3] } - Requires exactly 3 items"
+      }
+    }
+  },
+  "propsSchema": {
+    "features": "Array<{ title: string, description: string, buttons?: ButtonConfig[] } & BentoComponentVariant> - Each card has title, description, optional buttons, and one bentoComponent type with its required props",
+    "title": "string (required)",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string (required)",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required)",
+    "useInvertedBackground": "boolean (required)",
+    "ariaLabel?": "string (default: 'Feature section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string",
+    "titleImageWrapperClassName?": "string",
+    "titleImageClassName?": "string",
+    "cardContentClassName?": "string",
+    "stepNumberClassName?": "string",
+    "cardTitleClassName?": "string",
+    "cardDescriptionClassName?": "string",
+    "bentoContainerClassName?": "string",
+    "cardButtonClassName?": "string",
+    "cardButtonTextClassName?": "string"
+  },
+  "usageExample": "<FeatureTimelineBento features={[{ title: 'Global Analytics', description: 'Track performance worldwide', bentoComponent: 'globe' }, { title: 'Team Metrics', description: 'Monitor team performance', bentoComponent: 'icon-info-cards', items: [{icon: Users, label: 'Active', value: '1,234'}] }]} title=\"Our Process\" description=\"See how it works\" textboxLayout=\"default\" useInvertedBackground={false} />",
+  "do": [
+    "Use for process flows with interactive visualizations",
+    "Use for roadmaps with rich content",
+    "Use for step-by-step explanations with visual aids",
+    "Use appropriate bentoComponent for each step",
+    "Requires features[]"
+  ],
+  "dont": [
+    "CRITICAL: NEVER use the same bentoComponent type for multiple features - each feature MUST have a unique/different bento type (e.g., if one uses 'timeline', others must use 'reveal-icon', 'chat', 'globe', etc.)",
+    "Do not use for non-sequential content",
+    "Do not use with single item"
+  ],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/FloatingGradientBackground.json b/registry/components/FloatingGradientBackground.json
new file mode 100644
index 0000000..8223c12
--- /dev/null
+++ b/registry/components/FloatingGradientBackground.json
@@ -0,0 +1,20 @@
+{
+  "name": "FloatingGradientBackground",
+  "description": "Five animated gradient circles with CSS animations and vertical gradient mask.",
+  "details": "Use for dynamic, engaging backgrounds with subtle motion. Features 5 circles with different animations (moveVertical, moveInCircle, moveHorizontal) using primary-cta and accent colors. Includes 40px blur and linear gradient mask (transparent → visible 20-80% → transparent). Circles have varying opacities (0.1-0.2) and use hard-light blend mode.",
+  "constraints": {},
+  "propsSchema": {
+    "className?": "string"
+  },
+  "usageExample": "<FloatingGradientBackground />",
+  "do": [
+    "Use for feature showcases",
+    "Use for capability displays"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/FluidBackground.json b/registry/components/FluidBackground.json
new file mode 100644
index 0000000..c0ac7dc
--- /dev/null
+++ b/registry/components/FluidBackground.json
@@ -0,0 +1,20 @@
+{
+  "name": "FluidBackground",
+  "description": "Generative fluid patterns using CPPN shader with theme color integration.",
+  "details": "Use for modern, dynamic backgrounds with organic fluid patterns. Features real-time WebGL shader animation using CPPN (Compositional Pattern Producing Networks) that creates continuously morphing, fluid-like patterns. Automatically adapts to theme colors by reading CSS variables (--background, --color-primary-cta, --color-accent, --color-secondary-cta) and blending them with generated patterns. Uses React Three Fiber for 3D rendering with dynamic viewport sizing. Performance optimized with React.memo and responsive to window resizing. Best for contemporary, premium designs where subtle motion adds visual interest without distraction.",
+  "constraints": {},
+  "propsSchema": {
+    "className?": "string"
+  },
+  "usageExample": "<FluidBackground />",
+  "do": [
+    "Use for feature showcases",
+    "Use for capability displays"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/FooterBase.json b/registry/components/FooterBase.json
new file mode 100644
index 0000000..cf5eea5
--- /dev/null
+++ b/registry/components/FooterBase.json
@@ -0,0 +1,84 @@
+{
+  "name": "FooterBase",
+  "description": "Classic footer with logo, multi-column navigation, copyright text, and privacy policy link.",
+  "details": "Use for standard website footers with organized navigation. Features logoText as h2 heading on left, flexible column layout for navigation links, copyright text, and privacy policy button. All links use ButtonTextUnderline component. Footer uses primary-button background with text-background color scheme.",
+  "constraints": {
+    "textRules": {
+      "logoText": {
+        "required": true,
+        "example": "Company Name",
+        "minChars": 2,
+        "maxChars": 30
+      },
+      "copyrightText": {
+        "required": false,
+        "default": "© 2025 | Webild",
+        "example": "© 2025 Company Name",
+        "minChars": 5,
+        "maxChars": 50
+      },
+      "columnTitle": {
+        "required": true,
+        "example": "Product",
+        "minChars": 2,
+        "maxChars": 20
+      },
+      "itemLabel": {
+        "required": true,
+        "example": "Features",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "structureRules": {
+      "columns": {
+        "required": true,
+        "minColumns": 1,
+        "maxColumns": 3,
+        "note": "Each column must have title and items array"
+      },
+      "items": {
+        "required": true,
+        "minItems": 1,
+        "structure": {
+          "label": "string - Link text (required)",
+          "href": "string - Link destination (optional). External URLs (https://, http://, www.) open in new tab. Internal values (e.g., 'about', 'contact') scroll to #about, #contact sections",
+          "onClick": "() => void - Additional click handler (optional)"
+        }
+      }
+    }
+  },
+  "propsSchema": {
+    "columns": "Array<{ title: string, items: Array<{ label: string, href: string }> }> - Footer navigation columns (required)",
+    "logoSrc?": "string",
+    "logoAlt?": "string",
+    "logoText": "string (required)",
+    "copyrightText?": "string (default: '© 2025 | Webild')",
+    "onPrivacyClick?": "() => void",
+    "ariaLabel?": "string (default: 'Site footer')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "logoClassName?": "string",
+    "logoImageClassName?": "string",
+    "logoTextClassName?": "string",
+    "columnsClassName?": "string",
+    "columnClassName?": "string",
+    "columnTitleClassName?": "string",
+    "columnItemClassName?": "string",
+    "copyrightContainerClassName?": "string",
+    "copyrightTextClassName?": "string",
+    "privacyButtonClassName?": "string"
+  },
+  "usageExample": "<FooterBase logoText=\"Company Name\" columns={[{ title: 'Product', items: [{ label: 'Features', href: 'features' }, { label: 'Pricing', href: 'pricing' }] }]} copyrightText=\"© 2025 | Company\" onPrivacyClick={() => console.log('Privacy clicked')} />",
+  "do": [
+    "Use for feature showcases",
+    "Use for capability displays",
+    "Requires columns[]"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/FooterBaseCard.json b/registry/components/FooterBaseCard.json
new file mode 100644
index 0000000..0f2143b
--- /dev/null
+++ b/registry/components/FooterBaseCard.json
@@ -0,0 +1,69 @@
+{
+  "name": "FooterBaseCard",
+  "description": "Card-wrapped footer with logo, navigation columns, copyright, and privacy policy link.",
+  "details": "Use for footers that need comprehensive navigation within a card container. Layout: Section wrapper (py-20) → Card container (w-content-width, rounded-theme-capped, p-10) → Top section (logo + FooterColumns in flex-row) → Border divider (border-t, border-foreground/20) → Bottom section (copyright + privacy button). Logo supports either image (logoSrc with Next.js Image) or text heading (logoText, text-4xl). Navigation organized via FooterColumns component accepting array of column objects with title and items. Bottom section displays copyright text (text-foreground/50, text-sm) on left and privacy policy button (ButtonTextUnderline) on right in flex row. Card wrapper provides unified, elevated appearance compared to FooterBase. Text colors use foreground variants since content is within card element. Best for comprehensive footer navigation with modern card styling. Uses semantic footer tag with contentinfo role.",
+  "constraints": {
+    "textRules": {
+      "copyrightText": {
+        "required": false,
+        "example": "© 2025 | Webild",
+        "minChars": 5,
+        "maxChars": 100,
+        "note": "Copyright text displayed at bottom left"
+      },
+      "logoText": {
+        "required": true,
+        "example": "Webild",
+        "minChars": 2,
+        "maxChars": 30,
+        "note": "Text used for h2 heading"
+      }
+    },
+    "columnsRules": {
+      "required": true,
+      "structure": {
+        "title": "string - Column heading (required)",
+        "items": "Array<{ label: string, href: string }> - Navigation links (required)"
+      },
+      "minColumns": 1,
+      "maxColumns": 5,
+      "note": "Array of footer column objects. Each column must have title and items array."
+    },
+    "logoRules": {
+      "note": "Uses logoText as h2 heading."
+    }
+  },
+  "propsSchema": {
+    "logoSrc?": "string",
+    "logoAlt?": "string",
+    "logoText": "string (required)",
+    "columns": "Array<{ title: string, items: Array<{ label: string, href: string }> }> - Footer navigation columns (required)",
+    "copyrightText?": "string (default: '© 2025 | Webild')",
+    "onPrivacyClick?": "() => void",
+    "ariaLabel?": "string (default: 'Site footer')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "logoClassName?": "string",
+    "logoImageClassName?": "string",
+    "logoTextClassName?": "string",
+    "columnsClassName?": "string",
+    "columnClassName?": "string",
+    "columnTitleClassName?": "string",
+    "columnItemClassName?": "string",
+    "copyrightContainerClassName?": "string",
+    "copyrightTextClassName?": "string",
+    "privacyButtonClassName?": "string"
+  },
+  "usageExample": "<FooterBaseCard columns={[{ title: 'Product', items: [{ label: 'Features', href: '/features' }, { label: 'Pricing', href: '/pricing' }] }, { title: 'Company', items: [{ label: 'About', href: '/about' }, { label: 'Blog', href: '/blog' }] }]} logoText=\"Webild\" copyrightText=\"© 2025 | Webild\" onPrivacyClick={() => console.log('Privacy clicked')} />",
+  "do": [
+    "Use for general use",
+    "Requires columns[]"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/FooterBaseReveal.json b/registry/components/FooterBaseReveal.json
new file mode 100644
index 0000000..62535be
--- /dev/null
+++ b/registry/components/FooterBaseReveal.json
@@ -0,0 +1,80 @@
+{
+  "name": "FooterBaseReveal",
+  "description": "Animated footer reveal wrapper that creates a fixed footer with scroll-triggered reveal effect.",
+  "details": "Use when you want the footer to stay fixed at the bottom and reveal as users scroll. Wraps FooterBase component with fixed positioning and dynamic height calculation using ResizeObserver. Creates a reveal animation effect as content scrolls up. Ideal for modern, engaging scroll experiences.",
+  "constraints": {
+    "textRules": {
+      "copyrightText": {
+        "required": false,
+        "default": "© 2025 | Webild",
+        "example": "© 2025 Company Name",
+        "minChars": 5,
+        "maxChars": 50
+      },
+      "columnTitle": {
+        "required": true,
+        "example": "Product",
+        "minChars": 2,
+        "maxChars": 20
+      },
+      "itemLabel": {
+        "required": true,
+        "example": "Features",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "structureRules": {
+      "columns": {
+        "required": true,
+        "minColumns": 1,
+        "maxColumns": 3,
+        "note": "Each column must have title and items array"
+      },
+      "items": {
+        "required": true,
+        "minItems": 1,
+        "structure": {
+          "label": "string - Link text (required)",
+          "href": "string - Link destination (optional). External URLs open in new tab, internal values scroll to sections",
+          "onClick": "() => void - Additional click handler (optional)"
+        }
+      }
+    }
+  },
+  "propsSchema": {
+    "logoSrc?": "string",
+    "logoAlt?": "string",
+    "logoText": "string (required)",
+    "columns": "Array<{ title: string, items: Array<{ label: string, href: string }> }> - Footer navigation columns (required)",
+    "copyrightText?": "string",
+    "onPrivacyClick?": "() => void",
+    "ariaLabel?": "string",
+    "className?": "string",
+    "wrapperClassName?": "string",
+    "containerClassName?": "string",
+    "footerClassName?": "string",
+    "footerContainerClassName?": "string",
+    "logoClassName?": "string",
+    "logoImageClassName?": "string",
+    "logoTextClassName?": "string",
+    "columnsClassName?": "string",
+    "columnClassName?": "string",
+    "columnTitleClassName?": "string",
+    "columnItemClassName?": "string",
+    "copyrightContainerClassName?": "string",
+    "copyrightTextClassName?": "string",
+    "privacyButtonClassName?": "string"
+  },
+  "usageExample": "<FooterBaseReveal logoText=\"Company Name\" columns={[{ title: 'Product', items: [{ label: 'Features', href: 'features' }, { label: 'Pricing', href: 'pricing' }] }]} copyrightText=\"© 2025 | Company\" />",
+  "do": [
+    "Use for general use",
+    "Requires columns[]"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/FooterCard.json b/registry/components/FooterCard.json
new file mode 100644
index 0000000..0061fad
--- /dev/null
+++ b/registry/components/FooterCard.json
@@ -0,0 +1,64 @@
+{
+  "name": "FooterCard",
+  "description": "Minimalist footer with card wrapper containing logo, divider, copyright, and optional social links.",
+  "details": "Use for simple, clean footer layouts with card styling. Layout: Section wrapper (py-20) → Card container (w-content-width, rounded-theme-capped, px-10) → FooterLogo → Divider line (h-px, bg-accent/20) → Bottom section (copyright text + optional social links). Logo supports either image (logoSrc) or SVG text (logoText via FooterLogo component). Divider uses accent color with 20% opacity. Bottom section displays copyright (text-accent/75, text-sm) on left and optional social icons on right in flex row (mobile: stacks vertically). Social links are conditionally rendered only when provided. All elements contained within card for unified appearance. Best for simple, modern footer designs without extensive navigation. Uses semantic footer tag with contentinfo role.",
+  "constraints": {
+    "textRules": {
+      "copyrightText": {
+        "required": false,
+        "example": "© 2025 | Webild",
+        "minChars": 5,
+        "maxChars": 100,
+        "note": "Copyright text displayed at bottom left"
+      },
+      "logoText": {
+        "required": true,
+        "example": "Webild",
+        "minChars": 2,
+        "maxChars": 30,
+        "note": "Text used for SVG logo"
+      }
+    },
+    "socialLinksRules": {
+      "required": false,
+      "structure": {
+        "icon": "LucideIcon - Icon component (required)",
+        "href": "string - Social profile URL (required)",
+        "ariaLabel": "string - Accessibility label (required)"
+      },
+      "note": "Optional array of social links. Only renders if provided and has length > 0."
+    },
+    "logoRules": {
+      "note": "Uses logoText for SVG text logo via FooterLogo component."
+    }
+  },
+  "propsSchema": {
+    "logoSrc?": "string",
+    "logoAlt?": "string",
+    "logoText": "string (required)",
+    "copyrightText?": "string (default: '© 2025 | Webild')",
+    "socialLinks?": "Array<{ icon: LucideIcon, href: string, ariaLabel: string }> - Social media links",
+    "ariaLabel?": "string (default: 'Site footer')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "logoClassName?": "string",
+    "logoImageClassName?": "string",
+    "dividerClassName?": "string",
+    "copyrightContainerClassName?": "string",
+    "copyrightTextClassName?": "string",
+    "socialContainerClassName?": "string",
+    "socialIconClassName?": "string"
+  },
+  "usageExample": "<FooterCard logoText=\"Webild\" copyrightText=\"© 2025 | Webild\" socialLinks={[{ icon: Twitter, href: 'https://twitter.com/webild', ariaLabel: 'Twitter' }, { icon: Linkedin, href: 'https://linkedin.com/company/webild', ariaLabel: 'LinkedIn' }]} />",
+  "do": [
+    "Use for general use",
+    "Requires socialLinks?[]"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/FooterLogoEmphasis.json b/registry/components/FooterLogoEmphasis.json
new file mode 100644
index 0000000..b62e6ed
--- /dev/null
+++ b/registry/components/FooterLogoEmphasis.json
@@ -0,0 +1,72 @@
+{
+  "name": "FooterLogoEmphasis",
+  "description": "Footer with prominent centered logo emphasis and grid-based navigation layout with chevron icons.",
+  "details": "Use when logo branding is primary focus in footer. Features large centered logo at top (image or SVG text), followed by responsive grid of navigation links (1-5 columns max) with ChevronRight icons. Grid columns automatically adjust based on number of column arrays provided. No column titles - just clean link lists. Uses primary-button background with rounded-t-theme-capped styling.",
+  "constraints": {
+    "textRules": {
+      "logoText": {
+        "required": false,
+        "default": "Webild",
+        "example": "Company Name",
+        "minChars": 2,
+        "maxChars": 30
+      },
+      "itemLabel": {
+        "required": true,
+        "example": "Features",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "structureRules": {
+      "columns": {
+        "required": true,
+        "minColumns": 1,
+        "maxColumns": 5,
+        "note": "Grid automatically adjusts from 1-5 columns based on array length"
+      },
+      "items": {
+        "required": true,
+        "minItems": 1,
+        "structure": {
+          "label": "string - Link text (required)",
+          "href": "string - Link destination (optional). External URLs open in new tab, internal values scroll to sections",
+          "onClick": "() => void - Additional click handler (optional)"
+        }
+      },
+      "logo": {
+        "note": "Uses logoText for SVG text logo"
+      }
+    }
+  },
+  "propsSchema": {
+    "logoSrc?": "string",
+    "logoAlt?": "string",
+    "columns": "Array<{ items: Array<{ label: string, href?: string, onClick?: () => void }> }> - Footer navigation columns (required, max 5)",
+    "logoText": "string (required)",
+    "ariaLabel?": "string (default: 'Site footer')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "logoClassName?": "string",
+    "logoImageClassName?": "string",
+    "columnsClassName?": "string",
+    "columnClassName?": "string",
+    "itemClassName?": "string",
+    "iconClassName?": "string",
+    "buttonClassName?": "string"
+  },
+  "usageExample": "<FooterLogoEmphasis columns={[{ items: [{ label: 'Features', href: 'features' }] }, { items: [{ label: 'About', href: 'about' }] }]} logoText=\"Company\" />",
+  "do": [
+    "Use for feature showcases",
+    "Use for capability displays",
+    "Requires columns[]"
+  ],
+  "dont": [
+    "Do not use more than 4 items"
+  ],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/FooterLogoEmphasisReveal.json b/registry/components/FooterLogoEmphasisReveal.json
new file mode 100644
index 0000000..b51d4a3
--- /dev/null
+++ b/registry/components/FooterLogoEmphasisReveal.json
@@ -0,0 +1,72 @@
+{
+  "name": "FooterLogoEmphasisReveal",
+  "description": "Footer with prominent centered logo emphasis that reveals from behind content as user scrolls (sticky reveal effect).",
+  "details": "Use when logo branding is primary focus and you want a sticky reveal effect. Wraps FooterLogoEmphasis with scroll-based reveal animation - footer stays fixed at bottom and reveals as content scrolls past. Features large centered logo at top, followed by responsive grid of navigation links (1-5 columns max) with ChevronRight icons. Grid columns automatically adjust based on number of column arrays provided. No column titles - just clean link lists. Uses primary-button background with rounded-t-theme-capped styling.",
+  "constraints": {
+    "textRules": {
+      "logoText": {
+        "required": true,
+        "example": "Company Name",
+        "minChars": 2,
+        "maxChars": 30
+      },
+      "itemLabel": {
+        "required": true,
+        "example": "Features",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "structureRules": {
+      "columns": {
+        "required": true,
+        "minColumns": 1,
+        "maxColumns": 5,
+        "note": "Grid automatically adjusts from 1-5 columns based on array length"
+      },
+      "items": {
+        "required": true,
+        "minItems": 1,
+        "structure": {
+          "label": "string - Link text (required)",
+          "href": "string - Link destination (optional). External URLs open in new tab, internal values scroll to sections",
+          "onClick": "() => void - Additional click handler (optional)"
+        }
+      },
+      "logo": {
+        "note": "Uses logoText for SVG text logo"
+      }
+    }
+  },
+  "propsSchema": {
+    "columns": "Array<{ items: Array<{ label: string, href?: string, onClick?: () => void }> }> - Footer navigation columns (required, max 5)",
+    "logoText": "string (required)",
+    "ariaLabel?": "string (default: 'Site footer')",
+    "className?": "string",
+    "wrapperClassName?": "string",
+    "containerClassName?": "string",
+    "footerClassName?": "string",
+    "footerContainerClassName?": "string",
+    "logoClassName?": "string",
+    "columnsClassName?": "string",
+    "columnClassName?": "string",
+    "itemClassName?": "string",
+    "iconClassName?": "string",
+    "buttonClassName?": "string"
+  },
+  "usageExample": "<FooterLogoEmphasisReveal columns={[{ items: [{ label: 'Features', href: 'features' }] }, { items: [{ label: 'About', href: 'about' }] }]} logoText=\"Company\" />",
+  "do": [
+    "Use for feature showcases",
+    "Use for capability displays",
+    "Use for sticky reveal footer effect",
+    "Requires columns[]"
+  ],
+  "dont": [
+    "Do not use more than 5 columns"
+  ],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/FooterLogoReveal.json b/registry/components/FooterLogoReveal.json
new file mode 100644
index 0000000..29f4ecc
--- /dev/null
+++ b/registry/components/FooterLogoReveal.json
@@ -0,0 +1,46 @@
+{
+  "name": "FooterLogoReveal",
+  "description": "Minimalist footer with logo that reveals on scroll using fixed positioning and clip-path.",
+  "details": "Use for minimal, logo-only footers with scroll reveal effect. Footer stays fixed at bottom and reveals as user scrolls down the page using clip-path animation. Contains only FooterLogo component (supports image or SVG text logo) centered with card styling. Uses ResizeObserver to dynamically track footer height for proper reveal effect. Best for clean, modern designs where footer should not distract from content. Uses semantic section and footer tags with contentinfo role.",
+  "constraints": {
+    "textRules": {
+      "logoText": {
+        "required": true,
+        "example": "Webild",
+        "minChars": 2,
+        "maxChars": 30,
+        "note": "Text used for SVG logo"
+      }
+    },
+    "logoRules": {
+      "note": "Uses logoText for SVG text logo via FooterLogo component."
+    },
+    "revealEffectRules": {
+      "note": "Component uses fixed positioning and clip-path for scroll reveal effect. Requires page content above footer to trigger scroll. ResizeObserver dynamically updates footer height for responsive reveal."
+    }
+  },
+  "propsSchema": {
+    "logoSrc?": "string",
+    "logoAlt?": "string",
+    "logoText": "string (required)",
+    "leftLink": "{ text: string, onClick?: () => void, href?: string } (required)",
+    "rightLink": "{ text: string, onClick?: () => void, href?: string } (required)",
+    "ariaLabel?": "string (default: 'Site footer')",
+    "className?": "string",
+    "wrapperClassName?": "string",
+    "containerClassName?": "string",
+    "logoClassName?": "string",
+    "logoImageClassName?": "string",
+    "linkClassName?": "string"
+  },
+  "usageExample": "<FooterLogoReveal logoText=\"Webild\" leftLink={{ text: 'Privacy Policy', href: '/privacy' }} rightLink={{ text: 'Terms of Service', href: '/terms' }} />",
+  "do": [
+    "Use for general use"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/FooterMedia.json b/registry/components/FooterMedia.json
new file mode 100644
index 0000000..38b40f8
--- /dev/null
+++ b/registry/components/FooterMedia.json
@@ -0,0 +1,102 @@
+{
+  "name": "FooterMedia",
+  "description": "Footer with full-width media (image/video) above classic navigation layout.",
+  "details": "Use for visually impactful footers with media. Features full-width image or video at top with mask-fade-top-long effect (fades from top), followed by standard footer layout: logoText as h2 heading, multi-column navigation, copyright, and privacy policy. Media is required (either imageSrc or videoSrc). Same navigation structure as FooterBase.",
+  "constraints": {
+    "textRules": {
+      "logoText": {
+        "required": true,
+        "example": "Company Name",
+        "minChars": 2,
+        "maxChars": 30
+      },
+      "copyrightText": {
+        "required": false,
+        "default": "© 2025 | Webild",
+        "example": "© 2025 Company Name",
+        "minChars": 5,
+        "maxChars": 50
+      },
+      "columnTitle": {
+        "required": true,
+        "example": "Product",
+        "minChars": 2,
+        "maxChars": 20
+      },
+      "itemLabel": {
+        "required": true,
+        "example": "Features",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "mediaRules": {
+      "note": "Either imageSrc or videoSrc is required (discriminated union)",
+      "imageSrc": {
+        "required": "conditional - required if no videoSrc",
+        "example": "https://images.unsplash.com/photo-1497215728101-856f4ea42174?w=1920",
+        "note": "Either imageSrc or videoSrc should be provided. Image is recommended if no videoSrc."
+      },
+      "videoSrc": {
+        "required": "conditional - required if no imageSrc",
+        "example": "/videos/footer-background.mp4"
+      }
+    },
+    "structureRules": {
+      "columns": {
+        "required": true,
+        "minColumns": 1,
+        "maxColumns": 3,
+        "note": "Each column must have title and items array"
+      },
+      "items": {
+        "required": true,
+        "minItems": 1,
+        "structure": {
+          "label": "string - Link text (required)",
+          "href": "string - Link destination (optional)",
+          "onClick": "() => void - Additional click handler (optional)"
+        }
+      }
+    }
+  },
+  "propsSchema": {
+    "imageSrc": "string (required if no videoSrc)",
+    "imageAlt?": "string (default: '')",
+    "videoSrc": "string (required if no imageSrc)",
+    "videoAriaLabel?": "string (default: 'Footer video')",
+    "logoSrc?": "string",
+    "logoAlt?": "string",
+    "logoText": "string (required)",
+    "columns": "Array<{ title: string, items: Array<{ label: string, href: string }> }> - Footer navigation columns (required)",
+    "copyrightText?": "string (default: '© 2025 | Webild')",
+    "onPrivacyClick?": "() => void",
+    "ariaLabel?": "string (default: 'Site footer')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "mediaWrapperClassName?": "string",
+    "mediaClassName?": "string",
+    "logoClassName?": "string",
+    "logoImageClassName?": "string",
+    "logoTextClassName?": "string",
+    "columnsClassName?": "string",
+    "columnClassName?": "string",
+    "columnTitleClassName?": "string",
+    "columnItemClassName?": "string",
+    "copyrightContainerClassName?": "string",
+    "copyrightTextClassName?": "string",
+    "privacyButtonClassName?": "string"
+  },
+  "usageExample": "<FooterMedia logoText=\"Company Name\" imageSrc=\"https://images.unsplash.com/photo-1497215728101-856f4ea42174?w=1920\" columns={[{ title: 'Product', items: [{ label: 'Features', href: 'features' }, { label: 'Pricing', href: 'pricing' }] }]} copyrightText=\"© 2025 | Company\" />",
+  "do": [
+    "Use for feature showcases",
+    "Use for capability displays",
+    "Requires columns[]"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/FooterSimple.json b/registry/components/FooterSimple.json
new file mode 100644
index 0000000..3b08eb4
--- /dev/null
+++ b/registry/components/FooterSimple.json
@@ -0,0 +1,78 @@
+{
+  "name": "FooterSimple",
+  "description": "Minimal footer with navigation columns, divider, and bottom text row.",
+  "details": "Use for clean, simple footers without card styling or logo emphasis. Features navigation columns spread across the top, a horizontal divider line, and a bottom row with left and right text (e.g., copyright and credits). No card wrapper, no logo section. Best for minimal designs where footer should be functional but unobtrusive.",
+  "constraints": {
+    "textRules": {
+      "bottomLeftText": {
+        "required": true,
+        "example": "© 2025 Company. All rights reserved.",
+        "minChars": 5,
+        "maxChars": 60
+      },
+      "bottomRightText": {
+        "required": true,
+        "example": "Made with Webild",
+        "minChars": 2,
+        "maxChars": 50
+      },
+      "columnTitle": {
+        "required": true,
+        "example": "Navigate",
+        "minChars": 2,
+        "maxChars": 20
+      },
+      "itemLabel": {
+        "required": true,
+        "example": "Home",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "structureRules": {
+      "columns": {
+        "required": true,
+        "minColumns": 2,
+        "maxColumns": 5,
+        "note": "Each column must have title and items array. Columns spread evenly across width."
+      },
+      "items": {
+        "required": true,
+        "minItems": 1,
+        "structure": {
+          "label": "string - Link text (required)",
+          "href": "string - Link destination (optional)",
+          "onClick": "() => void - Click handler (optional)"
+        }
+      }
+    }
+  },
+  "propsSchema": {
+    "columns": "Array<{ title: string, items: Array<{ label: string, href?: string, onClick?: () => void }> }>",
+    "bottomLeftText": "string",
+    "bottomRightText": "string",
+    "ariaLabel?": "string (default: 'Site footer')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "columnsClassName?": "string",
+    "columnClassName?": "string",
+    "columnTitleClassName?": "string",
+    "columnItemClassName?": "string",
+    "dividerClassName?": "string",
+    "bottomContainerClassName?": "string",
+    "bottomLeftTextClassName?": "string",
+    "bottomRightTextClassName?": "string"
+  },
+  "usageExample": "<FooterSimple columns={[{ title: 'Navigate', items: [{ label: 'Home', href: '#' }, { label: 'About', href: '#' }] }, { title: 'Resources', items: [{ label: 'Blog', href: '#' }, { label: 'FAQ', href: '#' }] }, { title: 'Legal', items: [{ label: 'Privacy', href: '#' }, { label: 'Terms', href: '#' }] }]} bottomLeftText=\"© 2025 Company. All rights reserved.\" bottomRightText=\"Made with Webild\" />",
+  "do": [
+    "Use for feature showcases",
+    "Use for capability displays",
+    "Requires columns[]"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/GradientBarsBackground.json b/registry/components/GradientBarsBackground.json
new file mode 100644
index 0000000..c64ff62
--- /dev/null
+++ b/registry/components/GradientBarsBackground.json
@@ -0,0 +1,27 @@
+{
+  "name": "GradientBarsBackground",
+  "description": "Gradient bars on left and right edges with fade masks creating a spotlight center effect.",
+  "details": "Use for modern backgrounds with vertical gradient bars positioned on left and right sides. Features two groups of bars (8 per side by default) that fade towards the center using CSS masks. Main container has vertical fade from bottom to top. Left bars fade towards center (270deg mask), right bars fade towards center (90deg mask). Creates an open center area (30% by default) for content. Each bar has horizontal gradient using theme primary color. Perfect for hero sections or landing pages where center content needs visual framing.",
+  "constraints": {},
+  "propsSchema": {
+    "className?": "string",
+    "numBarsPerSide?": "number (default: 8)",
+    "gradientFrom?": "string (default: 'var(--color-primary-cta)')",
+    "gradientTo?": "string (default: 'transparent')",
+    "opacity?": "number (default: 0.075)",
+    "sideWidth?": "string (default: '35%')"
+  },
+  "usageExample": "<GradientBarsBackground numBarsPerSide={8} opacity={0.075} sideWidth=\"35%\" />",
+  "do": [
+    "Use for feature showcases",
+    "Use for capability displays",
+    "Use for statistics displays",
+    "Use for achievement showcases"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/GridBackround.json b/registry/components/GridBackround.json
new file mode 100644
index 0000000..9337f66
--- /dev/null
+++ b/registry/components/GridBackround.json
@@ -0,0 +1,24 @@
+{
+  "name": "GridBackround",
+  "description": "Grid pattern background with line-based grid and optional 3D perspective effect.",
+  "details": "Use for technical or structured layouts. Features adjustable grid size (small: 16 cells, medium: 10 cells, large: 5 cells per 100vw). Optional perspectiveThreeD adds skew transform and radial mask for depth. Uses background-accent color at 10% opacity.",
+  "constraints": {},
+  "propsSchema": {
+    "size?": "'small' | 'medium' | 'large' (default: 'medium')",
+    "perspectiveThreeD?": "boolean (default: false)",
+    "className?": "string"
+  },
+  "usageExample": "<GridBackround size=\"medium\" perspectiveThreeD={false} />",
+  "do": [
+    "Use for feature showcases",
+    "Use for capability displays"
+  ],
+  "dont": [
+    "Do not use more than 4 items"
+  ],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/HeroBillboard.json b/registry/components/HeroBillboard.json
new file mode 100644
index 0000000..ea5b73f
--- /dev/null
+++ b/registry/components/HeroBillboard.json
@@ -0,0 +1,142 @@
+{
+  "name": "HeroBillboard",
+  "description": "Full-width hero section with centered text content, configurable background, optional tag, buttons, avatar group, single image/video below in a card frame, and optional logo marquee.",
+  "details": "Use for simple, impactful landing page hero sections. Features centered title and description with TextBox animations, required background variant (choose from animated grids, gradient effects, or 'plain' for no background), optional tag with icon, up to 2 CTA buttons, optional avatar group with text displayed above the tag, a single image or video media content below the text in a card wrapper with padding, and an optional logo marquee below the media. Background variants include preset options for zero-config usage.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Welcome to Our Platform",
+        "minChars": 2,
+        "maxChars": 40
+      },
+      "description": {
+        "required": true,
+        "example": "Create beautiful, responsive web experiences",
+        "minChars": 5,
+        "maxChars": 200
+      },
+      "tag": {
+        "required": false,
+        "example": "New Release",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "mediaRules": {
+      "imageSrc": {
+        "required": false,
+        "example": "/hero-image.jpg",
+        "note": "Supports external URLs with unoptimized prop Either imageSrc or videoSrc should be provided. Image is recommended if no videoSrc."
+      },
+      "videoSrc": {
+        "required": false,
+        "example": "/hero-video.mp4",
+        "note": "Takes precedence over imageSrc if both provided"
+      },
+      "imageAlt": {
+        "required": false,
+        "example": "Hero background",
+        "note": "Empty string marks image as decorative (aria-hidden)"
+      }
+    },
+    "buttonRules": {
+      "maxButtons": 2,
+      "structure": {
+        "text": "string - Button label (required)",
+        "href": "string - Link destination (optional). External URLs (https://, http://, www.) open in new tab. Internal values (e.g., 'about', 'contact') scroll to #about, #contact sections",
+        "onClick": "() => void - Additional click handler (optional)",
+        "props": "Partial<ButtonPropsForVariant> - Additional button props like className, textClassName (optional)"
+      },
+      "examples": [
+        "{ text: 'Get Started', href: 'https://example.com' }",
+        "{ text: 'Learn More', href: 'about' }"
+      ],
+      "note": "Button variant is controlled by ThemeProvider's defaultButtonVariant. Border radius is controlled by ThemeProvider's borderRadius (options: 'sharp', 'rounded', 'soft', 'pill'). All sections should be wrapped in a single ThemeProvider at the app/page level to maintain consistent styling across the entire site."
+    },
+    "avatarRules": {
+      "avatars": {
+        "required": false,
+        "example": "[{ src: '/avatar1.jpg', alt: 'User 1' }, { src: '/avatar2.jpg', alt: 'User 2' }]",
+        "note": "Array of Avatar objects with src and alt. Displayed above the tag in a centered group."
+      },
+      "avatarText": {
+        "required": false,
+        "example": "Trusted by 10,000+ users",
+        "note": "Text displayed next to the avatar group"
+      }
+    },
+    "marqueeRules": {
+      "marqueeItems": {
+        "required": false,
+        "example": "[{ type: 'image', src: '/logo1.svg', alt: 'Partner 1' }, { type: 'text', text: 'Partner Name' }]",
+        "note": "Array of MarqueeItem objects. Rendered below the media content (not absolute positioned)."
+      },
+      "marqueeSpeed": {
+        "required": false,
+        "default": 30,
+        "note": "Speed of the marquee animation"
+      },
+      "showMarqueeCard": {
+        "required": false,
+        "default": true,
+        "note": "Whether to show the card wrapper around marquee items"
+      }
+    }
+  },
+  "propsSchema": {
+    "title": "string",
+    "description": "string",
+    "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "avatars?": "Array<{src: string, alt: string}>",
+    "avatarText?": "string",
+    "imageSrc?": "string",
+    "videoSrc?": "string",
+    "imageAlt?": "string (default: '')",
+    "videoAriaLabel?": "string (default: 'Hero video')",
+    "mediaAspectRatio?": "string (default: 'aspect-square md:aspect-video')",
+    "mediaAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "marqueeItems?": "Array<MarqueeItem>",
+    "marqueeSpeed?": "number (default: 30)",
+    "showMarqueeCard?": "boolean (default: true)",
+    "ariaLabel?": "string (default: 'Hero section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "textBoxClassName?": "string",
+    "titleClassName?": "string",
+    "descriptionClassName?": "string",
+    "tagClassName?": "string",
+    "avatarGroupClassName?": "string",
+    "buttonContainerClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string",
+    "mediaWrapperClassName?": "string",
+    "imageClassName?": "string",
+    "marqueeClassName?": "string",
+    "marqueeItemClassName?": "string",
+    "marqueeCardClassName?": "string",
+    "marqueeImageClassName?": "string",
+    "marqueeTextClassName?": "string",
+    "marqueeIconClassName?": "string"
+  },
+  "usageExample": "<ThemeProvider defaultButtonVariant=\"text-stagger\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"rounded\">\n  <HeroBillboard \n    background={{ variant: 'sparkles-gradient' }}\n    title=\"Welcome to Our Platform\" \n    description=\"Create beautiful, responsive web experiences\" \n    tag=\"New Release\" \n    tagIcon={Sparkles}\n    avatars={[\n      { src: '/avatar1.jpg', alt: 'User 1' },\n      { src: '/avatar2.jpg', alt: 'User 2' },\n      { src: '/avatar3.jpg', alt: 'User 3' },\n    ]}\n    avatarText=\"Trusted by 10,000+ users\"\n    imageSrc=\"/hero.jpg\" \n    imageAlt=\"Hero banner\"\n    buttons={[{ text: 'Get Started', href: 'https://example.com' }, { text: 'Learn More', href: 'about' }]}\n    marqueeItems={[\n      { type: 'image', src: '/logo1.svg', alt: 'Partner 1' },\n      { type: 'image', src: '/logo2.svg', alt: 'Partner 2' },\n    ]}\n  />\n</ThemeProvider>",
+  "do": [
+    "Use for landing pages",
+    "Use for feature showcases",
+    "Use for capability displays",
+    "Requires buttons?[]"
+  ],
+  "dont": [
+    "Do not use multiple items"
+  ],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/HeroBillboardCarousel.json b/registry/components/HeroBillboardCarousel.json
new file mode 100644
index 0000000..05e6f86
--- /dev/null
+++ b/registry/components/HeroBillboardCarousel.json
@@ -0,0 +1,88 @@
+{
+  "name": "HeroBillboardCarousel",
+  "description": "Full-width hero section with centered text, configurable background, and 5+ auto-scrolling images in carousel layout.",
+  "details": "Use for showcasing large collections or portfolios. Features centered title and description with TextBox animations, required background variant (choose from animated grids, gradient effects, or 'plain' for no background), optional tag with icon, up to 2 CTA buttons. Displays 5 or more images in auto-scrolling carousel on both mobile and desktop. Full viewport height with vertical centering on desktop. Background variants include preset options for zero-config usage.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Our Portfolio",
+        "minChars": 2,
+        "maxChars": 40
+      },
+      "description": {
+        "required": true,
+        "example": "Browse through our collection of projects",
+        "minChars": 5,
+        "maxChars": 200
+      },
+      "tag": {
+        "required": false,
+        "example": "Portfolio",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "mediaRules": {
+      "mediaItems": {
+        "required": true,
+        "example": "[{ imageSrc: '/img1.jpg', imageAlt: 'Product 1' }, { imageSrc: '/img2.jpg', imageAlt: 'Product 2' }, { imageSrc: '/img3.jpg', imageAlt: 'Product 3' }, { imageSrc: '/img4.jpg', imageAlt: 'Product 4' }, { imageSrc: '/img5.jpg', imageAlt: 'Product 5' }]",
+        "note": "Array of 5+ MediaItem objects. Each item can have imageSrc, videoSrc, imageAlt, videoAriaLabel. Requires minimum 5 images."
+      }
+    },
+    "buttonRules": {
+      "maxButtons": 2,
+      "structure": {
+        "text": "string - Button label (required)",
+        "href": "string - Link destination (optional). External URLs (https://, http://, www.) open in new tab. Internal values (e.g., 'about', 'contact') scroll to #about, #contact sections",
+        "onClick": "() => void - Additional click handler (optional)",
+        "props": "Partial<ButtonPropsForVariant> - Additional button props like className, textClassName (optional)"
+      },
+      "examples": [
+        "{ text: 'View Portfolio', href: 'https://example.com' }",
+        "{ text: 'Contact Us', href: 'contact' }"
+      ],
+      "note": "Button variant is controlled by ThemeProvider's defaultButtonVariant. Border radius is controlled by ThemeProvider's borderRadius (options: 'sharp', 'rounded', 'soft', 'pill'). All sections should be wrapped in a single ThemeProvider at the app/page level to maintain consistent styling across the entire site."
+    }
+  },
+  "propsSchema": {
+    "title": "string",
+    "description": "string",
+    "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "mediaItems": "Array<{ imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }> - Each item requires either imageSrc or videoSrc",
+    "ariaLabel?": "string (default: 'Hero section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "textBoxClassName?": "string",
+    "titleClassName?": "string",
+    "descriptionClassName?": "string",
+    "tagClassName?": "string",
+    "buttonContainerClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string",
+    "mediaWrapperClassName?": "string"
+  },
+  "usageExample": "<ThemeProvider defaultButtonVariant=\"text-stagger\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"rounded\">\n  <HeroBillboardCarousel \n    background={{ variant: 'sparkles-gradient' }}\n    title=\"Our Portfolio\" \n    description=\"Browse through our collection of projects\" \n    tag=\"Portfolio\" \n    mediaItems={[\n      { imageSrc: '/img1.jpg', imageAlt: 'Product 1' },\n      { imageSrc: '/img2.jpg', imageAlt: 'Product 2' },\n      { imageSrc: '/img3.jpg', imageAlt: 'Product 3' },\n      { imageSrc: '/img4.jpg', imageAlt: 'Product 4' },\n      { imageSrc: '/img5.jpg', imageAlt: 'Product 5' },\n      { imageSrc: '/img6.jpg', imageAlt: 'Product 6' },\n      { imageSrc: '/img7.jpg', imageAlt: 'Product 7' }\n    ]}\n    buttons={[{ text: 'View Portfolio', href: 'https://example.com' }, { text: 'Contact Us', href: 'contact' }]} \n  />\n</ThemeProvider>",
+  "do": [
+    "Use for landing pages",
+    "Use for feature showcases",
+    "Use for capability displays",
+    "Use for portfolios",
+    "Use for image galleries",
+    "Requires buttons?[]",
+    "Requires mediaItems[]"
+  ],
+  "dont": [
+    "Do not use less than 5 items"
+  ],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/HeroBillboardDashboard.json b/registry/components/HeroBillboardDashboard.json
new file mode 100644
index 0000000..bfc02e9
--- /dev/null
+++ b/registry/components/HeroBillboardDashboard.json
@@ -0,0 +1,114 @@
+{
+  "name": "HeroBillboardDashboard",
+  "description": "Full-width hero section with centered text content and an interactive Dashboard component below instead of a static image/video.",
+  "details": "Based on HeroBillboard layout — centered TextBox with title, description, tag, and buttons on top, with a full Dashboard component below. The Dashboard includes icon sidebar, search bar, avatar, action buttons, 3 stat cards with animated number cycling (values rotate every 3s via TextNumberCount), a BentoLineChart, and a vertically auto-scrolling list. On mobile, stat cards become a carousel with arrow navigation. Desktop stat cards have staggered GSAP scroll entrance. All Dashboard props are passed via a single 'dashboard' object prop.",
+  "requiredImports": {
+    "lucide-react": ["Sparkles", "Hexagon", "House", "MessageSquareText", "Settings", "CircleDollarSign", "ArrowLeftRight", "Send"],
+    "note": "Import all icons used in tagIcon, dashboard.logoIcon, dashboard.sidebarItems[].icon, dashboard.listItems[].icon. Use component names, not strings."
+  },
+  "typeDefinitions": {
+    "DashboardStat": {
+      "title": "string (required)",
+      "values": "[number, number, number] - exactly 3 numbers, cycled every 3s (required)",
+      "valuePrefix": "string (optional, e.g. '$')",
+      "valueSuffix": "string (optional, e.g. 'M')",
+      "description": "string (required)",
+      "titleMobile": "string (optional, shorter label for mobile)"
+    },
+    "DashboardSidebarItem": {
+      "icon": "LucideIcon - import from lucide-react (required)",
+      "active": "boolean (optional, default false)"
+    },
+    "DashboardListItem": {
+      "icon": "LucideIcon - import from lucide-react (required)",
+      "title": "string (required)",
+      "status": "string (required)"
+    },
+    "ChartDataItem": {
+      "value": "number (required)"
+    }
+  },
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Real-Time On-Chain Intelligence",
+        "minChars": 2,
+        "maxChars": 40
+      },
+      "description": {
+        "required": true,
+        "example": "Monitor protocol revenue, trading volume, and wallet activity.",
+        "minChars": 5,
+        "maxChars": 200
+      },
+      "tag": {
+        "required": false,
+        "example": "Live Analytics",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "buttonRules": {
+      "maxButtons": 2,
+      "structure": {
+        "text": "string - Button label (required)",
+        "href": "string - Link destination (optional). External URLs (https://, http://, www.) open in new tab. Internal values (e.g., 'about', 'contact') scroll to #about, #contact sections",
+        "onClick": "() => void - Additional click handler (optional)",
+        "props": "Partial<ButtonPropsForVariant> - Additional button props like className, textClassName (optional)"
+      },
+      "examples": [
+        "{ text: 'Get Started', href: 'https://example.com' }",
+        "{ text: 'View Docs', href: 'docs' }"
+      ],
+      "note": "Button variant is controlled by ThemeProvider's defaultButtonVariant. Border radius is controlled by ThemeProvider's borderRadius (options: 'sharp', 'rounded', 'soft', 'pill'). All sections should be wrapped in a single ThemeProvider at the app/page level to maintain consistent styling across the entire site."
+    },
+    "dashboardRules": {
+      "required": ["title", "stats", "logoIcon", "sidebarItems", "buttons", "listItems", "imageSrc"],
+      "stats": "Exactly 3 DashboardStat objects. See typeDefinitions.DashboardStat.",
+      "sidebarItems": "Array of DashboardSidebarItem. At least 1 item. See typeDefinitions.DashboardSidebarItem.",
+      "listItems": "Array of DashboardListItem. At least 1 item. See typeDefinitions.DashboardListItem.",
+      "buttons": "Array of ButtonConfig. Max 2. Same structure as hero buttons.",
+      "chartData": "Optional. Array of ChartDataItem. See typeDefinitions.ChartDataItem.",
+      "imageSrc": "string - URL for avatar image in dashboard header"
+    }
+  },
+  "propsSchema": {
+    "title": "string",
+    "description": "string",
+    "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "dashboard": "Object. Required: title, stats (exactly 3), logoIcon, sidebarItems, buttons, listItems, imageSrc. Optional: searchPlaceholder, chartTitle, chartData, listTitle, videoSrc, imageAlt, videoAriaLabel, className, containerClassName, sidebarClassName, statClassName, chartClassName, listClassName. See typeDefinitions for DashboardStat, DashboardSidebarItem, DashboardListItem, ChartDataItem.",
+    "ariaLabel?": "string (default: 'Hero section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "textBoxClassName?": "string",
+    "titleClassName?": "string",
+    "descriptionClassName?": "string",
+    "tagClassName?": "string",
+    "buttonContainerClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string",
+    "dashboardClassName?": "string"
+  },
+  "usageExample": "import { Sparkles, Hexagon, House, MessageSquareText, Settings, CircleDollarSign, ArrowLeftRight, Send } from 'lucide-react';\nimport HeroBillboardDashboard from '@/components/sections/hero/HeroBillboardDashboard';\n\n<HeroBillboardDashboard\n  background={{ variant: 'radial-gradient' }}\n  tag=\"Live Analytics\"\n  tagIcon={Sparkles}\n  title=\"Real-Time On-Chain Intelligence\"\n  description=\"Monitor protocol revenue, trading volume, and wallet activity.\"\n  buttons={[{ text: 'Get Started', href: '#' }, { text: 'View Docs', href: '#' }]}\n  dashboard={{\n    title: \"On-Chain Metrics Hub\",\n    logoIcon: Hexagon,\n    imageSrc: \"https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=face\",\n    buttons: [{ text: \"Dashboard\", href: \"#\" }, { text: \"Export CSV\", href: \"#\" }],\n    sidebarItems: [{ icon: House, active: true }, { icon: MessageSquareText }, { icon: Settings }],\n    stats: [\n      { title: \"Revenue\", values: [178425, 245890, 312750], valuePrefix: \"$\", description: \"Protocol fees.\" },\n      { title: \"Volume\", values: [7.84, 12.5, 9.32], valuePrefix: \"$\", valueSuffix: \"M\", description: \"Transaction flow.\" },\n      { title: \"Wallets\", values: [11240, 15680, 13450], description: \"Active wallets.\" },\n    ],\n    chartTitle: \"Staking Rewards\",\n    chartData: [{ value: 50 }, { value: 30 }, { value: 70 }, { value: 40 }, { value: 90 }],\n    listTitle: \"Treasury Transfers\",\n    listItems: [\n      { icon: CircleDollarSign, title: \"$12,000 USDC\", status: \"Confirmed\" },\n      { icon: ArrowLeftRight, title: \"Swap: 5 ETH\", status: \"Executed\" },\n      { icon: Send, title: \"Transfer: 2,500 DAI\", status: \"Confirmed\" },\n    ],\n  }}\n/>",
+  "do": [
+    "Use for SaaS landing pages",
+    "Use for analytics/dashboard product showcases",
+    "Use for data visualization platforms",
+    "Requires dashboard prop with all nested properties"
+  ],
+  "dont": [
+    "Do not use without dashboard data",
+    "Do not use for simple hero sections without interactive elements"
+  ],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/HeroBillboardGallery.json b/registry/components/HeroBillboardGallery.json
new file mode 100644
index 0000000..ba0b51c
--- /dev/null
+++ b/registry/components/HeroBillboardGallery.json
@@ -0,0 +1,94 @@
+{
+  "name": "HeroBillboardGallery",
+  "description": "Full-width hero section with centered text, configurable background, and 3-5 overlapping rotated images in gallery layout.",
+  "details": "Use for visually rich landing pages showcasing multiple images. Features centered title and description with TextBox animations, required background variant (choose from animated grids, gradient effects, or 'plain' for no background), optional tag with icon, up to 2 CTA buttons. Gallery shows 3-5 overlapping images with rotation effects. Mobile displays AutoCarousel, desktop shows overlapping rotated images. Full viewport height with vertical centering on desktop. Background variants include preset options for zero-config usage.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Explore Our Collection",
+        "minChars": 2,
+        "maxChars": 40
+      },
+      "description": {
+        "required": true,
+        "example": "Discover amazing products and experiences",
+        "minChars": 5,
+        "maxChars": 200
+      },
+      "tag": {
+        "required": false,
+        "example": "Featured",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "mediaRules": {
+      "minItems": 3,
+      "maxItems": 5,
+      "note": "MINIMUM 3 ITEMS REQUIRED - gallery needs at least 3 items for proper display",
+      "mediaItems": {
+        "required": true,
+        "example": "[{ imageSrc: '/img1.jpg', imageAlt: 'Gallery 1' }, { imageSrc: '/img2.jpg', imageAlt: 'Gallery 2' }, { imageSrc: '/img3.jpg', imageAlt: 'Gallery 3' }]",
+        "note": "Array of 3-5 MediaItem objects. Each item can have imageSrc, videoSrc, imageAlt, videoAriaLabel."
+      }
+    },
+    "buttonRules": {
+      "maxButtons": 2,
+      "structure": {
+        "text": "string - Button label (required)",
+        "href": "string - Link destination (optional). External URLs (https://, http://, www.) open in new tab. Internal values (e.g., 'about', 'contact') scroll to #about, #contact sections",
+        "onClick": "() => void - Additional click handler (optional)",
+        "props": "Partial<ButtonPropsForVariant> - Additional button props like className, textClassName (optional)"
+      },
+      "examples": [
+        "{ text: 'View Gallery', href: 'https://example.com' }",
+        "{ text: 'Learn More', href: 'about' }"
+      ],
+      "note": "Button variant is controlled by ThemeProvider's defaultButtonVariant. Border radius is controlled by ThemeProvider's borderRadius (options: 'sharp', 'rounded', 'soft', 'pill'). All sections should be wrapped in a single ThemeProvider at the app/page level to maintain consistent styling across the entire site."
+    }
+  },
+  "propsSchema": {
+    "title": "string",
+    "description": "string",
+    "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "mediaItems": "Array<{ imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }> (MINIMUM 3 ITEMS REQUIRED, max 5)",
+    "mediaAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "ariaLabel?": "string (default: 'Hero section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "textBoxClassName?": "string",
+    "titleClassName?": "string",
+    "descriptionClassName?": "string",
+    "tagClassName?": "string",
+    "buttonContainerClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string",
+    "mediaWrapperClassName?": "string",
+    "imageClassName?": "string"
+  },
+  "usageExample": "<ThemeProvider defaultButtonVariant=\"text-stagger\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"rounded\">\n  <HeroBillboardGallery \n    background={{ variant: 'radial-gradient' }}\n    title=\"Explore Our Collection\" \n    description=\"Discover amazing products and experiences\" \n    tag=\"Featured\" \n    mediaItems={[\n      { imageSrc: '/img1.jpg', imageAlt: 'Gallery 1' },\n      { imageSrc: '/img2.jpg', imageAlt: 'Gallery 2' },\n      { imageSrc: '/img3.jpg', imageAlt: 'Gallery 3' },\n      { imageSrc: '/img4.jpg', imageAlt: 'Gallery 4' },\n      { imageSrc: '/img5.jpg', imageAlt: 'Gallery 5' }\n    ]}\n    buttons={[{ text: 'View Gallery', href: 'https://example.com' }, { text: 'Learn More', href: 'about' }]} \n  />\n</ThemeProvider>",
+  "do": [
+    "Use for landing pages",
+    "Use for feature showcases",
+    "Use for capability displays",
+    "Use for portfolios",
+    "Use for image galleries",
+    "Requires buttons?[]",
+    "Requires mediaItems[]"
+  ],
+  "dont": [
+    "Do not use with fewer than 3 items - gallery requires minimum 3 items",
+    "Do not use more than 5 items"
+  ],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/HeroBillboardRotatedCarousel.json b/registry/components/HeroBillboardRotatedCarousel.json
new file mode 100644
index 0000000..08f296b
--- /dev/null
+++ b/registry/components/HeroBillboardRotatedCarousel.json
@@ -0,0 +1,102 @@
+{
+  "name": "HeroBillboardRotatedCarousel",
+  "description": "Hero section with centered text content and angled/rotated carousel below. Features auto-playing carousel with scaled and rotated side cards.",
+  "details": "Use for product showcases, portfolios, or visual-heavy landing pages. Features centered title, description, optional tag with icon, and action buttons via TextBox component. Below is an AngledCarousel showing rotated preview cards on sides (88% scale, 2deg rotation) with center card at full scale. Carousel auto-advances every 4 seconds. Side cards have backdrop blur overlay. Requires minimum 6 carousel items to avoid duplicate key warnings (carousel shows 5 positions: -2, -1, 0, 1, 2). Uses full viewport height with custom spacing.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Transform Your Workflow",
+        "minChars": 2,
+        "maxChars": 60
+      },
+      "description": {
+        "required": true,
+        "example": "Experience the power of seamless collaboration and productivity tools designed for modern teams",
+        "minChars": 5,
+        "maxChars": 200
+      },
+      "tag": {
+        "required": false,
+        "example": "New Release",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "buttonRules": {
+      "maxButtons": 2,
+      "structure": {
+        "text": "string - Button label (required)",
+        "href": "string - Link destination (optional)",
+        "onClick": "() => void - Click handler (optional)",
+        "props": "Partial<ButtonPropsForVariant> - Additional button props (optional)"
+      },
+      "note": "Button variant controlled by ThemeProvider's defaultButtonVariant. All sections should be wrapped in a single ThemeProvider at the app/page level."
+    },
+    "carouselItemRules": {
+      "required": true,
+      "minItems": 6,
+      "structure": {
+        "id": "string - Unique identifier (required)",
+        "imageSrc": "string - Image URL (optional) Image is recommended if no videoSrc.",
+        "videoSrc": "string - Video URL (optional, takes precedence over imageSrc)",
+        "imageAlt": "string - Alt text for image (optional)",
+        "videoAriaLabel": "string - ARIA label for video (optional)"
+      },
+      "note": "Minimum 6 items required to prevent duplicate keys. Carousel displays 5 positions simultaneously (-2, -1, 0, 1, 2). Each item should have either imageSrc or videoSrc. Uses MediaContent component for rendering."
+    }
+  },
+  "propsSchema": {
+    "title": "string",
+    "description": "string",
+    "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "carouselItems": "Array<{ id: string, imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }> - Carousel items (minimum 6 items)",
+    "autoPlay?": "boolean (default: true)",
+    "autoPlayInterval?": "number (default: 4000)",
+    "marqueeItems?": "Array<{ type: 'image', src: string, alt?: string } | { type: 'text', text: string } | { type: 'text-icon', text: string, icon: LucideIcon }> - Logo marquee items",
+    "marqueeSpeed?": "number (default: 30)",
+    "showMarqueeCard?": "boolean (default: true)",
+    "ariaLabel?": "string (default: 'Hero section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "textBoxClassName?": "string",
+    "titleClassName?": "string",
+    "descriptionClassName?": "string",
+    "tagClassName?": "string",
+    "buttonContainerClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string",
+    "carouselClassName?": "string",
+    "marqueeClassName?": "string",
+    "marqueeItemClassName?": "string",
+    "marqueeCardClassName?": "string",
+    "marqueeImageClassName?": "string",
+    "marqueeTextClassName?": "string",
+    "marqueeIconClassName?": "string"
+  },
+  "usageExample": "<ThemeProvider defaultButtonVariant=\"hover-bubble\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"pill\">\n  <HeroBillboardRotatedCarousel \n    title=\"Transform Your Workflow\" \n    description=\"Experience seamless collaboration and productivity\" \n    background={{ variant: \"glowing-orb\" }}\n    tag=\"New Release\" \n    tagIcon={Sparkles}\n    buttons={[{ text: 'Get Started' }, { text: 'Learn More' }]}\n    carouselItems={[\n      { id: '1', imageSrc: '/image1.jpg', imageAlt: 'Product 1' },\n      { id: '2', imageSrc: '/image2.jpg', imageAlt: 'Product 2' },\n      { id: '3', imageSrc: '/image3.jpg', imageAlt: 'Product 3' },\n      { id: '4', imageSrc: '/image4.jpg', imageAlt: 'Product 4' },\n      { id: '5', imageSrc: '/image5.jpg', imageAlt: 'Product 5' },\n      { id: '6', imageSrc: '/image6.jpg', imageAlt: 'Product 6' }\n    ]}\n    autoPlay={true}\n    autoPlayInterval={4000}\n  />\n</ThemeProvider>",
+  "do": [
+    "Use for landing pages",
+    "Use for feature showcases",
+    "Use for capability displays",
+    "Use for portfolios",
+    "Use for image galleries",
+    "Use for product catalogs",
+    "Use for e-commerce",
+    "Requires buttons?[]",
+    "Requires carouselItems[]"
+  ],
+  "dont": [
+    "Do not use less than 6 items"
+  ],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/HeroBillboardScroll.json b/registry/components/HeroBillboardScroll.json
new file mode 100644
index 0000000..47b5b58
--- /dev/null
+++ b/registry/components/HeroBillboardScroll.json
@@ -0,0 +1,125 @@
+{
+  "name": "HeroBillboardScroll",
+  "description": "Full-screen hero section with centered text, configurable background, and media card that animates with 3D perspective transforms on scroll (desktop only).",
+  "details": "Use for modern, interactive landing pages showcasing products, dashboards, or applications with scroll-triggered effects. Features required background variant (choose from animated grids, gradient effects, or 'plain' for no background), centered TextBox, and animated media card. On desktop, the media card animates from rotated (20deg X-axis) and scaled (1.05) to flat and normal scale as user scrolls down. Mobile displays a static 3D-rotated card without animation to avoid performance issues. Background variants include preset options for zero-config usage. Requires ReactLenis for smooth scroll tracking.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Scroll Animations",
+        "minChars": 2,
+        "maxChars": 60
+      },
+      "description": {
+        "required": true,
+        "example": "Experience smooth, performant animations as you scroll through your content",
+        "minChars": 5,
+        "maxChars": 200
+      },
+      "tag": {
+        "required": false,
+        "example": "Unleash the Power",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "mediaRules": {
+      "imageSrc": {
+        "required": false,
+        "example": "/dashboard.jpg",
+        "note": "Image to display in the animated card. Supports external URLs with unoptimized prop Either imageSrc or videoSrc should be provided. Image is recommended if no videoSrc."
+      },
+      "videoSrc": {
+        "required": false,
+        "example": "/demo.mp4",
+        "note": "Video to display in the animated card. Takes precedence over imageSrc if both provided"
+      },
+      "imageAlt": {
+        "required": false,
+        "example": "Dashboard preview",
+        "note": "Empty string marks image as decorative (aria-hidden)"
+      },
+      "animationBehavior": {
+        "desktop": {
+          "rotateX": "Animates from 20deg to 0deg based on scroll progress",
+          "scale": "Animates from 1.05 to 1 based on scroll progress",
+          "height": "h-[75svh] (75% of viewport height)",
+          "note": "Uses Framer Motion's useScroll and useTransform for smooth scroll-linked animations"
+        },
+        "mobile": {
+          "rotateX": "Static 20deg rotation (no animation)",
+          "scale": "No scale animation",
+          "height": "h-[50svh] (50% of viewport height)",
+          "note": "Separate static div implementation to prevent performance issues and hydration errors"
+        },
+        "perspective": "1000px applied to container for 3D effect"
+      }
+    },
+    "buttonRules": {
+      "maxButtons": 2,
+      "structure": {
+        "text": "string - Button label (required)",
+        "href": "string - Link destination (optional). External URLs (https://, http://, www.) open in new tab. Internal values (e.g., 'about', 'contact') scroll to #about, #contact sections",
+        "onClick": "() => void - Additional click handler (optional)",
+        "props": "Partial<ButtonPropsForVariant> - Additional button props like className, textClassName (optional)"
+      },
+      "examples": [
+        "{ text: 'Get Started', onClick: () => console.log('Get Started clicked') }",
+        "{ text: 'Learn More', href: 'about' }"
+      ],
+      "note": "Button variant is controlled by ThemeProvider's defaultButtonVariant. Border radius is controlled by ThemeProvider's borderRadius (options: 'sharp', 'rounded', 'soft', 'pill'). All sections should be wrapped in a single ThemeProvider at the app/page level to maintain consistent styling across the entire site."
+    }
+  },
+  "propsSchema": {
+    "title": "string",
+    "description": "string",
+    "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "imageSrc?": "string",
+    "videoSrc?": "string",
+    "imageAlt?": "string (default: '')",
+    "videoAriaLabel?": "string (default: 'Hero video')",
+    "mediaAspectRatio?": "string (default: 'aspect-[4/3] md:aspect-[16/9]')",
+    "marqueeItems?": "Array<MarqueeItem>",
+    "marqueeSpeed?": "number (default: 30)",
+    "showMarqueeCard?": "boolean (default: true)",
+    "ariaLabel?": "string (default: 'Hero section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "textBoxClassName?": "string",
+    "titleClassName?": "string",
+    "descriptionClassName?": "string",
+    "tagClassName?": "string",
+    "buttonContainerClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string",
+    "cardWrapperClassName?": "string",
+    "cardInnerClassName?": "string",
+    "imageClassName?": "string",
+    "marqueeClassName?": "string",
+    "marqueeItemClassName?": "string",
+    "marqueeCardClassName?": "string",
+    "marqueeImageClassName?": "string",
+    "marqueeTextClassName?": "string",
+    "marqueeIconClassName?": "string"
+  },
+  "usageExample": "<ThemeProvider defaultButtonVariant=\"hover-bubble\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"pill\">\n  <HeroBillboardScroll \n    background={{ variant: 'canvas-reveal' }}\n    title=\"Scroll Animations\" \n    description=\"Experience smooth, performant animations as you scroll through your content\" \n    tag=\"Unleash the Power\" \n    imageSrc=\"/dashboard.jpg\" \n    imageAlt=\"Dashboard preview\"\n    buttons={[{ text: 'Get Started', onClick: () => console.log('Get Started clicked') }, { text: 'Learn More', href: 'about' }]} \n  />\n</ThemeProvider>",
+  "do": [
+    "Use for landing pages",
+    "Use for feature showcases",
+    "Use for capability displays",
+    "Use for product catalogs",
+    "Use for e-commerce",
+    "Requires buttons?[]"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/HeroBillboardTestimonial.json b/registry/components/HeroBillboardTestimonial.json
new file mode 100644
index 0000000..2679a3b
--- /dev/null
+++ b/registry/components/HeroBillboardTestimonial.json
@@ -0,0 +1,136 @@
+{
+  "name": "HeroBillboardTestimonial",
+  "description": "Billboard-layout hero section with centered text content above full-width image/video with rotating testimonial card overlay.",
+  "details": "Use for hero sections that combine centered messaging with social proof. Features billboard layout with centered text content above full-width media. Testimonials rotate automatically every 5 seconds with smooth fade animation. Each testimonial displays star rating, quote text, and author info with avatar. The testimonial card is positioned at the bottom-right of the media. Supports optional logo marquee below the media. Responsive design with square aspect ratio on mobile.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Build Modern Web Experiences",
+        "minChars": 2,
+        "maxChars": 36
+      },
+      "description": {
+        "required": true,
+        "example": "Create stunning, responsive websites with our comprehensive component library",
+        "minChars": 5,
+        "maxChars": 200
+      },
+      "tag": {
+        "required": false,
+        "example": "New Release",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "testimonialRules": {
+      "testimonials": {
+        "required": true,
+        "minItems": 1,
+        "example": "[{ name: 'Sarah Johnson', handle: 'CEO, TechCorp', testimonial: 'Amazing product!', rating: 5, imageSrc: '/avatar.jpg' }]",
+        "note": "Array of testimonial objects. Each requires name, handle, testimonial text, and rating (1-5). imageSrc is optional."
+      },
+      "testimonialRotationInterval": {
+        "required": false,
+        "default": 5000,
+        "note": "Rotation interval in milliseconds"
+      }
+    },
+    "mediaRules": {
+      "imageSrc": {
+        "required": false,
+        "example": "/hero-image.jpg",
+        "note": "Supports external URLs with unoptimized prop Either imageSrc or videoSrc should be provided. Image is recommended if no videoSrc."
+      },
+      "videoSrc": {
+        "required": false,
+        "example": "/hero-video.mp4",
+        "note": "Takes precedence over imageSrc if both provided"
+      },
+      "imageAlt": {
+        "required": false,
+        "example": "Product showcase",
+        "note": "Empty string marks image as decorative"
+      }
+    },
+    "buttonRules": {
+      "maxButtons": 2,
+      "structure": {
+        "text": "string - Button label",
+        "href": "string - Link URL or section ID for scroll",
+        "onClick": "() => void - Optional click handler"
+      },
+      "examples": [
+        "{ text: 'Get Started', href: 'https://example.com' }",
+        "{ text: 'Learn More', href: 'about' }"
+      ],
+      "note": "Button variant controlled by ThemeProvider. External URLs open in new tab, internal values scroll to sections."
+    }
+  },
+  "propsSchema": {
+    "title": "string",
+    "description": "string",
+    "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'glowing-orb' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }",
+    "testimonials": "Array<{ name: string, handle: string, testimonial: string, rating: number, imageSrc?: string, imageAlt?: string }>",
+    "testimonialRotationInterval?": "number (default: 5000)",
+    "useInvertedBackground?": "boolean (default: false)",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "avatars?": "Avatar[]",
+    "avatarText?": "string",
+    "imageSrc?": "string",
+    "videoSrc?": "string",
+    "imageAlt?": "string (default: '')",
+    "videoAriaLabel?": "string (default: 'Hero video')",
+    "mediaAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal' (default: 'none')",
+    "ariaLabel?": "string (default: 'Hero section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "textBoxClassName?": "string",
+    "titleClassName?": "string",
+    "descriptionClassName?": "string",
+    "tagClassName?": "string",
+    "avatarGroupClassName?": "string",
+    "buttonContainerClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string",
+    "mediaWrapperClassName?": "string",
+    "imageClassName?": "string",
+    "testimonialCardClassName?": "string",
+    "testimonialContentClassName?": "string",
+    "testimonialTextClassName?": "string",
+    "testimonialRatingClassName?": "string",
+    "testimonialAuthorClassName?": "string",
+    "testimonialAuthorImageClassName?": "string",
+    "testimonialAuthorNameClassName?": "string",
+    "testimonialAuthorHandleClassName?": "string",
+    "marqueeItems?": "MarqueeItem[]",
+    "marqueeSpeed?": "number (default: 30)",
+    "showMarqueeCard?": "boolean (default: true)",
+    "marqueeClassName?": "string",
+    "marqueeItemClassName?": "string",
+    "marqueeCardClassName?": "string",
+    "marqueeImageClassName?": "string",
+    "marqueeTextClassName?": "string",
+    "marqueeIconClassName?": "string"
+  },
+  "usageExample": "<ThemeProvider defaultButtonVariant=\"icon-arrow\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"pill\" background=\"aurora\" cardStyle=\"glass-elevated\" primaryButtonStyle=\"gradient\" secondaryButtonStyle=\"glass\">\n  <HeroBillboardTestimonial \n    background={{ variant: 'glowing-orb' }}\n    title=\"Build Modern Web Experiences\" \n    description=\"Create stunning, responsive websites with our comprehensive component library\" \n    tag=\"New Release\"\n    imageSrc=\"/hero.jpg\"\n    imageAlt=\"Product showcase\"\n    mediaAnimation=\"slide-up\"\n    testimonials={[{ name: 'Sarah Johnson', handle: 'CEO, TechCorp', testimonial: 'This transformed our workflow!', rating: 5, imageSrc: '/avatar.jpg' }]}\n    buttons={[{ text: 'Get Started', href: 'https://example.com' }, { text: 'Learn More', href: 'about' }]} \n  />\n</ThemeProvider>",
+  "do": [
+    "Use for landing pages with social proof",
+    "Use for product showcases with testimonials",
+    "Use when customer reviews add credibility",
+    "Use when centered layout is preferred over split",
+    "Requires testimonials[]",
+    "Requires buttons?[]",
+    "Requires avatars?[]"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/HeroCarouselLogo.json b/registry/components/HeroCarouselLogo.json
new file mode 100644
index 0000000..619725c
--- /dev/null
+++ b/registry/components/HeroCarouselLogo.json
@@ -0,0 +1,91 @@
+{
+  "name": "HeroCarouselLogo",
+  "description": "Full-screen hero section with auto-playing carousel background, large text logo at bottom that scales to fill container width, description and button row above, with progress bars and linear gradient blur overlay.",
+  "details": "Use for brand-focused landing pages with multiple background images/videos that auto-rotate. Combines auto-playing carousel with logo layout. Features full viewport height with carousel of background media slides (image or video), auto-advancing with customizable delay (default 3000ms). Linear gradient blur overlay at bottom (75vh height) for improved logo visibility. Large responsive text logo automatically fills the container width below content. Above logo is horizontal row with description text on left and up to 2 buttons on right (stacked vertically on mobile). Progress bars at bottom show carousel progress with animated fill. Users can click progress bars to navigate slides directly.",
+  "constraints": {
+    "textRules": {
+      "logoText": {
+        "required": true,
+        "example": "WEBILD",
+        "minChars": 2,
+        "maxChars": 20
+      },
+      "description": {
+        "required": true,
+        "example": "Create stunning, responsive websites with our comprehensive component library",
+        "minChars": 5,
+        "maxChars": 200
+      }
+    },
+    "mediaRules": {
+      "slides": {
+        "required": true,
+        "example": "[{ imageSrc: '/slide1.jpg', imageAlt: 'Slide 1' }, { imageSrc: '/slide2.jpg', imageAlt: 'Slide 2' }]",
+        "note": "Array of CarouselSlide objects. Each slide can have imageSrc, videoSrc, imageAlt, videoAriaLabel. Video takes precedence over image if both provided in a slide."
+      },
+      "autoplayDelay": {
+        "required": false,
+        "default": 3000,
+        "note": "Milliseconds between automatic slide transitions"
+      },
+      "showDimOverlay": {
+        "required": false,
+        "default": false,
+        "note": "Adds semi-transparent dark overlay (bg-background/20) over background media for improved text and logo contrast"
+      }
+    },
+    "buttonRules": {
+      "maxButtons": 2,
+      "structure": {
+        "text": "string - Button label (required)",
+        "href": "string - Link destination (optional). External URLs (https://, http://, www.) open in new tab. Internal values (e.g., 'about', 'contact') scroll to #about, #contact sections",
+        "onClick": "() => void - Additional click handler (optional)",
+        "props": "Partial<ButtonPropsForVariant> - Additional button props like className, textClassName (optional)"
+      },
+      "examples": [
+        "{ text: 'Get Started', href: 'https://github.com' }",
+        "{ text: 'Learn More', href: 'about' }"
+      ],
+      "note": "Buttons are required (cannot be empty array). Button variant is controlled by ThemeProvider's defaultButtonVariant. Border radius is controlled by ThemeProvider's borderRadius (options: 'sharp', 'rounded', 'soft', 'pill'). All sections should be wrapped in a single ThemeProvider at the app/page level to maintain consistent styling across the entire site."
+    }
+  },
+  "propsSchema": {
+    "logoText": "string",
+    "description": "string",
+    "buttons": "Array<{text: string, onClick?: () => void, href?: string}> (required)",
+    "slides": "Array<{ imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }> - Carousel slide items",
+    "autoplayDelay?": "number (default: 3000)",
+    "showDimOverlay?": "boolean (default: false)",
+    "ariaLabel?": "string (default: 'Hero section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "contentContainerClassName?": "string",
+    "descriptionClassName?": "string",
+    "buttonContainerClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string",
+    "logoContainerClassName?": "string",
+    "logoClassName?": "string",
+    "mediaWrapperClassName?": "string",
+    "imageClassName?": "string",
+    "blurClassName?": "string",
+    "dimOverlayClassName?": "string",
+    "progressBarClassName?": "string"
+  },
+  "usageExample": "<ThemeProvider defaultButtonVariant=\"icon-arrow\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"pill\">\n  <HeroCarouselLogo \n    logoText=\"WEBILD\" \n    description=\"Create stunning, responsive websites with our comprehensive component library\" \n    buttons={[{ text: 'Get Started', href: 'https://github.com' }, { text: 'Learn More', href: 'about' }]} \n    slides={[{ imageSrc: '/slide1.jpg', imageAlt: 'Slide 1' }, { imageSrc: '/slide2.jpg', imageAlt: 'Slide 2' }, { imageSrc: '/slide3.jpg', imageAlt: 'Slide 3' }]}\n    autoplayDelay={5000}\n  />\n</ThemeProvider>",
+  "do": [
+    "Use for landing pages",
+    "Use for feature showcases",
+    "Use for capability displays",
+    "Requires buttons[]",
+    "Requires slides[]"
+  ],
+  "dont": [
+    "Do not use less than 5 items"
+  ],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/HeroCentered.json b/registry/components/HeroCentered.json
new file mode 100644
index 0000000..7a4e2e0
--- /dev/null
+++ b/registry/components/HeroCentered.json
@@ -0,0 +1,92 @@
+{
+  "name": "HeroCentered",
+  "description": "Full-screen centered hero section with avatar group above title, centered text content, configurable background, and optional buttons.",
+  "details": "Use for impactful landing pages with social proof emphasis. Features full viewport height (h-svh on mobile, h-screen on desktop) with vertically and horizontally centered content. Avatar group with optional text is displayed above the title for social proof. Includes animated title and description via TextBox, required background variant, and up to 2 CTA buttons. No media content below - purely text-focused hero.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Build Modern Web Experiences",
+        "minChars": 2,
+        "maxChars": 60
+      },
+      "description": {
+        "required": true,
+        "example": "Create stunning, responsive websites with our comprehensive component library",
+        "minChars": 5,
+        "maxChars": 200
+      },
+      "avatarText": {
+        "required": false,
+        "example": "Trusted by 1000+ users",
+        "minChars": 2,
+        "maxChars": 50
+      }
+    },
+    "avatarRules": {
+      "avatars": {
+        "required": true,
+        "minItems": 1,
+        "maxItems": 5,
+        "structure": {
+          "src": "string - Avatar image source (required)",
+          "alt": "string - Alt text for accessibility (required)"
+        },
+        "note": "Avatars are displayed above the title for social proof"
+      }
+    },
+    "buttonRules": {
+      "maxButtons": 2,
+      "structure": {
+        "text": "string - Button label (required)",
+        "href": "string - Link destination (optional). External URLs open in new tab. Internal values scroll to sections",
+        "onClick": "() => void - Additional click handler (optional)"
+      },
+      "note": "Button variant is controlled by ThemeProvider's defaultButtonVariant"
+    }
+  },
+  "propsSchema": {
+    "title": "string",
+    "description": "string",
+    "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }",
+    "avatars": "Array<{ src: string, alt: string }> (required)",
+    "avatarText?": "string",
+    "buttons?": "Array<{ text: string, onClick?: () => void, href?: string }>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "ariaLabel?": "string (default: 'Hero section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "textBoxClassName?": "string",
+    "titleClassName?": "string",
+    "descriptionClassName?": "string",
+    "avatarGroupClassName?": "string",
+    "buttonContainerClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string",
+    "marqueeItems?": "Array<{ type: 'image', src: string, alt?: string } | { type: 'text', text: string } | { type: 'text-icon', text: string, icon: LucideIcon }> - Optional marquee at bottom of hero",
+    "marqueeSpeed?": "number (default: 30)",
+    "showMarqueeCard?": "boolean (default: true) - Card styling for text/text-icon items, images never have cards",
+    "marqueeClassName?": "string",
+    "marqueeItemClassName?": "string",
+    "marqueeCardClassName?": "string",
+    "marqueeImageClassName?": "string",
+    "marqueeTextClassName?": "string",
+    "marqueeIconClassName?": "string"
+  },
+  "usageExample": "<ThemeProvider defaultButtonVariant=\"hover-bubble\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"pill\">\n  <HeroCentered \n    background={{ variant: 'downward-rays-static' }}\n    avatars={[{ src: '/avatar1.jpg', alt: 'User 1' }, { src: '/avatar2.jpg', alt: 'User 2' }, { src: '/avatar3.jpg', alt: 'User 3' }]}\n    avatarText=\"Trusted by 1000+ users\"\n    title=\"Build Modern Web Experiences\" \n    description=\"Create stunning, responsive websites with our comprehensive component library\" \n    buttons={[{ text: 'Get Started', href: 'https://example.com' }, { text: 'Learn More', href: 'about' }]} \n  />\n</ThemeProvider>",
+  "do": [
+    "Use for impactful landing pages with social proof emphasis",
+    "Include avatars for social proof",
+    "Use appropriate background variant",
+    "Full viewport height - purely text-focused hero"
+  ],
+  "dont": [
+    "Do not use without avatars",
+    "Do not use for heroes with media content below"
+  ],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/HeroLogo.json b/registry/components/HeroLogo.json
new file mode 100644
index 0000000..5854c9d
--- /dev/null
+++ b/registry/components/HeroLogo.json
@@ -0,0 +1,95 @@
+{
+  "name": "HeroLogo",
+  "description": "Full-screen hero section with background media, large text logo at bottom that scales to fill container width, description and button row above, featuring a linear gradient blur overlay.",
+  "details": "Use for brand-focused landing pages that emphasize logo and visual identity with strong background imagery. Features full viewport height with background media (image or video), linear gradient blur overlay at bottom (75vh height) for improved logo visibility, and large responsive text logo that automatically fills the container width. Above the logo is a horizontal row with description text on the left and up to 2 buttons on the right (stacked vertically on mobile).",
+  "constraints": {
+    "textRules": {
+      "logoText": {
+        "required": true,
+        "example": "Webild",
+        "minChars": 2,
+        "maxChars": 20
+      },
+      "description": {
+        "required": true,
+        "example": "Building the future of web design with innovative solutions",
+        "minChars": 5,
+        "maxChars": 200
+      }
+    },
+    "mediaRules": {
+      "imageSrc": {
+        "required": false,
+        "example": "/hero-background.jpg",
+        "note": "Background image that fills the viewport. Supports external URLs with unoptimized prop Either imageSrc or videoSrc should be provided. Image is recommended if no videoSrc."
+      },
+      "videoSrc": {
+        "required": false,
+        "example": "/hero-background.mp4",
+        "note": "Background video that fills the viewport. Takes precedence over imageSrc if both provided"
+      },
+      "imageAlt": {
+        "required": false,
+        "example": "Hero background",
+        "note": "Empty string marks image as decorative (aria-hidden)"
+      },
+      "showDimOverlay": {
+        "required": false,
+        "default": false,
+        "note": "Adds semi-transparent dark overlay (bg-background/20) over background media for improved text and logo contrast"
+      }
+    },
+    "buttonRules": {
+      "maxButtons": 2,
+      "structure": {
+        "text": "string - Button label (required)",
+        "href": "string - Link destination (optional). External URLs (https://, http://, www.) open in new tab. Internal values (e.g., 'about', 'contact') scroll to #about, #contact sections",
+        "onClick": "() => void - Additional click handler (optional)",
+        "props": "Partial<ButtonPropsForVariant> - Additional button props like className, textClassName (optional)"
+      },
+      "examples": [
+        "{ text: 'Get Started', href: 'https://github.com' }",
+        "{ text: 'Learn More', href: 'about' }"
+      ],
+      "note": "Buttons are required (cannot be empty array). Button variant is controlled by ThemeProvider's defaultButtonVariant. Border radius is controlled by ThemeProvider's borderRadius (options: 'sharp', 'rounded', 'soft', 'pill'). All sections should be wrapped in a single ThemeProvider at the app/page level to maintain consistent styling across the entire site."
+    }
+  },
+  "propsSchema": {
+    "logoText": "string",
+    "description": "string",
+    "buttons": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "imageSrc?": "string",
+    "videoSrc?": "string",
+    "imageAlt?": "string (default: '')",
+    "videoAriaLabel?": "string (default: 'Hero video')",
+    "showDimOverlay?": "boolean (default: false)",
+    "ariaLabel?": "string (default: 'Hero section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "contentContainerClassName?": "string",
+    "descriptionClassName?": "string",
+    "buttonContainerClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string",
+    "logoContainerClassName?": "string",
+    "logoClassName?": "string",
+    "mediaWrapperClassName?": "string",
+    "imageClassName?": "string",
+    "blurClassName?": "string",
+    "dimOverlayClassName?": "string"
+  },
+  "usageExample": "<ThemeProvider defaultButtonVariant=\"hover-bubble\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"pill\">\n  <HeroLogo \n    logoText=\"Webild\" \n    description=\"Building the future of web design with innovative solutions\" \n    buttons={[{ text: 'Get Started', href: 'https://github.com' }, { text: 'Learn More', href: 'about' }]} \n    imageSrc=\"/placeholders/placeholder5.jpg\" \n    imageAlt=\"Hero background\"\n  />\n</ThemeProvider>",
+  "do": [
+    "Use for landing pages",
+    "Use for feature showcases",
+    "Use for capability displays",
+    "Requires buttons[]"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/HeroLogoBillboard.json b/registry/components/HeroLogoBillboard.json
new file mode 100644
index 0000000..41860b5
--- /dev/null
+++ b/registry/components/HeroLogoBillboard.json
@@ -0,0 +1,87 @@
+{
+  "name": "HeroLogoBillboard",
+  "description": "Hero section with large text logo at top that scales to fill container width, description text, and single framed media (card or browser style) below.",
+  "details": "Use for brand-focused landing pages that emphasize logo with a key hero image or video. Features large responsive text logo that automatically fills the container width at the top, followed by description text aligned to the right (desktop) or centered (mobile), and single media below with optional card or browser frame styling. Description text is larger on desktop (text-3xl) than mobile (text-lg). Media can be displayed in simple card frame or browser mockup with address bar.",
+  "constraints": {
+    "textRules": {
+      "logoText": {
+        "required": true,
+        "example": "klime studio",
+        "minChars": 2,
+        "maxChars": 30
+      },
+      "description": {
+        "required": true,
+        "example": "we help driven founders build the brands of tomorrow through websites, product design & branding.",
+        "minChars": 5,
+        "maxChars": 300
+      }
+    },
+    "mediaRules": {
+      "imageSrc": {
+        "required": false,
+        "example": "/hero-image.jpg",
+        "note": "Supports external URLs with unoptimized prop Either imageSrc or videoSrc should be provided. Image is recommended if no videoSrc."
+      },
+      "videoSrc": {
+        "required": false,
+        "example": "/hero-video.mp4",
+        "note": "Takes precedence over imageSrc if both provided"
+      },
+      "imageAlt": {
+        "required": false,
+        "example": "Product showcase",
+        "note": "Empty string marks image as decorative (aria-hidden)"
+      },
+      "frameStyle": {
+        "required": false,
+        "options": [
+          "card",
+          "browser"
+        ],
+        "default": "card",
+        "note": "'card' displays media in simple card with padding. 'browser' wraps media in browser mockup with address bar and window controls."
+      }
+    }
+  },
+  "propsSchema": {
+    "logoText": "string",
+    "description": "string",
+    "buttons": "Array<{ text: string, onClick?: () => void, href?: string }> - Primary and secondary buttons (required, max 2)",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'glowing-orb' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }",
+    "imageSrc?": "string",
+    "videoSrc?": "string",
+    "imageAlt?": "string (default: '')",
+    "videoAriaLabel?": "string (default: 'Hero video')",
+    "mediaAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "frameStyle?": "'card' | 'browser' (default: 'card')",
+    "ariaLabel?": "string (default: 'Hero section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "logoContainerClassName?": "string",
+    "logoClassName?": "string",
+    "descriptionClassName?": "string",
+    "buttonContainerClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string",
+    "mediaWrapperClassName?": "string",
+    "imageClassName?": "string",
+    "browserBarClassName?": "string",
+    "addressBarClassName?": "string"
+  },
+  "usageExample": "<ThemeProvider defaultButtonVariant=\"text-stagger\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"pill\" cardStyle=\"layered-gradient\">\n  <HeroLogoBillboard \n    logoText=\"klime studio\" \n    description=\"we help driven founders build the brands of tomorrow through websites, product design & branding.\"\n    buttons={[{ text: 'Get Started' }, { text: 'Learn More' }]}\n    background={{ variant: \"sparkles-gradient\" }}\n    imageSrc=\"/hero.jpg\"\n    imageAlt=\"Hero showcase\"\n    frameStyle=\"card\"\n  />\n</ThemeProvider>",
+  "do": [
+    "Use for landing pages",
+    "Use for feature showcases",
+    "Use for capability displays"
+  ],
+  "dont": [
+    "Do not use multiple items"
+  ],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/HeroOverlay.json b/registry/components/HeroOverlay.json
new file mode 100644
index 0000000..d35b081
--- /dev/null
+++ b/registry/components/HeroOverlay.json
@@ -0,0 +1,114 @@
+{
+  "name": "HeroOverlay",
+  "description": "Full-screen hero section with background image/video overlay, circular blur effect, and bottom-left text positioning.",
+  "details": "Use for dramatic, immersive landing pages with strong visual impact. Features full viewport height with background media (image or video), text overlay positioned at bottom-left for modern editorial layouts. Includes optional circular blur effect with radial gradient mask (enabled by default) and optional dim overlay for improved text readability. Text automatically styled with light colors for visibility over background media.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Build Modern Web Experiences",
+        "minChars": 2,
+        "maxChars": 40
+      },
+      "description": {
+        "required": true,
+        "example": "Create stunning, responsive websites with our comprehensive component library",
+        "minChars": 5,
+        "maxChars": 200
+      },
+      "tag": {
+        "required": false,
+        "example": "New Release",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "mediaRules": {
+      "imageSrc": {
+        "required": false,
+        "example": "/hero-background.jpg",
+        "note": "Background image that fills the viewport. Supports external URLs with unoptimized prop Either imageSrc or videoSrc should be provided. Image is recommended if no videoSrc."
+      },
+      "videoSrc": {
+        "required": false,
+        "example": "/hero-background.mp4",
+        "note": "Background video that fills the viewport. Takes precedence over imageSrc if both provided"
+      },
+      "imageAlt": {
+        "required": false,
+        "example": "Hero background",
+        "note": "Empty string marks image as decorative (aria-hidden)"
+      },
+      "showBlur": {
+        "required": false,
+        "default": true,
+        "note": "Controls circular blur effect with radial gradient at bottom-left corner"
+      },
+      "showDimOverlay": {
+        "required": false,
+        "default": false,
+        "note": "Adds semi-transparent dark overlay (bg-background/20) over background media for improved text contrast"
+      }
+    },
+    "buttonRules": {
+      "maxButtons": 2,
+      "structure": {
+        "text": "string - Button label (required)",
+        "href": "string - Link destination (optional). External URLs (https://, http://, www.) open in new tab. Internal values (e.g., 'about', 'contact') scroll to #about, #contact sections",
+        "onClick": "() => void - Additional click handler (optional)",
+        "props": "Partial<ButtonPropsForVariant> - Additional button props like className, textClassName (optional)"
+      },
+      "examples": [
+        "{ text: 'Get Started', href: 'https://example.com' }",
+        "{ text: 'Learn More', href: 'about' }"
+      ],
+      "note": "Button variant is controlled by ThemeProvider's defaultButtonVariant. Border radius is controlled by ThemeProvider's borderRadius (options: 'sharp', 'rounded', 'soft', 'pill'). All sections should be wrapped in a single ThemeProvider at the app/page level to maintain consistent styling across the entire site."
+    }
+  },
+  "propsSchema": {
+    "title": "string",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "avatars?": "Array<{ src: string, alt: string }>",
+    "avatarText?": "string",
+    "imageSrc?": "string",
+    "videoSrc?": "string",
+    "imageAlt?": "string (default: '')",
+    "videoAriaLabel?": "string (default: 'Hero video')",
+    "showDimOverlay?": "boolean (default: false)",
+    "showBlur?": "boolean (default: true)",
+    "textPosition?": "'top' | 'bottom' (default: 'bottom')",
+    "ariaLabel?": "string (default: 'Hero section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "textBoxClassName?": "string",
+    "titleClassName?": "string",
+    "descriptionClassName?": "string",
+    "tagClassName?": "string",
+    "buttonContainerClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string",
+    "avatarGroupClassName?": "string",
+    "mediaWrapperClassName?": "string",
+    "imageClassName?": "string",
+    "blurClassName?": "string",
+    "dimOverlayClassName?": "string"
+  },
+  "usageExample": "<ThemeProvider defaultButtonVariant=\"hover-bubble\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"pill\">\n  <HeroOverlay \n    title=\"Build Modern Web Experiences\" \n    description=\"Create stunning, responsive websites with our comprehensive component library\" \n    tag=\"New Release\" \n    imageSrc=\"/hero-background.jpg\" \n    imageAlt=\"Hero background\"\n    showBlur={true}\n    showDimOverlay={false}\n    buttons={[{ text: 'Get Started', href: 'https://example.com' }, { text: 'Learn More', href: 'about' }]} \n  />\n</ThemeProvider>",
+  "do": [
+    "Use for landing pages",
+    "Use for feature showcases",
+    "Use for capability displays",
+    "Requires buttons?[]"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/HeroOverlayTestimonial.json b/registry/components/HeroOverlayTestimonial.json
new file mode 100644
index 0000000..5d3ffee
--- /dev/null
+++ b/registry/components/HeroOverlayTestimonial.json
@@ -0,0 +1,167 @@
+{
+  "name": "HeroOverlayTestimonial",
+  "description": "Full-screen hero section with background image/video overlay, circular blur effect, bottom-left text positioning, and rotating testimonial card.",
+  "details": "Use for dramatic, immersive landing pages with strong visual impact and social proof. Features full viewport height with background media (image or video), text overlay positioned at bottom-left for modern editorial layouts, and a testimonial card with star ratings at bottom-right. Includes optional circular blur effect with radial gradient mask (enabled by default) and optional dim overlay for improved text readability. Testimonials rotate automatically with configurable interval. Text automatically styled with light colors for visibility over background media. Testimonial card is hidden on mobile for better layout.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Build Modern Web Experiences",
+        "minChars": 2,
+        "maxChars": 40
+      },
+      "description": {
+        "required": true,
+        "example": "Create stunning, responsive websites with our comprehensive component library",
+        "minChars": 5,
+        "maxChars": 200
+      },
+      "tag": {
+        "required": false,
+        "example": "New Release",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "testimonialRules": {
+      "name": {
+        "required": true,
+        "example": "Sarah Johnson",
+        "minChars": 2,
+        "maxChars": 50
+      },
+      "handle": {
+        "required": true,
+        "example": "CEO, TechCorp",
+        "minChars": 2,
+        "maxChars": 50
+      },
+      "testimonial": {
+        "required": true,
+        "example": "This component library transformed our development workflow.",
+        "minChars": 10,
+        "maxChars": 200
+      },
+      "rating": {
+        "required": true,
+        "example": 5,
+        "min": 1,
+        "max": 5
+      },
+      "imageSrc": {
+        "required": false,
+        "example": "/testimonials/sarah.jpg"
+      },
+      "imageAlt": {
+        "required": false,
+        "example": "Sarah Johnson"
+      }
+    },
+    "itemRules": {
+      "minItems": 1,
+      "maxItems": 10,
+      "recommendedItems": "3-5",
+      "note": "Multiple testimonials rotate automatically. At least one testimonial required."
+    },
+    "mediaRules": {
+      "imageSrc": {
+        "required": false,
+        "example": "/hero-background.jpg",
+        "note": "Background image that fills the viewport. Supports external URLs with unoptimized prop. Either imageSrc or videoSrc should be provided. Image is recommended if no videoSrc."
+      },
+      "videoSrc": {
+        "required": false,
+        "example": "/hero-background.mp4",
+        "note": "Background video that fills the viewport. Takes precedence over imageSrc if both provided"
+      },
+      "imageAlt": {
+        "required": false,
+        "example": "Hero background",
+        "note": "Empty string marks image as decorative (aria-hidden)"
+      },
+      "showBlur": {
+        "required": false,
+        "default": true,
+        "note": "Controls circular blur effect with radial gradient at bottom-left corner"
+      },
+      "showDimOverlay": {
+        "required": false,
+        "default": false,
+        "note": "Adds semi-transparent dark overlay (bg-background/20) over background media for improved text contrast"
+      }
+    },
+    "buttonRules": {
+      "maxButtons": 2,
+      "structure": {
+        "text": "string - Button label (required)",
+        "href": "string - Link destination (optional). External URLs (https://, http://, www.) open in new tab. Internal values (e.g., 'about', 'contact') scroll to #about, #contact sections",
+        "onClick": "() => void - Additional click handler (optional)",
+        "props": "Partial<ButtonPropsForVariant> - Additional button props like className, textClassName (optional)"
+      },
+      "examples": [
+        "{ text: 'Get Started', href: 'https://example.com' }",
+        "{ text: 'Learn More', href: 'about' }"
+      ],
+      "note": "Button variant is controlled by ThemeProvider's defaultButtonVariant. Border radius is controlled by ThemeProvider's borderRadius (options: 'sharp', 'rounded', 'soft', 'pill'). All sections should be wrapped in a single ThemeProvider at the app/page level to maintain consistent styling across the entire site."
+    }
+  },
+  "propsSchema": {
+    "title": "string",
+    "description": "string",
+    "testimonials": "Array<{ name: string, handle: string, testimonial: string, rating: number, imageSrc?: string, imageAlt?: string }>",
+    "testimonialRotationInterval?": "number (default: 5000)",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "avatars?": "Array<{ src: string, alt: string }>",
+    "avatarText?": "string",
+    "imageSrc?": "string",
+    "videoSrc?": "string",
+    "imageAlt?": "string (default: '')",
+    "videoAriaLabel?": "string (default: 'Hero video')",
+    "showDimOverlay?": "boolean (default: false)",
+    "showBlur?": "boolean (default: true)",
+    "textPosition?": "'top' | 'bottom' (default: 'bottom')",
+    "ariaLabel?": "string (default: 'Hero section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "textBoxClassName?": "string",
+    "titleClassName?": "string",
+    "descriptionClassName?": "string",
+    "tagClassName?": "string",
+    "buttonContainerClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string",
+    "avatarGroupClassName?": "string",
+    "mediaWrapperClassName?": "string",
+    "imageClassName?": "string",
+    "blurClassName?": "string",
+    "dimOverlayClassName?": "string",
+    "testimonialCardClassName?": "string",
+    "testimonialContentClassName?": "string",
+    "testimonialTextClassName?": "string",
+    "testimonialRatingClassName?": "string",
+    "testimonialAuthorClassName?": "string",
+    "testimonialAuthorImageClassName?": "string",
+    "testimonialAuthorNameClassName?": "string",
+    "testimonialAuthorHandleClassName?": "string"
+  },
+  "usageExample": "<ThemeProvider defaultButtonVariant=\"hover-bubble\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"pill\">\n  <HeroOverlayTestimonial \n    title=\"Build Modern Web Experiences\" \n    description=\"Create stunning, responsive websites with our comprehensive component library\" \n    tag=\"New Release\" \n    imageSrc=\"/hero-background.jpg\" \n    imageAlt=\"Hero background\"\n    showBlur={true}\n    showDimOverlay={false}\n    testimonials={[{ name: 'Sarah Johnson', handle: 'CEO, TechCorp', testimonial: 'This transformed our workflow!', rating: 5 }]}\n    buttons={[{ text: 'Get Started', href: 'https://example.com' }, { text: 'Learn More', href: 'about' }]} \n  />\n</ThemeProvider>",
+  "do": [
+    "Use for landing pages",
+    "Use for feature showcases",
+    "Use for social proof sections",
+    "Requires testimonials[]"
+  ],
+  "dont": [
+    "Do not use without testimonials",
+    "Do not use less than 1 testimonial"
+  ],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/HeroPersonalLinks.json b/registry/components/HeroPersonalLinks.json
new file mode 100644
index 0000000..5ee955a
--- /dev/null
+++ b/registry/components/HeroPersonalLinks.json
@@ -0,0 +1,81 @@
+{
+  "name": "HeroPersonalLinks",
+  "description": "Full-screen centered hero section with title, social link buttons, and link cards for personal/portfolio pages.",
+  "details": "Use for single-section personal brand websites (link-in-bio style). Features a centered title with optional title segments for inline images, social media link buttons, and link cards with icon/media content. Each link card has a title, description, and action button. Can optionally include a footer section.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Hi, I'm John Doe",
+        "minChars": 2,
+        "maxChars": 36
+      }
+    },
+    "socialLinkRules": {
+      "required": false,
+      "structure": {
+        "icon": "LucideIcon",
+        "label": "string - Display label",
+        "href": "string - Link destination"
+      },
+      "note": "Array of social media links displayed as pill buttons"
+    },
+    "linkCardRules": {
+      "required": true,
+      "minItems": 1,
+      "structure": {
+        "icon": "LucideIcon (optional if imageSrc/videoSrc provided)",
+        "imageSrc": "string - Image source (optional) Image is recommended if no videoSrc.",
+        "videoSrc": "string - Video source (optional)",
+        "imageAlt": "string - Alt text for image",
+        "videoAriaLabel": "string - Aria label for video",
+        "title": "string - Card title",
+        "description": "string - Card description",
+        "button": "ButtonConfig - Card action button"
+      },
+      "note": "Array of link cards with icon/media, title, description, and action button"
+    }
+  },
+  "propsSchema": {
+    "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "socialLinks?": "Array<{ icon: LucideIcon, label: string, href: string }> - Social media links",
+    "linkCards": "Array<{ icon?: LucideIcon, imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string, title: string, description: string, button: ButtonConfig }> (required)",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "ariaLabel?": "string (default: 'Personal links section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "textboxClassName?": "string",
+    "titleClassName?": "string",
+    "titleImageWrapperClassName?": "string",
+    "titleImageClassName?": "string",
+    "socialLinksClassName?": "string",
+    "socialLinkClassName?": "string",
+    "linkCardsClassName?": "string",
+    "linkCardClassName?": "string",
+    "linkCardIconClassName?": "string",
+    "linkCardTitleClassName?": "string",
+    "linkCardDescriptionClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string"
+  },
+  "usageExample": "<HeroPersonalLinks background={{ variant: 'plain' }} title=\"Hi, I'm John Doe\" socialLinks={[{ icon: Twitter, label: 'Twitter', href: 'https://twitter.com' }, { icon: Linkedin, label: 'LinkedIn', href: 'https://linkedin.com' }]} linkCards={[{ icon: Briefcase, title: 'My Portfolio', description: 'Check out my latest work', button: { text: 'View', href: '/portfolio' } }, { imageSrc: '/project.jpg', title: 'Latest Project', description: 'A new design system', button: { text: 'Explore', href: '/project' } }]} />",
+  "do": [
+    "Use only for single-section personal brand websites (link-in-bio style)",
+    "Can optionally include a footer section",
+    "Include at least one link card",
+    "Use social links for social media presence"
+  ],
+  "dont": [
+    "Never use with other sections",
+    "Never use for multi-page or multi-section websites",
+    "Do not use without link cards",
+    "Do not use for product or company landing pages"
+  ],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/HeroSignup.json b/registry/components/HeroSignup.json
new file mode 100644
index 0000000..b934a73
--- /dev/null
+++ b/registry/components/HeroSignup.json
@@ -0,0 +1,80 @@
+{
+  "name": "HeroSignup",
+  "description": "Full-screen centered hero section with tag badge above title, centered text content, configurable background, and email signup form below.",
+  "details": "Use for lead generation landing pages focused on email capture. Features full viewport height (h-svh on mobile, h-screen on desktop) with vertically and horizontally centered content. Tag badge with optional icon is displayed above the title. Includes animated title and description via TextBox, required background variant, and EmailSignupForm for newsletter/early access signups. No buttons prop - CTA is the email signup form.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Join the Future of Web Development",
+        "minChars": 2,
+        "maxChars": 60
+      },
+      "description": {
+        "required": true,
+        "example": "Be the first to experience our revolutionary platform. Sign up now and get exclusive early access.",
+        "minChars": 5,
+        "maxChars": 200
+      },
+      "tag": {
+        "required": true,
+        "example": "Early Access",
+        "minChars": 2,
+        "maxChars": 30
+      },
+      "inputPlaceholder": {
+        "required": false,
+        "example": "Enter your email",
+        "minChars": 2,
+        "maxChars": 50
+      },
+      "buttonText": {
+        "required": false,
+        "example": "Get Early Access",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    }
+  },
+  "propsSchema": {
+    "title": "string (required)",
+    "description": "string (required)",
+    "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'glowing-orb' | 'glowing-orb-sparkles' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }",
+    "tag": "string (required)",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "inputPlaceholder?": "string (default: 'Enter your email')",
+    "buttonText?": "string (default: 'Get Started')",
+    "onSubmit?": "(email: string) => void",
+    "ariaLabel?": "string (default: 'Hero section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "textBoxClassName?": "string",
+    "titleClassName?": "string",
+    "descriptionClassName?": "string",
+    "tagClassName?": "string",
+    "formWrapperClassName?": "string",
+    "formClassName?": "string",
+    "inputClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string"
+  },
+  "usageExample": "<ThemeProvider defaultButtonVariant=\"hover-bubble\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"pill\">\n  <HeroSignup \n    background={{ variant: 'sparkles-gradient' }}\n    tag=\"Early Access\"\n    tagIcon={Sparkles}\n    title=\"Join the Future of Web Development\" \n    description=\"Be the first to experience our revolutionary platform. Sign up now and get exclusive early access.\" \n    inputPlaceholder=\"Enter your email\"\n    buttonText=\"Get Early Access\"\n    onSubmit={(email) => console.log('Email:', email)}\n  />\n</ThemeProvider>",
+  "do": [
+    "Use ONLY for waitlist or coming soon websites",
+    "Use for single-page early access email capture",
+    "Include a compelling tag badge"
+  ],
+  "dont": [
+    "Never use for any other type of website",
+    "Never use for multi-section websites",
+    "Never use for product, company, or portfolio websites",
+    "Do not use for heroes that need multiple CTA buttons",
+    "Do not use for heroes with media content"
+  ],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/HeroSplit.json b/registry/components/HeroSplit.json
new file mode 100644
index 0000000..db4bdbf
--- /dev/null
+++ b/registry/components/HeroSplit.json
@@ -0,0 +1,121 @@
+{
+  "name": "HeroSplit",
+  "description": "Split-layout hero section with configurable background, text content on one side, and single image/video on the other, with responsive centering.",
+  "details": "Use for hero sections where visual content and text have equal weight. Features required background variant (choose from animated grids, gradient effects, glowing orb, or 'plain' for no background), split layout with configurable image position (left/right), one image or video with fixed height control. Responsive design centers content on mobile. Optional tag with icon and up to 2 CTA buttons. Text automatically centers on mobile and aligns left on desktop. Background variants include preset options for zero-config usage.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Build Better Products",
+        "minChars": 2,
+        "maxChars": 36
+      },
+      "description": {
+        "required": true,
+        "example": "Create exceptional user experiences with our design system",
+        "minChars": 5,
+        "maxChars": 200
+      },
+      "tag": {
+        "required": false,
+        "example": "New Release",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "mediaRules": {
+      "imageSrc": {
+        "required": false,
+        "example": "/hero-image.jpg",
+        "note": "Supports external URLs with unoptimized prop Either imageSrc or videoSrc should be provided. Image is recommended if no videoSrc."
+      },
+      "videoSrc": {
+        "required": false,
+        "example": "/hero-video.mp4",
+        "note": "Takes precedence over imageSrc if both provided"
+      },
+      "imageAlt": {
+        "required": false,
+        "example": "Product showcase",
+        "note": "Empty string marks image as decorative (aria-hidden)"
+      },
+      "imagePosition": {
+        "required": false,
+        "options": [
+          "left",
+          "right"
+        ],
+        "default": "right"
+      }
+    },
+    "buttonRules": {
+      "maxButtons": 2,
+      "structure": {
+        "text": "string - Button label (required)",
+        "href": "string - Link destination (optional). External URLs (https://, http://, www.) open in new tab. Internal values (e.g., 'about', 'contact') scroll to #about, #contact sections",
+        "onClick": "() => void - Additional click handler (optional)",
+        "props": "Partial<ButtonPropsForVariant> - Additional button props like className, textClassName (optional)"
+      },
+      "examples": [
+        "{ text: 'Get Started', href: 'https://example.com' }",
+        "{ text: 'Learn More', href: 'about' }"
+      ],
+      "note": "Button variant is controlled by ThemeProvider's defaultButtonVariant. Border radius is controlled by ThemeProvider's borderRadius (options: 'sharp', 'rounded', 'soft', 'pill'). All sections should be wrapped in a single ThemeProvider at the app/page level to maintain consistent styling across the entire site."
+    }
+  },
+  "propsSchema": {
+    "title": "string",
+    "description": "string",
+    "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'glowing-orb' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "avatars?": "Avatar[] - Array of avatar objects with src and alt properties",
+    "avatarText?": "string - Text displayed next to the avatar group",
+    "imageSrc?": "string",
+    "videoSrc?": "string",
+    "imageAlt?": "string (default: '')",
+    "videoAriaLabel?": "string (default: 'Hero video')",
+    "mediaAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "ariaLabel?": "string (default: 'Hero section')",
+    "imagePosition?": "'left' | 'right' (default: 'right')",
+    "fixedMediaHeight?": "boolean (default: true) - When true, media wrapper is aspect-square on mobile and md:h-[65vh] on desktop",
+    "className?": "string",
+    "containerClassName?": "string",
+    "textBoxClassName?": "string",
+    "titleClassName?": "string",
+    "descriptionClassName?": "string",
+    "tagClassName?": "string",
+    "buttonContainerClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string",
+    "mediaWrapperClassName?": "string",
+    "imageClassName?": "string",
+    "avatarGroupClassName?": "string",
+    "marqueeItems?": "Array<{ type: 'image', src: string, alt?: string } | { type: 'text', text: string } | { type: 'text-icon', text: string, icon: LucideIcon }> - Optional marquee at bottom of hero",
+    "marqueeSpeed?": "number (default: 30)",
+    "showMarqueeCard?": "boolean (default: true) - Card styling for text/text-icon items, images never have cards",
+    "marqueeClassName?": "string",
+    "marqueeItemClassName?": "string",
+    "marqueeCardClassName?": "string",
+    "marqueeImageClassName?": "string",
+    "marqueeTextClassName?": "string",
+    "marqueeIconClassName?": "string"
+  },
+  "usageExample": "<ThemeProvider defaultButtonVariant=\"text-stagger\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"rounded\" background=\"aurora\" cardStyle=\"glass-elevated\" primaryButtonStyle=\"gradient\" secondaryButtonStyle=\"glass\">\n  <HeroSplit \n    background={{ variant: 'glowing-orb' }}\n    title=\"Build Better Products\" \n    description=\"Create exceptional user experiences with our design system\" \n    tag=\"New Release\"\n    imagePosition=\"right\" \n    imageSrc=\"/hero.jpg\"\n    imageAlt=\"Product showcase\"\n    buttons={[{ text: 'Start Building', href: 'https://example.com' }, { text: 'View Demo', href: 'demo' }]} \n  />\n</ThemeProvider>",
+  "do": [
+    "Use for landing pages",
+    "Use for feature showcases",
+    "Use for capability displays",
+    "Requires buttons?[]",
+    "Requires avatars?[]"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/HeroSplitDoubleCarousel.json b/registry/components/HeroSplitDoubleCarousel.json
new file mode 100644
index 0000000..90de63c
--- /dev/null
+++ b/registry/components/HeroSplitDoubleCarousel.json
@@ -0,0 +1,130 @@
+{
+  "name": "HeroSplitDoubleCarousel",
+  "description": "Split-layout hero section with text content on one side and two vertical marquee columns on the other, with items scrolling in opposite directions.",
+  "details": "Use for landing pages, portfolios, and creative showcases. Features split layout with TextBox on one side and dual vertical carousels on the other. Left carousel scrolls up, right carousel scrolls down, creating a visually engaging infinite scroll effect. Each carousel item displays an image or video in a card container. Supports optional logo marquee at the bottom.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Build Modern Web Experiences",
+        "minChars": 2,
+        "maxChars": 36
+      },
+      "description": {
+        "required": true,
+        "example": "Create stunning, responsive websites with our comprehensive component library",
+        "minChars": 5,
+        "maxChars": 200
+      },
+      "tag": {
+        "required": false,
+        "example": "New Release",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "carouselRules": {
+      "leftCarouselItems": {
+        "required": true,
+        "minItems": 4,
+        "structure": {
+          "imageSrc": "string - Path to image Image is recommended if no videoSrc.",
+          "videoSrc": "string - Path to video (optional)",
+          "imageAlt": "string - Alt text for image",
+          "videoAriaLabel": "string - Aria label for video"
+        },
+        "note": "Items are duplicated 4x for seamless infinite scroll"
+      },
+      "rightCarouselItems": {
+        "required": true,
+        "minItems": 4,
+        "structure": {
+          "imageSrc": "string - Path to image Image is recommended if no videoSrc.",
+          "videoSrc": "string - Path to video (optional)",
+          "imageAlt": "string - Alt text for image",
+          "videoAriaLabel": "string - Aria label for video"
+        },
+        "note": "Items are duplicated 4x for seamless infinite scroll"
+      },
+      "carouselPosition": {
+        "required": false,
+        "options": [
+          "left",
+          "right"
+        ],
+        "default": "right"
+      }
+    },
+    "buttonRules": {
+      "maxButtons": 2,
+      "structure": {
+        "text": "string - Button label",
+        "href": "string - Link destination (optional). External URLs (https://, http://, www.) open in new tab. Internal values (e.g., 'about', 'contact') scroll to #about, #contact sections",
+        "onClick": "() => void - Additional click handler (optional)",
+        "props": "Partial<ButtonPropsForVariant> - Additional button props like className, textClassName (optional)"
+      },
+      "examples": [
+        "{ text: 'Get Started', href: 'https://example.com' }",
+        "{ text: 'Learn More', href: 'about' }"
+      ],
+      "note": "Button variant is controlled by ThemeProvider's defaultButtonVariant. Border radius is controlled by ThemeProvider's borderRadius (options: 'sharp', 'rounded', 'soft', 'pill'). All sections should be wrapped in a single ThemeProvider at the app/page level to maintain consistent styling across the entire site."
+    }
+  },
+  "propsSchema": {
+    "title": "string",
+    "description": "string",
+    "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'glowing-orb' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }",
+    "leftCarouselItems": "Array<{ imageSrc?: string; videoSrc?: string; imageAlt?: string; videoAriaLabel?: string }>",
+    "rightCarouselItems": "Array<{ imageSrc?: string; videoSrc?: string; imageAlt?: string; videoAriaLabel?: string }>",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "avatars?": "Avatar[] - Array of avatar objects with src and alt properties",
+    "avatarText?": "string - Text displayed next to the avatar group",
+    "carouselPosition?": "'left' | 'right' (default: 'right')",
+    "ariaLabel?": "string (default: 'Hero section')",
+    "marqueeItems?": "MarqueeItem[] - Optional logo marquee items for bottom of section",
+    "marqueeSpeed?": "number (default: 30)",
+    "showMarqueeCard?": "boolean (default: true)",
+    "className?": "string",
+    "containerClassName?": "string",
+    "textBoxClassName?": "string",
+    "titleClassName?": "string",
+    "descriptionClassName?": "string",
+    "tagClassName?": "string",
+    "buttonContainerClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string",
+    "carouselWrapperClassName?": "string",
+    "carouselColumnClassName?": "string",
+    "carouselItemClassName?": "string",
+    "carouselImageClassName?": "string",
+    "avatarGroupClassName?": "string",
+    "marqueeClassName?": "string",
+    "marqueeItemClassName?": "string",
+    "marqueeCardClassName?": "string",
+    "marqueeImageClassName?": "string",
+    "marqueeTextClassName?": "string",
+    "marqueeIconClassName?": "string"
+  },
+  "usageExample": "<HeroSplitDoubleCarousel background={{ variant: 'glowing-orb' }} tag=\"New Release\" tagIcon={Sparkles} title=\"Build Modern Web Experiences\" description=\"Create stunning, responsive websites with our comprehensive component library\" carouselPosition=\"right\" leftCarouselItems={[{ imageSrc: '/placeholder1.jpg', imageAlt: 'Gallery 1' }, { imageSrc: '/placeholder2.jpg', imageAlt: 'Gallery 2' }, { imageSrc: '/placeholder3.jpg', imageAlt: 'Gallery 3' }, { imageSrc: '/placeholder4.jpg', imageAlt: 'Gallery 4' }]} rightCarouselItems={[{ imageSrc: '/placeholder5.jpg', imageAlt: 'Gallery 5' }, { imageSrc: '/placeholder6.jpg', imageAlt: 'Gallery 6' }, { imageSrc: '/placeholder7.jpg', imageAlt: 'Gallery 7' }, { imageSrc: '/placeholder8.jpg', imageAlt: 'Gallery 8' }]} buttons={[{ text: 'Get Started', href: 'https://example.com' }, { text: 'Learn More', href: 'about' }]} />",
+  "do": [
+    "Use for landing pages with visual portfolios",
+    "Use for image galleries and creative showcases",
+    "Use when you want continuous visual motion",
+    "Requires leftCarouselItems[]",
+    "Requires rightCarouselItems[]",
+    "Requires buttons?[]"
+  ],
+  "dont": [
+    "Do not use with fewer than 4 items per column",
+    "Do not use when static media is preferred"
+  ],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/HeroSplitDualMedia.json b/registry/components/HeroSplitDualMedia.json
new file mode 100644
index 0000000..aec5a8f
--- /dev/null
+++ b/registry/components/HeroSplitDualMedia.json
@@ -0,0 +1,109 @@
+{
+  "name": "HeroSplitDualMedia",
+  "description": "Split-layout hero section with configurable background, text content with rating on one side, and dual image/video grid on the other.",
+  "details": "Use for coaching, consulting, or service-focused landing pages. Features full viewport height (h-svh on mobile, h-screen on desktop) with responsive split layout. Left side contains TextBox with tag, title, description, buttons, and a rating section with star icons. Right side displays two media items in a 2-column grid layout. Rating section shows star icons with descriptive text below a divider line.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Transform your business with proven strategies",
+        "minChars": 2,
+        "maxChars": 60
+      },
+      "description": {
+        "required": true,
+        "example": "I help entrepreneurs and executives unlock their full potential and build thriving businesses.",
+        "minChars": 5,
+        "maxChars": 200
+      },
+      "tag": {
+        "required": true,
+        "example": "Business Coach",
+        "minChars": 2,
+        "maxChars": 30
+      },
+      "ratingText": {
+        "required": true,
+        "example": "Rated by loving Clients",
+        "minChars": 2,
+        "maxChars": 50
+      }
+    },
+    "mediaRules": {
+      "mediaItems": {
+        "required": true,
+        "note": "Array of exactly 2 media items. Each can have imageSrc or videoSrc.",
+        "structure": {
+          "imageSrc": "string - Path to image (optional if videoSrc provided) Image is recommended if no videoSrc.",
+          "videoSrc": "string - Path to video (optional if imageSrc provided)",
+          "imageAlt": "string - Alt text for image",
+          "videoAriaLabel": "string - Aria label for video"
+        },
+        "example": "[{ imageSrc: '/image1.jpg', imageAlt: 'Coaching session' }, { imageSrc: '/image2.jpg', imageAlt: 'Business growth' }]"
+      }
+    },
+    "ratingRules": {
+      "rating": {
+        "required": true,
+        "note": "Number of stars to display (1-5)",
+        "example": 5
+      }
+    },
+    "buttonRules": {
+      "maxButtons": 2,
+      "structure": {
+        "text": "string - Button label (required)",
+        "href": "string - Link destination (optional)",
+        "onClick": "() => void - Click handler (optional)",
+        "props": "Partial<ButtonPropsForVariant> - Additional button props (optional)"
+      },
+      "note": "Button variant controlled by ThemeProvider's defaultButtonVariant."
+    }
+  },
+  "propsSchema": {
+    "title": "string (required)",
+    "description": "string (required)",
+    "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'glowing-orb' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }",
+    "tag": "string (required)",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "mediaItems": "[MediaItem, MediaItem] - Array of exactly 2 media items with imageSrc/videoSrc",
+    "mediaAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "rating": "number (required) - Number of stars to display",
+    "ratingText": "string (required) - Text displayed next to rating stars",
+    "ariaLabel?": "string (default: 'Hero section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "textBoxClassName?": "string",
+    "titleClassName?": "string",
+    "descriptionClassName?": "string",
+    "tagClassName?": "string",
+    "buttonContainerClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string",
+    "mediaWrapperClassName?": "string",
+    "mediaItemClassName?": "string",
+    "imageClassName?": "string",
+    "ratingClassName?": "string",
+    "ratingTextClassName?": "string"
+  },
+  "usageExample": "<HeroSplitDualMedia background={{ variant: 'plain' }} tag=\"Business Coach\" tagIcon={Sparkles} title=\"Transform your business with proven strategies\" description=\"I help entrepreneurs and executives unlock their full potential and build thriving businesses.\" mediaItems={[{ imageSrc: '/image1.jpg', imageAlt: 'Coaching' }, { imageSrc: '/image2.jpg', imageAlt: 'Growth' }]} rating={5} ratingText=\"Rated by loving Clients\" buttons={[{ text: 'Book a Call', href: '#' }]} />",
+  "do": [
+    "Use for coaching, consulting, or service-focused landing pages",
+    "Include exactly 2 media items",
+    "Include star rating for social proof",
+    "Full viewport height with split layout"
+  ],
+  "dont": [
+    "Do not use without 2 media items",
+    "Do not use without rating",
+    "Do not use for product showcases"
+  ],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/HeroSplitKpi.json b/registry/components/HeroSplitKpi.json
new file mode 100644
index 0000000..bf5b58a
--- /dev/null
+++ b/registry/components/HeroSplitKpi.json
@@ -0,0 +1,133 @@
+{
+  "name": "HeroSplitKpi",
+  "description": "Split-layout hero with configurable background, media image/video, and three KPI metric boxes positioned around it.",
+  "details": "Use for hero sections showcasing key performance metrics alongside visual content. Features required background variant (choose from animated grids, gradient effects, glowing orb, or 'plain' for no background), split layout with configurable image position (left/right). Displays media content (image or video) scaled to 75% within a card wrapper, with three KPI boxes positioned around it (top-left, right, bottom-left). Each KPI box shows a large value and label with glass styling and backdrop blur. Responsive design centers content on mobile with square aspect ratio. Optional tag with icon and CTA buttons. Background variants include preset options for zero-config usage.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "The Future of Supply Chain",
+        "minChars": 2,
+        "maxChars": 36
+      },
+      "description": {
+        "required": true,
+        "example": "Ship globally within 3 days post-production with smart fulfillment",
+        "minChars": 5,
+        "maxChars": 200
+      },
+      "tag": {
+        "required": false,
+        "example": "Trusted by 150+ Brands",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "kpiRules": {
+      "kpis": {
+        "required": true,
+        "note": "Array of exactly 3 KPI items. Each item has 'value' (the metric) and 'label' (description)",
+        "structure": {
+          "value": "string - The metric value (e.g., '99.8%', '10x', '4-10 Days')",
+          "label": "string - Description of the metric (e.g., 'Order Accuracy')"
+        },
+        "example": "[{ value: '4-10 Days', label: 'Worldwide Delivery' }, { value: '99.8%', label: 'Order Accuracy' }, { value: '10x', label: 'Faster Lead Times' }]"
+      }
+    },
+    "mediaRules": {
+      "imageSrc": {
+        "required": false,
+        "example": "/hero-image.jpg",
+        "note": "Image displayed in scaled card wrapper Either imageSrc or videoSrc should be provided. Image is recommended if no videoSrc."
+      },
+      "videoSrc": {
+        "required": false,
+        "example": "/hero-video.mp4",
+        "note": "Video takes precedence over image if both provided"
+      },
+      "imageAlt": {
+        "required": false,
+        "example": "Product showcase",
+        "note": "Empty string marks image as decorative (aria-hidden)"
+      },
+      "imagePosition": {
+        "required": false,
+        "options": [
+          "left",
+          "right"
+        ],
+        "default": "right"
+      }
+    },
+    "buttonRules": {
+      "maxButtons": 2,
+      "structure": {
+        "text": "string - Button label (required)",
+        "href": "string - Link destination (optional)",
+        "onClick": "() => void - Additional click handler (optional)"
+      }
+    }
+  },
+  "propsSchema": {
+    "title": "string",
+    "description": "string",
+    "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'glowing-orb' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }",
+    "kpis": "[KpiItem, KpiItem, KpiItem] - Array of exactly 3 KPI items with value and label",
+    "enableKpiAnimation": "boolean - Enable/disable mouse-following animation on KPI boxes",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "avatars?": "Avatar[] - Array of avatar objects with src and alt properties",
+    "avatarText?": "string - Text displayed next to the avatar group",
+    "imageSrc?": "string",
+    "videoSrc?": "string",
+    "imageAlt?": "string (default: '')",
+    "videoAriaLabel?": "string (default: 'Hero video')",
+    "mediaAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "ariaLabel?": "string (default: 'Hero section')",
+    "imagePosition?": "'left' | 'right' (default: 'right')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "textBoxClassName?": "string",
+    "titleClassName?": "string",
+    "descriptionClassName?": "string",
+    "tagClassName?": "string",
+    "buttonContainerClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string",
+    "mediaWrapperClassName?": "string",
+    "imageClassName?": "string",
+    "avatarGroupClassName?": "string",
+    "kpiClassName?": "string",
+    "kpiValueClassName?": "string",
+    "kpiLabelClassName?": "string",
+    "marqueeItems?": "Array<{ type: 'image', src: string, alt?: string } | { type: 'text', text: string } | { type: 'text-icon', text: string, icon: LucideIcon }> - Optional marquee at bottom of hero",
+    "marqueeSpeed?": "number (default: 30)",
+    "showMarqueeCard?": "boolean (default: true) - Card styling for text/text-icon items, images never have cards",
+    "marqueeClassName?": "string",
+    "marqueeItemClassName?": "string",
+    "marqueeCardClassName?": "string",
+    "marqueeImageClassName?": "string",
+    "marqueeTextClassName?": "string",
+    "marqueeIconClassName?": "string"
+  },
+  "usageExample": "<HeroSplitKpi background={{ variant: 'glowing-orb' }} title=\"The Future of Supply Chain\" description=\"Ship globally within 3 days with smart fulfillment\" enableKpiAnimation={true} kpis={[{ value: '4-10 Days', label: 'Worldwide Delivery' }, { value: '99.8%', label: 'Order Accuracy' }, { value: '10x', label: 'Faster Lead Times' }]} imageSrc=\"/hero-image.jpg\" imageAlt=\"Supply chain\" buttons={[{ text: 'Get Started', href: 'https://example.com' }]} />",
+  "do": [
+    "Use for landing pages",
+    "Use for feature showcases",
+    "Use for capability displays",
+    "Use for statistics displays",
+    "Use for achievement showcases",
+    "Requires kpis[]",
+    "Requires buttons?[]",
+    "Requires avatars?[]"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/HeroSplitTestimonial.json b/registry/components/HeroSplitTestimonial.json
new file mode 100644
index 0000000..ba6526f
--- /dev/null
+++ b/registry/components/HeroSplitTestimonial.json
@@ -0,0 +1,139 @@
+{
+  "name": "HeroSplitTestimonial",
+  "description": "Split-layout hero section with configurable background, text content on one side, and image/video with rotating testimonial card overlay on the other.",
+  "details": "Use for hero sections that combine product visuals with social proof. Features split layout with media on one side (left/right configurable) and a testimonial card overlay positioned at the bottom-right of the media. Testimonials rotate automatically every 5 seconds with smooth fade animation. Each testimonial displays star rating, quote text, and author info with avatar. Supports optional logo marquee at the bottom. Responsive design with centered layout on mobile.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Build Better Products",
+        "minChars": 2,
+        "maxChars": 36
+      },
+      "description": {
+        "required": true,
+        "example": "Create exceptional user experiences with our design system",
+        "minChars": 5,
+        "maxChars": 200
+      },
+      "tag": {
+        "required": false,
+        "example": "New Release",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "testimonialRules": {
+      "testimonials": {
+        "required": true,
+        "minItems": 1,
+        "example": "[{ name: 'Sarah Johnson', handle: 'CEO, TechCorp', testimonial: 'Amazing product!', rating: 5, imageSrc: '/avatar.jpg' }]",
+        "note": "Array of testimonial objects. Each requires name, handle, testimonial text, and rating (1-5). imageSrc is optional."
+      },
+      "testimonialRotationInterval": {
+        "required": false,
+        "default": 5000,
+        "note": "Rotation interval in milliseconds"
+      }
+    },
+    "mediaRules": {
+      "imageSrc": {
+        "required": false,
+        "example": "/hero-image.jpg",
+        "note": "Supports external URLs with unoptimized prop Either imageSrc or videoSrc should be provided. Image is recommended if no videoSrc."
+      },
+      "videoSrc": {
+        "required": false,
+        "example": "/hero-video.mp4",
+        "note": "Takes precedence over imageSrc if both provided"
+      },
+      "imagePosition": {
+        "required": false,
+        "options": [
+          "left",
+          "right"
+        ],
+        "default": "right"
+      }
+    },
+    "buttonRules": {
+      "maxButtons": 2,
+      "structure": {
+        "text": "string - Button label (required)",
+        "href": "string - Link destination (optional). External URLs (https://, http://, www.) open in new tab. Internal values (e.g., 'about', 'contact') scroll to #about, #contact sections",
+        "onClick": "() => void - Additional click handler (optional)"
+      },
+      "examples": [
+        "{ text: 'Get Started', href: 'https://example.com' }",
+        "{ text: 'Learn More', href: 'about' }"
+      ]
+    }
+  },
+  "propsSchema": {
+    "title": "string",
+    "description": "string",
+    "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'glowing-orb' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }",
+    "testimonials": "Array<{ name: string, handle: string, testimonial: string, rating: number, imageSrc?: string, imageAlt?: string }>",
+    "testimonialRotationInterval?": "number (default: 5000)",
+    "useInvertedBackground?": "boolean (default: false)",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "avatars?": "Avatar[]",
+    "avatarText?": "string",
+    "imageSrc?": "string",
+    "videoSrc?": "string",
+    "imageAlt?": "string (default: '')",
+    "videoAriaLabel?": "string (default: 'Hero video')",
+    "mediaAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "ariaLabel?": "string (default: 'Hero section')",
+    "imagePosition?": "'left' | 'right' (default: 'right')",
+    "fixedMediaHeight?": "boolean (default: true)",
+    "className?": "string",
+    "containerClassName?": "string",
+    "textBoxClassName?": "string",
+    "titleClassName?": "string",
+    "descriptionClassName?": "string",
+    "tagClassName?": "string",
+    "buttonContainerClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string",
+    "mediaWrapperClassName?": "string",
+    "imageClassName?": "string",
+    "avatarGroupClassName?": "string",
+    "testimonialCardClassName?": "string",
+    "testimonialContentClassName?": "string",
+    "testimonialTextClassName?": "string",
+    "testimonialRatingClassName?": "string",
+    "testimonialAuthorClassName?": "string",
+    "testimonialAuthorImageClassName?": "string",
+    "testimonialAuthorNameClassName?": "string",
+    "testimonialAuthorHandleClassName?": "string",
+    "marqueeItems?": "Array<{ type: 'image', src: string, alt?: string } | { type: 'text', text: string } | { type: 'text-icon', text: string, icon: LucideIcon }>",
+    "marqueeSpeed?": "number (default: 30)",
+    "showMarqueeCard?": "boolean (default: true)",
+    "marqueeClassName?": "string",
+    "marqueeItemClassName?": "string",
+    "marqueeCardClassName?": "string",
+    "marqueeImageClassName?": "string",
+    "marqueeTextClassName?": "string",
+    "marqueeIconClassName?": "string"
+  },
+  "usageExample": "<ThemeProvider defaultButtonVariant=\"text-stagger\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"rounded\" background=\"aurora\" cardStyle=\"glass-elevated\" primaryButtonStyle=\"gradient\" secondaryButtonStyle=\"glass\">\n  <HeroSplitTestimonial \n    background={{ variant: 'glowing-orb' }}\n    title=\"Build Better Products\" \n    description=\"Create exceptional user experiences with our design system\" \n    tag=\"New Release\"\n    imagePosition=\"right\" \n    imageSrc=\"/hero.jpg\"\n    imageAlt=\"Product showcase\"\n    testimonials={[{ name: 'Sarah Johnson', handle: 'CEO, TechCorp', testimonial: 'This transformed our workflow!', rating: 5, imageSrc: '/avatar.jpg' }]}\n    buttons={[{ text: 'Start Building', href: 'https://example.com' }, { text: 'View Demo', href: 'demo' }]} \n  />\n</ThemeProvider>",
+  "do": [
+    "Use for landing pages with social proof",
+    "Use for product showcases with testimonials",
+    "Use when customer reviews add credibility",
+    "Requires testimonials[]",
+    "Requires buttons?[]",
+    "Requires avatars?[]"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/InlineImageSplitTextAbout.json b/registry/components/InlineImageSplitTextAbout.json
new file mode 100644
index 0000000..d8b6ab0
--- /dev/null
+++ b/registry/components/InlineImageSplitTextAbout.json
@@ -0,0 +1,70 @@
+{
+  "name": "InlineImageSplitTextAbout",
+  "description": "About section with dynamic heading composed of alternating text and inline image segments.",
+  "details": "Use for impactful about statements with visual branding elements. Heading is composed of an array of segments that can be text or images in any order. Images are styled with primary-button styling and alternate rotation (-rotate-12, rotate-12) for dynamic visual effect. Images are square (1.1em height) with aspect-square ratio, aligned middle with horizontal margins. Up to 2 optional CTA buttons with primary/secondary styling. Button variant controlled by ThemeProvider.",
+  "constraints": {
+    "textRules": {
+      "heading[].content": {
+        "required": "text segments require content",
+        "example": "Building the future with",
+        "minChars": 1,
+        "maxChars": 100,
+        "note": "Each text segment in the heading array"
+      }
+    },
+    "imageRules": {
+      "heading[].src": {
+        "required": "image segments require src",
+        "example": "/brand/logo.png or https://example.com/image.png",
+        "note": "Supports local paths and external URLs. External URLs are rendered with unoptimized flag."
+      },
+      "heading[].alt": {
+        "required": false,
+        "example": "Company logo",
+        "note": "Optional alt text for images. Omit or use empty string for decorative images (aria-hidden=true when empty)."
+      }
+    },
+    "headingRules": {
+      "minSegments": 1,
+      "note": "heading array can contain any number of text and image segments in any order. Images automatically alternate rotation direction (1st: -rotate-12, 2nd: rotate-12, etc.)."
+    },
+    "buttonRules": {
+      "maxButtons": 2,
+      "structure": {
+        "text": "string - Button label (required)",
+        "href": "string - Link destination (optional)",
+        "onClick": "() => void - Click handler (optional)",
+        "props": "Partial<ButtonPropsForVariant> - Additional button props (optional)"
+      },
+      "note": "Button variant controlled by ThemeProvider's defaultButtonVariant. Border radius controlled by ThemeProvider's borderRadius."
+    }
+  },
+  "propsSchema": {
+    "heading": "Array<{ type: 'text'; content: string } | { type: 'image'; src: string; alt?: string }>",
+    "buttons?": "Array<{ text: string, onClick?: () => void, href?: string, props?: Partial<ButtonPropsForVariant<CTAButtonVariant>> }>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'About section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "headingClassName?": "string",
+    "imageWrapperClassName?": "string",
+    "imageClassName?": "string",
+    "buttonContainerClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string"
+  },
+  "usageExample": "// Wrap in ThemeProvider\n<ThemeProvider defaultButtonVariant=\"text-stagger\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"rounded\" background=\"aurora\" cardStyle=\"glass-elevated\" primaryButtonStyle=\"gradient\" secondaryButtonStyle=\"glass\">\n  <InlineImageSplitTextAbout heading={[{ type: 'text', content: 'Building the future with' }, { type: 'image', src: '/brand/logo.png', alt: 'Company logo' }, { type: 'text', content: 'innovative solutions' }]} useInvertedBackground={false} buttons={[{ text: 'Get Started', href: '/signup' }, { text: 'Learn More', href: '/about' }]} />\n</ThemeProvider>",
+  "do": [
+    "Use for about pages",
+    "Use for company information",
+    "Requires heading[]",
+    "Requires buttons?[]"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/Input.json b/registry/components/Input.json
new file mode 100644
index 0000000..f517f50
--- /dev/null
+++ b/registry/components/Input.json
@@ -0,0 +1,36 @@
+{
+  "name": "Input",
+  "description": "Styled text input field with secondary-button styling and rounded-theme borders.",
+  "details": "Use for text, email, password, and other input types in forms. Features secondary-button background styling, placeholder text with 75% opacity, and focus states. Includes disabled state with reduced opacity and cursor styling. Supports all standard HTML input types.",
+  "constraints": {
+    "textRules": {
+      "placeholder": {
+        "required": false,
+        "example": "Enter your name",
+        "minChars": 2,
+        "maxChars": 50
+      }
+    }
+  },
+  "propsSchema": {
+    "value": "string (required)",
+    "onChange": "(value: string) => void (required)",
+    "type?": "string (default: 'text')",
+    "placeholder?": "string",
+    "required?": "boolean (default: false)",
+    "disabled?": "boolean (default: false)",
+    "ariaLabel?": "string",
+    "className?": "string"
+  },
+  "usageExample": "<Input value={name} onChange={(value) => setName(value)} type=\"text\" placeholder=\"Name\" required />",
+  "do": [
+    "Use for feature showcases",
+    "Use for capability displays"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/MediaAbout.json b/registry/components/MediaAbout.json
new file mode 100644
index 0000000..6bf87b0
--- /dev/null
+++ b/registry/components/MediaAbout.json
@@ -0,0 +1,96 @@
+{
+  "name": "MediaAbout",
+  "description": "Full-width media about section with centered TextBox content overlaid on image or video.",
+  "details": "Use for impactful visual-first about sections where the media is the primary focus with overlaid text content. Features full-width media (image or video) in aspect-video ratio with content-width constraint, rounded corners (theme-capped), and centered TextBox overlay containing title (text-6xl), description, optional tag, and 1-2 CTA buttons. TextBox is constrained to w-content-width md:w-45 for optimal readability. Perfect for hero-like about sections, product showcases, or call-to-action moments where visual impact is key. Section uses standard py-20 padding with useInvertedBackground support for section background.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Elevate Your Experience",
+        "minChars": 2,
+        "maxChars": 100
+      },
+      "description": {
+        "required": true,
+        "example": "Discover a new way to connect, create, and inspire with our innovative solutions.",
+        "minChars": 10,
+        "maxChars": 300
+      },
+      "tag": {
+        "required": false,
+        "example": "About Us",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "mediaRules": {
+      "imageSrc": {
+        "required": false,
+        "example": "/about-hero.jpg",
+        "note": "Either imageSrc or videoSrc should be provided. Image is recommended for static visuals."
+      },
+      "videoSrc": {
+        "required": false,
+        "example": "/about-video.mp4",
+        "note": "Either imageSrc or videoSrc should be provided. Video is recommended for motion content."
+      },
+      "imageAlt": {
+        "required": false,
+        "example": "Our team in action",
+        "note": "Alt text for image. Defaults to empty string (decorative)."
+      },
+      "videoAriaLabel": {
+        "required": false,
+        "example": "About us video",
+        "note": "ARIA label for video accessibility."
+      }
+    },
+    "buttonRules": {
+      "maxButtons": 2,
+      "minButtons": 0,
+      "note": "Buttons are part of TextBox, centered and overlaid on media. First button is primary, second is secondary. Button variant controlled by ThemeProvider's defaultButtonVariant."
+    }
+  },
+  "propsSchema": {
+    "title": "string",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "imageSrc?": "string",
+    "videoSrc?": "string",
+    "imageAlt?": "string",
+    "videoAriaLabel?": "string",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'About section')",
+    "className?": "string",
+    "textBoxClassName?": "string",
+    "titleClassName?": "string",
+    "descriptionClassName?": "string",
+    "tagClassName?": "string",
+    "buttonContainerClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string",
+    "mediaWrapperClassName?": "string",
+    "mediaClassName?": "string"
+  },
+  "usageExample": "<MediaAbout title=\"Elevate Your Experience\" description=\"Discover a new way to connect, create, and inspire.\" tag=\"About Us\" imageSrc=\"/about-hero.jpg\" imageAlt=\"Our team\" buttons={[{ text: 'Shop Now', href: '/shop' }]} useInvertedBackground={false} />",
+  "do": [
+    "Use for landing pages",
+    "Use for feature showcases",
+    "Use for capability displays",
+    "Use for about pages",
+    "Use for company information",
+    "Use for product catalogs",
+    "Use for e-commerce",
+    "Requires buttons?[]"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/MetricCardEleven.json b/registry/components/MetricCardEleven.json
new file mode 100644
index 0000000..9f0f852
--- /dev/null
+++ b/registry/components/MetricCardEleven.json
@@ -0,0 +1,115 @@
+{
+  "name": "MetricCardEleven",
+  "description": "Metrics section with paired text and media cards. Each metric displays a value card alongside an image/video card in a 2-column layout.",
+  "details": "Use for showcasing metrics with visual content. Each metric creates two side-by-side cards: a text card (large value at top, title with accent divider and description at bottom) and a media card (image or video). Layout: 1 item or odd last item spans full width with aspect-video on desktop. 2+ items show 2-column grid on desktop. On mobile, even items (2nd, 4th, etc.) alternate order with media on left. Uses CardStackTextBox for header section. Supports GSAP scroll-triggered animations.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Our Impact",
+        "minChars": 2,
+        "maxChars": 50
+      },
+      "description": {
+        "required": true,
+        "example": "See the results we've delivered for our clients",
+        "minChars": 5,
+        "maxChars": 250
+      },
+      "tag": {
+        "required": false,
+        "example": "Results",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "metricRules": {
+      "id": {
+        "required": true,
+        "example": "1",
+        "minChars": 1,
+        "maxChars": 20
+      },
+      "value": {
+        "required": true,
+        "example": "10M+",
+        "minChars": 1,
+        "maxChars": 15,
+        "note": "Large metric value displayed prominently at top of text card"
+      },
+      "title": {
+        "required": true,
+        "example": "Organic Views",
+        "minChars": 2,
+        "maxChars": 50,
+        "note": "Metric title displayed at bottom of text card, truncates"
+      },
+      "description": {
+        "required": true,
+        "example": "Growth through smart content strategy",
+        "minChars": 5,
+        "maxChars": 100,
+        "note": "Metric description below accent divider, truncates to single line"
+      },
+      "media": {
+        "required": true,
+        "note": "Either imageSrc or videoSrc must be provided for each metric"
+      }
+    },
+    "itemRules": {
+      "minItems": 1,
+      "maxItems": 6,
+      "recommendedItems": "2-4"
+    }
+  },
+  "propsSchema": {
+    "metrics": "Array<{ id: string, value: string, title: string, description: string, imageSrc?: string, imageAlt?: string, videoSrc?: string, videoAriaLabel?: string }>",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal'",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image'",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Metrics section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string",
+    "textBoxTitleImageClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string",
+    "gridClassName?": "string",
+    "cardClassName?": "string",
+    "valueClassName?": "string",
+    "cardTitleClassName?": "string",
+    "cardDescriptionClassName?": "string",
+    "mediaCardClassName?": "string",
+    "mediaClassName?": "string"
+  },
+  "usageExample": "<MetricCardEleven metrics={[{ id: '1', value: '10M+', title: 'Organic Views', description: 'Growth through smart content strategy', imageSrc: '/hero/hero-1.webp', imageAlt: 'Content creator working' }, { id: '2', value: '500K+', title: 'New Followers', description: 'Engaged community members gained', imageSrc: '/hero/hero-2.webp', imageAlt: 'Social media engagement' }]} title=\"Our Impact\" description=\"See the results we've delivered for our clients\" textboxLayout=\"default\" useInvertedBackground={false} animationType=\"slide-up\" />",
+  "do": [
+    "Use for statistics displays",
+    "Use for achievement showcases",
+    "Requires metrics[]",
+    "Requires titleSegments?[]",
+    "Requires buttons?[]"
+  ],
+  "dont": [
+    "Do not use more than 4 items",
+    "Do not use more than 6 items"
+  ],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/MetricCardFourteen.json b/registry/components/MetricCardFourteen.json
new file mode 100644
index 0000000..4e74f4c
--- /dev/null
+++ b/registry/components/MetricCardFourteen.json
@@ -0,0 +1,79 @@
+{
+  "name": "MetricCardFourteen",
+  "description": "Metrics section with animated title, tag badge, and metric cards with large values and descriptions.",
+  "details": "Use for impact metrics or sustainability stats. Layout: Animated title at top, horizontal divider, then tag badge on left with metric cards grid on right. Each metric card has large value at top, divider line, and description text below. Cards are aspect-video with justify-between for proper spacing. Supports 1-2 column grid based on item count. Supports inverted backgrounds.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "We're committed to sustainability and reducing our environmental impact.",
+        "minChars": 10,
+        "maxChars": 200
+      },
+      "tag": {
+        "required": true,
+        "example": "Impact",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "metricRules": {
+      "id": {
+        "required": true,
+        "example": "1",
+        "note": "Unique identifier for each metric"
+      },
+      "value": {
+        "required": true,
+        "example": "16x",
+        "minChars": 1,
+        "maxChars": 10,
+        "note": "Large metric value displayed prominently"
+      },
+      "description": {
+        "required": true,
+        "example": "By using 80% less steel, we've lowered our carbon footprint by 16x.",
+        "minChars": 10,
+        "maxChars": 200,
+        "note": "Description text below the divider"
+      }
+    },
+    "itemRules": {
+      "minItems": 1,
+      "maxItems": 4,
+      "recommendedItems": 2
+    }
+  },
+  "propsSchema": {
+    "title": "string",
+    "tag": "string",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "metrics": "Array<{ id: string, value: string, description: string }>",
+    "metricsAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Metrics section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "titleClassName?": "string",
+    "tagClassName?": "string",
+    "metricsContainerClassName?": "string",
+    "metricClassName?": "string",
+    "valueClassName?": "string",
+    "descriptionClassName?": "string"
+  },
+  "usageExample": "<MetricCardFourteen title=\"We're committed to sustainability and reducing our environmental impact.\" tag=\"Impact\" metrics={[{ id: '1', value: '16x', description: 'By using 80% less steel, we've lowered our carbon footprint.' }, { id: '2', value: '95%', description: 'Customer satisfaction rate across all products.' }]} useInvertedBackground={false} />",
+  "do": [
+    "Use for statistics displays",
+    "Use for achievement showcases",
+    "Requires metrics[]"
+  ],
+  "dont": [
+    "Do not use more than 4 items",
+    "Do not use more than 4 items"
+  ],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/MetricCardOne.json b/registry/components/MetricCardOne.json
new file mode 100644
index 0000000..f75b174
--- /dev/null
+++ b/registry/components/MetricCardOne.json
@@ -0,0 +1,114 @@
+{
+  "name": "MetricCardOne",
+  "description": "Metric card with large gradient value text, title, description, and icon badge.",
+  "details": "Use for displaying key metrics, statistics, or KPIs with visual impact. Layout: Large Gradient Value (9xl, overlapping) → Title (4xl, overlaps value with negative margin) → Description (base text, centered) → Icon Badge (bottom-left corner, primary-button styling). Value text uses gradient effect with CSS variables for theme consistency. All fields are required for visual consistency. Best for stats sections, achievement displays, or data visualization. Automatically switches between grid (1-4 items) and carousel (5+ items). Optional header with title, description, tag, and buttons.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Our Impact",
+        "minChars": 2,
+        "maxChars": 35
+      },
+      "description": {
+        "required": true,
+        "example": "Key metrics that showcase our growth and success",
+        "minChars": 5,
+        "maxChars": 250
+      },
+      "tag": {
+        "required": false,
+        "example": "Statistics",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "metricRules": {
+      "id": {
+        "required": true,
+        "example": "1",
+        "minChars": 1,
+        "maxChars": 20
+      },
+      "value": {
+        "required": true,
+        "example": "100",
+        "minChars": 1,
+        "maxChars": 5,
+        "type": "number",
+        "note": "Must be a number (max 5 digits). Large metric value displayed with gradient effect."
+      },
+      "title": {
+        "required": true,
+        "example": "million",
+        "minChars": 2,
+        "maxChars": 30,
+        "note": "Metric label displayed below value with negative margin overlap"
+      },
+      "description": {
+        "required": true,
+        "example": "Active users worldwide",
+        "minChars": 5,
+        "maxChars": 150,
+        "note": "Supporting description text displayed below title"
+      },
+      "icon": {
+        "required": true,
+        "example": "TrendingUp",
+        "note": "Lucide icon displayed in bottom-left corner with primary-button styling"
+      }
+    }
+  },
+  "propsSchema": {
+    "metrics": "Array<{ id: string, value: string, title: string, description: string, icon: LucideIcon }>",
+    "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+    "gridVariant": "'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' (required)",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d'",
+    "uniformGridCustomHeightClasses?": "string",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Metrics section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+    "textBoxTitleImageClassName?": "string - For styling images in inline-image layout",
+    "textBoxDescriptionClassName?": "string",
+    "valueClassName?": "string",
+    "titleClassName?": "string",
+    "descriptionClassName?": "string",
+    "iconContainerClassName?": "string",
+    "iconClassName?": "string",
+    "gridClassName?": "string",
+    "carouselClassName?": "string",
+    "controlsClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string"
+  },
+  "usageExample": "<MetricCardOne metrics={[{ id: '1', value: '100', title: 'million', description: 'Active users worldwide', icon: TrendingUp }, { id: '2', value: '700', title: 'thousand', description: 'Projects completed successfully', icon: Users }]} title=\"Our Impact\" description=\"See how we're making a difference\" gridVariant=\"uniform-all-items-equal\" textboxLayout=\"default\" animationType=\"slide-up\" useInvertedBackground={false} />",
+  "do": [
+    "Use for statistics displays",
+    "Use for achievement showcases",
+    "Requires metrics[]",
+    "Requires titleSegments?[]",
+    "Requires buttons?[]"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/MetricCardSeven.json b/registry/components/MetricCardSeven.json
new file mode 100644
index 0000000..f5edadb
--- /dev/null
+++ b/registry/components/MetricCardSeven.json
@@ -0,0 +1,110 @@
+{
+  "name": "MetricCardSeven",
+  "description": "Metric card with large accent value, title, and feature list with checkmarks.",
+  "details": "Use for metrics with supporting bullet points. Layout: Large Value (9xl accent, h3) → Title (2xl) → Accent border divider → Feature List (PricingFeatureList with checkmarks). Value and title at top, feature list at bottom with border separator. Best for metrics that need additional context or supporting details. Automatically switches between grid (1-4 items) and carousel (5+ items). Optional header with title, description, tag, and buttons.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Our Impact",
+        "minChars": 2,
+        "maxChars": 35
+      },
+      "description": {
+        "required": true,
+        "example": "Key metrics that showcase our growth",
+        "minChars": 5,
+        "maxChars": 250
+      },
+      "tag": {
+        "required": false,
+        "example": "Stats",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "metricRules": {
+      "id": {
+        "required": true,
+        "example": "1",
+        "minChars": 1,
+        "maxChars": 20
+      },
+      "value": {
+        "required": true,
+        "example": "15+",
+        "minChars": 1,
+        "maxChars": 10,
+        "note": "Large metric value displayed at top of card in accent color"
+      },
+      "title": {
+        "required": true,
+        "example": "Years in business consulting",
+        "minChars": 5,
+        "maxChars": 60,
+        "note": "Metric description displayed below value"
+      },
+      "items": {
+        "required": true,
+        "example": "['8+ industries served', '5+ countries reached']",
+        "minItems": 1,
+        "maxItems": 5,
+        "note": "Array of supporting bullet points displayed with checkmarks"
+      }
+    }
+  },
+  "propsSchema": {
+    "metrics": "Array<{ id: string, value: string, title: string, items: string[] }>",
+    "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d'",
+    "uniformGridCustomHeightClasses?": "string",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Metrics section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+    "textBoxTitleImageClassName?": "string - For styling images in inline-image layout",
+    "textBoxDescriptionClassName?": "string",
+    "valueClassName?": "string - For styling the large metric value",
+    "metricTitleClassName?": "string - For styling the metric title text",
+    "featuresClassName?": "string - For styling the PricingFeatureList container",
+    "featureItemClassName?": "string - For styling individual feature items",
+    "gridClassName?": "string",
+    "carouselClassName?": "string",
+    "controlsClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string"
+  },
+  "usageExample": "<MetricCardSeven metrics={[{ id: '1', value: '15+', title: 'Years in business consulting', items: ['8+ industries served', '5+ countries reached'] }, { id: '2', value: '500+', title: 'Projects completed', items: ['98% client satisfaction', 'Award-winning designs'] }]} title=\"Our Impact\" description=\"Key metrics that showcase our growth\" textboxLayout=\"default\" animationType=\"slide-up\" useInvertedBackground={false} />",
+  "do": [
+    "Use for feature showcases",
+    "Use for capability displays",
+    "Use for pricing pages",
+    "Use for subscription tiers",
+    "Use for statistics displays",
+    "Use for achievement showcases",
+    "Requires metrics[]",
+    "Requires titleSegments?[]",
+    "Requires buttons?[]"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/MetricCardThree.json b/registry/components/MetricCardThree.json
new file mode 100644
index 0000000..a1a1307
--- /dev/null
+++ b/registry/components/MetricCardThree.json
@@ -0,0 +1,106 @@
+{
+  "name": "MetricCardThree",
+  "description": "Metric card with icon badge, title header, and large value display.",
+  "details": "Use for icon-led metric displays with clear categorization. Layout: Icon (primary-button, rounded-theme) + Title (xl text, on same row) → Large Value (7xl, bold, centered). Card has fixed height (h-60 2xl:h-70) with centered layout. Icon uses primary-button styling with text-background for contrast. All fields are required for visual consistency. Best for categorized statistics, feature metrics, or KPIs that need visual identification. Automatically switches between grid (1-4 items) and carousel (5+ items). Optional header with title, description, tag, and buttons.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Performance Metrics",
+        "minChars": 2,
+        "maxChars": 35
+      },
+      "description": {
+        "required": true,
+        "example": "Track your key performance indicators",
+        "minChars": 5,
+        "maxChars": 250
+      },
+      "tag": {
+        "required": false,
+        "example": "KPIs",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "metricRules": {
+      "id": {
+        "required": true,
+        "example": "1",
+        "minChars": 1,
+        "maxChars": 20
+      },
+      "icon": {
+        "required": true,
+        "example": "TrendingUp",
+        "note": "Lucide icon displayed in primary-button styled circular badge"
+      },
+      "title": {
+        "required": true,
+        "example": "Conversions",
+        "minChars": 2,
+        "maxChars": 30,
+        "note": "Metric category/label displayed next to icon"
+      },
+      "value": {
+        "required": true,
+        "example": "7,000+",
+        "minChars": 1,
+        "maxChars": 15,
+        "note": "Large metric value displayed below icon and title"
+      }
+    }
+  },
+  "propsSchema": {
+    "metrics": "Array<{ id: string, icon: LucideIcon, title: string, value: string }>",
+    "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d'",
+    "uniformGridCustomHeightClasses?": "string",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Metrics section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+    "textBoxTitleImageClassName?": "string - For styling images in inline-image layout",
+    "textBoxDescriptionClassName?": "string",
+    "iconContainerClassName?": "string",
+    "iconClassName?": "string",
+    "metricTitleClassName?": "string",
+    "valueClassName?": "string",
+    "gridClassName?": "string",
+    "carouselClassName?": "string",
+    "controlsClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string"
+  },
+  "usageExample": "<MetricCardThree metrics={[{ id: '1', icon: TrendingUp, title: 'Conversions', value: '7,000+' }, { id: '2', icon: Users, title: 'Active Users', value: '50,000+' }]} title=\"Performance Metrics\" description=\"See how we're making a difference\" textboxLayout=\"default\" animationType=\"slide-up\" useInvertedBackground={false} />",
+  "do": [
+    "Use for feature showcases",
+    "Use for capability displays",
+    "Use for statistics displays",
+    "Use for achievement showcases",
+    "Requires metrics[]",
+    "Requires titleSegments?[]",
+    "Requires buttons?[]"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/MetricCardTwo.json b/registry/components/MetricCardTwo.json
new file mode 100644
index 0000000..c7ea590
--- /dev/null
+++ b/registry/components/MetricCardTwo.json
@@ -0,0 +1,98 @@
+{
+  "name": "MetricCardTwo",
+  "description": "Simple metric card with large value and description text.",
+  "details": "Use for clean, minimal metric displays focused on readability. Layout: Large Value (9xl on mobile, 7xl on lg, bold) → Description (xl text). Card has fixed height (h-50 lg:h-60 2xl:h-70) with space-between layout for consistent vertical spacing. All fields are required for visual consistency. Best for dashboard statistics, simple KPI displays, or metric overviews where simplicity is key. Automatically switches between grid (1-4 items) and carousel (5+ items). Optional header with title, description, tag, and buttons.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Key Metrics",
+        "minChars": 2,
+        "maxChars": 35
+      },
+      "description": {
+        "required": true,
+        "example": "Performance indicators at a glance",
+        "minChars": 5,
+        "maxChars": 250
+      },
+      "tag": {
+        "required": false,
+        "example": "Stats",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "metricRules": {
+      "id": {
+        "required": true,
+        "example": "1",
+        "minChars": 1,
+        "maxChars": 20
+      },
+      "value": {
+        "required": true,
+        "example": "98%",
+        "minChars": 1,
+        "maxChars": 15,
+        "note": "Large metric value displayed prominently"
+      },
+      "description": {
+        "required": true,
+        "example": "Customer Satisfaction Rate",
+        "minChars": 5,
+        "maxChars": 100,
+        "note": "Metric label/description displayed below value"
+      }
+    }
+  },
+  "propsSchema": {
+    "metrics": "Array<{ id: string, value: string, description: string }>",
+    "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+    "gridVariant": "'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' (required)",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d'",
+    "uniformGridCustomHeightClasses?": "string",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Metrics section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+    "textBoxTitleImageClassName?": "string - For styling images in inline-image layout",
+    "textBoxDescriptionClassName?": "string",
+    "valueClassName?": "string",
+    "metricDescriptionClassName?": "string",
+    "gridClassName?": "string",
+    "carouselClassName?": "string",
+    "controlsClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string"
+  },
+  "usageExample": "<MetricCardTwo metrics={[{ id: '1', value: '98%', description: 'Customer Satisfaction Rate' }, { id: '2', value: '50K+', description: 'Active Users Worldwide' }]} title=\"Key Metrics\" description=\"See how we're making a difference\" gridVariant=\"uniform-all-items-equal\" textboxLayout=\"default\" animationType=\"slide-up\" useInvertedBackground={false} />",
+  "do": [
+    "Use for statistics displays",
+    "Use for achievement showcases",
+    "Requires metrics[]",
+    "Requires titleSegments?[]",
+    "Requires buttons?[]"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/MetricSplitMediaAbout.json b/registry/components/MetricSplitMediaAbout.json
new file mode 100644
index 0000000..0dd7df3
--- /dev/null
+++ b/registry/components/MetricSplitMediaAbout.json
@@ -0,0 +1,82 @@
+{
+  "name": "MetricSplitMediaAbout",
+  "description": "Split-layout about section with text, metrics cards, and media in a 2-column grid.",
+  "details": "Use for case study or results-focused about sections. Left column displays tag, title, description, and up to 2 metric cards. Right column displays image or video. Metrics show large value and title. Supports inverted background mode for visual contrast.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "We help automate what matters most",
+        "minChars": 10,
+        "maxChars": 100
+      },
+      "description": {
+        "required": true,
+        "example": "Hamilton, a growing e-commerce business, was overwhelmed by repetitive tasks. We built custom automation that integrated with their tools.",
+        "minChars": 20,
+        "maxChars": 500
+      },
+      "tag": {
+        "required": false,
+        "example": "Case study",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "metricRules": {
+      "minMetrics": 1,
+      "maxMetrics": 2,
+      "structure": {
+        "value": "string - Large metric value (required, e.g., '50+', '40%', '10x')",
+        "title": "string - Metric label/title (required, e.g., 'Hours saved every month')"
+      },
+      "note": "Provide 1-2 metrics for optimal layout. Grid displays 1 metric as single column, 2 metrics as 2 columns on desktop."
+    }
+  },
+  "propsSchema": {
+    "title": "string",
+    "description": "string",
+    "metrics": "Array<{ value: string, title: string }>",
+    "useInvertedBackground": "boolean",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "imageSrc?": "string",
+    "videoSrc?": "string",
+    "imageAlt?": "string",
+    "videoAriaLabel?": "string (default: 'About section video')",
+    "mediaBadge?": "{ text: string, avatarSrc?: string, avatarAlt?: string, className?: string }",
+    "mediaAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "metricsAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "ariaLabel?": "string (default: 'About section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "gridClassName?": "string",
+    "leftColumnClassName?": "string",
+    "rightColumnClassName?": "string",
+    "textBoxClassName?": "string",
+    "titleClassName?": "string",
+    "descriptionClassName?": "string",
+    "tagClassName?": "string",
+    "metricsContainerClassName?": "string",
+    "metricCardClassName?": "string",
+    "metricValueClassName?": "string",
+    "metricTitleClassName?": "string",
+    "mediaWrapperClassName?": "string",
+    "imageClassName?": "string"
+  },
+  "usageExample": "// Wrap in ThemeProvider\nimport { Sparkles } from 'lucide-react';\n\n<ThemeProvider defaultButtonVariant=\"text-stagger\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"rounded\" cardStyle=\"solid\" primaryButtonStyle=\"gradient\" secondaryButtonStyle=\"glass\">\n  <MetricSplitMediaAbout\n    tag=\"Case study\"\n    tagIcon={Sparkles}\n    title=\"We help automate what matters most\"\n    description=\"Hamilton, a growing e-commerce business, was overwhelmed by repetitive order processing. We built custom automation that integrated seamlessly with their existing tools.\"\n    metrics={[{ value: '50+', title: 'Hours saved every month' }, { value: '40%', title: 'Reduction in manual work' }]}\n    imageSrc=\"/placeholders/placeholder.jpg\"\n    imageAlt=\"Case study image\"\n    useInvertedBackground={false}\n  />\n</ThemeProvider>",
+  "do": [
+    "Use for about pages",
+    "Use for company information",
+    "Use for statistics displays",
+    "Use for achievement showcases",
+    "Requires metrics[]"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/NavbarLayoutFloatingInline.json b/registry/components/NavbarLayoutFloatingInline.json
new file mode 100644
index 0000000..cbd20a6
--- /dev/null
+++ b/registry/components/NavbarLayoutFloatingInline.json
@@ -0,0 +1,78 @@
+{
+  "name": "NavbarLayoutFloatingInline",
+  "description": "Floating inline navbar with centered links, left-aligned logo, right-aligned CTA button, and optional load animation.",
+  "details": "Use for desktop-focused layouts where navigation is always visible. The navbar floats with rounded edges, logo sits on the left, links are inline in the center, and an optional CTA button appears on the right. When animateOnLoad is enabled, the navbar slides down from top, expands to full width, and nav links fade in with staggered timing.",
+  "constraints": {
+    "minLinks": 3,
+    "maxLinks": 6,
+    "preferredCount": 4,
+    "brandRules": {
+      "required": false,
+      "minChars": 2,
+      "maxChars": 20,
+      "example": "Webild",
+      "fallbackBehavior": "Shows brandName text"
+    },
+    "buttonRules": {
+      "text": {
+        "required": true,
+        "minChars": 2,
+        "maxChars": 24,
+        "example": "Get Started"
+      },
+      "href": {
+        "required": false,
+        "format": "url | section-id",
+        "example": "https://webild.io"
+      },
+      "onClick": {
+        "required": false,
+        "note": "Optional click handler"
+      }
+    },
+    "linkRules": {
+      "name": {
+        "required": true,
+        "minChars": 2,
+        "maxChars": 15,
+        "example": "About"
+      },
+      "id": {
+        "required": true,
+        "format": "section-id | url",
+        "examples": [
+          "about",
+          "services",
+          "https://github.com",
+          "www.example.com"
+        ],
+        "behavior": "Internal IDs scroll to section, URLs open in new tab"
+      }
+    }
+  },
+  "propsSchema": {
+    "navItems": "Array<{name: string, id: string}>",
+    "logoSrc?": "string",
+    "logoAlt?": "string",
+    "brandName?": "string (default: 'Webild')",
+    "button": "{text: string, onClick?: () => void, href?: string}",
+    "animateOnLoad?": "boolean (default: true)",
+    "className?": "string (default: '')",
+    "logoClassName?": "string (default: '')",
+    "logoImageClassName?": "string (default: '')",
+    "navItemClassName?": "string (default: '')",
+    "buttonClassName?": "string (default: '')",
+    "buttonTextClassName?": "string (default: '')"
+  },
+  "usageExample": "<NavbarLayoutFloatingInline />",
+  "do": [
+    "Use for general use",
+    "Requires navItems[]"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/NavbarLayoutFloatingOverlay.json b/registry/components/NavbarLayoutFloatingOverlay.json
new file mode 100644
index 0000000..ae765b7
--- /dev/null
+++ b/registry/components/NavbarLayoutFloatingOverlay.json
@@ -0,0 +1,76 @@
+{
+  "name": "NavbarLayoutFloatingOverlay",
+  "description": "Floating rounded navbar with right‑side CTA and a circular menu button. Clicking the button opens a rounded overlay panel with the site menu.",
+  "details": "Use for minimalist headers where the primary navigation lives in an overlay. Default state shows logo at left, optional CTA chip and a menu icon at right. The overlay slides in and lists links vertically with an optional title and close control.",
+  "constraints": {
+    "minLinks": 2,
+    "maxLinks": 8,
+    "preferredCount": 5,
+    "brandRules": {
+      "required": false,
+      "minChars": 2,
+      "maxChars": 20,
+      "example": "Webild",
+      "fallbackBehavior": "Shows brandName text"
+    },
+    "buttonRules": {
+      "text": {
+        "required": true,
+        "minChars": 2,
+        "maxChars": 24,
+        "example": "Get Started"
+      },
+      "href": {
+        "required": false,
+        "format": "url | section-id",
+        "example": "https://webild.io"
+      },
+      "onClick": {
+        "required": false,
+        "note": "Optional click handler"
+      }
+    },
+    "linkRules": {
+      "name": {
+        "required": true,
+        "minChars": 2,
+        "maxChars": 15,
+        "example": "About"
+      },
+      "id": {
+        "required": true,
+        "format": "section-id | url",
+        "examples": [
+          "about",
+          "services",
+          "https://github.com",
+          "www.example.com"
+        ],
+        "behavior": "Internal IDs scroll to section, URLs open in new tab"
+      }
+    }
+  },
+  "propsSchema": {
+    "navItems": "Array<{name: string, id: string}>",
+    "logoSrc?": "string",
+    "logoAlt?": "string",
+    "className?": "string",
+    "brandName?": "string (default: 'Webild')",
+    "button?": "{text: string, onClick?: () => void, href?: string}",
+    "logoClassName?": "string (default: '')",
+    "logoImageClassName?": "string (default: '')",
+    "buttonClassName?": "string (default: '')",
+    "buttonTextClassName?": "string (default: '')"
+  },
+  "usageExample": "<NavbarLayoutFloatingOverlay />",
+  "do": [
+    "Use for general use",
+    "Requires navItems[]"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/NavbarStyleApple.json b/registry/components/NavbarStyleApple.json
new file mode 100644
index 0000000..0128167
--- /dev/null
+++ b/registry/components/NavbarStyleApple.json
@@ -0,0 +1,52 @@
+{
+  "name": "NavbarStyleApple",
+  "description": "Minimal Apple-style navigation bar with brand/logo on the left and inline navigation links aligned right.",
+  "details": "Use for clean, product-focused websites where the navbar should be subtle and not distract from main content. Keeps typography and spacing minimal with a focus on elegance and clarity. Supports both internal anchor links (scrolls to section) and external URLs (opens in new tab).",
+  "constraints": {
+    "minLinks": 3,
+    "maxLinks": 7,
+    "preferredCount": 5,
+    "brandRules": {
+      "required": false,
+      "minChars": 2,
+      "maxChars": 20,
+      "example": "Webild",
+      "fallbackBehavior": "Shows brandName text"
+    },
+    "linkRules": {
+      "name": {
+        "required": true,
+        "minChars": 2,
+        "maxChars": 15,
+        "example": "About"
+      },
+      "id": {
+        "required": true,
+        "format": "section-id | url",
+        "examples": [
+          "about",
+          "services",
+          "https://github.com",
+          "www.example.com"
+        ],
+        "behavior": "Internal IDs scroll to section, URLs open in new tab"
+      }
+    }
+  },
+  "propsSchema": {
+    "navItems": "Array<{name: string, id: string}>",
+    "brandName?": "string (default: 'Webild')"
+  },
+  "usageExample": "<NavbarStyleApple />",
+  "do": [
+    "Use for product catalogs",
+    "Use for e-commerce",
+    "Requires navItems[]"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/NavbarStyleCentered.json b/registry/components/NavbarStyleCentered.json
new file mode 100644
index 0000000..b5a6019
--- /dev/null
+++ b/registry/components/NavbarStyleCentered.json
@@ -0,0 +1,78 @@
+{
+  "name": "NavbarStyleCentered",
+  "description": "Centered dropdown navigation with animated expand/collapse and staggered link reveals.",
+  "details": "Use for compact, elegant navigation that stays out of the way until needed. Features a centered floating card with hamburger toggle, grid-based expand animation for the dropdown, staggered slide-up animations for links with arrow icons, animated separators, and a full-width CTA button at the bottom. Supports Lenis smooth scrolling.",
+  "constraints": {
+    "minLinks": 3,
+    "maxLinks": 6,
+    "preferredCount": 5,
+    "brandRules": {
+      "required": false,
+      "minChars": 2,
+      "maxChars": 20,
+      "example": "Webild",
+      "fallbackBehavior": "Shows brandName text"
+    },
+    "buttonRules": {
+      "text": {
+        "required": true,
+        "minChars": 2,
+        "maxChars": 15,
+        "example": "Get Started"
+      },
+      "href": {
+        "required": false,
+        "format": "url | section-id",
+        "example": "contact"
+      },
+      "onClick": {
+        "required": false,
+        "note": "Optional click handler"
+      }
+    },
+    "linkRules": {
+      "name": {
+        "required": true,
+        "minChars": 2,
+        "maxChars": 15,
+        "example": "About"
+      },
+      "id": {
+        "required": true,
+        "format": "section-id | url",
+        "examples": [
+          "about",
+          "services",
+          "https://github.com",
+          "www.example.com"
+        ],
+        "behavior": "Internal IDs scroll to section, URLs open in new tab"
+      }
+    }
+  },
+  "propsSchema": {
+    "navItems": "Array<{name: string, id: string}>",
+    "button?": "{text: string, onClick?: () => void, href?: string}",
+    "topBarButton?": "{text: string, onClick?: () => void, href?: string}",
+    "logoSrc?": "string",
+    "logoAlt?": "string",
+    "brandName?": "string (default: 'Webild')",
+    "className?": "string (default: '')",
+    "logoClassName?": "string (default: '')",
+    "logoImageClassName?": "string (default: '')"
+  },
+  "usageExample": "<NavbarStyleCentered navItems={[{name: 'Home', id: 'home'}, {name: 'About', id: 'about'}, {name: 'Services', id: 'services'}, {name: 'Blog', id: 'blog'}, {name: 'Contact', id: 'contact'}]} button={{text: 'Get Started', href: 'contact'}} />",
+  "do": [
+    "Use for feature showcases",
+    "Use for capability displays",
+    "Requires navItems[]"
+  ],
+  "dont": [
+    "Do not use more than 4 items"
+  ],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/NavbarStyleFullscreen.json b/registry/components/NavbarStyleFullscreen.json
new file mode 100644
index 0000000..f74286d
--- /dev/null
+++ b/registry/components/NavbarStyleFullscreen.json
@@ -0,0 +1,76 @@
+{
+  "name": "NavbarStyleFullscreen",
+  "description": "Fullscreen overlay navigation with animated menu reveal and staggered link animations.",
+  "details": "Use for immersive, design-focused websites where the navigation takes over the entire screen. Features a hamburger button that transforms into an X, clip-path reveal animation for the menu panel, staggered link entrance animations, and a hover effect that dims sibling links. Supports Lenis smooth scrolling.",
+  "constraints": {
+    "minLinks": 3,
+    "maxLinks": 5,
+    "preferredCount": 5,
+    "brandRules": {
+      "required": false,
+      "minChars": 2,
+      "maxChars": 20,
+      "example": "Webild",
+      "fallbackBehavior": "Shows brandName text"
+    },
+    "linkRules": {
+      "name": {
+        "required": true,
+        "minChars": 2,
+        "maxChars": 15,
+        "example": "About"
+      },
+      "id": {
+        "required": true,
+        "format": "section-id | url",
+        "examples": [
+          "about",
+          "services",
+          "https://github.com",
+          "www.example.com"
+        ],
+        "behavior": "Internal IDs scroll to section, URLs open in new tab"
+      }
+    },
+    "bottomTextRules": {
+      "bottomLeftText": {
+        "required": false,
+        "minChars": 2,
+        "maxChars": 30,
+        "example": "Global Community"
+      },
+      "bottomRightText": {
+        "required": false,
+        "minChars": 2,
+        "maxChars": 30,
+        "example": "hello@example.com"
+      }
+    }
+  },
+  "propsSchema": {
+    "navItems": "Array<{name: string, id: string}>",
+    "logoSrc?": "string",
+    "logoAlt?": "string",
+    "brandName?": "string (default: 'Webild')",
+    "bottomLeftText?": "string (default: 'Global Community')",
+    "bottomRightText?": "string (default: 'hello@example.com')",
+    "topBarClassName?": "string (default: '')",
+    "button?": "{text: string, onClick?: () => void, href?: string}",
+    "buttonClassName?": "string (default: '')",
+    "buttonTextClassName?": "string (default: '')",
+    "logoClassName?": "string (default: '')",
+    "logoImageClassName?": "string (default: '')"
+  },
+  "usageExample": "<NavbarStyleFullscreen navItems={[{name: 'Home', id: 'home'}, {name: 'About', id: 'about'}, {name: 'Services', id: 'services'}, {name: 'Blog', id: 'blog'}, {name: 'Contact', id: 'contact'}]} bottomLeftText=\"Global Community\" bottomRightText=\"hello@example.com\" />",
+  "do": [
+    "Use for feature showcases",
+    "Use for capability displays",
+    "Requires navItems[]"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/PlainBackground.json b/registry/components/PlainBackground.json
new file mode 100644
index 0000000..ffe0b04
--- /dev/null
+++ b/registry/components/PlainBackground.json
@@ -0,0 +1,19 @@
+{
+  "name": "PlainBackground",
+  "description": "Simple solid background using theme background color.",
+  "details": "Use for clean, minimal layouts with no visual distractions. Provides a fixed background div with bg-background theme color.",
+  "constraints": {},
+  "propsSchema": {
+    "className?": "string"
+  },
+  "usageExample": "<PlainBackground />",
+  "do": [
+    "Use for general use"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/PricingCardEight.json b/registry/components/PricingCardEight.json
new file mode 100644
index 0000000..0932d16
--- /dev/null
+++ b/registry/components/PricingCardEight.json
@@ -0,0 +1,108 @@
+{
+  "name": "PricingCardEight",
+  "description": "Pricing card with nested card layout featuring badge, price, buttons in secondary-button container, and feature list below.",
+  "details": "Use for pricing with prominent CTA buttons and clear visual hierarchy. Layout: Outer card container with inner secondary-button section containing Badge → Price → Subtitle → Buttons (max 2, full-width), followed by feature list outside the inner container. The nested card design creates visual depth and draws attention to the pricing and action area. Uses CardStack with uniform-all-items-equal grid. Perfect for subscription tiers or service packages.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Choose Your Plan",
+        "minChars": 2,
+        "maxChars": 50
+      },
+      "description": {
+        "required": true,
+        "example": "Select the perfect plan for your needs",
+        "minChars": 10,
+        "maxChars": 200
+      },
+      "tag": {
+        "required": false,
+        "example": "Pricing",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "planRules": {
+      "minPlans": 1,
+      "maxPlans": 6,
+      "structure": {
+        "id": "string - Unique identifier (required)",
+        "badge": "string - Badge text, e.g., 'Most Popular' (required)",
+        "badgeIcon": "LucideIcon - Optional icon for badge",
+        "price": "string - Price display, e.g., '$29/mo' (required)",
+        "subtitle": "string - Subtitle below price, e.g., 'Perfect for small teams' (required)",
+        "buttons": "Array<{text: string, onClick?: () => void, href?: string}> - Action buttons, max 2 (required)",
+        "features": "string[] - List of features included (required)"
+      },
+      "note": "Each plan displays in a nested card layout with secondary-button styling for the top section."
+    },
+    "buttonRules": {
+      "maxButtons": 2,
+      "structure": {
+        "text": "string - Button label (required)",
+        "href": "string - Link destination (optional)",
+        "onClick": "() => void - Click handler (optional)",
+        "props": "Partial<ButtonPropsForVariant> - Additional button props (optional)"
+      },
+      "note": "Buttons render full-width inside secondary-button container. Button variant controlled by ThemeProvider."
+    }
+  },
+  "propsSchema": {
+    "plans": "Array<{ id: string, badge: string, badgeIcon?: LucideIcon, price: string, subtitle: string, buttons: Array<{text: string, onClick?: () => void, href?: string}>, features: string[] }>",
+    "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+    "uniformGridCustomHeightClasses?": "string",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal'",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image'",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Pricing section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string",
+    "textBoxTitleImageClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "badgeClassName?": "string",
+    "priceClassName?": "string",
+    "subtitleClassName?": "string",
+    "planButtonContainerClassName?": "string",
+    "planButtonClassName?": "string",
+    "featuresClassName?": "string",
+    "featureItemClassName?": "string",
+    "gridClassName?": "string",
+    "carouselClassName?": "string",
+    "controlsClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string"
+  },
+  "usageExample": "<PricingCardEight plans={[{ id: '1', badge: 'Most Popular', price: '$29/mo', subtitle: 'Perfect for small teams', buttons: [{ text: 'Get Started', href: '/signup' }], features: ['Up to 10 team members', '100GB storage', 'Priority support'] }]} animationType=\"slide-up\" title=\"Choose Your Plan\" description=\"Select the perfect plan for your needs\" textboxLayout=\"default\" useInvertedBackground={false} />",
+  "do": [
+    "Use for feature showcases",
+    "Use for capability displays",
+    "Use for pricing pages",
+    "Use for subscription tiers",
+    "Requires plans[]",
+    "Requires titleSegments?[]",
+    "Requires buttons?[]"
+  ],
+  "dont": [
+    "Do not use more than 4 items"
+  ],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/PricingCardFive.json b/registry/components/PricingCardFive.json
new file mode 100644
index 0000000..c0de34b
--- /dev/null
+++ b/registry/components/PricingCardFive.json
@@ -0,0 +1,132 @@
+{
+  "name": "PricingCardFive",
+  "description": "Vertical stack pricing cards with split layout showing plan details and feature checklist.",
+  "details": "Use for showcasing pricing plans with detailed feature lists. Uses CardList with variant system for card or border layouts. Layout: Optional TextBox Header → Vertical Stack of Pricing Cards. Each card has horizontal split (md breakpoint): Left side (50%): Tag, Price with period, Description, and CTA Button. Right side (50%): Features title and checklist with checkmark icons. Card variant: Items wrapped in cards with full padding (p-6 md:p-15) and mobile divider line. Border variant: Items separated by accent divider lines with bottom padding (pb-6 md:pb-10), no mobile divider. Text colors conditional on variant: border uses useInvertedBackground directly, card uses shouldUseLightText. Best for service-based pricing, retainer plans, or subscription tiers where feature lists are important.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Simple, Transparent Pricing",
+        "minChars": 2,
+        "maxChars": 50
+      },
+      "description": {
+        "required": true,
+        "example": "Choose the plan that fits your needs",
+        "minChars": 5,
+        "maxChars": 300
+      },
+      "tag": {
+        "required": false,
+        "example": "Pricing",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "planRules": {
+      "id": {
+        "required": true,
+        "example": "monthly-retainer",
+        "minChars": 1,
+        "maxChars": 30
+      },
+      "tag": {
+        "required": true,
+        "example": "Monthly Retainer Plan",
+        "minChars": 2,
+        "maxChars": 40
+      },
+      "price": {
+        "required": true,
+        "example": "$5,000",
+        "minChars": 1,
+        "maxChars": 20
+      },
+      "period": {
+        "required": true,
+        "example": "/m",
+        "minChars": 1,
+        "maxChars": 10
+      },
+      "description": {
+        "required": true,
+        "example": "Scale design, no-code builds & copy quicker than recruiting in-house.",
+        "minChars": 10,
+        "maxChars": 200
+      },
+      "button": {
+        "required": true,
+        "note": "ButtonConfig with text and href or onClick"
+      },
+      "featuresTitle": {
+        "required": true,
+        "example": "What's Included:",
+        "minChars": 2,
+        "maxChars": 50
+      },
+      "features": {
+        "required": true,
+        "example": [
+          "Unlimited design requests",
+          "48-hour turnaround"
+        ],
+        "note": "Array of feature strings displayed as checklist"
+      }
+    }
+  },
+  "propsSchema": {
+    "plans": "Array<{ id: string, tag: string, tagIcon?: LucideIcon, price: string, period: string, description: string, button: {text: string, onClick?: () => void, href?: string}, featuresTitle: string, features: string[] }>",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required)",
+    "useInvertedBackground": "boolean",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "ariaLabel?": "string (default: 'Pricing section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string",
+    "titleImageWrapperClassName?": "string",
+    "titleImageClassName?": "string",
+    "cardContentClassName?": "string",
+    "planTagClassName?": "string",
+    "planPriceClassName?": "string",
+    "planPeriodClassName?": "string",
+    "planDescriptionClassName?": "string",
+    "planButtonClassName?": "string",
+    "planButtonTextClassName?": "string",
+    "featuresTitleClassName?": "string",
+    "featuresListClassName?": "string",
+    "featureItemClassName?": "string",
+    "featureIconClassName?": "string",
+    "featureTextClassName?": "string"
+  },
+  "usageExample": "<PricingCardFive plans={[{ id: 'monthly', tag: 'Monthly Retainer Plan', price: '$5,000', period: '/m', description: 'Scale design quicker than recruiting in-house.', button: { text: 'Schedule a call', href: '#contact' }, featuresTitle: \"What's Included:\", features: ['Unlimited design requests', '48-hour turnaround', 'Dedicated project manager'] }]} animationType=\"slide-up\" title=\"Simple Pricing\" description=\"Choose the plan that fits your needs\" textboxLayout=\"default\" useInvertedBackground={false} />",
+  "do": [
+    "Use for feature showcases",
+    "Use for capability displays",
+    "Use for pricing pages",
+    "Use for subscription tiers",
+    "Requires plans[]",
+    "Requires titleSegments?[]",
+    "Requires buttons?[]"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/PricingCardNine.json b/registry/components/PricingCardNine.json
new file mode 100644
index 0000000..707628f
--- /dev/null
+++ b/registry/components/PricingCardNine.json
@@ -0,0 +1,139 @@
+{
+  "name": "PricingCardNine",
+  "description": "Pricing cards with image, price tag, title, feature checklist, and CTA button.",
+  "details": "Use for showcasing pricing plans with visual imagery. Uses CardList with variant system for card or border layouts. Layout: Optional TextBox Header → Vertical Stack of Pricing Cards. Each card has horizontal split (md breakpoint): Left side (50%): Plan image with rounded corners. Right side (50%): Price/period tag, Plan title, Feature checklist with checkmark icons, CTA Button. Card variant: Items wrapped in cards with padding (p-4 md:p-6). Border variant: Items separated by accent divider lines with no bottom padding. Text colors conditional on variant using shouldUseLightText. Best for service-based pricing, coaching plans, or subscription tiers where imagery helps convey value.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Coaching Plans",
+        "minChars": 2,
+        "maxChars": 50
+      },
+      "description": {
+        "required": true,
+        "example": "Choose the plan that fits your goals",
+        "minChars": 5,
+        "maxChars": 300
+      },
+      "tag": {
+        "required": false,
+        "example": "Pricing",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "planRules": {
+      "id": {
+        "required": true,
+        "example": "basic",
+        "minChars": 1,
+        "maxChars": 30
+      },
+      "title": {
+        "required": true,
+        "example": "Basic",
+        "minChars": 2,
+        "maxChars": 40
+      },
+      "price": {
+        "required": true,
+        "example": "$59",
+        "minChars": 1,
+        "maxChars": 20
+      },
+      "period": {
+        "required": true,
+        "example": "/month",
+        "minChars": 1,
+        "maxChars": 10
+      },
+      "imageSrc": {
+        "required": false,
+        "example": "/images/coaching-basic.jpg",
+        "note": "Image for the plan card Either imageSrc or videoSrc should be provided. Image is recommended if no videoSrc."
+      },
+      "videoSrc": {
+        "required": false,
+        "example": "/videos/coaching-basic.mp4",
+        "note": "Video for the plan card (alternative to imageSrc)"
+      },
+      "imageAlt": {
+        "required": false,
+        "example": "Basic plan preview",
+        "note": "Alt text for image (defaults to plan title if not provided)"
+      },
+      "videoAriaLabel": {
+        "required": false,
+        "example": "Basic plan video",
+        "note": "Aria label for video (defaults to plan title if not provided)"
+      },
+      "button": {
+        "required": true,
+        "note": "ButtonConfig with text and href or onClick"
+      },
+      "features": {
+        "required": true,
+        "example": [
+          "Free initial consultation",
+          "Weekly checking"
+        ],
+        "note": "Array of feature strings displayed as checklist"
+      }
+    }
+  },
+  "propsSchema": {
+    "plans": "Array<{ id: string, title: string, price: string, period: string, features: string[], button: {text: string, onClick?: () => void, href?: string}, imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }>",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required)",
+    "useInvertedBackground": "boolean",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "ariaLabel?": "string (default: 'Pricing section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string",
+    "titleImageWrapperClassName?": "string",
+    "titleImageClassName?": "string",
+    "cardContentClassName?": "string",
+    "planImageWrapperClassName?": "string",
+    "planImageClassName?": "string",
+    "planTitleClassName?": "string",
+    "planPriceClassName?": "string",
+    "planButtonClassName?": "string",
+    "planButtonTextClassName?": "string",
+    "featuresListClassName?": "string",
+    "featureItemClassName?": "string",
+    "featureIconClassName?": "string",
+    "featureTextClassName?": "string"
+  },
+  "usageExample": "<PricingCardNine plans={[{ id: 'basic', title: 'Basic', price: '$59', period: '/month', imageSrc: '/images/plan-basic.jpg', button: { text: 'Get in touch', href: '#contact' }, features: ['Free initial consultation', '1x per 2 weeks training plan update', 'Weekly checking'] }]} animationType=\"slide-up\" title=\"Coaching Plans\" description=\"Choose the plan that fits your goals\" textboxLayout=\"default\" useInvertedBackground={false} />",
+  "do": [
+    "Use for feature showcases",
+    "Use for capability displays",
+    "Use for pricing pages",
+    "Use for subscription tiers",
+    "Requires plans[]",
+    "Requires titleSegments?[]",
+    "Requires buttons?[]"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/PricingCardOne.json b/registry/components/PricingCardOne.json
new file mode 100644
index 0000000..0d56c5f
--- /dev/null
+++ b/registry/components/PricingCardOne.json
@@ -0,0 +1,122 @@
+{
+  "name": "PricingCardOne",
+  "description": "Pricing card with badge, price, subtitle, and feature list with checkmarks.",
+  "details": "Use for displaying pricing plans with clear feature breakdowns. Layout: Badge (with optional icon) → Price (large, bold) → Subtitle (plan description) → Divider → Feature List (with check icons). All cards must have badge, subtitle, and features for visual consistency. Best for pricing, subscription plans, or tiered services. Automatically switches between grid (1-4 items) and carousel (5+ items). Optional header with title, description, tag, and buttons.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Choose Your Plan",
+        "minChars": 2,
+        "maxChars": 35
+      },
+      "description": {
+        "required": true,
+        "example": "Select the perfect plan for your needs",
+        "minChars": 5,
+        "maxChars": 250
+      },
+      "tag": {
+        "required": false,
+        "example": "Pricing",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "pricingPlanRules": {
+      "id": {
+        "required": true,
+        "example": "1",
+        "minChars": 1,
+        "maxChars": 20
+      },
+      "badge": {
+        "required": true,
+        "example": "Most Popular",
+        "minChars": 2,
+        "maxChars": 30,
+        "note": "Required for visual consistency across all cards"
+      },
+      "price": {
+        "required": true,
+        "example": "$29/mo",
+        "minChars": 1,
+        "maxChars": 20
+      },
+      "subtitle": {
+        "required": true,
+        "example": "Perfect for small teams",
+        "minChars": 5,
+        "maxChars": 100,
+        "note": "Required for visual consistency across all cards"
+      },
+      "features": {
+        "required": true,
+        "example": [
+          "Up to 10 team members",
+          "100GB storage",
+          "Priority support"
+        ],
+        "note": "Array of feature strings, required for visual consistency"
+      },
+      "badgeIcon": {
+        "required": false,
+        "example": "Sparkles",
+        "note": "Optional Lucide icon to display next to badge"
+      }
+    }
+  },
+  "propsSchema": {
+    "plans": "Array<{ id: string, badge: string, badgeIcon?: LucideIcon, price: string, subtitle: string, features: string[] }>",
+    "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+    "uniformGridCustomHeightClasses?": "string",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d'",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Pricing section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+    "textBoxTitleImageClassName?": "string - For styling images in inline-image layout",
+    "textBoxDescriptionClassName?": "string",
+    "badgeClassName?": "string",
+    "priceClassName?": "string",
+    "subtitleClassName?": "string",
+    "featuresClassName?": "string",
+    "featureItemClassName?": "string",
+    "gridClassName?": "string",
+    "carouselClassName?": "string",
+    "controlsClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string"
+  },
+  "usageExample": "<PricingCardOne plans={[{ id: '1', badge: 'Most Popular', price: '$29/mo', subtitle: 'Perfect for small teams', features: ['Up to 10 team members', '100GB storage', 'Priority support'] }]} title=\"Choose Your Plan\" description=\"Find the perfect plan for your needs\" textboxLayout=\"default\" animationType=\"slide-up\" useInvertedBackground={false} />",
+  "do": [
+    "Use for feature showcases",
+    "Use for capability displays",
+    "Use for pricing pages",
+    "Use for subscription tiers",
+    "Requires plans[]",
+    "Requires titleSegments?[]",
+    "Requires buttons?[]"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/PricingCardThree.json b/registry/components/PricingCardThree.json
new file mode 100644
index 0000000..2343376
--- /dev/null
+++ b/registry/components/PricingCardThree.json
@@ -0,0 +1,135 @@
+{
+  "name": "PricingCardThree",
+  "description": "Pricing card with optional floating badge, price, plan name, two CTA buttons, and feature list.",
+  "details": "Use for pricing plans with prominent badge callouts (e.g., 'Most popular plan'). Layout: Optional Badge (floats above card) → Price (large, bold, centered) → Plan Name (centered) → Divider → Feature List (with check icons) → Two CTA Buttons (full-width, primary/secondary styling). Badge can appear on ANY plan - always exists but uses visible/invisible for consistent spacing. Cards with badge have rounded-t-none (connects to badge), cards without badge have normal rounding. Buttons use primary/secondary logic (first button = primary-button, second = secondary-button) controlled by ThemeProvider. Best for highlighting popular or recommended plans. Automatically switches between grid (1-4 items) and carousel (5+ items). Optional header with title, description, tag, and buttons.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Choose Your Plan",
+        "minChars": 2,
+        "maxChars": 35
+      },
+      "description": {
+        "required": true,
+        "example": "Select the perfect plan for your needs",
+        "minChars": 5,
+        "maxChars": 250
+      },
+      "tag": {
+        "required": false,
+        "example": "Pricing",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "pricingPlanRules": {
+      "id": {
+        "required": true,
+        "example": "1",
+        "minChars": 1,
+        "maxChars": 20
+      },
+      "badge": {
+        "required": false,
+        "example": "Most popular plan",
+        "minChars": 2,
+        "maxChars": 40,
+        "note": "Optional badge that floats above the card. Can be on ANY plan. Always exists but uses visible/invisible for consistent spacing."
+      },
+      "badgeIcon": {
+        "required": false,
+        "example": "Sparkles",
+        "note": "Optional Lucide icon to display next to badge"
+      },
+      "price": {
+        "required": true,
+        "example": "$29/mo",
+        "minChars": 1,
+        "maxChars": 20
+      },
+      "name": {
+        "required": true,
+        "example": "Business plan",
+        "minChars": 2,
+        "maxChars": 50,
+        "note": "Plan name displayed below price"
+      },
+      "buttons": {
+        "required": true,
+        "maxButtons": 2,
+        "structure": {
+          "text": "string - Button label (required)",
+          "href": "string - Link destination (optional)",
+          "onClick": "() => void - Click handler (optional)",
+          "props": "Partial<ButtonPropsForVariant> - Additional button props (optional)"
+        },
+        "note": "First button (index 0) = primary-button, second (index 1) = secondary-button. Button variant controlled by ThemeProvider's defaultButtonVariant. Border radius controlled by ThemeProvider's borderRadius. All sections should be wrapped in a single ThemeProvider at the app/page level."
+      },
+      "features": {
+        "required": true,
+        "example": [
+          "Up to 10 team members",
+          "100GB storage",
+          "Priority support"
+        ],
+        "note": "Array of feature strings, required for visual consistency"
+      }
+    }
+  },
+  "propsSchema": {
+    "plans": "Array<{ id: string, badge?: string, badgeIcon?: LucideIcon, price: string, name: string, buttons: Array<{text: string, onClick?: () => void, href?: string}>, features: string[] }>",
+    "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+    "uniformGridCustomHeightClasses?": "string",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Pricing section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+    "textBoxTitleImageClassName?": "string - For styling images in inline-image layout",
+    "textBoxDescriptionClassName?": "string",
+    "badgeClassName?": "string",
+    "priceClassName?": "string",
+    "nameClassName?": "string",
+    "planButtonContainerClassName?": "string",
+    "planButtonClassName?": "string",
+    "featuresClassName?": "string",
+    "featureItemClassName?": "string",
+    "gridClassName?": "string",
+    "carouselClassName?": "string",
+    "controlsClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string"
+  },
+  "usageExample": "<PricingCardThree plans={[{ id: '1', price: '$10/mo', name: 'Basic plan', buttons: [{ text: 'Get started', onClick: () => console.log('clicked') }, { text: 'Chat to sales', onClick: () => console.log('chat') }], features: ['Up to 10 users', '20GB storage', 'Email support'] }, { id: '2', badge: 'Most popular plan', badgeIcon: Sparkles, price: '$20/mo', name: 'Business plan', buttons: [{ text: 'Get started', onClick: () => console.log('clicked') }, { text: 'Chat to sales', onClick: () => console.log('chat') }], features: ['Up to 20 users', '40GB storage', 'Priority support'] }]} title=\"Choose Your Plan\" description=\"Find the perfect plan for your needs\" textboxLayout=\"default\" animationType=\"slide-up\" useInvertedBackground={false} />",
+  "do": [
+    "Use for feature showcases",
+    "Use for capability displays",
+    "Use for pricing pages",
+    "Use for subscription tiers",
+    "Requires plans[]",
+    "Requires titleSegments?[]",
+    "Requires buttons?[]"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/PricingCardTwo.json b/registry/components/PricingCardTwo.json
new file mode 100644
index 0000000..b86ded8
--- /dev/null
+++ b/registry/components/PricingCardTwo.json
@@ -0,0 +1,135 @@
+{
+  "name": "PricingCardTwo",
+  "description": "Pricing card with badge, price, subtitle, two CTA buttons, and feature list with checkmarks.",
+  "details": "Use for pricing plans with direct call-to-action buttons for conversion. Layout: Badge (with optional icon) → Price (large, bold, centered) → Subtitle (plan description, centered) → Two CTA Buttons (full-width, primary/secondary styling) → Divider → Feature List (with check icons). All cards must have badge, subtitle, and features for visual consistency. Buttons use primary/secondary logic (first button = primary-button, second = secondary-button) controlled by ThemeProvider. Best for pricing, subscription plans, or tiered services requiring immediate action. Automatically switches between grid (1-4 items) and carousel (5+ items). Optional header with title, description, tag, and buttons.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Choose Your Plan",
+        "minChars": 2,
+        "maxChars": 35
+      },
+      "description": {
+        "required": true,
+        "example": "Select the perfect plan for your needs",
+        "minChars": 5,
+        "maxChars": 250
+      },
+      "tag": {
+        "required": false,
+        "example": "Pricing",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "pricingPlanRules": {
+      "id": {
+        "required": true,
+        "example": "1",
+        "minChars": 1,
+        "maxChars": 20
+      },
+      "badge": {
+        "required": true,
+        "example": "Business Plan",
+        "minChars": 2,
+        "maxChars": 30,
+        "note": "Required for visual consistency across all cards"
+      },
+      "price": {
+        "required": true,
+        "example": "$29/mo",
+        "minChars": 1,
+        "maxChars": 20
+      },
+      "subtitle": {
+        "required": true,
+        "example": "Perfect for small teams",
+        "minChars": 5,
+        "maxChars": 100,
+        "note": "Required for visual consistency across all cards"
+      },
+      "buttons": {
+        "required": true,
+        "maxButtons": 2,
+        "structure": {
+          "text": "string - Button label (required)",
+          "href": "string - Link destination (optional)",
+          "onClick": "() => void - Click handler (optional)",
+          "props": "Partial<ButtonPropsForVariant> - Additional button props (optional)"
+        },
+        "note": "First button (index 0) = primary-button, second (index 1) = secondary-button. Button variant controlled by ThemeProvider's defaultButtonVariant. Border radius controlled by ThemeProvider's borderRadius. All sections should be wrapped in a single ThemeProvider at the app/page level."
+      },
+      "features": {
+        "required": true,
+        "example": [
+          "Up to 10 team members",
+          "100GB storage",
+          "Priority support"
+        ],
+        "note": "Array of feature strings, required for visual consistency"
+      },
+      "badgeIcon": {
+        "required": false,
+        "example": "Sparkles",
+        "note": "Optional Lucide icon to display next to badge"
+      }
+    }
+  },
+  "propsSchema": {
+    "plans": "Array<{ id: string, badge: string, badgeIcon?: LucideIcon, price: string, subtitle: string, buttons: Array<{text: string, onClick?: () => void, href?: string}>, features: string[] }>",
+    "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+    "uniformGridCustomHeightClasses?": "string",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Pricing section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+    "textBoxTitleImageClassName?": "string - For styling images in inline-image layout",
+    "textBoxDescriptionClassName?": "string",
+    "badgeClassName?": "string",
+    "priceClassName?": "string",
+    "subtitleClassName?": "string",
+    "planButtonContainerClassName?": "string",
+    "planButtonClassName?": "string",
+    "featuresClassName?": "string",
+    "featureItemClassName?": "string",
+    "gridClassName?": "string",
+    "carouselClassName?": "string",
+    "controlsClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string"
+  },
+  "usageExample": "<PricingCardTwo plans={[{ id: '1', badge: 'Business Plan', price: '$29/mo', subtitle: 'Perfect for small teams', buttons: [{ text: 'Get Started', onClick: () => console.log('clicked') }, { text: 'Chat to Sales', onClick: () => console.log('chat') }], features: ['Up to 10 team members', '100GB storage', 'Priority support'] }]} title=\"Choose Your Plan\" description=\"Find the perfect plan for your needs\" textboxLayout=\"default\" animationType=\"slide-up\" useInvertedBackground={false} />",
+  "do": [
+    "Use for feature showcases",
+    "Use for capability displays",
+    "Use for pricing pages",
+    "Use for subscription tiers",
+    "Requires plans[]",
+    "Requires titleSegments?[]",
+    "Requires buttons?[]"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/ProductCardFour.json b/registry/components/ProductCardFour.json
new file mode 100644
index 0000000..399be23
--- /dev/null
+++ b/registry/components/ProductCardFour.json
@@ -0,0 +1,114 @@
+{
+  "name": "ProductCardFour",
+  "description": "E-commerce product card with name, variant description, and price in horizontal layout with favorite toggle.",
+  "details": "Use for fashion/apparel e-commerce with product variants. Card displays product image with favorite toggle at top. Below shows product name and variant description (e.g., 'Dark Grey  3 Colors') stacked vertically on left, with price aligned to top right. Clean, minimal layout ideal for clothing, accessories, and variant-heavy products. Automatically switches between grid (1-4 items) and carousel (5+ items) modes. Carousel offers auto-scroll or button controls (recommended: keep default buttons for better UX). Optional header with title, description, tag, and buttons. Header supports all textbox layouts (default, split, split-actions, split-description). Supports inverted background with shouldUseInvertedText utility for proper text color in cards.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Featured Products",
+        "minChars": 2,
+        "maxChars": 50
+      },
+      "description": {
+        "required": true,
+        "example": "Discover our latest collection of premium apparel",
+        "minChars": 5,
+        "maxChars": 200
+      },
+      "tag": {
+        "required": false,
+        "example": "New Arrivals",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "buttonRules": {
+      "maxButtons": 2,
+      "structure": {
+        "text": "string - Button label (required)",
+        "href": "string - Link destination (optional)",
+        "onClick": "() => void - Click handler (optional)",
+        "props": "Partial<ButtonPropsForVariant> - Additional button props (optional)"
+      },
+      "note": "Button variant controlled by ThemeProvider's defaultButtonVariant. All sections should be wrapped in a single ThemeProvider at the app/page level."
+    },
+    "productCardRules": {
+      "name": {
+        "required": true,
+        "example": "Represent X Puma Graphic T-Shirt",
+        "minChars": 2,
+        "maxChars": 100
+      },
+      "price": {
+        "required": true,
+        "example": "$100",
+        "note": "Display price with currency symbol"
+      },
+      "variant": {
+        "required": true,
+        "example": "Dark Grey  3 Colors",
+        "minChars": 2,
+        "maxChars": 100,
+        "note": "Product variant description (color, size options, etc.)"
+      },
+      "imageSrc": {
+        "required": true,
+        "example": "/product.jpg",
+        "note": "Product image URL"
+      }
+    }
+  },
+  "propsSchema": {
+    "products?": "Array<{ id: string, name: string, price: string, variant: string, imageSrc: string, imageAlt?: string, onFavorite?: () => void, onProductClick?: () => void, isFavorited?: boolean }> - Product items",
+    "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+    "gridVariant": "'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'one-large-right-three-stacked-left' | 'one-large-left-three-stacked-right' (required)",
+    "uniformGridCustomHeightClasses?": "string (default: 'min-h-95 2xl:min-h-105')",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground": "boolean (required)",
+    "ariaLabel?": "string (default: 'Product section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "imageClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+    "textBoxTitleImageClassName?": "string - For styling images in inline-image layout",
+    "textBoxDescriptionClassName?": "string",
+    "cardNameClassName?": "string",
+    "cardPriceClassName?": "string",
+    "cardVariantClassName?": "string",
+    "actionButtonClassName?": "string - Styles the action button on product image",
+    "gridClassName?": "string",
+    "carouselClassName?": "string",
+    "controlsClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string"
+  },
+  "usageExample": "<ProductCardFour products={[{ id: '1', name: 'Represent X Puma Graphic T-Shirt', price: '$100', variant: 'Dark Grey  3 Colors', imageSrc: '/product.jpg', imageAlt: 'Product image', isFavorited: false, onFavorite: () => console.log('favorited'), onProductClick: () => window.open('/product', '_blank') }]} title=\"Featured Products\" description=\"Discover our latest collection\" tag=\"New Arrivals\" tagIcon={Package} textboxLayout=\"default\" gridVariant=\"uniform-all-items-equal\" animationType=\"slide-up\" useInvertedBackground={false} />",
+  "do": [
+    "Use for product catalogs",
+    "Use for e-commerce",
+    "Requires products[]",
+    "Requires titleSegments?[]",
+    "Requires buttons?[]"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/ProductCardOne.json b/registry/components/ProductCardOne.json
new file mode 100644
index 0000000..e81ddeb
--- /dev/null
+++ b/registry/components/ProductCardOne.json
@@ -0,0 +1,109 @@
+{
+  "name": "ProductCardOne",
+  "description": "Simple product card showing name, price, and arrow icon for viewing details.",
+  "details": "Use for minimal product displays focused on browsing. Layout: Image (top) → Name (small text) → Price (large text) + Arrow Icon Button (right). The arrow button indicates 'view details' action. No additional product information displayed. Best for product galleries where users click through to detail pages. Each card has favorite button overlay on image, image scales 105% on hover, and arrow rotates 45deg on hover. Does NOT show: brand name, ratings, quantity controls.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Featured Products",
+        "minChars": 2,
+        "maxChars": 35
+      },
+      "description": {
+        "required": true,
+        "example": "Discover our latest collection of premium products",
+        "minChars": 5,
+        "maxChars": 250
+      },
+      "tag": {
+        "required": false,
+        "example": "New Arrivals",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "productCardRules": {
+      "id": {
+        "required": true,
+        "example": "1",
+        "minChars": 1,
+        "maxChars": 20
+      },
+      "name": {
+        "required": true,
+        "example": "Eclipse Motion Pro",
+        "minChars": 2,
+        "maxChars": 50
+      },
+      "price": {
+        "required": true,
+        "example": "$150",
+        "minChars": 1,
+        "maxChars": 20
+      }
+    },
+    "mediaRules": {
+      "imageSrc": {
+        "required": true,
+        "example": "/product.jpg",
+        "note": "Supports external URLs with unoptimized prop"
+      },
+      "imageAlt": {
+        "required": false,
+        "example": "Product name",
+        "note": "Empty string marks image as decorative (aria-hidden)"
+      }
+    }
+  },
+  "propsSchema": {
+    "products?": "Array<{ id: string, name: string, price: string, imageSrc: string, imageAlt?: string, onFavorite?: () => void, onProductClick?: () => void, isFavorited?: boolean }>",
+    "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+    "gridVariant": "'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right' (required)",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
+    "uniformGridCustomHeightClasses?": "string (default: 'min-h-95 2xl:min-h-105')",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Product section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "imageClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+    "textBoxTitleImageClassName?": "string - For styling images in inline-image layout",
+    "textBoxDescriptionClassName?": "string",
+    "cardNameClassName?": "string",
+    "cardPriceClassName?": "string",
+    "gridClassName?": "string",
+    "carouselClassName?": "string",
+    "controlsClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string"
+  },
+  "usageExample": "<ProductCardOne products={[{ id: '1', name: 'Eclipse Motion Pro', price: '$150', imageSrc: '/product.jpg', onProductClick: () => window.open('https://example.com', '_blank') }]} title=\"Featured Products\" description=\"Explore our curated collection\" textboxLayout=\"default\" animationType=\"slide-up\" useInvertedBackground={false} />",
+  "do": [
+    "Use for product catalogs",
+    "Use for e-commerce",
+    "Requires products[]",
+    "Requires titleSegments?[]",
+    "Requires buttons?[]"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/ProductCardThree.json b/registry/components/ProductCardThree.json
new file mode 100644
index 0000000..bfa6b72
--- /dev/null
+++ b/registry/components/ProductCardThree.json
@@ -0,0 +1,114 @@
+{
+  "name": "ProductCardThree",
+  "description": "E-commerce product card with quantity selector and add-to-cart price button.",
+  "details": "Use for shopping cart or e-commerce flows where users add items directly. Layout: Image (top) → Product Name → Quantity Controls (- button, number, + button) + Price Button (styled CTA). The quantity controls let users select amount before adding to cart. Price is displayed inside a themed button (from ThemeProvider). Best for checkout flows, quick-add interfaces, or when quantity selection is essential before purchase. Each card has favorite button overlay on image and image scales 105% on hover. Does NOT show: brand name, ratings, arrow icon.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Shop Now",
+        "minChars": 2,
+        "maxChars": 35
+      },
+      "description": {
+        "required": true,
+        "example": "Add your favorite items to cart",
+        "minChars": 5,
+        "maxChars": 250
+      },
+      "tag": {
+        "required": false,
+        "example": "Limited Stock",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "productCardRules": {
+      "id": {
+        "required": true,
+        "example": "1",
+        "minChars": 1,
+        "maxChars": 20
+      },
+      "name": {
+        "required": true,
+        "example": "TIMBUK2 Classic Messenger Bag",
+        "minChars": 2,
+        "maxChars": 50
+      },
+      "price": {
+        "required": true,
+        "example": "$119.00",
+        "minChars": 1,
+        "maxChars": 20
+      },
+      "initialQuantity": {
+        "required": false,
+        "example": 1,
+        "note": "Default quantity value (default: 1)"
+      }
+    },
+    "mediaRules": {
+      "imageSrc": {
+        "required": true,
+        "example": "/product.jpg",
+        "note": "Supports external URLs with unoptimized prop"
+      },
+      "imageAlt": {
+        "required": false,
+        "example": "Product name",
+        "note": "Empty string marks image as decorative (aria-hidden)"
+      }
+    }
+  },
+  "propsSchema": {
+    "products": "Array<{ id: string, name: string, price: string, imageSrc: string, imageAlt?: string, onFavorite?: () => void, onProductClick?: () => void, onQuantityChange?: (quantity: number) => void, isFavorited?: boolean, initialQuantity?: number, priceButtonProps?: Partial<ButtonPropsForVariant<CTAButtonVariant>> }>",
+    "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+    "gridVariant": "'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'one-large-right-three-stacked-left' | 'one-large-left-three-stacked-right' (required)",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
+    "uniformGridCustomHeightClasses?": "string (default: 'min-h-95 2xl:min-h-105')",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Product section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "imageClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+    "textBoxTitleImageClassName?": "string - For styling images in inline-image layout",
+    "textBoxDescriptionClassName?": "string",
+    "cardNameClassName?": "string",
+    "quantityControlsClassName?": "string",
+    "gridClassName?": "string",
+    "carouselClassName?": "string",
+    "controlsClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string"
+  },
+  "usageExample": "<ProductCardThree products={[{ id: '1', name: 'TIMBUK2 Classic Messenger Bag', price: '$119.00', imageSrc: '/product.jpg', onProductClick: () => window.open('https://example.com', '_blank'), onQuantityChange: (qty) => console.log(qty) }]} title=\"Shop Now\" description=\"Explore our curated collection\" textboxLayout=\"default\" animationType=\"slide-up\" useInvertedBackground={false} />",
+  "do": [
+    "Use for product catalogs",
+    "Use for e-commerce",
+    "Requires products[]",
+    "Requires titleSegments?[]",
+    "Requires buttons?[]"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/ProductCardTwo.json b/registry/components/ProductCardTwo.json
new file mode 100644
index 0000000..fc6316d
--- /dev/null
+++ b/registry/components/ProductCardTwo.json
@@ -0,0 +1,129 @@
+{
+  "name": "ProductCardTwo",
+  "description": "Product card displaying brand name, star rating, and review count for social proof.",
+  "details": "Use when brand reputation and customer reviews are important selling points. Layout: Image (top) → Brand Name (small, muted) → Product Name (medium) → Star Rating + Review Count → Price (large text). Shows 5-star rating visualization with filled/unfilled stars and review count in parentheses (e.g., '23.9k'). Best for marketplaces, brand-heavy catalogs, or when social proof drives purchases. Each card has favorite button overlay on image and image scales 105% on hover. Does NOT show: arrow button, quantity controls.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Premium Collection",
+        "minChars": 2,
+        "maxChars": 35
+      },
+      "description": {
+        "required": true,
+        "example": "Curated selection of top-rated products",
+        "minChars": 5,
+        "maxChars": 250
+      },
+      "tag": {
+        "required": false,
+        "example": "Best Sellers",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "productCardRules": {
+      "id": {
+        "required": true,
+        "example": "1",
+        "minChars": 1,
+        "maxChars": 20
+      },
+      "brand": {
+        "required": true,
+        "example": "Wofurnitures",
+        "minChars": 2,
+        "maxChars": 30
+      },
+      "name": {
+        "required": true,
+        "example": "Single Accent Chair",
+        "minChars": 2,
+        "maxChars": 50
+      },
+      "price": {
+        "required": true,
+        "example": "$650.00",
+        "minChars": 1,
+        "maxChars": 20
+      },
+      "rating": {
+        "required": true,
+        "example": 4,
+        "note": "Number from 1-5 representing star rating"
+      },
+      "reviewCount": {
+        "required": true,
+        "example": "23.9k",
+        "minChars": 1,
+        "maxChars": 10
+      }
+    },
+    "mediaRules": {
+      "imageSrc": {
+        "required": true,
+        "example": "/product.jpg",
+        "note": "Supports external URLs with unoptimized prop"
+      },
+      "imageAlt": {
+        "required": false,
+        "example": "Product name",
+        "note": "Empty string marks image as decorative (aria-hidden)"
+      }
+    }
+  },
+  "propsSchema": {
+    "products?": "Array<{ id: string, brand: string, name: string, price: string, rating: number, reviewCount: string, imageSrc: string, imageAlt?: string, onFavorite?: () => void, onProductClick?: () => void, isFavorited?: boolean }>",
+    "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+    "gridVariant": "'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' (required)",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
+    "uniformGridCustomHeightClasses?": "string (default: 'min-h-95 2xl:min-h-105')",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Product section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "imageClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+    "textBoxTitleImageClassName?": "string - For styling images in inline-image layout",
+    "textBoxDescriptionClassName?": "string",
+    "cardBrandClassName?": "string",
+    "cardNameClassName?": "string",
+    "cardPriceClassName?": "string",
+    "cardRatingClassName?": "string",
+    "actionButtonClassName?": "string - Styles the action button on product image",
+    "gridClassName?": "string",
+    "carouselClassName?": "string",
+    "controlsClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string"
+  },
+  "usageExample": "<ProductCardTwo products={[{ id: '1', brand: 'Wofurnitures', name: 'Single Accent Chair', price: '$650.00', rating: 4, reviewCount: '23.9k', imageSrc: '/product.jpg', onProductClick: () => window.open('https://example.com', '_blank') }]} title=\"Premium Collection\" description=\"Explore our curated collection\" textboxLayout=\"default\" animationType=\"slide-up\" useInvertedBackground={false} />",
+  "do": [
+    "Use for product catalogs",
+    "Use for e-commerce",
+    "Requires products[]",
+    "Requires titleSegments?[]",
+    "Requires buttons?[]"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/RadialGradientBackground.json b/registry/components/RadialGradientBackground.json
new file mode 100644
index 0000000..80fe54d
--- /dev/null
+++ b/registry/components/RadialGradientBackground.json
@@ -0,0 +1,25 @@
+{
+  "name": "RadialGradientBackground",
+  "description": "Customizable radial gradient background with theme color integration, optional padding inset, rounded bottom corners, and top fade mask.",
+  "details": "Use for modern, premium backgrounds with radial gradient effects. Features customizable gradient size, position, center color, and edge color. Wrapper with padding (md:px-5 md:pb-5 on desktop, none on mobile) creates inset effect. Inner div has rounded bottom corners (rounded-b-theme-capped). Linear gradient mask fades top (0-15% transparent, 55-100% opaque) creating soft top edge. Automatically uses theme colors by default (--background for center, --color-background-accent for edge). Gradient starts at 40% center color and transitions to 100% edge color. Default size 130% 130% at position 50% 15% creates top-center spotlight. Perfect for hero sections, landing pages, or any area needing depth and visual interest with refined edges.",
+  "constraints": {},
+  "propsSchema": {
+    "className?": "string",
+    "centerColor?": "string (default: 'var(--background)')",
+    "edgeColor?": "string (default: 'var(--color-background-accent)')",
+    "size?": "string (default: '130% 130%')",
+    "position?": "string (default: '50% 15%')"
+  },
+  "usageExample": "<RadialGradientBackground centerColor=\"var(--background)\" edgeColor=\"var(--color-background-accent)\" size=\"130% 130%\" position=\"50% 15%\" />",
+  "do": [
+    "Use for landing pages",
+    "Use for feature showcases",
+    "Use for capability displays"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/RotatedRaysBackground.json b/registry/components/RotatedRaysBackground.json
new file mode 100644
index 0000000..ec6e40c
--- /dev/null
+++ b/registry/components/RotatedRaysBackground.json
@@ -0,0 +1,27 @@
+{
+  "name": "RotatedRaysBackground",
+  "description": "Atmospheric light rays emanating from a rotated origin point with blur and radial gradient effects, with optional grid overlay.",
+  "details": "Use for dramatic, atmospheric backgrounds with light ray effects. Features 8 rays with varying widths (15-40px), opacities, rotations, and scales emanating from a single origin point. The container is rotated -38deg with 16px blur and masked with radial gradient for natural falloff. Includes 3 light sources for additional depth. Uses theme color via var(--color-primary-cta) for both rays and light sources. When animated=true, rays pulse between opacity 0 and their target opacity with staggered timing. When showGrid=true, displays a medium grid overlay (10vw spacing) that fades from top center. Perfect for hero sections, landing pages, or any area needing dramatic lighting effects.",
+  "constraints": {},
+  "propsSchema": {
+    "animated": "boolean - Required. When true, rays animate with pulsing opacity. When false, rays display static opacity.",
+    "showGrid": "boolean - Required. When true, displays a grid overlay fading from top center. When false, no grid is shown.",
+    "className?": "string",
+    "containerClassName?": "string"
+  },
+  "usageExample": "<RotatedRaysBackground animated={true} showGrid={false} />",
+  "do": [
+    "Use for landing pages",
+    "Use for feature showcases",
+    "Use for capability displays"
+  ],
+  "dont": [
+    "Do not use multiple items",
+    "Do not use more than 4 items"
+  ],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/SocialProofOne.json b/registry/components/SocialProofOne.json
new file mode 100644
index 0000000..0876590
--- /dev/null
+++ b/registry/components/SocialProofOne.json
@@ -0,0 +1,87 @@
+{
+  "name": "SocialProofOne",
+  "description": "Social proof section with scrolling marquee displaying company names with optional card styling.",
+  "details": "Use for displaying partner/client names in an infinite scrolling marquee. Features a header section with optional tag, title, description, and buttons. Names are auto-repeated 3x for seamless loop. Card styling can be toggled via showCard prop. Speed of marquee is configurable. Ideal for building trust through social proof on landing pages.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Trusted by Industry Leaders",
+        "minChars": 2,
+        "maxChars": 50
+      },
+      "description": {
+        "required": true,
+        "example": "Join thousands of companies using our platform",
+        "minChars": 5,
+        "maxChars": 200
+      },
+      "tag": {
+        "required": false,
+        "example": "Partners",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "buttonRules": {
+      "maxButtons": 2,
+      "structure": {
+        "text": "string - Button label",
+        "href": "string - Link destination (optional)",
+        "onClick": "() => void - Additional click handler (optional)"
+      },
+      "note": "Button variant is controlled by ThemeProvider's defaultButtonVariant."
+    },
+    "nameRules": {
+      "required": true,
+      "minItems": 4,
+      "structure": "string[] - Array of company/partner names",
+      "note": "Names are displayed as text in an infinite scrolling marquee. Auto-repeated 3x for seamless loop."
+    }
+  },
+  "propsSchema": {
+    "names": "string[] (required) - Array of company/partner names to display as text",
+    "title": "string",
+    "titleSegments?": "TitleSegment[]",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "ButtonConfig[]",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "TextboxLayout",
+    "useInvertedBackground": "boolean",
+    "speed?": "number (default: 40)",
+    "showCard?": "boolean (default: true) - Whether to show card styling around items",
+    "ariaLabel?": "string (default: 'Social proof section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "titleImageWrapperClassName?": "string",
+    "titleImageClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string",
+    "contentClassName?": "string",
+    "logoItemClassName?": "string",
+    "logoCardClassName?": "string",
+    "logoTextClassName?": "string"
+  },
+  "usageExample": "<ThemeProvider defaultButtonVariant=\"icon-arrow\" borderRadius=\"rounded\"><SocialProofOne title=\"Trusted by Industry Leaders\" description=\"Join thousands of companies using our platform.\" tag=\"Partners\" textboxLayout=\"default\" useInvertedBackground={false} names={['Acme Corp', 'TechFlow', 'Innovate Inc', 'CloudSync']} speed={40} showCard={true} /></ThemeProvider>",
+  "do": [
+    "Use for displaying partner/client names",
+    "Include at least 4 items for good visual effect"
+  ],
+  "dont": [
+    "Do not use with fewer than 4 items",
+    "Do not mix very long and very short names"
+  ],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/SplitAbout.json b/registry/components/SplitAbout.json
new file mode 100644
index 0000000..df5c356
--- /dev/null
+++ b/registry/components/SplitAbout.json
@@ -0,0 +1,116 @@
+{
+  "name": "SplitAbout",
+  "description": "Split-layout about section with bullet points on one side and image/video on the other.",
+  "details": "Use for about sections showcasing features or benefits with visual support. Features responsive split layout with configurable image position (left/right), bullet points with optional icons, title, and description. Image side takes 60% width on desktop (70% on 2xl), text takes 40% (30% on 2xl). Both sides have card styling with theme border radius.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "About Us",
+        "minChars": 2,
+        "maxChars": 50
+      },
+      "description": {
+        "required": true,
+        "example": "Learn more about our mission, values, and what drives us forward",
+        "minChars": 5,
+        "maxChars": 300
+      },
+      "tag": {
+        "required": false,
+        "example": "Our Story",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "buttonRules": {
+      "maxButtons": 2,
+      "structure": {
+        "text": "string - Button label (required)",
+        "href": "string - Link destination (optional)",
+        "onClick": "() => void - Click handler (optional)",
+        "props": "Partial<ButtonPropsForVariant> - Additional button props (optional)"
+      },
+      "note": "Button variant controlled by ThemeProvider's defaultButtonVariant. All sections should be wrapped in a single ThemeProvider at the app/page level."
+    },
+    "bulletPointRules": {
+      "structure": {
+        "title": "string - Bullet point heading (required)",
+        "description": "string - Bullet point text (required)",
+        "icon": "LucideIcon - Optional icon displayed above title"
+      },
+      "note": "Bullet points are separated by horizontal dividers. Border radius controlled by ThemeProvider's borderRadius (options: 'sharp', 'rounded', 'soft', 'pill'). All sections should be wrapped in a single ThemeProvider at the app/page level."
+    },
+    "mediaRules": {
+      "imageSrc": {
+        "required": false,
+        "example": "/about-image.jpg",
+        "note": "Supports external URLs Either imageSrc or videoSrc should be provided. Image is recommended if no videoSrc."
+      },
+      "videoSrc": {
+        "required": false,
+        "example": "/about-video.mp4",
+        "note": "Takes precedence over imageSrc if both provided"
+      },
+      "imageAlt": {
+        "required": false,
+        "example": "About us",
+        "note": "Empty string marks image as decorative (aria-hidden)"
+      }
+    }
+  },
+  "propsSchema": {
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "bulletPoints": "Array<{ title: string, description: string, icon?: LucideIcon }>",
+    "imageSrc?": "string",
+    "videoSrc?": "string",
+    "imageAlt?": "string (default: '')",
+    "videoAriaLabel?": "string (default: 'About section video')",
+    "mediaBadge?": "{ text: string, avatarSrc?: string, avatarAlt?: string, className?: string }",
+    "mediaAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "ariaLabel?": "string (default: 'About section')",
+    "imagePosition?": "'left' | 'right' (default: 'right')",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground": "boolean",
+    "className?": "string",
+    "containerClassName?": "string",
+    "textBoxClassName?": "string",
+    "titleClassName?": "string",
+    "titleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+    "titleImageClassName?": "string - For styling images in inline-image layout",
+    "descriptionClassName?": "string",
+    "tagClassName?": "string",
+    "buttonContainerClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string",
+    "contentClassName?": "string",
+    "bulletPointClassName?": "string",
+    "bulletTitleClassName?": "string",
+    "bulletDescriptionClassName?": "string",
+    "mediaWrapperClassName?": "string",
+    "imageClassName?": "string"
+  },
+  "usageExample": "// Wrap in ThemeProvider\n<ThemeProvider defaultButtonVariant=\"text-stagger\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"rounded\" background=\"aurora\" cardStyle=\"glass-elevated\" primaryButtonStyle=\"gradient\" secondaryButtonStyle=\"glass\">\n  <SplitAbout title=\"About Us\" description=\"Learn more about our mission, values, and what drives us forward\" textboxLayout=\"default\" useInvertedBackground={false} bulletPoints={[{ title: 'Innovation', description: 'We push boundaries', icon: Lightbulb }, { title: 'Quality', description: 'Excellence in every detail' }]} imageSrc=\"/about.jpg\" />\n</ThemeProvider>",
+  "do": [
+    "Use for feature showcases",
+    "Use for capability displays",
+    "Use for about pages",
+    "Use for company information",
+    "Requires titleSegments?[]",
+    "Requires buttons?[]",
+    "Requires bulletPoints[]"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/TeamCardEleven.json b/registry/components/TeamCardEleven.json
new file mode 100644
index 0000000..e362e65
--- /dev/null
+++ b/registry/components/TeamCardEleven.json
@@ -0,0 +1,129 @@
+{
+  "name": "TeamCardEleven",
+  "description": "Team directory section with groups of members displayed in a list layout with avatar, title, subtitle, and detail.",
+  "details": "Use for team directories or contact lists organized by groups (e.g., locations, departments). Layout: CardStackTextBox header followed by group cards. Each group contains: Group title and member rows with divider lines. Each member row shows: Avatar image (left), Title + Subtitle stacked (center), Detail text like email (right). Uses CardList wrapper for group containers. Supports scroll animations via animationType. Best for 1-4 groups with 2-6 members each.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Meet Our Team",
+        "minChars": 2,
+        "maxChars": 60
+      },
+      "description": {
+        "required": true,
+        "example": "The talented people behind our success",
+        "minChars": 5,
+        "maxChars": 200
+      },
+      "tag": {
+        "required": false,
+        "example": "Team",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "groupRules": {
+      "minItems": 1,
+      "maxItems": 4,
+      "recommendedItems": "1-3",
+      "id": {
+        "required": true,
+        "example": "global",
+        "note": "Unique identifier for the group"
+      },
+      "groupTitle": {
+        "required": true,
+        "example": "Global",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "memberRules": {
+      "minItems": 1,
+      "maxItems": 10,
+      "recommendedItems": "2-6",
+      "id": {
+        "required": true,
+        "example": "1",
+        "note": "Unique identifier for the member"
+      },
+      "title": {
+        "required": true,
+        "example": "Mihai Toma",
+        "minChars": 2,
+        "maxChars": 50
+      },
+      "subtitle": {
+        "required": true,
+        "example": "Partner",
+        "minChars": 2,
+        "maxChars": 50
+      },
+      "detail": {
+        "required": true,
+        "example": "mihai@company.com",
+        "minChars": 2,
+        "maxChars": 100
+      },
+      "imageSrc": {
+        "required": false,
+        "example": "/team/mihai.jpg",
+        "note": "Avatar image Either imageSrc or videoSrc should be provided. Image is recommended if no videoSrc."
+      },
+      "videoSrc": {
+        "required": false,
+        "example": "/team/mihai.mp4",
+        "note": "Video alternative to image"
+      }
+    }
+  },
+  "propsSchema": {
+    "groups": "Array<{ id: string, groupTitle: string, members: Array<{ id: string, title: string, subtitle: string, detail: string, imageSrc?: string, imageAlt?: string, videoSrc?: string, videoAriaLabel?: string }> }> (required)",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required)",
+    "useInvertedBackground": "boolean",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "ariaLabel?": "string (default: 'Team section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string",
+    "titleImageWrapperClassName?": "string",
+    "titleImageClassName?": "string",
+    "groupTitleClassName?": "string",
+    "memberClassName?": "string",
+    "memberImageClassName?": "string",
+    "memberTitleClassName?": "string",
+    "memberSubtitleClassName?": "string",
+    "memberDetailClassName?": "string"
+  },
+  "usageExample": "<TeamCardEleven groups={[{ id: 'global', groupTitle: 'Global', members: [{ id: '1', title: 'Mihai Toma', subtitle: 'Partner', detail: 'mihai@company.com', imageSrc: '/team/mihai.jpg' }] }]} animationType=\"slide-up\" title=\"Meet Our Team\" description=\"The talented people behind our success\" textboxLayout=\"default\" useInvertedBackground={false} />",
+  "do": [
+    "Use for contact pages",
+    "Use for lead generation",
+    "Use for team pages",
+    "Use for staff directories",
+    "Requires groups[]",
+    "Requires titleSegments?[]",
+    "Requires buttons?[]"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/TeamCardFive.json b/registry/components/TeamCardFive.json
new file mode 100644
index 0000000..1a89862
--- /dev/null
+++ b/registry/components/TeamCardFive.json
@@ -0,0 +1,125 @@
+{
+  "name": "TeamCardFive",
+  "description": "Team section with overlapping portrait cards in responsive flex layout showing centered vertical cards with name and role.",
+  "details": "Use for team member displays with overlapping card effect. Layout: Optional CardStackTextBox Header → Responsive Flex Grid with Overlap. Mobile: 2 items per row (w-55%, -mx-4% overlap). Desktop: Up to 4 items per row (w-28%, -mx-2% overlap) with flex-wrap for additional rows. Each card shows aspect-square media in card wrapper (p-2, rounded-theme) with centered name (2xl font-medium, truncate) and role (base size, 75% opacity, truncate) below. Uses flex-wrap for multi-row support with gap-y-6 vertical spacing. Text uses direct useInvertedBackground logic (not card-aware) as text sits outside card element. Supports both image and video media. Uses useCardAnimation hook for GSAP scroll animations with stagger effect. Best for creative team showcases, staff galleries with visual impact. Optional header with title, description, tag, and buttons.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Meet Our Team",
+        "minChars": 2,
+        "maxChars": 50
+      },
+      "description": {
+        "required": true,
+        "example": "The talented people behind our success",
+        "minChars": 5,
+        "maxChars": 250
+      },
+      "tag": {
+        "required": false,
+        "example": "Team",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "teamMemberRules": {
+      "id": {
+        "required": true,
+        "example": "1",
+        "minChars": 1,
+        "maxChars": 20
+      },
+      "name": {
+        "required": true,
+        "example": "Sarah Johnson",
+        "minChars": 2,
+        "maxChars": 50,
+        "note": "Team member name displayed at 2xl font-medium, centered with truncate"
+      },
+      "role": {
+        "required": true,
+        "example": "CEO & Founder",
+        "minChars": 2,
+        "maxChars": 50,
+        "note": "Role/title displayed at base size with 75% opacity, centered with truncate"
+      },
+      "imageSrc": {
+        "required": false,
+        "example": "/team/sarah.jpg",
+        "note": "Image path for team member photo (aspect-square in card wrapper with p-2, rounded-theme) Either imageSrc or videoSrc should be provided. Image is recommended if no videoSrc."
+      },
+      "videoSrc": {
+        "required": false,
+        "example": "/team/sarah.mp4",
+        "note": "Video path for team member (aspect-square in card wrapper with p-2, rounded-theme)"
+      },
+      "imageAlt": {
+        "required": false,
+        "example": "Portrait of Sarah Johnson",
+        "note": "Alt text for image (defaults to member name if not provided)"
+      },
+      "videoAriaLabel": {
+        "required": false,
+        "example": "Video of Sarah Johnson",
+        "note": "ARIA label for video (defaults to member name if not provided)"
+      }
+    },
+    "itemRules": {
+      "minItems": 2,
+      "maxItems": 12,
+      "recommendedItems": "4-8",
+      "note": "Works best with 4-8 team members. Mobile: 2 per row with overlap. Desktop: up to 4 per row with overlap and wrap support for additional rows."
+    }
+  },
+  "propsSchema": {
+    "team": "Array<{ id: string, name: string, role: string, imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }>",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "textboxLayout": "'default' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground": "boolean",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "ariaLabel?": "string (default: 'Team section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+    "textBoxTitleImageClassName?": "string - For styling images in inline-image layout",
+    "textBoxDescriptionClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string",
+    "gridClassName?": "string",
+    "cardClassName?": "string",
+    "mediaWrapperClassName?": "string",
+    "mediaClassName?": "string",
+    "nameClassName?": "string",
+    "roleClassName?": "string"
+  },
+  "usageExample": "<TeamCardFive team={[{ id: '1', name: 'Sarah Johnson', role: 'CEO & Founder', imageSrc: '/team/sarah.jpg' }, { id: '2', name: 'Michael Chen', role: 'CTO', imageSrc: '/team/michael.jpg' }, { id: '3', name: 'Emma Davis', role: 'Head of Design', imageSrc: '/team/emma.jpg' }, { id: '4', name: 'James Wilson', role: 'Lead Developer', imageSrc: '/team/james.jpg' }]} animationType=\"slide-up\" title=\"Meet Our Team\" description=\"The talented people behind our success\" textboxLayout=\"default\" useInvertedBackground={false} tag=\"Team\" tagIcon={Users} />",
+  "do": [
+    "Use for team pages",
+    "Use for staff directories",
+    "Requires team[]",
+    "Requires titleSegments?[]",
+    "Requires buttons?[]"
+  ],
+  "dont": [
+    "Do not use more than 4 items",
+    "Do not use less than 2 items",
+    "Do not use more than 12 items"
+  ],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/TeamCardOne.json b/registry/components/TeamCardOne.json
new file mode 100644
index 0000000..09ba198
--- /dev/null
+++ b/registry/components/TeamCardOne.json
@@ -0,0 +1,120 @@
+{
+  "name": "TeamCardOne",
+  "description": "Team member card with image background, overlay info card at bottom-left corner.",
+  "details": "Use for team member profiles with compact overlay display. Layout: Outer Card (p-4) → Full Square Image → Bottom-Left Overlay Card (Name + Role Badge in row). Image has aspect-square with rounded-theme. Overlay positioned at bottom-4 left-4 with card styling. Name and role badge displayed horizontally with gap-3. Role uses primary-button styling. All core fields required for visual consistency. Best for team grids with clean, modern aesthetic. Automatically switches between grid (1-4 items) and carousel (5+ items). Optional header with title, description, tag, and buttons.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Meet Our Team",
+        "minChars": 2,
+        "maxChars": 35
+      },
+      "description": {
+        "required": true,
+        "example": "The people behind our success",
+        "minChars": 5,
+        "maxChars": 250
+      },
+      "tag": {
+        "required": false,
+        "example": "Team",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "teamMemberRules": {
+      "id": {
+        "required": true,
+        "example": "1",
+        "minChars": 1,
+        "maxChars": 20
+      },
+      "name": {
+        "required": true,
+        "example": "Sophie P.",
+        "minChars": 2,
+        "maxChars": 50,
+        "note": "Team member name displayed in overlay card"
+      },
+      "role": {
+        "required": true,
+        "example": "Digital Nomad",
+        "minChars": 2,
+        "maxChars": 40,
+        "note": "Role/title displayed in primary-button badge"
+      },
+      "imageSrc": {
+        "required": false,
+        "example": "/team/sophie.jpg",
+        "note": "Image path for team member photo (displays as square with rounded-theme) Either imageSrc or videoSrc should be provided. Image is recommended if no videoSrc."
+      },
+      "videoSrc": {
+        "required": false,
+        "example": "/team/sophie.mp4",
+        "note": "Video path for team member (alternative to imageSrc)"
+      },
+      "imageAlt": {
+        "required": false,
+        "example": "Portrait of Sophie P.",
+        "note": "Alt text for image (defaults to member name if not provided)"
+      },
+      "videoAriaLabel": {
+        "required": false,
+        "example": "Video of Sophie P.",
+        "note": "Aria label for video (defaults to member name if not provided)"
+      }
+    }
+  },
+  "propsSchema": {
+    "members": "Array<{ id: string, name: string, role: string, imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }>",
+    "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+    "gridVariant": "'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right' (required)",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d'",
+    "uniformGridCustomHeightClasses?": "string (default: 'min-h-95 2xl:min-h-105')",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Team section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+    "textBoxTitleImageClassName?": "string - For styling images in inline-image layout",
+    "textBoxDescriptionClassName?": "string",
+    "imageClassName?": "string",
+    "overlayClassName?": "string",
+    "nameClassName?": "string",
+    "roleClassName?": "string",
+    "gridClassName?": "string",
+    "carouselClassName?": "string",
+    "controlsClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string"
+  },
+  "usageExample": "<TeamCardOne members={[{ id: '1', name: 'Sophie P.', role: 'Digital Nomad', imageSrc: '/team/sophie.jpg' }]} title=\"Meet Our Team\" description=\"Get to know the people behind our success\" textboxLayout=\"default\" animationType=\"slide-up\" useInvertedBackground={false} />",
+  "do": [
+    "Use for team pages",
+    "Use for staff directories",
+    "Requires members[]",
+    "Requires titleSegments?[]",
+    "Requires buttons?[]"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/TeamCardSix.json b/registry/components/TeamCardSix.json
new file mode 100644
index 0000000..860e9f9
--- /dev/null
+++ b/registry/components/TeamCardSix.json
@@ -0,0 +1,122 @@
+{
+  "name": "TeamCardSix",
+  "description": "Team member card with full-bleed image background and blurred gradient overlay with name and role text at bottom.",
+  "details": "Use for team member displays with visual impact and modern blur effect. Layout: Full Image Background with Blurred Gradient Overlay at bottom third. Image fills entire card (rounded-theme-capped). Name (2xl font-medium) and role (base size) displayed in overlay at bottom with text-foreground color. Backdrop blur effect (backdrop-blur-xl) covers bottom 1/3 with gradient mask (transparent to black 60%). Uses CardStack pattern for responsive grid or carousel layout. Automatically switches between grid (1-4 items) and carousel (5+ items) based on gridVariant. All core fields required for visual consistency. Best for team showcases, staff galleries, or about us sections where photos are prominent. Optional header with title, description, tag, and buttons.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Meet Our Team",
+        "minChars": 2,
+        "maxChars": 50
+      },
+      "description": {
+        "required": true,
+        "example": "The talented people behind our success",
+        "minChars": 5,
+        "maxChars": 250
+      },
+      "tag": {
+        "required": false,
+        "example": "Team",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "teamMemberRules": {
+      "id": {
+        "required": true,
+        "example": "1",
+        "minChars": 1,
+        "maxChars": 20
+      },
+      "name": {
+        "required": true,
+        "example": "Sarah Johnson",
+        "minChars": 2,
+        "maxChars": 50,
+        "note": "Team member name displayed at 2xl font-medium with truncate in blurred overlay"
+      },
+      "role": {
+        "required": true,
+        "example": "CEO & Founder",
+        "minChars": 2,
+        "maxChars": 50,
+        "note": "Role/title displayed at base size with truncate in blurred overlay"
+      },
+      "imageSrc": {
+        "required": false,
+        "example": "/team/sarah.jpg",
+        "note": "Image path for team member photo (full-bleed with rounded-theme-capped) Either imageSrc or videoSrc should be provided. Image is recommended if no videoSrc."
+      },
+      "videoSrc": {
+        "required": false,
+        "example": "/team/sarah.mp4",
+        "note": "Video path for team member (alternative to imageSrc)"
+      },
+      "imageAlt": {
+        "required": false,
+        "example": "Portrait of Sarah Johnson",
+        "note": "Alt text for image (defaults to member name if not provided)"
+      },
+      "videoAriaLabel": {
+        "required": false,
+        "example": "Video of Sarah Johnson",
+        "note": "Aria label for video (defaults to member name if not provided)"
+      }
+    }
+  },
+  "propsSchema": {
+    "members": "Array<{ id: string, name: string, role: string, imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }>",
+    "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+    "gridVariant": "'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right' (required - determines grid layout or carousel trigger)",
+    "uniformGridCustomHeightClasses?": "string (default: 'min-h-95 2xl:min-h-105')",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d'",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Team section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+    "textBoxTitleImageClassName?": "string - For styling images in inline-image layout",
+    "textBoxDescriptionClassName?": "string",
+    "imageClassName?": "string",
+    "overlayClassName?": "string",
+    "nameClassName?": "string",
+    "roleClassName?": "string",
+    "gridClassName?": "string",
+    "carouselClassName?": "string",
+    "controlsClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string"
+  },
+  "usageExample": "<TeamCardSix members={[{ id: '1', name: 'Sarah Johnson', role: 'CEO & Founder', imageSrc: '/team/sarah.jpg' }, { id: '2', name: 'Michael Chen', role: 'CTO', imageSrc: '/team/michael.jpg' }]} gridVariant=\"uniform-all-items-equal\" animationType=\"slide-up\" title=\"Meet Our Team\" description=\"The talented people behind our success\" textboxLayout=\"default\" useInvertedBackground={false} tag=\"Team\" tagIcon={Users} />",
+  "do": [
+    "Use for about pages",
+    "Use for company information",
+    "Use for team pages",
+    "Use for staff directories",
+    "Requires members[]",
+    "Requires titleSegments?[]",
+    "Requires buttons?[]"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/TeamCardTen.json b/registry/components/TeamCardTen.json
new file mode 100644
index 0000000..22feff8
--- /dev/null
+++ b/registry/components/TeamCardTen.json
@@ -0,0 +1,85 @@
+{
+  "name": "TeamCardTen",
+  "description": "Team section with animated title at top, Tag label, and member cards with images and names.",
+  "details": "Use for team sections with a prominent animated title. Layout: TextAnimation title at top → Below: Tag component on left, member grid on right. Each member has: Portrait image (3:3.5 aspect ratio) → Name below. Two variants available: 'default' shows members without card styling, 'card' wraps each member in card with rounded corners. Grid is 1 column for single member, 2 columns for 2+ members. Supports image or video for each member via MediaContent. Does not use CardStack - standalone section component.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Growing fast means tough calls. We help you turn pricing from doubt into conviction.",
+        "minChars": 20,
+        "maxChars": 300
+      },
+      "tag": {
+        "required": true,
+        "example": "Team",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "memberRules": {
+      "id": {
+        "required": true,
+        "example": "1",
+        "minChars": 1,
+        "maxChars": 20
+      },
+      "name": {
+        "required": true,
+        "example": "Johan van der Poel",
+        "minChars": 2,
+        "maxChars": 50
+      },
+      "imageSrc": {
+        "required": false,
+        "example": "/team/johan.jpg",
+        "note": "Portrait image (3:3.5 aspect ratio) Either imageSrc or videoSrc should be provided. Image is recommended if no videoSrc."
+      },
+      "videoSrc": {
+        "required": false,
+        "example": "/team/johan.mp4",
+        "note": "Video alternative to image"
+      }
+    },
+    "itemRules": {
+      "minItems": 1,
+      "maxItems": 6,
+      "recommendedItems": "2-4"
+    }
+  },
+  "propsSchema": {
+    "title": "string",
+    "tag": "string",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "membersAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "members": "Array<{ id: string, name: string, imageSrc?: string, imageAlt?: string, videoSrc?: string, videoAriaLabel?: string }>",
+    "memberVariant": "'default' | 'card' (required - 'default': no card styling, 'card': each member wrapped in card with rounded corners)",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Team section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "titleClassName?": "string",
+    "tagClassName?": "string",
+    "membersContainerClassName?": "string",
+    "memberClassName?": "string",
+    "mediaWrapperClassName?": "string",
+    "mediaClassName?": "string",
+    "nameClassName?": "string"
+  },
+  "usageExample": "<TeamCardTen title=\"Growing fast means tough calls. We help you turn pricing from doubt into conviction.\" tag=\"Team\" members={[{ id: '1', name: 'Johan van der Poel', imageSrc: '/team/johan.jpg' }, { id: '2', name: 'Saagar Mehta', imageSrc: '/team/saagar.jpg' }]} memberVariant=\"default\" useInvertedBackground={false} />",
+  "do": [
+    "Use for team pages",
+    "Use for staff directories",
+    "Requires members[]"
+  ],
+  "dont": [
+    "Do not use multiple items",
+    "Do not use more than 4 items",
+    "Do not use more than 6 items"
+  ],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/TeamCardTwo.json b/registry/components/TeamCardTwo.json
new file mode 100644
index 0000000..b3ab48b
--- /dev/null
+++ b/registry/components/TeamCardTwo.json
@@ -0,0 +1,140 @@
+{
+  "name": "TeamCardTwo",
+  "description": "Team member card with image background, overlay info card, and social links.",
+  "details": "Use for team member profiles with visual impact. Layout: Full Image Background → Bottom Overlay Card (Name + Role Badge in header row → Description → Social Link Icons). Card has fixed height (h-100) with image fill. Overlay uses card styling with rounded corners. Name on left, role badge (secondary-button) on right in header. Social links are flexible - pass any Lucide icon with url. Icons use primary-button styling with text-background for contrast. All required fields for visual consistency. Best for team pages, about sections, or leadership displays. Automatically switches between grid (1-4 items) and carousel (5+ items). Optional header with title, description, tag, and buttons.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Meet Our Team",
+        "minChars": 2,
+        "maxChars": 35
+      },
+      "description": {
+        "required": true,
+        "example": "The talented people behind our success",
+        "minChars": 5,
+        "maxChars": 250
+      },
+      "tag": {
+        "required": false,
+        "example": "Team",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "teamMemberRules": {
+      "id": {
+        "required": true,
+        "example": "1",
+        "minChars": 1,
+        "maxChars": 20
+      },
+      "name": {
+        "required": true,
+        "example": "Alisa Hester",
+        "minChars": 2,
+        "maxChars": 50,
+        "note": "Team member name displayed in overlay header"
+      },
+      "role": {
+        "required": true,
+        "example": "Founder & CEO",
+        "minChars": 2,
+        "maxChars": 40,
+        "note": "Role/title displayed in secondary-button badge"
+      },
+      "description": {
+        "required": true,
+        "example": "Former co-founder of Opendoor. Early staff at Spotify and Clearbit.",
+        "minChars": 10,
+        "maxChars": 200,
+        "note": "Brief bio or description"
+      },
+      "imageSrc": {
+        "required": false,
+        "example": "/team/member-1.jpg",
+        "note": "Image path for team member photo Either imageSrc or videoSrc should be provided. Image is recommended if no videoSrc."
+      },
+      "videoSrc": {
+        "required": false,
+        "example": "/team/member-1.mp4",
+        "note": "Video path for team member (alternative to imageSrc)"
+      },
+      "imageAlt": {
+        "required": false,
+        "example": "Portrait of Alisa Hester",
+        "note": "Alt text for image (defaults to member name if not provided)"
+      },
+      "videoAriaLabel": {
+        "required": false,
+        "example": "Video of Alisa Hester",
+        "note": "Aria label for video (defaults to member name if not provided)"
+      },
+      "socialLinks": {
+        "required": false,
+        "structure": {
+          "icon": "LucideIcon - Any Lucide icon component (required)",
+          "url": "string - Social profile URL (required)"
+        },
+        "note": "Flexible social links array. Pass any Lucide icon (Twitter, Linkedin, Globe, Github, etc.) with corresponding URL. Icons display in primary-button styled circles."
+      }
+    }
+  },
+  "propsSchema": {
+    "members": "Array<{ id: string, name: string, role: string, description: string, imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string, socialLinks?: Array<{ icon: LucideIcon, url: string }> }>",
+    "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+    "gridVariant": "'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right' (required)",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
+    "uniformGridCustomHeightClasses?": "string (default: 'min-h-95 2xl:min-h-105')",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Team section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+    "textBoxTitleImageClassName?": "string - For styling images in inline-image layout",
+    "textBoxDescriptionClassName?": "string",
+    "imageClassName?": "string",
+    "overlayClassName?": "string",
+    "nameClassName?": "string",
+    "roleClassName?": "string",
+    "memberDescriptionClassName?": "string",
+    "socialLinksClassName?": "string",
+    "socialIconClassName?": "string",
+    "gridClassName?": "string",
+    "carouselClassName?": "string",
+    "controlsClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string"
+  },
+  "usageExample": "<TeamCardTwo members={[{ id: '1', name: 'Alisa Hester', role: 'Founder & CEO', description: 'Former co-founder of Opendoor. Early staff at Spotify and Clearbit.', imageSrc: '/team/alisa.jpg', socialLinks: [{ icon: Twitter, url: 'https://twitter.com/alisa' }, { icon: Linkedin, url: 'https://linkedin.com/in/alisa' }] }]} title=\"Meet Our Team\" description=\"Get to know the people behind our success\" textboxLayout=\"default\" animationType=\"slide-up\" useInvertedBackground={false} />",
+  "do": [
+    "Use for about pages",
+    "Use for company information",
+    "Use for team pages",
+    "Use for staff directories",
+    "Requires members[]",
+    "Requires titleSegments?[]",
+    "Requires buttons?[]"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/TestimonialAboutCard.json b/registry/components/TestimonialAboutCard.json
new file mode 100644
index 0000000..75c3cb5
--- /dev/null
+++ b/registry/components/TestimonialAboutCard.json
@@ -0,0 +1,91 @@
+{
+  "name": "TestimonialAboutCard",
+  "description": "Card-based about section with tag, title, description footer, icon box, and required media.",
+  "details": "Use for testimonial-style about sections, quotes, or featured content with media. Layout: Two-card grid (3:2 ratio on desktop). Left card: Tag → Title (large heading) → Description and subdescription footer. Features a primary-button icon box positioned half outside the card on the top-left corner. Right card: Required image or video. Best for testimonials, quotes, featured content, or any about section needing prominent media.",
+  "constraints": {
+    "textRules": {
+      "tag": {
+        "required": true,
+        "example": "Testimonial",
+        "minChars": 2,
+        "maxChars": 30
+      },
+      "title": {
+        "required": true,
+        "example": "They took social media off our plate completely and our audience has never been more engaged.",
+        "minChars": 10,
+        "maxChars": 300
+      },
+      "description": {
+        "required": true,
+        "example": "Elena Chen",
+        "minChars": 2,
+        "maxChars": 50
+      },
+      "subdescription": {
+        "required": true,
+        "example": "Bloom Skincare",
+        "minChars": 2,
+        "maxChars": 50
+      }
+    },
+    "mediaRules": {
+      "note": "Either imageSrc or videoSrc is required (discriminated union)",
+      "imageSrc": {
+        "required": "conditional - required if no videoSrc",
+        "example": "https://images.unsplash.com/photo-1616394584738-fc6e612e71b9?w=800",
+        "note": "Either imageSrc or videoSrc should be provided. Image is recommended if no videoSrc."
+      },
+      "videoSrc": {
+        "required": "conditional - required if no imageSrc",
+        "example": "/videos/testimonial.mp4"
+      }
+    }
+  },
+  "propsSchema": {
+    "tag": "string (required)",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "title": "string (required)",
+    "description": "string (required)",
+    "subdescription": "string (required)",
+    "icon": "LucideIcon (required - displayed in the icon box)",
+    "imageSrc": "string (required if no videoSrc)",
+    "imageAlt?": "string (default: '')",
+    "videoSrc": "string (required if no imageSrc)",
+    "videoAriaLabel?": "string (default: 'Testimonial video')",
+    "mediaAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Testimonial section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "contentClassName?": "string",
+    "tagClassName?": "string",
+    "titleClassName?": "string",
+    "descriptionClassName?": "string",
+    "subdescriptionClassName?": "string",
+    "footerClassName?": "string",
+    "iconBoxClassName?": "string",
+    "iconClassName?": "string",
+    "mediaWrapperClassName?": "string",
+    "mediaClassName?": "string"
+  },
+  "usageExample": "<TestimonialAboutCard tag=\"Testimonial\" title=\"They took social media off our plate completely and our audience has never been more engaged.\" description=\"Elena Chen\" subdescription=\"Bloom Skincare\" icon={Quote} imageSrc=\"https://images.unsplash.com/photo-1616394584738-fc6e612e71b9?w=800\" useInvertedBackground={false} />",
+  "do": [
+    "Use for feature showcases",
+    "Use for capability displays",
+    "Use for social proof",
+    "Use for customer reviews",
+    "Use for about pages",
+    "Use for company information"
+  ],
+  "dont": [
+    "Do not use more than 4 items"
+  ],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/TestimonialCardFifteen.json b/registry/components/TestimonialCardFifteen.json
new file mode 100644
index 0000000..c466762
--- /dev/null
+++ b/registry/components/TestimonialCardFifteen.json
@@ -0,0 +1,73 @@
+{
+  "name": "TestimonialCardFifteen",
+  "description": "Centered testimonial with star rating, animated text, author, and avatar group.",
+  "details": "Use for showcasing a single prominent testimonial with social proof. Layout: Star Rating (5 stars at top) → Large Animated Testimonial Text (TextAnimation) → Author Name → Avatar Group. Stars show filled/unfilled based on rating value. TextAnimation uses theme's defaultTextAnimation. AvatarGroup shows 3 avatars on mobile, 6 on desktop. Best for hero-style testimonial sections or featured customer reviews.",
+  "constraints": {
+    "textRules": {
+      "testimonial": {
+        "required": true,
+        "example": "This product has completely transformed how we work. The results speak for themselves.",
+        "minChars": 20,
+        "maxChars": 300
+      },
+      "author": {
+        "required": true,
+        "example": "James Carter, Journalist",
+        "minChars": 2,
+        "maxChars": 60
+      }
+    },
+    "ratingRules": {
+      "rating": {
+        "required": true,
+        "min": 0,
+        "max": 5,
+        "example": 5,
+        "note": "Number of filled stars (0-5)"
+      }
+    },
+    "avatarRules": {
+      "avatars": {
+        "required": true,
+        "minItems": 1,
+        "example": "[{ src: '/avatars/user1.jpg', alt: 'User 1' }]",
+        "note": "Array of avatar objects with src and alt. Shows 3 on mobile, 6 on desktop."
+      }
+    }
+  },
+  "propsSchema": {
+    "testimonial": "string",
+    "rating": "number (0-5)",
+    "author": "string",
+    "avatars": "Array<{ src: string, alt: string }>",
+    "ratingAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal' (required)",
+    "avatarsAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal' (required)",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Testimonial section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "ratingClassName?": "string",
+    "starClassName?": "string",
+    "testimonialClassName?": "string",
+    "avatarGroupClassName?": "string",
+    "avatarClassName?": "string",
+    "avatarImageClassName?": "string"
+  },
+  "usageExample": "<TestimonialCardFifteen testimonial=\"This product has completely transformed how we work.\" rating={5} author=\"James Carter, Journalist\" avatars={[{ src: '/avatars/user1.jpg', alt: 'User 1' }, { src: '/avatars/user2.jpg', alt: 'User 2' }]} useInvertedBackground={false} />",
+  "do": [
+    "Use for landing pages",
+    "Use for feature showcases",
+    "Use for capability displays",
+    "Use for social proof",
+    "Use for customer reviews",
+    "Requires avatars[]"
+  ],
+  "dont": [
+    "Do not use multiple items"
+  ],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/TestimonialCardFive.json b/registry/components/TestimonialCardFive.json
new file mode 100644
index 0000000..2baaa4f
--- /dev/null
+++ b/registry/components/TestimonialCardFive.json
@@ -0,0 +1,162 @@
+{
+  "name": "TestimonialCardFive",
+  "description": "Full-width carousel testimonial section with split card layout showing text content and square image side-by-side.",
+  "details": "Use for testimonials that need equal emphasis on visual content and testimonial text in a carousel format. Uses FullWidthCarousel layout where TextBox is in content-width but carousel spans full viewport width. Each card uses a 50/50 grid split on desktop (text left, square image right) and stacked on mobile (image on top with flex-col-reverse). Cards auto-advance every 5 seconds with clickable dot navigation below. Card content: Tag → Title (4xl, line-clamp-3) → Quote (lg, line-clamp-10) → Author info (avatar, name with role/company, date) on left; Square aspect-ratio media on right. Text uses p-6 md:p-10 padding with gap-10 vertical spacing. Best for high-quality visual testimonials where image and content deserve equal weight. Carousel items are w-70 with mr-6 spacing.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "What Our Clients Say",
+        "minChars": 2,
+        "maxChars": 50
+      },
+      "description": {
+        "required": true,
+        "example": "Hear from those who've experienced our work",
+        "minChars": 5,
+        "maxChars": 250
+      },
+      "tag": {
+        "required": false,
+        "example": "Testimonials",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "testimonialRules": {
+      "id": {
+        "required": true,
+        "example": "1",
+        "minChars": 1,
+        "maxChars": 20
+      },
+      "name": {
+        "required": true,
+        "example": "Alisa Hester, CEO of Ecomflow",
+        "minChars": 2,
+        "maxChars": 80,
+        "note": "Full name including role and company (e.g., 'John Smith, CTO of Tech Corp')"
+      },
+      "date": {
+        "required": true,
+        "example": "Date: 28 October 2024",
+        "minChars": 5,
+        "maxChars": 50,
+        "note": "Date string including 'Date:' prefix"
+      },
+      "title": {
+        "required": true,
+        "example": "We've got only good things to say!",
+        "minChars": 5,
+        "maxChars": 100,
+        "note": "Testimonial headline shown at 4xl, truncated to 3 lines"
+      },
+      "quote": {
+        "required": true,
+        "example": "We have been working with them for over 6 months now, and have been able to scale our business to new heights.",
+        "minChars": 20,
+        "maxChars": 500,
+        "note": "Full testimonial text shown at base/lg size, truncated to 10 lines"
+      },
+      "tag": {
+        "required": true,
+        "example": "Standard Line",
+        "minChars": 2,
+        "maxChars": 30,
+        "note": "Category or plan tag displayed at top of card"
+      },
+      "avatarSrc": {
+        "required": true,
+        "example": "/client-avatar.jpg",
+        "note": "Avatar image shown in TestimonialAuthor component (h-11 aspect-square)"
+      }
+    },
+    "mediaRules": {
+      "imageSrc": {
+        "required": false,
+        "example": "/testimonial-image.jpg",
+        "note": "Either imageSrc or videoSrc should be provided for optimal display Either imageSrc or videoSrc should be provided. Image is recommended if no videoSrc."
+      },
+      "videoSrc": {
+        "required": false,
+        "example": "/testimonial-video.mp4",
+        "note": "Either imageSrc or videoSrc should be provided for optimal display"
+      },
+      "imageAlt": {
+        "required": false,
+        "example": "Team collaboration",
+        "note": "Alt text for testimonial image"
+      },
+      "videoAriaLabel": {
+        "required": false,
+        "example": "Client testimonial video",
+        "note": "ARIA label for testimonial video"
+      },
+      "avatarAlt": {
+        "required": false,
+        "example": "Alisa Hester",
+        "note": "Alt text for avatar image"
+      }
+    },
+    "itemRules": {
+      "minItems": 3,
+      "maxItems": 10,
+      "recommendedItems": "5-6",
+      "note": "Works best with 5-6 testimonials. Auto-advances every 5 seconds with loop enabled."
+    }
+  },
+  "propsSchema": {
+    "testimonials": "Array<{ id: string, name: string, date: string, title: string, quote: string, tag: string, avatarSrc: string, avatarAlt?: string, imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }>",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Testimonials section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+    "textBoxTitleImageClassName?": "string - For styling images in inline-image layout",
+    "textBoxDescriptionClassName?": "string",
+    "cardTagClassName?": "string",
+    "cardTitleClassName?": "string",
+    "cardQuoteClassName?": "string",
+    "cardAuthorClassName?": "string",
+    "cardAvatarWrapperClassName?": "string",
+    "cardAvatarClassName?": "string",
+    "cardNameClassName?": "string",
+    "cardDateClassName?": "string",
+    "cardImageClassName?": "string",
+    "carouselClassName?": "string",
+    "dotsClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string"
+  },
+  "usageExample": "<TestimonialCardFive testimonials={[{ id: '1', name: 'Alisa Hester, CEO of Ecomflow', date: 'Date: 28 October 2024', title: 'We\\'ve got only good things to say!', quote: 'We have been working with them for over 6 months now, and have been able to scale our business to new heights.', tag: 'Standard Line', avatarSrc: '/avatar.jpg', imageSrc: '/testimonial.jpg' }]} title=\"What Our Clients Say\" description=\"Hear from those who've experienced our work\" textboxLayout=\"default\" useInvertedBackground={false} />",
+  "do": [
+    "Use for social proof",
+    "Use for customer reviews",
+    "Requires testimonials[]",
+    "Requires titleSegments?[]",
+    "Requires buttons?[]"
+  ],
+  "dont": [
+    "Do not use less than 3 items",
+    "Do not use more than 10 items"
+  ],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/TestimonialCardOne.json b/registry/components/TestimonialCardOne.json
new file mode 100644
index 0000000..9a869d8
--- /dev/null
+++ b/registry/components/TestimonialCardOne.json
@@ -0,0 +1,136 @@
+{
+  "name": "TestimonialCardOne",
+  "description": "Testimonial card with image background, star rating, name, role, and company overlay.",
+  "details": "Use for displaying customer testimonials with visual impact. Layout: Full Image Background → Bottom Overlay Card (Star Rating → Name → Role + Company). Card has fixed height (h-100, 2xl:h-120) with image fill. Overlay uses card styling with rounded corners. Star rating displayed at top using filled Star icons. Name, role, and company stacked vertically with tight line-height. All core fields required for visual consistency. Best for testimonial sections, reviews, or social proof displays. Automatically switches between grid (1-4 items) and carousel (5+ items). Optional header with title, description, tag, and buttons.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "What Our Customers Say",
+        "minChars": 2,
+        "maxChars": 50
+      },
+      "description": {
+        "required": true,
+        "example": "Real feedback from our valued customers",
+        "minChars": 5,
+        "maxChars": 250
+      },
+      "tag": {
+        "required": false,
+        "example": "Testimonials",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "testimonialRules": {
+      "id": {
+        "required": true,
+        "example": "1",
+        "minChars": 1,
+        "maxChars": 20
+      },
+      "name": {
+        "required": true,
+        "example": "Alisa Hester",
+        "minChars": 2,
+        "maxChars": 50,
+        "note": "Customer name displayed in overlay"
+      },
+      "role": {
+        "required": true,
+        "example": "PM, Hourglass",
+        "minChars": 2,
+        "maxChars": 50,
+        "note": "Customer role/position"
+      },
+      "company": {
+        "required": true,
+        "example": "Web Design Agency",
+        "minChars": 2,
+        "maxChars": 50,
+        "note": "Customer company name"
+      },
+      "rating": {
+        "required": true,
+        "example": 5,
+        "min": 1,
+        "max": 5,
+        "note": "Star rating (1-5 stars)"
+      },
+      "imageSrc": {
+        "required": false,
+        "example": "/testimonials/alisa.jpg",
+        "note": "Image path for customer photo Either imageSrc or videoSrc should be provided. Image is recommended if no videoSrc."
+      },
+      "videoSrc": {
+        "required": false,
+        "example": "/testimonials/alisa.mp4",
+        "note": "Video path for customer (alternative to imageSrc)"
+      },
+      "imageAlt": {
+        "required": false,
+        "example": "Portrait of Alisa Hester",
+        "note": "Alt text for image (defaults to customer name if not provided)"
+      },
+      "videoAriaLabel": {
+        "required": false,
+        "example": "Video of Alisa Hester",
+        "note": "Aria label for video (defaults to customer name if not provided)"
+      }
+    }
+  },
+  "propsSchema": {
+    "testimonials": "Array<{ id: string, name: string, role: string, company: string, rating: number, imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }>",
+    "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+    "uniformGridCustomHeightClasses?": "string (default: 'min-h-95 2xl:min-h-105')",
+    "gridVariant": "'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right' (required)",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d'",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Testimonials section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+    "textBoxTitleImageClassName?": "string - For styling images in inline-image layout",
+    "textBoxDescriptionClassName?": "string",
+    "imageClassName?": "string",
+    "overlayClassName?": "string",
+    "ratingClassName?": "string",
+    "nameClassName?": "string",
+    "roleClassName?": "string",
+    "companyClassName?": "string",
+    "gridClassName?": "string",
+    "carouselClassName?": "string",
+    "controlsClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string"
+  },
+  "usageExample": "<TestimonialCardOne testimonials={[{ id: '1', name: 'Alisa Hester', role: 'PM, Hourglass', company: 'Web Design Agency', rating: 5, imageSrc: '/testimonials/alisa.jpg' }]} title=\"What Our Customers Say\" gridVariant=\"uniform-all-items-equal\" textboxLayout=\"default\" animationType=\"slide-up\" useInvertedBackground={false} />",
+  "do": [
+    "Use for social proof",
+    "Use for customer reviews",
+    "Requires testimonials[]",
+    "Requires titleSegments?[]",
+    "Requires buttons?[]"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/TestimonialCardSix.json b/registry/components/TestimonialCardSix.json
new file mode 100644
index 0000000..2c7aa66
--- /dev/null
+++ b/registry/components/TestimonialCardSix.json
@@ -0,0 +1,130 @@
+{
+  "name": "TestimonialCardSix",
+  "description": "Dual auto-scrolling marquee testimonial section with reversed testimonial cards moving in opposite directions.",
+  "details": "Use for dynamic testimonial displays with continuous scrolling. Layout: Optional TextBox Header → Dual Auto-Scrolling Marquees (Top & Bottom). Each testimonial card shows quote text (line-clamped to 2 lines for consistent heights) with TestimonialAuthor below (avatar/icon, name, handle). Top marquee moves in one direction (default: left), bottom marquee automatically moves opposite direction (right). Both marquees use same speed and display same testimonials in reversed order to avoid perfect alignment. Uses react-fast-marquee for smooth infinite scrolling. Supports quote icon or custom icon per testimonial. Speed is customizable (default: 40px/s). All core fields required for visual consistency. Best for social proof sections, client feedback showcases, or review displays. Optional header with title, description, tag, and buttons via CardStackTextBox.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "What Our Clients Say",
+        "minChars": 2,
+        "maxChars": 50
+      },
+      "description": {
+        "required": true,
+        "example": "Hear from those who've experienced our work",
+        "minChars": 5,
+        "maxChars": 250
+      },
+      "tag": {
+        "required": false,
+        "example": "Testimonials",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "testimonialRules": {
+      "id": {
+        "required": true,
+        "example": "1",
+        "minChars": 1,
+        "maxChars": 20
+      },
+      "name": {
+        "required": true,
+        "example": "Sarah Johnson",
+        "minChars": 2,
+        "maxChars": 50
+      },
+      "handle": {
+        "required": true,
+        "example": "@sarahj",
+        "minChars": 2,
+        "maxChars": 50,
+        "note": "Social media handle or role/company"
+      },
+      "testimonial": {
+        "required": true,
+        "example": "This component library has transformed our development workflow. The quality and attention to detail is exceptional.",
+        "minChars": 20,
+        "maxChars": 200,
+        "note": "Testimonial text automatically clamped to 2 lines for consistent card heights"
+      },
+      "imageSrc": {
+        "required": false,
+        "example": "/avatar.jpg",
+        "note": "Avatar image shown in TestimonialAuthor (aspect-square)"
+      },
+      "imageAlt": {
+        "required": false,
+        "example": "Sarah Johnson",
+        "note": "Alt text for avatar image"
+      },
+      "icon": {
+        "required": false,
+        "example": "Quote",
+        "note": "LucideIcon component to display if no imageSrc provided (defaults to Quote icon)"
+      }
+    },
+    "itemRules": {
+      "minItems": 6,
+      "maxItems": 20,
+      "recommendedItems": "8-12",
+      "note": "Works best with 8-12 testimonials. Continuously scrolls with top and bottom marquees in opposite directions."
+    }
+  },
+  "propsSchema": {
+    "testimonials": "Array<{ id: string, name: string, handle: string, testimonial: string, imageSrc?: string, imageAlt?: string, icon?: LucideIcon }>",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground": "boolean",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "speed?": "number (default: 40)",
+    "topMarqueeDirection?": "'left' | 'right' (default: 'left')",
+    "ariaLabel?": "string (default: 'Testimonials section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "carouselClassName?": "string",
+    "bottomCarouselClassName?": "string",
+    "cardClassName?": "string",
+    "testimonialClassName?": "string",
+    "imageWrapperClassName?": "string",
+    "imageClassName?": "string",
+    "iconClassName?": "string",
+    "nameClassName?": "string",
+    "handleClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+    "textBoxTitleImageClassName?": "string - For styling images in inline-image layout",
+    "textBoxDescriptionClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string"
+  },
+  "usageExample": "<TestimonialCardSix testimonials={[{ id: '1', name: 'Sarah Johnson', handle: '@sarahj', testimonial: 'This component library has transformed our development workflow. The quality and attention to detail is exceptional.', imageSrc: '/avatar1.jpg', imageAlt: 'Sarah Johnson' }, { id: '2', name: 'Michael Chen', handle: '@mchen', testimonial: 'Incredibly well-designed components that are both beautiful and functional. Highly recommend!', imageSrc: '/avatar2.jpg', imageAlt: 'Michael Chen' }]} animationType=\"slide-up\" title=\"What Our Clients Say\" description=\"Hear from those who've experienced our work\" textboxLayout=\"default\" useInvertedBackground={false} />",
+  "do": [
+    "Use for social proof",
+    "Use for customer reviews",
+    "Requires testimonials[]",
+    "Requires titleSegments?[]",
+    "Requires buttons?[]"
+  ],
+  "dont": [
+    "Do not use less than 6 items",
+    "Do not use more than 20 items"
+  ],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/TestimonialCardSixteen.json b/registry/components/TestimonialCardSixteen.json
new file mode 100644
index 0000000..2890767
--- /dev/null
+++ b/registry/components/TestimonialCardSixteen.json
@@ -0,0 +1,109 @@
+{
+  "name": "TestimonialCardSixteen",
+  "description": "Uniform grid testimonial cards with image, star rating overlay, and KPI stats section below.",
+  "details": "Use for showcasing multiple testimonials with a stats/KPI summary. Layout: TextBox Header → Uniform Grid of Testimonial Cards → KPI Stats Bar. Each card displays a full-bleed image with a glassmorphic overlay containing star rating, name, role, and company. Fixed 'uniform-all-items-equal' grid layout. Below the grid, a responsive KPI section shows 3 stats with value and label, separated by dividers (horizontal on mobile, vertical on desktop). Best for client testimonials with credibility metrics.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "What Our Clients Say",
+        "minChars": 2,
+        "maxChars": 50
+      },
+      "description": {
+        "required": true,
+        "example": "Hear from those who've experienced our work",
+        "minChars": 5,
+        "maxChars": 300
+      },
+      "tag": {
+        "required": false,
+        "example": "Testimonials",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "testimonialRules": {
+      "minItems": 1,
+      "maxItems": 4,
+      "recommendedItems": "3",
+      "structure": {
+        "id": "string - Unique identifier (required)",
+        "name": "string - Client name (required)",
+        "role": "string - Client role/position (required)",
+        "company": "string - Client company (required)",
+        "rating": "number - Star rating 0-5 (required)",
+        "imageSrc?": "string - Path to client image",
+        "videoSrc?": "string - Path to client video",
+        "imageAlt?": "string - Alt text for image",
+        "videoAriaLabel?": "string - Aria label for video"
+      }
+    },
+    "kpiRules": {
+      "kpiItems": {
+        "required": true,
+        "fixedCount": 3,
+        "note": "Exactly 3 KPI items required"
+      },
+      "kpiItemStructure": {
+        "value": "string - The stat value (e.g., '180+', '96%', '15+') (required)",
+        "label": "string - Description of the stat (required)"
+      }
+    }
+  },
+  "propsSchema": {
+    "testimonials": "Array<{ id: string, name: string, role: string, company: string, rating: number, imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }>",
+    "kpiItems": "[KpiItem, KpiItem, KpiItem] - Exactly 3 KPI stats (required)",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d' (required)",
+    "title": "string (required)",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string (required)",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required)",
+    "useInvertedBackground": "boolean (required)",
+    "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+    "uniformGridCustomHeightClasses?": "string (default: 'min-h-95 2xl:min-h-105')",
+    "ariaLabel?": "string (default: 'Testimonials section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "imageClassName?": "string",
+    "overlayClassName?": "string",
+    "ratingClassName?": "string",
+    "nameClassName?": "string",
+    "roleClassName?": "string",
+    "companyClassName?": "string",
+    "gridClassName?": "string",
+    "carouselClassName?": "string",
+    "controlsClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string",
+    "textBoxTitleImageClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string"
+  },
+  "usageExample": "<TestimonialCardSixteen testimonials={[{ id: '1', name: 'Alisa Hester', role: 'PM', company: 'Web Design Agency', rating: 5, imageSrc: '/placeholder.jpg' }]} kpiItems={[{ value: '180+', label: 'Projects completed' }, { value: '96%', label: 'Client satisfaction' }, { value: '15+', label: 'Years experience' }]} animationType=\"slide-up\" title=\"What Our Clients Say\" description=\"Hear from those who've experienced our work\" textboxLayout=\"default\" useInvertedBackground={false} />",
+  "do": [
+    "Use for testimonial sections with visual emphasis on people",
+    "Include exactly 3 KPI items for the bottom section",
+    "Use high-quality portrait images",
+    "Supports 3D animations"
+  ],
+  "dont": [
+    "Do not use without KPI items",
+    "Do not use without portrait images"
+  ],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/TestimonialCardTen.json b/registry/components/TestimonialCardTen.json
new file mode 100644
index 0000000..ff7566d
--- /dev/null
+++ b/registry/components/TestimonialCardTen.json
@@ -0,0 +1,132 @@
+{
+  "name": "TestimonialCardTen",
+  "description": "Split layout testimonial section with titled quote card, navigation arrows, and media display. Supports card and border variants.",
+  "details": "Use for showcasing featured testimonials with a title heading per testimonial. Layout: CardStackTextBox header → 2-column grid with quote card (left) and media (right). Quote card contains title, quote text, and bottom row with author info (name, role) on left and navigation buttons on right. Mobile divider line separates quote from bottom row. Uses AnimationContainer for smooth fade transitions when navigating. Card variant: quote area has card styling. Border variant: removes card styling, adds vertical border between columns on desktop and horizontal borders on mobile, uses inverted background directly for text color. Best for testimonials that benefit from a headline/title per quote.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Trusted by industry leaders",
+        "minChars": 2,
+        "maxChars": 50
+      },
+      "description": {
+        "required": true,
+        "example": "See what our customers have to say",
+        "minChars": 5,
+        "maxChars": 300
+      },
+      "tag": {
+        "required": false,
+        "example": "Testimonials",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "testimonialRules": {
+      "id": {
+        "required": true,
+        "example": "1",
+        "note": "Unique identifier for the testimonial"
+      },
+      "title": {
+        "required": true,
+        "example": "Personalized AI, redefined with Mindex",
+        "minChars": 10,
+        "maxChars": 80,
+        "note": "Headline/title displayed at top of quote card"
+      },
+      "quote": {
+        "required": true,
+        "example": "Working with this AI has been a game changer! It feels like the system really listens and adapts to what I need.",
+        "minChars": 20,
+        "maxChars": 500
+      },
+      "name": {
+        "required": true,
+        "example": "Sarah Mitchell",
+        "minChars": 2,
+        "maxChars": 50
+      },
+      "role": {
+        "required": true,
+        "example": "CEO of BrightPath Solutions",
+        "minChars": 2,
+        "maxChars": 100
+      },
+      "imageSrc": {
+        "required": false,
+        "example": "/images/testimonial1.webp",
+        "note": "Image source URL (either imageSrc or videoSrc required) Either imageSrc or videoSrc should be provided. Image is recommended if no videoSrc."
+      },
+      "videoSrc": {
+        "required": false,
+        "example": "/videos/testimonial.mp4",
+        "note": "Video source URL (either imageSrc or videoSrc required)"
+      },
+      "imageAlt": {
+        "required": false,
+        "example": "Sarah Mitchell headshot",
+        "note": "Alt text for images"
+      },
+      "videoAriaLabel": {
+        "required": false,
+        "example": "Testimonial video",
+        "note": "Aria label for videos"
+      }
+    }
+  },
+  "propsSchema": {
+    "testimonials": "Array<{ id: string, title: string, quote: string, name: string, role: string, imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }>",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required)",
+    "useInvertedBackground": "boolean",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "ariaLabel?": "string (default: 'Testimonials section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string",
+    "titleImageWrapperClassName?": "string",
+    "titleImageClassName?": "string",
+    "contentClassName?": "string",
+    "quoteCardClassName?": "string",
+    "testimonialTitleClassName?": "string",
+    "quoteClassName?": "string",
+    "nameClassName?": "string",
+    "roleClassName?": "string",
+    "navigationClassName?": "string",
+    "navigationButtonClassName?": "string",
+    "mediaCardClassName?": "string",
+    "mediaClassName?": "string"
+  },
+  "usageExample": "<TestimonialCardTen testimonials={[{ id: '1', title: 'Personalized AI, redefined with Mindex', quote: 'Working with this AI has been a game changer! It feels like the system really listens and adapts to what I need.', name: 'Sarah Mitchell', role: 'CEO of BrightPath Solutions', imageSrc: '/images/testimonial1.webp', imageAlt: 'Sarah Mitchell' }]} title=\"Trusted by industry leaders\" description=\"See what our customers have to say\" textboxLayout=\"default\" useInvertedBackground={false} />",
+  "do": [
+    "Use for feature showcases",
+    "Use for capability displays",
+    "Use for social proof",
+    "Use for customer reviews",
+    "Requires testimonials[]",
+    "Requires titleSegments?[]",
+    "Requires buttons?[]"
+  ],
+  "dont": [
+    "Do not use more than 4 items"
+  ],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/TestimonialCardThirteen.json b/registry/components/TestimonialCardThirteen.json
new file mode 100644
index 0000000..1c3d9ac
--- /dev/null
+++ b/registry/components/TestimonialCardThirteen.json
@@ -0,0 +1,126 @@
+{
+  "name": "TestimonialCardThirteen",
+  "description": "Testimonial cards with star ratings or quote icon, testimonial text, and author details.",
+  "details": "Use for displaying customer reviews with either star ratings or a quote icon. Set showRating={true} for star ratings (5 stars, filled based on rating value) or showRating={false} for a single quote icon. Layout: Star Rating/Quote Icon → Testimonial Text → Author Info (image/icon, name, handle). Cards are displayed in a grid or carousel layout. Best for customer reviews, product feedback, or service testimonials.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "What Our Clients Say",
+        "minChars": 2,
+        "maxChars": 50
+      },
+      "description": {
+        "required": true,
+        "example": "Hear from those who've experienced our work",
+        "minChars": 5,
+        "maxChars": 300
+      },
+      "tag": {
+        "required": false,
+        "example": "Testimonials",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "testimonialRules": {
+      "id": {
+        "required": true,
+        "example": "1",
+        "note": "Unique identifier for the testimonial"
+      },
+      "name": {
+        "required": true,
+        "example": "Sarah Johnson",
+        "minChars": 2,
+        "maxChars": 50
+      },
+      "handle": {
+        "required": true,
+        "example": "@sarahj",
+        "minChars": 2,
+        "maxChars": 30
+      },
+      "testimonial": {
+        "required": true,
+        "example": "Amazing product that transformed our workflow!",
+        "minChars": 10,
+        "maxChars": 500
+      },
+      "rating": {
+        "required": true,
+        "example": 5,
+        "note": "Number from 1-5 indicating star rating"
+      },
+      "imageSrc": {
+        "required": false,
+        "example": "/testimonials/sarah.jpg",
+        "note": "Author avatar image (either imageSrc or icon required)"
+      },
+      "icon": {
+        "required": false,
+        "example": "Quote",
+        "note": "LucideIcon for author avatar (either imageSrc or icon required)"
+      }
+    }
+  },
+  "propsSchema": {
+    "testimonials": "Array<{ id: string, name: string, handle: string, testimonial: string, rating: number, imageSrc?: string, imageAlt?: string, icon?: LucideIcon }>",
+    "showRating": "boolean - true for star ratings, false for quote icon (required)",
+    "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+    "uniformGridCustomHeightClasses?": "string (default: 'min-h-none')",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d'",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required)",
+    "useInvertedBackground": "boolean",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "ariaLabel?": "string (default: 'Testimonials section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string",
+    "textBoxTitleImageClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string",
+    "imageWrapperClassName?": "string",
+    "imageClassName?": "string",
+    "iconClassName?": "string",
+    "nameClassName?": "string",
+    "handleClassName?": "string",
+    "testimonialClassName?": "string",
+    "ratingClassName?": "string",
+    "contentWrapperClassName?": "string",
+    "gridClassName?": "string",
+    "carouselClassName?": "string",
+    "controlsClassName?": "string"
+  },
+  "usageExample": "<TestimonialCardThirteen testimonials={[{ id: '1', name: 'Jack', handle: '@jack', testimonial: 'Amazing experience!', rating: 5, icon: Quote }, { id: '2', name: 'Sarah', handle: '@sarah', testimonial: 'Highly recommended!', rating: 4, imageSrc: '/testimonials/sarah.jpg' }]} showRating={true} title=\"What Our Clients Say\" description=\"Hear from those who've experienced our work\" textboxLayout=\"default\" animationType=\"slide-up\" useInvertedBackground={false} />",
+  "do": [
+    "Use for social proof",
+    "Use for customer reviews",
+    "Use for product catalogs",
+    "Use for e-commerce",
+    "Requires testimonials[]",
+    "Requires titleSegments?[]",
+    "Requires buttons?[]"
+  ],
+  "dont": [
+    "Do not use multiple items"
+  ],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/TestimonialCardTwelve.json b/registry/components/TestimonialCardTwelve.json
new file mode 100644
index 0000000..f0fda9d
--- /dev/null
+++ b/registry/components/TestimonialCardTwelve.json
@@ -0,0 +1,93 @@
+{
+  "name": "TestimonialCardTwelve",
+  "description": "Minimal testimonial card with avatar group, title, and tag in a single centered card layout.",
+  "details": "Use for compact social proof or customer testimonial sections. Features a single centered card containing: Tag at top, large centered title, and AvatarGroup showing customer photos. Responsive avatar display: shows 3 avatars on mobile (below 768px), 4 on desktop. Avatar images use progressive sizing with overlap effect. Best for 'Trusted by thousands' callouts, social proof ('10,000+ customers'), or customer overview sections. Uses shouldUseInvertedText for proper text colors inside cards.",
+  "constraints": {
+    "textRules": {
+      "cardTitle": {
+        "required": true,
+        "example": "Over 10,000 customers trust us to deliver exceptional results",
+        "minChars": 10,
+        "maxChars": 120
+      },
+      "cardTag": {
+        "required": true,
+        "example": "See what they say",
+        "minChars": 5,
+        "maxChars": 40
+      }
+    },
+    "testimonialRules": {
+      "id": {
+        "required": true,
+        "example": "1",
+        "minChars": 1,
+        "maxChars": 20
+      },
+      "name": {
+        "required": true,
+        "example": "Sarah Johnson",
+        "minChars": 2,
+        "maxChars": 50,
+        "note": "Used as fallback for imageAlt"
+      },
+      "imageSrc": {
+        "required": true,
+        "example": "/testimonials/sarah.jpg",
+        "note": "Image path for customer photo"
+      },
+      "imageAlt": {
+        "required": false,
+        "example": "Sarah Johnson",
+        "minChars": 2,
+        "maxChars": 50,
+        "note": "Alt text for accessibility (defaults to name)"
+      }
+    },
+    "itemRules": {
+      "minItems": 3,
+      "maxItems": 10,
+      "recommendedItems": "4-6",
+      "note": "Shows 3 avatars on mobile, 4 on desktop. Remaining count displayed as '+N'. Works best with 4-6 testimonials."
+    }
+  },
+  "propsSchema": {
+    "testimonials": "Array<{ id: string, name: string, imageSrc: string, imageAlt?: string }>",
+    "cardTitle": "string",
+    "cardTag": "string",
+    "cardTagIcon?": "LucideIcon",
+    "buttons?": "Array<{ text: string, href?: string, onClick?: () => void }>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "cardAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal' (required)",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Testimonials section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "avatarGroupClassName?": "string",
+    "avatarClassName?": "string",
+    "cardTitleClassName?": "string",
+    "cardTagClassName?": "string",
+    "buttonContainerClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string"
+  },
+  "usageExample": "<TestimonialCardTwelve testimonials={[{ id: '1', name: 'Sarah Johnson', imageSrc: '/testimonials/sarah.jpg' }, { id: '2', name: 'Michael Chen', imageSrc: '/testimonials/michael.jpg' }, { id: '3', name: 'Emma Davis', imageSrc: '/testimonials/emma.jpg' }, { id: '4', name: 'James Wilson', imageSrc: '/testimonials/james.jpg' }]} cardTitle=\"Over 10,000 customers trust us to deliver exceptional results\" cardTag=\"See what they say\" useInvertedBackground={false} />",
+  "do": [
+    "Use for feature showcases",
+    "Use for capability displays",
+    "Use for social proof",
+    "Use for customer reviews",
+    "Requires testimonials[]"
+  ],
+  "dont": [
+    "Do not use multiple items",
+    "Do not use less than 3 items",
+    "Do not use more than 10 items"
+  ],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/TestimonialCardTwo.json b/registry/components/TestimonialCardTwo.json
new file mode 100644
index 0000000..adcfcc8
--- /dev/null
+++ b/registry/components/TestimonialCardTwo.json
@@ -0,0 +1,123 @@
+{
+  "name": "TestimonialCardTwo",
+  "description": "Testimonial card with circular image or icon, name, role, and testimonial text.",
+  "details": "Use for displaying customer testimonials in a clean, card-based layout. Layout: Circular Image/Icon → Name + Role → Testimonial Text. If imageSrc is provided, displays circular profile image; otherwise shows icon (defaults to Quote if not specified). Icon/image container uses primary-button styling with rounded-theme. All text stacked vertically with consistent spacing. All core fields required for visual consistency. Best for testimonial grids, review sections, or customer feedback displays. Automatically switches between grid (1-4 items) and carousel (5+ items). Optional header with title, description, tag, and buttons.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Customer Reviews",
+        "minChars": 2,
+        "maxChars": 50
+      },
+      "description": {
+        "required": true,
+        "example": "See what our customers have to say",
+        "minChars": 5,
+        "maxChars": 250
+      },
+      "tag": {
+        "required": false,
+        "example": "Reviews",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "testimonialRules": {
+      "id": {
+        "required": true,
+        "example": "1",
+        "minChars": 1,
+        "maxChars": 20
+      },
+      "name": {
+        "required": true,
+        "example": "Sarah Mitchell",
+        "minChars": 2,
+        "maxChars": 50,
+        "note": "Customer name"
+      },
+      "role": {
+        "required": true,
+        "example": "Director of Operations",
+        "minChars": 2,
+        "maxChars": 80,
+        "note": "Customer role/position"
+      },
+      "testimonial": {
+        "required": true,
+        "example": "The attention to detail and commitment to excellence was outstanding throughout the entire project.",
+        "minChars": 10,
+        "maxChars": 500,
+        "note": "Testimonial text content"
+      },
+      "imageSrc": {
+        "required": false,
+        "example": "/testimonials/sarah.jpg",
+        "note": "Optional image path for customer photo. If not provided, icon will be displayed instead."
+      },
+      "imageAlt": {
+        "required": false,
+        "example": "Portrait of Sarah Mitchell",
+        "note": "Alt text for image (defaults to customer name if not provided)"
+      },
+      "icon": {
+        "required": false,
+        "example": "Package",
+        "note": "Optional Lucide icon to display when no image is provided. Defaults to Quote icon."
+      }
+    }
+  },
+  "propsSchema": {
+    "testimonials": "Array<{ id: string, name: string, role: string, testimonial: string, imageSrc?: string, imageAlt?: string, icon?: LucideIcon }>",
+    "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+    "uniformGridCustomHeightClasses?": "string (default: 'min-h-none')",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d'",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Testimonials section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+    "textBoxTitleImageClassName?": "string - For styling images in inline-image layout",
+    "textBoxDescriptionClassName?": "string",
+    "imageWrapperClassName?": "string",
+    "imageClassName?": "string",
+    "iconClassName?": "string",
+    "nameClassName?": "string",
+    "roleClassName?": "string",
+    "testimonialClassName?": "string",
+    "gridClassName?": "string",
+    "carouselClassName?": "string",
+    "controlsClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string"
+  },
+  "usageExample": "<TestimonialCardTwo testimonials={[{ id: '1', name: 'Sarah Mitchell', role: 'Director of Operations', testimonial: 'The attention to detail and commitment to excellence was outstanding.', icon: Package }]} title=\"Customer Reviews\" textboxLayout=\"default\" animationType=\"slide-up\" useInvertedBackground={false} />",
+  "do": [
+    "Use for social proof",
+    "Use for customer reviews",
+    "Requires testimonials[]",
+    "Requires titleSegments?[]",
+    "Requires buttons?[]"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/TextAbout.json b/registry/components/TextAbout.json
new file mode 100644
index 0000000..361a39e
--- /dev/null
+++ b/registry/components/TextAbout.json
@@ -0,0 +1,55 @@
+{
+  "name": "TextAbout",
+  "description": "Centered about section with optional tag, large animated text, and optional buttons below.",
+  "details": "Use for simple, impactful about statements. Features an optional Tag chip above the title, centered large text (2xl on mobile, 5xl on desktop) with TextAnimation using words-trigger variant, and up to 2 optional CTA buttons with primary/secondary styling. Button variant controlled by ThemeProvider, text animations use theme defaults.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "We build products that empower teams to create exceptional digital experiences",
+        "minChars": 10,
+        "maxChars": 150
+      }
+    },
+    "buttonRules": {
+      "maxButtons": 2,
+      "structure": {
+        "text": "string - Button label (required)",
+        "href": "string - Link destination (optional)",
+        "onClick": "() => void - Click handler (optional)",
+        "props": "Partial<ButtonPropsForVariant> - Additional button props (optional)"
+      },
+      "note": "Button variant controlled by ThemeProvider's defaultButtonVariant. Border radius controlled by ThemeProvider's borderRadius. All sections should be wrapped in a single ThemeProvider at the app/page level."
+    }
+  },
+  "propsSchema": {
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "title": "string",
+    "buttons?": "Array<{ text: string, onClick?: () => void, href?: string, props?: Partial<ButtonPropsForVariant<CTAButtonVariant>> }>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'About section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "titleClassName?": "string",
+    "buttonContainerClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string"
+  },
+  "usageExample": "// Wrap in ThemeProvider\n<ThemeProvider defaultButtonVariant=\"icon-arrow\" defaultTextAnimation=\"reveal-blur\" borderRadius=\"soft\" background=\"aurora\" cardStyle=\"glass-elevated\" primaryButtonStyle=\"gradient\" secondaryButtonStyle=\"glass\">\n  <TextAbout tag=\"About Us\" title=\"We create exceptional digital experiences\" useInvertedBackground={false} buttons={[{ text: 'Get Started', href: 'https://example.com' }, { text: 'Learn More', href: 'about' }]} />\n</ThemeProvider>",
+  "do": [
+    "Use for feature showcases",
+    "Use for capability displays",
+    "Use for about pages",
+    "Use for company information",
+    "Requires buttons?[]"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/TextAnimation.json b/registry/components/TextAnimation.json
new file mode 100644
index 0000000..cd80555
--- /dev/null
+++ b/registry/components/TextAnimation.json
@@ -0,0 +1,36 @@
+{
+  "name": "TextAnimation",
+  "description": "Unified scroll-triggered text animation component with three distinct animation types and two trigger variants.",
+  "details": "A versatile text animation component that offers three animation types, each with two trigger variants (trigger, words-trigger).",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "This animation responds to scroll. Watch as the text comes to life."
+      }
+    }
+  },
+  "propsSchema": {
+    "type?": "'entrance-slide' | 'reveal-blur' | 'background-highlight'",
+    "title": "string",
+    "children?": "React.ReactNode",
+    "variant?": "'trigger' | 'words-trigger'",
+    "className?": "string",
+    "duration?": "number",
+    "stagger?": "number",
+    "start?": "string",
+    "end?": "string",
+    "ariaLabel?": "string",
+    "gradientColors?": "{ from: string, to: string }"
+  },
+  "usageExample": "<TextAnimation />",
+  "do": [
+    "Use for general use"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/TextBox.json b/registry/components/TextBox.json
new file mode 100644
index 0000000..84025c5
--- /dev/null
+++ b/registry/components/TextBox.json
@@ -0,0 +1,66 @@
+{
+  "name": "TextBox",
+  "description": "Flexible text composition component with animated title and description.",
+  "details": "Use for text content blocks with optional tag and up to 2 CTAs. Supports default (centered), split (tag + title + description left, buttons right), split-actions (tag + title left, buttons only right), or split-description (tag + title left, description only right). Text animations use ThemeProvider defaults.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Welcome to Our Platform",
+        "minChars": 2,
+        "maxChars": 100
+      },
+      "description": {
+        "required": true,
+        "example": "Discover amazing features and capabilities",
+        "minChars": 5,
+        "maxChars": 500
+      },
+      "tag": {
+        "required": false,
+        "example": "New",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    }
+  },
+  "propsSchema": {
+    "title": "string",
+    "description": "string",
+    "type?": "'entrance-slide' | 'reveal-blur' | 'background-highlight'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' (required)",
+    "center?": "boolean (default: false)",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "duration?": "number (default: 1)",
+    "start?": "string (default: 'top 80%')",
+    "end?": "string (default: 'top 20%')",
+    "gradientColors?": "{ from: string, to: string }",
+    "children?": "React.ReactNode",
+    "className?": "string",
+    "titleClassName?": "string",
+    "descriptionClassName?": "string",
+    "tagClassName?": "string",
+    "buttonContainerClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string",
+    "avatars?": "Array<{ src: string, alt?: string }> - User avatar images",
+    "avatarText?": "string",
+    "avatarGroupClassName?": "string"
+  },
+  "usageExample": "<TextBox title=\"Welcome\" description=\"Get started with our platform today\" buttons={[{ text: 'Learn More', href: 'about' }]} center={true} />",
+  "do": [
+    "Use for general use",
+    "Requires buttons?[]",
+    "Requires avatars?[]"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/TextNumberCount.json b/registry/components/TextNumberCount.json
new file mode 100644
index 0000000..75acdc6
--- /dev/null
+++ b/registry/components/TextNumberCount.json
@@ -0,0 +1,40 @@
+{
+  "name": "TextNumberCount",
+  "description": "Animated number counter that increments smoothly from a start to an end value.",
+  "details": "Use for statistics, or metrics where a counting animation adds emphasis. Numbers animate on mount or when scrolled into view. Supports decimals, currency, and optional suffix/prefix.",
+  "constraints": {
+    "numberRules": {
+      "value": {
+        "required": true,
+        "example": 99.99
+      },
+      "startFrom": {
+        "required": false,
+        "example": 0
+      }
+    }
+  },
+  "propsSchema": {
+    "value": "number",
+    "startFrom?": "number",
+    "duration?": "number",
+    "format?": "Intl.NumberFormatOptions",
+    "locales?": "string",
+    "prefix?": "string",
+    "suffix?": "string",
+    "animateOnScroll?": "boolean",
+    "threshold?": "number",
+    "className?": "string"
+  },
+  "usageExample": "<TextNumberCount />",
+  "do": [
+    "Use for statistics displays",
+    "Use for achievement showcases"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/TextSplitAbout.json b/registry/components/TextSplitAbout.json
new file mode 100644
index 0000000..f8ddf22
--- /dev/null
+++ b/registry/components/TextSplitAbout.json
@@ -0,0 +1,66 @@
+{
+  "name": "TextSplitAbout",
+  "description": "Split-layout about section with large heading on left and multiple description paragraphs with optional buttons on right.",
+  "details": "Use for about sections with prominent messaging and optional CTA. Features responsive split layout with large animated heading (7xl) on left, multiple description paragraphs with optional buttons on right. Each description text animates independently. Supports up to 2 buttons with primary/secondary styling, optional border separator below content. Button variant controlled by ThemeProvider, text animations use theme defaults.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "About Us",
+        "minChars": 2,
+        "maxChars": 30
+      },
+      "description": {
+        "required": true,
+        "type": "array of strings",
+        "example": [
+          "We're a team passionate about creating exceptional digital experiences",
+          "Our mission is to empower designers and developers"
+        ],
+        "minChars": 10,
+        "maxChars": 300,
+        "note": "Each description paragraph should be 10-300 characters"
+      }
+    },
+    "buttonRules": {
+      "maxButtons": 2,
+      "structure": {
+        "text": "string - Button label (required)",
+        "href": "string - Link destination (optional)",
+        "onClick": "() => void - Click handler (optional)",
+        "props": "Partial<ButtonPropsForVariant> - Additional button props (optional)"
+      },
+      "note": "Button variant controlled by ThemeProvider's defaultButtonVariant. Border radius controlled by ThemeProvider's borderRadius. All sections should be wrapped in a single ThemeProvider at the app/page level."
+    }
+  },
+  "propsSchema": {
+    "title": "string",
+    "description": "string[]",
+    "buttons?": "Array<{ text: string, onClick?: () => void, href?: string, props?: Partial<ButtonPropsForVariant<CTAButtonVariant>> }>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "showBorder?": "boolean (default: false)",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'About section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "titleClassName?": "string",
+    "descriptionClassName?": "string",
+    "buttonContainerClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string"
+  },
+  "usageExample": "// Wrap in ThemeProvider\n<ThemeProvider defaultButtonVariant=\"shift-hover\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"rounded\" background=\"aurora\" cardStyle=\"glass-elevated\" primaryButtonStyle=\"gradient\" secondaryButtonStyle=\"glass\">\n  <TextSplitAbout title=\"About Us\" description={[\"We create amazing experiences\", \"Our mission is to empower teams\"]} showBorder={true} useInvertedBackground={false} buttons={[{ text: 'Learn More', href: 'about' }]} />\n</ThemeProvider>",
+  "do": [
+    "Use for feature showcases",
+    "Use for capability displays",
+    "Use for about pages",
+    "Use for company information",
+    "Requires buttons?[]"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/Textarea.json b/registry/components/Textarea.json
new file mode 100644
index 0000000..f590c6a
--- /dev/null
+++ b/registry/components/Textarea.json
@@ -0,0 +1,36 @@
+{
+  "name": "Textarea",
+  "description": "Styled textarea field with secondary-button styling and rounded-theme-capped borders.",
+  "details": "Use for multi-line text input in forms. Features secondary-button background styling, customizable row height, resize disabled, and focus states. Includes disabled state with reduced opacity. Ideal for messages, comments, or longer text content.",
+  "constraints": {
+    "textRules": {
+      "placeholder": {
+        "required": false,
+        "example": "Type your message...",
+        "minChars": 2,
+        "maxChars": 100
+      }
+    }
+  },
+  "propsSchema": {
+    "value": "string (required)",
+    "onChange": "(value: string) => void (required)",
+    "placeholder?": "string",
+    "rows?": "number (default: 5)",
+    "required?": "boolean (default: false)",
+    "disabled?": "boolean (default: false)",
+    "ariaLabel?": "string",
+    "className?": "string"
+  },
+  "usageExample": "<Textarea value={message} onChange={(value) => setMessage(value)} placeholder=\"Type your message...\" rows={5} required />",
+  "do": [
+    "Use for feature showcases",
+    "Use for capability displays"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/TimelineCardStack.json b/registry/components/TimelineCardStack.json
new file mode 100644
index 0000000..487c695
--- /dev/null
+++ b/registry/components/TimelineCardStack.json
@@ -0,0 +1,77 @@
+{
+  "name": "TimelineCardStack",
+  "description": "Vertical sticky scroll timeline component where cards stack on top of each other and fade out as you scroll.",
+  "details": "Use for storytelling, process flows, or sequential content that benefits from sticky scroll animation. Cards use sticky positioning and stack vertically. As you scroll, each card fades out (opacity 0) when scrolled past, except the last card which remains visible. Uses GSAP ScrollTrigger for smooth scroll-linked opacity animations. Cards have fixed heights: 140vw on mobile, 75vh on desktop. Sticky positioning: top-[25vw] on mobile, top-[12.5vh] on desktop. Works best with 3-6 cards for optimal scroll experience. Children are card content that gets wrapped in sticky card styling.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Our Journey",
+        "minChars": 2,
+        "maxChars": 50
+      },
+      "description": {
+        "required": true,
+        "example": "Discover how we've evolved over the years",
+        "minChars": 5,
+        "maxChars": 300
+      },
+      "tag": {
+        "required": false,
+        "example": "Story",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "itemRules": {
+      "minItems": 3,
+      "maxItems": 6,
+      "recommendedItems": "3-6",
+      "note": "Works best with 3-6 card content children for optimal scroll experience. Each child is wrapped in sticky card styling with GSAP fade animation."
+    }
+  },
+  "propsSchema": {
+    "children": "React.ReactNode",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground?": "boolean",
+    "ariaLabel?": "string (default: 'Timeline section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "textBoxClassName?": "string",
+    "titleClassName?": "string",
+    "titleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+    "titleImageClassName?": "string - For styling images in inline-image layout",
+    "descriptionClassName?": "string",
+    "tagClassName?": "string",
+    "buttonContainerClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string"
+  },
+  "usageExample": "<TimelineCardStack title=\"Our Journey\" description=\"Discover how we've evolved\" textboxLayout=\"default\"><div className=\"card p-6\"><h3>2020</h3><p>Founded</p></div><div className=\"card p-6\"><h3>2022</h3><p>Expanded</p></div></TimelineCardStack>",
+  "do": [
+    "Use for process flows",
+    "Use for roadmaps",
+    "Use for step-by-step explanation",
+    "Requires titleSegments?[]",
+    "Requires buttons?[]"
+  ],
+  "dont": [
+    "Do not use non-sequential content",
+    "Do not use single item",
+    "Do not use less than 3 items",
+    "Do not use more than 6 items"
+  ],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/TimelineHorizontalCardStack.json b/registry/components/TimelineHorizontalCardStack.json
new file mode 100644
index 0000000..d70a74a
--- /dev/null
+++ b/registry/components/TimelineHorizontalCardStack.json
@@ -0,0 +1,106 @@
+{
+  "name": "TimelineHorizontalCardStack",
+  "description": "Horizontal auto-playing timeline component that displays 2-4 cards in a grid with animated progress bars and optional media display.",
+  "details": "Use for showcasing features, steps, or processes with automatic progression. Displays cards in a horizontal grid (2-4 columns on desktop, stacked on mobile) with auto-advancing progress bars. Each card has an animated progress bar that fills over 5 seconds before advancing to the next. Users can click any card to jump to that step. Active and previous cards are fully visible (opacity-100), future cards are dimmed (opacity-50). Grid adapts: 2 items = 2 columns, 3 items = 3 columns, 4+ items = 4 columns. Automatically loops back to first card after completing the sequence. Progress bars use theme foreground color. Optional mediaItems prop displays a shared media area above cards that smoothly transitions (opacity fade) between images/videos as cards advance. Media uses aspect-square on mobile and aspect-video on desktop. Children are card content that gets wrapped in card styling.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Our Process",
+        "minChars": 2,
+        "maxChars": 50
+      },
+      "description": {
+        "required": true,
+        "example": "Follow our step-by-step approach to success",
+        "minChars": 5,
+        "maxChars": 300
+      },
+      "tag": {
+        "required": false,
+        "example": "How It Works",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "itemRules": {
+      "minItems": 2,
+      "maxItems": 4,
+      "recommendedItems": "2-4",
+      "note": "Works best with 2-4 card content children. Grid layout adapts based on item count. Each child is wrapped in card styling with progress bar."
+    },
+    "mediaRules": {
+      "imageSrc": {
+        "required": false,
+        "example": "/step1.jpg",
+        "note": "Either imageSrc or videoSrc per media item Either imageSrc or videoSrc should be provided. Image is recommended if no videoSrc."
+      },
+      "videoSrc": {
+        "required": false,
+        "example": "/step1.mp4",
+        "note": "Either imageSrc or videoSrc per media item"
+      },
+      "imageAlt": {
+        "required": false,
+        "example": "Step 1 illustration"
+      },
+      "videoAriaLabel": {
+        "required": false,
+        "example": "Step 1 video"
+      }
+    }
+  },
+  "propsSchema": {
+    "children": "React.ReactNode",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground?": "boolean",
+    "mediaItems?": "Array<{ imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }>",
+    "ariaLabel?": "string (default: 'Timeline section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "textBoxClassName?": "string",
+    "titleClassName?": "string",
+    "titleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+    "titleImageClassName?": "string - For styling images in inline-image layout",
+    "descriptionClassName?": "string",
+    "tagClassName?": "string",
+    "buttonContainerClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string",
+    "cardClassName?": "string",
+    "progressBarClassName?": "string",
+    "mediaContainerClassName?": "string",
+    "mediaClassName?": "string"
+  },
+  "usageExample": "<TimelineHorizontalCardStack title=\"Our Process\" description=\"Follow our step-by-step approach\" textboxLayout=\"default\" mediaItems={[{ imageSrc: '/step1.jpg', imageAlt: 'Step 1' }, { imageSrc: '/step2.jpg', imageAlt: 'Step 2' }]}><div><h3>Step 1</h3><p>Description</p></div><div><h3>Step 2</h3><p>Description</p></div></TimelineHorizontalCardStack>",
+  "do": [
+    "Use for process flows",
+    "Use for roadmaps",
+    "Use for step-by-step explanation",
+    "Use for feature showcases",
+    "Use for capability displays",
+    "Requires titleSegments?[]",
+    "Requires buttons?[]",
+    "Requires mediaItems?[]"
+  ],
+  "dont": [
+    "Do not use non-sequential content",
+    "Do not use single item",
+    "Do not use more than 4 items",
+    "Do not use less than 2 items",
+    "Do not use more than 4 items"
+  ],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/TimelinePhoneView.json b/registry/components/TimelinePhoneView.json
new file mode 100644
index 0000000..df7370f
--- /dev/null
+++ b/registry/components/TimelinePhoneView.json
@@ -0,0 +1,87 @@
+{
+  "name": "TimelinePhoneView",
+  "description": "Scroll-animated timeline displaying content with dual phone mockups using GSAP animations.",
+  "details": "Use for mobile app features, product walkthroughs, or step-by-step processes with phone/video mockups. Desktop: Dynamic height section (100vh per item) with sticky phone frames animating from offscreen (-200%/200%, rotation -45°/45°) to positioned state (rotation -10°/10°). Two frames per item side-by-side. Content scrolls while frames stay sticky. Mobile: Stacked sections with scroll-triggered entrance animations (frames slide from -150%/150%, rotation -25°/25° to center). Uses GSAP ScrollTrigger with matchMedia for responsive behavior. Each item requires trigger class for scroll animations, content (ReactNode), and media for two frames (image or video). Frames use card styling with rounded-theme-capped. Integrates CardStackTextBox for section header.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "App Features",
+        "minChars": 2,
+        "maxChars": 50
+      },
+      "description": {
+        "required": true,
+        "example": "Explore our powerful mobile experience",
+        "minChars": 5,
+        "maxChars": 300
+      },
+      "tag": {
+        "required": false,
+        "example": "Mobile",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "itemRules": {
+      "minItems": 2,
+      "maxItems": 4,
+      "recommendedItems": "2-4",
+      "note": "Each item needs: trigger (string class e.g., 'trigger-1'), content (ReactNode), imageOne/videoOne (string path), imageTwo/videoTwo (string path), plus optional imageAltOne, imageAltTwo, videoAriaLabelOne, videoAriaLabelTwo. Desktop height = items.length * 100vh. Frames have card styling with p-1 padding."
+    }
+  },
+  "propsSchema": {
+    "items": "Array<{ trigger: string, content: React.ReactNode, imageOne?: string, videoOne?: string, imageAltOne?: string, videoAriaLabelOne?: string, imageTwo?: string, videoTwo?: string, imageAltTwo?: string, videoAriaLabelTwo?: string }> - Timeline items with triggers and dual phone media (required)",
+    "showTextBox?": "boolean (default: true - controls whether CardStackTextBox renders)",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "ariaLabel?": "string (default: 'Timeline phone view section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "textBoxClassName?": "string",
+    "titleClassName?": "string",
+    "titleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+    "titleImageClassName?": "string - For styling images in inline-image layout",
+    "descriptionClassName?": "string",
+    "tagClassName?": "string",
+    "buttonContainerClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string",
+    "desktopContainerClassName?": "string",
+    "mobileContainerClassName?": "string",
+    "desktopContentClassName?": "string",
+    "desktopWrapperClassName?": "string",
+    "mobileWrapperClassName?": "string",
+    "phoneFrameClassName?": "string",
+    "mobilePhoneFrameClassName?": "string"
+  },
+  "usageExample": "<TimelinePhoneView title=\"App Features\" description=\"Explore our mobile experience\" textboxLayout=\"default\" items={[{ trigger: 'trigger-1', content: <><h2>Feature One</h2><p>Description</p></>, imageOne: '/phone1.jpg', imageTwo: '/phone2.jpg' }]} />",
+  "do": [
+    "Use for process flows",
+    "Use for roadmaps",
+    "Use for step-by-step explanation",
+    "Use for feature showcases",
+    "Use for capability displays",
+    "Use for product catalogs",
+    "Use for e-commerce",
+    "Requires items[]",
+    "Requires titleSegments?[]",
+    "Requires buttons?[]"
+  ],
+  "dont": [
+    "Do not use non-sequential content",
+    "Do not use single item",
+    "Do not use less than 2 items",
+    "Do not use more than 4 items"
+  ],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/components/TimelineProcessFlow.json b/registry/components/TimelineProcessFlow.json
new file mode 100644
index 0000000..f3de573
--- /dev/null
+++ b/registry/components/TimelineProcessFlow.json
@@ -0,0 +1,95 @@
+{
+  "name": "TimelineProcessFlow",
+  "description": "Vertical timeline with alternating media/content layout and scroll-triggered progress line animation.",
+  "details": "Use for process flows, company history, product development timelines, or step-by-step guides. Features vertical center line with GSAP scroll-animated fill effect, numbered badges at center, alternating left/right layout controlled by reverse prop. Each item accepts custom ReactNode for both media and content, allowing full flexibility (images, videos, text, lists, etc.). Desktop: Split layout with media and content on opposite sides. Mobile: Stacked vertical layout. Integrates CardStackTextBox for section header with all textboxLayout options. Perfect for storytelling, journey maps, or sequential content.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Our Journey",
+        "minChars": 2,
+        "maxChars": 50
+      },
+      "description": {
+        "required": true,
+        "example": "Discover the milestones that shaped our story",
+        "minChars": 5,
+        "maxChars": 300
+      },
+      "tag": {
+        "required": false,
+        "example": "Timeline",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "buttonRules": {
+      "maxButtons": 2,
+      "structure": {
+        "text": "string - Button label (required)",
+        "href": "string - Link destination (optional)",
+        "onClick": "() => void - Click handler (optional)",
+        "props": "Partial<ButtonPropsForVariant> - Additional button props (optional)"
+      },
+      "note": "Button variant controlled by ThemeProvider's defaultButtonVariant. All sections should be wrapped in a single ThemeProvider at the app/page level."
+    },
+    "itemRules": {
+      "structure": {
+        "content": "React.ReactNode - Custom content for the item (required)",
+        "media": "React.ReactNode - Custom media element (image, video, etc.) (required)",
+        "reverse": "boolean - When true, swaps media/content positions on desktop (required)"
+      },
+      "note": "Fully flexible - pass any ReactNode for content and media. Common patterns: media (Image/video), content (h3 title + p description + ul list with icons)."
+    }
+  },
+  "propsSchema": {
+    "items": "Array<{ content: React.ReactNode, media: React.ReactNode, reverse: boolean }> - Timeline items with content and media",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
+    "ariaLabel?": "string (default: 'Timeline process flow section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
+    "textBoxTitleImageClassName?": "string - For styling images in inline-image layout",
+    "textBoxDescriptionClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string",
+    "itemClassName?": "string",
+    "mediaWrapperClassName?": "string",
+    "numberClassName?": "string",
+    "contentWrapperClassName?": "string",
+    "gapClassName?": "string"
+  },
+  "usageExample": "// Wrap in ThemeProvider with smooth scrolling (ReactLenis)\n<ThemeProvider defaultButtonVariant=\"icon-arrow\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"rounded\" contentWidth=\"medium\" sizing=\"medium\" background=\"aurora\" cardStyle=\"glass-elevated\" primaryButtonStyle=\"gradient\" secondaryButtonStyle=\"glass\">\n  <ReactLenis root>\n    <TimelineProcessFlow \n      title=\"Our Journey\" \n      description=\"Discover the milestones that shaped our story\" \n      tag=\"Timeline\" \n      textboxLayout=\"default\" \n      animationType=\"slide-up\" \n      items={[\n        { reverse: false, media: <Image src=\"/milestone1.jpg\" alt=\"First milestone\" width={500} height={500} className=\"w-full h-full object-cover\" />, content: <><h3>Foundation</h3><p>Started our journey</p><ul><li>Launched MVP</li><li>First customer</li></ul></> },\n        { reverse: true, media: <video src=\"/milestone2.mp4\" autoPlay loop muted className=\"w-full h-full object-cover\" />, content: <><h3>Growth</h3><p>Expanded our reach</p><ul><li>Scaled team</li><li>Global expansion</li></ul></> }\n      ]} \n    />\n  </ReactLenis>\n</ThemeProvider>",
+  "do": [
+    "Use for process flows",
+    "Use for roadmaps",
+    "Use for step-by-step explanation",
+    "Use for feature showcases",
+    "Use for capability displays",
+    "Use for product catalogs",
+    "Use for e-commerce",
+    "Requires items[]",
+    "Requires titleSegments?[]",
+    "Requires buttons?[]"
+  ],
+  "dont": [
+    "Do not use non-sequential content",
+    "Do not use single item"
+  ],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}
diff --git a/registry/index.json b/registry/index.json
new file mode 100644
index 0000000..f7307c2
--- /dev/null
+++ b/registry/index.json
@@ -0,0 +1,2460 @@
+{
+  "NavbarStyleApple": {
+    "category": "navbar",
+    "intent": "product showcase",
+    "bestFor": [
+      "product catalogs",
+      "e-commerce"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "navItems[]"
+    ],
+    "import": "@/components/navbar/NavbarStyleApple/NavbarStyleApple",
+    "registryType": "component"
+  },
+  "NavbarLayoutFloatingInline": {
+    "category": "navbar",
+    "intent": "feature showcase",
+    "bestFor": [
+      "general use"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "navItems[]"
+    ],
+    "import": "@/components/navbar/NavbarLayoutFloatingInline",
+    "registryType": "component"
+  },
+  "NavbarLayoutFloatingOverlay": {
+    "category": "navbar",
+    "intent": "feature showcase",
+    "bestFor": [
+      "general use"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "navItems[]"
+    ],
+    "import": "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay",
+    "registryType": "component"
+  },
+  "NavbarStyleFullscreen": {
+    "category": "navbar",
+    "intent": "feature showcase",
+    "bestFor": [
+      "feature showcases",
+      "capability displays"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "navItems[]"
+    ],
+    "import": "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen",
+    "registryType": "component"
+  },
+  "NavbarStyleCentered": {
+    "category": "navbar",
+    "intent": "feature showcase",
+    "bestFor": [
+      "feature showcases",
+      "capability displays"
+    ],
+    "avoidWhen": [
+      "more than 4 items"
+    ],
+    "requires": [
+      "navItems[]"
+    ],
+    "import": "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered",
+    "registryType": "component"
+  },
+  "HeroBillboard": {
+    "category": "hero",
+    "intent": "hero with media",
+    "bestFor": [
+      "landing pages",
+      "feature showcases",
+      "capability displays"
+    ],
+    "avoidWhen": [
+      "multiple items"
+    ],
+    "requires": [
+      "buttons?[]"
+    ],
+    "import": "@/components/sections/hero/HeroBillboard",
+    "registryType": "section"
+  },
+  "HeroBillboardCarousel": {
+    "category": "hero",
+    "intent": "hero with media",
+    "bestFor": [
+      "landing pages",
+      "feature showcases",
+      "capability displays",
+      "portfolios",
+      "image galleries"
+    ],
+    "avoidWhen": [
+      "less than 5 items"
+    ],
+    "requires": [
+      "buttons?[]",
+      "mediaItems[]"
+    ],
+    "import": "@/components/sections/hero/HeroBillboardCarousel",
+    "registryType": "section"
+  },
+  "HeroBillboardGallery": {
+    "category": "hero",
+    "intent": "hero with media",
+    "bestFor": [
+      "landing pages",
+      "feature showcases",
+      "capability displays",
+      "portfolios",
+      "image galleries"
+    ],
+    "avoidWhen": [
+      "less than 5 items"
+    ],
+    "requires": [
+      "buttons?[]",
+      "mediaItems[]"
+    ],
+    "import": "@/components/sections/hero/HeroBillboardGallery",
+    "registryType": "section"
+  },
+  "HeroSplit": {
+    "category": "hero",
+    "intent": "hero with media",
+    "bestFor": [
+      "landing pages",
+      "feature showcases",
+      "capability displays"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "buttons?[]",
+      "avatars?[]"
+    ],
+    "import": "@/components/sections/hero/HeroSplit",
+    "registryType": "section"
+  },
+  "HeroSplitKpi": {
+    "category": "hero",
+    "intent": "hero with media",
+    "bestFor": [
+      "landing pages",
+      "feature showcases",
+      "capability displays",
+      "statistics displays",
+      "achievement showcases"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "kpis[]",
+      "buttons?[]",
+      "avatars?[]"
+    ],
+    "import": "@/components/sections/hero/HeroSplitKpi",
+    "registryType": "section"
+  },
+  "HeroOverlay": {
+    "category": "hero",
+    "intent": "hero with media",
+    "bestFor": [
+      "landing pages",
+      "feature showcases",
+      "capability displays"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "buttons?[]"
+    ],
+    "import": "@/components/sections/hero/HeroOverlay",
+    "registryType": "section"
+  },
+  "HeroOverlayTestimonial": {
+    "category": "hero",
+    "intent": "hero with testimonials",
+    "bestFor": [
+      "landing pages",
+      "social proof sections",
+      "feature showcases"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "testimonials[]",
+      "buttons?[]"
+    ],
+    "import": "@/components/sections/hero/HeroOverlayTestimonial",
+    "registryType": "section"
+  },
+  "HeroLogo": {
+    "category": "hero",
+    "intent": "hero with media",
+    "bestFor": [
+      "landing pages",
+      "feature showcases",
+      "capability displays"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "buttons[]"
+    ],
+    "import": "@/components/sections/hero/HeroLogo",
+    "registryType": "section"
+  },
+  "HeroLogoBillboard": {
+    "category": "hero",
+    "intent": "hero with media",
+    "bestFor": [
+      "landing pages",
+      "feature showcases",
+      "capability displays"
+    ],
+    "avoidWhen": [
+      "multiple items"
+    ],
+    "requires": [],
+    "import": "@/components/sections/hero/HeroLogoBillboard",
+    "registryType": "section"
+  },
+  "HeroBillboardScroll": {
+    "category": "hero",
+    "intent": "hero with media",
+    "bestFor": [
+      "landing pages",
+      "feature showcases",
+      "capability displays",
+      "product catalogs",
+      "e-commerce"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "buttons?[]"
+    ],
+    "import": "@/components/sections/hero/HeroBillboardScroll",
+    "registryType": "section"
+  },
+  "HeroBillboardRotatedCarousel": {
+    "category": "hero",
+    "intent": "hero with media",
+    "bestFor": [
+      "landing pages",
+      "feature showcases",
+      "capability displays",
+      "portfolios",
+      "image galleries",
+      "product catalogs",
+      "e-commerce"
+    ],
+    "avoidWhen": [
+      "less than 5 items"
+    ],
+    "requires": [
+      "buttons?[]",
+      "carouselItems[]"
+    ],
+    "import": "@/components/sections/hero/HeroBillboardRotatedCarousel",
+    "registryType": "section"
+  },
+  "HeroCarouselLogo": {
+    "category": "hero",
+    "intent": "hero with media",
+    "bestFor": [
+      "landing pages",
+      "feature showcases",
+      "capability displays"
+    ],
+    "avoidWhen": [
+      "less than 5 items"
+    ],
+    "requires": [
+      "buttons[]",
+      "slides[]"
+    ],
+    "import": "@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo",
+    "registryType": "section"
+  },
+  "HeroCentered": {
+    "category": "hero",
+    "intent": "hero with media",
+    "bestFor": [
+      "landing pages",
+      "feature showcases"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "avatars[]",
+      "buttons?[]"
+    ],
+    "import": "@/components/sections/hero/HeroCentered",
+    "registryType": "section"
+  },
+  "HeroSignup": {
+    "category": "hero",
+    "intent": "hero with media",
+    "bestFor": [
+      "landing pages",
+      "lead generation",
+      "newsletter signups"
+    ],
+    "avoidWhen": [],
+    "requires": [],
+    "import": "@/components/sections/hero/HeroSignup",
+    "registryType": "section"
+  },
+  "HeroSplitDualMedia": {
+    "category": "hero",
+    "intent": "hero with media",
+    "bestFor": [
+      "landing pages",
+      "coaching",
+      "consulting"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "mediaItems[]",
+      "buttons?[]"
+    ],
+    "import": "@/components/sections/hero/HeroSplitDualMedia",
+    "registryType": "section"
+  },
+  "HeroPersonalLinks": {
+    "category": "hero",
+    "intent": "hero with media",
+    "bestFor": [
+      "personal pages",
+      "portfolios",
+      "link-in-bio"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "linkCards[]",
+      "socialLinks?[]"
+    ],
+    "import": "@/components/sections/hero/HeroPersonalLinks",
+    "registryType": "section"
+  },
+  "HeroBillboardDashboard": {
+    "category": "hero",
+    "intent": "hero with media",
+    "bestFor": [
+      "landing pages",
+      "SaaS products",
+      "analytics platforms"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "dashboard",
+      "buttons?[]"
+    ],
+    "import": "@/components/sections/hero/HeroBillboardDashboard",
+    "registryType": "section"
+  },
+  "HeroSplitDoubleCarousel": {
+    "category": "hero",
+    "intent": "hero with media",
+    "bestFor": [
+      "landing pages",
+      "portfolios",
+      "image galleries",
+      "creative agencies"
+    ],
+    "avoidWhen": [
+      "less than 4 items per column"
+    ],
+    "requires": [
+      "leftCarouselItems[]",
+      "rightCarouselItems[]",
+      "buttons?[]"
+    ],
+    "import": "@/components/sections/hero/HeroSplitDoubleCarousel",
+    "registryType": "section"
+  },
+  "HeroSplitTestimonial": {
+    "category": "hero",
+    "intent": "hero with media",
+    "bestFor": [
+      "landing pages",
+      "social proof",
+      "customer reviews"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "testimonials[]",
+      "buttons?[]",
+      "avatars?[]"
+    ],
+    "import": "@/components/sections/hero/HeroSplitTestimonial",
+    "registryType": "section"
+  },
+  "HeroBillboardTestimonial": {
+    "category": "hero",
+    "intent": "hero with media",
+    "bestFor": [
+      "landing pages",
+      "social proof",
+      "customer reviews"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "testimonials[]",
+      "buttons?[]",
+      "avatars?[]"
+    ],
+    "import": "@/components/sections/hero/HeroBillboardTestimonial",
+    "registryType": "section"
+  },
+  "SplitAbout": {
+    "category": "about",
+    "intent": "feature showcase",
+    "bestFor": [
+      "feature showcases",
+      "capability displays",
+      "about pages",
+      "company information"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "titleSegments?[]",
+      "buttons?[]",
+      "bulletPoints[]"
+    ],
+    "import": "@/components/sections/about/SplitAbout",
+    "registryType": "section"
+  },
+  "TextSplitAbout": {
+    "category": "about",
+    "intent": "feature showcase",
+    "bestFor": [
+      "feature showcases",
+      "capability displays",
+      "about pages",
+      "company information"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "buttons?[]"
+    ],
+    "import": "@/components/sections/about/TextSplitAbout",
+    "registryType": "section"
+  },
+  "TextAbout": {
+    "category": "about",
+    "intent": "feature showcase",
+    "bestFor": [
+      "feature showcases",
+      "capability displays",
+      "about pages",
+      "company information"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "buttons?[]"
+    ],
+    "import": "@/components/sections/about/TextAbout",
+    "registryType": "section"
+  },
+  "MediaAbout": {
+    "category": "about",
+    "intent": "hero with media",
+    "bestFor": [
+      "landing pages",
+      "feature showcases",
+      "capability displays",
+      "about pages",
+      "company information",
+      "product catalogs",
+      "e-commerce"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "buttons?[]"
+    ],
+    "import": "@/components/sections/about/MediaAbout",
+    "registryType": "section"
+  },
+  "TestimonialAboutCard": {
+    "category": "about",
+    "intent": "feature showcase",
+    "bestFor": [
+      "feature showcases",
+      "capability displays",
+      "social proof",
+      "customer reviews",
+      "about pages",
+      "company information"
+    ],
+    "avoidWhen": [
+      "more than 4 items"
+    ],
+    "requires": [],
+    "import": "@/components/sections/about/TestimonialAboutCard",
+    "registryType": "section"
+  },
+  "InlineImageSplitTextAbout": {
+    "category": "about",
+    "intent": "about section",
+    "bestFor": [
+      "about pages",
+      "company information"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "heading[]",
+      "buttons?[]"
+    ],
+    "import": "@/components/sections/about/InlineImageSplitTextAbout",
+    "registryType": "section"
+  },
+  "AboutMetric": {
+    "category": "about",
+    "intent": "feature showcase",
+    "bestFor": [
+      "feature showcases",
+      "capability displays",
+      "about pages",
+      "company information",
+      "statistics displays",
+      "achievement showcases"
+    ],
+    "avoidWhen": [
+      "more than 4 items"
+    ],
+    "requires": [
+      "metrics[]"
+    ],
+    "import": "@/components/sections/about/AboutMetric",
+    "registryType": "section"
+  },
+  "MetricSplitMediaAbout": {
+    "category": "about",
+    "intent": "about section",
+    "bestFor": [
+      "about pages",
+      "company information",
+      "statistics displays",
+      "achievement showcases"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "metrics[]"
+    ],
+    "import": "@/components/sections/about/MetricSplitMediaAbout",
+    "registryType": "section"
+  },
+  "FeatureCardOne": {
+    "category": "feature",
+    "intent": "feature showcase",
+    "bestFor": [
+      "feature showcases",
+      "capability displays",
+      "statistics displays",
+      "achievement showcases"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "features[]",
+      "titleSegments?[]",
+      "buttons?[]"
+    ],
+    "import": "@/components/sections/feature/FeatureCardOne",
+    "registryType": "section"
+  },
+  "FeatureCardThree": {
+    "category": "feature",
+    "intent": "feature showcase",
+    "bestFor": [
+      "feature showcases",
+      "capability displays"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "features[]",
+      "titleSegments?[]",
+      "buttons?[]"
+    ],
+    "import": "@/components/sections/feature/featureCardThree/FeatureCardThree",
+    "registryType": "section"
+  },
+  "FeatureCardTwentyNine": {
+    "category": "feature",
+    "intent": "feature showcase",
+    "bestFor": [
+      "feature showcases with action buttons",
+      "capability displays with brand icons",
+      "verified feature lists"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "features[]",
+      "titleSegments?[]",
+      "buttons?[]"
+    ],
+    "import": "@/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine",
+    "registryType": "section"
+  },
+  "FeatureCardSix": {
+    "category": "feature",
+    "intent": "sequential process",
+    "bestFor": [
+      "process flows",
+      "roadmaps",
+      "step-by-step explanation",
+      "feature showcases",
+      "capability displays"
+    ],
+    "avoidWhen": [
+      "non-sequential content",
+      "single item"
+    ],
+    "requires": [
+      "features[]",
+      "titleSegments?[]",
+      "buttons?[]"
+    ],
+    "import": "@/components/sections/feature/FeatureCardSix",
+    "registryType": "section"
+  },
+  "FeatureCardSeven": {
+    "category": "feature",
+    "intent": "sequential vertical steps with alternating layout",
+    "bestFor": [
+      "process flows",
+      "roadmaps",
+      "step-by-step explanation",
+      "feature showcases",
+      "capability displays"
+    ],
+    "avoidWhen": [
+      "non-sequential content",
+      "single item"
+    ],
+    "requires": [
+      "features[]",
+      "titleSegments?[]",
+      "buttons?[]"
+    ],
+    "import": "@/components/sections/feature/FeatureCardSeven",
+    "registryType": "section"
+  },
+  "FeatureCardEight": {
+    "category": "feature",
+    "intent": "horizontal timeline",
+    "bestFor": [
+      "process flows",
+      "roadmaps",
+      "step-by-step explanation",
+      "feature showcases",
+      "capability displays"
+    ],
+    "avoidWhen": [
+      "non-sequential content",
+      "single item",
+      "more than 4 items",
+      "less than 2 items",
+      "more than 4 items"
+    ],
+    "requires": [
+      "features[]",
+      "titleSegments?[]",
+      "buttons?[]"
+    ],
+    "import": "@/components/sections/feature/FeatureCardEight",
+    "registryType": "section"
+  },
+  "FeatureCardNine": {
+    "category": "feature",
+    "intent": "vertical sticky scroll timeline",
+    "bestFor": [
+      "feature showcases",
+      "capability displays"
+    ],
+    "avoidWhen": [
+      "less than 2 items",
+      "more than 4 items"
+    ],
+    "requires": [
+      "features[]",
+      "titleSegments?[]",
+      "buttons?[]"
+    ],
+    "import": "@/components/sections/feature/FeatureCardNine",
+    "registryType": "section"
+  },
+  "FeatureCardTwelve": {
+    "category": "feature",
+    "intent": "feature showcase",
+    "bestFor": [
+      "feature showcases",
+      "capability displays",
+      "pricing pages",
+      "subscription tiers"
+    ],
+    "avoidWhen": [
+      "more than 8 items"
+    ],
+    "requires": [
+      "features[]",
+      "titleSegments?[]",
+      "buttons?[]"
+    ],
+    "import": "@/components/sections/feature/FeatureCardTwelve",
+    "registryType": "section"
+  },
+  "FeatureCardSixteen": {
+    "category": "feature",
+    "intent": "feature showcase",
+    "bestFor": [
+      "feature showcases",
+      "capability displays"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "titleSegments?[]",
+      "buttons?[]"
+    ],
+    "import": "@/components/sections/feature/FeatureCardSixteen",
+    "registryType": "section"
+  },
+  "FeatureCardNineteen": {
+    "category": "feature",
+    "intent": "sequential process",
+    "bestFor": [
+      "process flows",
+      "roadmaps",
+      "step-by-step explanation",
+      "feature showcases",
+      "capability displays"
+    ],
+    "avoidWhen": [
+      "multiple items",
+      "non-sequential content",
+      "single item"
+    ],
+    "requires": [
+      "features[]",
+      "titleSegments?[]",
+      "buttons?[]"
+    ],
+    "import": "@/components/sections/feature/FeatureCardNineteen",
+    "registryType": "section"
+  },
+  "FeatureCardTwentyOne": {
+    "category": "feature",
+    "intent": "feature showcase",
+    "bestFor": [
+      "feature showcases",
+      "capability displays"
+    ],
+    "avoidWhen": [
+      "less than 2 items",
+      "more than 6 items"
+    ],
+    "requires": [
+      "titleSegments?[]",
+      "buttons?[]",
+      "accordionItems[]"
+    ],
+    "import": "@/components/sections/feature/FeatureCardTwentyOne",
+    "registryType": "section"
+  },
+  "FeatureCardMedia": {
+    "category": "feature",
+    "intent": "feature showcase",
+    "bestFor": [
+      "feature showcases",
+      "capability displays"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "features[]",
+      "titleSegments?[]"
+    ],
+    "import": "@/components/sections/feature/FeatureCardMedia",
+    "registryType": "section"
+  },
+  "FeatureCardTen": {
+    "category": "feature",
+    "intent": "sequential process",
+    "bestFor": [
+      "process flows",
+      "step-by-step explanation",
+      "feature showcases"
+    ],
+    "avoidWhen": [
+      "non-sequential content"
+    ],
+    "requires": [
+      "features[]",
+      "titleSegments?[]",
+      "buttons?[]"
+    ],
+    "import": "@/components/sections/feature/FeatureCardTen",
+    "registryType": "section"
+  },
+  "FeatureCardTwentyThree": {
+    "category": "feature",
+    "intent": "feature showcase",
+    "bestFor": [
+      "feature showcases",
+      "capability displays"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "features[]",
+      "titleSegments?[]",
+      "buttons?[]"
+    ],
+    "import": "@/components/sections/feature/FeatureCardTwentyThree",
+    "registryType": "section"
+  },
+  "FeatureCardTwentyFour": {
+    "category": "feature",
+    "intent": "feature showcase",
+    "bestFor": [
+      "feature showcases",
+      "capability displays"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "features[]",
+      "titleSegments?[]",
+      "buttons?[]"
+    ],
+    "import": "@/components/sections/feature/FeatureCardTwentyFour",
+    "registryType": "section"
+  },
+  "FeatureCardTwentyFive": {
+    "category": "feature",
+    "intent": "feature showcase",
+    "bestFor": [
+      "feature showcases",
+      "capability displays"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "features[]",
+      "titleSegments?[]",
+      "buttons?[]"
+    ],
+    "import": "@/components/sections/feature/FeatureCardTwentyFive",
+    "registryType": "section"
+  },
+  "FeatureCardTwentySix": {
+    "category": "feature",
+    "intent": "feature showcase",
+    "bestFor": [
+      "feature showcases",
+      "capability displays"
+    ],
+    "avoidWhen": [
+      "less than 4 items"
+    ],
+    "requires": [
+      "features[]",
+      "titleSegments?[]",
+      "buttons?[]"
+    ],
+    "import": "@/components/sections/feature/FeatureCardTwentySix",
+    "registryType": "section"
+  },
+  "FeatureCardTwentySeven": {
+    "category": "feature",
+    "intent": "feature showcase",
+    "bestFor": [
+      "interactive feature displays",
+      "service showcases",
+      "exploratory content"
+    ],
+    "avoidWhen": [
+      "text-heavy front side content",
+      "more than 8 items"
+    ],
+    "requires": [
+      "features[]",
+      "animationType"
+    ],
+    "import": "@/components/sections/feature/FeatureCardTwentySeven",
+    "registryType": "section"
+  },
+  "FeatureCardTwentyEight": {
+    "category": "feature",
+    "intent": "feature showcase",
+    "bestFor": [
+      "job listings",
+      "pricing tiers",
+      "detailed feature displays"
+    ],
+    "avoidWhen": [
+      "more than 12 items"
+    ],
+    "requires": [
+      "features[]",
+      "titleSegments?[]",
+      "buttons?[]"
+    ],
+    "import": "@/components/sections/feature/FeatureCardTwentyEight",
+    "registryType": "section"
+  },
+  "FeatureBento": {
+    "category": "feature",
+    "intent": "feature showcase",
+    "bestFor": [
+      "feature showcases",
+      "capability displays",
+      "interactive visualizations"
+    ],
+    "avoidWhen": [
+      "simple text-only features"
+    ],
+    "requires": [
+      "features[]",
+      "titleSegments?[]",
+      "buttons?[]"
+    ],
+    "import": "@/components/sections/feature/FeatureBento",
+    "registryType": "section"
+  },
+  "FeatureBorderGlow": {
+    "category": "feature",
+    "intent": "feature showcase",
+    "bestFor": [
+      "feature showcases",
+      "capability displays"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "features[]",
+      "titleSegments?[]",
+      "buttons?[]"
+    ],
+    "import": "@/components/sections/feature/featureBorderGlow/FeatureBorderGlow",
+    "registryType": "section"
+  },
+  "FeatureHoverPattern": {
+    "category": "feature",
+    "intent": "feature showcase",
+    "bestFor": [
+      "feature showcases",
+      "capability displays"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "features[]",
+      "titleSegments?[]",
+      "buttons?[]"
+    ],
+    "import": "@/components/sections/feature/featureHoverPattern/FeatureHoverPattern",
+    "registryType": "section"
+  },
+  "FeatureTimelineBento": {
+    "category": "feature",
+    "intent": "sequential process",
+    "bestFor": [
+      "process flows",
+      "roadmaps",
+      "step-by-step explanation",
+      "feature showcases",
+      "interactive visualizations"
+    ],
+    "avoidWhen": [
+      "non-sequential content",
+      "single item"
+    ],
+    "requires": [
+      "features[]",
+      "titleSegments?[]",
+      "buttons?[]"
+    ],
+    "import": "@/components/sections/feature/FeatureTimelineBento",
+    "registryType": "section"
+  },
+  "ProductCardOne": {
+    "category": "product",
+    "intent": "contact form",
+    "bestFor": [
+      "product catalogs",
+      "e-commerce"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "products[]",
+      "titleSegments?[]",
+      "buttons?[]"
+    ],
+    "import": "@/components/sections/product/ProductCardOne",
+    "registryType": "section"
+  },
+  "ProductCardTwo": {
+    "category": "product",
+    "intent": "testimonials",
+    "bestFor": [
+      "product catalogs",
+      "e-commerce"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "products[]",
+      "titleSegments?[]",
+      "buttons?[]"
+    ],
+    "import": "@/components/sections/product/ProductCardTwo",
+    "registryType": "section"
+  },
+  "ProductCardThree": {
+    "category": "product",
+    "intent": "product showcase",
+    "bestFor": [
+      "product catalogs",
+      "e-commerce"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "products[]",
+      "titleSegments?[]",
+      "buttons?[]"
+    ],
+    "import": "@/components/sections/product/ProductCardThree",
+    "registryType": "section"
+  },
+  "ProductCardFour": {
+    "category": "product",
+    "intent": "product showcase",
+    "bestFor": [
+      "product catalogs",
+      "e-commerce"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "products[]",
+      "titleSegments?[]",
+      "buttons?[]"
+    ],
+    "import": "@/components/sections/product/ProductCardFour",
+    "registryType": "section"
+  },
+  "PricingCardOne": {
+    "category": "pricing",
+    "intent": "feature showcase",
+    "bestFor": [
+      "feature showcases",
+      "capability displays",
+      "pricing pages",
+      "subscription tiers"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "plans[]",
+      "titleSegments?[]",
+      "buttons?[]"
+    ],
+    "import": "@/components/sections/pricing/PricingCardOne",
+    "registryType": "section"
+  },
+  "PricingCardTwo": {
+    "category": "pricing",
+    "intent": "feature showcase",
+    "bestFor": [
+      "feature showcases",
+      "capability displays",
+      "pricing pages",
+      "subscription tiers"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "plans[]",
+      "titleSegments?[]",
+      "buttons?[]"
+    ],
+    "import": "@/components/sections/pricing/PricingCardTwo",
+    "registryType": "section"
+  },
+  "PricingCardThree": {
+    "category": "pricing",
+    "intent": "feature showcase",
+    "bestFor": [
+      "feature showcases",
+      "capability displays",
+      "pricing pages",
+      "subscription tiers"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "plans[]",
+      "titleSegments?[]",
+      "buttons?[]"
+    ],
+    "import": "@/components/sections/pricing/PricingCardThree",
+    "registryType": "section"
+  },
+  "PricingCardFive": {
+    "category": "pricing",
+    "intent": "feature showcase",
+    "bestFor": [
+      "feature showcases",
+      "capability displays",
+      "pricing pages",
+      "subscription tiers"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "plans[]",
+      "titleSegments?[]",
+      "buttons?[]"
+    ],
+    "import": "@/components/sections/pricing/PricingCardFive",
+    "registryType": "section"
+  },
+  "PricingCardEight": {
+    "category": "pricing",
+    "intent": "feature showcase",
+    "bestFor": [
+      "feature showcases",
+      "capability displays",
+      "pricing pages",
+      "subscription tiers"
+    ],
+    "avoidWhen": [
+      "more than 4 items"
+    ],
+    "requires": [
+      "plans[]",
+      "titleSegments?[]",
+      "buttons?[]"
+    ],
+    "import": "@/components/sections/pricing/PricingCardEight",
+    "registryType": "section"
+  },
+  "PricingCardNine": {
+    "category": "pricing",
+    "intent": "feature showcase",
+    "bestFor": [
+      "feature showcases",
+      "capability displays",
+      "pricing pages",
+      "subscription tiers"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "plans[]",
+      "titleSegments?[]",
+      "buttons?[]"
+    ],
+    "import": "@/components/sections/pricing/PricingCardNine",
+    "registryType": "section"
+  },
+  "MetricCardOne": {
+    "category": "metric",
+    "intent": "metrics display",
+    "bestFor": [
+      "statistics displays",
+      "achievement showcases"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "metrics[]",
+      "titleSegments?[]",
+      "buttons?[]"
+    ],
+    "import": "@/components/sections/metrics/MetricCardOne",
+    "registryType": "section"
+  },
+  "MetricCardTwo": {
+    "category": "metric",
+    "intent": "metrics display",
+    "bestFor": [
+      "statistics displays",
+      "achievement showcases"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "metrics[]",
+      "titleSegments?[]",
+      "buttons?[]"
+    ],
+    "import": "@/components/sections/metrics/MetricCardTwo",
+    "registryType": "section"
+  },
+  "MetricCardThree": {
+    "category": "metric",
+    "intent": "feature showcase",
+    "bestFor": [
+      "feature showcases",
+      "capability displays",
+      "statistics displays",
+      "achievement showcases"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "metrics[]",
+      "titleSegments?[]",
+      "buttons?[]"
+    ],
+    "import": "@/components/sections/metrics/MetricCardThree",
+    "registryType": "section"
+  },
+  "MetricCardSeven": {
+    "category": "metric",
+    "intent": "feature showcase",
+    "bestFor": [
+      "feature showcases",
+      "capability displays",
+      "pricing pages",
+      "subscription tiers",
+      "statistics displays",
+      "achievement showcases"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "metrics[]",
+      "titleSegments?[]",
+      "buttons?[]"
+    ],
+    "import": "@/components/sections/metrics/MetricCardSeven",
+    "registryType": "section"
+  },
+  "MetricCardEleven": {
+    "category": "metric",
+    "intent": "metrics display",
+    "bestFor": [
+      "statistics displays",
+      "achievement showcases"
+    ],
+    "avoidWhen": [
+      "more than 4 items",
+      "more than 6 items"
+    ],
+    "requires": [
+      "metrics[]",
+      "titleSegments?[]",
+      "buttons?[]"
+    ],
+    "import": "@/components/sections/metrics/MetricCardEleven",
+    "registryType": "section"
+  },
+  "MetricCardFourteen": {
+    "category": "metric",
+    "intent": "metrics display",
+    "bestFor": [
+      "statistics displays",
+      "achievement showcases"
+    ],
+    "avoidWhen": [
+      "more than 4 items",
+      "more than 4 items"
+    ],
+    "requires": [
+      "metrics[]"
+    ],
+    "import": "@/components/sections/metrics/MetricCardFourteen",
+    "registryType": "section"
+  },
+  "TeamCardOne": {
+    "category": "team",
+    "intent": "team section",
+    "bestFor": [
+      "team pages",
+      "staff directories"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "members[]",
+      "titleSegments?[]",
+      "buttons?[]"
+    ],
+    "import": "@/components/sections/team/TeamCardOne",
+    "registryType": "section"
+  },
+  "TeamCardTwo": {
+    "category": "team",
+    "intent": "about section",
+    "bestFor": [
+      "about pages",
+      "company information",
+      "team pages",
+      "staff directories"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "members[]",
+      "titleSegments?[]",
+      "buttons?[]"
+    ],
+    "import": "@/components/sections/team/TeamCardTwo",
+    "registryType": "section"
+  },
+  "TeamCardFive": {
+    "category": "team",
+    "intent": "team section",
+    "bestFor": [
+      "team pages",
+      "staff directories"
+    ],
+    "avoidWhen": [
+      "more than 4 items",
+      "less than 2 items",
+      "more than 12 items"
+    ],
+    "requires": [
+      "team[]",
+      "titleSegments?[]",
+      "buttons?[]"
+    ],
+    "import": "@/components/sections/team/TeamCardFive",
+    "registryType": "section"
+  },
+  "TeamCardSix": {
+    "category": "team",
+    "intent": "about section",
+    "bestFor": [
+      "about pages",
+      "company information",
+      "team pages",
+      "staff directories"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "members[]",
+      "titleSegments?[]",
+      "buttons?[]"
+    ],
+    "import": "@/components/sections/team/TeamCardSix",
+    "registryType": "section"
+  },
+  "TeamCardTen": {
+    "category": "team",
+    "intent": "team section",
+    "bestFor": [
+      "team pages",
+      "staff directories"
+    ],
+    "avoidWhen": [
+      "multiple items",
+      "more than 4 items",
+      "more than 6 items"
+    ],
+    "requires": [
+      "members[]"
+    ],
+    "import": "@/components/sections/team/TeamCardTen",
+    "registryType": "section"
+  },
+  "TeamCardEleven": {
+    "category": "team",
+    "intent": "contact form",
+    "bestFor": [
+      "contact pages",
+      "lead generation",
+      "team pages",
+      "staff directories"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "groups[]",
+      "titleSegments?[]",
+      "buttons?[]"
+    ],
+    "import": "@/components/sections/team/TeamCardEleven",
+    "registryType": "section"
+  },
+  "TestimonialCardOne": {
+    "category": "testimonial",
+    "intent": "testimonials",
+    "bestFor": [
+      "social proof",
+      "customer reviews"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "testimonials[]",
+      "titleSegments?[]",
+      "buttons?[]"
+    ],
+    "import": "@/components/sections/testimonial/TestimonialCardOne",
+    "registryType": "section"
+  },
+  "TestimonialCardTwo": {
+    "category": "testimonial",
+    "intent": "testimonials",
+    "bestFor": [
+      "social proof",
+      "customer reviews"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "testimonials[]",
+      "titleSegments?[]",
+      "buttons?[]"
+    ],
+    "import": "@/components/sections/testimonial/TestimonialCardTwo",
+    "registryType": "section"
+  },
+  "TestimonialCardFive": {
+    "category": "testimonial",
+    "intent": "testimonials",
+    "bestFor": [
+      "social proof",
+      "customer reviews"
+    ],
+    "avoidWhen": [
+      "less than 3 items",
+      "more than 10 items"
+    ],
+    "requires": [
+      "testimonials[]",
+      "titleSegments?[]",
+      "buttons?[]"
+    ],
+    "import": "@/components/sections/testimonial/TestimonialCardFive",
+    "registryType": "section"
+  },
+  "TestimonialCardSix": {
+    "category": "testimonial",
+    "intent": "testimonials",
+    "bestFor": [
+      "social proof",
+      "customer reviews"
+    ],
+    "avoidWhen": [
+      "less than 6 items",
+      "more than 20 items"
+    ],
+    "requires": [
+      "testimonials[]",
+      "titleSegments?[]",
+      "buttons?[]"
+    ],
+    "import": "@/components/sections/testimonial/TestimonialCardSix",
+    "registryType": "section"
+  },
+  "TestimonialCardTen": {
+    "category": "testimonial",
+    "intent": "feature showcase",
+    "bestFor": [
+      "feature showcases",
+      "capability displays",
+      "social proof",
+      "customer reviews"
+    ],
+    "avoidWhen": [
+      "more than 4 items"
+    ],
+    "requires": [
+      "testimonials[]",
+      "titleSegments?[]",
+      "buttons?[]"
+    ],
+    "import": "@/components/sections/testimonial/TestimonialCardTen",
+    "registryType": "section"
+  },
+  "TestimonialCardTwelve": {
+    "category": "testimonial",
+    "intent": "feature showcase",
+    "bestFor": [
+      "feature showcases",
+      "capability displays",
+      "social proof",
+      "customer reviews"
+    ],
+    "avoidWhen": [
+      "multiple items",
+      "less than 3 items",
+      "more than 10 items"
+    ],
+    "requires": [
+      "testimonials[]"
+    ],
+    "import": "@/components/sections/testimonial/TestimonialCardTwelve",
+    "registryType": "section"
+  },
+  "TestimonialCardThirteen": {
+    "category": "testimonial",
+    "intent": "testimonials",
+    "bestFor": [
+      "social proof",
+      "customer reviews",
+      "product catalogs",
+      "e-commerce"
+    ],
+    "avoidWhen": [
+      "multiple items"
+    ],
+    "requires": [
+      "testimonials[]",
+      "titleSegments?[]",
+      "buttons?[]"
+    ],
+    "import": "@/components/sections/testimonial/TestimonialCardThirteen",
+    "registryType": "section"
+  },
+  "TestimonialCardFifteen": {
+    "category": "testimonial",
+    "intent": "hero with media",
+    "bestFor": [
+      "landing pages",
+      "feature showcases",
+      "capability displays",
+      "social proof",
+      "customer reviews"
+    ],
+    "avoidWhen": [
+      "multiple items"
+    ],
+    "requires": [
+      "avatars[]"
+    ],
+    "import": "@/components/sections/testimonial/TestimonialCardFifteen",
+    "registryType": "section"
+  },
+  "TestimonialCardSixteen": {
+    "category": "testimonial",
+    "intent": "testimonials",
+    "bestFor": [
+      "social proof",
+      "customer reviews"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "testimonials[]",
+      "kpiItems[]"
+    ],
+    "import": "@/components/sections/testimonial/TestimonialCardSixteen",
+    "registryType": "section"
+  },
+  "SocialProofOne": {
+    "category": "socialProof",
+    "intent": "testimonials",
+    "bestFor": [
+      "social proof",
+      "partner names",
+      "partner logos"
+    ],
+    "avoidWhen": [
+      "less than 4 items"
+    ],
+    "requires": [
+      "names[]",
+      "logos?[]"
+    ],
+    "import": "@/components/sections/socialProof/SocialProofOne",
+    "registryType": "section"
+  },
+  "FaqBase": {
+    "category": "faq",
+    "intent": "contact form",
+    "bestFor": [
+      "help pages",
+      "support sections"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "faqs[]",
+      "titleSegments?[]",
+      "buttons?[]"
+    ],
+    "import": "@/components/sections/faq/FaqBase",
+    "registryType": "section"
+  },
+  "FaqDouble": {
+    "category": "faq",
+    "intent": "contact form",
+    "bestFor": [
+      "help pages",
+      "support sections"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "faqs[]",
+      "titleSegments?[]",
+      "buttons?[]"
+    ],
+    "import": "@/components/sections/faq/FaqDouble",
+    "registryType": "section"
+  },
+  "FaqSplitMedia": {
+    "category": "faq",
+    "intent": "faq section",
+    "bestFor": [
+      "help pages",
+      "support sections"
+    ],
+    "avoidWhen": [
+      "more than 4 items"
+    ],
+    "requires": [
+      "faqs[]",
+      "titleSegments?[]",
+      "buttons?[]"
+    ],
+    "import": "@/components/sections/faq/FaqSplitMedia",
+    "registryType": "section"
+  },
+  "FaqSplitText": {
+    "category": "faq",
+    "intent": "faq section",
+    "bestFor": [
+      "help pages",
+      "support sections"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "faqs[]",
+      "buttons?[]"
+    ],
+    "import": "@/components/sections/faq/FaqSplitText",
+    "registryType": "section"
+  },
+  "BlogCardOne": {
+    "category": "blog",
+    "intent": "content listing",
+    "bestFor": [
+      "blog listings",
+      "article grids"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "blogs[]",
+      "titleSegments?[]",
+      "buttons?[]"
+    ],
+    "import": "@/components/sections/blog/BlogCardOne",
+    "registryType": "section"
+  },
+  "BlogCardTwo": {
+    "category": "blog",
+    "intent": "content listing",
+    "bestFor": [
+      "blog listings",
+      "article grids"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "blogs[]",
+      "titleSegments?[]",
+      "buttons?[]"
+    ],
+    "import": "@/components/sections/blog/BlogCardTwo",
+    "registryType": "section"
+  },
+  "BlogCardThree": {
+    "category": "blog",
+    "intent": "hero with media",
+    "bestFor": [
+      "landing pages",
+      "feature showcases",
+      "capability displays",
+      "blog listings",
+      "article grids"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "blogs[]",
+      "titleSegments?[]",
+      "buttons?[]"
+    ],
+    "import": "@/components/sections/blog/BlogCardThree",
+    "registryType": "section"
+  },
+  "ContactCenter": {
+    "category": "contact",
+    "intent": "feature showcase",
+    "bestFor": [
+      "feature showcases",
+      "capability displays",
+      "contact pages",
+      "lead generation"
+    ],
+    "avoidWhen": [],
+    "requires": [],
+    "import": "@/components/sections/contact/ContactCenter",
+    "registryType": "section"
+  },
+  "ContactSplit": {
+    "category": "contact",
+    "intent": "feature showcase",
+    "bestFor": [
+      "feature showcases",
+      "capability displays",
+      "contact pages",
+      "lead generation"
+    ],
+    "avoidWhen": [],
+    "requires": [],
+    "import": "@/components/sections/contact/ContactSplit",
+    "registryType": "section"
+  },
+  "ContactSplitForm": {
+    "category": "contact",
+    "intent": "feature showcase",
+    "bestFor": [
+      "feature showcases",
+      "capability displays",
+      "contact pages",
+      "lead generation"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "inputs[]"
+    ],
+    "import": "@/components/sections/contact/ContactSplitForm",
+    "registryType": "section"
+  },
+  "ContactText": {
+    "category": "contact",
+    "intent": "contact form",
+    "bestFor": [
+      "contact pages",
+      "lead generation"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "buttons?[]"
+    ],
+    "import": "@/components/sections/contact/ContactText",
+    "registryType": "section"
+  },
+  "ContactCTA": {
+    "category": "contact",
+    "intent": "contact form",
+    "bestFor": [
+      "contact pages",
+      "lead generation",
+      "call-to-action sections"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "buttons[]"
+    ],
+    "import": "@/components/sections/contact/ContactCTA",
+    "registryType": "section"
+  },
+  "FooterBase": {
+    "category": "footer",
+    "intent": "feature showcase",
+    "bestFor": [
+      "feature showcases",
+      "capability displays"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "columns[]"
+    ],
+    "import": "@/components/sections/footer/FooterBase",
+    "registryType": "section"
+  },
+  "FooterMedia": {
+    "category": "footer",
+    "intent": "feature showcase",
+    "bestFor": [
+      "feature showcases",
+      "capability displays"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "columns[]"
+    ],
+    "import": "@/components/sections/footer/FooterMedia",
+    "registryType": "section"
+  },
+  "FooterBaseReveal": {
+    "category": "footer",
+    "intent": "footer",
+    "bestFor": [
+      "general use"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "columns[]"
+    ],
+    "import": "@/components/sections/footer/FooterBaseReveal",
+    "registryType": "section"
+  },
+  "FooterLogoEmphasis": {
+    "category": "footer",
+    "intent": "feature showcase",
+    "bestFor": [
+      "feature showcases",
+      "capability displays"
+    ],
+    "avoidWhen": [
+      "more than 4 items"
+    ],
+    "requires": [
+      "columns[]"
+    ],
+    "import": "@/components/sections/footer/FooterLogoEmphasis",
+    "registryType": "section"
+  },
+  "FooterLogoEmphasisReveal": {
+    "category": "footer",
+    "intent": "feature showcase",
+    "bestFor": [
+      "feature showcases",
+      "capability displays",
+      "sticky reveal footer effect"
+    ],
+    "avoidWhen": [
+      "more than 5 columns"
+    ],
+    "requires": [
+      "columns[]"
+    ],
+    "import": "@/components/sections/footer/FooterLogoEmphasisReveal",
+    "registryType": "section"
+  },
+  "FooterCard": {
+    "category": "footer",
+    "intent": "footer",
+    "bestFor": [
+      "general use"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "socialLinks?[]"
+    ],
+    "import": "@/components/sections/footer/FooterCard",
+    "registryType": "section"
+  },
+  "FooterBaseCard": {
+    "category": "footer",
+    "intent": "footer",
+    "bestFor": [
+      "general use"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "columns[]"
+    ],
+    "import": "@/components/sections/footer/FooterBaseCard",
+    "registryType": "section"
+  },
+  "FooterLogoReveal": {
+    "category": "footer",
+    "intent": "footer",
+    "bestFor": [
+      "general use"
+    ],
+    "avoidWhen": [],
+    "requires": [],
+    "import": "@/components/sections/footer/FooterLogoReveal",
+    "registryType": "section"
+  },
+  "FooterSimple": {
+    "category": "footer",
+    "intent": "feature showcase",
+    "bestFor": [
+      "feature showcases",
+      "capability displays"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "columns[]"
+    ],
+    "import": "@/components/sections/footer/FooterSimple",
+    "registryType": "section"
+  },
+  "CardStack": {
+    "category": "layout",
+    "registryType": "component",
+    "intent": "adaptive layout component that displays children in a grid, ",
+    "bestFor": [
+      "general use"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "children"
+    ],
+    "import": "@/components/cardStack/CardStack"
+  },
+  "TimelineHorizontalCardStack": {
+    "category": "layout",
+    "registryType": "component",
+    "intent": "horizontal auto-playing timeline component that displays 2-4",
+    "bestFor": [
+      "general use"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "children"
+    ],
+    "import": "@/components/cardStack/layouts/timelines/TimelineHorizontalCardStack"
+  },
+  "TimelineCardStack": {
+    "category": "layout",
+    "registryType": "component",
+    "intent": "vertical sticky scroll timeline component where cards stack ",
+    "bestFor": [
+      "general use"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "children"
+    ],
+    "import": "@/components/cardStack/layouts/timelines/TimelineCardStack"
+  },
+  "TimelinePhoneView": {
+    "category": "layout",
+    "registryType": "component",
+    "intent": "scroll-animated timeline displaying content with dual phone ",
+    "bestFor": [
+      "general use"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "items[]"
+    ],
+    "import": "@/components/cardStack/layouts/timelines/TimelinePhoneView"
+  },
+  "TimelineProcessFlow": {
+    "category": "layout",
+    "registryType": "component",
+    "intent": "vertical timeline with alternating media/content layout and ",
+    "bestFor": [
+      "general use"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "items[]"
+    ],
+    "import": "@/components/cardStack/layouts/timelines/TimelineProcessFlow"
+  },
+  "TextBox": {
+    "category": "layout",
+    "registryType": "component",
+    "intent": "flexible text composition component with animated title and ",
+    "bestFor": [
+      "general use"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "children"
+    ],
+    "import": "@/components/Textbox"
+  },
+  "AvatarGroup": {
+    "category": "layout",
+    "registryType": "component",
+    "intent": "displays a group of user avatars with overlapping layout and",
+    "bestFor": [
+      "general use"
+    ],
+    "avoidWhen": [],
+    "requires": [],
+    "import": "@/components/shared/AvatarGroup"
+  },
+  "BentoGlobe": {
+    "category": "layout",
+    "registryType": "component",
+    "intent": "interactive 3d rotating globe component using cobe library w",
+    "bestFor": [
+      "general use"
+    ],
+    "avoidWhen": [],
+    "requires": [],
+    "import": "@/components/bento/BentoGlobe"
+  },
+  "TextAnimation": {
+    "category": "title",
+    "registryType": "component",
+    "intent": "unified scroll-triggered text animation component with three",
+    "bestFor": [
+      "general use"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "children"
+    ],
+    "import": "@/components/text/TextAnimation"
+  },
+  "TextNumberCount": {
+    "category": "title",
+    "registryType": "component",
+    "intent": "animated number counter that increments smoothly from a star",
+    "bestFor": [
+      "general use"
+    ],
+    "avoidWhen": [],
+    "requires": [],
+    "import": "@/components/text/TextNumberCount"
+  },
+  "ButtonTextUnderline": {
+    "category": "button",
+    "registryType": "component",
+    "intent": "text-only button where an underline animates in on hover.",
+    "bestFor": [
+      "general use"
+    ],
+    "avoidWhen": [],
+    "requires": [],
+    "import": "@/components/button/ButtonTextUnderline"
+  },
+  "ButtonIconArrow": {
+    "category": "button",
+    "registryType": "component",
+    "intent": "button with a trailing arrow icon that transforms on hover.",
+    "bestFor": [
+      "general use"
+    ],
+    "avoidWhen": [],
+    "requires": [],
+    "import": "@/components/button/ButtonIconArrow"
+  },
+  "ButtonTextStagger": {
+    "category": "button",
+    "registryType": "component",
+    "intent": "cta button with character stagger animation on hover.",
+    "bestFor": [
+      "general use"
+    ],
+    "avoidWhen": [],
+    "requires": [],
+    "import": "@/components/button/ButtonTextStagger/ButtonTextStagger"
+  },
+  "ButtonShiftHover": {
+    "category": "button",
+    "registryType": "component",
+    "intent": "cta button where the label nudges upward on hover and a trai",
+    "bestFor": [
+      "general use"
+    ],
+    "avoidWhen": [],
+    "requires": [],
+    "import": "@/components/button/ButtonShiftHover/ButtonShiftHover"
+  },
+  "ButtonHoverMagnetic": {
+    "category": "button",
+    "registryType": "component",
+    "intent": "cta button that subtly follows the cursor with a magnetic ho",
+    "bestFor": [
+      "general use"
+    ],
+    "avoidWhen": [],
+    "requires": [],
+    "import": "@/components/button/ButtonHoverMagnetic/ButtonHoverMagnetic"
+  },
+  "ButtonHoverBubble": {
+    "category": "button",
+    "registryType": "component",
+    "intent": "cta button with expanding bubble animation where an arrow ic",
+    "bestFor": [
+      "general use"
+    ],
+    "avoidWhen": [],
+    "requires": [],
+    "import": "@/components/button/ButtonHoverBubble"
+  },
+  "ButtonExpandHover": {
+    "category": "button",
+    "registryType": "component",
+    "intent": "cta button with expanding background animation from right to",
+    "bestFor": [
+      "general use"
+    ],
+    "avoidWhen": [],
+    "requires": [],
+    "import": "@/components/button/ButtonExpandHover"
+  },
+  "ButtonBounceEffect": {
+    "category": "button",
+    "registryType": "component",
+    "intent": "cta button with bouncing character animation on hover.",
+    "bestFor": [
+      "general use"
+    ],
+    "avoidWhen": [],
+    "requires": [],
+    "import": "@/components/button/ButtonBounceEffect/ButtonBounceEffect"
+  },
+  "ButtonDirectionalHover": {
+    "category": "button",
+    "registryType": "component",
+    "intent": "cta button with a circle that expands from the mouse entry p",
+    "bestFor": [
+      "general use"
+    ],
+    "avoidWhen": [],
+    "requires": [],
+    "import": "@/components/button/ButtonDirectionalHover/ButtonDirectionalHover"
+  },
+  "ButtonElasticEffect": {
+    "category": "button",
+    "registryType": "component",
+    "intent": "cta button with elastic scale animation on hover.",
+    "bestFor": [
+      "general use"
+    ],
+    "avoidWhen": [],
+    "requires": [],
+    "import": "@/components/button/ButtonElasticEffect/ButtonElasticEffect"
+  },
+  "ButtonTextShift": {
+    "category": "button",
+    "registryType": "component",
+    "intent": "cta button with synchronized character shift animation on ho",
+    "bestFor": [
+      "general use"
+    ],
+    "avoidWhen": [],
+    "requires": [],
+    "import": "@/components/button/ButtonTextShift/ButtonTextShift"
+  },
+  "Input": {
+    "category": "form",
+    "registryType": "component",
+    "intent": "styled text input field with secondary-button styling and ro",
+    "bestFor": [
+      "general use"
+    ],
+    "avoidWhen": [],
+    "requires": [],
+    "import": "@/components/form/Input"
+  },
+  "Textarea": {
+    "category": "form",
+    "registryType": "component",
+    "intent": "styled textarea field with secondary-button styling and roun",
+    "bestFor": [
+      "general use"
+    ],
+    "avoidWhen": [],
+    "requires": [],
+    "import": "@/components/form/Textarea"
+  },
+  "EmailSignupForm": {
+    "category": "form",
+    "registryType": "component",
+    "intent": "compact email signup form with inline input and submit butto",
+    "bestFor": [
+      "general use"
+    ],
+    "avoidWhen": [],
+    "requires": [],
+    "import": "@/components/form/EmailSignupForm"
+  },
+  "ContactForm": {
+    "category": "form",
+    "registryType": "component",
+    "intent": "complete contact form component with tag, animated title and",
+    "bestFor": [
+      "general use"
+    ],
+    "avoidWhen": [],
+    "requires": [],
+    "import": "@/components/form/ContactForm"
+  },
+  "PlainBackground": {
+    "category": "background",
+    "registryType": "component",
+    "intent": "simple solid background using theme background color.",
+    "bestFor": [
+      "general use"
+    ],
+    "avoidWhen": [],
+    "requires": [],
+    "import": "@/components/background/PlainBackground"
+  },
+  "GridBackround": {
+    "category": "background",
+    "registryType": "component",
+    "intent": "grid pattern background with line-based grid and optional 3d",
+    "bestFor": [
+      "general use"
+    ],
+    "avoidWhen": [],
+    "requires": [],
+    "import": "@/components/background/GridBackround"
+  },
+  "DotGridBackground": {
+    "category": "background",
+    "registryType": "component",
+    "intent": "dot pattern background with radial gradient dots and optiona",
+    "bestFor": [
+      "general use"
+    ],
+    "avoidWhen": [],
+    "requires": [],
+    "import": "@/components/background/DotGridBackground"
+  },
+  "CircleGradientBackground": {
+    "category": "background",
+    "registryType": "component",
+    "intent": "two large gradient circles positioned diagonally in corners.",
+    "bestFor": [
+      "general use"
+    ],
+    "avoidWhen": [],
+    "requires": [],
+    "import": "@/components/background/CircleGradientBackground"
+  },
+  "AuroraBackground": {
+    "category": "background",
+    "registryType": "component",
+    "intent": "aurora borealis-style background with multiple rotated gradi",
+    "bestFor": [
+      "general use"
+    ],
+    "avoidWhen": [],
+    "requires": [],
+    "import": "@/components/background/AuroraBackground"
+  },
+  "FloatingGradientBackground": {
+    "category": "background",
+    "registryType": "component",
+    "intent": "five animated gradient circles with css animations and verti",
+    "bestFor": [
+      "general use"
+    ],
+    "avoidWhen": [],
+    "requires": [],
+    "import": "@/components/background/floatingGradientBackground/FloatingGradientBackground"
+  },
+  "AnimatedGridBackground": {
+    "category": "background",
+    "registryType": "component",
+    "intent": "grid pattern with animated pulsing squares using framer moti",
+    "bestFor": [
+      "general use"
+    ],
+    "avoidWhen": [],
+    "requires": [],
+    "import": "@/components/background/AnimatedGridBackground"
+  },
+  "AnimatedAuroraBackground": {
+    "category": "background",
+    "registryType": "component",
+    "intent": "aurora borealis effect with animated repeating gradients and",
+    "bestFor": [
+      "general use"
+    ],
+    "avoidWhen": [],
+    "requires": [],
+    "import": "@/components/background/AnimatedAuroraBackground"
+  },
+  "FluidBackground": {
+    "category": "background",
+    "registryType": "component",
+    "intent": "generative fluid patterns using cppn shader with theme color",
+    "bestFor": [
+      "general use"
+    ],
+    "avoidWhen": [],
+    "requires": [],
+    "import": "@/components/background/FluidBackground"
+  },
+  "RadialGradientBackground": {
+    "category": "background",
+    "registryType": "component",
+    "intent": "customizable radial gradient background with theme color int",
+    "bestFor": [
+      "general use"
+    ],
+    "avoidWhen": [],
+    "requires": [],
+    "import": "@/components/background/RadialGradientBackground"
+  },
+  "GradientBarsBackground": {
+    "category": "background",
+    "registryType": "component",
+    "intent": "gradient bars on left and right edges with fade masks creati",
+    "bestFor": [
+      "general use"
+    ],
+    "avoidWhen": [],
+    "requires": [],
+    "import": "@/components/background/GradientBarsBackground"
+  },
+  "CanvasRevealEffect": {
+    "category": "background",
+    "registryType": "component",
+    "intent": "animated dot matrix reveal effect using webgl shaders with c",
+    "bestFor": [
+      "general use"
+    ],
+    "avoidWhen": [],
+    "requires": [],
+    "import": "@/components/background/CanvasRevealEffect"
+  },
+  "CanvasRevealBackground": {
+    "category": "background",
+    "registryType": "component",
+    "intent": "animated webgl dot matrix effect with ball-shaped radial gra",
+    "bestFor": [
+      "general use"
+    ],
+    "avoidWhen": [],
+    "requires": [],
+    "import": "@/components/background/CanvasRevealBackground"
+  },
+  "CellWaveBackground": {
+    "category": "background",
+    "registryType": "component",
+    "intent": "animated vertical cell columns with gsap creating sequential",
+    "bestFor": [
+      "general use"
+    ],
+    "avoidWhen": [],
+    "requires": [],
+    "import": "@/components/background/CellWaveBackground"
+  },
+  "GlowingOrbBackground": {
+    "category": "background",
+    "registryType": "component",
+    "intent": "glowing orb effect at bottom center with layered radial grad",
+    "bestFor": [
+      "general use"
+    ],
+    "avoidWhen": [],
+    "requires": [],
+    "import": "@/components/background/GlowingOrbBackground"
+  },
+  "BlurBottomBackground": {
+    "category": "background",
+    "registryType": "component",
+    "intent": "backdrop blur effect positioned at the bottom of the page wi",
+    "bestFor": [
+      "general use"
+    ],
+    "avoidWhen": [],
+    "requires": [],
+    "import": "@/components/background/BlurBottomBackground"
+  },
+  "RotatedRaysBackground": {
+    "category": "background",
+    "registryType": "component",
+    "intent": "atmospheric light rays emanating from a rotated origin point",
+    "bestFor": [
+      "general use"
+    ],
+    "avoidWhen": [],
+    "requires": [],
+    "import": "@/components/background/RotatedRaysBackground"
+  },
+  "DownwardRaysBackground": {
+    "category": "background",
+    "registryType": "component",
+    "intent": "atmospheric light rays emanating from top center directly do",
+    "bestFor": [
+      "general use"
+    ],
+    "avoidWhen": [],
+    "requires": [],
+    "import": "@/components/background/DownwardRaysBackground"
+  },
+  "RotatingGradientBackground": {
+    "category": "background",
+    "registryType": "component",
+    "intent": "two rotating circular gradients with optional sparkle ring e",
+    "bestFor": [
+      "general use"
+    ],
+    "avoidWhen": [],
+    "requires": [],
+    "import": "@/components/background/RotatingGradientBackground"
+  },
+  "Sparkles": {
+    "category": "background",
+    "registryType": "component",
+    "intent": "interactive particle effect background with animated sparkle",
+    "bestFor": [
+      "general use"
+    ],
+    "avoidWhen": [],
+    "requires": [],
+    "import": "@/components/background/Sparkles"
+  },
+  "SparklesGradientBackground": {
+    "category": "background",
+    "registryType": "component",
+    "intent": "combined gradient background with sparkle particles, featuri",
+    "bestFor": [
+      "general use"
+    ],
+    "avoidWhen": [],
+    "requires": [],
+    "import": "@/components/background/SparklesGradientBackground"
+  },
+  "HeroBackgrounds": {
+    "category": "background",
+    "registryType": "component",
+    "intent": "unified background component with preset variants for hero s",
+    "bestFor": [
+      "general use"
+    ],
+    "avoidWhen": [],
+    "requires": [],
+    "import": "@/components/background/HeroBackgrounds"
+  },
+  "ProductDetailCard": {
+    "category": "ecommerce",
+    "registryType": "section",
+    "intent": "product detail page with image carousel, variants, rating, a",
+    "bestFor": [
+      "general use"
+    ],
+    "avoidWhen": [],
+    "requires": [],
+    "import": "@/components/ecommerce/productDetail/ProductDetailCard"
+  },
+  "ProductCart": {
+    "category": "ecommerce",
+    "registryType": "section",
+    "intent": "slide-in cart drawer with backdrop overlay, item list, total",
+    "bestFor": [
+      "general use"
+    ],
+    "avoidWhen": [],
+    "requires": [
+      "items[]"
+    ],
+    "import": "@/components/ecommerce/cart/ProductCart"
+  },
+  "ProductCartItem": {
+    "category": "ecommerce",
+    "registryType": "section",
+    "intent": "cart item row with image, name, variants, price, quantity co",
+    "bestFor": [
+      "general use"
+    ],
+    "avoidWhen": [],
+    "requires": [],
+    "import": "@/components/ecommerce/cart/ProductCartItem"
+  },
+  "ProductCatalog": {
+    "category": "ecommerce",
+    "registryType": "section",
+    "intent": "product catalog grid with search bar and filter dropdowns.",
+    "bestFor": [
+      "general use"
+    ],
+    "avoidWhen": [],
+    "requires": [],
+    "import": "@/components/ecommerce/productCatalog/ProductCatalog"
+  },
+  "ProductCatalogItem": {
+    "category": "ecommerce",
+    "registryType": "section",
+    "intent": "product card with image, category, name, rating, and price.",
+    "bestFor": [
+      "general use"
+    ],
+    "avoidWhen": [],
+    "requires": [],
+    "import": "@/components/ecommerce/productCatalog/ProductCatalogItem"
+  },
+  "LegalSection": {
+    "category": "legal",
+    "registryType": "section",
+    "intent": "legal content page for privacy policies, terms of service, a",
+    "bestFor": [
+      "general use"
+    ],
+    "avoidWhen": [],
+    "requires": [],
+    "import": "@/components/legal/LegalSection"
+  }
+}
diff --git a/registry/intents.json b/registry/intents.json
new file mode 100644
index 0000000..c9d420c
--- /dev/null
+++ b/registry/intents.json
@@ -0,0 +1,140 @@
+{
+  "horizontal timeline": [
+    "FeatureCardEight"
+  ],
+  "vertical sticky scroll timeline": [
+    "FeatureCardNine"
+  ],
+  "sequential process": [
+    "FeatureCardSix",
+    "FeatureCardNineteen",
+    "FeatureCardTen",
+    "FeatureTimelineBento"
+  ],
+  "testimonials": [
+    "ProductCardTwo",
+    "TestimonialCardOne",
+    "TestimonialCardTwo",
+    "TestimonialCardFive",
+    "TestimonialCardSix",
+    "TestimonialCardThirteen",
+    "TestimonialCardSixteen",
+    "SocialProofOne"
+  ],
+  "feature showcase": [
+    "NavbarStyleFullscreen",
+    "NavbarStyleCentered",
+    "SplitAbout",
+    "TextSplitAbout",
+    "TextAbout",
+    "TestimonialAboutCard",
+    "AboutMetric",
+    "FeatureCardOne",
+    "FeatureCardThree",
+    "FeatureCardTwelve",
+    "FeatureCardSixteen",
+    "FeatureCardTwentyOne",
+    "FeatureCardMedia",
+    "FeatureCardTwentyThree",
+    "FeatureCardTwentyFour",
+    "FeatureCardTwentyFive",
+    "FeatureCardTwentySix",
+    "FeatureCardTwentySeven",
+    "FeatureCardTwentyEight",
+    "FeatureCardTwentyNine",
+    "FeatureBento",
+    "FeatureBorderGlow",
+    "FeatureHoverPattern",
+    "PricingCardOne",
+    "PricingCardTwo",
+    "PricingCardThree",
+    "PricingCardFive",
+    "PricingCardEight",
+    "PricingCardNine",
+    "MetricCardThree",
+    "MetricCardSeven",
+    "TestimonialCardTen",
+    "TestimonialCardTwelve",
+    "ContactCenter",
+    "ContactSplit",
+    "ContactSplitForm",
+    "FooterBase",
+    "FooterMedia",
+    "FooterLogoEmphasis",
+    "FooterLogoEmphasisReveal",
+    "FooterSimple",
+    "NavbarLayoutFloatingInline",
+    "NavbarLayoutFloatingOverlay"
+  ],
+  "metrics display": [
+    "MetricCardOne",
+    "MetricCardTwo",
+    "MetricCardEleven",
+    "MetricCardFourteen"
+  ],
+  "contact form": [
+    "ProductCardOne",
+    "TeamCardEleven",
+    "FaqBase",
+    "FaqDouble",
+    "ContactText",
+    "ContactCTA"
+  ],
+  "hero with media": [
+    "HeroBillboard",
+    "HeroBillboardCarousel",
+    "HeroBillboardGallery",
+    "HeroSplit",
+    "HeroSplitKpi",
+    "HeroOverlay",
+    "HeroLogo",
+    "HeroLogoBillboard",
+    "HeroBillboardScroll",
+    "HeroBillboardRotatedCarousel",
+    "HeroCarouselLogo",
+    "HeroCentered",
+    "HeroSignup",
+    "HeroSplitDualMedia",
+    "HeroPersonalLinks",
+    "HeroBillboardDashboard",
+    "HeroSplitDoubleCarousel",
+    "HeroSplitTestimonial",
+    "HeroBillboardTestimonial",
+    "MediaAbout",
+    "TestimonialCardFifteen",
+    "BlogCardThree"
+  ],
+  "product showcase": [
+    "NavbarStyleApple",
+    "ProductCardThree",
+    "ProductCardFour"
+  ],
+  "about section": [
+    "InlineImageSplitTextAbout",
+    "MetricSplitMediaAbout",
+    "TeamCardTwo",
+    "TeamCardSix"
+  ],
+  "sequential vertical steps with alternating layout": [
+    "FeatureCardSeven"
+  ],
+  "team section": [
+    "TeamCardOne",
+    "TeamCardFive",
+    "TeamCardTen"
+  ],
+  "faq section": [
+    "FaqSplitMedia",
+    "FaqSplitText"
+  ],
+  "content listing": [
+    "BlogCardOne",
+    "BlogCardTwo"
+  ],
+  "footer": [
+    "FooterBaseReveal",
+    "FooterCard",
+    "FooterBaseCard",
+    "FooterLogoReveal"
+  ]
+}
diff --git a/registry/schemas/AboutMetric.schema.json b/registry/schemas/AboutMetric.schema.json
new file mode 100644
index 0000000..81d22b3
--- /dev/null
+++ b/registry/schemas/AboutMetric.schema.json
@@ -0,0 +1,18 @@
+{
+  "name": "AboutMetric",
+  "propsSchema": {
+    "title": "string",
+    "metrics": "Array<{ icon: LucideIcon, label: string, value: string }>",
+    "metricsAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'About metrics section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "titleClassName?": "string",
+    "metricsContainerClassName?": "string",
+    "metricCardClassName?": "string",
+    "metricIconClassName?": "string",
+    "metricLabelClassName?": "string",
+    "metricValueClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/AnimatedAuroraBackground.schema.json b/registry/schemas/AnimatedAuroraBackground.schema.json
new file mode 100644
index 0000000..422fe4b
--- /dev/null
+++ b/registry/schemas/AnimatedAuroraBackground.schema.json
@@ -0,0 +1,8 @@
+{
+  "name": "AnimatedAuroraBackground",
+  "propsSchema": {
+    "className?": "string",
+    "showRadialGradient?": "boolean (default: true)",
+    "invertColors": "boolean (REQUIRED - true for light backgrounds, false for dark backgrounds)"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/AnimatedGridBackground.schema.json b/registry/schemas/AnimatedGridBackground.schema.json
new file mode 100644
index 0000000..5608cca
--- /dev/null
+++ b/registry/schemas/AnimatedGridBackground.schema.json
@@ -0,0 +1,9 @@
+{
+  "name": "AnimatedGridBackground",
+  "propsSchema": {
+    "squareSize?": "number (default: 100)",
+    "numSquares?": "number (default: 50)",
+    "maxOpacity?": "number (default: 0.15)",
+    "className?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/AuroraBackground.schema.json b/registry/schemas/AuroraBackground.schema.json
new file mode 100644
index 0000000..f399c2d
--- /dev/null
+++ b/registry/schemas/AuroraBackground.schema.json
@@ -0,0 +1,6 @@
+{
+  "name": "AuroraBackground",
+  "propsSchema": {
+    "className?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/AvatarGroup.schema.json b/registry/schemas/AvatarGroup.schema.json
new file mode 100644
index 0000000..13bca52
--- /dev/null
+++ b/registry/schemas/AvatarGroup.schema.json
@@ -0,0 +1,13 @@
+{
+  "name": "AvatarGroup",
+  "propsSchema": {
+    "avatars": "Array<{ src: string, alt: string }>",
+    "text?": "string",
+    "maxVisible?": "number (default: 5)",
+    "animationType?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "className?": "string",
+    "avatarClassName?": "string",
+    "textClassName?": "string",
+    "ariaLabel?": "string (default: 'User avatars')"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/BentoGlobe.schema.json b/registry/schemas/BentoGlobe.schema.json
new file mode 100644
index 0000000..5bc5f02
--- /dev/null
+++ b/registry/schemas/BentoGlobe.schema.json
@@ -0,0 +1,7 @@
+{
+  "name": "BentoGlobe",
+  "propsSchema": {
+    "className?": "string",
+    "config?": "COBEOptions - Custom globe configuration (see COBE docs)"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/BlogCardOne.schema.json b/registry/schemas/BlogCardOne.schema.json
new file mode 100644
index 0000000..94fb316
--- /dev/null
+++ b/registry/schemas/BlogCardOne.schema.json
@@ -0,0 +1,44 @@
+{
+  "name": "BlogCardOne",
+  "propsSchema": {
+    "blogs": "Array<{ id: string, category: string, title: string, excerpt: string, imageSrc: string, imageAlt?: string, authorName: string, authorAvatar: string, date: string, onBlogClick?: () => void }> - Blog card items",
+    "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+    "uniformGridCustomHeightClasses?": "string",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Blog section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "imageWrapperClassName?": "string",
+    "imageClassName?": "string",
+    "categoryClassName?": "string",
+    "cardTitleClassName?": "string",
+    "excerptClassName?": "string",
+    "authorContainerClassName?": "string",
+    "authorAvatarClassName?": "string",
+    "authorNameClassName?": "string",
+    "dateClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string",
+    "textBoxTitleImageClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "gridClassName?": "string",
+    "carouselClassName?": "string",
+    "controlsClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/BlogCardThree.schema.json b/registry/schemas/BlogCardThree.schema.json
new file mode 100644
index 0000000..0cd78dd
--- /dev/null
+++ b/registry/schemas/BlogCardThree.schema.json
@@ -0,0 +1,41 @@
+{
+  "name": "BlogCardThree",
+  "propsSchema": {
+    "blogs": "Array<{ id: string, category: string, title: string, excerpt: string, imageSrc?: string, imageAlt?: string, authorName?: string, authorAvatar?: string, date?: string, onBlogClick?: () => void }> - Blog card items",
+    "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+    "uniformGridCustomHeightClasses?": "string (default: 'min-h-none')",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Blog section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "cardContentClassName?": "string",
+    "categoryTagClassName?": "string",
+    "cardTitleClassName?": "string",
+    "excerptClassName?": "string",
+    "mediaWrapperClassName?": "string",
+    "mediaClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string",
+    "textBoxTitleImageClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "gridClassName?": "string",
+    "carouselClassName?": "string",
+    "controlsClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/BlogCardTwo.schema.json b/registry/schemas/BlogCardTwo.schema.json
new file mode 100644
index 0000000..ea35a89
--- /dev/null
+++ b/registry/schemas/BlogCardTwo.schema.json
@@ -0,0 +1,41 @@
+{
+  "name": "BlogCardTwo",
+  "propsSchema": {
+    "blogs": "Array<{ id: string, category: string | string[], title: string, excerpt: string, imageSrc: string, imageAlt?: string, authorName: string, authorAvatar?: string, date: string, onBlogClick?: () => void }> - Blog card items",
+    "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+    "uniformGridCustomHeightClasses?": "string",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Blog section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "imageWrapperClassName?": "string",
+    "imageClassName?": "string",
+    "authorDateClassName?": "string",
+    "cardTitleClassName?": "string",
+    "excerptClassName?": "string",
+    "categoryClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string",
+    "textBoxTitleImageClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "gridClassName?": "string",
+    "carouselClassName?": "string",
+    "controlsClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/BlurBottomBackground.schema.json b/registry/schemas/BlurBottomBackground.schema.json
new file mode 100644
index 0000000..3ec0206
--- /dev/null
+++ b/registry/schemas/BlurBottomBackground.schema.json
@@ -0,0 +1,6 @@
+{
+  "name": "BlurBottomBackground",
+  "propsSchema": {
+    "className?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/ButtonBounceEffect.schema.json b/registry/schemas/ButtonBounceEffect.schema.json
new file mode 100644
index 0000000..d2e25f9
--- /dev/null
+++ b/registry/schemas/ButtonBounceEffect.schema.json
@@ -0,0 +1,15 @@
+{
+  "name": "ButtonBounceEffect",
+  "propsSchema": {
+    "text": "string",
+    "onClick?": "() => void",
+    "href?": "string - External URLs open in new tab, internal values scroll to section",
+    "scrollToSection?": "boolean",
+    "className?": "string",
+    "bgClassName?": "string",
+    "textClassName?": "string",
+    "disabled?": "boolean (default: false)",
+    "ariaLabel?": "string",
+    "type?": "'button' | 'submit' | 'reset' (default: 'button')"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/ButtonDirectionalHover.schema.json b/registry/schemas/ButtonDirectionalHover.schema.json
new file mode 100644
index 0000000..a34df45
--- /dev/null
+++ b/registry/schemas/ButtonDirectionalHover.schema.json
@@ -0,0 +1,16 @@
+{
+  "name": "ButtonDirectionalHover",
+  "propsSchema": {
+    "text": "string",
+    "onClick?": "() => void",
+    "href?": "string - External URLs open in new tab, internal values scroll to section",
+    "scrollToSection?": "boolean",
+    "className?": "string",
+    "bgClassName?": "string",
+    "textClassName?": "string",
+    "circleClassName?": "string - Controls the expanding circle color",
+    "disabled?": "boolean (default: false)",
+    "ariaLabel?": "string",
+    "type?": "'button' | 'submit' | 'reset' (default: 'button')"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/ButtonElasticEffect.schema.json b/registry/schemas/ButtonElasticEffect.schema.json
new file mode 100644
index 0000000..9b10aa6
--- /dev/null
+++ b/registry/schemas/ButtonElasticEffect.schema.json
@@ -0,0 +1,14 @@
+{
+  "name": "ButtonElasticEffect",
+  "propsSchema": {
+    "text": "string",
+    "onClick?": "() => void",
+    "href?": "string - External URLs open in new tab, internal values scroll to section",
+    "scrollToSection?": "boolean",
+    "className?": "string",
+    "textClassName?": "string",
+    "disabled?": "boolean (default: false)",
+    "ariaLabel?": "string",
+    "type?": "'button' | 'submit' | 'reset' (default: 'button')"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/ButtonExpandHover.schema.json b/registry/schemas/ButtonExpandHover.schema.json
new file mode 100644
index 0000000..22a6639
--- /dev/null
+++ b/registry/schemas/ButtonExpandHover.schema.json
@@ -0,0 +1,16 @@
+{
+  "name": "ButtonExpandHover",
+  "propsSchema": {
+    "text": "string",
+    "onClick?": "() => void",
+    "href?": "string - External URLs open in new tab, internal values scroll to section",
+    "scrollToSection?": "boolean",
+    "className?": "string",
+    "textClassName?": "string - Applied to the text span (automatically includes base and hover colors in sections)",
+    "iconClassName?": "string - Applied to the arrow icon container (automatically set in sections)",
+    "iconBgClassName?": "string - Applied to the expanding background (automatically set in sections)",
+    "disabled?": "boolean (default: false)",
+    "ariaLabel?": "string",
+    "type?": "'button' | 'submit' | 'reset' (default: 'button')"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/ButtonHoverBubble.schema.json b/registry/schemas/ButtonHoverBubble.schema.json
new file mode 100644
index 0000000..f4500fc
--- /dev/null
+++ b/registry/schemas/ButtonHoverBubble.schema.json
@@ -0,0 +1,16 @@
+{
+  "name": "ButtonHoverBubble",
+  "propsSchema": {
+    "text": "string",
+    "onClick?": "() => void",
+    "href?": "string - External URLs open in new tab, internal values scroll to section",
+    "scrollToSection?": "boolean",
+    "className?": "string",
+    "bgClassName?": "string - Applied to the text container (automatically set in sections)",
+    "textClassName?": "string - Applied to the text span",
+    "iconClassName?": "string - Applied to both arrow icon containers (automatically set in sections)",
+    "disabled?": "boolean (default: false)",
+    "ariaLabel?": "string",
+    "type?": "'button' | 'submit' | 'reset' (default: 'button')"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/ButtonHoverMagnetic.schema.json b/registry/schemas/ButtonHoverMagnetic.schema.json
new file mode 100644
index 0000000..fdbe421
--- /dev/null
+++ b/registry/schemas/ButtonHoverMagnetic.schema.json
@@ -0,0 +1,15 @@
+{
+  "name": "ButtonHoverMagnetic",
+  "propsSchema": {
+    "text": "string",
+    "onClick?": "() => void",
+    "href?": "string - External URLs open in new tab, internal values scroll to section",
+    "scrollToSection?": "boolean",
+    "className?": "string",
+    "textClassName?": "string",
+    "strengthFactor?": "number (default: 20)",
+    "disabled?": "boolean (default: false)",
+    "ariaLabel?": "string",
+    "type?": "'button' | 'submit' | 'reset' (default: 'button')"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/ButtonIconArrow.schema.json b/registry/schemas/ButtonIconArrow.schema.json
new file mode 100644
index 0000000..098d35f
--- /dev/null
+++ b/registry/schemas/ButtonIconArrow.schema.json
@@ -0,0 +1,15 @@
+{
+  "name": "ButtonIconArrow",
+  "propsSchema": {
+    "text": "string",
+    "onClick?": "() => void",
+    "href?": "string - External URLs open in new tab, internal values scroll to section",
+    "scrollToSection?": "boolean",
+    "className?": "string",
+    "textClassName?": "string",
+    "iconClassName?": "string",
+    "disabled?": "boolean (default: false)",
+    "ariaLabel?": "string",
+    "type?": "'button' | 'submit' | 'reset' (default: 'button')"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/ButtonShiftHover.schema.json b/registry/schemas/ButtonShiftHover.schema.json
new file mode 100644
index 0000000..d782e8a
--- /dev/null
+++ b/registry/schemas/ButtonShiftHover.schema.json
@@ -0,0 +1,15 @@
+{
+  "name": "ButtonShiftHover",
+  "propsSchema": {
+    "text": "string",
+    "onClick?": "() => void",
+    "href?": "string - External URLs open in new tab, internal values scroll to section",
+    "scrollToSection?": "boolean",
+    "className?": "string",
+    "bgClassName?": "string",
+    "textClassName?": "string",
+    "disabled?": "boolean (default: false)",
+    "ariaLabel?": "string",
+    "type?": "'button' | 'submit' | 'reset' (default: 'button')"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/ButtonTextShift.schema.json b/registry/schemas/ButtonTextShift.schema.json
new file mode 100644
index 0000000..318bc49
--- /dev/null
+++ b/registry/schemas/ButtonTextShift.schema.json
@@ -0,0 +1,15 @@
+{
+  "name": "ButtonTextShift",
+  "propsSchema": {
+    "text": "string",
+    "onClick?": "() => void",
+    "href?": "string - External URLs open in new tab, internal values scroll to section",
+    "scrollToSection?": "boolean",
+    "className?": "string",
+    "bgClassName?": "string",
+    "textClassName?": "string",
+    "disabled?": "boolean (default: false)",
+    "ariaLabel?": "string",
+    "type?": "'button' | 'submit' | 'reset' (default: 'button')"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/ButtonTextStagger.schema.json b/registry/schemas/ButtonTextStagger.schema.json
new file mode 100644
index 0000000..6a60652
--- /dev/null
+++ b/registry/schemas/ButtonTextStagger.schema.json
@@ -0,0 +1,15 @@
+{
+  "name": "ButtonTextStagger",
+  "propsSchema": {
+    "text": "string",
+    "onClick?": "() => void",
+    "href?": "string - External URLs open in new tab, internal values scroll to section",
+    "scrollToSection?": "boolean",
+    "className?": "string",
+    "bgClassName?": "string",
+    "textClassName?": "string",
+    "disabled?": "boolean (default: false)",
+    "ariaLabel?": "string",
+    "type?": "'button' | 'submit' | 'reset' (default: 'button')"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/ButtonTextUnderline.schema.json b/registry/schemas/ButtonTextUnderline.schema.json
new file mode 100644
index 0000000..3eaf2ec
--- /dev/null
+++ b/registry/schemas/ButtonTextUnderline.schema.json
@@ -0,0 +1,13 @@
+{
+  "name": "ButtonTextUnderline",
+  "propsSchema": {
+    "text": "string",
+    "onClick?": "() => void",
+    "href?": "string - External URLs open in new tab, internal values scroll to section",
+    "scrollToSection?": "boolean",
+    "className?": "string",
+    "disabled?": "boolean (default: false)",
+    "ariaLabel?": "string",
+    "type?": "'button' | 'submit' | 'reset' (default: 'button')"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/CardStack.schema.json b/registry/schemas/CardStack.schema.json
new file mode 100644
index 0000000..6fb29c3
--- /dev/null
+++ b/registry/schemas/CardStack.schema.json
@@ -0,0 +1,35 @@
+{
+  "name": "CardStack",
+  "propsSchema": {
+    "children": "React.ReactNode",
+    "mode?": "'auto' | 'buttons' (default: 'buttons')",
+    "gridVariant?": "'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right' (default: 'uniform-all-items-equal')",
+    "uniformGridCustomHeightClasses?": "string (default: varies by usage)",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d' (required - controls GSAP scroll animations with stagger effect)",
+    "title?": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description?": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground?": "boolean",
+    "ariaLabel?": "string (default: 'Card stack')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "gridClassName?": "string",
+    "carouselClassName?": "string",
+    "controlsClassName?": "string",
+    "textBoxClassName?": "string",
+    "titleClassName?": "string",
+    "titleImageWrapperClassName?": "string",
+    "titleImageClassName?": "string",
+    "descriptionClassName?": "string",
+    "tagClassName?": "string",
+    "buttonContainerClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/CircleGradientBackground.schema.json b/registry/schemas/CircleGradientBackground.schema.json
new file mode 100644
index 0000000..f9e3d18
--- /dev/null
+++ b/registry/schemas/CircleGradientBackground.schema.json
@@ -0,0 +1,7 @@
+{
+  "name": "CircleGradientBackground",
+  "propsSchema": {
+    "diagonal?": "'primary' | 'secondary' (default: 'primary')",
+    "className?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/ContactCTA.schema.json b/registry/schemas/ContactCTA.schema.json
new file mode 100644
index 0000000..a3e747e
--- /dev/null
+++ b/registry/schemas/ContactCTA.schema.json
@@ -0,0 +1,25 @@
+{
+  "name": "ContactCTA",
+  "propsSchema": {
+    "tag": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "title": "string",
+    "description": "string",
+    "buttons": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Contact section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "contentClassName?": "string",
+    "textBoxClassName?": "string",
+    "titleClassName?": "string",
+    "descriptionClassName?": "string",
+    "tagClassName?": "string",
+    "buttonContainerClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string"
+  }
+}
diff --git a/registry/schemas/ContactCenter.schema.json b/registry/schemas/ContactCenter.schema.json
new file mode 100644
index 0000000..cd612db
--- /dev/null
+++ b/registry/schemas/ContactCenter.schema.json
@@ -0,0 +1,28 @@
+{
+  "name": "ContactCenter",
+  "propsSchema": {
+    "tag": "string",
+    "title": "string",
+    "description": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "useInvertedBackground": "boolean",
+    "inputPlaceholder?": "string (default: 'Enter your email')",
+    "buttonText?": "string (default: 'Sign Up')",
+    "termsText?": "string (default: 'By clicking Sign Up you're confirming that you agree with our Terms and Conditions.')",
+    "onSubmit?": "(email: string) => void",
+    "ariaLabel?": "string (default: 'Contact section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "contentClassName?": "string",
+    "tagClassName?": "string",
+    "titleClassName?": "string",
+    "descriptionClassName?": "string",
+    "formWrapperClassName?": "string",
+    "formClassName?": "string",
+    "inputClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string",
+    "termsClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/ContactForm.schema.json b/registry/schemas/ContactForm.schema.json
new file mode 100644
index 0000000..2867d23
--- /dev/null
+++ b/registry/schemas/ContactForm.schema.json
@@ -0,0 +1,25 @@
+{
+  "name": "ContactForm",
+  "propsSchema": {
+    "title": "string",
+    "description": "string",
+    "tag": "string",
+    "tagIcon?": "LucideIcon",
+    "inputPlaceholder?": "string (default: 'Enter your email')",
+    "buttonText?": "string (default: 'Sign Up')",
+    "termsText?": "string (default: 'By clicking Sign Up you're confirming that you agree with our Terms and Conditions.')",
+    "onSubmit?": "(email: string) => void",
+    "useInvertedBackground": "boolean",
+    "centered?": "boolean (default: false)",
+    "className?": "string",
+    "tagClassName?": "string",
+    "titleClassName?": "string",
+    "descriptionClassName?": "string",
+    "formWrapperClassName?": "string",
+    "formClassName?": "string",
+    "inputClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string",
+    "termsClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/ContactSplit.schema.json b/registry/schemas/ContactSplit.schema.json
new file mode 100644
index 0000000..e6fcb23
--- /dev/null
+++ b/registry/schemas/ContactSplit.schema.json
@@ -0,0 +1,37 @@
+{
+  "name": "ContactSplit",
+  "propsSchema": {
+    "tag": "string",
+    "title": "string",
+    "description": "string",
+    "useInvertedBackground": "boolean",
+    "imageSrc?": "string",
+    "videoSrc?": "string",
+    "imageAlt?": "string (default: '')",
+    "videoAriaLabel?": "string (default: 'Contact section video')",
+    "mediaPosition?": "'left' | 'right' (default: 'right')",
+    "mediaAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "inputPlaceholder?": "string (default: 'Enter your email')",
+    "buttonText?": "string (default: 'Sign Up')",
+    "termsText?": "string (default: 'By clicking Sign Up you're confirming that you agree with our Terms and Conditions.')",
+    "onSubmit?": "(email: string) => void",
+    "ariaLabel?": "string (default: 'Contact section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "contentClassName?": "string",
+    "contactFormClassName?": "string",
+    "tagClassName?": "string",
+    "titleClassName?": "string",
+    "descriptionClassName?": "string",
+    "formWrapperClassName?": "string",
+    "formClassName?": "string",
+    "inputClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string",
+    "termsClassName?": "string",
+    "mediaWrapperClassName?": "string",
+    "mediaClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/ContactSplitForm.schema.json b/registry/schemas/ContactSplitForm.schema.json
new file mode 100644
index 0000000..e30fc65
--- /dev/null
+++ b/registry/schemas/ContactSplitForm.schema.json
@@ -0,0 +1,30 @@
+{
+  "name": "ContactSplitForm",
+  "propsSchema": {
+    "title": "string",
+    "description": "string",
+    "inputs": "Array<{ name: string, type: string, placeholder: string, required?: boolean, className?: string }> - Form input fields (min 2 required)",
+    "multiSelect?": "{ name: string, label: string, options: string[] } - Optional multi-select dropdown field",
+    "textarea?": "{ name: string, placeholder: string, rows?: number, required?: boolean, className?: string } - Optional textarea field",
+    "useInvertedBackground": "boolean",
+    "imageSrc?": "string",
+    "videoSrc?": "string",
+    "imageAlt?": "string (default: '')",
+    "videoAriaLabel?": "string (default: 'Contact section video')",
+    "mediaPosition?": "'left' | 'right' (default: 'right')",
+    "mediaAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal' (default: 'none')",
+    "buttonText?": "string (default: 'Submit')",
+    "onSubmit?": "(data: Record<string, string>) => void",
+    "ariaLabel?": "string (default: 'Contact section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "contentClassName?": "string",
+    "formCardClassName?": "string",
+    "titleClassName?": "string",
+    "descriptionClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string",
+    "mediaWrapperClassName?": "string",
+    "mediaClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/ContactText.schema.json b/registry/schemas/ContactText.schema.json
new file mode 100644
index 0000000..35eea53
--- /dev/null
+++ b/registry/schemas/ContactText.schema.json
@@ -0,0 +1,16 @@
+{
+  "name": "ContactText",
+  "propsSchema": {
+    "text": "string",
+    "animationType?": "'entrance-slide' | 'reveal-blur' | 'background-highlight' (default: 'entrance-slide')",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Contact section')",
+    "className?": "string",
+    "containerClassName?": "string - Card wrapper styling",
+    "textClassName?": "string - TextAnimation heading styling",
+    "buttonContainerClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/DotGridBackground.schema.json b/registry/schemas/DotGridBackground.schema.json
new file mode 100644
index 0000000..6cc147b
--- /dev/null
+++ b/registry/schemas/DotGridBackground.schema.json
@@ -0,0 +1,8 @@
+{
+  "name": "DotGridBackground",
+  "propsSchema": {
+    "size?": "'small' | 'medium' | 'large' (default: 'medium')",
+    "perspectiveThreeD?": "boolean (default: false)",
+    "className?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/DownwardRaysBackground.schema.json b/registry/schemas/DownwardRaysBackground.schema.json
new file mode 100644
index 0000000..a67e290
--- /dev/null
+++ b/registry/schemas/DownwardRaysBackground.schema.json
@@ -0,0 +1,9 @@
+{
+  "name": "DownwardRaysBackground",
+  "propsSchema": {
+    "animated": "boolean - Required. When true, rays animate with pulsing opacity. When false, rays display static opacity.",
+    "showGrid": "boolean - Required. When true, displays a grid overlay fading from top center. When false, no grid is shown.",
+    "className?": "string",
+    "containerClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/EmailSignupForm.schema.json b/registry/schemas/EmailSignupForm.schema.json
new file mode 100644
index 0000000..9125062
--- /dev/null
+++ b/registry/schemas/EmailSignupForm.schema.json
@@ -0,0 +1,12 @@
+{
+  "name": "EmailSignupForm",
+  "propsSchema": {
+    "inputPlaceholder?": "string (default: 'Enter your email')",
+    "buttonText?": "string (default: 'Sign Up')",
+    "onSubmit?": "(email: string) => void",
+    "className?": "string",
+    "inputClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/FaqBase.schema.json b/registry/schemas/FaqBase.schema.json
new file mode 100644
index 0000000..cf46360
--- /dev/null
+++ b/registry/schemas/FaqBase.schema.json
@@ -0,0 +1,38 @@
+{
+  "name": "FaqBase",
+  "propsSchema": {
+    "faqs": "Array<{ id: string, title: string, content: string }> - FAQ items",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "faqsAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground": "boolean",
+    "animationType?": "'smooth' | 'instant' (default: 'smooth')",
+    "showCard?": "boolean (default: true)",
+    "ariaLabel?": "string (default: 'FAQ section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "titleImageWrapperClassName?": "string",
+    "titleImageClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string",
+    "faqsContainerClassName?": "string",
+    "accordionClassName?": "string",
+    "accordionTitleClassName?": "string",
+    "accordionIconContainerClassName?": "string",
+    "accordionIconClassName?": "string",
+    "accordionContentClassName?": "string",
+    "separatorClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/FaqDouble.schema.json b/registry/schemas/FaqDouble.schema.json
new file mode 100644
index 0000000..1d0b807
--- /dev/null
+++ b/registry/schemas/FaqDouble.schema.json
@@ -0,0 +1,37 @@
+{
+  "name": "FaqDouble",
+  "propsSchema": {
+    "faqs": "Array<{ id: string, title: string, content: string }> - FAQ items",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "faqsAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground": "boolean",
+    "animationType?": "'smooth' | 'instant' (default: 'smooth')",
+    "ariaLabel?": "string (default: 'FAQ section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "titleImageWrapperClassName?": "string",
+    "titleImageClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string",
+    "faqsContainerClassName?": "string",
+    "columnClassName?": "string",
+    "accordionClassName?": "string",
+    "accordionTitleClassName?": "string",
+    "accordionIconContainerClassName?": "string",
+    "accordionIconClassName?": "string",
+    "accordionContentClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/FaqSplitMedia.schema.json b/registry/schemas/FaqSplitMedia.schema.json
new file mode 100644
index 0000000..8b3f16a
--- /dev/null
+++ b/registry/schemas/FaqSplitMedia.schema.json
@@ -0,0 +1,47 @@
+{
+  "name": "FaqSplitMedia",
+  "propsSchema": {
+    "faqs": "Array<{ id: string, title: string, content: string }> - FAQ items",
+    "imageSrc?": "string",
+    "videoSrc?": "string",
+    "imageAlt?": "string (default: '')",
+    "videoAriaLabel?": "string (default: 'FAQ section video')",
+    "mediaPosition?": "'left' | 'right' (default: 'left')",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "faqsAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "mediaAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground": "boolean",
+    "animationType?": "'smooth' | 'instant' (default: 'smooth')",
+    "showCard?": "boolean (default: true)",
+    "ariaLabel?": "string (default: 'FAQ section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "titleImageWrapperClassName?": "string",
+    "titleImageClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string",
+    "contentClassName?": "string",
+    "mediaWrapperClassName?": "string",
+    "mediaClassName?": "string",
+    "faqsContainerClassName?": "string",
+    "accordionClassName?": "string",
+    "accordionTitleClassName?": "string",
+    "accordionIconContainerClassName?": "string",
+    "accordionIconClassName?": "string",
+    "accordionContentClassName?": "string",
+    "separatorClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/FaqSplitText.schema.json b/registry/schemas/FaqSplitText.schema.json
new file mode 100644
index 0000000..ac8dfb4
--- /dev/null
+++ b/registry/schemas/FaqSplitText.schema.json
@@ -0,0 +1,32 @@
+{
+  "name": "FaqSplitText",
+  "propsSchema": {
+    "faqs": "Array<{ id: string, title: string, content: string }> - FAQ items",
+    "sideTitle": "string",
+    "sideDescription?": "string",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "faqsAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textPosition?": "'left' | 'right' (default: 'left')",
+    "useInvertedBackground": "boolean",
+    "animationType?": "'smooth' | 'instant' (default: 'smooth')",
+    "showCard?": "boolean (default: true)",
+    "ariaLabel?": "string (default: 'FAQ section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "contentClassName?": "string",
+    "textContainerClassName?": "string",
+    "sideTitleClassName?": "string",
+    "sideDescriptionClassName?": "string",
+    "buttonContainerClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string",
+    "faqsContainerClassName?": "string",
+    "accordionClassName?": "string",
+    "accordionTitleClassName?": "string",
+    "accordionIconContainerClassName?": "string",
+    "accordionIconClassName?": "string",
+    "accordionContentClassName?": "string",
+    "separatorClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/FeatureBento.schema.json b/registry/schemas/FeatureBento.schema.json
new file mode 100644
index 0000000..ce2c166
--- /dev/null
+++ b/registry/schemas/FeatureBento.schema.json
@@ -0,0 +1,38 @@
+{
+  "name": "FeatureBento",
+  "propsSchema": {
+    "features": "Array<{ title: string, description: string, button?: { text: string, href?: string }, bentoComponent: ... }> - CRITICAL: Each feature MUST use a DIFFERENT bentoComponent type (never repeat same type). Available types: 'globe' | 'icon-info-cards' | 'animated-bar-chart' | '3d-stack-cards' | '3d-task-list' | 'orbiting-icons' | 'marquee' | 'map' | 'line-chart' | '3d-card-grid' | 'phone' | 'chat' | 'reveal-icon' | 'timeline' | 'media-stack', plus bentoComponent-specific props",
+    "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }>",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{ text: string, href?: string, onClick?: () => void }>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image'",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Feature section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string",
+    "textBoxTitleImageClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "cardTitleClassName?": "string",
+    "cardDescriptionClassName?": "string",
+    "cardButtonClassName?": "string",
+    "cardButtonTextClassName?": "string",
+    "gridClassName?": "string",
+    "carouselClassName?": "string",
+    "controlsClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string"
+  }
+}
diff --git a/registry/schemas/FeatureBorderGlow.schema.json b/registry/schemas/FeatureBorderGlow.schema.json
new file mode 100644
index 0000000..6251ba4
--- /dev/null
+++ b/registry/schemas/FeatureBorderGlow.schema.json
@@ -0,0 +1,39 @@
+{
+  "name": "FeatureBorderGlow",
+  "propsSchema": {
+    "features": "FeatureCard[] (required) - Array with icon, title, description",
+    "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+    "uniformGridCustomHeightClasses?": "string (default: 'min-h-75 2xl:min-h-85')",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal'",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }>",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{ text: string, href?: string, onClick?: () => void }>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image'",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Feature section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "iconContainerClassName?": "string",
+    "iconClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string",
+    "textBoxTitleImageClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "cardTitleClassName?": "string",
+    "cardDescriptionClassName?": "string",
+    "gridClassName?": "string",
+    "carouselClassName?": "string",
+    "controlsClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string"
+  }
+}
diff --git a/registry/schemas/FeatureCardEight.schema.json b/registry/schemas/FeatureCardEight.schema.json
new file mode 100644
index 0000000..b92ab55
--- /dev/null
+++ b/registry/schemas/FeatureCardEight.schema.json
@@ -0,0 +1,36 @@
+{
+  "name": "FeatureCardEight",
+  "propsSchema": {
+    "features": "Array<{ title: string, description: string } & ({ imageSrc: string, imageAlt?: string } | { videoSrc: string, videoAriaLabel?: string })>",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Feature section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "titleImageWrapperClassName?": "string",
+    "titleImageClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string",
+    "cardClassName?": "string",
+    "progressBarClassName?": "string",
+    "cardContentClassName?": "string",
+    "stepNumberClassName?": "string",
+    "cardTitleClassName?": "string",
+    "cardDescriptionClassName?": "string",
+    "mediaContainerClassName?": "string",
+    "mediaClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/FeatureCardMedia.schema.json b/registry/schemas/FeatureCardMedia.schema.json
new file mode 100644
index 0000000..9dbcae7
--- /dev/null
+++ b/registry/schemas/FeatureCardMedia.schema.json
@@ -0,0 +1,44 @@
+{
+  "name": "FeatureCardMedia",
+  "propsSchema": {
+    "features": "Array<{ id: string, title: string, description: string, tag: string, imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string, buttons?: ButtonConfig[], onCardClick?: () => void }>",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal'",
+    "title": "string",
+    "description": "string",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image'",
+    "useInvertedBackground": "boolean",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }>",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{ text: string, href?: string, onClick?: () => void }>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+    "uniformGridCustomHeightClasses?": "string",
+    "ariaLabel?": "string (default: 'Features section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "itemClassName?": "string",
+    "mediaWrapperClassName?": "string",
+    "mediaClassName?": "string",
+    "tagClassName?": "string",
+    "contentClassName?": "string",
+    "cardTitleClassName?": "string",
+    "cardDescriptionClassName?": "string",
+    "cardButtonContainerClassName?": "string",
+    "cardButtonClassName?": "string",
+    "cardButtonTextClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string",
+    "textBoxTitleImageClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "gridClassName?": "string",
+    "carouselClassName?": "string",
+    "controlsClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/FeatureCardNine.schema.json b/registry/schemas/FeatureCardNine.schema.json
new file mode 100644
index 0000000..1caade7
--- /dev/null
+++ b/registry/schemas/FeatureCardNine.schema.json
@@ -0,0 +1,41 @@
+{
+  "name": "FeatureCardNine",
+  "propsSchema": {
+    "features": "Array<{ title: string, description: string, phoneOne: ({ imageSrc: string, imageAlt?: string } | { videoSrc: string, videoAriaLabel?: string }), phoneTwo: ({ imageSrc: string, imageAlt?: string } | { videoSrc: string, videoAriaLabel?: string }) }>",
+    "showStepNumbers": "boolean (required - controls whether step number badges display)",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Feature section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "titleImageWrapperClassName?": "string",
+    "titleImageClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string",
+    "desktopContainerClassName?": "string",
+    "mobileContainerClassName?": "string",
+    "desktopContentClassName?": "string",
+    "desktopWrapperClassName?": "string",
+    "mobileWrapperClassName?": "string",
+    "phoneFrameClassName?": "string",
+    "mobilePhoneFrameClassName?": "string",
+    "featureContentClassName?": "string",
+    "stepNumberClassName?": "string",
+    "featureTitleClassName?": "string",
+    "featureDescriptionClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/FeatureCardNineteen.schema.json b/registry/schemas/FeatureCardNineteen.schema.json
new file mode 100644
index 0000000..59cf65b
--- /dev/null
+++ b/registry/schemas/FeatureCardNineteen.schema.json
@@ -0,0 +1,36 @@
+{
+  "name": "FeatureCardNineteen",
+  "propsSchema": {
+    "features": "Array<{ tag: string, title: string, subtitle: string, description: string, imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string, buttons?: Array<{text: string, onClick?: () => void, href?: string}> }>",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image'",
+    "useInvertedBackground": "boolean",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "ariaLabel?": "string (default: 'Feature section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string",
+    "titleImageWrapperClassName?": "string",
+    "titleImageClassName?": "string",
+    "cardContentClassName?": "string",
+    "cardTagClassName?": "string",
+    "cardTitleClassName?": "string",
+    "cardDescriptionClassName?": "string",
+    "cardButtonClassName?": "string",
+    "cardButtonTextClassName?": "string",
+    "imageContainerClassName?": "string",
+    "imageClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/FeatureCardOne.schema.json b/registry/schemas/FeatureCardOne.schema.json
new file mode 100644
index 0000000..c08c0c0
--- /dev/null
+++ b/registry/schemas/FeatureCardOne.schema.json
@@ -0,0 +1,42 @@
+{
+  "name": "FeatureCardOne",
+  "propsSchema": {
+    "features": "Array<{ title: string, description: string, button?: {text: string, onClick?: () => void, href?: string} } & ({ imageSrc: string, imageAlt?: string } | { videoSrc: string, videoAriaLabel?: string })>",
+    "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+    "gridVariant": "'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right'",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d' (required - controls GSAP scroll animations with stagger effect)",
+    "uniformGridCustomHeightClasses?": "string",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "ariaLabel?": "string (default: 'Feature section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "mediaClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string",
+    "textBoxTitleImageClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "cardTitleClassName?": "string",
+    "cardDescriptionClassName?": "string",
+    "cardButtonClassName?": "string",
+    "cardButtonTextClassName?": "string",
+    "gridClassName?": "string",
+    "carouselClassName?": "string",
+    "controlsClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string",
+    "useInvertedBackground": "boolean",
+    "showVerifiedBadge?": "boolean"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/FeatureCardSeven.schema.json b/registry/schemas/FeatureCardSeven.schema.json
new file mode 100644
index 0000000..bf8857a
--- /dev/null
+++ b/registry/schemas/FeatureCardSeven.schema.json
@@ -0,0 +1,36 @@
+{
+  "name": "FeatureCardSeven",
+  "propsSchema": {
+    "features": "Array<{ title: string, description: string } & ({ imageSrc: string, imageAlt?: string } | { videoSrc: string, videoAriaLabel?: string })>",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Feature section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "titleImageWrapperClassName?": "string",
+    "titleImageClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string",
+    "cardContentClassName?": "string",
+    "stepNumberClassName?": "string",
+    "cardTitleClassName?": "string",
+    "cardDescriptionClassName?": "string",
+    "imageContainerClassName?": "string",
+    "imageClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/FeatureCardSix.schema.json b/registry/schemas/FeatureCardSix.schema.json
new file mode 100644
index 0000000..cc5cb20
--- /dev/null
+++ b/registry/schemas/FeatureCardSix.schema.json
@@ -0,0 +1,34 @@
+{
+  "name": "FeatureCardSix",
+  "propsSchema": {
+    "features": "Array<{ title: string, description: string } & ({ imageSrc: string, imageAlt?: string } | { videoSrc: string, videoAriaLabel?: string })>",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Feature section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "titleImageWrapperClassName?": "string",
+    "titleImageClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string",
+    "cardContentClassName?": "string",
+    "stepNumberClassName?": "string",
+    "cardTitleClassName?": "string",
+    "cardDescriptionClassName?": "string",
+    "imageContainerClassName?": "string",
+    "imageClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/FeatureCardSixteen.schema.json b/registry/schemas/FeatureCardSixteen.schema.json
new file mode 100644
index 0000000..7418852
--- /dev/null
+++ b/registry/schemas/FeatureCardSixteen.schema.json
@@ -0,0 +1,36 @@
+{
+  "name": "FeatureCardSixteen",
+  "propsSchema": {
+    "negativeCard": "{ items: string[] }",
+    "positiveCard": "{ items: string[] }",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d'",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "textboxLayout": "'default' | 'inline-image'",
+    "useInvertedBackground": "boolean",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "ariaLabel?": "string (default: 'Feature comparison section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "titleImageWrapperClassName?": "string",
+    "titleImageClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string",
+    "gridClassName?": "string",
+    "cardClassName?": "string",
+    "itemsListClassName?": "string",
+    "itemClassName?": "string",
+    "itemIconClassName?": "string",
+    "itemTextClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/FeatureCardTen.schema.json b/registry/schemas/FeatureCardTen.schema.json
new file mode 100644
index 0000000..cd4bd6d
--- /dev/null
+++ b/registry/schemas/FeatureCardTen.schema.json
@@ -0,0 +1,40 @@
+{
+  "name": "FeatureCardTen",
+  "propsSchema": {
+    "features": "FeatureCard[] (required) - Array with title, description, media, items, reverse",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }>",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{ text: string, href?: string, onClick?: () => void }>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image'",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal'",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Feature section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string",
+    "titleImageWrapperClassName?": "string",
+    "titleImageClassName?": "string",
+    "itemClassName?": "string",
+    "mediaWrapperClassName?": "string",
+    "mediaCardClassName?": "string",
+    "numberClassName?": "string",
+    "contentWrapperClassName?": "string",
+    "featureTitleClassName?": "string",
+    "featureDescriptionClassName?": "string",
+    "listItemClassName?": "string",
+    "iconContainerClassName?": "string",
+    "iconClassName?": "string",
+    "gapClassName?": "string"
+  }
+}
diff --git a/registry/schemas/FeatureCardThree.schema.json b/registry/schemas/FeatureCardThree.schema.json
new file mode 100644
index 0000000..4fc2185
--- /dev/null
+++ b/registry/schemas/FeatureCardThree.schema.json
@@ -0,0 +1,39 @@
+{
+  "name": "FeatureCardThree",
+  "propsSchema": {
+    "features": "Array<{ title: string, description: string, imageSrc: string, imageAlt?: string }>",
+    "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+    "gridVariant": "'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right'",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
+    "uniformGridCustomHeightClasses?": "string",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "ariaLabel?": "string (default: 'Feature section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string",
+    "textBoxTitleImageClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "cardTitleClassName?": "string",
+    "cardDescriptionClassName?": "string",
+    "gridClassName?": "string",
+    "carouselClassName?": "string",
+    "controlsClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string",
+    "itemContentClassName?": "string",
+    "useInvertedBackground": "boolean"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/FeatureCardTwelve.schema.json b/registry/schemas/FeatureCardTwelve.schema.json
new file mode 100644
index 0000000..6651573
--- /dev/null
+++ b/registry/schemas/FeatureCardTwelve.schema.json
@@ -0,0 +1,37 @@
+{
+  "name": "FeatureCardTwelve",
+  "propsSchema": {
+    "features": "Array<{ id: string, label: string, title: string, items: string[], buttons?: Array<{text: string, onClick?: () => void, href?: string}> }>",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal'",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground": "boolean",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "ariaLabel?": "string (default: 'Feature section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string",
+    "titleImageWrapperClassName?": "string",
+    "titleImageClassName?": "string",
+    "cardContentClassName?": "string",
+    "labelClassName?": "string",
+    "cardTitleClassName?": "string",
+    "itemsContainerClassName?": "string",
+    "itemTextClassName?": "string",
+    "cardButtonClassName?": "string",
+    "cardButtonTextClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/FeatureCardTwentyEight.schema.json b/registry/schemas/FeatureCardTwentyEight.schema.json
new file mode 100644
index 0000000..ec9cdff
--- /dev/null
+++ b/registry/schemas/FeatureCardTwentyEight.schema.json
@@ -0,0 +1,42 @@
+{
+  "name": "FeatureCardTwentyEight",
+  "propsSchema": {
+    "features": "Array<{ id: string, title: string, subtitle: string, category: string, value: string, buttons?: Array<{text: string, onClick?: () => void, href?: string}> }>",
+    "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+    "uniformGridCustomHeightClasses?": "string",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal'",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image'",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Features section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string",
+    "textBoxTitleImageClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "cardTitleClassName?": "string",
+    "subtitleClassName?": "string",
+    "categoryClassName?": "string",
+    "valueClassName?": "string",
+    "footerClassName?": "string",
+    "cardButtonClassName?": "string",
+    "cardButtonTextClassName?": "string",
+    "gridClassName?": "string",
+    "carouselClassName?": "string",
+    "controlsClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string"
+  }
+}
diff --git a/registry/schemas/FeatureCardTwentyFive.schema.json b/registry/schemas/FeatureCardTwentyFive.schema.json
new file mode 100644
index 0000000..e24f789
--- /dev/null
+++ b/registry/schemas/FeatureCardTwentyFive.schema.json
@@ -0,0 +1,40 @@
+{
+  "name": "FeatureCardTwentyFive",
+  "propsSchema": {
+    "features": "FeatureCard[] (required) - Array with title, description, icon, mediaItems (tuple of 2)",
+    "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+    "uniformGridCustomHeightClasses?": "string",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d'",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }>",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{ text: string, href?: string, onClick?: () => void }>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image'",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Feature section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "mediaClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string",
+    "textBoxTitleImageClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "cardTitleClassName?": "string",
+    "cardDescriptionClassName?": "string",
+    "cardIconClassName?": "string",
+    "cardIconWrapperClassName?": "string",
+    "gridClassName?": "string",
+    "carouselClassName?": "string",
+    "controlsClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string"
+  }
+}
diff --git a/registry/schemas/FeatureCardTwentyFour.schema.json b/registry/schemas/FeatureCardTwentyFour.schema.json
new file mode 100644
index 0000000..ecd18d2
--- /dev/null
+++ b/registry/schemas/FeatureCardTwentyFour.schema.json
@@ -0,0 +1,38 @@
+{
+  "name": "FeatureCardTwentyFour",
+  "propsSchema": {
+    "features": "FeatureItem[] (required) - Array with id, title, author, description, tags[], imageSrc/videoSrc",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal'",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }>",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{ text: string, href?: string, onClick?: () => void }>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image'",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Features section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string",
+    "titleImageWrapperClassName?": "string",
+    "titleImageClassName?": "string",
+    "cardContentClassName?": "string",
+    "cardTitleClassName?": "string",
+    "authorClassName?": "string",
+    "cardDescriptionClassName?": "string",
+    "tagsContainerClassName?": "string",
+    "tagClassName?": "string",
+    "mediaWrapperClassName?": "string",
+    "mediaClassName?": "string"
+  }
+}
diff --git a/registry/schemas/FeatureCardTwentyNine.schema.json b/registry/schemas/FeatureCardTwentyNine.schema.json
new file mode 100644
index 0000000..cdadd7a
--- /dev/null
+++ b/registry/schemas/FeatureCardTwentyNine.schema.json
@@ -0,0 +1,39 @@
+{
+  "name": "FeatureCardTwentyNine",
+  "propsSchema": {
+    "features": "Array<{ title: string, description: string, imageSrc: string, imageAlt?: string, titleImageSrc: string, buttonText: string, buttonHref?: string }>",
+    "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+    "gridVariant": "'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right'",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
+    "uniformGridCustomHeightClasses?": "string",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "ariaLabel?": "string (default: 'Feature section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string",
+    "textBoxTitleImageClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "cardTitleClassName?": "string",
+    "cardDescriptionClassName?": "string",
+    "gridClassName?": "string",
+    "carouselClassName?": "string",
+    "controlsClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string",
+    "itemContentClassName?": "string",
+    "useInvertedBackground": "boolean"
+  }
+}
diff --git a/registry/schemas/FeatureCardTwentyOne.schema.json b/registry/schemas/FeatureCardTwentyOne.schema.json
new file mode 100644
index 0000000..97b70b9
--- /dev/null
+++ b/registry/schemas/FeatureCardTwentyOne.schema.json
@@ -0,0 +1,42 @@
+{
+  "name": "FeatureCardTwentyOne",
+  "propsSchema": {
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "mediaAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "accordionItems": "Array<{ id: string, title: string, content: string }>",
+    "imageSrc?": "string (either imageSrc or videoSrc required)",
+    "imageAlt?": "string",
+    "videoSrc?": "string (either imageSrc or videoSrc required)",
+    "videoAriaLabel?": "string",
+    "useInvertedBackground": "boolean",
+    "mediaPosition?": "'left' | 'right' (default: 'left')",
+    "ariaLabel?": "string (default: 'Feature section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "mediaWrapperClassName?": "string",
+    "mediaClassName?": "string",
+    "contentClassName?": "string",
+    "textBoxClassName?": "string",
+    "titleClassName?": "string",
+    "descriptionClassName?": "string",
+    "tagClassName?": "string",
+    "buttonContainerClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string",
+    "titleImageWrapperClassName?": "string",
+    "titleImageClassName?": "string",
+    "accordionContainerClassName?": "string",
+    "accordionClassName?": "string",
+    "accordionTitleClassName?": "string",
+    "accordionContentClassName?": "string",
+    "accordionIconContainerClassName?": "string",
+    "accordionIconClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/FeatureCardTwentySeven.schema.json b/registry/schemas/FeatureCardTwentySeven.schema.json
new file mode 100644
index 0000000..179f455
--- /dev/null
+++ b/registry/schemas/FeatureCardTwentySeven.schema.json
@@ -0,0 +1,32 @@
+{
+  "name": "FeatureCardTwentySeven",
+  "propsSchema": {
+    "features": "FeatureCard[] (required) - Array with id, title, descriptions (string[], min: 1, recommended: 3, max: 5), imageSrc/videoSrc",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }>",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{ text: string, href?: string, onClick?: () => void }>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image'",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Feature section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string",
+    "textBoxTitleImageClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "cardTitleClassName?": "string",
+    "cardDescriptionClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string"
+  }
+}
diff --git a/registry/schemas/FeatureCardTwentySix.schema.json b/registry/schemas/FeatureCardTwentySix.schema.json
new file mode 100644
index 0000000..b8bbc12
--- /dev/null
+++ b/registry/schemas/FeatureCardTwentySix.schema.json
@@ -0,0 +1,34 @@
+{
+  "name": "FeatureCardTwentySix",
+  "propsSchema": {
+    "features": "FeatureItem[] (MINIMUM 4 ITEMS REQUIRED) - Array with title, description, imageSrc/videoSrc, buttonIcon, buttonHref/buttonOnClick",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }>",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{ text: string, href?: string, onClick?: () => void }>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'inline-image'",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Feature section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string",
+    "textBoxTitleImageClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "cardTitleClassName?": "string",
+    "cardDescriptionClassName?": "string",
+    "cardButtonClassName?": "string",
+    "carouselClassName?": "string",
+    "controlsClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string"
+  }
+}
diff --git a/registry/schemas/FeatureCardTwentyThree.schema.json b/registry/schemas/FeatureCardTwentyThree.schema.json
new file mode 100644
index 0000000..8dad6d8
--- /dev/null
+++ b/registry/schemas/FeatureCardTwentyThree.schema.json
@@ -0,0 +1,42 @@
+{
+  "name": "FeatureCardTwentyThree",
+  "propsSchema": {
+    "features": "FeatureItem[] (required) - Array with id, title, tags[], imageSrc/videoSrc, onFeatureClick",
+    "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+    "uniformGridCustomHeightClasses?": "string",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal'",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }>",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{ text: string, href?: string, onClick?: () => void }>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image'",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Features section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "itemClassName?": "string",
+    "mediaWrapperClassName?": "string",
+    "mediaClassName?": "string",
+    "cardClassName?": "string",
+    "cardTitleClassName?": "string",
+    "tagsContainerClassName?": "string",
+    "tagClassName?": "string",
+    "arrowClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string",
+    "textBoxTitleImageClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "gridClassName?": "string",
+    "carouselClassName?": "string",
+    "controlsClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string"
+  }
+}
diff --git a/registry/schemas/FeatureHoverPattern.schema.json b/registry/schemas/FeatureHoverPattern.schema.json
new file mode 100644
index 0000000..68284f7
--- /dev/null
+++ b/registry/schemas/FeatureHoverPattern.schema.json
@@ -0,0 +1,42 @@
+{
+  "name": "FeatureHoverPattern",
+  "propsSchema": {
+    "features": "FeatureCard[] (required) - Array with icon, title, description, optional button",
+    "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+    "uniformGridCustomHeightClasses?": "string (default: 'min-h-85 2xl:min-h-95')",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal'",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }>",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{ text: string, href?: string, onClick?: () => void }>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image'",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Feature section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "iconContainerClassName?": "string",
+    "iconClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string",
+    "textBoxTitleImageClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "cardTitleClassName?": "string",
+    "cardDescriptionClassName?": "string",
+    "gradientClassName?": "string",
+    "gridClassName?": "string",
+    "carouselClassName?": "string",
+    "controlsClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string",
+    "cardButtonClassName?": "string",
+    "cardButtonTextClassName?": "string"
+  }
+}
diff --git a/registry/schemas/FeatureTimelineBento.schema.json b/registry/schemas/FeatureTimelineBento.schema.json
new file mode 100644
index 0000000..98db2ce
--- /dev/null
+++ b/registry/schemas/FeatureTimelineBento.schema.json
@@ -0,0 +1,35 @@
+{
+  "name": "FeatureTimelineBento",
+  "propsSchema": {
+    "features": "Array<{ title: string, description: string, buttons?: ButtonConfig[], bentoComponent: ... }> - CRITICAL: Each feature MUST use a DIFFERENT bentoComponent type (never repeat same type). Available types: 'globe' | 'icon-info-cards' | 'animated-bar-chart' | '3d-stack-cards' | '3d-task-list' | 'orbiting-icons' | 'marquee' | 'map' | 'line-chart' | '3d-card-grid' | 'phone' | 'chat' | 'reveal-icon' | 'timeline' | 'media-stack', plus bentoComponent-specific props",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }>",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{ text: string, href?: string, onClick?: () => void }>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image'",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Feature section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string",
+    "titleImageWrapperClassName?": "string",
+    "titleImageClassName?": "string",
+    "cardContentClassName?": "string",
+    "stepNumberClassName?": "string",
+    "cardTitleClassName?": "string",
+    "cardDescriptionClassName?": "string",
+    "bentoContainerClassName?": "string",
+    "cardButtonClassName?": "string",
+    "cardButtonTextClassName?": "string"
+  }
+}
diff --git a/registry/schemas/FloatingGradientBackground.schema.json b/registry/schemas/FloatingGradientBackground.schema.json
new file mode 100644
index 0000000..4fbf453
--- /dev/null
+++ b/registry/schemas/FloatingGradientBackground.schema.json
@@ -0,0 +1,6 @@
+{
+  "name": "FloatingGradientBackground",
+  "propsSchema": {
+    "className?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/FluidBackground.schema.json b/registry/schemas/FluidBackground.schema.json
new file mode 100644
index 0000000..f4cc9fd
--- /dev/null
+++ b/registry/schemas/FluidBackground.schema.json
@@ -0,0 +1,6 @@
+{
+  "name": "FluidBackground",
+  "propsSchema": {
+    "className?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/FooterBase.schema.json b/registry/schemas/FooterBase.schema.json
new file mode 100644
index 0000000..6565b11
--- /dev/null
+++ b/registry/schemas/FooterBase.schema.json
@@ -0,0 +1,24 @@
+{
+  "name": "FooterBase",
+  "propsSchema": {
+    "columns": "Array<{ title: string, items: Array<{ label: string, href: string }> }> - Footer navigation columns",
+    "logoSrc?": "string",
+    "logoAlt?": "string",
+    "logoText": "string (required)",
+    "copyrightText?": "string (default: '© 2025 | Webild')",
+    "onPrivacyClick?": "() => void",
+    "ariaLabel?": "string (default: 'Site footer')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "logoClassName?": "string",
+    "logoImageClassName?": "string",
+    "logoTextClassName?": "string",
+    "columnsClassName?": "string",
+    "columnClassName?": "string",
+    "columnTitleClassName?": "string",
+    "columnItemClassName?": "string",
+    "copyrightContainerClassName?": "string",
+    "copyrightTextClassName?": "string",
+    "privacyButtonClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/FooterBaseCard.schema.json b/registry/schemas/FooterBaseCard.schema.json
new file mode 100644
index 0000000..b299b10
--- /dev/null
+++ b/registry/schemas/FooterBaseCard.schema.json
@@ -0,0 +1,25 @@
+{
+  "name": "FooterBaseCard",
+  "propsSchema": {
+    "logoSrc?": "string",
+    "logoAlt?": "string",
+    "logoText": "string (required)",
+    "columns": "Array<{ title: string, items: Array<{ label: string, href: string }> }> - Footer navigation columns",
+    "copyrightText?": "string (default: '© 2025 | Webild')",
+    "onPrivacyClick?": "() => void",
+    "ariaLabel?": "string (default: 'Site footer')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "logoClassName?": "string",
+    "logoImageClassName?": "string",
+    "logoTextClassName?": "string",
+    "columnsClassName?": "string",
+    "columnClassName?": "string",
+    "columnTitleClassName?": "string",
+    "columnItemClassName?": "string",
+    "copyrightContainerClassName?": "string",
+    "copyrightTextClassName?": "string",
+    "privacyButtonClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/FooterBaseReveal.schema.json b/registry/schemas/FooterBaseReveal.schema.json
new file mode 100644
index 0000000..51265fa
--- /dev/null
+++ b/registry/schemas/FooterBaseReveal.schema.json
@@ -0,0 +1,27 @@
+{
+  "name": "FooterBaseReveal",
+  "propsSchema": {
+    "logoSrc?": "string",
+    "logoAlt?": "string",
+    "logoText": "string (required)",
+    "columns": "Array<{ title: string, items: Array<{ label: string, href: string }> }> - Footer navigation columns",
+    "copyrightText?": "string",
+    "onPrivacyClick?": "() => void",
+    "ariaLabel?": "string",
+    "className?": "string",
+    "wrapperClassName?": "string",
+    "containerClassName?": "string",
+    "footerClassName?": "string",
+    "footerContainerClassName?": "string",
+    "logoClassName?": "string",
+    "logoImageClassName?": "string",
+    "logoTextClassName?": "string",
+    "columnsClassName?": "string",
+    "columnClassName?": "string",
+    "columnTitleClassName?": "string",
+    "columnItemClassName?": "string",
+    "copyrightContainerClassName?": "string",
+    "copyrightTextClassName?": "string",
+    "privacyButtonClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/FooterCard.schema.json b/registry/schemas/FooterCard.schema.json
new file mode 100644
index 0000000..a3f02cc
--- /dev/null
+++ b/registry/schemas/FooterCard.schema.json
@@ -0,0 +1,21 @@
+{
+  "name": "FooterCard",
+  "propsSchema": {
+    "logoSrc?": "string",
+    "logoAlt?": "string",
+    "logoText": "string (required)",
+    "copyrightText?": "string (default: '© 2025 | Webild')",
+    "socialLinks?": "Array<{ icon: LucideIcon, href: string, ariaLabel: string }> - Social media links",
+    "ariaLabel?": "string (default: 'Site footer')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "logoClassName?": "string",
+    "logoImageClassName?": "string",
+    "dividerClassName?": "string",
+    "copyrightContainerClassName?": "string",
+    "copyrightTextClassName?": "string",
+    "socialContainerClassName?": "string",
+    "socialIconClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/FooterLogoEmphasis.schema.json b/registry/schemas/FooterLogoEmphasis.schema.json
new file mode 100644
index 0000000..b4d0652
--- /dev/null
+++ b/registry/schemas/FooterLogoEmphasis.schema.json
@@ -0,0 +1,19 @@
+{
+  "name": "FooterLogoEmphasis",
+  "propsSchema": {
+    "logoSrc?": "string",
+    "logoAlt?": "string",
+    "columns": "Array<{ items: Array<{ label: string, href?: string, onClick?: () => void }> }> - Footer navigation columns (required, max 5)",
+    "logoText": "string (required)",
+    "ariaLabel?": "string (default: 'Site footer')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "logoClassName?": "string",
+    "logoImageClassName?": "string",
+    "columnsClassName?": "string",
+    "columnClassName?": "string",
+    "itemClassName?": "string",
+    "iconClassName?": "string",
+    "buttonClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/FooterLogoEmphasisReveal.schema.json b/registry/schemas/FooterLogoEmphasisReveal.schema.json
new file mode 100644
index 0000000..b62d4fe
--- /dev/null
+++ b/registry/schemas/FooterLogoEmphasisReveal.schema.json
@@ -0,0 +1,19 @@
+{
+  "name": "FooterLogoEmphasisReveal",
+  "propsSchema": {
+    "columns": "Array<{ items: Array<{ label: string, href?: string, onClick?: () => void }> }>",
+    "logoText": "string",
+    "ariaLabel?": "string (default: 'Site footer')",
+    "className?": "string",
+    "wrapperClassName?": "string",
+    "containerClassName?": "string",
+    "footerClassName?": "string",
+    "footerContainerClassName?": "string",
+    "logoClassName?": "string",
+    "columnsClassName?": "string",
+    "columnClassName?": "string",
+    "itemClassName?": "string",
+    "iconClassName?": "string",
+    "buttonClassName?": "string"
+  }
+}
diff --git a/registry/schemas/FooterLogoReveal.schema.json b/registry/schemas/FooterLogoReveal.schema.json
new file mode 100644
index 0000000..60a5d19
--- /dev/null
+++ b/registry/schemas/FooterLogoReveal.schema.json
@@ -0,0 +1,17 @@
+{
+  "name": "FooterLogoReveal",
+  "propsSchema": {
+    "logoSrc?": "string",
+    "logoAlt?": "string",
+    "logoText": "string (required)",
+    "leftLink": "{ text: string, onClick?: () => void, href?: string } (required)",
+    "rightLink": "{ text: string, onClick?: () => void, href?: string } (required)",
+    "ariaLabel?": "string (default: 'Site footer')",
+    "className?": "string",
+    "wrapperClassName?": "string",
+    "containerClassName?": "string",
+    "logoClassName?": "string",
+    "logoImageClassName?": "string",
+    "linkClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/FooterMedia.schema.json b/registry/schemas/FooterMedia.schema.json
new file mode 100644
index 0000000..4d08f01
--- /dev/null
+++ b/registry/schemas/FooterMedia.schema.json
@@ -0,0 +1,30 @@
+{
+  "name": "FooterMedia",
+  "propsSchema": {
+    "imageSrc": "string (required if no videoSrc)",
+    "imageAlt?": "string (default: '')",
+    "videoSrc": "string (required if no imageSrc)",
+    "videoAriaLabel?": "string (default: 'Footer video')",
+    "logoSrc?": "string",
+    "logoAlt?": "string",
+    "logoText": "string (required)",
+    "columns": "Array<{ title: string, items: Array<{ label: string, href: string }> }> - Footer navigation columns",
+    "copyrightText?": "string (default: '© 2025 | Webild')",
+    "onPrivacyClick?": "() => void",
+    "ariaLabel?": "string (default: 'Site footer')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "mediaWrapperClassName?": "string",
+    "mediaClassName?": "string",
+    "logoClassName?": "string",
+    "logoImageClassName?": "string",
+    "logoTextClassName?": "string",
+    "columnsClassName?": "string",
+    "columnClassName?": "string",
+    "columnTitleClassName?": "string",
+    "columnItemClassName?": "string",
+    "copyrightContainerClassName?": "string",
+    "copyrightTextClassName?": "string",
+    "privacyButtonClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/FooterSimple.schema.json b/registry/schemas/FooterSimple.schema.json
new file mode 100644
index 0000000..209a56e
--- /dev/null
+++ b/registry/schemas/FooterSimple.schema.json
@@ -0,0 +1,19 @@
+{
+  "name": "FooterSimple",
+  "propsSchema": {
+    "columns": "Array<{ title: string, items: Array<{ label: string, href?: string, onClick?: () => void }> }>",
+    "bottomLeftText": "string",
+    "bottomRightText": "string",
+    "ariaLabel?": "string (default: 'Site footer')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "columnsClassName?": "string",
+    "columnClassName?": "string",
+    "columnTitleClassName?": "string",
+    "columnItemClassName?": "string",
+    "dividerClassName?": "string",
+    "bottomContainerClassName?": "string",
+    "bottomLeftTextClassName?": "string",
+    "bottomRightTextClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/GradientBarsBackground.schema.json b/registry/schemas/GradientBarsBackground.schema.json
new file mode 100644
index 0000000..64c1051
--- /dev/null
+++ b/registry/schemas/GradientBarsBackground.schema.json
@@ -0,0 +1,11 @@
+{
+  "name": "GradientBarsBackground",
+  "propsSchema": {
+    "className?": "string",
+    "numBarsPerSide?": "number (default: 8)",
+    "gradientFrom?": "string (default: 'var(--color-primary-cta)')",
+    "gradientTo?": "string (default: 'transparent')",
+    "opacity?": "number (default: 0.075)",
+    "sideWidth?": "string (default: '35%')"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/GridBackround.schema.json b/registry/schemas/GridBackround.schema.json
new file mode 100644
index 0000000..4a73d1f
--- /dev/null
+++ b/registry/schemas/GridBackround.schema.json
@@ -0,0 +1,8 @@
+{
+  "name": "GridBackround",
+  "propsSchema": {
+    "size?": "'small' | 'medium' | 'large' (default: 'medium')",
+    "perspectiveThreeD?": "boolean (default: false)",
+    "className?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/HeroBillboard.schema.json b/registry/schemas/HeroBillboard.schema.json
new file mode 100644
index 0000000..8af99c9
--- /dev/null
+++ b/registry/schemas/HeroBillboard.schema.json
@@ -0,0 +1,31 @@
+{
+  "name": "HeroBillboard",
+  "propsSchema": {
+    "title": "string",
+    "description": "string",
+    "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "imageSrc?": "string",
+    "videoSrc?": "string",
+    "imageAlt?": "string (default: '')",
+    "videoAriaLabel?": "string (default: 'Hero video')",
+    "mediaAspectRatio?": "string (default: 'aspect-square md:aspect-video')",
+    "mediaAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "ariaLabel?": "string (default: 'Hero section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "textBoxClassName?": "string",
+    "titleClassName?": "string",
+    "descriptionClassName?": "string",
+    "tagClassName?": "string",
+    "buttonContainerClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string",
+    "mediaWrapperClassName?": "string",
+    "imageClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/HeroBillboardCarousel.schema.json b/registry/schemas/HeroBillboardCarousel.schema.json
new file mode 100644
index 0000000..9f933b8
--- /dev/null
+++ b/registry/schemas/HeroBillboardCarousel.schema.json
@@ -0,0 +1,25 @@
+{
+  "name": "HeroBillboardCarousel",
+  "propsSchema": {
+    "title": "string",
+    "description": "string",
+    "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "mediaItems": "Array<{ imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }> - Each item requires either imageSrc or videoSrc",
+    "ariaLabel?": "string (default: 'Hero section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "textBoxClassName?": "string",
+    "titleClassName?": "string",
+    "descriptionClassName?": "string",
+    "tagClassName?": "string",
+    "buttonContainerClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string",
+    "mediaWrapperClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/HeroBillboardDashboard.schema.json b/registry/schemas/HeroBillboardDashboard.schema.json
new file mode 100644
index 0000000..d7ff88b
--- /dev/null
+++ b/registry/schemas/HeroBillboardDashboard.schema.json
@@ -0,0 +1,31 @@
+{
+  "name": "HeroBillboardDashboard",
+  "typeDefinitions": {
+    "DashboardStat": "{ title: string, values: [number, number, number], valuePrefix?: string, valueSuffix?: string, description: string, titleMobile?: string }",
+    "DashboardSidebarItem": "{ icon: LucideIcon, active?: boolean }",
+    "DashboardListItem": "{ icon: LucideIcon, title: string, status: string }",
+    "ChartDataItem": "{ value: number }"
+  },
+  "propsSchema": {
+    "title": "string",
+    "description": "string",
+    "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "dashboard": "{title: string, stats: [DashboardStat, DashboardStat, DashboardStat], logoIcon: LucideIcon, sidebarItems: DashboardSidebarItem[], searchPlaceholder?: string, buttons: ButtonConfig[], chartTitle?: string, chartData?: ChartDataItem[], listItems: DashboardListItem[], listTitle?: string, imageSrc: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string, className?: string, containerClassName?: string, sidebarClassName?: string, statClassName?: string, chartClassName?: string, listClassName?: string}",
+    "ariaLabel?": "string (default: 'Hero section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "textBoxClassName?": "string",
+    "titleClassName?": "string",
+    "descriptionClassName?": "string",
+    "tagClassName?": "string",
+    "buttonContainerClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string",
+    "dashboardClassName?": "string"
+  }
+}
diff --git a/registry/schemas/HeroBillboardGallery.schema.json b/registry/schemas/HeroBillboardGallery.schema.json
new file mode 100644
index 0000000..43d2d7b
--- /dev/null
+++ b/registry/schemas/HeroBillboardGallery.schema.json
@@ -0,0 +1,27 @@
+{
+  "name": "HeroBillboardGallery",
+  "propsSchema": {
+    "title": "string",
+    "description": "string",
+    "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "mediaItems": "Array<{ imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }> (MINIMUM 3 ITEMS REQUIRED, max 5)",
+    "mediaAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "ariaLabel?": "string (default: 'Hero section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "textBoxClassName?": "string",
+    "titleClassName?": "string",
+    "descriptionClassName?": "string",
+    "tagClassName?": "string",
+    "buttonContainerClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string",
+    "mediaWrapperClassName?": "string",
+    "imageClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/HeroBillboardRotatedCarousel.schema.json b/registry/schemas/HeroBillboardRotatedCarousel.schema.json
new file mode 100644
index 0000000..07c3491
--- /dev/null
+++ b/registry/schemas/HeroBillboardRotatedCarousel.schema.json
@@ -0,0 +1,36 @@
+{
+  "name": "HeroBillboardRotatedCarousel",
+  "propsSchema": {
+    "title": "string",
+    "description": "string",
+    "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "carouselItems": "Array<{ id: string, imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }> - Carousel items (minimum 6 items)",
+    "autoPlay?": "boolean (default: true)",
+    "autoPlayInterval?": "number (default: 4000)",
+    "marqueeItems?": "Array<{ type: 'image', src: string, alt?: string } | { type: 'text', text: string } | { type: 'text-icon', text: string, icon: LucideIcon }> - Logo marquee items",
+    "marqueeSpeed?": "number (default: 30)",
+    "showMarqueeCard?": "boolean (default: true)",
+    "ariaLabel?": "string (default: 'Hero section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "textBoxClassName?": "string",
+    "titleClassName?": "string",
+    "descriptionClassName?": "string",
+    "tagClassName?": "string",
+    "buttonContainerClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string",
+    "carouselClassName?": "string",
+    "marqueeClassName?": "string",
+    "marqueeItemClassName?": "string",
+    "marqueeCardClassName?": "string",
+    "marqueeImageClassName?": "string",
+    "marqueeTextClassName?": "string",
+    "marqueeIconClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/HeroBillboardScroll.schema.json b/registry/schemas/HeroBillboardScroll.schema.json
new file mode 100644
index 0000000..5e44fab
--- /dev/null
+++ b/registry/schemas/HeroBillboardScroll.schema.json
@@ -0,0 +1,40 @@
+{
+  "name": "HeroBillboardScroll",
+  "propsSchema": {
+    "title": "string",
+    "description": "string",
+    "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "imageSrc?": "string",
+    "videoSrc?": "string",
+    "imageAlt?": "string (default: '')",
+    "videoAriaLabel?": "string (default: 'Hero video')",
+    "mediaAspectRatio?": "string (default: 'aspect-[4/3] md:aspect-[16/9]')",
+    "marqueeItems?": "Array<MarqueeItem>",
+    "marqueeSpeed?": "number (default: 30)",
+    "showMarqueeCard?": "boolean (default: true)",
+    "ariaLabel?": "string (default: 'Hero section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "textBoxClassName?": "string",
+    "titleClassName?": "string",
+    "descriptionClassName?": "string",
+    "tagClassName?": "string",
+    "buttonContainerClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string",
+    "cardWrapperClassName?": "string",
+    "cardInnerClassName?": "string",
+    "imageClassName?": "string",
+    "marqueeClassName?": "string",
+    "marqueeItemClassName?": "string",
+    "marqueeCardClassName?": "string",
+    "marqueeImageClassName?": "string",
+    "marqueeTextClassName?": "string",
+    "marqueeIconClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/HeroBillboardTestimonial.schema.json b/registry/schemas/HeroBillboardTestimonial.schema.json
new file mode 100644
index 0000000..d0cccb2
--- /dev/null
+++ b/registry/schemas/HeroBillboardTestimonial.schema.json
@@ -0,0 +1,53 @@
+{
+  "name": "HeroBillboardTestimonial",
+  "propsSchema": {
+    "title": "string",
+    "description": "string",
+    "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'glowing-orb' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }",
+    "testimonials": "Array<{ name: string, handle: string, testimonial: string, rating: number, imageSrc?: string, imageAlt?: string }>",
+    "testimonialRotationInterval?": "number (default: 5000)",
+    "useInvertedBackground?": "boolean (default: false)",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "avatars?": "Avatar[] - Array of avatar objects with src and alt properties",
+    "mediaAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal' (default: 'none')",
+    "avatarText?": "string - Text displayed next to the avatar group",
+    "imageSrc?": "string",
+    "videoSrc?": "string",
+    "imageAlt?": "string (default: '')",
+    "videoAriaLabel?": "string (default: 'Hero video')",
+    "ariaLabel?": "string (default: 'Hero section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "textBoxClassName?": "string",
+    "titleClassName?": "string",
+    "descriptionClassName?": "string",
+    "tagClassName?": "string",
+    "buttonContainerClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string",
+    "mediaWrapperClassName?": "string",
+    "imageClassName?": "string",
+    "avatarGroupClassName?": "string",
+    "testimonialCardClassName?": "string",
+    "testimonialContentClassName?": "string",
+    "testimonialTextClassName?": "string",
+    "testimonialRatingClassName?": "string",
+    "testimonialAuthorClassName?": "string",
+    "testimonialAuthorImageClassName?": "string",
+    "testimonialAuthorNameClassName?": "string",
+    "testimonialAuthorHandleClassName?": "string",
+    "marqueeItems?": "Array<{ type: 'image', src: string, alt?: string } | { type: 'text', text: string } | { type: 'text-icon', text: string, icon: LucideIcon }>",
+    "marqueeSpeed?": "number (default: 30)",
+    "showMarqueeCard?": "boolean (default: true)",
+    "marqueeClassName?": "string",
+    "marqueeItemClassName?": "string",
+    "marqueeCardClassName?": "string",
+    "marqueeImageClassName?": "string",
+    "marqueeTextClassName?": "string",
+    "marqueeIconClassName?": "string"
+  }
+}
diff --git a/registry/schemas/HeroCarouselLogo.schema.json b/registry/schemas/HeroCarouselLogo.schema.json
new file mode 100644
index 0000000..b6654b6
--- /dev/null
+++ b/registry/schemas/HeroCarouselLogo.schema.json
@@ -0,0 +1,27 @@
+{
+  "name": "HeroCarouselLogo",
+  "propsSchema": {
+    "logoText": "string",
+    "description": "string",
+    "buttons": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "slides": "Array<{ imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }> - Carousel slide items",
+    "autoplayDelay?": "number (default: 3000)",
+    "showDimOverlay?": "boolean (default: false)",
+    "logoLineHeight?": "number (default: 1.1)",
+    "ariaLabel?": "string (default: 'Hero section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "contentContainerClassName?": "string",
+    "descriptionClassName?": "string",
+    "buttonContainerClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string",
+    "logoContainerClassName?": "string",
+    "logoClassName?": "string",
+    "mediaWrapperClassName?": "string",
+    "imageClassName?": "string",
+    "blurClassName?": "string",
+    "dimOverlayClassName?": "string",
+    "progressBarClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/HeroCentered.schema.json b/registry/schemas/HeroCentered.schema.json
new file mode 100644
index 0000000..4f4624d
--- /dev/null
+++ b/registry/schemas/HeroCentered.schema.json
@@ -0,0 +1,31 @@
+{
+  "name": "HeroCentered",
+  "propsSchema": {
+    "title": "string",
+    "description": "string",
+    "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }",
+    "avatars": "Avatar[] (required) - Array with src and alt",
+    "avatarText?": "string",
+    "buttons?": "Array<{ text: string, href?: string, onClick?: () => void }>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "marqueeItems?": "Array<{ type: 'image', src: string, alt?: string } | { type: 'text', text: string } | { type: 'text-icon', text: string, icon: LucideIcon }>",
+    "marqueeSpeed?": "number (default: 30)",
+    "showMarqueeCard?": "boolean (default: true)",
+    "ariaLabel?": "string (default: 'Hero section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "textBoxClassName?": "string",
+    "titleClassName?": "string",
+    "descriptionClassName?": "string",
+    "avatarGroupClassName?": "string",
+    "buttonContainerClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string",
+    "marqueeClassName?": "string",
+    "marqueeItemClassName?": "string",
+    "marqueeCardClassName?": "string",
+    "marqueeImageClassName?": "string",
+    "marqueeTextClassName?": "string",
+    "marqueeIconClassName?": "string"
+  }
+}
diff --git a/registry/schemas/HeroLogo.schema.json b/registry/schemas/HeroLogo.schema.json
new file mode 100644
index 0000000..c6ce139
--- /dev/null
+++ b/registry/schemas/HeroLogo.schema.json
@@ -0,0 +1,29 @@
+{
+  "name": "HeroLogo",
+  "propsSchema": {
+    "logoText": "string",
+    "description": "string",
+    "buttons": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "imageSrc?": "string",
+    "videoSrc?": "string",
+    "imageAlt?": "string (default: '')",
+    "videoAriaLabel?": "string (default: 'Hero video')",
+    "showDimOverlay?": "boolean (default: false)",
+    "logoLineHeight?": "number (default: 1.1)",
+    "ariaLabel?": "string (default: 'Hero section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "contentContainerClassName?": "string",
+    "descriptionClassName?": "string",
+    "buttonContainerClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string",
+    "logoContainerClassName?": "string",
+    "logoClassName?": "string",
+    "mediaWrapperClassName?": "string",
+    "imageClassName?": "string",
+    "blurClassName?": "string",
+    "dimOverlayClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/HeroLogoBillboard.schema.json b/registry/schemas/HeroLogoBillboard.schema.json
new file mode 100644
index 0000000..26f87fc
--- /dev/null
+++ b/registry/schemas/HeroLogoBillboard.schema.json
@@ -0,0 +1,27 @@
+{
+  "name": "HeroLogoBillboard",
+  "propsSchema": {
+    "logoText": "string",
+    "description": "string",
+    "buttons": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'glowing-orb' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }",
+    "mediaAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "imageSrc?": "string",
+    "videoSrc?": "string",
+    "imageAlt?": "string (default: '')",
+    "videoAriaLabel?": "string (default: 'Hero video')",
+    "frameStyle?": "'card' | 'browser' (default: 'card')",
+    "logoLineHeight?": "number (default: 1.1)",
+    "ariaLabel?": "string (default: 'Hero section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "logoContainerClassName?": "string",
+    "logoClassName?": "string",
+    "descriptionClassName?": "string",
+    "mediaWrapperClassName?": "string",
+    "imageClassName?": "string",
+    "browserBarClassName?": "string",
+    "addressBarClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/HeroOverlay.schema.json b/registry/schemas/HeroOverlay.schema.json
new file mode 100644
index 0000000..d46a7e4
--- /dev/null
+++ b/registry/schemas/HeroOverlay.schema.json
@@ -0,0 +1,36 @@
+{
+  "name": "HeroOverlay",
+  "propsSchema": {
+    "title": "string",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "avatars?": "Array<{ src: string, alt: string }>",
+    "avatarText?": "string",
+    "imageSrc?": "string",
+    "videoSrc?": "string",
+    "imageAlt?": "string (default: '')",
+    "videoAriaLabel?": "string (default: 'Hero video')",
+    "showDimOverlay?": "boolean (default: false)",
+    "showBlur?": "boolean (default: true)",
+    "textPosition?": "'top' | 'bottom' (default: 'bottom')",
+    "ariaLabel?": "string (default: 'Hero section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "textBoxClassName?": "string",
+    "titleClassName?": "string",
+    "descriptionClassName?": "string",
+    "tagClassName?": "string",
+    "buttonContainerClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string",
+    "avatarGroupClassName?": "string",
+    "mediaWrapperClassName?": "string",
+    "imageClassName?": "string",
+    "blurClassName?": "string",
+    "dimOverlayClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/HeroOverlayTestimonial.schema.json b/registry/schemas/HeroOverlayTestimonial.schema.json
new file mode 100644
index 0000000..25cf169
--- /dev/null
+++ b/registry/schemas/HeroOverlayTestimonial.schema.json
@@ -0,0 +1,46 @@
+{
+  "name": "HeroOverlayTestimonial",
+  "propsSchema": {
+    "title": "string",
+    "description": "string",
+    "testimonials": "Array<{ name: string, handle: string, testimonial: string, rating: number, imageSrc?: string, imageAlt?: string }>",
+    "testimonialRotationInterval?": "number (default: 5000)",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "avatars?": "Array<{ src: string, alt: string }>",
+    "avatarText?": "string",
+    "imageSrc?": "string",
+    "videoSrc?": "string",
+    "imageAlt?": "string (default: '')",
+    "videoAriaLabel?": "string (default: 'Hero video')",
+    "showDimOverlay?": "boolean (default: false)",
+    "showBlur?": "boolean (default: true)",
+    "textPosition?": "'top' | 'bottom' (default: 'bottom')",
+    "ariaLabel?": "string (default: 'Hero section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "textBoxClassName?": "string",
+    "titleClassName?": "string",
+    "descriptionClassName?": "string",
+    "tagClassName?": "string",
+    "buttonContainerClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string",
+    "avatarGroupClassName?": "string",
+    "mediaWrapperClassName?": "string",
+    "imageClassName?": "string",
+    "blurClassName?": "string",
+    "dimOverlayClassName?": "string",
+    "testimonialCardClassName?": "string",
+    "testimonialContentClassName?": "string",
+    "testimonialTextClassName?": "string",
+    "testimonialRatingClassName?": "string",
+    "testimonialAuthorClassName?": "string",
+    "testimonialAuthorImageClassName?": "string",
+    "testimonialAuthorNameClassName?": "string",
+    "testimonialAuthorHandleClassName?": "string"
+  }
+}
diff --git a/registry/schemas/HeroPersonalLinks.schema.json b/registry/schemas/HeroPersonalLinks.schema.json
new file mode 100644
index 0000000..4d27da5
--- /dev/null
+++ b/registry/schemas/HeroPersonalLinks.schema.json
@@ -0,0 +1,27 @@
+{
+  "name": "HeroPersonalLinks",
+  "propsSchema": {
+    "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }",
+    "title": "string",
+    "titleSegments?": "TitleSegment[] - For inline images in title",
+    "socialLinks?": "SocialLink[] - Array with icon, label, href",
+    "linkCards": "LinkCard[] (required) - Array with icon/media, title, description, button",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "ariaLabel?": "string (default: 'Personal links section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "textboxClassName?": "string",
+    "titleClassName?": "string",
+    "titleImageWrapperClassName?": "string",
+    "titleImageClassName?": "string",
+    "socialLinksClassName?": "string",
+    "socialLinkClassName?": "string",
+    "linkCardsClassName?": "string",
+    "linkCardClassName?": "string",
+    "linkCardIconClassName?": "string",
+    "linkCardTitleClassName?": "string",
+    "linkCardDescriptionClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string"
+  }
+}
diff --git a/registry/schemas/HeroSignup.schema.json b/registry/schemas/HeroSignup.schema.json
new file mode 100644
index 0000000..385d339
--- /dev/null
+++ b/registry/schemas/HeroSignup.schema.json
@@ -0,0 +1,26 @@
+{
+  "name": "HeroSignup",
+  "propsSchema": {
+    "title": "string",
+    "description": "string",
+    "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'glowing-orb' | 'glowing-orb-sparkles' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }",
+    "tag": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "inputPlaceholder?": "string (default: 'Enter your email')",
+    "buttonText?": "string (default: 'Get Started')",
+    "onSubmit?": "(email: string) => void",
+    "ariaLabel?": "string (default: 'Hero section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "textBoxClassName?": "string",
+    "titleClassName?": "string",
+    "descriptionClassName?": "string",
+    "tagClassName?": "string",
+    "formWrapperClassName?": "string",
+    "formClassName?": "string",
+    "inputClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string"
+  }
+}
diff --git a/registry/schemas/HeroSplit.schema.json b/registry/schemas/HeroSplit.schema.json
new file mode 100644
index 0000000..f6d6409
--- /dev/null
+++ b/registry/schemas/HeroSplit.schema.json
@@ -0,0 +1,35 @@
+{
+  "name": "HeroSplit",
+  "propsSchema": {
+    "title": "string",
+    "description": "string",
+    "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'glowing-orb' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "avatars?": "Avatar[] - Array of avatar objects with src and alt properties",
+    "mediaAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "avatarText?": "string - Text displayed next to the avatar group",
+    "imageSrc?": "string",
+    "videoSrc?": "string",
+    "imageAlt?": "string (default: '')",
+    "videoAriaLabel?": "string (default: 'Hero video')",
+    "ariaLabel?": "string (default: 'Hero section')",
+    "imagePosition?": "'left' | 'right' (default: 'right')",
+    "fixedMediaHeight?": "boolean (default: true) - When true, media wrapper is aspect-square on mobile and md:h-[65vh] on desktop",
+    "className?": "string",
+    "containerClassName?": "string",
+    "textBoxClassName?": "string",
+    "titleClassName?": "string",
+    "descriptionClassName?": "string",
+    "tagClassName?": "string",
+    "buttonContainerClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string",
+    "mediaWrapperClassName?": "string",
+    "imageClassName?": "string",
+    "avatarGroupClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/HeroSplitDoubleCarousel.schema.json b/registry/schemas/HeroSplitDoubleCarousel.schema.json
new file mode 100644
index 0000000..11654b0
--- /dev/null
+++ b/registry/schemas/HeroSplitDoubleCarousel.schema.json
@@ -0,0 +1,42 @@
+{
+  "name": "HeroSplitDoubleCarousel",
+  "propsSchema": {
+    "title": "string",
+    "description": "string",
+    "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'glowing-orb' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }",
+    "leftCarouselItems": "Array<{ imageSrc?: string; videoSrc?: string; imageAlt?: string; videoAriaLabel?: string }>",
+    "rightCarouselItems": "Array<{ imageSrc?: string; videoSrc?: string; imageAlt?: string; videoAriaLabel?: string }>",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "avatars?": "Avatar[] - Array of avatar objects with src and alt properties",
+    "avatarText?": "string - Text displayed next to the avatar group",
+    "carouselPosition?": "'left' | 'right' (default: 'right')",
+    "ariaLabel?": "string (default: 'Hero section')",
+    "marqueeItems?": "MarqueeItem[] - Optional logo marquee items for bottom of section",
+    "marqueeSpeed?": "number (default: 30)",
+    "showMarqueeCard?": "boolean (default: true)",
+    "className?": "string",
+    "containerClassName?": "string",
+    "textBoxClassName?": "string",
+    "titleClassName?": "string",
+    "descriptionClassName?": "string",
+    "tagClassName?": "string",
+    "buttonContainerClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string",
+    "carouselWrapperClassName?": "string",
+    "carouselColumnClassName?": "string",
+    "carouselItemClassName?": "string",
+    "carouselImageClassName?": "string",
+    "avatarGroupClassName?": "string",
+    "marqueeClassName?": "string",
+    "marqueeItemClassName?": "string",
+    "marqueeCardClassName?": "string",
+    "marqueeImageClassName?": "string",
+    "marqueeTextClassName?": "string",
+    "marqueeIconClassName?": "string"
+  }
+}
diff --git a/registry/schemas/HeroSplitDualMedia.schema.json b/registry/schemas/HeroSplitDualMedia.schema.json
new file mode 100644
index 0000000..6ae14c0
--- /dev/null
+++ b/registry/schemas/HeroSplitDualMedia.schema.json
@@ -0,0 +1,32 @@
+{
+  "name": "HeroSplitDualMedia",
+  "propsSchema": {
+    "title": "string",
+    "description": "string",
+    "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'glowing-orb' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }",
+    "tag": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{ text: string, href?: string, onClick?: () => void }>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "mediaItems": "[MediaItem, MediaItem] (required) - Exactly 2 media items",
+    "mediaAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "rating": "number (required) - Number of stars (1-5)",
+    "ratingText": "string",
+    "ariaLabel?": "string (default: 'Hero section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "textBoxClassName?": "string",
+    "titleClassName?": "string",
+    "descriptionClassName?": "string",
+    "tagClassName?": "string",
+    "buttonContainerClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string",
+    "mediaWrapperClassName?": "string",
+    "mediaItemClassName?": "string",
+    "imageClassName?": "string",
+    "ratingClassName?": "string",
+    "ratingTextClassName?": "string"
+  }
+}
diff --git a/registry/schemas/HeroSplitKpi.schema.json b/registry/schemas/HeroSplitKpi.schema.json
new file mode 100644
index 0000000..64d0dbb
--- /dev/null
+++ b/registry/schemas/HeroSplitKpi.schema.json
@@ -0,0 +1,39 @@
+{
+  "name": "HeroSplitKpi",
+  "propsSchema": {
+    "title": "string",
+    "description": "string",
+    "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'glowing-orb' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }",
+    "kpis": "[KpiItem, KpiItem, KpiItem] - Array of exactly 3 KPI items with value and label",
+    "enableKpiAnimation": "boolean - Enable/disable mouse-following animation on KPI boxes",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "avatars?": "Avatar[] - Array of avatar objects with src and alt properties",
+    "avatarText?": "string - Text displayed next to the avatar group",
+    "mediaAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "imageSrc?": "string",
+    "videoSrc?": "string",
+    "imageAlt?": "string (default: '')",
+    "videoAriaLabel?": "string (default: 'Hero video')",
+    "ariaLabel?": "string (default: 'Hero section')",
+    "imagePosition?": "'left' | 'right' (default: 'right')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "textBoxClassName?": "string",
+    "titleClassName?": "string",
+    "descriptionClassName?": "string",
+    "tagClassName?": "string",
+    "buttonContainerClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string",
+    "mediaWrapperClassName?": "string",
+    "imageClassName?": "string",
+    "avatarGroupClassName?": "string",
+    "kpiClassName?": "string",
+    "kpiValueClassName?": "string",
+    "kpiLabelClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/HeroSplitTestimonial.schema.json b/registry/schemas/HeroSplitTestimonial.schema.json
new file mode 100644
index 0000000..fb778e7
--- /dev/null
+++ b/registry/schemas/HeroSplitTestimonial.schema.json
@@ -0,0 +1,55 @@
+{
+  "name": "HeroSplitTestimonial",
+  "propsSchema": {
+    "title": "string",
+    "description": "string",
+    "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'glowing-orb' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }",
+    "testimonials": "Array<{ name: string, handle: string, testimonial: string, rating: number, imageSrc?: string, imageAlt?: string }>",
+    "testimonialRotationInterval?": "number (default: 5000)",
+    "useInvertedBackground?": "boolean (default: false)",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "avatars?": "Avatar[] - Array of avatar objects with src and alt properties",
+    "mediaAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "avatarText?": "string - Text displayed next to the avatar group",
+    "imageSrc?": "string",
+    "videoSrc?": "string",
+    "imageAlt?": "string (default: '')",
+    "videoAriaLabel?": "string (default: 'Hero video')",
+    "ariaLabel?": "string (default: 'Hero section')",
+    "imagePosition?": "'left' | 'right' (default: 'right')",
+    "fixedMediaHeight?": "boolean (default: true)",
+    "className?": "string",
+    "containerClassName?": "string",
+    "textBoxClassName?": "string",
+    "titleClassName?": "string",
+    "descriptionClassName?": "string",
+    "tagClassName?": "string",
+    "buttonContainerClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string",
+    "mediaWrapperClassName?": "string",
+    "imageClassName?": "string",
+    "avatarGroupClassName?": "string",
+    "testimonialCardClassName?": "string",
+    "testimonialContentClassName?": "string",
+    "testimonialTextClassName?": "string",
+    "testimonialRatingClassName?": "string",
+    "testimonialAuthorClassName?": "string",
+    "testimonialAuthorImageClassName?": "string",
+    "testimonialAuthorNameClassName?": "string",
+    "testimonialAuthorHandleClassName?": "string",
+    "marqueeItems?": "Array<{ type: 'image', src: string, alt?: string } | { type: 'text', text: string } | { type: 'text-icon', text: string, icon: LucideIcon }>",
+    "marqueeSpeed?": "number (default: 30)",
+    "showMarqueeCard?": "boolean (default: true)",
+    "marqueeClassName?": "string",
+    "marqueeItemClassName?": "string",
+    "marqueeCardClassName?": "string",
+    "marqueeImageClassName?": "string",
+    "marqueeTextClassName?": "string",
+    "marqueeIconClassName?": "string"
+  }
+}
diff --git a/registry/schemas/InlineImageSplitTextAbout.schema.json b/registry/schemas/InlineImageSplitTextAbout.schema.json
new file mode 100644
index 0000000..7e80ea3
--- /dev/null
+++ b/registry/schemas/InlineImageSplitTextAbout.schema.json
@@ -0,0 +1,18 @@
+{
+  "name": "InlineImageSplitTextAbout",
+  "propsSchema": {
+    "heading": "Array<{ type: 'text'; content: string } | { type: 'image'; src: string; alt?: string }>",
+    "buttons?": "Array<{ text: string, onClick?: () => void, href?: string, props?: Partial<ButtonPropsForVariant<CTAButtonVariant>> }>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'About section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "headingClassName?": "string",
+    "imageWrapperClassName?": "string",
+    "imageClassName?": "string",
+    "buttonContainerClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/Input.schema.json b/registry/schemas/Input.schema.json
new file mode 100644
index 0000000..be4e710
--- /dev/null
+++ b/registry/schemas/Input.schema.json
@@ -0,0 +1,13 @@
+{
+  "name": "Input",
+  "propsSchema": {
+    "value": "string",
+    "onChange": "(value: string) => void",
+    "type?": "string (default: 'text')",
+    "placeholder?": "string",
+    "required?": "boolean (default: false)",
+    "disabled?": "boolean (default: false)",
+    "ariaLabel?": "string",
+    "className?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/MediaAbout.schema.json b/registry/schemas/MediaAbout.schema.json
new file mode 100644
index 0000000..6e63c1a
--- /dev/null
+++ b/registry/schemas/MediaAbout.schema.json
@@ -0,0 +1,28 @@
+{
+  "name": "MediaAbout",
+  "propsSchema": {
+    "title": "string",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "imageSrc?": "string",
+    "videoSrc?": "string",
+    "imageAlt?": "string",
+    "videoAriaLabel?": "string",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'About section')",
+    "className?": "string",
+    "textBoxClassName?": "string",
+    "titleClassName?": "string",
+    "descriptionClassName?": "string",
+    "tagClassName?": "string",
+    "buttonContainerClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string",
+    "mediaWrapperClassName?": "string",
+    "mediaClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/MetricCardEleven.schema.json b/registry/schemas/MetricCardEleven.schema.json
new file mode 100644
index 0000000..6dc02d9
--- /dev/null
+++ b/registry/schemas/MetricCardEleven.schema.json
@@ -0,0 +1,36 @@
+{
+  "name": "MetricCardEleven",
+  "propsSchema": {
+    "metrics": "Array<{ id: string, value: string, title: string, description: string, imageSrc?: string, imageAlt?: string, videoSrc?: string, videoAriaLabel?: string }>",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal'",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image'",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Metrics section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string",
+    "textBoxTitleImageClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string",
+    "gridClassName?": "string",
+    "cardClassName?": "string",
+    "valueClassName?": "string",
+    "cardTitleClassName?": "string",
+    "cardDescriptionClassName?": "string",
+    "mediaCardClassName?": "string",
+    "mediaClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/MetricCardFourteen.schema.json b/registry/schemas/MetricCardFourteen.schema.json
new file mode 100644
index 0000000..7429352
--- /dev/null
+++ b/registry/schemas/MetricCardFourteen.schema.json
@@ -0,0 +1,20 @@
+{
+  "name": "MetricCardFourteen",
+  "propsSchema": {
+    "title": "string",
+    "tag": "string",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "metricsAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "metrics": "Array<{ id: string, value: string, description: string }>",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Metrics section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "titleClassName?": "string",
+    "tagClassName?": "string",
+    "metricsContainerClassName?": "string",
+    "metricClassName?": "string",
+    "valueClassName?": "string",
+    "descriptionClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/MetricCardOne.schema.json b/registry/schemas/MetricCardOne.schema.json
new file mode 100644
index 0000000..51c2bc8
--- /dev/null
+++ b/registry/schemas/MetricCardOne.schema.json
@@ -0,0 +1,41 @@
+{
+  "name": "MetricCardOne",
+  "propsSchema": {
+    "metrics": "Array<{ id: string, value: string, title: string, description: string, icon: LucideIcon }>",
+    "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+    "gridVariant": "'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted'",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
+    "uniformGridCustomHeightClasses?": "string",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Metrics section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string",
+    "textBoxTitleImageClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "valueClassName?": "string",
+    "titleClassName?": "string",
+    "descriptionClassName?": "string",
+    "iconContainerClassName?": "string",
+    "iconClassName?": "string",
+    "gridClassName?": "string",
+    "carouselClassName?": "string",
+    "controlsClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/MetricCardSeven.schema.json b/registry/schemas/MetricCardSeven.schema.json
new file mode 100644
index 0000000..cd0cc00
--- /dev/null
+++ b/registry/schemas/MetricCardSeven.schema.json
@@ -0,0 +1,39 @@
+{
+  "name": "MetricCardSeven",
+  "propsSchema": {
+    "metrics": "Array<{ id: string, value: string, title: string, items: string[] }>",
+    "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
+    "uniformGridCustomHeightClasses?": "string",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Metrics section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string",
+    "textBoxTitleImageClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "valueClassName?": "string - For styling the large metric value",
+    "metricTitleClassName?": "string - For styling the metric title text",
+    "featuresClassName?": "string - For styling the PricingFeatureList container",
+    "featureItemClassName?": "string - For styling individual feature items",
+    "gridClassName?": "string",
+    "carouselClassName?": "string",
+    "controlsClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/MetricCardThree.schema.json b/registry/schemas/MetricCardThree.schema.json
new file mode 100644
index 0000000..539a7b4
--- /dev/null
+++ b/registry/schemas/MetricCardThree.schema.json
@@ -0,0 +1,39 @@
+{
+  "name": "MetricCardThree",
+  "propsSchema": {
+    "metrics": "Array<{ id: string, icon: LucideIcon, title: string, value: string }>",
+    "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
+    "uniformGridCustomHeightClasses?": "string",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Metrics section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string",
+    "textBoxTitleImageClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "iconContainerClassName?": "string",
+    "iconClassName?": "string",
+    "metricTitleClassName?": "string",
+    "valueClassName?": "string",
+    "gridClassName?": "string",
+    "carouselClassName?": "string",
+    "controlsClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/MetricCardTwo.schema.json b/registry/schemas/MetricCardTwo.schema.json
new file mode 100644
index 0000000..ed444d3
--- /dev/null
+++ b/registry/schemas/MetricCardTwo.schema.json
@@ -0,0 +1,38 @@
+{
+  "name": "MetricCardTwo",
+  "propsSchema": {
+    "metrics": "Array<{ id: string, value: string, description: string }>",
+    "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+    "gridVariant": "'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted'",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
+    "uniformGridCustomHeightClasses?": "string",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Metrics section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string",
+    "textBoxTitleImageClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "valueClassName?": "string",
+    "metricDescriptionClassName?": "string",
+    "gridClassName?": "string",
+    "carouselClassName?": "string",
+    "controlsClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/MetricSplitMediaAbout.schema.json b/registry/schemas/MetricSplitMediaAbout.schema.json
new file mode 100644
index 0000000..fd0368c
--- /dev/null
+++ b/registry/schemas/MetricSplitMediaAbout.schema.json
@@ -0,0 +1,35 @@
+{
+  "name": "MetricSplitMediaAbout",
+  "propsSchema": {
+    "title": "string",
+    "description": "string",
+    "metrics": "Array<{ value: string, title: string }>",
+    "useInvertedBackground": "boolean",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "imageSrc?": "string",
+    "videoSrc?": "string",
+    "imageAlt?": "string",
+    "videoAriaLabel?": "string (default: 'About section video')",
+    "mediaBadge?": "{ text: string, avatarSrc?: string, avatarAlt?: string, className?: string }",
+    "mediaAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "metricsAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "ariaLabel?": "string (default: 'About section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "gridClassName?": "string",
+    "leftColumnClassName?": "string",
+    "rightColumnClassName?": "string",
+    "textBoxClassName?": "string",
+    "titleClassName?": "string",
+    "descriptionClassName?": "string",
+    "tagClassName?": "string",
+    "metricsContainerClassName?": "string",
+    "metricCardClassName?": "string",
+    "metricValueClassName?": "string",
+    "metricTitleClassName?": "string",
+    "mediaWrapperClassName?": "string",
+    "imageClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/NavbarLayoutFloatingInline.schema.json b/registry/schemas/NavbarLayoutFloatingInline.schema.json
new file mode 100644
index 0000000..dd3302e
--- /dev/null
+++ b/registry/schemas/NavbarLayoutFloatingInline.schema.json
@@ -0,0 +1,17 @@
+{
+  "name": "NavbarLayoutFloatingInline",
+  "propsSchema": {
+    "navItems": "Array<{name: string, id: string}>",
+    "logoSrc?": "string",
+    "logoAlt?": "string",
+    "brandName?": "string (default: 'Webild')",
+    "button": "{text: string, onClick?: () => void, href?: string}",
+    "animateOnLoad?": "boolean (default: true)",
+    "className?": "string (default: '')",
+    "logoClassName?": "string (default: '')",
+    "logoImageClassName?": "string (default: '')",
+    "navItemClassName?": "string (default: '')",
+    "buttonClassName?": "string (default: '')",
+    "buttonTextClassName?": "string (default: '')"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/NavbarLayoutFloatingOverlay.schema.json b/registry/schemas/NavbarLayoutFloatingOverlay.schema.json
new file mode 100644
index 0000000..b959b8d
--- /dev/null
+++ b/registry/schemas/NavbarLayoutFloatingOverlay.schema.json
@@ -0,0 +1,15 @@
+{
+  "name": "NavbarLayoutFloatingOverlay",
+  "propsSchema": {
+    "navItems": "Array<{name: string, id: string}>",
+    "logoSrc?": "string",
+    "logoAlt?": "string",
+    "className?": "string",
+    "brandName?": "string (default: 'Webild')",
+    "button?": "{text: string, onClick?: () => void, href?: string}",
+    "logoClassName?": "string (default: '')",
+    "logoImageClassName?": "string (default: '')",
+    "buttonClassName?": "string (default: '')",
+    "buttonTextClassName?": "string (default: '')"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/NavbarStyleApple.schema.json b/registry/schemas/NavbarStyleApple.schema.json
new file mode 100644
index 0000000..70ac82d
--- /dev/null
+++ b/registry/schemas/NavbarStyleApple.schema.json
@@ -0,0 +1,7 @@
+{
+  "name": "NavbarStyleApple",
+  "propsSchema": {
+    "navItems": "Array<{name: string, id: string}>",
+    "brandName?": "string (default: 'Webild')"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/NavbarStyleCentered.schema.json b/registry/schemas/NavbarStyleCentered.schema.json
new file mode 100644
index 0000000..f31996f
--- /dev/null
+++ b/registry/schemas/NavbarStyleCentered.schema.json
@@ -0,0 +1,14 @@
+{
+  "name": "NavbarStyleCentered",
+  "propsSchema": {
+    "navItems": "Array<{name: string, id: string}>",
+    "button?": "{text: string, onClick?: () => void, href?: string}",
+    "topBarButton?": "{text: string, onClick?: () => void, href?: string}",
+    "logoSrc?": "string",
+    "logoAlt?": "string",
+    "brandName?": "string (default: 'Webild')",
+    "className?": "string (default: '')",
+    "logoClassName?": "string (default: '')",
+    "logoImageClassName?": "string (default: '')"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/NavbarStyleFullscreen.schema.json b/registry/schemas/NavbarStyleFullscreen.schema.json
new file mode 100644
index 0000000..f71ee07
--- /dev/null
+++ b/registry/schemas/NavbarStyleFullscreen.schema.json
@@ -0,0 +1,17 @@
+{
+  "name": "NavbarStyleFullscreen",
+  "propsSchema": {
+    "navItems": "Array<{name: string, id: string}>",
+    "logoSrc?": "string",
+    "logoAlt?": "string",
+    "brandName?": "string (default: 'Webild')",
+    "bottomLeftText?": "string (default: 'Global Community')",
+    "bottomRightText?": "string (default: 'hello@example.com')",
+    "topBarClassName?": "string (default: '')",
+    "button?": "{text: string, onClick?: () => void, href?: string}",
+    "buttonClassName?": "string (default: '')",
+    "buttonTextClassName?": "string (default: '')",
+    "logoClassName?": "string (default: '')",
+    "logoImageClassName?": "string (default: '')"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/PlainBackground.schema.json b/registry/schemas/PlainBackground.schema.json
new file mode 100644
index 0000000..e5bbee5
--- /dev/null
+++ b/registry/schemas/PlainBackground.schema.json
@@ -0,0 +1,6 @@
+{
+  "name": "PlainBackground",
+  "propsSchema": {
+    "className?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/PricingCardEight.schema.json b/registry/schemas/PricingCardEight.schema.json
new file mode 100644
index 0000000..873f7f9
--- /dev/null
+++ b/registry/schemas/PricingCardEight.schema.json
@@ -0,0 +1,42 @@
+{
+  "name": "PricingCardEight",
+  "propsSchema": {
+    "plans": "Array<{ id: string, badge: string, badgeIcon?: LucideIcon, price: string, subtitle: string, buttons: Array<{text: string, onClick?: () => void, href?: string}>, features: string[] }>",
+    "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+    "uniformGridCustomHeightClasses?": "string",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal'",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image'",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Pricing section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string",
+    "textBoxTitleImageClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "badgeClassName?": "string",
+    "priceClassName?": "string",
+    "subtitleClassName?": "string",
+    "planButtonContainerClassName?": "string",
+    "planButtonClassName?": "string",
+    "featuresClassName?": "string",
+    "featureItemClassName?": "string",
+    "gridClassName?": "string",
+    "carouselClassName?": "string",
+    "controlsClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/PricingCardFive.schema.json b/registry/schemas/PricingCardFive.schema.json
new file mode 100644
index 0000000..9e798d4
--- /dev/null
+++ b/registry/schemas/PricingCardFive.schema.json
@@ -0,0 +1,42 @@
+{
+  "name": "PricingCardFive",
+  "propsSchema": {
+    "plans": "Array<{ id: string, tag: string, tagIcon?: LucideIcon, price: string, period: string, description: string, button: {text: string, onClick?: () => void, href?: string}, featuresTitle: string, features: string[] }>",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal'",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image'",
+    "useInvertedBackground": "boolean",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "ariaLabel?": "string (default: 'Pricing section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string",
+    "titleImageWrapperClassName?": "string",
+    "titleImageClassName?": "string",
+    "cardContentClassName?": "string",
+    "planTagClassName?": "string",
+    "planPriceClassName?": "string",
+    "planPeriodClassName?": "string",
+    "planDescriptionClassName?": "string",
+    "planButtonClassName?": "string",
+    "planButtonTextClassName?": "string",
+    "featuresTitleClassName?": "string",
+    "featuresListClassName?": "string",
+    "featureItemClassName?": "string",
+    "featureIconClassName?": "string",
+    "featureTextClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/PricingCardNine.schema.json b/registry/schemas/PricingCardNine.schema.json
new file mode 100644
index 0000000..208d517
--- /dev/null
+++ b/registry/schemas/PricingCardNine.schema.json
@@ -0,0 +1,41 @@
+{
+  "name": "PricingCardNine",
+  "propsSchema": {
+    "plans": "Array<{ id: string, title: string, price: string, period: string, features: string[], button: {text: string, onClick?: () => void, href?: string}, imageSrc: string, imageAlt?: string }>",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal'",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image'",
+    "useInvertedBackground": "boolean",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "ariaLabel?": "string (default: 'Pricing section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string",
+    "titleImageWrapperClassName?": "string",
+    "titleImageClassName?": "string",
+    "cardContentClassName?": "string",
+    "planImageWrapperClassName?": "string",
+    "planImageClassName?": "string",
+    "planTitleClassName?": "string",
+    "planPriceClassName?": "string",
+    "planButtonClassName?": "string",
+    "planButtonTextClassName?": "string",
+    "featuresListClassName?": "string",
+    "featureItemClassName?": "string",
+    "featureIconClassName?": "string",
+    "featureTextClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/PricingCardOne.schema.json b/registry/schemas/PricingCardOne.schema.json
new file mode 100644
index 0000000..500c444
--- /dev/null
+++ b/registry/schemas/PricingCardOne.schema.json
@@ -0,0 +1,40 @@
+{
+  "name": "PricingCardOne",
+  "propsSchema": {
+    "plans": "Array<{ id: string, badge: string, badgeIcon?: LucideIcon, price: string, subtitle: string, features: string[] }>",
+    "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+    "uniformGridCustomHeightClasses?": "string",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d' (required - controls GSAP scroll animations with stagger effect)",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Pricing section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string",
+    "textBoxTitleImageClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "badgeClassName?": "string",
+    "priceClassName?": "string",
+    "subtitleClassName?": "string",
+    "featuresClassName?": "string",
+    "featureItemClassName?": "string",
+    "gridClassName?": "string",
+    "carouselClassName?": "string",
+    "controlsClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/PricingCardThree.schema.json b/registry/schemas/PricingCardThree.schema.json
new file mode 100644
index 0000000..e83b162
--- /dev/null
+++ b/registry/schemas/PricingCardThree.schema.json
@@ -0,0 +1,42 @@
+{
+  "name": "PricingCardThree",
+  "propsSchema": {
+    "plans": "Array<{ id: string, badge?: string, badgeIcon?: LucideIcon, price: string, name: string, buttons: Array<{text: string, onClick?: () => void, href?: string}>, features: string[] }>",
+    "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+    "uniformGridCustomHeightClasses?": "string",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Pricing section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string",
+    "textBoxTitleImageClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "badgeClassName?": "string",
+    "priceClassName?": "string",
+    "nameClassName?": "string",
+    "planButtonContainerClassName?": "string",
+    "planButtonClassName?": "string",
+    "featuresClassName?": "string",
+    "featureItemClassName?": "string",
+    "gridClassName?": "string",
+    "carouselClassName?": "string",
+    "controlsClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/PricingCardTwo.schema.json b/registry/schemas/PricingCardTwo.schema.json
new file mode 100644
index 0000000..006d72c
--- /dev/null
+++ b/registry/schemas/PricingCardTwo.schema.json
@@ -0,0 +1,42 @@
+{
+  "name": "PricingCardTwo",
+  "propsSchema": {
+    "plans": "Array<{ id: string, badge: string, badgeIcon?: LucideIcon, price: string, subtitle: string, buttons: Array<{text: string, onClick?: () => void, href?: string}>, features: string[] }>",
+    "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+    "uniformGridCustomHeightClasses?": "string",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Pricing section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string",
+    "textBoxTitleImageClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "badgeClassName?": "string",
+    "priceClassName?": "string",
+    "subtitleClassName?": "string",
+    "planButtonContainerClassName?": "string",
+    "planButtonClassName?": "string",
+    "featuresClassName?": "string",
+    "featureItemClassName?": "string",
+    "gridClassName?": "string",
+    "carouselClassName?": "string",
+    "controlsClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/ProductCardFour.schema.json b/registry/schemas/ProductCardFour.schema.json
new file mode 100644
index 0000000..028d708
--- /dev/null
+++ b/registry/schemas/ProductCardFour.schema.json
@@ -0,0 +1,41 @@
+{
+  "name": "ProductCardFour",
+  "propsSchema": {
+    "products": "Array<{ id: string, name: string, price: string, variant: string, imageSrc: string, imageAlt?: string, onFavorite?: () => void, onProductClick?: () => void, isFavorited?: boolean }> - Product items",
+    "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+    "gridVariant": "'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'one-large-right-three-stacked-left' | 'one-large-left-three-stacked-right'",
+    "uniformGridCustomHeightClasses?": "string (default: 'min-h-95 2xl:min-h-105')",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal'",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Product section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "imageClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string",
+    "textBoxTitleImageClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "cardNameClassName?": "string",
+    "cardPriceClassName?": "string",
+    "cardVariantClassName?": "string",
+    "actionButtonClassName?": "string - Styles the action button on product image",
+    "gridClassName?": "string",
+    "carouselClassName?": "string",
+    "controlsClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/ProductCardOne.schema.json b/registry/schemas/ProductCardOne.schema.json
new file mode 100644
index 0000000..b126c95
--- /dev/null
+++ b/registry/schemas/ProductCardOne.schema.json
@@ -0,0 +1,39 @@
+{
+  "name": "ProductCardOne",
+  "propsSchema": {
+    "products": "Array<{ id: string, name: string, price: string, imageSrc: string, imageAlt?: string, onFavorite?: () => void, onProductClick?: () => void, isFavorited?: boolean }>",
+    "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+    "gridVariant": "'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right'",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
+    "uniformGridCustomHeightClasses?": "string (default: 'min-h-95 2xl:min-h-105')",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Product section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "imageClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string",
+    "textBoxTitleImageClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "cardNameClassName?": "string",
+    "cardPriceClassName?": "string",
+    "gridClassName?": "string",
+    "carouselClassName?": "string",
+    "controlsClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/ProductCardThree.schema.json b/registry/schemas/ProductCardThree.schema.json
new file mode 100644
index 0000000..a8717d9
--- /dev/null
+++ b/registry/schemas/ProductCardThree.schema.json
@@ -0,0 +1,39 @@
+{
+  "name": "ProductCardThree",
+  "propsSchema": {
+    "products": "Array<{ id: string, name: string, price: string, imageSrc: string, imageAlt?: string, onFavorite?: () => void, onProductClick?: () => void, onQuantityChange?: (quantity: number) => void, isFavorited?: boolean, initialQuantity?: number, priceButtonProps?: Partial<ButtonPropsForVariant<CTAButtonVariant>> }>",
+    "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+    "gridVariant": "'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'one-large-right-three-stacked-left' | 'one-large-left-three-stacked-right'",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
+    "uniformGridCustomHeightClasses?": "string (default: 'min-h-95 2xl:min-h-105')",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Product section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "imageClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string",
+    "textBoxTitleImageClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "cardNameClassName?": "string",
+    "quantityControlsClassName?": "string",
+    "gridClassName?": "string",
+    "carouselClassName?": "string",
+    "controlsClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/ProductCardTwo.schema.json b/registry/schemas/ProductCardTwo.schema.json
new file mode 100644
index 0000000..c2c86bb
--- /dev/null
+++ b/registry/schemas/ProductCardTwo.schema.json
@@ -0,0 +1,42 @@
+{
+  "name": "ProductCardTwo",
+  "propsSchema": {
+    "products": "Array<{ id: string, brand: string, name: string, price: string, rating: number, reviewCount: string, imageSrc: string, imageAlt?: string, onFavorite?: () => void, onProductClick?: () => void, isFavorited?: boolean }>",
+    "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+    "gridVariant": "'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid'",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
+    "uniformGridCustomHeightClasses?": "string (default: 'min-h-95 2xl:min-h-105')",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Product section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "imageClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string",
+    "textBoxTitleImageClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "cardBrandClassName?": "string",
+    "cardNameClassName?": "string",
+    "cardPriceClassName?": "string",
+    "cardRatingClassName?": "string",
+    "actionButtonClassName?": "string - Styles the action button on product image",
+    "gridClassName?": "string",
+    "carouselClassName?": "string",
+    "controlsClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/RadialGradientBackground.schema.json b/registry/schemas/RadialGradientBackground.schema.json
new file mode 100644
index 0000000..2919a65
--- /dev/null
+++ b/registry/schemas/RadialGradientBackground.schema.json
@@ -0,0 +1,10 @@
+{
+  "name": "RadialGradientBackground",
+  "propsSchema": {
+    "className?": "string",
+    "centerColor?": "string (default: 'var(--background)')",
+    "edgeColor?": "string (default: 'var(--color-background-accent)')",
+    "size?": "string (default: '130% 130%')",
+    "position?": "string (default: '50% 15%')"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/RotatedRaysBackground.schema.json b/registry/schemas/RotatedRaysBackground.schema.json
new file mode 100644
index 0000000..7e4b381
--- /dev/null
+++ b/registry/schemas/RotatedRaysBackground.schema.json
@@ -0,0 +1,9 @@
+{
+  "name": "RotatedRaysBackground",
+  "propsSchema": {
+    "animated": "boolean - Required. When true, rays animate with pulsing opacity. When false, rays display static opacity.",
+    "showGrid": "boolean - Required. When true, displays a grid overlay fading from top center. When false, no grid is shown.",
+    "className?": "string",
+    "containerClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/SocialProofOne.schema.json b/registry/schemas/SocialProofOne.schema.json
new file mode 100644
index 0000000..7e99a27
--- /dev/null
+++ b/registry/schemas/SocialProofOne.schema.json
@@ -0,0 +1,34 @@
+{
+  "name": "SocialProofOne",
+  "propsSchema": {
+    "names": "string[] (required) - Array of company/partner names to display as text",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }>",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{ text: string, href?: string, onClick?: () => void }>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image'",
+    "useInvertedBackground": "boolean",
+    "speed?": "number (default: 40)",
+    "showCard?": "boolean (default: true) - Whether to show card styling around items",
+    "ariaLabel?": "string (default: 'Social proof section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "titleImageWrapperClassName?": "string",
+    "titleImageClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string",
+    "contentClassName?": "string",
+    "logoItemClassName?": "string",
+    "logoCardClassName?": "string",
+    "logoTextClassName?": "string"
+  }
+}
diff --git a/registry/schemas/SplitAbout.schema.json b/registry/schemas/SplitAbout.schema.json
new file mode 100644
index 0000000..74c6e28
--- /dev/null
+++ b/registry/schemas/SplitAbout.schema.json
@@ -0,0 +1,41 @@
+{
+  "name": "SplitAbout",
+  "propsSchema": {
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "bulletPoints": "Array<{ title: string, description: string, icon?: LucideIcon }>",
+    "imageSrc?": "string",
+    "videoSrc?": "string",
+    "imageAlt?": "string (default: '')",
+    "videoAriaLabel?": "string (default: 'About section video')",
+    "mediaBadge?": "{ text: string, avatarSrc?: string, avatarAlt?: string, className?: string }",
+    "ariaLabel?": "string (default: 'About section')",
+    "imagePosition?": "'left' | 'right' (default: 'right')",
+    "mediaAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground": "boolean",
+    "className?": "string",
+    "containerClassName?": "string",
+    "textBoxClassName?": "string",
+    "titleClassName?": "string",
+    "titleImageWrapperClassName?": "string",
+    "titleImageClassName?": "string",
+    "descriptionClassName?": "string",
+    "tagClassName?": "string",
+    "buttonContainerClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string",
+    "contentClassName?": "string",
+    "bulletPointClassName?": "string",
+    "bulletTitleClassName?": "string",
+    "bulletDescriptionClassName?": "string",
+    "mediaWrapperClassName?": "string",
+    "imageClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/TeamCardEleven.schema.json b/registry/schemas/TeamCardEleven.schema.json
new file mode 100644
index 0000000..fa651e7
--- /dev/null
+++ b/registry/schemas/TeamCardEleven.schema.json
@@ -0,0 +1,35 @@
+{
+  "name": "TeamCardEleven",
+  "propsSchema": {
+    "groups": "Array<{ id: string, groupTitle: string, members: Array<{ id: string, title: string, subtitle: string, detail: string, imageSrc?: string, imageAlt?: string, videoSrc?: string, videoAriaLabel?: string }> }>",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal'",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image'",
+    "useInvertedBackground": "boolean",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "ariaLabel?": "string (default: 'Team section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string",
+    "titleImageWrapperClassName?": "string",
+    "titleImageClassName?": "string",
+    "groupTitleClassName?": "string",
+    "memberClassName?": "string",
+    "memberImageClassName?": "string",
+    "memberTitleClassName?": "string",
+    "memberSubtitleClassName?": "string",
+    "memberDetailClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/TeamCardFive.schema.json b/registry/schemas/TeamCardFive.schema.json
new file mode 100644
index 0000000..d96cd30
--- /dev/null
+++ b/registry/schemas/TeamCardFive.schema.json
@@ -0,0 +1,35 @@
+{
+  "name": "TeamCardFive",
+  "propsSchema": {
+    "team": "Array<{ id: string, name: string, role: string, imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }>",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal'",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "textboxLayout": "'default' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground": "boolean",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "ariaLabel?": "string (default: 'Team section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string",
+    "textBoxTitleImageClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string",
+    "gridClassName?": "string",
+    "cardClassName?": "string",
+    "mediaWrapperClassName?": "string",
+    "mediaClassName?": "string",
+    "nameClassName?": "string",
+    "roleClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/TeamCardOne.schema.json b/registry/schemas/TeamCardOne.schema.json
new file mode 100644
index 0000000..31e310c
--- /dev/null
+++ b/registry/schemas/TeamCardOne.schema.json
@@ -0,0 +1,40 @@
+{
+  "name": "TeamCardOne",
+  "propsSchema": {
+    "members": "Array<{ id: string, name: string, role: string, imageSrc: string, imageAlt?: string }>",
+    "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+    "gridVariant": "'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right'",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d' (required - controls GSAP scroll animations with stagger effect)",
+    "uniformGridCustomHeightClasses?": "string (default: 'min-h-95 2xl:min-h-105')",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Team section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string",
+    "textBoxTitleImageClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "imageClassName?": "string",
+    "overlayClassName?": "string",
+    "nameClassName?": "string",
+    "roleClassName?": "string",
+    "gridClassName?": "string",
+    "carouselClassName?": "string",
+    "controlsClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/TeamCardSix.schema.json b/registry/schemas/TeamCardSix.schema.json
new file mode 100644
index 0000000..686e91f
--- /dev/null
+++ b/registry/schemas/TeamCardSix.schema.json
@@ -0,0 +1,40 @@
+{
+  "name": "TeamCardSix",
+  "propsSchema": {
+    "members": "Array<{ id: string, name: string, role: string, imageSrc: string, imageAlt?: string }>",
+    "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+    "gridVariant": "'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right' (required - determines grid layout or carousel trigger)",
+    "uniformGridCustomHeightClasses?": "string (default: 'min-h-95 2xl:min-h-105')",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d'",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Team section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string",
+    "textBoxTitleImageClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "imageClassName?": "string",
+    "overlayClassName?": "string",
+    "nameClassName?": "string",
+    "roleClassName?": "string",
+    "gridClassName?": "string",
+    "carouselClassName?": "string",
+    "controlsClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/TeamCardTen.schema.json b/registry/schemas/TeamCardTen.schema.json
new file mode 100644
index 0000000..7368010
--- /dev/null
+++ b/registry/schemas/TeamCardTen.schema.json
@@ -0,0 +1,22 @@
+{
+  "name": "TeamCardTen",
+  "propsSchema": {
+    "title": "string",
+    "tag": "string",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "membersAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "members": "Array<{ id: string, name: string, imageSrc?: string, imageAlt?: string, videoSrc?: string, videoAriaLabel?: string }>",
+    "memberVariant": "'default' | 'card' (required - 'default': no card styling, 'card': each member wrapped in card with rounded corners)",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Team section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "titleClassName?": "string",
+    "tagClassName?": "string",
+    "membersContainerClassName?": "string",
+    "memberClassName?": "string",
+    "mediaWrapperClassName?": "string",
+    "mediaClassName?": "string",
+    "nameClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/TeamCardTwo.schema.json b/registry/schemas/TeamCardTwo.schema.json
new file mode 100644
index 0000000..b4c2d88
--- /dev/null
+++ b/registry/schemas/TeamCardTwo.schema.json
@@ -0,0 +1,43 @@
+{
+  "name": "TeamCardTwo",
+  "propsSchema": {
+    "members": "Array<{ id: string, name: string, role: string, description: string, imageSrc: string, imageAlt?: string, socialLinks?: Array<{ icon: LucideIcon, url: string }> }>",
+    "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+    "gridVariant": "'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right'",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
+    "uniformGridCustomHeightClasses?": "string (default: 'min-h-95 2xl:min-h-105')",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Team section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string",
+    "textBoxTitleImageClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "imageClassName?": "string",
+    "overlayClassName?": "string",
+    "nameClassName?": "string",
+    "roleClassName?": "string",
+    "memberDescriptionClassName?": "string",
+    "socialLinksClassName?": "string",
+    "socialIconClassName?": "string",
+    "gridClassName?": "string",
+    "carouselClassName?": "string",
+    "controlsClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/TestimonialAboutCard.schema.json b/registry/schemas/TestimonialAboutCard.schema.json
new file mode 100644
index 0000000..6bc02db
--- /dev/null
+++ b/registry/schemas/TestimonialAboutCard.schema.json
@@ -0,0 +1,32 @@
+{
+  "name": "TestimonialAboutCard",
+  "propsSchema": {
+    "tag": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "title": "string",
+    "description": "string",
+    "subdescription": "string",
+    "icon": "LucideIcon (required - displayed in the icon box)",
+    "mediaAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "imageSrc": "string (required if no videoSrc)",
+    "imageAlt?": "string (default: '')",
+    "videoSrc": "string (required if no imageSrc)",
+    "videoAriaLabel?": "string (default: 'Testimonial video')",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Testimonial section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "contentClassName?": "string",
+    "tagClassName?": "string",
+    "titleClassName?": "string",
+    "descriptionClassName?": "string",
+    "subdescriptionClassName?": "string",
+    "footerClassName?": "string",
+    "iconBoxClassName?": "string",
+    "iconClassName?": "string",
+    "mediaWrapperClassName?": "string",
+    "mediaClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/TestimonialCardFifteen.schema.json b/registry/schemas/TestimonialCardFifteen.schema.json
new file mode 100644
index 0000000..9bc761e
--- /dev/null
+++ b/registry/schemas/TestimonialCardFifteen.schema.json
@@ -0,0 +1,21 @@
+{
+  "name": "TestimonialCardFifteen",
+  "propsSchema": {
+    "testimonial": "string",
+    "rating": "number (0-5)",
+    "author": "string",
+    "avatars": "Array<{ src: string, alt: string }>",
+    "ratingAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "avatarsAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Testimonial section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "ratingClassName?": "string",
+    "starClassName?": "string",
+    "testimonialClassName?": "string",
+    "avatarGroupClassName?": "string",
+    "avatarClassName?": "string",
+    "avatarImageClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/TestimonialCardFive.schema.json b/registry/schemas/TestimonialCardFive.schema.json
new file mode 100644
index 0000000..b9b7fa5
--- /dev/null
+++ b/registry/schemas/TestimonialCardFive.schema.json
@@ -0,0 +1,40 @@
+{
+  "name": "TestimonialCardFive",
+  "propsSchema": {
+    "testimonials": "Array<{ id: string, name: string, date: string, title: string, quote: string, tag: string, avatarSrc: string, avatarAlt?: string, imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }>",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Testimonials section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string",
+    "textBoxTitleImageClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "cardTagClassName?": "string",
+    "cardTitleClassName?": "string",
+    "cardQuoteClassName?": "string",
+    "cardAuthorClassName?": "string",
+    "cardAvatarWrapperClassName?": "string",
+    "cardAvatarClassName?": "string",
+    "cardNameClassName?": "string",
+    "cardDateClassName?": "string",
+    "cardImageClassName?": "string",
+    "carouselClassName?": "string",
+    "dotsClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/TestimonialCardOne.schema.json b/registry/schemas/TestimonialCardOne.schema.json
new file mode 100644
index 0000000..444639f
--- /dev/null
+++ b/registry/schemas/TestimonialCardOne.schema.json
@@ -0,0 +1,42 @@
+{
+  "name": "TestimonialCardOne",
+  "propsSchema": {
+    "testimonials": "Array<{ id: string, name: string, role: string, company: string, rating: number, imageSrc: string, imageAlt?: string }>",
+    "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+    "uniformGridCustomHeightClasses?": "string (default: 'min-h-95 2xl:min-h-105')",
+    "gridVariant": "'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right'",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Testimonials section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string",
+    "textBoxTitleImageClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "imageClassName?": "string",
+    "overlayClassName?": "string",
+    "ratingClassName?": "string",
+    "nameClassName?": "string",
+    "roleClassName?": "string",
+    "companyClassName?": "string",
+    "gridClassName?": "string",
+    "carouselClassName?": "string",
+    "controlsClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/TestimonialCardSix.schema.json b/registry/schemas/TestimonialCardSix.schema.json
new file mode 100644
index 0000000..a55a933
--- /dev/null
+++ b/registry/schemas/TestimonialCardSix.schema.json
@@ -0,0 +1,40 @@
+{
+  "name": "TestimonialCardSix",
+  "propsSchema": {
+    "testimonials": "Array<{ id: string, name: string, handle: string, testimonial: string, imageSrc?: string, imageAlt?: string, icon?: LucideIcon }>",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal'",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground": "boolean",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "speed?": "number (default: 40)",
+    "topMarqueeDirection?": "'left' | 'right' (default: 'left')",
+    "ariaLabel?": "string (default: 'Testimonials section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "carouselClassName?": "string",
+    "bottomCarouselClassName?": "string",
+    "cardClassName?": "string",
+    "testimonialClassName?": "string",
+    "imageWrapperClassName?": "string",
+    "imageClassName?": "string",
+    "iconClassName?": "string",
+    "nameClassName?": "string",
+    "handleClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string",
+    "textBoxTitleImageClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/TestimonialCardSixteen.schema.json b/registry/schemas/TestimonialCardSixteen.schema.json
new file mode 100644
index 0000000..aabfe87
--- /dev/null
+++ b/registry/schemas/TestimonialCardSixteen.schema.json
@@ -0,0 +1,42 @@
+{
+  "name": "TestimonialCardSixteen",
+  "propsSchema": {
+    "testimonials": "Testimonial[] (required) - Array with id, name, role, company, rating, imageSrc",
+    "kpiItems": "[KpiItem, KpiItem, KpiItem] (required) - Exactly 3 items with value and label",
+    "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+    "uniformGridCustomHeightClasses?": "string (default: 'min-h-85 2xl:min-h-105')",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d'",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }>",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{ text: string, href?: string, onClick?: () => void }>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image'",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Testimonials section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string",
+    "textBoxTitleImageClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "imageClassName?": "string",
+    "overlayClassName?": "string",
+    "ratingClassName?": "string",
+    "nameClassName?": "string",
+    "roleClassName?": "string",
+    "companyClassName?": "string",
+    "gridClassName?": "string",
+    "carouselClassName?": "string",
+    "controlsClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string"
+  }
+}
diff --git a/registry/schemas/TestimonialCardTen.schema.json b/registry/schemas/TestimonialCardTen.schema.json
new file mode 100644
index 0000000..7be057f
--- /dev/null
+++ b/registry/schemas/TestimonialCardTen.schema.json
@@ -0,0 +1,38 @@
+{
+  "name": "TestimonialCardTen",
+  "propsSchema": {
+    "testimonials": "Array<{ id: string, title: string, quote: string, name: string, role: string, imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }>",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image'",
+    "useInvertedBackground": "boolean",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "ariaLabel?": "string (default: 'Testimonials section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string",
+    "titleImageWrapperClassName?": "string",
+    "titleImageClassName?": "string",
+    "contentClassName?": "string",
+    "quoteCardClassName?": "string",
+    "testimonialTitleClassName?": "string",
+    "quoteClassName?": "string",
+    "nameClassName?": "string",
+    "roleClassName?": "string",
+    "navigationClassName?": "string",
+    "navigationButtonClassName?": "string",
+    "mediaCardClassName?": "string",
+    "mediaClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/TestimonialCardThirteen.schema.json b/registry/schemas/TestimonialCardThirteen.schema.json
new file mode 100644
index 0000000..cc65f5c
--- /dev/null
+++ b/registry/schemas/TestimonialCardThirteen.schema.json
@@ -0,0 +1,44 @@
+{
+  "name": "TestimonialCardThirteen",
+  "propsSchema": {
+    "testimonials": "Array<{ id: string, name: string, handle: string, testimonial: string, rating: number, imageSrc?: string, imageAlt?: string, icon?: LucideIcon }>",
+    "showRating": "boolean - true for star ratings, false for quote icon",
+    "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+    "uniformGridCustomHeightClasses?": "string (default: 'min-h-none')",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal'",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image'",
+    "useInvertedBackground": "boolean",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "ariaLabel?": "string (default: 'Testimonials section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string",
+    "textBoxTitleImageClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string",
+    "imageWrapperClassName?": "string",
+    "imageClassName?": "string",
+    "iconClassName?": "string",
+    "nameClassName?": "string",
+    "handleClassName?": "string",
+    "testimonialClassName?": "string",
+    "ratingClassName?": "string",
+    "contentWrapperClassName?": "string",
+    "gridClassName?": "string",
+    "carouselClassName?": "string",
+    "controlsClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/TestimonialCardTwelve.schema.json b/registry/schemas/TestimonialCardTwelve.schema.json
new file mode 100644
index 0000000..2dfb6f7
--- /dev/null
+++ b/registry/schemas/TestimonialCardTwelve.schema.json
@@ -0,0 +1,24 @@
+{
+  "name": "TestimonialCardTwelve",
+  "propsSchema": {
+    "testimonials": "Array<{ id: string, name: string, imageSrc: string, imageAlt?: string }>",
+    "cardTitle": "string",
+    "cardTag": "string",
+    "cardTagIcon?": "LucideIcon",
+    "buttons?": "Array<{ text: string, href?: string, onClick?: () => void }>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "cardAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Testimonials section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "avatarGroupClassName?": "string",
+    "avatarClassName?": "string",
+    "cardTitleClassName?": "string",
+    "cardTagClassName?": "string",
+    "buttonContainerClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/TestimonialCardTwo.schema.json b/registry/schemas/TestimonialCardTwo.schema.json
new file mode 100644
index 0000000..734147c
--- /dev/null
+++ b/registry/schemas/TestimonialCardTwo.schema.json
@@ -0,0 +1,41 @@
+{
+  "name": "TestimonialCardTwo",
+  "propsSchema": {
+    "testimonials": "Array<{ id: string, name: string, role: string, testimonial: string, imageSrc?: string, imageAlt?: string, icon?: LucideIcon }>",
+    "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+    "uniformGridCustomHeightClasses?": "string (default: 'min-h-none')",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'Testimonials section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "cardClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "textBoxTitleImageWrapperClassName?": "string",
+    "textBoxTitleImageClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "imageWrapperClassName?": "string",
+    "imageClassName?": "string",
+    "iconClassName?": "string",
+    "nameClassName?": "string",
+    "roleClassName?": "string",
+    "testimonialClassName?": "string",
+    "gridClassName?": "string",
+    "carouselClassName?": "string",
+    "controlsClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/TextAbout.schema.json b/registry/schemas/TextAbout.schema.json
new file mode 100644
index 0000000..afe9ca0
--- /dev/null
+++ b/registry/schemas/TextAbout.schema.json
@@ -0,0 +1,19 @@
+{
+  "name": "TextAbout",
+  "propsSchema": {
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "title": "string",
+    "buttons?": "Array<{ text: string, onClick?: () => void, href?: string, props?: Partial<ButtonPropsForVariant<CTAButtonVariant>> }>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'About section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "titleClassName?": "string",
+    "buttonContainerClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/TextAnimation.schema.json b/registry/schemas/TextAnimation.schema.json
new file mode 100644
index 0000000..308ea2b
--- /dev/null
+++ b/registry/schemas/TextAnimation.schema.json
@@ -0,0 +1,17 @@
+{
+  "name": "TextAnimation",
+  "propsSchema": {
+    "type?": "'entrance-slide' | 'reveal-blur' | 'background-highlight'",
+    "text": "string",
+    "as?": "'div' | 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' (default: 'div')",
+    "children?": "React.ReactNode",
+    "variant?": "'trigger' | 'words-trigger'",
+    "className?": "string",
+    "duration?": "number",
+    "stagger?": "number",
+    "start?": "string",
+    "end?": "string",
+    "ariaLabel?": "string",
+    "gradientColors?": "{ from: string, to: string }"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/TextBox.schema.json b/registry/schemas/TextBox.schema.json
new file mode 100644
index 0000000..9b8df47
--- /dev/null
+++ b/registry/schemas/TextBox.schema.json
@@ -0,0 +1,34 @@
+{
+  "name": "TextBox",
+  "propsSchema": {
+    "title": "string",
+    "description": "string",
+    "type?": "'entrance-slide' | 'reveal-blur' | 'background-highlight'",
+    "textboxLayout?": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (default: 'default')",
+    "center?": "boolean (default: false)",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }>",
+    "useInvertedBackground?": "boolean",
+    "titleImageWrapperClassName?": "string",
+    "titleImageClassName?": "string",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "duration?": "number (default: 1)",
+    "start?": "string (default: 'top 80%')",
+    "end?": "string (default: 'top 20%')",
+    "gradientColors?": "{ from: string, to: string }",
+    "children?": "React.ReactNode",
+    "className?": "string",
+    "titleClassName?": "string",
+    "descriptionClassName?": "string",
+    "tagClassName?": "string",
+    "buttonContainerClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string",
+    "avatars?": "Array<{ src: string, alt?: string }> - User avatar images",
+    "avatarText?": "string",
+    "avatarGroupClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/TextNumberCount.schema.json b/registry/schemas/TextNumberCount.schema.json
new file mode 100644
index 0000000..d2ac628
--- /dev/null
+++ b/registry/schemas/TextNumberCount.schema.json
@@ -0,0 +1,15 @@
+{
+  "name": "TextNumberCount",
+  "propsSchema": {
+    "value": "number",
+    "startFrom?": "number",
+    "duration?": "number",
+    "format?": "Intl.NumberFormatOptions (notation excludes 'scientific' and 'engineering')",
+    "locales?": "string | string[] | Intl.Locale",
+    "prefix?": "string",
+    "suffix?": "string",
+    "animateOnScroll?": "boolean",
+    "threshold?": "number",
+    "className?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/TextSplitAbout.schema.json b/registry/schemas/TextSplitAbout.schema.json
new file mode 100644
index 0000000..97678d8
--- /dev/null
+++ b/registry/schemas/TextSplitAbout.schema.json
@@ -0,0 +1,19 @@
+{
+  "name": "TextSplitAbout",
+  "propsSchema": {
+    "title": "string",
+    "description": "string[]",
+    "buttons?": "Array<{ text: string, onClick?: () => void, href?: string, props?: Partial<ButtonPropsForVariant<CTAButtonVariant>> }>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "showBorder?": "boolean (default: false)",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'About section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "titleClassName?": "string",
+    "descriptionClassName?": "string",
+    "buttonContainerClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/Textarea.schema.json b/registry/schemas/Textarea.schema.json
new file mode 100644
index 0000000..95e2cbd
--- /dev/null
+++ b/registry/schemas/Textarea.schema.json
@@ -0,0 +1,13 @@
+{
+  "name": "Textarea",
+  "propsSchema": {
+    "value": "string",
+    "onChange": "(value: string) => void",
+    "placeholder?": "string",
+    "rows?": "number (default: 5)",
+    "required?": "boolean (default: false)",
+    "disabled?": "boolean (default: false)",
+    "ariaLabel?": "string",
+    "className?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/TimelineCardStack.schema.json b/registry/schemas/TimelineCardStack.schema.json
new file mode 100644
index 0000000..8bfb144
--- /dev/null
+++ b/registry/schemas/TimelineCardStack.schema.json
@@ -0,0 +1,26 @@
+{
+  "name": "TimelineCardStack",
+  "propsSchema": {
+    "children": "React.ReactNode",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground?": "boolean",
+    "ariaLabel?": "string (default: 'Timeline section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "textBoxClassName?": "string",
+    "titleClassName?": "string",
+    "titleImageWrapperClassName?": "string",
+    "titleImageClassName?": "string",
+    "descriptionClassName?": "string",
+    "tagClassName?": "string",
+    "buttonContainerClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/TimelineHorizontalCardStack.schema.json b/registry/schemas/TimelineHorizontalCardStack.schema.json
new file mode 100644
index 0000000..b38ba3b
--- /dev/null
+++ b/registry/schemas/TimelineHorizontalCardStack.schema.json
@@ -0,0 +1,31 @@
+{
+  "name": "TimelineHorizontalCardStack",
+  "propsSchema": {
+    "children": "React.ReactNode",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "mediaItems?": "Array<{ imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }>",
+    "useInvertedBackground?": "boolean",
+    "ariaLabel?": "string (default: 'Timeline section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "textBoxClassName?": "string",
+    "titleClassName?": "string",
+    "titleImageWrapperClassName?": "string",
+    "titleImageClassName?": "string",
+    "descriptionClassName?": "string",
+    "tagClassName?": "string",
+    "buttonContainerClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string",
+    "cardClassName?": "string",
+    "progressBarClassName?": "string",
+    "mediaContainerClassName?": "string",
+    "mediaClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/TimelinePhoneView.schema.json b/registry/schemas/TimelinePhoneView.schema.json
new file mode 100644
index 0000000..25c9a39
--- /dev/null
+++ b/registry/schemas/TimelinePhoneView.schema.json
@@ -0,0 +1,35 @@
+{
+  "name": "TimelinePhoneView",
+  "propsSchema": {
+    "items": "Array<{ trigger: string, content: React.ReactNode, imageOne?: string, videoOne?: string, imageAltOne?: string, videoAriaLabelOne?: string, imageTwo?: string, videoTwo?: string, imageAltTwo?: string, videoAriaLabelTwo?: string }> - Timeline items with triggers and dual phone media",
+    "showTextBox?": "boolean (default: true - controls whether CardStackTextBox renders)",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "useInvertedBackground?": "boolean",
+    "showDivider?": "boolean (default: false)",
+    "ariaLabel?": "string (default: 'Timeline phone view section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "textBoxClassName?": "string",
+    "titleClassName?": "string",
+    "titleImageWrapperClassName?": "string",
+    "titleImageClassName?": "string",
+    "descriptionClassName?": "string",
+    "tagClassName?": "string",
+    "buttonContainerClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string",
+    "desktopContainerClassName?": "string",
+    "mobileContainerClassName?": "string",
+    "desktopContentClassName?": "string",
+    "desktopWrapperClassName?": "string",
+    "mobileWrapperClassName?": "string",
+    "phoneFrameClassName?": "string",
+    "mobilePhoneFrameClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/registry/schemas/TimelineProcessFlow.schema.json b/registry/schemas/TimelineProcessFlow.schema.json
new file mode 100644
index 0000000..ea860de
--- /dev/null
+++ b/registry/schemas/TimelineProcessFlow.schema.json
@@ -0,0 +1,32 @@
+{
+  "name": "TimelineProcessFlow",
+  "propsSchema": {
+    "items": "Array<{ content: React.ReactNode, media: React.ReactNode, reverse: boolean }> - Timeline items with content and media",
+    "title": "string",
+    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+    "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
+    "useInvertedBackground?": "boolean",
+    "ariaLabel?": "string (default: 'Timeline process flow section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "textBoxClassName?": "string",
+    "textBoxTitleClassName?": "string",
+    "titleImageWrapperClassName?": "string",
+    "titleImageClassName?": "string",
+    "textBoxDescriptionClassName?": "string",
+    "textBoxTagClassName?": "string",
+    "textBoxButtonContainerClassName?": "string",
+    "textBoxButtonClassName?": "string",
+    "textBoxButtonTextClassName?": "string",
+    "itemClassName?": "string",
+    "mediaWrapperClassName?": "string",
+    "numberClassName?": "string",
+    "contentWrapperClassName?": "string",
+    "gapClassName?": "string"
+  }
+}
\ No newline at end of file
diff --git a/src/app/error.tsx b/src/app/error.tsx
new file mode 100644
index 0000000..2d12cec
--- /dev/null
+++ b/src/app/error.tsx
@@ -0,0 +1,74 @@
+"use client";
+
+import { useEffect } from "react";
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    console.error("[Error Boundary]", error);
+    // Notify parent frame (Webild editor) about the runtime error
+    try {
+      window.parent.postMessage(
+        { type: "webild-runtime-error", message: error.message },
+        "*",
+      );
+    } catch {}
+  }, [error]);
+
+  return (
+    <div
+      style={{
+        minHeight: "100vh",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        fontFamily: "system-ui, -apple-system, sans-serif",
+        background: "#fafafa",
+        padding: "2rem",
+      }}
+    >
+      <div style={{ textAlign: "center", maxWidth: 420 }}>
+        <h2
+          style={{
+            fontSize: "1.25rem",
+            fontWeight: 600,
+            color: "#111",
+            marginBottom: "0.5rem",
+          }}
+        >
+          Something went wrong
+        </h2>
+        <p
+          style={{
+            color: "#666",
+            fontSize: "0.875rem",
+            lineHeight: 1.5,
+            marginBottom: "1.25rem",
+          }}
+        >
+          An error occurred while rendering this page.
+        </p>
+        <button
+          onClick={reset}
+          style={{
+            padding: "0.5rem 1.25rem",
+            fontSize: "0.8125rem",
+            fontWeight: 500,
+            color: "#fff",
+            background: "#111",
+            border: "none",
+            borderRadius: "0.375rem",
+            cursor: "pointer",
+          }}
+        >
+          Try again
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/favicon.ico b/src/app/favicon.ico
new file mode 100644
index 0000000..718d6fe
Binary files /dev/null and b/src/app/favicon.ico differ
diff --git a/src/app/global-error.tsx b/src/app/global-error.tsx
new file mode 100644
index 0000000..af92bcf
--- /dev/null
+++ b/src/app/global-error.tsx
@@ -0,0 +1,76 @@
+"use client";
+
+import { useEffect } from "react";
+
+export default function GlobalError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    console.error("[Global Error Boundary]", error);
+    try {
+      window.parent.postMessage(
+        { type: "webild-runtime-error", message: error.message },
+        "*",
+      );
+    } catch {}
+  }, [error]);
+
+  return (
+    <html lang="en">
+      <body
+        style={{
+          margin: 0,
+          minHeight: "100vh",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          fontFamily: "system-ui, -apple-system, sans-serif",
+          background: "#fafafa",
+          padding: "2rem",
+        }}
+      >
+        <div style={{ textAlign: "center", maxWidth: 420 }}>
+          <h2
+            style={{
+              fontSize: "1.25rem",
+              fontWeight: 600,
+              color: "#111",
+              marginBottom: "0.5rem",
+            }}
+          >
+            Something went wrong
+          </h2>
+          <p
+            style={{
+              color: "#666",
+              fontSize: "0.875rem",
+              lineHeight: 1.5,
+              marginBottom: "1.25rem",
+            }}
+          >
+            An error occurred while rendering this page.
+          </p>
+          <button
+            onClick={reset}
+            style={{
+              padding: "0.5rem 1.25rem",
+              fontSize: "0.8125rem",
+              fontWeight: 500,
+              color: "#fff",
+              background: "#111",
+              border: "none",
+              borderRadius: "0.375rem",
+              cursor: "pointer",
+            }}
+          >
+            Try again
+          </button>
+        </div>
+      </body>
+    </html>
+  );
+}
diff --git a/src/app/globals.css b/src/app/globals.css
new file mode 100644
index 0000000..f624db2
--- /dev/null
+++ b/src/app/globals.css
@@ -0,0 +1,5 @@
+@import "tailwindcss";
+@import "./styles/variables.css";
+@import "./styles/theme.css";
+@import "./styles/utilities.css";
+@import "./styles/base.css";
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
new file mode 100644
index 0000000..0374c08
--- /dev/null
+++ b/src/app/layout.tsx
@@ -0,0 +1,48 @@
+import type { Metadata } from "next";
+import { Halant } from "next/font/google";
+import { Inter } from "next/font/google";
+import "./globals.css";
+import "@/lib/gsap-setup";
+import { ServiceWrapper } from "@/components/ServiceWrapper";
+import Tag from "@/tag/Tag";
+import { getVisualEditScript } from "@/utils/visual-edit-script";
+import { Source_Sans_3 } from "next/font/google";
+
+
+
+export const metadata: Metadata = {
+  title: 'Aura Hoodies | Aesthetic Streetwear',
+  description: 'Premium aesthetic hoodies designed for modern urban style.',
+  openGraph: {
+    "title": "Aura Hoodies | Aesthetic Streetwear",
+    "siteName": "Aura Hoodies",
+    "type": "website"
+  },
+};
+
+const sourceSans3 = Source_Sans_3({
+  variable: "--font-source-sans-3",
+  subsets: ["latin"],
+});
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <ServiceWrapper>
+        <body className={`${sourceSans3.variable} antialiased`}>
+          <Tag />
+          {children}
+          <script
+              dangerouslySetInnerHTML={{
+                  __html: `${getVisualEditScript()}`
+              }}
+          />
+        </body>
+      </ServiceWrapper>
+    </html>
+  );
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
new file mode 100644
index 0000000..b44371f
--- /dev/null
+++ b/src/app/page.tsx
@@ -0,0 +1,392 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import AboutMetric from '@/components/sections/about/AboutMetric';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+import FaqDouble from '@/components/sections/faq/FaqDouble';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
+import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import ProductCardThree from '@/components/sections/product/ProductCardThree';
+import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
+import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
+import { Award, Globe, Palette, Shield, Smile, Sparkles } from "lucide-react";
+
+export default function LandingPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="bounce-effect"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="rounded"
+        contentWidth="mediumSmall"
+        sizing="largeSmallSizeLargeTitles"
+        background="aurora"
+        cardStyle="glass-elevated"
+        primaryButtonStyle="double-inset"
+        secondaryButtonStyle="layered"
+        headingFontWeight="semibold"
+    >
+      <ReactLenis root>
+  <div id="nav" data-section="nav">
+      <NavbarStyleFullscreen
+      navItems={[
+        {
+          name: "Home",
+          id: "hero",
+        },
+        {
+          name: "About",
+          id: "about",
+        },
+        {
+          name: "Products",
+          id: "products",
+        },
+        {
+          name: "Contact",
+          id: "contact",
+        },
+      ]}
+      brandName="Aura Hoodies"
+    />
+  </div>
+
+  <div id="hero" data-section="hero">
+      <HeroSplitTestimonial
+      background={{
+        variant: "plain",
+      }}
+      title="Redefining Comfort and Aesthetic"
+      description="Experience the perfect blend of modern design and premium comfort with our latest collection of hand-crafted hoodies. Tailored for those who appreciate the details."
+      testimonials={[
+        {
+          name: "Alice T.",
+          handle: "@alicet",
+          testimonial: "The best fit and feel I've ever had. Truly aesthetic.",
+          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/woman-drinking-water-break_23-2148898075.jpg",
+        },
+        {
+          name: "Marcus R.",
+          handle: "@marcusr",
+          testimonial: "Premium quality fabric that actually lasts. Love the brand.",
+          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-smiling-female-trendy-summer-clothes-sexy-carefree-woman-posing-near-blue-wall-studio-positive-brunette-model-having-fun-going-crazy-cheerful-happy-sunglasses_158538-20361.jpg",
+        },
+        {
+          name: "Sarah J.",
+          handle: "@sarahj",
+          testimonial: "Everything about these hoodies is perfect. Aesthetic goal met.",
+          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/full-shot-woman-posing-night-with-flash_23-2150204452.jpg",
+        },
+        {
+          name: "Leo K.",
+          handle: "@leok",
+          testimonial: "So comfortable I never take it off. Simple, clean design.",
+          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/teenage-girl-sunglasses-standing-outside_23-2147654973.jpg",
+        },
+        {
+          name: "Elena V.",
+          handle: "@elenav",
+          testimonial: "Finally found a hoodie that fits the vibe I was looking for.",
+          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-holding-clothes_23-2149241364.jpg",
+        },
+      ]}
+      imageSrc="http://img.b2bpic.net/free-photo/beautiful-blond-girl-posing-with-loangboard_158595-2840.jpg"
+      mediaAnimation="blur-reveal"
+      avatars={[
+        {
+          src: "http://img.b2bpic.net/free-photo/portrait-beautiful-woman_1303-17562.jpg",
+          alt: "Portrait of beautiful woman",
+        },
+        {
+          src: "http://img.b2bpic.net/free-photo/medium-shot-girl-posing-outdoors_23-2149241604.jpg",
+          alt: "Medium shot girl posing outdoors",
+        },
+        {
+          src: "http://img.b2bpic.net/free-photo/attractive-hipster-girl-eyewear_158595-4906.jpg",
+          alt: "Attractive hipster girl in eyewear",
+        },
+        {
+          src: "http://img.b2bpic.net/free-photo/woman-grey-suit-enjoys-wind-street-new-york-city_8353-1582.jpg",
+          alt: "Woman in grey suit enjoys wind on the street of New York city",
+        },
+        {
+          src: "http://img.b2bpic.net/free-photo/front-view-man-with-afro-dreadlocks_23-2149462068.jpg",
+          alt: "Front view man with afro dreadlocks",
+        },
+      ]}
+      marqueeItems={[
+        {
+          type: "text",
+          text: "Premium Fabric",
+        },
+        {
+          type: "text",
+          text: "Modern Aesthetic",
+        },
+        {
+          type: "text",
+          text: "Ethically Crafted",
+        },
+        {
+          type: "text",
+          text: "Global Shipping",
+        },
+        {
+          type: "text",
+          text: "Curated Collections",
+        },
+      ]}
+    />
+  </div>
+
+  <div id="about" data-section="about">
+      <AboutMetric
+      useInvertedBackground={false}
+      title="Our Commitment to Craft"
+      metrics={[
+        {
+          icon: Shield,
+          label: "Ethically Made",
+          value: "100%",
+        },
+        {
+          icon: Award,
+          label: "Premium Quality",
+          value: "Premium",
+        },
+        {
+          icon: Sparkles,
+          label: "Aesthetic Design",
+          value: "Curated",
+        },
+      ]}
+      metricsAnimation="slide-up"
+    />
+  </div>
+
+  <div id="products" data-section="products">
+      <ProductCardThree
+      animationType="slide-up"
+      textboxLayout="split"
+      gridVariant="one-large-left-three-stacked-right"
+      useInvertedBackground={false}
+      products={[
+        {
+          id: "p1",
+          name: "Minimalist Hoodie - Sand",
+          price: "$89",
+          imageSrc: "http://img.b2bpic.net/free-photo/fast-fashion-vs-slow-sustainable-fashion_23-2149134027.jpg",
+        },
+        {
+          id: "p2",
+          name: "Street Hoodie - Sage",
+          price: "$95",
+          imageSrc: "http://img.b2bpic.net/free-photo/white-hoodie-mockup-front_1258-248400.jpg",
+        },
+        {
+          id: "p3",
+          name: "Classic Logo Hoodie - Black",
+          price: "$85",
+          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-blonde-woman-white-hoodie-blue-jeans-posing-gray-background_89887-982.jpg",
+        },
+        {
+          id: "p4",
+          name: "Oversized Fit - Grey",
+          price: "$99",
+          imageSrc: "http://img.b2bpic.net/free-photo/young-man-posing-outdoor_23-2148883570.jpg",
+        },
+        {
+          id: "p5",
+          name: "Thermal Hoodie - Navy",
+          price: "$110",
+          imageSrc: "http://img.b2bpic.net/free-photo/handsome-stylish-african-american-guy-white-jacket-looking-aggressive-camera-isolated-white-background_574295-4462.jpg",
+        },
+        {
+          id: "p6",
+          name: "Essential Hoodie - White",
+          price: "$89",
+          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-holding-fern-leaf-with-canvas-backdrop_171337-16482.jpg",
+        },
+      ]}
+      title="Shop the Collection"
+      description="Explore our curated hoodies designed for everyday wear."
+    />
+  </div>
+
+  <div id="metrics" data-section="metrics">
+      <MetricCardOne
+      textboxLayout="split"
+      gridVariant="bento-grid"
+      useInvertedBackground={false}
+      metrics={[
+        {
+          id: "m1",
+          value: "50k+",
+          title: "Happy Customers",
+          description: "Joining the aesthetic community.",
+          icon: Smile,
+        },
+        {
+          id: "m2",
+          value: "120",
+          title: "Design Styles",
+          description: "Curated options to suit your look.",
+          icon: Palette,
+        },
+        {
+          id: "m3",
+          value: "15+",
+          title: "Global Partners",
+          description: "Bringing designs to life everywhere.",
+          icon: Globe,
+        },
+      ]}
+      title="Brand Impact"
+      description="Our community is growing rapidly across the globe."
+    />
+  </div>
+
+  <div id="testimonials" data-section="testimonials">
+      <TestimonialCardFifteen
+      useInvertedBackground={false}
+      testimonial="I've never been so impressed by a hoodie brand. Aura Hoodies really understands quality and aesthetic in a way that feels unique. Customer for life."
+      rating={5}
+      author="Sarah Miller, Creative Director"
+      avatars={[
+        {
+          src: "http://img.b2bpic.net/free-photo/carefree-girl-singing-karaoke-app-earphones-holding-mobile-phone_176420-21487.jpg",
+          alt: "Sarah",
+        },
+        {
+          src: "http://img.b2bpic.net/free-photo/medium-shot-man-darkroom_23-2149893827.jpg",
+          alt: "John",
+        },
+        {
+          src: "http://img.b2bpic.net/free-photo/carefree-woman-posing-near-pink-wall-studio-positive-model-having-fun_158538-3451.jpg",
+          alt: "Emily",
+        },
+        {
+          src: "http://img.b2bpic.net/free-photo/stylish-urban-style-african-american-man-pink-hoodie-posed-winter-day-boxing-hands_627829-1456.jpg",
+          alt: "David",
+        },
+        {
+          src: "http://img.b2bpic.net/free-photo/business-owners-preparing-their-store_23-2149300867.jpg",
+          alt: "Business owners preparing their store",
+        },
+      ]}
+      ratingAnimation="blur-reveal"
+      avatarsAnimation="slide-up"
+    />
+  </div>
+
+  <div id="faq" data-section="faq">
+      <FaqDouble
+      textboxLayout="split"
+      useInvertedBackground={false}
+      faqs={[
+        {
+          id: "f1",
+          title: "Shipping Times?",
+          content: "We ship globally within 5-7 business days.",
+        },
+        {
+          id: "f2",
+          title: "Care Instructions?",
+          content: "Machine wash cold, air dry for the best result.",
+        },
+        {
+          id: "f3",
+          title: "Return Policy?",
+          content: "30-day hassle-free returns on all orders.",
+        },
+      ]}
+      title="Common Questions"
+      description="Find everything you need to know about our products."
+      faqsAnimation="blur-reveal"
+    />
+  </div>
+
+  <div id="socialproof" data-section="socialproof">
+      <SocialProofOne
+      textboxLayout="split"
+      useInvertedBackground={false}
+      names={[
+        "Vogue",
+        "GQ",
+        "Hypebeast",
+        "Fashion Week",
+        "Style Weekly",
+        "Urban Trends",
+        "Trend Hunter",
+      ]}
+      title="Trusted by Creators"
+      description="Featured in leading fashion publications and style platforms."
+    />
+  </div>
+
+  <div id="contact" data-section="contact">
+      <ContactCenter
+      useInvertedBackground={false}
+      background={{
+        variant: "plain",
+      }}
+      tag="Keep Connected"
+      title="Join the Aesthetic Community"
+      description="Sign up for exclusive drops, early access, and style tips."
+    />
+  </div>
+
+  <div id="footer" data-section="footer">
+      <FooterLogoEmphasis
+      columns={[
+        {
+          items: [
+            {
+              label: "Shop",
+              href: "#products",
+            },
+            {
+              label: "About",
+              href: "#about",
+            },
+          ],
+        },
+        {
+          items: [
+            {
+              label: "Contact",
+              href: "#contact",
+            },
+            {
+              label: "FAQ",
+              href: "#faq",
+            },
+          ],
+        },
+        {
+          items: [
+            {
+              label: "Legal",
+              href: "#",
+            },
+            {
+              label: "Privacy",
+              href: "#",
+            },
+          ],
+        },
+      ]}
+      logoText="AURA"
+    />
+  </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}
diff --git a/src/app/styles/base.css b/src/app/styles/base.css
new file mode 100644
index 0000000..bbb522f
--- /dev/null
+++ b/src/app/styles/base.css
@@ -0,0 +1,28 @@
+* {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255, 255, 255, 1) rgba(255, 255, 255, 0);
+}
+
+html {
+  overscroll-behavior: none;
+  overscroll-behavior-y: none;
+}
+
+body {
+  background-color: var(--background);
+  color: var(--foreground);
+  font-family: var(--font-source-sans-3), sans-serif;
+  position: relative;
+  min-height: 100vh;
+  overscroll-behavior: none;
+  overscroll-behavior-y: none;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: var(--font-source-sans-3), sans-serif;
+}
diff --git a/src/app/styles/theme.css b/src/app/styles/theme.css
new file mode 100644
index 0000000..db7eb53
--- /dev/null
+++ b/src/app/styles/theme.css
@@ -0,0 +1,176 @@
+@theme inline {
+  --color-background: var(--background);
+  --color-card: var(--card);
+  --color-foreground: var(--foreground);
+  --color-primary-cta: var(--primary-cta);
+  --color-primary-cta-text: var(--primary-cta-text);
+  --color-secondary-cta: var(--secondary-cta);
+  --color-secondary-cta-text: var(--secondary-cta-text);
+  --color-accent: var(--accent);
+  --color-background-accent: var(--background-accent);
+
+  /* theme border radius */
+  --radius-theme: var(--theme-border-radius);
+  --radius-theme-capped: var(--theme-border-radius-capped);
+
+  /* text */
+  --text-2xs: var(--text-2xs);
+  --text-xs: var(--text-xs);
+  --text-sm: var(--text-sm);
+  --text-base: var(--text-base);
+  --text-lg: var(--text-lg);
+  --text-xl: var(--text-xl);
+  --text-2xl: var(--text-2xl);
+  --text-3xl: var(--text-3xl);
+  --text-4xl: var(--text-4xl);
+  --text-5xl: var(--text-5xl);
+  --text-6xl: var(--text-6xl);
+  --text-7xl: var(--text-7xl);
+  --text-8xl: var(--text-8xl);
+  --text-9xl: var(--text-9xl);
+
+  /* height */
+  --height-4: var(--height-4);
+  --height-5: var(--height-5);
+  --height-6: var(--height-6);
+  --height-7: var(--height-7);
+  --height-8: var(--height-8);
+  --height-9: var(--height-9);
+  --height-11: var(--height-11);
+  --height-12: var(--height-12);
+
+  --height-10: var(--height-10);
+  --height-30: var(--height-30);
+  --height-90: var(--height-90);
+  --height-100: var(--height-100);
+  --height-110: var(--height-110);
+  --height-120: var(--height-120);
+  --height-130: var(--height-130);
+  --height-140: var(--height-140);
+  --height-150: var(--height-150);
+
+  --height-page-padding: calc(2.25rem+var(--vw-1_5)+var(--vw-1_5));
+
+  /* width */
+  --width-5: var(--width-5);
+  --width-7_5: var(--width-7_5);
+  --width-10: var(--width-10);
+  --width-12_5: var(--width-12_5);
+  --width-15: var(--width-15);
+  --width-17: var(--width-17);
+  --width-17_5: var(--width-17_5);
+  --width-20: var(--width-20);
+  --width-21: var(--width-21);
+  --width-22_5: var(--width-22_5);
+  --width-25: var(--width-25);
+  --width-26: var(--width-26);
+  --width-27_5: var(--width-27_5);
+  --width-30: var(--width-30);
+  --width-32_5: var(--width-32_5);
+  --width-35: var(--width-35);
+  --width-37_5: var(--width-37_5);
+  --width-40: var(--width-40);
+  --width-42_5: var(--width-42_5);
+  --width-45: var(--width-45);
+  --width-47_5: var(--width-47_5);
+  --width-50: var(--width-50);
+  --width-52_5: var(--width-52_5);
+  --width-55: var(--width-55);
+  --width-57_5: var(--width-57_5);
+  --width-60: var(--width-60);
+  --width-62_5: var(--width-62_5);
+  --width-65: var(--width-65);
+  --width-67_5: var(--width-67_5);
+  --width-70: var(--width-70);
+  --width-72_5: var(--width-72_5);
+  --width-75: var(--width-75);
+  --width-77_5: var(--width-77_5);
+  --width-80: var(--width-80);
+  --width-82_5: var(--width-82_5);
+  --width-85: var(--width-85);
+  --width-87_5: var(--width-87_5);
+  --width-90: var(--width-90);
+  --width-92_5: var(--width-92_5);
+  --width-95: var(--width-95);
+  --width-97_5: var(--width-97_5);
+  --width-100: var(--width-100);
+  --width-content-width: var(--width-content-width);
+  --width-carousel-padding: var(--width-carousel-padding);
+  --width-carousel-padding-controls: var(--width-carousel-padding-controls);
+  --width-carousel-padding-expanded: var(--width-carousel-padding-expanded);
+  --width-carousel-padding-controls-expanded: var(--width-carousel-padding-controls-expanded);
+  --width-carousel-item-3: var(--width-carousel-item-3);
+  --width-carousel-item-4: var(--width-carousel-item-4);
+  --width-x-padding-mask-fade: var(--width-x-padding-mask-fade);
+  --width-content-width-expanded: var(--width-content-width-expanded);
+
+  /* gap */
+  --spacing-1: var(--vw-0_25);
+  --spacing-2: var(--vw-0_5);
+  --spacing-3: var(--vw-0_75);
+  --spacing-4: var(--vw-1);
+  --spacing-5: var(--vw-1_25);
+  --spacing-6: var(--vw-1_5);
+  --spacing-7: var(--vw-1_75);
+  --spacing-8: var(--vw-2);
+
+  --spacing-x-1: var(--vw-0_25);
+  --spacing-x-2: var(--vw-0_5);
+  --spacing-x-3: var(--vw-0_75);
+  --spacing-x-4: var(--vw-1);
+  --spacing-x-5: var(--vw-1_25);
+  --spacing-x-6: var(--vw-1_5);
+
+  /* border radius */
+  --radius-none: 0;
+  --radius-sm: var(--vw-0_5);
+  --radius: var(--vw-0_75);
+  --radius-md: var(--vw-1);
+  --radius-lg: var(--vw-1_25);
+  --radius-xl: var(--vw-1_75);
+  --radius-full: 999px;
+
+  /* padding */
+  --padding-1: var(--vw-0_25);
+  --padding-2: var(--vw-0_5);
+  --padding-2.5: var(--vw-0_625);
+  --padding-3: var(--vw-0_75);
+  --padding-4: var(--vw-1);
+  --padding-5: var(--vw-1_25);
+  --padding-6: var(--vw-1_5);
+  --padding-7: var(--vw-1_75);
+  --padding-8: var(--vw-2);
+
+  --padding-x-1: var(--vw-0_25);
+  --padding-x-2: var(--vw-0_5);
+  --padding-x-3: var(--vw-0_75);
+  --padding-x-4: var(--vw-1);
+  --padding-x-5: var(--vw-1_25);
+  --padding-x-6: var(--vw-1_5);
+  --padding-x-7: var(--vw-1_75);
+  --padding-x-8: var(--vw-2);
+
+  --padding-hero-page-padding-half: var(--padding-hero-page-padding-half);
+  --padding-hero-page-padding: var(--padding-hero-page-padding);
+  --padding-hero-page-padding-1_5: var(--padding-hero-page-padding-1_5);
+  --padding-hero-page-padding-double: var(--padding-hero-page-padding-double);
+
+  /* margin */
+  --margin-1: var(--vw-0_25);
+  --margin-2: var(--vw-0_5);
+  --margin-3: var(--vw-0_75);
+  --margin-4: var(--vw-1);
+  --margin-5: var(--vw-1_25);
+  --margin-6: var(--vw-1_5);
+  --margin-7: var(--vw-1_75);
+  --margin-8: var(--vw-2);
+
+  --margin-x-1: var(--vw-0_25);
+  --margin-x-2: var(--vw-0_5);
+  --margin-x-3: var(--vw-0_75);
+  --margin-x-4: var(--vw-1);
+  --margin-x-5: var(--vw-1_25);
+  --margin-x-6: var(--vw-1_5);
+  --margin-x-7: var(--vw-1_75);
+  --margin-x-8: var(--vw-2);
+}
diff --git a/src/app/styles/utilities.css b/src/app/styles/utilities.css
new file mode 100644
index 0000000..fb92ed5
--- /dev/null
+++ b/src/app/styles/utilities.css
@@ -0,0 +1,246 @@
+@layer components {}
+
+@layer utilities {
+
+  /* Card, primary-button, and secondary-button styles are now dynamically injected via ThemeProvider */
+
+  /* .card {
+    @apply backdrop-blur-sm bg-gradient-to-br from-card/80 to-card/40 shadow-sm border border-card;
+  }
+
+  .primary-button {
+    @apply bg-gradient-to-b from-primary-cta/83 to-primary-cta;
+    box-shadow:
+      color-mix(in srgb, var(--color-background) 25%, transparent) 0px 1px 1px 0px inset,
+      color-mix(in srgb, var(--color-primary-cta) 15%, transparent) 3px 3px 3px 0px;
+  }
+
+  .secondary-button {
+    @apply backdrop-blur-sm bg-gradient-to-br from-secondary-cta/80 to-secondary-cta shadow-sm border border-secondary-cta;
+  } */
+
+  .tag-card {
+    @apply backdrop-blur-sm bg-gradient-to-br from-card/80 to-card/40 shadow-sm border border-card;
+  }
+
+  .inset-glow-border {
+    @apply relative;
+  }
+
+  .inset-glow-border::before {
+    content: "";
+    @apply absolute pointer-events-none inset-0 p-[1px];
+    border-radius: inherit;
+    background: linear-gradient(
+      0deg,
+      color-mix(in srgb, var(--color-primary-cta) 20%, var(--color-background)) 0%,
+      color-mix(in srgb, var(--color-primary-cta) 40%, var(--color-background)) 27%,
+      color-mix(in srgb, var(--color-primary-cta) 60%, var(--color-foreground)) 62%,
+      color-mix(in srgb, var(--color-primary-cta) 80%, var(--color-foreground)) 100%
+    );
+    mask:
+      linear-gradient(#000 0 0) content-box,
+      linear-gradient(#000 0 0);
+    mask-composite: exclude;
+  }
+
+  .mask-fade-x {
+    -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent calc((100vw - var(--width-content-width)) / 4), black calc((100vw - var(--width-content-width)) / 2 + 5vw), black calc(100% - (100vw - var(--width-content-width)) / 2 - 5vw), transparent calc(100% - (100vw - var(--width-content-width)) / 4), transparent 100%);
+    mask-image: linear-gradient(to right, transparent 0%, transparent calc((100vw - var(--width-content-width)) / 4), black calc((100vw - var(--width-content-width)) / 2 + 5vw), black calc(100% - (100vw - var(--width-content-width)) / 2 - 5vw), transparent calc(100% - (100vw - var(--width-content-width)) / 4), transparent 100%);
+  }
+
+  .mask-padding-x {
+    -webkit-mask-image: linear-gradient(to right, transparent 0%, black var(--width-x-padding-mask-fade), black calc(100% - var(--width-x-padding-mask-fade)), transparent 100%);
+    mask-image: linear-gradient(to right, transparent 0%, black var(--width-x-padding-mask-fade), black calc(100% - var(--width-x-padding-mask-fade)), transparent 100%);
+  }
+
+  .mask-fade-bottom {
+    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
+    mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
+  }
+
+  .mask-fade-y {
+    mask-image: linear-gradient(to bottom,
+        transparent 0%,
+        black var(--vw-1_5),
+        black calc(100% - var(--vw-1_5)),
+        transparent 100%);
+  }
+
+  .mask-fade-y {
+    mask-image: linear-gradient(to bottom,
+        transparent 0%,
+        black var(--vw-1_5),
+        black calc(100% - var(--vw-1_5)),
+        transparent 100%);
+  }
+
+  .mask-fade-y-medium {
+    mask-image: linear-gradient(to bottom,
+        transparent 0%,
+        black 20%,
+        black 80%,
+        transparent 100%);
+  }
+
+  .mask-fade-bottom-large {
+    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 75%, transparent 100%);
+    mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 75%, transparent 100%);
+  }
+
+  .mask-fade-bottom-long {
+    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 5%, transparent 100%);
+    mask-image: linear-gradient(to bottom, black 0%, black 5%, transparent 100%);
+  }
+
+  .mask-fade-top-long {
+    -webkit-mask-image: linear-gradient(to top, black 0%, black 5%, transparent 100%);
+    mask-image: linear-gradient(to top, black 0%, black 5%, transparent 100%);
+  }
+
+  .mask-fade-xy {
+    -webkit-mask-image:
+      linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%),
+      linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
+    mask-image:
+      linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%),
+      linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
+    -webkit-mask-composite: source-in;
+    mask-composite: intersect;
+  }
+
+  /* ANIMATION */
+
+  .animate-pulsate {
+    animation: pulsate 1.5s infinite;
+  }
+
+  @keyframes pulsate {
+    0% {
+      box-shadow: 0 0 0 0 var(--accent);
+      transform: scale(0.9);
+    }
+    50% {
+      transform: scale(1);
+    }
+    100% {
+      box-shadow: 0 0 20px 10px transparent;
+      transform: scale(0.9);
+    }
+  }
+
+  .animation-container {
+    animation:
+      fadeInOpacity 0.8s ease-in-out forwards,
+      fadeInTranslate 0.6s forwards;
+  }
+
+  .animation-container-fade {
+    animation: fadeInOpacity 0.8s ease-in-out forwards;
+  }
+
+  @keyframes fadeInOpacity {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes fadeInTranslate {
+    from {
+      transform: translateY(0.75vh);
+    }
+
+    to {
+      transform: translateY(0vh);
+    }
+  }
+
+  @keyframes aurora {
+    from {
+      background-position: 50% 50%, 50% 50%;
+    }
+
+    to {
+      background-position: 350% 50%, 350% 50%;
+    }
+  }
+
+  @keyframes spin-slow {
+    from {
+      transform: rotate(0deg);
+    }
+
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes spin-reverse {
+    from {
+      transform: rotate(0deg);
+    }
+
+    to {
+      transform: rotate(-360deg);
+    }
+  }
+
+  .animate-spin-slow {
+    animation: spin-slow 15s linear infinite;
+  }
+
+  .animate-spin-reverse {
+    animation: spin-reverse 10s linear infinite;
+  }
+
+  @keyframes marquee-vertical {
+    from {
+      transform: translateY(0);
+    }
+    to {
+      transform: translateY(-50%);
+    }
+  }
+
+  .animate-marquee-vertical {
+    animation: marquee-vertical 40s linear infinite;
+  }
+
+  @keyframes marquee-vertical-reverse {
+    from {
+      transform: translateY(-50%);
+    }
+    to {
+      transform: translateY(0);
+    }
+  }
+
+  .animate-marquee-vertical-reverse {
+    animation: marquee-vertical-reverse 40s linear infinite;
+  }
+
+  @keyframes orbit {
+    from {
+      transform: rotate(var(--initial-position, 0deg)) translateX(var(--translate-position, 120px)) rotate(calc(-1 * var(--initial-position, 0deg)));
+    }
+    to {
+      transform: rotate(calc(var(--initial-position, 0deg) + 360deg)) translateX(var(--translate-position, 120px)) rotate(calc(-1 * (var(--initial-position, 0deg) + 360deg)));
+    }
+  }
+
+  @keyframes map-dot-pulse {
+    0%, 100% {
+      transform: scale(0.4);
+      opacity: 0.6;
+    }
+    50% {
+      transform: scale(1.4);
+      opacity: 1;
+    }
+  }
+
+}
diff --git a/src/app/styles/variables.css b/src/app/styles/variables.css
new file mode 100644
index 0000000..5038a9b
--- /dev/null
+++ b/src/app/styles/variables.css
@@ -0,0 +1,217 @@
+:root {
+  /* Base units */
+  /* --vw is set by ThemeProvider */
+
+  /* --background: #f5f4ef;
+  --card: #dad6cd;
+  --foreground: #2a2928;
+  --primary-cta: #2a2928;
+  --secondary-cta: #ecebea;
+  --accent: #ffffff;
+  --background-accent: #ffffff; */
+
+  --background: #f5f5f5;
+  --card: #ffffff;
+  --foreground: #1c1c1c;
+  --primary-cta: #1f514c;
+  --primary-cta-text: #f5f5f5;
+  --secondary-cta: #ffffff;
+  --secondary-cta-text: #1c1c1c;
+  --accent: #159c49;
+  --background-accent: #a8e8ba;
+
+  /* text sizing - set by ThemeProvider */
+  /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
+  --text-xs: clamp(0.54rem, 0.72vw, 0.72rem);
+  --text-sm: clamp(0.615rem, 0.82vw, 0.82rem);
+  --text-base: clamp(0.69rem, 0.92vw, 0.92rem);
+  --text-lg: clamp(0.75rem, 1vw, 1rem);
+  --text-xl: clamp(0.825rem, 1.1vw, 1.1rem);
+  --text-2xl: clamp(0.975rem, 1.3vw, 1.3rem);
+  --text-3xl: clamp(1.2rem, 1.6vw, 1.6rem);
+  --text-4xl: clamp(1.5rem, 2vw, 2rem);
+  --text-5xl: clamp(2.025rem, 2.75vw, 2.75rem);
+  --text-6xl: clamp(2.475rem, 3.3vw, 3.3rem);
+  --text-7xl: clamp(3rem, 4vw, 4rem);
+  --text-8xl: clamp(3.5rem, 4.5vw, 4.5rem);
+  --text-9xl: clamp(5.25rem, 7vw, 7rem); */
+
+  /* Base spacing units */
+  --vw-0_25: calc(var(--vw) * 0.25);
+  --vw-0_5: calc(var(--vw) * 0.5);
+  --vw-0_625: calc(var(--vw) * 0.625);
+  --vw-0_75: calc(var(--vw) * 0.75);
+  --vw-1: calc(var(--vw) * 1);
+  --vw-1_25: calc(var(--vw) * 1.25);
+  --vw-1_5: calc(var(--vw) * 1.5);
+  --vw-1_75: calc(var(--vw) * 1.75);
+  --vw-2: calc(var(--vw) * 2);
+  --vw-2_25: calc(var(--vw) * 2.25);
+  --vw-2_5: calc(var(--vw) * 2.5);
+  --vw-2_75: calc(var(--vw) * 2.75);
+  --vw-3: calc(var(--vw) * 3);
+
+  /* width */
+  --width-5: clamp(4rem, 5vw, 6rem);
+  --width-7_5: clamp(5.625rem, 7.5vw, 7.5rem);
+  --width-10: clamp(7.5rem, 10vw, 10rem);
+  --width-12_5: clamp(9.375rem, 12.5vw, 12.5rem);
+  --width-15: clamp(11.25rem, 15vw, 15rem);
+  --width-17: clamp(12.75rem, 17vw, 17rem);
+  --width-17_5: clamp(13.125rem, 17.5vw, 17.5rem);
+  --width-20: clamp(15rem, 20vw, 20rem);
+  --width-21: clamp(15.75rem, 21vw, 21rem);
+  --width-22_5: clamp(16.875rem, 22.5vw, 22.5rem);
+  --width-25: clamp(18.75rem, 25vw, 25rem);
+  --width-26: clamp(19.5rem, 26vw, 26rem);
+  --width-27_5: clamp(20.625rem, 27.5vw, 27.5rem);
+  --width-30: clamp(22.5rem, 30vw, 30rem);
+  --width-32_5: clamp(24.375rem, 32.5vw, 32.5rem);
+  --width-35: clamp(26.25rem, 35vw, 35rem);
+  --width-37_5: clamp(28.125rem, 37.5vw, 37.5rem);
+  --width-40: clamp(30rem, 40vw, 40rem);
+  --width-42_5: clamp(31.875rem, 42.5vw, 42.5rem);
+  --width-45: clamp(33.75rem, 45vw, 45rem);
+  --width-47_5: clamp(35.625rem, 47.5vw, 47.5rem);
+  --width-50: clamp(37.5rem, 50vw, 50rem);
+  --width-52_5: clamp(39.375rem, 52.5vw, 52.5rem);
+  --width-55: clamp(41.25rem, 55vw, 55rem);
+  --width-57_5: clamp(43.125rem, 57.5vw, 57.5rem);
+  --width-60: clamp(45rem, 60vw, 60rem);
+  --width-62_5: clamp(46.875rem, 62.5vw, 62.5rem);
+  --width-65: clamp(48.75rem, 65vw, 65rem);
+  --width-67_5: clamp(50.625rem, 67.5vw, 67.5rem);
+  --width-70: clamp(52.5rem, 70vw, 70rem);
+  --width-72_5: clamp(54.375rem, 72.5vw, 72.5rem);
+  --width-75: clamp(56.25rem, 75vw, 75rem);
+  --width-77_5: clamp(58.125rem, 77.5vw, 77.5rem);
+  --width-80: clamp(60rem, 80vw, 80rem);
+  --width-82_5: clamp(61.875rem, 82.5vw, 82.5rem);
+  --width-85: clamp(63.75rem, 85vw, 85rem);
+  --width-87_5: clamp(65.625rem, 87.5vw, 87.5rem);
+  --width-90: clamp(67.5rem, 90vw, 90rem);
+  --width-92_5: clamp(69.375rem, 92.5vw, 92.5rem);
+  --width-95: clamp(71.25rem, 95vw, 95rem);
+  --width-97_5: clamp(73.125rem, 97.5vw, 97.5rem);
+  --width-100: clamp(75rem, 100vw, 100rem);
+  /* --width-content-width and --width-content-width-expanded are set by ThemeProvider */
+  --width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
+  --width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
+  --width-carousel-padding-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
+  --width-carousel-padding-controls-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px);
+  --width-carousel-item-3: calc(var(--width-content-width) / 3 - var(--vw-1_5) / 3 * 2);
+  --width-carousel-item-4: calc(var(--width-content-width) / 4 - var(--vw-1_5) / 4 * 3);
+  --width-x-padding-mask-fade: clamp(1.5rem, 4vw, 4rem);
+
+  --height-4: 1rem;
+  --height-5: 1.25rem;
+  --height-6: 1.5rem;
+  --height-7: 1.75rem;
+  --height-8: 2rem;
+  --height-9: 2.25rem;
+  --height-10: 2.5rem;
+  --height-11: 2.75rem;
+  --height-12: 3rem;
+  --height-30: 7.5rem;
+  --height-90: 22.5rem;
+  --height-100: 25rem;
+  --height-110: 27.5rem;
+  --height-120: 30rem;
+  --height-130: 32.5rem;
+  --height-140: 35rem;
+  --height-150: 37.5rem;
+
+  /* hero page padding */
+  --padding-hero-page-padding-half: calc((var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)) / 2);
+  --padding-hero-page-padding: calc(var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10));
+  --padding-hero-page-padding-1_5: calc(1.5 * (var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)));
+  --padding-hero-page-padding-double: calc(2 * (var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)));
+}
+
+@media (max-width: 767px) {
+  :root {
+    /* --vw and text sizing are set by ThemeProvider */
+    /* --vw: 3vw;
+
+    --text-2xs: 2.5vw;
+    --text-xs: 2.75vw;
+    --text-sm: 3vw;
+    --text-base: 3.25vw;
+    --text-lg: 3.5vw;
+    --text-xl: 4.25vw;
+    --text-2xl: 5vw;
+    --text-3xl: 6vw;
+    --text-4xl: 7vw;
+    --text-5xl: 7.5vw;
+    --text-6xl: 8.5vw;
+    --text-7xl: 10vw;
+    --text-8xl: 12vw;
+    --text-9xl: 14vw; */
+
+    --width-5: 5vw;
+    --width-7_5: 7.5vw;
+    --width-10: 10vw;
+    --width-12_5: 12.5vw;
+    --width-15: 15vw;
+    --width-17_5: 17.5vw;
+    --width-20: 20vw;
+    --width-22_5: 22.5vw;
+    --width-25: 25vw;
+    --width-27_5: 27.5vw;
+    --width-30: 30vw;
+    --width-32_5: 32.5vw;
+    --width-35: 35vw;
+    --width-37_5: 37.5vw;
+    --width-40: 40vw;
+    --width-42_5: 42.5vw;
+    --width-45: 45vw;
+    --width-47_5: 47.5vw;
+    --width-50: 50vw;
+    --width-52_5: 52.5vw;
+    --width-55: 55vw;
+    --width-57_5: 57.5vw;
+    --width-60: 60vw;
+    --width-62_5: 62.5vw;
+    --width-65: 65vw;
+    --width-67_5: 67.5vw;
+    --width-70: 70vw;
+    --width-72_5: 72.5vw;
+    --width-75: 75vw;
+    --width-77_5: 77.5vw;
+    --width-80: 80vw;
+    --width-82_5: 82.5vw;
+    --width-85: 85vw;
+    --width-87_5: 87.5vw;
+    --width-90: 90vw;
+    --width-92_5: 92.5vw;
+    --width-95: 95vw;
+    --width-97_5: 97.5vw;
+    --width-100: 100vw;
+    /* --width-content-width and --width-content-width-expanded are set by ThemeProvider */
+    --width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
+    --width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
+    --width-carousel-padding-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
+    --width-carousel-padding-controls-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px);
+    --width-carousel-item-3: var(--width-content-width);
+    --width-carousel-item-4: var(--width-content-width);
+    --width-x-padding-mask-fade: 10vw;
+
+    --height-4: 3.5vw;
+    --height-5: 4.5vw;
+    --height-6: 5.5vw;
+    --height-7: 6.5vw;
+    --height-8: 7.5vw;
+    --height-9: 8.5vw;
+    --height-10: 9vw;
+    --height-11: 10vw;
+    --height-12: 11vw;
+    --height-30: 25vw;
+    --height-90: 81vw;
+    --height-100: 90vw;
+    --height-110: 99vw;
+    --height-120: 108vw;
+    --height-130: 117vw;
+    --height-140: 126vw;
+    --height-150: 135vw;
+  }
+}
diff --git a/src/components/Accordion.tsx b/src/components/Accordion.tsx
new file mode 100644
index 0000000..71460d7
--- /dev/null
+++ b/src/components/Accordion.tsx
@@ -0,0 +1,145 @@
+"use client";
+
+import { useEffect, useRef, useState, useCallback } from "react";
+import { Plus } from "lucide-react";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+
+interface AccordionProps {
+  index: number;
+  isActive?: boolean;
+  onToggle?: (index: number) => void;
+  title: string;
+  content: string;
+  animationType?: "smooth" | "instant";
+  showCard?: boolean;
+  useInvertedBackground?: boolean;
+  className?: string;
+  titleClassName?: string;
+  iconContainerClassName?: string;
+  iconClassName?: string;
+  contentClassName?: string;
+}
+
+const Accordion = ({
+  index,
+  isActive: controlledIsActive,
+  onToggle,
+  title,
+  content,
+  animationType = "smooth",
+  showCard = true,
+  useInvertedBackground,
+  className = "",
+  titleClassName = "",
+  iconContainerClassName = "",
+  iconClassName = "",
+  contentClassName = "",
+}: AccordionProps) => {
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [height, setHeight] = useState("0px");
+  const [internalIsActive, setInternalIsActive] = useState(false);
+
+  const isActive = controlledIsActive !== undefined ? controlledIsActive : internalIsActive;
+
+  const theme = useTheme();
+  const shouldUseLightText = showCard
+    ? shouldUseInvertedText(useInvertedBackground, theme.cardStyle)
+    : useInvertedBackground;
+
+  useEffect(() => {
+    if (animationType === "smooth") {
+      setHeight(isActive ? `${contentRef.current?.scrollHeight}px` : "0px");
+    }
+  }, [isActive, animationType]);
+
+  const handleClick = useCallback(() => {
+    if (controlledIsActive === undefined) {
+      setInternalIsActive(!internalIsActive);
+    }
+    if (onToggle) {
+      onToggle(index);
+    }
+  }, [controlledIsActive, internalIsActive, onToggle, index]);
+
+  const headerContent = (
+    <div className="flex flex-row items-center justify-between w-full">
+      <h2
+        className={cls(
+          "text-base md:text-xl font-medium",
+          shouldUseLightText ? "text-background" : "text-foreground",
+          animationType === "instant" && "text-left",
+          titleClassName
+        )}
+      >
+        {title}
+      </h2>
+      <div
+        className={cls(
+          "h-8 aspect-square flex items-center justify-center rounded-theme primary-button transition-all duration-300",
+          iconContainerClassName
+        )}
+      >
+        <Plus
+          className={cls(
+            "w-4/10 aspect-square text-primary-cta-text",
+            animationType === "smooth" ? "transition-transform duration-500" : "transition-transform duration-300",
+            isActive && "rotate-45",
+            iconClassName
+          )}
+        />
+      </div>
+    </div>
+  );
+
+  const contentElement = (
+    <div
+      className={cls(
+        "text-base",
+        shouldUseLightText ? "text-background" : "text-foreground",
+        animationType === "smooth" && "pt-2",
+        contentClassName
+      )}
+      dangerouslySetInnerHTML={{ __html: content }}
+    />
+  );
+
+  if (animationType === "instant") {
+    return (
+      <div className={cls(showCard && "card rounded-theme", className)}>
+        <button
+          className={cls("cursor-pointer flex flex-row items-center justify-between w-full transition-all duration-300 group", showCard && "p-4")}
+          onClick={handleClick}
+          aria-expanded={isActive}
+        >
+          {headerContent}
+        </button>
+        {isActive && <div className={cls(showCard && "px-4 pb-4")}>{contentElement}</div>}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cls(
+        showCard ? "card p-4 rounded-theme-capped" : "",
+        "cursor-pointer flex flex-col items-center justify-between transition-all duration-500  group",
+        className
+      )}
+      onClick={handleClick}
+      aria-expanded={isActive}
+    >
+      {headerContent}
+      <div
+        ref={contentRef}
+        style={{ maxHeight: height }}
+        className="overflow-hidden transition-[max-height] duration-500 w-full flex flex-col"
+      >
+        {contentElement}
+      </div>
+    </div>
+  );
+};
+
+
+export default Accordion;
diff --git a/src/components/ServiceWrapper.tsx b/src/components/ServiceWrapper.tsx
new file mode 100644
index 0000000..5be7e4e
--- /dev/null
+++ b/src/components/ServiceWrapper.tsx
@@ -0,0 +1,22 @@
+'use client';
+
+import Script from 'next/script';
+
+export function ServiceWrapper({ children }: { children: React.ReactNode }) {
+    const websiteId = process.env.NEXT_PUBLIC_WEBSITE_ANALYTICS_ID;
+    
+    return (
+        <>
+            {websiteId && (
+                <Script
+                    async
+                    defer
+                    data-website-id={websiteId}
+                    src="https://analytics.webild.io/script.js"
+                    strategy="afterInteractive"
+                />
+            )}
+            {children}
+        </>
+    );
+}
diff --git a/src/components/Textbox.tsx b/src/components/Textbox.tsx
new file mode 100644
index 0000000..d50b3e3
--- /dev/null
+++ b/src/components/Textbox.tsx
@@ -0,0 +1,311 @@
+"use client";
+
+import { useMemo } from "react";
+import Image from "next/image";
+import TextAnimation from "./text/TextAnimation";
+import Button from "./button/Button";
+import Tag from "./shared/Tag";
+import AvatarGroup from "./shared/AvatarGroup";
+import { cls } from "@/lib/utils";
+import { getButtonProps } from "@/lib/buttonUtils";
+import { LucideIcon } from "lucide-react";
+import type { AnimationType } from "./text/types";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { ButtonConfig, ButtonAnimationType } from "@/types/button";
+import type { Avatar } from "./shared/AvatarGroup";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+import { useButtonAnimation } from "./hooks/useButtonAnimation";
+
+type TitleSegment =
+  | { type: "text"; content: string }
+  | { type: "image"; src: string; alt?: string };
+
+interface TextBoxProps {
+  title: string;
+  titleSegments?: TitleSegment[];
+  description: string;
+  type?: AnimationType;
+  textboxLayout?: TextboxLayout;
+  useInvertedBackground?: InvertedBackground;
+  className?: string;
+  titleClassName?: string;
+  titleImageWrapperClassName?: string;
+  titleImageClassName?: string;
+  descriptionClassName?: string;
+  duration?: number;
+  start?: string;
+  end?: string;
+  gradientColors?: {
+    from: string;
+    to: string;
+  };
+  children?: React.ReactNode;
+  center?: boolean;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  tagClassName?: string;
+  tagAnimation?: ButtonAnimationType;
+  buttons?: ButtonConfig[];
+  buttonAnimation?: ButtonAnimationType;
+  buttonContainerClassName?: string;
+  buttonClassName?: string;
+  buttonTextClassName?: string;
+  avatars?: Avatar[];
+  avatarText?: string;
+  avatarGroupClassName?: string;
+  avatarsAbove?: boolean;
+}
+
+const TextBox = ({
+  title,
+  titleSegments,
+  description,
+  type,
+  textboxLayout = "default",
+  useInvertedBackground,
+  className = "",
+  titleClassName = "",
+  titleImageWrapperClassName = "",
+  titleImageClassName = "",
+  descriptionClassName = "",
+  duration = 1,
+  start = "top 80%",
+  end = "top 20%",
+  gradientColors,
+  children,
+  center = false,
+  tag,
+  tagIcon: TagIcon,
+  tagClassName = "",
+  tagAnimation = "none",
+  buttons,
+  buttonAnimation = "none",
+  buttonContainerClassName = "",
+  buttonClassName = "",
+  buttonTextClassName = "",
+  avatars,
+  avatarText,
+  avatarGroupClassName = "",
+  avatarsAbove = false,
+}: TextBoxProps) => {
+  const theme = useTheme();
+  const { containerRef: tagContainerRef } = useButtonAnimation({
+    animationType: tagAnimation
+  });
+  const { containerRef: buttonContainerRef } = useButtonAnimation({
+    animationType: buttonAnimation
+  });
+
+  // Shared tag component
+  const tagElement = tag ? (
+    <div ref={tagContainerRef}>
+      <Tag
+        text={tag}
+        icon={TagIcon}
+        useInvertedBackground={useInvertedBackground}
+        className={cls(textboxLayout === "default" && "mb-3", tagClassName)}
+      />
+    </div>
+  ) : null;
+
+  // Shared title component
+  const titleElement = useMemo(() => (
+    <TextAnimation
+      type={type || theme.defaultTextAnimation}
+      text={title}
+      variant="trigger"
+      as="h2"
+      className={cls(
+        textboxLayout === "split" || textboxLayout === "split-actions" || textboxLayout === "split-description" ? "text-7xl font-medium text-balance" : "text-6xl font-medium",
+        center && textboxLayout === "default" && "text-center",
+        useInvertedBackground && "text-background",
+        titleClassName
+      )}
+      duration={duration}
+      start={start}
+      end={end}
+      gradientColors={gradientColors}
+    />
+  ), [type, theme.defaultTextAnimation, title, textboxLayout, center, useInvertedBackground, titleClassName, duration, start, end, gradientColors]);
+
+  // Inline image title component (used when textboxLayout === "inline-image")
+  const inlineImageTitleElement = useMemo(() => titleSegments && titleSegments.length > 0 ? (
+    <h2
+      className={cls(
+        "text-4xl md:text-5xl font-medium text-center leading-[1.15] text-balance",
+        useInvertedBackground && "text-background",
+        titleClassName
+      )}
+    >
+      {titleSegments.map((segment, index) => {
+        const imageIndex = titleSegments
+          .slice(0, index + 1)
+          .filter(s => s.type === "image").length - 1;
+
+        const element = segment.type === "text" ? (
+          <span key={index}>{segment.content}</span>
+        ) : (
+          <span
+            key={index}
+            className={cls(
+              "inline-block relative primary-button -mt-[0.2em] h-[1.1em] w-auto aspect-square align-middle mx-1 p-0.5 rounded-theme",
+              imageIndex % 2 === 0 ? "-rotate-12" : "rotate-12",
+              titleImageWrapperClassName
+            )}
+          >
+            <div className="relative w-full h-full">
+              <Image
+                src={segment.src}
+                alt={segment.alt || ""}
+                width={24}
+                height={24}
+                className={cls(
+                  "absolute inset-0 m-auto h-full w-full rounded-theme",
+                  titleImageClassName
+                )}
+                unoptimized={segment.src.startsWith("http") || segment.src.startsWith("//")}
+                aria-hidden={!segment.alt || segment.alt === ""}
+              />
+            </div>
+          </span>
+        );
+
+        return (
+          <span key={index}>
+            {index > 0 && " "}
+            {element}
+          </span>
+        );
+      })}
+    </h2>
+  ) : null, [titleSegments, useInvertedBackground, titleClassName, titleImageWrapperClassName, titleImageClassName]);
+
+  // Shared description component
+  const descriptionElement = useMemo(() => (
+    <TextAnimation
+      type={type || theme.defaultTextAnimation}
+      text={description}
+      variant="words-trigger"
+      as="p"
+      className={cls(
+        "text-lg leading-[1.2]",
+        center && textboxLayout === "default" && "text-center",
+        (textboxLayout === "split" || textboxLayout === "split-description") && "text-balance",
+        useInvertedBackground && "text-background",
+        descriptionClassName
+      )}
+      duration={duration}
+      start={start}
+      end={end}
+      gradientColors={gradientColors}
+    />
+  ), [type, theme.defaultTextAnimation, description, center, textboxLayout, useInvertedBackground, descriptionClassName, duration, start, end, gradientColors]);
+
+  // Shared avatars component
+  const avatarsElement = useMemo(() => avatars && avatars.length > 0 ? (
+    <AvatarGroup
+      avatars={avatars}
+      text={avatarText}
+      className={cls(
+        textboxLayout === "default" && !avatarsAbove && "mt-3",
+        textboxLayout === "default" && avatarsAbove && "mb-3",
+        center && textboxLayout === "default" && "justify-center",
+        avatarGroupClassName
+      )}
+    />
+  ) : null, [avatars, avatarText, textboxLayout, center, avatarGroupClassName, avatarsAbove]);
+
+  // Shared buttons/children component
+  const actionsElement = buttons && buttons.length > 0 ? (
+    <div
+      ref={buttonContainerRef}
+      className={cls(
+        "flex flex-wrap gap-4 max-md:justify-center",
+        textboxLayout === "default" && "w-full mt-3",
+        (textboxLayout === "split" || textboxLayout === "split-actions") && "w-fit",
+        center && textboxLayout === "default" && "justify-center",
+        buttonContainerClassName
+      )}
+    >
+      {/* Limit to 2 buttons for optimal layout */}
+      {buttons.slice(0, 2).map((button, index) => (
+        <Button key={`${button.text}-${index}`} {...getButtonProps(button, index, theme.defaultButtonVariant, buttonClassName, buttonTextClassName)} />
+      ))}
+    </div>
+  ) : (
+    children
+  );
+
+  // Split layout
+  if (textboxLayout === "split") {
+    return (
+      <div className={cls("flex flex-col md:flex-row gap-3 md:gap-15 md:items-end", className)}>
+        <div className="w-full md:w-6/10 flex flex-col gap-3">
+          {tagElement}
+          {titleElement}
+          {descriptionElement}
+        </div>
+        <div className="w-full md:w-4/10 flex flex-col gap-3 md:items-end">
+          {actionsElement}
+        </div>
+      </div>
+    );
+  }
+
+  // Split actions layout - tag and buttons required, no description
+  if (textboxLayout === "split-actions") {
+    return (
+      <div className={cls("flex flex-col md:flex-row gap-3 md:gap-15 md:items-end", className)}>
+        <div className="w-full md:w-6/10 flex flex-col gap-3">
+          {tagElement}
+          {titleElement}
+        </div>
+        <div className="w-full md:w-4/10 flex flex-col gap-3 md:items-end">
+          {actionsElement}
+        </div>
+      </div>
+    );
+  }
+
+  // Split description layout - tag + title left, description only right (no buttons)
+  if (textboxLayout === "split-description") {
+    return (
+      <div className={cls("flex flex-col md:flex-row gap-3 md:gap-15 md:items-end", className)}>
+        <div className="w-full md:w-6/10 flex flex-col gap-3">
+          {tagElement}
+          {titleElement}
+        </div>
+        <div className="w-full md:w-4/10 flex flex-col gap-3 md:items-end">
+          {descriptionElement}
+        </div>
+      </div>
+    );
+  }
+
+  // Inline image layout - centered heading with inline images and optional buttons
+  if (textboxLayout === "inline-image") {
+    return (
+      <div className={cls("flex flex-col gap-3 md:gap-1", center && "items-center text-center", className)}>
+        {tagElement}
+        {inlineImageTitleElement || titleElement}
+        {descriptionElement}
+        {actionsElement}
+      </div>
+    );
+  }
+
+  // Default layout
+  return (
+    <div className={cls("flex flex-col gap-3 md:gap-1", center && "items-center text-center", className)}>
+      {avatarsAbove && avatarsElement}
+      {tagElement}
+      {titleElement}
+      {descriptionElement}
+      {actionsElement}
+      {!avatarsAbove && avatarsElement}
+    </div>
+  );
+};
+
+
+export default TextBox;
\ No newline at end of file
diff --git a/src/components/background/AnimatedAuroraBackground.tsx b/src/components/background/AnimatedAuroraBackground.tsx
new file mode 100644
index 0000000..323fe6d
--- /dev/null
+++ b/src/components/background/AnimatedAuroraBackground.tsx
@@ -0,0 +1,42 @@
+"use client";
+import { cls } from "@/lib/utils";
+
+interface AnimatedAuroraBackgroundProps {
+  className?: string;
+  showRadialGradient?: boolean;
+  /**
+   * Inverts the aurora colors for better visibility.
+   * Use `true` for light backgrounds (makes aurora darker/inverted)
+   * Use `false` for dark backgrounds (keeps aurora colors vibrant)
+   */
+  invertColors: boolean;
+}
+
+const AnimatedAuroraBackground = ({
+  className,
+  showRadialGradient = true,
+  invertColors,
+}: AnimatedAuroraBackgroundProps) => {
+  return (
+    <div
+      className={cls(
+        "fixed inset-0 -z-10 bg-background",
+        className
+      )}
+      aria-hidden="true"
+    >
+      <div className="absolute inset-0 overflow-hidden opacity-30">
+        <div
+          className={cls(
+            "[--base-gradient:repeating-linear-gradient(100deg,var(--background)_0%,var(--background)_7%,transparent_10%,transparent_12%,var(--background)_16%)] [--aurora:repeating-linear-gradient(100deg,var(--color-primary-cta)_10%,var(--color-accent)_15%,var(--color-secondary-cta)_20%,var(--color-accent)_25%,var(--color-primary-cta)_30%)] [background-image:var(--base-gradient),var(--aurora)] [background-size:300%,_200%] [background-position:50%_50%,50%_50%] filter blur-[10px] after:content-[''] after:absolute after:inset-0 after:[background-image:var(--base-gradient),var(--aurora)] after:[background-size:200%,_100%] after:[animation:aurora_60s_linear_infinite] after:[background-attachment:fixed] after:mix-blend-difference pointer-events-none absolute -inset-[10px] opacity-30 will-change-transform",
+            invertColors && "invert",
+            showRadialGradient && "[mask-image:radial-gradient(ellipse_at_100%_0%,black_10%,var(--transparent)_70%)]"
+          )}
+        ></div>
+      </div>
+    </div>
+  );
+};
+
+
+export default AnimatedAuroraBackground;
diff --git a/src/components/background/AnimatedGridBackground.tsx b/src/components/background/AnimatedGridBackground.tsx
new file mode 100644
index 0000000..5288056
--- /dev/null
+++ b/src/components/background/AnimatedGridBackground.tsx
@@ -0,0 +1,111 @@
+"use client";
+
+import { useEffect, useId, useRef, useState } from "react";
+import { motion } from "framer-motion";
+import { cls } from "@/lib/utils";
+
+interface AnimatedGridBackgroundProps {
+  className?: string;
+  squareSize?: number;
+  numSquares?: number;
+  maxOpacity?: number;
+}
+
+const AnimatedGridBackground = ({
+  className = "",
+  squareSize = 100,
+  numSquares = 50,
+  maxOpacity = 0.15,
+}: AnimatedGridBackgroundProps) => {
+  const id = useId();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
+  const [squares, setSquares] = useState<Array<{ id: number; pos: [number, number] }>>([]);
+
+  useEffect(() => {
+    if (containerRef.current) {
+      const { width, height } = containerRef.current.getBoundingClientRect();
+      setDimensions({ width, height });
+    }
+  }, []);
+
+  useEffect(() => {
+    if (dimensions.width && dimensions.height) {
+      const cols = Math.ceil(dimensions.width / squareSize);
+      const rows = Math.ceil(dimensions.height / squareSize);
+
+      const newSquares = Array.from({ length: numSquares }, (_, i) => ({
+        id: i,
+        pos: [
+          Math.floor(Math.random() * cols),
+          Math.floor(Math.random() * rows),
+        ] as [number, number],
+      }));
+
+      setSquares(newSquares);
+    }
+  }, [dimensions, squareSize, numSquares]);
+
+  return (
+    <div
+      ref={containerRef}
+      className={cls(
+        "absolute inset-0 z-0 pointer-events-none select-none overflow-hidden inset-x-0 inset-y-[-30%] h-[200%] skew-y-12",
+        className
+      )}
+      style={{
+        mask: 'radial-gradient(ellipse 100% 100% at 50% 0%, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 70%)',
+        WebkitMask: 'radial-gradient(ellipse 100% 100% at 50% 0%, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 70%)',
+      } as React.CSSProperties}
+      aria-hidden="true"
+    >
+      <svg
+        width="100%"
+        height="100%"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <defs>
+          <pattern
+            id={`grid-${id}`}
+            width={squareSize}
+            height={squareSize}
+            patternUnits="userSpaceOnUse"
+          >
+            <path
+              d={`M ${squareSize} 0 L 0 0 0 ${squareSize}`}
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="1"
+              className="text-background-accent/50"
+            />
+          </pattern>
+        </defs>
+        <rect width="100%" height="100%" fill={`url(#grid-${id})`} />
+        {squares.map(({ id, pos: [x, y] }) => (
+          <motion.rect
+            key={id}
+            initial={{ opacity: 0 }}
+            animate={{
+              opacity: [0, maxOpacity, 0],
+            }}
+            transition={{
+              duration: Math.random() * 2 + 2,
+              repeat: Infinity,
+              delay: Math.random() * 2,
+              ease: "easeInOut",
+            }}
+            x={x * squareSize}
+            y={y * squareSize}
+            width={squareSize}
+            height={squareSize}
+            fill="var(--color-background-accent)"
+            strokeWidth="0"
+          />
+        ))}
+      </svg>
+    </div>
+  );
+};
+
+
+export default AnimatedGridBackground;
diff --git a/src/components/background/AuroraBackground.tsx b/src/components/background/AuroraBackground.tsx
new file mode 100644
index 0000000..e397a2b
--- /dev/null
+++ b/src/components/background/AuroraBackground.tsx
@@ -0,0 +1,30 @@
+"use client";
+
+import { cls } from "@/lib/utils";
+
+interface AuroraBackgroundProps {
+  className?: string;
+}
+
+const AuroraBackground = ({
+  className = "",
+}: AuroraBackgroundProps) => {
+  return (
+    <div className={cls("fixed inset-0 z-0 w-full h-full bg-background", className)}>
+      <div className="absolute top-0 left-0 w-full h-full z-10 backdrop-blur-3xl" ></div>
+      {/* top center */}
+      <div className="absolute top-0 left-1/2 -translate-y-1/2 -translate-x-[120%] w-[9vw] h-[110vh] bg-background-accent/15   -rotate-[52.5deg] rounded-[100%]" />
+      {/* top right */}
+      <div className="absolute top-[-20vh] right-[2.5vw] -translate-x-[0%] w-[12.5vw] h-[100vh] bg-background-accent/15   -rotate-[60deg] rounded-[100%]" />
+      {/* center left */}
+      <div className="absolute top-[-20vh] left-[2vw] -translate-x-[0%] w-[15vw] h-[150vh] bg-background-accent/20   -rotate-[45deg] rounded-[100%]" />
+      {/* top left */}
+      <div className="absolute top-[-30vh] left-0 -translate-x-[0%] w-[10vw] h-[70vh] bg-background-accent/15   -rotate-[45deg] rounded-[100%]" />
+      {/* bottom center */}
+      <div className="absolute bottom-[-40vh] left-0 -translate-x-[0%] w-[120vw] h-[50vh] bg-background-accent/10   -rotate-[20deg] rounded-[100%]" />
+    </div>
+  );
+};
+
+
+export default AuroraBackground;
diff --git a/src/components/background/BlurBottomBackground.tsx b/src/components/background/BlurBottomBackground.tsx
new file mode 100644
index 0000000..a6490f8
--- /dev/null
+++ b/src/components/background/BlurBottomBackground.tsx
@@ -0,0 +1,57 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { cls } from "@/lib/utils";
+
+const MASK_GRADIENT = "linear-gradient(to bottom, transparent, black 60%)";
+const BOTTOM_THRESHOLD = 50;
+const TOP_THRESHOLD = 50;
+
+interface BlurBottomBackgroundProps {
+  className?: string;
+}
+
+const BlurBottomBackground = ({
+  className = ""
+}: BlurBottomBackgroundProps) => {
+  const [isAtBottom, setIsAtBottom] = useState(false);
+  const [isAtTop, setIsAtTop] = useState(true);
+
+  const handleScroll = useCallback(() => {
+    const scrollTop = window.scrollY || document.documentElement.scrollTop;
+    const windowHeight = window.innerHeight;
+    const documentHeight = document.documentElement.scrollHeight;
+
+    const distanceFromBottom = documentHeight - (scrollTop + windowHeight);
+
+    setIsAtTop(scrollTop <= TOP_THRESHOLD);
+    setIsAtBottom(distanceFromBottom <= BOTTOM_THRESHOLD);
+  }, []);
+
+  useEffect(() => {
+    handleScroll();
+
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    window.addEventListener("resize", handleScroll, { passive: true });
+
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+      window.removeEventListener("resize", handleScroll);
+    };
+  }, [handleScroll]);
+
+  return (
+    <div
+      className={cls(
+        "fixed pointer-events-none backdrop-blur-xl w-full h-30 left-0 bottom-0 z-[500] transition-opacity duration-500 ease-out",
+        isAtTop || isAtBottom ? "opacity-0" : "opacity-100",
+        className
+      )}
+      style={{ maskImage: MASK_GRADIENT }}
+      aria-hidden="true"
+    />
+  );
+};
+
+
+export default BlurBottomBackground;
diff --git a/src/components/background/CanvasRevealBackground.tsx b/src/components/background/CanvasRevealBackground.tsx
new file mode 100644
index 0000000..fcaa307
--- /dev/null
+++ b/src/components/background/CanvasRevealBackground.tsx
@@ -0,0 +1,73 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { cls } from '@/lib/utils';
+import CanvasRevealEffect from './CanvasRevealEffect';
+
+interface CanvasRevealBackgroundProps {
+  className?: string;
+  animationSpeed?: number;
+  dotSize?: number;
+  height?: string;
+}
+
+const hexToRgb = (hex: string): number[] => {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result
+    ? [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)]
+    : [0, 255, 255];
+};
+
+const CanvasRevealBackground = ({
+  className = "",
+  animationSpeed = 5,
+  dotSize = 3,
+  height = "30%",
+}: CanvasRevealBackgroundProps) => {
+  const [colors, setColors] = useState<number[][]>([[0, 255, 255]]);
+
+  useEffect(() => {
+    const primaryCta = getComputedStyle(document.documentElement)
+      .getPropertyValue('--color-background-accent')
+      .trim();
+
+    if (primaryCta) {
+      setColors([hexToRgb(primaryCta)]);
+    }
+  }, []);
+
+  return (
+    <div
+      className={cls("absolute inset-0 z-0 overflow-hidden pointer-events-none select-none", className)}
+      aria-hidden="true"
+    >
+      <div
+        className="absolute inset-x-0 top-0 w-full"
+        style={{
+          height: height,
+          mask: `
+            radial-gradient(ellipse 60% 120% at 50% 0%, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 80%),
+            linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgb(0, 0, 0) 25%, rgb(0, 0, 0) 75%, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0) 100%)
+          `,
+          maskComposite: 'intersect',
+          WebkitMask: `
+            radial-gradient(ellipse 60% 120% at 50% 0%, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 80%),
+            linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgb(0, 0, 0) 25%, rgb(0, 0, 0) 75%, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0) 100%)
+          `,
+          WebkitMaskComposite: 'source-in',
+        }}
+      >
+        <CanvasRevealEffect
+          animationSpeed={animationSpeed}
+          colors={colors}
+          dotSize={dotSize}
+          showGradient={false}
+          containerClassName="bg-transparent"
+        />
+      </div>
+    </div>
+  );
+};
+
+
+export default CanvasRevealBackground;
diff --git a/src/components/background/CanvasRevealEffect.tsx b/src/components/background/CanvasRevealEffect.tsx
new file mode 100644
index 0000000..0f07ac8
--- /dev/null
+++ b/src/components/background/CanvasRevealEffect.tsx
@@ -0,0 +1,303 @@
+'use client';
+
+import { cls } from '@/lib/utils';
+import { Canvas, useFrame, useThree } from '@react-three/fiber';
+import { useMemo, useRef, useCallback } from 'react';
+import * as THREE from 'three';
+
+interface CanvasRevealEffectProps {
+  animationSpeed?: number;
+  opacities?: number[];
+  colors?: number[][];
+  containerClassName?: string;
+  dotSize?: number;
+  showGradient?: boolean;
+}
+
+const CanvasRevealEffect = ({
+  animationSpeed = 0.4,
+  opacities = [0.2, 0.2, 0.2, 0.4, 0.4, 0.4, 0.7, 0.6, 0.6, 0.9],
+  colors = [[0, 255, 255]],
+  containerClassName = "",
+  dotSize = 3,
+  showGradient = true,
+}: CanvasRevealEffectProps) => {
+  return (
+    <div className={cls('h-full relative bg-white w-full', containerClassName)}>
+      <div className="h-full w-full">
+        <DotMatrix
+          colors={colors}
+          dotSize={dotSize}
+          opacities={opacities}
+          shader={`
+              float animation_speed_factor = ${animationSpeed.toFixed(1)};
+              float intro_offset = distance(u_resolution / 2.0 / u_total_size, st2) * 0.01 + (random(st2) * 0.15);
+              opacity *= step(intro_offset, u_time * animation_speed_factor);
+              opacity *= clamp((1.0 - step(intro_offset + 0.1, u_time * animation_speed_factor)) * 1.25, 1.0, 1.25);
+            `}
+          center={['x', 'y']}
+        />
+      </div>
+      {showGradient && (
+        <div className="absolute inset-0 bg-gradient-to-t from-gray-950 to-[84%]" />
+      )}
+    </div>
+  );
+};
+
+interface DotMatrixProps {
+  colors?: number[][];
+  opacities?: number[];
+  totalSize?: number;
+  dotSize?: number;
+  shader?: string;
+  center?: ('x' | 'y')[];
+}
+
+const DotMatrix = ({
+  colors = [[0, 0, 0]],
+  opacities = [0.04, 0.04, 0.04, 0.04, 0.04, 0.08, 0.08, 0.08, 0.08, 0.14],
+  totalSize = 4,
+  dotSize = 2,
+  shader = '',
+  center = ['x', 'y'],
+}: DotMatrixProps) => {
+  const uniforms = useMemo(() => {
+    let colorsArray = [
+      colors[0],
+      colors[0],
+      colors[0],
+      colors[0],
+      colors[0],
+      colors[0],
+    ];
+    if (colors.length === 2) {
+      colorsArray = [
+        colors[0],
+        colors[0],
+        colors[0],
+        colors[1],
+        colors[1],
+        colors[1],
+      ];
+    } else if (colors.length === 3) {
+      colorsArray = [
+        colors[0],
+        colors[0],
+        colors[1],
+        colors[1],
+        colors[2],
+        colors[2],
+      ];
+    }
+
+    return {
+      u_colors: {
+        value: colorsArray.map((color) => [
+          color[0] / 255,
+          color[1] / 255,
+          color[2] / 255,
+        ]),
+        type: 'uniform3fv',
+      },
+      u_opacities: {
+        value: opacities,
+        type: 'uniform1fv',
+      },
+      u_total_size: {
+        value: totalSize,
+        type: 'uniform1f',
+      },
+      u_dot_size: {
+        value: dotSize,
+        type: 'uniform1f',
+      },
+    };
+  }, [colors, opacities, totalSize, dotSize]);
+
+  return (
+    <Shader
+      source={`
+        precision mediump float;
+        in vec2 fragCoord;
+
+        uniform float u_time;
+        uniform float u_opacities[10];
+        uniform vec3 u_colors[6];
+        uniform float u_total_size;
+        uniform float u_dot_size;
+        uniform vec2 u_resolution;
+        out vec4 fragColor;
+        float PHI = 1.61803398874989484820459;
+        float random(vec2 xy) {
+            return fract(tan(distance(xy * PHI, xy) * 0.5) * xy.x);
+        }
+        float map(float value, float min1, float max1, float min2, float max2) {
+            return min2 + (value - min1) * (max2 - min2) / (max1 - min1);
+        }
+        void main() {
+            vec2 st = fragCoord.xy;
+            ${
+              center.includes('x')
+                ? 'st.x -= abs(floor((mod(u_resolution.x, u_total_size) - u_dot_size) * 0.5));'
+                : ''
+            }
+            ${
+              center.includes('y')
+                ? 'st.y -= abs(floor((mod(u_resolution.y, u_total_size) - u_dot_size) * 0.5));'
+                : ''
+            }
+      float opacity = step(0.0, st.x);
+      opacity *= step(0.0, st.y);
+
+      vec2 st2 = vec2(int(st.x / u_total_size), int(st.y / u_total_size));
+
+      float frequency = 5.0;
+      float show_offset = random(st2);
+      float rand = random(st2 * floor((u_time / frequency) + show_offset + frequency) + 1.0);
+      opacity *= u_opacities[int(rand * 10.0)];
+      opacity *= 1.0 - step(u_dot_size / u_total_size, fract(st.x / u_total_size));
+      opacity *= 1.0 - step(u_dot_size / u_total_size, fract(st.y / u_total_size));
+
+      vec3 color = u_colors[int(show_offset * 6.0)];
+
+      ${shader}
+
+      fragColor = vec4(color, opacity);
+      fragColor.rgb *= fragColor.a;
+        }`}
+      uniforms={uniforms}
+      maxFps={60}
+    />
+  );
+};
+
+type Uniforms = {
+  [key: string]: {
+    value: number[] | number[][] | number;
+    type: string;
+  };
+};
+
+const ShaderMaterial = ({
+  source,
+  uniforms,
+  maxFps = 60,
+}: {
+  source: string;
+  maxFps?: number;
+  uniforms: Uniforms;
+}) => {
+  const { size } = useThree();
+  const ref = useRef<THREE.Mesh>(null);
+  let lastFrameTime = 0;
+
+  useFrame(({ clock }) => {
+    if (!ref.current) return;
+    const timestamp = clock.getElapsedTime();
+    if (timestamp - lastFrameTime < 1 / maxFps) {
+      return;
+    }
+    lastFrameTime = timestamp;
+
+    const material = ref.current.material as THREE.ShaderMaterial;
+    const timeLocation = material.uniforms.u_time;
+    timeLocation.value = timestamp;
+  });
+
+  const getUniforms = useCallback(() => {
+    const preparedUniforms: Record<string, { value: unknown; type?: string }> = {};
+
+    for (const uniformName in uniforms) {
+      const uniform = uniforms[uniformName] as { type: string; value: number | number[] | number[][] };
+
+      switch (uniform.type) {
+        case 'uniform1f':
+          preparedUniforms[uniformName] = { value: uniform.value, type: '1f' };
+          break;
+        case 'uniform3f':
+          preparedUniforms[uniformName] = {
+            value: new THREE.Vector3().fromArray(uniform.value as number[]),
+            type: '3f',
+          };
+          break;
+        case 'uniform1fv':
+          preparedUniforms[uniformName] = { value: uniform.value, type: '1fv' };
+          break;
+        case 'uniform3fv':
+          preparedUniforms[uniformName] = {
+            value: (uniform.value as number[][]).map((v: number[]) =>
+              new THREE.Vector3().fromArray(v)
+            ),
+            type: '3fv',
+          };
+          break;
+        case 'uniform2f':
+          preparedUniforms[uniformName] = {
+            value: new THREE.Vector2().fromArray(uniform.value as number[]),
+            type: '2f',
+          };
+          break;
+        default:
+          console.error(`Invalid uniform type for '${uniformName}'.`);
+          break;
+      }
+    }
+
+    preparedUniforms['u_time'] = { value: 0, type: '1f' };
+    preparedUniforms['u_resolution'] = {
+      value: new THREE.Vector2(size.width * 2, size.height * 2),
+    };
+    return preparedUniforms;
+  }, [uniforms, size.width, size.height]);
+
+  const material = useMemo(() => {
+    const materialObject = new THREE.ShaderMaterial({
+      vertexShader: `
+      precision mediump float;
+      in vec2 coordinates;
+      uniform vec2 u_resolution;
+      out vec2 fragCoord;
+      void main(){
+        float x = position.x;
+        float y = position.y;
+        gl_Position = vec4(x, y, 0.0, 1.0);
+        fragCoord = (position.xy + vec2(1.0)) * 0.5 * u_resolution;
+        fragCoord.y = u_resolution.y - fragCoord.y;
+      }
+      `,
+      fragmentShader: source,
+      uniforms: getUniforms(),
+      glslVersion: THREE.GLSL3,
+      blending: THREE.CustomBlending,
+      blendSrc: THREE.SrcAlphaFactor,
+      blendDst: THREE.OneFactor,
+    });
+
+    return materialObject;
+  }, [source, getUniforms]);
+
+  return (
+    <mesh ref={ref as React.Ref<THREE.Mesh>}>
+      <planeGeometry args={[2, 2]} />
+      <primitive object={material} attach="material" />
+    </mesh>
+  );
+};
+
+interface ShaderProps {
+  source: string;
+  uniforms: Uniforms;
+  maxFps?: number;
+}
+
+const Shader = ({ source, uniforms, maxFps = 60 }: ShaderProps) => {
+  return (
+    <Canvas className="absolute inset-0 h-full w-full">
+      <ShaderMaterial source={source} uniforms={uniforms} maxFps={maxFps} />
+    </Canvas>
+  );
+};
+
+
+export default CanvasRevealEffect;
diff --git a/src/components/background/CardPattern.tsx b/src/components/background/CardPattern.tsx
new file mode 100644
index 0000000..49128b6
--- /dev/null
+++ b/src/components/background/CardPattern.tsx
@@ -0,0 +1,55 @@
+"use client";
+
+import { useMemo } from "react";
+import { motion, useMotionTemplate, type MotionValue } from "framer-motion";
+
+const GRADIENT_SIZE = 250;
+
+interface CardPatternProps {
+  mouseX: MotionValue<number>;
+  mouseY: MotionValue<number>;
+  randomString: string;
+  isActive?: boolean;
+  gradientClassName?: string;
+}
+
+function CardPatternComponent({
+  mouseX,
+  mouseY,
+  randomString,
+  isActive = false,
+  gradientClassName,
+}: CardPatternProps) {
+  const maskImage = useMotionTemplate`radial-gradient(${GRADIENT_SIZE}px at ${mouseX}px ${mouseY}px, white, transparent)`;
+
+  const style = useMemo(
+    () => ({
+      maskImage,
+      WebkitMaskImage: maskImage,
+    }),
+    [maskImage]
+  );
+
+  return (
+    <div className="pointer-events-none">
+      <div
+        className={`absolute inset-0 rounded-theme-capped [mask-image:linear-gradient(white,transparent)] ${isActive ? "opacity-50" : "group-hover/primary-button:opacity-50"}`}
+      />
+      <motion.div
+        className={`absolute inset-0 rounded-theme-capped ${gradientClassName} backdrop-blur-xl transition duration-500 ${isActive ? "opacity-100" : "opacity-0 group-hover/primary-button:opacity-100"}`}
+        style={style}
+      />
+      <motion.div
+        className={`absolute inset-0 rounded-theme-capped mix-blend-overlay ${isActive ? "opacity-100" : "opacity-0 group-hover/primary-button:opacity-100"}`}
+        style={style}
+      >
+        <p className="absolute inset-x-0 text-xs h-full break-words whitespace-pre-wrap text-white font-mono font-bold transition duration-500">
+          {randomString}
+        </p>
+      </motion.div>
+    </div>
+  );
+}
+
+
+export const CardPattern = CardPatternComponent;
diff --git a/src/components/background/CellWaveBackground.tsx b/src/components/background/CellWaveBackground.tsx
new file mode 100644
index 0000000..a0dcb8c
--- /dev/null
+++ b/src/components/background/CellWaveBackground.tsx
@@ -0,0 +1,102 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import { gsap } from 'gsap';
+import { cls } from '@/lib/utils';
+
+interface CellWaveBackgroundProps {
+  columns?: number;
+  rows?: number;
+  cellColor?: string;
+  duration?: number;
+  delay?: number;
+  className?: string;
+}
+
+const CellWaveBackground = ({
+  columns = 5,
+  rows = 24,
+  cellColor = 'var(--color-background-accent)',
+  duration = 0.25,
+  delay = 1.25,
+  className = ''
+}: CellWaveBackgroundProps) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const cellRefs = useRef<(HTMLDivElement | null)[][]>([]);
+  const timelinesRef = useRef<gsap.core.Timeline[]>([]);
+
+  const setCellRef = (colIndex: number, cellIndex: number) => (el: HTMLDivElement | null) => {
+    if (!cellRefs.current[colIndex]) {
+      cellRefs.current[colIndex] = [];
+    }
+    cellRefs.current[colIndex][cellIndex] = el;
+  };
+
+  const cellStyles = {
+    backgroundColor: cellColor,
+    boxShadow: `0px 0px 50px 16px color-mix(in srgb, ${cellColor} 12%, transparent), 0px 0px 7px 1px color-mix(in srgb, ${cellColor} 31%, transparent)`
+  };
+
+  useEffect(() => {
+    timelinesRef.current.forEach(tl => tl.kill());
+    timelinesRef.current = [];
+
+    cellRefs.current.forEach((column, colIndex) => {
+      const cells = [...column].filter(Boolean).reverse();
+      const timeline = gsap.timeline({
+        delay: delay * colIndex,
+        repeat: -1,
+        repeatDelay: 2
+      });
+
+      cells.forEach((cell, cellIndex) => {
+        if (cell) {
+          timeline.to(cell, {
+            keyframes: [
+              { opacity: 0, duration: 0 },
+              { opacity: 0.05, duration: duration },
+              { opacity: 0.15, duration: duration },
+              { opacity: 0.25, duration: duration },
+              { opacity: 0.5, duration: duration },
+              { opacity: 0.25, duration: duration },
+              { opacity: 0.15, duration: duration },
+              { opacity: 0.05, duration: duration },
+              { opacity: 0, duration: duration }
+            ],
+            ease: 'none'
+          }, cellIndex * duration);
+        }
+      });
+
+      timelinesRef.current.push(timeline);
+    });
+
+    return () => {
+      timelinesRef.current.forEach(tl => tl.kill());
+    };
+  }, [duration, delay, columns, rows]);
+
+  return (
+    <div
+      ref={containerRef}
+      className={cls("absolute inset-0 z-0 flex items-end justify-between pointer-events-none select-none", className)}
+      aria-hidden="true"
+    >
+      {Array.from({ length: columns }).map((_, colIndex) => (
+        <div className="relative flex flex-col gap-1 h-full" key={colIndex}>
+          {Array.from({ length: rows }).map((_, cellIndex) => (
+            <div
+              ref={setCellRef(colIndex, cellIndex)}
+              className="opacity-0 h-8 w-2"
+              key={cellIndex}
+              style={cellStyles}
+            />
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+
+export default CellWaveBackground;
diff --git a/src/components/background/CircleGradientBackground.tsx b/src/components/background/CircleGradientBackground.tsx
new file mode 100644
index 0000000..e52581b
--- /dev/null
+++ b/src/components/background/CircleGradientBackground.tsx
@@ -0,0 +1,46 @@
+"use client";
+
+import { cls } from "@/lib/utils";
+
+type DiagonalVariant = "primary" | "secondary";
+
+interface CircleGradientBackgroundProps {
+  className?: string;
+  diagonal?: DiagonalVariant;
+}
+
+const CircleGradientBackground = ({
+  className = "",
+  diagonal = "primary",
+}: CircleGradientBackgroundProps) => {
+  const isPrimary = diagonal === "primary";
+
+  return (
+    <div
+      className={cls("fixed top-0 left-0 right-0 bottom-0 h-screen w-full -z-10 overflow-hidden", className)}
+      aria-hidden="true"
+    >
+      <div
+        className={cls(
+          "fixed w-100 md:w-70 h-auto aspect-square rounded-full opacity-10",
+          isPrimary ? "top-0 right-0 translate-x-1/2 -translate-y-1/2" : "top-0 left-0 -translate-x-1/2 -translate-y-1/2"
+        )}
+        style={{
+          background: `radial-gradient(circle at center, var(--color-background-accent) 35%, transparent 70%)`,
+        }}
+      />
+      <div
+        className={cls(
+          "fixed w-100 md:w-70 h-auto aspect-square rounded-full opacity-10",
+          isPrimary ? "bottom-0 left-0 -translate-x-1/2 translate-y-1/2" : "bottom-0 right-0 translate-x-1/2 translate-y-1/2"
+        )}
+        style={{
+          background: `radial-gradient(circle at center, var(--color-background-accent) 35%, transparent 70%)`,
+        }}
+      />
+    </div>
+  );
+};
+
+
+export default CircleGradientBackground;
diff --git a/src/components/background/DotGridBackground.tsx b/src/components/background/DotGridBackground.tsx
new file mode 100644
index 0000000..3c05158
--- /dev/null
+++ b/src/components/background/DotGridBackground.tsx
@@ -0,0 +1,43 @@
+"use client";
+
+import { cls } from "@/lib/utils";
+
+type GridSize = "small" | "medium" | "large";
+
+interface DotGridBackgroundProps {
+  size?: GridSize;
+  className?: string;
+  perspectiveThreeD?: boolean;
+}
+
+const GRID_SIZES: Record<GridSize, string> = {
+  small: "1vw 1vw",
+  medium: "2vw 2vw",
+  large: "4vw 4vw",
+};
+
+const DotGridBackground = ({
+  size = "medium",
+  className = "",
+  perspectiveThreeD = false
+}: DotGridBackgroundProps) => {
+  return (
+    <div
+      className={cls(
+        "fixed inset-0 -z-10 bg-background [mask-image:radial-gradient(circle_at_center,white_0%,transparent_90%)]",
+        perspectiveThreeD && "inset-x-0 inset-y-[-30%] h-[200%] skew-y-12",
+        className
+      )}
+      style={{
+        backgroundImage:
+          "radial-gradient(circle, color-mix(in srgb, var(--background-accent) 30%, transparent) 1px, transparent 1px)",
+        backgroundSize: GRID_SIZES[size],
+        backgroundRepeat: "repeat",
+      }}
+      aria-hidden="true"
+    />
+  );
+};
+
+
+export default DotGridBackground;
diff --git a/src/components/background/DownwardRaysBackground.tsx b/src/components/background/DownwardRaysBackground.tsx
new file mode 100644
index 0000000..af0551b
--- /dev/null
+++ b/src/components/background/DownwardRaysBackground.tsx
@@ -0,0 +1,128 @@
+"use client";
+
+import { cls } from "@/lib/utils";
+
+interface RayConfig {
+    width: number;
+    opacity: number;
+    rotation: number;
+    scale?: number;
+    animationDuration: number;
+    animationDelay: number;
+}
+
+interface LightSourceConfig {
+    width: number;
+    height?: number;
+    opacity: number;
+    top: number;
+}
+
+interface DownwardRaysBackgroundProps {
+    animated: boolean;
+    showGrid: boolean;
+    className?: string;
+    containerClassName?: string;
+}
+
+const rays: RayConfig[] = [
+    { width: 35, opacity: 1, rotation: -20, animationDuration: 4, animationDelay: 0 },
+    { width: 35, opacity: 0.6, rotation: -12, animationDuration: 3.5, animationDelay: 0.5 },
+    { width: 20, opacity: 0.45, rotation: -5, scale: 0.90, animationDuration: 5, animationDelay: 1.2 },
+    { width: 15, opacity: 0.625, rotation: -3, animationDuration: 3, animationDelay: 0.3 },
+    { width: 40, opacity: 0.1, rotation: 0, scale: 0.79, animationDuration: 4.5, animationDelay: 0.8 },
+    { width: 20, opacity: 0.525, rotation: 3, animationDuration: 3.2, animationDelay: 1.5 },
+    { width: 15, opacity: 0.725, rotation: 5, scale: 0.90, animationDuration: 4.2, animationDelay: 0.2 },
+    { width: 35, opacity: 0.6, rotation: 12, animationDuration: 3.8, animationDelay: 1 },
+    { width: 35, opacity: 1, rotation: 20, animationDuration: 4, animationDelay: 0.7 },
+];
+
+const lightSources: LightSourceConfig[] = [
+    { width: 1198, opacity: 0.025, top: -352 },
+    { width: 865, height: 929, opacity: 0.1, top: -252 },
+    { width: 865, height: 929, opacity: 0.1, top: -252 },
+];
+
+const DownwardRaysBackground = ({
+    animated,
+    showGrid,
+    className = "",
+    containerClassName = "",
+}: DownwardRaysBackgroundProps) => {
+    return (
+        <div
+            className={cls("absolute inset-0 z-0 overflow-hidden pointer-events-none select-none", className)}
+            aria-hidden="true"
+        >
+            {animated && (
+                <style>
+                    {`
+                        @keyframes rayPulse {
+                            0%, 100% { opacity: 0; }
+                            50% { opacity: var(--target-opacity); }
+                        }
+                    `}
+                </style>
+            )}
+
+            {showGrid && (
+                <div
+                    className="absolute inset-0 -z-10 bg-background [mask-image:radial-gradient(50%_50%_at_50%_0%,white_0%,transparent_100%)]"
+                    style={{
+                        backgroundImage:
+                            "linear-gradient(to right, color-mix(in srgb, var(--color-background-accent) 20%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--color-background-accent) 10%, transparent) 1px, transparent 1px)",
+                        backgroundSize: "10vw 10vw",
+                        backgroundRepeat: "repeat",
+                    }}
+                />
+            )}
+
+            <div
+                className={cls(
+                    "absolute overflow-hidden w-[1142px] h-[129vh] -top-[400px] left-1/2 -translate-x-1/2",
+                    "blur-[16px]",
+                    "[mask:radial-gradient(50%_109%,#000_0%,#000000f6_0%,transparent_96%)]",
+                    containerClassName
+                )}
+            >
+                {rays.map((ray, index) => (
+                    <div
+                        key={`ray-${index}`}
+                        className="absolute overflow-hidden origin-top -top-[352px] -bottom-[920px] [background:radial-gradient(50%_50%_at_50%_50%,var(--color-background-accent)_0%,transparent_100%)]"
+                        style={{
+                            width: `${ray.width}px`,
+                            left: `calc(50% - ${ray.width / 2}px)`,
+                            transform: `${ray.scale ? `scale(${ray.scale})` : ""} rotate(${ray.rotation}deg)`,
+                            ...(animated
+                                ? {
+                                    "--target-opacity": ray.opacity,
+                                    animation: `rayPulse ${ray.animationDuration}s ease-in-out ${ray.animationDelay}s infinite both`,
+                                }
+                                : {
+                                    opacity: ray.opacity,
+                                }),
+                        } as React.CSSProperties}
+                    />
+                ))}
+
+                {lightSources.map((source, index) => (
+                    <div
+                        key={`light-source-${index}`}
+                        className="absolute overflow-hidden [background:radial-gradient(50%_50%_at_50%_50%,var(--color-background-accent)_0%,transparent_100%)]"
+                        style={{
+                            width: `${source.width}px`,
+                            height: source.height ? `${source.height}px` : undefined,
+                            top: `${source.top}px`,
+                            bottom: source.height ? undefined : "-46px",
+                            left: `calc(50% - ${source.width / 2}px)`,
+                            opacity: source.opacity,
+                        }}
+                    />
+                ))}
+            </div>
+        </div>
+    );
+};
+
+
+export default DownwardRaysBackground;
diff --git a/src/components/background/FluidBackground.tsx b/src/components/background/FluidBackground.tsx
new file mode 100644
index 0000000..c4c2c37
--- /dev/null
+++ b/src/components/background/FluidBackground.tsx
@@ -0,0 +1,275 @@
+'use client';
+
+import { useRef, useMemo, useEffect, useState } from 'react';
+import { Canvas, useFrame, extend, useThree } from '@react-three/fiber';
+import { shaderMaterial } from '@react-three/drei';
+import * as THREE from 'three';
+import { cls } from '@/lib/utils';
+
+const getComputedColor = (varName: string): THREE.Color => {
+  if (typeof window === 'undefined') return new THREE.Color(0x000000);
+  const styles = getComputedStyle(document.documentElement);
+  const colorString = styles.getPropertyValue(varName).trim();
+  return new THREE.Color(colorString || '#000000');
+};
+
+const vertexShader = `
+  varying vec2 vUv;
+  void main() {
+    vUv = uv;
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+  }
+`;
+
+const fragmentShader = `
+  #ifdef GL_ES
+    precision lowp float;
+  #endif
+  uniform float iTime;
+  uniform vec2 iResolution;
+  uniform vec3 uBackgroundColor;
+  uniform vec3 uPrimaryCta;
+  uniform vec3 uAccent;
+  uniform vec3 uSecondaryCta;
+  varying vec2 vUv;
+
+  vec4 buf[8];
+
+  vec4 sigmoid(vec4 x) { return 1. / (1. + exp(-x)); }
+
+  vec4 cppn_fn(vec2 coordinate, float in0, float in1, float in2) {
+    buf[6] = vec4(coordinate.x, coordinate.y, 0.3948333106474662 + in0, 0.36 + in1);
+    buf[7] = vec4(0.14 + in2, sqrt(coordinate.x * coordinate.x + coordinate.y * coordinate.y), 0., 0.);
+
+    buf[0] = mat4(vec4(6.5404263, -3.6126034, 0.7590882, -1.13613), vec4(2.4582713, 3.1660357, 1.2219609, 0.06276096), vec4(-5.478085, -6.159632, 1.8701609, -4.7742867), vec4(6.039214, -5.542865, -0.90925294, 3.251348))
+    * buf[6]
+    + mat4(vec4(0.8473259, -5.722911, 3.975766, 1.6522468), vec4(-0.24321538, 0.5839259, -1.7661959, -5.350116), vec4(0.0, 0.0, 0.0, 0.0), vec4(0.0, 0.0, 0.0, 0.0))
+    * buf[7]
+    + vec4(0.21808943, 1.1243913, -1.7969975, 5.0294676);
+
+    buf[1] = mat4(vec4(-3.3522482, -6.0612736, 0.55641043, -4.4719114), vec4(0.8631464, 1.7432913, 5.643898, 1.6106541), vec4(2.4941394, -3.5012043, 1.7184316, 6.357333), vec4(3.310376, 8.209261, 1.1355612, -1.165539))
+    * buf[6]
+    + mat4(vec4(5.24046, -13.034365, 0.009859298, 15.870829), vec4(2.987511, 3.129433, -0.89023495, -1.6822904), vec4(0.0, 0.0, 0.0, 0.0), vec4(0.0, 0.0, 0.0, 0.0))
+    * buf[7]
+    + vec4(-5.9457836, -6.573602, -0.8812491, 1.5436668);
+
+    buf[0] = sigmoid(buf[0]);
+    buf[1] = sigmoid(buf[1]);
+
+    buf[2] = mat4(vec4(-15.219568, 8.095543, -2.429353, -1.9381982), vec4(-5.951362, 4.3115187, 2.6393783, 1.274315), vec4(-7.3145227, 6.7297835, 5.2473326, 5.9411426), vec4(5.0796127, 8.979051, -1.7278991, -1.158976))
+    * buf[6]
+    + mat4(vec4(-11.967154, -11.608155, 6.1486754, 11.237008), vec4(2.124141, -6.263192, -1.7050359, -0.7021966), vec4(0.0, 0.0, 0.0, 0.0), vec4(0.0, 0.0, 0.0, 0.0))
+    * buf[7]
+    + vec4(-4.17164, -3.2281182, -4.576417, -3.6401186);
+
+    buf[3] = mat4(vec4(3.1832156, -13.738922, 1.879223, 3.233465), vec4(0.64300746, 12.768129, 1.9141049, 0.50990224), vec4(-0.049295485, 4.4807224, 1.4733979, 1.801449), vec4(5.0039253, 13.000481, 3.3991797, -4.5561905))
+    * buf[6]
+    + mat4(vec4(-0.1285731, 7.720628, -3.1425676, 4.742367), vec4(0.6393625, 3.714393, -0.8108378, -0.39174938), vec4(0.0, 0.0, 0.0, 0.0), vec4(0.0, 0.0, 0.0, 0.0))
+    * buf[7]
+    + vec4(-1.1811101, -21.621881, 0.7851888, 1.2329718);
+
+    buf[2] = sigmoid(buf[2]);
+    buf[3] = sigmoid(buf[3]);
+
+    buf[4] = mat4(vec4(5.214916, -7.183024, 2.7228765, 2.6592617), vec4(-5.601878, -25.3591, 4.067988, 0.4602802), vec4(-10.57759, 24.286327, 21.102104, 37.546658), vec4(4.3024497, -1.9625226, 2.3458803, -1.372816))
+    * buf[0]
+    + mat4(vec4(-17.6526, -10.507558, 2.2587414, 12.462782), vec4(6.265566, -502.75443, -12.642513, 0.9112289), vec4(-10.983244, 20.741234, -9.701768, -0.7635988), vec4(5.383626, 1.4819539, -4.1911616, -4.8444734))
+    * buf[1]
+    + mat4(vec4(12.785233, -16.345072, -0.39901125, 1.7955981), vec4(-30.48365, -1.8345358, 1.4542528, -1.1118771), vec4(19.872723, -7.337935, -42.941723, -98.52709), vec4(8.337645, -2.7312303, -2.2927687, -36.142323))
+    * buf[2]
+    + mat4(vec4(-16.298317, 3.5471997, -0.44300047, -9.444417), vec4(57.5077, -35.609753, 16.163465, -4.1534753), vec4(-0.07470326, -3.8656476, -7.0901804, 3.1523974), vec4(-12.559385, -7.077619, 1.490437, -0.8211543))
+    * buf[3]
+    + vec4(-7.67914, 15.927437, 1.3207729, -1.6686112);
+
+    buf[5] = mat4(vec4(-1.4109162, -0.372762, -3.770383, -21.367174), vec4(-6.2103205, -9.35908, 0.92529047, 8.82561), vec4(11.460242, -22.348068, 13.625772, -18.693201), vec4(-0.3429052, -3.9905605, -2.4626114, -0.45033523))
+    * buf[0]
+    + mat4(vec4(7.3481627, -4.3661838, -6.3037653, -3.868115), vec4(1.5462853, 6.5488915, 1.9701879, -0.58291394), vec4(6.5858274, -2.2180402, 3.7127688, -1.3730392), vec4(-5.7973905, 10.134961, -2.3395722, -5.965605))
+    * buf[1]
+    + mat4(vec4(-2.5132585, -6.6685553, -1.4029363, -0.16285264), vec4(-0.37908727, 0.53738135, 4.389061, -1.3024765), vec4(-0.70647055, 2.0111287, -5.1659346, -3.728635), vec4(-13.562562, 10.487719, -0.9173751, -2.6487076))
+    * buf[2]
+    + mat4(vec4(-8.645013, 6.5546675, -6.3944063, -5.5933375), vec4(-0.57783127, -1.077275, 36.91025, 5.736769), vec4(14.283112, 3.7146652, 7.1452246, -4.5958776), vec4(2.7192075, 3.6021907, -4.366337, -2.3653464))
+    * buf[3]
+    + vec4(-5.9000807, -4.329569, 1.2427121, 8.59503);
+
+    buf[4] = sigmoid(buf[4]);
+    buf[5] = sigmoid(buf[5]);
+
+    buf[6] = mat4(vec4(-1.61102, 0.7970257, 1.4675229, 0.20917463), vec4(-28.793737, -7.1390953, 1.5025433, 4.656581), vec4(-10.94861, 39.66238, 0.74318546, -10.095605), vec4(-0.7229728, -1.5483948, 0.7301322, 2.1687684))
+    * buf[0]
+    + mat4(vec4(3.2547753, 21.489103, -1.0194173, -3.3100595), vec4(-3.7316632, -3.3792162, -7.223193, -0.23685838), vec4(13.1804495, 0.7916005, 5.338587, 5.687114), vec4(-4.167605, -17.798311, -6.815736, -1.6451967))
+    * buf[1]
+    + mat4(vec4(0.604885, -7.800309, -7.213122, -2.741014), vec4(-3.522382, -0.12359311, -0.5258442, 0.43852118), vec4(9.6752825, -22.853785, 2.062431, 0.099892326), vec4(-4.3196306, -17.730087, 2.5184598, 5.30267))
+    * buf[2]
+    + mat4(vec4(-6.545563, -15.790176, -6.0438633, -5.415399), vec4(-43.591583, 28.551912, -16.00161, 18.84728), vec4(4.212382, 8.394307, 3.0958717, 8.657522), vec4(-5.0237565, -4.450633, -4.4768, -5.5010443))
+    * buf[3]
+    + mat4(vec4(1.6985557, -67.05806, 6.897715, 1.9004834), vec4(1.8680354, 2.3915145, 2.5231109, 4.081538), vec4(11.158006, 1.7294737, 2.0738268, 7.386411), vec4(-4.256034, -306.24686, 8.258898, -17.132736))
+    * buf[4]
+    + mat4(vec4(1.6889864, -4.5852966, 3.8534803, -6.3482175), vec4(1.3543309, -1.2640043, 9.932754, 2.9079645), vec4(-5.2770967, 0.07150358, -0.13962056, 3.3269649), vec4(28.34703, -4.918278, 6.1044083, 4.085355))
+    * buf[5]
+    + vec4(6.6818056, 12.522166, -3.7075126, -4.104386);
+
+    buf[7] = mat4(vec4(-8.265602, -4.7027016, 5.098234, 0.7509808), vec4(8.6507845, -17.15949, 16.51939, -8.884479), vec4(-4.036479, -2.3946867, -2.6055532, -1.9866527), vec4(-2.2167742, -1.8135649, -5.9759874, 4.8846445))
+    * buf[0]
+    + mat4(vec4(6.7790847, 3.5076547, -2.8191125, -2.7028968), vec4(-5.743024, -0.27844876, 1.4958696, -5.0517144), vec4(13.122226, 15.735168, -2.9397483, -4.101023), vec4(-14.375265, -5.030483, -6.2599335, 2.9848232))
+    * buf[1]
+    + mat4(vec4(4.0950394, -0.94011575, -5.674733, 4.755022), vec4(4.3809423, 4.8310084, 1.7425908, -3.437416), vec4(2.117492, 0.16342592, -104.56341, 16.949184), vec4(-5.22543, -2.994248, 3.8350096, -1.9364246))
+    * buf[2]
+    + mat4(vec4(-5.900337, 1.7946124, -13.604192, -3.8060522), vec4(6.6583457, 31.911177, 25.164474, 91.81147), vec4(11.840538, 4.1503043, -0.7314397, 6.768467), vec4(-6.3967767, 4.034772, 6.1714606, -0.32874924))
+    * buf[3]
+    + mat4(vec4(3.4992442, -196.91893, -8.923708, 2.8142626), vec4(3.4806502, -3.1846354, 5.1725626, 5.1804223), vec4(-2.4009497, 15.585794, 1.2863957, 2.0252278), vec4(-71.25271, -62.441242, -8.138444, 0.50670296))
+    * buf[4]
+    + mat4(vec4(-12.291733, -11.176166, -7.3474145, 4.390294), vec4(10.805477, 5.6337385, -0.9385842, -4.7348723), vec4(-12.869276, -7.039391, 5.3029537, 7.5436664), vec4(1.4593618, 8.91898, 3.5101583, 5.840625))
+    * buf[5]
+    + vec4(2.2415268, -6.705987, -0.98861027, -2.117676);
+
+    buf[6] = sigmoid(buf[6]);
+    buf[7] = sigmoid(buf[7]);
+
+    buf[0] = mat4(vec4(1.6794263, 1.3817469, 2.9625452, 0.0), vec4(-1.8834411, -1.4806935, -3.5924516, 0.0), vec4(-1.3279216, -1.0918057, -2.3124623, 0.0), vec4(0.2662234, 0.23235129, 0.44178495, 0.0))
+    * buf[0]
+    + mat4(vec4(-0.6299101, -0.5945583, -0.9125601, 0.0), vec4(0.17828953, 0.18300213, 0.18182953, 0.0), vec4(-2.96544, -2.5819945, -4.9001055, 0.0), vec4(1.4195864, 1.1868085, 2.5176322, 0.0))
+    * buf[1]
+    + mat4(vec4(-1.2584374, -1.0552157, -2.1688404, 0.0), vec4(-0.7200217, -0.52666044, -1.438251, 0.0), vec4(0.15345335, 0.15196142, 0.272854, 0.0), vec4(0.945728, 0.8861938, 1.2766753, 0.0))
+    * buf[2]
+    + mat4(vec4(-2.4218085, -1.968602, -4.35166, 0.0), vec4(-22.683098, -18.0544, -41.954372, 0.0), vec4(0.63792, 0.5470648, 1.1078634, 0.0), vec4(-1.5489894, -1.3075932, -2.6444845, 0.0))
+    * buf[3]
+    + mat4(vec4(-0.49252132, -0.39877754, -0.91366625, 0.0), vec4(0.95609266, 0.7923952, 1.640221, 0.0), vec4(0.30616966, 0.15693925, 0.8639857, 0.0), vec4(1.1825981, 0.94504964, 2.176963, 0.0))
+    * buf[4]
+    + mat4(vec4(0.35446745, 0.3293795, 0.59547555, 0.0), vec4(-0.58784515, -0.48177817, -1.0614829, 0.0), vec4(2.5271258, 1.9991658, 4.6846647, 0.0), vec4(0.13042648, 0.08864098, 0.30187556, 0.0))
+    * buf[5]
+    + mat4(vec4(-1.7718065, -1.4033192, -3.3355875, 0.0), vec4(3.1664357, 2.638297, 5.378702, 0.0), vec4(-3.1724713, -2.6107926, -5.549295, 0.0), vec4(-2.851368, -2.249092, -5.3013067, 0.0))
+    * buf[6]
+    + mat4(vec4(1.5203838, 1.2212278, 2.8404984, 0.0), vec4(1.5210563, 1.2651345, 2.683903, 0.0), vec4(2.9789467, 2.4364579, 5.2347264, 0.0), vec4(2.2270417, 1.8825914, 3.8028636, 0.0))
+    * buf[7]
+    + vec4(-1.5468478, -3.6171484, 0.24762098, 0.0);
+
+    buf[0] = sigmoid(buf[0]);
+    return vec4(buf[0].x , buf[0].y , buf[0].z, 1.0);
+  }
+
+  void main() {
+    vec2 uv = vUv * 2.0 - 1.0; uv.y *= -1.0;
+    vec4 pattern = cppn_fn(uv, 0.1 * sin(0.3 * iTime), 0.1 * sin(0.69 * iTime), 0.1 * sin(0.44 * iTime));
+
+    vec3 color1 = mix(uBackgroundColor, uPrimaryCta, pattern.x);
+    vec3 color2 = mix(uBackgroundColor, uAccent, pattern.y);
+    vec3 color3 = mix(uBackgroundColor, uSecondaryCta, pattern.z);
+
+    vec3 finalColor = (color1 + color2 + color3) / 3.0;
+
+    gl_FragColor = vec4(finalColor, 1.0);
+  }
+`;
+
+const CPPNShaderMaterial = shaderMaterial(
+  {
+    iTime: 0,
+    iResolution: new THREE.Vector2(1, 1),
+    uBackgroundColor: new THREE.Color(0x000000),
+    uPrimaryCta: new THREE.Color(0xff0000),
+    uAccent: new THREE.Color(0x00ff00),
+    uSecondaryCta: new THREE.Color(0x0000ff),
+  },
+  vertexShader,
+  fragmentShader
+);
+
+extend({ CPPNShaderMaterial });
+
+interface ShaderPlaneProps {
+  backgroundColor: THREE.Color;
+  primaryCta: THREE.Color;
+  accent: THREE.Color;
+  secondaryCta: THREE.Color;
+}
+
+const ShaderPlane = ({ backgroundColor, primaryCta, accent, secondaryCta }: ShaderPlaneProps) => {
+  const meshRef = useRef<THREE.Mesh>(null!);
+  const materialRef = useRef<THREE.ShaderMaterial & {
+    iTime: number;
+    iResolution: THREE.Vector2;
+    uBackgroundColor: THREE.Color;
+    uPrimaryCta: THREE.Color;
+    uAccent: THREE.Color;
+    uSecondaryCta: THREE.Color;
+  }>(null!);
+  const { viewport } = useThree();
+
+  useFrame((state) => {
+    if (!materialRef.current) return;
+    materialRef.current.iTime = state.clock.elapsedTime;
+    const { width, height } = state.size;
+    materialRef.current.iResolution.set(width, height);
+  });
+
+  useEffect(() => {
+    if (!materialRef.current) return;
+    materialRef.current.uBackgroundColor = backgroundColor;
+    materialRef.current.uPrimaryCta = primaryCta;
+    materialRef.current.uAccent = accent;
+    materialRef.current.uSecondaryCta = secondaryCta;
+  }, [backgroundColor, primaryCta, accent, secondaryCta]);
+
+  return (
+    <mesh ref={meshRef} position={[0, 0, 0]}>
+      <planeGeometry args={[viewport.width, viewport.height]} />
+      <cPPNShaderMaterial ref={materialRef} side={THREE.DoubleSide} />
+    </mesh>
+  );
+};
+
+
+interface FluidBackgroundProps {
+  className?: string;
+}
+
+const FluidBackground = ({ className = "" }: FluidBackgroundProps) => {
+  const camera = useMemo(() => ({ position: [0, 0, 5] as [number, number, number], fov: 75, near: 0.1, far: 1000 }), []);
+
+  const [colors, setColors] = useState({
+    background: new THREE.Color(0x000000),
+    primaryCta: new THREE.Color(0xff0000),
+    accent: new THREE.Color(0x00ff00),
+    secondaryCta: new THREE.Color(0x0000ff),
+  });
+
+  useEffect(() => {
+    const updateColors = () => {
+      setColors({
+        background: getComputedColor('--background'),
+        primaryCta: getComputedColor('--color-background-accent'),
+        accent: getComputedColor('--color-background-accent'),
+        secondaryCta: getComputedColor('--color-background-accent'),
+      });
+    };
+
+    updateColors();
+  }, []);
+
+  return (
+    <div className={cls("bg-background fixed inset-0 -z-10 w-full h-full", className)} aria-hidden="true">
+      <Canvas
+        camera={camera}
+        gl={{ antialias: true, alpha: false }}
+        dpr={[1, 2]}
+        style={{ width: '100%', height: '100%' }}
+      >
+        <ShaderPlane
+          backgroundColor={colors.background}
+          primaryCta={colors.primaryCta}
+          accent={colors.accent}
+          secondaryCta={colors.secondaryCta}
+        />
+      </Canvas>
+    </div>
+  );
+};
+
+
+export default FluidBackground;
+
+declare module '@react-three/fiber' {
+  interface ThreeElements {
+    cPPNShaderMaterial: unknown;
+  }
+}
diff --git a/src/components/background/GlowingEffect.tsx b/src/components/background/GlowingEffect.tsx
new file mode 100644
index 0000000..1d30dc9
--- /dev/null
+++ b/src/components/background/GlowingEffect.tsx
@@ -0,0 +1,268 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { cls } from "@/lib/utils";
+import { animate } from "motion/react";
+
+const MOBILE_BREAKPOINT = 768;
+const INACTIVE_ZONE_MULTIPLIER = 0.5;
+const CENTER_MULTIPLIER = 0.5;
+const ANGLE_CONVERSION_FACTOR = 180 / Math.PI;
+const ANGLE_OFFSET = 90;
+const ANGLE_NORMALIZATION = 180;
+const FULL_CIRCLE = 360;
+const REPEATING_GRADIENT_TIMES = 5;
+const GRADIENT_DIVISION = 25;
+
+const ANIMATION_EASING = [0.16, 1, 0.3, 1] as const;
+
+interface GlowingEffectProps {
+  blur?: number;
+  inactiveZone?: number;
+  proximity?: number;
+  spread?: number;
+  glow?: boolean;
+  className?: string;
+  disabled?: boolean;
+  movementDuration?: number;
+  borderWidth?: number;
+}
+
+interface Position {
+  x: number;
+  y: number;
+}
+
+type MouseEventLike = MouseEvent | Position;
+const getIsSSR = () => typeof window === "undefined";
+
+const getViewportCenter = (): Position => {
+  if (getIsSSR()) return { x: 0, y: 0 };
+  return {
+    x: window.innerWidth / 2,
+    y: window.innerHeight / 2,
+  };
+};
+
+const getIsMobileDevice = (): boolean => {
+  if (getIsSSR()) return false;
+  return window.innerWidth < MOBILE_BREAKPOINT;
+};
+
+const calculateAngleDiff = (current: number, target: number): number => {
+  return ((target - current + ANGLE_NORMALIZATION) % FULL_CIRCLE) - ANGLE_NORMALIZATION;
+};
+
+const GlowingEffect = ({
+    blur = 0,
+    inactiveZone = 0.7,
+    proximity = 0,
+    spread = 20,
+    glow = false,
+    className,
+    movementDuration = 2,
+    borderWidth = 1,
+    disabled = true,
+  }: GlowingEffectProps) => {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const lastPosition = useRef<Position>({ x: 0, y: 0 });
+    const animationFrameRef = useRef<number>(0);
+    const [isMobile, setIsMobile] = useState(() => getIsMobileDevice());
+
+    const updateElementStyles = useCallback(
+      (element: HTMLElement, property: string, value: string) => {
+        element.style.setProperty(property, value);
+      },
+      []
+    );
+
+    const calculateMousePosition = useCallback(
+      (e?: MouseEventLike): Position => {
+        if (isMobile) {
+          return getViewportCenter();
+        }
+        return {
+          x: e?.x ?? lastPosition.current.x,
+          y: e?.y ?? lastPosition.current.y,
+        };
+      },
+      [isMobile]
+    );
+
+    const animateAngleTransition = useCallback(
+      (element: HTMLElement, currentAngle: number, targetAngle: number) => {
+        const angleDiff = calculateAngleDiff(currentAngle, targetAngle);
+        const newAngle = currentAngle + angleDiff;
+
+        animate(currentAngle, newAngle, {
+          duration: movementDuration,
+          ease: ANIMATION_EASING,
+          onUpdate: (value) => {
+            updateElementStyles(element, "--start", String(value));
+          },
+        });
+      },
+      [movementDuration, updateElementStyles]
+    );
+
+    const handleMove = useCallback(
+      (e?: MouseEventLike) => {
+        if (!containerRef.current) return;
+
+        if (animationFrameRef.current) {
+          cancelAnimationFrame(animationFrameRef.current);
+        }
+
+        animationFrameRef.current = requestAnimationFrame(() => {
+          const element = containerRef.current;
+          if (!element) return;
+
+          const { left, top, width, height } = element.getBoundingClientRect();
+          const mousePosition = calculateMousePosition(e);
+
+          if (e) {
+            lastPosition.current = mousePosition;
+          }
+
+          const centerX = left + width * CENTER_MULTIPLIER;
+          const centerY = top + height * CENTER_MULTIPLIER;
+          const distanceFromCenter = Math.hypot(
+            mousePosition.x - centerX,
+            mousePosition.y - centerY
+          );
+          const inactiveRadius = INACTIVE_ZONE_MULTIPLIER * Math.min(width, height) * inactiveZone;
+
+          if (distanceFromCenter < inactiveRadius) {
+            updateElementStyles(element, "--active", "0");
+            return;
+          }
+
+          const isActive =
+            mousePosition.x > left - proximity &&
+            mousePosition.x < left + width + proximity &&
+            mousePosition.y > top - proximity &&
+            mousePosition.y < top + height + proximity;
+
+          updateElementStyles(element, "--active", isActive ? "1" : "0");
+
+          if (!isActive) return;
+
+          const currentAngle =
+            parseFloat(element.style.getPropertyValue("--start")) || 0;
+          const targetAngle =
+            ANGLE_CONVERSION_FACTOR * Math.atan2(mousePosition.y - centerY, mousePosition.x - centerX) +
+            ANGLE_OFFSET;
+
+          animateAngleTransition(element, currentAngle, targetAngle);
+        });
+      },
+      [inactiveZone, proximity, calculateMousePosition, updateElementStyles, animateAngleTransition]
+    );
+
+    useEffect(() => {
+      if (getIsSSR()) return;
+
+      const checkMobile = () => {
+        setIsMobile(getIsMobileDevice());
+      };
+
+      checkMobile();
+      window.addEventListener("resize", checkMobile);
+
+      return () => {
+        window.removeEventListener("resize", checkMobile);
+      };
+    }, []);
+
+    useEffect(() => {
+      if (disabled || getIsSSR()) return;
+
+      const handleScroll = () => handleMove();
+      const handlePointerMove = (e: PointerEvent) => {
+        if (!isMobile) {
+          handleMove(e);
+        }
+      };
+
+      if (isMobile) {
+        handleMove();
+      }
+
+      window.addEventListener("scroll", handleScroll, { passive: true });
+      document.body.addEventListener("pointermove", handlePointerMove, {
+        passive: true,
+      });
+
+      return () => {
+        if (animationFrameRef.current) {
+          cancelAnimationFrame(animationFrameRef.current);
+        }
+        window.removeEventListener("scroll", handleScroll);
+        document.body.removeEventListener("pointermove", handlePointerMove);
+      };
+    }, [handleMove, disabled, isMobile]);
+
+    const gradient = useMemo(
+      () => `radial-gradient(circle, var(--accent) 10%, transparent 20%),
+        radial-gradient(circle at 40% 40%, var(--background-accent) 5%, transparent 15%),
+        repeating-conic-gradient(
+          from 236.84deg at 50% 50%,
+          var(--accent) 0%,
+          var(--background-accent) calc(${GRADIENT_DIVISION}% / var(--repeating-conic-gradient-times)),
+          var(--accent) calc(${GRADIENT_DIVISION * 2}% / var(--repeating-conic-gradient-times))
+        )`,
+      []
+    );
+
+    const containerStyle = useMemo(
+      () => ({
+        "--blur": `${blur}px`,
+        "--spread": spread,
+        "--start": "0",
+        "--active": "0",
+        "--glowingeffect-border-width": `${borderWidth}px`,
+        "--repeating-conic-gradient-times": String(REPEATING_GRADIENT_TIMES),
+        "--gradient": gradient,
+      } as React.CSSProperties),
+      [blur, spread, borderWidth, gradient]
+    );
+
+    return (
+      <>
+        <div
+          className={cls(
+            "pointer-events-none absolute inset-0 hidden rounded-[inherit] border opacity-0 transition-opacity",
+            glow && "opacity-100",
+            disabled && "!block"
+          )}
+        />
+        <div
+          ref={containerRef}
+          style={containerStyle}
+          className={cls(
+            "pointer-events-none absolute inset-0 rounded-[inherit] opacity-100 transition-opacity",
+            glow && "opacity-100",
+            blur > 0 && "blur-[var(--blur)] ",
+            className,
+            disabled && "!hidden"
+          )}
+        >
+          <div
+            className={cls(
+              "glow",
+              "rounded-[inherit]",
+              'after:content-[""] after:rounded-[inherit] after:absolute after:inset-[calc(-1*var(--glowingeffect-border-width))]',
+              "after:[border:var(--glowingeffect-border-width)_solid_transparent]",
+              "after:[background:var(--gradient)] after:[background-attachment:fixed]",
+              "after:opacity-[var(--active)] after:transition-opacity after:duration-300",
+              "after:[mask-clip:padding-box,border-box]",
+              "after:[mask-composite:intersect]",
+              "after:[mask-image:linear-gradient(#0000,#0000),conic-gradient(from_calc((var(--start)-var(--spread))*1deg),#00000000_0deg,#fff,#00000000_calc(var(--spread)*2deg))]"
+            )}
+          />
+        </div>
+      </>
+    );
+};
+
+export { GlowingEffect };
diff --git a/src/components/background/GlowingOrbBackground.tsx b/src/components/background/GlowingOrbBackground.tsx
new file mode 100644
index 0000000..ba68f72
--- /dev/null
+++ b/src/components/background/GlowingOrbBackground.tsx
@@ -0,0 +1,50 @@
+'use client';
+
+import { cls } from '@/lib/utils';
+
+interface GlowingOrbBackgroundProps {
+  className?: string;
+  blurAmount?: string;
+  glowColor?: string;
+  backgroundColor?: string;
+}
+
+const GlowingOrbBackground = ({
+  className = "",
+  blurAmount = "57px",
+  glowColor = "var(--color-primary-cta)",
+  backgroundColor = "var(--background)",
+}: GlowingOrbBackgroundProps) => {
+  return (
+    <div className="absolute z-0 top-0 left-0 w-full h-screen overflow-hidden pointer-events-none select-none [mask-image:linear-gradient(180deg,rgb(0,0,0)_0%,rgb(0,0,0)_80%,rgba(0,0,0,0)_100%)]" aria-hidden="true">
+      <div
+        className={cls("absolute left-1/2 -translate-x-1/2 w-full h-[100vh] -bottom-[9vh] overflow-hidden z-0", className)}
+      >
+        <div
+          className="absolute left-1/2 -translate-x-1/2 w-[49vw] h-[12vh] bottom-[25vh] overflow-hidden"
+          style={{
+            background: `radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, ${glowColor} 25%, transparent), transparent)`,
+            filter: `blur(${blurAmount})`,
+            WebkitFilter: `blur(${blurAmount})`,
+          }}
+        />
+        <div
+          className="absolute -bottom-[61vh] -left-[33vw] -right-[33vw] h-[100vh] rounded-[100%]"
+          style={{
+            background: `linear-gradient(180deg, color-mix(in srgb, ${glowColor} 30%, transparent), transparent)`,
+          }}
+        />
+        <div
+          className="absolute -bottom-[62vh] -left-[36vw] -right-[36vw] h-[105vh] rounded-[100%]"
+          style={{
+            backgroundColor,
+            boxShadow: `inset 0 2px 20px color-mix(in srgb, ${glowColor} 30%, transparent), 0 -10px 50px 1px color-mix(in srgb, ${glowColor} 25%, transparent)`,
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+
+export default GlowingOrbBackground;
diff --git a/src/components/background/GlowingOrbSparklesBackground.tsx b/src/components/background/GlowingOrbSparklesBackground.tsx
new file mode 100644
index 0000000..91f6d6f
--- /dev/null
+++ b/src/components/background/GlowingOrbSparklesBackground.tsx
@@ -0,0 +1,80 @@
+'use client';
+
+import { cls } from '@/lib/utils';
+import { Sparkles } from './Sparkles';
+
+interface GlowingOrbSparklesBackgroundProps {
+  className?: string;
+  blurAmount?: string;
+  glowColor?: string;
+  backgroundColor?: string;
+  particleColor?: string;
+  particleDensity?: number;
+  minSize?: number;
+  maxSize?: number;
+  speed?: number;
+}
+
+const GlowingOrbSparklesBackground = ({
+  className = "",
+  blurAmount = "57px",
+  glowColor = "var(--color-primary-cta)",
+  backgroundColor = "var(--background)",
+  particleColor = "var(--color-primary-cta)",
+  particleDensity = 80,
+  minSize = 0.5,
+  maxSize = 1.5,
+  speed = 4,
+}: GlowingOrbSparklesBackgroundProps) => {
+  return (
+    <div className="absolute z-0 top-0 left-0 w-full h-screen overflow-hidden pointer-events-none select-none [mask-image:linear-gradient(180deg,rgb(0,0,0)_0%,rgb(0,0,0)_80%,rgba(0,0,0,0)_100%)]" aria-hidden="true">
+      {/* Sparkles layer with radial mask */}
+      <div
+        className="absolute inset-0 z-10"
+        style={{
+          maskImage: 'radial-gradient(circle at 50% 50%, rgb(0,0,0) 0%, rgb(0,0,0) 20%, rgba(0,0,0,0) 50%)',
+          WebkitMaskImage: 'radial-gradient(circle at 50% 50%, rgb(0,0,0) 0%, rgb(0,0,0) 20%, rgba(0,0,0,0) 50%)',
+        }}
+      >
+        <Sparkles
+          className="absolute inset-0"
+          particleColor={particleColor}
+          particleDensity={particleDensity}
+          minSize={minSize}
+          maxSize={maxSize}
+          speed={speed}
+        />
+      </div>
+
+      {/* Glowing orb layer */}
+      <div
+        className={cls("absolute left-1/2 -translate-x-1/2 w-full h-[100vh] -bottom-[9vh] overflow-hidden z-0", className)}
+      >
+        <div
+          className="absolute left-1/2 -translate-x-1/2 w-[49vw] h-[12vh] bottom-[25vh] overflow-hidden"
+          style={{
+            background: `radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, ${glowColor} 25%, transparent), transparent)`,
+            filter: `blur(${blurAmount})`,
+            WebkitFilter: `blur(${blurAmount})`,
+          }}
+        />
+        <div
+          className="absolute -bottom-[61vh] -left-[33vw] -right-[33vw] h-[100vh] rounded-[100%]"
+          style={{
+            background: `linear-gradient(180deg, color-mix(in srgb, ${glowColor} 30%, transparent), transparent)`,
+          }}
+        />
+        <div
+          className="absolute -bottom-[62vh] -left-[36vw] -right-[36vw] h-[105vh] rounded-[100%]"
+          style={{
+            backgroundColor,
+            boxShadow: `inset 0 2px 20px color-mix(in srgb, ${glowColor} 30%, transparent), 0 -10px 50px 1px color-mix(in srgb, ${glowColor} 25%, transparent)`,
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+
+export default GlowingOrbSparklesBackground;
diff --git a/src/components/background/GradientBarsBackground.tsx b/src/components/background/GradientBarsBackground.tsx
new file mode 100644
index 0000000..bdf2e61
--- /dev/null
+++ b/src/components/background/GradientBarsBackground.tsx
@@ -0,0 +1,72 @@
+'use client';
+
+import { cls } from '@/lib/utils';
+
+interface GradientBarsBackgroundProps {
+  className?: string;
+  numBarsPerSide?: number;
+  gradientFrom?: string;
+  gradientTo?: string;
+  opacity?: number;
+  sideWidth?: string;
+}
+
+const GradientBarsBackground = ({
+  className = "",
+  numBarsPerSide = 8,
+  gradientFrom = "var(--color-primary-cta)",
+  gradientTo = "transparent",
+  opacity = 0.075,
+  sideWidth = "35%",
+}: GradientBarsBackgroundProps) => {
+  const getBarStyle = (side: 'left' | 'right') => ({
+    flex: '1 0 0',
+    minWidth: '30px',
+    maxWidth: '82px',
+    background: `linear-gradient(${side === 'left' ? '90deg' : '270deg'}, ${gradientFrom}, ${gradientTo})`,
+    opacity: opacity,
+  });
+
+  const renderBars = (side: 'left' | 'right') =>
+    Array.from({ length: numBarsPerSide }).map((_, index) => (
+      <div key={`${side}-${index}`} className="h-full" style={getBarStyle(side)} />
+    ));
+
+  return (
+    <div
+      className={cls("absolute inset-0 z-0 overflow-hidden pointer-events-none select-none", className)}
+      aria-hidden="true"
+    >
+      <div
+        className="flex h-8/10 w-full justify-between backface-hidden antialiased"
+        style={{
+          transform: 'translateZ(0)',
+          mask: 'linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%)',
+        }}
+      >
+        <div
+          className="flex h-full overflow-hidden"
+          style={{
+            width: sideWidth,
+            mask: 'linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%)',
+          }}
+        >
+          {renderBars('left')}
+        </div>
+
+        <div
+          className="flex h-full justify-end overflow-hidden"
+          style={{
+            width: sideWidth,
+            mask: 'linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%)',
+          }}
+        >
+          {renderBars('right')}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+
+export default GradientBarsBackground;
diff --git a/src/components/background/GridBackround.tsx b/src/components/background/GridBackround.tsx
new file mode 100644
index 0000000..12b82ff
--- /dev/null
+++ b/src/components/background/GridBackround.tsx
@@ -0,0 +1,43 @@
+"use client";
+
+import { cls } from "@/lib/utils";
+
+type GridSize = "small" | "medium" | "large";
+
+interface GridBackroundProps {
+  size?: GridSize;
+  className?: string;
+  perspectiveThreeD?: boolean;
+}
+
+const GRID_SIZES: Record<GridSize, string> = {
+  small: "6.25vw 6.25vw",
+  medium: "10vw 10vw",
+  large: "20vw 20vw",
+};
+
+const GridBackround = ({
+  size = "medium",
+  className = "",
+  perspectiveThreeD = false
+}: GridBackroundProps) => {
+  return (
+    <div
+      className={cls(
+        "fixed inset-0 -z-10 bg-background [mask-image:radial-gradient(circle_at_center,white_0%,transparent_90%)]",
+        perspectiveThreeD && "inset-x-0 inset-y-[-30%] h-[200%] skew-y-12",
+        className
+      )}
+      style={{
+        backgroundImage:
+          "linear-gradient(to right, color-mix(in srgb, var(--background-accent) 10%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--background-accent) 10%, transparent) 1px, transparent 1px)",
+        backgroundSize: GRID_SIZES[size],
+        backgroundRepeat: "repeat",
+      }}
+      aria-hidden="true"
+    />
+  );
+};
+
+
+export default GridBackround;
diff --git a/src/components/background/HeroBackgrounds.tsx b/src/components/background/HeroBackgrounds.tsx
new file mode 100644
index 0000000..4376a77
--- /dev/null
+++ b/src/components/background/HeroBackgrounds.tsx
@@ -0,0 +1,121 @@
+"use client";
+
+import dynamic from "next/dynamic";
+
+const AnimatedGridBackground = dynamic(() => import("./AnimatedGridBackground"), { ssr: false, loading: () => null });
+const CanvasRevealBackground = dynamic(() => import("./CanvasRevealBackground"), { ssr: false, loading: () => null });
+const CellWaveBackground = dynamic(() => import("./CellWaveBackground"), { ssr: false, loading: () => null });
+const DownwardRaysBackground = dynamic(() => import("./DownwardRaysBackground"), { ssr: false, loading: () => null });
+const GlowingOrbBackground = dynamic(() => import("./GlowingOrbBackground"), { ssr: false, loading: () => null });
+const GlowingOrbSparklesBackground = dynamic(() => import("./GlowingOrbSparklesBackground"), { ssr: false, loading: () => null });
+const GradientBarsBackground = dynamic(() => import("./GradientBarsBackground"), { ssr: false, loading: () => null });
+const RadialGradientBackground = dynamic(() => import("./RadialGradientBackground"), { ssr: false, loading: () => null });
+const RotatedRaysBackground = dynamic(() => import("./RotatedRaysBackground"), { ssr: false, loading: () => null });
+const RotatingGradientBackground = dynamic(() => import("./RotatingGradientBackground"), { ssr: false, loading: () => null });
+const SparklesGradientBackground = dynamic(() => import("./SparklesGradientBackground"), { ssr: false, loading: () => null });
+
+export type HeroBackgroundVariant =
+  | "plain"
+  | "animated-grid"
+  | "canvas-reveal"
+  | "cell-wave"
+  | "downward-rays-animated"
+  | "downward-rays-animated-grid"
+  | "downward-rays-static"
+  | "downward-rays-static-grid"
+  | "glowing-orb"
+  | "glowing-orb-sparkles"
+  | "gradient-bars"
+  | "radial-gradient"
+  | "rotated-rays-animated"
+  | "rotated-rays-animated-grid"
+  | "rotated-rays-static"
+  | "rotated-rays-static-grid"
+  | "rotating-gradient"
+  | "sparkles-gradient";
+
+type AnimatedGridProps = React.ComponentProps<typeof AnimatedGridBackground>;
+type CanvasRevealProps = React.ComponentProps<typeof CanvasRevealBackground>;
+type CellWaveProps = React.ComponentProps<typeof CellWaveBackground>;
+type GlowingOrbProps = React.ComponentProps<typeof GlowingOrbBackground>;
+type GlowingOrbSparklesProps = React.ComponentProps<typeof GlowingOrbSparklesBackground>;
+type GradientBarsProps = React.ComponentProps<typeof GradientBarsBackground>;
+type RadialGradientProps = React.ComponentProps<typeof RadialGradientBackground>;
+type RotatingGradientProps = React.ComponentProps<typeof RotatingGradientBackground>;
+type SparklesGradientProps = React.ComponentProps<typeof SparklesGradientBackground>;
+
+export type HeroBackgroundVariantProps =
+  | { variant: "plain" }
+  | ({ variant: "animated-grid" } & AnimatedGridProps)
+  | ({ variant: "canvas-reveal" } & CanvasRevealProps)
+  | ({ variant: "cell-wave" } & CellWaveProps)
+  | { variant: "downward-rays-animated" }
+  | { variant: "downward-rays-animated-grid" }
+  | { variant: "downward-rays-static" }
+  | { variant: "downward-rays-static-grid" }
+  | ({ variant: "glowing-orb" } & GlowingOrbProps)
+  | ({ variant: "glowing-orb-sparkles" } & GlowingOrbSparklesProps)
+  | ({ variant: "gradient-bars" } & GradientBarsProps)
+  | ({ variant: "radial-gradient" } & RadialGradientProps)
+  | { variant: "rotated-rays-animated" }
+  | { variant: "rotated-rays-animated-grid" }
+  | { variant: "rotated-rays-static" }
+  | { variant: "rotated-rays-static-grid" }
+  | ({ variant: "rotating-gradient" } & RotatingGradientProps)
+  | ({ variant: "sparkles-gradient" } & SparklesGradientProps);
+
+const heroBackgroundComponents = {
+  "animated-grid": AnimatedGridBackground,
+  "canvas-reveal": CanvasRevealBackground,
+  "cell-wave": CellWaveBackground,
+  "downward-rays": DownwardRaysBackground,
+  "glowing-orb": GlowingOrbBackground,
+  "glowing-orb-sparkles": GlowingOrbSparklesBackground,
+  "gradient-bars": GradientBarsBackground,
+  "radial-gradient": RadialGradientBackground,
+  "rotated-rays": RotatedRaysBackground,
+  "rotating-gradient": RotatingGradientBackground,
+  "sparkles-gradient": SparklesGradientBackground,
+} as const;
+
+const HeroBackgrounds = (props: HeroBackgroundVariantProps) => {
+  if (props.variant === "plain") {
+    return null;
+  }
+
+  const { variant, ...restProps } = props;
+
+  // Handle rotated-rays preset variants
+  if (variant === "rotated-rays-animated") {
+    return <RotatedRaysBackground animated={true} showGrid={false} {...(restProps as any)} />;
+  }
+  if (variant === "rotated-rays-animated-grid") {
+    return <RotatedRaysBackground animated={true} showGrid={true} {...(restProps as any)} />;
+  }
+  if (variant === "rotated-rays-static") {
+    return <RotatedRaysBackground animated={false} showGrid={false} {...(restProps as any)} />;
+  }
+  if (variant === "rotated-rays-static-grid") {
+    return <RotatedRaysBackground animated={false} showGrid={true} {...(restProps as any)} />;
+  }
+
+  // Handle downward-rays preset variants
+  if (variant === "downward-rays-animated") {
+    return <DownwardRaysBackground animated={true} showGrid={false} {...(restProps as any)} />;
+  }
+  if (variant === "downward-rays-animated-grid") {
+    return <DownwardRaysBackground animated={true} showGrid={true} {...(restProps as any)} />;
+  }
+  if (variant === "downward-rays-static") {
+    return <DownwardRaysBackground animated={false} showGrid={false} {...(restProps as any)} />;
+  }
+  if (variant === "downward-rays-static-grid") {
+    return <DownwardRaysBackground animated={false} showGrid={true} {...(restProps as any)} />;
+  }
+
+  const BackgroundComponent = heroBackgroundComponents[variant];
+  return <BackgroundComponent {...(restProps as any)} />;
+};
+
+
+export default HeroBackgrounds;
diff --git a/src/components/background/NoiseBackground.tsx b/src/components/background/NoiseBackground.tsx
new file mode 100644
index 0000000..f5e65de
--- /dev/null
+++ b/src/components/background/NoiseBackground.tsx
@@ -0,0 +1,29 @@
+"use client";
+
+import { cls } from "@/lib/utils";
+
+interface NoiseBackgroundProps {
+    className?: string;
+}
+
+const NoiseBackground = ({ className = "" }: NoiseBackgroundProps) => {
+    return (
+        <div
+            className={cls("fixed inset-0 -z-10 bg-background-accent/10",
+                className
+            )}
+        >
+            <div
+                className="absolute inset-0 bg-repeat mix-blend-overlay opacity-10"
+                style={{
+                    backgroundImage: "url(https://webuild-dev.s3.eu-north-1.amazonaws.com/default/noise.webp)",
+                    backgroundSize: "512px"
+                }}
+                aria-hidden="true"
+            />
+        </div>
+    );
+};
+
+
+export default NoiseBackground;
diff --git a/src/components/background/NoiseDiagonalGradientBackground.tsx b/src/components/background/NoiseDiagonalGradientBackground.tsx
new file mode 100644
index 0000000..abce708
--- /dev/null
+++ b/src/components/background/NoiseDiagonalGradientBackground.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import { cls } from "@/lib/utils";
+
+interface NoiseDiagonalGradientBackgroundProps {
+    className?: string;
+}
+
+const NoiseDiagonalGradientBackground = ({ className = "" }: NoiseDiagonalGradientBackgroundProps) => {
+    return (
+        <div
+            className={cls("fixed inset-0 -z-10 bg-background-accent/10",
+                className
+            )}
+        >
+            <div
+                className="absolute inset-0 overflow-hidden pointer-events-none opacity-100 bg-gradient-to-br from-background via-background-accent/10 to-background-accent/20"
+                aria-hidden="true"
+            />
+            <div
+                className="absolute inset-0 bg-repeat mix-blend-overlay opacity-10"
+                style={{
+                    backgroundImage: "url(https://webuild-dev.s3.eu-north-1.amazonaws.com/default/noise.webp)",
+                    backgroundSize: "512px"
+                }}
+                aria-hidden="true"
+            />
+        </div>
+    );
+};
+
+
+export default NoiseDiagonalGradientBackground;
diff --git a/src/components/background/NoiseGradientBackground.tsx b/src/components/background/NoiseGradientBackground.tsx
new file mode 100644
index 0000000..b56ee51
--- /dev/null
+++ b/src/components/background/NoiseGradientBackground.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import { cls } from "@/lib/utils";
+
+interface NoiseGradientBackgroundProps {
+    className?: string;
+}
+
+const NoiseGradientBackground = ({ className = "" }: NoiseGradientBackgroundProps) => {
+    return (
+        <div
+            className={cls("fixed inset-0 -z-10 bg-accent/10",
+                className
+            )}
+        >
+            <div
+                className="absolute inset-0 overflow-hidden pointer-events-none opacity-100 bg-gradient-to-r from-background via-accent/20 to-primary-cta/20"
+                aria-hidden="true"
+            />
+            <div
+                className="absolute inset-0 bg-repeat mix-blend-overlay opacity-12"
+                style={{
+                    backgroundImage: "url(https://webuild-dev.s3.eu-north-1.amazonaws.com/default/noise.webp)",
+                    backgroundSize: "512px"
+                }}
+                aria-hidden="true"
+            />
+        </div>
+    );
+};
+
+
+export default NoiseGradientBackground;
diff --git a/src/components/background/PlainBackground.tsx b/src/components/background/PlainBackground.tsx
new file mode 100644
index 0000000..f236cef
--- /dev/null
+++ b/src/components/background/PlainBackground.tsx
@@ -0,0 +1,19 @@
+"use client";
+
+import { cls } from "@/lib/utils";
+
+interface PlainBackgroundProps {
+  className?: string;
+}
+
+const PlainBackground = ({ className = "" }: PlainBackgroundProps) => {
+  return (
+    <div
+      className={cls("fixed inset-0 -z-10 bg-background", className)}
+      aria-hidden="true"
+    />
+  );
+};
+
+
+export default PlainBackground;
diff --git a/src/components/background/RadialGradientBackground.tsx b/src/components/background/RadialGradientBackground.tsx
new file mode 100644
index 0000000..4310164
--- /dev/null
+++ b/src/components/background/RadialGradientBackground.tsx
@@ -0,0 +1,38 @@
+'use client';
+
+import { cls } from '@/lib/utils';
+
+interface RadialGradientBackgroundProps {
+  className?: string;
+  centerColor?: string;
+  edgeColor?: string;
+  size?: string;
+  position?: string;
+}
+
+const RadialGradientBackground = ({
+  className = "",
+  centerColor = "var(--background)",
+  edgeColor = "var(--color-background-accent)",
+  size = "130% 130%",
+  position = "50% 15%",
+}: RadialGradientBackgroundProps) => {
+  return (
+    <div
+      className={cls("absolute inset-0 z-0 pointer-events-none select-none md:px-5 md:pb-5", className)}
+    >
+      <div
+        className="relative w-full h-full rounded-b-theme-capped"
+        style={{
+          background: `radial-gradient(${size} at ${position}, ${centerColor} 40%, ${edgeColor} 100%)`,
+          mask: 'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 15%, rgb(0, 0, 0) 55%, rgb(0, 0, 0) 100%)',
+          WebkitMask: 'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 15%, rgb(0, 0, 0) 55%, rgb(0, 0, 0) 100%)',
+        }}
+        aria-hidden="true"
+      />
+    </div>
+  );
+};
+
+
+export default RadialGradientBackground;
diff --git a/src/components/background/RotatedRaysBackground.tsx b/src/components/background/RotatedRaysBackground.tsx
new file mode 100644
index 0000000..d4ab5e4
--- /dev/null
+++ b/src/components/background/RotatedRaysBackground.tsx
@@ -0,0 +1,128 @@
+"use client";
+
+import { cls } from "@/lib/utils";
+
+interface RayConfig {
+    width: number;
+    opacity: number;
+    rotation: number;
+    scale?: number;
+    left?: string;
+    animationDuration: number;
+    animationDelay: number;
+}
+
+interface LightSourceConfig {
+    width: number;
+    height?: number;
+    opacity: number;
+    top: number;
+}
+
+interface RotatedRaysBackgroundProps {
+    animated: boolean;
+    showGrid: boolean;
+    className?: string;
+    containerClassName?: string;
+}
+
+const rays: RayConfig[] = [
+    { width: 35, opacity: 0.85, rotation: -18, animationDuration: 4, animationDelay: 0 },
+    { width: 35, opacity: 0.775, rotation: -12, animationDuration: 3.5, animationDelay: 0.5 },
+    { width: 20, opacity: 0.65, rotation: -5, scale: 0.90, animationDuration: 5, animationDelay: 1.2 },
+    { width: 15, opacity: 0.25, rotation: -3, animationDuration: 3, animationDelay: 0.3 },
+    { width: 40, opacity: 0.45, rotation: 0, scale: 0.79, animationDuration: 4.5, animationDelay: 0.8 },
+    { width: 20, opacity: 0.45, rotation: 6, animationDuration: 3.2, animationDelay: 1.5 },
+    { width: 35, opacity: 0.65, rotation: 9, scale: 0.83, animationDuration: 4.2, animationDelay: 0.2 },
+    { width: 35, opacity: 1, rotation: 14, scale: 0.9, animationDuration: 3.8, animationDelay: 1 },
+];
+
+const lightSources: LightSourceConfig[] = [
+    { width: 1198, opacity: 0.05, top: -352 },
+    { width: 865, height: 929, opacity: 0.15, top: -252 },
+    { width: 865, height: 929, opacity: 0.15, top: -252 },
+];
+
+const RotatedRaysBackground = ({
+    animated,
+    showGrid,
+    className = "",
+    containerClassName = "",
+}: RotatedRaysBackgroundProps) => {
+    return (
+        <div
+            className={cls("absolute inset-0 z-0 overflow-hidden pointer-events-none select-none", className)}
+            aria-hidden="true"
+        >
+            {animated && (
+                <style>
+                    {`
+                        @keyframes rotatedRayPulse {
+                            0%, 100% { opacity: 0; }
+                            50% { opacity: var(--target-opacity); }
+                        }
+                    `}
+                </style>
+            )}
+
+            {showGrid && (
+                <div
+                    className="absolute inset-0 -z-10 bg-background [mask-image:radial-gradient(50%_50%_at_50%_0%,white_0%,transparent_100%)]"
+                    style={{
+                        backgroundImage:
+                            "linear-gradient(to right, color-mix(in srgb, var(--color-background-accent) 20%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--color-background-accent) 10%, transparent) 1px, transparent 1px)",
+                        backgroundSize: "10vw 10vw",
+                        backgroundRepeat: "repeat",
+                    }}
+                />
+            )}
+
+            <div
+                className={cls(
+                    "absolute overflow-hidden w-[1142px] h-[179vh] -top-[571px] -left-[373px]",
+                    "-rotate-[38deg] blur-[16px]",
+                    "[mask:radial-gradient(50%_109%,#000_0%,#000000f6_0%,transparent_96%)]",
+                    containerClassName
+                )}
+            >
+                {rays.map((ray, index) => (
+                    <div
+                        key={`ray-${index}`}
+                        className="absolute overflow-hidden origin-top-right -top-[352px] -bottom-[920px] [background:radial-gradient(50%_50%_at_50%_50%,var(--color-background-accent)_0%,transparent_100%)]"
+                        style={{
+                            width: `${ray.width}px`,
+                            left: ray.left || `calc(50% - ${ray.width / 2}px)`,
+                            transform: `${ray.scale ? `scale(${ray.scale})` : ""} rotate(${ray.rotation}deg)`,
+                            ...(animated
+                                ? {
+                                    "--target-opacity": ray.opacity,
+                                    animation: `rotatedRayPulse ${ray.animationDuration}s ease-in-out ${ray.animationDelay}s infinite both`,
+                                }
+                                : {
+                                    opacity: ray.opacity,
+                                }),
+                        } as React.CSSProperties}
+                    />
+                ))}
+
+                {lightSources.map((source, index) => (
+                    <div
+                        key={`light-source-${index}`}
+                        className="absolute overflow-hidden [background:radial-gradient(50%_50%_at_50%_50%,var(--color-background-accent)_0%,transparent_100%)]"
+                        style={{
+                            width: `${source.width}px`,
+                            height: source.height ? `${source.height}px` : undefined,
+                            top: `${source.top}px`,
+                            bottom: source.height ? undefined : "-46px",
+                            left: `calc(50% - ${source.width / 2}px)`,
+                            opacity: source.opacity,
+                        }}
+                    />
+                ))}
+            </div>
+        </div>
+    );
+};
+
+
+export default RotatedRaysBackground;
diff --git a/src/components/background/RotatingGradientBackground.tsx b/src/components/background/RotatingGradientBackground.tsx
new file mode 100644
index 0000000..e8064af
--- /dev/null
+++ b/src/components/background/RotatingGradientBackground.tsx
@@ -0,0 +1,75 @@
+'use client';
+
+import { cls } from '@/lib/utils';
+import { Sparkles } from './Sparkles';
+
+interface RotatingGradientBackgroundProps {
+  className?: string;
+  gradientColorStart?: string;
+  gradientColorEnd?: string;
+  bigCircleSize?: string;
+  smallCircleSize?: string;
+  blurAmount?: string;
+  opacity?: number;
+  showSparkles?: boolean;
+}
+
+const RotatingGradientBackground = ({
+  className = "",
+  gradientColorStart = "var(--color-background-accent)",
+  gradientColorEnd = "var(--color-background-accent)",
+  bigCircleSize = "28vw",
+  smallCircleSize = "21vw",
+  blurAmount = "10px",
+  opacity = 0.6,
+  showSparkles = true,
+}: RotatingGradientBackgroundProps) => {
+  return (
+    <div
+      className={cls("absolute inset-0 z-0 overflow-hidden pointer-events-none select-none", className)}
+      aria-hidden="true"
+    >
+      <div
+        className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
+        style={{
+          filter: `blur(${blurAmount})`,
+          WebkitFilter: `blur(${blurAmount})`,
+          opacity,
+        }}
+      >
+        <div
+          className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full aspect-square animate-spin-slow opacity-75"
+          style={{
+            width: bigCircleSize,
+            height: bigCircleSize,
+            background: `linear-gradient(229deg, ${gradientColorStart} 10%, color-mix(in srgb, ${gradientColorStart} 0%, transparent) 40%, color-mix(in srgb, ${gradientColorEnd} 0%, transparent) 64%, ${gradientColorEnd} 88%)`,
+          }}
+        />
+        <div
+          className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full aspect-square animate-spin-reverse opacity-75"
+          style={{
+            width: smallCircleSize,
+            height: smallCircleSize,
+            background: `linear-gradient(141deg, ${gradientColorStart} 13%, color-mix(in srgb, ${gradientColorStart} 0%, transparent) 37.5%, color-mix(in srgb, ${gradientColorEnd} 0%, transparent) 64%, ${gradientColorEnd} 88%)`,
+          }}
+        />
+      </div>
+      {showSparkles && (
+        <div
+          className="absolute inset-0"
+          style={{
+            mask: 'radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 22%, rgb(0, 0, 0) 32%, rgb(0, 0, 0) 55%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0) 100%), linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 15%, rgb(0, 0, 0) 85%, rgba(0, 0, 0, 0) 100%)',
+            maskComposite: 'intersect',
+            WebkitMask: 'radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 22%, rgb(0, 0, 0) 32%, rgb(0, 0, 0) 55%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0) 100%), linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 15%, rgb(0, 0, 0) 85%, rgba(0, 0, 0, 0) 100%)',
+            WebkitMaskComposite: 'source-in',
+          }}
+        >
+          <Sparkles particleDensity={60} minSize={0.3} maxSize={0.8} speed={3} />
+        </div>
+      )}
+    </div>
+  );
+};
+
+
+export default RotatingGradientBackground;
diff --git a/src/components/background/Sparkles.tsx b/src/components/background/Sparkles.tsx
new file mode 100644
index 0000000..1291d80
--- /dev/null
+++ b/src/components/background/Sparkles.tsx
@@ -0,0 +1,460 @@
+"use client";
+
+import { useId, useEffect, useState } from "react";
+import Particles, { initParticlesEngine } from "@tsparticles/react";
+import type { Container, SingleOrMultiple } from "@tsparticles/engine";
+import { loadSlim } from "@tsparticles/slim";
+import { cls } from "@/lib/utils";
+import { motion, useAnimation } from "framer-motion";
+
+type SparklesProps = {
+  id?: string;
+  className?: string;
+  background?: string;
+  particleSize?: number;
+  minSize?: number;
+  maxSize?: number;
+  speed?: number;
+  particleColor?: string;
+  particleDensity?: number;
+};
+
+const defaultProps = {
+  minSize: 0.5,
+  maxSize: 1,
+  speed: 4,
+  particleDensity: 100,
+  particleColor: "var(--color-primary-cta)",
+  background: "transparent",
+};
+
+export const Sparkles = (props: SparklesProps) => {
+  const {
+    id,
+    className,
+    background = defaultProps.background,
+    minSize = defaultProps.minSize,
+    maxSize = defaultProps.maxSize,
+    speed = defaultProps.speed,
+    particleColor = defaultProps.particleColor,
+    particleDensity = defaultProps.particleDensity,
+  } = props;
+  const [init, setInit] = useState(false);
+  const [resolvedColor, setResolvedColor] = useState("#ffffff");
+
+  useEffect(() => {
+    if (particleColor?.startsWith('var(')) {
+      const varName = particleColor.match(/var\((.*?)\)/)?.[1];
+      if (varName) {
+        const computed = getComputedStyle(document.documentElement).getPropertyValue(varName).trim();
+        if (computed) {
+          setResolvedColor(computed);
+        }
+      }
+    } else {
+      setResolvedColor(particleColor || "#ffffff");
+    }
+  }, [particleColor]);
+
+  useEffect(() => {
+    initParticlesEngine(async (engine) => {
+      await loadSlim(engine);
+    }).then(() => {
+      setInit(true);
+    });
+  }, []);
+  const controls = useAnimation();
+
+  const particlesLoaded = async (container?: Container) => {
+    if (container) {
+      controls.start({
+        opacity: 1,
+        transition: {
+          duration: 1,
+        },
+      });
+    }
+  };
+
+  const generatedId = useId();
+  return (
+    <motion.div animate={controls} className={cls("absolute inset-0 opacity-0", className)}>
+      {init && (
+        <Particles
+          id={id || generatedId}
+          className={cls("h-full w-full")}
+          particlesLoaded={particlesLoaded}
+          options={{
+            background: {
+              color: {
+                value: background || "transparent",
+              },
+            },
+            fullScreen: {
+              enable: false,
+              zIndex: 1,
+            },
+
+            fpsLimit: 120,
+            interactivity: {
+              events: {
+                onClick: {
+                  enable: true,
+                  mode: "push",
+                },
+                onHover: {
+                  enable: false,
+                  mode: "repulse",
+                },
+                resize: true as any,
+              },
+              modes: {
+                push: {
+                  quantity: 4,
+                },
+                repulse: {
+                  distance: 200,
+                  duration: 0.4,
+                },
+              },
+            },
+            particles: {
+              bounce: {
+                horizontal: {
+                  value: 1,
+                },
+                vertical: {
+                  value: 1,
+                },
+              },
+              collisions: {
+                absorb: {
+                  speed: 2,
+                },
+                bounce: {
+                  horizontal: {
+                    value: 1,
+                  },
+                  vertical: {
+                    value: 1,
+                  },
+                },
+                enable: false,
+                maxSpeed: 50,
+                mode: "bounce",
+                overlap: {
+                  enable: true,
+                  retries: 0,
+                },
+              },
+              color: {
+                value: resolvedColor,
+                animation: {
+                  h: {
+                    count: 0,
+                    enable: false,
+                    speed: 1,
+                    decay: 0,
+                    delay: 0,
+                    sync: true,
+                    offset: 0,
+                  },
+                  s: {
+                    count: 0,
+                    enable: false,
+                    speed: 1,
+                    decay: 0,
+                    delay: 0,
+                    sync: true,
+                    offset: 0,
+                  },
+                  l: {
+                    count: 0,
+                    enable: false,
+                    speed: 1,
+                    decay: 0,
+                    delay: 0,
+                    sync: true,
+                    offset: 0,
+                  },
+                },
+              },
+              effect: {
+                close: true,
+                fill: true,
+                options: {},
+                type: {} as SingleOrMultiple<string> | undefined,
+              },
+              groups: {},
+              move: {
+                angle: {
+                  offset: 0,
+                  value: 90,
+                },
+                attract: {
+                  distance: 200,
+                  enable: false,
+                  rotate: {
+                    x: 3000,
+                    y: 3000,
+                  },
+                },
+                center: {
+                  x: 50,
+                  y: 50,
+                  mode: "percent",
+                  radius: 0,
+                },
+                decay: 0,
+                distance: {},
+                direction: "none",
+                drift: 0,
+                enable: true,
+                gravity: {
+                  acceleration: 9.81,
+                  enable: false,
+                  inverse: false,
+                  maxSpeed: 50,
+                },
+                path: {
+                  clamp: true,
+                  delay: {
+                    value: 0,
+                  },
+                  enable: false,
+                  options: {},
+                },
+                outModes: {
+                  default: "out",
+                },
+                random: false,
+                size: false,
+                speed: {
+                  min: 0.1,
+                  max: 1,
+                },
+                spin: {
+                  acceleration: 0,
+                  enable: false,
+                },
+                straight: false,
+                trail: {
+                  enable: false,
+                  length: 10,
+                  fill: {},
+                },
+                vibrate: false,
+                warp: false,
+              },
+              number: {
+                density: {
+                  enable: true,
+                  width: 400,
+                  height: 400,
+                },
+                limit: {
+                  mode: "delete",
+                  value: 0,
+                },
+                value: particleDensity || 120,
+              },
+              opacity: {
+                value: {
+                  min: 0.1,
+                  max: 1,
+                },
+                animation: {
+                  count: 0,
+                  enable: true,
+                  speed: speed || 4,
+                  decay: 0,
+                  delay: 0,
+                  sync: false,
+                  mode: "auto",
+                  startValue: "random",
+                  destroy: "none",
+                },
+              },
+              reduceDuplicates: false,
+              shadow: {
+                blur: 0,
+                color: {
+                  value: "#000",
+                },
+                enable: false,
+                offset: {
+                  x: 0,
+                  y: 0,
+                },
+              },
+              shape: {
+                close: true,
+                fill: true,
+                options: {},
+                type: "circle",
+              },
+              size: {
+                value: {
+                  min: minSize || 1,
+                  max: maxSize || 3,
+                },
+                animation: {
+                  count: 0,
+                  enable: false,
+                  speed: 5,
+                  decay: 0,
+                  delay: 0,
+                  sync: false,
+                  mode: "auto",
+                  startValue: "random",
+                  destroy: "none",
+                },
+              },
+              stroke: {
+                width: 0,
+              },
+              zIndex: {
+                value: 0,
+                opacityRate: 1,
+                sizeRate: 1,
+                velocityRate: 1,
+              },
+              destroy: {
+                bounds: {},
+                mode: "none",
+                split: {
+                  count: 1,
+                  factor: {
+                    value: 3,
+                  },
+                  rate: {
+                    value: {
+                      min: 4,
+                      max: 9,
+                    },
+                  },
+                  sizeOffset: true,
+                },
+              },
+              roll: {
+                darken: {
+                  enable: false,
+                  value: 0,
+                },
+                enable: false,
+                enlighten: {
+                  enable: false,
+                  value: 0,
+                },
+                mode: "vertical",
+                speed: 25,
+              },
+              tilt: {
+                value: 0,
+                animation: {
+                  enable: false,
+                  speed: 0,
+                  decay: 0,
+                  sync: false,
+                },
+                direction: "clockwise",
+                enable: false,
+              },
+              twinkle: {
+                lines: {
+                  enable: false,
+                  frequency: 0.05,
+                  opacity: 1,
+                },
+                particles: {
+                  enable: false,
+                  frequency: 0.05,
+                  opacity: 1,
+                },
+              },
+              wobble: {
+                distance: 5,
+                enable: false,
+                speed: {
+                  angle: 50,
+                  move: 10,
+                },
+              },
+              life: {
+                count: 0,
+                delay: {
+                  value: 0,
+                  sync: false,
+                },
+                duration: {
+                  value: 0,
+                  sync: false,
+                },
+              },
+              rotate: {
+                value: 0,
+                animation: {
+                  enable: false,
+                  speed: 0,
+                  decay: 0,
+                  sync: false,
+                },
+                direction: "clockwise",
+                path: false,
+              },
+              orbit: {
+                animation: {
+                  count: 0,
+                  enable: false,
+                  speed: 1,
+                  decay: 0,
+                  delay: 0,
+                  sync: false,
+                },
+                enable: false,
+                opacity: 1,
+                rotation: {
+                  value: 45,
+                },
+                width: 1,
+              },
+              links: {
+                blink: false,
+                color: {
+                  value: "#fff",
+                },
+                consent: false,
+                distance: 100,
+                enable: false,
+                frequency: 1,
+                opacity: 1,
+                shadow: {
+                  blur: 5,
+                  color: {
+                    value: "#000",
+                  },
+                  enable: false,
+                },
+                triangles: {
+                  enable: false,
+                  frequency: 1,
+                },
+                width: 1,
+                warp: false,
+              },
+              repulse: {
+                value: 0,
+                enabled: false,
+                distance: 1,
+                duration: 1,
+                factor: 1,
+                speed: 1,
+              },
+            },
+            detectRetina: true,
+          }}
+        />
+      )}
+    </motion.div>
+  );
+};
diff --git a/src/components/background/SparklesGradientBackground.tsx b/src/components/background/SparklesGradientBackground.tsx
new file mode 100644
index 0000000..25ea798
--- /dev/null
+++ b/src/components/background/SparklesGradientBackground.tsx
@@ -0,0 +1,54 @@
+'use client';
+
+import { cls } from '@/lib/utils';
+import { Sparkles } from './Sparkles';
+
+interface SparklesGradientBackgroundProps {
+  className?: string;
+  gradientColor?: string;
+  accentColor?: string;
+  blurAmount?: string;
+}
+
+const SparklesGradientBackground = ({
+  className = "",
+  gradientColor = "var(--color-background-accent)",
+  accentColor = "var(--color-background-accent)",
+  blurAmount = "6vw",
+}: SparklesGradientBackgroundProps) => {
+  return (
+    <div
+      className={cls("absolute inset-0 z-0 overflow-hidden pointer-events-none select-none", className)}
+      style={{
+        mask: 'radial-gradient(ellipse 100% 100% at 50% 0%, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 70%)',
+        WebkitMask: 'radial-gradient(ellipse 100% 100% at 50% 0%, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 70%)',
+      }}
+      aria-hidden="true"
+    >
+      <div
+        className="absolute left-1/2 -translate-x-1/2 w-[65vw] h-[88vh] -top-[59vh] overflow-visible z-0"
+      >
+        <div
+          className="absolute inset-0 rounded-[100%] overflow-hidden"
+          style={{
+            background: `radial-gradient(50% 50% at 50% 50%, ${gradientColor}, color-mix(in srgb, ${gradientColor} 25%, transparent) 41%, color-mix(in srgb, ${gradientColor} 20%, transparent))`,
+            filter: `blur(${blurAmount})`,
+            WebkitFilter: `blur(${blurAmount})`,
+          }}
+        />
+        <div
+          className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[33vw] h-[53vh] rounded-[100%] overflow-hidden"
+          style={{
+            background: `color-mix(in srgb, ${accentColor} 30%, transparent)`,
+            filter: `blur(${blurAmount})`,
+            WebkitFilter: `blur(${blurAmount})`,
+          }}
+        />
+      </div>
+      <Sparkles />
+    </div>
+  );
+};
+
+
+export default SparklesGradientBackground;
diff --git a/src/components/background/floatingGradientBackground/FloatingGradientBackground.css b/src/components/background/floatingGradientBackground/FloatingGradientBackground.css
new file mode 100644
index 0000000..38ce345
--- /dev/null
+++ b/src/components/background/floatingGradientBackground/FloatingGradientBackground.css
@@ -0,0 +1,102 @@
+.floating-gradient-background-container {
+  --circle-size: 80%;
+  --circle-size-small: 60%;
+  --blending: hard-light;
+}
+
+.floating-gradient-background-circle-one {
+  background: radial-gradient(circle at center, var(--color-background-accent) 0, rgba(255, 255, 255, 0) 50%) no-repeat;
+  mix-blend-mode: var(--blending);
+  width: var(--circle-size);
+  height: var(--circle-size);
+  top: calc(50% - var(--circle-size-small) / 2);
+  left: calc(50% - var(--circle-size-small) / 2);
+  transform-origin: center center;
+  animation: moveVertical 20s ease infinite;
+}
+
+.floating-gradient-background-circle-two {
+  background: radial-gradient(circle at center, var(--color-accent) 0, rgba(255, 255, 255, 0) 50%) no-repeat;
+  mix-blend-mode: var(--blending);
+  width: var(--circle-size);
+  height: var(--circle-size);
+  top: calc(50% - var(--circle-size-small) / 2);
+  left: calc(50% - var(--circle-size-small) / 2);
+  transform-origin: calc(50% - 400px);
+  animation: moveInCircle 20s reverse infinite;
+}
+
+.floating-gradient-background-circle-three {
+  background: radial-gradient(circle at center, var(--color-primary-cta) 0, rgba(255, 255, 255, 0) 50%) no-repeat;
+  mix-blend-mode: var(--blending);
+  width: var(--circle-size-small);
+  height: var(--circle-size-small);
+  top: calc(50% - var(--circle-size) / 2 + 200px);
+  left: calc(50% - var(--circle-size) / 2 - 500px);
+  transform-origin: calc(50% + 400px);
+  animation: moveInCircle 30s linear infinite;
+}
+
+.floating-gradient-background-circle-four {
+  background: radial-gradient(circle at center, var(--color-background-accent) 0, rgba(255, 255, 255, 0) 50%) no-repeat;
+  mix-blend-mode: var(--blending);
+  width: var(--circle-size-small);
+  height: var(--circle-size-small);
+  top: calc(50% - var(--circle-size) / 2);
+  left: calc(50% - var(--circle-size) / 2);
+  transform-origin: calc(50% - 200px);
+  animation: moveHorizontal 30s ease infinite;
+}
+
+.floating-gradient-background-circle-five {
+  background: radial-gradient(circle at center, var(--color-primary-cta) 0, rgba(255, 255, 255, 0) 50%) no-repeat;
+  mix-blend-mode: var(--blending);
+  width: calc(var(--circle-size-small) * 2);
+  height: calc(var(--circle-size-small) * 2);
+  top: calc(50% - var(--circle-size));
+  left: calc(50% - var(--circle-size));
+  transform-origin: calc(50% - 800px) calc(50% + 200px);
+  animation: moveInCircle 20s ease infinite;
+}
+
+@keyframes moveInCircle {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  50% {
+    transform: rotate(180deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes moveVertical {
+  0% {
+    transform: translateY(-50%);
+  }
+
+  50% {
+    transform: translateY(50%);
+  }
+
+  100% {
+    transform: translateY(-50%);
+  }
+}
+
+@keyframes moveHorizontal {
+  0% {
+    transform: translateX(-50%) translateY(-10%);
+  }
+
+  50% {
+    transform: translateX(50%) translateY(10%);
+  }
+
+  100% {
+    transform: translateX(-50%) translateY(-10%);
+  }
+}
diff --git a/src/components/background/floatingGradientBackground/FloatingGradientBackground.tsx b/src/components/background/floatingGradientBackground/FloatingGradientBackground.tsx
new file mode 100644
index 0000000..dc02b4a
--- /dev/null
+++ b/src/components/background/floatingGradientBackground/FloatingGradientBackground.tsx
@@ -0,0 +1,36 @@
+"use client";
+
+import { cls } from "@/lib/utils";
+import "./FloatingGradientBackground.css";
+
+interface FloatingGradientBackgroundProps {
+  className?: string;
+}
+
+const FloatingGradientBackground = ({
+  className = "",
+}: FloatingGradientBackgroundProps) => {
+  return (
+    <div
+      className={cls(
+        "fixed top-0 bottom-0 left-0 right-0 w-full h-full z-0 pointer-events-none blur-[40px]",
+        "[mask-image:linear-gradient(to_bottom,transparent,#010101_20%,#010101_80%,transparent)]",
+        "[mask-composite:intersect]",
+        "[-webkit-mask-image:linear-gradient(to_bottom,transparent,#010101_20%,#010101_80%,transparent)]",
+        "[-webkit-mask-composite:destination-in]",
+        "floating-gradient-background-container",
+        className
+      )}
+      aria-hidden="true"
+    >
+      <div className="absolute opacity-[0.075] floating-gradient-background-circle-one" />
+      <div className="absolute opacity-[0.125] floating-gradient-background-circle-two" />
+      <div className="absolute opacity-[0.125] floating-gradient-background-circle-three" />
+      <div className="absolute opacity-[0.15] floating-gradient-background-circle-four" />
+      <div className="absolute opacity-[0.075] floating-gradient-background-circle-five" />
+    </div>
+  );
+};
+
+
+export default FloatingGradientBackground;
diff --git a/src/components/bento/Bento3DCardGrid.tsx b/src/components/bento/Bento3DCardGrid.tsx
new file mode 100644
index 0000000..926eeb0
--- /dev/null
+++ b/src/components/bento/Bento3DCardGrid.tsx
@@ -0,0 +1,121 @@
+"use client";
+
+
+import { cls } from "@/lib/utils";
+import type { LucideIcon } from "lucide-react";
+import type { InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+export type GridCardItem = {
+  name: string;
+  icon: LucideIcon;
+};
+
+interface Bento3DCardGridProps {
+  useInvertedBackground: InvertedBackground;
+  items: [GridCardItem, GridCardItem, GridCardItem, GridCardItem];
+  centerIcon: LucideIcon;
+  className?: string;
+}
+
+const gridItemStyle = {
+  perspective: '1000px',
+  transformStyle: 'preserve-3d' as const,
+};
+
+const EmptyCell = () => (
+  <div
+    className="relative aspect-square card shadow rounded-theme-capped opacity-50"
+    style={gridItemStyle}
+  />
+);
+
+const cardTranslateZ = [
+  'group-hover:[transform:translateZ(10px)]',
+  'group-hover:[transform:translateZ(14px)]',
+  'group-hover:[transform:translateZ(18px)]',
+  'group-hover:[transform:translateZ(22px)]',
+] as const;
+
+const CardCell = ({ name, Icon, cardIndex }: { name: string; Icon: LucideIcon; cardIndex: number }) => (
+  <div
+    className={cls(
+      "relative card shadow aspect-square rounded-theme-capped flex flex-col justify-between p-3 transition-transform duration-500",
+      cardTranslateZ[cardIndex]
+    )}
+    style={gridItemStyle}
+  >
+    <div className="h-6 w-[var(--height-6)] aspect-square rounded-theme primary-button flex items-center justify-center">
+      <Icon className="h-4/10 w-4/10 text-primary-cta-text" strokeWidth={1.5} />
+    </div>
+    <p className="text-xs text-foreground leading-tight line-clamp-4">{name}</p>
+  </div>
+);
+
+const CenterCell = ({ Icon }: { Icon: LucideIcon }) => (
+  <div
+    className="aspect-square flex items-center justify-center bg-transparent border-none overflow-visible"
+    style={gridItemStyle}
+  >
+    <div className="card shadow rounded-full h-6/10 aspect-square flex items-center justify-center">
+      <Icon className="h-4/10 w-4/10 text-foreground" strokeWidth={1.25} />
+    </div>
+  </div>
+);
+
+const Bento3DCardGrid = ({
+  useInvertedBackground,
+  items,
+  centerIcon: CenterIcon,
+  className = "",
+}: Bento3DCardGridProps) => {
+  void useInvertedBackground;
+
+  const gridPositions = [
+    { type: 'empty' },
+    { type: 'card', index: 0 },
+    { type: 'empty' },
+    { type: 'card', index: 1 },
+    { type: 'center' },
+    { type: 'card', index: 2 },
+    { type: 'empty' },
+    { type: 'card', index: 3 },
+    { type: 'empty' },
+  ] as const;
+
+  return (
+    <div
+      className={cls("group w-full h-full", className)}
+      style={{
+        maskImage: 'linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%), linear-gradient(to bottom, transparent 0%, black 5%, black 95%, transparent 100%)',
+        maskComposite: 'intersect',
+        WebkitMaskImage: 'linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%), linear-gradient(to bottom, transparent 0%, black 5%, black 95%, transparent 100%)',
+        WebkitMaskComposite: 'source-in',
+      }}
+    >
+      <div
+        className="w-full h-full grid grid-cols-3 gap-4 -translate-y-9 -translate-x-8"
+        style={{
+          gridAutoRows: '1fr',
+          perspective: '5000px',
+          transformStyle: 'preserve-3d',
+          transform: 'rotateX(45deg) rotateY(20deg) rotate(-25deg) scale(1.1)',
+        }}
+      >
+        {gridPositions.map((pos, index) => {
+          switch (pos.type) {
+            case 'card':
+              const item = items[pos.index];
+              return <CardCell key={index} name={item.name} Icon={item.icon} cardIndex={pos.index} />;
+            case 'center':
+              return <CenterCell key={index} Icon={CenterIcon} />;
+            default:
+              return <EmptyCell key={index} />;
+          }
+        })}
+      </div>
+    </div>
+  );
+};
+
+
+export default Bento3DCardGrid;
diff --git a/src/components/bento/Bento3DStackCards.tsx b/src/components/bento/Bento3DStackCards.tsx
new file mode 100644
index 0000000..15e8bc5
--- /dev/null
+++ b/src/components/bento/Bento3DStackCards.tsx
@@ -0,0 +1,113 @@
+"use client";
+
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { LucideIcon } from "lucide-react";
+import type { InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+interface StackCardProps {
+  Icon: LucideIcon;
+  title: string;
+  subtitle: string;
+  detail: string;
+  iconClassName?: string;
+  titleClassName?: string;
+  subtitleClassName?: string;
+  detailClassName?: string;
+}
+
+interface Bento3DStackCardProps extends StackCardProps {
+  className?: string;
+  useInvertedBackground: InvertedBackground;
+}
+
+const StackCard = ({
+  className = "",
+  Icon,
+  title,
+  subtitle,
+  detail,
+  iconClassName = "",
+  titleClassName = "",
+  subtitleClassName = "",
+  detailClassName = "",
+  useInvertedBackground,
+}: Bento3DStackCardProps) => {
+  const theme = useTheme();
+  const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+  return (
+    <div
+      className={cls(
+        "relative flex h-35 w-80 md:w-25 p-6 -skew-y-[8deg] card rounded-theme-capped flex-col justify-between transition-all duration-700",
+        className
+      )}
+    >
+      <div className="flex items-center gap-2">
+        <div
+          className={cls(
+            "relative h-5 aspect-square primary-button rounded-theme flex items-center justify-center",
+            iconClassName
+          )}
+        >
+          <Icon className="h-1/2 w-auto aspect-square text-primary-cta-text" strokeWidth={1.5} />
+        </div>
+        <p className={cls("text-base", shouldUseLightText ? "text-background" : "text-foreground", titleClassName)}>
+          {title}
+        </p>
+      </div>
+      <p className={cls("whitespace-nowrap text-lg", shouldUseLightText ? "text-background" : "text-foreground", subtitleClassName)}>
+        {subtitle}
+      </p>
+      <p className={cls("text-base", shouldUseLightText ? "text-background" : "text-foreground", detailClassName)}>
+        {detail}
+      </p>
+    </div>
+  );
+};
+
+interface Bento3DStackCardsProps {
+  cards: StackCardProps[];
+  useInvertedBackground: InvertedBackground;
+  className?: string;
+}
+
+const Bento3DStackCards = ({
+  cards,
+  useInvertedBackground,
+  className = "",
+}: Bento3DStackCardsProps) => {
+  const baseClassNames = [
+    "[grid-area:stack] -translate-y-14 hover:-translate-y-20",
+    "[grid-area:stack] translate-x-15 translate-y-0 hover:-translate-y-5",
+    "[grid-area:stack] translate-x-31 translate-y-15 hover:translate-y-10",
+  ];
+
+  const displayCards = cards.slice(0, 3).map((card, index) => ({
+    ...card,
+    className: `${baseClassNames[index]} ${card.iconClassName || ""}`,
+  }));
+
+  return (
+    <div
+      className={cls("h-full grid [grid-template-areas:'stack'] place-items-center opacity-100 animate-in fade-in-0 duration-700", className)}
+      style={{
+        maskImage: "linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%), linear-gradient(to right, black 0%, black 80%, transparent 100%)",
+        WebkitMaskImage: "linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%), linear-gradient(to right, black 0%, black 80%, transparent 100%)",
+        maskComposite: "intersect",
+        WebkitMaskComposite: "source-in"
+      }}
+    >
+      {displayCards.map((cardProps, index) => (
+        <StackCard
+          key={index}
+          {...cardProps}
+          useInvertedBackground={useInvertedBackground}
+        />
+      ))}
+    </div>
+  );
+};
+
+
+export default Bento3DStackCards;
diff --git a/src/components/bento/Bento3DTaskList.tsx b/src/components/bento/Bento3DTaskList.tsx
new file mode 100644
index 0000000..b0faa52
--- /dev/null
+++ b/src/components/bento/Bento3DTaskList.tsx
@@ -0,0 +1,96 @@
+"use client";
+
+import { Fragment } from "react";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { LucideIcon } from "lucide-react";
+import type { InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+export type TaskItem = {
+  icon: LucideIcon;
+  label: string;
+  time: string;
+};
+
+interface Bento3DTaskListProps {
+  title: string;
+  items: TaskItem[];
+  useInvertedBackground: InvertedBackground;
+  className?: string;
+}
+
+const Bento3DTaskList = ({
+  title,
+  items,
+  useInvertedBackground,
+  className = "",
+}: Bento3DTaskListProps) => {
+  const theme = useTheme();
+  const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+  return (
+    <div
+      className={cls("h-full w-full flex items-center justify-center", className)}
+      style={{
+        perspective: "1200px",
+        transformStyle: "preserve-3d",
+        maskImage: "linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%), linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%)",
+        WebkitMaskImage: "linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%), linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%)",
+        maskComposite: "intersect",
+        WebkitMaskComposite: "source-in"
+      }}
+    >
+      <div
+        className={cls(
+          "relative w-80 md:w-25 p-6 card rounded-theme-capped flex flex-col gap-3 translate-x-4 -translate-y-5"
+        )}
+        style={{
+          transform: "rotateX(30deg) rotateY(30deg) rotateZ(-30deg)",
+          transformStyle: "preserve-3d"
+        }}
+      >
+        <div className="flex items-center gap-2">
+          <div className="h-[var(--text-base)] w-auto aspect-square rounded-theme primary-button" />
+          <h3 className={cls("text-base leading-tight", shouldUseLightText ? "text-background" : "text-foreground")}>
+            {title}
+          </h3>
+        </div>
+
+        <div className="relative w-full min-w-0 secondary-button rounded-theme-capped flex flex-col p-5 gap-3">
+          {items.map((item, index) => {
+            const Icon = item.icon;
+            return (
+              <Fragment key={index}>
+                <div
+                  className={cls(
+                    "w-full min-w-0 flex items-center justify-between gap-3"
+                  )}
+                >
+                  <div className="w-full min-w-0 flex items-center gap-3">
+                    <div
+                      className="h-6 w-auto aspect-square rounded-theme flex items-center justify-center primary-button"
+                    >
+                      <Icon className="h-4/10 w-4/10 aspect-square text-primary-cta-text" strokeWidth={1.5} />
+                    </div>
+                    <p className={cls("text-sm truncate", shouldUseLightText ? "text-background" : "text-foreground")}>
+                      {item.label}
+                    </p>
+                  </div>
+                  <p className={cls("text-xs text-nowrap", shouldUseLightText ? "text-background/75" : "text-foreground/75")}>
+                    {item.time}
+                  </p>
+                </div>
+                {index !== items.length - 1 && (
+                  <div className="h-px bg-background-accent/50" />
+                )}
+              </Fragment>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+
+export default Bento3DTaskList;
diff --git a/src/components/bento/BentoAnimatedBarChart.tsx b/src/components/bento/BentoAnimatedBarChart.tsx
new file mode 100644
index 0000000..528a341
--- /dev/null
+++ b/src/components/bento/BentoAnimatedBarChart.tsx
@@ -0,0 +1,76 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { cls } from "@/lib/utils";
+
+type BarData = {
+  defaultHeight: number;
+  hoverHeight: number;
+};
+
+interface BentoAnimatedBarChartProps {
+  bars?: BarData[];
+  className?: string;
+  barClassName?: string;
+}
+
+const defaultBars: BarData[] = [
+  { defaultHeight: 100, hoverHeight: 40 },
+  { defaultHeight: 84, hoverHeight: 100 },
+  { defaultHeight: 62, hoverHeight: 75 },
+  { defaultHeight: 90, hoverHeight: 50 },
+  { defaultHeight: 70, hoverHeight: 90 },
+  { defaultHeight: 50, hoverHeight: 60 },
+  { defaultHeight: 75, hoverHeight: 85 },
+  { defaultHeight: 80, hoverHeight: 70 },
+];
+
+const BentoAnimatedBarChart = ({
+  bars = defaultBars,
+  className = "",
+  barClassName = "",
+}: BentoAnimatedBarChartProps) => {
+  const [activeBar, setActiveBar] = useState(2); // Start at third bar (index 2)
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setActiveBar((prev) => (prev + 1) % bars.length);
+    }, 3000);
+
+    return () => clearInterval(interval);
+  }, [bars.length]);
+
+  return (
+    <div className={cls("group w-full h-full [mask-image:linear-gradient(to_bottom,black_40%,transparent_100%)]", className)}>
+      <style>{`
+        .bento-bar {
+          height: var(--default-height);
+        }
+        @media (min-width: 768px) {
+          .group:hover .bento-bar {
+            height: var(--hover-height) !important;
+          }
+        }
+      `}</style>
+      <div className="w-full h-full flex items-end gap-5">
+        {bars.map((bar, index) => (
+          <div
+            key={index}
+            className={cls("relative bento-bar w-full rounded-theme transition-all duration-500 ease bg-background-accent", barClassName)}
+            style={
+              {
+                "--default-height": `${bar.defaultHeight}%`,
+                "--hover-height": `${bar.hoverHeight}%`,
+              } as React.CSSProperties
+            }
+          >
+            <div className={cls("absolute! inset-0 primary-button rounded-theme transition-opacity ease-in-out duration-500", activeBar === index ? "opacity-100" : "opacity-0")} />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+
+export default BentoAnimatedBarChart;
diff --git a/src/components/bento/BentoChatAnimation.tsx b/src/components/bento/BentoChatAnimation.tsx
new file mode 100644
index 0000000..795e05e
--- /dev/null
+++ b/src/components/bento/BentoChatAnimation.tsx
@@ -0,0 +1,95 @@
+"use client";
+
+
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { LucideIcon } from "lucide-react";
+import { Send } from "lucide-react";
+import type { InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+export type ChatExchange = {
+  userMessage: string;
+  aiResponse: string;
+};
+
+interface BentoChatAnimationProps {
+  aiIcon: LucideIcon;
+  userIcon: LucideIcon;
+  exchanges: ChatExchange[];
+  placeholder: string;
+  useInvertedBackground: InvertedBackground;
+  className?: string;
+}
+
+const BentoChatAnimation = ({
+  aiIcon: AiIcon,
+  userIcon: UserIcon,
+  exchanges,
+  placeholder,
+  useInvertedBackground,
+  className = "",
+}: BentoChatAnimationProps) => {
+  const theme = useTheme();
+  const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+  const messages = exchanges.flatMap((exchange) => [
+    { content: exchange.userMessage, isUser: true },
+    { content: exchange.aiResponse, isUser: false },
+  ]);
+  const duplicatedMessages = [...messages, ...messages];
+
+  return (
+    <div
+      className={cls(
+        "relative h-full w-full flex flex-col overflow-hidden",
+        className
+      )}
+    >
+      <div className="flex-1 overflow-hidden mask-fade-y">
+        <div className="flex flex-col animate-marquee-vertical px-4">
+          {duplicatedMessages.map((message, index) => (
+            <div
+              key={index}
+              className={cls(
+                "flex items-end gap-2 shrink-0 mb-4",
+                message.isUser ? "flex-row-reverse" : "flex-row"
+              )}
+            >
+              {message.isUser ? (
+                <div className="shrink-0 h-8 aspect-square rounded-theme primary-button flex items-center justify-center">
+                  <UserIcon className="h-4/10 w-auto text-primary-cta-text" />
+                </div>
+              ) : (
+                <div className="shrink-0 h-8 aspect-square rounded-theme card shadow flex items-center justify-center">
+                  <AiIcon className={cls("h-4/10 w-auto", shouldUseLightText ? "text-background" : "text-foreground")} />
+                </div>
+              )}
+              <div
+                className={cls(
+                  "max-w-75/100 px-4 py-3 text-sm leading-tight",
+                  message.isUser
+                    ? "primary-button rounded-theme-capped rounded-br-none text-primary-cta-text"
+                    : "card rounded-theme-capped rounded-bl-none",
+                  !message.isUser && (shouldUseLightText ? "text-background" : "text-foreground")
+                )}
+              >
+                {message.content}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+      <div className="card shadow rounded-theme p-2 pl-5 flex items-center gap-2">
+        <p className={cls("flex-1 text-sm truncate", shouldUseLightText ? "text-background/75" : "text-foreground/75")}>
+          {placeholder}
+        </p>
+        <div className="h-7 w-auto aspect-square primary-button rounded-theme flex items-center justify-center">
+          <Send className="h-4/10 w-auto text-primary-cta-text" strokeWidth={1.75} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+
+export default BentoChatAnimation;
diff --git a/src/components/bento/BentoGlobe.tsx b/src/components/bento/BentoGlobe.tsx
new file mode 100644
index 0000000..3d40b7d
--- /dev/null
+++ b/src/components/bento/BentoGlobe.tsx
@@ -0,0 +1,203 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { cls } from "@/lib/utils";
+import createGlobe, { COBEOptions } from "cobe";
+
+// Helper function to convert CSS color to RGB array
+const getRGBFromCSSVar = (varName: string): [number, number, number] => {
+  if (typeof window === "undefined") return [0.5, 0.5, 0.5];
+
+  const value = getComputedStyle(document.documentElement).getPropertyValue(varName).trim();
+
+  // Handle CSS named colors by creating a temporary element to get computed RGB
+  if (value && !value.startsWith("#") && !value.startsWith("rgb") && !value.includes("%") && !value.match(/^\d+\s+\d+\s+\d+$/)) {
+    const temp = document.createElement("div");
+    temp.style.color = value;
+    document.body.appendChild(temp);
+    const computed = getComputedStyle(temp).color;
+    document.body.removeChild(temp);
+
+    if (computed && computed.startsWith("rgb")) {
+      const match = computed.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+      if (match) {
+        const r = parseInt(match[1]) / 255;
+        const g = parseInt(match[2]) / 255;
+        const b = parseInt(match[3]) / 255;
+        return [r, g, b];
+      }
+    }
+  }
+
+  // Handle rgba/rgb format (e.g., "rgba(18, 0, 6, .9)" or "rgb(255, 255, 255)")
+  if (value.startsWith("rgb")) {
+    const match = value.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+    if (match) {
+      const r = parseInt(match[1]) / 255;
+      const g = parseInt(match[2]) / 255;
+      const b = parseInt(match[3]) / 255;
+      return [r, g, b];
+    }
+  }
+
+  // Handle hex format (e.g., "#ffffff", "#ffffffaa", or shorthand "#fff", "#f0f")
+  if (value.startsWith("#")) {
+    let hex = value.replace("#", "");
+    // Expand shorthand hex (e.g., "93f" -> "9933ff")
+    if (hex.length === 3 || hex.length === 4) {
+      hex = hex.split("").map(c => c + c).join("").substring(0, 6);
+    }
+    // Take only first 6 characters (ignore alpha channel if present)
+    const r = parseInt(hex.substring(0, 2), 16) / 255;
+    const g = parseInt(hex.substring(2, 4), 16) / 255;
+    const b = parseInt(hex.substring(4, 6), 16) / 255;
+    return [r, g, b];
+  }
+
+  // Handle HSL format (e.g., "0 0% 100%")
+  if (value.includes("%")) {
+    const [h, s, l] = value.split(/\s+/).map(v => parseFloat(v));
+    // Convert HSL to RGB
+    const sNorm = s / 100;
+    const lNorm = l / 100;
+    const c = (1 - Math.abs(2 * lNorm - 1)) * sNorm;
+    const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
+    const m = lNorm - c / 2;
+    let r = 0, g = 0, b = 0;
+    if (h < 60) { r = c; g = x; b = 0; }
+    else if (h < 120) { r = x; g = c; b = 0; }
+    else if (h < 180) { r = 0; g = c; b = x; }
+    else if (h < 240) { r = 0; g = x; b = c; }
+    else if (h < 300) { r = x; g = 0; b = c; }
+    else { r = c; g = 0; b = x; }
+    return [(r + m), (g + m), (b + m)];
+  }
+
+  // Handle RGB format (e.g., "255 255 255")
+  const [r, g, b] = value.split(/\s+/).map(v => parseFloat(v) / 255);
+  return [r || 0.5, g || 0.5, b || 0.5];
+};
+
+const getGlobeConfig = (): COBEOptions => ({
+  width: 800,
+  height: 800,
+  onRender: () => {},
+  devicePixelRatio: 2,
+  phi: 0,
+  theta: 0.3,
+  dark: 0,
+  diffuse: 0.4,
+  mapSamples: 16000,
+  mapBrightness: 1.2,
+  baseColor: getRGBFromCSSVar("--secondary-cta"),
+  markerColor: getRGBFromCSSVar("--primary-cta"),
+  glowColor: getRGBFromCSSVar("--card"),
+  markers: [
+    { location: [14.5995, 120.9842], size: 0.03 },
+    { location: [19.076, 72.8777], size: 0.1 },
+    { location: [23.8103, 90.4125], size: 0.05 },
+    { location: [30.0444, 31.2357], size: 0.07 },
+    { location: [39.9042, 116.4074], size: 0.08 },
+    { location: [-23.5505, -46.6333], size: 0.1 },
+    { location: [19.4326, -99.1332], size: 0.1 },
+    { location: [40.7128, -74.006], size: 0.1 },
+    { location: [34.6937, 135.5022], size: 0.05 },
+    { location: [41.0082, 28.9784], size: 0.06 },
+  ],
+});
+
+interface GlobeProps {
+  className?: string;
+  config?: COBEOptions;
+}
+
+const GlobeComponent = ({
+  className = "",
+  config,
+}: GlobeProps) => {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const globeRef = useRef<{ destroy: () => void } | null>(null);
+  const phiRef = useRef(0);
+  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
+  const [globeConfig, setGlobeConfig] = useState<COBEOptions | null>(null);
+
+  const onRender = useCallback(
+    (state: Record<string, number>) => {
+      phiRef.current += 0.005;
+      state.phi = phiRef.current;
+      state.width = dimensions.width * 2;
+      state.height = dimensions.width * 2;
+    },
+    [dimensions]
+  );
+
+  const onResize = useCallback(() => {
+    if (canvasRef.current) {
+      const newWidth = canvasRef.current.offsetWidth;
+      setDimensions(prev => {
+        if (prev.width === newWidth) return prev;
+        return { width: newWidth, height: newWidth };
+      });
+    }
+  }, []);
+
+  useEffect(() => {
+    window.addEventListener("resize", onResize);
+    onResize();
+
+    return () => {
+      window.removeEventListener("resize", onResize);
+    };
+  }, [onResize]);
+
+  useEffect(() => {
+    // Initialize globe config with CSS variables
+    const defaultConfig = getGlobeConfig();
+    setGlobeConfig(config ? { ...defaultConfig, ...config } : defaultConfig);
+  }, [config]);
+
+  useEffect(() => {
+    if (!canvasRef.current || dimensions.width === 0 || !globeConfig) return;
+
+    if (globeRef.current) {
+      globeRef.current.destroy();
+    }
+
+    globeRef.current = createGlobe(canvasRef.current, {
+      ...globeConfig,
+      width: dimensions.width * 2,
+      height: dimensions.width * 2,
+      onRender,
+    });
+
+    setTimeout(() => {
+      if (canvasRef.current) {
+        canvasRef.current.style.opacity = "1";
+      }
+    });
+
+    return () => {
+      if (globeRef.current) {
+        globeRef.current.destroy();
+        globeRef.current = null;
+      }
+    };
+  }, [dimensions, globeConfig, onRender]);
+
+  return (
+    <div
+      className={cls(
+        "absolute inset-0 mx-auto w-full aspect-square",
+        className
+      )}
+    >
+      <canvas
+        className="size-full opacity-0 transition-opacity duration-500 [contain:layout_paint_size]"
+        ref={canvasRef}
+      />
+    </div>
+  );
+};
+
+
+export const BentoGlobe = GlobeComponent;
diff --git a/src/components/bento/BentoIconInfoCards.tsx b/src/components/bento/BentoIconInfoCards.tsx
new file mode 100644
index 0000000..9cf4702
--- /dev/null
+++ b/src/components/bento/BentoIconInfoCards.tsx
@@ -0,0 +1,71 @@
+"use client";
+
+
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { LucideIcon } from "lucide-react";
+import type { InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type BentoInfoItem = {
+  icon: LucideIcon;
+  label: string;
+  value: string;
+};
+
+interface BentoIconInfoCardsProps {
+  items: BentoInfoItem[];
+  useInvertedBackground: InvertedBackground;
+  className?: string;
+  cardClassName?: string;
+  iconWrapperClassName?: string;
+  iconClassName?: string;
+  labelClassName?: string;
+  valueClassName?: string;
+}
+
+const BentoIconInfoCards = ({
+  items,
+  useInvertedBackground,
+  className = "",
+  cardClassName = "",
+  iconWrapperClassName = "",
+  iconClassName = "",
+  labelClassName = "",
+  valueClassName = "",
+}: BentoIconInfoCardsProps) => {
+  const theme = useTheme();
+  const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+  const duplicatedItems = [...items, ...items, ...items, ...items];
+
+  return (
+    <div className={cls("h-full min-h-0 overflow-hidden mask-fade-y", className)}>
+      <div className="flex flex-col animate-marquee-vertical px-px">
+        {duplicatedItems.map((item, index) => {
+          const Icon = item.icon;
+          return (
+            <div
+              key={index}
+              className={cls("card shadow rounded-theme-capped p-3 flex items-center justify-between flex-shrink-0 mb-4", cardClassName)}
+            >
+              <div className="w-full min-w-0 flex items-center gap-3">
+                <div className={cls("h-10 w-auto aspect-square rounded-theme flex items-center justify-center secondary-button", iconWrapperClassName)}>
+                  <Icon className={cls("h-4/10 w-4/10 text-secondary-cta-text", iconClassName)} strokeWidth={1.5} />
+                </div>
+                <p className={cls("text-base truncate", shouldUseLightText ? "text-background" : "text-foreground", labelClassName)}>
+                  {item.label}
+                </p>
+              </div>
+              <p className={cls("text-base", shouldUseLightText ? "text-background" : "text-foreground", valueClassName)}>
+                {item.value}
+              </p>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+
+export default BentoIconInfoCards;
diff --git a/src/components/bento/BentoLineChart/BentoLineChart.tsx b/src/components/bento/BentoLineChart/BentoLineChart.tsx
new file mode 100644
index 0000000..20b5fc8
--- /dev/null
+++ b/src/components/bento/BentoLineChart/BentoLineChart.tsx
@@ -0,0 +1,141 @@
+"use client";
+
+
+import {
+  Area,
+  AreaChart,
+  CartesianGrid,
+  YAxis,
+  Tooltip,
+  ResponsiveContainer,
+} from "recharts";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import { formatNumber, calculateYAxisWidth, type ChartDataItem } from "./utils";
+import CustomTooltip from "./CustomTooltip";
+import type { InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+interface BentoLineChartProps {
+  data?: ChartDataItem[];
+  dataKey?: string;
+  metricLabel?: string;
+  isPercentage?: boolean;
+  useInvertedBackground: InvertedBackground;
+  className?: string;
+}
+
+const defaultData: ChartDataItem[] = [
+  { value: 120 },
+  { value: 180 },
+  { value: 150 },
+  { value: 280 },
+  { value: 220 },
+  { value: 350 },
+  { value: 300 },
+  { value: 250 },
+];
+
+const BentoLineChart = ({
+    data = defaultData,
+    dataKey = "value",
+    metricLabel = "Value",
+    isPercentage = false,
+    useInvertedBackground,
+    className = "",
+  }: BentoLineChartProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+    const yAxisWidth = calculateYAxisWidth(data, isPercentage);
+
+    const strokeColor = "var(--primary-cta)";
+    const gridColor = "color-mix(in srgb, var(--background-accent) 30%, transparent)";
+    const tickColor = shouldUseLightText ? "var(--background)" : "var(--foreground)";
+
+    return (
+      <div
+        className={cls("w-full h-full **:outline-none **:focus:outline-none", className)}
+        style={{
+          maskImage: "linear-gradient(to bottom, black 40%, transparent 100%)",
+          WebkitMaskImage: "linear-gradient(to bottom, black 40%, transparent 100%)",
+        }}
+      >
+        <ResponsiveContainer width="100%" height="100%">
+          <AreaChart
+            data={data}
+            margin={{
+              top: 10,
+              right: 5,
+              left: 0,
+              bottom: 14,
+            }}
+          >
+            <defs>
+              <linearGradient id="bentoLineChartFill" x1="0" y1="0" x2="0" y2="1">
+                <stop offset="5%" stopColor={strokeColor} stopOpacity={0.4} />
+                <stop offset="95%" stopColor={strokeColor} stopOpacity={0} />
+              </linearGradient>
+              <linearGradient id="bentoFadeGradient" x1="0" y1="0" x2="1" y2="0">
+                <stop offset="0%" stopColor="black" stopOpacity={0} />
+                <stop offset="5%" stopColor="black" stopOpacity={0} />
+                <stop offset="15%" stopColor="white" stopOpacity={1} />
+                <stop offset="95%" stopColor="white" stopOpacity={1} />
+                <stop offset="100%" stopColor="black" stopOpacity={0} />
+              </linearGradient>
+              <mask id="bentoFadeMask">
+                <rect
+                  x="0"
+                  y="0"
+                  width="100%"
+                  height="100%"
+                  fill="url(#bentoFadeGradient)"
+                />
+              </mask>
+            </defs>
+            <CartesianGrid
+              vertical={false}
+              stroke={gridColor}
+              strokeWidth={1}
+            />
+            <YAxis
+              tickLine={false}
+              axisLine={false}
+              tick={{
+                fill: tickColor,
+                fontSize: 10,
+              }}
+              width={yAxisWidth}
+              tickFormatter={(value) =>
+                isPercentage ? `${value}%` : formatNumber(value)
+              }
+            />
+            <Tooltip
+              content={
+                <CustomTooltip
+                  metricLabel={metricLabel}
+                  isPercentage={isPercentage}
+                  totalItems={data.length}
+                />
+              }
+              cursor={{
+                stroke: gridColor,
+              }}
+            />
+            <Area
+              dataKey={dataKey}
+              type="monotone"
+              fill="url(#bentoLineChartFill)"
+              stroke={strokeColor}
+              strokeWidth={2}
+              mask="url(#bentoFadeMask)"
+              activeDot={{
+                fill: strokeColor,
+                r: 5,
+              }}
+            />
+          </AreaChart>
+        </ResponsiveContainer>
+      </div>
+    );
+};
+
+export default BentoLineChart;
diff --git a/src/components/bento/BentoLineChart/CustomTooltip.tsx b/src/components/bento/BentoLineChart/CustomTooltip.tsx
new file mode 100644
index 0000000..53e9183
--- /dev/null
+++ b/src/components/bento/BentoLineChart/CustomTooltip.tsx
@@ -0,0 +1,61 @@
+"use client";
+
+
+import { formatNumber } from "./utils";
+
+interface CustomTooltipProps {
+  active?: boolean;
+  payload?: Array<{
+    value: number;
+    color: string;
+  }>;
+  label?: number;
+  metricLabel?: string;
+  isPercentage?: boolean;
+  totalItems: number;
+}
+
+const CustomTooltip = ({
+    active,
+    payload,
+    label = 0,
+    metricLabel = "Value",
+    isPercentage = false,
+    totalItems,
+  }: CustomTooltipProps) => {
+    if (active && payload && payload.length) {
+      const value = isPercentage
+        ? `${payload[0].value}%`
+        : formatNumber(payload[0].value);
+      const today = new Date();
+      const daysAgo = totalItems - 1 - label;
+      const date = new Date(today);
+      date.setDate(today.getDate() - daysAgo);
+      return (
+        <div className="card rounded-theme-capped p-3">
+          <p className="text-xs text-foreground mb-2">
+            {date.toLocaleDateString("en-US", {
+              month: "short",
+              day: "numeric",
+              year: "numeric",
+            })}
+          </p>
+          <div className="flex items-center gap-2">
+            <div
+              className="h-1.5 aspect-square rounded-full"
+              style={{
+                backgroundColor: payload[0].color,
+              }}
+            />
+            <span className="text-xs text-foreground">
+              {metricLabel}: {value}
+            </span>
+          </div>
+        </div>
+      );
+    }
+    return null;
+  };
+
+
+export default CustomTooltip;
diff --git a/src/components/bento/BentoLineChart/utils.ts b/src/components/bento/BentoLineChart/utils.ts
new file mode 100644
index 0000000..502b785
--- /dev/null
+++ b/src/components/bento/BentoLineChart/utils.ts
@@ -0,0 +1,33 @@
+export const formatNumber = (value: number): string => {
+  if (value >= 100000) {
+    const millions = value / 1000000;
+    return `${millions.toFixed(1)}M`;
+  }
+  if (value >= 1000) {
+    const thousands = value / 1000;
+    const rounded = Math.round(thousands * 10) / 10;
+    return `${rounded}K`;
+  }
+  return value.toString();
+};
+
+export interface ChartDataItem {
+  value: number;
+}
+
+export const calculateYAxisWidth = (
+  data: ChartDataItem[],
+  isPercentage: boolean
+): number => {
+  const maxValue = Math.max(...data.map((item) => item.value));
+  const formattedMax = isPercentage ? `${maxValue}%` : formatNumber(maxValue);
+
+  let multiplier = 9;
+  if (formattedMax.length === 2) {
+    multiplier = 11;
+  } else if (formattedMax.length === 3) {
+    multiplier = 13;
+  }
+
+  return formattedMax.length * multiplier;
+};
diff --git a/src/components/bento/BentoMap.tsx b/src/components/bento/BentoMap.tsx
new file mode 100644
index 0000000..345111e
--- /dev/null
+++ b/src/components/bento/BentoMap.tsx
@@ -0,0 +1,1459 @@
+"use client";
+
+
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+interface BentoMapProps {
+  useInvertedBackground: InvertedBackground;
+  className?: string;
+}
+
+const BentoMap = ({
+  useInvertedBackground,
+  className = "",
+}: BentoMapProps) => {
+  const theme = useTheme();
+  const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+  const dots = [
+    { left: "25%", top: "54%", delay: "0s" },
+    { left: "68%", top: "21%", delay: "0.5s" },
+    { left: "48%", top: "52.5%", delay: "1s" },
+    { left: "67%", top: "42%", delay: "1.5s" },
+    { left: "55.7%", top: "70.75%", delay: "2s" },
+    { left: "28.5%", top: "33%", delay: "2.5s" },
+    { left: "19%", top: "29.25%", delay: "3s" },
+    { left: "32%", top: "71%", delay: "3.5s" },
+  ];
+
+  return (
+    <div
+      className={cls("h-full w-full flex items-center justify-center", className)}
+      style={{
+        perspective: "1200px",
+        transformStyle: "preserve-3d",
+        maskImage: "linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%), linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%)",
+        WebkitMaskImage: "linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%), linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%)",
+        maskComposite: "intersect",
+        WebkitMaskComposite: "source-in"
+      }}
+    >
+      <div
+        className={cls(
+          "absolute! w-80 md:w-35 h-80 p-6 card rounded-theme-capped flex items-center justify-center translate-x-4 -translate-y-5 overflow-hidden"
+        )}
+        style={{
+          transform: "rotateX(40deg) rotateY(0deg) rotateZ(20deg)",
+          transformStyle: "preserve-3d"
+        }}
+      >
+        <svg
+          viewBox="0 0 84 40"
+          xmlns="http://www.w3.org/2000/svg"
+          className={cls("absolute w-full h-auto", shouldUseLightText ? "text-background" : "text-foreground")}
+          style={{ background: "transparent" }}
+        >
+          <circle cx="5.5" cy="0" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="14.5" cy="0" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="15.5" cy="0" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="16.5" cy="0" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="19.5" cy="0" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="21.5" cy="0" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="22.5" cy="0" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="23.5" cy="0" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="24.5" cy="0" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="30.5" cy="0" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="31.5" cy="0" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="32.5" cy="0" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="33.5" cy="0" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="34.5" cy="0" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="35.5" cy="0" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="36.5" cy="0" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="48.5" cy="0" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="58.5" cy="0" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="59.5" cy="0" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="60.5" cy="0" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="61.5" cy="0" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="62.5" cy="0" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="63.5" cy="0" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="64.5" cy="0" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="65.5" cy="0" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="66.5" cy="0" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="67.5" cy="0" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="68.5" cy="0" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="69.5" cy="0" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="70.5" cy="0" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="71.5" cy="0" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="72.5" cy="0" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="73.5" cy="0" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="74.5" cy="0" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="75.5" cy="0" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="76.5" cy="0" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="77.5" cy="0" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="4" cy="0.8660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="5" cy="0.8660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="6" cy="0.8660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="7" cy="0.8660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="8" cy="0.8660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="12" cy="0.8660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="15" cy="0.8660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="16" cy="0.8660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="17" cy="0.8660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="18" cy="0.8660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="19" cy="0.8660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="20" cy="0.8660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="22" cy="0.8660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="24" cy="0.8660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="25" cy="0.8660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="26" cy="0.8660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="31" cy="0.8660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="32" cy="0.8660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="33" cy="0.8660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="34" cy="0.8660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="35" cy="0.8660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="36" cy="0.8660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="47" cy="0.8660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="48" cy="0.8660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="49" cy="0.8660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="58" cy="0.8660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="59" cy="0.8660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="60" cy="0.8660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="61" cy="0.8660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="62" cy="0.8660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="63" cy="0.8660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="64" cy="0.8660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="65" cy="0.8660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="66" cy="0.8660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="67" cy="0.8660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="68" cy="0.8660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="69" cy="0.8660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="70" cy="0.8660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="71" cy="0.8660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="72" cy="0.8660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="73" cy="0.8660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="74" cy="0.8660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="75" cy="0.8660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="76" cy="0.8660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="77" cy="0.8660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="78" cy="0.8660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="79" cy="0.8660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="82" cy="0.8660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="83" cy="0.8660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="3.5" cy="1.7320508075688772" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="4.5" cy="1.7320508075688772" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="5.5" cy="1.7320508075688772" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="6.5" cy="1.7320508075688772" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="7.5" cy="1.7320508075688772" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="8.5" cy="1.7320508075688772" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="9.5" cy="1.7320508075688772" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="10.5" cy="1.7320508075688772" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="11.5" cy="1.7320508075688772" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="12.5" cy="1.7320508075688772" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="13.5" cy="1.7320508075688772" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="14.5" cy="1.7320508075688772" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="20.5" cy="1.7320508075688772" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="22.5" cy="1.7320508075688772" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="25.5" cy="1.7320508075688772" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="30.5" cy="1.7320508075688772" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="31.5" cy="1.7320508075688772" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="32.5" cy="1.7320508075688772" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="33.5" cy="1.7320508075688772" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="34.5" cy="1.7320508075688772" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="46.5" cy="1.7320508075688772" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="47.5" cy="1.7320508075688772" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="48.5" cy="1.7320508075688772" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="49.5" cy="1.7320508075688772" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="50.5" cy="1.7320508075688772" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="54.5" cy="1.7320508075688772" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="55.5" cy="1.7320508075688772" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="56.5" cy="1.7320508075688772" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="57.5" cy="1.7320508075688772" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="58.5" cy="1.7320508075688772" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="59.5" cy="1.7320508075688772" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="60.5" cy="1.7320508075688772" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="61.5" cy="1.7320508075688772" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="62.5" cy="1.7320508075688772" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="63.5" cy="1.7320508075688772" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="64.5" cy="1.7320508075688772" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="65.5" cy="1.7320508075688772" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="66.5" cy="1.7320508075688772" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="67.5" cy="1.7320508075688772" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="68.5" cy="1.7320508075688772" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="69.5" cy="1.7320508075688772" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="70.5" cy="1.7320508075688772" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="71.5" cy="1.7320508075688772" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="72.5" cy="1.7320508075688772" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="73.5" cy="1.7320508075688772" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="74.5" cy="1.7320508075688772" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="75.5" cy="1.7320508075688772" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="76.5" cy="1.7320508075688772" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="77.5" cy="1.7320508075688772" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="78.5" cy="1.7320508075688772" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="79.5" cy="1.7320508075688772" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="80.5" cy="1.7320508075688772" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="81.5" cy="1.7320508075688772" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="82.5" cy="1.7320508075688772" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="83.5" cy="1.7320508075688772" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="0" cy="2.598076211353316" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="4" cy="2.598076211353316" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="5" cy="2.598076211353316" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="6" cy="2.598076211353316" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="7" cy="2.598076211353316" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="8" cy="2.598076211353316" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="9" cy="2.598076211353316" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="10" cy="2.598076211353316" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="11" cy="2.598076211353316" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="12" cy="2.598076211353316" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="13" cy="2.598076211353316" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="14" cy="2.598076211353316" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="15" cy="2.598076211353316" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="16" cy="2.598076211353316" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="17" cy="2.598076211353316" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="18" cy="2.598076211353316" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="19" cy="2.598076211353316" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="20" cy="2.598076211353316" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="21" cy="2.598076211353316" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="22" cy="2.598076211353316" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="25" cy="2.598076211353316" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="26" cy="2.598076211353316" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="27" cy="2.598076211353316" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="30" cy="2.598076211353316" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="31" cy="2.598076211353316" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="32" cy="2.598076211353316" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="33" cy="2.598076211353316" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="34" cy="2.598076211353316" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="46" cy="2.598076211353316" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="47" cy="2.598076211353316" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="48" cy="2.598076211353316" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="49" cy="2.598076211353316" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="50" cy="2.598076211353316" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="51" cy="2.598076211353316" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="54" cy="2.598076211353316" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="55" cy="2.598076211353316" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="56" cy="2.598076211353316" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="57" cy="2.598076211353316" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="58" cy="2.598076211353316" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="60" cy="2.598076211353316" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="61" cy="2.598076211353316" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="62" cy="2.598076211353316" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="63" cy="2.598076211353316" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="64" cy="2.598076211353316" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="65" cy="2.598076211353316" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="66" cy="2.598076211353316" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="67" cy="2.598076211353316" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="68" cy="2.598076211353316" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="69" cy="2.598076211353316" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="70" cy="2.598076211353316" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="71" cy="2.598076211353316" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="72" cy="2.598076211353316" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="73" cy="2.598076211353316" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="74" cy="2.598076211353316" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="75" cy="2.598076211353316" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="76" cy="2.598076211353316" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="77" cy="2.598076211353316" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="78" cy="2.598076211353316" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="79" cy="2.598076211353316" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="80" cy="2.598076211353316" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="81" cy="2.598076211353316" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="82" cy="2.598076211353316" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="83" cy="2.598076211353316" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="0.5" cy="3.4641016151377544" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="1.5" cy="3.4641016151377544" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="3.5" cy="3.4641016151377544" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="4.5" cy="3.4641016151377544" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="5.5" cy="3.4641016151377544" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="6.5" cy="3.4641016151377544" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="7.5" cy="3.4641016151377544" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="8.5" cy="3.4641016151377544" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="9.5" cy="3.4641016151377544" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="10.5" cy="3.4641016151377544" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="11.5" cy="3.4641016151377544" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="12.5" cy="3.4641016151377544" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="13.5" cy="3.4641016151377544" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="14.5" cy="3.4641016151377544" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="15.5" cy="3.4641016151377544" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="16.5" cy="3.4641016151377544" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="17.5" cy="3.4641016151377544" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="18.5" cy="3.4641016151377544" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="19.5" cy="3.4641016151377544" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="20.5" cy="3.4641016151377544" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="21.5" cy="3.4641016151377544" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="25.5" cy="3.4641016151377544" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="30.5" cy="3.4641016151377544" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="31.5" cy="3.4641016151377544" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="32.5" cy="3.4641016151377544" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="36.5" cy="3.4641016151377544" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="37.5" cy="3.4641016151377544" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="38.5" cy="3.4641016151377544" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="45.5" cy="3.4641016151377544" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="46.5" cy="3.4641016151377544" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="48.5" cy="3.4641016151377544" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="49.5" cy="3.4641016151377544" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="51.5" cy="3.4641016151377544" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="52.5" cy="3.4641016151377544" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="53.5" cy="3.4641016151377544" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="54.5" cy="3.4641016151377544" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="55.5" cy="3.4641016151377544" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="56.5" cy="3.4641016151377544" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="57.5" cy="3.4641016151377544" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="58.5" cy="3.4641016151377544" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="59.5" cy="3.4641016151377544" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="60.5" cy="3.4641016151377544" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="61.5" cy="3.4641016151377544" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="62.5" cy="3.4641016151377544" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="63.5" cy="3.4641016151377544" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="64.5" cy="3.4641016151377544" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="65.5" cy="3.4641016151377544" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="66.5" cy="3.4641016151377544" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="67.5" cy="3.4641016151377544" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="68.5" cy="3.4641016151377544" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="69.5" cy="3.4641016151377544" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="70.5" cy="3.4641016151377544" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="71.5" cy="3.4641016151377544" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="72.5" cy="3.4641016151377544" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="73.5" cy="3.4641016151377544" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="74.5" cy="3.4641016151377544" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="75.5" cy="3.4641016151377544" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="76.5" cy="3.4641016151377544" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="77.5" cy="3.4641016151377544" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="78.5" cy="3.4641016151377544" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="79.5" cy="3.4641016151377544" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="80.5" cy="3.4641016151377544" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="81.5" cy="3.4641016151377544" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="82.5" cy="3.4641016151377544" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="83.5" cy="3.4641016151377544" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="5" cy="4.330127018922193" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="6" cy="4.330127018922193" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="7" cy="4.330127018922193" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="8" cy="4.330127018922193" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="9" cy="4.330127018922193" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="10" cy="4.330127018922193" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="11" cy="4.330127018922193" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="12" cy="4.330127018922193" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="13" cy="4.330127018922193" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="14" cy="4.330127018922193" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="15" cy="4.330127018922193" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="16" cy="4.330127018922193" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="17" cy="4.330127018922193" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="18" cy="4.330127018922193" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="19" cy="4.330127018922193" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="20" cy="4.330127018922193" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="22" cy="4.330127018922193" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="23" cy="4.330127018922193" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="25" cy="4.330127018922193" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="26" cy="4.330127018922193" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="30" cy="4.330127018922193" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="31" cy="4.330127018922193" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="32" cy="4.330127018922193" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="37" cy="4.330127018922193" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="38" cy="4.330127018922193" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="45" cy="4.330127018922193" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="46" cy="4.330127018922193" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="48" cy="4.330127018922193" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="49" cy="4.330127018922193" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="50" cy="4.330127018922193" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="51" cy="4.330127018922193" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="52" cy="4.330127018922193" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="53" cy="4.330127018922193" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="54" cy="4.330127018922193" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="55" cy="4.330127018922193" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="56" cy="4.330127018922193" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="57" cy="4.330127018922193" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="58" cy="4.330127018922193" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="59" cy="4.330127018922193" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="60" cy="4.330127018922193" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="61" cy="4.330127018922193" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="62" cy="4.330127018922193" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="63" cy="4.330127018922193" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="64" cy="4.330127018922193" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="65" cy="4.330127018922193" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="66" cy="4.330127018922193" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="67" cy="4.330127018922193" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="68" cy="4.330127018922193" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="69" cy="4.330127018922193" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="70" cy="4.330127018922193" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="71" cy="4.330127018922193" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="72" cy="4.330127018922193" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="73" cy="4.330127018922193" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="74" cy="4.330127018922193" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="75" cy="4.330127018922193" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="76" cy="4.330127018922193" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="77" cy="4.330127018922193" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="78" cy="4.330127018922193" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="79" cy="4.330127018922193" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="80" cy="4.330127018922193" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="81" cy="4.330127018922193" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="82" cy="4.330127018922193" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="83" cy="4.330127018922193" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="3.5" cy="5.196152422706632" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="4.5" cy="5.196152422706632" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="5.5" cy="5.196152422706632" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="6.5" cy="5.196152422706632" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="7.5" cy="5.196152422706632" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="8.5" cy="5.196152422706632" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="9.5" cy="5.196152422706632" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="10.5" cy="5.196152422706632" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="11.5" cy="5.196152422706632" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="12.5" cy="5.196152422706632" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="13.5" cy="5.196152422706632" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="14.5" cy="5.196152422706632" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="15.5" cy="5.196152422706632" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="16.5" cy="5.196152422706632" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="17.5" cy="5.196152422706632" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="18.5" cy="5.196152422706632" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="19.5" cy="5.196152422706632" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="22.5" cy="5.196152422706632" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="30.5" cy="5.196152422706632" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="31.5" cy="5.196152422706632" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="43.5" cy="5.196152422706632" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="44.5" cy="5.196152422706632" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="45.5" cy="5.196152422706632" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="47.5" cy="5.196152422706632" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="48.5" cy="5.196152422706632" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="49.5" cy="5.196152422706632" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="50.5" cy="5.196152422706632" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="51.5" cy="5.196152422706632" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="52.5" cy="5.196152422706632" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="53.5" cy="5.196152422706632" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="54.5" cy="5.196152422706632" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="55.5" cy="5.196152422706632" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="56.5" cy="5.196152422706632" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="57.5" cy="5.196152422706632" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="58.5" cy="5.196152422706632" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="59.5" cy="5.196152422706632" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="60.5" cy="5.196152422706632" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="61.5" cy="5.196152422706632" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="62.5" cy="5.196152422706632" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="63.5" cy="5.196152422706632" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="64.5" cy="5.196152422706632" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="65.5" cy="5.196152422706632" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="66.5" cy="5.196152422706632" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="67.5" cy="5.196152422706632" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="68.5" cy="5.196152422706632" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="69.5" cy="5.196152422706632" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="70.5" cy="5.196152422706632" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="71.5" cy="5.196152422706632" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="72.5" cy="5.196152422706632" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="73.5" cy="5.196152422706632" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="74.5" cy="5.196152422706632" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="75.5" cy="5.196152422706632" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="76.5" cy="5.196152422706632" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="77.5" cy="5.196152422706632" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="78.5" cy="5.196152422706632" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="79.5" cy="5.196152422706632" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="81.5" cy="5.196152422706632" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="82.5" cy="5.196152422706632" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="4" cy="6.06217782649107" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="5" cy="6.06217782649107" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="6" cy="6.06217782649107" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="7" cy="6.06217782649107" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="8" cy="6.06217782649107" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="9" cy="6.06217782649107" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="10" cy="6.06217782649107" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="11" cy="6.06217782649107" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="12" cy="6.06217782649107" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="13" cy="6.06217782649107" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="14" cy="6.06217782649107" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="15" cy="6.06217782649107" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="16" cy="6.06217782649107" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="17" cy="6.06217782649107" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="18" cy="6.06217782649107" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="19" cy="6.06217782649107" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="24" cy="6.06217782649107" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="25" cy="6.06217782649107" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="44" cy="6.06217782649107" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="45" cy="6.06217782649107" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="46" cy="6.06217782649107" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="48" cy="6.06217782649107" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="49" cy="6.06217782649107" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="50" cy="6.06217782649107" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="51" cy="6.06217782649107" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="52" cy="6.06217782649107" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="53" cy="6.06217782649107" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="54" cy="6.06217782649107" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="55" cy="6.06217782649107" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="56" cy="6.06217782649107" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="57" cy="6.06217782649107" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="58" cy="6.06217782649107" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="59" cy="6.06217782649107" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="60" cy="6.06217782649107" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="61" cy="6.06217782649107" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="62" cy="6.06217782649107" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="63" cy="6.06217782649107" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="64" cy="6.06217782649107" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="65" cy="6.06217782649107" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="66" cy="6.06217782649107" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="67" cy="6.06217782649107" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="68" cy="6.06217782649107" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="69" cy="6.06217782649107" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="70" cy="6.06217782649107" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="71" cy="6.06217782649107" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="72" cy="6.06217782649107" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="73" cy="6.06217782649107" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="74" cy="6.06217782649107" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="75" cy="6.06217782649107" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="76" cy="6.06217782649107" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="77" cy="6.06217782649107" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="78" cy="6.06217782649107" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="81" cy="6.06217782649107" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="82" cy="6.06217782649107" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="5.5" cy="6.928203230275509" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="10.5" cy="6.928203230275509" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="11.5" cy="6.928203230275509" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="12.5" cy="6.928203230275509" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="13.5" cy="6.928203230275509" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="14.5" cy="6.928203230275509" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="15.5" cy="6.928203230275509" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="16.5" cy="6.928203230275509" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="17.5" cy="6.928203230275509" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="18.5" cy="6.928203230275509" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="19.5" cy="6.928203230275509" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="24.5" cy="6.928203230275509" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="25.5" cy="6.928203230275509" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="26.5" cy="6.928203230275509" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="43.5" cy="6.928203230275509" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="45.5" cy="6.928203230275509" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="47.5" cy="6.928203230275509" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="48.5" cy="6.928203230275509" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="49.5" cy="6.928203230275509" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="50.5" cy="6.928203230275509" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="51.5" cy="6.928203230275509" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="52.5" cy="6.928203230275509" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="53.5" cy="6.928203230275509" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="54.5" cy="6.928203230275509" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="55.5" cy="6.928203230275509" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="56.5" cy="6.928203230275509" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="57.5" cy="6.928203230275509" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="58.5" cy="6.928203230275509" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="59.5" cy="6.928203230275509" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="60.5" cy="6.928203230275509" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="61.5" cy="6.928203230275509" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="62.5" cy="6.928203230275509" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="63.5" cy="6.928203230275509" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="64.5" cy="6.928203230275509" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="65.5" cy="6.928203230275509" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="66.5" cy="6.928203230275509" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="67.5" cy="6.928203230275509" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="68.5" cy="6.928203230275509" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="69.5" cy="6.928203230275509" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="70.5" cy="6.928203230275509" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="71.5" cy="6.928203230275509" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="72.5" cy="6.928203230275509" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="73.5" cy="6.928203230275509" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="74.5" cy="6.928203230275509" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="79.5" cy="6.928203230275509" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="5" cy="7.794228634059947" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="11" cy="7.794228634059947" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="12" cy="7.794228634059947" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="13" cy="7.794228634059947" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="14" cy="7.794228634059947" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="15" cy="7.794228634059947" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="16" cy="7.794228634059947" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="17" cy="7.794228634059947" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="18" cy="7.794228634059947" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="19" cy="7.794228634059947" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="20" cy="7.794228634059947" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="21" cy="7.794228634059947" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="25" cy="7.794228634059947" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="26" cy="7.794228634059947" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="27" cy="7.794228634059947" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="41" cy="7.794228634059947" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="44" cy="7.794228634059947" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="45" cy="7.794228634059947" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="47" cy="7.794228634059947" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="48" cy="7.794228634059947" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="49" cy="7.794228634059947" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="50" cy="7.794228634059947" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="51" cy="7.794228634059947" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="52" cy="7.794228634059947" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="53" cy="7.794228634059947" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="54" cy="7.794228634059947" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="55" cy="7.794228634059947" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="56" cy="7.794228634059947" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="57" cy="7.794228634059947" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="58" cy="7.794228634059947" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="59" cy="7.794228634059947" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="60" cy="7.794228634059947" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="61" cy="7.794228634059947" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="62" cy="7.794228634059947" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="63" cy="7.794228634059947" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="64" cy="7.794228634059947" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="65" cy="7.794228634059947" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="66" cy="7.794228634059947" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="67" cy="7.794228634059947" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="68" cy="7.794228634059947" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="69" cy="7.794228634059947" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="70" cy="7.794228634059947" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="71" cy="7.794228634059947" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="72" cy="7.794228634059947" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="73" cy="7.794228634059947" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="74" cy="7.794228634059947" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="79" cy="7.794228634059947" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="80" cy="7.794228634059947" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="3.5" cy="8.660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="11.5" cy="8.660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="12.5" cy="8.660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="13.5" cy="8.660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="14.5" cy="8.660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="15.5" cy="8.660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="16.5" cy="8.660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="17.5" cy="8.660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="18.5" cy="8.660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="19.5" cy="8.660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="20.5" cy="8.660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="21.5" cy="8.660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="22.5" cy="8.660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="23.5" cy="8.660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="24.5" cy="8.660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="25.5" cy="8.660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="26.5" cy="8.660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="27.5" cy="8.660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="28.5" cy="8.660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="40.5" cy="8.660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="41.5" cy="8.660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="47.5" cy="8.660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="48.5" cy="8.660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="49.5" cy="8.660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="50.5" cy="8.660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="51.5" cy="8.660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="52.5" cy="8.660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="53.5" cy="8.660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="54.5" cy="8.660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="55.5" cy="8.660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="56.5" cy="8.660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="57.5" cy="8.660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="58.5" cy="8.660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="59.5" cy="8.660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="60.5" cy="8.660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="61.5" cy="8.660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="62.5" cy="8.660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="63.5" cy="8.660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="64.5" cy="8.660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="65.5" cy="8.660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="66.5" cy="8.660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="67.5" cy="8.660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="68.5" cy="8.660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="69.5" cy="8.660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="70.5" cy="8.660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="71.5" cy="8.660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="72.5" cy="8.660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="73.5" cy="8.660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="79.5" cy="8.660254037844386" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="12" cy="9.526279441628825" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="13" cy="9.526279441628825" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="14" cy="9.526279441628825" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="15" cy="9.526279441628825" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="16" cy="9.526279441628825" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="17" cy="9.526279441628825" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="18" cy="9.526279441628825" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="19" cy="9.526279441628825" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="20" cy="9.526279441628825" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="21" cy="9.526279441628825" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="22" cy="9.526279441628825" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="24" cy="9.526279441628825" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="25" cy="9.526279441628825" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="26" cy="9.526279441628825" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="27" cy="9.526279441628825" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="28" cy="9.526279441628825" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="40" cy="9.526279441628825" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="41" cy="9.526279441628825" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="42" cy="9.526279441628825" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="44" cy="9.526279441628825" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="45" cy="9.526279441628825" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="46" cy="9.526279441628825" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="47" cy="9.526279441628825" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="48" cy="9.526279441628825" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="49" cy="9.526279441628825" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="50" cy="9.526279441628825" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="51" cy="9.526279441628825" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="52" cy="9.526279441628825" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="53" cy="9.526279441628825" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="54" cy="9.526279441628825" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="55" cy="9.526279441628825" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="56" cy="9.526279441628825" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="57" cy="9.526279441628825" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="58" cy="9.526279441628825" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="59" cy="9.526279441628825" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="60" cy="9.526279441628825" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="61" cy="9.526279441628825" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="62" cy="9.526279441628825" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="63" cy="9.526279441628825" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="64" cy="9.526279441628825" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="65" cy="9.526279441628825" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="66" cy="9.526279441628825" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="67" cy="9.526279441628825" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="68" cy="9.526279441628825" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="69" cy="9.526279441628825" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="70" cy="9.526279441628825" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="71" cy="9.526279441628825" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="72" cy="9.526279441628825" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="73" cy="9.526279441628825" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="74" cy="9.526279441628825" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="75" cy="9.526279441628825" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="79" cy="9.526279441628825" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="12.5" cy="10.392304845413264" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="13.5" cy="10.392304845413264" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="14.5" cy="10.392304845413264" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="15.5" cy="10.392304845413264" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="16.5" cy="10.392304845413264" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="17.5" cy="10.392304845413264" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="18.5" cy="10.392304845413264" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="19.5" cy="10.392304845413264" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="20.5" cy="10.392304845413264" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="21.5" cy="10.392304845413264" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="22.5" cy="10.392304845413264" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="23.5" cy="10.392304845413264" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="24.5" cy="10.392304845413264" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="25.5" cy="10.392304845413264" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="27.5" cy="10.392304845413264" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="28.5" cy="10.392304845413264" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="42.5" cy="10.392304845413264" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="43.5" cy="10.392304845413264" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="44.5" cy="10.392304845413264" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="45.5" cy="10.392304845413264" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="46.5" cy="10.392304845413264" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="47.5" cy="10.392304845413264" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="48.5" cy="10.392304845413264" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="49.5" cy="10.392304845413264" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="50.5" cy="10.392304845413264" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="51.5" cy="10.392304845413264" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="52.5" cy="10.392304845413264" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="53.5" cy="10.392304845413264" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="54.5" cy="10.392304845413264" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="55.5" cy="10.392304845413264" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="56.5" cy="10.392304845413264" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="57.5" cy="10.392304845413264" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="58.5" cy="10.392304845413264" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="59.5" cy="10.392304845413264" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="60.5" cy="10.392304845413264" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="61.5" cy="10.392304845413264" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="62.5" cy="10.392304845413264" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="63.5" cy="10.392304845413264" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="64.5" cy="10.392304845413264" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="65.5" cy="10.392304845413264" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="66.5" cy="10.392304845413264" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="67.5" cy="10.392304845413264" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="68.5" cy="10.392304845413264" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="69.5" cy="10.392304845413264" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="70.5" cy="10.392304845413264" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="71.5" cy="10.392304845413264" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="72.5" cy="10.392304845413264" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="73.5" cy="10.392304845413264" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="74.5" cy="10.392304845413264" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="75.5" cy="10.392304845413264" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="13" cy="11.258330249197702" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="14" cy="11.258330249197702" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="15" cy="11.258330249197702" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="16" cy="11.258330249197702" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="17" cy="11.258330249197702" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="18" cy="11.258330249197702" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="19" cy="11.258330249197702" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="20" cy="11.258330249197702" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="21" cy="11.258330249197702" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="22" cy="11.258330249197702" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="23" cy="11.258330249197702" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="24" cy="11.258330249197702" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="25" cy="11.258330249197702" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="26" cy="11.258330249197702" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="29" cy="11.258330249197702" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="42" cy="11.258330249197702" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="43" cy="11.258330249197702" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="44" cy="11.258330249197702" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="45" cy="11.258330249197702" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="46" cy="11.258330249197702" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="47" cy="11.258330249197702" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="48" cy="11.258330249197702" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="49" cy="11.258330249197702" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="50" cy="11.258330249197702" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="51" cy="11.258330249197702" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="52" cy="11.258330249197702" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="53" cy="11.258330249197702" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="54" cy="11.258330249197702" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="55" cy="11.258330249197702" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="56" cy="11.258330249197702" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="57" cy="11.258330249197702" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="58" cy="11.258330249197702" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="59" cy="11.258330249197702" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="60" cy="11.258330249197702" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="61" cy="11.258330249197702" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="62" cy="11.258330249197702" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="63" cy="11.258330249197702" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="64" cy="11.258330249197702" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="65" cy="11.258330249197702" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="66" cy="11.258330249197702" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="67" cy="11.258330249197702" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="68" cy="11.258330249197702" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="69" cy="11.258330249197702" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="70" cy="11.258330249197702" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="71" cy="11.258330249197702" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="72" cy="11.258330249197702" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="73" cy="11.258330249197702" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="74" cy="11.258330249197702" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="13.5" cy="12.12435565298214" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="14.5" cy="12.12435565298214" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="15.5" cy="12.12435565298214" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="16.5" cy="12.12435565298214" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="17.5" cy="12.12435565298214" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="18.5" cy="12.12435565298214" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="19.5" cy="12.12435565298214" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="20.5" cy="12.12435565298214" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="21.5" cy="12.12435565298214" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="22.5" cy="12.12435565298214" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="23.5" cy="12.12435565298214" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="24.5" cy="12.12435565298214" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="25.5" cy="12.12435565298214" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="27.5" cy="12.12435565298214" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="42.5" cy="12.12435565298214" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="43.5" cy="12.12435565298214" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="44.5" cy="12.12435565298214" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="45.5" cy="12.12435565298214" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="46.5" cy="12.12435565298214" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="47.5" cy="12.12435565298214" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="48.5" cy="12.12435565298214" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="50.5" cy="12.12435565298214" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="51.5" cy="12.12435565298214" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="52.5" cy="12.12435565298214" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="54.5" cy="12.12435565298214" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="55.5" cy="12.12435565298214" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="56.5" cy="12.12435565298214" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="57.5" cy="12.12435565298214" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="58.5" cy="12.12435565298214" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="59.5" cy="12.12435565298214" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="60.5" cy="12.12435565298214" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="61.5" cy="12.12435565298214" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="62.5" cy="12.12435565298214" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="63.5" cy="12.12435565298214" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="64.5" cy="12.12435565298214" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="65.5" cy="12.12435565298214" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="66.5" cy="12.12435565298214" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="67.5" cy="12.12435565298214" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="68.5" cy="12.12435565298214" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="69.5" cy="12.12435565298214" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="70.5" cy="12.12435565298214" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="71.5" cy="12.12435565298214" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="72.5" cy="12.12435565298214" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="73.5" cy="12.12435565298214" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="13" cy="12.990381056766578" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="14" cy="12.990381056766578" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="15" cy="12.990381056766578" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="16" cy="12.990381056766578" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="17" cy="12.990381056766578" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="18" cy="12.990381056766578" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="19" cy="12.990381056766578" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="20" cy="12.990381056766578" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="21" cy="12.990381056766578" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="22" cy="12.990381056766578" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="23" cy="12.990381056766578" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="24" cy="12.990381056766578" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="25" cy="12.990381056766578" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="40" cy="12.990381056766578" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="41" cy="12.990381056766578" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="42" cy="12.990381056766578" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="45" cy="12.990381056766578" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="47" cy="12.990381056766578" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="48" cy="12.990381056766578" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="52" cy="12.990381056766578" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="53" cy="12.990381056766578" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="55" cy="12.990381056766578" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="56" cy="12.990381056766578" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="57" cy="12.990381056766578" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="58" cy="12.990381056766578" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="59" cy="12.990381056766578" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="60" cy="12.990381056766578" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="61" cy="12.990381056766578" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="62" cy="12.990381056766578" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="63" cy="12.990381056766578" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="64" cy="12.990381056766578" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="65" cy="12.990381056766578" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="66" cy="12.990381056766578" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="67" cy="12.990381056766578" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="68" cy="12.990381056766578" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="69" cy="12.990381056766578" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="70" cy="12.990381056766578" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="71" cy="12.990381056766578" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="72" cy="12.990381056766578" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="75" cy="12.990381056766578" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="13.5" cy="13.856406460551018" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="14.5" cy="13.856406460551018" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="15.5" cy="13.856406460551018" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="16.5" cy="13.856406460551018" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="17.5" cy="13.856406460551018" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="18.5" cy="13.856406460551018" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="19.5" cy="13.856406460551018" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="20.5" cy="13.856406460551018" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="21.5" cy="13.856406460551018" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="22.5" cy="13.856406460551018" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="23.5" cy="13.856406460551018" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="24.5" cy="13.856406460551018" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="40.5" cy="13.856406460551018" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="41.5" cy="13.856406460551018" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="48.5" cy="13.856406460551018" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="49.5" cy="13.856406460551018" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="50.5" cy="13.856406460551018" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="51.5" cy="13.856406460551018" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="52.5" cy="13.856406460551018" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="53.5" cy="13.856406460551018" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="55.5" cy="13.856406460551018" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="56.5" cy="13.856406460551018" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="57.5" cy="13.856406460551018" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="58.5" cy="13.856406460551018" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="59.5" cy="13.856406460551018" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="60.5" cy="13.856406460551018" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="61.5" cy="13.856406460551018" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="62.5" cy="13.856406460551018" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="63.5" cy="13.856406460551018" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="64.5" cy="13.856406460551018" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="65.5" cy="13.856406460551018" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="66.5" cy="13.856406460551018" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="67.5" cy="13.856406460551018" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="68.5" cy="13.856406460551018" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="69.5" cy="13.856406460551018" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="70.5" cy="13.856406460551018" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="71.5" cy="13.856406460551018" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="14" cy="14.722431864335457" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="15" cy="14.722431864335457" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="16" cy="14.722431864335457" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="17" cy="14.722431864335457" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="18" cy="14.722431864335457" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="19" cy="14.722431864335457" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="20" cy="14.722431864335457" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="21" cy="14.722431864335457" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="22" cy="14.722431864335457" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="23" cy="14.722431864335457" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="24" cy="14.722431864335457" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="41" cy="14.722431864335457" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="44" cy="14.722431864335457" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="49" cy="14.722431864335457" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="50" cy="14.722431864335457" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="51" cy="14.722431864335457" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="52" cy="14.722431864335457" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="53" cy="14.722431864335457" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="55" cy="14.722431864335457" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="56" cy="14.722431864335457" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="57" cy="14.722431864335457" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="58" cy="14.722431864335457" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="59" cy="14.722431864335457" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="60" cy="14.722431864335457" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="61" cy="14.722431864335457" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="62" cy="14.722431864335457" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="63" cy="14.722431864335457" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="64" cy="14.722431864335457" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="65" cy="14.722431864335457" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="66" cy="14.722431864335457" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="67" cy="14.722431864335457" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="68" cy="14.722431864335457" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="69" cy="14.722431864335457" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="70" cy="14.722431864335457" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="72" cy="14.722431864335457" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="75" cy="14.722431864335457" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="14.5" cy="15.588457268119894" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="15.5" cy="15.588457268119894" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="16.5" cy="15.588457268119894" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="17.5" cy="15.588457268119894" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="18.5" cy="15.588457268119894" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="19.5" cy="15.588457268119894" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="20.5" cy="15.588457268119894" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="21.5" cy="15.588457268119894" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="22.5" cy="15.588457268119894" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="23.5" cy="15.588457268119894" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="40.5" cy="15.588457268119894" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="41.5" cy="15.588457268119894" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="42.5" cy="15.588457268119894" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="43.5" cy="15.588457268119894" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="50.5" cy="15.588457268119894" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="51.5" cy="15.588457268119894" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="52.5" cy="15.588457268119894" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="53.5" cy="15.588457268119894" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="54.5" cy="15.588457268119894" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="55.5" cy="15.588457268119894" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="56.5" cy="15.588457268119894" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="57.5" cy="15.588457268119894" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="58.5" cy="15.588457268119894" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="59.5" cy="15.588457268119894" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="60.5" cy="15.588457268119894" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="61.5" cy="15.588457268119894" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="62.5" cy="15.588457268119894" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="63.5" cy="15.588457268119894" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="64.5" cy="15.588457268119894" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="65.5" cy="15.588457268119894" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="66.5" cy="15.588457268119894" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="67.5" cy="15.588457268119894" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="68.5" cy="15.588457268119894" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="69.5" cy="15.588457268119894" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="73.5" cy="15.588457268119894" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="15" cy="16.454482671904334" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="16" cy="16.454482671904334" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="17" cy="16.454482671904334" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="18" cy="16.454482671904334" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="19" cy="16.454482671904334" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="20" cy="16.454482671904334" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="21" cy="16.454482671904334" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="22" cy="16.454482671904334" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="40" cy="16.454482671904334" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="41" cy="16.454482671904334" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="42" cy="16.454482671904334" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="43" cy="16.454482671904334" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="44" cy="16.454482671904334" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="45" cy="16.454482671904334" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="46" cy="16.454482671904334" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="47" cy="16.454482671904334" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="48" cy="16.454482671904334" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="49" cy="16.454482671904334" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="50" cy="16.454482671904334" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="51" cy="16.454482671904334" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="52" cy="16.454482671904334" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="53" cy="16.454482671904334" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="54" cy="16.454482671904334" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="55" cy="16.454482671904334" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="56" cy="16.454482671904334" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="57" cy="16.454482671904334" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="58" cy="16.454482671904334" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="59" cy="16.454482671904334" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="60" cy="16.454482671904334" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="61" cy="16.454482671904334" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="62" cy="16.454482671904334" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="63" cy="16.454482671904334" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="64" cy="16.454482671904334" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="65" cy="16.454482671904334" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="66" cy="16.454482671904334" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="67" cy="16.454482671904334" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="68" cy="16.454482671904334" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="69" cy="16.454482671904334" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="70" cy="16.454482671904334" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="15.5" cy="17.32050807568877" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="16.5" cy="17.32050807568877" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="17.5" cy="17.32050807568877" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="18.5" cy="17.32050807568877" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="39.5" cy="17.32050807568877" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="40.5" cy="17.32050807568877" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="41.5" cy="17.32050807568877" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="42.5" cy="17.32050807568877" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="43.5" cy="17.32050807568877" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="44.5" cy="17.32050807568877" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="45.5" cy="17.32050807568877" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="46.5" cy="17.32050807568877" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="47.5" cy="17.32050807568877" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="48.5" cy="17.32050807568877" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="49.5" cy="17.32050807568877" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="50.5" cy="17.32050807568877" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="51.5" cy="17.32050807568877" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="52.5" cy="17.32050807568877" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="53.5" cy="17.32050807568877" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="54.5" cy="17.32050807568877" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="55.5" cy="17.32050807568877" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="56.5" cy="17.32050807568877" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="57.5" cy="17.32050807568877" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="58.5" cy="17.32050807568877" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="59.5" cy="17.32050807568877" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="60.5" cy="17.32050807568877" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="61.5" cy="17.32050807568877" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="62.5" cy="17.32050807568877" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="63.5" cy="17.32050807568877" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="64.5" cy="17.32050807568877" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="65.5" cy="17.32050807568877" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="66.5" cy="17.32050807568877" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="67.5" cy="17.32050807568877" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="68.5" cy="17.32050807568877" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="69.5" cy="17.32050807568877" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="16" cy="18.186533479473212" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="17" cy="18.186533479473212" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="18" cy="18.186533479473212" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="19" cy="18.186533479473212" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="39" cy="18.186533479473212" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="40" cy="18.186533479473212" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="41" cy="18.186533479473212" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="42" cy="18.186533479473212" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="43" cy="18.186533479473212" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="44" cy="18.186533479473212" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="45" cy="18.186533479473212" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="46" cy="18.186533479473212" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="47" cy="18.186533479473212" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="48" cy="18.186533479473212" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="49" cy="18.186533479473212" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="50" cy="18.186533479473212" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="51" cy="18.186533479473212" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="52" cy="18.186533479473212" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="53" cy="18.186533479473212" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="54" cy="18.186533479473212" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="55" cy="18.186533479473212" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="58" cy="18.186533479473212" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="59" cy="18.186533479473212" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="60" cy="18.186533479473212" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="61" cy="18.186533479473212" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="62" cy="18.186533479473212" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="63" cy="18.186533479473212" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="64" cy="18.186533479473212" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="65" cy="18.186533479473212" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="66" cy="18.186533479473212" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="67" cy="18.186533479473212" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="68" cy="18.186533479473212" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="69" cy="18.186533479473212" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="17.5" cy="19.05255888325765" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="18.5" cy="19.05255888325765" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="21.5" cy="19.05255888325765" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="38.5" cy="19.05255888325765" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="39.5" cy="19.05255888325765" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="40.5" cy="19.05255888325765" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="41.5" cy="19.05255888325765" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="42.5" cy="19.05255888325765" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="43.5" cy="19.05255888325765" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="44.5" cy="19.05255888325765" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="45.5" cy="19.05255888325765" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="46.5" cy="19.05255888325765" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="47.5" cy="19.05255888325765" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="48.5" cy="19.05255888325765" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="49.5" cy="19.05255888325765" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="50.5" cy="19.05255888325765" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="51.5" cy="19.05255888325765" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="52.5" cy="19.05255888325765" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="53.5" cy="19.05255888325765" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="54.5" cy="19.05255888325765" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="55.5" cy="19.05255888325765" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="59.5" cy="19.05255888325765" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="60.5" cy="19.05255888325765" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="61.5" cy="19.05255888325765" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="64.5" cy="19.05255888325765" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="65.5" cy="19.05255888325765" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="66.5" cy="19.05255888325765" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="19" cy="19.918584287042087" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="20" cy="19.918584287042087" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="21" cy="19.918584287042087" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="39" cy="19.918584287042087" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="40" cy="19.918584287042087" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="41" cy="19.918584287042087" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="42" cy="19.918584287042087" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="43" cy="19.918584287042087" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="44" cy="19.918584287042087" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="45" cy="19.918584287042087" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="46" cy="19.918584287042087" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="47" cy="19.918584287042087" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="48" cy="19.918584287042087" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="49" cy="19.918584287042087" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="50" cy="19.918584287042087" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="51" cy="19.918584287042087" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="52" cy="19.918584287042087" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="53" cy="19.918584287042087" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="54" cy="19.918584287042087" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="60" cy="19.918584287042087" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="61" cy="19.918584287042087" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="65" cy="19.918584287042087" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="66" cy="19.918584287042087" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="67" cy="19.918584287042087" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="21.5" cy="20.784609690826528" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="38.5" cy="20.784609690826528" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="39.5" cy="20.784609690826528" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="40.5" cy="20.784609690826528" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="41.5" cy="20.784609690826528" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="42.5" cy="20.784609690826528" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="43.5" cy="20.784609690826528" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="44.5" cy="20.784609690826528" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="45.5" cy="20.784609690826528" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="46.5" cy="20.784609690826528" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="47.5" cy="20.784609690826528" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="48.5" cy="20.784609690826528" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="49.5" cy="20.784609690826528" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="50.5" cy="20.784609690826528" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="51.5" cy="20.784609690826528" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="52.5" cy="20.784609690826528" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="60.5" cy="20.784609690826528" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="65.5" cy="20.784609690826528" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="66.5" cy="20.784609690826528" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="67.5" cy="20.784609690826528" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="70.5" cy="20.784609690826528" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="22" cy="21.650635094610966" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="25" cy="21.650635094610966" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="26" cy="21.650635094610966" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="27" cy="21.650635094610966" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="39" cy="21.650635094610966" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="40" cy="21.650635094610966" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="41" cy="21.650635094610966" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="42" cy="21.650635094610966" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="43" cy="21.650635094610966" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="44" cy="21.650635094610966" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="45" cy="21.650635094610966" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="46" cy="21.650635094610966" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="47" cy="21.650635094610966" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="48" cy="21.650635094610966" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="49" cy="21.650635094610966" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="50" cy="21.650635094610966" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="51" cy="21.650635094610966" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="52" cy="21.650635094610966" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="53" cy="21.650635094610966" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="60" cy="21.650635094610966" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="67" cy="21.650635094610966" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="71" cy="21.650635094610966" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="24.5" cy="22.516660498395403" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="25.5" cy="22.516660498395403" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="26.5" cy="22.516660498395403" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="27.5" cy="22.516660498395403" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="39.5" cy="22.516660498395403" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="40.5" cy="22.516660498395403" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="41.5" cy="22.516660498395403" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="42.5" cy="22.516660498395403" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="43.5" cy="22.516660498395403" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="44.5" cy="22.516660498395403" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="45.5" cy="22.516660498395403" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="46.5" cy="22.516660498395403" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="47.5" cy="22.516660498395403" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="48.5" cy="22.516660498395403" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="49.5" cy="22.516660498395403" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="50.5" cy="22.516660498395403" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="51.5" cy="22.516660498395403" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="52.5" cy="22.516660498395403" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="53.5" cy="22.516660498395403" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="65.5" cy="22.516660498395403" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="69.5" cy="22.516660498395403" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="24" cy="23.38268590217984" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="25" cy="23.38268590217984" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="26" cy="23.38268590217984" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="27" cy="23.38268590217984" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="28" cy="23.38268590217984" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="29" cy="23.38268590217984" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="30" cy="23.38268590217984" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="45" cy="23.38268590217984" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="46" cy="23.38268590217984" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="47" cy="23.38268590217984" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="48" cy="23.38268590217984" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="49" cy="23.38268590217984" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="50" cy="23.38268590217984" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="51" cy="23.38268590217984" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="52" cy="23.38268590217984" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="65" cy="23.38268590217984" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="66" cy="23.38268590217984" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="69" cy="23.38268590217984" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="23.5" cy="24.24871130596428" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="24.5" cy="24.24871130596428" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="25.5" cy="24.24871130596428" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="26.5" cy="24.24871130596428" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="27.5" cy="24.24871130596428" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="28.5" cy="24.24871130596428" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="29.5" cy="24.24871130596428" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="30.5" cy="24.24871130596428" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="44.5" cy="24.24871130596428" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="45.5" cy="24.24871130596428" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="46.5" cy="24.24871130596428" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="47.5" cy="24.24871130596428" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="48.5" cy="24.24871130596428" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="49.5" cy="24.24871130596428" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="50.5" cy="24.24871130596428" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="51.5" cy="24.24871130596428" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="68.5" cy="24.24871130596428" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="69.5" cy="24.24871130596428" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="23" cy="25.11473670974872" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="24" cy="25.11473670974872" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="25" cy="25.11473670974872" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="26" cy="25.11473670974872" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="27" cy="25.11473670974872" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="28" cy="25.11473670974872" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="29" cy="25.11473670974872" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="30" cy="25.11473670974872" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="31" cy="25.11473670974872" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="32" cy="25.11473670974872" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="33" cy="25.11473670974872" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="45" cy="25.11473670974872" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="46" cy="25.11473670974872" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="47" cy="25.11473670974872" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="48" cy="25.11473670974872" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="49" cy="25.11473670974872" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="50" cy="25.11473670974872" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="51" cy="25.11473670974872" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="74" cy="25.11473670974872" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="75" cy="25.11473670974872" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="76" cy="25.11473670974872" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="23.5" cy="25.980762113533157" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="24.5" cy="25.980762113533157" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="25.5" cy="25.980762113533157" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="26.5" cy="25.980762113533157" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="27.5" cy="25.980762113533157" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="28.5" cy="25.980762113533157" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="29.5" cy="25.980762113533157" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="30.5" cy="25.980762113533157" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="31.5" cy="25.980762113533157" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="32.5" cy="25.980762113533157" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="33.5" cy="25.980762113533157" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="45.5" cy="25.980762113533157" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="46.5" cy="25.980762113533157" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="47.5" cy="25.980762113533157" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="48.5" cy="25.980762113533157" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="49.5" cy="25.980762113533157" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="50.5" cy="25.980762113533157" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="68.5" cy="25.980762113533157" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="74.5" cy="25.980762113533157" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="75.5" cy="25.980762113533157" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="76.5" cy="25.980762113533157" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="24" cy="26.846787517317598" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="25" cy="26.846787517317598" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="26" cy="26.846787517317598" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="27" cy="26.846787517317598" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="28" cy="26.846787517317598" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="29" cy="26.846787517317598" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="30" cy="26.846787517317598" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="31" cy="26.846787517317598" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="32" cy="26.846787517317598" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="33" cy="26.846787517317598" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="46" cy="26.846787517317598" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="47" cy="26.846787517317598" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="48" cy="26.846787517317598" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="49" cy="26.846787517317598" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="50" cy="26.846787517317598" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="51" cy="26.846787517317598" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="24.5" cy="27.712812921102035" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="25.5" cy="27.712812921102035" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="26.5" cy="27.712812921102035" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="27.5" cy="27.712812921102035" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="28.5" cy="27.712812921102035" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="29.5" cy="27.712812921102035" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="30.5" cy="27.712812921102035" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="31.5" cy="27.712812921102035" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="32.5" cy="27.712812921102035" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="45.5" cy="27.712812921102035" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="46.5" cy="27.712812921102035" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="47.5" cy="27.712812921102035" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="48.5" cy="27.712812921102035" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="49.5" cy="27.712812921102035" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="50.5" cy="27.712812921102035" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="53.5" cy="27.712812921102035" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="71.5" cy="27.712812921102035" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="72.5" cy="27.712812921102035" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="73.5" cy="27.712812921102035" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="75.5" cy="27.712812921102035" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="26" cy="28.578838324886473" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="27" cy="28.578838324886473" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="28" cy="28.578838324886473" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="29" cy="28.578838324886473" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="30" cy="28.578838324886473" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="31" cy="28.578838324886473" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="32" cy="28.578838324886473" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="45" cy="28.578838324886473" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="46" cy="28.578838324886473" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="47" cy="28.578838324886473" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="48" cy="28.578838324886473" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="49" cy="28.578838324886473" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="50" cy="28.578838324886473" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="53" cy="28.578838324886473" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="71" cy="28.578838324886473" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="72" cy="28.578838324886473" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="73" cy="28.578838324886473" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="74" cy="28.578838324886473" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="75" cy="28.578838324886473" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="76" cy="28.578838324886473" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="26.5" cy="29.444863728670914" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="27.5" cy="29.444863728670914" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="28.5" cy="29.444863728670914" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="29.5" cy="29.444863728670914" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="30.5" cy="29.444863728670914" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="31.5" cy="29.444863728670914" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="45.5" cy="29.444863728670914" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="46.5" cy="29.444863728670914" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="47.5" cy="29.444863728670914" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="48.5" cy="29.444863728670914" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="49.5" cy="29.444863728670914" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="52.5" cy="29.444863728670914" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="69.5" cy="29.444863728670914" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="70.5" cy="29.444863728670914" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="71.5" cy="29.444863728670914" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="72.5" cy="29.444863728670914" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="73.5" cy="29.444863728670914" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="74.5" cy="29.444863728670914" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="75.5" cy="29.444863728670914" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="76.5" cy="29.444863728670914" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="26" cy="30.31088913245535" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="27" cy="30.31088913245535" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="28" cy="30.31088913245535" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="29" cy="30.31088913245535" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="30" cy="30.31088913245535" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="46" cy="30.31088913245535" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="47" cy="30.31088913245535" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="48" cy="30.31088913245535" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="49" cy="30.31088913245535" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="69" cy="30.31088913245535" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="70" cy="30.31088913245535" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="71" cy="30.31088913245535" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="72" cy="30.31088913245535" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="73" cy="30.31088913245535" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="74" cy="30.31088913245535" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="75" cy="30.31088913245535" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="76" cy="30.31088913245535" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="77" cy="30.31088913245535" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="25.5" cy="31.17691453623979" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="26.5" cy="31.17691453623979" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="27.5" cy="31.17691453623979" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="28.5" cy="31.17691453623979" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="29.5" cy="31.17691453623979" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="46.5" cy="31.17691453623979" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="47.5" cy="31.17691453623979" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="48.5" cy="31.17691453623979" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="69.5" cy="31.17691453623979" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="70.5" cy="31.17691453623979" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="71.5" cy="31.17691453623979" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="72.5" cy="31.17691453623979" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="73.5" cy="31.17691453623979" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="74.5" cy="31.17691453623979" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="75.5" cy="31.17691453623979" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="76.5" cy="31.17691453623979" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="77.5" cy="31.17691453623979" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="26" cy="32.042939940024226" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="27" cy="32.042939940024226" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="28" cy="32.042939940024226" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="29" cy="32.042939940024226" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="47" cy="32.042939940024226" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="48" cy="32.042939940024226" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="70" cy="32.042939940024226" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="71" cy="32.042939940024226" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="74" cy="32.042939940024226" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="75" cy="32.042939940024226" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="76" cy="32.042939940024226" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="77" cy="32.042939940024226" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="25.5" cy="32.90896534380867" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="26.5" cy="32.90896534380867" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="27.5" cy="32.90896534380867" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="28.5" cy="32.90896534380867" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="74.5" cy="32.90896534380867" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="75.5" cy="32.90896534380867" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="76.5" cy="32.90896534380867" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="25" cy="33.77499074759311" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="26" cy="33.77499074759311" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="27" cy="33.77499074759311" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="28" cy="33.77499074759311" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="83" cy="33.77499074759311" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="25.5" cy="34.64101615137754" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="26.5" cy="34.64101615137754" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="76.5" cy="34.64101615137754" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="82.5" cy="34.64101615137754" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="25" cy="35.50704155516198" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="26" cy="35.50704155516198" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="82" cy="35.50704155516198" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="24.5" cy="36.373066958946424" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="25.5" cy="36.373066958946424" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="81.5" cy="36.373066958946424" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="25" cy="37.23909236273086" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="26" cy="37.23909236273086" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="24.5" cy="38.1051177665153" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="25.5" cy="38.1051177665153" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="25" cy="38.97114317029974" r="0.175" fill="currentColor" opacity="0.75" />
+          <circle cx="26" cy="38.97114317029974" r="0.175" fill="currentColor" opacity="0.75" />
+        </svg>
+
+        <div className="absolute inset-0" aria-hidden="true">
+          {dots.map((dot, index) => (
+            <div
+              key={index}
+              className="!absolute h-2 w-auto aspect-square rounded-theme primary-button"
+              style={{
+                left: dot.left,
+                top: dot.top,
+                animation: `map-dot-pulse 3s ease-in-out infinite`,
+                animationDelay: dot.delay,
+              }}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+
+export default BentoMap;
diff --git a/src/components/bento/BentoMarquee.tsx b/src/components/bento/BentoMarquee.tsx
new file mode 100644
index 0000000..1785524
--- /dev/null
+++ b/src/components/bento/BentoMarquee.tsx
@@ -0,0 +1,70 @@
+"use client";
+
+
+import Marquee from "react-fast-marquee";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { LucideIcon } from "lucide-react";
+import type { InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type BentoMarqueeProps = {
+  centerIcon: LucideIcon;
+  useInvertedBackground: InvertedBackground;
+  className?: string;
+} & (
+  | { variant: "text"; texts: string[] }
+  | { variant: "icon"; icons: LucideIcon[] }
+);
+
+const BentoMarquee = (props: BentoMarqueeProps) => {
+  const { centerIcon, useInvertedBackground, className = "" } = props;
+  const theme = useTheme();
+  const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+  const CenterIcon = centerIcon;
+  const items = props.variant === "text"
+    ? [...props.texts, ...props.texts]
+    : [...props.icons, ...props.icons];
+
+  return (
+    <div
+      className={cls("relative h-full w-full flex flex-col overflow-hidden", className)}
+      style={{
+        maskImage: "radial-gradient(ellipse at center, black 0%, black 30%, transparent 70%)",
+        WebkitMaskImage: "radial-gradient(ellipse at center, black 0%, black 30%, transparent 70%)"
+      }}
+    >
+      <div className="absolute top-1/2 left-1/2 -translate-1/2 h-auto w-full flex flex-col justify-center gap-2 opacity-60">
+        {Array.from({ length: 10 }).map((_, rowIndex) => (
+          <Marquee
+            key={rowIndex}
+            gradient={false}
+            speed={10}
+            direction={rowIndex % 2 === 0 ? "left" : "right"}
+          >
+            {items.map((item, itemIndex) => (
+              <div
+                key={itemIndex}
+                className={cls("relative mx-1 card rounded-theme flex items-center justify-center", props.variant === "icon" ? "p-2 aspect-square" : "px-4 py-2")}
+              >
+                {props.variant === "text" ? (
+                  <p className={cls("text-sm leading-tight", shouldUseLightText ? "text-background" : "text-foreground")}>{item as string}</p>
+                ) : (
+                  (() => {
+                    const Icon = item as LucideIcon;
+                    return <Icon className={cls("h-1/2 w-1/2", shouldUseLightText ? "text-background" : "text-foreground")} strokeWidth={1.5} />;
+                  })()
+                )}
+              </div>
+            ))}
+          </Marquee>
+        ))}
+      </div>
+      <div className="absolute! top-1/2 left-1/2 -translate-1/2 z-10 h-18 w-auto aspect-square primary-button backdrop-blur-xs rounded-theme flex items-center justify-center">
+        <CenterIcon className="h-4/10 w-4/10 text-primary-cta-text" strokeWidth={1.5} />
+      </div>
+    </div>
+  );
+};
+
+
+export default BentoMarquee;
diff --git a/src/components/bento/BentoMediaStack.tsx b/src/components/bento/BentoMediaStack.tsx
new file mode 100644
index 0000000..baa01ad
--- /dev/null
+++ b/src/components/bento/BentoMediaStack.tsx
@@ -0,0 +1,81 @@
+"use client";
+
+
+import { cls } from "@/lib/utils";
+import MediaContent from "@/components/shared/MediaContent";
+import type { InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+export type MediaStackItem = {
+    imageSrc?: string;
+    videoSrc?: string;
+    imageAlt?: string;
+};
+
+interface BentoMediaStackProps {
+    items: [MediaStackItem, MediaStackItem, MediaStackItem];
+    useInvertedBackground: InvertedBackground;
+    className?: string;
+}
+
+const BentoMediaStack = ({
+    items,
+    className = "",
+}: BentoMediaStackProps) => {
+    return (
+        <div
+            className={cls("group/stack relative w-full h-full card shadow rounded-theme-capped flex items-center justify-center select-none", className)}
+        >
+            <div
+                className={cls(
+                    "absolute! w-3/5 2xl:w-1/2 aspect-[4/3] p-1 rounded-theme-capped overflow-hidden primary-button z-[1]",
+                    "rotate-8 translate-x-[12%] -translate-y-[8%] transition-all duration-500 ease-out",
+                    "2xl:translate-x-[8%] 2xl:-translate-y-[6%]",
+                    "group-hover/stack:translate-x-[22%] group-hover/stack:rotate-12 group-hover/stack:-translate-y-[14%]",
+                    "2xl:group-hover/stack:translate-x-[16%] 2xl:group-hover/stack:-translate-y-[10%]"
+                )}
+            >
+                <MediaContent
+                    imageSrc={items[2].imageSrc}
+                    videoSrc={items[2].videoSrc}
+                    imageAlt={items[2].imageAlt}
+                    imageClassName="h-full rounded-[calc(var(--radius-theme-capped)*0.95)]!"
+                />
+            </div>
+            <div
+                className={cls(
+                    "absolute! w-3/5 2xl:w-1/2 aspect-[4/3] p-1 rounded-theme-capped overflow-hidden primary-button z-[2]",
+                    "-rotate-8 -translate-x-[12%] -translate-y-[8%] transition-all duration-500 ease-out",
+                    "2xl:-translate-x-[8%] 2xl:-translate-y-[6%]",
+                    "group-hover/stack:-translate-x-[22%] group-hover/stack:-rotate-12 group-hover/stack:-translate-y-[14%]",
+                    "2xl:group-hover/stack:-translate-x-[16%] 2xl:group-hover/stack:-translate-y-[10%]"
+                )}
+            >
+                <MediaContent
+                    imageSrc={items[1].imageSrc}
+                    videoSrc={items[1].videoSrc}
+                    imageAlt={items[1].imageAlt}
+                    imageClassName="h-full rounded-[calc(var(--radius-theme-capped)*0.95)]!"
+                />
+            </div>
+            <div
+                className={cls(
+                    "absolute! w-3/5 2xl:w-1/2 aspect-[4/3] p-1 rounded-theme-capped overflow-hidden primary-button z-30",
+                    "translate-y-[10%] transition-all duration-500 ease-out",
+                    "2xl:translate-y-[7%]",
+                    "group-hover/stack:translate-y-[20%]",
+                    "2xl:group-hover/stack:translate-y-[14%]"
+                )}
+            >
+                <MediaContent
+                    imageSrc={items[0].imageSrc}
+                    videoSrc={items[0].videoSrc}
+                    imageAlt={items[0].imageAlt}
+                    imageClassName="h-full rounded-[calc(var(--radius-theme-capped)*0.95)]!"
+                />
+            </div>
+        </div>
+    );
+};
+
+
+export default BentoMediaStack;
diff --git a/src/components/bento/BentoOrbitingIcons.tsx b/src/components/bento/BentoOrbitingIcons.tsx
new file mode 100644
index 0000000..16d29b0
--- /dev/null
+++ b/src/components/bento/BentoOrbitingIcons.tsx
@@ -0,0 +1,103 @@
+"use client";
+
+
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { LucideIcon } from "lucide-react";
+import type { InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+export type OrbitingItem = {
+  icon: LucideIcon;
+  ring?: 1 | 2 | 3; // Which ring to orbit on (1=innermost, 3=outermost), defaults to 2
+  duration?: number; // Animation duration in seconds, defaults to 10
+};
+
+interface BentoOrbitingIconsProps {
+  centerIcon: LucideIcon;
+  items: OrbitingItem[];
+  useInvertedBackground: InvertedBackground;
+  className?: string;
+}
+
+const BentoOrbitingIcons = ({
+  centerIcon,
+  items,
+  useInvertedBackground,
+  className = "",
+}: BentoOrbitingIconsProps) => {
+  const theme = useTheme();
+  const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+  const CenterIcon = centerIcon;
+
+  const circleStyles = "secondary-button border border-background-accent! shadow rounded-full";
+
+  return (
+    <div
+      className={cls("relative h-full flex flex-col overflow-hidden", className)}
+      style={{
+        perspective: "2000px",
+        maskImage: "linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%), linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%)",
+        WebkitMaskImage: "linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%), linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%)",
+        maskComposite: "intersect",
+        WebkitMaskComposite: "source-in"
+      }}
+    >
+      <div
+        className="flex-1 rounded-t-theme-capped gap-2 flex items-center justify-center w-full h-full inset-x-0 p-2 relative"
+        style={{
+          transform: "rotateY(20deg) rotateX(20deg) rotateZ(-20deg)"
+        }}
+      >
+        {/* Background concentric circles */}
+        <div className={cls("absolute! top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 shrink-0 h-[15rem] w-[15rem] z-[9] opacity-85", circleStyles)} />
+        <div className={cls("absolute! top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 shrink-0 h-[20rem] w-[20rem] z-[8] opacity-65", circleStyles)} />
+        <div className={cls("absolute! top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 shrink-0 h-[25rem] w-[25rem] z-[7] opacity-45", circleStyles)} />
+        <div className={cls("absolute! top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 shrink-0 h-[30rem] w-[30rem] z-[6] opacity-25", circleStyles)} />
+
+        {/* Center circle with icon */}
+        <div className={cls("absolute! inset-0 shrink-0 h-40 w-[10rem] z-10 m-auto flex items-center justify-center", circleStyles)}>
+
+          <div className="absolute! primary-button h-[5rem] w-[5rem] rounded-full flex items-center justify-center" >
+            <CenterIcon className="absolute h-1/2 w-1/2 text-primary-cta-text" strokeWidth={1.25} />
+          </div>
+
+          {/* Orbiting items */}
+          {items.map((item, index) => {
+            const Icon = item.icon;
+            const ring = item.ring || 2;
+            // Ring radii: 7.5rem=120px, 10rem=160px, 12.5rem=200px
+            const radiusMap = { 1: 120, 2: 160, 3: 200 };
+            const radius = radiusMap[ring];
+            const duration = item.duration || 10;
+            // Evenly distribute items around the circle
+            const initialPosition = (360 / items.length) * index;
+
+            return (
+              <div
+                key={index}
+                className={cls("!absolute top-1/2 left-1/2 h-[2.5rem] w-[2.5rem] card shadow rounded-theme flex items-center justify-center")}
+                style={{
+                  marginLeft: '-1.25rem',
+                  marginTop: '-1.25rem',
+                  animation: `orbit ${duration}s linear infinite`,
+                  "--initial-position": `${initialPosition}deg`,
+                  "--translate-position": `${radius}px`,
+                  "--orbit-duration": `${duration}s`,
+                } as React.CSSProperties & {
+                  "--initial-position": string;
+                  "--translate-position": string;
+                  "--orbit-duration": string;
+                }}
+              >
+                <Icon className={cls("h-4/10 w-4/10", shouldUseLightText ? "text-background" : "text-foreground")} strokeWidth={1.5} />
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+
+export default BentoOrbitingIcons;
diff --git a/src/components/bento/BentoPhoneAnimation.tsx b/src/components/bento/BentoPhoneAnimation.tsx
new file mode 100644
index 0000000..7dd2956
--- /dev/null
+++ b/src/components/bento/BentoPhoneAnimation.tsx
@@ -0,0 +1,114 @@
+"use client";
+
+
+import { cls } from "@/lib/utils";
+import type { LucideIcon } from "lucide-react";
+import type { InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+export type PhoneApp = {
+  name: string;
+  icon: LucideIcon;
+};
+
+export type PhoneApps8 = [PhoneApp, PhoneApp, PhoneApp, PhoneApp, PhoneApp, PhoneApp, PhoneApp, PhoneApp];
+
+interface BentoPhoneAnimationProps {
+  statusIcon: LucideIcon;
+  alertIcon: LucideIcon;
+  alertTitle: string;
+  alertMessage: string;
+  apps: PhoneApps8;
+  useInvertedBackground: InvertedBackground;
+  className?: string;
+}
+
+const BentoPhoneAnimation = ({
+  statusIcon: StatusIcon,
+  alertIcon: AlertIcon,
+  alertTitle,
+  alertMessage,
+  apps,
+  className = "",
+}: BentoPhoneAnimationProps) => {
+  return (
+    <div
+      className={cls(
+        "group/phone relative h-full flex flex-auto items-center justify-center overflow-hidden cursor-pointer",
+        className
+      )}
+      style={{
+        maskImage: "linear-gradient(to bottom, black 60%, transparent 100%)",
+        WebkitMaskImage: "linear-gradient(to bottom, black 60%, transparent 100%)",
+      }}
+    >
+      <div
+        className={cls(
+          "absolute inset-x-0 top-0 h-full overflow-hidden isolate",
+          "pt-8 transition-[padding] duration-500 ease-out group-hover/phone:pt-0",
+        )}
+      >
+        <div
+          className={cls(
+            "relative mx-auto card shadow h-100 w-[calc(100%-var(--vw-2)*2)] rounded-[3vw] p-2",
+          )}
+        >
+          <div className="w-full min-w-0 relative h-full overflow-hidden secondary-button rounded-[2.6vw] p-8 pt-6" >
+            <div
+              className="relative z-10 mx-auto h-7 w-auto aspect-square card shadow flex items-center justify-center rounded-full"
+            >
+              <StatusIcon className="h-4/10 w-4/10 text-foreground transition-colors duration-300 group-hover/phone:text-primary-cta" />
+            </div>
+            <div
+              className={cls(
+                "absolute! left-8 right-8 z-2 gap-[0.5vw] p-3 card flex flex-row items-center rounded-theme-capped",
+                "-translate-y-30 scale-90 blur-[2px] opacity-50",
+                "transition-all duration-500 ease-out",
+                "group-hover/phone:translate-y-0 group-hover/phone:scale-100 group-hover/phone:blur-none group-hover/phone:opacity-100",
+              )}
+              style={{ top: "calc(var(--vw-1_5) + var(--height-7) + var(--vw-1_5))" }}
+            >
+              <div
+                className={cls(
+                  "relative h-8 w-auto aspect-square primary-button flex shrink-0 items-center justify-center rounded-theme",
+                )}
+              >
+                <AlertIcon className="h-4/10 w-4/10 text-primary-cta-text" />
+              </div>
+              <div className="min-w-0 flex flex-col gap-0">
+                <h3
+                  className={cls(
+                    "text-sm leading-tight text-foreground",
+                  )}
+                >
+                  {alertTitle}
+                </h3>
+                <p
+                  className={cls(
+                    "text-xs text-foreground/75 leading-tight truncate",
+                  )}
+                >
+                  {alertMessage}
+                </p>
+              </div>
+            </div>
+            <div className="w-full min-w-0 grid grid-cols-4 gap-6 mt-6">
+              {apps.map(({ name, icon: Icon }) => (
+                <div key={name} className="w-full min-w-0 flex flex-col items-center gap-2">
+                  <div className="aspect-square w-full primary-button rounded-theme-capped flex items-center justify-center">
+                    <Icon className="h-2/5 w-2/5 text-primary-cta-text" strokeWidth={1.5} />
+                  </div>
+                  <p className="w-full text-xs text-foreground text-center truncate">
+                    {name}
+                  </p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+
+export default BentoPhoneAnimation;
diff --git a/src/components/bento/BentoRevealIcon.tsx b/src/components/bento/BentoRevealIcon.tsx
new file mode 100644
index 0000000..d21edc2
--- /dev/null
+++ b/src/components/bento/BentoRevealIcon.tsx
@@ -0,0 +1,82 @@
+"use client";
+
+
+import { cls } from "@/lib/utils";
+import type { LucideIcon } from "lucide-react";
+import type { InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+interface BentoRevealIconProps {
+  icon: LucideIcon;
+  useInvertedBackground: InvertedBackground;
+  className?: string;
+}
+
+const BentoRevealIcon = ({
+  icon: Icon,
+  useInvertedBackground,
+  className = "",
+}: BentoRevealIconProps) => {
+  void useInvertedBackground;
+
+  return (
+    <div
+      className={cls(
+        "group relative h-full w-full flex items-center justify-center overflow-hidden",
+        className
+      )}
+      style={{
+        maskImage: "linear-gradient(to right, transparent, black 15%, black 85%, transparent), linear-gradient(to bottom, transparent, black 15%, black 85%, transparent)",
+        WebkitMaskImage: "linear-gradient(to right, transparent, black 15%, black 85%, transparent), linear-gradient(to bottom, transparent, black 15%, black 85%, transparent)",
+        maskComposite: "intersect",
+        WebkitMaskComposite: "source-in",
+      }}
+    >
+      <div className="relative h-26 w-[6.5rem]">
+        <div
+          className="absolute right-full top-1/2 -mt-48 transition-transform duration-500 ease-out group-hover:-translate-x-12"
+          style={{ transform: "translateX(calc(52px + 1px - 2px))" }}
+        >
+          <div className="relative h-96 aspect-[224/280] -scale-x-100">
+            <svg viewBox="0 0 224 280" fill="none" className="absolute inset-0 h-full w-full overflow-visible">
+              <path fill="currentColor" className="text-background-accent/10" d="M8 .25a8 8 0 0 0-8 8v91.704c0 2.258.954 4.411 2.628 5.927l10.744 9.738A7.998 7.998 0 0 1 16 121.546v36.408a7.998 7.998 0 0 1-2.628 5.927l-10.744 9.738A7.998 7.998 0 0 0 0 179.546v92.204a8 8 0 0 0 8 8h308a8 8 0 0 0 8-8V8.25a8 8 0 0 0-8-8H8Z" />
+              <path stroke="currentColor" className="text-background-accent" d="M.5 99.954V8.25A7.5 7.5 0 0 1 8 .75h308a7.5 7.5 0 0 1 7.5 7.5v263.5a7.5 7.5 0 0 1-7.5 7.5H8a7.5 7.5 0 0 1-7.5-7.5v-92.204a7.5 7.5 0 0 1 2.464-5.557l10.744-9.737a8.5 8.5 0 0 0 2.792-6.298v-36.408a8.5 8.5 0 0 0-2.792-6.298l-10.744-9.737A7.5 7.5 0 0 1 .5 99.954Z" />
+            </svg>
+          </div>
+        </div>
+
+        <div
+          className="absolute left-full top-1/2 -mt-48 transition-transform duration-500 ease-out group-hover:translate-x-12"
+          style={{ transform: "translateX(calc(-52px - 1px + 2px))" }}
+        >
+          <div className="relative h-96 aspect-[224/280]">
+            <svg viewBox="0 0 224 280" fill="none" className="absolute inset-0 h-full w-full overflow-visible">
+              <path fill="currentColor" className="text-background-accent/10" d="M8 .25a8 8 0 0 0-8 8v91.704c0 2.258.954 4.411 2.628 5.927l10.744 9.738A7.998 7.998 0 0 1 16 121.546v36.408a7.998 7.998 0 0 1-2.628 5.927l-10.744 9.738A7.998 7.998 0 0 0 0 179.546v92.204a8 8 0 0 0 8 8h308a8 8 0 0 0 8-8V8.25a8 8 0 0 0-8-8H8Z" />
+              <path stroke="currentColor" className="text-background-accent" d="M.5 99.954V8.25A7.5 7.5 0 0 1 8 .75h308a7.5 7.5 0 0 1 7.5 7.5v263.5a7.5 7.5 0 0 1-7.5 7.5H8a7.5 7.5 0 0 1-7.5-7.5v-92.204a7.5 7.5 0 0 1 2.464-5.557l10.744-9.737a8.5 8.5 0 0 0 2.792-6.298v-36.408a8.5 8.5 0 0 0-2.792-6.298l-10.744-9.737A7.5 7.5 0 0 1 .5 99.954Z" />
+            </svg>
+          </div>
+        </div>
+
+        <div className="relative w-full h-full p-2">
+          <div className="relative w-full h-full primary-button rounded-theme flex items-center justify-center">
+            <Icon className="relative z-10 h-4/10 w-auto text-primary-cta-text" strokeWidth={1.25} />
+          </div>
+        </div>
+        <div
+          className="absolute inset-px z-10 rounded-full mix-blend-overlay"
+          style={{ clipPath: "circle(50%)" }}
+        >
+          <div
+            className="absolute inset-0 z-10 transition-transform duration-500 ease-out group-hover:translate-x-0 group-hover:translate-y-0"
+            style={{
+              backgroundImage: "linear-gradient(to bottom right, transparent 30%, black, transparent 70%)",
+              transform: "translate(-65px, -65px)",
+            }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+
+export default BentoRevealIcon;
diff --git a/src/components/bento/BentoTimeline.tsx b/src/components/bento/BentoTimeline.tsx
new file mode 100644
index 0000000..ac57b2f
--- /dev/null
+++ b/src/components/bento/BentoTimeline.tsx
@@ -0,0 +1,114 @@
+"use client";
+
+
+import { cls } from "@/lib/utils";
+import { Check, Loader } from "lucide-react";
+import type { InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+export type TimelineItem = {
+  label: string;
+  detail: string;
+};
+
+interface BentoTimelineProps {
+  heading: string;
+  subheading: string;
+  items: [TimelineItem, TimelineItem, TimelineItem];
+  completedLabel: string;
+  useInvertedBackground: InvertedBackground;
+  className?: string;
+}
+
+const itemDelays = [
+  { check: 'delay-[150ms]', label: 'delay-[200ms]', detail: 'delay-[250ms]' },
+  { check: 'delay-[350ms]', label: 'delay-[400ms]', detail: 'delay-[450ms]' },
+  { check: 'delay-[550ms]', label: 'delay-[600ms]', detail: 'delay-[650ms]' },
+] as const;
+
+const BentoTimeline = ({
+  heading,
+  subheading,
+  items,
+  completedLabel,
+  useInvertedBackground,
+  className = "",
+}: BentoTimelineProps) => {
+  void useInvertedBackground;
+
+  return (
+    <div
+      className={cls(
+        "group relative h-full w-full flex items-center justify-center overflow-hidden",
+        className
+      )}
+    >
+      <div className="absolute inset-0 flex items-center justify-center">
+        <div className="absolute h-full aspect-square rounded-full border border-background-accent/30 scale-100" />
+        <div className="absolute h-full aspect-square rounded-full border border-background-accent/30 scale-80" />
+        <div className="absolute h-full aspect-square rounded-full border border-background-accent/30 scale-60" />
+      </div>
+
+      <div className="relative max-w-full min-w-0 flex flex-col gap-3 p-4 mask-fade-y-small">
+        <div className="card shadow rounded-theme-capped p-3 flex items-center gap-2">
+          <Loader className="h-[var(--text-sm)] w-auto text-primary transition-transform duration-1000 ease-out group-hover:rotate-[360deg]" strokeWidth={1.5} />
+          <p className="text-xs text-foreground truncate">{heading}</p>
+          <p className="text-xs text-foreground/75 ml-auto text-nowrap">{subheading}</p>
+        </div>
+        {items.map((item, index) => (
+          <div
+            key={index}
+            className="card shadow rounded-theme-capped px-3 py-2 flex items-center gap-2"
+          >
+            <div className="relative h-6 w-auto aspect-square card shadow rounded-theme flex items-center justify-center">
+              <div className="absolute! h-3/10 w-3/10 primary-button rounded-theme transition-opacity duration-300 group-hover:opacity-0" />
+              <div
+                className={cls(
+                  "absolute! inset-0 rounded-theme primary-button flex items-center justify-center",
+                  "opacity-0 scale-75 transition-all duration-300",
+                  `group-hover:opacity-100 group-hover:scale-100 ${itemDelays[index].check}`
+                )}
+              >
+                <Check className="h-1/2 w-1/2 text-primary-cta-text" strokeWidth={2} />
+              </div>
+            </div>
+
+            <div className="w-full min-w-0 max-w-full flex-1 flex items-center gap-10 justify-between">
+              <p
+                className={cls(
+                  "text-xs text-foreground truncate opacity-0 transition-all duration-300",
+                  `group-hover:opacity-100 ${itemDelays[index].label}`
+                )}
+              >
+                {item.label}
+              </p>
+              <p
+                className={cls(
+                  "text-xs text-foreground/75 text-nowrap opacity-0 translate-y-1 transition-all duration-300",
+                  `group-hover:opacity-100 group-hover:translate-y-0 ${itemDelays[index].detail}`
+                )}
+              >
+                {item.detail}
+              </p>
+            </div>
+          </div>
+        ))}
+
+        <div className="primary-button rounded-theme-capped p-3 flex items-center justify-center">
+          <div className="absolute flex gap-2 transition-opacity duration-500 delay-[900ms] group-hover:opacity-0">
+            {[0, 1, 2].map((i) => (
+              <div key={i} className="h-2 w-auto aspect-square rounded-theme bg-primary-cta-text" />
+            ))}
+          </div>
+          <p
+            className="text-xs text-primary-cta-text truncate opacity-0 transition-opacity duration-500 delay-[900ms] group-hover:opacity-100"
+          >
+            {completedLabel}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+
+export default BentoTimeline;
diff --git a/src/components/button/Button.tsx b/src/components/button/Button.tsx
new file mode 100644
index 0000000..e7beebb
--- /dev/null
+++ b/src/components/button/Button.tsx
@@ -0,0 +1,40 @@
+"use client";
+
+
+import ButtonHoverMagnetic from "./ButtonHoverMagnetic/ButtonHoverMagnetic";
+import ButtonIconArrow from "./ButtonIconArrow";
+import ButtonShiftHover from "./ButtonShiftHover/ButtonShiftHover";
+import ButtonTextStagger from "./ButtonTextStagger/ButtonTextStagger";
+import ButtonTextUnderline from "./ButtonTextUnderline";
+import ButtonHoverBubble from "./ButtonHoverBubble";
+import ButtonExpandHover from "./ButtonExpandHover";
+import ButtonElasticEffect from "./ButtonElasticEffect/ButtonElasticEffect";
+import ButtonBounceEffect from "./ButtonBounceEffect/ButtonBounceEffect";
+import ButtonDirectionalHover from "./ButtonDirectionalHover/ButtonDirectionalHover";
+import ButtonTextShift from "./ButtonTextShift/ButtonTextShift";
+import type { ButtonVariantProps } from "./types";
+
+export type { ButtonVariant, ButtonVariantProps, ButtonPropsForVariant } from "./types";
+
+const buttonComponents = {
+  "hover-magnetic": ButtonHoverMagnetic,
+  "hover-bubble": ButtonHoverBubble,
+  "expand-hover": ButtonExpandHover,
+  "elastic-effect": ButtonElasticEffect,
+  "bounce-effect": ButtonBounceEffect,
+  "icon-arrow": ButtonIconArrow,
+  "shift-hover": ButtonShiftHover,
+  "text-stagger": ButtonTextStagger,
+  "text-shift": ButtonTextShift,
+  "text-underline": ButtonTextUnderline,
+  "directional-hover": ButtonDirectionalHover,
+} as const;
+
+const Button = (props: ButtonVariantProps) => {
+  const { variant = "hover-magnetic", ...restProps } = props;
+  const ButtonComponent = buttonComponents[variant];
+  return <ButtonComponent {...restProps} />;
+};
+
+
+export default Button;
\ No newline at end of file
diff --git a/src/components/button/ButtonBounceEffect/BounceButton.css b/src/components/button/ButtonBounceEffect/BounceButton.css
new file mode 100644
index 0000000..0e09bde
--- /dev/null
+++ b/src/components/button/ButtonBounceEffect/BounceButton.css
@@ -0,0 +1,30 @@
+.bounce-button {
+  --ease-elastic: linear(0, 0.55 7.5%, 0.85 12%, 0.95 14%, 1.03 16.5%, 1.09 20%, 1.13 22%, 1.14 23%, 1.15 24.5%, 1.15 26%, 1.13 28%, 1.11 31%, 1.05 39%, 1.02 43%, 0.99 47%, 0.98 52%, 0.97 59%, 1.002 81%, 1);
+  transition: transform 0.65s var(--ease-elastic);
+}
+
+.bounce-button [data-button-animate-chars] span {
+  display: inline-block;
+  position: relative;
+  text-shadow: 0px calc(var(--text-sm) * 1.5) currentColor;
+  transform: translateY(0) rotate(0.001deg);
+  transition: transform 0.65s var(--ease-elastic);
+}
+
+.bounce-button:hover {
+  transform: scale(0.92) rotate(-3deg);
+}
+
+.bounce-button:hover [data-button-animate-chars] span {
+  transform: translateY(calc(var(--text-sm) * -1.5)) rotate(3deg);
+}
+
+@media (max-width: 768px) {
+  .bounce-button:hover {
+    transform: scale(1) rotate(0deg);
+  }
+
+  .bounce-button:hover [data-button-animate-chars] span {
+    transform: translateY(0) rotate(0);
+  }
+}
diff --git a/src/components/button/ButtonBounceEffect/ButtonBounceEffect.tsx b/src/components/button/ButtonBounceEffect/ButtonBounceEffect.tsx
new file mode 100644
index 0000000..0299af9
--- /dev/null
+++ b/src/components/button/ButtonBounceEffect/ButtonBounceEffect.tsx
@@ -0,0 +1,73 @@
+"use client";
+
+import { useRef } from "react";
+import { useCharAnimation } from "../useCharAnimation";
+import { useButtonClick } from "../useButtonClick";
+import { cls } from "@/lib/utils";
+import "./BounceButton.css";
+
+interface ButtonBounceEffectProps {
+  text: string;
+  onClick?: () => void;
+  href?: string;
+  className?: string;
+  bgClassName?: string;
+  textClassName?: string;
+  disabled?: boolean;
+  ariaLabel?: string;
+  type?: "button" | "submit" | "reset";
+  scrollToSection?: boolean;
+}
+
+const ButtonBounceEffect = ({
+  text,
+  onClick,
+  href,
+  className = "",
+  bgClassName = "",
+  textClassName = "",
+  disabled = false,
+  ariaLabel,
+  type = "button",
+  scrollToSection,
+}: ButtonBounceEffectProps) => {
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const handleClick = useButtonClick(href, onClick, scrollToSection);
+
+  useCharAnimation(buttonRef, text);
+
+  return (
+    <button
+      ref={buttonRef}
+      type={type}
+      onClick={handleClick}
+      data-href={href}
+      disabled={disabled}
+      aria-label={ariaLabel || text}
+      className={cls(
+        "bounce-button relative cursor-pointer flex items-center justify-center bg-transparent border-none leading-none no-underline h-9 px-6 min-w-0 w-fit max-w-full rounded-theme text-primary-cta-text",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+    >
+      <div
+        className={cls(
+          "bounce-button-bg absolute! inset-0 rounded-theme primary-button",
+          bgClassName
+        )}
+      ></div>
+      <span
+        data-button-animate-chars=""
+        className={cls(
+          "bounce-button-text relative text-sm inline-block overflow-hidden truncate whitespace-nowrap",
+          textClassName
+        )}
+      >
+        {text}
+      </span>
+    </button>
+  );
+};
+
+
+export default ButtonBounceEffect;
diff --git a/src/components/button/ButtonDirectionalHover/ButtonDirectionalHover.tsx b/src/components/button/ButtonDirectionalHover/ButtonDirectionalHover.tsx
new file mode 100644
index 0000000..5e820d9
--- /dev/null
+++ b/src/components/button/ButtonDirectionalHover/ButtonDirectionalHover.tsx
@@ -0,0 +1,82 @@
+"use client";
+
+import { useRef } from "react";
+import { useDirectionalHover } from "./useDirectionalHover";
+import { useButtonClick } from "../useButtonClick";
+import { cls } from "@/lib/utils";
+import "./DirectionalButton.css";
+
+export interface ButtonDirectionalHoverProps {
+  text: string;
+  onClick?: () => void;
+  href?: string;
+  className?: string;
+  bgClassName?: string;
+  textClassName?: string;
+  circleClassName?: string;
+  disabled?: boolean;
+  ariaLabel?: string;
+  type?: "button" | "submit" | "reset";
+  scrollToSection?: boolean;
+}
+
+const ButtonDirectionalHover = ({
+  text,
+  onClick,
+  href,
+  className = "",
+  bgClassName = "",
+  textClassName = "",
+  circleClassName = "",
+  disabled = false,
+  ariaLabel,
+  type = "button",
+  scrollToSection,
+}: ButtonDirectionalHoverProps) => {
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const handleClick = useButtonClick(href, onClick, scrollToSection);
+
+  useDirectionalHover(buttonRef);
+
+  return (
+    <button
+      ref={buttonRef}
+      type={type}
+      data-href={href}
+      onClick={handleClick}
+      disabled={disabled}
+      aria-label={ariaLabel || text}
+      className={cls(
+        "directional-button relative cursor-pointer flex items-center justify-center bg-transparent border-none leading-none no-underline h-9 px-6 min-w-0 w-fit max-w-full rounded-theme text-primary-cta-text",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+    >
+      <div
+        className={cls(
+          "directional-button-bg absolute! inset-0 rounded-theme primary-button",
+          bgClassName
+        )}
+      ></div>
+      <div className="directional-button-circle-wrap">
+        <div
+          className={cls(
+            "directional-button-circle bg-accent",
+            circleClassName
+          )}
+        ></div>
+      </div>
+      <span
+        className={cls(
+          "directional-button-text relative text-sm inline-block overflow-hidden truncate whitespace-nowrap",
+          textClassName
+        )}
+      >
+        {text}
+      </span>
+    </button>
+  );
+};
+
+
+export default ButtonDirectionalHover;
diff --git a/src/components/button/ButtonDirectionalHover/DirectionalButton.css b/src/components/button/ButtonDirectionalHover/DirectionalButton.css
new file mode 100644
index 0000000..018f3e1
--- /dev/null
+++ b/src/components/button/ButtonDirectionalHover/DirectionalButton.css
@@ -0,0 +1,37 @@
+.directional-button-circle-wrap {
+  border-radius: inherit;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+}
+
+.directional-button-circle {
+  pointer-events: none;
+  border-radius: 50%;
+  width: 100%;
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transition: transform 0.7s cubic-bezier(0.625, 0.05, 0, 1);
+  transform: translate(-50%, -50%) scale(0) rotate(0.001deg);
+}
+
+.directional-button-circle::before {
+  content: "";
+  display: block;
+  padding-top: 100%;
+}
+
+.directional-button:hover .directional-button-circle {
+  transform: translate(-50%, -50%) scale(1) rotate(0.001deg);
+}
+
+@media (max-width: 768px) {
+  .directional-button:hover .directional-button-circle {
+    transform: translate(-50%, -50%) scale(0) rotate(0.001deg);
+  }
+}
diff --git a/src/components/button/ButtonDirectionalHover/useDirectionalHover.ts b/src/components/button/ButtonDirectionalHover/useDirectionalHover.ts
new file mode 100644
index 0000000..a8b7917
--- /dev/null
+++ b/src/components/button/ButtonDirectionalHover/useDirectionalHover.ts
@@ -0,0 +1,48 @@
+import { useEffect, useCallback, RefObject } from "react";
+
+export const useDirectionalHover = (
+  buttonRef: RefObject<HTMLButtonElement | null>,
+  circleSelector: string = ".directional-button-circle"
+) => {
+  const handleHover = useCallback(
+    (event: MouseEvent) => {
+      const button = buttonRef.current;
+      if (!button) return;
+
+      const buttonRect = button.getBoundingClientRect();
+      const buttonWidth = buttonRect.width;
+      const buttonHeight = buttonRect.height;
+      const buttonCenterX = buttonRect.left + buttonWidth / 2;
+
+      const mouseX = event.clientX;
+      const mouseY = event.clientY;
+
+      const offsetXFromLeft = ((mouseX - buttonRect.left) / buttonWidth) * 100;
+      const offsetYFromTop = ((mouseY - buttonRect.top) / buttonHeight) * 100;
+
+      let offsetXFromCenter = ((mouseX - buttonCenterX) / (buttonWidth / 2)) * 50;
+      offsetXFromCenter = Math.abs(offsetXFromCenter);
+
+      const circle = button.querySelector(circleSelector) as HTMLElement;
+      if (circle) {
+        circle.style.left = `${offsetXFromLeft.toFixed(1)}%`;
+        circle.style.top = `${offsetYFromTop.toFixed(1)}%`;
+        circle.style.width = `${115 + offsetXFromCenter * 2}%`;
+      }
+    },
+    [buttonRef, circleSelector]
+  );
+
+  useEffect(() => {
+    const button = buttonRef.current;
+    if (!button) return;
+
+    button.addEventListener("mouseenter", handleHover);
+    button.addEventListener("mouseleave", handleHover);
+
+    return () => {
+      button.removeEventListener("mouseenter", handleHover);
+      button.removeEventListener("mouseleave", handleHover);
+    };
+  }, [buttonRef, handleHover]);
+};
diff --git a/src/components/button/ButtonElasticEffect/ButtonElasticEffect.tsx b/src/components/button/ButtonElasticEffect/ButtonElasticEffect.tsx
new file mode 100644
index 0000000..8f11a0e
--- /dev/null
+++ b/src/components/button/ButtonElasticEffect/ButtonElasticEffect.tsx
@@ -0,0 +1,54 @@
+"use client";
+
+
+import useElasticEffect from "./useElasticEffect";
+import { useButtonClick } from "../useButtonClick";
+import { cls } from "@/lib/utils";
+
+interface ButtonElasticEffectProps {
+  text: string;
+  onClick?: () => void;
+  href?: string;
+  className?: string;
+  textClassName?: string;
+  disabled?: boolean;
+  ariaLabel?: string;
+  type?: "button" | "submit" | "reset";
+  scrollToSection?: boolean;
+}
+
+const ButtonElasticEffect = ({
+  text,
+  onClick,
+  href,
+  className = "",
+  textClassName = "",
+  disabled = false,
+  ariaLabel,
+  type = "button",
+  scrollToSection,
+}: ButtonElasticEffectProps) => {
+  const elasticRef = useElasticEffect<HTMLButtonElement>();
+  const handleClick = useButtonClick(href, onClick, scrollToSection);
+
+  return (
+    <button
+      ref={elasticRef}
+      type={type}
+      onClick={handleClick}
+      disabled={disabled}
+      data-href={href}
+      aria-label={ariaLabel || text}
+      className={cls(
+        "relative cursor-pointer h-9 min-w-0 w-fit max-w-full px-6 primary-button rounded-theme text-primary-cta-text",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+    >
+      <span className={cls("text-sm block overflow-hidden truncate whitespace-nowrap", textClassName)}>{text}</span>
+    </button>
+  );
+};
+
+
+export default ButtonElasticEffect;
diff --git a/src/components/button/ButtonElasticEffect/useElasticEffect.ts b/src/components/button/ButtonElasticEffect/useElasticEffect.ts
new file mode 100644
index 0000000..40ac55b
--- /dev/null
+++ b/src/components/button/ButtonElasticEffect/useElasticEffect.ts
@@ -0,0 +1,59 @@
+"use client";
+
+import { useRef, useEffect, useCallback } from "react";
+import gsap from "gsap";
+
+const useElasticEffect = <T extends HTMLElement>() => {
+  const elementRef = useRef<T>(null);
+  const hoverLockedRef = useRef(false);
+  const timelineRef = useRef<gsap.core.Timeline | null>(null);
+
+  const handleMouseEnter = useCallback(() => {
+    const el = elementRef.current;
+    if (!el || hoverLockedRef.current) return;
+
+    hoverLockedRef.current = true;
+    setTimeout(() => {
+      hoverLockedRef.current = false;
+    }, 500);
+
+    const w = el.offsetWidth;
+    const h = el.offsetHeight;
+    const fs = parseFloat(getComputedStyle(el).fontSize);
+    const stretch = 0.75 * fs;
+    const sx = (w + stretch) / w;
+    const sy = (h - stretch * 0.33) / h;
+
+    if (timelineRef.current) {
+      timelineRef.current.kill();
+    }
+
+    timelineRef.current = gsap
+      .timeline()
+      .to(el, { scaleX: sx, scaleY: sy, duration: 0.1, ease: "power1.out" })
+      .to(el, { scaleX: 1, scaleY: 1, duration: 1, ease: "elastic.out(1, 0.3)" });
+  }, []);
+
+  useEffect(() => {
+    // Skip on touch devices
+    if (window.matchMedia("(hover: none) and (pointer: coarse)").matches) {
+      return;
+    }
+
+    const el = elementRef.current;
+    if (!el) return;
+
+    el.addEventListener("mouseenter", handleMouseEnter);
+
+    return () => {
+      el.removeEventListener("mouseenter", handleMouseEnter);
+      if (timelineRef.current) {
+        timelineRef.current.kill();
+      }
+    };
+  }, [handleMouseEnter]);
+
+  return elementRef;
+};
+
+export default useElasticEffect;
diff --git a/src/components/button/ButtonExpandHover.tsx b/src/components/button/ButtonExpandHover.tsx
new file mode 100644
index 0000000..27f9924
--- /dev/null
+++ b/src/components/button/ButtonExpandHover.tsx
@@ -0,0 +1,95 @@
+"use client";
+
+
+import { ArrowUpRight } from "lucide-react";
+import { useButtonClick } from "./useButtonClick";
+import { cls } from "@/lib/utils";
+import type { LucideIcon } from "lucide-react";
+
+interface ButtonExpandHoverProps {
+  text: string;
+  onClick?: () => void;
+  href?: string;
+  icon?: LucideIcon;
+  className?: string;
+  textClassName?: string;
+  iconClassName?: string;
+  iconBgClassName?: string;
+  disabled?: boolean;
+  ariaLabel?: string;
+  type?: "button" | "submit" | "reset";
+  scrollToSection?: boolean;
+}
+
+const ButtonExpandHover = ({
+  text,
+  onClick,
+  href,
+  icon: Icon,
+  className = "",
+  textClassName = "",
+  iconClassName = "",
+  iconBgClassName = "",
+  disabled = false,
+  ariaLabel,
+  type = "button",
+  scrollToSection,
+}: ButtonExpandHoverProps) => {
+  const handleClick = useButtonClick(href, onClick, scrollToSection);
+
+  return (
+    <button
+      type={type}
+      onClick={handleClick}
+      disabled={disabled}
+      data-href={href}
+      aria-label={ariaLabel || text}
+      className={cls(
+        "group relative cursor-pointer h-fit min-w-0 w-fit max-w-full rounded-theme text-sm text-background pointer-events-auto outline-none",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+    >
+      <div
+        className="relative h-9 w-full px-5"
+        style={{ paddingRight: "calc(2.25rem + 0.75rem)" }}
+      >
+        <div className="h-9 flex items-center" >
+          <span
+            className={cls(
+              "relative z-10 block overflow-hidden truncate whitespace-nowrap md:transition-colors md:duration-[900ms] md:[transition-timing-function:cubic-bezier(.77,0,.18,1)]",
+              textClassName
+            )}
+          >
+            {text}
+          </span>
+        </div>
+        <div className="absolute overflow-hidden top-[2px] bottom-[2px] left-[2px] right-[2px] rounded-theme flex justify-end">
+          <div
+            className={cls(
+              "relative z-10 h-full w-auto aspect-square flex items-center justify-center",
+              iconClassName
+            )}
+          >
+            {Icon ? (
+              <Icon className="h-1/2 w-auto aspect-square" strokeWidth={1} />
+            ) : (
+              <ArrowUpRight className="h-1/2 w-auto aspect-square" strokeWidth={1} />
+            )}
+          </div>
+          <div
+            className={cls(
+              "absolute z-0 h-full w-full rounded-theme",
+              "md:transition-transform md:duration-[900ms] md:[transition-timing-function:cubic-bezier(.77,0,.18,1)]",
+              "-translate-x-[calc(-100%+2.25rem-4px)] md:group-hover:translate-x-0",
+              iconBgClassName
+            )}
+          ></div>
+        </div>
+      </div>
+    </button>
+  );
+};
+
+
+export default ButtonExpandHover;
diff --git a/src/components/button/ButtonHoverBubble.tsx b/src/components/button/ButtonHoverBubble.tsx
new file mode 100644
index 0000000..7bf996f
--- /dev/null
+++ b/src/components/button/ButtonHoverBubble.tsx
@@ -0,0 +1,82 @@
+"use client";
+
+
+import { ArrowDownRight } from "lucide-react";
+import { useButtonClick } from "./useButtonClick";
+import { cls } from "@/lib/utils";
+
+interface ButtonHoverBubbleProps {
+  text: string;
+  onClick?: () => void;
+  href?: string;
+  className?: string;
+  bgClassName?: string;
+  textClassName?: string;
+  iconClassName?: string;
+  disabled?: boolean;
+  ariaLabel?: string;
+  type?: "button" | "submit" | "reset";
+  scrollToSection?: boolean;
+}
+
+const ButtonHoverBubble = ({
+  text,
+  onClick,
+  href,
+  className = "",
+  bgClassName = "",
+  textClassName = "",
+  iconClassName = "",
+  disabled = false,
+  ariaLabel,
+  type = "button",
+  scrollToSection,
+}: ButtonHoverBubbleProps) => {
+  const handleClick = useButtonClick(href, onClick, scrollToSection);
+
+  return (
+    <button
+      type={type}
+      onClick={handleClick}
+      disabled={disabled}
+      aria-label={ariaLabel || text}
+      data-href={href}
+      className={cls(
+        "relative group flex justify-center items-center min-w-0 w-fit max-w-full rounded-theme cursor-pointer pointer-events-auto outline-none",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+    >
+      <div
+        className={cls(
+          "flex justify-center items-center h-9 aspect-square rounded-theme relative",
+          "scale-0 md:transition-transform md:duration-700 md:ease-[cubic-bezier(0.625,0.05,0,1)] md:origin-left md:group-hover:scale-100",
+          iconClassName
+        )}
+      >
+        <ArrowDownRight strokeWidth={1.5} className="h-[35%] w-auto aspect-square object-contain md:transition-transform md:duration-700 md:group-hover:rotate-[-45deg]" />
+      </div>
+      <div
+        className={cls(
+          "flex justify-center items-center h-9 px-4 min-w-0 w-fit max-w-full rounded-theme relative",
+          "-translate-x-[var(--height-9)] md:transition-transform md:duration-700 md:ease-[cubic-bezier(0.625,0.05,0,1)] md:group-hover:translate-x-0",
+          bgClassName
+        )}
+      >
+        <span className={cls("text-sm block overflow-hidden truncate whitespace-nowrap", textClassName)}>{text}</span>
+      </div>
+      <div
+        className={cls(
+          "flex justify-center items-center h-9 aspect-square rounded-theme absolute right-0 z-20",
+          "scale-100 md:transition-transform md:duration-700 md:ease-[cubic-bezier(0.625,0.05,0,1)] md:origin-right md:group-hover:scale-0",
+          iconClassName
+        )}
+      >
+        <ArrowDownRight strokeWidth={1.5} className="h-[35%] w-auto aspect-square object-contain md:transition-transform md:duration-700 md:group-hover:rotate-[-45deg]" />
+      </div>
+    </button>
+  );
+};
+
+
+export default ButtonHoverBubble;
diff --git a/src/components/button/ButtonHoverMagnetic/ButtonHoverMagnetic.tsx b/src/components/button/ButtonHoverMagnetic/ButtonHoverMagnetic.tsx
new file mode 100644
index 0000000..aa62ed1
--- /dev/null
+++ b/src/components/button/ButtonHoverMagnetic/ButtonHoverMagnetic.tsx
@@ -0,0 +1,56 @@
+"use client";
+
+
+import useMagneticEffect from "./useMagneticEffect";
+import { useButtonClick } from "../useButtonClick";
+import { cls } from "@/lib/utils";
+
+interface ButtonHoverMagneticProps {
+  text: string;
+  onClick?: () => void;
+  href?: string;
+  className?: string;
+  textClassName?: string;
+  strengthFactor?: number;
+  disabled?: boolean;
+  ariaLabel?: string;
+  type?: "button" | "submit" | "reset";
+  scrollToSection?: boolean;
+}
+
+const ButtonHoverMagnetic = ({
+  text,
+  onClick,
+  href,
+  className = "",
+  textClassName = "",
+  strengthFactor = 20,
+  disabled = false,
+  ariaLabel,
+  type = "button",
+  scrollToSection,
+}: ButtonHoverMagneticProps) => {
+  const magneticRef = useMagneticEffect(strengthFactor);
+  const handleClick = useButtonClick(href, onClick, scrollToSection);
+
+  return (
+    <button
+      ref={magneticRef as React.RefObject<HTMLButtonElement>}
+      data-href={href}
+      type={type}
+      onClick={handleClick}
+      disabled={disabled}
+      aria-label={ariaLabel || text}
+      className={cls(
+        "relative cursor-pointer h-9 min-w-0 w-fit max-w-full px-6 rounded-theme",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+    >
+      <span className={cls("text-sm block overflow-hidden truncate whitespace-nowrap", textClassName)}>{text}</span>
+    </button>
+  );
+};
+
+
+export default ButtonHoverMagnetic;
diff --git a/src/components/button/ButtonHoverMagnetic/useMagneticEffect.ts b/src/components/button/ButtonHoverMagnetic/useMagneticEffect.ts
new file mode 100644
index 0000000..540523c
--- /dev/null
+++ b/src/components/button/ButtonHoverMagnetic/useMagneticEffect.ts
@@ -0,0 +1,73 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+
+const useMagneticEffect = (strengthFactor = 10) => {
+    const elementRef = useRef<HTMLElement | null>(null);
+
+    useEffect(() => {
+        if (typeof window === "undefined") return;
+
+        import("gsap").then((gsap) => {
+            const element = elementRef.current;
+
+            if (!element || window.innerWidth < 768) return;
+
+            const resetEl = (el: HTMLElement, immediate: boolean) => {
+                if (!el) return;
+                gsap.default.killTweensOf(el);
+                (immediate ? gsap.default.set : gsap.default.to)(el, {
+                    x: "0vw",
+                    y: "0vw",
+                    rotate: "0deg",
+                    clearProps: "all",
+                    ...(!immediate && { ease: "elastic.out(1, 0.3)", duration: 1.6 })
+                });
+            };
+
+            const resetOnEnter = () => {
+                resetEl(element, true);
+            };
+
+            const moveMagnet = (e: MouseEvent) => {
+                const b = element.getBoundingClientRect();
+                const strength = strengthFactor;
+
+                const offsetX = ((e.clientX - b.left) / element.offsetWidth - 0.5) * (strength / 16);
+                const offsetY = ((e.clientY - b.top) / element.offsetHeight - 0.5) * (strength / 16);
+
+                gsap.default.to(element, {
+                    x: offsetX + "vw",
+                    y: offsetY + "vw",
+                    rotate: "0.001deg",
+                    ease: "power4.out",
+                    duration: 1.6
+                });
+            };
+
+            const resetMagnet = () => {
+                gsap.default.to(element, {
+                    x: "0vw",
+                    y: "0vw",
+                    ease: "elastic.out(1, 0.3)",
+                    duration: 1.6,
+                    clearProps: "all"
+                });
+            };
+
+            element.addEventListener("mouseenter", resetOnEnter);
+            element.addEventListener("mousemove", moveMagnet);
+            element.addEventListener("mouseleave", resetMagnet);
+
+            return () => {
+                element.removeEventListener("mouseenter", resetOnEnter);
+                element.removeEventListener("mousemove", moveMagnet);
+                element.removeEventListener("mouseleave", resetMagnet);
+            };
+        });
+    }, [strengthFactor]);
+
+    return elementRef;
+};
+
+export default useMagneticEffect;
\ No newline at end of file
diff --git a/src/components/button/ButtonIconArrow.tsx b/src/components/button/ButtonIconArrow.tsx
new file mode 100644
index 0000000..361356a
--- /dev/null
+++ b/src/components/button/ButtonIconArrow.tsx
@@ -0,0 +1,65 @@
+"use client";
+
+import { ArrowRight } from "lucide-react";
+
+import { useButtonClick } from "./useButtonClick";
+import { cls } from "@/lib/utils";
+
+interface ButtonIconArrowProps {
+    text: string;
+    onClick?: () => void;
+    href?: string;
+    className?: string;
+    textClassName?: string;
+    iconClassName?: string;
+    disabled?: boolean;
+    ariaLabel?: string;
+    type?: "button" | "submit" | "reset";
+    scrollToSection?: boolean;
+}
+
+const ButtonIconArrow = ({
+    text,
+    onClick,
+    href,
+    className = "",
+    textClassName = "",
+    iconClassName = "",
+    disabled = false,
+    ariaLabel,
+    type = "button",
+    scrollToSection,
+}: ButtonIconArrowProps) => {
+    const handleClick = useButtonClick(href, onClick, scrollToSection);
+
+    return (
+        <button
+            type={type}
+            onClick={handleClick}
+            disabled={disabled}
+            data-href={href}
+            aria-label={ariaLabel || text}
+            className={cls(
+                "relative group cursor-pointer h-9 min-w-0 w-fit max-w-full primary-button rounded-theme px-6 text-sm text-primary-cta-text flex items-center gap-3",
+                "disabled:cursor-not-allowed disabled:opacity-50",
+                className
+            )}
+        >
+            <span className={cls(
+                "block overflow-hidden truncate whitespace-nowrap md:transition-transform md:duration-[600ms] md:[transition-timing-function:cubic-bezier(.25,.8,.25,1)] md:group-hover:[transform:translateX(calc(var(--height-9)/4))]",
+                textClassName
+            )}>
+                {text}
+            </span>
+            <div className={cls(
+                "h-5 w-[var(--height-5)] aspect-square rounded-theme flex items-center justify-center md:transition-transform md:duration-[600ms] md:[transition-timing-function:cubic-bezier(.25,.8,.25,1)] md:group-hover:scale-[0.2] md:group-hover:rotate-90",
+                iconClassName || "secondary-button text-secondary-cta-text"
+            )}>
+                <ArrowRight className="h-1/2 w-1/2 md:transition-opacity md:duration-[600ms] md:[transition-timing-function:cubic-bezier(.25,.8,.25,1)] md:group-hover:opacity-0" />
+            </div>
+        </button>
+    );
+};
+
+
+export default ButtonIconArrow;
\ No newline at end of file
diff --git a/src/components/button/ButtonShiftHover/ButtonShiftHover.tsx b/src/components/button/ButtonShiftHover/ButtonShiftHover.tsx
new file mode 100644
index 0000000..92d71df
--- /dev/null
+++ b/src/components/button/ButtonShiftHover/ButtonShiftHover.tsx
@@ -0,0 +1,72 @@
+"use client";
+
+import { useRef } from "react";
+import { useCharAnimation } from "../useCharAnimation";
+import { useButtonClick } from "../useButtonClick";
+import { cls } from "@/lib/utils";
+import "./ShiftButton.css";
+
+interface ButtonShiftHoverProps {
+  text: string;
+  onClick?: () => void;
+  href?: string;
+  className?: string;
+  bgClassName?: string;
+  textClassName?: string;
+  disabled?: boolean;
+  ariaLabel?: string;
+  type?: "button" | "submit" | "reset";
+  scrollToSection?: boolean;
+}
+
+const ButtonShiftHover = ({
+  text,
+  onClick,
+  href,
+  className = "",
+  bgClassName = "",
+  textClassName = "",
+  disabled = false,
+  ariaLabel,
+  type = "button",
+  scrollToSection,
+}: ButtonShiftHoverProps) => {
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const handleClick = useButtonClick(href, onClick, scrollToSection);
+
+  useCharAnimation(buttonRef, text);
+
+  return (
+    <button
+      ref={buttonRef}
+      type={type}
+      onClick={handleClick}
+      disabled={disabled}
+      data-href={href}
+      aria-label={ariaLabel || text}
+      className={cls(
+        "shift-button group relative cursor-pointer flex gap-2 items-center justify-center bg-transparent border-none leading-none no-underline h-9 px-5 pr-4 min-w-0 w-fit max-w-full rounded-theme text-primary-cta-text text-sm",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        textClassName,
+        className
+      )}
+    >
+      <div
+        className={cls(
+          "shift-button-bg absolute! inset-0 rounded-theme transition-transform duration-[600ms] primary-button",
+          bgClassName
+        )}
+      ></div>
+      <span
+        data-button-animate-chars=""
+        className="shift-button-text relative inline-block overflow-hidden truncate whitespace-nowrap"
+      >
+        {text}
+      </span>
+      <div className="relative h-[1em] w-auto aspect-square rounded-theme border border-current scale-65 transition-all duration-300 md:group-hover:bg-current md:group-hover:scale-40" />
+    </button>
+  );
+};
+
+
+export default ButtonShiftHover;
diff --git a/src/components/button/ButtonShiftHover/ShiftButton.css b/src/components/button/ButtonShiftHover/ShiftButton.css
new file mode 100644
index 0000000..6c2b290
--- /dev/null
+++ b/src/components/button/ButtonShiftHover/ShiftButton.css
@@ -0,0 +1,29 @@
+.shift-button [data-button-animate-chars] span {
+    display: inline-block;
+    position: relative;
+    text-shadow: 0px calc(var(--text-sm)*1.5) currentColor;
+    transform: translateY(0em) rotate(0.001deg);
+    transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+.shift-button:hover [data-button-animate-chars] span {
+    transform: translateY(calc(var(--text-sm) * -1.5)) rotate(0.001deg);
+}
+
+.shift-button:hover .shift-button-bg {
+    transform: scale(0.975);
+}
+
+@media (max-width: 768px) {
+    .shift-button [data-button-animate-chars] span {
+        text-shadow: 0px calc(var(--text-sm)*1.5) currentColor;
+    }
+
+    .shift-button:hover [data-button-animate-chars] span {
+        transform: translateY(0vw) rotate(0);
+    }
+
+    .shift-button:hover .shift-button-bg {
+        transform: scale(1);
+    }
+}
\ No newline at end of file
diff --git a/src/components/button/ButtonSlideBackground.tsx b/src/components/button/ButtonSlideBackground.tsx
new file mode 100644
index 0000000..c8bb1de
--- /dev/null
+++ b/src/components/button/ButtonSlideBackground.tsx
@@ -0,0 +1,74 @@
+"use client";
+
+
+import { useButtonClick } from "./useButtonClick";
+import { cls } from "@/lib/utils";
+
+interface ButtonSlideBackgroundProps {
+  text: string;
+  onClick?: () => void;
+  href?: string;
+  className?: string;
+  textClassName?: string;
+  disabled?: boolean;
+  ariaLabel?: string;
+  type?: "button" | "submit" | "reset";
+  scrollToSection?: boolean;
+}
+
+const ButtonSlideBackground = ({
+  text,
+  onClick,
+  href,
+  className = "",
+  textClassName = "",
+  disabled = false,
+  ariaLabel,
+  type = "button",
+  scrollToSection,
+}: ButtonSlideBackgroundProps) => {
+  const handleClick = useButtonClick(href, onClick, scrollToSection);
+  const cubicBezier = "cubic-bezier(0.4, 0, 0, 1)";
+
+  return (
+    <button
+      type={type}
+      onClick={handleClick}
+      disabled={disabled}
+      data-href={href}
+      aria-label={ariaLabel || text}
+      className={cls(
+        "group relative flex items-center justify-center h-9 min-w-0 w-fit max-w-full px-6 rounded-theme overflow-hidden cursor-pointer",
+        "primary-button",
+        "after:content-[''] after:absolute after:left-0 after:bottom-0 after:w-full after:h-full",
+        "after:translate-y-[101%] after:rounded-t-[50%] hover:after:translate-y-0 hover:after:rounded-none",
+        "after:transition-all after:duration-500",
+        "after:bg-background",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      style={{
+        transform: "scaleX(1)",
+        transition: `transform 0.5s ${cubicBezier}`,
+      }}
+    >
+      <span
+        className={cls(
+          "inline-block text-sm overflow-hidden relative",
+          "text-primary-cta-text",
+          "after:content-[attr(data-text)] after:w-full after:h-full after:inline-block after:absolute",
+          "after:left-1/2 after:bottom-0 after:z-[1] after:-translate-x-1/2 after:translate-y-full group-hover:after:translate-y-0",
+          "after:transition-transform after:duration-500 after:ease-[cubic-bezier(0.2,0,0,1)]",
+          "after:text-foreground",
+          textClassName
+        )}
+        data-text={text}
+      >
+        {text}
+      </span>
+    </button>
+  );
+};
+
+
+export default ButtonSlideBackground;
diff --git a/src/components/button/ButtonTextShift/ButtonTextShift.tsx b/src/components/button/ButtonTextShift/ButtonTextShift.tsx
new file mode 100644
index 0000000..b8e2e10
--- /dev/null
+++ b/src/components/button/ButtonTextShift/ButtonTextShift.tsx
@@ -0,0 +1,73 @@
+"use client";
+
+import { useRef } from "react";
+import { useCharAnimation } from "../useCharAnimation";
+import { useButtonClick } from "../useButtonClick";
+import { cls } from "@/lib/utils";
+import "./TextShiftButton.css";
+
+export interface ButtonTextShiftProps {
+  text: string;
+  onClick?: () => void;
+  href?: string;
+  className?: string;
+  bgClassName?: string;
+  textClassName?: string;
+  disabled?: boolean;
+  ariaLabel?: string;
+  type?: "button" | "submit" | "reset";
+  scrollToSection?: boolean;
+}
+
+const ButtonTextShift = ({
+  text,
+  onClick,
+  href,
+  className = "",
+  bgClassName = "",
+  textClassName = "",
+  disabled = false,
+  ariaLabel,
+  type = "button",
+  scrollToSection,
+}: ButtonTextShiftProps) => {
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const handleClick = useButtonClick(href, onClick, scrollToSection);
+
+  useCharAnimation(buttonRef, text, "[data-button-animate-chars]", 0.0);
+
+  return (
+    <button
+      ref={buttonRef}
+      type={type}
+      data-href={href}
+      onClick={handleClick}
+      disabled={disabled}
+      aria-label={ariaLabel || text}
+      className={cls(
+        "stagger-button relative cursor-pointer flex items-center justify-center bg-transparent border-none leading-none no-underline h-9 px-6 min-w-0 w-fit max-w-full rounded-theme text-primary-cta-text",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+    >
+      <div
+        className={cls(
+          "stagger-button-bg absolute! inset-0 rounded-theme primary-button",
+          bgClassName
+        )}
+      ></div>
+      <span
+        data-button-animate-chars=""
+        className={cls(
+          "stagger-button-text relative text-sm inline-block overflow-hidden truncate whitespace-nowrap",
+          textClassName
+        )}
+      >
+        {text}
+      </span>
+    </button>
+  );
+};
+
+
+export default ButtonTextShift;
diff --git a/src/components/button/ButtonTextShift/TextShiftButton.css b/src/components/button/ButtonTextShift/TextShiftButton.css
new file mode 100644
index 0000000..19bc2ab
--- /dev/null
+++ b/src/components/button/ButtonTextShift/TextShiftButton.css
@@ -0,0 +1,21 @@
+.stagger-button [data-button-animate-chars] span {
+    display: inline-block;
+    position: relative;
+    text-shadow: 0px calc(var(--text-sm)*1.5) currentColor;
+    transform: translateY(0em) rotate(0.001deg);
+    transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+.stagger-button:hover [data-button-animate-chars] span {
+    transform: translateY(calc(var(--text-sm) * -1.5)) rotate(0.001deg);
+}
+
+@media (max-width: 768px) {
+    .stagger-button [data-button-animate-chars] span {
+        text-shadow: 0px calc(var(--text-sm)*1.5) currentColor;
+    }
+
+    .stagger-button:hover [data-button-animate-chars] span {
+        transform: translateY(0vw) rotate(0);
+    }
+}
diff --git a/src/components/button/ButtonTextStagger/ButtonTextStagger.tsx b/src/components/button/ButtonTextStagger/ButtonTextStagger.tsx
new file mode 100644
index 0000000..954b1c4
--- /dev/null
+++ b/src/components/button/ButtonTextStagger/ButtonTextStagger.tsx
@@ -0,0 +1,73 @@
+"use client";
+
+import { useRef } from "react";
+import { useCharAnimation } from "../useCharAnimation";
+import { useButtonClick } from "../useButtonClick";
+import { cls } from "@/lib/utils";
+import "./StaggerButton.css";
+
+export interface ButtonTextStaggerProps {
+  text: string;
+  onClick?: () => void;
+  href?: string;
+  className?: string;
+  bgClassName?: string;
+  textClassName?: string;
+  disabled?: boolean;
+  ariaLabel?: string;
+  type?: "button" | "submit" | "reset";
+  scrollToSection?: boolean;
+}
+
+const ButtonTextStagger = ({
+  text,
+  onClick,
+  href,
+  className = "",
+  bgClassName = "",
+  textClassName = "",
+  disabled = false,
+  ariaLabel,
+  type = "button",
+  scrollToSection,
+}: ButtonTextStaggerProps) => {
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const handleClick = useButtonClick(href, onClick, scrollToSection);
+
+  useCharAnimation(buttonRef, text, "[data-button-animate-chars]", 0.01);
+
+  return (
+    <button
+      ref={buttonRef}
+      type={type}
+      onClick={handleClick}
+      data-href={href}
+      disabled={disabled}
+      aria-label={ariaLabel || text}
+      className={cls(
+        "stagger-button relative cursor-pointer flex items-center justify-center bg-transparent border-none leading-none no-underline h-9 px-6 min-w-0 w-fit max-w-full rounded-theme text-primary-cta-text",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+    >
+      <div
+        className={cls(
+          "stagger-button-bg absolute! inset-0 rounded-theme transition-transform duration-[600ms] primary-button",
+          bgClassName
+        )}
+      ></div>
+      <span
+        data-button-animate-chars=""
+        className={cls(
+          "stagger-button-text relative text-sm inline-block overflow-hidden truncate whitespace-nowrap",
+          textClassName
+        )}
+      >
+        {text}
+      </span>
+    </button>
+  );
+};
+
+
+export default ButtonTextStagger;
diff --git a/src/components/button/ButtonTextStagger/StaggerButton.css b/src/components/button/ButtonTextStagger/StaggerButton.css
new file mode 100644
index 0000000..6587cfa
--- /dev/null
+++ b/src/components/button/ButtonTextStagger/StaggerButton.css
@@ -0,0 +1,29 @@
+.stagger-button [data-button-animate-chars] span {
+    display: inline-block;
+    position: relative;
+    text-shadow: 0px calc(var(--text-sm)*1.5) currentColor;
+    transform: translateY(0em) rotate(0.001deg);
+    transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+.stagger-button:hover [data-button-animate-chars] span {
+    transform: translateY(calc(var(--text-sm) * -1.5)) rotate(0.001deg);
+}
+
+.stagger-button:hover .stagger-button-bg {
+    transform: scale(0.975);
+}
+
+@media (max-width: 768px) {
+    .stagger-button [data-button-animate-chars] span {
+        text-shadow: 0px calc(var(--text-sm)*1.5) currentColor;
+    }
+
+    .stagger-button:hover [data-button-animate-chars] span {
+        transform: translateY(0vw) rotate(0);
+    }
+
+    .stagger-button:hover .stagger-button-bg {
+        transform: scale(1);
+    }
+}
\ No newline at end of file
diff --git a/src/components/button/ButtonTextUnderline.tsx b/src/components/button/ButtonTextUnderline.tsx
new file mode 100644
index 0000000..483f846
--- /dev/null
+++ b/src/components/button/ButtonTextUnderline.tsx
@@ -0,0 +1,52 @@
+"use client";
+
+
+import { useButtonClick } from "./useButtonClick";
+import { cls } from "@/lib/utils";
+
+interface ButtonTextUnderlineProps {
+  text: string;
+  onClick?: () => void;
+  href?: string;
+  className?: string;
+  disabled?: boolean;
+  ariaLabel?: string;
+  type?: "button" | "submit" | "reset";
+  scrollToSection?: boolean;
+}
+
+const ButtonTextUnderline = ({
+  text,
+  onClick,
+  href,
+  className = "",
+  disabled = false,
+  ariaLabel,
+  type = "button",
+  scrollToSection,
+}: ButtonTextUnderlineProps) => {
+  const handleClick = useButtonClick(href, onClick, scrollToSection);
+
+  return (
+    <button
+      type={type}
+      onClick={handleClick}
+      disabled={disabled}
+      data-href={href}
+      aria-label={ariaLabel || text}
+      className={cls(
+        "relative text-sm inline-block bg-transparent border-none p-0 cursor-pointer",
+        "after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-full after:h-[1px]",
+        "after:bg-current after:scale-x-0 after:origin-right after:transition-transform after:duration-300",
+        "hover:after:scale-x-100 hover:after:origin-left",
+        "disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:after:scale-x-0",
+        className
+      )}
+    >
+      {text}
+    </button>
+  );
+};
+
+
+export default ButtonTextUnderline;
diff --git a/src/components/button/SelectorButton.tsx b/src/components/button/SelectorButton.tsx
new file mode 100644
index 0000000..d96adb9
--- /dev/null
+++ b/src/components/button/SelectorButton.tsx
@@ -0,0 +1,124 @@
+"use client";
+
+import { useRef, useEffect, ReactNode } from "react";
+import { cls } from "@/lib/utils";
+
+export interface SelectorOption {
+  value: string;
+  label: ReactNode;
+  disabled?: boolean;
+  labelClassName?: string;
+}
+
+export interface SelectorButtonProps {
+  options: SelectorOption[];
+  activeValue: string;
+  onValueChange: (value: string) => void;
+  className?: string;
+  buttonClassName?: string;
+  wrapperClassName?: string;
+  labelClassName?: string;
+}
+
+const SelectorButton = ({
+  options,
+  activeValue,
+  onValueChange,
+  className = "",
+  buttonClassName = "",
+  wrapperClassName = "",
+  labelClassName = "",
+}: SelectorButtonProps) => {
+  const hoverRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    const hoverElement = hoverRef.current;
+
+    if (!container || !hoverElement) return;
+
+    const moveHoverBlock = (target: HTMLElement) => {
+      if (!target) return;
+      const targetRect = target.getBoundingClientRect();
+      const containerRect = container.getBoundingClientRect();
+
+      hoverElement.style.width = `${targetRect.width}px`;
+      hoverElement.style.transform = `translateX(${targetRect.left - containerRect.left}px)`;
+    };
+
+    const updatePosition = () => {
+      const activeButton = container.querySelector(
+        `[data-value="${activeValue}"]`
+      ) as HTMLElement;
+      if (activeButton) moveHoverBlock(activeButton);
+    };
+
+    updatePosition();
+
+    const resizeObserver = new ResizeObserver(updatePosition);
+    resizeObserver.observe(container);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [activeValue]);
+
+  return (
+    <div className={cls("relative w-fit p-1 card rounded-theme-capped", wrapperClassName)}>
+      <div
+        ref={containerRef}
+        className={cls("relative overflow-hidden cursor-pointer flex", className)}
+      >
+        {options.map((option) => (
+          <button
+            key={option.value}
+            data-value={option.value}
+            disabled={option.disabled}
+            onClick={() => !option.disabled && onValueChange(option.value)}
+            className={cls(
+              "relative px-4 py-2 text-sm md:text-base rounded-theme transition-all duration-300 ease-in-out z-1 text-nowrap",
+              option.disabled ? "opacity-50" : "cursor-pointer",
+              activeValue === option.value ? "" : "bg-transparent",
+              buttonClassName
+            )}
+          >
+            {typeof option.label === "string" ? (
+              <span
+                className={cls(
+                  "transition-colors duration-300 ease-in-out",
+                  activeValue === option.value ? "text-primary-cta-text" : "text-foreground",
+                  option.disabled ? "" : "cursor-pointer",
+                  option.labelClassName || labelClassName
+                )}
+              >
+                {option.label}
+              </span>
+            ) : (
+              <div
+                className={cls(
+                  "flex items-center justify-center transition-opacity duration-300",
+                  activeValue === option.value ? "opacity-100" : "opacity-50",
+                  option.disabled ? "" : "cursor-pointer",
+                  option.labelClassName || labelClassName
+                )}
+              >
+                {option.label}
+              </div>
+            )}
+          </button>
+        ))}
+
+        <div
+          ref={hoverRef}
+          className="absolute top-0 left-0 h-full rounded-theme overflow-hidden pointer-events-none z-0 transition-all duration-400 ease-out"
+        >
+          <div className="relative primary-button w-full h-full rounded-theme" />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+
+export default SelectorButton;
diff --git a/src/components/button/types.ts b/src/components/button/types.ts
new file mode 100644
index 0000000..a5ed317
--- /dev/null
+++ b/src/components/button/types.ts
@@ -0,0 +1,91 @@
+export type ButtonVariant =
+  | "hover-magnetic"
+  | "hover-bubble"
+  | "expand-hover"
+  | "elastic-effect"
+  | "bounce-effect"
+  | "icon-arrow"
+  | "shift-hover"
+  | "text-stagger"
+  | "text-shift"
+  | "text-underline"
+  | "directional-hover";
+
+export type CTAButtonVariant = Exclude<ButtonVariant, "text-underline">;
+
+export type ButtonWithBgClassName = "text-stagger" | "text-shift" | "shift-hover" | "bounce-effect" | "directional-hover";
+
+export const hasBgClassName = (variant?: string): variant is ButtonWithBgClassName => {
+  return variant === "text-stagger" || variant === "text-shift" || variant === "shift-hover" || variant === "bounce-effect" || variant === "directional-hover";
+};
+
+export type BaseButtonProps = {
+  text: string;
+  onClick?: () => void;
+  href?: string;
+  className?: string;
+  scrollToSection?: boolean;
+  type?: "button" | "submit" | "reset";
+};
+
+export type ButtonVariantProps =
+  | ({
+      variant?: "hover-magnetic";
+      textClassName?: string;
+      strengthFactor?: number;
+    } & BaseButtonProps)
+  | ({
+      variant: "hover-bubble";
+      bgClassName?: string;
+      textClassName?: string;
+      iconClassName?: string;
+    } & BaseButtonProps)
+  | ({
+      variant: "expand-hover";
+      textClassName?: string;
+      iconClassName?: string;
+      iconBgClassName?: string;
+    } & BaseButtonProps)
+  | ({
+      variant: "elastic-effect";
+      textClassName?: string;
+    } & BaseButtonProps)
+  | ({
+      variant: "bounce-effect";
+      bgClassName?: string;
+      textClassName?: string;
+    } & BaseButtonProps)
+  | ({
+      variant: "icon-arrow";
+      textClassName?: string;
+      iconClassName?: string;
+    } & BaseButtonProps)
+  | ({
+      variant: "shift-hover";
+      bgClassName?: string;
+      textClassName?: string;
+    } & BaseButtonProps)
+  | ({
+      variant: "text-stagger";
+      bgClassName?: string;
+    } & BaseButtonProps)
+  | ({
+      variant: "text-shift";
+      bgClassName?: string;
+      textClassName?: string;
+    } & BaseButtonProps)
+  | ({
+      variant: "text-underline";
+      disabled?: boolean;
+    } & BaseButtonProps)
+  | ({
+      variant: "directional-hover";
+      bgClassName?: string;
+      textClassName?: string;
+      circleClassName?: string;
+    } & BaseButtonProps);
+
+export type ButtonPropsForVariant<V extends ButtonVariant> = Extract<
+  ButtonVariantProps,
+  { variant?: V }
+>;
\ No newline at end of file
diff --git a/src/components/button/useButtonClick.ts b/src/components/button/useButtonClick.ts
new file mode 100644
index 0000000..2b49a19
--- /dev/null
+++ b/src/components/button/useButtonClick.ts
@@ -0,0 +1,74 @@
+"use client";
+
+import { useLenis } from "lenis/react";
+import { useRouter, usePathname } from "next/navigation";
+import { useEffect } from "react";
+
+export const useButtonClick = (
+  href?: string,
+  onClick?: () => void,
+  scrollToSection?: boolean
+) => {
+  const lenis = useLenis();
+  const router = useRouter();
+  const pathname = usePathname();
+
+  const scrollToElement = (sectionId: string, delay: number = 100) => {
+    setTimeout(() => {
+      if (lenis) {
+        lenis.scrollTo(`#${sectionId}`, { offset: 0 });
+      } else {
+        const element = document.getElementById(sectionId);
+        if (element) {
+          element.scrollIntoView({ behavior: "smooth", block: "start" });
+        }
+      }
+    }, delay);
+  };
+
+  const handleClick = () => {
+    if (href) {
+      const isExternalLink = /^(https?:\/\/|www\.)/.test(href);
+
+      if (isExternalLink) {
+        window.open(
+          href.startsWith("www.") ? `https://${href}` : href,
+          "_blank",
+          "noopener,noreferrer"
+        );
+      } else if (href.startsWith("/")) {
+        const [path, hash] = href.split("#");
+
+        if (path !== pathname) {
+          router.push(path);
+          if (hash) {
+            setTimeout(() => {
+              window.location.hash = hash;
+              scrollToElement(hash, 100);
+            }, 100);
+          }
+        } else {
+          if (hash) {
+            window.location.hash = hash;
+            scrollToElement(hash, 50);
+          } else if (scrollToSection) {
+            const sectionId = path.replace(/^\//, "").replace(/\//g, "-");
+            scrollToElement(sectionId, 50);
+          }
+        }
+      } else {
+        scrollToElement(href, 50);
+      }
+    }
+    onClick?.();
+  };
+
+  useEffect(() => {
+    if (typeof window !== "undefined" && window.location.hash) {
+      const hash = window.location.hash.replace("#", "");
+      scrollToElement(hash, 300);
+    }
+  }, [pathname]);
+
+  return handleClick;
+};
diff --git a/src/components/button/useCharAnimation.ts b/src/components/button/useCharAnimation.ts
new file mode 100644
index 0000000..2e19170
--- /dev/null
+++ b/src/components/button/useCharAnimation.ts
@@ -0,0 +1,31 @@
+import { useEffect, RefObject } from "react";
+
+export const useCharAnimation = (
+    buttonRef: RefObject<HTMLButtonElement | null>,
+    text: string | undefined,
+    selector: string = "[data-button-animate-chars]",
+    staggerDelay: number = 0
+) => {
+    useEffect(() => {
+        const buttonElement = buttonRef.current?.querySelector(selector);
+        if (!buttonElement) return;
+
+        const textContent = text || buttonElement.textContent || "";
+        buttonElement.innerHTML = "";
+
+        [...textContent].forEach((char, index) => {
+            const span = document.createElement("span");
+            span.textContent = char;
+
+            if (staggerDelay > 0) {
+                span.style.transitionDelay = `${index * staggerDelay}s`;
+            }
+
+            if (char === " ") {
+                span.style.whiteSpace = "pre";
+            }
+
+            buttonElement.appendChild(span);
+        });
+    }, [buttonRef, text, selector, staggerDelay]);
+};
diff --git a/src/components/cardStack/CardList.tsx b/src/components/cardStack/CardList.tsx
new file mode 100644
index 0000000..3897e33
--- /dev/null
+++ b/src/components/cardStack/CardList.tsx
@@ -0,0 +1,122 @@
+"use client";
+
+import { Children } from "react";
+import CardStackTextBox from "@/components/cardStack/CardStackTextBox";
+import { useCardAnimation } from "@/components/cardStack/hooks/useCardAnimation";
+import { cls } from "@/lib/utils";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, ButtonAnimationType, CardAnimationType, TitleSegment } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+interface CardListProps {
+  children: React.ReactNode;
+  animationType: CardAnimationType;
+  useUncappedRounding?: boolean;
+  title?: string;
+  titleSegments?: TitleSegment[];
+  description?: string;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  tagAnimation?: ButtonAnimationType;
+  buttons?: ButtonConfig[];
+  buttonAnimation?: ButtonAnimationType;
+  textboxLayout: TextboxLayout;
+  useInvertedBackground?: InvertedBackground;
+  disableCardWrapper?: boolean;
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  cardClassName?: string;
+  textBoxClassName?: string;
+  titleClassName?: string;
+  titleImageWrapperClassName?: string;
+  titleImageClassName?: string;
+  descriptionClassName?: string;
+  tagClassName?: string;
+  buttonContainerClassName?: string;
+  buttonClassName?: string;
+  buttonTextClassName?: string;
+}
+
+const CardList = ({
+  children,
+  animationType,
+  useUncappedRounding = false,
+  title,
+  titleSegments,
+  description,
+  tag,
+  tagIcon,
+  tagAnimation,
+  buttons,
+  buttonAnimation,
+  textboxLayout,
+  useInvertedBackground,
+  disableCardWrapper = false,
+  ariaLabel = "Card list",
+  className = "",
+  containerClassName = "",
+  cardClassName = "",
+  textBoxClassName = "",
+  titleClassName = "",
+  titleImageWrapperClassName = "",
+  titleImageClassName = "",
+  descriptionClassName = "",
+  tagClassName = "",
+  buttonContainerClassName = "",
+  buttonClassName = "",
+  buttonTextClassName = "",
+}: CardListProps) => {
+  const childrenArray = Children.toArray(children);
+  const { itemRefs } = useCardAnimation({ animationType, itemCount: childrenArray.length, useIndividualTriggers: true });
+
+  return (
+    <section
+      aria-label={ariaLabel}
+      className={cls(
+        "relative py-20 w-full",
+        useInvertedBackground && "bg-foreground",
+        className
+      )}
+    >
+      <div className={cls("w-content-width mx-auto flex flex-col gap-8", containerClassName)}>
+        <CardStackTextBox
+          title={title}
+          titleSegments={titleSegments}
+          description={description}
+          tag={tag}
+          tagIcon={tagIcon}
+          tagAnimation={tagAnimation}
+          buttons={buttons}
+          buttonAnimation={buttonAnimation}
+          textboxLayout={textboxLayout}
+          useInvertedBackground={useInvertedBackground}
+          textBoxClassName={textBoxClassName}
+          titleClassName={titleClassName}
+          titleImageWrapperClassName={titleImageWrapperClassName}
+          titleImageClassName={titleImageClassName}
+          descriptionClassName={descriptionClassName}
+          tagClassName={tagClassName}
+          buttonContainerClassName={buttonContainerClassName}
+          buttonClassName={buttonClassName}
+          buttonTextClassName={buttonTextClassName}
+        />
+
+        <div className="flex flex-col gap-6">
+          {childrenArray.map((child, index) => (
+            <div
+              key={index}
+              ref={(el) => { itemRefs.current[index] = el; }}
+              className={cls(!disableCardWrapper && "card", !disableCardWrapper && (useUncappedRounding ? "rounded-theme" : "rounded-theme-capped"), cardClassName)}
+            >
+              {child}
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+
+export default CardList;
diff --git a/src/components/cardStack/CardStack.tsx b/src/components/cardStack/CardStack.tsx
new file mode 100644
index 0000000..c95f75a
--- /dev/null
+++ b/src/components/cardStack/CardStack.tsx
@@ -0,0 +1,188 @@
+"use client";
+
+import { Children } from "react";
+import { CardStackProps } from "./types";
+import GridLayout from "./layouts/grid/GridLayout";
+import AutoCarousel from "./layouts/carousels/AutoCarousel";
+import ButtonCarousel from "./layouts/carousels/ButtonCarousel";
+import { gridConfigs } from "./layouts/grid/gridConfigs";
+
+const CardStack = ({
+    children,
+    mode = "buttons",
+    gridVariant = "uniform-all-items-equal",
+    uniformGridCustomHeightClasses,
+    gridRowsClassName,
+    itemHeightClassesOverride,
+    animationType,
+    supports3DAnimation = false,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    tagAnimation,
+    buttons,
+    buttonAnimation,
+    textboxLayout = "default",
+    useInvertedBackground,
+    carouselThreshold = 5,
+    bottomContent,
+    className = "",
+    containerClassName = "",
+    gridClassName = "",
+    carouselClassName = "",
+    carouselItemClassName = "",
+    controlsClassName = "",
+    textBoxClassName = "",
+    titleClassName = "",
+    titleImageWrapperClassName = "",
+    titleImageClassName = "",
+    descriptionClassName = "",
+    tagClassName = "",
+    buttonContainerClassName = "",
+    buttonClassName = "",
+    buttonTextClassName = "",
+    ariaLabel = "Card stack",
+}: CardStackProps) => {
+    const childrenArray = Children.toArray(children);
+    const itemCount = childrenArray.length;
+
+    // Check if the current grid config has gridRows defined
+    const gridConfig = gridConfigs[gridVariant]?.[itemCount];
+    const hasFixedGridRows = gridConfig && 'gridRows' in gridConfig && gridConfig.gridRows;
+
+    // If grid has fixed row heights and we have uniformGridCustomHeightClasses,
+    // we need to use min-h-0 on md+ to prevent conflicts
+    let adjustedHeightClasses = uniformGridCustomHeightClasses;
+    if (hasFixedGridRows && uniformGridCustomHeightClasses) {
+        // Extract the mobile min-height and add md:min-h-0
+        const mobileMinHeight = uniformGridCustomHeightClasses.split(' ')[0];
+        adjustedHeightClasses = `${mobileMinHeight} md:min-h-0`;
+    }
+
+    // Use grid for items below threshold, carousel for items at or above threshold
+    const useCarousel = itemCount >= carouselThreshold;
+
+    // Grid layout for 1-4 items
+    if (!useCarousel) {
+        return (
+            <GridLayout
+                itemCount={itemCount}
+                gridVariant={gridVariant}
+                uniformGridCustomHeightClasses={adjustedHeightClasses}
+                gridRowsClassName={gridRowsClassName}
+                itemHeightClassesOverride={itemHeightClassesOverride}
+                animationType={animationType}
+                supports3DAnimation={supports3DAnimation}
+                title={title}
+                titleSegments={titleSegments}
+                description={description}
+                tag={tag}
+                tagIcon={tagIcon}
+                tagAnimation={tagAnimation}
+                buttons={buttons}
+                buttonAnimation={buttonAnimation}
+                textboxLayout={textboxLayout}
+                useInvertedBackground={useInvertedBackground}
+                bottomContent={bottomContent}
+                className={className}
+                containerClassName={containerClassName}
+                gridClassName={gridClassName}
+                textBoxClassName={textBoxClassName}
+                titleClassName={titleClassName}
+                titleImageWrapperClassName={titleImageWrapperClassName}
+                titleImageClassName={titleImageClassName}
+                descriptionClassName={descriptionClassName}
+                tagClassName={tagClassName}
+                buttonContainerClassName={buttonContainerClassName}
+                buttonClassName={buttonClassName}
+                buttonTextClassName={buttonTextClassName}
+                ariaLabel={ariaLabel}
+            >
+                {childrenArray}
+            </GridLayout>
+        );
+    }
+
+    // Auto-scroll carousel for 5+ items
+    if (mode === "auto") {
+        // Convert depth-3d to scale-rotate for carousel (doesn't support 3D)
+        const carouselAnimationType = animationType === "depth-3d" ? "scale-rotate" : animationType;
+
+        return (
+            <AutoCarousel
+                uniformGridCustomHeightClasses={adjustedHeightClasses}
+                animationType={carouselAnimationType}
+                title={title}
+                titleSegments={titleSegments}
+                description={description}
+                tag={tag}
+                tagIcon={tagIcon}
+                tagAnimation={tagAnimation}
+                buttons={buttons}
+                buttonAnimation={buttonAnimation}
+                textboxLayout={textboxLayout}
+                useInvertedBackground={useInvertedBackground}
+                bottomContent={bottomContent}
+                className={className}
+                containerClassName={containerClassName}
+                carouselClassName={carouselClassName}
+                textBoxClassName={textBoxClassName}
+                titleClassName={titleClassName}
+                titleImageWrapperClassName={titleImageWrapperClassName}
+                titleImageClassName={titleImageClassName}
+                descriptionClassName={descriptionClassName}
+                tagClassName={tagClassName}
+                buttonContainerClassName={buttonContainerClassName}
+                buttonClassName={buttonClassName}
+                buttonTextClassName={buttonTextClassName}
+                ariaLabel={ariaLabel}
+            >
+                {childrenArray}
+            </AutoCarousel>
+        );
+    }
+
+    // Button-controlled carousel for 5+ items
+    // Convert depth-3d to scale-rotate for carousel (doesn't support 3D)
+    const carouselAnimationType = animationType === "depth-3d" ? "scale-rotate" : animationType;
+
+    return (
+        <ButtonCarousel
+            uniformGridCustomHeightClasses={adjustedHeightClasses}
+            animationType={carouselAnimationType}
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            tagAnimation={tagAnimation}
+            buttons={buttons}
+            buttonAnimation={buttonAnimation}
+            textboxLayout={textboxLayout}
+            useInvertedBackground={useInvertedBackground}
+            bottomContent={bottomContent}
+            className={className}
+            containerClassName={containerClassName}
+            carouselClassName={carouselClassName}
+            carouselItemClassName={carouselItemClassName}
+            controlsClassName={controlsClassName}
+            textBoxClassName={textBoxClassName}
+            titleClassName={titleClassName}
+            titleImageWrapperClassName={titleImageWrapperClassName}
+            titleImageClassName={titleImageClassName}
+            descriptionClassName={descriptionClassName}
+            tagClassName={tagClassName}
+            buttonContainerClassName={buttonContainerClassName}
+            buttonClassName={buttonClassName}
+            buttonTextClassName={buttonTextClassName}
+            ariaLabel={ariaLabel}
+        >
+            {childrenArray}
+        </ButtonCarousel>
+    );
+};
+
+
+export default CardStack;
diff --git a/src/components/cardStack/CardStackTextBox.tsx b/src/components/cardStack/CardStackTextBox.tsx
new file mode 100644
index 0000000..d6b36ea
--- /dev/null
+++ b/src/components/cardStack/CardStackTextBox.tsx
@@ -0,0 +1,91 @@
+"use client";
+
+import { useMemo } from "react";
+import TextBox from "@/components/Textbox";
+import { cls } from "@/lib/utils";
+import type { TextBoxProps } from "./types";
+
+const CardStackTextBox = ({
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    tagAnimation,
+    buttons,
+    buttonAnimation,
+    textboxLayout,
+    useInvertedBackground,
+    textBoxClassName = "",
+    titleClassName = "",
+    titleImageWrapperClassName = "",
+    titleImageClassName = "",
+    descriptionClassName = "",
+    tagClassName = "",
+    buttonContainerClassName = "",
+    buttonClassName = "",
+    buttonTextClassName = "",
+}: TextBoxProps) => {
+    const styles = useMemo(() => {
+        if (textboxLayout === "default") {
+            return {
+                className: cls("flex flex-col gap-3 md:gap-2", textBoxClassName),
+                titleClassName: cls("text-6xl font-medium text-center", titleClassName),
+                descriptionClassName: cls("text-lg leading-tight text-center md:max-w-6/10", descriptionClassName),
+                tagClassName: cls("w-fit px-3 py-1 text-sm rounded-theme card text-foreground inline-flex items-center gap-2 mb-0 mx-auto", tagClassName),
+                buttonContainerClassName: cls("flex flex-wrap gap-4 max-md:justify-center mt-1 md:mt-3 justify-center", buttonContainerClassName),
+                center: true,
+            };
+        }
+
+        if (textboxLayout === "inline-image") {
+            return {
+                className: cls("flex flex-col gap-3 md:gap-2", textBoxClassName),
+                titleClassName: cls("text-4xl md:text-5xl font-medium text-center", titleClassName),
+                descriptionClassName: cls("text-lg leading-tight text-center", descriptionClassName),
+                tagClassName: cls("w-fit px-3 py-1 text-sm rounded-theme card text-foreground inline-flex items-center gap-2 mb-0 mx-auto", tagClassName),
+                buttonContainerClassName: cls("flex flex-wrap gap-4 max-md:justify-center mt-1 md:mt-3 justify-center", buttonContainerClassName),
+                center: true,
+            };
+        }
+
+        return {
+            className: textBoxClassName,
+            titleClassName: cls("text-6xl font-medium", titleClassName),
+            descriptionClassName: cls("text-lg leading-tight", descriptionClassName),
+            tagClassName: cls("px-3 py-1 text-sm rounded-theme card text-foreground inline-flex items-center gap-2", tagClassName),
+            buttonContainerClassName: cls("flex flex-wrap gap-4 max-md:justify-center", buttonContainerClassName),
+            center: false,
+        };
+    }, [textboxLayout, textBoxClassName, titleClassName, descriptionClassName, tagClassName, buttonContainerClassName]);
+
+    if (!title && !titleSegments && !description) return null;
+
+    return (
+        <TextBox
+            title={title!}
+            titleSegments={titleSegments}
+            description={description!}
+            tag={tag}
+            tagIcon={tagIcon}
+            tagAnimation={tagAnimation}
+            buttons={buttons}
+            buttonAnimation={buttonAnimation}
+            textboxLayout={textboxLayout}
+            useInvertedBackground={useInvertedBackground}
+            className={styles.className}
+            titleClassName={styles.titleClassName}
+            titleImageWrapperClassName={titleImageWrapperClassName}
+            titleImageClassName={titleImageClassName}
+            descriptionClassName={styles.descriptionClassName}
+            tagClassName={styles.tagClassName}
+            buttonContainerClassName={styles.buttonContainerClassName}
+            buttonClassName={buttonClassName}
+            buttonTextClassName={buttonTextClassName}
+            center={styles.center}
+        />
+    );
+};
+
+
+export default CardStackTextBox;
diff --git a/src/components/cardStack/hooks/useCardAnimation.ts b/src/components/cardStack/hooks/useCardAnimation.ts
new file mode 100644
index 0000000..ab854e1
--- /dev/null
+++ b/src/components/cardStack/hooks/useCardAnimation.ts
@@ -0,0 +1,187 @@
+import { useRef } from "react";
+import { useGSAP } from "@gsap/react";
+import gsap from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+import type { CardAnimationType, GridVariant } from "../types";
+
+gsap.registerPlugin(ScrollTrigger);
+import { useDepth3DAnimation } from "./useDepth3DAnimation";
+
+interface UseCardAnimationProps {
+  animationType: CardAnimationType | "depth-3d";
+  itemCount: number;
+  isGrid?: boolean;
+  supports3DAnimation?: boolean;
+  gridVariant?: GridVariant;
+  useIndividualTriggers?: boolean;
+}
+
+export const useCardAnimation = ({
+  animationType,
+  itemCount,
+  isGrid = true,
+  supports3DAnimation = false,
+  gridVariant,
+  useIndividualTriggers = false
+}: UseCardAnimationProps) => {
+  const itemRefs = useRef<(HTMLElement | null)[]>([]);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const perspectiveRef = useRef<HTMLDivElement | null>(null);
+  const bottomContentRef = useRef<HTMLDivElement | null>(null);
+
+  // Enable 3D effect only when explicitly supported and conditions are met
+  const { isMobile } = useDepth3DAnimation({
+    itemRefs,
+    containerRef,
+    perspectiveRef,
+    isEnabled: animationType === "depth-3d" && isGrid && supports3DAnimation && gridVariant === "uniform-all-items-equal",
+  });
+
+  // Use scale-rotate as fallback when depth-3d conditions aren't met
+  const effectiveAnimationType =
+    animationType === "depth-3d" && (isMobile || !isGrid || gridVariant !== "uniform-all-items-equal")
+      ? "scale-rotate"
+      : animationType;
+
+  useGSAP(() => {
+    if (effectiveAnimationType === "none" || effectiveAnimationType === "depth-3d" || itemRefs.current.length === 0) return;
+
+    const items = itemRefs.current.filter((el) => el !== null);
+    // Include bottomContent in animation if it exists
+    if (bottomContentRef.current) {
+      items.push(bottomContentRef.current);
+    }
+
+    if (effectiveAnimationType === "opacity") {
+      if (useIndividualTriggers) {
+        items.forEach((item) => {
+          gsap.fromTo(
+            item,
+            { opacity: 0 },
+            {
+              opacity: 1,
+              duration: 1.25,
+              ease: "sine",
+              scrollTrigger: {
+                trigger: item,
+                start: "top 80%",
+                toggleActions: "play none none none",
+              },
+            }
+          );
+        });
+      } else {
+        gsap.fromTo(
+          items,
+          { opacity: 0 },
+          {
+            opacity: 1,
+            duration: 1.25,
+            stagger: 0.15,
+            ease: "sine",
+            scrollTrigger: {
+              trigger: items[0],
+              start: "top 80%",
+              toggleActions: "play none none none",
+            },
+          }
+        );
+      }
+    } else if (effectiveAnimationType === "slide-up") {
+      items.forEach((item, index) => {
+        gsap.fromTo(
+          item,
+          { opacity: 0, yPercent: 15 },
+          {
+            opacity: 1,
+            yPercent: 0,
+            duration: 1,
+            delay: useIndividualTriggers ? 0 : index * 0.15,
+            ease: "sine",
+            scrollTrigger: {
+              trigger: useIndividualTriggers ? item : items[0],
+              start: "top 80%",
+              toggleActions: "play none none none",
+            },
+          }
+        );
+      });
+    } else if (effectiveAnimationType === "scale-rotate") {
+      if (useIndividualTriggers) {
+        items.forEach((item) => {
+          gsap.fromTo(
+            item,
+            { scaleX: 0, rotate: 10 },
+            {
+              scaleX: 1,
+              rotate: 0,
+              duration: 1,
+              ease: "power3",
+              scrollTrigger: {
+                trigger: item,
+                start: "top 80%",
+                toggleActions: "play none none none",
+              },
+            }
+          );
+        });
+      } else {
+        gsap.fromTo(
+          items,
+          { scaleX: 0, rotate: 10 },
+          {
+            scaleX: 1,
+            rotate: 0,
+            duration: 1,
+            stagger: 0.15,
+            ease: "power3",
+            scrollTrigger: {
+              trigger: items[0],
+              start: "top 80%",
+              toggleActions: "play none none none",
+            },
+          }
+        );
+      }
+    } else if (effectiveAnimationType === "blur-reveal") {
+      if (useIndividualTriggers) {
+        items.forEach((item) => {
+          gsap.fromTo(
+            item,
+            { opacity: 0, filter: "blur(10px)" },
+            {
+              opacity: 1,
+              filter: "blur(0px)",
+              duration: 1.2,
+              ease: "power2.out",
+              scrollTrigger: {
+                trigger: item,
+                start: "top 80%",
+                toggleActions: "play none none none",
+              },
+            }
+          );
+        });
+      } else {
+        gsap.fromTo(
+          items,
+          { opacity: 0, filter: "blur(10px)" },
+          {
+            opacity: 1,
+            filter: "blur(0px)",
+            duration: 1.2,
+            stagger: 0.15,
+            ease: "power2.out",
+            scrollTrigger: {
+              trigger: items[0],
+              start: "top 80%",
+              toggleActions: "play none none none",
+            },
+          }
+        );
+      }
+    }
+  }, [effectiveAnimationType, itemCount, useIndividualTriggers]);
+
+  return { itemRefs, containerRef, perspectiveRef, bottomContentRef };
+};
diff --git a/src/components/cardStack/hooks/useDepth3DAnimation.ts b/src/components/cardStack/hooks/useDepth3DAnimation.ts
new file mode 100644
index 0000000..1966225
--- /dev/null
+++ b/src/components/cardStack/hooks/useDepth3DAnimation.ts
@@ -0,0 +1,118 @@
+import { useEffect, useState, useRef, RefObject } from "react";
+
+const MOBILE_BREAKPOINT = 768;
+const ANIMATION_SPEED = 0.05;
+const ROTATION_SPEED = 0.1;
+const MOUSE_MULTIPLIER = 0.5;
+const ROTATION_MULTIPLIER = 0.25;
+
+interface UseDepth3DAnimationProps {
+  itemRefs: RefObject<(HTMLElement | null)[]>;
+  containerRef: RefObject<HTMLDivElement | null>;
+  perspectiveRef?: RefObject<HTMLDivElement | null>;
+  isEnabled: boolean;
+}
+
+export const useDepth3DAnimation = ({
+  itemRefs,
+  containerRef,
+  perspectiveRef,
+  isEnabled,
+}: UseDepth3DAnimationProps) => {
+  const [isMobile, setIsMobile] = useState(false);
+
+  // Detect mobile viewport
+  useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+
+    return () => {
+      window.removeEventListener("resize", checkMobile);
+    };
+  }, []);
+
+  // 3D mouse-tracking effect (desktop only)
+  useEffect(() => {
+    if (!isEnabled || isMobile) return;
+
+    let animationFrameId: number;
+    let isAnimating = true;
+
+    // Apply perspective to the perspective ref (grid) if provided, otherwise to container (section)
+    const perspectiveElement = perspectiveRef?.current || containerRef.current;
+    if (perspectiveElement) {
+      perspectiveElement.style.perspective = "1200px";
+      perspectiveElement.style.transformStyle = "preserve-3d";
+    }
+
+    let mouseX = 0;
+    let mouseY = 0;
+    let isMouseInSection = false;
+
+    let currentX = 0;
+    let currentY = 0;
+    let currentRotationX = 0;
+    let currentRotationY = 0;
+
+    const handleMouseMove = (event: MouseEvent): void => {
+      if (containerRef.current) {
+        const rect = containerRef.current.getBoundingClientRect();
+        isMouseInSection =
+          event.clientX >= rect.left &&
+          event.clientX <= rect.right &&
+          event.clientY >= rect.top &&
+          event.clientY <= rect.bottom;
+      }
+
+      if (isMouseInSection) {
+        mouseX = (event.clientX / window.innerWidth) * 100 - 50;
+        mouseY = (event.clientY / window.innerHeight) * 100 - 50;
+      }
+    };
+
+    const animate = (): void => {
+      if (!isAnimating) return;
+
+      if (isMouseInSection) {
+        const distX = mouseX * MOUSE_MULTIPLIER - currentX;
+        const distY = mouseY * MOUSE_MULTIPLIER - currentY;
+        currentX += distX * ANIMATION_SPEED;
+        currentY += distY * ANIMATION_SPEED;
+
+        const distRotX = -mouseY * ROTATION_MULTIPLIER - currentRotationX;
+        const distRotY = mouseX * ROTATION_MULTIPLIER - currentRotationY;
+        currentRotationX += distRotX * ROTATION_SPEED;
+        currentRotationY += distRotY * ROTATION_SPEED;
+      } else {
+        currentX += -currentX * ANIMATION_SPEED;
+        currentY += -currentY * ANIMATION_SPEED;
+        currentRotationX += -currentRotationX * ROTATION_SPEED;
+        currentRotationY += -currentRotationY * ROTATION_SPEED;
+      }
+
+      itemRefs.current?.forEach((ref) => {
+        if (!ref) return;
+        ref.style.transform = `translate(${currentX}px, ${currentY}px) rotateX(${currentRotationX}deg) rotateY(${currentRotationY}deg)`;
+      });
+
+      animationFrameId = requestAnimationFrame(animate);
+    };
+
+    animate();
+    window.addEventListener("mousemove", handleMouseMove);
+
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      if (animationFrameId) {
+        cancelAnimationFrame(animationFrameId);
+      }
+      isAnimating = false;
+    };
+  }, [isEnabled, isMobile, itemRefs, containerRef]);
+
+  return { isMobile };
+};
diff --git a/src/components/cardStack/hooks/usePhoneAnimations.ts b/src/components/cardStack/hooks/usePhoneAnimations.ts
new file mode 100644
index 0000000..7c679e4
--- /dev/null
+++ b/src/components/cardStack/hooks/usePhoneAnimations.ts
@@ -0,0 +1,108 @@
+import { useLayoutEffect, useRef } from "react";
+import { gsap } from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+
+gsap.registerPlugin(ScrollTrigger);
+
+export interface TimelinePhoneViewItem {
+  trigger: string;
+  content: React.ReactNode;
+  imageOne?: string;
+  videoOne?: string;
+  imageAltOne?: string;
+  videoAriaLabelOne?: string;
+  imageTwo?: string;
+  videoTwo?: string;
+  imageAltTwo?: string;
+  videoAriaLabelTwo?: string;
+}
+
+const getImageAnimationConfig = (itemIndex: number, imageIndex: number) => {
+  const isFirstImage = imageIndex === 0;
+  const isOddItem = itemIndex % 2 === 1;
+
+  if (isFirstImage) {
+    return {
+      from: { xPercent: -200, rotation: -45 },
+      to: { rotation: isOddItem ? 10 : -10 },
+    };
+  } else {
+    return {
+      from: { xPercent: 200, rotation: 45 },
+      to: { rotation: isOddItem ? -10 : 10 },
+    };
+  }
+};
+
+export const usePhoneAnimations = (items: TimelinePhoneViewItem[]) => {
+  const imageRefs = useRef<(HTMLDivElement | null)[]>([]);
+  const mobileImageRefs = useRef<(HTMLDivElement | null)[]>([]);
+
+  useLayoutEffect(() => {
+    const mm = gsap.matchMedia();
+
+    const animatePhones = (isMobile: boolean) => {
+      items.forEach((item, itemIndex) => {
+        const images = [item.imageOne || item.videoOne, item.imageTwo || item.videoTwo];
+
+        images.forEach((_, imageIndex) => {
+          const refIndex = itemIndex * 2 + imageIndex;
+          const element = isMobile
+            ? mobileImageRefs.current[refIndex]
+            : imageRefs.current[refIndex];
+
+          if (element) {
+            const isFirstImage = imageIndex === 0;
+
+            const fromConfig = isMobile
+              ? {
+                  xPercent: isFirstImage ? -150 : 150,
+                  rotation: isFirstImage ? -25 : 25,
+                }
+              : getImageAnimationConfig(itemIndex, imageIndex).from;
+
+            const toConfig = isMobile
+              ? {
+                  xPercent: 0,
+                  rotation: 0,
+                  duration: 1,
+                  scrollTrigger: {
+                    trigger: element,
+                    start: "top 90%",
+                    end: "top 50%",
+                    scrub: 1,
+                  },
+                }
+              : {
+                  xPercent: 0,
+                  rotation: getImageAnimationConfig(itemIndex, imageIndex).to
+                    .rotation,
+                  scrollTrigger: {
+                    trigger: `.${item.trigger}`,
+                    start: "top bottom",
+                    end: "top top",
+                    scrub: 1,
+                  },
+                };
+
+            gsap.fromTo(element, fromConfig, toConfig);
+          }
+        });
+      });
+    };
+
+    mm.add("(max-width: 767px)", () => animatePhones(true));
+    mm.add("(min-width: 768px)", () => animatePhones(false));
+
+    return () => {
+      mm.revert();
+      imageRefs.current = [];
+      mobileImageRefs.current = [];
+    };
+  }, [items]);
+
+  return {
+    imageRefs,
+    mobileImageRefs,
+  };
+};
diff --git a/src/components/cardStack/hooks/usePrevNextButtons.ts b/src/components/cardStack/hooks/usePrevNextButtons.ts
new file mode 100644
index 0000000..6fa68a1
--- /dev/null
+++ b/src/components/cardStack/hooks/usePrevNextButtons.ts
@@ -0,0 +1,40 @@
+import { useCallback, useEffect, useState } from "react";
+import { EmblaCarouselType } from "embla-carousel";
+
+export const usePrevNextButtons = (emblaApi: EmblaCarouselType | undefined) => {
+    const [prevBtnDisabled, setPrevBtnDisabled] = useState(true);
+    const [nextBtnDisabled, setNextBtnDisabled] = useState(true);
+
+    const onPrevButtonClick = useCallback(() => {
+        if (!emblaApi) return;
+        emblaApi.scrollPrev();
+    }, [emblaApi]);
+
+    const onNextButtonClick = useCallback(() => {
+        if (!emblaApi) return;
+        emblaApi.scrollNext();
+    }, [emblaApi]);
+
+    const onSelect = useCallback((emblaApi: EmblaCarouselType) => {
+        setPrevBtnDisabled(!emblaApi.canScrollPrev());
+        setNextBtnDisabled(!emblaApi.canScrollNext());
+    }, []);
+
+    useEffect(() => {
+        if (!emblaApi) return;
+
+        onSelect(emblaApi);
+        emblaApi.on("reInit", onSelect).on("select", onSelect);
+
+        return () => {
+            emblaApi.off("reInit", onSelect).off("select", onSelect);
+        };
+    }, [emblaApi, onSelect]);
+
+    return {
+        prevBtnDisabled,
+        nextBtnDisabled,
+        onPrevButtonClick,
+        onNextButtonClick,
+    };
+};
diff --git a/src/components/cardStack/hooks/useScrollProgress.ts b/src/components/cardStack/hooks/useScrollProgress.ts
new file mode 100644
index 0000000..42f1c8b
--- /dev/null
+++ b/src/components/cardStack/hooks/useScrollProgress.ts
@@ -0,0 +1,30 @@
+import { useCallback, useEffect, useState } from "react";
+import { EmblaCarouselType } from "embla-carousel";
+
+export const useScrollProgress = (emblaApi: EmblaCarouselType | undefined) => {
+    const [scrollProgress, setScrollProgress] = useState(0);
+
+    const onScroll = useCallback((emblaApi: EmblaCarouselType) => {
+        const progress = Math.max(0, Math.min(1, emblaApi.scrollProgress()));
+        setScrollProgress(progress * 100);
+    }, []);
+
+    useEffect(() => {
+        if (!emblaApi) return;
+
+        onScroll(emblaApi);
+        emblaApi
+            .on("reInit", onScroll)
+            .on("scroll", onScroll)
+            .on("slideFocus", onScroll);
+
+        return () => {
+            emblaApi
+                .off("reInit", onScroll)
+                .off("scroll", onScroll)
+                .off("slideFocus", onScroll);
+        };
+    }, [emblaApi, onScroll]);
+
+    return scrollProgress;
+};
diff --git a/src/components/cardStack/hooks/useTimelineHorizontal.ts b/src/components/cardStack/hooks/useTimelineHorizontal.ts
new file mode 100644
index 0000000..7f7cfcb
--- /dev/null
+++ b/src/components/cardStack/hooks/useTimelineHorizontal.ts
@@ -0,0 +1,243 @@
+import { useState, useEffect, useRef, useCallback } from "react";
+
+const ANIMATION_CONFIG = {
+  PROGRESS_DURATION: 5000,
+  TRANSITION_DURATION: 500,
+  ANIMATION_START_DELAY: 100,
+  IMAGE_TRANSITION_DELAY: 300,
+} as const;
+
+export interface MediaItem {
+  imageSrc?: string;
+  videoSrc?: string;
+  imageAlt?: string;
+  videoAriaLabel?: string;
+}
+
+interface UseTimelineHorizontalProps {
+  itemCount: number;
+  mediaItems?: MediaItem[];
+}
+
+export const useTimelineHorizontal = ({ itemCount, mediaItems }: UseTimelineHorizontalProps) => {
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [imageOpacity, setImageOpacity] = useState(1);
+  const [currentMediaSrc, setCurrentMediaSrc] = useState<{ imageSrc?: string; videoSrc?: string }>(() => {
+    if (mediaItems && mediaItems[0]) {
+      return {
+        imageSrc: mediaItems[0].imageSrc,
+        videoSrc: mediaItems[0].videoSrc,
+      };
+    }
+    return {};
+  });
+  const progressRefs = useRef<(HTMLDivElement | null)[]>([]);
+  const animationFrameRef = useRef<number | null>(null);
+  const imageTransitionTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const isMountedRef = useRef(false);
+  const hasInitializedRef = useRef(false);
+
+  const resetAllProgressBars = useCallback(() => {
+    if (animationFrameRef.current) {
+      cancelAnimationFrame(animationFrameRef.current);
+    }
+
+    progressRefs.current.forEach((bar) => {
+      if (bar) {
+        bar.style.transition = `transform ${ANIMATION_CONFIG.TRANSITION_DURATION}ms ease-in-out`;
+        bar.style.transform = "scaleX(0)";
+
+        setTimeout(() => {
+          if (bar) {
+            bar.style.transition = "none";
+          }
+        }, ANIMATION_CONFIG.TRANSITION_DURATION);
+      }
+    });
+  }, []);
+
+  const animateProgress = useCallback(
+    (index: number) => {
+      if (!progressRefs.current[index]) return;
+
+      if (animationFrameRef.current) {
+        cancelAnimationFrame(animationFrameRef.current);
+      }
+
+      const progressBar = progressRefs.current[index];
+      progressBar.style.transition = "none";
+      progressBar.style.transform = "scaleX(0)";
+
+      const easeInOut = (t: number): number => {
+        return -(Math.cos(Math.PI * t) - 1) / 2;
+      };
+
+      setTimeout(() => {
+        let startTime: number | null = null;
+
+        const animate = (timestamp: number) => {
+          if (!startTime) startTime = timestamp;
+          const elapsed = timestamp - startTime;
+          const linearProgress = Math.min(elapsed / ANIMATION_CONFIG.PROGRESS_DURATION, 1);
+          const easedProgress = easeInOut(linearProgress);
+
+          if (progressRefs.current[index]) {
+            progressRefs.current[index]!.style.transform = `scaleX(${easedProgress})`;
+          }
+
+          if (linearProgress < 1) {
+            animationFrameRef.current = requestAnimationFrame(animate);
+          } else {
+            setActiveIndex((prevIndex) => {
+              const nextIndex = prevIndex + 1;
+              if (nextIndex >= itemCount) {
+                resetAllProgressBars();
+                return 0;
+              }
+              return nextIndex;
+            });
+          }
+        };
+
+        animationFrameRef.current = requestAnimationFrame(animate);
+      }, ANIMATION_CONFIG.ANIMATION_START_DELAY);
+    },
+    [itemCount, resetAllProgressBars]
+  );
+
+  useEffect(() => {
+    for (let i = 0; i < activeIndex; i++) {
+      const bar = progressRefs.current[i];
+      if (bar) {
+        bar.style.transform = "scaleX(1)";
+      }
+    }
+
+    if (isMountedRef.current) {
+      animateProgress(activeIndex);
+    }
+
+    return () => {
+      if (animationFrameRef.current) {
+        cancelAnimationFrame(animationFrameRef.current);
+        animationFrameRef.current = null;
+      }
+    };
+  }, [activeIndex, animateProgress]);
+
+  useEffect(() => {
+    isMountedRef.current = true;
+
+    if (!hasInitializedRef.current) {
+      hasInitializedRef.current = true;
+
+      if (mediaItems && mediaItems[0]) {
+        setCurrentMediaSrc({
+          imageSrc: mediaItems[0].imageSrc,
+          videoSrc: mediaItems[0].videoSrc,
+        });
+        setImageOpacity(1);
+      }
+
+      setTimeout(() => {
+        if (isMountedRef.current) {
+          animateProgress(0);
+        }
+      }, ANIMATION_CONFIG.ANIMATION_START_DELAY);
+    }
+
+    return () => {
+      isMountedRef.current = false;
+      if (animationFrameRef.current) {
+        cancelAnimationFrame(animationFrameRef.current);
+        animationFrameRef.current = null;
+      }
+      if (imageTransitionTimeoutRef.current) {
+        clearTimeout(imageTransitionTimeoutRef.current);
+        imageTransitionTimeoutRef.current = null;
+      }
+    };
+  }, [animateProgress, mediaItems]);
+
+  useEffect(() => {
+    if (!isMountedRef.current || !mediaItems) return;
+
+    const currentItem = mediaItems[activeIndex];
+    if (!currentItem) return;
+
+    const newMediaSrc = {
+      imageSrc: currentItem.imageSrc,
+      videoSrc: currentItem.videoSrc,
+    };
+
+    if (
+      (newMediaSrc.imageSrc && newMediaSrc.imageSrc !== currentMediaSrc.imageSrc) ||
+      (newMediaSrc.videoSrc && newMediaSrc.videoSrc !== currentMediaSrc.videoSrc)
+    ) {
+      if (imageTransitionTimeoutRef.current) {
+        clearTimeout(imageTransitionTimeoutRef.current);
+      }
+
+      setImageOpacity(0);
+
+      imageTransitionTimeoutRef.current = setTimeout(() => {
+        if (isMountedRef.current) {
+          setCurrentMediaSrc(newMediaSrc);
+          setTimeout(() => {
+            if (isMountedRef.current) {
+              setImageOpacity(1);
+            }
+          }, 50);
+        }
+      }, ANIMATION_CONFIG.IMAGE_TRANSITION_DELAY);
+    }
+
+    return () => {
+      if (imageTransitionTimeoutRef.current) {
+        clearTimeout(imageTransitionTimeoutRef.current);
+      }
+    };
+  }, [activeIndex, mediaItems, currentMediaSrc]);
+
+  const handleImageLoad = useCallback(() => {
+    setImageOpacity(1);
+  }, []);
+
+  const handleItemClick = useCallback(
+    (index: number) => {
+      if (index === activeIndex) return;
+
+      if (animationFrameRef.current) {
+        cancelAnimationFrame(animationFrameRef.current);
+      }
+
+      for (let i = 0; i < index; i++) {
+        const bar = progressRefs.current[i];
+        if (bar) {
+          bar.style.transition = `transform ${ANIMATION_CONFIG.TRANSITION_DURATION}ms ease-in-out`;
+          bar.style.transform = "scaleX(1)";
+        }
+      }
+
+      for (let i = index; i < progressRefs.current.length; i++) {
+        const bar = progressRefs.current[i];
+        if (bar) {
+          bar.style.transition = `transform ${ANIMATION_CONFIG.TRANSITION_DURATION}ms ease-in-out`;
+          bar.style.transform = "scaleX(0)";
+        }
+      }
+
+      setActiveIndex(index);
+    },
+    [activeIndex]
+  );
+
+  return {
+    activeIndex,
+    progressRefs,
+    handleItemClick,
+    imageOpacity,
+    currentMediaSrc,
+    handleImageLoad,
+  };
+};
diff --git a/src/components/cardStack/layouts/carousels/AngledCarousel.tsx b/src/components/cardStack/layouts/carousels/AngledCarousel.tsx
new file mode 100644
index 0000000..c84ba01
--- /dev/null
+++ b/src/components/cardStack/layouts/carousels/AngledCarousel.tsx
@@ -0,0 +1,143 @@
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import { motion } from "framer-motion";
+import MediaContent from "@/components/shared/MediaContent";
+import { cls } from "@/lib/utils";
+
+interface AngledCarouselItem {
+  id: string;
+  imageSrc?: string;
+  videoSrc?: string;
+  imageAlt?: string;
+  videoAriaLabel?: string;
+}
+
+interface AngledCarouselProps {
+  items: AngledCarouselItem[];
+  className?: string;
+  autoPlay?: boolean;
+  autoPlayInterval?: number;
+}
+
+const CARD_TRANSITION_DURATION = 0.8;
+const CARD_TRANSITION_EASE = [0.65, 0, 0.35, 1] as const;
+
+const cardVariants = {
+  'hidden-0': { opacity: 0, y: '25px' },
+  'hidden-1': { scale: 0.88, opacity: 0, x: 'calc(100% + 20px)', y: '5%', rotate: 2 },
+  'hidden--1': { scale: 0.88, opacity: 0, x: 'calc(-100% - 20px)', y: '5%', rotate: -2 },
+  '0': { scale: 1, opacity: 1, x: '0%', y: '0%', rotate: 0 },
+  '1': { scale: 0.88, opacity: 1, x: '100%', y: '5%', rotate: 2 },
+  '-1': { scale: 0.88, opacity: 1, x: '-100%', y: '5%', rotate: -2 },
+  '2': { scale: 0.8, opacity: 0, x: '200%', y: '10%', rotate: 4 },
+  '-2': { scale: 0.8, opacity: 0, x: '-200%', y: '10%', rotate: -4 },
+};
+
+const AngledCarousel = ({ items, className = "", autoPlay = true, autoPlayInterval = 4000 }: AngledCarouselProps) => {
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [isFirstRender, setIsFirstRender] = useState(true);
+  const autoPlayRef = useRef<NodeJS.Timeout | null>(null);
+  const n = items.length;
+
+  useEffect(() => {
+    if (isFirstRender) {
+      const timeout = setTimeout(() => {
+        setIsFirstRender(false);
+      }, CARD_TRANSITION_DURATION * 1000);
+      return () => clearTimeout(timeout);
+    }
+  }, [isFirstRender]);
+
+  const resetAutoPlay = () => {
+    if (autoPlayRef.current) {
+      clearInterval(autoPlayRef.current);
+    }
+    if (autoPlay) {
+      autoPlayRef.current = setInterval(() => {
+        setActiveIndex((prev) => (prev + 1) % n);
+      }, autoPlayInterval);
+    }
+  };
+
+  useEffect(() => {
+    resetAutoPlay();
+    return () => {
+      if (autoPlayRef.current) {
+        clearInterval(autoPlayRef.current);
+      }
+    };
+  }, [autoPlay, autoPlayInterval]);
+
+  const positionFactors = [-2, -1, 0, 1, 2];
+
+  return (
+    <div className={cls("relative w-full flex justify-center items-center overflow-hidden", className)}>
+      <div className="w-[70%] md:w-[40%] aspect-square md:aspect-[16/10] opacity-0" />
+      {positionFactors.map((positionFactor) => {
+        const itemIndex = (activeIndex + positionFactor + n) % n;
+        const item = items[itemIndex];
+        const isCenter = positionFactor === 0;
+        const isVisible = Math.abs(positionFactor) <= 1;
+
+        const getAnimateState = () => {
+          const key = positionFactor.toString() as keyof typeof cardVariants;
+          return cardVariants[key];
+        };
+
+        const getInitialState = () => {
+          if (isVisible && isFirstRender) {
+            const key = `hidden-${positionFactor}` as keyof typeof cardVariants;
+            return cardVariants[key];
+          }
+          return getAnimateState();
+        };
+
+        const getDelay = () => {
+          if (isVisible && isFirstRender) {
+            const delays: { [key: string]: number } = { '-1': 0.6, '0': 0.45, '1': 0.6 };
+            return delays[positionFactor.toString()] || 0;
+          }
+          return 0;
+        };
+
+        return (
+          <motion.div
+            key={item.id}
+            className="!absolute w-[70%] md:w-[40%] aspect-square md:aspect-[16/10] card p-1 rounded-theme-capped overflow-hidden"
+            style={{
+              zIndex: positionFactor === 0 ? 10 : 5 - Math.abs(positionFactor),
+            }}
+            initial={getInitialState()}
+            animate={getAnimateState()}
+            transition={{
+              duration: CARD_TRANSITION_DURATION,
+              ease: CARD_TRANSITION_EASE,
+              delay: getDelay(),
+            }}
+          >
+            <MediaContent
+              imageSrc={item.imageSrc}
+              videoSrc={item.videoSrc}
+              imageAlt={item.imageAlt}
+              videoAriaLabel={item.videoAriaLabel}
+              imageClassName="w-full h-full rounded-theme-capped object-cover"
+            />
+            <motion.div
+              className="absolute inset-0 bg-background/50 backdrop-blur-[1px] pointer-events-none select-none"
+              initial={{ opacity: isCenter ? 0 : 1 }}
+              animate={{ opacity: isCenter ? 0 : 1 }}
+              transition={{
+                duration: 0.5,
+                ease: "easeInOut",
+              }}
+            />
+          </motion.div>
+        );
+      })}
+    </div>
+  );
+};
+
+
+export default AngledCarousel;
diff --git a/src/components/cardStack/layouts/carousels/ArrowCarousel.tsx b/src/components/cardStack/layouts/carousels/ArrowCarousel.tsx
new file mode 100644
index 0000000..fe2e33d
--- /dev/null
+++ b/src/components/cardStack/layouts/carousels/ArrowCarousel.tsx
@@ -0,0 +1,143 @@
+"use client";
+
+import { Children, useCallback, useEffect, useState } from "react";
+import useEmblaCarousel from "embla-carousel-react";
+import { EmblaCarouselType } from "embla-carousel";
+import CardStackTextBox from "../../CardStackTextBox";
+import { cls } from "@/lib/utils";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { ArrowCarouselProps } from "../../types";
+
+const ArrowCarousel = ({
+    children,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    tagAnimation,
+    buttons,
+    buttonAnimation,
+    textboxLayout = "default",
+    useInvertedBackground,
+    className = "",
+    containerClassName = "",
+    carouselClassName = "",
+    controlsClassName = "",
+    textBoxClassName = "",
+    titleClassName = "",
+    titleImageWrapperClassName = "",
+    titleImageClassName = "",
+    descriptionClassName = "",
+    tagClassName = "",
+    buttonContainerClassName = "",
+    buttonClassName = "",
+    buttonTextClassName = "",
+    ariaLabel = "Carousel section",
+}: ArrowCarouselProps) => {
+    const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true, align: "center" });
+    const [selectedIndex, setSelectedIndex] = useState(0);
+
+    const childrenArray = Children.toArray(children);
+
+    const onSelect = useCallback((emblaApi: EmblaCarouselType) => {
+        setSelectedIndex(emblaApi.selectedScrollSnap());
+    }, []);
+
+    const scrollPrev = useCallback(() => emblaApi?.scrollPrev(), [emblaApi]);
+    const scrollNext = useCallback(() => emblaApi?.scrollNext(), [emblaApi]);
+
+    useEffect(() => {
+        if (!emblaApi) return;
+
+        onSelect(emblaApi);
+        emblaApi.on("select", onSelect).on("reInit", onSelect);
+
+        return () => {
+            emblaApi.off("select", onSelect).off("reInit", onSelect);
+        };
+    }, [emblaApi, onSelect]);
+
+    return (
+        <section
+            className={cls(
+                "relative py-20 w-full",
+                useInvertedBackground && "bg-foreground",
+                className
+            )}
+            aria-label={ariaLabel}
+        >
+            <div className={cls("w-full mx-auto flex flex-col gap-6", containerClassName)}>
+                <div className="w-content-width mx-auto">
+                    <CardStackTextBox
+                        title={title}
+                        titleSegments={titleSegments}
+                        description={description}
+                        tag={tag}
+                        tagIcon={tagIcon}
+                        tagAnimation={tagAnimation}
+                        buttons={buttons}
+                        buttonAnimation={buttonAnimation}
+                        textboxLayout={textboxLayout}
+                        useInvertedBackground={useInvertedBackground}
+                        textBoxClassName={textBoxClassName}
+                        titleClassName={titleClassName}
+                        titleImageWrapperClassName={titleImageWrapperClassName}
+                        titleImageClassName={titleImageClassName}
+                        descriptionClassName={descriptionClassName}
+                        tagClassName={tagClassName}
+                        buttonContainerClassName={buttonContainerClassName}
+                        buttonClassName={buttonClassName}
+                        buttonTextClassName={buttonTextClassName}
+                    />
+                </div>
+
+                <div className="relative w-full">
+                    <div
+                        className={cls(
+                            "overflow-hidden w-full relative z-10 mask-fade-x",
+                            carouselClassName
+                        )}
+                        ref={emblaRef}
+                    >
+                        <div className="flex w-full">
+                            {childrenArray.map((child, index) => (
+                                <div
+                                    key={index}
+                                    className="flex-none w-60 md:w-40 mr-6"
+                                >
+                                    <div className={cls(
+                                        "transition-all duration-500 ease-out",
+                                        selectedIndex === index ? "opacity-100 scale-100" : "opacity-70 scale-90"
+                                    )}>
+                                        {child}
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+
+                    <div className={cls("absolute inset-y-0 w-content-width mx-auto left-0 right-0 flex items-center justify-between pointer-events-none z-10", controlsClassName)}>
+                        <button
+                            onClick={scrollPrev}
+                            className="pointer-events-auto primary-button h-8 w-auto aspect-square rounded-theme flex items-center justify-center cursor-pointer"
+                            aria-label="Previous slide"
+                        >
+                            <ChevronLeft className="w-4/10 h-4/10 text-primary-cta-text" />
+                        </button>
+                        <button
+                            onClick={scrollNext}
+                            className="pointer-events-auto primary-button h-8 w-auto aspect-square rounded-theme flex items-center justify-center cursor-pointer"
+                            aria-label="Next slide"
+                        >
+                            <ChevronRight className="w-4/10 h-4/10 text-primary-cta-text" />
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+
+export default ArrowCarousel;
diff --git a/src/components/cardStack/layouts/carousels/AutoCarousel.tsx b/src/components/cardStack/layouts/carousels/AutoCarousel.tsx
new file mode 100644
index 0000000..bad2a42
--- /dev/null
+++ b/src/components/cardStack/layouts/carousels/AutoCarousel.tsx
@@ -0,0 +1,147 @@
+"use client";
+
+import { Children } from "react";
+import Marquee from "react-fast-marquee";
+import CardStackTextBox from "../../CardStackTextBox";
+import { cls } from "@/lib/utils";
+import { AutoCarouselProps } from "../../types";
+import { useCardAnimation } from "../../hooks/useCardAnimation";
+
+const AutoCarousel = ({
+    children,
+    uniformGridCustomHeightClasses,
+    animationType,
+    speed = 50,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    tagAnimation,
+    buttons,
+    buttonAnimation,
+    textboxLayout = "default",
+    useInvertedBackground,
+    bottomContent,
+    className = "",
+    containerClassName = "",
+    carouselClassName = "",
+    itemClassName = "",
+    textBoxClassName = "",
+    titleClassName = "",
+    titleImageWrapperClassName = "",
+    titleImageClassName = "",
+    descriptionClassName = "",
+    tagClassName = "",
+    buttonContainerClassName = "",
+    buttonClassName = "",
+    buttonTextClassName = "",
+    ariaLabel,
+    showTextBox = true,
+    dualMarquee = false,
+    topMarqueeDirection = "left",
+    bottomCarouselClassName = "",
+    marqueeGapClassName = "",
+}: AutoCarouselProps) => {
+    const childrenArray = Children.toArray(children);
+    const heightClasses = uniformGridCustomHeightClasses || "min-h-80 2xl:min-h-90";
+    const { itemRefs, bottomContentRef } = useCardAnimation({
+        animationType,
+        itemCount: childrenArray.length,
+        isGrid: false
+    });
+
+    // Bottom marquee direction is opposite of top
+    const bottomMarqueeDirection = topMarqueeDirection === "left" ? "right" : "left";
+
+    // Reverse order for bottom marquee to avoid alignment with top
+    const bottomChildren = dualMarquee ? [...childrenArray].reverse() : [];
+
+    return (
+        <section
+            className={cls(
+                "relative py-20 w-full",
+                useInvertedBackground && "bg-foreground",
+                className
+            )}
+            aria-label={ariaLabel}
+            aria-live="off"
+        >
+            <div className={cls("w-full md:w-content-width mx-auto", containerClassName)}>
+                <div className="w-full flex flex-col items-center">
+                    <div className="w-full flex flex-col gap-6">
+                        {showTextBox && (title || titleSegments || description) && (
+                            <CardStackTextBox
+                                title={title}
+                                titleSegments={titleSegments}
+                                description={description}
+                                tag={tag}
+                                tagIcon={tagIcon}
+                                tagAnimation={tagAnimation}
+                                buttons={buttons}
+                                buttonAnimation={buttonAnimation}
+                                textboxLayout={textboxLayout}
+                                useInvertedBackground={useInvertedBackground}
+                                textBoxClassName={textBoxClassName}
+                                titleClassName={titleClassName}
+                                titleImageWrapperClassName={titleImageWrapperClassName}
+                                titleImageClassName={titleImageClassName}
+                                descriptionClassName={descriptionClassName}
+                                tagClassName={tagClassName}
+                                buttonContainerClassName={buttonContainerClassName}
+                                buttonClassName={buttonClassName}
+                                buttonTextClassName={buttonTextClassName}
+                            />
+                        )}
+
+                        <div
+                            className={cls(
+                                "w-full flex flex-col",
+                                marqueeGapClassName || "gap-6"
+                            )}
+                        >
+                            {/* Top/Single Marquee */}
+                            <div className={cls("overflow-hidden w-full relative z-10 mask-padding-x", carouselClassName)}>
+                                <Marquee gradient={false} speed={speed} direction={topMarqueeDirection}>
+                                    {Children.map(childrenArray, (child, index) => (
+                                        <div
+                                            key={index}
+                                            className={cls("min-h-0 flex-none w-carousel-item-3 xl:w-carousel-item-4 mb-1 mr-6", heightClasses, itemClassName)}
+                                            ref={(el) => { itemRefs.current[index] = el; }}
+                                        >
+                                            {child}
+                                        </div>
+                                    ))}
+                                </Marquee>
+                            </div>
+
+                            {/* Bottom Marquee (only if dualMarquee is true) - Reversed order, opposite direction */}
+                            {dualMarquee && (
+                                <div className={cls("overflow-hidden w-full relative z-10 mask-padding-x", bottomCarouselClassName || carouselClassName)}>
+                                    <Marquee gradient={false} speed={speed} direction={bottomMarqueeDirection}>
+                                        {Children.map(bottomChildren, (child, index) => (
+                                            <div
+                                                key={`bottom-${index}`}
+                                                className={cls("min-h-0 flex-none w-carousel-item-3 xl:w-carousel-item-4 mb-1 mr-6", heightClasses, itemClassName)}
+                                            >
+                                                {child}
+                                            </div>
+                                        ))}
+                                    </Marquee>
+                                </div>
+                            )}
+                        </div>
+                        {bottomContent && (
+                            <div ref={bottomContentRef}>
+                                {bottomContent}
+                            </div>
+                        )}
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+
+export default AutoCarousel;
diff --git a/src/components/cardStack/layouts/carousels/ButtonCarousel.tsx b/src/components/cardStack/layouts/carousels/ButtonCarousel.tsx
new file mode 100644
index 0000000..5707506
--- /dev/null
+++ b/src/components/cardStack/layouts/carousels/ButtonCarousel.tsx
@@ -0,0 +1,181 @@
+"use client";
+
+import { Children } from "react";
+import useEmblaCarousel from "embla-carousel-react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import CardStackTextBox from "../../CardStackTextBox";
+import { cls } from "@/lib/utils";
+import { ButtonCarouselProps } from "../../types";
+import { usePrevNextButtons } from "../../hooks/usePrevNextButtons";
+import { useScrollProgress } from "../../hooks/useScrollProgress";
+import { useCardAnimation } from "../../hooks/useCardAnimation";
+
+const ButtonCarousel = ({
+    children,
+    uniformGridCustomHeightClasses,
+    animationType,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    tagAnimation,
+    buttons,
+    buttonAnimation,
+    textboxLayout = "default",
+    useInvertedBackground,
+    bottomContent,
+    className = "",
+    containerClassName = "",
+    carouselClassName = "",
+    carouselItemClassName = "",
+    controlsClassName = "",
+    textBoxClassName = "",
+    titleClassName = "",
+    titleImageWrapperClassName = "",
+    titleImageClassName = "",
+    descriptionClassName = "",
+    tagClassName = "",
+    buttonContainerClassName = "",
+    buttonClassName = "",
+    buttonTextClassName = "",
+    ariaLabel,
+}: ButtonCarouselProps) => {
+    const [emblaRef, emblaApi] = useEmblaCarousel({ dragFree: true });
+
+    const {
+        prevBtnDisabled,
+        nextBtnDisabled,
+        onPrevButtonClick,
+        onNextButtonClick,
+    } = usePrevNextButtons(emblaApi);
+
+    const scrollProgress = useScrollProgress(emblaApi);
+
+    const childrenArray = Children.toArray(children);
+    const heightClasses = uniformGridCustomHeightClasses || "min-h-80 2xl:min-h-90";
+    const { itemRefs, bottomContentRef } = useCardAnimation({
+        animationType,
+        itemCount: childrenArray.length,
+        isGrid: false
+    });
+
+    return (
+        <section
+            className={cls(
+                "relative px-[var(--width-0)] py-20 w-full",
+                useInvertedBackground && "bg-foreground",
+                className
+            )}
+            aria-label={ariaLabel}
+        >
+            <div className={cls("w-full mx-auto", containerClassName)}>
+                <div className="w-full flex flex-col items-center">
+                    <div className="w-full flex flex-col gap-6">
+                        {(title || titleSegments || description) && (
+                            <div className="w-content-width mx-auto">
+                                <CardStackTextBox
+                                    title={title}
+                                    titleSegments={titleSegments}
+                                    description={description}
+                                    tag={tag}
+                                    tagIcon={tagIcon}
+                                    tagAnimation={tagAnimation}
+                                    buttons={buttons}
+                                    buttonAnimation={buttonAnimation}
+                                    textboxLayout={textboxLayout}
+                                    useInvertedBackground={useInvertedBackground}
+                                    textBoxClassName={textBoxClassName}
+                                    titleClassName={titleClassName}
+                                    titleImageWrapperClassName={titleImageWrapperClassName}
+                                    titleImageClassName={titleImageClassName}
+                                    descriptionClassName={descriptionClassName}
+                                    tagClassName={tagClassName}
+                                    buttonContainerClassName={buttonContainerClassName}
+                                    buttonClassName={buttonClassName}
+                                    buttonTextClassName={buttonTextClassName}
+                                />
+                            </div>
+                        )}
+                        <div
+                            className={cls(
+                                "w-full flex flex-col gap-6"
+                            )}
+                        >
+                            <div
+                                className={cls(
+                                    "overflow-hidden w-full relative z-10 flex cursor-grab",
+                                    carouselClassName
+                                )}
+                                ref={emblaRef}
+                            >
+                                <div className="flex gap-6 w-full">
+                                    <div className="flex-shrink-0 w-carousel-padding" />
+                                    {Children.map(childrenArray, (child, index) => (
+                                        <div
+                                            key={index}
+                                            className={cls("min-h-0 flex-none select-none w-carousel-item-3 xl:w-carousel-item-4 mb-6", heightClasses, carouselItemClassName)}
+                                            ref={(el) => { itemRefs.current[index] = el; }}
+                                        >
+                                            {child}
+                                        </div>
+                                    ))}
+                                    <div className="flex-shrink-0 w-carousel-padding" />
+                                </div>
+                            </div>
+
+                            <div className={cls("w-full flex", controlsClassName)}>
+                                <div className="flex-shrink-0 w-carousel-padding-controls" />
+                                <div className="flex justify-between items-center w-full">
+                                    <div
+                                        className="rounded-theme card relative h-2 w-50 overflow-hidden"
+                                        role="progressbar"
+                                        aria-label="Carousel progress"
+                                        aria-valuenow={Math.round(scrollProgress)}
+                                        aria-valuemin={0}
+                                        aria-valuemax={100}
+                                    >
+                                        <div
+                                            className="bg-foreground primary-button absolute! w-full top-0 bottom-0 -left-full rounded-theme"
+                                            style={{ transform: `translate3d(${scrollProgress}%,0px,0px)` }}
+                                        />
+                                    </div>
+
+                                    <div className="flex items-center gap-3">
+                                        <button
+                                            onClick={onPrevButtonClick}
+                                            disabled={prevBtnDisabled}
+                                            className="secondary-button h-8 aspect-square flex items-center justify-center rounded-theme cursor-pointer transition-colors disabled:cursor-not-allowed disabled:opacity-50"
+                                            type="button"
+                                            aria-label="Previous slide"
+                                        >
+                                            <ChevronLeft className="h-[40%] w-auto aspect-square text-secondary-cta-text" />
+                                        </button>
+                                        <button
+                                            onClick={onNextButtonClick}
+                                            disabled={nextBtnDisabled}
+                                            className="secondary-button h-8 aspect-square flex items-center justify-center rounded-theme cursor-pointer transition-colors disabled:cursor-not-allowed disabled:opacity-50"
+                                            type="button"
+                                            aria-label="Next slide"
+                                        >
+                                            <ChevronRight className="h-[40%] w-auto aspect-square text-secondary-cta-text" />
+                                        </button>
+                                    </div>
+                                </div>
+                                <div className="flex-shrink-0 w-carousel-padding-controls" />
+                            </div>
+                        </div>
+                        {bottomContent && (
+                            <div ref={bottomContentRef} className="w-content-width mx-auto">
+                                {bottomContent}
+                            </div>
+                        )}
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+
+export default ButtonCarousel;
diff --git a/src/components/cardStack/layouts/carousels/FullWidthCarousel.tsx b/src/components/cardStack/layouts/carousels/FullWidthCarousel.tsx
new file mode 100644
index 0000000..d338921
--- /dev/null
+++ b/src/components/cardStack/layouts/carousels/FullWidthCarousel.tsx
@@ -0,0 +1,154 @@
+"use client";
+
+import { Children, cloneElement, isValidElement, useCallback, useEffect, useState } from "react";
+import useEmblaCarousel from "embla-carousel-react";
+import { EmblaCarouselType } from "embla-carousel";
+import CardStackTextBox from "../../CardStackTextBox";
+import { cls } from "@/lib/utils";
+import { FullWidthCarouselProps } from "../../types";
+
+const FullWidthCarousel = ({
+    children,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    tagAnimation,
+    buttons,
+    buttonAnimation,
+    textboxLayout = "default",
+    useInvertedBackground,
+    className = "",
+    containerClassName = "",
+    carouselClassName = "",
+    dotsClassName = "",
+    textBoxClassName = "",
+    titleClassName = "",
+    titleImageWrapperClassName = "",
+    titleImageClassName = "",
+    descriptionClassName = "",
+    tagClassName = "",
+    buttonContainerClassName = "",
+    buttonClassName = "",
+    buttonTextClassName = "",
+    ariaLabel = "Carousel section",
+}: FullWidthCarouselProps) => {
+    const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true, align: "center" });
+    const [selectedIndex, setSelectedIndex] = useState(0);
+
+    const childrenArray = Children.toArray(children);
+
+    const onSelect = useCallback((emblaApi: EmblaCarouselType) => {
+        setSelectedIndex(emblaApi.selectedScrollSnap());
+    }, []);
+
+    const scrollTo = useCallback(
+        (index: number) => {
+            if (!emblaApi) return;
+            emblaApi.scrollTo(index);
+        },
+        [emblaApi]
+    );
+
+    useEffect(() => {
+        if (!emblaApi) return;
+
+        onSelect(emblaApi);
+        emblaApi.on("select", onSelect).on("reInit", onSelect);
+
+        return () => {
+            emblaApi.off("select", onSelect).off("reInit", onSelect);
+        };
+    }, [emblaApi, onSelect]);
+
+    useEffect(() => {
+        if (!emblaApi) return;
+
+        const autoplay = setInterval(() => {
+            emblaApi.scrollNext();
+        }, 5000);
+
+        return () => clearInterval(autoplay);
+    }, [emblaApi]);
+
+    return (
+        <section
+            className={cls(
+                "relative py-20 w-full",
+                useInvertedBackground && "bg-foreground",
+                className
+            )}
+            aria-label={ariaLabel}
+        >
+            <div className={cls("w-full mx-auto flex flex-col gap-6", containerClassName)}>
+                <div className="w-content-width mx-auto">
+                    <CardStackTextBox
+                        title={title}
+                        titleSegments={titleSegments}
+                        description={description}
+                        tag={tag}
+                        tagIcon={tagIcon}
+                        tagAnimation={tagAnimation}
+                        buttons={buttons}
+                        buttonAnimation={buttonAnimation}
+                        textboxLayout={textboxLayout}
+                        useInvertedBackground={useInvertedBackground}
+                        textBoxClassName={textBoxClassName}
+                        titleClassName={titleClassName}
+                        titleImageWrapperClassName={titleImageWrapperClassName}
+                        titleImageClassName={titleImageClassName}
+                        descriptionClassName={descriptionClassName}
+                        tagClassName={tagClassName}
+                        buttonContainerClassName={buttonContainerClassName}
+                        buttonClassName={buttonClassName}
+                        buttonTextClassName={buttonTextClassName}
+                    />
+                </div>
+
+                <div className="w-full">
+                    <div
+                        className={cls(
+                            "overflow-hidden w-full relative z-10",
+                            carouselClassName
+                        )}
+                        ref={emblaRef}
+                    >
+                        <div className="flex w-full">
+                            {Children.map(childrenArray, (child, index) => (
+                                <div
+                                    key={index}
+                                    className="flex-none w-70 mr-6"
+                                >
+                                    {isValidElement(child)
+                                        ? cloneElement(child, { isActive: selectedIndex === index } as Record<string, unknown>)
+                                        : child}
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                </div>
+                <div className={cls("flex items-center justify-center gap-2", dotsClassName)}>
+                    {childrenArray.map((_, index) => (
+                        <button
+                            key={index}
+                            type="button"
+                            onClick={() => scrollTo(index)}
+                            className={cls(
+                                "relative cursor-pointer h-2 rounded-theme bg-accent transition-all duration-300",
+                                selectedIndex === index
+                                    ? "w-8 opacity-100"
+                                    : "w-2 opacity-20"
+                            )}
+                            aria-label={`Go to slide ${index + 1}`}
+                            aria-current={selectedIndex === index}
+                        />
+                    ))}
+                </div>
+            </div>
+        </section>
+    );
+};
+
+
+export default FullWidthCarousel;
diff --git a/src/components/cardStack/layouts/grid/GridLayout.tsx b/src/components/cardStack/layouts/grid/GridLayout.tsx
new file mode 100644
index 0000000..5b5dd6c
--- /dev/null
+++ b/src/components/cardStack/layouts/grid/GridLayout.tsx
@@ -0,0 +1,150 @@
+"use client";
+
+import { Children } from "react";
+import CardStackTextBox from "../../CardStackTextBox";
+import { cls } from "@/lib/utils";
+import { GridLayoutProps } from "../../types";
+import { gridConfigs } from "./gridConfigs";
+import { useCardAnimation } from "../../hooks/useCardAnimation";
+
+const GridLayout = ({
+    children,
+    itemCount,
+    gridVariant = "uniform-all-items-equal",
+    uniformGridCustomHeightClasses,
+    gridRowsClassName,
+    itemHeightClassesOverride,
+    animationType,
+    supports3DAnimation = false,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    tagAnimation,
+    buttons,
+    buttonAnimation,
+    textboxLayout = "default",
+    useInvertedBackground,
+    bottomContent,
+    className = "",
+    containerClassName = "",
+    gridClassName = "",
+    textBoxClassName = "",
+    titleClassName = "",
+    titleImageWrapperClassName = "",
+    titleImageClassName = "",
+    descriptionClassName = "",
+    tagClassName = "",
+    buttonContainerClassName = "",
+    buttonClassName = "",
+    buttonTextClassName = "",
+    ariaLabel,
+}: GridLayoutProps) => {
+    // Get config for this variant and item count
+    const config = gridConfigs[gridVariant]?.[itemCount];
+
+    // Fallback to default uniform grid if no config
+    const gridColsMap = {
+        1: "md:grid-cols-1",
+        2: "md:grid-cols-2",
+        3: "md:grid-cols-3",
+        4: "md:grid-cols-4",
+    };
+    const defaultGridCols = gridColsMap[itemCount as keyof typeof gridColsMap] || "md:grid-cols-4";
+
+    // Use config values or fallback
+    const gridCols = config?.gridCols || defaultGridCols;
+    const gridRows = gridRowsClassName || config?.gridRows || "";
+    const itemClasses = config?.itemClasses || [];
+    const itemHeightClasses = itemHeightClassesOverride || config?.itemHeightClasses || [];
+    const heightClasses = uniformGridCustomHeightClasses || config?.heightClasses || "";
+    const itemWrapperClass = config?.itemWrapperClass || "";
+
+    const childrenArray = Children.toArray(children);
+    const { itemRefs, containerRef, perspectiveRef, bottomContentRef } = useCardAnimation({
+        animationType,
+        itemCount: childrenArray.length,
+        isGrid: true,
+        supports3DAnimation,
+        gridVariant
+    });
+
+    return (
+        <section
+            ref={containerRef}
+            className={cls(
+                "relative py-20 w-full",
+                useInvertedBackground && "bg-foreground",
+                className
+            )}
+            aria-label={ariaLabel}
+        >
+            <div className={cls("w-content-width mx-auto flex flex-col gap-6", containerClassName)}>
+                {(title || titleSegments || description) && (
+                    <CardStackTextBox
+                        title={title}
+                        titleSegments={titleSegments}
+                        description={description}
+                        tag={tag}
+                        tagIcon={tagIcon}
+                        tagAnimation={tagAnimation}
+                        buttons={buttons}
+                        buttonAnimation={buttonAnimation}
+                        textboxLayout={textboxLayout}
+                        useInvertedBackground={useInvertedBackground}
+                        textBoxClassName={textBoxClassName}
+                        titleClassName={titleClassName}
+                        titleImageWrapperClassName={titleImageWrapperClassName}
+                        titleImageClassName={titleImageClassName}
+                        descriptionClassName={descriptionClassName}
+                        tagClassName={tagClassName}
+                        buttonContainerClassName={buttonContainerClassName}
+                        buttonClassName={buttonClassName}
+                        buttonTextClassName={buttonTextClassName}
+                    />
+                )}
+                <div
+                    ref={perspectiveRef}
+                    className={cls(
+                        "grid grid-cols-1 gap-6",
+                        gridCols,
+                        gridRows,
+                        gridClassName
+                    )}
+                >
+                    {childrenArray.map((child, index) => {
+                        const itemClass = itemClasses[index] || "";
+                        const itemHeightClass = itemHeightClasses[index] || "";
+                        const combinedClass = cls(itemWrapperClass, itemClass, itemHeightClass, heightClasses);
+                        return combinedClass ? (
+                            <div
+                                key={index}
+                                className={cls("min-h-0", combinedClass)}
+                                ref={(el) => { itemRefs.current[index] = el; }}
+                            >
+                                {child}
+                            </div>
+                        ) : (
+                            <div
+                                key={index}
+                                className="min-h-0"
+                                ref={(el) => { itemRefs.current[index] = el; }}
+                            >
+                                {child}
+                            </div>
+                        );
+                    })}
+                </div>
+                {bottomContent && (
+                    <div ref={bottomContentRef}>
+                        {bottomContent}
+                    </div>
+                )}
+            </div>
+        </section>
+    );
+};
+
+
+export default GridLayout;
diff --git a/src/components/cardStack/layouts/grid/gridConfigs.ts b/src/components/cardStack/layouts/grid/gridConfigs.ts
new file mode 100644
index 0000000..f295113
--- /dev/null
+++ b/src/components/cardStack/layouts/grid/gridConfigs.ts
@@ -0,0 +1,319 @@
+type GridConfig = {
+    gridCols: string;
+    gridRows?: string;
+    itemClasses: string[];
+    itemHeightClasses?: string[];
+    heightClasses?: string;
+    itemWrapperClass?: string;
+} | null;
+
+type GridVariantConfig = {
+    [key: number]: GridConfig;
+};
+
+export const gridConfigs: Record<string, GridVariantConfig> = {
+    "uniform-all-items-equal": {
+        1: null,
+        2: null,
+        3: { gridCols: "md:grid-cols-3", itemClasses: [], heightClasses: "min-h-90 2xl:min-h-100" },
+        4: { gridCols: "md:grid-cols-4", itemClasses: [], heightClasses: "min-h-90 2xl:min-h-100" },
+    },
+    "bento-grid": {
+        1: null,
+        2: null,
+        3: {
+            gridCols: "md:grid-cols-4",
+            gridRows: "md:grid-rows-[18rem_18rem] 2xl:grid-rows-[22rem_22rem]",
+            itemClasses: [
+                "md:col-span-2 md:row-span-2 md:min-h-0 md:overflow-hidden",
+                "md:col-span-2 md:row-span-1 md:min-h-0 md:overflow-hidden",
+                "md:col-span-2 md:row-span-1 md:min-h-0 md:overflow-hidden",
+            ],
+            heightClasses: "min-h-80"
+        },
+        4: {
+            gridCols: "md:grid-cols-4",
+            gridRows: "md:grid-rows-[18rem_18rem] 2xl:grid-rows-[22rem_22rem]",
+            itemClasses: [
+                "md:col-span-2 md:row-span-2 md:min-h-0 md:overflow-hidden",
+                "md:col-span-2 md:row-span-1 md:min-h-0 md:overflow-hidden",
+                "md:col-span-1 md:row-span-1 md:min-h-0 md:overflow-hidden",
+                "md:col-span-1 md:row-span-1 md:min-h-0 md:overflow-hidden",
+            ],
+            heightClasses: "min-h-80"
+        },
+    },
+    "bento-grid-inverted": {
+        1: null,
+        2: null,
+        3: {
+            gridCols: "md:grid-cols-4",
+            gridRows: "md:grid-rows-[18rem_18rem] 2xl:grid-rows-[22rem_22rem]",
+            itemClasses: [
+                "md:col-span-2 md:row-span-1 md:min-h-0 md:overflow-hidden",
+                "md:col-span-2 md:row-span-2 md:min-h-0 md:overflow-hidden",
+                "md:col-span-2 md:row-span-1 md:min-h-0 md:overflow-hidden",
+            ],
+            heightClasses: "min-h-80"
+        },
+        4: {
+            gridCols: "md:grid-cols-4",
+            gridRows: "md:grid-rows-[18rem_18rem] 2xl:grid-rows-[22rem_22rem]",
+            itemClasses: [
+                "md:col-span-1 md:row-span-1 md:min-h-0 md:overflow-hidden",
+                "md:col-span-1 md:row-span-1 md:min-h-0 md:overflow-hidden",
+                "md:col-span-2 md:row-span-1 md:min-h-0 md:overflow-hidden",
+                "md:col-span-2 md:row-span-2 md:row-start-1 md:col-start-3 md:min-h-0 md:overflow-hidden",
+            ],
+            heightClasses: "min-h-80"
+        },
+    },
+    "two-columns-alternating-heights": {
+        1: null,
+        2: null,
+        3: { gridCols: "md:grid-cols-3", itemClasses: [] },
+        4: {
+            gridCols: "md:grid-cols-2",
+            gridRows: "md:grid-rows-[13rem_13rem_0.5rem_0.5rem_13rem_13rem] 2xl:grid-rows-[16rem_16rem_0.5rem_0.5rem_16rem_16rem]",
+            itemClasses: [
+                "md:col-span-1 md:row-span-2 md:row-start-1 md:min-h-0 md:overflow-hidden",
+                "md:col-span-1 md:row-span-4 md:row-start-1 md:min-h-0 md:overflow-hidden",
+                "md:col-span-1 md:row-span-4 md:row-start-3 md:min-h-0 md:overflow-hidden",
+                "md:col-span-1 md:row-span-2 md:row-start-5 md:min-h-0 md:overflow-hidden",
+            ]
+        },
+    },
+    "asymmetric-60-wide-40-narrow": {
+        1: null,
+        2: null,
+        3: {
+            gridCols: "md:grid-cols-10",
+            gridRows: "md:grid-rows-[24rem_24rem] 2xl:grid-rows-[27rem_27rem]",
+            itemClasses: [
+                "md:col-span-6 md:row-span-1 md:min-h-0 md:overflow-hidden",
+                "md:col-span-4 md:row-span-1 md:min-h-0 md:overflow-hidden",
+                "md:col-span-10 md:row-span-1 md:min-h-0 md:overflow-hidden",
+            ]
+        },
+        4: {
+            gridCols: "md:grid-cols-10",
+            gridRows: "md:grid-rows-[24rem_24rem] 2xl:grid-rows-[27rem_27rem]",
+            itemClasses: [
+                "md:col-span-6 md:row-span-1 md:min-h-0 md:overflow-hidden",
+                "md:col-span-4 md:row-span-1 md:min-h-0 md:overflow-hidden",
+                "md:col-span-4 md:row-span-1 md:min-h-0 md:overflow-hidden",
+                "md:col-span-6 md:row-span-1 md:min-h-0 md:overflow-hidden",
+            ]
+        },
+    },
+    "three-columns-all-equal-width": {
+        1: null,
+        2: null,
+        3: {
+            gridCols: "md:grid-cols-2",
+            gridRows: "md:grid-rows-[21rem_21rem] 2xl:grid-rows-[24rem_24rem]",
+            itemClasses: [
+                "md:col-span-1 md:row-span-2 md:min-h-0 md:overflow-hidden",
+                "md:col-span-1 md:row-span-1 md:min-h-0 md:overflow-hidden",
+                "md:col-span-1 md:row-span-1 md:min-h-0 md:overflow-hidden",
+            ]
+        },
+        4: {
+            gridCols: "md:grid-cols-3",
+            gridRows: "md:grid-rows-[21rem_21rem] 2xl:grid-rows-[24rem_24rem]",
+            itemClasses: [
+                "md:col-span-1 md:row-span-2 md:min-h-0 md:overflow-hidden",
+                "md:col-span-1 md:row-span-2 md:min-h-0 md:overflow-hidden",
+                "md:col-span-1 md:row-span-1 md:min-h-0 md:overflow-hidden",
+                "md:col-span-1 md:row-span-1 md:min-h-0 md:overflow-hidden",
+            ]
+        },
+    },
+    "four-items-2x2-equal-grid": {
+        1: null,
+        2: null,
+        3: { gridCols: "md:grid-cols-3", itemClasses: [] },
+        4: {
+            gridCols: "md:grid-cols-2",
+            gridRows: "md:grid-rows-[26.5rem_26.5rem] 2xl:grid-rows-[32.5rem_32.5rem]",
+            itemClasses: [
+                "md:col-span-1 md:row-span-1 md:min-h-0 md:overflow-hidden",
+                "md:col-span-1 md:row-span-1 md:min-h-0 md:overflow-hidden",
+                "md:col-span-1 md:row-span-1 md:min-h-0 md:overflow-hidden",
+                "md:col-span-1 md:row-span-1 md:min-h-0 md:overflow-hidden",
+            ]
+        },
+    },
+    "one-large-right-three-stacked-left": {
+        1: null,
+        2: null,
+        3: {
+            gridCols: "md:grid-cols-6",
+            gridRows: "md:grid-rows-[24rem_24rem] 2xl:grid-rows-[27rem_27rem]",
+            itemClasses: [
+                "md:col-span-2 md:row-span-1 md:row-start-1 md:min-h-0 md:overflow-hidden",
+                "md:col-span-2 md:row-span-1 md:row-start-2 md:min-h-0 md:overflow-hidden",
+                "md:col-span-4 md:row-span-2 md:row-start-1 md:min-h-0 md:overflow-hidden",
+            ]
+        },
+        4: {
+            gridCols: "md:grid-cols-6",
+            gridRows: "md:grid-rows-[17.5rem_17.5rem_17.5rem] 2xl:grid-rows-[21rem_21rem_21rem]",
+            itemClasses: [
+                "md:col-span-2 md:row-span-1 md:row-start-1 md:min-h-0 md:overflow-hidden",
+                "md:col-span-2 md:row-span-1 md:row-start-2 md:min-h-0 md:overflow-hidden",
+                "md:col-span-2 md:row-span-1 md:row-start-3 md:min-h-0 md:overflow-hidden",
+                "md:col-span-4 md:row-span-3 md:row-start-1 md:min-h-0 md:overflow-hidden",
+            ]
+        },
+    },
+    "items-top-row-full-width-bottom": {
+        1: null,
+        2: null,
+        3: {
+            gridCols: "md:grid-cols-2",
+            gridRows: "md:grid-rows-[24rem_24rem] 2xl:grid-rows-[27rem_27rem]",
+            itemClasses: [
+                "md:col-span-1 md:row-span-1 md:min-h-0 md:overflow-hidden",
+                "md:col-span-1 md:row-span-1 md:min-h-0 md:overflow-hidden",
+                "md:col-span-2 md:row-span-1 md:min-h-0 md:overflow-hidden",
+            ]
+        },
+        4: {
+            gridCols: "md:grid-cols-3",
+            gridRows: "md:grid-rows-[24rem_24rem] 2xl:grid-rows-[27rem_27rem]",
+            itemClasses: [
+                "md:col-span-1 md:row-span-1 md:min-h-0 md:overflow-hidden",
+                "md:col-span-1 md:row-span-1 md:min-h-0 md:overflow-hidden",
+                "md:col-span-1 md:row-span-1 md:min-h-0 md:overflow-hidden",
+                "md:col-span-3 md:row-span-1 md:min-h-0 md:overflow-hidden",
+            ]
+        },
+    },
+    "full-width-top-items-bottom-row": {
+        1: null,
+        2: null,
+        3: {
+            gridCols: "md:grid-cols-2",
+            gridRows: "md:grid-rows-[24rem_24rem] 2xl:grid-rows-[27rem_27rem]",
+            itemClasses: [
+                "md:col-span-2 md:row-span-1 md:min-h-0 md:overflow-hidden",
+                "md:col-span-1 md:row-span-1 md:min-h-0 md:overflow-hidden",
+                "md:col-span-1 md:row-span-1 md:min-h-0 md:overflow-hidden",
+            ]
+        },
+        4: {
+            gridCols: "md:grid-cols-3",
+            gridRows: "md:grid-rows-[24rem_24rem] 2xl:grid-rows-[27rem_27rem]",
+            itemClasses: [
+                "md:col-span-3 md:row-span-1 md:min-h-0 md:overflow-hidden",
+                "md:col-span-1 md:row-span-1 md:min-h-0 md:overflow-hidden",
+                "md:col-span-1 md:row-span-1 md:min-h-0 md:overflow-hidden",
+                "md:col-span-1 md:row-span-1 md:min-h-0 md:overflow-hidden",
+            ]
+        },
+    },
+    "one-large-left-three-stacked-right": {
+        1: null,
+        2: null,
+        3: {
+            gridCols: "md:grid-cols-6",
+            gridRows: "md:grid-rows-[24rem_24rem] 2xl:grid-rows-[27rem_27rem]",
+            itemClasses: [
+                "md:col-span-4 md:row-span-2 md:row-start-1 md:min-h-0 md:overflow-hidden",
+                "md:col-span-2 md:row-span-1 md:row-start-1 md:min-h-0 md:overflow-hidden",
+                "md:col-span-2 md:row-span-1 md:row-start-2 md:min-h-0 md:overflow-hidden",
+            ]
+        },
+        4: {
+            gridCols: "md:grid-cols-6",
+            gridRows: "md:grid-rows-[17.5rem_17.5rem_17.5rem] 2xl:grid-rows-[21rem_21rem_21rem]",
+            itemClasses: [
+                "md:col-span-4 md:row-span-3 md:row-start-1 md:min-h-0 md:overflow-hidden",
+                "md:col-span-2 md:row-span-1 md:row-start-1 md:min-h-0 md:overflow-hidden",
+                "md:col-span-2 md:row-span-1 md:row-start-2 md:min-h-0 md:overflow-hidden",
+                "md:col-span-2 md:row-span-1 md:row-start-3 md:min-h-0 md:overflow-hidden",
+            ]
+        },
+    },
+    "two-items-per-row": {
+        1: null,
+        2: {
+            gridCols: "md:grid-cols-2",
+            gridRows: "md:grid-rows-[28rem] 2xl:grid-rows-[32rem]",
+            itemClasses: [
+                "md:col-span-1 md:min-h-0 md:overflow-hidden",
+                "md:col-span-1 md:min-h-0 md:overflow-hidden",
+            ]
+        },
+        3: {
+            gridCols: "md:grid-cols-2",
+            gridRows: "md:grid-rows-[28rem_28rem] 2xl:grid-rows-[32rem_32rem]",
+            itemClasses: [
+                "md:col-span-1 md:min-h-0 md:overflow-hidden",
+                "md:col-span-1 md:min-h-0 md:overflow-hidden",
+                "md:col-span-2 md:min-h-0 md:overflow-hidden",
+            ]
+        },
+        4: {
+            gridCols: "md:grid-cols-2",
+            gridRows: "md:grid-rows-[28rem_28rem] 2xl:grid-rows-[32rem_32rem]",
+            itemClasses: [
+                "md:col-span-1 md:min-h-0 md:overflow-hidden",
+                "md:col-span-1 md:min-h-0 md:overflow-hidden",
+                "md:col-span-1 md:min-h-0 md:overflow-hidden",
+                "md:col-span-1 md:min-h-0 md:overflow-hidden",
+            ]
+        },
+        5: {
+            gridCols: "md:grid-cols-2",
+            gridRows: "md:grid-rows-[28rem_28rem_28rem] 2xl:grid-rows-[32rem_32rem_32rem]",
+            itemClasses: [
+                "md:col-span-1 md:min-h-0 md:overflow-hidden",
+                "md:col-span-1 md:min-h-0 md:overflow-hidden",
+                "md:col-span-1 md:min-h-0 md:overflow-hidden",
+                "md:col-span-1 md:min-h-0 md:overflow-hidden",
+                "md:col-span-2 md:min-h-0 md:overflow-hidden",
+            ]
+        },
+        6: {
+            gridCols: "md:grid-cols-2",
+            gridRows: "md:grid-rows-[28rem_28rem_28rem] 2xl:grid-rows-[32rem_32rem_32rem]",
+            itemClasses: [
+                "md:col-span-1 md:min-h-0 md:overflow-hidden",
+                "md:col-span-1 md:min-h-0 md:overflow-hidden",
+                "md:col-span-1 md:min-h-0 md:overflow-hidden",
+                "md:col-span-1 md:min-h-0 md:overflow-hidden",
+                "md:col-span-1 md:min-h-0 md:overflow-hidden",
+                "md:col-span-1 md:min-h-0 md:overflow-hidden",
+            ]
+        },
+        7: {
+            gridCols: "md:grid-cols-2",
+            gridRows: "md:grid-rows-[28rem_28rem_28rem_28rem] 2xl:grid-rows-[32rem_32rem_32rem_32rem]",
+            itemClasses: [
+                "md:col-span-1 md:min-h-0 md:overflow-hidden",
+                "md:col-span-1 md:min-h-0 md:overflow-hidden",
+                "md:col-span-1 md:min-h-0 md:overflow-hidden",
+                "md:col-span-1 md:min-h-0 md:overflow-hidden",
+                "md:col-span-1 md:min-h-0 md:overflow-hidden",
+                "md:col-span-1 md:min-h-0 md:overflow-hidden",
+                "md:col-span-2 md:min-h-0 md:overflow-hidden",
+            ]
+        },
+        8: {
+            gridCols: "md:grid-cols-2",
+            gridRows: "md:grid-rows-[28rem_28rem_28rem_28rem] 2xl:grid-rows-[32rem_32rem_32rem_32rem]",
+            itemClasses: [
+                "md:col-span-1 md:min-h-0 md:overflow-hidden",
+                "md:col-span-1 md:min-h-0 md:overflow-hidden",
+                "md:col-span-1 md:min-h-0 md:overflow-hidden",
+                "md:col-span-1 md:min-h-0 md:overflow-hidden",
+                "md:col-span-1 md:min-h-0 md:overflow-hidden",
+                "md:col-span-1 md:min-h-0 md:overflow-hidden",
+                "md:col-span-1 md:min-h-0 md:overflow-hidden",
+                "md:col-span-1 md:min-h-0 md:overflow-hidden",
+            ]
+        },
+    },
+};
diff --git a/src/components/cardStack/layouts/timelines/TimelineCardStack.tsx b/src/components/cardStack/layouts/timelines/TimelineCardStack.tsx
new file mode 100644
index 0000000..6852792
--- /dev/null
+++ b/src/components/cardStack/layouts/timelines/TimelineCardStack.tsx
@@ -0,0 +1,146 @@
+"use client";
+
+import React, { useEffect, useRef,  Children } from "react";
+import { gsap } from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+import CardStackTextBox from "../../CardStackTextBox";
+import { cls } from "@/lib/utils";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, ButtonAnimationType, TitleSegment } from "../../types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+gsap.registerPlugin(ScrollTrigger);
+
+interface TimelineCardStackProps {
+    children: React.ReactNode;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    tagAnimation?: ButtonAnimationType;
+    buttons?: ButtonConfig[];
+    buttonAnimation?: ButtonAnimationType;
+    textboxLayout: TextboxLayout;
+    useInvertedBackground?: InvertedBackground;
+    className?: string;
+    containerClassName?: string;
+    textBoxClassName?: string;
+    titleClassName?: string;
+    titleImageWrapperClassName?: string;
+    titleImageClassName?: string;
+    descriptionClassName?: string;
+    tagClassName?: string;
+    buttonContainerClassName?: string;
+    buttonClassName?: string;
+    buttonTextClassName?: string;
+    ariaLabel?: string;
+}
+
+const TimelineCardStack = ({
+    children,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    tagAnimation,
+    buttons,
+    buttonAnimation,
+    textboxLayout,
+    useInvertedBackground,
+    className = "",
+    containerClassName = "",
+    textBoxClassName = "",
+    titleClassName = "",
+    titleImageWrapperClassName = "",
+    titleImageClassName = "",
+    descriptionClassName = "",
+    tagClassName = "",
+    buttonContainerClassName = "",
+    buttonClassName = "",
+    buttonTextClassName = "",
+    ariaLabel = "Timeline section",
+}: TimelineCardStackProps) => {
+    const itemRefs = useRef<(HTMLDivElement | null)[]>([]);
+    const childrenArray = Children.toArray(children);
+
+    useEffect(() => {
+        const ctx = gsap.context(() => {
+            itemRefs.current.forEach((ref, position) => {
+                if (!ref) return;
+
+                const isLast = position === itemRefs.current.length - 1;
+
+                const timeline = gsap.timeline({
+                    scrollTrigger: {
+                        trigger: ref,
+                        start: "center center",
+                        end: "+=100%",
+                        scrub: true,
+                    },
+                });
+
+                timeline.set(ref, { willChange: "opacity" }).to(ref, {
+                    ease: "none",
+                    opacity: isLast ? 1 : 0,
+                });
+            });
+        });
+
+        return () => {
+            ctx.revert();
+        };
+    }, [childrenArray.length]);
+
+    return (
+        <section
+            className={cls(
+                "relative overflow-visible h-fit py-20 w-full",
+                useInvertedBackground && "bg-foreground",
+                className
+            )}
+            aria-label={ariaLabel}
+        >
+            <div className={cls("w-content-width mx-auto flex flex-col gap-6", containerClassName)}>
+                <CardStackTextBox
+                    title={title}
+                    titleSegments={titleSegments}
+                    description={description}
+                    tag={tag}
+                    tagIcon={tagIcon}
+                    tagAnimation={tagAnimation}
+                    buttons={buttons}
+                    buttonAnimation={buttonAnimation}
+                    textboxLayout={textboxLayout}
+                    useInvertedBackground={useInvertedBackground}
+                    textBoxClassName={textBoxClassName}
+                    titleClassName={titleClassName}
+                    titleImageWrapperClassName={titleImageWrapperClassName}
+                    titleImageClassName={titleImageClassName}
+                    descriptionClassName={descriptionClassName}
+                    tagClassName={tagClassName}
+                    buttonContainerClassName={buttonContainerClassName}
+                    buttonClassName={buttonClassName}
+                    buttonTextClassName={buttonTextClassName}
+                />
+                <div className="w-full flex flex-col gap-[var(--width-25)] md:gap-[6.25vh]">
+                    {Children.map(childrenArray, (child, index) => (
+                        <div
+                            key={index}
+                            ref={(el) => {
+                                itemRefs.current[index] = el;
+                            }}
+                            className="!sticky w-full card backdrop-blur-xs rounded-theme-capped h-[140vw] md:h-[75vh] top-[25vw] md:top-[12.5vh]"
+                        >
+                            {child}
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </section>
+    );
+};
+
+
+export default TimelineCardStack;
diff --git a/src/components/cardStack/layouts/timelines/TimelineHorizontalCardStack.tsx b/src/components/cardStack/layouts/timelines/TimelineHorizontalCardStack.tsx
new file mode 100644
index 0000000..0e30625
--- /dev/null
+++ b/src/components/cardStack/layouts/timelines/TimelineHorizontalCardStack.tsx
@@ -0,0 +1,174 @@
+"use client";
+
+import { Children, useCallback } from "react";
+import { cls } from "@/lib/utils";
+import CardStackTextBox from "../../CardStackTextBox";
+import { useTimelineHorizontal, type MediaItem } from "../../hooks/useTimelineHorizontal";
+import MediaContent from "@/components/shared/MediaContent";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, ButtonAnimationType, TitleSegment, TextboxLayout, InvertedBackground } from "../../types";
+
+interface TimelineHorizontalCardStackProps {
+  children: React.ReactNode;
+  title: string;
+  titleSegments?: TitleSegment[];
+  description: string;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  tagAnimation?: ButtonAnimationType;
+  buttons?: ButtonConfig[];
+  buttonAnimation?: ButtonAnimationType;
+  textboxLayout: TextboxLayout;
+  useInvertedBackground?: InvertedBackground;
+  mediaItems?: MediaItem[];
+  className?: string;
+  containerClassName?: string;
+  textBoxClassName?: string;
+  titleClassName?: string;
+  titleImageWrapperClassName?: string;
+  titleImageClassName?: string;
+  descriptionClassName?: string;
+  tagClassName?: string;
+  buttonContainerClassName?: string;
+  buttonClassName?: string;
+  buttonTextClassName?: string;
+  cardClassName?: string;
+  progressBarClassName?: string;
+  mediaContainerClassName?: string;
+  mediaClassName?: string;
+  ariaLabel?: string;
+}
+
+const TimelineHorizontalCardStack = ({
+  children,
+  title,
+  titleSegments,
+  description,
+  tag,
+  tagIcon,
+  tagAnimation,
+  buttons,
+  buttonAnimation,
+  textboxLayout,
+  useInvertedBackground,
+  mediaItems,
+  className = "",
+  containerClassName = "",
+  textBoxClassName = "",
+  titleClassName = "",
+  titleImageWrapperClassName = "",
+  titleImageClassName = "",
+  descriptionClassName = "",
+  tagClassName = "",
+  buttonContainerClassName = "",
+  buttonClassName = "",
+  buttonTextClassName = "",
+  cardClassName = "",
+  progressBarClassName = "",
+  mediaContainerClassName = "",
+  mediaClassName = "",
+  ariaLabel = "Timeline section",
+}: TimelineHorizontalCardStackProps) => {
+  const childrenArray = Children.toArray(children);
+  const itemCount = childrenArray.length;
+
+  const { activeIndex, progressRefs, handleItemClick, imageOpacity, currentMediaSrc } = useTimelineHorizontal({
+    itemCount,
+    mediaItems,
+  });
+
+  const getGridColumns = useCallback(() => {
+    if (itemCount === 2) return "md:grid-cols-2";
+    if (itemCount === 3) return "md:grid-cols-3";
+    return "md:grid-cols-4";
+  }, [itemCount]);
+
+  const getItemOpacity = useCallback(
+    (index: number) => {
+      return index <= activeIndex ? "opacity-100" : "opacity-50";
+    },
+    [activeIndex]
+  );
+
+  return (
+    <section
+      className={cls(
+        "relative py-20 w-full",
+        useInvertedBackground && "bg-foreground",
+        className
+      )}
+      aria-label={ariaLabel}
+    >
+      <div className={cls("w-content-width mx-auto flex flex-col gap-6", containerClassName)}>
+        <CardStackTextBox
+          title={title}
+          titleSegments={titleSegments}
+          description={description}
+          tag={tag}
+          tagIcon={tagIcon}
+          tagAnimation={tagAnimation}
+          buttons={buttons}
+          buttonAnimation={buttonAnimation}
+          textboxLayout={textboxLayout}
+          useInvertedBackground={useInvertedBackground}
+          textBoxClassName={textBoxClassName}
+          titleClassName={titleClassName}
+          titleImageWrapperClassName={titleImageWrapperClassName}
+          titleImageClassName={titleImageClassName}
+          descriptionClassName={descriptionClassName}
+          tagClassName={tagClassName}
+          buttonContainerClassName={buttonContainerClassName}
+          buttonClassName={buttonClassName}
+          buttonTextClassName={buttonTextClassName}
+        />
+        {mediaItems && mediaItems.length > 0 && (
+          <div className={cls("relative card rounded-theme-capped overflow-hidden aspect-square md:aspect-[10/4]", mediaContainerClassName)}>
+            <div
+              className="absolute inset-6 z-1 transition-opacity duration-300 overflow-hidden"
+              style={{ opacity: imageOpacity }}
+            >
+              <MediaContent
+                imageSrc={currentMediaSrc.imageSrc}
+                videoSrc={currentMediaSrc.videoSrc}
+                imageAlt={mediaItems[activeIndex]?.imageAlt}
+                videoAriaLabel={mediaItems[activeIndex]?.videoAriaLabel}
+                imageClassName={cls("w-full h-full object-cover", mediaClassName)}
+              />
+            </div>
+          </div>
+        )}
+        <div className={cls("relative grid grid-cols-1 gap-6 md:gap-6", getGridColumns())}>
+          {Children.map(childrenArray, (child, index) => (
+            <div
+              key={index}
+              className={cls(
+                "card rounded-theme-capped p-6 flex flex-col justify-between gap-6 transition-all duration-300",
+                index === activeIndex ? "cursor-default" : "cursor-pointer hover:shadow-lg",
+                getItemOpacity(index),
+                cardClassName
+              )}
+              onClick={() => handleItemClick(index)}
+            >
+              {child}
+              <div className="relative w-full h-px overflow-hidden">
+                <div className="absolute z-0 w-full h-full bg-foreground/20" />
+                <div
+                  ref={(el) => {
+                    if (el !== null) {
+                      progressRefs.current[index] = el;
+                    }
+                  }}
+                  className={cls("absolute z-10 h-full w-full bg-foreground origin-left", progressBarClassName)}
+                  style={{ transform: "scaleX(0)" }}
+                />
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+
+export default TimelineHorizontalCardStack;
diff --git a/src/components/cardStack/layouts/timelines/TimelinePhoneView.tsx b/src/components/cardStack/layouts/timelines/TimelinePhoneView.tsx
new file mode 100644
index 0000000..4645ae7
--- /dev/null
+++ b/src/components/cardStack/layouts/timelines/TimelinePhoneView.tsx
@@ -0,0 +1,271 @@
+"use client";
+
+import MediaContent from "@/components/shared/MediaContent";
+import CardStackTextBox from "../../CardStackTextBox";
+import { usePhoneAnimations, type TimelinePhoneViewItem } from "../../hooks/usePhoneAnimations";
+import { useCardAnimation } from "../../hooks/useCardAnimation";
+import { cls } from "@/lib/utils";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, ButtonAnimationType, TitleSegment, CardAnimationType } from "../../types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+interface PhoneFrameProps {
+  imageSrc?: string;
+  videoSrc?: string;
+  imageAlt?: string;
+  videoAriaLabel?: string;
+  phoneRef: (el: HTMLDivElement | null) => void;
+  className?: string;
+}
+
+const PhoneFrame = ({
+  imageSrc,
+  videoSrc,
+  imageAlt,
+  videoAriaLabel,
+  phoneRef,
+  className = "",
+}: PhoneFrameProps) => (
+  <div
+    ref={phoneRef}
+    className={cls("card rounded-theme-capped p-1 overflow-hidden", className)}
+  >
+    <MediaContent
+      imageSrc={imageSrc}
+      videoSrc={videoSrc}
+      imageAlt={imageAlt}
+      videoAriaLabel={videoAriaLabel}
+      imageClassName="w-full h-full object-cover rounded-theme-capped"
+    />
+  </div>
+);
+
+interface TimelinePhoneViewProps {
+  items: TimelinePhoneViewItem[];
+  showTextBox?: boolean;
+  showDivider?: boolean;
+  title: string;
+  titleSegments?: TitleSegment[];
+  description: string;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  tagAnimation?: ButtonAnimationType;
+  buttons?: ButtonConfig[];
+  buttonAnimation?: ButtonAnimationType;
+  animationType: CardAnimationType;
+  textboxLayout: TextboxLayout;
+  useInvertedBackground?: InvertedBackground;
+  className?: string;
+  containerClassName?: string;
+  textBoxClassName?: string;
+  titleClassName?: string;
+  descriptionClassName?: string;
+  tagClassName?: string;
+  buttonContainerClassName?: string;
+  buttonClassName?: string;
+  buttonTextClassName?: string;
+  desktopContainerClassName?: string;
+  mobileContainerClassName?: string;
+  desktopContentClassName?: string;
+  desktopWrapperClassName?: string;
+  mobileWrapperClassName?: string;
+  phoneFrameClassName?: string;
+  mobilePhoneFrameClassName?: string;
+  titleImageWrapperClassName?: string;
+  titleImageClassName?: string;
+  ariaLabel?: string;
+}
+
+const TimelinePhoneView = ({
+  items,
+  showTextBox = true,
+  showDivider = false,
+  title,
+  titleSegments,
+  description,
+  tag,
+  tagIcon,
+  tagAnimation,
+  buttons,
+  buttonAnimation,
+  animationType,
+  textboxLayout,
+  useInvertedBackground,
+  className = "",
+  containerClassName = "",
+  textBoxClassName = "",
+  titleClassName = "",
+  descriptionClassName = "",
+  tagClassName = "",
+  buttonContainerClassName = "",
+  buttonClassName = "",
+  buttonTextClassName = "",
+  desktopContainerClassName = "",
+  mobileContainerClassName = "",
+  desktopContentClassName = "",
+  desktopWrapperClassName = "",
+  mobileWrapperClassName = "",
+  phoneFrameClassName = "",
+  mobilePhoneFrameClassName = "",
+  titleImageWrapperClassName = "",
+  titleImageClassName = "",
+  ariaLabel = "Timeline phone view section",
+}: TimelinePhoneViewProps) => {
+  const { imageRefs, mobileImageRefs } = usePhoneAnimations(items);
+  const { itemRefs: contentRefs } = useCardAnimation({
+    animationType,
+    itemCount: items.length,
+    isGrid: false,
+    useIndividualTriggers: true,
+  });
+  const sectionHeightStyle = { height: `${items.length * 100}vh` };
+
+  return (
+    <section
+      className={cls(
+        "relative py-20 overflow-hidden md:overflow-visible w-full",
+        useInvertedBackground && "bg-foreground",
+        className
+      )}
+      aria-label={ariaLabel}
+    >
+      <div className={cls("w-full mx-auto flex flex-col gap-6", containerClassName)}>
+        {showTextBox && (
+          <div className="relative w-content-width mx-auto" >
+            <CardStackTextBox
+              title={title}
+              titleSegments={titleSegments}
+              description={description}
+              tag={tag}
+              tagIcon={tagIcon}
+              tagAnimation={tagAnimation}
+              buttons={buttons}
+              buttonAnimation={buttonAnimation}
+              textboxLayout={textboxLayout}
+              useInvertedBackground={useInvertedBackground}
+              textBoxClassName={textBoxClassName}
+              titleClassName={titleClassName}
+              descriptionClassName={descriptionClassName}
+              tagClassName={tagClassName}
+              buttonContainerClassName={buttonContainerClassName}
+              buttonClassName={buttonClassName}
+              buttonTextClassName={buttonTextClassName}
+              titleImageWrapperClassName={titleImageWrapperClassName}
+              titleImageClassName={titleImageClassName}
+            />
+          </div>
+        )}
+        {showDivider && (
+          <div className="relative w-content-width mx-auto h-px bg-accent md:hidden" />
+        )}
+        <div className="hidden md:flex relative" style={sectionHeightStyle}>
+          <div
+            className={cls(
+              "absolute top-0 left-0 flex flex-col w-[calc(var(--width-content-width)-var(--width-20)*2)] 2xl:w-[calc(var(--width-content-width)-var(--width-25)*2)] mx-auto right-0 z-10",
+              desktopContainerClassName
+            )}
+            style={sectionHeightStyle}
+          >
+            {items.map((item, index) => (
+              <div
+                key={`content-${index}`}
+                className={cls(
+                  item.trigger,
+                  "w-full mx-auto h-screen flex justify-center items-center",
+                  desktopContentClassName
+                )}
+              >
+                <div
+                  ref={(el) => { contentRefs.current[index] = el; }}
+                  className={desktopWrapperClassName}
+                >
+                  {item.content}
+                </div>
+              </div>
+            ))}
+          </div>
+          <div className="sticky top-0 left-0 h-screen w-full overflow-hidden">
+            {items.map((item, itemIndex) => (
+              <div
+                key={`phones-${itemIndex}`}
+                className="h-screen w-full absolute top-0 left-0"
+              >
+                <div className="w-content-width mx-auto h-full flex flex-row justify-between items-center">
+                  <PhoneFrame
+                    key={`phone-${itemIndex}-1`}
+                    imageSrc={item.imageOne}
+                    videoSrc={item.videoOne}
+                    imageAlt={item.imageAltOne}
+                    videoAriaLabel={item.videoAriaLabelOne}
+                    phoneRef={(el) => {
+                      if (imageRefs.current) {
+                        imageRefs.current[itemIndex * 2] = el;
+                      }
+                    }}
+                    className={cls("w-20 2xl:w-25 h-[70vh]", phoneFrameClassName)}
+                  />
+                  <PhoneFrame
+                    key={`phone-${itemIndex}-2`}
+                    imageSrc={item.imageTwo}
+                    videoSrc={item.videoTwo}
+                    imageAlt={item.imageAltTwo}
+                    videoAriaLabel={item.videoAriaLabelTwo}
+                    phoneRef={(el) => {
+                      if (imageRefs.current) {
+                        imageRefs.current[itemIndex * 2 + 1] = el;
+                      }
+                    }}
+                    className={cls("w-20 2xl:w-25 h-[70vh]", phoneFrameClassName)}
+                  />
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+        <div className={cls("md:hidden flex flex-col gap-20", mobileContainerClassName)}>
+          {items.map((item, itemIndex) => (
+            <div
+              key={`mobile-item-${itemIndex}`}
+              className="flex flex-col gap-10"
+            >
+              <div className={mobileWrapperClassName}>
+                {item.content}
+              </div>
+              <div className="flex flex-row gap-6 justify-center">
+                <PhoneFrame
+                  key={`mobile-phone-${itemIndex}-1`}
+                  imageSrc={item.imageOne}
+                  videoSrc={item.videoOne}
+                  imageAlt={item.imageAltOne}
+                  videoAriaLabel={item.videoAriaLabelOne}
+                  phoneRef={(el) => {
+                    if (mobileImageRefs.current) {
+                      mobileImageRefs.current[itemIndex * 2] = el;
+                    }
+                  }}
+                  className={cls("w-40 h-80", mobilePhoneFrameClassName)}
+                />
+                <PhoneFrame
+                  key={`mobile-phone-${itemIndex}-2`}
+                  imageSrc={item.imageTwo}
+                  videoSrc={item.videoTwo}
+                  imageAlt={item.imageAltTwo}
+                  videoAriaLabel={item.videoAriaLabelTwo}
+                  phoneRef={(el) => {
+                    if (mobileImageRefs.current) {
+                      mobileImageRefs.current[itemIndex * 2 + 1] = el;
+                    }
+                  }}
+                  className={cls("w-40 h-80", mobilePhoneFrameClassName)}
+                />
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+
+export default TimelinePhoneView;
diff --git a/src/components/cardStack/layouts/timelines/TimelineProcessFlow.tsx b/src/components/cardStack/layouts/timelines/TimelineProcessFlow.tsx
new file mode 100644
index 0000000..6665f5c
--- /dev/null
+++ b/src/components/cardStack/layouts/timelines/TimelineProcessFlow.tsx
@@ -0,0 +1,205 @@
+"use client";
+
+import React, { useEffect,  useState } from "react";
+import { gsap } from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+
+gsap.registerPlugin(ScrollTrigger);
+
+import CardStackTextBox from "../../CardStackTextBox";
+import { useCardAnimation } from "../../hooks/useCardAnimation";
+import { cls } from "@/lib/utils";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, ButtonAnimationType, CardAnimationType, TitleSegment } from "../../types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+interface TimelineProcessFlowItem {
+  content: React.ReactNode;
+  media: React.ReactNode;
+  reverse: boolean;
+}
+
+interface TimelineProcessFlowProps {
+  items: TimelineProcessFlowItem[];
+  title: string;
+  titleSegments?: TitleSegment[];
+  description: string;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  tagAnimation?: ButtonAnimationType;
+  buttons?: ButtonConfig[];
+  buttonAnimation?: ButtonAnimationType;
+  textboxLayout: TextboxLayout;
+  animationType: CardAnimationType;
+  useInvertedBackground?: InvertedBackground;
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  textBoxClassName?: string;
+  textBoxTitleClassName?: string;
+  textBoxDescriptionClassName?: string;
+  textBoxTagClassName?: string;
+  textBoxButtonContainerClassName?: string;
+  textBoxButtonClassName?: string;
+  textBoxButtonTextClassName?: string;
+  itemClassName?: string;
+  mediaWrapperClassName?: string;
+  numberClassName?: string;
+  contentWrapperClassName?: string;
+  gapClassName?: string;
+  titleImageWrapperClassName?: string;
+  titleImageClassName?: string;
+}
+
+const TimelineProcessFlow = ({
+  items,
+  title,
+  titleSegments,
+  description,
+  tag,
+  tagIcon,
+  tagAnimation,
+  buttons,
+  buttonAnimation,
+  textboxLayout,
+  animationType,
+  useInvertedBackground,
+  ariaLabel = "Timeline process flow section",
+  className = "",
+  containerClassName = "",
+  textBoxClassName = "",
+  textBoxTitleClassName = "",
+  textBoxDescriptionClassName = "",
+  textBoxTagClassName = "",
+  textBoxButtonContainerClassName = "",
+  textBoxButtonClassName = "",
+  textBoxButtonTextClassName = "",
+  itemClassName = "",
+  mediaWrapperClassName = "",
+  numberClassName = "",
+  contentWrapperClassName = "",
+  gapClassName = "",
+  titleImageWrapperClassName = "",
+  titleImageClassName = "",
+}: TimelineProcessFlowProps) => {
+  const { itemRefs } = useCardAnimation({ animationType, itemCount: items.length, useIndividualTriggers: true });
+  const [isMdScreen, setIsMdScreen] = useState(false);
+
+  useEffect(() => {
+    const checkScreenSize = () => {
+      setIsMdScreen(window.innerWidth >= 768);
+    };
+
+    checkScreenSize();
+    window.addEventListener('resize', checkScreenSize);
+
+    return () => window.removeEventListener('resize', checkScreenSize);
+  }, []);
+
+  useEffect(() => {
+    gsap.fromTo(
+      ".timeline-line-fill",
+      { yPercent: -100 },
+      {
+        yPercent: 0,
+        ease: "none",
+        scrollTrigger: {
+          trigger: ".timeline-container",
+          start: "top center",
+          end: "bottom center",
+          scrub: true,
+        },
+      }
+    );
+
+    return () => {
+      ScrollTrigger.getAll().forEach((trigger) => trigger.kill());
+    };
+  }, []);
+
+  return (
+    <section
+      className={cls(
+        "relative py-20 w-full",
+        useInvertedBackground && "bg-foreground",
+        className
+      )}
+      aria-label={ariaLabel}
+    >
+      <div className={cls("w-full flex flex-col gap-6", containerClassName)}>
+        <div className="relative w-content-width mx-auto">
+          <CardStackTextBox
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            tagAnimation={tagAnimation}
+            buttons={buttons}
+            buttonAnimation={buttonAnimation}
+            textboxLayout={textboxLayout}
+            useInvertedBackground={useInvertedBackground}
+            textBoxClassName={textBoxClassName}
+            titleClassName={textBoxTitleClassName}
+            descriptionClassName={textBoxDescriptionClassName}
+            tagClassName={textBoxTagClassName}
+            buttonContainerClassName={textBoxButtonContainerClassName}
+            buttonClassName={textBoxButtonClassName}
+            buttonTextClassName={textBoxButtonTextClassName}
+            titleImageWrapperClassName={titleImageWrapperClassName}
+            titleImageClassName={titleImageClassName}
+          />
+        </div>
+        <div className="timeline-container relative w-full">
+          {/* Mobile line - outside ol for correct positioning */}
+          <div className="md:hidden pointer-events-none absolute top-0 right-[var(--width-10)] w-px h-full z-10 overflow-hidden">
+            <div className="relative timeline-line h-full bg-foreground overflow-hidden">
+              <div className="timeline-line-fill w-full h-full bg-accent" />
+            </div>
+          </div>
+          <ol className={cls("relative w-content-width mx-auto flex flex-col gap-10 md:gap-20 md:p-6", isMdScreen && "card", "md:rounded-theme-capped", gapClassName)}>
+            {/* Desktop line - inside ol for correct stacking context */}
+            <div className="hidden md:block pointer-events-none absolute top-0 left-1/2 -translate-x-1/2 w-px h-full z-0 overflow-hidden py-6">
+              <div className="relative timeline-line h-full bg-foreground overflow-hidden">
+                <div className="timeline-line-fill w-full h-full bg-accent" />
+              </div>
+            </div>
+            {items.map((item, index) => (
+              <li
+                key={index}
+                ref={(el) => {
+                  itemRefs.current[index] = el;
+                }}
+                className={cls(
+                  "relative z-10 w-full flex flex-col gap-6 md:gap-0 md:flex-row justify-between",
+                  item.reverse && "flex-col md:flex-row-reverse",
+                  itemClassName
+                )}
+              >
+                <div
+                  className={cls("relative w-70 md:w-[calc(50%-var(--width-5))]", mediaWrapperClassName)}
+                >
+                  {item.media}
+                </div>
+                <div
+                  className={cls(
+                    "absolute! top-1/2 right-[calc(var(--height-8)/-2)] md:right-auto md:left-1/2 md:-translate-x-1/2 -translate-y-1/2 h-8 aspect-square rounded-theme flex items-center justify-center z-50 primary-button",
+                    numberClassName
+                  )}
+                >
+                  <p className="text-sm text-primary-cta-text">{index + 1}</p>
+                </div>
+                <div className={cls("relative w-70 md:w-[calc(50%-var(--width-5))]", contentWrapperClassName)}>
+                  {item.content}
+                </div>
+              </li>
+            ))}
+          </ol>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+
+export default TimelineProcessFlow;
diff --git a/src/components/cardStack/types.ts b/src/components/cardStack/types.ts
new file mode 100644
index 0000000..a6c66a5
--- /dev/null
+++ b/src/components/cardStack/types.ts
@@ -0,0 +1,148 @@
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, ButtonAnimationType } from "@/types/button";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+export type { ButtonConfig, ButtonAnimationType, TextboxLayout, InvertedBackground };
+
+export type TitleSegment =
+    | { type: "text"; content: string }
+    | { type: "image"; src: string; alt?: string };
+
+export interface TimelineCardStackItem {
+    id: number;
+    title: string;
+    description: string;
+    image: string;
+    imageAlt?: string;
+}
+
+export type GridVariant =
+    | "uniform-all-items-equal"
+    | "bento-grid"
+    | "bento-grid-inverted"
+    | "two-columns-alternating-heights"
+    | "asymmetric-60-wide-40-narrow"
+    | "three-columns-all-equal-width"
+    | "four-items-2x2-equal-grid"
+    | "one-large-right-three-stacked-left"
+    | "items-top-row-full-width-bottom"
+    | "full-width-top-items-bottom-row"
+    | "one-large-left-three-stacked-right"
+    | "two-items-per-row";
+
+export type CardAnimationType =
+    | "none"
+    | "opacity"
+    | "slide-up"
+    | "scale-rotate"
+    | "blur-reveal";
+
+export type CardAnimationTypeWith3D = CardAnimationType | "depth-3d";
+
+export interface TextBoxProps {
+    title?: string;
+    titleSegments?: TitleSegment[];
+    description?: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    tagAnimation?: ButtonAnimationType;
+    buttons?: ButtonConfig[];
+    buttonAnimation?: ButtonAnimationType;
+    textboxLayout: TextboxLayout;
+    useInvertedBackground?: InvertedBackground;
+    textBoxClassName?: string;
+    titleClassName?: string;
+    titleImageWrapperClassName?: string;
+    titleImageClassName?: string;
+    descriptionClassName?: string;
+    tagClassName?: string;
+    buttonContainerClassName?: string;
+    buttonClassName?: string;
+    buttonTextClassName?: string;
+}
+
+export interface CardStackProps extends TextBoxProps {
+    children: React.ReactNode;
+    mode?: "auto" | "buttons";
+    gridVariant?: GridVariant;
+    uniformGridCustomHeightClasses?: string;
+    gridRowsClassName?: string;
+    itemHeightClassesOverride?: string[];
+    animationType: CardAnimationType | CardAnimationTypeWith3D;
+    supports3DAnimation?: boolean;
+    carouselThreshold?: number;
+    bottomContent?: React.ReactNode;
+    className?: string;
+    containerClassName?: string;
+    gridClassName?: string;
+    carouselClassName?: string;
+    carouselItemClassName?: string;
+    controlsClassName?: string;
+    ariaLabel?: string;
+}
+
+export interface GridLayoutProps extends TextBoxProps {
+    children: React.ReactNode;
+    itemCount: number;
+    gridVariant?: GridVariant;
+    uniformGridCustomHeightClasses?: string;
+    gridRowsClassName?: string;
+    itemHeightClassesOverride?: string[];
+    animationType: CardAnimationType | CardAnimationTypeWith3D;
+    supports3DAnimation?: boolean;
+    bottomContent?: React.ReactNode;
+    className?: string;
+    containerClassName?: string;
+    gridClassName?: string;
+    ariaLabel: string;
+}
+
+export interface AutoCarouselProps extends TextBoxProps {
+    children: React.ReactNode;
+    uniformGridCustomHeightClasses?: string;
+    animationType: CardAnimationType;
+    speed?: number;
+    bottomContent?: React.ReactNode;
+    className?: string;
+    containerClassName?: string;
+    carouselClassName?: string;
+    itemClassName?: string;
+    ariaLabel: string;
+    showTextBox?: boolean;
+    dualMarquee?: boolean;
+    topMarqueeDirection?: "left" | "right";
+    bottomMarqueeDirection?: "left" | "right";
+    bottomCarouselClassName?: string;
+    marqueeGapClassName?: string;
+}
+
+export interface ButtonCarouselProps extends TextBoxProps {
+    children: React.ReactNode;
+    uniformGridCustomHeightClasses?: string;
+    animationType: CardAnimationType;
+    bottomContent?: React.ReactNode;
+    className?: string;
+    containerClassName?: string;
+    carouselClassName?: string;
+    carouselItemClassName?: string;
+    controlsClassName?: string;
+    ariaLabel: string;
+}
+
+export interface FullWidthCarouselProps extends TextBoxProps {
+    children: React.ReactNode;
+    className?: string;
+    containerClassName?: string;
+    carouselClassName?: string;
+    dotsClassName?: string;
+    ariaLabel: string;
+}
+
+export interface ArrowCarouselProps extends TextBoxProps {
+    children: React.ReactNode;
+    className?: string;
+    containerClassName?: string;
+    carouselClassName?: string;
+    controlsClassName?: string;
+    ariaLabel: string;
+}
diff --git a/src/components/ecommerce/cart/ProductCart.tsx b/src/components/ecommerce/cart/ProductCart.tsx
new file mode 100644
index 0000000..0a3215d
--- /dev/null
+++ b/src/components/ecommerce/cart/ProductCart.tsx
@@ -0,0 +1,190 @@
+"use client";
+
+import { useEffect } from "react";
+import { X } from "lucide-react";
+import Button from "@/components/button/Button";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import { getButtonProps } from "@/lib/buttonUtils";
+import { cls } from "@/lib/utils";
+import type { ButtonConfig } from "@/types/button";
+import AnimationContainer from "@/components/sections/AnimationContainer";
+import ProductCartItem from "./ProductCartItem";
+import type { CartItem } from "./ProductCartItem";
+
+interface ProductCartProps {
+    isOpen: boolean;
+    onClose: () => void;
+    items: CartItem[];
+    onQuantityChange?: (id: string, quantity: number) => void;
+    onRemove?: (id: string) => void;
+    total: string;
+    buttons: ButtonConfig[];
+    title?: string;
+    totalLabel?: string;
+    emptyMessage?: string;
+    className?: string;
+    panelClassName?: string;
+    itemClassName?: string;
+    buttonClassName?: string;
+}
+
+const ProductCart = ({
+    isOpen,
+    onClose,
+    items,
+    onQuantityChange,
+    onRemove,
+    total,
+    buttons,
+    title = "Cart",
+    totalLabel = "Total",
+    emptyMessage = "Your cart is empty",
+    className = "",
+    panelClassName = "",
+    itemClassName = "",
+    buttonClassName = "",
+}: ProductCartProps) => {
+    const theme = useTheme();
+
+    const getButtonConfigProps = () => {
+        if (theme.defaultButtonVariant === "hover-bubble") {
+            return { bgClassName: "w-full" };
+        }
+        if (theme.defaultButtonVariant === "icon-arrow") {
+            return { className: "justify-between" };
+        }
+        return {};
+    };
+
+    useEffect(() => {
+        const handleKeyDown = (e: KeyboardEvent) => {
+            if (e.key === "Escape" && isOpen) {
+                onClose();
+            }
+        };
+
+        document.addEventListener("keydown", handleKeyDown);
+        return () => document.removeEventListener("keydown", handleKeyDown);
+    }, [isOpen, onClose]);
+
+    useEffect(() => {
+        if (isOpen) {
+            document.body.style.overflow = "hidden";
+        } else {
+            document.body.style.overflow = "";
+        }
+        return () => {
+            document.body.style.overflow = "";
+        };
+    }, [isOpen]);
+
+    return (
+        <div
+            className={cls(
+                "fixed inset-0 z-[1001] pointer-events-none",
+                className
+            )}
+        >
+            <div
+                className={cls(
+                    "absolute inset-0 bg-foreground/50 transition-opacity duration-500 ease-[cubic-bezier(0.625,0.05,0,1)]",
+                    isOpen
+                        ? "opacity-100 pointer-events-auto"
+                        : "opacity-0 pointer-events-none"
+                )}
+                onClick={onClose}
+                aria-hidden="true"
+            />
+
+            <div
+                className={cls(
+                    "absolute right-0 top-0 h-screen overflow-hidden transition-[width] duration-500 ease-[cubic-bezier(0.625,0.05,0,1)]",
+                    isOpen
+                        ? "w-full md:w-30 pointer-events-auto"
+                        : "w-0 pointer-events-none"
+                )}
+            >
+                <aside
+                    className={cls(
+                        "w-full md:w-30 h-full card flex flex-col p-6",
+                        panelClassName
+                    )}
+                    role="dialog"
+                    aria-label={title}
+                >
+                    <div className="flex items-center justify-between">
+                        <h2 className="text-xl font-medium text-foreground whitespace-nowrap">
+                            {title} ({items.length})
+                        </h2>
+                        <button
+                            onClick={onClose}
+                            className="secondary-button h-8 aspect-square rounded-theme flex items-center justify-center cursor-pointer flex-shrink-0"
+                            aria-label="Close cart"
+                            type="button"
+                        >
+                            <X className="relative h-4/10 text-secondary-cta-text" strokeWidth={1.5} />
+                        </button>
+                    </div>
+
+                    <div className="w-full h-px bg-background-accent mt-6" />
+
+                    <div className="flex-1 min-h-0 h-full overflow-y-auto mask-fade-y" data-lenis-prevent>
+                        <AnimationContainer
+                            key={items.map((i) => i.id).join("-")}
+                            className="w-full h-full"
+                            animationType="fade"
+                        >
+                            {items.length === 0 ? (
+                                <div className="h-full flex items-center justify-center" >
+                                    <p className="text-sm text-foreground/50 text-center py-10 whitespace-nowrap">
+                                        {emptyMessage}
+                                    </p>
+                                </div>
+                            ) : (
+                                <div className="flex flex-col gap-6 py-6">
+                                    {items.map((item) => (
+                                        <ProductCartItem
+                                            key={item.id}
+                                            item={item}
+                                            onQuantityChange={onQuantityChange}
+                                            onRemove={onRemove}
+                                            className={itemClassName}
+                                        />
+                                    ))}
+                                </div>
+                            )}
+                        </AnimationContainer>
+                    </div>
+
+                    <div className="flex flex-col gap-6">
+                        <div className="w-full h-px bg-background-accent" />
+                        <div className="flex items-center justify-between">
+                            <span className="text-base font-medium text-foreground whitespace-nowrap">
+                                {totalLabel}
+                            </span>
+                            <span className="text-base font-medium text-foreground whitespace-nowrap">
+                                {total}
+                            </span>
+                        </div>
+                        <div className="flex flex-col gap-3">
+                            {buttons.slice(0, 2).map((button, index) => (
+                                <Button
+                                    key={`${button.text}-${index}`}
+                                    {...getButtonProps(
+                                        { ...button, props: { ...button.props, ...getButtonConfigProps() } },
+                                        index,
+                                        theme.defaultButtonVariant,
+                                        cls("w-full", buttonClassName)
+                                    )}
+                                />
+                            ))}
+                        </div>
+                    </div>
+                </aside>
+            </div>
+        </div>
+    );
+};
+
+
+export default ProductCart;
diff --git a/src/components/ecommerce/cart/ProductCartItem.tsx b/src/components/ecommerce/cart/ProductCartItem.tsx
new file mode 100644
index 0000000..978dfd5
--- /dev/null
+++ b/src/components/ecommerce/cart/ProductCartItem.tsx
@@ -0,0 +1,105 @@
+"use client";
+
+import { useCallback } from "react";
+import { Plus, Minus, Trash2 } from "lucide-react";
+import MediaContent from "@/components/shared/MediaContent";
+import QuantityButton from "@/components/shared/QuantityButton";
+import { cls } from "@/lib/utils";
+
+export interface CartItem {
+    id: string;
+    name: string;
+    variants?: string[];
+    price: string;
+    quantity: number;
+    imageSrc: string;
+    imageAlt?: string;
+}
+
+interface ProductCartItemProps {
+    item: CartItem;
+    onQuantityChange?: (id: string, quantity: number) => void;
+    onRemove?: (id: string) => void;
+    className?: string;
+}
+
+const ProductCartItem = ({
+    item,
+    onQuantityChange,
+    onRemove,
+    className = "",
+}: ProductCartItemProps) => {
+    const handleIncrement = useCallback(() => {
+        onQuantityChange?.(item.id, item.quantity + 1);
+    }, [item.id, item.quantity, onQuantityChange]);
+
+    const handleDecrement = useCallback(() => {
+        if (item.quantity <= 1) return;
+        onQuantityChange?.(item.id, item.quantity - 1);
+    }, [item.id, item.quantity, onQuantityChange]);
+
+    const handleRemove = useCallback(() => {
+        onRemove?.(item.id);
+    }, [item.id, onRemove]);
+
+    return (
+        <div className={cls("flex gap-6", className)}>
+            <div className="relative w-1/2 h-auto aspect-square flex-shrink-0 rounded-theme-capped overflow-hidden">
+                <MediaContent
+                    imageSrc={item.imageSrc}
+                    imageAlt={item.imageAlt || item.name}
+                    imageClassName="w-full h-full object-cover rounded-none!"
+                />
+            </div>
+
+            <div className="flex-1 min-w-0 flex flex-col justify-between gap-2">
+                <div className="flex justify-between items-start gap-2">
+                    <div className="min-w-0">
+                        <h3 className="text-base font-medium text-foreground truncate">
+                            {item.name}
+                        </h3>
+                        {item.variants && item.variants.length > 0 && (
+                            <div className="flex flex-wrap gap-3">
+                                {item.variants.map((variant) => (
+                                    <p key={variant} className="text-sm text-foreground/50">
+                                        {variant}
+                                    </p>
+                                ))}
+                            </div>
+                        )}
+                    </div>
+                    <p className="text-base font-medium text-foreground flex-shrink-0">
+                        {item.price}
+                    </p>
+                </div>
+
+                <div className="flex items-center gap-2">
+                    <QuantityButton
+                        onClick={handleDecrement}
+                        ariaLabel="Decrease quantity"
+                        Icon={Minus}
+                    />
+                    <span className="text-sm font-medium text-foreground min-w-5 text-center">
+                        {item.quantity}
+                    </span>
+                    <QuantityButton
+                        onClick={handleIncrement}
+                        ariaLabel="Increase quantity"
+                        Icon={Plus}
+                    />
+                    <button
+                        onClick={handleRemove}
+                        className="secondary-button h-8 aspect-square rounded-theme flex items-center justify-center cursor-pointer ml-auto"
+                        aria-label={`Remove ${item.name} from cart`}
+                        type="button"
+                    >
+                        <Trash2 className="relative h-4/10 text-secondary-cta-text" strokeWidth={1.5} />
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+
+export default ProductCartItem;
diff --git a/src/components/ecommerce/productCatalog/ProductCatalog.tsx b/src/components/ecommerce/productCatalog/ProductCatalog.tsx
new file mode 100644
index 0000000..9734d59
--- /dev/null
+++ b/src/components/ecommerce/productCatalog/ProductCatalog.tsx
@@ -0,0 +1,155 @@
+"use client";
+
+import { useMemo, useCallback } from "react";
+import { useRouter } from "next/navigation";
+import Input from "@/components/form/Input";
+import ProductDetailVariantSelect from "@/components/ecommerce/productDetail/ProductDetailVariantSelect";
+import type { ProductVariant } from "@/components/ecommerce/productDetail/ProductDetailCard";
+import { cls } from "@/lib/utils";
+import { useProducts } from "@/hooks/useProducts";
+import ProductCatalogItem from "./ProductCatalogItem";
+import type { CatalogProduct } from "./ProductCatalogItem";
+
+interface ProductCatalogProps {
+    layout: "page" | "section";
+    products?: CatalogProduct[];
+    searchValue?: string;
+    onSearchChange?: (value: string) => void;
+    searchPlaceholder?: string;
+    filters?: ProductVariant[];
+    emptyMessage?: string;
+    className?: string;
+    gridClassName?: string;
+    cardClassName?: string;
+    imageClassName?: string;
+    searchClassName?: string;
+    filterClassName?: string;
+    toolbarClassName?: string;
+}
+
+const ProductCatalog = ({
+    layout,
+    products: productsProp,
+    searchValue = "",
+    onSearchChange,
+    searchPlaceholder = "Search products...",
+    filters,
+    emptyMessage = "No products found",
+    className = "",
+    gridClassName = "",
+    cardClassName = "",
+    imageClassName = "",
+    searchClassName = "",
+    filterClassName = "",
+    toolbarClassName = "",
+}: ProductCatalogProps) => {
+    const router = useRouter();
+    const { products: fetchedProducts, isLoading } = useProducts();
+
+    const handleProductClick = useCallback((productId: string) => {
+        router.push(`/shop/${productId}`);
+    }, [router]);
+
+    const products: CatalogProduct[] = useMemo(() => {
+        if (productsProp && productsProp.length > 0) {
+            return productsProp;
+        }
+
+        if (fetchedProducts.length === 0) {
+            return [];
+        }
+
+        return fetchedProducts.map((product) => ({
+            id: product.id,
+            name: product.name,
+            price: product.price,
+            imageSrc: product.imageSrc,
+            imageAlt: product.imageAlt || product.name,
+            rating: product.rating || 0,
+            reviewCount: product.reviewCount,
+            category: product.brand,
+            onProductClick: () => handleProductClick(product.id),
+        }));
+    }, [productsProp, fetchedProducts, handleProductClick]);
+
+    if (isLoading && (!productsProp || productsProp.length === 0)) {
+        return (
+            <section
+                className={cls(
+                    "relative w-content-width mx-auto",
+                    layout === "page" ? "pt-hero-page-padding pb-20" : "py-20",
+                    className
+                )}
+            >
+                <p className="text-sm text-foreground/50 text-center py-20">
+                    Loading products...
+                </p>
+            </section>
+        );
+    }
+
+    return (
+        <section
+            className={cls(
+                "relative w-content-width mx-auto",
+                layout === "page" ? "pt-hero-page-padding pb-20" : "py-20",
+                className
+            )}
+        >
+            {(onSearchChange || (filters && filters.length > 0)) && (
+                <div
+                    className={cls(
+                        "flex flex-col md:flex-row gap-4 md:items-end mb-6",
+                        toolbarClassName
+                    )}
+                >
+                    {onSearchChange && (
+                        <Input
+                            value={searchValue}
+                            onChange={onSearchChange}
+                            placeholder={searchPlaceholder}
+                            ariaLabel={searchPlaceholder}
+                            className={cls("flex-1 w-full h-9 text-sm", searchClassName)}
+                        />
+                    )}
+                    {filters && filters.length > 0 && (
+                        <div className="flex gap-4 items-end">
+                            {filters.map((filter) => (
+                                <ProductDetailVariantSelect
+                                    key={filter.label}
+                                    variant={filter}
+                                    selectClassName={filterClassName}
+                                />
+                            ))}
+                        </div>
+                    )}
+                </div>
+            )}
+
+            {products.length === 0 ? (
+                <p className="text-sm text-foreground/50 text-center py-20">
+                    {emptyMessage}
+                </p>
+            ) : (
+                <div
+                    className={cls(
+                        "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6",
+                        gridClassName
+                    )}
+                >
+                    {products.map((product) => (
+                        <ProductCatalogItem
+                            key={product.id}
+                            product={product}
+                            className={cardClassName}
+                            imageClassName={imageClassName}
+                        />
+                    ))}
+                </div>
+            )}
+        </section>
+    );
+};
+
+
+export default ProductCatalog;
\ No newline at end of file
diff --git a/src/components/ecommerce/productCatalog/ProductCatalogItem.tsx b/src/components/ecommerce/productCatalog/ProductCatalogItem.tsx
new file mode 100644
index 0000000..904a030
--- /dev/null
+++ b/src/components/ecommerce/productCatalog/ProductCatalogItem.tsx
@@ -0,0 +1,114 @@
+"use client";
+
+
+import { Star } from "lucide-react";
+import ProductImage from "@/components/shared/ProductImage";
+import { cls } from "@/lib/utils";
+
+export interface CatalogProduct {
+    id: string;
+    category?: string;
+    name: string;
+    price: string;
+    rating: number;
+    reviewCount?: string;
+    imageSrc: string;
+    imageAlt?: string;
+    onProductClick?: () => void;
+    onFavorite?: () => void;
+    isFavorited?: boolean;
+}
+
+interface ProductCatalogItemProps {
+    product: CatalogProduct;
+    className?: string;
+    imageClassName?: string;
+    categoryClassName?: string;
+    nameClassName?: string;
+    priceClassName?: string;
+    ratingClassName?: string;
+}
+
+const ProductCatalogItem = ({
+    product,
+    className = "",
+    imageClassName = "",
+    categoryClassName = "",
+    nameClassName = "",
+    priceClassName = "",
+    ratingClassName = "",
+}: ProductCatalogItemProps) => {
+    return (
+        <article
+            className={cls(
+                "card group relative h-full flex flex-col gap-4 cursor-pointer p-4 rounded-theme-capped",
+                className
+            )}
+            onClick={product.onProductClick}
+            role="article"
+            aria-label={`${product.category ? `${product.category} ` : ""}${product.name} - ${product.price}`}
+        >
+            <ProductImage
+                imageSrc={product.imageSrc}
+                imageAlt={product.imageAlt || `${product.category} ${product.name}`}
+                isFavorited={product.isFavorited}
+                onFavoriteToggle={product.onFavorite}
+                showActionButton={true}
+                className="h-70 2xl:h-80"
+                actionButtonAriaLabel={`View ${product.name} details`}
+                onActionClick={product.onProductClick}
+                imageClassName={imageClassName}
+            />
+
+            <div className="relative z-1 flex-1 min-w-0 flex flex-col gap-2">
+                {product.category && (
+                    <p className={cls("text-sm leading-tight text-foreground", categoryClassName)}>
+                        {product.category}
+                    </p>
+                )}
+                <div className="flex flex-col gap-1">
+                    <h3
+                        className={cls(
+                            "text-xl font-medium truncate leading-tight text-foreground",
+                            nameClassName
+                        )}
+                    >
+                        {product.name}
+                    </h3>
+                    <div className={cls("flex items-center gap-2", ratingClassName)}>
+                        <div className="flex items-center gap-1">
+                            {[...Array(5)].map((_, i) => (
+                                <Star
+                                    key={i}
+                                    className={cls(
+                                        "h-(--text-xl) w-auto",
+                                        i < Math.floor(product.rating)
+                                            ? "text-accent fill-accent"
+                                            : "text-accent opacity-20"
+                                    )}
+                                    strokeWidth={1.5}
+                                />
+                            ))}
+                        </div>
+                        {product.reviewCount && (
+                            <span className="text-sm leading-tight text-foreground">
+                                ({product.reviewCount})
+                            </span>
+                        )}
+                    </div>
+                </div>
+                <p
+                    className={cls(
+                        "text-2xl font-medium leading-tight text-foreground",
+                        priceClassName
+                    )}
+                >
+                    {product.price}
+                </p>
+            </div>
+        </article>
+    );
+};
+
+
+export default ProductCatalogItem;
diff --git a/src/components/ecommerce/productDetail/ProductDetailCard.tsx b/src/components/ecommerce/productDetail/ProductDetailCard.tsx
new file mode 100644
index 0000000..cc4069c
--- /dev/null
+++ b/src/components/ecommerce/productDetail/ProductDetailCard.tsx
@@ -0,0 +1,254 @@
+"use client";
+
+
+import { Star } from "lucide-react";
+import type { LucideIcon } from "lucide-react";
+import Button from "@/components/button/Button";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import { getButtonProps } from "@/lib/buttonUtils";
+import { cls } from "@/lib/utils";
+import type { ButtonConfig } from "@/types/button";
+import ProductDetailGallery from "./ProductDetailGallery";
+import ProductDetailVariantSelect from "./ProductDetailVariantSelect";
+
+export interface ProductVariant {
+    label: string;
+    options: string[];
+    selected: string;
+    onChange: (value: string) => void;
+}
+
+interface ProductDetailCardProps {
+    layout: "page" | "section";
+    name: string;
+    price: string;
+    salePrice?: string;
+    showRating?: boolean;
+    rating?: number;
+    ratingIcon?: LucideIcon;
+    description?: string;
+    images: { src: string; alt: string }[];
+    variants?: ProductVariant[];
+    quantity?: ProductVariant;
+    buttons: ButtonConfig[];
+    ribbon?: string;
+    inventoryStatus?: string;
+    inventoryQuantity?: number;
+    sku?: string;
+    className?: string;
+    imageContainerClassName?: string;
+    infoContainerClassName?: string;
+    nameClassName?: string;
+    priceClassName?: string;
+    descriptionClassName?: string;
+    variantSelectClassName?: string;
+    variantLabelClassName?: string;
+    buttonClassName?: string;
+}
+
+const ProductDetailCard = ({
+                               layout,
+                               name,
+                               price,
+                               salePrice,
+                               showRating = true,
+                               rating = 0,
+                               ratingIcon: RatingIcon = Star,
+                               description,
+                               images,
+                               variants,
+                               quantity,
+                               buttons,
+                               ribbon,
+                               inventoryStatus,
+                               inventoryQuantity,
+                               sku,
+                               className = "",
+                               imageContainerClassName = "",
+                               infoContainerClassName = "",
+                               nameClassName = "",
+                               priceClassName = "",
+                               descriptionClassName = "",
+                               variantSelectClassName = "",
+                               variantLabelClassName = "",
+                               buttonClassName = "",
+                           }: ProductDetailCardProps) => {
+    const theme = useTheme();
+
+    const getButtonConfigProps = () => {
+        if (theme.defaultButtonVariant === "hover-bubble") {
+            return { bgClassName: "w-full" };
+        }
+        if (theme.defaultButtonVariant === "icon-arrow") {
+            return { className: "justify-between" };
+        }
+        return {};
+    };
+
+    return (
+        <article
+            className={cls(
+                "relative w-content-width mx-auto",
+                layout === "page" ? "pt-hero-page-padding pb-20" : "py-20",
+                className
+            )}
+        >
+            <div className="flex flex-col md:flex-row gap-6">
+                <ProductDetailGallery
+                    images={images}
+                    className={cls("md:w-1/2", imageContainerClassName)}
+                />
+
+                <div
+                    className={cls(
+                        "w-full md:w-1/2 p-6 card rounded-theme-capped flex flex-col gap-6",
+                        infoContainerClassName
+                    )}
+                >
+                    <div className="flex items-start justify-between gap-4">
+                        <h2
+                            className={cls(
+                                "text-2xl md:text-3xl font-medium text-foreground leading-tight flex-1",
+                                nameClassName
+                            )}
+                        >
+                            {name}
+                        </h2>
+                        {ribbon && (
+                            <span className="px-3 py-1 text-sm font-medium rounded-theme bg-accent text-background whitespace-nowrap">
+                                {ribbon}
+                            </span>
+                        )}
+                    </div>
+                    <div className="w-full h-px bg-background-accent" />
+                    <div className="w-full flex items-center justify-between gap-6">
+                        <div className="flex flex-col gap-1">
+                            {salePrice ? (
+                                <>
+                                    <p
+                                        className={cls(
+                                            "text-xl md:text-2xl font-medium text-foreground/50 line-through leading-tight",
+                                            priceClassName
+                                        )}
+                                    >
+                                        {price}
+                                    </p>
+                                    <p
+                                        className={cls(
+                                            "text-xl md:text-2xl font-medium text-accent leading-tight",
+                                            priceClassName
+                                        )}
+                                    >
+                                        {salePrice}
+                                    </p>
+                                </>
+                            ) : (
+                                <p
+                                    className={cls(
+                                        "text-xl md:text-2xl font-medium text-foreground leading-tight",
+                                        priceClassName
+                                    )}
+                                >
+                                    {price}
+                                </p>
+                            )}
+                        </div>
+                        {showRating && (
+                            <div className="flex items-center gap-1">
+                                {[...Array(5)].map((_, i) => (
+                                    <RatingIcon
+                                        key={i}
+                                        className={cls(
+                                            "h-(--text-xl) md:h-(--text-2xl) w-auto",
+                                            i < Math.floor(rating)
+                                                ? "text-accent fill-accent"
+                                                : "text-accent opacity-20"
+                                        )}
+                                        strokeWidth={1.5}
+                                    />
+                                ))}
+                            </div>
+                        )}
+                    </div>
+                    {(inventoryStatus || inventoryQuantity !== undefined || sku) && (
+                        <div className="flex flex-wrap gap-4 text-sm text-foreground/60">
+                            {inventoryStatus && (
+                                <span className={cls(
+                                    "px-2 py-1 rounded-theme",
+                                    inventoryStatus === "in-stock" ? "bg-green-500/20 text-green-600" : "bg-red-500/20 text-red-600"
+                                )}>
+                                    {inventoryStatus === "in-stock" ? "In Stock" : inventoryStatus}
+                                </span>
+                            )}
+                            {inventoryQuantity !== undefined && (
+                                <span>
+                                    {inventoryQuantity} available
+                                </span>
+                            )}
+                            {sku && (
+                                <span>
+                                    SKU: {sku}
+                                </span>
+                            )}
+                        </div>
+                    )}
+                    {description && (
+                        <p
+                            className={cls(
+                                "text-sm md:text-base text-foreground/75 leading-tight",
+                                descriptionClassName
+                            )}
+                        >
+                            {description}
+                        </p>
+                    )}
+                    {variants && variants.length > 0 && (
+                        <div className="flex flex-wrap gap-6">
+                            {variants.map((variant, index) => (
+                                <div
+                                    key={variant.label}
+                                    className={cls(
+                                        "min-w-0",
+                                        variants.length === 1 || (variants.length % 2 !== 0 && index === variants.length - 1)
+                                            ? "w-full"
+                                            : "flex-1"
+                                    )}
+                                >
+                                    <ProductDetailVariantSelect
+                                        variant={variant}
+                                        selectClassName={variantSelectClassName}
+                                        labelClassName={variantLabelClassName}
+                                    />
+                                </div>
+                            ))}
+                        </div>
+                    )}
+                    {quantity && (
+                        <ProductDetailVariantSelect
+                            variant={quantity}
+                            selectClassName={variantSelectClassName}
+                            labelClassName={variantLabelClassName}
+                        />
+                    )}
+
+                    <div className="flex flex-col gap-3 mt-auto pt-6">
+                        {buttons.slice(0, 2).map((button, index) => (
+                            <Button
+                                key={`${button.text}-${index}`}
+                                {...getButtonProps(
+                                    { ...button, props: { ...button.props, ...getButtonConfigProps() } },
+                                    index,
+                                    theme.defaultButtonVariant,
+                                    cls("w-full", buttonClassName)
+                                )}
+                            />
+                        ))}
+                    </div>
+                </div>
+            </div>
+        </article>
+    );
+};
+
+
+export default ProductDetailCard;
diff --git a/src/components/ecommerce/productDetail/ProductDetailGallery.tsx b/src/components/ecommerce/productDetail/ProductDetailGallery.tsx
new file mode 100644
index 0000000..ce3a3c9
--- /dev/null
+++ b/src/components/ecommerce/productDetail/ProductDetailGallery.tsx
@@ -0,0 +1,114 @@
+"use client";
+
+import { useState, useCallback, useEffect } from "react";
+import useEmblaCarousel from "embla-carousel-react";
+import { ChevronUp, ChevronDown } from "lucide-react";
+import MediaContent from "@/components/shared/MediaContent";
+import { usePrevNextButtons } from "@/components/cardStack/hooks/usePrevNextButtons";
+import { cls } from "@/lib/utils";
+
+interface ProductDetailGalleryProps {
+    images: { src: string; alt: string }[];
+    className?: string;
+}
+
+const ProductDetailGallery = ({
+    images,
+    className = "",
+}: ProductDetailGalleryProps) => {
+    const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true });
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const {
+        prevBtnDisabled,
+        nextBtnDisabled,
+        onPrevButtonClick,
+        onNextButtonClick,
+    } = usePrevNextButtons(emblaApi);
+
+    const onThumbClick = useCallback(
+        (index: number) => {
+            if (!emblaApi) return;
+            emblaApi.scrollTo(index);
+        },
+        [emblaApi]
+    );
+
+    useEffect(() => {
+        if (!emblaApi) return;
+
+        const onSelect = () => {
+            setSelectedIndex(emblaApi.selectedScrollSnap());
+        };
+
+        emblaApi.on("select", onSelect);
+        onSelect();
+
+        return () => {
+            emblaApi.off("select", onSelect);
+        };
+    }, [emblaApi]);
+
+    return (
+        <div className={cls("relative w-full aspect-square", className)}>
+            <div className="relative overflow-hidden rounded-theme-capped cursor-grab h-full" ref={emblaRef}>
+                <div className="flex h-full">
+                    {images.map((image, index) => (
+                        <div key={index} className="flex-none w-full min-w-0 h-full">
+                            <MediaContent
+                                imageSrc={image.src}
+                                imageAlt={image.alt}
+                                imageClassName="w-full h-full object-cover rounded-none!"
+                            />
+                        </div>
+                    ))}
+                </div>
+            </div>
+
+            <div className="absolute left-5 top-0 bottom-5 flex flex-col gap-5">
+                <div className="flex-1 min-h-0 overflow-y-auto flex flex-col gap-3 pt-5 pb-1 mask-fade-y" data-lenis-prevent>
+                    {images.map((image, index) => (
+                        <button
+                            key={index}
+                            onClick={() => onThumbClick(index)}
+                            className="h-10 aspect-square rounded-theme overflow-hidden cursor-pointer flex-shrink-0 card p-0.5"
+                            type="button"
+                            aria-label={`View image ${index + 1}`}
+                        >
+                            <MediaContent
+                                imageSrc={image.src}
+                                imageAlt={image.alt}
+                                imageClassName={cls(
+                                    "w-full h-full object-cover transition-opacity duration-300 rounded-[calc(var(--theme-border-radius-capped)*0.90)]!",
+                                    selectedIndex === index ? "opacity-100" : "opacity-50 hover:opacity-75"
+                                )}
+                            />
+                        </button>
+                    ))}
+                </div>
+                <div className="flex flex-col gap-3">
+                    <button
+                        onClick={onPrevButtonClick}
+                        disabled={prevBtnDisabled}
+                        className="secondary-button h-10 aspect-square flex items-center justify-center rounded-theme cursor-pointer transition-colors disabled:cursor-not-allowed disabled:opacity-50"
+                        type="button"
+                        aria-label="Previous image"
+                    >
+                        <ChevronUp className="h-[40%] w-auto aspect-square text-secondary-cta-text" />
+                    </button>
+                    <button
+                        onClick={onNextButtonClick}
+                        disabled={nextBtnDisabled}
+                        className="secondary-button h-10 aspect-square flex items-center justify-center rounded-theme cursor-pointer transition-colors disabled:cursor-not-allowed disabled:opacity-50"
+                        type="button"
+                        aria-label="Next image"
+                    >
+                        <ChevronDown className="h-[40%] w-auto aspect-square text-secondary-cta-text" />
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+
+export default ProductDetailGallery;
diff --git a/src/components/ecommerce/productDetail/ProductDetailVariantSelect.tsx b/src/components/ecommerce/productDetail/ProductDetailVariantSelect.tsx
new file mode 100644
index 0000000..7686d7f
--- /dev/null
+++ b/src/components/ecommerce/productDetail/ProductDetailVariantSelect.tsx
@@ -0,0 +1,52 @@
+"use client";
+
+
+import { ChevronDown } from "lucide-react";
+import { cls } from "@/lib/utils";
+import type { ProductVariant } from "./ProductDetailCard";
+
+interface ProductDetailVariantSelectProps {
+    variant: ProductVariant;
+    selectClassName?: string;
+    labelClassName?: string;
+}
+
+const ProductDetailVariantSelect = ({
+    variant,
+    selectClassName = "",
+    labelClassName = "",
+}: ProductDetailVariantSelectProps) => {
+    return (
+        <div className="flex flex-col gap-1.5">
+            <label
+                className={cls(
+                    "text-sm font-medium text-foreground",
+                    labelClassName
+                )}
+            >
+                {variant.label}:
+            </label>
+            <div className="relative secondary-button rounded-theme h-9">
+                <select
+                    value={variant.selected}
+                    onChange={(e) => variant.onChange(e.target.value)}
+                    aria-label={variant.label}
+                    className={cls(
+                        "relative z-1 w-full h-full px-4 text-sm text-foreground focus:outline-none appearance-none cursor-pointer",
+                        selectClassName
+                    )}
+                >
+                    {variant.options.map((opt) => (
+                        <option key={opt} value={opt}>
+                            {opt}
+                        </option>
+                    ))}
+                </select>
+                <ChevronDown className="absolute right-4 top-1/2 -translate-y-1/2 h-(--text-sm) w-auto text-foreground pointer-events-none" />
+            </div>
+        </div>
+    );
+};
+
+
+export default ProductDetailVariantSelect;
diff --git a/src/components/form/ContactForm.tsx b/src/components/form/ContactForm.tsx
new file mode 100644
index 0000000..76d5cd6
--- /dev/null
+++ b/src/components/form/ContactForm.tsx
@@ -0,0 +1,107 @@
+"use client";
+
+
+import TextAnimation from "@/components/text/TextAnimation";
+import EmailSignupForm from "@/components/form/EmailSignupForm";
+import Tag from "@/components/shared/Tag";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import { useButtonAnimation } from "@/components/hooks/useButtonAnimation";
+import type { AnimationType } from "@/components/text/types";
+import type { ButtonAnimationType } from "@/types/button";
+import { LucideIcon } from "lucide-react";
+
+interface ContactFormProps {
+    title: string;
+    description: string;
+    tag: string;
+    tagIcon?: LucideIcon;
+    tagAnimation?: ButtonAnimationType;
+    useInvertedBackground: boolean;
+    inputPlaceholder?: string;
+    buttonText?: string;
+    termsText?: string;
+    onSubmit?: (email: string) => void;
+    centered?: boolean;
+    className?: string;
+    tagClassName?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
+    formWrapperClassName?: string;
+    formClassName?: string;
+    inputClassName?: string;
+    buttonClassName?: string;
+    buttonTextClassName?: string;
+    termsClassName?: string;
+}
+
+const ContactForm = ({
+    title,
+    description,
+    tag,
+    tagIcon,
+    tagAnimation = "none",
+    useInvertedBackground,
+    inputPlaceholder = "Enter your email",
+    buttonText = "Sign Up",
+    termsText = "By clicking Sign Up you're confirming that you agree with our Terms and Conditions.",
+    onSubmit,
+    centered = false,
+    className = "",
+    tagClassName = "",
+    titleClassName = "",
+    descriptionClassName = "",
+    formWrapperClassName = "",
+    formClassName = "",
+    inputClassName = "",
+    buttonClassName = "",
+    buttonTextClassName = "",
+    termsClassName = "",
+}: ContactFormProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+    const { containerRef: tagContainerRef } = useButtonAnimation({ animationType: tagAnimation });
+
+    return (
+        <div className={cls("relative z-1 flex flex-col gap-4", centered && "items-center text-center", className)}>
+            <div className={cls("w-full flex flex-col gap-1", centered && "items-center")}>
+                <div ref={tagContainerRef}>
+                    <Tag text={tag} icon={tagIcon} useInvertedBackground={useInvertedBackground} className={tagClassName} />
+                </div>
+
+                <TextAnimation
+                    type={theme.defaultTextAnimation as AnimationType}
+                    text={title}
+                    variant="trigger"
+                    className={cls("text-4xl md:text-5xl font-medium leading-[1.175] text-balance", shouldUseLightText ? "text-background" : "text-foreground", centered && "w-full md:w-8/10", titleClassName)}
+                />
+
+                <TextAnimation
+                    type={theme.defaultTextAnimation as AnimationType}
+                    text={description}
+                    variant="words-trigger"
+                    className={cls("text-base leading-[1.15] mb-1 text-balance", shouldUseLightText ? "text-background" : "text-foreground", centered && "w-full md:w-8/10", descriptionClassName)}
+                />
+            </div>
+
+            <div className={cls("w-full flex flex-col gap-1", formWrapperClassName)}>
+                <EmailSignupForm
+                    inputPlaceholder={inputPlaceholder}
+                    buttonText={buttonText}
+                    onSubmit={onSubmit}
+                    className={formClassName}
+                    inputClassName={inputClassName}
+                    buttonClassName={buttonClassName}
+                    buttonTextClassName={buttonTextClassName}
+                />
+
+                <p className={cls("text-xs", shouldUseLightText ? "text-background/75" : "text-foreground/75", termsClassName)}>
+                    {termsText}
+                </p>
+            </div>
+        </div>
+    );
+};
+
+
+export default ContactForm;
diff --git a/src/components/form/EmailSignupForm.tsx b/src/components/form/EmailSignupForm.tsx
new file mode 100644
index 0000000..5b602ef
--- /dev/null
+++ b/src/components/form/EmailSignupForm.tsx
@@ -0,0 +1,77 @@
+"use client";
+
+import { useState } from "react";
+import Button from "@/components/button/Button";
+import { cls } from "@/lib/utils";
+import { getButtonProps } from "@/lib/buttonUtils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+
+interface EmailSignupFormProps {
+    inputPlaceholder?: string;
+    buttonText?: string;
+    onSubmit?: (email: string) => void;
+    className?: string;
+    inputClassName?: string;
+    buttonClassName?: string;
+    buttonTextClassName?: string;
+}
+
+const EmailSignupForm = ({
+    inputPlaceholder = "Enter your email",
+    buttonText = "Sign Up",
+    onSubmit,
+    className = "",
+    inputClassName = "",
+    buttonClassName = "",
+    buttonTextClassName = "",
+}: EmailSignupFormProps) => {
+    const theme = useTheme();
+    const [email, setEmail] = useState("");
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        if (onSubmit) {
+            onSubmit(email);
+            setEmail("");
+        }
+    };
+
+    const getButtonConfigProps = () => {
+        if (theme.defaultButtonVariant === "hover-bubble") {
+            return { bgClassName: "w-full md:w-auto" };
+        }
+        if (theme.defaultButtonVariant === "icon-arrow") {
+            return { className: "justify-between md:justify-center" };
+        }
+        return {};
+    };
+
+    return (
+        <form onSubmit={handleSubmit} className={cls("relative z-1 flex flex-col md:flex-row gap-3 md:gap-1 w-full card rounded-theme-capped md:rounded-theme p-1", className)}>
+            <input
+                type="email"
+                placeholder={inputPlaceholder}
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                required
+                className={cls(
+                    "flex-1 px-4 text-base text-center md:text-left text-foreground placeholder:text-foreground/75 focus:outline-none focus:border-none truncate",
+                    inputClassName
+                )}
+                aria-label="Email address"
+            />
+            <Button
+                {...getButtonProps(
+                    { text: buttonText, props: getButtonConfigProps() },
+                    0,
+                    theme.defaultButtonVariant,
+                    cls("w-full md:w-auto", buttonClassName),
+                    buttonTextClassName
+                )}
+                type="submit"
+            />
+        </form>
+    );
+};
+
+export default EmailSignupForm;
diff --git a/src/components/form/Input.tsx b/src/components/form/Input.tsx
new file mode 100644
index 0000000..a567f35
--- /dev/null
+++ b/src/components/form/Input.tsx
@@ -0,0 +1,65 @@
+"use client";
+
+
+import { cls } from "@/lib/utils";
+
+interface InputProps {
+    type?: string;
+    placeholder?: string;
+    value: string;
+    onChange: (value: string) => void;
+    required?: boolean;
+    disabled?: boolean;
+    ariaLabel?: string;
+    className?: string;
+    error?: string;
+    id?: string;
+}
+
+const Input = ({
+    type = "text",
+    placeholder = "",
+    value,
+    onChange,
+    required = false,
+    disabled = false,
+    ariaLabel,
+    className = "",
+    error,
+    id,
+}: InputProps) => {
+    return (
+        <div className="w-full">
+            <input
+                id={id}
+                type={type}
+                placeholder={placeholder}
+                value={value}
+                onChange={(e) => onChange(e.target.value)}
+                required={required}
+                disabled={disabled}
+                aria-label={ariaLabel || placeholder}
+                aria-invalid={!!error}
+                aria-describedby={error && id ? `${id}-error` : undefined}
+                className={cls(
+                    "w-full relative z-1 px-4 py-3 secondary-button rounded-theme text-base text-secondary-cta-text placeholder:text-secondary-cta-text/75 focus:outline-none",
+                    disabled && "opacity-50 cursor-not-allowed",
+                    error && "ring-1 ring-red-500/50",
+                    className
+                )}
+            />
+            {error && (
+                <p
+                    id={id ? `${id}-error` : undefined}
+                    className="text-red-500 text-xs mt-1"
+                    role="alert"
+                >
+                    {error}
+                </p>
+            )}
+        </div>
+    );
+};
+
+
+export default Input;
diff --git a/src/components/form/MultiSelect.tsx b/src/components/form/MultiSelect.tsx
new file mode 100644
index 0000000..77668c2
--- /dev/null
+++ b/src/components/form/MultiSelect.tsx
@@ -0,0 +1,48 @@
+"use client";
+
+import { ChevronDown } from "lucide-react";
+import { cls } from "@/lib/utils";
+
+interface MultiSelectProps {
+    label: string;
+    options: string[];
+    selectedOptions: string[];
+    onToggle: (option: string) => void;
+    ariaLabel?: string;
+    className?: string;
+}
+
+const MultiSelect = ({
+    label,
+    options,
+    selectedOptions,
+    onToggle,
+    ariaLabel,
+    className = "",
+}: MultiSelectProps) => {
+    return (
+        <div className={cls("relative secondary-button rounded-theme", className)}>
+            <select
+                value={selectedOptions[selectedOptions.length - 1] || ""}
+                onChange={(e) => onToggle(e.target.value)}
+                aria-label={ariaLabel || label}
+                className={cls(
+                    "relative z-1 w-full px-4 py-3 text-base bg-transparent focus:outline-none appearance-none cursor-pointer",
+                    selectedOptions.length > 0 ? "text-secondary-cta-text" : "text-secondary-cta-text/75"
+                )}
+            >
+                <option value="" disabled>
+                    {selectedOptions.length > 0 ? selectedOptions.join(", ") : label}
+                </option>
+                {options.map((opt) => (
+                    <option key={opt} value={opt}>
+                        {selectedOptions.includes(opt) ? `✓ ${opt}` : opt}
+                    </option>
+                ))}
+            </select>
+            <ChevronDown className="absolute right-4 top-1/2 -translate-y-1/2 h-(--text-base) w-auto text-secondary-cta-text/75 pointer-events-none" />
+        </div>
+    );
+};
+
+export default MultiSelect;
diff --git a/src/components/form/Textarea.tsx b/src/components/form/Textarea.tsx
new file mode 100644
index 0000000..b2d5f72
--- /dev/null
+++ b/src/components/form/Textarea.tsx
@@ -0,0 +1,65 @@
+"use client";
+
+
+import { cls } from "@/lib/utils";
+
+interface TextareaProps {
+    placeholder?: string;
+    value: string;
+    onChange: (value: string) => void;
+    rows?: number;
+    required?: boolean;
+    disabled?: boolean;
+    ariaLabel?: string;
+    className?: string;
+    error?: string;
+    id?: string;
+}
+
+const Textarea = ({
+    placeholder = "",
+    value,
+    onChange,
+    rows = 5,
+    required = false,
+    disabled = false,
+    ariaLabel,
+    className = "",
+    error,
+    id,
+}: TextareaProps) => {
+    return (
+        <div className="w-full">
+            <textarea
+                id={id}
+                placeholder={placeholder}
+                value={value}
+                onChange={(e) => onChange(e.target.value)}
+                rows={rows}
+                required={required}
+                disabled={disabled}
+                aria-label={ariaLabel || placeholder}
+                aria-invalid={!!error}
+                aria-describedby={error && id ? `${id}-error` : undefined}
+                className={cls(
+                    "w-full relative z-1 px-4 py-3 secondary-button rounded-theme-capped text-base text-secondary-cta-text placeholder:text-secondary-cta-text/75 focus:outline-none resize-none",
+                    disabled && "opacity-50 cursor-not-allowed",
+                    error && "ring-1 ring-red-500/50",
+                    className
+                )}
+            />
+            {error && (
+                <p
+                    id={id ? `${id}-error` : undefined}
+                    className="text-red-500 text-xs mt-1"
+                    role="alert"
+                >
+                    {error}
+                </p>
+            )}
+        </div>
+    );
+};
+
+
+export default Textarea;
diff --git a/src/components/form/WaitlistForm.tsx b/src/components/form/WaitlistForm.tsx
new file mode 100644
index 0000000..79fe4fb
--- /dev/null
+++ b/src/components/form/WaitlistForm.tsx
@@ -0,0 +1,98 @@
+"use client";
+
+import React, { useState } from "react";
+import Input from "@/components/form/Input";
+import Button from "@/components/button/Button";
+import { cls } from "@/lib/utils";
+import { getButtonProps } from "@/lib/buttonUtils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+
+interface FormField {
+    name: string;
+    type?: string;
+    placeholder?: string;
+    ariaLabel?: string;
+    required?: boolean;
+}
+
+interface WaitlistFormProps {
+    fields?: FormField[];
+    buttonText?: string;
+    onSubmit?: (data: Record<string, string>) => void;
+    className?: string;
+    inputsContainerClassName?: string;
+    inputClassName?: string;
+    buttonClassName?: string;
+    buttonTextClassName?: string;
+}
+
+const WaitlistForm = ({
+    fields = [
+        { name: "email", type: "email", placeholder: "Your email", ariaLabel: "Email address", required: true },
+        { name: "username", type: "text", placeholder: "Telegram username", ariaLabel: "Username", required: true }
+    ],
+    buttonText = "Join waitlist",
+    onSubmit,
+    className = "",
+    inputsContainerClassName = "",
+    inputClassName = "",
+    buttonClassName = "",
+    buttonTextClassName = "",
+}: WaitlistFormProps) => {
+    const theme = useTheme();
+    const [formData, setFormData] = useState<Record<string, string>>(
+        fields.reduce((acc, field) => ({ ...acc, [field.name]: "" }), {})
+    );
+
+    const handleInputChange = (name: string, value: string) => {
+        setFormData(prev => ({ ...prev, [name]: value }));
+    };
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        if (onSubmit) {
+            onSubmit(formData);
+        }
+    };
+
+    const getButtonConfigProps = () => {
+        if (theme.defaultButtonVariant === "hover-bubble") {
+            return { bgClassName: "w-full" };
+        }
+        if (theme.defaultButtonVariant === "icon-arrow") {
+            return { className: "justify-between" };
+        }
+        return {};
+    };
+
+    return (
+        <form onSubmit={handleSubmit} className={cls("relative z-1 flex flex-col gap-3 w-full", className)}>
+            <div className={cls("flex flex-col md:flex-row gap-3", inputsContainerClassName)}>
+                {fields.map((field) => (
+                    <Input
+                        key={field.name}
+                        type={field.type || "text"}
+                        placeholder={field.placeholder || ""}
+                        value={formData[field.name] || ""}
+                        onChange={(value) => handleInputChange(field.name, value)}
+                        required={field.required !== false}
+                        ariaLabel={field.ariaLabel || field.placeholder}
+                        className={cls("w-full", inputClassName)}
+                    />
+                ))}
+            </div>
+            <Button
+                {...getButtonProps(
+                    { text: buttonText, props: getButtonConfigProps() },
+                    0,
+                    theme.defaultButtonVariant,
+                    cls("w-full", buttonClassName),
+                    buttonTextClassName
+                )}
+            />
+        </form>
+    );
+};
+
+
+export default WaitlistForm;
diff --git a/src/components/hooks/useButtonAnimation.ts b/src/components/hooks/useButtonAnimation.ts
new file mode 100644
index 0000000..dca86d3
--- /dev/null
+++ b/src/components/hooks/useButtonAnimation.ts
@@ -0,0 +1,77 @@
+import { useRef } from "react";
+import { useGSAP } from "@gsap/react";
+import gsap from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+import type { ButtonAnimationType } from "@/types/button";
+
+gsap.registerPlugin(ScrollTrigger);
+
+export const useButtonAnimation = ({ animationType }: { animationType: ButtonAnimationType }) => {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  useGSAP(() => {
+    if (animationType === "none" || !containerRef.current) return;
+
+    // First try to find buttons/links, otherwise animate direct children
+    let elements: NodeListOf<Element> | HTMLCollection = containerRef.current.querySelectorAll("button, a");
+    if (elements.length === 0) {
+      // For non-button elements (like Tag), animate the direct children
+      elements = containerRef.current.children;
+    }
+    if (elements.length === 0) return;
+
+    if (animationType === "opacity") {
+      gsap.fromTo(
+        elements,
+        { opacity: 0 },
+        {
+          opacity: 1,
+          duration: 1.25,
+          stagger: 0.15,
+          ease: "sine",
+          scrollTrigger: {
+            trigger: containerRef.current,
+            start: "top 85%",
+            toggleActions: "play none none none",
+          },
+        }
+      );
+    } else if (animationType === "slide-up") {
+      gsap.fromTo(
+        elements,
+        { opacity: 0, yPercent: 30 },
+        {
+          opacity: 1,
+          yPercent: 0,
+          duration: 1,
+          stagger: 0.15,
+          ease: "sine",
+          scrollTrigger: {
+            trigger: containerRef.current,
+            start: "top 85%",
+            toggleActions: "play none none none",
+          },
+        }
+      );
+    } else if (animationType === "blur-reveal") {
+      gsap.fromTo(
+        elements,
+        { opacity: 0, filter: "blur(10px)" },
+        {
+          opacity: 1,
+          filter: "blur(0px)",
+          duration: 1.2,
+          stagger: 0.15,
+          ease: "power2.out",
+          scrollTrigger: {
+            trigger: containerRef.current,
+            start: "top 85%",
+            toggleActions: "play none none none",
+          },
+        }
+      );
+    }
+  }, [animationType]);
+
+  return { containerRef };
+};
diff --git a/src/components/legal/LegalSection.tsx b/src/components/legal/LegalSection.tsx
new file mode 100644
index 0000000..b2b4221
--- /dev/null
+++ b/src/components/legal/LegalSection.tsx
@@ -0,0 +1,130 @@
+"use client";
+
+
+import { cls } from "@/lib/utils";
+
+export type LegalContentItem =
+    | { type: "paragraph"; text: string }
+    | { type: "list"; items: string[] }
+    | { type: "numbered-list"; items: string[] };
+
+export interface LegalContentSection {
+    heading: string;
+    content: LegalContentItem[];
+}
+
+interface LegalSectionProps {
+    layout: "page" | "section";
+    title: string;
+    subtitle?: string;
+    sections: LegalContentSection[];
+    className?: string;
+    titleClassName?: string;
+    subtitleClassName?: string;
+    sectionClassName?: string;
+    headingClassName?: string;
+    contentClassName?: string;
+    listClassName?: string;
+}
+
+const LegalSection = ({
+    layout,
+    title,
+    subtitle,
+    sections,
+    className = "",
+    titleClassName = "",
+    subtitleClassName = "",
+    sectionClassName = "",
+    headingClassName = "",
+    contentClassName = "",
+    listClassName = "",
+}: LegalSectionProps) => {
+    return (
+        <article
+            className={cls(
+                "relative w-content-width mx-auto",
+                layout === "page" ? "pt-hero-page-padding pb-20" : "py-20",
+                className
+            )}
+        >
+            <div className="md:max-w-1/2 mx-auto flex flex-col gap-6">
+                <div className="flex flex-col gap-2">
+                    <h1
+                        className={cls(
+                            "text-3xl md:text-4xl font-medium text-foreground leading-tight",
+                            titleClassName
+                        )}
+                    >
+                        {title}
+                    </h1>
+                    {subtitle && (
+                        <p
+                            className={cls(
+                                "text-sm text-foreground/50",
+                                subtitleClassName
+                            )}
+                        >
+                            {subtitle}
+                        </p>
+                    )}
+                </div>
+
+                <div className="w-full h-px bg-background-accent" />
+
+                <div className="flex flex-col gap-6">
+                    {sections.map((section) => (
+                        <section
+                            key={section.heading}
+                            className={cls("flex flex-col gap-3", sectionClassName)}
+                        >
+                            <h2
+                                className={cls(
+                                    "text-xl md:text-2xl font-medium text-foreground leading-tight",
+                                    headingClassName
+                                )}
+                            >
+                                {section.heading}
+                            </h2>
+                            {section.content.map((item, i) => {
+                                if (item.type === "paragraph") {
+                                    return (
+                                        <p
+                                            key={i}
+                                            className={cls(
+                                                "text-sm md:text-base text-foreground/75 leading-tight",
+                                                contentClassName
+                                            )}
+                                        >
+                                            {item.text}
+                                        </p>
+                                    );
+                                }
+
+                                const ListTag = item.type === "numbered-list" ? "ol" : "ul";
+
+                                return (
+                                    <ListTag
+                                        key={i}
+                                        className={cls(
+                                            "text-sm md:text-base text-foreground/75 leading-tight pl-6 flex flex-col gap-2",
+                                            item.type === "numbered-list" ? "list-decimal" : "list-disc",
+                                            listClassName
+                                        )}
+                                    >
+                                        {item.items.map((li, j) => (
+                                            <li key={j}>{li}</li>
+                                        ))}
+                                    </ListTag>
+                                );
+                            })}
+                        </section>
+                    ))}
+                </div>
+            </div>
+        </article>
+    );
+};
+
+
+export default LegalSection;
diff --git a/src/components/navbar/HamburgerButton.tsx b/src/components/navbar/HamburgerButton.tsx
new file mode 100644
index 0000000..7726b5f
--- /dev/null
+++ b/src/components/navbar/HamburgerButton.tsx
@@ -0,0 +1,59 @@
+"use client";
+
+import { cls } from "@/lib/utils";
+
+interface HamburgerButtonProps {
+  isActive: boolean;
+  onClick: () => void;
+  className?: string;
+  activeBarClassName?: string;
+  inactiveBarClassName?: string;
+  ariaControls?: string;
+  styled?: boolean;
+}
+
+const HamburgerButton = ({
+  isActive,
+  onClick,
+  className = "",
+  activeBarClassName = "bg-background",
+  inactiveBarClassName = "bg-foreground",
+  ariaControls = "navigation-menu",
+  styled = false,
+}: HamburgerButtonProps) => {
+  return (
+    <button
+      onClick={onClick}
+      className={cls(
+        "pointer-events-auto cursor-pointer border-none flex justify-center items-center h-9 w-[var(--height-9)] aspect-square relative",
+        styled ? "primary-button rounded-theme" : "bg-transparent",
+        className
+      )}
+      aria-label={isActive ? "Close menu" : "Open menu"}
+      aria-expanded={isActive}
+      aria-controls={ariaControls}
+    >
+      <span
+        aria-hidden="true"
+        className={cls(
+          "transition-all duration-700 ease-[cubic-bezier(0.5,0.5,0,1)] w-[40%] h-0.25 absolute",
+          isActive
+            ? `${styled ? "bg-primary-cta-text" : activeBarClassName} translate-y-0 rotate-45`
+            : `${styled ? "bg-primary-cta-text" : inactiveBarClassName} -translate-y-1 hover:translate-y-1`
+        )}
+      />
+      <span
+        aria-hidden="true"
+        className={cls(
+          "transition-all duration-700 ease-[cubic-bezier(0.5,0.5,0,1)] w-[40%] h-0.25 absolute",
+          isActive
+            ? `${styled ? "bg-primary-cta-text" : activeBarClassName} translate-y-0 -rotate-45`
+            : `${styled ? "bg-primary-cta-text" : inactiveBarClassName} translate-y-1 hover:-translate-y-1`
+        )}
+      />
+    </button>
+  );
+};
+
+
+export default HamburgerButton;
diff --git a/src/components/navbar/Logo.tsx b/src/components/navbar/Logo.tsx
new file mode 100644
index 0000000..af97aa6
--- /dev/null
+++ b/src/components/navbar/Logo.tsx
@@ -0,0 +1,74 @@
+"use client";
+
+import Image from "next/image";
+import { cls } from "@/lib/utils";
+import { useButtonClick } from "@/components/button/useButtonClick";
+
+interface LogoProps {
+  logoSrc?: string;
+  logoAlt?: string;
+  brandName?: string;
+  className?: string;
+  imageClassName?: string;
+  textClassName?: string;
+  onClick?: () => void;
+  href?: string;
+}
+
+const Logo = ({
+  logoSrc,
+  logoAlt = "",
+  brandName = "Webild",
+  className = "",
+  imageClassName = "",
+  textClassName = "",
+  onClick,
+  href,
+}: LogoProps) => {
+  const handleClick = useButtonClick(href, onClick);
+  const isClickable = onClick || href;
+
+  if (logoSrc) {
+    const imageElement = (
+      <div className={cls("relative h-[calc(var(--text-xl)*1.25)] w-auto", className)}>
+        <Image
+          src={logoSrc}
+          alt={logoAlt}
+          width={100}
+          height={24}
+          className={cls("h-full w-auto object-contain", imageClassName)}
+          unoptimized={logoSrc.startsWith('http') || logoSrc.startsWith('//')}
+        />
+      </div>
+    );
+
+    if (isClickable) {
+      return (
+        <button onClick={handleClick} className="cursor-pointer">
+          {imageElement}
+        </button>
+      );
+    }
+
+    return imageElement;
+  }
+
+  if (isClickable) {
+    return (
+      <button onClick={handleClick} className="cursor-pointer">
+        <h2 className={cls("text-xl font-medium text-foreground", textClassName)}>
+          {brandName}
+        </h2>
+      </button>
+    );
+  }
+
+  return (
+    <h2 className={cls("text-xl font-medium text-foreground", textClassName)}>
+      {brandName}
+    </h2>
+  );
+};
+
+
+export default Logo;
diff --git a/src/components/navbar/NavbarLayoutFloatingInline.tsx b/src/components/navbar/NavbarLayoutFloatingInline.tsx
new file mode 100644
index 0000000..a36662b
--- /dev/null
+++ b/src/components/navbar/NavbarLayoutFloatingInline.tsx
@@ -0,0 +1,145 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Button from "../button/Button";
+import ButtonTextUnderline from "../button/ButtonTextUnderline";
+import Logo from "./Logo";
+import { NavItem } from "@/types/navigation";
+import { cls } from "@/lib/utils";
+import { getButtonProps } from "@/lib/buttonUtils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { ButtonConfig } from "@/types/button";
+
+interface NavbarLayoutFloatingInlineProps {
+  navItems: NavItem[];
+  logoSrc?: string;
+  logoAlt?: string;
+  brandName?: string;
+  button: ButtonConfig;
+  secondaryButton?: ButtonConfig;
+  animateOnLoad?: boolean;
+  className?: string;
+  logoClassName?: string;
+  logoImageClassName?: string;
+  navItemClassName?: string;
+  buttonClassName?: string;
+  buttonTextClassName?: string;
+  secondaryButtonClassName?: string;
+  secondaryButtonTextClassName?: string;
+}
+
+const NavbarLayoutFloatingInline = ({
+  navItems,
+  logoSrc,
+  logoAlt = "",
+  brandName = "Webild",
+  button,
+  secondaryButton,
+  animateOnLoad = true,
+  className = "",
+  logoClassName = "",
+  logoImageClassName = "",
+  navItemClassName = "",
+  buttonClassName = "",
+  buttonTextClassName = "",
+  secondaryButtonClassName = "",
+  secondaryButtonTextClassName = "",
+}: NavbarLayoutFloatingInlineProps) => {
+  const theme = useTheme();
+  const [entered, setEntered] = useState(!animateOnLoad);
+  const [expanded, setExpanded] = useState(!animateOnLoad);
+  const [showLinks, setShowLinks] = useState(!animateOnLoad);
+
+  useEffect(() => {
+    if (!animateOnLoad) return;
+
+    const t1 = setTimeout(() => setEntered(true), 50);
+    const t2 = setTimeout(() => setExpanded(true), 1000);
+    const t3 = setTimeout(() => setShowLinks(true), 1900);
+
+    return () => {
+      clearTimeout(t1);
+      clearTimeout(t2);
+      clearTimeout(t3);
+    };
+  }, [animateOnLoad]);
+
+  return (
+    <nav
+      role="navigation"
+      aria-label="Main navigation"
+      className="fixed z-[100] top-6 w-full"
+      style={animateOnLoad ? {
+        transform: entered ? "translateY(0)" : "translateY(calc(-100% - 3rem))",
+        transition: "transform 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94)",
+      } : undefined}
+    >
+      <div
+        className={cls(
+          "mx-auto flex items-center justify-between",
+          "card rounded-theme",
+          "p-3 pl-6 h-fit relative",
+          !animateOnLoad && "w-content-width",
+          className
+        )}
+        style={animateOnLoad ? {
+          maxWidth: expanded ? "var(--width-content-width)" : "22rem",
+          transition: "max-width 1000ms cubic-bezier(0.4, 0, 0.2, 1)",
+        } : undefined}
+      >
+        <Logo
+          brandName={brandName}
+          logoSrc={logoSrc}
+          logoAlt={logoAlt}
+          className={logoClassName}
+          imageClassName={logoImageClassName}
+          href="/"
+        />
+
+        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 hidden md:flex gap-6 items-center">
+          {navItems.map((item, index) => (
+            <div
+              key={index}
+              className={animateOnLoad ? cls(
+                "transition-all duration-700 ease-out",
+                showLinks ? "opacity-100 translate-y-0" : "opacity-0 translate-y-3"
+              ) : undefined}
+              style={animateOnLoad ? { transitionDelay: `${index * 120}ms` } : undefined}
+            >
+              <ButtonTextUnderline
+                text={item.name}
+                href={item.id}
+                className={cls("!text-base", navItemClassName)}
+              />
+            </div>
+          ))}
+        </div>
+
+        <div className="flex items-center gap-3">
+          {secondaryButton && (
+            <Button
+              {...getButtonProps(
+                secondaryButton,
+                1,
+                theme.defaultButtonVariant,
+                secondaryButtonClassName,
+                secondaryButtonTextClassName
+              )}
+            />
+          )}
+          <Button
+            {...getButtonProps(
+              button,
+              0,
+              theme.defaultButtonVariant,
+              buttonClassName,
+              buttonTextClassName
+            )}
+          />
+        </div>
+      </div>
+    </nav>
+  );
+};
+
+export default NavbarLayoutFloatingInline;
diff --git a/src/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay.tsx b/src/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay.tsx
new file mode 100644
index 0000000..1bf291b
--- /dev/null
+++ b/src/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay.tsx
@@ -0,0 +1,94 @@
+"use client";
+
+import ExpandingMenu from "../expandingMenu/ExpandingMenu";
+import Button from "../../button/Button";
+import Logo from "../Logo";
+import { useScrollDetection } from "./useScrollDetection";
+import { useMenuAnimation } from "./useMenuAnimation";
+import { useResponsive } from "./useResponsive";
+import type { NavItem } from "@/types/navigation";
+import { cls } from "@/lib/utils";
+import { getButtonProps } from "@/lib/buttonUtils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { ButtonConfig } from "@/types/button";
+
+interface NavbarLayoutFloatingOverlayProps {
+  navItems: NavItem[];
+  logoSrc?: string;
+  logoAlt?: string;
+  className?: string;
+  brandName?: string;
+  button?: ButtonConfig;
+  logoClassName?: string;
+  logoImageClassName?: string;
+  buttonClassName?: string;
+  buttonTextClassName?: string;
+}
+
+const NavbarLayoutFloatingOverlay = ({
+  navItems,
+  logoSrc,
+  logoAlt = "",
+  className = "",
+  brandName = "Webild",
+  button,
+  logoClassName = "",
+  logoImageClassName = "",
+  buttonClassName = "",
+  buttonTextClassName = "",
+}: NavbarLayoutFloatingOverlayProps) => {
+    const theme = useTheme();
+    const isScrolled = useScrollDetection(50);
+    const { menuOpen, buttonZIndex, handleMenuToggle } =
+      useMenuAnimation();
+    const isMobile = useResponsive(768);
+
+    return (
+      <nav
+        role="navigation"
+        aria-label="Main navigation"
+        className="fixed z-[100] top-6 w-full transition-all duration-500 ease-in-out"
+      >
+        <div
+          className={cls(
+            "w-content-width mx-auto",
+            "flex items-center justify-between",
+            "card rounded-theme backdrop-blur-xs",
+            "px-6 md:pr-3",
+            className
+          )}
+          style={{
+            height: "calc(var(--vw-0_75) + var(--vw-0_75) + var(--height-9))",
+          }}
+        >
+          <Logo brandName={brandName} logoSrc={logoSrc} logoAlt={logoAlt} className={logoClassName} imageClassName={logoImageClassName} href="/" />
+          <div
+            className="flex items-center transition-all duration-500 ease-in-out"
+            style={{ paddingRight: "calc(var(--height-9) + var(--vw-0_75))" }}
+          >
+            {!isMobile && button && (
+              <div className="hidden md:flex">
+                <Button
+                  {...getButtonProps(
+                    button,
+                    0,
+                    theme.defaultButtonVariant,
+                    cls(buttonZIndex, buttonClassName),
+                    buttonTextClassName
+                  )}
+                />
+              </div>
+            )}
+            <ExpandingMenu
+              isOpen={menuOpen}
+              onToggle={handleMenuToggle}
+              navItems={navItems}
+              isScrolled={isScrolled}
+            />
+          </div>
+        </div>
+      </nav>
+  );
+};
+
+export default NavbarLayoutFloatingOverlay;
diff --git a/src/components/navbar/NavbarLayoutFloatingOverlay/useMenuAnimation.ts b/src/components/navbar/NavbarLayoutFloatingOverlay/useMenuAnimation.ts
new file mode 100644
index 0000000..364cdb8
--- /dev/null
+++ b/src/components/navbar/NavbarLayoutFloatingOverlay/useMenuAnimation.ts
@@ -0,0 +1,40 @@
+import { useState, useCallback, useEffect } from 'react';
+
+export const useMenuAnimation = () => {
+    const [menuOpen, setMenuOpen] = useState(false);
+    const [buttonZIndex, setButtonZIndex] = useState('z-[100]');
+    const [animationTimeoutId, setAnimationTimeoutId] = useState<NodeJS.Timeout | null>(null);
+
+    const handleMenuToggle = useCallback(() => {
+        const isOpening = !menuOpen;
+        setMenuOpen(prev => !prev);
+
+        if (animationTimeoutId) {
+            clearTimeout(animationTimeoutId);
+        }
+
+        if (isOpening) {
+            setButtonZIndex('z-0');
+        } else {
+            const timeoutId = setTimeout(() => {
+                setButtonZIndex('z-[100]');
+            }, 800);
+            setAnimationTimeoutId(timeoutId);
+        }
+    }, [menuOpen, animationTimeoutId]);
+
+    useEffect(() => {
+        return () => {
+            if (animationTimeoutId) {
+                clearTimeout(animationTimeoutId);
+            }
+        };
+    }, [animationTimeoutId]);
+
+    return {
+        menuOpen,
+        buttonZIndex,
+        handleMenuToggle,
+        setMenuOpen
+    };
+};
\ No newline at end of file
diff --git a/src/components/navbar/NavbarLayoutFloatingOverlay/useResponsive.ts b/src/components/navbar/NavbarLayoutFloatingOverlay/useResponsive.ts
new file mode 100644
index 0000000..f100489
--- /dev/null
+++ b/src/components/navbar/NavbarLayoutFloatingOverlay/useResponsive.ts
@@ -0,0 +1,18 @@
+import { useState, useEffect } from 'react';
+import { throttle } from '@/utils/throttle';
+
+export const useResponsive = (breakpoint: number = 768) => {
+    const [isMobile, setIsMobile] = useState(false);
+
+    useEffect(() => {
+        const handleResize = throttle(() => {
+            setIsMobile(window.innerWidth < breakpoint);
+        }, 150);
+        
+        handleResize();
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, [breakpoint]);
+
+    return isMobile;
+};
\ No newline at end of file
diff --git a/src/components/navbar/NavbarLayoutFloatingOverlay/useScrollDetection.ts b/src/components/navbar/NavbarLayoutFloatingOverlay/useScrollDetection.ts
new file mode 100644
index 0000000..3185fbc
--- /dev/null
+++ b/src/components/navbar/NavbarLayoutFloatingOverlay/useScrollDetection.ts
@@ -0,0 +1,18 @@
+import { useState, useEffect } from 'react';
+import { throttle } from '@/utils/throttle';
+
+export const useScrollDetection = (threshold: number = 50) => {
+    const [isScrolled, setIsScrolled] = useState(false);
+
+    useEffect(() => {
+        const handleScroll = throttle(() => {
+            setIsScrolled(window.scrollY > threshold);
+        }, 100);
+        
+        handleScroll();
+        window.addEventListener('scroll', handleScroll, { passive: true });
+        return () => window.removeEventListener('scroll', handleScroll);
+    }, [threshold]);
+
+    return isScrolled;
+};
\ No newline at end of file
diff --git a/src/components/navbar/NavbarStyleApple/NavbarStyleApple.tsx b/src/components/navbar/NavbarStyleApple/NavbarStyleApple.tsx
new file mode 100644
index 0000000..4d17694
--- /dev/null
+++ b/src/components/navbar/NavbarStyleApple/NavbarStyleApple.tsx
@@ -0,0 +1,148 @@
+"use client";
+
+import { useState, useCallback } from "react";
+import MobileMenu from "../mobileMenu/MobileMenu";
+import Button from "@/components/button/Button";
+import ButtonTextUnderline from "@/components/button/ButtonTextUnderline";
+import Logo from "../Logo";
+import { Plus } from "lucide-react";
+import { NavbarProps } from "@/types/navigation";
+import { useScrollState } from "./useScrollState";
+import { cls } from "@/lib/utils";
+import { getButtonProps } from "@/lib/buttonUtils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { ButtonConfig } from "@/types/button";
+
+const SCROLL_THRESHOLD = 50;
+
+interface NavbarStyleAppleProps extends NavbarProps {
+  button?: ButtonConfig;
+  buttonClassName?: string;
+  buttonTextClassName?: string;
+}
+
+const NavbarStyleApple = ({
+  navItems,
+  // logoSrc,
+  // logoAlt = "",
+  brandName = "Webild",
+  button,
+  buttonClassName = "",
+  buttonTextClassName = "",
+}: NavbarStyleAppleProps) => {
+  const isScrolled = useScrollState(SCROLL_THRESHOLD);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const theme = useTheme();
+
+  const handleMenuToggle = useCallback(() => {
+    setMenuOpen((prev) => !prev);
+  }, []);
+
+  const handleMobileNavClick = useCallback(() => {
+    setMenuOpen(false);
+  }, []);
+
+  const getButtonConfigProps = () => {
+    if (theme.defaultButtonVariant === "hover-bubble") {
+      return { bgClassName: "w-full" };
+    }
+    if (theme.defaultButtonVariant === "icon-arrow") {
+      return { className: "justify-between" };
+    }
+    return {};
+  };
+
+  return (
+    <nav
+      className={cls(
+        "fixed z-[1000] top-0 left-0 w-full transition-all duration-500 ease-in-out",
+        isScrolled
+          ? "bg-background/80 backdrop-blur-sm h-15"
+          : "bg-background/0 backdrop-blur-0 h-20"
+      )}
+    >
+      <div className="relative flex items-center justify-between h-full w-content-width mx-auto">
+        <div className="flex items-center transition-all duration-500 ease-in-out">
+          <Logo brandName={brandName} href="/" />
+        </div>
+
+        <div
+          className={cls(
+            "hidden md:flex items-center gap-6 transition-all duration-500 ease-in-out",
+            button && "absolute left-1/2 -translate-x-1/2"
+          )}
+          role="navigation"
+        >
+          {navItems.map((item, index) => (
+            <ButtonTextUnderline
+              key={index}
+              text={item.name}
+              href={item.id}
+              className="!text-base"
+            />
+          ))}
+          {!button && null}
+        </div>
+
+        {button && (
+          <div className="hidden md:block">
+            <Button
+              {...getButtonProps(
+                button,
+                0,
+                theme.defaultButtonVariant,
+                buttonClassName,
+                buttonTextClassName
+              )}
+            />
+          </div>
+        )}
+
+        <button
+          className="flex md:hidden shrink-0 h-8 aspect-square rounded-theme bg-foreground items-center justify-center cursor-pointer"
+          onClick={handleMenuToggle}
+          aria-label="Toggle menu"
+          aria-expanded={menuOpen}
+          aria-controls="mobile-menu"
+        >
+          <Plus
+            className={cls(
+              "w-1/2 h-1/2 text-background transition-transform duration-300",
+              menuOpen ? "rotate-45" : "rotate-0"
+            )}
+            strokeWidth={1.5}
+            aria-hidden="true"
+          />
+        </button>
+      </div>
+
+      <MobileMenu
+        menuOpen={menuOpen}
+        onMenuToggle={handleMenuToggle}
+        navItems={navItems}
+        onNavClick={handleMobileNavClick}
+      >
+        {button && (
+          <Button
+            {...getButtonProps(
+              {
+                ...button,
+                onClick: () => {
+                  button.onClick?.();
+                  setMenuOpen(false);
+                },
+                props: { ...button.props, ...getButtonConfigProps() }
+              },
+              0,
+              theme.defaultButtonVariant,
+              cls("w-full", buttonClassName),
+              buttonTextClassName
+            )}
+          />
+        )}
+      </MobileMenu>
+    </nav>
+  );
+};
+
+export default NavbarStyleApple;
diff --git a/src/components/navbar/NavbarStyleApple/useScrollState.ts b/src/components/navbar/NavbarStyleApple/useScrollState.ts
new file mode 100644
index 0000000..41b6c67
--- /dev/null
+++ b/src/components/navbar/NavbarStyleApple/useScrollState.ts
@@ -0,0 +1,28 @@
+import { useState, useEffect, useRef } from 'react';
+
+export const useScrollState = (threshold: number = 50) => {
+    const [isScrolled, setIsScrolled] = useState(false);
+    const rafRef = useRef<number | undefined>(undefined);
+
+    useEffect(() => {
+        const handleScroll = () => {
+            if (rafRef.current) {
+                cancelAnimationFrame(rafRef.current);
+            }
+            
+            rafRef.current = requestAnimationFrame(() => {
+                setIsScrolled(window.scrollY > threshold);
+            });
+        };
+
+        window.addEventListener('scroll', handleScroll, { passive: true });
+        return () => {
+            window.removeEventListener('scroll', handleScroll);
+            if (rafRef.current) {
+                cancelAnimationFrame(rafRef.current);
+            }
+        };
+    }, [threshold]);
+
+    return isScrolled;
+};
\ No newline at end of file
diff --git a/src/components/navbar/NavbarStyleCentered/NavbarStyleCentered.css b/src/components/navbar/NavbarStyleCentered/NavbarStyleCentered.css
new file mode 100644
index 0000000..2928a20
--- /dev/null
+++ b/src/components/navbar/NavbarStyleCentered/NavbarStyleCentered.css
@@ -0,0 +1,40 @@
+/* Overlay - active state */
+[data-navigation-status="active"] .centered-nav__overlay {
+  opacity: 0.15;
+  visibility: visible;
+}
+
+/* Content expand - grid animation */
+.centered-nav__content {
+  grid-template-rows: 0fr;
+}
+
+[data-navigation-status="active"] .centered-nav__content {
+  grid-template-rows: 1fr;
+}
+
+/* Inner container - height hack for grid animation */
+.centered-nav__inner {
+  height: 10000%;
+}
+
+/* Link content slide up animation */
+.centered-nav__link-content {
+  transition: transform 0.6s cubic-bezier(0.65, 0, 0, 1);
+  transform: translateY(150%);
+  transition-delay: inherit;
+}
+
+[data-navigation-status="active"] .centered-nav__link-content {
+  transform: translateY(0);
+}
+
+/* Separator width animation */
+.centered-nav__separator {
+  width: 0;
+  transition: width 0.6s cubic-bezier(0.65, 0, 0, 1);
+}
+
+[data-navigation-status="active"] .centered-nav__separator {
+  width: 100%;
+}
diff --git a/src/components/navbar/NavbarStyleCentered/NavbarStyleCentered.tsx b/src/components/navbar/NavbarStyleCentered/NavbarStyleCentered.tsx
new file mode 100644
index 0000000..f81b4ee
--- /dev/null
+++ b/src/components/navbar/NavbarStyleCentered/NavbarStyleCentered.tsx
@@ -0,0 +1,183 @@
+"use client";
+
+import { useState, useEffect, useCallback, Fragment } from "react";
+import Logo from "../Logo";
+import HamburgerButton from "../HamburgerButton";
+import Button from "@/components/button/Button";
+import { NavItem } from "@/types/navigation";
+import { cls } from "@/lib/utils";
+import { getButtonProps } from "@/lib/buttonUtils";
+import { useButtonClick } from "@/components/button/useButtonClick";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { ButtonConfig } from "@/types/button";
+import "./NavbarStyleCentered.css";
+import { ArrowUpRight } from "lucide-react";
+
+interface NavLinkProps {
+  item: NavItem;
+  index: number;
+  onClose: () => void;
+}
+
+const NavLink = ({ item, index, onClose }: NavLinkProps) => {
+  const handleClick = useButtonClick(item.id, onClose);
+
+  return (
+    <li
+      className="group m-0 p-0 list-none overflow-clip"
+      style={{ transitionDelay: `${index * 0.05}s` }}
+    >
+      <button
+        type="button"
+        className="centered-nav__link relative flex justify-between items-center no-underline w-full text-left bg-transparent border-none cursor-pointer"
+        onClick={handleClick}
+      >
+        <div className="centered-nav__link-content flex justify-between items-center gap-3 w-full">
+          <p className="m-0 text-xl md:text-2xl text-foreground truncate group-hover:ml-3 transition-[margin] duration-300">{item.name}</p>
+          <ArrowUpRight className="h-[var(--text-xl)] md:h-[var(--text-2xl)] w-auto text-foreground group-hover:rotate-45 group-hover:mr-3 transition-all duration-300" strokeWidth={1.5} />
+        </div>
+      </button>
+    </li>
+  );
+};
+
+interface NavbarStyleCenteredProps {
+  navItems: NavItem[];
+  button?: ButtonConfig;
+  topBarButton?: ButtonConfig;
+  logoSrc?: string;
+  logoAlt?: string;
+  brandName?: string;
+  className?: string;
+  logoClassName?: string;
+  logoImageClassName?: string;
+}
+
+const NavbarStyleCentered = ({
+  navItems,
+  button,
+  topBarButton,
+  logoSrc,
+  logoAlt = "",
+  brandName = "Webild",
+  className = "",
+  logoClassName = "",
+  logoImageClassName = "",
+}: NavbarStyleCenteredProps) => {
+  const [isActive, setIsActive] = useState(false);
+  const theme = useTheme();
+
+  const getButtonConfigProps = () => {
+    if (theme.defaultButtonVariant === "hover-bubble") {
+      return { bgClassName: "w-full" };
+    }
+    if (theme.defaultButtonVariant === "icon-arrow") {
+      return { className: "justify-between" };
+    }
+    return {};
+  };
+
+  const handleToggle = useCallback(() => {
+    setIsActive((prev) => !prev);
+  }, []);
+
+  const handleClose = useCallback(() => {
+    setIsActive(false);
+  }, []);
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape" && isActive) {
+        setIsActive(false);
+      }
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isActive]);
+
+  return (
+    <nav
+      role="navigation"
+      aria-label="Main navigation"
+      data-navigation-status={isActive ? "active" : "not-active"}
+      className="fixed inset-0 z-[1000] pointer-events-none"
+    >
+      <div
+        className="centered-nav__overlay absolute inset-0 bg-foreground pointer-events-auto opacity-0 invisible transition-all duration-700 ease-[cubic-bezier(0.5,0.5,0,1)]"
+        onClick={handleClose}
+      />
+      <div className={cls("pointer-events-auto absolute top-6 left-1/2 -translate-x-1/2 w-content-width md:top-8 md:w-35 flex flex-col justify-start items-stretch rounded-theme-capped", className)} >
+        <div className="absolute! inset-0 card backdrop-blur-xs rounded-theme-capped" />
+        <div className="relative z-10 flex justify-between items-center py-3 px-6">
+          <Logo
+            brandName={brandName}
+            logoSrc={logoSrc}
+            logoAlt={logoAlt}
+            className={logoClassName}
+            imageClassName={logoImageClassName}
+            href="/"
+          />
+          <div className="flex items-center gap-3">
+            {topBarButton && (
+              <Button
+                {...getButtonProps(
+                  {
+                    ...topBarButton,
+                    props: { ...topBarButton.props }
+                  },
+                  0,
+                  theme.defaultButtonVariant,
+                  ""
+                )}
+              />
+            )}
+            <HamburgerButton
+              isActive={isActive}
+              onClick={handleToggle}
+              activeBarClassName="bg-foreground"
+              inactiveBarClassName="bg-foreground"
+              styled={!!topBarButton}
+            />
+          </div>
+        </div>
+        <div className="centered-nav__content relative overflow-hidden rounded-b-theme-capped grid transition-[grid-template-rows] duration-600 ease-[cubic-bezier(0.625,0.05,0,1)]">
+          <div className="centered-nav__inner flex flex-col justify-start items-center w-full relative overflow-hidden gap-6">
+            <div className="w-full px-6" >
+              <ul className="relative w-full card p-6 rounded-theme-capped flex flex-col gap-3 justify-start items-stretch m-0 list-none">
+                {navItems.map((item, index) => (
+                  <Fragment key={item.id}>
+                    <NavLink item={item} index={index} onClose={handleClose} />
+                    {index < navItems.length - 1 && <div className="centered-nav__separator h-px bg-accent/50" />}
+                  </Fragment>
+                ))}
+              </ul>
+            </div>
+            {button && (
+              <div className="w-full px-6 pb-6">
+                <Button
+                  {...getButtonProps(
+                    {
+                      ...button,
+                      onClick: () => {
+                        button.onClick?.();
+                        handleClose();
+                      },
+                      props: { ...button.props, ...getButtonConfigProps() }
+                    },
+                    0,
+                    theme.defaultButtonVariant,
+                    "w-full"
+                  )}
+                />
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </nav>
+  );
+};
+
+
+export default NavbarStyleCentered;
diff --git a/src/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen.css b/src/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen.css
new file mode 100644
index 0000000..176e7a6
--- /dev/null
+++ b/src/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen.css
@@ -0,0 +1,58 @@
+/* Tile clip-path animation */
+.navbar-fullscreen__tile {
+  clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
+  transition: clip-path 1s cubic-bezier(.9, 0, .1, 1);
+}
+
+[data-navigation-status="active"] .navbar-fullscreen__tile {
+  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
+}
+
+/* Link initial state and animation */
+.navbar-fullscreen__link {
+  transform: translateY(100%) rotate(5deg);
+  transition: transform 0.75s cubic-bezier(.7, 0, .3, 1);
+}
+
+/* Link staggered delays (closing) */
+.navbar-fullscreen__li:nth-child(1) .navbar-fullscreen__link { transition-delay: 0.2s; }
+.navbar-fullscreen__li:nth-child(2) .navbar-fullscreen__link { transition-delay: 0.15s; }
+.navbar-fullscreen__li:nth-child(3) .navbar-fullscreen__link { transition-delay: 0.1s; }
+.navbar-fullscreen__li:nth-child(4) .navbar-fullscreen__link { transition-delay: 0.05s; }
+.navbar-fullscreen__li:nth-child(5) .navbar-fullscreen__link { transition-delay: 0s; }
+
+/* Link animation (Navigation Open) */
+[data-navigation-status="active"] .navbar-fullscreen__link {
+  transform: translateY(0%) rotate(0.001deg);
+}
+
+/* Link staggered delays (opening) */
+[data-navigation-status="active"] .navbar-fullscreen__li:nth-child(1) .navbar-fullscreen__link { transition-delay: 0.3s; }
+[data-navigation-status="active"] .navbar-fullscreen__li:nth-child(2) .navbar-fullscreen__link { transition-delay: 0.35s; }
+[data-navigation-status="active"] .navbar-fullscreen__li:nth-child(3) .navbar-fullscreen__link { transition-delay: 0.4s; }
+[data-navigation-status="active"] .navbar-fullscreen__li:nth-child(4) .navbar-fullscreen__link { transition-delay: 0.45s; }
+[data-navigation-status="active"] .navbar-fullscreen__li:nth-child(5) .navbar-fullscreen__link { transition-delay: 0.5s; }
+
+/* Link text duplicate effect */
+.navbar-fullscreen__link-text {
+  text-shadow: 0 1.1em 0;
+  transition: transform 0.5s cubic-bezier(.7, 0, .3, 1);
+  transform: translateY(0%) rotate(0.001deg);
+}
+
+.navbar-fullscreen__link:hover .navbar-fullscreen__link-text {
+  transform: translateY(-100%) rotate(0.001deg);
+}
+
+/* Hover dim effect on siblings */
+.navbar-fullscreen__li {
+  transition: opacity 0.5s cubic-bezier(.7, 0, .3, 1);
+}
+
+.navbar-fullscreen__ul:has(.navbar-fullscreen__li:hover) .navbar-fullscreen__li {
+  opacity: 0.15;
+}
+
+.navbar-fullscreen__ul:has(.navbar-fullscreen__li:hover) .navbar-fullscreen__li:hover {
+  opacity: 1;
+}
diff --git a/src/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen.tsx b/src/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen.tsx
new file mode 100644
index 0000000..3128823
--- /dev/null
+++ b/src/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen.tsx
@@ -0,0 +1,165 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { ReactLenis, useLenis } from "lenis/react";
+import Logo from "../Logo";
+import HamburgerButton from "../HamburgerButton";
+import Button from "@/components/button/Button";
+import { NavItem } from "@/types/navigation";
+import { cls } from "@/lib/utils";
+import { getButtonProps } from "@/lib/buttonUtils";
+import { useButtonClick } from "@/components/button/useButtonClick";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { ButtonConfig } from "@/types/button";
+import "./NavbarStyleFullscreen.css";
+
+interface NavLinkProps {
+  item: NavItem;
+  onClose: () => void;
+}
+
+const NavLink = ({ item, onClose }: NavLinkProps) => {
+  const handleClick = useButtonClick(item.id, onClose);
+
+  return (
+    <button
+      type="button"
+      className="navbar-fullscreen__link text-background font-normal leading-[1.15] no-underline text-9xl bg-transparent border-none cursor-pointer"
+      onClick={handleClick}
+    >
+      <span className="navbar-fullscreen__link-text block relative">{item.name}</span>
+    </button>
+  );
+};
+
+interface NavbarStyleFullscreenProps {
+  navItems: NavItem[];
+  logoSrc?: string;
+  logoAlt?: string;
+  brandName?: string;
+  bottomLeftText?: string;
+  bottomRightText?: string;
+  topBarClassName?: string;
+  button?: ButtonConfig;
+  buttonClassName?: string;
+  buttonTextClassName?: string;
+  logoClassName?: string;
+  logoImageClassName?: string;
+}
+
+const NavbarStyleFullscreen = ({
+  navItems,
+  logoSrc,
+  logoAlt = "",
+  brandName = "Webild",
+  bottomLeftText = "Global Community",
+  bottomRightText = "hello@example.com",
+  topBarClassName = "",
+  button,
+  buttonClassName = "",
+  buttonTextClassName = "",
+  logoClassName = "",
+  logoImageClassName = "",
+}: NavbarStyleFullscreenProps) => {
+  const [isActive, setIsActive] = useState(false);
+  const theme = useTheme();
+  const lenis = useLenis();
+
+  const handleToggle = useCallback(() => {
+    setIsActive((prev) => !prev);
+  }, []);
+
+  const handleClose = useCallback(() => {
+    setIsActive(false);
+  }, []);
+
+  useEffect(() => {
+    if (lenis) {
+      if (isActive) {
+        lenis.stop();
+      } else {
+        lenis.start();
+      }
+    }
+  }, [isActive, lenis]);
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape" && isActive) {
+        setIsActive(false);
+      }
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isActive]);
+
+  return (
+    <nav
+      role="navigation"
+      aria-label="Main navigation"
+      data-navigation-status={isActive ? "active" : "not-active"}
+      className="fixed inset-0 z-[100] pointer-events-none"
+    >
+      <div className={cls(
+        "absolute z-1 w-content-width left-1/2 -translate-x-1/2 top-6 flex justify-between items-center pointer-events-auto",
+        topBarClassName
+      )}>
+        <Logo
+          brandName={brandName}
+          logoSrc={logoSrc}
+          logoAlt={logoAlt}
+          className={logoClassName}
+          imageClassName={logoImageClassName}
+          textClassName={`transition-colors duration-700 ease-[cubic-bezier(0.5,0.5,0,1)] ${isActive ? "text-background" : "text-foreground"}`}
+          href="/"
+        />
+        <div className="flex items-center gap-3">
+          {button && (
+            <Button
+              {...getButtonProps(
+                button,
+                0,
+                theme.defaultButtonVariant,
+                buttonClassName,
+                buttonTextClassName
+              )}
+            />
+          )}
+          <HamburgerButton
+              isActive={isActive}
+              onClick={handleToggle}
+              {...(button && {
+                activeBarClassName: "bg-foreground",
+                inactiveBarClassName: "bg-foreground",
+                styled: true
+              })}
+            />
+        </div>
+      </div>
+
+      <div
+        id="navigation-menu"
+        className="navbar-fullscreen__tile pointer-events-auto bg-foreground backdrop-blur absolute inset-0 flex flex-col justify-center items-center overflow-hidden"
+      >
+        <ReactLenis className="overflow-y-auto max-h-[70vh] mask-fade-y py-8">
+          <ul className="navbar-fullscreen__ul flex flex-col items-center m-0 p-0 list-none">
+            {navItems.map((item) => (
+              <li key={item.id} className="navbar-fullscreen__li flex justify-center items-center m-0 p-0 relative overflow-hidden">
+                <NavLink item={item} onClose={handleClose} />
+              </li>
+            ))}
+          </ul>
+        </ReactLenis>
+
+        <div className="absolute bottom-0 w-content-width left-1/2 -translate-x-1/2 flex justify-between items-center py-10">
+          <p className="text-background/50 mb-0 text-base relative">{bottomLeftText}</p>
+          <p className="text-background/50 mb-0 text-base relative">{bottomRightText}</p>
+        </div>
+      </div>
+    </nav>
+  );
+};
+
+
+export default NavbarStyleFullscreen;
diff --git a/src/components/navbar/expandingMenu/ExpandingMenu.tsx b/src/components/navbar/expandingMenu/ExpandingMenu.tsx
new file mode 100644
index 0000000..c9bbd5e
--- /dev/null
+++ b/src/components/navbar/expandingMenu/ExpandingMenu.tsx
@@ -0,0 +1,149 @@
+"use client";
+
+import { useCallback } from 'react';
+import { useResponsiveMenuWidth } from './useResponsiveMenuWidth';
+import { useButtonClick } from '@/components/button/useButtonClick';
+
+interface NavItem {
+    id: string;
+    name: string;
+}
+
+interface ExpandingMenuProps {
+    isOpen: boolean;
+    onToggle: () => void;
+    navItems: NavItem[];
+    isScrolled?: boolean;
+}
+
+const ExpandingMenu = ({
+    isOpen,
+    onToggle,
+    navItems,
+    isScrolled = false
+}: ExpandingMenuProps) => {
+    const { isMounted, menuWidth } = useResponsiveMenuWidth();
+
+    const handleNavClick = useCallback(() => {
+        onToggle();
+    }, [onToggle]);
+
+    return (
+        <div
+            className={`
+            rounded-theme-capped absolute top-[calc(var(--vw-0_75)-1px)] right-3
+            transition-[top] duration-500 ease-in-out
+            ${isScrolled ? '' : ''}
+            ${isOpen ? 'pointer-events-auto' : 'pointer-events-none'}
+        `}>
+            <div
+                aria-hidden="true"
+                className={`
+                    primary-button
+                    backdrop-blur-xs
+                    transition-all duration-700 ease-[cubic-bezier(0.5,0.5,0,1)]
+                    bg-foreground rounded-theme-capped absolute! top-0 right-0
+                    ${isOpen
+                        ? 'w-full h-full'
+                        : 'h-9 w-[var(--height-9)]'
+                    }
+                `}
+            />
+
+            <div className={`
+                relative p-6 flex flex-col gap-6
+                transition-all duration-500 ease-[cubic-bezier(0.5,0.5,0,1)]
+                origin-[100%_0]
+                ${isOpen
+                    ? 'scale-100 opacity-100 visible pointer-events-auto'
+                    : 'scale-[0.15] opacity-0 invisible pointer-events-none'
+                }
+            `}
+                style={{
+                    transition: 'all 0.5s cubic-bezier(0.5, 0.5, 0, 1), transform 0.7s cubic-bezier(0.5, 0.5, 0, 1)',
+                    width: isMounted ? menuWidth : 'var(--width-20)'
+                }}
+            >
+                <p className="text-xl text-primary-cta-text" aria-hidden="true">Menu</p>
+                <ul 
+                    role="menu"
+                    className="relative list-none flex flex-col gap-3 m-0 p-0"
+                >
+                    {navItems.map((item) => {
+                        const MenuButton = () => {
+                            const handleClick = useButtonClick(item.id, handleNavClick);
+
+                            return (
+                                <button
+                                    aria-label={`Navigate to ${item.name}`}
+                                    className={`
+                                        text-primary-cta-text flex justify-between items-center
+                                        no-underline bg-none border-none cursor-pointer w-full
+                                        font-inherit group
+                                    `}
+                                    onClick={handleClick}
+                                >
+                                    <span className="text-base">
+                                        {item.name}
+                                    </span>
+                                    <div className="bg-current rounded-theme-capped shrink-0 h-2 aspect-square" />
+                                </button>
+                            );
+                        };
+
+                        return (
+                            <li
+                                key={item.id}
+                                role="menuitem"
+                                className="m-0 p-0 list-none"
+                            >
+                                <MenuButton />
+                            </li>
+                        );
+                    })}
+                </ul>
+            </div>
+
+            <button
+                aria-label={isOpen ? 'Close menu' : 'Open menu'}
+                aria-expanded={isOpen}
+                aria-controls="navigation-menu"
+                className={`
+                    transition-transform duration-700 ease-[cubic-bezier(0.5,0.5,0,1)]
+                    pointer-events-auto cursor-pointer rounded-theme-capped
+                    flex justify-center items-center
+                    h-9 w-[var(--height-9)] aspect-square absolute top-0 right-0
+                    bg-transparent border-none
+                    ${isOpen
+                        ? '-translate-x-3 translate-y-3'
+                        : 'translate-x-0 translate-y-0'
+                    }
+                `}
+                onClick={onToggle}
+            >
+                <span 
+                    aria-hidden="true"
+                    className={`
+                    transition-transform duration-700 ease-[cubic-bezier(0.5,0.5,0,1)]
+                    bg-background w-[40%] h-0.25 absolute
+                    ${isOpen
+                        ? 'translate-y-0 rotate-45'
+                        : '-translate-y-1 hover:translate-y-1'
+                    }
+                `} />
+                <span 
+                    aria-hidden="true"
+                    className={`
+                    transition-transform duration-700 ease-[cubic-bezier(0.5,0.5,0,1)]
+                    bg-background w-[40%] h-0.25 absolute
+                    ${isOpen
+                        ? 'translate-y-0 -rotate-45'
+                        : 'translate-y-1 hover:-translate-y-1'
+                    }
+                `} />
+            </button>
+        </div>
+    );
+};
+
+export default ExpandingMenu;
\ No newline at end of file
diff --git a/src/components/navbar/expandingMenu/useResponsiveMenuWidth.ts b/src/components/navbar/expandingMenu/useResponsiveMenuWidth.ts
new file mode 100644
index 0000000..af2bfe2
--- /dev/null
+++ b/src/components/navbar/expandingMenu/useResponsiveMenuWidth.ts
@@ -0,0 +1,23 @@
+import { useState, useEffect } from 'react';
+
+export const useResponsiveMenuWidth = () => {
+    const [isMounted, setIsMounted] = useState(false);
+    const [menuWidth, setMenuWidth] = useState('var(--width-20)');
+
+    useEffect(() => {
+        setIsMounted(true);
+        const handleResize = () => {
+            setMenuWidth(
+                window.innerWidth >= 768 
+                    ? 'var(--width-20)' 
+                    : 'calc(var(--width-80) - var(--vw-0_75) * 2)'
+            );
+        };
+        
+        handleResize();
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
+
+    return { isMounted, menuWidth };
+};
\ No newline at end of file
diff --git a/src/components/navbar/mobileMenu/MobileMenu.tsx b/src/components/navbar/mobileMenu/MobileMenu.tsx
new file mode 100644
index 0000000..ee50e00
--- /dev/null
+++ b/src/components/navbar/mobileMenu/MobileMenu.tsx
@@ -0,0 +1,79 @@
+"use client";
+
+import { Fragment } from 'react';
+import { ArrowRight, Plus } from 'lucide-react';
+import { NavItem } from '@/types/navigation';
+import { useMenuAnimation } from './useMenuAnimation';
+import { useButtonClick } from '@/components/button/useButtonClick';
+
+interface MobileMenuProps {
+    menuOpen: boolean;
+    onMenuToggle: () => void;
+    navItems: NavItem[];
+    onNavClick: (id: string) => void;
+    children?: React.ReactNode;
+}
+
+const MobileMenu = ({
+    menuOpen,
+    onMenuToggle,
+    navItems,
+    onNavClick,
+    children
+}: MobileMenuProps) => {
+    const menuRef = useMenuAnimation(menuOpen);
+
+    return (
+        <div
+            id="mobile-menu"
+            className="md:hidden z-10 fixed top-3 left-3 right-3 h-fit rounded-theme-capped card p-6 flex flex-col gap-6  opacity-0"
+            style={{ width: 'calc(100vw - var(--vw-0_75) * 2)' }}
+            ref={menuRef}
+            role="navigation"
+            aria-label="Mobile navigation menu"
+        >
+            <div className="w-full flex justify-between items-center">
+                <p className="text-xl text-foreground">Menu</p>
+                <button 
+                    className="shrink-0 h-8 aspect-square rounded-theme bg-foreground flex items-center justify-center cursor-pointer"
+                    onClick={onMenuToggle}
+                    aria-label="Close menu"
+                >
+                    <Plus className="w-1/2 h-1/2 text-background rotate-45" strokeWidth={1.5} aria-hidden="true" />
+                </button>
+            </div>
+            <div className="flex flex-col gap-4">
+                {navItems.map((item, index) => {
+                    const NavButton = () => {
+                        const handleClick = useButtonClick(item.id, () => onNavClick(item.id));
+
+                        return (
+                            <button
+                                className="w-full h-fit flex justify-between items-center cursor-pointer"
+                                onClick={handleClick}
+                                aria-label={`Navigate to ${item.name}`}
+                            >
+                                <p className="text-base font-medium">{item.name}</p>
+                                <ArrowRight strokeWidth={1.5} className="h-[var(--text-base)] w-auto text-foreground" aria-hidden="true" />
+                            </button>
+                        );
+                    };
+
+                    return (
+                        <Fragment key={index}>
+                            <NavButton />
+                            {index < navItems.length - 1 && (
+                                <div className="w-full h-px bg-gradient-to-r from-transparent via-foreground/20 to-transparent" />
+                            )}
+                        </Fragment>
+                    );
+                })}
+            </div>
+            {children && (
+                <div className="flex gap-3 items-center">{children}</div>
+            )}
+        </div>
+    );
+};
+
+export default MobileMenu;
\ No newline at end of file
diff --git a/src/components/navbar/mobileMenu/useMenuAnimation.ts b/src/components/navbar/mobileMenu/useMenuAnimation.ts
new file mode 100644
index 0000000..c4bb3c1
--- /dev/null
+++ b/src/components/navbar/mobileMenu/useMenuAnimation.ts
@@ -0,0 +1,40 @@
+import { useRef, useEffect } from 'react';
+import { gsap } from 'gsap';
+
+export const useMenuAnimation = (menuOpen: boolean) => {
+    const menuRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        if (menuRef.current) {
+            if (menuOpen) {
+                gsap.to(menuRef.current, { 
+                    y: "0%", 
+                    opacity: 1,
+                    pointerEvents: "auto", 
+                    duration: 0.8, 
+                    ease: "power3.out" 
+                });
+            } else {
+                gsap.to(menuRef.current, { 
+                    y: "-135%", 
+                    opacity: 1,
+                    pointerEvents: "none", 
+                    duration: 0.8, 
+                    ease: "power3.inOut" 
+                });
+            }
+        }
+    }, [menuOpen]);
+
+    useEffect(() => {
+        if (menuRef.current) {
+            gsap.set(menuRef.current, { 
+                y: "-135%", 
+                opacity: 1, 
+                pointerEvents: "none" 
+            });
+        }
+    }, []);
+
+    return menuRef;
+};
\ No newline at end of file
diff --git a/src/components/sections/AnimationContainer.tsx b/src/components/sections/AnimationContainer.tsx
new file mode 100644
index 0000000..c8b7605
--- /dev/null
+++ b/src/components/sections/AnimationContainer.tsx
@@ -0,0 +1,45 @@
+"use client";
+import { useState, useEffect, useRef, ReactNode } from "react";
+
+interface AnimationContainerProps {
+    children: ReactNode;
+    className?: string;
+    animationDuration?: number;
+    animationType?: "full" | "fade";
+    style?: React.CSSProperties;
+}
+
+const AnimationContainer = ({
+    children,
+    className = "w-full h-fit flex flex-col gap-6",
+    animationDuration = 800,
+    animationType = "full",
+    style,
+}: AnimationContainerProps) => {
+    const animationClass =
+        animationType === "full"
+            ? "animation-container"
+            : "animation-container-fade";
+    const [activeClass, setActiveClass] = useState(animationClass);
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            setActiveClass("");
+        }, animationDuration);
+
+        return () => clearTimeout(timer);
+    }, [animationDuration]);
+
+    return (
+        <div
+            ref={containerRef}
+            className={`${className} ${activeClass}`.trim()}
+            style={style}
+        >
+            {children}
+        </div>
+    );
+};
+
+export default AnimationContainer;
diff --git a/src/components/sections/about/AboutMetric.tsx b/src/components/sections/about/AboutMetric.tsx
new file mode 100644
index 0000000..474e6cb
--- /dev/null
+++ b/src/components/sections/about/AboutMetric.tsx
@@ -0,0 +1,104 @@
+"use client";
+
+import TextAnimation from "@/components/text/TextAnimation";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import { useButtonAnimation } from "@/components/hooks/useButtonAnimation";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonAnimationType } from "@/types/button";
+
+interface Metric {
+    icon: LucideIcon;
+    label: string;
+    value: string;
+}
+
+interface AboutMetricProps {
+    title: string;
+    metrics: Metric[];
+    metricsAnimation?: ButtonAnimationType;
+    useInvertedBackground: boolean;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    titleClassName?: string;
+    metricsContainerClassName?: string;
+    metricCardClassName?: string;
+    metricIconClassName?: string;
+    metricLabelClassName?: string;
+    metricValueClassName?: string;
+}
+
+const AboutMetric = ({
+    title,
+    metrics,
+    metricsAnimation = "none",
+    useInvertedBackground = false,
+    ariaLabel = "About metrics section",
+    className = "",
+    containerClassName = "",
+    titleClassName = "",
+    metricsContainerClassName = "",
+    metricCardClassName = "",
+    metricIconClassName = "",
+    metricLabelClassName = "",
+    metricValueClassName = "",
+}: AboutMetricProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+    const { containerRef: metricsContainerRef } = useButtonAnimation({ animationType: metricsAnimation });
+
+    const gridColsMap = {
+        2: "md:grid-cols-2",
+        3: "md:grid-cols-3",
+        4: "md:grid-cols-4",
+    };
+    const gridCols = gridColsMap[metrics.length as keyof typeof gridColsMap] || "md:grid-cols-4";
+
+    return (
+        <section
+            aria-label={ariaLabel}
+            className={cls("relative py-20 w-full", useInvertedBackground && "bg-foreground", className)}
+        >
+            <div className={cls("w-content-width mx-auto flex flex-col gap-8", containerClassName)}>
+                <TextAnimation
+                    type={theme.defaultTextAnimation}
+                    text={title}
+                    variant="words-trigger"
+                    className={cls("text-2xl md:text-5xl font-medium leading-[1.175]", useInvertedBackground && "text-background", titleClassName)}
+                />
+
+                <div ref={metricsContainerRef} className={cls("grid grid-cols-1 gap-6", gridCols, metricsContainerClassName)}>
+                    {metrics.map((metric, index) => {
+                        const Icon = metric.icon;
+                        return (
+                            <div
+                                key={index}
+                                className={cls(
+                                    "h-fit card rounded-theme-capped px-6 py-8 md:py-10 flex flex-col items-center justify-center gap-3",
+                                    metricCardClassName
+                                )}
+                            >
+                                <div className="relative z-1 w-full flex items-center justify-center gap-2">
+                                    <div className={cls("h-8 primary-button aspect-square rounded-theme flex items-center justify-center", metricIconClassName)}>
+                                        <Icon className="h-4/10 text-primary-cta-text" strokeWidth={1.5} />
+                                    </div>
+                                    <h3 className={cls("text-xl truncate", shouldUseLightText && "text-background", metricLabelClassName)}>
+                                        {metric.label}
+                                    </h3>
+                                </div>
+                                <div className="relative z-1 w-full flex items-center justify-center">
+                                    <h4 className={cls("text-6xl font-medium truncate", shouldUseLightText && "text-background", metricValueClassName)}>
+                                        {metric.value}
+                                    </h4>
+                                </div>
+                            </div>
+                        );
+                    })}
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default AboutMetric;
\ No newline at end of file
diff --git a/src/components/sections/about/InlineImageSplitTextAbout.tsx b/src/components/sections/about/InlineImageSplitTextAbout.tsx
new file mode 100644
index 0000000..4ac9750
--- /dev/null
+++ b/src/components/sections/about/InlineImageSplitTextAbout.tsx
@@ -0,0 +1,123 @@
+"use client";
+
+import { Fragment } from "react";
+import Image from "next/image";
+import Button from "@/components/button/Button";
+import { cls } from "@/lib/utils";
+import { getButtonProps } from "@/lib/buttonUtils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import { useButtonAnimation } from "@/components/hooks/useButtonAnimation";
+import type { ButtonConfig, ButtonAnimationType } from "@/types/button";
+import type { InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type HeadingSegment =
+    | { type: "text"; content: string }
+    | { type: "image"; src: string; alt?: string };
+
+interface InlineImageSplitTextAboutProps {
+    heading: HeadingSegment[];
+    buttons?: ButtonConfig[];
+    buttonAnimation?: ButtonAnimationType;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    headingClassName?: string;
+    imageWrapperClassName?: string;
+    imageClassName?: string;
+    buttonContainerClassName?: string;
+    buttonClassName?: string;
+    buttonTextClassName?: string;
+}
+
+const InlineImageSplitTextAbout = ({
+    heading,
+    buttons = [],
+    buttonAnimation = "none",
+    useInvertedBackground = false,
+    ariaLabel = "About section",
+    className = "",
+    containerClassName = "",
+    headingClassName = "",
+    imageWrapperClassName = "",
+    imageClassName = "",
+    buttonContainerClassName = "",
+    buttonClassName = "",
+    buttonTextClassName = "",
+}: InlineImageSplitTextAboutProps) => {
+    const theme = useTheme();
+    const { containerRef: buttonContainerRef } = useButtonAnimation({ animationType: buttonAnimation });
+
+    return (
+        <section
+            aria-label={ariaLabel}
+            className={cls("relative py-20 w-full", useInvertedBackground && "bg-foreground", className)}
+        >
+            <div
+                className={cls(
+                    "w-content-width mx-auto flex flex-col gap-6 items-center",
+                    containerClassName
+                )}
+            >
+                <h2
+                    className={cls(
+                        "text-4xl md:text-5xl font-medium text-center leading-[1.15] text-balance",
+                        useInvertedBackground && "text-background",
+                        headingClassName
+                    )}
+                >
+                    {heading.map((segment, index) => {
+                        const imageIndex = heading
+                            .slice(0, index + 1)
+                            .filter(s => s.type === "image").length - 1;
+
+                        const element = segment.type === "text" ? (
+                            <span key={index}>{segment.content}</span>
+                        ) : (
+                            <span
+                                key={index}
+                                className={cls(
+                                    "inline-block relative primary-button -mt-[0.2em] h-[1.1em] w-auto aspect-square align-middle mx-1 p-0.5 rounded-theme",
+                                    imageIndex % 2 === 0 ? "-rotate-12" : "rotate-12",
+                                    imageWrapperClassName
+                                )}
+                            >
+                                <div className="relative w-full h-full">
+                                    <Image
+                                        src={segment.src}
+                                        alt={segment.alt || ""}
+                                        width={24}
+                                        height={24}
+                                        className={cls(
+                                            "absolute inset-0 m-auto h-full w-full rounded-theme",
+                                            imageClassName
+                                        )}
+                                        unoptimized={segment.src.startsWith("http") || segment.src.startsWith("//")}
+                                        aria-hidden={!segment.alt || segment.alt === ""}
+                                    />
+                                </div>
+                            </span>
+                        );
+
+                        return (
+                            <Fragment key={index}>
+                                {index > 0 && " "}
+                                {element}
+                            </Fragment>
+                        );
+                    })}
+                </h2>
+
+                {buttons && buttons.length > 0 && (
+                    <div ref={buttonContainerRef} className={cls("flex flex-wrap gap-4 max-md:justify-center", buttonContainerClassName)}>
+                        {buttons.slice(0, 2).map((button, index) => (
+                            <Button key={index} {...getButtonProps(button, index, theme.defaultButtonVariant, cls("", buttonClassName), cls("text-base", buttonTextClassName))} />
+                        ))}
+                    </div>
+                )}
+            </div>
+        </section>
+    );
+};
+
+export default InlineImageSplitTextAbout;
\ No newline at end of file
diff --git a/src/components/sections/about/MediaAbout.tsx b/src/components/sections/about/MediaAbout.tsx
new file mode 100644
index 0000000..d374287
--- /dev/null
+++ b/src/components/sections/about/MediaAbout.tsx
@@ -0,0 +1,102 @@
+"use client";
+
+
+import MediaContent from "@/components/shared/MediaContent";
+import TextBox from "@/components/Textbox";
+import { cls } from "@/lib/utils";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, ButtonAnimationType } from "@/types/button";
+
+interface MediaAboutProps {
+    title: string;
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    tagAnimation?: ButtonAnimationType;
+    buttons?: ButtonConfig[];
+    buttonAnimation?: ButtonAnimationType;
+    imageSrc?: string;
+    videoSrc?: string;
+    imageAlt?: string;
+    videoAriaLabel?: string;
+    useInvertedBackground: boolean;
+    ariaLabel?: string;
+    className?: string;
+    textBoxClassName?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
+    tagClassName?: string;
+    buttonContainerClassName?: string;
+    buttonClassName?: string;
+    buttonTextClassName?: string;
+    mediaWrapperClassName?: string;
+    mediaClassName?: string;
+}
+
+const MediaAbout = ({
+    title,
+    description,
+    tag,
+    tagIcon,
+    tagAnimation = "opacity",
+    buttons = [],
+    buttonAnimation = "slide-up",
+    imageSrc,
+    videoSrc,
+    imageAlt = "",
+    videoAriaLabel,
+    useInvertedBackground = false,
+    ariaLabel = "About section",
+    className = "",
+    textBoxClassName = "",
+    titleClassName = "",
+    descriptionClassName = "",
+    tagClassName = "",
+    buttonContainerClassName = "",
+    buttonClassName = "",
+    buttonTextClassName = "",
+    mediaWrapperClassName = "",
+    mediaClassName = "",
+}: MediaAboutProps) => {
+
+    return (
+        <section
+            aria-label={ariaLabel}
+            className={cls("relative py-20 w-full", useInvertedBackground && "bg-foreground", className)}
+        >
+            <div className={cls("relative w-content-width mx-auto rounded-theme-capped overflow-hidden flex items-center justify-center py-8 md:py-12", mediaWrapperClassName)}>
+                <div className="absolute inset-0">
+                    <MediaContent
+                        imageSrc={imageSrc}
+                        videoSrc={videoSrc}
+                        imageAlt={imageAlt}
+                        videoAriaLabel={videoAriaLabel}
+                        imageClassName={cls("w-full h-full object-cover", mediaClassName)}
+                    />
+                    <div className="absolute inset-0 bg-background/40 backdrop-blur-xs pointer-events-none select-none" />
+                </div>
+                <div className="relative z-10 w-content-width min-h-100 md:min-h-120 px-5 py-10 md:w-45 mx-auto flex items-center justify-center">
+                    <TextBox
+                        title={title}
+                        description={description}
+                        tag={tag}
+                        tagIcon={tagIcon}
+                        tagAnimation={tagAnimation}
+                        buttons={buttons}
+                        buttonAnimation={buttonAnimation}
+                        className={cls("flex flex-col gap-3 md:gap-1", textBoxClassName)}
+                        titleClassName={cls("text-6xl font-medium text-balance", titleClassName)}
+                        descriptionClassName={cls("text-base md:text-lg leading-[1.2]", descriptionClassName)}
+                        tagClassName={cls("px-3 py-1 text-sm rounded-theme card text-foreground inline-flex items-center gap-2 mb-3", tagClassName)}
+                        buttonContainerClassName={cls("flex flex-wrap gap-4 max-md:justify-center mt-3", buttonContainerClassName)}
+                        buttonClassName={buttonClassName}
+                        buttonTextClassName={buttonTextClassName}
+                        center={true}
+                    />
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default MediaAbout;
diff --git a/src/components/sections/about/MetricSplitMediaAbout.tsx b/src/components/sections/about/MetricSplitMediaAbout.tsx
new file mode 100644
index 0000000..817486d
--- /dev/null
+++ b/src/components/sections/about/MetricSplitMediaAbout.tsx
@@ -0,0 +1,170 @@
+"use client";
+
+import TextBox from "@/components/Textbox";
+import MediaContent from "@/components/shared/MediaContent";
+import MediaBadge, { type MediaBadgeProps } from "@/components/shared/MediaBadge";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import { useButtonAnimation } from "@/components/hooks/useButtonAnimation";
+import type { LucideIcon } from "lucide-react";
+import type { InvertedBackground } from "@/providers/themeProvider/config/constants";
+import type { ButtonAnimationType } from "@/types/button";
+
+interface Metric {
+  value: string;
+  title: string;
+}
+
+interface MetricSplitMediaAboutProps {
+  title: string;
+  description: string;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  tagAnimation?: ButtonAnimationType;
+  metrics: Metric[];
+  imageSrc?: string;
+  videoSrc?: string;
+  imageAlt?: string;
+  videoAriaLabel?: string;
+  mediaBadge?: MediaBadgeProps;
+  mediaAnimation?: ButtonAnimationType;
+  metricsAnimation?: ButtonAnimationType;
+  useInvertedBackground: InvertedBackground;
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  gridClassName?: string;
+  leftColumnClassName?: string;
+  rightColumnClassName?: string;
+  textBoxClassName?: string;
+  titleClassName?: string;
+  descriptionClassName?: string;
+  tagClassName?: string;
+  metricsContainerClassName?: string;
+  metricCardClassName?: string;
+  metricValueClassName?: string;
+  metricTitleClassName?: string;
+  mediaWrapperClassName?: string;
+  imageClassName?: string;
+}
+
+const MetricSplitMediaAbout = ({
+  title,
+  description,
+  tag,
+  tagIcon,
+  tagAnimation = "opacity",
+  metrics,
+  imageSrc,
+  videoSrc,
+  imageAlt = "",
+  videoAriaLabel = "About section video",
+  mediaBadge,
+  mediaAnimation = "none",
+  metricsAnimation = "none",
+  useInvertedBackground = false,
+  ariaLabel = "About section",
+  className = "",
+  containerClassName = "",
+  gridClassName = "",
+  leftColumnClassName = "",
+  rightColumnClassName = "",
+  textBoxClassName = "",
+  titleClassName = "",
+  descriptionClassName = "",
+  tagClassName = "",
+  metricsContainerClassName = "",
+  metricCardClassName = "",
+  metricValueClassName = "",
+  metricTitleClassName = "",
+  mediaWrapperClassName = "",
+  imageClassName = "",
+}: MetricSplitMediaAboutProps) => {
+  const theme = useTheme();
+  const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+  const { containerRef: mediaContainerRef } = useButtonAnimation({ animationType: mediaAnimation });
+  const { containerRef: metricsContainerRef } = useButtonAnimation({ animationType: metricsAnimation });
+
+  return (
+    <section
+      aria-label={ariaLabel}
+      className={cls(
+        "relative py-20 w-full",
+        useInvertedBackground && "bg-foreground",
+        className
+      )}
+    >
+      <div className={cls("w-content-width mx-auto", containerClassName)}>
+        <div className={cls("grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-10", gridClassName)}>
+          <div className={cls("flex flex-col gap-6 md:gap-10", leftColumnClassName)}>
+            <TextBox
+              title={title}
+              description={description}
+              tag={tag}
+              tagIcon={tagIcon}
+              tagAnimation={tagAnimation}
+              useInvertedBackground={useInvertedBackground}
+              className={cls("gap-3 md:gap-3", textBoxClassName)}
+              titleClassName={cls("text-6xl font-medium text-balance", titleClassName)}
+              descriptionClassName={cls("text-lg leading-tight text-balance", descriptionClassName)}
+              tagClassName={cls("mb-1", tagClassName)}
+            />
+            {metrics && metrics.length > 0 && (
+              <div ref={metricsContainerRef} className={cls(
+                "grid gap-6 md:gap-4",
+                metrics.length === 1 ? "grid-cols-1" : "grid-cols-1 md:grid-cols-2",
+                metricsContainerClassName
+              )}>
+                {metrics.slice(0, 2).map((metric, index) => (
+                  <div
+                    key={index}
+                    className={cls(
+                      "card rounded-theme-capped p-6 flex flex-col gap-8 md:gap-16",
+                      metricCardClassName
+                    )}
+                  >
+                    <span
+                      className={cls(
+                        "text-6xl font-medium truncate",
+                        shouldUseLightText ? "text-background" : "text-foreground",
+                        metricValueClassName
+                      )}
+                    >
+                      {metric.value}
+                    </span>
+                    <h3
+                      className={cls(
+                        "text-lg",
+                        shouldUseLightText ? "text-background" : "text-foreground",
+                        metricTitleClassName
+                      )}
+                    >
+                      {metric.title}
+                    </h3>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+          <div className={cls("relative aspect-square md:aspect-auto md:h-0 md:min-h-full", mediaBadge ? "overflow-visible" : "overflow-hidden", rightColumnClassName)}>
+            <div ref={mediaContainerRef} className={cls(
+              "absolute inset-0 w-full h-full overflow-hidden card rounded-theme-capped",
+              mediaWrapperClassName
+            )}>
+              <MediaContent
+                imageSrc={imageSrc}
+                videoSrc={videoSrc}
+                imageAlt={imageAlt}
+                videoAriaLabel={videoAriaLabel}
+                imageClassName={cls("w-full h-full object-cover", imageClassName)}
+              />
+            </div>
+            {mediaBadge && <MediaBadge {...mediaBadge} />}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default MetricSplitMediaAbout;
diff --git a/src/components/sections/about/SplitAbout.tsx b/src/components/sections/about/SplitAbout.tsx
new file mode 100644
index 0000000..6ff0c9a
--- /dev/null
+++ b/src/components/sections/about/SplitAbout.tsx
@@ -0,0 +1,184 @@
+"use client";
+
+import { Fragment } from "react";
+import CardStackTextBox from "@/components/cardStack/CardStackTextBox";
+import MediaContent from "@/components/shared/MediaContent";
+import MediaBadge, { type MediaBadgeProps } from "@/components/shared/MediaBadge";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import { useButtonAnimation } from "@/components/hooks/useButtonAnimation";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig } from "@/types/button";
+import type { TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+interface BulletPoint {
+  title: string;
+  description: string;
+  icon?: LucideIcon;
+}
+
+interface SplitAboutProps {
+  title: string;
+  titleSegments?: TitleSegment[];
+  description: string;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  tagAnimation?: ButtonAnimationType;
+  buttons?: ButtonConfig[];
+  buttonAnimation?: ButtonAnimationType;
+  bulletPoints: BulletPoint[];
+  imageSrc?: string;
+  videoSrc?: string;
+  imageAlt?: string;
+  videoAriaLabel?: string;
+  mediaBadge?: MediaBadgeProps;
+  ariaLabel?: string;
+  imagePosition?: "left" | "right";
+  mediaAnimation?: ButtonAnimationType;
+  textboxLayout: TextboxLayout;
+  useInvertedBackground: InvertedBackground;
+  className?: string;
+  containerClassName?: string;
+  textBoxClassName?: string;
+  titleClassName?: string;
+  titleImageWrapperClassName?: string;
+  titleImageClassName?: string;
+  descriptionClassName?: string;
+  tagClassName?: string;
+  buttonContainerClassName?: string;
+  buttonClassName?: string;
+  buttonTextClassName?: string;
+  contentClassName?: string;
+  bulletPointClassName?: string;
+  bulletTitleClassName?: string;
+  bulletDescriptionClassName?: string;
+  mediaWrapperClassName?: string;
+  imageClassName?: string;
+}
+
+const SplitAbout = ({
+  title,
+  titleSegments,
+  description,
+  tag,
+  tagIcon,
+  tagAnimation = "opacity",
+  buttons = [],
+  buttonAnimation = "slide-up",
+  bulletPoints,
+  imageSrc,
+  videoSrc,
+  imageAlt = "",
+  videoAriaLabel = "About section video",
+  mediaBadge,
+  ariaLabel = "About section",
+  imagePosition = "right",
+  mediaAnimation = "none",
+  textboxLayout,
+  useInvertedBackground = false,
+  className = "",
+  containerClassName = "",
+  textBoxClassName = "",
+  titleClassName = "",
+  titleImageWrapperClassName = "",
+  titleImageClassName = "",
+  descriptionClassName = "",
+  tagClassName = "",
+  buttonContainerClassName = "",
+  buttonClassName = "",
+  buttonTextClassName = "",
+  contentClassName = "",
+  bulletPointClassName = "",
+  bulletTitleClassName = "",
+  bulletDescriptionClassName = "",
+  mediaWrapperClassName = "",
+  imageClassName = "",
+}: SplitAboutProps) => {
+  const theme = useTheme();
+  const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+  const { containerRef: mediaContainerRef } = useButtonAnimation({ animationType: mediaAnimation });
+  const { containerRef: bulletPointsContainerRef } = useButtonAnimation({ animationType: mediaAnimation });
+
+  const mediaContent = (
+    <div className={cls("w-full md:w-6/10 2xl:w-7/10 rounded-theme-capped card md:relative p-4", mediaBadge ? "overflow-visible" : "overflow-hidden", mediaWrapperClassName)}>
+      <div ref={mediaContainerRef} className="md:relative w-full md:h-full">
+        <MediaContent
+          imageSrc={imageSrc}
+          videoSrc={videoSrc}
+          imageAlt={imageAlt}
+          videoAriaLabel={videoAriaLabel}
+          imageClassName={cls("z-1 w-full h-auto object-cover rounded-theme-capped md:absolute md:inset-0 md:h-full", imageClassName)}
+        />
+      </div>
+      {mediaBadge && <MediaBadge {...mediaBadge} />}
+    </div>
+  );
+
+  return (
+    <section
+      aria-label={ariaLabel}
+      className={cls("relative py-20 w-full", useInvertedBackground && "bg-foreground", className)}
+    >
+      <div className={cls("w-content-width mx-auto flex flex-col gap-8", containerClassName)}>
+        <CardStackTextBox
+          title={title}
+          titleSegments={titleSegments}
+          description={description}
+          tag={tag}
+          tagIcon={tagIcon}
+          tagAnimation={tagAnimation}
+          buttons={buttons}
+          buttonAnimation={buttonAnimation}
+          textboxLayout={textboxLayout}
+          useInvertedBackground={useInvertedBackground}
+          textBoxClassName={textBoxClassName}
+          titleClassName={titleClassName}
+          titleImageWrapperClassName={titleImageWrapperClassName}
+          titleImageClassName={titleImageClassName}
+          descriptionClassName={descriptionClassName}
+          tagClassName={tagClassName}
+          buttonContainerClassName={buttonContainerClassName}
+          buttonClassName={buttonClassName}
+          buttonTextClassName={buttonTextClassName}
+        />
+
+        <div className={cls("flex flex-col md:flex-row gap-6 md:items-stretch")}>
+          {imagePosition === "left" && mediaContent}
+
+          <div ref={bulletPointsContainerRef} className={cls("w-full md:w-4/10 2xl:w-3/10 rounded-theme-capped card p-6 flex flex-col gap-6 justify-center", contentClassName)}>
+            {bulletPoints.map((point, index) => {
+              const Icon = point.icon;
+              return (
+                <Fragment key={index}>
+                  <div className={cls("relative z-1 flex flex-col gap-2", bulletPointClassName)}>
+                    {Icon && (
+                      <div className="h-10 w-fit aspect-square rounded-theme primary-button flex items-center justify-center flex-shrink-0 mb-1">
+                        <Icon className="h-[40%] w-[40%] text-primary-cta-text" strokeWidth={1.5} />
+                      </div>
+                    )}
+                    <div className="flex flex-col gap-0">
+                      <h3 className={cls("text-xl font-medium", shouldUseLightText && "text-background", bulletTitleClassName)}>
+                        {point.title}
+                      </h3>
+                      <p className={cls("text-base leading-[1.4]", shouldUseLightText ? "text-background" : "text-foreground", bulletDescriptionClassName)}>
+                        {point.description}
+                      </p>
+                    </div>
+                  </div>
+                  {index < bulletPoints.length - 1 && (
+                    <div className="relative z-1 w-full border-b border-accent/40" />
+                  )}
+                </Fragment>
+              );
+            })}
+          </div>
+
+          {imagePosition === "right" && mediaContent}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default SplitAbout;
diff --git a/src/components/sections/about/TestimonialAboutCard.tsx b/src/components/sections/about/TestimonialAboutCard.tsx
new file mode 100644
index 0000000..09a15d9
--- /dev/null
+++ b/src/components/sections/about/TestimonialAboutCard.tsx
@@ -0,0 +1,143 @@
+"use client";
+
+import MediaContent from "@/components/shared/MediaContent";
+import Tag from "@/components/shared/Tag";
+import TextAnimation from "@/components/text/TextAnimation";
+import { cls } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import { useButtonAnimation } from "@/components/hooks/useButtonAnimation";
+import type { LucideIcon } from "lucide-react";
+import type { InvertedBackground } from "@/providers/themeProvider/config/constants";
+import type { ButtonAnimationType } from "@/types/button";
+import type { AnimationType } from "@/components/text/types";
+
+type MediaProps =
+    | {
+        imageSrc: string;
+        imageAlt?: string;
+        videoSrc?: never;
+        videoAriaLabel?: never;
+    }
+    | {
+        videoSrc: string;
+        videoAriaLabel?: string;
+        imageSrc?: never;
+        imageAlt?: never;
+    };
+
+type TestimonialAboutCardProps = MediaProps & {
+    tag: string;
+    tagIcon?: LucideIcon;
+    tagAnimation?: ButtonAnimationType;
+    title: string;
+    description: string;
+    subdescription: string;
+    icon: LucideIcon;
+    mediaAnimation?: ButtonAnimationType;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    cardClassName?: string;
+    contentClassName?: string;
+    tagClassName?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
+    subdescriptionClassName?: string;
+    footerClassName?: string;
+    iconBoxClassName?: string;
+    iconClassName?: string;
+    mediaWrapperClassName?: string;
+    mediaClassName?: string;
+};
+
+const TestimonialAboutCard = ({
+    tag,
+    tagIcon,
+    tagAnimation = "none",
+    title,
+    description,
+    subdescription,
+    icon: Icon,
+    mediaAnimation = "none",
+    imageSrc,
+    videoSrc,
+    imageAlt = "",
+    videoAriaLabel = "Testimonial video",
+    useInvertedBackground = false,
+    ariaLabel = "Testimonial section",
+    className = "",
+    containerClassName = "",
+    cardClassName = "",
+    contentClassName = "",
+    tagClassName = "",
+    titleClassName = "",
+    descriptionClassName = "",
+    subdescriptionClassName = "",
+    footerClassName = "",
+    iconBoxClassName = "",
+    iconClassName = "",
+    mediaWrapperClassName = "",
+    mediaClassName = "",
+}: TestimonialAboutCardProps) => {
+    const theme = useTheme();
+    const { containerRef: tagContainerRef } = useButtonAnimation({ animationType: tagAnimation });
+    const { containerRef: mediaContainerRef } = useButtonAnimation({ animationType: mediaAnimation });
+
+    return (
+        <section
+            aria-label={ariaLabel}
+            className={cls("relative py-20 w-full", useInvertedBackground && "bg-foreground", className)}
+        >
+            <div className={cls("w-content-width mx-auto grid grid-cols-1 md:grid-cols-5 gap-6", containerClassName)}>
+                <div className={cls("relative md:col-span-3 card rounded-theme-capped p-8 md:px-12 md:py-20", cardClassName)}>
+                    <div className={cls(
+                        "absolute! -top-7 -left-7 md:-top-8 md:-left-8 primary-button rounded-theme-capped h-14 md:h-16 w-auto aspect-square flex items-center justify-center",
+                        iconBoxClassName
+                    )}>
+                        <Icon className={cls("h-5/10 text-primary-cta-text", iconClassName)} strokeWidth={1.5} />
+                    </div>
+
+                    <div className={cls("relative h-full flex flex-col justify-center gap-4 md:gap-6 py-8 md:py-4", contentClassName)}>
+                        <div ref={tagContainerRef}>
+                            <Tag
+                                text={tag}
+                                icon={tagIcon}
+                                className={cls("mb-1", tagClassName)}
+                            />
+                        </div>
+
+                        <TextAnimation
+                            type={theme.defaultTextAnimation as AnimationType}
+                            text={title}
+                            variant="trigger"
+                            className={cls("text-3xl md:text-4xl font-medium text-foreground leading-tight", titleClassName)}
+                        />
+
+                        <div className={cls("flex items-center gap-2", footerClassName)}>
+                            <span className={cls("text-base text-foreground", descriptionClassName)}>
+                                {description}
+                            </span>
+                            <span className="text-accent">•</span>
+                            <span className={cls("text-base text-foreground/75", subdescriptionClassName)}>
+                                {subdescription}
+                            </span>
+                        </div>
+                    </div>
+                </div>
+
+                <div ref={mediaContainerRef} className={cls("md:col-span-2 card aspect-square md:aspect-auto md:h-full rounded-theme-capped overflow-hidden", mediaWrapperClassName)}>
+                    <MediaContent
+                        imageSrc={imageSrc}
+                        videoSrc={videoSrc}
+                        imageAlt={imageAlt}
+                        videoAriaLabel={videoAriaLabel}
+                        imageClassName={cls("w-full h-full object-cover", mediaClassName)}
+                    />
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default TestimonialAboutCard;
diff --git a/src/components/sections/about/TextAbout.tsx b/src/components/sections/about/TextAbout.tsx
new file mode 100644
index 0000000..dccb105
--- /dev/null
+++ b/src/components/sections/about/TextAbout.tsx
@@ -0,0 +1,80 @@
+"use client";
+
+import TextAnimation from "@/components/text/TextAnimation";
+import Tag from "@/components/shared/Tag";
+import Button from "@/components/button/Button";
+import { cls } from "@/lib/utils";
+import { getButtonProps } from "@/lib/buttonUtils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import { useButtonAnimation } from "@/components/hooks/useButtonAnimation";
+import type { ButtonConfig, ButtonAnimationType } from "@/types/button";
+import type { LucideIcon } from "lucide-react";
+
+interface TextAboutProps {
+  tag?: string;
+  tagIcon?: LucideIcon;
+  tagAnimation?: ButtonAnimationType;
+  title: string;
+  buttons?: ButtonConfig[];
+  buttonAnimation?: ButtonAnimationType;
+  useInvertedBackground: boolean;
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  titleClassName?: string;
+  buttonContainerClassName?: string;
+  buttonClassName?: string;
+  buttonTextClassName?: string;
+}
+
+const TextAbout = ({
+  tag,
+  tagIcon,
+  tagAnimation = "none",
+  title,
+  buttons = [],
+  buttonAnimation = "none",
+  useInvertedBackground = false,
+  ariaLabel = "About section",
+  className = "",
+  containerClassName = "",
+  titleClassName = "",
+  buttonContainerClassName = "",
+  buttonClassName = "",
+  buttonTextClassName = "",
+}: TextAboutProps) => {
+  const theme = useTheme();
+  const { containerRef: tagContainerRef } = useButtonAnimation({ animationType: tagAnimation });
+  const { containerRef: buttonContainerRef } = useButtonAnimation({ animationType: buttonAnimation });
+
+  return (
+    <section
+      aria-label={ariaLabel}
+      className={cls("relative py-20 w-full", useInvertedBackground && "bg-foreground", className)}
+    >
+      <div className={cls("w-content-width mx-auto flex flex-col gap-6 items-center", containerClassName)}>
+        {tag && (
+          <div ref={tagContainerRef}>
+            <Tag text={tag} icon={tagIcon} useInvertedBackground={useInvertedBackground} />
+          </div>
+        )}
+        <TextAnimation
+          type={theme.defaultTextAnimation}
+          text={title}
+          variant="words-trigger"
+          className={cls("text-2xl md:text-5xl font-medium text-center leading-[1.175]", useInvertedBackground && "text-background", titleClassName)}
+        />
+
+        {buttons && buttons.length > 0 && (
+          <div ref={buttonContainerRef} className={cls("flex flex-wrap gap-4 max-md:justify-center", tag && "mt-2", buttonContainerClassName)}>
+            {buttons.slice(0, 2).map((button, index) => (
+              <Button key={index} {...getButtonProps(button, index, theme.defaultButtonVariant, cls("", buttonClassName), cls("text-base", buttonTextClassName))} />
+            ))}
+          </div>
+        )}
+      </div>
+    </section>
+  );
+};
+
+export default TextAbout;
diff --git a/src/components/sections/about/TextSplitAbout.tsx b/src/components/sections/about/TextSplitAbout.tsx
new file mode 100644
index 0000000..9009b8b
--- /dev/null
+++ b/src/components/sections/about/TextSplitAbout.tsx
@@ -0,0 +1,89 @@
+"use client";
+
+import TextAnimation from "@/components/text/TextAnimation";
+import Button from "@/components/button/Button";
+import { cls } from "@/lib/utils";
+import { getButtonProps } from "@/lib/buttonUtils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import { useButtonAnimation } from "@/components/hooks/useButtonAnimation";
+import type { ButtonConfig, ButtonAnimationType } from "@/types/button";
+
+interface TextSplitAboutProps {
+  title: string;
+  description: string[];
+  buttons?: ButtonConfig[];
+  buttonAnimation?: ButtonAnimationType;
+  showBorder?: boolean;
+  useInvertedBackground: boolean;
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  titleClassName?: string;
+  descriptionClassName?: string;
+  buttonContainerClassName?: string;
+  buttonClassName?: string;
+  buttonTextClassName?: string;
+}
+
+const TextSplitAbout = ({
+  title,
+  description,
+  buttons = [],
+  buttonAnimation = "none",
+  showBorder = false,
+  useInvertedBackground = false,
+  ariaLabel = "About section",
+  className = "",
+  containerClassName = "",
+  titleClassName = "",
+  descriptionClassName = "",
+  buttonContainerClassName = "",
+  buttonClassName = "",
+  buttonTextClassName = "",
+}: TextSplitAboutProps) => {
+  const theme = useTheme();
+  const { containerRef: buttonContainerRef } = useButtonAnimation({ animationType: buttonAnimation });
+
+  return (
+    <section
+      aria-label={ariaLabel}
+      className={cls("relative py-20 w-full", useInvertedBackground && "bg-foreground", className)}
+    >
+      <div className={cls("w-content-width mx-auto flex flex-col gap-30", containerClassName)}>
+        <div className="flex flex-col md:flex-row gap-3 md:gap-15">
+          <div className="w-full md:w-1/2">
+            <TextAnimation
+              type={theme.defaultTextAnimation}
+              text={title}
+              variant="trigger"
+              className={cls("text-7xl font-medium", useInvertedBackground && "text-background", titleClassName)}
+            />
+          </div>
+
+          <div className="w-full md:w-1/2 flex flex-col gap-6">
+            {description.map((desc, index) => (
+              <TextAnimation
+                key={index}
+                type={theme.defaultTextAnimation}
+                text={desc}
+                variant="words-trigger"
+                className={cls("text-base md:text-2xl leading-[1.3]", useInvertedBackground ? "text-background/75" : "text-foreground/75", descriptionClassName)}
+              />
+            ))}
+
+            {buttons && buttons.length > 0 && (
+              <div ref={buttonContainerRef} className={cls("flex flex-wrap gap-4 max-md:justify-center", buttonContainerClassName)}>
+                {buttons.slice(0, 2).map((button, index) => (
+                  <Button key={index} {...getButtonProps(button, index, theme.defaultButtonVariant, cls("px-8", buttonClassName), cls("text-base", buttonTextClassName))} />
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+        {showBorder && <div className="w-full border-b border-foreground/10" />}
+      </div>
+    </section>
+  );
+};
+
+export default TextSplitAbout;
diff --git a/src/components/sections/about/index.ts b/src/components/sections/about/index.ts
new file mode 100644
index 0000000..de46e6a
--- /dev/null
+++ b/src/components/sections/about/index.ts
@@ -0,0 +1,8 @@
+export { default as AboutMetric } from './AboutMetric';
+export { default as InlineImageSplitTextAbout } from './InlineImageSplitTextAbout';
+export { default as MediaAbout } from './MediaAbout';
+export { default as MetricSplitMediaAbout } from './MetricSplitMediaAbout';
+export { default as SplitAbout } from './SplitAbout';
+export { default as TestimonialAboutCard } from './TestimonialAboutCard';
+export { default as TextAbout } from './TextAbout';
+export { default as TextSplitAbout } from './TextSplitAbout';
diff --git a/src/components/sections/blog/BlogCardOne.tsx b/src/components/sections/blog/BlogCardOne.tsx
new file mode 100644
index 0000000..111e856
--- /dev/null
+++ b/src/components/sections/blog/BlogCardOne.tsx
@@ -0,0 +1,239 @@
+"use client";
+
+import Image from "next/image";
+import CardStack from "@/components/cardStack/CardStack";
+import Badge from "@/components/shared/Badge";
+import OverlayArrowButton from "@/components/shared/OverlayArrowButton";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { BlogPost } from "@/lib/api/blog";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type BlogCard = BlogPost;
+
+interface BlogCardOneProps {
+    blogs: BlogCard[];
+    carouselMode?: "auto" | "buttons";
+    uniformGridCustomHeightClasses?: string;
+    animationType: CardAnimationType;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    tagAnimation?: ButtonAnimationType;
+    buttons?: ButtonConfig[];
+    buttonAnimation?: ButtonAnimationType;
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    cardClassName?: string;
+    imageWrapperClassName?: string;
+    imageClassName?: string;
+    categoryClassName?: string;
+    cardTitleClassName?: string;
+    excerptClassName?: string;
+    authorContainerClassName?: string;
+    authorAvatarClassName?: string;
+    authorNameClassName?: string;
+    dateClassName?: string;
+    textBoxTitleClassName?: string;
+    textBoxTitleImageWrapperClassName?: string;
+    textBoxTitleImageClassName?: string;
+    textBoxDescriptionClassName?: string;
+    gridClassName?: string;
+    carouselClassName?: string;
+    controlsClassName?: string;
+    textBoxClassName?: string;
+    textBoxTagClassName?: string;
+    textBoxButtonContainerClassName?: string;
+    textBoxButtonClassName?: string;
+    textBoxButtonTextClassName?: string;
+}
+
+interface BlogCardItemProps {
+    blog: BlogCard;
+    shouldUseLightText: boolean;
+    cardClassName?: string;
+    imageWrapperClassName?: string;
+    imageClassName?: string;
+    categoryClassName?: string;
+    cardTitleClassName?: string;
+    excerptClassName?: string;
+    authorContainerClassName?: string;
+    authorAvatarClassName?: string;
+    authorNameClassName?: string;
+    dateClassName?: string;
+}
+
+const BlogCardItem = ({
+    blog,
+    shouldUseLightText,
+    cardClassName = "",
+    imageWrapperClassName = "",
+    imageClassName = "",
+    categoryClassName = "",
+    cardTitleClassName = "",
+    excerptClassName = "",
+    authorContainerClassName = "",
+    authorAvatarClassName = "",
+    authorNameClassName = "",
+    dateClassName = "",
+}: BlogCardItemProps) => {
+    return (
+        <article
+            className={cls("relative h-full card group flex flex-col gap-4 cursor-pointer p-4 rounded-theme-capped", cardClassName)}
+            onClick={blog.onBlogClick}
+            role="article"
+            aria-label={`${blog.title} by ${blog.authorName}`}
+        >
+            <div className={cls("relative z-1 w-full aspect-[4/3] overflow-hidden rounded-theme-capped", imageWrapperClassName)}>
+                <Image
+                    src={blog.imageSrc}
+                    alt={blog.imageAlt || blog.title}
+                    fill
+                    className={cls("w-full h-full object-cover transition-transform duration-500 ease-in-out group-hover:scale-105", imageClassName)}
+                    unoptimized={blog.imageSrc.startsWith('http') || blog.imageSrc.startsWith('//')}
+                />
+                <OverlayArrowButton ariaLabel={`Read ${blog.title}`} />
+            </div>
+
+            <div className="relative z-1 flex flex-col justify-between gap-6 flex-1">
+                <div className="flex flex-col gap-2">
+                    <Badge text={blog.category} variant="primary" className={categoryClassName} />
+
+                    <h3 className={cls("text-2xl font-medium leading-[1.25] mt-1", shouldUseLightText ? "text-background" : "text-foreground", cardTitleClassName)}>
+                        {blog.title}
+                    </h3>
+
+                    <p className={cls("text-base leading-[1.25]", shouldUseLightText ? "text-background" : "text-foreground", excerptClassName)}>
+                        {blog.excerpt}
+                    </p>
+                </div>
+
+                <div className={cls("flex items-center gap-3", authorContainerClassName)}>
+                    <Image
+                        src={blog.authorAvatar}
+                        alt={blog.authorName}
+                        width={40}
+                        height={40}
+                        className={cls("h-9 w-auto aspect-square rounded-theme object-cover", authorAvatarClassName)}
+                        unoptimized={blog.authorAvatar.startsWith('http') || blog.authorAvatar.startsWith('//')}
+                    />
+                    <div className="flex flex-col">
+                        <p className={cls("text-sm font-medium", shouldUseLightText ? "text-background" : "text-foreground", authorNameClassName)}>
+                            {blog.authorName}
+                        </p>
+                        <p className={cls("text-xs", shouldUseLightText ? "text-background/75" : "text-foreground/75", dateClassName)}>
+                            {blog.date}
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </article>
+    );
+};
+
+const BlogCardOne = ({
+    blogs = [],
+    carouselMode = "buttons",
+    uniformGridCustomHeightClasses,
+    animationType,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    tagAnimation = "opacity",
+    buttons = [],
+    buttonAnimation = "slide-up",
+    textboxLayout,
+    useInvertedBackground = false,
+    ariaLabel = "Blog section",
+    className = "",
+    containerClassName = "",
+    cardClassName = "",
+    imageWrapperClassName = "",
+    imageClassName = "",
+    categoryClassName = "",
+    cardTitleClassName = "",
+    excerptClassName = "",
+    authorContainerClassName = "",
+    authorAvatarClassName = "",
+    authorNameClassName = "",
+    dateClassName = "",
+    textBoxTitleClassName = "",
+    textBoxTitleImageWrapperClassName = "",
+    textBoxTitleImageClassName = "",
+    textBoxDescriptionClassName = "",
+    gridClassName = "",
+    carouselClassName = "",
+    controlsClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+}: BlogCardOneProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    return (
+        <CardStack
+            mode={carouselMode}
+            gridVariant="uniform-all-items-equal"
+            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+            animationType={animationType}
+            
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            tagAnimation={tagAnimation}
+            buttons={buttons}
+            buttonAnimation={buttonAnimation}
+            textboxLayout={textboxLayout}
+            useInvertedBackground={useInvertedBackground}
+            ariaLabel={ariaLabel}
+            className={className}
+            containerClassName={containerClassName}
+            gridClassName={gridClassName}
+            carouselClassName={carouselClassName}
+            controlsClassName={controlsClassName}
+            textBoxClassName={textBoxClassName}
+            titleClassName={textBoxTitleClassName}
+            titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
+            titleImageClassName={textBoxTitleImageClassName}
+            descriptionClassName={textBoxDescriptionClassName}
+            tagClassName={textBoxTagClassName}
+            buttonContainerClassName={textBoxButtonContainerClassName}
+            buttonClassName={textBoxButtonClassName}
+            buttonTextClassName={textBoxButtonTextClassName}
+        >
+            {blogs.map((blog) => (
+                <BlogCardItem
+                    key={blog.id}
+                    blog={blog}
+                    shouldUseLightText={shouldUseLightText}
+                    cardClassName={cardClassName}
+                    imageWrapperClassName={imageWrapperClassName}
+                    imageClassName={imageClassName}
+                    categoryClassName={categoryClassName}
+                    cardTitleClassName={cardTitleClassName}
+                    excerptClassName={excerptClassName}
+                    authorContainerClassName={authorContainerClassName}
+                    authorAvatarClassName={authorAvatarClassName}
+                    authorNameClassName={authorNameClassName}
+                    dateClassName={dateClassName}
+                />
+            ))}
+        </CardStack>
+    );
+};
+
+export default BlogCardOne;
diff --git a/src/components/sections/blog/BlogCardThree.tsx b/src/components/sections/blog/BlogCardThree.tsx
new file mode 100644
index 0000000..80a5915
--- /dev/null
+++ b/src/components/sections/blog/BlogCardThree.tsx
@@ -0,0 +1,283 @@
+"use client";
+
+import Image from "next/image";
+import CardStack from "@/components/cardStack/CardStack";
+import Tag from "@/components/shared/Tag";
+import MediaContent from "@/components/shared/MediaContent";
+import OverlayArrowButton from "@/components/shared/OverlayArrowButton";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { BlogPost } from "@/lib/api/blog";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type BlogCard = BlogPost;
+
+interface BlogCardThreeProps {
+    blogs: BlogCard[];
+    carouselMode?: "auto" | "buttons";
+    uniformGridCustomHeightClasses?: string;
+    animationType: CardAnimationType;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    tagAnimation?: ButtonAnimationType;
+    buttons?: ButtonConfig[];
+    buttonAnimation?: ButtonAnimationType;
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    cardClassName?: string;
+    cardContentClassName?: string;
+    categoryTagClassName?: string;
+    cardTitleClassName?: string;
+    excerptClassName?: string;
+    authorContainerClassName?: string;
+    authorAvatarClassName?: string;
+    authorNameClassName?: string;
+    dateClassName?: string;
+    mediaWrapperClassName?: string;
+    mediaClassName?: string;
+    textBoxTitleClassName?: string;
+    textBoxTitleImageWrapperClassName?: string;
+    textBoxTitleImageClassName?: string;
+    textBoxDescriptionClassName?: string;
+    gridClassName?: string;
+    carouselClassName?: string;
+    controlsClassName?: string;
+    textBoxClassName?: string;
+    textBoxTagClassName?: string;
+    textBoxButtonContainerClassName?: string;
+    textBoxButtonClassName?: string;
+    textBoxButtonTextClassName?: string;
+}
+
+interface BlogCardItemProps {
+    blog: BlogCard;
+    useInvertedBackground: boolean;
+    cardClassName?: string;
+    cardContentClassName?: string;
+    categoryTagClassName?: string;
+    cardTitleClassName?: string;
+    excerptClassName?: string;
+    authorContainerClassName?: string;
+    authorAvatarClassName?: string;
+    authorNameClassName?: string;
+    dateClassName?: string;
+    mediaWrapperClassName?: string;
+    mediaClassName?: string;
+}
+
+const BlogCardItem = ({
+    blog,
+    useInvertedBackground,
+    cardClassName = "",
+    cardContentClassName = "",
+    categoryTagClassName = "",
+    cardTitleClassName = "",
+    excerptClassName = "",
+    authorContainerClassName = "",
+    authorAvatarClassName = "",
+    authorNameClassName = "",
+    dateClassName = "",
+    mediaWrapperClassName = "",
+    mediaClassName = "",
+}: BlogCardItemProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    return (
+        <article
+            className={cls(
+                "relative h-full card group flex flex-col justify-between gap-6 p-6 cursor-pointer rounded-theme-capped overflow-hidden",
+                cardClassName
+            )}
+            onClick={blog.onBlogClick}
+            role="article"
+            aria-label={blog.title}
+        >
+            <div className={cls("relative z-1 flex flex-col gap-3", cardContentClassName)}>
+                <Tag
+                    text={blog.category}
+                    useInvertedBackground={useInvertedBackground}
+                    className={categoryTagClassName}
+                />
+
+                <h3 className={cls(
+                    "text-3xl md:text-4xl font-medium leading-tight line-clamp-2",
+                    shouldUseLightText ? "text-background" : "text-foreground",
+                    cardTitleClassName
+                )}>
+                    {blog.title}
+                </h3>
+
+                <p className={cls(
+                    "text-base leading-tight line-clamp-2",
+                    shouldUseLightText ? "text-background/75" : "text-foreground/75",
+                    excerptClassName
+                )}>
+                    {blog.excerpt}
+                </p>
+
+                {(blog.authorName || blog.date) && (
+                    <div className={cls(
+                        "flex",
+                        blog.authorAvatar ? "items-center gap-3" : "flex-row justify-between items-center",
+                        authorContainerClassName
+                    )}>
+                        {blog.authorAvatar && (
+                            <Image
+                                src={blog.authorAvatar}
+                                alt={blog.authorName || "Author"}
+                                width={40}
+                                height={40}
+                                className={cls("h-9 w-auto aspect-square rounded-theme object-cover", authorAvatarClassName)}
+                                unoptimized={blog.authorAvatar.startsWith('http') || blog.authorAvatar.startsWith('//')}
+                            />
+                        )}
+                        {blog.authorAvatar ? (
+                            <div className="flex flex-col">
+                                {blog.authorName && (
+                                    <p className={cls("text-sm font-medium", shouldUseLightText ? "text-background" : "text-foreground", authorNameClassName)}>
+                                        {blog.authorName}
+                                    </p>
+                                )}
+                                {blog.date && (
+                                    <p className={cls("text-xs", shouldUseLightText ? "text-background/75" : "text-foreground/75", dateClassName)}>
+                                        {blog.date}
+                                    </p>
+                                )}
+                            </div>
+                        ) : (
+                            <>
+                                {blog.authorName && (
+                                    <p className={cls("text-sm font-medium", shouldUseLightText ? "text-background" : "text-foreground", authorNameClassName)}>
+                                        {blog.authorName}
+                                    </p>
+                                )}
+                                {blog.date && (
+                                    <p className={cls("text-xs", shouldUseLightText ? "text-background/75" : "text-foreground/75", dateClassName)}>
+                                        {blog.date}
+                                    </p>
+                                )}
+                            </>
+                        )}
+                    </div>
+                )}
+            </div>
+
+            <div className={cls("relative z-1 w-full aspect-square", mediaWrapperClassName)}>
+                <MediaContent
+                    imageSrc={blog.imageSrc}
+                    imageAlt={blog.imageAlt || blog.title}
+                    imageClassName={cls("absolute inset-0 w-full h-full object-cover", mediaClassName)}
+                />
+                <OverlayArrowButton ariaLabel={`Read ${blog.title}`} />
+            </div>
+        </article>
+    );
+};
+
+const BlogCardThree = ({
+    blogs = [],
+    carouselMode = "buttons",
+    uniformGridCustomHeightClasses = "min-h-none",
+    animationType,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    tagAnimation = "opacity",
+    buttons = [],
+    buttonAnimation = "slide-up",
+    textboxLayout,
+    useInvertedBackground = false,
+    ariaLabel = "Blog section",
+    className = "",
+    containerClassName = "",
+    cardClassName = "",
+    cardContentClassName = "",
+    categoryTagClassName = "",
+    cardTitleClassName = "",
+    excerptClassName = "",
+    authorContainerClassName = "",
+    authorAvatarClassName = "",
+    authorNameClassName = "",
+    dateClassName = "",
+    mediaWrapperClassName = "",
+    mediaClassName = "",
+    textBoxTitleClassName = "",
+    textBoxTitleImageWrapperClassName = "",
+    textBoxTitleImageClassName = "",
+    textBoxDescriptionClassName = "",
+    gridClassName = "",
+    carouselClassName = "",
+    controlsClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+}: BlogCardThreeProps) => {
+    return (
+        <CardStack
+            mode={carouselMode}
+            gridVariant="uniform-all-items-equal"
+            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+            animationType={animationType}
+            
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            tagAnimation={tagAnimation}
+            buttons={buttons}
+            buttonAnimation={buttonAnimation}
+            textboxLayout={textboxLayout}
+            useInvertedBackground={useInvertedBackground}
+            ariaLabel={ariaLabel}
+            className={className}
+            containerClassName={containerClassName}
+            gridClassName={gridClassName}
+            carouselClassName={carouselClassName}
+            controlsClassName={controlsClassName}
+            textBoxClassName={textBoxClassName}
+            titleClassName={textBoxTitleClassName}
+            titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
+            titleImageClassName={textBoxTitleImageClassName}
+            descriptionClassName={textBoxDescriptionClassName}
+            tagClassName={textBoxTagClassName}
+            buttonContainerClassName={textBoxButtonContainerClassName}
+            buttonClassName={textBoxButtonClassName}
+            buttonTextClassName={textBoxButtonTextClassName}
+        >
+            {blogs.map((blog) => (
+                <BlogCardItem
+                    key={blog.id}
+                    blog={blog}
+                    useInvertedBackground={useInvertedBackground}
+                    cardClassName={cardClassName}
+                    cardContentClassName={cardContentClassName}
+                    categoryTagClassName={categoryTagClassName}
+                    cardTitleClassName={cardTitleClassName}
+                    excerptClassName={excerptClassName}
+                    authorContainerClassName={authorContainerClassName}
+                    authorAvatarClassName={authorAvatarClassName}
+                    authorNameClassName={authorNameClassName}
+                    dateClassName={dateClassName}
+                    mediaWrapperClassName={mediaWrapperClassName}
+                    mediaClassName={mediaClassName}
+                />
+            ))}
+        </CardStack>
+    );
+};
+
+export default BlogCardThree;
diff --git a/src/components/sections/blog/BlogCardTwo.tsx b/src/components/sections/blog/BlogCardTwo.tsx
new file mode 100644
index 0000000..270850d
--- /dev/null
+++ b/src/components/sections/blog/BlogCardTwo.tsx
@@ -0,0 +1,236 @@
+"use client";
+
+import Image from "next/image";
+import CardStack from "@/components/cardStack/CardStack";
+import Badge from "@/components/shared/Badge";
+import OverlayArrowButton from "@/components/shared/OverlayArrowButton";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { BlogPost } from "@/lib/api/blog";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type BlogCard = Omit<BlogPost, 'category'> & {
+    category: string | string[];
+};
+
+interface BlogCardTwoProps {
+    blogs: BlogCard[];
+    carouselMode?: "auto" | "buttons";
+    uniformGridCustomHeightClasses?: string;
+    animationType: CardAnimationType;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    tagAnimation?: ButtonAnimationType;
+    buttons?: ButtonConfig[];
+    buttonAnimation?: ButtonAnimationType;
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    cardClassName?: string;
+    imageWrapperClassName?: string;
+    imageClassName?: string;
+    authorAvatarClassName?: string;
+    authorDateClassName?: string;
+    cardTitleClassName?: string;
+    excerptClassName?: string;
+    categoryClassName?: string;
+    textBoxTitleClassName?: string;
+    textBoxTitleImageWrapperClassName?: string;
+    textBoxTitleImageClassName?: string;
+    textBoxDescriptionClassName?: string;
+    gridClassName?: string;
+    carouselClassName?: string;
+    controlsClassName?: string;
+    textBoxClassName?: string;
+    textBoxTagClassName?: string;
+    textBoxButtonContainerClassName?: string;
+    textBoxButtonClassName?: string;
+    textBoxButtonTextClassName?: string;
+}
+
+interface BlogCardItemProps {
+    blog: BlogCard;
+    shouldUseLightText: boolean;
+    cardClassName?: string;
+    imageWrapperClassName?: string;
+    imageClassName?: string;
+    authorAvatarClassName?: string;
+    authorDateClassName?: string;
+    cardTitleClassName?: string;
+    excerptClassName?: string;
+    categoryClassName?: string;
+}
+
+const BlogCardItem = ({
+    blog,
+    shouldUseLightText,
+    cardClassName = "",
+    imageWrapperClassName = "",
+    imageClassName = "",
+    authorAvatarClassName = "",
+    authorDateClassName = "",
+    cardTitleClassName = "",
+    excerptClassName = "",
+    categoryClassName = "",
+}: BlogCardItemProps) => {
+    return (
+        <article
+            className={cls("relative h-full card group flex flex-col gap-4 cursor-pointer p-4 rounded-theme-capped", cardClassName)}
+            onClick={blog.onBlogClick}
+            role="article"
+            aria-label={`${blog.title} by ${blog.authorName}`}
+        >
+            <div className={cls("relative z-1 w-full aspect-[4/3] overflow-hidden rounded-theme-capped", imageWrapperClassName)}>
+                <Image
+                    src={blog.imageSrc}
+                    alt={blog.imageAlt || blog.title}
+                    fill
+                    className={cls("w-full h-full object-cover transition-transform duration-500 ease-in-out group-hover:scale-105", imageClassName)}
+                    unoptimized={blog.imageSrc.startsWith('http') || blog.imageSrc.startsWith('//')}
+                />
+                <OverlayArrowButton ariaLabel={`Read ${blog.title}`} />
+            </div>
+
+            <div className="relative z-1 flex flex-col justify-between gap-6 flex-1">
+                <div className="flex flex-col gap-2">
+                    <div className="flex items-center gap-2">
+                        {blog.authorAvatar && (
+                            <Image
+                                src={blog.authorAvatar}
+                                alt={blog.authorName}
+                                width={24}
+                                height={24}
+                                className={cls("h-[var(--text-xs)] w-auto aspect-square rounded-theme object-cover bg-background-accent", authorAvatarClassName)}
+                                unoptimized={blog.authorAvatar.startsWith('http') || blog.authorAvatar.startsWith('//')}
+                            />
+                        )}
+                        <p className={cls("text-xs", shouldUseLightText ? "text-background" : "text-foreground", authorDateClassName)}>
+                            {blog.authorName} • {blog.date}
+                        </p>
+                    </div>
+
+                    <h3 className={cls("text-2xl font-medium leading-[1.25]", shouldUseLightText ? "text-background" : "text-foreground", cardTitleClassName)}>
+                        {blog.title}
+                    </h3>
+
+                    <p className={cls("text-base leading-[1.25]", shouldUseLightText ? "text-background" : "text-foreground", excerptClassName)}>
+                        {blog.excerpt}
+                    </p>
+                </div>
+
+                <div className="flex flex-wrap gap-2">
+                    {Array.isArray(blog.category) ? (
+                        blog.category.map((cat, index) => (
+                            <Badge key={`${cat}-${index}`} text={cat} variant="primary" className={categoryClassName} />
+                        ))
+                    ) : (
+                        <Badge text={blog.category} variant="primary" className={categoryClassName} />
+                    )}
+                </div>
+            </div>
+        </article>
+    );
+};
+
+const BlogCardTwo = ({
+    blogs = [],
+    carouselMode = "buttons",
+    uniformGridCustomHeightClasses,
+    animationType,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    tagAnimation = "opacity",
+    buttons = [],
+    buttonAnimation = "slide-up",
+    textboxLayout,
+    useInvertedBackground = false,
+    ariaLabel = "Blog section",
+    className = "",
+    containerClassName = "",
+    cardClassName = "",
+    imageWrapperClassName = "",
+    imageClassName = "",
+    authorAvatarClassName = "",
+    authorDateClassName = "",
+    cardTitleClassName = "",
+    excerptClassName = "",
+    categoryClassName = "",
+    textBoxTitleClassName = "",
+    textBoxTitleImageWrapperClassName = "",
+    textBoxTitleImageClassName = "",
+    textBoxDescriptionClassName = "",
+    gridClassName = "",
+    carouselClassName = "",
+    controlsClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+}: BlogCardTwoProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    return (
+        <CardStack
+            mode={carouselMode}
+            gridVariant="uniform-all-items-equal"
+            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+            animationType={animationType}
+            
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            tagAnimation={tagAnimation}
+            buttons={buttons}
+            buttonAnimation={buttonAnimation}
+            textboxLayout={textboxLayout}
+            useInvertedBackground={useInvertedBackground}
+            ariaLabel={ariaLabel}
+            className={className}
+            containerClassName={containerClassName}
+            gridClassName={gridClassName}
+            carouselClassName={carouselClassName}
+            controlsClassName={controlsClassName}
+            textBoxClassName={textBoxClassName}
+            titleClassName={textBoxTitleClassName}
+            titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
+            titleImageClassName={textBoxTitleImageClassName}
+            descriptionClassName={textBoxDescriptionClassName}
+            tagClassName={textBoxTagClassName}
+            buttonContainerClassName={textBoxButtonContainerClassName}
+            buttonClassName={textBoxButtonClassName}
+            buttonTextClassName={textBoxButtonTextClassName}
+        >
+            {blogs.map((blog) => (
+                <BlogCardItem
+                    key={blog.id}
+                    blog={blog}
+                    shouldUseLightText={shouldUseLightText}
+                    cardClassName={cardClassName}
+                    imageWrapperClassName={imageWrapperClassName}
+                    imageClassName={imageClassName}
+                    authorAvatarClassName={authorAvatarClassName}
+                    authorDateClassName={authorDateClassName}
+                    cardTitleClassName={cardTitleClassName}
+                    excerptClassName={excerptClassName}
+                    categoryClassName={categoryClassName}
+                />
+            ))}
+        </CardStack>
+    );
+};
+
+export default BlogCardTwo;
diff --git a/src/components/sections/blog/index.ts b/src/components/sections/blog/index.ts
new file mode 100644
index 0000000..a84a204
--- /dev/null
+++ b/src/components/sections/blog/index.ts
@@ -0,0 +1,3 @@
+export { default as BlogCardOne } from './BlogCardOne';
+export { default as BlogCardThree } from './BlogCardThree';
+export { default as BlogCardTwo } from './BlogCardTwo';
diff --git a/src/components/sections/contact/ContactCTA.tsx b/src/components/sections/contact/ContactCTA.tsx
new file mode 100644
index 0000000..ec78f0e
--- /dev/null
+++ b/src/components/sections/contact/ContactCTA.tsx
@@ -0,0 +1,110 @@
+"use client";
+
+import TextBox from "@/components/Textbox";
+import HeroBackgrounds, { type HeroBackgroundVariantProps } from "@/components/background/HeroBackgrounds";
+import { cls } from "@/lib/utils";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, ButtonAnimationType } from "@/types/button";
+import type { InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type ContactCTABackgroundProps = Extract<
+    HeroBackgroundVariantProps,
+    | { variant: "plain" }
+    | { variant: "animated-grid" }
+    | { variant: "canvas-reveal" }
+    | { variant: "cell-wave" }
+    | { variant: "downward-rays-animated" }
+    | { variant: "downward-rays-animated-grid" }
+    | { variant: "downward-rays-static" }
+    | { variant: "downward-rays-static-grid" }
+    | { variant: "gradient-bars" }
+    | { variant: "radial-gradient" }
+    | { variant: "rotated-rays-animated" }
+    | { variant: "rotated-rays-animated-grid" }
+    | { variant: "rotated-rays-static" }
+    | { variant: "rotated-rays-static-grid" }
+    | { variant: "sparkles-gradient" }
+>;
+
+interface ContactCTAProps {
+    tag: string;
+    tagIcon?: LucideIcon;
+    tagAnimation?: ButtonAnimationType;
+    title: string;
+    description: string;
+    buttons: ButtonConfig[];
+    buttonAnimation?: ButtonAnimationType;
+    background: ContactCTABackgroundProps;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    contentClassName?: string;
+    textBoxClassName?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
+    tagClassName?: string;
+    buttonContainerClassName?: string;
+    buttonClassName?: string;
+    buttonTextClassName?: string;
+}
+
+const ContactCTA = ({
+    tag,
+    tagIcon,
+    tagAnimation = "opacity",
+    title,
+    description,
+    buttons = [],
+    buttonAnimation = "slide-up",
+    background,
+    useInvertedBackground = false,
+    ariaLabel = "Contact section",
+    className = "",
+    containerClassName = "",
+    contentClassName = "",
+    textBoxClassName = "",
+    titleClassName = "",
+    descriptionClassName = "",
+    tagClassName = "",
+    buttonContainerClassName = "",
+    buttonClassName = "",
+    buttonTextClassName = "",
+}: ContactCTAProps) => {
+    return (
+        <section
+            aria-label={ariaLabel}
+            className={cls("relative py-20 w-full", useInvertedBackground && "bg-foreground", className)}
+        >
+            <div className={cls("w-content-width mx-auto relative z-10", containerClassName)}>
+                <div className={cls("relative w-full card rounded-theme-capped py-20 px-10 flex items-center justify-center", contentClassName)}>
+                    <div className="relative z-10 w-full md:w-3/4 mx-auto flex flex-col items-center justify-center">
+                        <TextBox
+                            tag={tag}
+                            tagIcon={tagIcon}
+                            tagAnimation={tagAnimation}
+                            title={title}
+                            description={description}
+                            buttons={buttons}
+                            buttonAnimation={buttonAnimation}
+                            className={cls("flex flex-col gap-3 md:gap-1", textBoxClassName)}
+                            titleClassName={cls("text-4xl md:text-5xl font-medium text-balance", titleClassName)}
+                            descriptionClassName={cls("text-base md:text-lg leading-[1.2]", descriptionClassName)}
+                            tagClassName={cls("px-3 py-1 text-sm rounded-theme card text-foreground inline-flex items-center gap-2 mb-3", tagClassName)}
+                            buttonContainerClassName={cls("flex flex-wrap gap-4 max-md:justify-center mt-3", buttonContainerClassName)}
+                            buttonClassName={buttonClassName}
+                            buttonTextClassName={buttonTextClassName}
+                            center={true}
+                        />
+                    </div>
+                    <div className="absolute inset-0 w-full h-full z-0 rounded-theme-capped overflow-hidden">
+                        <HeroBackgrounds {...background} />
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+
+export default ContactCTA;
diff --git a/src/components/sections/contact/ContactCenter.tsx b/src/components/sections/contact/ContactCenter.tsx
new file mode 100644
index 0000000..4025086
--- /dev/null
+++ b/src/components/sections/contact/ContactCenter.tsx
@@ -0,0 +1,130 @@
+"use client";
+
+import ContactForm from "@/components/form/ContactForm";
+import HeroBackgrounds, { type HeroBackgroundVariantProps } from "@/components/background/HeroBackgrounds";
+import { cls } from "@/lib/utils";
+import { LucideIcon } from "lucide-react";
+import { sendContactEmail } from "@/utils/sendContactEmail";
+import type { ButtonAnimationType } from "@/types/button";
+
+type ContactCenterBackgroundProps = Extract<
+    HeroBackgroundVariantProps,
+    | { variant: "plain" }
+    | { variant: "animated-grid" }
+    | { variant: "canvas-reveal" }
+    | { variant: "cell-wave" }
+    | { variant: "downward-rays-animated" }
+    | { variant: "downward-rays-animated-grid" }
+    | { variant: "downward-rays-static" }
+    | { variant: "downward-rays-static-grid" }
+    | { variant: "gradient-bars" }
+    | { variant: "radial-gradient" }
+    | { variant: "rotated-rays-animated" }
+    | { variant: "rotated-rays-animated-grid" }
+    | { variant: "rotated-rays-static" }
+    | { variant: "rotated-rays-static-grid" }
+    | { variant: "sparkles-gradient" }
+>;
+
+interface ContactCenterProps {
+    title: string;
+    description: string;
+    tag: string;
+    tagIcon?: LucideIcon;
+    tagAnimation?: ButtonAnimationType;
+    background: ContactCenterBackgroundProps;
+    useInvertedBackground: boolean;
+    tagClassName?: string;
+    inputPlaceholder?: string;
+    buttonText?: string;
+    termsText?: string;
+    onSubmit?: (email: string) => void;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    contentClassName?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
+    formWrapperClassName?: string;
+    formClassName?: string;
+    inputClassName?: string;
+    buttonClassName?: string;
+    buttonTextClassName?: string;
+    termsClassName?: string;
+}
+
+const ContactCenter = ({
+    title,
+    description,
+    tag,
+    tagIcon,
+    tagAnimation = "opacity",
+    background,
+    useInvertedBackground,
+    tagClassName = "",
+    inputPlaceholder = "Enter your email",
+    buttonText = "Sign Up",
+    termsText = "By clicking Sign Up you're confirming that you agree with our Terms and Conditions.",
+    onSubmit,
+    ariaLabel = "Contact section",
+    className = "",
+    containerClassName = "",
+    contentClassName = "",
+    titleClassName = "",
+    descriptionClassName = "",
+    formWrapperClassName = "",
+    formClassName = "",
+    inputClassName = "",
+    buttonClassName = "",
+    buttonTextClassName = "",
+    termsClassName = "",
+}: ContactCenterProps) => {
+
+    const handleSubmit = async (email: string) => {
+        try {
+            await sendContactEmail({ email });
+            console.log("Email send successfully");
+        } catch (error) {
+            console.error("Failed to send email:", error);
+        }
+    };
+
+    return (
+        <section aria-label={ariaLabel} className={cls("relative py-20 w-full", useInvertedBackground && "bg-foreground", className)}>
+            <div className={cls("w-content-width mx-auto relative z-10", containerClassName)}>
+                <div className={cls("relative w-full card p-6 md:p-0 py-20 md:py-20 rounded-theme-capped flex items-center justify-center", contentClassName)}>
+                    <div className="relative z-10 w-full md:w-1/2">
+                        <ContactForm
+                            tag={tag}
+                            tagIcon={tagIcon}
+                            tagAnimation={tagAnimation}
+                            title={title}
+                            description={description}
+                            useInvertedBackground={useInvertedBackground}
+                            inputPlaceholder={inputPlaceholder}
+                            buttonText={buttonText}
+                            termsText={termsText}
+                            onSubmit={handleSubmit}
+                            centered={true}
+                            tagClassName={tagClassName}
+                            titleClassName={titleClassName}
+                            descriptionClassName={descriptionClassName}
+                            formWrapperClassName={cls("md:w-8/10 2xl:w-6/10", formWrapperClassName)}
+                            formClassName={formClassName}
+                            inputClassName={inputClassName}
+                            buttonClassName={buttonClassName}
+                            buttonTextClassName={buttonTextClassName}
+                            termsClassName={termsClassName}
+                        />
+                    </div>
+                    <div className="absolute inset w-full h-full z-0 rounded-theme-capped overflow-hidden" >
+                        <HeroBackgrounds {...background} />
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+
+export default ContactCenter;
diff --git a/src/components/sections/contact/ContactSplit.tsx b/src/components/sections/contact/ContactSplit.tsx
new file mode 100644
index 0000000..3be167a
--- /dev/null
+++ b/src/components/sections/contact/ContactSplit.tsx
@@ -0,0 +1,170 @@
+"use client";
+
+import ContactForm from "@/components/form/ContactForm";
+import MediaContent from "@/components/shared/MediaContent";
+import HeroBackgrounds, { type HeroBackgroundVariantProps } from "@/components/background/HeroBackgrounds";
+import { cls } from "@/lib/utils";
+import { useButtonAnimation } from "@/components/hooks/useButtonAnimation";
+import { LucideIcon } from "lucide-react";
+import { sendContactEmail } from "@/utils/sendContactEmail";
+import type { ButtonAnimationType } from "@/types/button";
+
+type ContactSplitBackgroundProps = Extract<
+    HeroBackgroundVariantProps,
+    | { variant: "plain" }
+    | { variant: "animated-grid" }
+    | { variant: "canvas-reveal" }
+    | { variant: "cell-wave" }
+    | { variant: "downward-rays-animated" }
+    | { variant: "downward-rays-animated-grid" }
+    | { variant: "downward-rays-static" }
+    | { variant: "downward-rays-static-grid" }
+    | { variant: "gradient-bars" }
+    | { variant: "radial-gradient" }
+    | { variant: "rotated-rays-animated" }
+    | { variant: "rotated-rays-animated-grid" }
+    | { variant: "rotated-rays-static" }
+    | { variant: "rotated-rays-static-grid" }
+    | { variant: "sparkles-gradient" }
+>;
+
+interface ContactSplitProps {
+    title: string;
+    description: string;
+    tag: string;
+    tagIcon?: LucideIcon;
+    tagAnimation?: ButtonAnimationType;
+    background: ContactSplitBackgroundProps;
+    useInvertedBackground: boolean;
+    imageSrc?: string;
+    videoSrc?: string;
+    imageAlt?: string;
+    videoAriaLabel?: string;
+    mediaPosition?: "left" | "right";
+    mediaAnimation?: ButtonAnimationType;
+    inputPlaceholder?: string;
+    buttonText?: string;
+    termsText?: string;
+    onSubmit?: (email: string) => void;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    contentClassName?: string;
+    contactFormClassName?: string;
+    tagClassName?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
+    formWrapperClassName?: string;
+    formClassName?: string;
+    inputClassName?: string;
+    buttonClassName?: string;
+    buttonTextClassName?: string;
+    termsClassName?: string;
+    mediaWrapperClassName?: string;
+    mediaClassName?: string;
+}
+
+const ContactSplit = ({
+    title,
+    description,
+    tag,
+    tagIcon,
+    tagAnimation = "opacity",
+    background,
+    useInvertedBackground,
+    imageSrc,
+    videoSrc,
+    imageAlt = "",
+    videoAriaLabel = "Contact section video",
+    mediaPosition = "right",
+    mediaAnimation = "none",
+    inputPlaceholder = "Enter your email",
+    buttonText = "Sign Up",
+    termsText = "By clicking Sign Up you're confirming that you agree with our Terms and Conditions.",
+    onSubmit,
+    ariaLabel = "Contact section",
+    className = "",
+    containerClassName = "",
+    contentClassName = "",
+    contactFormClassName = "",
+    tagClassName = "",
+    titleClassName = "",
+    descriptionClassName = "",
+    formWrapperClassName = "",
+    formClassName = "",
+    inputClassName = "",
+    buttonClassName = "",
+    buttonTextClassName = "",
+    termsClassName = "",
+    mediaWrapperClassName = "",
+    mediaClassName = "",
+}: ContactSplitProps) => {
+    const { containerRef: mediaContainerRef } = useButtonAnimation({ animationType: mediaAnimation });
+
+    const handleSubmit = async (email: string) => {
+        try {
+            await sendContactEmail({ email });
+            console.log("Email send successfully");
+        } catch (error) {
+            console.error("Failed to send email:", error);
+        }
+    };
+
+    const contactContent = (
+        <div className="relative card rounded-theme-capped p-6 py-15 md:py-6 flex items-center justify-center">
+            <ContactForm
+                tag={tag}
+                tagIcon={tagIcon}
+                tagAnimation={tagAnimation}
+                title={title}
+                description={description}
+                useInvertedBackground={useInvertedBackground}
+                inputPlaceholder={inputPlaceholder}
+                buttonText={buttonText}
+                termsText={termsText}
+                onSubmit={handleSubmit}
+                centered={true}
+                className={cls("w-full", contactFormClassName)}
+                tagClassName={tagClassName}
+                titleClassName={titleClassName}
+                descriptionClassName={descriptionClassName}
+                formWrapperClassName={cls("w-full md:w-8/10 2xl:w-7/10", formWrapperClassName)}
+                formClassName={formClassName}
+                inputClassName={inputClassName}
+                buttonClassName={buttonClassName}
+                buttonTextClassName={buttonTextClassName}
+                termsClassName={termsClassName}
+            />
+            <div className="absolute inset w-full h-full z-0 rounded-theme-capped overflow-hidden" >
+                <HeroBackgrounds {...background} />
+            </div>
+        </div>
+    );
+
+    const mediaContent = (
+        <div ref={mediaContainerRef} className={cls("overflow-hidden rounded-theme-capped card h-130", mediaWrapperClassName)}>
+            <MediaContent
+                imageSrc={imageSrc}
+                videoSrc={videoSrc}
+                imageAlt={imageAlt}
+                videoAriaLabel={videoAriaLabel}
+                imageClassName={cls("relative z-1 w-full h-full object-cover", mediaClassName)}
+            />
+        </div>
+    );
+
+    return (
+        <section aria-label={ariaLabel} className={cls("relative py-20 w-full", useInvertedBackground && "bg-foreground", className)}>
+            <div className={cls("w-content-width mx-auto relative z-10", containerClassName)}>
+                <div className={cls("grid grid-cols-1 md:grid-cols-2 gap-6 md:auto-rows-fr", contentClassName)}>
+                    {mediaPosition === "left" && mediaContent}
+                    {contactContent}
+                    {mediaPosition === "right" && mediaContent}
+                </div>
+            </div>
+        </section>
+    );
+};
+
+
+export default ContactSplit;
diff --git a/src/components/sections/contact/ContactSplitForm.tsx b/src/components/sections/contact/ContactSplitForm.tsx
new file mode 100644
index 0000000..e4eed90
--- /dev/null
+++ b/src/components/sections/contact/ContactSplitForm.tsx
@@ -0,0 +1,239 @@
+"use client";
+
+import { useState } from "react";
+import TextAnimation from "@/components/text/TextAnimation";
+import Button from "@/components/button/Button";
+import Input from "@/components/form/Input";
+import Textarea from "@/components/form/Textarea";
+import MultiSelect from "@/components/form/MultiSelect";
+import MediaContent from "@/components/shared/MediaContent";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import { useButtonAnimation } from "@/components/hooks/useButtonAnimation";
+import { getButtonProps } from "@/lib/buttonUtils";
+import type { AnimationType } from "@/components/text/types";
+import type { ButtonAnimationType } from "@/types/button";
+import {sendContactEmail} from "@/utils/sendContactEmail";
+
+export interface InputField {
+    name: string;
+    type: string;
+    placeholder: string;
+    required?: boolean;
+    className?: string;
+}
+
+export interface TextareaField {
+    name: string;
+    placeholder: string;
+    rows?: number;
+    required?: boolean;
+    className?: string;
+}
+
+export interface MultiSelectField {
+    name: string;
+    label: string;
+    options: string[];
+}
+
+interface ContactSplitFormProps {
+    title: string;
+    description: string;
+    inputs: InputField[];
+    multiSelect?: MultiSelectField;
+    textarea?: TextareaField;
+    useInvertedBackground: boolean;
+    imageSrc?: string;
+    videoSrc?: string;
+    imageAlt?: string;
+    videoAriaLabel?: string;
+    mediaPosition?: "left" | "right";
+    mediaAnimation?: ButtonAnimationType;
+    buttonText?: string;
+    onSubmit?: (data: Record<string, string>) => void;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    contentClassName?: string;
+    formCardClassName?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
+    buttonClassName?: string;
+    buttonTextClassName?: string;
+    mediaWrapperClassName?: string;
+    mediaClassName?: string;
+}
+
+const ContactSplitForm = ({
+    title,
+    description,
+    inputs,
+    multiSelect,
+    textarea,
+    useInvertedBackground,
+    imageSrc,
+    videoSrc,
+    imageAlt = "",
+    videoAriaLabel = "Contact section video",
+    mediaPosition = "right",
+    mediaAnimation = "none",
+    buttonText = "Submit",
+    onSubmit,
+    ariaLabel = "Contact section",
+    className = "",
+    containerClassName = "",
+    contentClassName = "",
+    formCardClassName = "",
+    titleClassName = "",
+    descriptionClassName = "",
+    buttonClassName = "",
+    buttonTextClassName = "",
+    mediaWrapperClassName = "",
+    mediaClassName = "",
+}: ContactSplitFormProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+    const { containerRef: mediaContainerRef } = useButtonAnimation({ animationType: mediaAnimation });
+
+    // Validate minimum inputs requirement
+    if (inputs.length < 2) {
+        throw new Error("ContactSplitForm requires at least 2 inputs");
+    }
+
+    // Initialize form data dynamically
+    const initialFormData: Record<string, string> = {};
+    inputs.forEach(input => {
+        initialFormData[input.name] = "";
+    });
+    if (textarea) {
+        initialFormData[textarea.name] = "";
+    }
+
+    const [formData, setFormData] = useState(initialFormData);
+    const [selectedOptions, setSelectedOptions] = useState<string[]>([]);
+
+    const toggleOption = (option: string) => {
+        setSelectedOptions((prev) =>
+            prev.includes(option) ? prev.filter((o) => o !== option) : [...prev, option]
+        );
+    };
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        try {
+            await sendContactEmail({ formData: { ...formData, ...(multiSelect ? { [multiSelect.name]: selectedOptions.join(", ") } : {}) } });
+            console.log("Email send successfully");
+            setFormData(initialFormData);
+            setSelectedOptions([]);
+        } catch (error) {
+            console.error("Failed to send email:", error);
+        }
+    };
+
+    const getButtonConfigProps = () => {
+        if (theme.defaultButtonVariant === "hover-bubble") {
+            return { bgClassName: "w-full" };
+        }
+        if (theme.defaultButtonVariant === "icon-arrow") {
+            return { className: "justify-between" };
+        }
+        return {};
+    };
+
+    const formContent = (
+        <div className={cls("card rounded-theme-capped p-6 md:p-10 flex items-center justify-center", formCardClassName)}>
+            <form onSubmit={handleSubmit} className="relative z-1 w-full flex flex-col gap-6">
+                <div className="w-full flex flex-col gap-0 text-center">
+                    <TextAnimation
+                        type={theme.defaultTextAnimation as AnimationType}
+                        text={title}
+                        variant="trigger"
+                        className={cls("text-4xl font-medium leading-[1.175] text-balance", shouldUseLightText ? "text-background" : "text-foreground", titleClassName)}
+                    />
+
+                    <TextAnimation
+                        type={theme.defaultTextAnimation as AnimationType}
+                        text={description}
+                        variant="words-trigger"
+                        className={cls("text-base leading-[1.15] text-balance", shouldUseLightText ? "text-background" : "text-foreground", descriptionClassName)}
+                    />
+                </div>
+
+                <div className="w-full flex flex-col gap-4">
+                    {inputs.map((input) => (
+                        <Input
+                            key={input.name}
+                            type={input.type}
+                            placeholder={input.placeholder}
+                            value={formData[input.name] || ""}
+                            onChange={(value) => setFormData({ ...formData, [input.name]: value })}
+                            required={input.required}
+                            ariaLabel={input.placeholder}
+                            className={input.className}
+                        />
+                    ))}
+
+                    {multiSelect && (
+                        <MultiSelect
+                            label={multiSelect.label}
+                            options={multiSelect.options}
+                            selectedOptions={selectedOptions}
+                            onToggle={toggleOption}
+                        />
+                    )}
+
+                    {textarea && (
+                        <Textarea
+                            placeholder={textarea.placeholder}
+                            value={formData[textarea.name] || ""}
+                            onChange={(value) => setFormData({ ...formData, [textarea.name]: value })}
+                            required={textarea.required}
+                            rows={textarea.rows || 5}
+                            ariaLabel={textarea.placeholder}
+                            className={textarea.className}
+                        />
+                    )}
+
+                    <Button
+                        {...getButtonProps(
+                            { text: buttonText, props: getButtonConfigProps() },
+                            0,
+                            theme.defaultButtonVariant,
+                            cls("w-full", buttonClassName),
+                            cls("text-base", buttonTextClassName)
+                        )}
+                        type="submit"
+                    />
+                </div>
+            </form>
+        </div>
+    );
+
+    const mediaContent = (
+        <div ref={mediaContainerRef} className={cls("overflow-hidden rounded-theme-capped card md:relative md:h-full", mediaWrapperClassName)}>
+            <MediaContent
+                imageSrc={imageSrc}
+                videoSrc={videoSrc}
+                imageAlt={imageAlt}
+                videoAriaLabel={videoAriaLabel}
+                imageClassName={cls("w-full md:absolute md:inset-0 md:h-full object-cover", mediaClassName)}
+            />
+        </div>
+    );
+
+    return (
+        <section aria-label={ariaLabel} className={cls("relative py-20 w-full", useInvertedBackground && "bg-foreground", className)}>
+            <div className={cls("w-content-width mx-auto", containerClassName)}>
+                <div className={cls("grid grid-cols-1 md:grid-cols-2 gap-6 md:auto-rows-fr", contentClassName)}>
+                    {mediaPosition === "left" && mediaContent}
+                    {formContent}
+                    {mediaPosition === "right" && mediaContent}
+                </div>
+            </div>
+        </section>
+    );
+};
+
+
+export default ContactSplitForm;
diff --git a/src/components/sections/contact/ContactText.tsx b/src/components/sections/contact/ContactText.tsx
new file mode 100644
index 0000000..69a4aaa
--- /dev/null
+++ b/src/components/sections/contact/ContactText.tsx
@@ -0,0 +1,114 @@
+"use client";
+
+import TextAnimation from "@/components/text/TextAnimation";
+import Button from "@/components/button/Button";
+import HeroBackgrounds, { type HeroBackgroundVariantProps } from "@/components/background/HeroBackgrounds";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { getButtonProps } from "@/lib/buttonUtils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { ButtonConfig } from "@/types/button";
+import type { InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type AnimationType = "entrance-slide" | "reveal-blur" | "background-highlight";
+
+type ContactTextBackgroundProps = Extract<
+    HeroBackgroundVariantProps,
+    | { variant: "plain" }
+    | { variant: "animated-grid" }
+    | { variant: "canvas-reveal" }
+    | { variant: "cell-wave" }
+    | { variant: "downward-rays-animated" }
+    | { variant: "downward-rays-animated-grid" }
+    | { variant: "downward-rays-static" }
+    | { variant: "downward-rays-static-grid" }
+    | { variant: "gradient-bars" }
+    | { variant: "radial-gradient" }
+    | { variant: "rotated-rays-animated" }
+    | { variant: "rotated-rays-animated-grid" }
+    | { variant: "rotated-rays-static" }
+    | { variant: "rotated-rays-static-grid" }
+    | { variant: "sparkles-gradient" }
+>;
+
+interface ContactTextProps {
+    text: string;
+    animationType?: AnimationType;
+    buttons?: ButtonConfig[];
+    background: ContactTextBackgroundProps;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    contentClassName?: string;
+    textClassName?: string;
+    buttonContainerClassName?: string;
+    buttonClassName?: string;
+    buttonTextClassName?: string;
+}
+
+const ContactText = ({
+    text,
+    animationType = "entrance-slide",
+    buttons = [],
+    background,
+    useInvertedBackground = false,
+    ariaLabel = "Contact section",
+    className = "",
+    containerClassName = "",
+    contentClassName = "",
+    textClassName = "",
+    buttonContainerClassName = "",
+    buttonClassName = "",
+    buttonTextClassName = "",
+}: ContactTextProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    return (
+        <section
+            aria-label={ariaLabel}
+            className={cls("relative py-20 w-full", useInvertedBackground && "bg-foreground", className)}
+        >
+            <div className={cls("w-content-width mx-auto relative z-10", containerClassName)}>
+                <div className={cls("relative w-full card rounded-theme-capped py-20 px-10 flex items-center justify-center", contentClassName)}>
+                    <div className="relative z-10 w-full md:w-3/4 mx-auto flex flex-col items-center justify-center gap-8">
+                        <TextAnimation
+                            type={animationType}
+                            text={text}
+                            variant="words-trigger"
+                            as="h2"
+                            className={cls(
+                                "text-4xl md:text-5xl font-medium text-center leading-[1.15]",
+                                shouldUseLightText && "text-background",
+                                textClassName
+                            )}
+                        />
+
+                        {buttons && buttons.length > 0 && (
+                            <div className={cls("flex flex-wrap gap-4 max-md:justify-center", buttonContainerClassName)}>
+                                {buttons.slice(0, 2).map((button, index) => (
+                                    <Button
+                                        key={index}
+                                        {...getButtonProps(
+                                            button,
+                                            index,
+                                            theme.defaultButtonVariant,
+                                            cls("", buttonClassName),
+                                            cls("text-base", buttonTextClassName)
+                                        )}
+                                    />
+                                ))}
+                            </div>
+                        )}
+                    </div>
+                    <div className="absolute inset-0 w-full h-full z-0 rounded-theme-capped overflow-hidden">
+                        <HeroBackgrounds {...background} />
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+
+export default ContactText;
diff --git a/src/components/sections/contact/index.ts b/src/components/sections/contact/index.ts
new file mode 100644
index 0000000..e64d54c
--- /dev/null
+++ b/src/components/sections/contact/index.ts
@@ -0,0 +1,5 @@
+export { default as ContactCTA } from './ContactCTA';
+export { default as ContactCenter } from './ContactCenter';
+export { default as ContactSplit } from './ContactSplit';
+export { default as ContactSplitForm } from './ContactSplitForm';
+export { default as ContactText } from './ContactText';
diff --git a/src/components/sections/faq/FaqBase.tsx b/src/components/sections/faq/FaqBase.tsx
new file mode 100644
index 0000000..5f7feeb
--- /dev/null
+++ b/src/components/sections/faq/FaqBase.tsx
@@ -0,0 +1,153 @@
+"use client";
+
+import { useState } from "react";
+import CardStackTextBox from "@/components/cardStack/CardStackTextBox";
+import Accordion from "@/components/Accordion";
+import { cls } from "@/lib/utils";
+import { useButtonAnimation } from "@/components/hooks/useButtonAnimation";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+interface FaqItem {
+    id: string;
+    title: string;
+    content: string;
+}
+
+interface FaqBaseProps {
+    faqs: FaqItem[];
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    tagAnimation?: ButtonAnimationType;
+    buttons?: ButtonConfig[];
+    buttonAnimation?: ButtonAnimationType;
+    faqsAnimation: ButtonAnimationType;
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    animationType?: "smooth" | "instant";
+    showCard?: boolean;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    textBoxTitleClassName?: string;
+    titleImageWrapperClassName?: string;
+    titleImageClassName?: string;
+    textBoxDescriptionClassName?: string;
+    textBoxClassName?: string;
+    textBoxTagClassName?: string;
+    textBoxButtonContainerClassName?: string;
+    textBoxButtonClassName?: string;
+    textBoxButtonTextClassName?: string;
+    faqsContainerClassName?: string;
+    accordionClassName?: string;
+    accordionTitleClassName?: string;
+    accordionIconContainerClassName?: string;
+    accordionIconClassName?: string;
+    accordionContentClassName?: string;
+    separatorClassName?: string;
+}
+
+const FaqBase = ({
+    faqs,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    tagAnimation = "opacity",
+    buttons = [],
+    buttonAnimation = "slide-up",
+    faqsAnimation,
+    textboxLayout,
+    useInvertedBackground = false,
+    animationType = "smooth",
+    showCard = true,
+    ariaLabel = "FAQ section",
+    className = "",
+    containerClassName = "",
+    textBoxTitleClassName = "",
+    titleImageWrapperClassName = "",
+    titleImageClassName = "",
+    textBoxDescriptionClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+    faqsContainerClassName = "",
+    accordionClassName = "",
+    accordionTitleClassName = "",
+    accordionIconContainerClassName = "",
+    accordionIconClassName = "",
+    accordionContentClassName = "",
+    separatorClassName = "",
+}: FaqBaseProps) => {
+    const [activeIndex, setActiveIndex] = useState<number | null>(null);
+    const { containerRef: faqsContainerRef } = useButtonAnimation({ animationType: faqsAnimation });
+
+    const handleToggle = (index: number) => {
+        setActiveIndex(activeIndex === index ? null : index);
+    };
+
+    return (
+        <section aria-label={ariaLabel} className={cls("relative py-20 w-full", useInvertedBackground && "bg-foreground", className)}>
+            <div className={cls("w-content-width mx-auto flex flex-col gap-8", containerClassName)}>
+                {(title || description) && (
+                    <CardStackTextBox
+                        title={title}
+                        titleSegments={titleSegments}
+                        description={description}
+                        tag={tag}
+                        tagIcon={tagIcon}
+                        tagAnimation={tagAnimation}
+                        buttons={buttons}
+                        buttonAnimation={buttonAnimation}
+                        textboxLayout={textboxLayout}
+                        useInvertedBackground={useInvertedBackground}
+                        textBoxClassName={textBoxClassName}
+                        titleClassName={textBoxTitleClassName}
+                        titleImageWrapperClassName={titleImageWrapperClassName}
+                        titleImageClassName={titleImageClassName}
+                        descriptionClassName={textBoxDescriptionClassName}
+                        tagClassName={textBoxTagClassName}
+                        buttonContainerClassName={textBoxButtonContainerClassName}
+                        buttonClassName={textBoxButtonClassName}
+                        buttonTextClassName={textBoxButtonTextClassName}
+                    />
+                )}
+
+                <div ref={faqsContainerRef} className={cls("flex flex-col gap-4", faqsContainerClassName)}>
+                    {faqs.map((faq, index) => (
+                        <div key={faq.id}>
+                            <Accordion
+                                index={index}
+                                isActive={activeIndex === index}
+                                onToggle={handleToggle}
+                                title={faq.title}
+                                content={faq.content}
+                                animationType={animationType}
+                                showCard={showCard}
+                                useInvertedBackground={useInvertedBackground}
+                                className={accordionClassName}
+                                titleClassName={accordionTitleClassName}
+                                iconContainerClassName={accordionIconContainerClassName}
+                                iconClassName={accordionIconClassName}
+                                contentClassName={accordionContentClassName}
+                            />
+                            {!showCard && index < faqs.length - 1 && (
+                                <div className={cls("w-full border-b border-foreground/10 mt-4", separatorClassName)} />
+                            )}
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </section>
+    );
+};
+
+
+export default FaqBase;
diff --git a/src/components/sections/faq/FaqDouble.tsx b/src/components/sections/faq/FaqDouble.tsx
new file mode 100644
index 0000000..ca4e8b6
--- /dev/null
+++ b/src/components/sections/faq/FaqDouble.tsx
@@ -0,0 +1,178 @@
+"use client";
+
+import { useState, useCallback } from "react";
+import CardStackTextBox from "@/components/cardStack/CardStackTextBox";
+import Accordion from "@/components/Accordion";
+import { cls } from "@/lib/utils";
+import { useButtonAnimation } from "@/components/hooks/useButtonAnimation";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+interface FaqItem {
+    id: string;
+    title: string;
+    content: string;
+}
+
+interface FaqDoubleProps {
+    faqs: FaqItem[];
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    tagAnimation?: ButtonAnimationType;
+    buttons?: ButtonConfig[];
+    buttonAnimation?: ButtonAnimationType;
+    faqsAnimation: ButtonAnimationType;
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    animationType?: "smooth" | "instant";
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    textBoxTitleClassName?: string;
+    titleImageWrapperClassName?: string;
+    titleImageClassName?: string;
+    textBoxDescriptionClassName?: string;
+    textBoxClassName?: string;
+    textBoxTagClassName?: string;
+    textBoxButtonContainerClassName?: string;
+    textBoxButtonClassName?: string;
+    textBoxButtonTextClassName?: string;
+    faqsContainerClassName?: string;
+    columnClassName?: string;
+    accordionClassName?: string;
+    accordionTitleClassName?: string;
+    accordionIconContainerClassName?: string;
+    accordionIconClassName?: string;
+    accordionContentClassName?: string;
+}
+
+const FaqDouble = ({
+    faqs,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    tagAnimation = "opacity",
+    buttons = [],
+    buttonAnimation = "slide-up",
+    faqsAnimation,
+    textboxLayout,
+    useInvertedBackground = false,
+    animationType = "smooth",
+    ariaLabel = "FAQ section",
+    className = "",
+    containerClassName = "",
+    textBoxTitleClassName = "",
+    titleImageWrapperClassName = "",
+    titleImageClassName = "",
+    textBoxDescriptionClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+    faqsContainerClassName = "",
+    columnClassName = "",
+    accordionClassName = "",
+    accordionTitleClassName = "",
+    accordionIconContainerClassName = "",
+    accordionIconClassName = "",
+    accordionContentClassName = "",
+}: FaqDoubleProps) => {
+    const [activeIndex, setActiveIndex] = useState<number | null>(null);
+    const { containerRef: faqsContainerRef } = useButtonAnimation({ animationType: faqsAnimation });
+
+    const handleToggle = useCallback((index: number) => {
+        setActiveIndex((prevActiveIndex) =>
+            prevActiveIndex === index ? null : index
+        );
+    }, []);
+
+    const halfLength = Math.ceil(faqs.length / 2);
+    const firstHalf = faqs.slice(0, halfLength);
+    const secondHalf = faqs.slice(halfLength);
+
+    return (
+        <section aria-label={ariaLabel} className={cls("relative py-20 w-full", useInvertedBackground && "bg-foreground", className)}>
+            <div className={cls("w-content-width mx-auto flex flex-col gap-8", containerClassName)}>
+                {(title || description) && (
+                    <CardStackTextBox
+                        title={title}
+                        titleSegments={titleSegments}
+                        description={description}
+                        tag={tag}
+                        tagIcon={tagIcon}
+                        tagAnimation={tagAnimation}
+                        buttons={buttons}
+                        buttonAnimation={buttonAnimation}
+                        textboxLayout={textboxLayout}
+                        useInvertedBackground={useInvertedBackground}
+                        textBoxClassName={textBoxClassName}
+                        titleClassName={textBoxTitleClassName}
+                        titleImageWrapperClassName={titleImageWrapperClassName}
+                        titleImageClassName={titleImageClassName}
+                        descriptionClassName={textBoxDescriptionClassName}
+                        tagClassName={textBoxTagClassName}
+                        buttonContainerClassName={textBoxButtonContainerClassName}
+                        buttonClassName={textBoxButtonClassName}
+                        buttonTextClassName={textBoxButtonTextClassName}
+                    />
+                )}
+
+                <div ref={faqsContainerRef} className={cls("card p-4 rounded-theme-capped flex flex-col md:flex-row gap-4 overflow-hidden", faqsContainerClassName)}>
+                    <div className={cls("relative z-1 flex-1 flex flex-col gap-4", columnClassName)}>
+                        {firstHalf.map((faq, index) => (
+                            <Accordion
+                                key={faq.id}
+                                index={index}
+                                isActive={activeIndex === index}
+                                onToggle={handleToggle}
+                                title={faq.title}
+                                content={faq.content}
+                                animationType={animationType}
+                                useInvertedBackground={useInvertedBackground}
+                                className={accordionClassName}
+                                titleClassName={accordionTitleClassName}
+                                iconContainerClassName={accordionIconContainerClassName}
+                                iconClassName={accordionIconClassName}
+                                contentClassName={accordionContentClassName}
+                            />
+                        ))}
+                    </div>
+                    {secondHalf.length > 0 && (
+                        <div className={cls("relative z-1 flex-1 flex flex-col gap-4", columnClassName)}>
+                            {secondHalf.map((faq, index) => {
+                                const actualIndex = index + halfLength;
+                                return (
+                                    <Accordion
+                                        key={faq.id}
+                                        index={actualIndex}
+                                        isActive={activeIndex === actualIndex}
+                                        onToggle={handleToggle}
+                                        title={faq.title}
+                                        content={faq.content}
+                                        animationType={animationType}
+                                        useInvertedBackground={useInvertedBackground}
+                                        className={accordionClassName}
+                                        titleClassName={accordionTitleClassName}
+                                        iconContainerClassName={accordionIconContainerClassName}
+                                        iconClassName={accordionIconClassName}
+                                        contentClassName={accordionContentClassName}
+                                    />
+                                );
+                            })}
+                        </div>
+                    )}
+                </div>
+            </div>
+        </section>
+    );
+};
+
+
+export default FaqDouble;
diff --git a/src/components/sections/faq/FaqSplitMedia.tsx b/src/components/sections/faq/FaqSplitMedia.tsx
new file mode 100644
index 0000000..e05b0c6
--- /dev/null
+++ b/src/components/sections/faq/FaqSplitMedia.tsx
@@ -0,0 +1,199 @@
+"use client";
+
+import { useState, useCallback } from "react";
+import CardStackTextBox from "@/components/cardStack/CardStackTextBox";
+import Accordion from "@/components/Accordion";
+import MediaContent from "@/components/shared/MediaContent";
+import { cls } from "@/lib/utils";
+import { useButtonAnimation } from "@/components/hooks/useButtonAnimation";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+interface FaqItem {
+    id: string;
+    title: string;
+    content: string;
+}
+
+interface FaqSplitMediaProps {
+    faqs: FaqItem[];
+    imageSrc?: string;
+    videoSrc?: string;
+    imageAlt?: string;
+    videoAriaLabel?: string;
+    mediaPosition?: "left" | "right";
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    tagAnimation?: ButtonAnimationType;
+    buttons?: ButtonConfig[];
+    buttonAnimation?: ButtonAnimationType;
+    faqsAnimation: ButtonAnimationType;
+    mediaAnimation?: ButtonAnimationType;
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    animationType?: "smooth" | "instant";
+    showCard?: boolean;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    textBoxTitleClassName?: string;
+    titleImageWrapperClassName?: string;
+    titleImageClassName?: string;
+    textBoxDescriptionClassName?: string;
+    textBoxClassName?: string;
+    textBoxTagClassName?: string;
+    textBoxButtonContainerClassName?: string;
+    textBoxButtonClassName?: string;
+    textBoxButtonTextClassName?: string;
+    contentClassName?: string;
+    mediaWrapperClassName?: string;
+    mediaClassName?: string;
+    faqsContainerClassName?: string;
+    accordionClassName?: string;
+    accordionTitleClassName?: string;
+    accordionIconContainerClassName?: string;
+    accordionIconClassName?: string;
+    accordionContentClassName?: string;
+    separatorClassName?: string;
+}
+
+const FaqSplitMedia = ({
+    faqs,
+    imageSrc,
+    videoSrc,
+    imageAlt = "",
+    videoAriaLabel = "FAQ section video",
+    mediaPosition = "left",
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    tagAnimation = "opacity",
+    buttons = [],
+    buttonAnimation = "slide-up",
+    faqsAnimation,
+    mediaAnimation = "none",
+    textboxLayout,
+    useInvertedBackground = false,
+    animationType = "smooth",
+    showCard = true,
+    ariaLabel = "FAQ section",
+    className = "",
+    containerClassName = "",
+    textBoxTitleClassName = "",
+    titleImageWrapperClassName = "",
+    titleImageClassName = "",
+    textBoxDescriptionClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+    contentClassName = "",
+    mediaWrapperClassName = "",
+    mediaClassName = "",
+    faqsContainerClassName = "",
+    accordionClassName = "",
+    accordionTitleClassName = "",
+    accordionIconContainerClassName = "",
+    accordionIconClassName = "",
+    accordionContentClassName = "",
+    separatorClassName = "",
+}: FaqSplitMediaProps) => {
+    const [activeIndex, setActiveIndex] = useState<number | null>(null);
+    const { containerRef: faqsContainerRef } = useButtonAnimation({ animationType: faqsAnimation });
+    const { containerRef: mediaContainerRef } = useButtonAnimation({ animationType: mediaAnimation });
+
+    const handleToggle = useCallback((index: number) => {
+        setActiveIndex((prevActiveIndex) =>
+            prevActiveIndex === index ? null : index
+        );
+    }, []);
+
+    return (
+        <section aria-label={ariaLabel} className={cls("relative py-20 w-full", useInvertedBackground && "bg-foreground", className)}>
+            <div className={cls("w-content-width mx-auto flex flex-col gap-8", containerClassName)}>
+                {(title || description) && (
+                    <CardStackTextBox
+                        title={title}
+                        titleSegments={titleSegments}
+                        description={description}
+                        tag={tag}
+                        tagIcon={tagIcon}
+                        tagAnimation={tagAnimation}
+                        buttons={buttons}
+                        buttonAnimation={buttonAnimation}
+                        textboxLayout={textboxLayout}
+                        useInvertedBackground={useInvertedBackground}
+                        textBoxClassName={textBoxClassName}
+                        titleClassName={textBoxTitleClassName}
+                        titleImageWrapperClassName={titleImageWrapperClassName}
+                        titleImageClassName={titleImageClassName}
+                        descriptionClassName={textBoxDescriptionClassName}
+                        tagClassName={textBoxTagClassName}
+                        buttonContainerClassName={textBoxButtonContainerClassName}
+                        buttonClassName={textBoxButtonClassName}
+                        buttonTextClassName={textBoxButtonTextClassName}
+                    />
+                )}
+
+                <div className={cls("grid grid-cols-1 md:grid-cols-5 gap-4 md:auto-rows-fr", contentClassName)}>
+                    {mediaPosition === "left" && (
+                        <div ref={mediaContainerRef} className={cls("overflow-hidden rounded-theme-capped card relative h-80 md:h-auto col-span-1 md:col-span-2", mediaWrapperClassName)}>
+                            <MediaContent
+                                imageSrc={imageSrc}
+                                videoSrc={videoSrc}
+                                imageAlt={imageAlt}
+                                videoAriaLabel={videoAriaLabel}
+                                imageClassName={cls("absolute z-1 inset-0 w-full h-full object-cover", mediaClassName)}
+                            />
+                        </div>
+                    )}
+                    <div ref={faqsContainerRef} className={cls("relative z-1 col-span-1 md:col-span-3 flex flex-col gap-4", faqsContainerClassName)}>
+                        {faqs.map((faq, index) => (
+                            <div key={faq.id}>
+                                <Accordion
+                                    index={index}
+                                    isActive={activeIndex === index}
+                                    onToggle={handleToggle}
+                                    title={faq.title}
+                                    content={faq.content}
+                                    animationType={animationType}
+                                    showCard={showCard}
+                                    useInvertedBackground={useInvertedBackground}
+                                    className={accordionClassName}
+                                    titleClassName={accordionTitleClassName}
+                                    iconContainerClassName={accordionIconContainerClassName}
+                                    iconClassName={accordionIconClassName}
+                                    contentClassName={accordionContentClassName}
+                                />
+                                {!showCard && index < faqs.length - 1 && (
+                                    <div className={cls("w-full border-b border-foreground/10 mt-4", separatorClassName)} />
+                                )}
+                            </div>
+                        ))}
+                    </div>
+                    {mediaPosition === "right" && (
+                        <div ref={mediaContainerRef} className={cls("overflow-hidden rounded-theme card relative h-80 md:h-auto col-span-1 md:col-span-2", mediaWrapperClassName)}>
+                            <MediaContent
+                                imageSrc={imageSrc}
+                                videoSrc={videoSrc}
+                                imageAlt={imageAlt}
+                                videoAriaLabel={videoAriaLabel}
+                                imageClassName={cls("absolute z-1 inset-0 w-full h-full object-cover", mediaClassName)}
+                            />
+                        </div>
+                    )}
+                </div>
+            </div>
+        </section>
+    );
+};
+
+
+export default FaqSplitMedia;
diff --git a/src/components/sections/faq/FaqSplitText.tsx b/src/components/sections/faq/FaqSplitText.tsx
new file mode 100644
index 0000000..f8ef751
--- /dev/null
+++ b/src/components/sections/faq/FaqSplitText.tsx
@@ -0,0 +1,157 @@
+"use client";
+
+import { useState, useCallback } from "react";
+import TextAnimation from "@/components/text/TextAnimation";
+import Accordion from "@/components/Accordion";
+import Button from "@/components/button/Button";
+import { cls } from "@/lib/utils";
+import { getButtonProps } from "@/lib/buttonUtils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import { useButtonAnimation } from "@/components/hooks/useButtonAnimation";
+import type { AnimationType } from "@/components/text/types";
+import type { ButtonConfig, ButtonAnimationType } from "@/components/cardStack/types";
+
+interface FaqItem {
+    id: string;
+    title: string;
+    content: string;
+}
+
+interface FaqSplitTextProps {
+    faqs: FaqItem[];
+    sideTitle: string;
+    sideDescription?: string;
+    buttons?: ButtonConfig[];
+    buttonAnimation?: ButtonAnimationType;
+    faqsAnimation: ButtonAnimationType;
+    textPosition?: "left" | "right";
+    useInvertedBackground: boolean;
+    animationType?: "smooth" | "instant";
+    showCard?: boolean;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    contentClassName?: string;
+    textContainerClassName?: string;
+    sideTitleClassName?: string;
+    sideDescriptionClassName?: string;
+    buttonContainerClassName?: string;
+    buttonClassName?: string;
+    buttonTextClassName?: string;
+    faqsContainerClassName?: string;
+    accordionClassName?: string;
+    accordionTitleClassName?: string;
+    accordionIconContainerClassName?: string;
+    accordionIconClassName?: string;
+    accordionContentClassName?: string;
+    separatorClassName?: string;
+}
+
+const FaqSplitText = ({
+    faqs,
+    sideTitle,
+    sideDescription,
+    buttons = [],
+    buttonAnimation = "none",
+    faqsAnimation,
+    textPosition = "left",
+    useInvertedBackground,
+    animationType = "smooth",
+    showCard = true,
+    ariaLabel = "FAQ section",
+    className = "",
+    containerClassName = "",
+    contentClassName = "",
+    textContainerClassName = "",
+    sideTitleClassName = "",
+    sideDescriptionClassName = "",
+    buttonContainerClassName = "",
+    buttonClassName = "",
+    buttonTextClassName = "",
+    faqsContainerClassName = "",
+    accordionClassName = "",
+    accordionTitleClassName = "",
+    accordionIconContainerClassName = "",
+    accordionIconClassName = "",
+    accordionContentClassName = "",
+    separatorClassName = "",
+}: FaqSplitTextProps) => {
+    const [activeIndex, setActiveIndex] = useState<number | null>(null);
+    const theme = useTheme();
+    const { containerRef: buttonContainerRef } = useButtonAnimation({ animationType: buttonAnimation });
+    const { containerRef: faqsContainerRef } = useButtonAnimation({ animationType: faqsAnimation });
+
+    const handleToggle = useCallback((index: number) => {
+        setActiveIndex((prevActiveIndex) =>
+            prevActiveIndex === index ? null : index
+        );
+    }, []);
+
+    const textContent = (
+        <div className={cls("w-full md:w-2/5 flex flex-col gap-3", textContainerClassName)}>
+            <TextAnimation
+                type={theme.defaultTextAnimation as AnimationType}
+                text={sideTitle}
+                variant="trigger"
+                className={cls("text-6xl font-medium", useInvertedBackground && "text-background", sideTitleClassName)}
+            />
+            {sideDescription && (
+                <TextAnimation
+                    type={theme.defaultTextAnimation as AnimationType}
+                    text={sideDescription}
+                    variant="words-trigger"
+                    className={cls("text-lg leading-[1.2]", useInvertedBackground && "text-background", sideDescriptionClassName)}
+                />
+            )}
+            {buttons && buttons.length > 0 && (
+                <div ref={buttonContainerRef} className={cls("flex flex-wrap gap-4 max-md:justify-center", buttonContainerClassName)}>
+                    {buttons.slice(0, 2).map((button, index) => (
+                        <Button key={`${button.text}-${index}`} {...getButtonProps(button, index, theme.defaultButtonVariant, buttonClassName, buttonTextClassName)} />
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+
+    const faqsContent = (
+        <div ref={faqsContainerRef} className={cls("w-full md:w-3/5 flex flex-col gap-4", faqsContainerClassName)}>
+            {faqs.map((faq, index) => (
+                <div key={faq.id}>
+                    <Accordion
+                        index={index}
+                        isActive={activeIndex === index}
+                        onToggle={handleToggle}
+                        title={faq.title}
+                        content={faq.content}
+                        animationType={animationType}
+                        showCard={showCard}
+                        useInvertedBackground={useInvertedBackground}
+                        className={accordionClassName}
+                        titleClassName={accordionTitleClassName}
+                        iconContainerClassName={accordionIconContainerClassName}
+                        iconClassName={accordionIconClassName}
+                        contentClassName={accordionContentClassName}
+                    />
+                    {!showCard && index < faqs.length - 1 && (
+                        <div className={cls("w-full border-b border-foreground/10 mt-4", separatorClassName)} />
+                    )}
+                </div>
+            ))}
+        </div>
+    );
+
+    return (
+        <section aria-label={ariaLabel} className={cls("relative py-20 w-full", useInvertedBackground && "bg-foreground", className)}>
+            <div className={cls("w-content-width mx-auto", containerClassName)}>
+                <div className={cls("flex flex-col md:flex-row gap-6 md:gap-10", contentClassName)}>
+                    {textPosition === "left" && textContent}
+                    {faqsContent}
+                    {textPosition === "right" && textContent}
+                </div>
+            </div>
+        </section>
+    );
+};
+
+
+export default FaqSplitText;
diff --git a/src/components/sections/faq/index.ts b/src/components/sections/faq/index.ts
new file mode 100644
index 0000000..a6d25f3
--- /dev/null
+++ b/src/components/sections/faq/index.ts
@@ -0,0 +1,4 @@
+export { default as FaqBase } from './FaqBase';
+export { default as FaqDouble } from './FaqDouble';
+export { default as FaqSplitMedia } from './FaqSplitMedia';
+export { default as FaqSplitText } from './FaqSplitText';
diff --git a/src/components/sections/feature/FeatureBento.tsx b/src/components/sections/feature/FeatureBento.tsx
new file mode 100644
index 0000000..5106d5f
--- /dev/null
+++ b/src/components/sections/feature/FeatureBento.tsx
@@ -0,0 +1,299 @@
+"use client";
+
+import CardStack from "@/components/cardStack/CardStack";
+import Button from "@/components/button/Button";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { getButtonProps } from "@/lib/buttonUtils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import { BentoGlobe } from "@/components/bento/BentoGlobe";
+import BentoIconInfoCards from "@/components/bento/BentoIconInfoCards";
+import BentoAnimatedBarChart from "@/components/bento/BentoAnimatedBarChart";
+import Bento3DStackCards from "@/components/bento/Bento3DStackCards";
+import Bento3DTaskList, { type TaskItem } from "@/components/bento/Bento3DTaskList";
+import BentoOrbitingIcons, { type OrbitingItem } from "@/components/bento/BentoOrbitingIcons";
+import BentoMap from "@/components/bento/BentoMap";
+import BentoMarquee from "@/components/bento/BentoMarquee";
+import BentoLineChart from "@/components/bento/BentoLineChart/BentoLineChart";
+import BentoPhoneAnimation, { type PhoneApp, type PhoneApps8 } from "@/components/bento/BentoPhoneAnimation";
+import BentoChatAnimation, { type ChatExchange } from "@/components/bento/BentoChatAnimation";
+import Bento3DCardGrid from "@/components/bento/Bento3DCardGrid";
+import BentoRevealIcon from "@/components/bento/BentoRevealIcon";
+import BentoTimeline, { type TimelineItem } from "@/components/bento/BentoTimeline";
+import BentoMediaStack, { type MediaStackItem } from "@/components/bento/BentoMediaStack";
+import type { LucideIcon } from "lucide-react";
+
+export type { PhoneApp, PhoneApps8, ChatExchange, TimelineItem, MediaStackItem };
+import type { ButtonConfig, CardAnimationTypeWith3D, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
+
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type BentoAnimationType = Exclude<CardAnimationTypeWith3D, "depth-3d" | "scale-rotate">;
+
+export type BentoInfoItem = {
+  icon: LucideIcon;
+  label: string;
+  value: string;
+};
+
+export type Bento3DItem = {
+  icon: LucideIcon;
+  title: string;
+  subtitle: string;
+  detail: string;
+};
+
+type BaseFeatureCard = {
+  title: string;
+  description: string;
+  button?: ButtonConfig;
+};
+
+export type FeatureCard = BaseFeatureCard & (
+  | {
+      bentoComponent: "icon-info-cards";
+      items: BentoInfoItem[];
+    }
+  | {
+      bentoComponent: "3d-stack-cards";
+      items: [Bento3DItem, Bento3DItem, Bento3DItem];
+    }
+  | {
+      bentoComponent: "3d-task-list";
+      title: string;
+      items: TaskItem[];
+    }
+  | {
+      bentoComponent: "orbiting-icons";
+      centerIcon: LucideIcon;
+      items: OrbitingItem[];
+    }
+  | ({
+      bentoComponent: "marquee";
+      centerIcon: LucideIcon;
+    } & (
+      | { variant: "text"; texts: string[] }
+      | { variant: "icon"; icons: LucideIcon[] }
+    ))
+  | {
+      bentoComponent: "globe" | "animated-bar-chart" | "map" | "line-chart";
+      items?: never;
+    }
+  | {
+      bentoComponent: "3d-card-grid";
+      items: [{ name: string; icon: LucideIcon }, { name: string; icon: LucideIcon }, { name: string; icon: LucideIcon }, { name: string; icon: LucideIcon }];
+      centerIcon: LucideIcon;
+    }
+  | {
+      bentoComponent: "phone";
+      statusIcon: LucideIcon;
+      alertIcon: LucideIcon;
+      alertTitle: string;
+      alertMessage: string;
+      apps: PhoneApps8;
+    }
+  | {
+      bentoComponent: "chat";
+      aiIcon: LucideIcon;
+      userIcon: LucideIcon;
+      exchanges: ChatExchange[];
+      placeholder: string;
+    }
+  | {
+      bentoComponent: "reveal-icon";
+      icon: LucideIcon;
+    }
+  | {
+      bentoComponent: "timeline";
+      heading: string;
+      subheading: string;
+      items: [TimelineItem, TimelineItem, TimelineItem];
+      completedLabel: string;
+    }
+  | {
+      bentoComponent: "media-stack";
+      items: [MediaStackItem, MediaStackItem, MediaStackItem];
+    }
+);
+
+interface FeatureBentoProps {
+  features: FeatureCard[];
+  carouselMode?: "auto" | "buttons";
+  animationType: BentoAnimationType;
+  title: string;
+  titleSegments?: TitleSegment[];
+  description: string;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  tagAnimation?: ButtonAnimationType;
+  buttons?: ButtonConfig[];
+  buttonAnimation?: ButtonAnimationType;
+  textboxLayout: TextboxLayout;
+  useInvertedBackground: InvertedBackground;
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  cardClassName?: string;
+  textBoxTitleClassName?: string;
+  textBoxTitleImageWrapperClassName?: string;
+  textBoxTitleImageClassName?: string;
+  textBoxDescriptionClassName?: string;
+  cardTitleClassName?: string;
+  cardDescriptionClassName?: string;
+  cardButtonClassName?: string;
+  cardButtonTextClassName?: string;
+  gridClassName?: string;
+  carouselClassName?: string;
+  controlsClassName?: string;
+  textBoxClassName?: string;
+  textBoxTagClassName?: string;
+  textBoxButtonContainerClassName?: string;
+  textBoxButtonClassName?: string;
+  textBoxButtonTextClassName?: string;
+}
+
+const FeatureBento = ({
+  features,
+  carouselMode = "buttons",
+  animationType,
+  title,
+  titleSegments,
+  description,
+  tag,
+  tagIcon,
+  tagAnimation = "opacity",
+  buttons = [],
+  buttonAnimation = "slide-up",
+  textboxLayout,
+  useInvertedBackground = false,
+  ariaLabel = "Feature section",
+  className = "",
+  containerClassName = "",
+  cardClassName = "",
+  textBoxTitleClassName = "",
+  textBoxTitleImageWrapperClassName = "",
+  textBoxTitleImageClassName = "",
+  textBoxDescriptionClassName = "",
+  cardTitleClassName = "",
+  cardDescriptionClassName = "",
+  cardButtonClassName = "",
+  cardButtonTextClassName = "",
+  gridClassName = "",
+  carouselClassName = "",
+  controlsClassName = "",
+  textBoxClassName = "",
+  textBoxTagClassName = "",
+  textBoxButtonContainerClassName = "",
+  textBoxButtonClassName = "",
+  textBoxButtonTextClassName = "",
+}: FeatureBentoProps) => {
+  const theme = useTheme();
+  const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+  const getBentoComponent = (feature: FeatureCard) => {
+    switch (feature.bentoComponent) {
+      case "globe":
+        return (
+          <div className="relative w-full h-full min-h-0" style={{
+            maskImage: "linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%), linear-gradient(to bottom, black 40%, transparent 100%)",
+            WebkitMaskImage: "linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%), linear-gradient(to bottom, black 40%, transparent 100%)",
+            maskComposite: "intersect",
+            WebkitMaskComposite: "source-in"
+          }}>
+            <BentoGlobe className="w-full scale-150 mt-[15%]" />
+          </div>
+        );
+      case "icon-info-cards":
+        return <BentoIconInfoCards items={feature.items} useInvertedBackground={useInvertedBackground} />;
+      case "animated-bar-chart":
+        return <BentoAnimatedBarChart />;
+      case "3d-stack-cards":
+        return <Bento3DStackCards cards={feature.items.map(item => ({ Icon: item.icon, title: item.title, subtitle: item.subtitle, detail: item.detail }))} useInvertedBackground={useInvertedBackground} />;
+      case "3d-task-list":
+        return <Bento3DTaskList title={feature.title} items={feature.items} useInvertedBackground={useInvertedBackground} />;
+      case "orbiting-icons":
+        return <BentoOrbitingIcons centerIcon={feature.centerIcon} items={feature.items} useInvertedBackground={useInvertedBackground} />;
+      case "marquee":
+        return feature.variant === "text"
+          ? <BentoMarquee centerIcon={feature.centerIcon} variant="text" texts={feature.texts} useInvertedBackground={useInvertedBackground} />
+          : <BentoMarquee centerIcon={feature.centerIcon} variant="icon" icons={feature.icons} useInvertedBackground={useInvertedBackground} />;
+      case "map":
+        return <BentoMap useInvertedBackground={useInvertedBackground} />;
+      case "line-chart":
+        return <BentoLineChart useInvertedBackground={useInvertedBackground} />;
+      case "3d-card-grid":
+        return <Bento3DCardGrid items={feature.items} centerIcon={feature.centerIcon} useInvertedBackground={useInvertedBackground} />;
+      case "phone":
+        return <BentoPhoneAnimation statusIcon={feature.statusIcon} alertIcon={feature.alertIcon} alertTitle={feature.alertTitle} alertMessage={feature.alertMessage} apps={feature.apps} useInvertedBackground={useInvertedBackground} />;
+      case "chat":
+        return <BentoChatAnimation aiIcon={feature.aiIcon} userIcon={feature.userIcon} exchanges={feature.exchanges} placeholder={feature.placeholder} useInvertedBackground={useInvertedBackground} />;
+      case "reveal-icon":
+        return <BentoRevealIcon icon={feature.icon} useInvertedBackground={useInvertedBackground} />;
+      case "timeline":
+        return <BentoTimeline heading={feature.heading} subheading={feature.subheading} items={feature.items} completedLabel={feature.completedLabel} useInvertedBackground={useInvertedBackground} />;
+      case "media-stack":
+        return <BentoMediaStack items={feature.items} useInvertedBackground={useInvertedBackground} />;
+    }
+  };
+
+  return (
+    <CardStack
+      mode={carouselMode}
+      gridVariant="uniform-all-items-equal"
+      uniformGridCustomHeightClasses="min-h-0"
+      animationType={animationType}
+      carouselThreshold={4}
+
+      title={title}
+      titleSegments={titleSegments}
+      description={description}
+      tag={tag}
+      tagIcon={tagIcon}
+      tagAnimation={tagAnimation}
+      buttons={buttons}
+      buttonAnimation={buttonAnimation}
+      textboxLayout={textboxLayout}
+      useInvertedBackground={useInvertedBackground}
+      className={className}
+      containerClassName={containerClassName}
+      gridClassName={gridClassName}
+      carouselClassName={carouselClassName}
+      carouselItemClassName="w-carousel-item-3 xl:w-carousel-item-3!"
+      controlsClassName={controlsClassName}
+      textBoxClassName={textBoxClassName}
+      titleClassName={textBoxTitleClassName}
+      titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
+      titleImageClassName={textBoxTitleImageClassName}
+      descriptionClassName={textBoxDescriptionClassName}
+      tagClassName={textBoxTagClassName}
+      buttonContainerClassName={textBoxButtonContainerClassName}
+      buttonClassName={textBoxButtonClassName}
+      buttonTextClassName={textBoxButtonTextClassName}
+      ariaLabel={ariaLabel}
+    >
+      {features.map((feature, index) => (
+        <div
+          key={`${feature.title}-${index}`}
+          className={cls("card flex flex-col gap-4 p-5 rounded-theme-capped min-h-0 h-full", cardClassName)}
+        >
+          <div className="relative w-full h-70 min-h-0 overflow-hidden">
+            {getBentoComponent(feature)}
+          </div>
+          <div className="relative z-1 flex flex-col gap-1">
+            <h3 className={cls("text-2xl font-medium leading-tight", shouldUseLightText && "text-background", cardTitleClassName)}>
+              {feature.title}
+            </h3>
+            <p className={cls("text-sm leading-tight", shouldUseLightText ? "text-background" : "text-foreground", cardDescriptionClassName)}>
+              {feature.description}
+            </p>
+          </div>
+          {feature.button && (
+            <Button {...getButtonProps(feature.button, 0, theme.defaultButtonVariant, cls("w-full", cardButtonClassName), cardButtonTextClassName)} />
+          )}
+        </div>
+      ))}
+    </CardStack>
+  );
+};
+
+
+export default FeatureBento;
diff --git a/src/components/sections/feature/FeatureCardEight.tsx b/src/components/sections/feature/FeatureCardEight.tsx
new file mode 100644
index 0000000..35592f4
--- /dev/null
+++ b/src/components/sections/feature/FeatureCardEight.tsx
@@ -0,0 +1,155 @@
+"use client";
+
+import TimelineHorizontalCardStack from "@/components/cardStack/layouts/timelines/TimelineHorizontalCardStack";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, ButtonAnimationType, TitleSegment } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type FeatureCard = {
+    title: string;
+    description: string;
+    imageAlt?: string;
+    videoAriaLabel?: string;
+} & (
+        | { imageSrc: string; videoSrc?: never }
+        | { videoSrc: string; imageSrc?: never }
+    );
+
+interface FeatureCardEightProps {
+    features: FeatureCard[];
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    tagAnimation?: ButtonAnimationType;
+    buttons?: ButtonConfig[];
+    buttonAnimation?: ButtonAnimationType;
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    textBoxTitleClassName?: string;
+    textBoxDescriptionClassName?: string;
+    textBoxClassName?: string;
+    textBoxTagClassName?: string;
+    textBoxButtonContainerClassName?: string;
+    textBoxButtonClassName?: string;
+    textBoxButtonTextClassName?: string;
+    titleImageWrapperClassName?: string;
+    titleImageClassName?: string;
+    cardClassName?: string;
+    progressBarClassName?: string;
+    cardContentClassName?: string;
+    stepNumberClassName?: string;
+    cardTitleClassName?: string;
+    cardDescriptionClassName?: string;
+    mediaContainerClassName?: string;
+    mediaClassName?: string;
+}
+
+const FeatureCardEight = ({
+    features,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    tagAnimation = "opacity",
+    buttons = [],
+    buttonAnimation = "slide-up",
+    textboxLayout,
+    useInvertedBackground = false,
+    ariaLabel = "Feature section",
+    className = "",
+    containerClassName = "",
+    textBoxTitleClassName = "",
+    textBoxDescriptionClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+    titleImageWrapperClassName = "",
+    titleImageClassName = "",
+    cardClassName = "",
+    progressBarClassName = "",
+    cardContentClassName = "",
+    stepNumberClassName = "",
+    cardTitleClassName = "",
+    cardDescriptionClassName = "",
+    mediaContainerClassName = "",
+    mediaClassName = "",
+}: FeatureCardEightProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    const mediaItems = features.map((feature) => ({
+        imageSrc: feature.imageSrc,
+        videoSrc: feature.videoSrc,
+        imageAlt: feature.imageAlt || feature.title,
+        videoAriaLabel: feature.videoAriaLabel || feature.title,
+    }));
+
+    return (
+        <TimelineHorizontalCardStack
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            tagAnimation={tagAnimation}
+            buttons={buttons}
+            buttonAnimation={buttonAnimation}
+            textboxLayout={textboxLayout}
+            useInvertedBackground={useInvertedBackground}
+            mediaItems={mediaItems}
+            className={className}
+            containerClassName={containerClassName}
+            titleClassName={textBoxTitleClassName}
+            descriptionClassName={textBoxDescriptionClassName}
+            textBoxClassName={textBoxClassName}
+            tagClassName={textBoxTagClassName}
+            buttonContainerClassName={textBoxButtonContainerClassName}
+            buttonClassName={textBoxButtonClassName}
+            buttonTextClassName={textBoxButtonTextClassName}
+            titleImageWrapperClassName={titleImageWrapperClassName}
+            titleImageClassName={titleImageClassName}
+            cardClassName={cardClassName}
+            progressBarClassName={progressBarClassName}
+            mediaContainerClassName={mediaContainerClassName}
+            mediaClassName={mediaClassName}
+            ariaLabel={ariaLabel}
+        >
+            {features.map((feature, index) => (
+                <div
+                    key={index}
+                    className={cls("relative z-1 w-full min-h-0 h-fit flex flex-col gap-3", cardContentClassName)}
+                >
+                    <div
+                        className={cls(
+                            "h-8 w-[var(--height-8)] primary-button text-primary-cta-text rounded-theme flex items-center justify-center",
+                            stepNumberClassName
+                        )}
+                    >
+                        <p className="text-sm truncate">
+                            {index + 1}
+                        </p>
+                    </div>
+                    <h2 className={cls("mt-1 text-3xl font-medium leading-[1.15] text-balance", shouldUseLightText && "text-background", cardTitleClassName)}>
+                        {feature.title}
+                    </h2>
+                    <p className={cls("text-base leading-[1.15] text-balance", shouldUseLightText ? "text-background" : "text-foreground", cardDescriptionClassName)}>
+                        {feature.description}
+                    </p>
+                </div>
+            ))}
+        </TimelineHorizontalCardStack>
+    );
+};
+
+
+export default FeatureCardEight;
\ No newline at end of file
diff --git a/src/components/sections/feature/FeatureCardMedia.tsx b/src/components/sections/feature/FeatureCardMedia.tsx
new file mode 100644
index 0000000..3ebf2d5
--- /dev/null
+++ b/src/components/sections/feature/FeatureCardMedia.tsx
@@ -0,0 +1,257 @@
+"use client";
+
+import CardStack from "@/components/cardStack/CardStack";
+import MediaContent from "@/components/shared/MediaContent";
+import Tag from "@/components/shared/Tag";
+import Button from "@/components/button/Button";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { getButtonProps } from "@/lib/buttonUtils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type FeatureCard = {
+    id: string;
+    title: string;
+    description: string;
+    tag: string;
+    imageSrc?: string;
+    videoSrc?: string;
+    imageAlt?: string;
+    videoAriaLabel?: string;
+    buttons?: ButtonConfig[];
+    onCardClick?: () => void;
+};
+
+interface FeatureCardMediaProps {
+    features: FeatureCard[];
+    carouselMode?: "auto" | "buttons";
+    uniformGridCustomHeightClasses?: string;
+    animationType: CardAnimationType;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    tagAnimation?: ButtonAnimationType;
+    buttons?: ButtonConfig[];
+    buttonAnimation?: ButtonAnimationType;
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    itemClassName?: string;
+    mediaWrapperClassName?: string;
+    mediaClassName?: string;
+    tagClassName?: string;
+    contentClassName?: string;
+    cardTitleClassName?: string;
+    cardDescriptionClassName?: string;
+    cardButtonContainerClassName?: string;
+    cardButtonClassName?: string;
+    cardButtonTextClassName?: string;
+    textBoxTitleClassName?: string;
+    textBoxTitleImageWrapperClassName?: string;
+    textBoxTitleImageClassName?: string;
+    textBoxDescriptionClassName?: string;
+    gridClassName?: string;
+    carouselClassName?: string;
+    controlsClassName?: string;
+    textBoxClassName?: string;
+    textBoxTagClassName?: string;
+    textBoxButtonContainerClassName?: string;
+    textBoxButtonClassName?: string;
+    textBoxButtonTextClassName?: string;
+}
+
+interface FeatureCardItemProps {
+    feature: FeatureCard;
+    shouldUseLightText: boolean;
+    useInvertedBackground: InvertedBackground;
+    itemClassName?: string;
+    mediaWrapperClassName?: string;
+    mediaClassName?: string;
+    tagClassName?: string;
+    contentClassName?: string;
+    cardTitleClassName?: string;
+    cardDescriptionClassName?: string;
+    cardButtonContainerClassName?: string;
+    cardButtonClassName?: string;
+    cardButtonTextClassName?: string;
+}
+
+const FeatureCardItem = ({
+    feature,
+    shouldUseLightText,
+    useInvertedBackground,
+    itemClassName = "",
+    mediaWrapperClassName = "",
+    mediaClassName = "",
+    tagClassName = "",
+    contentClassName = "",
+    cardTitleClassName = "",
+    cardDescriptionClassName = "",
+    cardButtonContainerClassName = "",
+    cardButtonClassName = "",
+    cardButtonTextClassName = "",
+}: FeatureCardItemProps) => {
+    const theme = useTheme();
+
+    return (
+        <article
+            className={cls("relative h-full flex flex-col gap-6 cursor-pointer group", itemClassName)}
+            onClick={feature.onCardClick}
+            role="article"
+            aria-label={feature.title}
+        >
+            <div className={cls("relative w-full aspect-square overflow-hidden rounded-theme-capped", mediaWrapperClassName)}>
+                <MediaContent
+                    imageSrc={feature.imageSrc}
+                    videoSrc={feature.videoSrc}
+                    imageAlt={feature.imageAlt || feature.title}
+                    videoAriaLabel={feature.videoAriaLabel || feature.title}
+                    imageClassName={cls("w-full h-full object-cover transition-transform duration-500 ease-in-out group-hover:scale-105", mediaClassName)}
+                />
+                <div className="absolute top-4 right-4">
+                    <Tag
+                        text={feature.tag}
+                        useInvertedBackground={useInvertedBackground}
+                        className={tagClassName}
+                    />
+                </div>
+            </div>
+
+            <div className={cls("relative z-1 card rounded-theme-capped p-6 flex flex-col gap-2 flex-1", contentClassName)}>
+                <h3 className={cls(
+                    "text-xl md:text-2xl font-medium leading-tight",
+                    shouldUseLightText ? "text-background" : "text-foreground",
+                    cardTitleClassName
+                )}>
+                    {feature.title}
+                </h3>
+
+                <p className={cls(
+                    "text-base leading-tight",
+                    shouldUseLightText ? "text-background/75" : "text-foreground/75",
+                    cardDescriptionClassName
+                )}>
+                    {feature.description}
+                </p>
+
+                {feature.buttons && feature.buttons.length > 0 && (
+                    <div className={cls("flex flex-wrap gap-4 max-md:justify-center mt-2", cardButtonContainerClassName)}>
+                        {feature.buttons.slice(0, 2).map((button, index) => (
+                            <Button
+                                key={`${button.text}-${index}`}
+                                {...getButtonProps(button, index, theme.defaultButtonVariant, cardButtonClassName, cardButtonTextClassName)}
+                            />
+                        ))}
+                    </div>
+                )}
+            </div>
+        </article>
+    );
+};
+
+const FeatureCardMedia = ({
+    features,
+    carouselMode = "buttons",
+    uniformGridCustomHeightClasses,
+    animationType,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    tagAnimation = "opacity",
+    buttons = [],
+    buttonAnimation = "slide-up",
+    textboxLayout,
+    useInvertedBackground = false,
+    ariaLabel = "Features section",
+    className = "",
+    containerClassName = "",
+    itemClassName = "",
+    mediaWrapperClassName = "",
+    mediaClassName = "",
+    tagClassName = "",
+    contentClassName = "",
+    cardTitleClassName = "",
+    cardDescriptionClassName = "",
+    cardButtonContainerClassName = "",
+    cardButtonClassName = "",
+    cardButtonTextClassName = "",
+    textBoxTitleClassName = "",
+    textBoxTitleImageWrapperClassName = "",
+    textBoxTitleImageClassName = "",
+    textBoxDescriptionClassName = "",
+    gridClassName = "",
+    carouselClassName = "",
+    controlsClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+}: FeatureCardMediaProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    return (
+        <CardStack
+            mode={carouselMode}
+            gridVariant="uniform-all-items-equal"
+            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+            animationType={animationType}
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            tagAnimation={tagAnimation}
+            buttons={buttons}
+            buttonAnimation={buttonAnimation}
+            textboxLayout={textboxLayout}
+            useInvertedBackground={useInvertedBackground}
+            ariaLabel={ariaLabel}
+            className={className}
+            containerClassName={containerClassName}
+            gridClassName={gridClassName}
+            carouselClassName={carouselClassName}
+            controlsClassName={controlsClassName}
+            textBoxClassName={textBoxClassName}
+            titleClassName={textBoxTitleClassName}
+            titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
+            titleImageClassName={textBoxTitleImageClassName}
+            descriptionClassName={textBoxDescriptionClassName}
+            tagClassName={textBoxTagClassName}
+            buttonContainerClassName={textBoxButtonContainerClassName}
+            buttonClassName={textBoxButtonClassName}
+            buttonTextClassName={textBoxButtonTextClassName}
+        >
+            {features.map((feature) => (
+                <FeatureCardItem
+                    key={feature.id}
+                    feature={feature}
+                    shouldUseLightText={shouldUseLightText}
+                    useInvertedBackground={useInvertedBackground}
+                    itemClassName={itemClassName}
+                    mediaWrapperClassName={mediaWrapperClassName}
+                    mediaClassName={mediaClassName}
+                    tagClassName={tagClassName}
+                    contentClassName={contentClassName}
+                    cardTitleClassName={cardTitleClassName}
+                    cardDescriptionClassName={cardDescriptionClassName}
+                    cardButtonContainerClassName={cardButtonContainerClassName}
+                    cardButtonClassName={cardButtonClassName}
+                    cardButtonTextClassName={cardButtonTextClassName}
+                />
+            ))}
+        </CardStack>
+    );
+};
+
+
+export default FeatureCardMedia;
diff --git a/src/components/sections/feature/FeatureCardNine.tsx b/src/components/sections/feature/FeatureCardNine.tsx
new file mode 100644
index 0000000..4523b59
--- /dev/null
+++ b/src/components/sections/feature/FeatureCardNine.tsx
@@ -0,0 +1,234 @@
+"use client";
+
+import TimelinePhoneView from "@/components/cardStack/layouts/timelines/TimelinePhoneView";
+import Button from "@/components/button/Button";
+import { cls } from "@/lib/utils";
+import { getButtonProps } from "@/lib/buttonUtils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, ButtonAnimationType, TitleSegment, CardAnimationType } from "@/components/cardStack/types";
+import type { TimelinePhoneViewItem } from "@/components/cardStack/hooks/usePhoneAnimations";
+import type { InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type FeaturePhone = {
+    imageAlt?: string;
+    videoAriaLabel?: string;
+} & (
+        | { imageSrc: string; videoSrc?: never }
+        | { videoSrc: string; imageSrc?: never }
+    );
+
+type FeatureCard = {
+    title: string;
+    description: string;
+    buttons?: ButtonConfig[];
+    phoneOne: FeaturePhone;
+    phoneTwo: FeaturePhone;
+};
+
+interface FeatureCardNineProps {
+    features: FeatureCard[];
+    showStepNumbers: boolean;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    tagAnimation?: ButtonAnimationType;
+    buttons?: ButtonConfig[];
+    buttonAnimation?: ButtonAnimationType;
+    animationType: CardAnimationType;
+    textboxLayout: "default" | "inline-image";
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    textBoxTitleClassName?: string;
+    textBoxDescriptionClassName?: string;
+    textBoxClassName?: string;
+    textBoxTagClassName?: string;
+    textBoxButtonContainerClassName?: string;
+    textBoxButtonClassName?: string;
+    textBoxButtonTextClassName?: string;
+    titleImageWrapperClassName?: string;
+    titleImageClassName?: string;
+    desktopContainerClassName?: string;
+    mobileContainerClassName?: string;
+    desktopContentClassName?: string;
+    desktopWrapperClassName?: string;
+    mobileWrapperClassName?: string;
+    phoneFrameClassName?: string;
+    mobilePhoneFrameClassName?: string;
+    featureContentClassName?: string;
+    stepNumberClassName?: string;
+    featureTitleClassName?: string;
+    featureDescriptionClassName?: string;
+    cardButtonClassName?: string;
+    cardButtonTextClassName?: string;
+}
+
+interface FeatureContentProps {
+    feature: FeatureCard;
+    itemNumber: number;
+    showStepNumbers: boolean;
+    useInvertedBackground: InvertedBackground;
+    featureContentClassName: string;
+    stepNumberClassName: string;
+    featureTitleClassName: string;
+    featureDescriptionClassName: string;
+    cardButtonClassName: string;
+    cardButtonTextClassName: string;
+}
+
+const FeatureContent = ({
+    feature,
+    itemNumber,
+    showStepNumbers,
+    useInvertedBackground,
+    featureContentClassName,
+    stepNumberClassName,
+    featureTitleClassName,
+    featureDescriptionClassName,
+    cardButtonClassName,
+    cardButtonTextClassName,
+}: FeatureContentProps) => {
+    const theme = useTheme();
+
+    return (
+    <div className={cls("relative z-1 h-full w-content-width mx-auto md:w-full flex flex-col items-center text-center gap-3 md:px-5", featureContentClassName)}>
+        {showStepNumbers && (
+            <div
+                className={cls(
+                    "h-8 w-[var(--height-8)] primary-button text-primary-cta-text rounded-theme flex items-center justify-center",
+                    stepNumberClassName
+                )}
+            >
+                <p className="text-sm truncate">
+                    {itemNumber}
+                </p>
+            </div>
+        )}
+        <h2 className={cls("text-5xl font-medium leading-[1.15] text-balance", useInvertedBackground && "text-background", featureTitleClassName)}>
+            {feature.title}
+        </h2>
+        <p className={cls("text-base leading-[1.2] text-balance", useInvertedBackground ? "text-background/75" : "text-foreground/75", featureDescriptionClassName)}>
+            {feature.description}
+        </p>
+        {feature.buttons && feature.buttons.length > 0 && (
+            <div className="flex flex-wrap justify-center gap-3">
+                {feature.buttons.slice(0, 2).map((button, index) => (
+                    <Button key={`${button.text}-${index}`} {...getButtonProps(button, index, theme.defaultButtonVariant, cardButtonClassName, cardButtonTextClassName)} />
+                ))}
+            </div>
+        )}
+    </div>
+    );
+};
+
+const FeatureCardNine = ({
+    features,
+    showStepNumbers,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    tagAnimation = "opacity",
+    buttons = [],
+    buttonAnimation = "slide-up",
+    animationType,
+    textboxLayout,
+    useInvertedBackground = false,
+    ariaLabel = "Feature section",
+    className = "",
+    containerClassName = "",
+    textBoxTitleClassName = "",
+    textBoxDescriptionClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+    titleImageWrapperClassName = "",
+    titleImageClassName = "",
+    desktopContainerClassName = "",
+    mobileContainerClassName = "",
+    desktopContentClassName = "",
+    desktopWrapperClassName = "",
+    mobileWrapperClassName = "",
+    phoneFrameClassName = "",
+    mobilePhoneFrameClassName = "",
+    featureContentClassName = "",
+    stepNumberClassName = "",
+    featureTitleClassName = "",
+    featureDescriptionClassName = "",
+    cardButtonClassName = "",
+    cardButtonTextClassName = "",
+}: FeatureCardNineProps) => {
+    const items: TimelinePhoneViewItem[] = features.map((feature, index) => ({
+        trigger: `trigger-${index}`,
+        content: (
+            <FeatureContent
+                feature={feature}
+                itemNumber={index + 1}
+                showStepNumbers={showStepNumbers}
+                useInvertedBackground={useInvertedBackground}
+                featureContentClassName={featureContentClassName}
+                stepNumberClassName={stepNumberClassName}
+                featureTitleClassName={featureTitleClassName}
+                featureDescriptionClassName={featureDescriptionClassName}
+                cardButtonClassName={cardButtonClassName}
+                cardButtonTextClassName={cardButtonTextClassName}
+            />
+        ),
+        imageOne: feature.phoneOne.imageSrc,
+        videoOne: feature.phoneOne.videoSrc,
+        imageAltOne: feature.phoneOne.imageAlt || `${feature.title} - Phone 1`,
+        videoAriaLabelOne: feature.phoneOne.videoAriaLabel || `${feature.title} - Phone 1 video`,
+        imageTwo: feature.phoneTwo.imageSrc,
+        videoTwo: feature.phoneTwo.videoSrc,
+        imageAltTwo: feature.phoneTwo.imageAlt || `${feature.title} - Phone 2`,
+        videoAriaLabelTwo: feature.phoneTwo.videoAriaLabel || `${feature.title} - Phone 2 video`,
+    }));
+
+    return (
+        <TimelinePhoneView
+            items={items}
+            showTextBox={true}
+            showDivider={true}
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            tagAnimation={tagAnimation}
+            buttons={buttons}
+            buttonAnimation={buttonAnimation}
+            animationType={animationType}
+            textboxLayout={textboxLayout}
+            useInvertedBackground={useInvertedBackground}
+            className={className}
+            containerClassName={containerClassName}
+            textBoxClassName={textBoxClassName}
+            titleClassName={textBoxTitleClassName}
+            descriptionClassName={textBoxDescriptionClassName}
+            tagClassName={textBoxTagClassName}
+            buttonContainerClassName={textBoxButtonContainerClassName}
+            buttonClassName={textBoxButtonClassName}
+            buttonTextClassName={textBoxButtonTextClassName}
+            titleImageWrapperClassName={titleImageWrapperClassName}
+            titleImageClassName={titleImageClassName}
+            desktopContainerClassName={desktopContainerClassName}
+            mobileContainerClassName={mobileContainerClassName}
+            desktopContentClassName={desktopContentClassName}
+            desktopWrapperClassName={desktopWrapperClassName}
+            mobileWrapperClassName={mobileWrapperClassName}
+            phoneFrameClassName={phoneFrameClassName}
+            mobilePhoneFrameClassName={mobilePhoneFrameClassName}
+            ariaLabel={ariaLabel}
+        />
+    );
+};
+
+
+export default FeatureCardNine;
diff --git a/src/components/sections/feature/FeatureCardNineteen.tsx b/src/components/sections/feature/FeatureCardNineteen.tsx
new file mode 100644
index 0000000..f4c7d05
--- /dev/null
+++ b/src/components/sections/feature/FeatureCardNineteen.tsx
@@ -0,0 +1,197 @@
+"use client";
+
+import TimelineCardStack from "@/components/cardStack/layouts/timelines/TimelineCardStack";
+import MediaContent from "@/components/shared/MediaContent";
+import Tag from "@/components/shared/Tag";
+import Button from "@/components/button/Button";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { getButtonProps } from "@/lib/buttonUtils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, ButtonAnimationType, TitleSegment } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type FeatureCard = {
+    tag: string;
+    title: string;
+    subtitle: string;
+    description: string;
+    buttons?: ButtonConfig[];
+    imageSrc?: string;
+    videoSrc?: string;
+    imageAlt?: string;
+    videoAriaLabel?: string;
+};
+
+interface FeatureCardNineteenProps {
+    features: FeatureCard[];
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    tagAnimation?: ButtonAnimationType;
+    buttons?: ButtonConfig[];
+    buttonAnimation?: ButtonAnimationType;
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    textBoxTitleClassName?: string;
+    textBoxDescriptionClassName?: string;
+    textBoxClassName?: string;
+    textBoxTagClassName?: string;
+    textBoxButtonContainerClassName?: string;
+    textBoxButtonClassName?: string;
+    textBoxButtonTextClassName?: string;
+    titleImageWrapperClassName?: string;
+    titleImageClassName?: string;
+    cardContentClassName?: string;
+    cardTagClassName?: string;
+    cardTitleClassName?: string;
+    cardDescriptionClassName?: string;
+    cardButtonClassName?: string;
+    cardButtonTextClassName?: string;
+    imageContainerClassName?: string;
+    imageClassName?: string;
+}
+
+const FeatureCardNineteen = ({
+    features,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    tagAnimation = "opacity",
+    buttons = [],
+    buttonAnimation = "slide-up",
+    textboxLayout,
+    useInvertedBackground = false,
+    ariaLabel = "Feature section",
+    className = "",
+    containerClassName = "",
+    textBoxTitleClassName = "",
+    textBoxDescriptionClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+    titleImageWrapperClassName = "",
+    titleImageClassName = "",
+    cardContentClassName = "",
+    cardTagClassName = "",
+    cardTitleClassName = "",
+    cardDescriptionClassName = "",
+    cardButtonClassName = "",
+    cardButtonTextClassName = "",
+    imageContainerClassName = "",
+    imageClassName = "",
+}: FeatureCardNineteenProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    return (
+        <TimelineCardStack
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            tagAnimation={tagAnimation}
+            buttons={buttons}
+            buttonAnimation={buttonAnimation}
+            textboxLayout={textboxLayout}
+            useInvertedBackground={useInvertedBackground}
+            className={className}
+            containerClassName={containerClassName}
+            titleClassName={textBoxTitleClassName}
+            descriptionClassName={textBoxDescriptionClassName}
+            textBoxClassName={textBoxClassName}
+            tagClassName={textBoxTagClassName}
+            buttonContainerClassName={textBoxButtonContainerClassName}
+            buttonClassName={textBoxButtonClassName}
+            buttonTextClassName={textBoxButtonTextClassName}
+            titleImageWrapperClassName={titleImageWrapperClassName}
+            titleImageClassName={titleImageClassName}
+            ariaLabel={ariaLabel}
+        >
+            {features.map((feature, index) => {
+                const stepNumber = String(index + 1).padStart(2, "0");
+                return (
+                    <div
+                        key={index}
+                        className={cls("relative z-1 w-full min-h-0 h-full flex flex-col md:flex-row justify-between overflow-hidden", cardContentClassName)}
+                    >
+                        <div className="relative w-full md:w-1/2 md:h-full flex flex-col justify-between p-8 md:p-12">
+                            <div className="flex flex-col gap-4 md:gap-6">
+                                <Tag
+                                    text={feature.tag}
+                                    useInvertedBackground={useInvertedBackground}
+                                    className={cardTagClassName}
+                                />
+                                <h2 className={cls(
+                                    "text-5xl md:text-7xl font-medium leading-none",
+                                    shouldUseLightText ? "text-background" : "text-foreground",
+                                    cardTitleClassName
+                                )}>
+                                    {feature.title}
+                                </h2>
+                            </div>
+                            <div className="block md:hidden w-full h-px my-6 bg-accent/20" />
+                            <div className="flex flex-col gap-2 md:gap-4">
+                                <h3 className={cls(
+                                    "text-xl md:text-4xl font-medium",
+                                    shouldUseLightText ? "text-background" : "text-foreground"
+                                )}>
+                                    {feature.subtitle}
+                                </h3>
+                                <p className={cls(
+                                    "text-base md:text-lg leading-tight",
+                                    shouldUseLightText ? "text-background/80" : "text-foreground/80",
+                                    cardDescriptionClassName
+                                )}>
+                                    {feature.description}
+                                </p>
+                                {feature.buttons && feature.buttons.length > 0 && (
+                                    <div className="flex flex-wrap gap-4 max-md:justify-center mt-2">
+                                        {feature.buttons.slice(0, 2).map((button, buttonIndex) => (
+                                            <Button
+                                                key={`${button.text}-${buttonIndex}`}
+                                                {...getButtonProps(button, buttonIndex, theme.defaultButtonVariant, cardButtonClassName, cardButtonTextClassName)}
+                                            />
+                                        ))}
+                                    </div>
+                                )}
+                            </div>
+                        </div>
+                        <div className="relative w-full md:w-4/10 min-h-0 h-full flex flex-col gap-10 p-8 md:p-12">
+                            <h3 className="hidden md:block text-8xl font-medium text-accent/20 self-end">
+                                {stepNumber}
+                            </h3>
+                            <div
+                                className={cls(
+                                    "relative max-h-full min-h-0 w-full h-full min-w-0 max-w-full md:aspect-[4/5] rounded-theme-capped overflow-hidden rotate-3",
+                                    imageContainerClassName
+                                )}
+                            >
+                                <MediaContent
+                                    imageSrc={feature.imageSrc}
+                                    videoSrc={feature.videoSrc}
+                                    imageAlt={feature.imageAlt || feature.title}
+                                    videoAriaLabel={feature.videoAriaLabel || feature.title}
+                                    imageClassName={cls("w-full h-full object-cover", imageClassName)}
+                                />
+                            </div>
+                        </div>
+                    </div>
+                );
+            })}
+        </TimelineCardStack>
+    );
+};
+
+
+export default FeatureCardNineteen;
diff --git a/src/components/sections/feature/FeatureCardOne.tsx b/src/components/sections/feature/FeatureCardOne.tsx
new file mode 100644
index 0000000..e3d86eb
--- /dev/null
+++ b/src/components/sections/feature/FeatureCardOne.tsx
@@ -0,0 +1,198 @@
+"use client";
+
+import CardStack from "@/components/cardStack/CardStack";
+import MediaContent from "@/components/shared/MediaContent";
+import Button from "@/components/button/Button";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { getButtonProps } from "@/lib/buttonUtils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, GridVariant, CardAnimationTypeWith3D, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
+
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type FeatureCard = {
+  title: string;
+  description: string;
+  button?: ButtonConfig;
+} & (
+    | {
+      imageSrc: string;
+      imageAlt?: string;
+      videoSrc?: never;
+      videoAriaLabel?: never;
+    }
+    | {
+      videoSrc: string;
+      videoAriaLabel?: string;
+      imageSrc?: never;
+      imageAlt?: never;
+    }
+  );
+
+interface FeatureCardOneProps {
+  features: FeatureCard[];
+  carouselMode?: "auto" | "buttons";
+  carouselThreshold?: number;
+  gridVariant: GridVariant;
+  uniformGridCustomHeightClasses?: string;
+  animationType: CardAnimationTypeWith3D;
+  title: string;
+  titleSegments?: TitleSegment[];
+  description: string;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  tagAnimation?: ButtonAnimationType;
+  buttons?: ButtonConfig[];
+  buttonAnimation?: ButtonAnimationType;
+  textboxLayout: TextboxLayout;
+  useInvertedBackground: InvertedBackground;
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  cardClassName?: string;
+  mediaClassName?: string;
+  textBoxTitleClassName?: string;
+  textBoxTitleImageWrapperClassName?: string;
+  textBoxTitleImageClassName?: string;
+  textBoxDescriptionClassName?: string;
+  cardTitleClassName?: string;
+  cardDescriptionClassName?: string;
+  cardButtonClassName?: string;
+  cardButtonTextClassName?: string;
+  gridClassName?: string;
+  carouselClassName?: string;
+  controlsClassName?: string;
+  textBoxClassName?: string;
+  textBoxTagClassName?: string;
+  textBoxButtonContainerClassName?: string;
+  textBoxButtonClassName?: string;
+  textBoxButtonTextClassName?: string;
+}
+
+const FeatureCardOne = ({
+  features,
+  carouselMode = "buttons",
+  carouselThreshold,
+  gridVariant,
+  uniformGridCustomHeightClasses,
+  animationType,
+  title,
+  titleSegments,
+  description,
+  tag,
+  tagIcon,
+  tagAnimation = "opacity",
+  buttons = [],
+  buttonAnimation = "slide-up",
+  textboxLayout,
+  useInvertedBackground = false,
+  ariaLabel = "Feature section",
+  className = "",
+  containerClassName = "",
+  cardClassName = "",
+  mediaClassName = "",
+  textBoxTitleClassName = "",
+  textBoxTitleImageWrapperClassName = "",
+  textBoxTitleImageClassName = "",
+  textBoxDescriptionClassName = "",
+  cardTitleClassName = "",
+  cardDescriptionClassName = "",
+  cardButtonClassName = "",
+  cardButtonTextClassName = "",
+  gridClassName = "",
+  carouselClassName = "",
+  controlsClassName = "",
+  textBoxClassName = "",
+  textBoxTagClassName = "",
+  textBoxButtonContainerClassName = "",
+  textBoxButtonClassName = "",
+  textBoxButtonTextClassName = "",
+}: FeatureCardOneProps) => {
+  const theme = useTheme();
+  const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+  const getButtonConfigProps = () => {
+    if (theme.defaultButtonVariant === "hover-bubble") {
+      return { bgClassName: "w-full" };
+    }
+    if (theme.defaultButtonVariant === "icon-arrow") {
+      return { className: "justify-between" };
+    }
+    return {};
+  };
+
+  return (
+    <CardStack
+      mode={carouselMode}
+      carouselThreshold={carouselThreshold}
+      gridVariant={gridVariant}
+      uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+      animationType={animationType}
+      supports3DAnimation={true}
+
+      title={title}
+      titleSegments={titleSegments}
+      description={description}
+      tag={tag}
+      tagIcon={tagIcon}
+      tagAnimation={tagAnimation}
+      buttons={buttons}
+      buttonAnimation={buttonAnimation}
+      textboxLayout={textboxLayout}
+      useInvertedBackground={useInvertedBackground}
+      className={className}
+      containerClassName={containerClassName}
+      gridClassName={gridClassName}
+      carouselClassName={carouselClassName}
+      controlsClassName={controlsClassName}
+      textBoxClassName={textBoxClassName}
+      titleClassName={textBoxTitleClassName}
+      titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
+      titleImageClassName={textBoxTitleImageClassName}
+      descriptionClassName={textBoxDescriptionClassName}
+      tagClassName={textBoxTagClassName}
+      buttonContainerClassName={textBoxButtonContainerClassName}
+      buttonClassName={textBoxButtonClassName}
+      buttonTextClassName={textBoxButtonTextClassName}
+      ariaLabel={ariaLabel}
+    >
+      {features.map((feature, index) => (
+        <div
+          key={`${feature.title}-${index}`}
+          className={cls("card flex flex-col gap-4 p-4 rounded-theme-capped min-h-0 h-full", cardClassName)}
+        >
+          <MediaContent
+            imageSrc={feature.imageSrc}
+            videoSrc={feature.videoSrc}
+            imageAlt={feature.imageAlt || "Feature image"}
+            videoAriaLabel={feature.videoAriaLabel || "Feature video"}
+            imageClassName={cls("relative z-1 min-h-0 h-full", mediaClassName)}
+          />
+          <div className="relative z-1 flex flex-col gap-1">
+            <h3 className={cls("text-2xl font-medium leading-tight", shouldUseLightText && "text-background", cardTitleClassName)}>
+              {feature.title}
+            </h3>
+            <p className={cls("text-sm leading-tight", shouldUseLightText ? "text-background" : "text-foreground", cardDescriptionClassName)}>
+              {feature.description}
+            </p>
+          </div>
+          {feature.button && (
+            <Button
+              {...getButtonProps(
+                { ...feature.button, props: { ...feature.button.props, ...getButtonConfigProps() } },
+                0,
+                theme.defaultButtonVariant,
+                cls("w-full", cardButtonClassName),
+                cardButtonTextClassName
+              )}
+            />
+          )}
+        </div>
+      ))}
+    </CardStack>
+  );
+};
+
+
+export default FeatureCardOne;
diff --git a/src/components/sections/feature/FeatureCardSeven.tsx b/src/components/sections/feature/FeatureCardSeven.tsx
new file mode 100644
index 0000000..51b0109
--- /dev/null
+++ b/src/components/sections/feature/FeatureCardSeven.tsx
@@ -0,0 +1,177 @@
+"use client";
+
+import CardList from "@/components/cardStack/CardList";
+import MediaContent from "@/components/shared/MediaContent";
+import Button from "@/components/button/Button";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { getButtonProps } from "@/lib/buttonUtils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, ButtonAnimationType, CardAnimationType, TitleSegment } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type FeatureCard = {
+    title: string;
+    description: string;
+    buttons?: ButtonConfig[];
+    imageSrc?: string;
+    videoSrc?: string;
+    imageAlt?: string;
+    videoAriaLabel?: string;
+};
+
+interface FeatureCardSevenProps {
+    features: FeatureCard[];
+    animationType: CardAnimationType;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    tagAnimation?: ButtonAnimationType;
+    buttons?: ButtonConfig[];
+    buttonAnimation?: ButtonAnimationType;
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    cardClassName?: string;
+    textBoxTitleClassName?: string;
+    textBoxDescriptionClassName?: string;
+    textBoxClassName?: string;
+    textBoxTagClassName?: string;
+    textBoxButtonContainerClassName?: string;
+    textBoxButtonClassName?: string;
+    textBoxButtonTextClassName?: string;
+    titleImageWrapperClassName?: string;
+    titleImageClassName?: string;
+    cardContentClassName?: string;
+    stepNumberClassName?: string;
+    cardTitleClassName?: string;
+    cardDescriptionClassName?: string;
+    imageContainerClassName?: string;
+    imageClassName?: string;
+    cardButtonClassName?: string;
+    cardButtonTextClassName?: string;
+}
+
+const FeatureCardSeven = ({
+    features,
+    animationType,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    tagAnimation = "opacity",
+    buttons = [],
+    buttonAnimation = "slide-up",
+    textboxLayout,
+    useInvertedBackground = false,
+    ariaLabel = "Feature section",
+    className = "",
+    containerClassName = "",
+    cardClassName = "",
+    textBoxTitleClassName = "",
+    textBoxDescriptionClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+    titleImageWrapperClassName = "",
+    titleImageClassName = "",
+    cardContentClassName = "",
+    stepNumberClassName = "",
+    cardTitleClassName = "",
+    cardDescriptionClassName = "",
+    imageContainerClassName = "",
+    imageClassName = "",
+    cardButtonClassName = "",
+    cardButtonTextClassName = "",
+}: FeatureCardSevenProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    return (
+        <CardList
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            tagAnimation={tagAnimation}
+            buttons={buttons}
+            buttonAnimation={buttonAnimation}
+            textboxLayout={textboxLayout}
+            animationType={animationType}
+            useInvertedBackground={useInvertedBackground}
+            className={className}
+            containerClassName={containerClassName}
+            cardClassName={cardClassName}
+            titleClassName={textBoxTitleClassName}
+            descriptionClassName={textBoxDescriptionClassName}
+            textBoxClassName={textBoxClassName}
+            tagClassName={textBoxTagClassName}
+            buttonContainerClassName={textBoxButtonContainerClassName}
+            buttonClassName={textBoxButtonClassName}
+            buttonTextClassName={textBoxButtonTextClassName}
+            titleImageWrapperClassName={titleImageWrapperClassName}
+            titleImageClassName={titleImageClassName}
+            ariaLabel={ariaLabel}
+        >
+            {features.map((feature, index) => (
+                <div
+                    key={index}
+                    className={cls("relative z-1 w-full min-h-0 h-full flex flex-col justify-between items-center p-6 gap-6 md:p-15 md:gap-15", index % 2 === 0 ? "md:flex-row" : "md:flex-row-reverse", cardContentClassName)}
+                >
+                    <div className="w-full md:w-1/2 min-w-0 h-fit md:h-full flex flex-col justify-center">
+                        <div className="w-full min-w-0 flex flex-col gap-3 md:gap-5">
+                            <div
+                                className={cls(
+                                    "h-8 w-[var(--height-8)] primary-button text-primary-cta-text rounded-theme flex items-center justify-center",
+                                    stepNumberClassName
+                                )}
+                            >
+                                <p className="text-sm truncate">
+                                    {index + 1}
+                                </p>
+                            </div>
+                            <h2 className={cls("mt-1 text-4xl md:text-5xl font-medium leading-[1.15] text-balance", shouldUseLightText && "text-background", cardTitleClassName)}>
+                                {feature.title}
+                            </h2>
+                            <p className={cls("text-base leading-[1.15] text-balance", shouldUseLightText ? "text-background" : "text-foreground", cardDescriptionClassName)}>
+                                {feature.description}
+                            </p>
+                            {feature.buttons && feature.buttons.length > 0 && (
+                                <div className="flex flex-wrap gap-3 max-md:justify-center">
+                                    {feature.buttons.slice(0, 2).map((button, index) => (
+                                        <Button key={`${button.text}-${index}`} {...getButtonProps(button, index, theme.defaultButtonVariant, cardButtonClassName, cardButtonTextClassName)} />
+                                    ))}
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                    <div
+                        className={cls(
+                            "relative w-full md:w-1/2 aspect-square overflow-hidden rounded-theme-capped",
+                            imageContainerClassName
+                        )}
+                    >
+                        <MediaContent
+                            imageSrc={feature.imageSrc}
+                            videoSrc={feature.videoSrc}
+                            imageAlt={feature.imageAlt || feature.title}
+                            videoAriaLabel={feature.videoAriaLabel || feature.title}
+                            imageClassName={cls("w-full h-full object-cover", imageClassName)}
+                        />
+                    </div>
+                </div>
+            ))}
+        </CardList>
+    );
+};
+
+
+export default FeatureCardSeven;
\ No newline at end of file
diff --git a/src/components/sections/feature/FeatureCardSix.tsx b/src/components/sections/feature/FeatureCardSix.tsx
new file mode 100644
index 0000000..01773f7
--- /dev/null
+++ b/src/components/sections/feature/FeatureCardSix.tsx
@@ -0,0 +1,171 @@
+"use client";
+
+import TimelineCardStack from "@/components/cardStack/layouts/timelines/TimelineCardStack";
+import MediaContent from "@/components/shared/MediaContent";
+import Button from "@/components/button/Button";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { getButtonProps } from "@/lib/buttonUtils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, ButtonAnimationType, TitleSegment } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type FeatureCard = {
+    title: string;
+    description: string;
+    buttons?: ButtonConfig[];
+    imageSrc?: string;
+    videoSrc?: string;
+    imageAlt?: string;
+    videoAriaLabel?: string;
+};
+
+interface FeatureCardSixProps {
+    features: FeatureCard[];
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    tagAnimation?: ButtonAnimationType;
+    buttons?: ButtonConfig[];
+    buttonAnimation?: ButtonAnimationType;
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    textBoxTitleClassName?: string;
+    textBoxDescriptionClassName?: string;
+    textBoxClassName?: string;
+    textBoxTagClassName?: string;
+    textBoxButtonContainerClassName?: string;
+    textBoxButtonClassName?: string;
+    textBoxButtonTextClassName?: string;
+    titleImageWrapperClassName?: string;
+    titleImageClassName?: string;
+    cardContentClassName?: string;
+    stepNumberClassName?: string;
+    cardTitleClassName?: string;
+    cardDescriptionClassName?: string;
+    imageContainerClassName?: string;
+    imageClassName?: string;
+    cardButtonClassName?: string;
+    cardButtonTextClassName?: string;
+}
+
+const FeatureCardSix = ({
+    features,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    tagAnimation = "opacity",
+    buttons = [],
+    buttonAnimation = "slide-up",
+    textboxLayout,
+    useInvertedBackground = false,
+    ariaLabel = "Feature section",
+    className = "",
+    containerClassName = "",
+    textBoxTitleClassName = "",
+    textBoxDescriptionClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+    titleImageWrapperClassName = "",
+    titleImageClassName = "",
+    cardContentClassName = "",
+    stepNumberClassName = "",
+    cardTitleClassName = "",
+    cardDescriptionClassName = "",
+    imageContainerClassName = "",
+    imageClassName = "",
+    cardButtonClassName = "",
+    cardButtonTextClassName = "",
+}: FeatureCardSixProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    return (
+        <TimelineCardStack
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            tagAnimation={tagAnimation}
+            buttons={buttons}
+            buttonAnimation={buttonAnimation}
+            textboxLayout={textboxLayout}
+            useInvertedBackground={useInvertedBackground}
+            className={className}
+            containerClassName={containerClassName}
+            titleClassName={textBoxTitleClassName}
+            descriptionClassName={textBoxDescriptionClassName}
+            textBoxClassName={textBoxClassName}
+            tagClassName={textBoxTagClassName}
+            buttonContainerClassName={textBoxButtonContainerClassName}
+            buttonClassName={textBoxButtonClassName}
+            buttonTextClassName={textBoxButtonTextClassName}
+            titleImageWrapperClassName={titleImageWrapperClassName}
+            titleImageClassName={titleImageClassName}
+            ariaLabel={ariaLabel}
+        >
+            {features.map((feature, index) => (
+                <div
+                    key={index}
+                    className={cls("relative z-1 w-full min-h-0 h-full flex flex-col md:flex-row justify-between items-center p-10 gap-10 md:p-15 md:gap-15", cardContentClassName)}
+                >
+                    <div className="w-full md:w-1/2 min-w-0 h-fit md:h-full flex flex-col justify-center">
+                        <div className="w-full min-w-0 flex flex-col gap-3 md:gap-5">
+                            <div
+                                className={cls(
+                                    "h-8 w-[var(--height-8)] primary-button text-primary-cta-text rounded-theme flex items-center justify-center",
+                                    stepNumberClassName
+                                )}
+                            >
+                                <p className="text-sm truncate">
+                                    {index + 1}
+                                </p>
+                            </div>
+                            <h2 className={cls("mt-1 text-4xl md:text-5xl font-medium leading-[1.15] text-balance truncate", shouldUseLightText && "text-background", cardTitleClassName)}>
+                                {feature.title}
+                            </h2>
+                            <p className={cls("text-base leading-[1.15] text-balance truncate", shouldUseLightText ? "text-background" : "text-foreground", cardDescriptionClassName)}>
+                                {feature.description}
+                            </p>
+                            {feature.buttons && feature.buttons.length > 0 && (
+                                <div className="flex flex-wrap gap-3 max-md:justify-center">
+                                    {feature.buttons.slice(0, 2).map((button, index) => (
+                                        <Button key={`${button.text}-${index}`} {...getButtonProps(button, index, theme.defaultButtonVariant, cardButtonClassName, cardButtonTextClassName)} />
+                                    ))}
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                    <div
+                        className={cls(
+                            "relative z-1 w-full md:w-1/2 min-h-0 h-full overflow-hidden rounded-theme-capped",
+                            imageContainerClassName
+                        )}
+                    >
+                        <MediaContent
+                            imageSrc={feature.imageSrc}
+                            videoSrc={feature.videoSrc}
+                            imageAlt={feature.imageAlt || feature.title}
+                            videoAriaLabel={feature.videoAriaLabel || feature.title}
+                            imageClassName={cls("w-full min-h-0 h-full object-cover", imageClassName)}
+                        />
+                    </div>
+                </div>
+            ))}
+        </TimelineCardStack>
+    );
+};
+
+
+export default FeatureCardSix;
diff --git a/src/components/sections/feature/FeatureCardSixteen.tsx b/src/components/sections/feature/FeatureCardSixteen.tsx
new file mode 100644
index 0000000..ca64892
--- /dev/null
+++ b/src/components/sections/feature/FeatureCardSixteen.tsx
@@ -0,0 +1,166 @@
+"use client";
+
+import CardStackTextBox from "@/components/cardStack/CardStackTextBox";
+import PricingFeatureList from "@/components/shared/PricingFeatureList";
+import { useCardAnimation } from "@/components/cardStack/hooks/useCardAnimation";
+import { Check, X } from "lucide-react";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, CardAnimationTypeWith3D, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
+import type { InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type ComparisonItem = {
+    items: string[];
+};
+
+interface FeatureCardSixteenProps {
+    negativeCard: ComparisonItem;
+    positiveCard: ComparisonItem;
+    animationType: CardAnimationTypeWith3D;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    textboxLayout: "default" | "inline-image";
+    useInvertedBackground: InvertedBackground;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    tagAnimation?: ButtonAnimationType;
+    buttons?: ButtonConfig[];
+    buttonAnimation?: ButtonAnimationType;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    textBoxTitleClassName?: string;
+    titleImageWrapperClassName?: string;
+    titleImageClassName?: string;
+    textBoxDescriptionClassName?: string;
+    textBoxClassName?: string;
+    textBoxTagClassName?: string;
+    textBoxButtonContainerClassName?: string;
+    textBoxButtonClassName?: string;
+    textBoxButtonTextClassName?: string;
+    gridClassName?: string;
+    cardClassName?: string;
+    itemsListClassName?: string;
+    itemClassName?: string;
+    itemIconClassName?: string;
+    itemTextClassName?: string;
+}
+
+const FeatureCardSixteen = ({
+    negativeCard,
+    positiveCard,
+    animationType,
+    title,
+    titleSegments,
+    description,
+    textboxLayout,
+    useInvertedBackground = false,
+    tag,
+    tagIcon,
+    tagAnimation = "opacity",
+    buttons = [],
+    buttonAnimation = "slide-up",
+    ariaLabel = "Feature comparison section",
+    className = "",
+    containerClassName = "",
+    textBoxTitleClassName = "",
+    titleImageWrapperClassName = "",
+    titleImageClassName = "",
+    textBoxDescriptionClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+    gridClassName = "",
+    cardClassName = "",
+    itemsListClassName = "",
+    itemClassName = "",
+    itemIconClassName = "",
+    itemTextClassName = "",
+}: FeatureCardSixteenProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+    const { itemRefs, containerRef, perspectiveRef } = useCardAnimation({
+        animationType,
+        itemCount: 2,
+        isGrid: true,
+        supports3DAnimation: true,
+        gridVariant: "uniform-all-items-equal"
+    });
+
+    const cards = [
+        { ...negativeCard, variant: "negative" as const },
+        { ...positiveCard, variant: "positive" as const },
+    ];
+
+    return (
+        <section
+            ref={containerRef}
+            aria-label={ariaLabel}
+            className={cls("relative py-20 w-full", useInvertedBackground && "bg-foreground", className)}
+        >
+            <div className={cls("w-content-width mx-auto flex flex-col gap-8", containerClassName)}>
+                <CardStackTextBox
+                    title={title}
+                    titleSegments={titleSegments}
+                    description={description}
+                    tag={tag}
+                    tagIcon={tagIcon}
+                    tagAnimation={tagAnimation}
+                    buttons={buttons}
+                    buttonAnimation={buttonAnimation}
+                    textboxLayout={textboxLayout}
+                    useInvertedBackground={useInvertedBackground}
+                    textBoxClassName={textBoxClassName}
+                    titleClassName={textBoxTitleClassName}
+                    titleImageWrapperClassName={titleImageWrapperClassName}
+                    titleImageClassName={titleImageClassName}
+                    descriptionClassName={textBoxDescriptionClassName}
+                    tagClassName={textBoxTagClassName}
+                    buttonContainerClassName={textBoxButtonContainerClassName}
+                    buttonClassName={textBoxButtonClassName}
+                    buttonTextClassName={textBoxButtonTextClassName}
+                />
+
+                <div
+                    ref={perspectiveRef}
+                    className={cls(
+                        "relative mx-auto w-full md:w-60 grid grid-cols-1 gap-6",
+                        cards.length >= 2 ? "md:grid-cols-2" : "md:grid-cols-1",
+                        gridClassName
+                    )}
+                >
+                    {cards.map((card, index) => (
+                        <div
+                            key={card.variant}
+                            ref={(el) => { itemRefs.current[index] = el; }}
+                            className={cls(
+                                "relative h-full card rounded-theme-capped p-6",
+                                cardClassName
+                            )}
+                        >
+                            <div className={cls("flex flex-col gap-6", card.variant === "negative" && "opacity-50")}>
+                                <PricingFeatureList
+                                    features={card.items}
+                                    icon={card.variant === "positive" ? Check : X}
+                                    shouldUseLightText={shouldUseLightText}
+                                    className={itemsListClassName}
+                                    featureItemClassName={itemClassName}
+                                    featureIconWrapperClassName=""
+                                    featureIconClassName={itemIconClassName}
+                                    featureTextClassName={cls("truncate", itemTextClassName)}
+                                />
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </section>
+    );
+};
+
+
+export default FeatureCardSixteen;
\ No newline at end of file
diff --git a/src/components/sections/feature/FeatureCardTen.tsx b/src/components/sections/feature/FeatureCardTen.tsx
new file mode 100644
index 0000000..6546be3
--- /dev/null
+++ b/src/components/sections/feature/FeatureCardTen.tsx
@@ -0,0 +1,259 @@
+"use client";
+
+import { useMemo } from "react";
+import TimelineProcessFlow from "@/components/cardStack/layouts/timelines/TimelineProcessFlow";
+import MediaContent from "@/components/shared/MediaContent";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, ButtonAnimationType, CardAnimationType, TitleSegment } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type FeatureMedia = {
+    imageAlt?: string;
+    videoAriaLabel?: string;
+} & (
+        | { imageSrc: string; videoSrc?: never }
+        | { videoSrc: string; imageSrc?: never }
+    );
+
+interface FeatureListItem {
+    icon: LucideIcon;
+    text: string;
+}
+
+interface FeatureCard {
+    title: string;
+    description: string;
+    media: FeatureMedia;
+    items: FeatureListItem[];
+    reverse: boolean;
+}
+
+interface FeatureCardTenProps {
+    features: FeatureCard[];
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    tagAnimation?: ButtonAnimationType;
+    buttons?: ButtonConfig[];
+    buttonAnimation?: ButtonAnimationType;
+    textboxLayout: TextboxLayout;
+    animationType: CardAnimationType;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    textBoxClassName?: string;
+    textBoxTitleClassName?: string;
+    textBoxDescriptionClassName?: string;
+    textBoxTagClassName?: string;
+    textBoxButtonContainerClassName?: string;
+    textBoxButtonClassName?: string;
+    textBoxButtonTextClassName?: string;
+    titleImageWrapperClassName?: string;
+    titleImageClassName?: string;
+    itemClassName?: string;
+    mediaWrapperClassName?: string;
+    mediaCardClassName?: string;
+    numberClassName?: string;
+    contentWrapperClassName?: string;
+    featureTitleClassName?: string;
+    featureDescriptionClassName?: string;
+    listItemClassName?: string;
+    iconContainerClassName?: string;
+    iconClassName?: string;
+    gapClassName?: string;
+}
+
+interface FeatureMediaProps {
+    media: FeatureMedia;
+    title: string;
+    mediaCardClassName: string;
+}
+
+const FeatureMedia = ({
+    media,
+    title,
+    mediaCardClassName,
+}: FeatureMediaProps) => (
+    <div className={cls("card rounded-theme-capped p-4 aspect-square md:aspect-[16/10]", mediaCardClassName)}>
+        <MediaContent
+            imageSrc={media.imageSrc}
+            videoSrc={media.videoSrc}
+            imageAlt={media.imageAlt || title}
+            videoAriaLabel={media.videoAriaLabel || `${title} video`}
+            imageClassName="relative z-1 w-full h-full object-cover rounded-theme-capped"
+        />
+    </div>
+);
+
+interface FeatureContentProps {
+    feature: FeatureCard;
+    useInvertedBackground: InvertedBackground;
+    shouldUseLightText: boolean;
+    featureTitleClassName: string;
+    featureDescriptionClassName: string;
+    listItemClassName: string;
+    iconContainerClassName: string;
+    iconClassName: string;
+}
+
+const FeatureContent = ({
+    feature,
+    useInvertedBackground,
+    shouldUseLightText,
+    featureTitleClassName,
+    featureDescriptionClassName,
+    listItemClassName,
+    iconContainerClassName,
+    iconClassName,
+}: FeatureContentProps) => (
+    <div className="flex flex-col gap-3" >
+        <h3 className={cls("text-xl md:text-4xl font-medium leading-[1.15]", useInvertedBackground && "text-background", featureTitleClassName)}>
+            {feature.title}
+        </h3>
+        <p className={cls("text-base leading-[1.2]", useInvertedBackground ? "text-background/75" : "text-foreground/75", featureDescriptionClassName)}>
+            {feature.description}
+        </p>
+        <ul className="flex flex-col m-0 mt-1 p-0 list-none gap-3">
+            {feature.items.map((listItem, listIndex) => {
+                const Icon = listItem.icon;
+                return (
+                    <li key={listIndex} className="flex items-center gap-3">
+                        <div
+                            className={cls(
+                                "shrink-0 h-9 aspect-square flex items-center justify-center rounded bg-background card",
+                                iconContainerClassName
+                            )}
+                        >
+                            <Icon
+                                className={cls("h-4/10 w-4/10", shouldUseLightText ? "text-background" : "text-foreground", iconClassName)}
+                                strokeWidth={1.25}
+                            />
+                        </div>
+                        <p className={cls("text-base", useInvertedBackground ? "text-background/75" : "text-foreground/75", listItemClassName)}>
+                            {listItem.text}
+                        </p>
+                    </li>
+                );
+            })}
+        </ul>
+    </div>
+);
+
+const FeatureCardTen = ({
+    features,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    tagAnimation = "opacity",
+    buttons = [],
+    buttonAnimation = "slide-up",
+    textboxLayout,
+    animationType,
+    useInvertedBackground = false,
+    ariaLabel = "Feature section",
+    className = "",
+    containerClassName = "",
+    textBoxClassName = "",
+    textBoxTitleClassName = "",
+    textBoxDescriptionClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+    titleImageWrapperClassName = "",
+    titleImageClassName = "",
+    itemClassName = "",
+    mediaWrapperClassName = "",
+    mediaCardClassName = "",
+    numberClassName = "",
+    contentWrapperClassName = "",
+    featureTitleClassName = "",
+    featureDescriptionClassName = "",
+    listItemClassName = "",
+    iconContainerClassName = "",
+    iconClassName = "",
+    gapClassName = "",
+}: FeatureCardTenProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    const timelineItems = useMemo(
+        () =>
+            features.map((feature) => ({
+                reverse: feature.reverse,
+                media: (
+                    <FeatureMedia
+                        media={feature.media}
+                        title={feature.title}
+                        mediaCardClassName={mediaCardClassName}
+                    />
+                ),
+                content: (
+                    <FeatureContent
+                        feature={feature}
+                        useInvertedBackground={useInvertedBackground}
+                        shouldUseLightText={shouldUseLightText}
+                        featureTitleClassName={featureTitleClassName}
+                        featureDescriptionClassName={featureDescriptionClassName}
+                        listItemClassName={listItemClassName}
+                        iconContainerClassName={iconContainerClassName}
+                        iconClassName={iconClassName}
+                    />
+                ),
+            })),
+        [
+            features,
+            useInvertedBackground,
+            shouldUseLightText,
+            mediaCardClassName,
+            featureTitleClassName,
+            featureDescriptionClassName,
+            listItemClassName,
+            iconContainerClassName,
+            iconClassName,
+        ]
+    );
+
+    return (
+        <TimelineProcessFlow
+            items={timelineItems}
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            tagAnimation={tagAnimation}
+            buttons={buttons}
+            buttonAnimation={buttonAnimation}
+            textboxLayout={textboxLayout}
+            animationType={animationType}
+            useInvertedBackground={useInvertedBackground}
+            ariaLabel={ariaLabel}
+            className={className}
+            containerClassName={containerClassName}
+            textBoxClassName={textBoxClassName}
+            textBoxTitleClassName={textBoxTitleClassName}
+            textBoxDescriptionClassName={textBoxDescriptionClassName}
+            textBoxTagClassName={textBoxTagClassName}
+            textBoxButtonContainerClassName={textBoxButtonContainerClassName}
+            textBoxButtonClassName={textBoxButtonClassName}
+            textBoxButtonTextClassName={textBoxButtonTextClassName}
+            titleImageWrapperClassName={titleImageWrapperClassName}
+            titleImageClassName={titleImageClassName}
+            itemClassName={itemClassName}
+            mediaWrapperClassName={mediaWrapperClassName}
+            numberClassName={numberClassName}
+            contentWrapperClassName={contentWrapperClassName}
+            gapClassName={gapClassName}
+        />
+    );
+};
+
+export default FeatureCardTen;
\ No newline at end of file
diff --git a/src/components/sections/feature/FeatureCardTwelve.tsx b/src/components/sections/feature/FeatureCardTwelve.tsx
new file mode 100644
index 0000000..0d61cbc
--- /dev/null
+++ b/src/components/sections/feature/FeatureCardTwelve.tsx
@@ -0,0 +1,181 @@
+"use client";
+
+import { Fragment } from "react";
+import CardList from "@/components/cardStack/CardList";
+import Button from "@/components/button/Button";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { getButtonProps } from "@/lib/buttonUtils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, ButtonAnimationType, CardAnimationType, TitleSegment } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+interface FeatureCard {
+  id: string;
+  label: string;
+  title: string;
+  items: string[];
+  buttons?: ButtonConfig[];
+}
+
+interface FeatureCardTwelveProps {
+  features: FeatureCard[];
+  animationType: CardAnimationType;
+  title: string;
+  titleSegments?: TitleSegment[];
+  description: string;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  tagAnimation?: ButtonAnimationType;
+  buttons?: ButtonConfig[];
+  buttonAnimation?: ButtonAnimationType;
+  textboxLayout: TextboxLayout;
+  useInvertedBackground: InvertedBackground;
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  cardClassName?: string;
+  textBoxTitleClassName?: string;
+  textBoxDescriptionClassName?: string;
+  textBoxClassName?: string;
+  textBoxTagClassName?: string;
+  textBoxButtonContainerClassName?: string;
+  textBoxButtonClassName?: string;
+  textBoxButtonTextClassName?: string;
+  titleImageWrapperClassName?: string;
+  titleImageClassName?: string;
+  cardContentClassName?: string;
+  labelClassName?: string;
+  cardTitleClassName?: string;
+  itemsContainerClassName?: string;
+  itemTextClassName?: string;
+  cardButtonClassName?: string;
+  cardButtonTextClassName?: string;
+}
+
+const FeatureCardTwelve = ({
+  features,
+  animationType,
+  title,
+  titleSegments,
+  description,
+  tag,
+  tagIcon,
+  tagAnimation = "opacity",
+  buttons = [],
+  buttonAnimation = "slide-up",
+  textboxLayout,
+  useInvertedBackground = false,
+  ariaLabel = "Feature section",
+  className = "",
+  containerClassName = "",
+  cardClassName = "",
+  textBoxTitleClassName = "",
+  textBoxDescriptionClassName = "",
+  textBoxClassName = "",
+  textBoxTagClassName = "",
+  textBoxButtonContainerClassName = "",
+  textBoxButtonClassName = "",
+  textBoxButtonTextClassName = "",
+  titleImageWrapperClassName = "",
+  titleImageClassName = "",
+  cardContentClassName = "",
+  labelClassName = "",
+  cardTitleClassName = "",
+  itemsContainerClassName = "",
+  itemTextClassName = "",
+  cardButtonClassName = "",
+  cardButtonTextClassName = "",
+}: FeatureCardTwelveProps) => {
+  const theme = useTheme();
+  const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+  return (
+    <CardList
+      title={title}
+      titleSegments={titleSegments}
+      description={description}
+      tag={tag}
+      tagIcon={tagIcon}
+      tagAnimation={tagAnimation}
+      buttons={buttons}
+      buttonAnimation={buttonAnimation}
+      textboxLayout={textboxLayout}
+      animationType={animationType}
+      useInvertedBackground={useInvertedBackground}
+      className={className}
+      containerClassName={containerClassName}
+      cardClassName={cardClassName}
+      titleClassName={textBoxTitleClassName}
+      descriptionClassName={textBoxDescriptionClassName}
+      textBoxClassName={textBoxClassName}
+      tagClassName={textBoxTagClassName}
+      buttonContainerClassName={textBoxButtonContainerClassName}
+      buttonClassName={textBoxButtonClassName}
+      buttonTextClassName={textBoxButtonTextClassName}
+      titleImageWrapperClassName={titleImageWrapperClassName}
+      titleImageClassName={titleImageClassName}
+      ariaLabel={ariaLabel}
+    >
+      {features.map((feature) => (
+        <div
+          key={feature.id}
+          className={cls(
+            "relative z-1 w-full min-h-0 h-full flex flex-col md:flex-row gap-6 p-6 md:p-15",
+            cardContentClassName
+          )}
+        >
+          <div className="relative z-1 w-full md:w-1/2 flex md:justify-start">
+            <h2 className={cls(
+              "text-5xl md:text-6xl font-medium leading-[1.1]",
+              shouldUseLightText && "text-background",
+              labelClassName
+            )}>
+              {feature.label}
+            </h2>
+          </div>
+
+          <div className="relative z-1 w-full h-px bg-foreground/20 md:hidden" />
+
+          <div className="relative z-1 w-full md:w-1/2 flex flex-col gap-4">
+            <h3 className={cls(
+              "text-xl md:text-3xl font-medium leading-tight",
+              shouldUseLightText ? "text-background" : "text-foreground",
+              cardTitleClassName
+            )}>
+              {feature.title}
+            </h3>
+
+            <div className={cls("flex flex-wrap items-center gap-2", itemsContainerClassName)}>
+              {feature.items.map((item, index) => (
+                <Fragment key={index}>
+                  <span className={cls(
+                    "text-base",
+                    shouldUseLightText ? "text-background" : "text-foreground",
+                    itemTextClassName
+                  )}>
+                    {item}
+                  </span>
+                  {index < feature.items.length - 1 && (
+                    <span className="text-base text-accent">•</span>
+                  )}
+                </Fragment>
+              ))}
+            </div>
+
+            {feature.buttons && feature.buttons.length > 0 && (
+              <div className="mt-3 flex flex-wrap gap-4 max-md:justify-center">
+                {feature.buttons.slice(0, 2).map((button, index) => (
+                  <Button key={`${button.text}-${index}`} {...getButtonProps(button, index, theme.defaultButtonVariant, cardButtonClassName, cardButtonTextClassName)} />
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      ))}
+    </CardList>
+  );
+};
+
+
+export default FeatureCardTwelve;
diff --git a/src/components/sections/feature/FeatureCardTwentyEight.tsx b/src/components/sections/feature/FeatureCardTwentyEight.tsx
new file mode 100644
index 0000000..5a0da76
--- /dev/null
+++ b/src/components/sections/feature/FeatureCardTwentyEight.tsx
@@ -0,0 +1,241 @@
+"use client";
+
+import CardStack from "@/components/cardStack/CardStack";
+import Button from "@/components/button/Button";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { getButtonProps } from "@/lib/buttonUtils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+import type { CTAButtonVariant } from "@/components/button/types";
+
+type Feature = {
+    id: string;
+    title: string;
+    subtitle: string;
+    category: string;
+    value: string;
+    buttons?: ButtonConfig[];
+};
+
+interface FeatureCardTwentyEightProps {
+    features: Feature[];
+    carouselMode?: "auto" | "buttons";
+    uniformGridCustomHeightClasses?: string;
+    animationType: CardAnimationType;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    tagAnimation?: ButtonAnimationType;
+    buttons?: ButtonConfig[];
+    buttonAnimation?: ButtonAnimationType;
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    cardClassName?: string;
+    textBoxTitleClassName?: string;
+    textBoxTitleImageWrapperClassName?: string;
+    textBoxTitleImageClassName?: string;
+    textBoxDescriptionClassName?: string;
+    cardTitleClassName?: string;
+    subtitleClassName?: string;
+    categoryClassName?: string;
+    valueClassName?: string;
+    footerClassName?: string;
+    cardButtonClassName?: string;
+    cardButtonTextClassName?: string;
+    gridClassName?: string;
+    carouselClassName?: string;
+    controlsClassName?: string;
+    textBoxClassName?: string;
+    textBoxTagClassName?: string;
+    textBoxButtonContainerClassName?: string;
+    textBoxButtonClassName?: string;
+    textBoxButtonTextClassName?: string;
+}
+
+interface FeatureCardItemProps {
+    feature: Feature;
+    shouldUseLightText: boolean;
+    defaultButtonVariant: CTAButtonVariant;
+    cardClassName?: string;
+    cardTitleClassName?: string;
+    subtitleClassName?: string;
+    categoryClassName?: string;
+    valueClassName?: string;
+    footerClassName?: string;
+    cardButtonClassName?: string;
+    cardButtonTextClassName?: string;
+}
+
+const FeatureCardItem = ({
+    feature,
+    shouldUseLightText,
+    defaultButtonVariant,
+    cardClassName = "",
+    cardTitleClassName = "",
+    subtitleClassName = "",
+    categoryClassName = "",
+    valueClassName = "",
+    footerClassName = "",
+    cardButtonClassName = "",
+    cardButtonTextClassName = "",
+}: FeatureCardItemProps) => {
+    return (
+        <div className={cls("relative h-full card text-foreground rounded-theme-capped flex flex-col", cardClassName)}>
+            <div className="flex flex-col gap-6 p-6 flex-1">
+                <div className="flex flex-col gap-1">
+                    <h3 className={cls(
+                        "text-2xl md:text-3xl font-medium leading-tight truncate",
+                        shouldUseLightText ? "text-background" : "text-foreground",
+                        cardTitleClassName
+                    )}>
+                        {feature.title}
+                    </h3>
+                    <p className={cls(
+                        "text-base md:text-lg",
+                        shouldUseLightText ? "text-background/75" : "text-foreground/75",
+                        subtitleClassName
+                    )}>
+                        {feature.subtitle}
+                    </p>
+                </div>
+
+                <div className="flex items-center justify-between gap-2 mt-auto">
+                    <div className="flex items-center gap-2 min-w-0 flex-1">
+                        <span className="h-[var(--text-base)] w-auto aspect-square rounded-theme shrink-0 bg-accent" />
+                        <span className={cls(
+                            "text-base truncate",
+                            shouldUseLightText ? "text-background" : "text-foreground",
+                            categoryClassName
+                        )}>
+                            {feature.category}
+                        </span>
+                    </div>
+                    <span className={cls(
+                        "text-xl md:text-2xl font-medium",
+                        shouldUseLightText ? "text-background" : "text-foreground",
+                        valueClassName
+                    )}>
+                        {feature.value}
+                    </span>
+                </div>
+            </div>
+
+            {feature.buttons && feature.buttons.length > 0 && (
+                <div className={cls("bg-background-accent/50 p-4 rounded-b-theme-capped", footerClassName)}>
+                    <div className="flex flex-wrap gap-4 max-md:justify-center">
+                        {feature.buttons.slice(0, 2).map((button, index) => (
+                            <Button key={`${button.text}-${index}`} {...getButtonProps(button, index, defaultButtonVariant, cardButtonClassName, cardButtonTextClassName)} />
+                        ))}
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+};
+
+const FeatureCardTwentyEight = ({
+    features,
+    carouselMode = "buttons",
+    uniformGridCustomHeightClasses,
+    animationType,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    tagAnimation = "opacity",
+    buttons = [],
+    buttonAnimation = "slide-up",
+    textboxLayout,
+    useInvertedBackground = false,
+    ariaLabel = "Features section",
+    className = "",
+    containerClassName = "",
+    cardClassName = "",
+    textBoxTitleClassName = "",
+    textBoxTitleImageWrapperClassName = "",
+    textBoxTitleImageClassName = "",
+    textBoxDescriptionClassName = "",
+    cardTitleClassName = "",
+    subtitleClassName = "",
+    categoryClassName = "",
+    valueClassName = "",
+    footerClassName = "",
+    cardButtonClassName = "",
+    cardButtonTextClassName = "",
+    gridClassName = "",
+    carouselClassName = "",
+    controlsClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+}: FeatureCardTwentyEightProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    return (
+        <CardStack
+            useInvertedBackground={useInvertedBackground}
+            mode={carouselMode}
+            gridVariant="uniform-all-items-equal"
+            carouselThreshold={4}
+            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+            animationType={animationType}
+
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            tagAnimation={tagAnimation}
+            buttons={buttons}
+            buttonAnimation={buttonAnimation}
+            textboxLayout={textboxLayout}
+            className={className}
+            containerClassName={containerClassName}
+            gridClassName={gridClassName}
+            carouselClassName={carouselClassName}
+            controlsClassName={controlsClassName}
+            textBoxClassName={textBoxClassName}
+            titleClassName={textBoxTitleClassName}
+            titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
+            titleImageClassName={textBoxTitleImageClassName}
+            descriptionClassName={textBoxDescriptionClassName}
+            tagClassName={textBoxTagClassName}
+            buttonContainerClassName={textBoxButtonContainerClassName}
+            buttonClassName={textBoxButtonClassName}
+            buttonTextClassName={textBoxButtonTextClassName}
+            ariaLabel={ariaLabel}
+            carouselItemClassName="!w-carousel-item-3"
+        >
+            {features.map((feature, index) => (
+                <FeatureCardItem
+                    key={`${feature.id}-${index}`}
+                    feature={feature}
+                    shouldUseLightText={shouldUseLightText}
+                    defaultButtonVariant={theme.defaultButtonVariant}
+                    cardClassName={cardClassName}
+                    cardTitleClassName={cardTitleClassName}
+                    subtitleClassName={subtitleClassName}
+                    categoryClassName={categoryClassName}
+                    valueClassName={valueClassName}
+                    footerClassName={footerClassName}
+                    cardButtonClassName={cardButtonClassName}
+                    cardButtonTextClassName={cardButtonTextClassName}
+                />
+            ))}
+        </CardStack>
+    );
+};
+
+
+export default FeatureCardTwentyEight;
diff --git a/src/components/sections/feature/FeatureCardTwentyFive.tsx b/src/components/sections/feature/FeatureCardTwentyFive.tsx
new file mode 100644
index 0000000..1959cef
--- /dev/null
+++ b/src/components/sections/feature/FeatureCardTwentyFive.tsx
@@ -0,0 +1,177 @@
+"use client";
+
+import CardStack from "@/components/cardStack/CardStack";
+import MediaContent from "@/components/shared/MediaContent";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { LucideIcon } from "lucide-react";
+import type { CardAnimationTypeWith3D, TitleSegment, ButtonConfig, ButtonAnimationType } from "@/components/cardStack/types";
+
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+interface MediaItem {
+  imageSrc?: string;
+  videoSrc?: string;
+  imageAlt?: string;
+  videoAriaLabel?: string;
+}
+
+type FeatureCard = {
+  title: string;
+  description: string;
+  icon: LucideIcon;
+  mediaItems: [MediaItem, MediaItem];
+};
+
+interface FeatureCardTwentyFiveProps {
+  features: FeatureCard[];
+  carouselMode?: "auto" | "buttons";
+  uniformGridCustomHeightClasses?: string;
+  animationType: CardAnimationTypeWith3D;
+  title: string;
+  titleSegments?: TitleSegment[];
+  description: string;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  tagAnimation?: ButtonAnimationType;
+  buttons?: ButtonConfig[];
+  buttonAnimation?: ButtonAnimationType;
+  textboxLayout: TextboxLayout;
+  useInvertedBackground: InvertedBackground;
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  cardClassName?: string;
+  mediaClassName?: string;
+  textBoxTitleClassName?: string;
+  textBoxTitleImageWrapperClassName?: string;
+  textBoxTitleImageClassName?: string;
+  textBoxDescriptionClassName?: string;
+  cardTitleClassName?: string;
+  cardDescriptionClassName?: string;
+  cardIconClassName?: string;
+  cardIconWrapperClassName?: string;
+  gridClassName?: string;
+  carouselClassName?: string;
+  controlsClassName?: string;
+  textBoxClassName?: string;
+  textBoxTagClassName?: string;
+  textBoxButtonContainerClassName?: string;
+  textBoxButtonClassName?: string;
+  textBoxButtonTextClassName?: string;
+}
+
+const FeatureCardTwentyFive = ({
+  features,
+  carouselMode = "buttons",
+  uniformGridCustomHeightClasses,
+  animationType,
+  title,
+  titleSegments,
+  description,
+  tag,
+  tagIcon,
+  tagAnimation = "opacity",
+  buttons = [],
+  buttonAnimation = "slide-up",
+  textboxLayout,
+  useInvertedBackground = false,
+  ariaLabel = "Feature section",
+  className = "",
+  containerClassName = "",
+  cardClassName = "",
+  mediaClassName = "",
+  textBoxTitleClassName = "",
+  textBoxTitleImageWrapperClassName = "",
+  textBoxTitleImageClassName = "",
+  textBoxDescriptionClassName = "",
+  cardTitleClassName = "",
+  cardDescriptionClassName = "",
+  cardIconClassName = "",
+  cardIconWrapperClassName = "",
+  gridClassName = "",
+  carouselClassName = "",
+  controlsClassName = "",
+  textBoxClassName = "",
+  textBoxTagClassName = "",
+  textBoxButtonContainerClassName = "",
+  textBoxButtonClassName = "",
+  textBoxButtonTextClassName = "",
+}: FeatureCardTwentyFiveProps) => {
+  const theme = useTheme();
+  const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+  return (
+    <CardStack
+      mode={carouselMode}
+      gridVariant="two-items-per-row"
+      uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+      animationType={animationType}
+      supports3DAnimation={true}
+
+      title={title}
+      titleSegments={titleSegments}
+      description={description}
+      tag={tag}
+      tagIcon={tagIcon}
+      tagAnimation={tagAnimation}
+      buttons={buttons}
+      buttonAnimation={buttonAnimation}
+      textboxLayout={textboxLayout}
+      useInvertedBackground={useInvertedBackground}
+      className={className}
+      containerClassName={containerClassName}
+      gridClassName={gridClassName}
+      carouselClassName={carouselClassName}
+      controlsClassName={controlsClassName}
+      textBoxClassName={textBoxClassName}
+      titleClassName={textBoxTitleClassName}
+      titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
+      titleImageClassName={textBoxTitleImageClassName}
+      descriptionClassName={textBoxDescriptionClassName}
+      tagClassName={textBoxTagClassName}
+      buttonContainerClassName={textBoxButtonContainerClassName}
+      buttonClassName={textBoxButtonClassName}
+      buttonTextClassName={textBoxButtonTextClassName}
+      ariaLabel={ariaLabel}
+    >
+      {features.map((feature, index) => {
+        const IconComponent = feature.icon;
+        return (
+          <div
+            key={`${feature.title}-${index}`}
+            className={cls("card flex flex-col gap-5 p-5 rounded-theme-capped min-h-0 h-full", cardClassName)}
+          >
+            <div className="relative z-1 flex flex-col gap-1">
+              <div className={cls("h-15 w-[3.75rem] mb-1 aspect-square rounded-theme primary-button flex items-center justify-center", cardIconWrapperClassName)}>
+                <IconComponent className={cls("h-4/10 w-4/10 text-primary-cta-text", cardIconClassName)} strokeWidth={1.5} />
+              </div>
+              <h3 className={cls("text-2xl font-medium leading-tight", shouldUseLightText && "text-background", cardTitleClassName)}>
+                {feature.title}
+              </h3>
+              <p className={cls("text-base leading-tight", shouldUseLightText ? "text-background" : "text-foreground", cardDescriptionClassName)}>
+                {feature.description}
+              </p>
+            </div>
+            <div className="mt-auto flex-1 min-h-0 grid grid-cols-2 gap-5 overflow-hidden">
+              {feature.mediaItems.map((item, mediaIndex) => (
+                <div key={mediaIndex} className="overflow-hidden rounded-theme-capped">
+                  <MediaContent
+                    imageSrc={item.imageSrc}
+                    videoSrc={item.videoSrc}
+                    imageAlt={item.imageAlt || "Feature image"}
+                    videoAriaLabel={item.videoAriaLabel || "Feature video"}
+                    imageClassName={cls("relative z-1 h-full w-full object-cover", mediaClassName)}
+                  />
+                </div>
+              ))}
+            </div>
+          </div>
+        );
+      })}
+    </CardStack>
+  );
+};
+
+
+export default FeatureCardTwentyFive;
diff --git a/src/components/sections/feature/FeatureCardTwentyFour.tsx b/src/components/sections/feature/FeatureCardTwentyFour.tsx
new file mode 100644
index 0000000..7b6ddbd
--- /dev/null
+++ b/src/components/sections/feature/FeatureCardTwentyFour.tsx
@@ -0,0 +1,198 @@
+"use client";
+
+import CardList from "@/components/cardStack/CardList";
+import Tag from "@/components/shared/Tag";
+import MediaContent from "@/components/shared/MediaContent";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, ButtonAnimationType, CardAnimationType, TitleSegment } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type MediaProps =
+    | {
+        imageSrc: string;
+        imageAlt?: string;
+        videoSrc?: never;
+        videoAriaLabel?: never;
+    }
+    | {
+        videoSrc: string;
+        videoAriaLabel?: string;
+        imageSrc?: never;
+        imageAlt?: never;
+    };
+
+type FeatureItem = MediaProps & {
+    id: string;
+    title: string;
+    author: string;
+    description: string;
+    tags: string[];
+    onFeatureClick?: () => void;
+};
+
+interface FeatureCardTwentyFourProps {
+    features: FeatureItem[];
+    animationType: CardAnimationType;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    tagAnimation?: ButtonAnimationType;
+    buttons?: ButtonConfig[];
+    buttonAnimation?: ButtonAnimationType;
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    cardClassName?: string;
+    textBoxTitleClassName?: string;
+    textBoxDescriptionClassName?: string;
+    textBoxClassName?: string;
+    textBoxTagClassName?: string;
+    textBoxButtonContainerClassName?: string;
+    textBoxButtonClassName?: string;
+    textBoxButtonTextClassName?: string;
+    titleImageWrapperClassName?: string;
+    titleImageClassName?: string;
+    cardContentClassName?: string;
+    cardTitleClassName?: string;
+    authorClassName?: string;
+    cardDescriptionClassName?: string;
+    tagsContainerClassName?: string;
+    tagClassName?: string;
+    mediaWrapperClassName?: string;
+    mediaClassName?: string;
+}
+
+const FeatureCardTwentyFour = ({
+    features,
+    animationType,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    tagAnimation = "opacity",
+    buttons = [],
+    buttonAnimation = "slide-up",
+    textboxLayout,
+    useInvertedBackground = false,
+    ariaLabel = "Features section",
+    className = "",
+    containerClassName = "",
+    cardClassName = "",
+    textBoxTitleClassName = "",
+    textBoxDescriptionClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+    titleImageWrapperClassName = "",
+    titleImageClassName = "",
+    cardContentClassName = "",
+    cardTitleClassName = "",
+    authorClassName = "",
+    cardDescriptionClassName = "",
+    tagsContainerClassName = "",
+    tagClassName = "",
+    mediaWrapperClassName = "",
+    mediaClassName = "",
+}: FeatureCardTwentyFourProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    return (
+        <CardList
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            tagAnimation={tagAnimation}
+            buttons={buttons}
+            buttonAnimation={buttonAnimation}
+            textboxLayout={textboxLayout}
+            animationType={animationType}
+            useInvertedBackground={useInvertedBackground}
+            className={className}
+            containerClassName={containerClassName}
+            cardClassName={cardClassName}
+            titleClassName={textBoxTitleClassName}
+            descriptionClassName={textBoxDescriptionClassName}
+            textBoxClassName={textBoxClassName}
+            tagClassName={textBoxTagClassName}
+            buttonContainerClassName={textBoxButtonContainerClassName}
+            buttonClassName={textBoxButtonClassName}
+            buttonTextClassName={textBoxButtonTextClassName}
+            titleImageWrapperClassName={titleImageWrapperClassName}
+            titleImageClassName={titleImageClassName}
+            ariaLabel={ariaLabel}
+        >
+            {features.map((feature) => (
+                <article
+                    key={feature.id}
+                    className={cls(
+                        "relative z-1 w-full min-h-0 h-full flex flex-col md:grid md:grid-cols-10 gap-6 md:gap-10 cursor-pointer group p-6 md:p-10",
+                        cardContentClassName
+                    )}
+                    onClick={feature.onFeatureClick}
+                    role="article"
+                    aria-label={feature.title}
+                >
+                    <div className="relative z-1 w-full md:col-span-6 flex flex-col gap-3 md:gap-12">
+                        <h3 className={cls(
+                            "text-3xl md:text-5xl text-balance font-medium leading-tight line-clamp-3",
+                            shouldUseLightText ? "text-background" : "text-foreground",
+                            cardTitleClassName
+                        )}>
+                            {feature.title}{" "}
+                            <span className={cls(
+                                shouldUseLightText ? "text-background/50" : "text-foreground/50",
+                                authorClassName
+                            )}>
+                                by {feature.author}
+                            </span>
+                        </h3>
+
+                        <div className="mt-auto flex flex-col gap-4">
+                            <div className={cls("flex flex-wrap gap-2", tagsContainerClassName)}>
+                                {feature.tags.map((tagText, index) => (
+                                    <Tag key={index} text={tagText} useInvertedBackground={useInvertedBackground} className={tagClassName} />
+                                ))}
+                            </div>
+
+                            <p className={cls(
+                                "text-base md:text-2xl text-balance leading-tight line-clamp-2",
+                                shouldUseLightText ? "text-background" : "text-foreground",
+                                cardDescriptionClassName
+                            )}>
+                                {feature.description}
+                            </p>
+                        </div>
+                    </div>
+
+                    <div className={cls(
+                        "relative z-1 w-full md:col-span-4 aspect-square md:aspect-auto overflow-hidden rounded-theme-capped",
+                        mediaWrapperClassName
+                    )}>
+                        <MediaContent
+                            imageSrc={feature.imageSrc}
+                            videoSrc={feature.videoSrc}
+                            imageAlt={feature.imageAlt}
+                            videoAriaLabel={feature.videoAriaLabel}
+                            imageClassName={cls("w-full h-full object-cover", mediaClassName)}
+                        />
+                    </div>
+                </article>
+            ))}
+        </CardList>
+    );
+};
+
+
+export default FeatureCardTwentyFour;
diff --git a/src/components/sections/feature/FeatureCardTwentyOne.tsx b/src/components/sections/feature/FeatureCardTwentyOne.tsx
new file mode 100644
index 0000000..9b16460
--- /dev/null
+++ b/src/components/sections/feature/FeatureCardTwentyOne.tsx
@@ -0,0 +1,234 @@
+"use client";
+
+import { useState } from "react";
+import TextBox from "@/components/Textbox";
+import Accordion from "@/components/Accordion";
+import MediaContent from "@/components/shared/MediaContent";
+import { useButtonAnimation } from "@/components/hooks/useButtonAnimation";
+import { cls } from "@/lib/utils";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, ButtonAnimationType, TitleSegment } from "@/components/cardStack/types";
+import type { InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type MediaProps =
+    | {
+        imageSrc: string;
+        imageAlt?: string;
+        videoSrc?: never;
+        videoAriaLabel?: never;
+    }
+    | {
+        videoSrc: string;
+        videoAriaLabel?: string;
+        imageSrc?: never;
+        imageAlt?: never;
+    };
+
+type AccordionItem = {
+    id: string;
+    title: string;
+    content: string;
+};
+
+type FeatureCardTwentyOneProps = MediaProps & {
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    tagAnimation?: ButtonAnimationType;
+    buttons?: ButtonConfig[];
+    buttonAnimation?: ButtonAnimationType;
+    mediaAnimation?: ButtonAnimationType;
+    accordionItems: AccordionItem[];
+    useInvertedBackground: InvertedBackground;
+    mediaPosition?: "left" | "right";
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    mediaWrapperClassName?: string;
+    mediaClassName?: string;
+    contentClassName?: string;
+    textBoxClassName?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
+    tagClassName?: string;
+    buttonContainerClassName?: string;
+    buttonClassName?: string;
+    buttonTextClassName?: string;
+    titleImageWrapperClassName?: string;
+    titleImageClassName?: string;
+    accordionContainerClassName?: string;
+    accordionClassName?: string;
+    accordionTitleClassName?: string;
+    accordionContentClassName?: string;
+    accordionIconContainerClassName?: string;
+    accordionIconClassName?: string;
+};
+
+const FeatureCardTwentyOne = ({
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    tagAnimation = "opacity",
+    buttons = [],
+    buttonAnimation = "slide-up",
+    mediaAnimation = "none",
+    accordionItems,
+    imageSrc,
+    imageAlt = "",
+    videoSrc,
+    videoAriaLabel,
+    useInvertedBackground = false,
+    mediaPosition = "left",
+    ariaLabel = "Feature section",
+    className = "",
+    containerClassName = "",
+    mediaWrapperClassName = "",
+    mediaClassName = "",
+    contentClassName = "",
+    textBoxClassName = "",
+    titleClassName = "",
+    descriptionClassName = "",
+    tagClassName = "",
+    buttonContainerClassName = "",
+    buttonClassName = "",
+    buttonTextClassName = "",
+    titleImageWrapperClassName = "",
+    titleImageClassName = "",
+    accordionContainerClassName = "",
+    accordionClassName = "",
+    accordionTitleClassName = "",
+    accordionContentClassName = "",
+    accordionIconContainerClassName = "",
+    accordionIconClassName = "",
+}: FeatureCardTwentyOneProps) => {
+    const [activeAccordion, setActiveAccordion] = useState<number>(0);
+    const { containerRef: mediaContainerRef } = useButtonAnimation({ animationType: mediaAnimation });
+
+    const handleAccordionToggle = (index: number) => {
+        setActiveAccordion(activeAccordion === index ? -1 : index);
+    };
+
+    const mediaElement = (
+        <div
+            ref={mediaContainerRef}
+            className={cls(
+                "w-full md:w-1/2 h-[50svh] md:h-auto card rounded-theme-capped overflow-hidden",
+                mediaWrapperClassName
+            )}
+        >
+            <MediaContent
+                imageSrc={imageSrc}
+                videoSrc={videoSrc}
+                imageAlt={imageAlt}
+                videoAriaLabel={videoAriaLabel}
+                imageClassName={cls("w-full h-full object-cover", mediaClassName)}
+            />
+        </div>
+    );
+
+    const contentElement = (
+        <div className={cls(
+            "w-full md:w-1/2 flex flex-col",
+            contentClassName
+        )}>
+            {/* Mobile */}
+            <TextBox
+                title={title}
+                titleSegments={titleSegments}
+                description={description}
+                tag={tag}
+                tagIcon={tagIcon}
+                tagAnimation={tagAnimation}
+                buttons={buttons}
+                buttonAnimation={buttonAnimation}
+                useInvertedBackground={useInvertedBackground}
+                className={cls("flex flex-col gap-1 md:hidden", textBoxClassName)}
+                titleClassName={cls("text-4xl md:text-5xl font-medium text-center md:text-left text-balance", titleClassName)}
+                descriptionClassName={cls("text-base md:text-lg leading-[1.2] text-center md:text-left", descriptionClassName)}
+                tagClassName={cls("w-fit px-3 py-1 text-sm rounded-theme card text-foreground inline-flex items-center gap-2 mb-1 md:mb-2", tagClassName)}
+                buttonContainerClassName={cls("flex flex-wrap gap-4 max-md:justify-center mt-4", buttonContainerClassName)}
+                buttonClassName={buttonClassName}
+                buttonTextClassName={cls("text-base", buttonTextClassName)}
+                titleImageWrapperClassName={titleImageWrapperClassName}
+                titleImageClassName={titleImageClassName}
+                center={true}
+            />
+            {/* Desktop */}
+            <TextBox
+                title={title}
+                titleSegments={titleSegments}
+                description={description}
+                tag={tag}
+                tagIcon={tagIcon}
+                tagAnimation={tagAnimation}
+                buttons={buttons}
+                buttonAnimation={buttonAnimation}
+                useInvertedBackground={useInvertedBackground}
+                className={cls("hidden md:flex flex-col gap-1", textBoxClassName)}
+                titleClassName={cls("text-4xl md:text-5xl font-medium text-center md:text-left text-balance", titleClassName)}
+                descriptionClassName={cls("text-base md:text-lg leading-[1.2] text-center md:text-left", descriptionClassName)}
+                tagClassName={cls("w-fit px-3 py-1 text-sm rounded-theme card text-foreground inline-flex items-center gap-2 mb-1 md:mb-2", tagClassName)}
+                buttonContainerClassName={cls("flex flex-wrap gap-4 max-md:justify-center mt-4", buttonContainerClassName)}
+                buttonClassName={buttonClassName}
+                buttonTextClassName={cls("text-base", buttonTextClassName)}
+                titleImageWrapperClassName={titleImageWrapperClassName}
+                titleImageClassName={titleImageClassName}
+                center={false}
+            />
+
+            <div className={cls(
+                "flex flex-col mt-8 divide-y divide-accent/20 border-y border-accent/20",
+                accordionContainerClassName
+            )}>
+                {accordionItems.map((item, index) => (
+                    <Accordion
+                        key={item.id}
+                        index={index}
+                        isActive={activeAccordion === index}
+                        onToggle={handleAccordionToggle}
+                        title={item.title}
+                        content={item.content}
+                        showCard={false}
+                        useInvertedBackground={!useInvertedBackground ? undefined : useInvertedBackground}
+                        className={cls("py-4 md:py-6", accordionClassName)}
+                        titleClassName={cls("text-xl md:text-2xl", accordionTitleClassName)}
+                        contentClassName={accordionContentClassName}
+                        iconContainerClassName={accordionIconContainerClassName}
+                        iconClassName={accordionIconClassName}
+                    />
+                ))}
+            </div>
+        </div>
+    );
+
+    return (
+        <section
+            aria-label={ariaLabel}
+            className={cls("relative w-full py-20", useInvertedBackground && "bg-foreground", className)}
+        >
+            <div className={cls(
+                "w-content-width mx-auto flex flex-col md:flex-row gap-8 md:gap-15",
+                containerClassName
+            )}>
+                {mediaPosition === "left" ? (
+                    <>
+                        {mediaElement}
+                        {contentElement}
+                    </>
+                ) : (
+                    <>
+                        {contentElement}
+                        {mediaElement}
+                    </>
+                )}
+            </div>
+        </section>
+    );
+};
+
+
+export default FeatureCardTwentyOne;
\ No newline at end of file
diff --git a/src/components/sections/feature/FeatureCardTwentySeven.tsx b/src/components/sections/feature/FeatureCardTwentySeven.tsx
new file mode 100644
index 0000000..6dfafd9
--- /dev/null
+++ b/src/components/sections/feature/FeatureCardTwentySeven.tsx
@@ -0,0 +1,204 @@
+"use client";
+
+import { useState } from "react";
+import { Plus } from "lucide-react";
+import CardStack from "@/components/cardStack/CardStack";
+import MediaContent from "@/components/shared/MediaContent";
+import { cls } from "@/lib/utils";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type FeatureCard = {
+  id: string;
+  title: string;
+  descriptions: string[];
+  imageSrc?: string;
+  videoSrc?: string;
+  imageAlt?: string;
+};
+
+interface FeatureCardTwentySevenItemProps {
+  title: string;
+  descriptions: string[];
+  imageSrc?: string;
+  videoSrc?: string;
+  imageAlt?: string;
+  className?: string;
+  titleClassName?: string;
+  descriptionClassName?: string;
+}
+
+const FeatureCardTwentySevenItem = ({
+  title,
+  descriptions,
+  imageSrc,
+  videoSrc,
+  imageAlt = "",
+  className = "",
+  titleClassName = "",
+  descriptionClassName = "",
+}: FeatureCardTwentySevenItemProps) => {
+  const [isFlipped, setIsFlipped] = useState(false);
+
+  return (
+    <div
+      className={cls(
+        "relative w-full h-full min-h-0 group [perspective:3000px] cursor-pointer",
+        className
+      )}
+      onClick={() => setIsFlipped(!isFlipped)}
+    >
+      <div
+        className={cls(
+          "relative w-full h-full transition-transform duration-500 [transform-style:preserve-3d]",
+          isFlipped && "[transform:rotateY(180deg)]"
+        )}
+      >
+        <div className="relative w-full h-full card rounded-theme-capped p-6 gap-6 flex flex-col [backface-visibility:hidden]">
+          <div className="flex justify-between items-start">
+            <h3 className={cls("text-2xl font-medium leading-tight", titleClassName)}>
+              {title}
+            </h3>
+            <div className="h-[calc(var(--text-2xl)*1.25)] w-[calc(var(--text-2xl)*1.25)] aspect-square rounded-theme primary-button flex items-center justify-center shrink-0">
+              <Plus className="h-1/2 w-1/2 text-primary-cta-text" />
+            </div>
+          </div>
+          <div className="w-full aspect-square md:aspect-[10/11] flex items-center justify-center rounded-theme-capped overflow-hidden">
+            <MediaContent
+              imageSrc={imageSrc}
+              videoSrc={videoSrc}
+              imageAlt={imageAlt}
+              imageClassName="w-full h-full object-cover"
+            />
+          </div>
+        </div>
+
+        <div className="absolute! inset-0 w-full h-full card rounded-theme-capped p-6 gap-6 flex flex-col justify-between [backface-visibility:hidden] [transform:rotateY(180deg)]">
+          <div className="flex justify-between items-start">
+            <h3 className={cls("text-2xl font-medium leading-tight", titleClassName)}>
+              {title}
+            </h3>
+            <div className="h-[calc(var(--text-2xl)*1.25)] w-[calc(var(--text-2xl)*1.25)] aspect-square rounded-theme primary-button flex items-center justify-center shrink-0">
+              <Plus className="h-1/2 w-1/2 rotate-45 text-primary-cta-text" />
+            </div>
+          </div>
+          <div className="w-full flex flex-col gap-3">
+            {descriptions.map((desc, index) => (
+              <p key={index} className={cls("text-lg text-foreground/75 leading-tight", descriptionClassName)}>
+                {desc}
+              </p>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+interface FeatureCardTwentySevenProps {
+  features: FeatureCard[];
+  animationType: CardAnimationType;
+  title: string;
+  titleSegments?: TitleSegment[];
+  description: string;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  tagAnimation?: ButtonAnimationType;
+  buttons?: ButtonConfig[];
+  buttonAnimation?: ButtonAnimationType;
+  textboxLayout: TextboxLayout;
+  useInvertedBackground: InvertedBackground;
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  cardClassName?: string;
+  textBoxTitleClassName?: string;
+  textBoxTitleImageWrapperClassName?: string;
+  textBoxTitleImageClassName?: string;
+  textBoxDescriptionClassName?: string;
+  cardTitleClassName?: string;
+  cardDescriptionClassName?: string;
+  textBoxClassName?: string;
+  textBoxTagClassName?: string;
+  textBoxButtonContainerClassName?: string;
+  textBoxButtonClassName?: string;
+  textBoxButtonTextClassName?: string;
+}
+
+const FeatureCardTwentySeven = ({
+  features,
+  animationType,
+  title,
+  titleSegments,
+  description,
+  tag,
+  tagIcon,
+  tagAnimation = "opacity",
+  buttons = [],
+  buttonAnimation = "slide-up",
+  textboxLayout,
+  useInvertedBackground = false,
+  ariaLabel = "Feature section",
+  className = "",
+  containerClassName = "",
+  cardClassName = "",
+  textBoxTitleClassName = "",
+  textBoxTitleImageWrapperClassName = "",
+  textBoxTitleImageClassName = "",
+  textBoxDescriptionClassName = "",
+  cardTitleClassName = "",
+  cardDescriptionClassName = "",
+  textBoxClassName = "",
+  textBoxTagClassName = "",
+  textBoxButtonContainerClassName = "",
+  textBoxButtonClassName = "",
+  textBoxButtonTextClassName = "",
+}: FeatureCardTwentySevenProps) => {
+  return (
+    <CardStack
+      mode="buttons"
+      gridVariant="uniform-all-items-equal"
+      animationType={animationType}
+      title={title}
+      titleSegments={titleSegments}
+      description={description}
+      tag={tag}
+      tagIcon={tagIcon}
+      tagAnimation={tagAnimation}
+      buttons={buttons}
+      buttonAnimation={buttonAnimation}
+      textboxLayout={textboxLayout}
+      useInvertedBackground={useInvertedBackground}
+      className={className}
+      containerClassName={containerClassName}
+      textBoxClassName={textBoxClassName}
+      titleClassName={textBoxTitleClassName}
+      titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
+      titleImageClassName={textBoxTitleImageClassName}
+      descriptionClassName={textBoxDescriptionClassName}
+      tagClassName={textBoxTagClassName}
+      buttonContainerClassName={textBoxButtonContainerClassName}
+      buttonClassName={textBoxButtonClassName}
+      buttonTextClassName={textBoxButtonTextClassName}
+      ariaLabel={ariaLabel}
+    >
+      {features.map((feature, index) => (
+        <FeatureCardTwentySevenItem
+          key={`${feature.id}-${index}`}
+          title={feature.title}
+          descriptions={feature.descriptions}
+          imageSrc={feature.imageSrc}
+          videoSrc={feature.videoSrc}
+          imageAlt={feature.imageAlt}
+          className={cardClassName}
+          titleClassName={cardTitleClassName}
+          descriptionClassName={cardDescriptionClassName}
+        />
+      ))}
+    </CardStack>
+  );
+};
+
+
+export default FeatureCardTwentySeven;
diff --git a/src/components/sections/feature/FeatureCardTwentySix.tsx b/src/components/sections/feature/FeatureCardTwentySix.tsx
new file mode 100644
index 0000000..d802fe3
--- /dev/null
+++ b/src/components/sections/feature/FeatureCardTwentySix.tsx
@@ -0,0 +1,183 @@
+"use client";
+
+import ArrowCarousel from "@/components/cardStack/layouts/carousels/ArrowCarousel";
+import MediaContent from "@/components/shared/MediaContent";
+import { cls } from "@/lib/utils";
+import { useButtonClick } from "@/components/button/useButtonClick";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, ButtonAnimationType, TitleSegment, InvertedBackground } from "@/components/cardStack/types";
+
+type FeatureItem = {
+    title: string;
+    description: string;
+    imageSrc?: string;
+    videoSrc?: string;
+    imageAlt?: string;
+    videoAriaLabel?: string;
+    buttonIcon: LucideIcon;
+    buttonHref?: string;
+    buttonOnClick?: () => void;
+};
+
+interface FeatureCardTwentySixProps {
+    features: FeatureItem[];
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    tagAnimation?: ButtonAnimationType;
+    buttons?: ButtonConfig[];
+    buttonAnimation?: ButtonAnimationType;
+    textboxLayout: "default" | "inline-image";
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    cardClassName?: string;
+    textBoxTitleClassName?: string;
+    textBoxTitleImageWrapperClassName?: string;
+    textBoxTitleImageClassName?: string;
+    textBoxDescriptionClassName?: string;
+    cardTitleClassName?: string;
+    cardDescriptionClassName?: string;
+    cardButtonClassName?: string;
+    carouselClassName?: string;
+    controlsClassName?: string;
+    textBoxClassName?: string;
+    textBoxTagClassName?: string;
+    textBoxButtonContainerClassName?: string;
+    textBoxButtonClassName?: string;
+    textBoxButtonTextClassName?: string;
+}
+
+interface FeatureCardProps {
+    feature: FeatureItem;
+    cardClassName?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
+    buttonClassName?: string;
+}
+
+const MASK_GRADIENT = "linear-gradient(to bottom, transparent, black 60%)";
+
+const FeatureCard = ({
+    feature,
+    cardClassName = "",
+    titleClassName = "",
+    descriptionClassName = "",
+    buttonClassName = "",
+}: FeatureCardProps) => {
+    const Icon = feature.buttonIcon;
+    const handleClick = useButtonClick(feature.buttonHref, feature.buttonOnClick);
+
+    return (
+        <div className={cls("relative h-90 md:h-100 2xl:h-110 rounded-theme-capped overflow-hidden", cardClassName)}>
+            <MediaContent
+                imageSrc={feature.imageSrc}
+                videoSrc={feature.videoSrc}
+                imageAlt={feature.imageAlt}
+                videoAriaLabel={feature.videoAriaLabel}
+                imageClassName="!absolute inset-0 w-full h-full object-cover !rounded-none"
+            />
+            <div
+                className="absolute z-1 backdrop-blur-xl opacity-100 w-full h-1/3 left-0 bottom-0"
+                style={{ maskImage: MASK_GRADIENT }}
+                aria-hidden="true"
+            />
+            <div className="absolute inset-x-0 bottom-0 h-1/3 bg-gradient-to-t from-foreground/60 to-transparent z-1" />
+            <div className="absolute bottom-0 left-0 right-0 p-6 md:p-8 flex items-end md:items-center justify-between gap-4 z-2">
+                <div className="flex flex-col gap-0 min-w-0">
+                    <h3 className={cls("text-2xl md:text-3xl font-medium leading-tight text-background", titleClassName)}>
+                        {feature.title}
+                    </h3>
+                    <p className={cls("text-sm md:text-base leading-tight text-background/75", descriptionClassName)}>
+                        {feature.description}
+                    </p>
+                </div>
+                <button
+                    onClick={handleClick}
+                    className={cls("shrink-0 primary-button h-8 w-auto aspect-square rounded-theme flex items-center justify-center cursor-pointer", buttonClassName)}
+                    aria-label={feature.buttonHref ? `Navigate to ${feature.buttonHref}` : "Action button"}
+                >
+                    <Icon className="w-4/10 h-4/10 text-primary-cta-text" />
+                </button>
+            </div>
+        </div>
+    );
+};
+
+const FeatureCardTwentySix = ({
+    features,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    tagAnimation = "opacity",
+    buttons = [],
+    buttonAnimation = "slide-up",
+    textboxLayout,
+    useInvertedBackground = false,
+    ariaLabel = "Feature section",
+    className = "",
+    containerClassName = "",
+    cardClassName = "",
+    textBoxTitleClassName = "",
+    textBoxTitleImageWrapperClassName = "",
+    textBoxTitleImageClassName = "",
+    textBoxDescriptionClassName = "",
+    cardTitleClassName = "",
+    cardDescriptionClassName = "",
+    cardButtonClassName = "",
+    carouselClassName = "",
+    controlsClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+}: FeatureCardTwentySixProps) => {
+    return (
+        <ArrowCarousel
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            tagAnimation={tagAnimation}
+            buttons={buttons}
+            buttonAnimation={buttonAnimation}
+            textboxLayout={textboxLayout}
+            useInvertedBackground={useInvertedBackground}
+            ariaLabel={ariaLabel}
+            className={className}
+            containerClassName={containerClassName}
+            carouselClassName={carouselClassName}
+            controlsClassName={controlsClassName}
+            textBoxClassName={textBoxClassName}
+            titleClassName={textBoxTitleClassName}
+            titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
+            titleImageClassName={textBoxTitleImageClassName}
+            descriptionClassName={textBoxDescriptionClassName}
+            tagClassName={textBoxTagClassName}
+            buttonContainerClassName={textBoxButtonContainerClassName}
+            buttonClassName={textBoxButtonClassName}
+            buttonTextClassName={textBoxButtonTextClassName}
+        >
+            {features.map((feature, index) => (
+                <FeatureCard
+                    key={`${feature.title}-${index}`}
+                    feature={feature}
+                    cardClassName={cardClassName}
+                    titleClassName={cardTitleClassName}
+                    descriptionClassName={cardDescriptionClassName}
+                    buttonClassName={cardButtonClassName}
+                />
+            ))}
+        </ArrowCarousel>
+    );
+};
+
+
+export default FeatureCardTwentySix;
diff --git a/src/components/sections/feature/FeatureCardTwentyThree.tsx b/src/components/sections/feature/FeatureCardTwentyThree.tsx
new file mode 100644
index 0000000..913d25f
--- /dev/null
+++ b/src/components/sections/feature/FeatureCardTwentyThree.tsx
@@ -0,0 +1,237 @@
+"use client";
+
+import { ArrowRight } from "lucide-react";
+import CardStack from "@/components/cardStack/CardStack";
+import MediaContent from "@/components/shared/MediaContent";
+import Tag from "@/components/shared/Tag";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type FeatureItem = {
+    id: string;
+    title: string;
+    tags: string[];
+    imageSrc?: string;
+    videoSrc?: string;
+    imageAlt?: string;
+    videoAriaLabel?: string;
+    onFeatureClick?: () => void;
+};
+
+interface FeatureCardTwentyThreeProps {
+    features: FeatureItem[];
+    carouselMode?: "auto" | "buttons";
+    uniformGridCustomHeightClasses?: string;
+    animationType: CardAnimationType;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    tagAnimation?: ButtonAnimationType;
+    buttons?: ButtonConfig[];
+    buttonAnimation?: ButtonAnimationType;
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    itemClassName?: string;
+    mediaWrapperClassName?: string;
+    mediaClassName?: string;
+    cardClassName?: string;
+    cardTitleClassName?: string;
+    tagsContainerClassName?: string;
+    tagClassName?: string;
+    arrowClassName?: string;
+    textBoxTitleClassName?: string;
+    textBoxTitleImageWrapperClassName?: string;
+    textBoxTitleImageClassName?: string;
+    textBoxDescriptionClassName?: string;
+    gridClassName?: string;
+    carouselClassName?: string;
+    controlsClassName?: string;
+    textBoxClassName?: string;
+    textBoxTagClassName?: string;
+    textBoxButtonContainerClassName?: string;
+    textBoxButtonClassName?: string;
+    textBoxButtonTextClassName?: string;
+}
+
+interface FeatureCardItemProps {
+    feature: FeatureItem;
+    shouldUseLightText: boolean;
+    useInvertedBackground: InvertedBackground;
+    itemClassName?: string;
+    mediaWrapperClassName?: string;
+    mediaClassName?: string;
+    cardClassName?: string;
+    cardTitleClassName?: string;
+    tagsContainerClassName?: string;
+    tagClassName?: string;
+    arrowClassName?: string;
+}
+
+const FeatureCardItem = ({
+    feature,
+    shouldUseLightText,
+    useInvertedBackground,
+    itemClassName = "",
+    mediaWrapperClassName = "",
+    mediaClassName = "",
+    cardClassName = "",
+    cardTitleClassName = "",
+    tagsContainerClassName = "",
+    tagClassName = "",
+    arrowClassName = "",
+}: FeatureCardItemProps) => {
+    return (
+        <article
+            className={cls("relative h-full flex flex-col gap-6 cursor-pointer group", itemClassName)}
+            onClick={feature.onFeatureClick}
+            role="article"
+            aria-label={feature.title}
+        >
+            <div className={cls("relative w-full aspect-square overflow-hidden rounded-theme-capped", mediaWrapperClassName)}>
+                <MediaContent
+                    imageSrc={feature.imageSrc}
+                    videoSrc={feature.videoSrc}
+                    imageAlt={feature.imageAlt || feature.title}
+                    videoAriaLabel={feature.videoAriaLabel || feature.title}
+                    imageClassName={cls("w-full h-full object-cover transition-transform duration-500 ease-in-out group-hover:scale-105", mediaClassName)}
+                />
+            </div>
+
+            <div className={cls("relative z-1 card rounded-theme-capped p-5 flex-1 flex flex-col justify-between gap-4", cardClassName)}>
+                <h3 className={cls(
+                    "text-xl md:text-2xl font-medium leading-tight",
+                    shouldUseLightText ? "text-background" : "text-foreground",
+                    cardTitleClassName
+                )}>
+                    {feature.title}
+                </h3>
+
+                <div className="flex items-center justify-between gap-4">
+                    <div className={cls("flex items-center gap-2 flex-wrap", tagsContainerClassName)}>
+                        {feature.tags.map((tag, index) => (
+                            <Tag
+                                key={index}
+                                text={tag}
+                                useInvertedBackground={useInvertedBackground}
+                                className={tagClassName}
+                            />
+                        ))}
+                    </div>
+                    <ArrowRight
+                        className={cls(
+                            "h-[var(--text-base)] w-auto shrink-0 transition-transform duration-300 group-hover:-rotate-45",
+                            shouldUseLightText ? "text-background" : "text-foreground",
+                            arrowClassName
+                        )}
+                        strokeWidth={1.5}
+                    />
+                </div>
+            </div>
+        </article>
+    );
+};
+
+const FeatureCardTwentyThree = ({
+    features,
+    carouselMode = "buttons",
+    uniformGridCustomHeightClasses,
+    animationType,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    tagAnimation = "opacity",
+    buttons = [],
+    buttonAnimation = "slide-up",
+    textboxLayout,
+    useInvertedBackground = false,
+    ariaLabel = "Features section",
+    className = "",
+    containerClassName = "",
+    itemClassName = "",
+    mediaWrapperClassName = "",
+    mediaClassName = "",
+    cardClassName = "",
+    cardTitleClassName = "",
+    tagsContainerClassName = "",
+    tagClassName = "",
+    arrowClassName = "",
+    textBoxTitleClassName = "",
+    textBoxTitleImageWrapperClassName = "",
+    textBoxTitleImageClassName = "",
+    textBoxDescriptionClassName = "",
+    gridClassName = "",
+    carouselClassName = "",
+    controlsClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+}: FeatureCardTwentyThreeProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+    return (
+        <CardStack
+            mode={carouselMode}
+            gridVariant="uniform-all-items-equal"
+            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+            animationType={animationType}
+
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            tagAnimation={tagAnimation}
+            buttons={buttons}
+            buttonAnimation={buttonAnimation}
+            textboxLayout={textboxLayout}
+            useInvertedBackground={useInvertedBackground}
+            ariaLabel={ariaLabel}
+            className={className}
+            containerClassName={containerClassName}
+            gridClassName={gridClassName}
+            carouselClassName={carouselClassName}
+            controlsClassName={controlsClassName}
+            textBoxClassName={textBoxClassName}
+            titleClassName={textBoxTitleClassName}
+            titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
+            titleImageClassName={textBoxTitleImageClassName}
+            descriptionClassName={textBoxDescriptionClassName}
+            tagClassName={textBoxTagClassName}
+            buttonContainerClassName={textBoxButtonContainerClassName}
+            buttonClassName={textBoxButtonClassName}
+            buttonTextClassName={textBoxButtonTextClassName}
+        >
+            {features.map((feature) => (
+                <FeatureCardItem
+                    key={feature.id}
+                    feature={feature}
+                    shouldUseLightText={shouldUseLightText}
+                    useInvertedBackground={useInvertedBackground}
+                    itemClassName={itemClassName}
+                    mediaWrapperClassName={mediaWrapperClassName}
+                    mediaClassName={mediaClassName}
+                    cardClassName={cardClassName}
+                    cardTitleClassName={cardTitleClassName}
+                    tagsContainerClassName={tagsContainerClassName}
+                    tagClassName={tagClassName}
+                    arrowClassName={arrowClassName}
+                />
+            ))}
+        </CardStack>
+    );
+};
+
+
+export default FeatureCardTwentyThree;
diff --git a/src/components/sections/feature/FeatureTimelineBento.tsx b/src/components/sections/feature/FeatureTimelineBento.tsx
new file mode 100644
index 0000000..625d226
--- /dev/null
+++ b/src/components/sections/feature/FeatureTimelineBento.tsx
@@ -0,0 +1,308 @@
+"use client";
+
+import CardList from "@/components/cardStack/CardList";
+import Button from "@/components/button/Button";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { getButtonProps } from "@/lib/buttonUtils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import { BentoGlobe } from "@/components/bento/BentoGlobe";
+import BentoIconInfoCards from "@/components/bento/BentoIconInfoCards";
+import BentoAnimatedBarChart from "@/components/bento/BentoAnimatedBarChart";
+import Bento3DStackCards from "@/components/bento/Bento3DStackCards";
+import Bento3DTaskList, { type TaskItem } from "@/components/bento/Bento3DTaskList";
+import BentoOrbitingIcons, { type OrbitingItem } from "@/components/bento/BentoOrbitingIcons";
+import BentoMap from "@/components/bento/BentoMap";
+import BentoMarquee from "@/components/bento/BentoMarquee";
+import BentoLineChart from "@/components/bento/BentoLineChart/BentoLineChart";
+import BentoPhoneAnimation, { type PhoneApp, type PhoneApps8 } from "@/components/bento/BentoPhoneAnimation";
+import BentoChatAnimation, { type ChatExchange } from "@/components/bento/BentoChatAnimation";
+import Bento3DCardGrid from "@/components/bento/Bento3DCardGrid";
+import BentoRevealIcon from "@/components/bento/BentoRevealIcon";
+import BentoTimeline, { type TimelineItem } from "@/components/bento/BentoTimeline";
+import BentoMediaStack, { type MediaStackItem } from "@/components/bento/BentoMediaStack";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, ButtonAnimationType, TitleSegment, CardAnimationType } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+export type { PhoneApp, PhoneApps8, ChatExchange, TimelineItem, MediaStackItem, TaskItem, OrbitingItem };
+
+export type BentoInfoItem = {
+    icon: LucideIcon;
+    label: string;
+    value: string;
+};
+
+export type Bento3DItem = {
+    icon: LucideIcon;
+    title: string;
+    subtitle: string;
+    detail: string;
+};
+
+type BaseFeatureCard = {
+    title: string;
+    description: string;
+    buttons?: ButtonConfig[];
+};
+
+export type FeatureCard = BaseFeatureCard & (
+    | {
+        bentoComponent: "icon-info-cards";
+        items: BentoInfoItem[];
+    }
+    | {
+        bentoComponent: "3d-stack-cards";
+        items: [Bento3DItem, Bento3DItem, Bento3DItem];
+    }
+    | {
+        bentoComponent: "3d-task-list";
+        bentoTitle: string;
+        items: TaskItem[];
+    }
+    | {
+        bentoComponent: "orbiting-icons";
+        centerIcon: LucideIcon;
+        items: OrbitingItem[];
+    }
+    | ({
+        bentoComponent: "marquee";
+        centerIcon: LucideIcon;
+    } & (
+            | { variant: "text"; texts: string[] }
+            | { variant: "icon"; icons: LucideIcon[] }
+        ))
+    | {
+        bentoComponent: "globe" | "animated-bar-chart" | "map" | "line-chart";
+    }
+    | {
+        bentoComponent: "3d-card-grid";
+        items: [{ name: string; icon: LucideIcon }, { name: string; icon: LucideIcon }, { name: string; icon: LucideIcon }, { name: string; icon: LucideIcon }];
+        centerIcon: LucideIcon;
+    }
+    | {
+        bentoComponent: "phone";
+        statusIcon: LucideIcon;
+        alertIcon: LucideIcon;
+        alertTitle: string;
+        alertMessage: string;
+        apps: PhoneApps8;
+    }
+    | {
+        bentoComponent: "chat";
+        aiIcon: LucideIcon;
+        userIcon: LucideIcon;
+        exchanges: ChatExchange[];
+        placeholder: string;
+    }
+    | {
+        bentoComponent: "reveal-icon";
+        icon: LucideIcon;
+    }
+    | {
+        bentoComponent: "timeline";
+        heading: string;
+        subheading: string;
+        items: [TimelineItem, TimelineItem, TimelineItem];
+        completedLabel: string;
+    }
+    | {
+        bentoComponent: "media-stack";
+        items: [MediaStackItem, MediaStackItem, MediaStackItem];
+    }
+);
+
+interface FeatureTimelineBentoProps {
+    features: FeatureCard[];
+    animationType: CardAnimationType;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    tagAnimation?: ButtonAnimationType;
+    buttons?: ButtonConfig[];
+    buttonAnimation?: ButtonAnimationType;
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    cardClassName?: string;
+    textBoxTitleClassName?: string;
+    textBoxDescriptionClassName?: string;
+    textBoxClassName?: string;
+    textBoxTagClassName?: string;
+    textBoxButtonContainerClassName?: string;
+    textBoxButtonClassName?: string;
+    textBoxButtonTextClassName?: string;
+    titleImageWrapperClassName?: string;
+    titleImageClassName?: string;
+    cardContentClassName?: string;
+    stepNumberClassName?: string;
+    cardTitleClassName?: string;
+    cardDescriptionClassName?: string;
+    bentoContainerClassName?: string;
+    cardButtonClassName?: string;
+    cardButtonTextClassName?: string;
+}
+
+const FeatureTimelineBento = ({
+    features,
+    animationType,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    tagAnimation,
+    buttons,
+    buttonAnimation,
+    textboxLayout,
+    useInvertedBackground,
+    ariaLabel = "Feature section",
+    className = "",
+    containerClassName = "",
+    cardClassName = "",
+    textBoxTitleClassName = "",
+    textBoxDescriptionClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+    titleImageWrapperClassName = "",
+    titleImageClassName = "",
+    cardContentClassName = "",
+    stepNumberClassName = "",
+    cardTitleClassName = "",
+    cardDescriptionClassName = "",
+    bentoContainerClassName = "",
+    cardButtonClassName = "",
+    cardButtonTextClassName = "",
+}: FeatureTimelineBentoProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    const getBentoComponent = (feature: FeatureCard) => {
+        switch (feature.bentoComponent) {
+            case "globe":
+                return (
+                    <div className="relative w-full h-full min-h-0" style={{
+                        maskImage: "linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%), linear-gradient(to bottom, black 40%, transparent 100%)",
+                        WebkitMaskImage: "linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%), linear-gradient(to bottom, black 40%, transparent 100%)",
+                        maskComposite: "intersect",
+                        WebkitMaskComposite: "source-in"
+                    }}>
+                        <BentoGlobe className="w-full scale-150 mt-[15%]" />
+                    </div>
+                );
+            case "icon-info-cards":
+                return <BentoIconInfoCards items={feature.items} useInvertedBackground={useInvertedBackground} />;
+            case "animated-bar-chart":
+                return <BentoAnimatedBarChart />;
+            case "3d-stack-cards":
+                return <Bento3DStackCards cards={feature.items.map(item => ({ Icon: item.icon, title: item.title, subtitle: item.subtitle, detail: item.detail }))} useInvertedBackground={useInvertedBackground} />;
+            case "3d-task-list":
+                return <Bento3DTaskList title={feature.bentoTitle} items={feature.items} useInvertedBackground={useInvertedBackground} />;
+            case "orbiting-icons":
+                return <BentoOrbitingIcons centerIcon={feature.centerIcon} items={feature.items} useInvertedBackground={useInvertedBackground} />;
+            case "marquee":
+                return feature.variant === "text"
+                    ? <BentoMarquee centerIcon={feature.centerIcon} variant="text" texts={feature.texts} useInvertedBackground={useInvertedBackground} />
+                    : <BentoMarquee centerIcon={feature.centerIcon} variant="icon" icons={feature.icons} useInvertedBackground={useInvertedBackground} />;
+            case "map":
+                return <BentoMap useInvertedBackground={useInvertedBackground} />;
+            case "line-chart":
+                return <BentoLineChart useInvertedBackground={useInvertedBackground} />;
+            case "3d-card-grid":
+                return <Bento3DCardGrid items={feature.items} centerIcon={feature.centerIcon} useInvertedBackground={useInvertedBackground} />;
+            case "phone":
+                return <BentoPhoneAnimation statusIcon={feature.statusIcon} alertIcon={feature.alertIcon} alertTitle={feature.alertTitle} alertMessage={feature.alertMessage} apps={feature.apps} useInvertedBackground={useInvertedBackground} />;
+            case "chat":
+                return <BentoChatAnimation aiIcon={feature.aiIcon} userIcon={feature.userIcon} exchanges={feature.exchanges} placeholder={feature.placeholder} useInvertedBackground={useInvertedBackground} />;
+            case "reveal-icon":
+                return <BentoRevealIcon icon={feature.icon} useInvertedBackground={useInvertedBackground} />;
+            case "timeline":
+                return <BentoTimeline heading={feature.heading} subheading={feature.subheading} items={feature.items} completedLabel={feature.completedLabel} useInvertedBackground={useInvertedBackground} />;
+            case "media-stack":
+                return <BentoMediaStack items={feature.items} useInvertedBackground={useInvertedBackground} />;
+        }
+    };
+
+    return (
+        <CardList
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            tagAnimation={tagAnimation}
+            buttons={buttons}
+            buttonAnimation={buttonAnimation}
+            textboxLayout={textboxLayout}
+            animationType={animationType}
+            useInvertedBackground={useInvertedBackground}
+            className={className}
+            containerClassName={containerClassName}
+            cardClassName={cardClassName}
+            titleClassName={textBoxTitleClassName}
+            descriptionClassName={textBoxDescriptionClassName}
+            textBoxClassName={textBoxClassName}
+            tagClassName={textBoxTagClassName}
+            buttonContainerClassName={textBoxButtonContainerClassName}
+            buttonClassName={textBoxButtonClassName}
+            buttonTextClassName={textBoxButtonTextClassName}
+            titleImageWrapperClassName={titleImageWrapperClassName}
+            titleImageClassName={titleImageClassName}
+            ariaLabel={ariaLabel}
+        >
+            {features.map((feature, index) => (
+                <div
+                    key={index}
+                    className={cls("relative z-1 w-full min-h-0 h-full flex flex-col justify-between items-center p-6 gap-6 md:p-15 md:gap-15", index % 2 === 0 ? "md:flex-row" : "md:flex-row-reverse", cardContentClassName)}
+                >
+                    <div className="w-full md:w-1/2 min-w-0 h-fit md:h-full flex flex-col justify-center">
+                        <div className="w-full min-w-0 flex flex-col gap-3 md:gap-5">
+                            <div
+                                className={cls(
+                                    "h-8 w-[var(--height-8)] primary-button text-primary-cta-text rounded-theme flex items-center justify-center",
+                                    stepNumberClassName
+                                )}
+                            >
+                                <p className="text-sm truncate">
+                                    {index + 1}
+                                </p>
+                            </div>
+                            <h2 className={cls("mt-1 text-4xl md:text-5xl font-medium leading-[1.15] text-balance", shouldUseLightText && "text-background", cardTitleClassName)}>
+                                {feature.title}
+                            </h2>
+                            <p className={cls("text-base leading-[1.15] text-balance", shouldUseLightText ? "text-background" : "text-foreground", cardDescriptionClassName)}>
+                                {feature.description}
+                            </p>
+                            {feature.buttons && feature.buttons.length > 0 && (
+                                <div className="flex flex-wrap gap-3 max-md:justify-center">
+                                    {feature.buttons.slice(0, 2).map((button, btnIndex) => (
+                                        <Button key={`${button.text}-${btnIndex}`} {...getButtonProps(button, btnIndex, theme.defaultButtonVariant, cardButtonClassName, cardButtonTextClassName)} />
+                                    ))}
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                    <div
+                        className={cls(
+                            "relative w-full md:w-1/2 aspect-square overflow-hidden rounded-theme-capped secondary-button p-5",
+                            bentoContainerClassName
+                        )}
+                    >
+                        <div className="relative w-full h-full overflow-hidden mask-soft-edges">
+                            {getBentoComponent(feature)}
+                        </div>
+                    </div>
+                </div>
+            ))}
+        </CardList>
+    );
+};
+
+
+export default FeatureTimelineBento;
diff --git a/src/components/sections/feature/featureBorderGlow/FeatureBorderGlow.tsx b/src/components/sections/feature/featureBorderGlow/FeatureBorderGlow.tsx
new file mode 100644
index 0000000..302d27a
--- /dev/null
+++ b/src/components/sections/feature/featureBorderGlow/FeatureBorderGlow.tsx
@@ -0,0 +1,154 @@
+"use client";
+
+import CardStack from "@/components/cardStack/CardStack";
+import FeatureBorderGlowItem from "./FeatureBorderGlowItem";
+import { shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { LucideIcon } from "lucide-react";
+import type {
+  ButtonConfig,
+  CardAnimationType,
+  TitleSegment,
+  ButtonAnimationType,
+} from "@/components/cardStack/types";
+import type {
+  TextboxLayout,
+  InvertedBackground,
+} from "@/providers/themeProvider/config/constants";
+
+interface FeatureCard {
+  icon: LucideIcon;
+  title: string;
+  description: string;
+}
+
+interface FeatureBorderGlowProps {
+  features: FeatureCard[];
+  carouselMode?: "auto" | "buttons";
+  uniformGridCustomHeightClasses?: string;
+  animationType: CardAnimationType;
+  title: string;
+  titleSegments?: TitleSegment[];
+  description: string;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  tagAnimation?: ButtonAnimationType;
+  buttons?: ButtonConfig[];
+  buttonAnimation?: ButtonAnimationType;
+  textboxLayout: TextboxLayout;
+  useInvertedBackground: InvertedBackground;
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  cardClassName?: string;
+  iconContainerClassName?: string;
+  iconClassName?: string;
+  textBoxTitleClassName?: string;
+  textBoxTitleImageWrapperClassName?: string;
+  textBoxTitleImageClassName?: string;
+  textBoxDescriptionClassName?: string;
+  cardTitleClassName?: string;
+  cardDescriptionClassName?: string;
+  gridClassName?: string;
+  carouselClassName?: string;
+  controlsClassName?: string;
+  textBoxClassName?: string;
+  textBoxTagClassName?: string;
+  textBoxButtonContainerClassName?: string;
+  textBoxButtonClassName?: string;
+  textBoxButtonTextClassName?: string;
+}
+
+const FeatureBorderGlow = ({
+  features,
+  carouselMode = "buttons",
+  uniformGridCustomHeightClasses = "min-h-75 2xl:min-h-85",
+  animationType,
+  title,
+  titleSegments,
+  description,
+  tag,
+  tagIcon,
+  tagAnimation = "opacity",
+  buttons = [],
+  buttonAnimation = "slide-up",
+  textboxLayout,
+  useInvertedBackground = false,
+  ariaLabel = "Feature section",
+  className = "",
+  containerClassName = "",
+  cardClassName = "",
+  iconContainerClassName = "",
+  iconClassName = "",
+  textBoxTitleClassName = "",
+  textBoxTitleImageWrapperClassName = "",
+  textBoxTitleImageClassName = "",
+  textBoxDescriptionClassName = "",
+  cardTitleClassName = "",
+  cardDescriptionClassName = "",
+  gridClassName = "",
+  carouselClassName = "",
+  controlsClassName = "",
+  textBoxClassName = "",
+  textBoxTagClassName = "",
+  textBoxButtonContainerClassName = "",
+  textBoxButtonClassName = "",
+  textBoxButtonTextClassName = "",
+}: FeatureBorderGlowProps) => {
+  const theme = useTheme();
+  const shouldUseLightText = shouldUseInvertedText(
+    useInvertedBackground,
+    theme.cardStyle
+  );
+
+  return (
+    <CardStack
+      mode={carouselMode}
+      gridVariant="uniform-all-items-equal"
+      uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+      animationType={animationType}
+      title={title}
+      titleSegments={titleSegments}
+      description={description}
+      tag={tag}
+      tagIcon={tagIcon}
+      tagAnimation={tagAnimation}
+      buttons={buttons}
+      buttonAnimation={buttonAnimation}
+      textboxLayout={textboxLayout}
+      useInvertedBackground={useInvertedBackground}
+      className={className}
+      containerClassName={containerClassName}
+      gridClassName={gridClassName}
+      carouselClassName={carouselClassName}
+      controlsClassName={controlsClassName}
+      textBoxClassName={textBoxClassName}
+      titleClassName={textBoxTitleClassName}
+      titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
+      titleImageClassName={textBoxTitleImageClassName}
+      descriptionClassName={textBoxDescriptionClassName}
+      tagClassName={textBoxTagClassName}
+      buttonContainerClassName={textBoxButtonContainerClassName}
+      buttonClassName={textBoxButtonClassName}
+      buttonTextClassName={textBoxButtonTextClassName}
+      ariaLabel={ariaLabel}
+    >
+      {features.map((feature, index) => (
+        <FeatureBorderGlowItem
+          key={`${feature.title}-${index}`}
+          item={feature}
+          index={index}
+          className={cardClassName}
+          iconContainerClassName={iconContainerClassName}
+          iconClassName={iconClassName}
+          titleClassName={cardTitleClassName}
+          descriptionClassName={cardDescriptionClassName}
+          shouldUseLightText={shouldUseLightText}
+        />
+      ))}
+    </CardStack>
+  );
+};
+
+
+export default FeatureBorderGlow;
diff --git a/src/components/sections/feature/featureBorderGlow/FeatureBorderGlowItem.tsx b/src/components/sections/feature/featureBorderGlow/FeatureBorderGlowItem.tsx
new file mode 100644
index 0000000..2f2afe5
--- /dev/null
+++ b/src/components/sections/feature/featureBorderGlow/FeatureBorderGlowItem.tsx
@@ -0,0 +1,85 @@
+"use client";
+
+import { LucideIcon } from "lucide-react";
+import { GlowingEffect } from "@/components/background/GlowingEffect";
+import { GLOWING_EFFECT_PROPS } from "./constants";
+import { cls } from "@/lib/utils";
+
+export interface FeatureBorderGlowItemData {
+  icon: LucideIcon;
+  title: string;
+  description: string;
+}
+
+interface FeatureBorderGlowItemProps {
+  item: FeatureBorderGlowItemData;
+  index: number;
+  className?: string;
+  iconContainerClassName?: string;
+  iconClassName?: string;
+  titleClassName?: string;
+  descriptionClassName?: string;
+  shouldUseLightText?: boolean;
+}
+
+const FeatureBorderGlowItem = ({
+  item,
+  index,
+  className = "",
+  iconContainerClassName = "",
+  iconClassName = "",
+  titleClassName = "",
+  descriptionClassName = "",
+  shouldUseLightText = false,
+}: FeatureBorderGlowItemProps) => {
+  const Icon = item.icon;
+
+  return (
+    <article
+      key={`feature-${index}`}
+      className={cls("card relative rounded-theme-capped min-h-0 h-full", className)}
+      aria-label={item.title}
+    >
+      <div className="relative z-10 w-full h-full p-5 flex flex-col justify-between gap-5">
+        <div
+          className={cls(
+            "h-15 w-[3.75rem] aspect-square primary-button rounded-theme flex items-center justify-center",
+            iconContainerClassName
+          )}
+        >
+          <Icon
+            className={cls(
+              "w-[35%] aspect-square text-primary-cta-text",
+              iconClassName
+            )}
+            strokeWidth={1}
+            aria-hidden="true"
+          />
+        </div>
+        <div className="flex flex-col gap-1">
+          <h3
+            className={cls(
+              "text-2xl font-medium leading-tight",
+              shouldUseLightText && "text-background",
+              titleClassName
+            )}
+          >
+            {item.title}
+          </h3>
+          <p
+            className={cls(
+              "text-sm leading-tight",
+              shouldUseLightText ? "text-background" : "text-foreground",
+              descriptionClassName
+            )}
+          >
+            {item.description}
+          </p>
+        </div>
+      </div>
+      <GlowingEffect {...GLOWING_EFFECT_PROPS} />
+    </article>
+  );
+};
+
+export default FeatureBorderGlowItem;
diff --git a/src/components/sections/feature/featureBorderGlow/constants.ts b/src/components/sections/feature/featureBorderGlow/constants.ts
new file mode 100644
index 0000000..f58e938
--- /dev/null
+++ b/src/components/sections/feature/featureBorderGlow/constants.ts
@@ -0,0 +1,8 @@
+export const GLOWING_EFFECT_PROPS = {
+  spread: 40,
+  glow: true,
+  disabled: false,
+  proximity: 64,
+  inactiveZone: 0.01,
+  borderWidth: 1.5,
+} as const;
diff --git a/src/components/sections/feature/featureCardThree/FeatureCardThree.css b/src/components/sections/feature/featureCardThree/FeatureCardThree.css
new file mode 100644
index 0000000..e2cdbb4
--- /dev/null
+++ b/src/components/sections/feature/featureCardThree/FeatureCardThree.css
@@ -0,0 +1,32 @@
+.feature-card-three-title {
+    font-size: var(--text-2xl);
+}
+
+.feature-card-three-description {
+    font-size: var(--text-sm);
+}
+
+/* Mobile touch support - duplicate hover states for is-active class */
+.feature-card-three-item.is-active .feature-card-three-item-box > div {
+    transform: rotateY(180deg);
+}
+
+.feature-card-three-item.is-active .feature-card-three-content-wrapper {
+    transform: translateY(var(--hover-translate-y));
+}
+
+.feature-card-three-item.is-active .feature-card-three-title {
+    color: var(--color-foreground);
+}
+
+.feature-card-three-item.is-active .feature-card-three-description-wrapper {
+    opacity: 1;
+}
+
+.feature-card-three-item.is-active .feature-card-three-reveal-bg {
+    --tw-translate-y: 0px !important;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
+    left: calc(var(--vw-1_5) * 0.75);
+    bottom: calc(var(--vw-1_5) * 0.75);
+    right: calc(var(--vw-1_5) * 0.75);
+}
diff --git a/src/components/sections/feature/featureCardThree/FeatureCardThree.tsx b/src/components/sections/feature/featureCardThree/FeatureCardThree.tsx
new file mode 100644
index 0000000..d88661f
--- /dev/null
+++ b/src/components/sections/feature/featureCardThree/FeatureCardThree.tsx
@@ -0,0 +1,181 @@
+"use client";
+
+import "./FeatureCardThree.css";
+import { useRef, useCallback, useState } from "react";
+import CardStack from "@/components/cardStack/CardStack";
+import FeatureCardThreeItem from "./FeatureCardThreeItem";
+import { useDynamicDimensions } from "./useDynamicDimensions";
+import { useClickOutside } from "@/hooks/useClickOutside";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, GridVariant, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type FeatureCard = {
+  title: string;
+  description: string;
+  imageSrc: string;
+  imageAlt?: string;
+};
+
+interface FeatureCardThreeProps {
+  features: FeatureCard[];
+  carouselMode?: "auto" | "buttons";
+  gridVariant: GridVariant;
+  uniformGridCustomHeightClasses?: string;
+  animationType: CardAnimationType;
+  title: string;
+  titleSegments?: TitleSegment[];
+  description: string;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  tagAnimation?: ButtonAnimationType;
+  buttons?: ButtonConfig[];
+  buttonAnimation?: ButtonAnimationType;
+  textboxLayout: TextboxLayout;
+  useInvertedBackground: InvertedBackground;
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  cardClassName?: string;
+  textBoxTitleClassName?: string;
+  textBoxTitleImageWrapperClassName?: string;
+  textBoxTitleImageClassName?: string;
+  textBoxDescriptionClassName?: string;
+  cardTitleClassName?: string;
+  cardDescriptionClassName?: string;
+  gridClassName?: string;
+  carouselClassName?: string;
+  controlsClassName?: string;
+  textBoxClassName?: string;
+  textBoxTagClassName?: string;
+  textBoxButtonContainerClassName?: string;
+  textBoxButtonClassName?: string;
+  textBoxButtonTextClassName?: string;
+  itemContentClassName?: string;
+}
+
+const FeatureCardThree = ({
+  features,
+  carouselMode = "buttons",
+  gridVariant,
+  uniformGridCustomHeightClasses,
+  animationType,
+  title,
+  titleSegments,
+  description,
+  tag,
+  tagIcon,
+  tagAnimation = "opacity",
+  buttons = [],
+  buttonAnimation = "slide-up",
+  textboxLayout,
+  useInvertedBackground = false,
+  ariaLabel = "Feature section",
+  className = "",
+  containerClassName = "",
+  cardClassName = "",
+  textBoxTitleClassName = "",
+  textBoxTitleImageWrapperClassName = "",
+  textBoxTitleImageClassName = "",
+  textBoxDescriptionClassName = "",
+  cardTitleClassName = "",
+  cardDescriptionClassName = "",
+  gridClassName = "",
+  carouselClassName = "",
+  controlsClassName = "",
+  textBoxClassName = "",
+  textBoxTagClassName = "",
+  textBoxButtonContainerClassName = "",
+  textBoxButtonClassName = "",
+  textBoxButtonTextClassName = "",
+  itemContentClassName = "",
+}: FeatureCardThreeProps) => {
+  const featureCardThreeRefs = useRef<(HTMLDivElement | null)[]>([]);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [activeIndex, setActiveIndex] = useState<number | null>(null);
+
+
+  const setRef = useCallback(
+    (index: number) => (el: HTMLDivElement | null) => {
+      if (featureCardThreeRefs.current) {
+        featureCardThreeRefs.current[index] = el;
+      }
+    },
+    []
+  );
+
+  // Check if device supports hover (desktop) or not (mobile/touch)
+  const isTouchDevice = typeof window !== "undefined" && window.matchMedia("(hover: none)").matches;
+
+  // Handle click outside to deactivate on mobile
+  useClickOutside(
+    containerRef,
+    () => setActiveIndex(null),
+    activeIndex !== null && isTouchDevice
+  );
+
+  const handleItemClick = useCallback((index: number) => {
+    if (typeof window !== "undefined" && !window.matchMedia("(hover: none)").matches) return;
+    setActiveIndex((prev) => (prev === index ? null : index));
+  }, []);
+
+  useDynamicDimensions([featureCardThreeRefs], {
+    titleSelector: ".feature-card-three-title-row .feature-card-three-title",
+    descriptionSelector: ".feature-card-three-description-wrapper .feature-card-three-description",
+  });
+
+  return (
+    <div ref={containerRef}>
+      <CardStack
+        mode={carouselMode}
+        gridVariant={gridVariant}
+        uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+        animationType={animationType}
+        
+        title={title}
+        titleSegments={titleSegments}
+        description={description}
+        tag={tag}
+        tagIcon={tagIcon}
+        tagAnimation={tagAnimation}
+        buttons={buttons}
+        buttonAnimation={buttonAnimation}
+        textboxLayout={textboxLayout}
+        useInvertedBackground={useInvertedBackground}
+        className={className}
+        containerClassName={containerClassName}
+        gridClassName={gridClassName}
+        carouselClassName={carouselClassName}
+        controlsClassName={controlsClassName}
+        textBoxClassName={textBoxClassName}
+        titleClassName={textBoxTitleClassName}
+        titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
+        titleImageClassName={textBoxTitleImageClassName}
+        descriptionClassName={textBoxDescriptionClassName}
+        tagClassName={textBoxTagClassName}
+        buttonContainerClassName={textBoxButtonContainerClassName}
+        buttonClassName={textBoxButtonClassName}
+        buttonTextClassName={textBoxButtonTextClassName}
+        ariaLabel={ariaLabel}
+      >
+        {features.map((feature, index) => (
+          <FeatureCardThreeItem
+            key={`${feature.title}-${index}`}
+            ref={setRef(index)}
+            item={feature}
+            itemNumber={index + 1}
+            isActive={activeIndex === index}
+            onItemClick={() => handleItemClick(index)}
+            className={cardClassName}
+            itemContentClassName={itemContentClassName}
+            itemTitleClassName={cardTitleClassName}
+            itemDescriptionClassName={cardDescriptionClassName}
+          />
+        ))}
+      </CardStack>
+    </div>
+  );
+};
+
+
+export default FeatureCardThree;
diff --git a/src/components/sections/feature/featureCardThree/FeatureCardThreeItem.tsx b/src/components/sections/feature/featureCardThree/FeatureCardThreeItem.tsx
new file mode 100644
index 0000000..19c3b0d
--- /dev/null
+++ b/src/components/sections/feature/featureCardThree/FeatureCardThreeItem.tsx
@@ -0,0 +1,143 @@
+"use client";
+
+import { forwardRef } from "react";
+import Image from "next/image";
+import { Info } from "lucide-react";
+import { cls } from "@/lib/utils";
+
+interface FeatureCardThreeItemData {
+  title: string;
+  description: string;
+  imageSrc: string;
+  imageAlt?: string;
+}
+
+interface FeatureCardThreeItemProps {
+  item: FeatureCardThreeItemData;
+  itemNumber: number;
+  isActive?: boolean;
+  onItemClick?: () => void;
+  className?: string;
+  itemContentClassName?: string;
+  itemTitleClassName?: string;
+  itemDescriptionClassName?: string;
+}
+
+const MASK_GRADIENT = "linear-gradient(to bottom, transparent, black 60%)";
+
+const FeatureCardThreeItem = forwardRef<HTMLDivElement, FeatureCardThreeItemProps>(
+  (
+    {
+        item,
+        itemNumber,
+        isActive = false,
+        onItemClick,
+        className = "",
+        itemContentClassName = "",
+        itemTitleClassName = "",
+        itemDescriptionClassName = "",
+      },
+      ref
+    ) => {
+      return (
+        <div
+          ref={ref}
+          className={cls(
+            "feature-card-three-item relative overflow-hidden h-full rounded-theme-capped group",
+            isActive && "is-active",
+            className
+          )}
+          role="article"
+          aria-label={`${item.title} - Feature ${itemNumber}`}
+          tabIndex={0}
+          onClick={onItemClick}
+        >
+          <div
+            className="feature-card-three-item-box absolute top-6 left-6 z-10 flex items-center justify-center [perspective:1000px] [transform-style:preserve-3d]"
+          >
+            <div
+              className="relative h-8 aspect-square rounded-theme bg-background transition-transform duration-400 ease-[cubic-bezier(0.4,0,0.2,1)] [transform-style:preserve-3d] group-hover:[transform:rotateY(180deg)]"
+            >
+              <div
+                className="feature-card-three-item-box-front absolute w-full h-full rounded-theme bg-background flex items-center justify-center [backface-visibility:hidden]"
+              >
+                <p
+                  className="feature-card-three-description text-foreground truncate"
+                >
+                  {itemNumber}
+                </p>
+              </div>
+              <div
+                className="feature-card-three-item-box-back absolute w-full h-full rounded-theme bg-background flex items-center justify-center [backface-visibility:hidden] [transform:rotateY(180deg)]"
+              >
+                <Info
+                  className="w-1/2 h-1/2 text-foreground"
+                  strokeWidth={1.5}
+                  aria-hidden="true"
+                />
+              </div>
+            </div>
+          </div>
+
+          <Image
+            src={item.imageSrc}
+            alt={item.imageAlt || item.title}
+            width={1920}
+            height={1080}
+            className="relative z-1 object-cover rounded-theme-capped h-full w-full  "
+            unoptimized={item.imageSrc.startsWith('http') || item.imageSrc.startsWith('//')}
+            aria-hidden={item.imageAlt === ""}
+          />
+
+          <div
+            className="absolute z-10 bottom-0 left-0 right-0 h-30 backdrop-blur-xl opacity-100"
+            style={{ maskImage: MASK_GRADIENT }}
+            aria-hidden="true"
+          />
+
+          <div
+            className="feature-card-three-content-wrapper absolute z-20 transition-all duration-400 ease-out flex flex-col gap-2 group-hover:[transform:translateY(var(--hover-translate-y))]"
+            style={{
+              top: "var(--content-top-position)",
+              left: "calc((var(--vw-1_5) * 1.5))",
+              width: "calc(100% - (var(--vw-1_5) * 3))",
+            }}
+          >
+            <div className="feature-card-three-title-row">
+              <h2
+                className={cls(
+                  "feature-card-three-title font-semibold leading-[110%] transition-colors text-background group-hover:text-foreground",
+                  itemTitleClassName
+                )}
+              >
+                {item.title}
+              </h2>
+            </div>
+            <div
+              className="feature-card-three-description-wrapper transition-all duration-400 ease-out opacity-0 group-hover:opacity-100"
+            >
+              <p
+                className={cls("feature-card-three-description leading-[120%] w-full text-foreground", itemDescriptionClassName)}
+              >
+                {item.description}
+              </p>
+            </div>
+          </div>
+
+          <div
+            className={cls(
+              "feature-card-three-reveal-bg !absolute left-0 bottom-0 card backdrop-blur-xs z-10 rounded-theme-capped transition-all duration-400 ease-out translate-y-full right-0 group-hover:translate-y-0 group-hover:left-[calc(var(--vw-1_5)*0.75)] group-hover:bottom-[calc(var(--vw-1_5)*0.75)] group-hover:right-[calc(var(--vw-1_5)*0.75)]",
+              itemContentClassName
+            )}
+            style={{
+              height: "var(--reveal-bg-height)",
+            }}
+          ></div>
+        </div>
+    );
+  }
+);
+
+FeatureCardThreeItem.displayName = "FeatureCardThreeItem";
+
+export default FeatureCardThreeItem;
diff --git a/src/components/sections/feature/featureCardThree/useDynamicDimensions.ts b/src/components/sections/feature/featureCardThree/useDynamicDimensions.ts
new file mode 100644
index 0000000..e861535
--- /dev/null
+++ b/src/components/sections/feature/featureCardThree/useDynamicDimensions.ts
@@ -0,0 +1,122 @@
+import { useEffect, useCallback, useMemo } from 'react'
+
+let cachedVw15: number | null = null
+let lastWindowWidth = 0
+
+const getVw15InPixels = (): number => {
+  const currentWidth = window.innerWidth
+  if (cachedVw15 !== null && lastWindowWidth === currentWidth) {
+    return cachedVw15
+  }
+
+  const temp = document.createElement('div')
+  temp.style.position = 'absolute'
+  temp.style.width = 'var(--vw-1_5)'
+  document.body.appendChild(temp)
+  const width = temp.getBoundingClientRect().width
+  document.body.removeChild(temp)
+
+  cachedVw15 = width || 0
+  lastWindowWidth = currentWidth
+  return cachedVw15
+}
+
+
+const debounce = <T extends (...args: unknown[]) => void>(func: T, wait: number): ((...args: Parameters<T>) => void) & { cancel: () => void } => {
+  let timeout: NodeJS.Timeout | null = null
+
+  const debouncedFunction = function executedFunction(...args: Parameters<T>) {
+    const later = () => {
+      timeout = null
+      func(...args)
+    }
+    if (timeout !== null) {
+      clearTimeout(timeout)
+    }
+    timeout = setTimeout(later, wait)
+  }
+
+  debouncedFunction.cancel = () => {
+    if (timeout !== null) {
+      clearTimeout(timeout)
+      timeout = null
+    }
+  }
+
+  return debouncedFunction
+}
+
+interface DynamicDimensionsOptions {
+  titleSelector?: string
+  descriptionSelector?: string
+  containerSelector?: string | null
+}
+
+type RefArray = React.RefObject<(HTMLDivElement | null)[]> | React.RefObject<(HTMLDivElement | null)[]>[]
+
+export const useDynamicDimensions = (refs: RefArray, options: DynamicDimensionsOptions = {}) => {
+  const {
+    titleSelector = '.feature-card-three-title',
+    descriptionSelector = '.feature-card-three-description',
+    containerSelector = null
+  } = options
+
+  const calculateDimensions = useCallback(() => {
+    const processRef = (ref: HTMLElement | null) => {
+      if (!ref) return
+
+      const container = containerSelector ? ref.querySelector(containerSelector) as HTMLElement : ref
+      if (!container) return
+
+      const titleElement = container.querySelector(titleSelector) as HTMLElement
+      const descriptionElement = container.querySelector(descriptionSelector) as HTMLElement
+
+      if (titleElement && descriptionElement) {
+        const titleHeight = titleElement.offsetHeight
+        const descriptionHeight = descriptionElement.offsetHeight
+
+        const contentTop = `calc(100% - ${titleHeight}px - calc(var(--vw-1_5) * 1.5))`
+
+        const vw15 = getVw15InPixels()
+
+        const contentWrapperHeight = titleHeight + descriptionHeight
+
+        const revealBgHeight = contentWrapperHeight + (vw15 * 2)
+
+        const moveUp = descriptionHeight + (vw15 * 0.55)
+
+        ref.style.setProperty('--reveal-bg-height', `${revealBgHeight}px`)
+        ref.style.setProperty('--content-top-position', contentTop)
+        ref.style.setProperty('--hover-translate-y', `-${moveUp}px`)
+      }
+    }
+
+    if (Array.isArray(refs)) {
+      refs.forEach((refArray) => {
+        if (refArray?.current && Array.isArray(refArray.current)) {
+          refArray.current.forEach(processRef)
+        }
+      })
+    } else if ('current' in refs && refs.current) {
+      if (Array.isArray(refs.current)) {
+        refs.current.forEach(processRef)
+      } else {
+        processRef(refs.current)
+      }
+    }
+  }, [titleSelector, descriptionSelector, containerSelector, refs])
+
+  const debouncedCalculate = useMemo(
+    () => debounce(calculateDimensions, 250),
+    [calculateDimensions]
+  )
+
+  useEffect(() => {
+    calculateDimensions()
+    window.addEventListener('resize', debouncedCalculate)
+    return () => {
+      window.removeEventListener('resize', debouncedCalculate)
+      debouncedCalculate.cancel()
+    }
+  }, [calculateDimensions, debouncedCalculate])
+}
diff --git a/src/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine.css b/src/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine.css
new file mode 100644
index 0000000..ef39b7f
--- /dev/null
+++ b/src/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine.css
@@ -0,0 +1,32 @@
+.feature-card-twenty-nine-title {
+    font-size: var(--text-2xl);
+}
+
+.feature-card-twenty-nine-description {
+    font-size: var(--text-sm);
+}
+
+/* Mobile touch support - duplicate hover states for is-active class */
+.feature-card-twenty-nine-item.is-active .feature-card-twenty-nine-item-box > div {
+    transform: rotateY(180deg);
+}
+
+.feature-card-twenty-nine-item.is-active .feature-card-twenty-nine-content-wrapper {
+    transform: translateY(var(--hover-translate-y));
+}
+
+.feature-card-twenty-nine-item.is-active .feature-card-twenty-nine-title {
+    color: var(--color-foreground);
+}
+
+.feature-card-twenty-nine-item.is-active .feature-card-twenty-nine-description-wrapper {
+    opacity: 1;
+}
+
+.feature-card-twenty-nine-item.is-active .feature-card-twenty-nine-reveal-bg {
+    --tw-translate-y: 0px !important;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
+    left: calc(var(--vw-1_5) * 0.75);
+    bottom: calc(var(--vw-1_5) * 0.75);
+    right: calc(var(--vw-1_5) * 0.75);
+}
diff --git a/src/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine.tsx b/src/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine.tsx
new file mode 100644
index 0000000..dfd7cd1
--- /dev/null
+++ b/src/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine.tsx
@@ -0,0 +1,184 @@
+"use client";
+
+import "./FeatureCardTwentyNine.css";
+import { useRef, useCallback, useState } from "react";
+import CardStack from "@/components/cardStack/CardStack";
+import FeatureCardTwentyNineItem from "./FeatureCardTwentyNineItem";
+import { useDynamicDimensions } from "./useDynamicDimensions";
+import { useClickOutside } from "@/hooks/useClickOutside";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, GridVariant, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type FeatureCard = {
+  title: string;
+  description: string;
+  imageSrc: string;
+  imageAlt?: string;
+  titleImageSrc: string;
+  buttonText: string;
+  buttonHref?: string;
+};
+
+interface FeatureCardTwentyNineProps {
+  features: FeatureCard[];
+  carouselMode?: "auto" | "buttons";
+  gridVariant: GridVariant;
+  uniformGridCustomHeightClasses?: string;
+  animationType: CardAnimationType;
+  title: string;
+  titleSegments?: TitleSegment[];
+  description: string;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  tagAnimation?: ButtonAnimationType;
+  buttons?: ButtonConfig[];
+  buttonAnimation?: ButtonAnimationType;
+  textboxLayout: TextboxLayout;
+  useInvertedBackground: InvertedBackground;
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  cardClassName?: string;
+  textBoxTitleClassName?: string;
+  textBoxTitleImageWrapperClassName?: string;
+  textBoxTitleImageClassName?: string;
+  textBoxDescriptionClassName?: string;
+  cardTitleClassName?: string;
+  cardDescriptionClassName?: string;
+  gridClassName?: string;
+  carouselClassName?: string;
+  controlsClassName?: string;
+  textBoxClassName?: string;
+  textBoxTagClassName?: string;
+  textBoxButtonContainerClassName?: string;
+  textBoxButtonClassName?: string;
+  textBoxButtonTextClassName?: string;
+  itemContentClassName?: string;
+}
+
+const FeatureCardTwentyNine = ({
+  features,
+  carouselMode = "buttons",
+  gridVariant,
+  uniformGridCustomHeightClasses,
+  animationType,
+  title,
+  titleSegments,
+  description,
+  tag,
+  tagIcon,
+  tagAnimation = "opacity",
+  buttons = [],
+  buttonAnimation = "slide-up",
+  textboxLayout,
+  useInvertedBackground = false,
+  ariaLabel = "Feature section",
+  className = "",
+  containerClassName = "",
+  cardClassName = "",
+  textBoxTitleClassName = "",
+  textBoxTitleImageWrapperClassName = "",
+  textBoxTitleImageClassName = "",
+  textBoxDescriptionClassName = "",
+  cardTitleClassName = "",
+  cardDescriptionClassName = "",
+  gridClassName = "",
+  carouselClassName = "",
+  controlsClassName = "",
+  textBoxClassName = "",
+  textBoxTagClassName = "",
+  textBoxButtonContainerClassName = "",
+  textBoxButtonClassName = "",
+  textBoxButtonTextClassName = "",
+  itemContentClassName = "",
+}: FeatureCardTwentyNineProps) => {
+  const featureCardTwentyNineRefs = useRef<(HTMLDivElement | null)[]>([]);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [activeIndex, setActiveIndex] = useState<number | null>(null);
+
+
+  const setRef = useCallback(
+    (index: number) => (el: HTMLDivElement | null) => {
+      if (featureCardTwentyNineRefs.current) {
+        featureCardTwentyNineRefs.current[index] = el;
+      }
+    },
+    []
+  );
+
+  // Check if device supports hover (desktop) or not (mobile/touch)
+  const isTouchDevice = typeof window !== "undefined" && window.matchMedia("(hover: none)").matches;
+
+  // Handle click outside to deactivate on mobile
+  useClickOutside(
+    containerRef,
+    () => setActiveIndex(null),
+    activeIndex !== null && isTouchDevice
+  );
+
+  const handleItemClick = useCallback((index: number) => {
+    if (typeof window !== "undefined" && !window.matchMedia("(hover: none)").matches) return;
+    setActiveIndex((prev) => (prev === index ? null : index));
+  }, []);
+
+  useDynamicDimensions([featureCardTwentyNineRefs], {
+    titleSelector: ".feature-card-twenty-nine-title-row",
+    descriptionSelector: ".feature-card-twenty-nine-description-wrapper .feature-card-twenty-nine-description",
+  });
+
+  return (
+    <div ref={containerRef}>
+      <CardStack
+        mode={carouselMode}
+        gridVariant={gridVariant}
+        uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+        animationType={animationType}
+
+        title={title}
+        titleSegments={titleSegments}
+        description={description}
+        tag={tag}
+        tagIcon={tagIcon}
+        tagAnimation={tagAnimation}
+        buttons={buttons}
+        buttonAnimation={buttonAnimation}
+        textboxLayout={textboxLayout}
+        useInvertedBackground={useInvertedBackground}
+        className={className}
+        containerClassName={containerClassName}
+        gridClassName={gridClassName}
+        carouselClassName={carouselClassName}
+        controlsClassName={controlsClassName}
+        textBoxClassName={textBoxClassName}
+        titleClassName={textBoxTitleClassName}
+        titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
+        titleImageClassName={textBoxTitleImageClassName}
+        descriptionClassName={textBoxDescriptionClassName}
+        tagClassName={textBoxTagClassName}
+        buttonContainerClassName={textBoxButtonContainerClassName}
+        buttonClassName={textBoxButtonClassName}
+        buttonTextClassName={textBoxButtonTextClassName}
+        ariaLabel={ariaLabel}
+      >
+        {features.map((feature, index) => (
+          <FeatureCardTwentyNineItem
+            key={`${feature.title}-${index}`}
+            ref={setRef(index)}
+            item={feature}
+            itemNumber={index + 1}
+            isActive={activeIndex === index}
+            onItemClick={() => handleItemClick(index)}
+            className={cardClassName}
+            itemContentClassName={itemContentClassName}
+            itemTitleClassName={cardTitleClassName}
+            itemDescriptionClassName={cardDescriptionClassName}
+          />
+        ))}
+      </CardStack>
+    </div>
+  );
+};
+
+
+export default FeatureCardTwentyNine;
diff --git a/src/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNineItem.tsx b/src/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNineItem.tsx
new file mode 100644
index 0000000..76cd780
--- /dev/null
+++ b/src/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNineItem.tsx
@@ -0,0 +1,156 @@
+"use client";
+
+import { forwardRef } from "react";
+import Image from "next/image";
+import { cls } from "@/lib/utils";
+import { useButtonClick } from "@/components/button/useButtonClick";
+
+interface FeatureCardTwentyNineItemData {
+  title: string;
+  description: string;
+  imageSrc: string;
+  imageAlt?: string;
+  titleImageSrc: string;
+  buttonText: string;
+  buttonHref?: string;
+}
+
+interface FeatureCardTwentyNineItemProps {
+  item: FeatureCardTwentyNineItemData;
+  itemNumber: number;
+  isActive?: boolean;
+  onItemClick?: () => void;
+  className?: string;
+  itemContentClassName?: string;
+  itemTitleClassName?: string;
+  itemDescriptionClassName?: string;
+}
+
+const MASK_GRADIENT = "linear-gradient(to bottom, transparent, black 60%)";
+
+const FeatureCardTwentyNineItem = forwardRef<HTMLDivElement, FeatureCardTwentyNineItemProps>(
+  (
+    {
+        item,
+        itemNumber,
+        isActive = false,
+        onItemClick,
+        className = "",
+        itemContentClassName = "",
+        itemTitleClassName = "",
+        itemDescriptionClassName = "",
+      },
+      ref
+    ) => {
+      const handleButtonClick = useButtonClick(item.buttonHref);
+
+      return (
+        <div
+          ref={ref}
+          className={cls(
+            "feature-card-twenty-nine-item relative overflow-hidden h-full rounded-theme-capped group",
+            isActive && "is-active",
+            className
+          )}
+          role="article"
+          aria-label={`${item.title} - Feature ${itemNumber}`}
+          tabIndex={0}
+          onClick={onItemClick}
+        >
+          <div
+            className="absolute top-6 right-6 z-10"
+            onClick={(e) => {
+              e.stopPropagation();
+              handleButtonClick();
+            }}
+          >
+            <div className="primary-button rounded-theme px-4 py-2 cursor-pointer">
+              <p className="text-primary-cta-text text-sm font-medium">
+                {item.buttonText}
+              </p>
+            </div>
+          </div>
+
+          <Image
+            src={item.imageSrc}
+            alt={item.imageAlt || item.title}
+            width={1920}
+            height={1080}
+            className="relative z-1 object-cover rounded-theme-capped h-full w-full  "
+            unoptimized={item.imageSrc.startsWith('http') || item.imageSrc.startsWith('//')}
+            aria-hidden={item.imageAlt === ""}
+          />
+
+          <div
+            className="absolute z-10 bottom-0 left-0 right-0 h-30 backdrop-blur-xl opacity-100"
+            style={{ maskImage: MASK_GRADIENT }}
+            aria-hidden="true"
+          />
+
+          <div
+            className="feature-card-twenty-nine-content-wrapper absolute z-20 transition-all duration-400 ease-out flex flex-col gap-2 group-hover:[transform:translateY(var(--hover-translate-y))]"
+            style={{
+              top: "var(--content-top-position)",
+              left: "calc((var(--vw-1_5) * 1.5))",
+              width: "calc(100% - (var(--vw-1_5) * 3))",
+            }}
+          >
+            <div className="feature-card-twenty-nine-title-row flex items-center gap-2">
+              <div className="h-[calc(var(--text-xl)*1.75)] aspect-square secondary-button p-px rounded-theme overflow-hidden flex-shrink-0">
+                <Image
+                  src={item.titleImageSrc}
+                  alt=""
+                  width={48}
+                  height={48}
+                  className="w-full h-full object-cover rounded-theme"
+                  unoptimized={item.titleImageSrc.startsWith('http') || item.titleImageSrc.startsWith('//')}
+                  aria-hidden="true"
+                />
+              </div>
+              <h2
+                className={cls(
+                  "feature-card-twenty-nine-title font-semibold truncate leading-[110%] transition-colors text-background group-hover:text-foreground",
+                  itemTitleClassName
+                )}
+              >
+                {item.title}
+              </h2>
+              <div className="h-[calc(var(--text-xl)*1.25)] aspect-square flex-shrink-0">
+                <Image
+                  src="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/icons/verified-badge.webp"
+                  alt="Verified"
+                  width={48}
+                  height={48}
+                  className="w-full h-full object-contain"
+                  aria-hidden="true"
+                />
+              </div>
+            </div>
+            <div
+              className="feature-card-twenty-nine-description-wrapper transition-all duration-400 ease-out opacity-0 group-hover:opacity-100"
+            >
+              <p
+                className={cls("feature-card-twenty-nine-description leading-[120%] w-full text-foreground", itemDescriptionClassName)}
+              >
+                {item.description}
+              </p>
+            </div>
+          </div>
+
+          <div
+            className={cls(
+              "feature-card-twenty-nine-reveal-bg !absolute left-0 bottom-0 card backdrop-blur-xs z-10 rounded-theme-capped transition-all duration-400 ease-out translate-y-full right-0 group-hover:translate-y-0 group-hover:left-[calc(var(--vw-1_5)*0.75)] group-hover:bottom-[calc(var(--vw-1_5)*0.75)] group-hover:right-[calc(var(--vw-1_5)*0.75)]",
+              itemContentClassName
+            )}
+            style={{
+              height: "var(--reveal-bg-height)",
+            }}
+          ></div>
+        </div>
+    );
+  }
+);
+
+FeatureCardTwentyNineItem.displayName = "FeatureCardTwentyNineItem";
+
+export default FeatureCardTwentyNineItem;
diff --git a/src/components/sections/feature/featureCardTwentyNine/useDynamicDimensions.ts b/src/components/sections/feature/featureCardTwentyNine/useDynamicDimensions.ts
new file mode 100644
index 0000000..9305160
--- /dev/null
+++ b/src/components/sections/feature/featureCardTwentyNine/useDynamicDimensions.ts
@@ -0,0 +1,122 @@
+import { useEffect, useCallback, useMemo } from 'react'
+
+let cachedVw15: number | null = null
+let lastWindowWidth = 0
+
+const getVw15InPixels = (): number => {
+  const currentWidth = window.innerWidth
+  if (cachedVw15 !== null && lastWindowWidth === currentWidth) {
+    return cachedVw15
+  }
+
+  const temp = document.createElement('div')
+  temp.style.position = 'absolute'
+  temp.style.width = 'var(--vw-1_5)'
+  document.body.appendChild(temp)
+  const width = temp.getBoundingClientRect().width
+  document.body.removeChild(temp)
+
+  cachedVw15 = width || 0
+  lastWindowWidth = currentWidth
+  return cachedVw15
+}
+
+
+const debounce = <T extends (...args: unknown[]) => void>(func: T, wait: number): ((...args: Parameters<T>) => void) & { cancel: () => void } => {
+  let timeout: NodeJS.Timeout | null = null
+
+  const debouncedFunction = function executedFunction(...args: Parameters<T>) {
+    const later = () => {
+      timeout = null
+      func(...args)
+    }
+    if (timeout !== null) {
+      clearTimeout(timeout)
+    }
+    timeout = setTimeout(later, wait)
+  }
+
+  debouncedFunction.cancel = () => {
+    if (timeout !== null) {
+      clearTimeout(timeout)
+      timeout = null
+    }
+  }
+
+  return debouncedFunction
+}
+
+interface DynamicDimensionsOptions {
+  titleSelector?: string
+  descriptionSelector?: string
+  containerSelector?: string | null
+}
+
+type RefArray = React.RefObject<(HTMLDivElement | null)[]> | React.RefObject<(HTMLDivElement | null)[]>[]
+
+export const useDynamicDimensions = (refs: RefArray, options: DynamicDimensionsOptions = {}) => {
+  const {
+    titleSelector = '.feature-card-twenty-nine-title',
+    descriptionSelector = '.feature-card-twenty-nine-description',
+    containerSelector = null
+  } = options
+
+  const calculateDimensions = useCallback(() => {
+    const processRef = (ref: HTMLElement | null) => {
+      if (!ref) return
+
+      const container = containerSelector ? ref.querySelector(containerSelector) as HTMLElement : ref
+      if (!container) return
+
+      const titleElement = container.querySelector(titleSelector) as HTMLElement
+      const descriptionElement = container.querySelector(descriptionSelector) as HTMLElement
+
+      if (titleElement && descriptionElement) {
+        const titleHeight = titleElement.offsetHeight
+        const descriptionHeight = descriptionElement.offsetHeight
+
+        const contentTop = `calc(100% - ${titleHeight}px - calc(var(--vw-1_5) * 1.5))`
+
+        const vw15 = getVw15InPixels()
+
+        const contentWrapperHeight = titleHeight + descriptionHeight
+
+        const revealBgHeight = contentWrapperHeight + (vw15 * 2)
+
+        const moveUp = descriptionHeight + (vw15 * 0.55)
+
+        ref.style.setProperty('--reveal-bg-height', `${revealBgHeight}px`)
+        ref.style.setProperty('--content-top-position', contentTop)
+        ref.style.setProperty('--hover-translate-y', `-${moveUp}px`)
+      }
+    }
+
+    if (Array.isArray(refs)) {
+      refs.forEach((refArray) => {
+        if (refArray?.current && Array.isArray(refArray.current)) {
+          refArray.current.forEach(processRef)
+        }
+      })
+    } else if ('current' in refs && refs.current) {
+      if (Array.isArray(refs.current)) {
+        refs.current.forEach(processRef)
+      } else {
+        processRef(refs.current)
+      }
+    }
+  }, [titleSelector, descriptionSelector, containerSelector, refs])
+
+  const debouncedCalculate = useMemo(
+    () => debounce(calculateDimensions, 250),
+    [calculateDimensions]
+  )
+
+  useEffect(() => {
+    calculateDimensions()
+    window.addEventListener('resize', debouncedCalculate)
+    return () => {
+      window.removeEventListener('resize', debouncedCalculate)
+      debouncedCalculate.cancel()
+    }
+  }, [calculateDimensions, debouncedCalculate])
+}
diff --git a/src/components/sections/feature/featureHoverPattern/FeatureHoverPattern.tsx b/src/components/sections/feature/featureHoverPattern/FeatureHoverPattern.tsx
new file mode 100644
index 0000000..125b2f7
--- /dev/null
+++ b/src/components/sections/feature/featureHoverPattern/FeatureHoverPattern.tsx
@@ -0,0 +1,164 @@
+"use client";
+
+import CardStack from "@/components/cardStack/CardStack";
+import FeatureHoverPatternItem from "./FeatureHoverPatternItem";
+import { shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { LucideIcon } from "lucide-react";
+import type {
+  ButtonConfig,
+  CardAnimationType,
+  TitleSegment,
+  ButtonAnimationType,
+} from "@/components/cardStack/types";
+import type {
+  TextboxLayout,
+  InvertedBackground,
+} from "@/providers/themeProvider/config/constants";
+
+interface FeatureCard {
+  icon: LucideIcon;
+  title: string;
+  description: string;
+  button?: ButtonConfig;
+}
+
+interface FeatureHoverPatternProps {
+  features: FeatureCard[];
+  carouselMode?: "auto" | "buttons";
+  uniformGridCustomHeightClasses?: string;
+  animationType: CardAnimationType;
+  title: string;
+  titleSegments?: TitleSegment[];
+  description: string;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  tagAnimation?: ButtonAnimationType;
+  buttons?: ButtonConfig[];
+  buttonAnimation?: ButtonAnimationType;
+  textboxLayout: TextboxLayout;
+  useInvertedBackground: InvertedBackground;
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  cardClassName?: string;
+  iconContainerClassName?: string;
+  iconClassName?: string;
+  textBoxTitleClassName?: string;
+  textBoxTitleImageWrapperClassName?: string;
+  textBoxTitleImageClassName?: string;
+  textBoxDescriptionClassName?: string;
+  cardTitleClassName?: string;
+  cardDescriptionClassName?: string;
+  gradientClassName?: string;
+  gridClassName?: string;
+  carouselClassName?: string;
+  controlsClassName?: string;
+  textBoxClassName?: string;
+  textBoxTagClassName?: string;
+  textBoxButtonContainerClassName?: string;
+  textBoxButtonClassName?: string;
+  textBoxButtonTextClassName?: string;
+  cardButtonClassName?: string;
+  cardButtonTextClassName?: string;
+}
+
+const FeatureHoverPattern = ({
+  features,
+  carouselMode = "buttons",
+  uniformGridCustomHeightClasses = "min-h-85 2xl:min-h-95",
+  animationType,
+  title,
+  titleSegments,
+  description,
+  tag,
+  tagIcon,
+  tagAnimation = "opacity",
+  buttons = [],
+  buttonAnimation = "slide-up",
+  textboxLayout,
+  useInvertedBackground = false,
+  ariaLabel = "Feature section",
+  className = "",
+  containerClassName = "",
+  cardClassName = "",
+  iconContainerClassName = "",
+  iconClassName = "",
+  textBoxTitleClassName = "",
+  textBoxTitleImageWrapperClassName = "",
+  textBoxTitleImageClassName = "",
+  textBoxDescriptionClassName = "",
+  cardTitleClassName = "",
+  cardDescriptionClassName = "",
+  gradientClassName = "",
+  gridClassName = "",
+  carouselClassName = "",
+  controlsClassName = "",
+  textBoxClassName = "",
+  textBoxTagClassName = "",
+  textBoxButtonContainerClassName = "",
+  textBoxButtonClassName = "",
+  textBoxButtonTextClassName = "",
+  cardButtonClassName = "",
+  cardButtonTextClassName = "",
+}: FeatureHoverPatternProps) => {
+  const theme = useTheme();
+  const shouldUseLightText = shouldUseInvertedText(
+    useInvertedBackground,
+    theme.cardStyle
+  );
+
+  return (
+    <CardStack
+      mode={carouselMode}
+      gridVariant="uniform-all-items-equal"
+      uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+      animationType={animationType}
+      title={title}
+      titleSegments={titleSegments}
+      description={description}
+      tag={tag}
+      tagIcon={tagIcon}
+      tagAnimation={tagAnimation}
+      buttons={buttons}
+      buttonAnimation={buttonAnimation}
+      textboxLayout={textboxLayout}
+      useInvertedBackground={useInvertedBackground}
+      className={className}
+      containerClassName={containerClassName}
+      gridClassName={gridClassName}
+      carouselClassName={carouselClassName}
+      controlsClassName={controlsClassName}
+      textBoxClassName={textBoxClassName}
+      titleClassName={textBoxTitleClassName}
+      titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
+      titleImageClassName={textBoxTitleImageClassName}
+      descriptionClassName={textBoxDescriptionClassName}
+      tagClassName={textBoxTagClassName}
+      buttonContainerClassName={textBoxButtonContainerClassName}
+      buttonClassName={textBoxButtonClassName}
+      buttonTextClassName={textBoxButtonTextClassName}
+      ariaLabel={ariaLabel}
+    >
+      {features.map((feature, index) => (
+        <FeatureHoverPatternItem
+          key={`${feature.title}-${index}`}
+          item={feature}
+          index={index}
+          className={cardClassName}
+          iconContainerClassName={iconContainerClassName}
+          iconClassName={iconClassName}
+          titleClassName={cardTitleClassName}
+          descriptionClassName={cardDescriptionClassName}
+          gradientClassName={gradientClassName}
+          shouldUseLightText={shouldUseLightText}
+          buttonClassName={cardButtonClassName}
+          buttonTextClassName={cardButtonTextClassName}
+        />
+      ))}
+    </CardStack>
+  );
+};
+
+
+export default FeatureHoverPattern;
diff --git a/src/components/sections/feature/featureHoverPattern/FeatureHoverPatternItem.tsx b/src/components/sections/feature/featureHoverPattern/FeatureHoverPatternItem.tsx
new file mode 100644
index 0000000..cd000e7
--- /dev/null
+++ b/src/components/sections/feature/featureHoverPattern/FeatureHoverPatternItem.tsx
@@ -0,0 +1,151 @@
+"use client";
+
+import { useRef } from "react";
+import { useMotionValue } from "framer-motion";
+import { LucideIcon } from "lucide-react";
+import { CardPattern } from "@/components/background/CardPattern";
+import Button from "@/components/button/Button";
+import { usePatternInteraction } from "./usePatternInteraction";
+import { cls } from "@/lib/utils";
+import { getButtonProps } from "@/lib/buttonUtils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { ButtonConfig } from "@/components/cardStack/types";
+
+export interface FeatureHoverPatternItemData {
+  icon: LucideIcon;
+  title: string;
+  description: string;
+  button?: ButtonConfig;
+}
+
+interface FeatureHoverPatternItemProps {
+  item: FeatureHoverPatternItemData;
+  index: number;
+  className?: string;
+  iconContainerClassName?: string;
+  iconClassName?: string;
+  titleClassName?: string;
+  descriptionClassName?: string;
+  gradientClassName?: string;
+  shouldUseLightText?: boolean;
+  buttonClassName?: string;
+  buttonTextClassName?: string;
+}
+
+const FeatureHoverPatternItem = ({
+  item,
+  index,
+  className = "",
+  iconContainerClassName = "",
+  iconClassName = "",
+  titleClassName = "",
+  descriptionClassName = "",
+  gradientClassName = "",
+  shouldUseLightText = false,
+  buttonClassName = "",
+  buttonTextClassName = "",
+}: FeatureHoverPatternItemProps) => {
+  const theme = useTheme();
+  const Icon = item.icon;
+  const mouseX = useMotionValue(0);
+  const mouseY = useMotionValue(0);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const getButtonConfigProps = () => {
+    if (theme.defaultButtonVariant === "hover-bubble") {
+      return { bgClassName: "w-full" };
+    }
+    if (theme.defaultButtonVariant === "icon-arrow") {
+      return { className: "justify-between" };
+    }
+    return {};
+  };
+
+  const { state, onMouseMove } = usePatternInteraction(
+    mouseX,
+    mouseY,
+    containerRef
+  );
+
+  return (
+    <article
+      key={`feature-${index}`}
+      className={cls(
+        "card rounded-theme-capped min-h-0 h-full",
+        className
+      )}
+      aria-label={item.title}
+    >
+      <div className="relative z-10 w-full h-full p-5 flex flex-col gap-5 justify-between">
+        <div
+          ref={containerRef}
+          className={cls(
+            "group/primary-button relative w-full h-full flex items-center justify-center",
+            state.isMobile && state.isInView ? "group/primary-button-active" : ""
+          )}
+          onMouseMove={onMouseMove}
+        >
+          <div
+            className={cls(
+              "relative z-20 h-15 w-auto aspect-square primary-button rounded-theme transition-all duration-300 flex items-center justify-center shadow",
+              iconContainerClassName
+            )}
+          >
+            <Icon
+              className={cls(
+                "w-[35%] aspect-square text-primary-cta-text",
+                iconClassName
+              )}
+              strokeWidth={1}
+              aria-hidden="true"
+            />
+          </div>
+          <div className="opacity-25">
+            <CardPattern
+              mouseX={mouseX}
+              mouseY={mouseY}
+              randomString={state.randomString}
+              isActive={state.isMobile && state.isInView}
+              gradientClassName={
+                gradientClassName || "bg-gradient-to-r from-accent to-background-accent"
+              }
+            />
+          </div>
+        </div>
+        <div className="flex flex-col gap-1">
+          <h3
+            className={cls(
+              "text-2xl font-medium leading-tight",
+              shouldUseLightText && "text-background",
+              titleClassName
+            )}
+          >
+            {item.title}
+          </h3>
+          <p
+            className={cls(
+              "text-sm leading-tight",
+              shouldUseLightText ? "text-background" : "text-foreground",
+              descriptionClassName
+            )}
+          >
+            {item.description}
+          </p>
+          {item.button && (
+            <Button
+              {...getButtonProps(
+                { ...item.button, props: { ...item.button.props, ...getButtonConfigProps() } },
+                0,
+                theme.defaultButtonVariant,
+                cls("w-full mt-1", buttonClassName),
+                buttonTextClassName
+              )}
+            />
+          )}
+        </div>
+      </div>
+    </article>
+  );
+};
+
+export default FeatureHoverPatternItem;
diff --git a/src/components/sections/feature/featureHoverPattern/constants.ts b/src/components/sections/feature/featureHoverPattern/constants.ts
new file mode 100644
index 0000000..2222a54
--- /dev/null
+++ b/src/components/sections/feature/featureHoverPattern/constants.ts
@@ -0,0 +1,17 @@
+export const MOBILE_BREAKPOINT = 768;
+export const RANDOM_STRING_LENGTH = 1500;
+export const VIEW_CHECK_INTERVAL = 100;
+export const PATTERN_VISIBILITY_THRESHOLD = 0.2;
+export const ICON_VISIBILITY_THRESHOLD = 0.4;
+export const THROTTLE_DELAY = 16;
+export const CHARACTERS =
+  "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+export const CHARACTERS_LENGTH = CHARACTERS.length;
+
+export const generateRandomString = (length: number): string => {
+  let result = "";
+  for (let i = 0; i < length; i++) {
+    result += CHARACTERS[Math.floor(Math.random() * CHARACTERS_LENGTH)];
+  }
+  return result;
+};
diff --git a/src/components/sections/feature/featureHoverPattern/usePatternInteraction.ts b/src/components/sections/feature/featureHoverPattern/usePatternInteraction.ts
new file mode 100644
index 0000000..45a7c07
--- /dev/null
+++ b/src/components/sections/feature/featureHoverPattern/usePatternInteraction.ts
@@ -0,0 +1,137 @@
+"use client";
+
+import {
+  useState,
+  useEffect,
+  useRef,
+  useCallback,
+  MouseEvent,
+  RefObject,
+} from "react";
+import { MotionValue } from "framer-motion";
+import {
+  MOBILE_BREAKPOINT,
+  VIEW_CHECK_INTERVAL,
+  PATTERN_VISIBILITY_THRESHOLD,
+  ICON_VISIBILITY_THRESHOLD,
+  THROTTLE_DELAY,
+  RANDOM_STRING_LENGTH,
+  generateRandomString,
+} from "./constants";
+
+interface InteractionState {
+  randomString: string;
+  isMobile: boolean;
+  isInView: boolean;
+  isIconActive: boolean;
+}
+
+export function usePatternInteraction(
+  mouseX: MotionValue<number>,
+  mouseY: MotionValue<number>,
+  containerRef: RefObject<HTMLDivElement | null>
+) {
+  const lastRandomUpdateRef = useRef<number>(0);
+
+  const [state, setState] = useState<InteractionState>({
+    randomString: "",
+    isMobile: false,
+    isInView: false,
+    isIconActive: false,
+  });
+
+  const checkMobile = useCallback(() => {
+    setState((prev) => ({
+      ...prev,
+      isMobile: window.innerWidth < MOBILE_BREAKPOINT,
+    }));
+  }, []);
+
+  useEffect(() => {
+    setState((prev) => ({
+      ...prev,
+      randomString: generateRandomString(RANDOM_STRING_LENGTH),
+      isMobile: window.innerWidth < MOBILE_BREAKPOINT,
+    }));
+
+    window.addEventListener("resize", checkMobile);
+    return () => window.removeEventListener("resize", checkMobile);
+  }, [checkMobile]);
+
+  const updateRandomString = useCallback(() => {
+    const now = Date.now();
+    if (now - lastRandomUpdateRef.current > THROTTLE_DELAY) {
+      setState((prev) => ({
+        ...prev,
+        randomString: generateRandomString(RANDOM_STRING_LENGTH),
+      }));
+      lastRandomUpdateRef.current = now;
+    }
+  }, []);
+
+  const updateMobilePosition = useCallback(() => {
+    if (!containerRef.current) return;
+    const { left, top } = containerRef.current.getBoundingClientRect();
+    const viewportCenterX = window.innerWidth / 2;
+    const viewportCenterY = window.innerHeight / 2;
+
+    mouseX.set(viewportCenterX - left);
+    mouseY.set(viewportCenterY - top);
+    updateRandomString();
+  }, [mouseX, mouseY, updateRandomString, containerRef]);
+
+  const checkInView = useCallback(() => {
+    if (!containerRef.current) return;
+    const rect = containerRef.current.getBoundingClientRect();
+    const viewportHeight = window.innerHeight;
+    const threshold = viewportHeight * PATTERN_VISIBILITY_THRESHOLD;
+    const iconThreshold = viewportHeight * ICON_VISIBILITY_THRESHOLD;
+
+    const inView =
+      rect.top < viewportHeight - threshold && rect.bottom > threshold;
+    const iconActive =
+      rect.top < viewportHeight - iconThreshold &&
+      rect.bottom > iconThreshold;
+
+    setState((prev) => ({ ...prev, isInView: inView, isIconActive: iconActive }));
+
+    if (inView) {
+      updateMobilePosition();
+    }
+  }, [updateMobilePosition, containerRef]);
+
+  useEffect(() => {
+    if (!state.isMobile) {
+      setState((prev) => ({ ...prev, isInView: false, isIconActive: false }));
+      return;
+    }
+
+    checkInView();
+    const interval = setInterval(checkInView, VIEW_CHECK_INTERVAL);
+    window.addEventListener("scroll", checkInView, { passive: true });
+    window.addEventListener("resize", checkInView);
+
+    return () => {
+      clearInterval(interval);
+      window.removeEventListener("scroll", checkInView);
+      window.removeEventListener("resize", checkInView);
+    };
+  }, [state.isMobile, checkInView]);
+
+  const onMouseMove = useCallback(
+    (event: MouseEvent<HTMLDivElement>) => {
+      if (state.isMobile) return;
+
+      const { left, top } = event.currentTarget.getBoundingClientRect();
+      mouseX.set(event.clientX - left);
+      mouseY.set(event.clientY - top);
+      updateRandomString();
+    },
+    [state.isMobile, mouseX, mouseY, updateRandomString]
+  );
+
+  return {
+    state,
+    onMouseMove,
+  };
+}
diff --git a/src/components/sections/feature/index.ts b/src/components/sections/feature/index.ts
new file mode 100644
index 0000000..a2ef50b
--- /dev/null
+++ b/src/components/sections/feature/index.ts
@@ -0,0 +1,22 @@
+export { default as FeatureBento } from './FeatureBento';
+export { default as FeatureBorderGlow } from './featureBorderGlow/FeatureBorderGlow';
+export { default as FeatureCardEight } from './FeatureCardEight';
+export { default as FeatureCardMedia } from './FeatureCardMedia';
+export { default as FeatureCardNine } from './FeatureCardNine';
+export { default as FeatureCardNineteen } from './FeatureCardNineteen';
+export { default as FeatureCardOne } from './FeatureCardOne';
+export { default as FeatureCardSeven } from './FeatureCardSeven';
+export { default as FeatureCardSix } from './FeatureCardSix';
+export { default as FeatureCardSixteen } from './FeatureCardSixteen';
+export { default as FeatureCardTen } from './FeatureCardTen';
+export { default as FeatureCardThree } from './featureCardThree/FeatureCardThree';
+export { default as FeatureCardTwelve } from './FeatureCardTwelve';
+export { default as FeatureCardTwentyFive } from './FeatureCardTwentyFive';
+export { default as FeatureCardTwentyFour } from './FeatureCardTwentyFour';
+export { default as FeatureCardTwentyOne } from './FeatureCardTwentyOne';
+export { default as FeatureCardTwentyEight } from './FeatureCardTwentyEight';
+export { default as FeatureCardTwentySeven } from './FeatureCardTwentySeven';
+export { default as FeatureCardTwentySix } from './FeatureCardTwentySix';
+export { default as FeatureCardTwentyThree } from './FeatureCardTwentyThree';
+export { default as FeatureCardTwentyNine } from './featureCardTwentyNine/FeatureCardTwentyNine';
+export { default as FeatureHoverPattern } from './featureHoverPattern/FeatureHoverPattern';
diff --git a/src/components/sections/footer/FooterBase.tsx b/src/components/sections/footer/FooterBase.tsx
new file mode 100644
index 0000000..3f05772
--- /dev/null
+++ b/src/components/sections/footer/FooterBase.tsx
@@ -0,0 +1,106 @@
+"use client";
+
+import Image from "next/image";
+import ButtonTextUnderline from "@/components/button/ButtonTextUnderline";
+import FooterColumns from "@/components/shared/FooterColumns";
+import { cls } from "@/lib/utils";
+import type { FooterColumn } from "@/components/shared/FooterColumns";
+
+interface FooterBaseProps {
+  logoSrc?: string;
+  logoAlt?: string;
+  logoText: string;
+  columns: FooterColumn[];
+  copyrightText?: string;
+  onPrivacyClick?: () => void;
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  logoClassName?: string;
+  logoImageClassName?: string;
+  logoTextClassName?: string;
+  columnsClassName?: string;
+  columnClassName?: string;
+  columnTitleClassName?: string;
+  columnItemClassName?: string;
+  copyrightContainerClassName?: string;
+  copyrightTextClassName?: string;
+  privacyButtonClassName?: string;
+}
+
+const FooterBase = ({
+  logoSrc,
+  logoAlt = "",
+  logoText,
+  columns,
+  copyrightText = `© 2025 | Webild`,
+  onPrivacyClick,
+  ariaLabel = "Site footer",
+  className = "",
+  containerClassName = "",
+  logoClassName = "",
+  logoImageClassName = "",
+  logoTextClassName = "",
+  columnsClassName = "",
+  columnClassName = "",
+  columnTitleClassName = "",
+  columnItemClassName = "",
+  copyrightContainerClassName = "",
+  copyrightTextClassName = "",
+  privacyButtonClassName = "",
+}: FooterBaseProps) => {
+  return (
+    <footer
+      role="contentinfo"
+      aria-label={ariaLabel}
+      className={cls("relative overflow-hidden w-full primary-button text-primary-cta-text py-15 mt-20", className)}
+    >
+      <div
+        className={cls("relative w-content-width mx-auto z-10", containerClassName)}
+      >
+        <div className="flex flex-col md:flex-row gap-10 md:gap-0 justify-between items-start mb-10">
+          {logoSrc ? (
+            <div className={cls("relative h-[calc(var(--text-4xl)*1.25)] w-auto flex-shrink-0", logoClassName)}>
+              <Image
+                src={logoSrc}
+                alt={logoAlt}
+                width={200}
+                height={50}
+                className={cls("h-full w-auto object-contain", logoImageClassName)}
+                unoptimized={logoSrc.startsWith('http') || logoSrc.startsWith('//')}
+              />
+            </div>
+          ) : (
+            <h2 className={cls("text-4xl font-medium text-primary-cta-text", logoTextClassName)}>
+              {logoText}
+            </h2>
+          )}
+
+          <FooterColumns
+            columns={columns}
+            className={columnsClassName}
+            columnClassName={columnClassName}
+            columnTitleClassName={cls("text-primary-cta-text/50", columnTitleClassName)}
+            columnItemClassName={cls("text-primary-cta-text", columnItemClassName)}
+          />
+        </div>
+
+        <div
+          className={cls("w-full flex items-center justify-between pt-9 border-t border-primary-cta-text/20", copyrightContainerClassName)}
+        >
+          <span className={cls("text-primary-cta-text/50 text-sm", copyrightTextClassName)}>
+            {copyrightText}
+          </span>
+          <ButtonTextUnderline
+            text="Privacy Policy"
+            onClick={onPrivacyClick}
+            className={cls("text-primary-cta-text/50", privacyButtonClassName)}
+          />
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+
+export default FooterBase;
diff --git a/src/components/sections/footer/FooterBaseCard.tsx b/src/components/sections/footer/FooterBaseCard.tsx
new file mode 100644
index 0000000..d8e505e
--- /dev/null
+++ b/src/components/sections/footer/FooterBaseCard.tsx
@@ -0,0 +1,106 @@
+"use client";
+
+import Image from "next/image";
+import ButtonTextUnderline from "@/components/button/ButtonTextUnderline";
+import FooterColumns from "@/components/shared/FooterColumns";
+import { cls } from "@/lib/utils";
+import type { FooterColumn } from "@/components/shared/FooterColumns";
+
+interface FooterBaseCardProps {
+  logoSrc?: string;
+  logoAlt?: string;
+  logoText: string;
+  columns: FooterColumn[];
+  copyrightText?: string;
+  onPrivacyClick?: () => void;
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  cardClassName?: string;
+  logoClassName?: string;
+  logoImageClassName?: string;
+  logoTextClassName?: string;
+  columnsClassName?: string;
+  columnClassName?: string;
+  columnTitleClassName?: string;
+  columnItemClassName?: string;
+  copyrightContainerClassName?: string;
+  copyrightTextClassName?: string;
+  privacyButtonClassName?: string;
+}
+
+const FooterBaseCard = ({
+  logoSrc,
+  logoAlt = "",
+  logoText,
+  columns,
+  copyrightText = `© 2025 | Webild`,
+  onPrivacyClick,
+  ariaLabel = "Site footer",
+  className = "",
+  containerClassName = "",
+  cardClassName = "",
+  logoClassName = "",
+  logoImageClassName = "",
+  logoTextClassName = "",
+  columnsClassName = "",
+  columnClassName = "",
+  columnTitleClassName = "",
+  columnItemClassName = "",
+  copyrightContainerClassName = "",
+  copyrightTextClassName = "",
+  privacyButtonClassName = "",
+}: FooterBaseCardProps) => {
+  return (
+    <footer
+      role="contentinfo"
+      aria-label={ariaLabel}
+      className={cls("relative w-full py-20", className)}
+    >
+      <div className={cls("relative w-content-width mx-auto card rounded-theme-capped p-10", containerClassName, cardClassName)}>
+        <div className="relative z-1 flex flex-col md:flex-row gap-10 md:gap-0 justify-between items-start mb-10">
+          {logoSrc ? (
+            <div className={cls("relative h-[calc(var(--text-4xl)*1.25)] w-auto flex-shrink-0", logoClassName)}>
+              <Image
+                src={logoSrc}
+                alt={logoAlt}
+                width={200}
+                height={50}
+                className={cls("h-full w-auto object-contain", logoImageClassName)}
+                unoptimized={logoSrc.startsWith('http') || logoSrc.startsWith('//')}
+              />
+            </div>
+          ) : (
+            <h2 className={cls("text-4xl font-medium", logoTextClassName)}>
+              {logoText}
+            </h2>
+          )}
+
+          <FooterColumns
+            columns={columns}
+            className={columnsClassName}
+            columnClassName={columnClassName}
+            columnTitleClassName={columnTitleClassName}
+            columnItemClassName={columnItemClassName}
+          />
+        </div>
+
+        <div
+          className={cls("relative z-1 w-full flex items-center justify-between pt-9 border-t border-foreground/20", copyrightContainerClassName)}
+        >
+          <span className={cls("text-foreground/50 text-sm", copyrightTextClassName)}>
+            {copyrightText}
+          </span>
+          <ButtonTextUnderline
+            text="Privacy Policy"
+            onClick={onPrivacyClick}
+            className={cls("text-foreground/50", privacyButtonClassName)}
+          />
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+
+export default FooterBaseCard;
diff --git a/src/components/sections/footer/FooterBaseReveal.tsx b/src/components/sections/footer/FooterBaseReveal.tsx
new file mode 100644
index 0000000..0a98b4b
--- /dev/null
+++ b/src/components/sections/footer/FooterBaseReveal.tsx
@@ -0,0 +1,131 @@
+"use client";
+
+import { useRef, useEffect, useState } from "react";
+import FooterBase from "./FooterBase";
+import { cls } from "@/lib/utils";
+
+interface FooterColumn {
+  title: string;
+  items: Array<{
+    label: string;
+    href?: string;
+    onClick?: () => void;
+  }>;
+}
+
+interface FooterBaseRevealProps {
+  logoSrc?: string;
+  logoAlt?: string;
+  logoText: string;
+  columns: FooterColumn[];
+  copyrightText?: string;
+  onPrivacyClick?: () => void;
+  ariaLabel?: string;
+  className?: string;
+  wrapperClassName?: string;
+  containerClassName?: string;
+  footerClassName?: string;
+  footerContainerClassName?: string;
+  logoClassName?: string;
+  logoImageClassName?: string;
+  logoTextClassName?: string;
+  columnsClassName?: string;
+  columnClassName?: string;
+  columnTitleClassName?: string;
+  columnItemClassName?: string;
+  copyrightContainerClassName?: string;
+  copyrightTextClassName?: string;
+  privacyButtonClassName?: string;
+}
+
+const FooterBaseReveal = ({
+  logoSrc,
+  logoAlt = "",
+  logoText,
+  columns,
+  copyrightText,
+  onPrivacyClick,
+  ariaLabel,
+  className = "",
+  wrapperClassName = "",
+  containerClassName = "",
+  footerClassName,
+  footerContainerClassName,
+  logoClassName = "",
+  logoImageClassName = "",
+  logoTextClassName = "",
+  columnsClassName,
+  columnClassName,
+  columnTitleClassName,
+  columnItemClassName,
+  copyrightContainerClassName,
+  copyrightTextClassName,
+  privacyButtonClassName,
+}: FooterBaseRevealProps) => {
+  const footerRef = useRef<HTMLDivElement>(null);
+  const [footerHeight, setFooterHeight] = useState<number>(0);
+
+  useEffect(() => {
+    const updateHeight = () => {
+      if (footerRef.current) {
+        const height = footerRef.current.offsetHeight;
+        setFooterHeight(height);
+      }
+    };
+
+    updateHeight();
+
+    const resizeObserver = new ResizeObserver(updateHeight);
+    const currentFooter = footerRef.current;
+
+    if (currentFooter) {
+      resizeObserver.observe(currentFooter);
+    }
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, []);
+
+  return (
+    <section
+      className={cls("relative z-0 w-full mt-20", className)}
+      style={{
+        height: footerHeight ? `${footerHeight}px` : "auto",
+        clipPath: "polygon(0% 0, 100% 0%, 100% 100%, 0 100%)",
+      }}
+    >
+      <div
+        className={cls("fixed bottom-0 w-full flex items-center justify-center overflow-hidden", wrapperClassName)}
+        style={{ height: footerHeight ? `${footerHeight}px` : "auto" }}
+      >
+        <div ref={footerRef} className={cls("w-full", containerClassName)}>
+          <FooterBase
+            logoSrc={logoSrc}
+            logoAlt={logoAlt}
+            logoText={logoText}
+            columns={columns}
+            copyrightText={copyrightText}
+            onPrivacyClick={onPrivacyClick}
+            ariaLabel={ariaLabel}
+            className={cls("mt-0", footerClassName)}
+            containerClassName={footerContainerClassName}
+            logoClassName={logoClassName}
+            logoImageClassName={logoImageClassName}
+            logoTextClassName={logoTextClassName}
+            columnsClassName={columnsClassName}
+            columnClassName={columnClassName}
+            columnTitleClassName={columnTitleClassName}
+            columnItemClassName={columnItemClassName}
+            copyrightContainerClassName={copyrightContainerClassName}
+            copyrightTextClassName={copyrightTextClassName}
+            privacyButtonClassName={privacyButtonClassName}
+          />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+
+export default FooterBaseReveal;
diff --git a/src/components/sections/footer/FooterCard.tsx b/src/components/sections/footer/FooterCard.tsx
new file mode 100644
index 0000000..9647850
--- /dev/null
+++ b/src/components/sections/footer/FooterCard.tsx
@@ -0,0 +1,92 @@
+"use client";
+
+import Image from "next/image";
+import FillWidthText, { hasDescenders } from "@/components/shared/FillWidthText/FillWidthText";
+import SocialLinks from "@/components/shared/SocialLinks";
+import { cls } from "@/lib/utils";
+import type { SocialLink } from "@/components/shared/SocialLinks";
+
+interface FooterCardProps {
+  logoSrc?: string;
+  logoAlt?: string;
+  logoText: string;
+  copyrightText?: string;
+  socialLinks?: SocialLink[];
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  cardClassName?: string;
+  logoClassName?: string;
+  logoImageClassName?: string;
+  dividerClassName?: string;
+  copyrightContainerClassName?: string;
+  copyrightTextClassName?: string;
+  socialContainerClassName?: string;
+  socialIconClassName?: string;
+}
+
+const FooterCard = ({
+  logoSrc,
+  logoAlt = "",
+  logoText,
+  copyrightText = `© 2025 | Webild`,
+  socialLinks,
+  ariaLabel = "Site footer",
+  className = "",
+  containerClassName = "",
+  cardClassName = "",
+  logoClassName = "",
+  logoImageClassName = "",
+  dividerClassName = "",
+  copyrightContainerClassName = "",
+  copyrightTextClassName = "",
+  socialContainerClassName = "",
+  socialIconClassName = "",
+}: FooterCardProps) => {
+  return (
+    <footer
+      role="contentinfo"
+      aria-label={ariaLabel}
+      className={cls("relative w-full h-fit py-20", className)}
+    >
+      <div className={cls("relative w-content-width h-fit mx-auto card rounded-theme-capped px-10 pb-6 flex flex-col", containerClassName, cardClassName)}>
+        <div className={cls("relative z-1 w-full", logoClassName)}>
+          {logoSrc ? (
+            <Image
+              src={logoSrc}
+              alt={logoAlt}
+              width={1920}
+              height={200}
+              className={cls("w-full h-auto my-10", logoImageClassName)}
+              unoptimized={logoSrc.startsWith('http') || logoSrc.startsWith('//')}
+            />
+          ) : (
+            <FillWidthText className={cls(!hasDescenders(logoText ?? "") && "my-10")}>
+              {logoText}
+            </FillWidthText>
+          )}
+        </div>
+
+        <div className={cls("relative z-1 w-full h-px bg-accent/20 mb-6", dividerClassName)} />
+
+        <div
+          className={cls("relative z-1 w-full flex flex-col md:flex-row items-center justify-between gap-4", copyrightContainerClassName)}
+        >
+          <span className={cls("text-accent/75 text-sm", copyrightTextClassName)}>
+            {copyrightText}
+          </span>
+          {socialLinks && socialLinks.length > 0 && (
+            <SocialLinks
+              socialLinks={socialLinks}
+              className={socialContainerClassName}
+              iconClassName={socialIconClassName}
+            />
+          )}
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+
+export default FooterCard;
diff --git a/src/components/sections/footer/FooterLogoEmphasis.tsx b/src/components/sections/footer/FooterLogoEmphasis.tsx
new file mode 100644
index 0000000..4e541b5
--- /dev/null
+++ b/src/components/sections/footer/FooterLogoEmphasis.tsx
@@ -0,0 +1,133 @@
+"use client";
+
+import Image from "next/image";
+import ButtonTextUnderline from "@/components/button/ButtonTextUnderline";
+import FillWidthText from "@/components/shared/FillWidthText/FillWidthText";
+import { ChevronRight } from "lucide-react";
+import { cls } from "@/lib/utils";
+
+interface FooterColumn {
+  items: Array<{
+    label: string;
+    href?: string;
+    onClick?: () => void;
+  }>;
+}
+
+interface FooterLogoEmphasisProps {
+  logoSrc?: string;
+  logoAlt?: string;
+  columns: FooterColumn[];
+  logoText: string;
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  logoClassName?: string;
+  logoImageClassName?: string;
+  columnsClassName?: string;
+  columnClassName?: string;
+  itemClassName?: string;
+  iconClassName?: string;
+  buttonClassName?: string;
+}
+
+const FooterLogoEmphasis = ({
+  logoSrc,
+  logoAlt = "",
+  columns,
+  logoText,
+  ariaLabel = "Site footer",
+  className = "",
+  containerClassName = "",
+  logoClassName = "",
+  logoImageClassName = "",
+  columnsClassName = "",
+  columnClassName = "",
+  itemClassName = "",
+  iconClassName = "",
+  buttonClassName = "",
+}: FooterLogoEmphasisProps) => {
+    const columnCount = columns.length;
+    const useFlex = columnCount <= 3;
+    const gridColsClass = columnCount === 4
+      ? "grid-cols-2 md:grid-cols-4"
+      : "grid-cols-2 md:grid-cols-5";
+
+    return (
+      <footer
+        className={cls(
+          "w-full py-15 mt-20 flex justify-center relative z-1 overflow-hidden primary-button text-primary-cta-text rounded-t-theme-capped",
+          className
+        )}
+        role="contentinfo"
+        aria-label={ariaLabel}
+      >
+        <div
+          className={cls(
+            "w-content-width mx-auto flex flex-col relative z-10",
+            "gap-10 md:gap-20",
+            containerClassName
+          )}
+        >
+          <div className={cls("relative z-1 w-full", logoClassName)}>
+            {logoSrc ? (
+              <Image
+                src={logoSrc}
+                alt={logoAlt}
+                width={1920}
+                height={200}
+                className={cls("w-full h-auto", logoImageClassName)}
+                unoptimized={logoSrc.startsWith('http') || logoSrc.startsWith('//')}
+              />
+            ) : (
+              <FillWidthText>
+                {logoText}
+              </FillWidthText>
+            )}
+          </div>
+
+          <div
+            className={cls(
+              "w-full mb-10",
+              useFlex
+                ? cls(
+                    "flex flex-col md:flex-row gap-8 md:gap-[var(--width-10)]",
+                    columnCount === 1 ? "md:justify-center" : "md:justify-between"
+                  )
+                : cls("grid gap-[var(--width-10)] md:gap-[calc(var(--width-10)/2)]", gridColsClass),
+              columnsClassName
+            )}
+          >
+            {columns.map((column, index) => (
+              <div
+                key={`column-${index}`}
+                className={cls("flex items-start flex-col gap-4", columnClassName)}
+              >
+                {column.items.map((item) => (
+                  <div
+                    key={`${item.label}-${index}`}
+                    className={cls("flex items-center gap-2 text-base", itemClassName)}
+                  >
+                    <ChevronRight
+                      className={cls("h-[1em] w-auto", iconClassName)}
+                      strokeWidth={3}
+                      aria-hidden="true"
+                    />
+                    <ButtonTextUnderline
+                      text={item.label}
+                      href={item.href}
+                      onClick={item.onClick}
+                      className={cls("font-medium text-base", buttonClassName)}
+                    />
+                  </div>
+                ))}
+              </div>
+            ))}
+          </div>
+        </div>
+      </footer>
+  );
+};
+
+
+export default FooterLogoEmphasis;
diff --git a/src/components/sections/footer/FooterLogoEmphasisReveal.tsx b/src/components/sections/footer/FooterLogoEmphasisReveal.tsx
new file mode 100644
index 0000000..8ef812f
--- /dev/null
+++ b/src/components/sections/footer/FooterLogoEmphasisReveal.tsx
@@ -0,0 +1,106 @@
+"use client";
+
+import { useRef, useEffect, useState } from "react";
+import FooterLogoEmphasis from "./FooterLogoEmphasis";
+import { cls } from "@/lib/utils";
+
+interface FooterColumn {
+  items: Array<{
+    label: string;
+    href?: string;
+    onClick?: () => void;
+  }>;
+}
+
+interface FooterLogoEmphasisRevealProps {
+  columns: FooterColumn[];
+  logoText: string;
+  ariaLabel?: string;
+  className?: string;
+  wrapperClassName?: string;
+  containerClassName?: string;
+  footerClassName?: string;
+  footerContainerClassName?: string;
+  logoClassName?: string;
+  columnsClassName?: string;
+  columnClassName?: string;
+  itemClassName?: string;
+  iconClassName?: string;
+  buttonClassName?: string;
+}
+
+const FooterLogoEmphasisReveal = ({
+  columns,
+  logoText,
+  ariaLabel,
+  className = "",
+  wrapperClassName = "",
+  containerClassName = "",
+  footerClassName = "",
+  footerContainerClassName = "",
+  logoClassName = "",
+  columnsClassName = "",
+  columnClassName = "",
+  itemClassName = "",
+  iconClassName = "",
+  buttonClassName = "",
+}: FooterLogoEmphasisRevealProps) => {
+  const footerRef = useRef<HTMLDivElement>(null);
+  const [footerHeight, setFooterHeight] = useState<number>(0);
+
+  useEffect(() => {
+    const updateHeight = () => {
+      if (footerRef.current) {
+        const height = footerRef.current.offsetHeight;
+        setFooterHeight(height);
+      }
+    };
+
+    updateHeight();
+
+    const resizeObserver = new ResizeObserver(updateHeight);
+    const currentFooter = footerRef.current;
+
+    if (currentFooter) {
+      resizeObserver.observe(currentFooter);
+    }
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, []);
+
+  return (
+    <section
+      className={cls("relative z-0 w-full mt-20", className)}
+      style={{
+        height: footerHeight ? `${footerHeight}px` : "auto",
+        clipPath: "polygon(0% 0, 100% 0%, 100% 100%, 0 100%)",
+      }}
+    >
+      <div
+        className={cls("fixed bottom-0 w-full flex items-center justify-center overflow-hidden", wrapperClassName)}
+        style={{ height: footerHeight ? `${footerHeight}px` : "auto" }}
+      >
+        <div ref={footerRef} className={cls("w-full", containerClassName)}>
+          <FooterLogoEmphasis
+            columns={columns}
+            logoText={logoText}
+            ariaLabel={ariaLabel}
+            className={cls("mt-0", footerClassName)}
+            containerClassName={footerContainerClassName}
+            logoClassName={logoClassName}
+            columnsClassName={columnsClassName}
+            columnClassName={columnClassName}
+            itemClassName={itemClassName}
+            iconClassName={iconClassName}
+            buttonClassName={buttonClassName}
+          />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+
+export default FooterLogoEmphasisReveal;
diff --git a/src/components/sections/footer/FooterLogoReveal.tsx b/src/components/sections/footer/FooterLogoReveal.tsx
new file mode 100644
index 0000000..7eb9f31
--- /dev/null
+++ b/src/components/sections/footer/FooterLogoReveal.tsx
@@ -0,0 +1,127 @@
+"use client";
+
+import { useRef, useEffect, useState } from "react";
+import Image from "next/image";
+import FillWidthText, { hasDescenders } from "@/components/shared/FillWidthText/FillWidthText";
+import ButtonTextUnderline from "@/components/button/ButtonTextUnderline";
+import { cls } from "@/lib/utils";
+
+interface FooterLink {
+  text: string;
+  onClick?: () => void;
+  href?: string;
+}
+
+interface FooterLogoRevealProps {
+  logoSrc?: string;
+  logoAlt?: string;
+  logoText: string;
+  leftLink: FooterLink;
+  rightLink: FooterLink;
+  ariaLabel?: string;
+  className?: string;
+  wrapperClassName?: string;
+  containerClassName?: string;
+  logoClassName?: string;
+  logoImageClassName?: string;
+  linkClassName?: string;
+}
+
+const FooterLogoReveal = ({
+  logoSrc,
+  logoAlt = "",
+  logoText,
+  leftLink,
+  rightLink,
+  ariaLabel = "Site footer",
+  className = "",
+  wrapperClassName = "",
+  containerClassName = "",
+  logoClassName = "",
+  logoImageClassName = "",
+  linkClassName = "",
+}: FooterLogoRevealProps) => {
+  const footerRef = useRef<HTMLDivElement>(null);
+  const [footerHeight, setFooterHeight] = useState<number>(0);
+
+  useEffect(() => {
+    const updateHeight = () => {
+      if (footerRef.current) {
+        const height = footerRef.current.offsetHeight;
+        setFooterHeight(height);
+      }
+    };
+
+    updateHeight();
+
+    const resizeObserver = new ResizeObserver(updateHeight);
+    const currentFooter = footerRef.current;
+
+    if (currentFooter) {
+      resizeObserver.observe(currentFooter);
+    }
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, []);
+
+  return (
+    <section
+      aria-label={ariaLabel}
+      className={cls("relative z-0 w-full mt-20", className)}
+      style={{
+        height: footerHeight ? `${footerHeight}px` : "auto",
+        clipPath: "polygon(0% 0, 100% 0%, 100% 100%, 0 100%)",
+      }}
+    >
+      <div
+        className={cls("fixed bottom-0 w-full flex items-center justify-center overflow-hidden", wrapperClassName)}
+        style={{ height: footerHeight ? `${footerHeight}px` : "auto" }}
+      >
+        <div ref={footerRef} className={cls("w-full", containerClassName)}>
+          <footer
+            role="contentinfo"
+            className="relative w-full py-20 card"
+          >
+            <div className="w-content-width mx-auto flex flex-col relative z-10">
+              <div className={cls("relative z-1 w-full", logoClassName)}>
+                {logoSrc ? (
+                  <Image
+                    src={logoSrc}
+                    alt={logoAlt}
+                    width={1920}
+                    height={200}
+                    className={cls("w-full h-auto my-10", logoImageClassName)}
+                    unoptimized={logoSrc.startsWith('http') || logoSrc.startsWith('//')}
+                  />
+                ) : (
+                  <FillWidthText className={cls(!hasDescenders(logoText ?? "") && "my-10")}>
+                    {logoText}
+                  </FillWidthText>
+                )}
+              </div>
+              <div className="w-full flex justify-between items-center">
+                <ButtonTextUnderline
+                  text={leftLink.text}
+                  onClick={leftLink.onClick}
+                  href={leftLink.href}
+                  className={cls("text-foreground", linkClassName)}
+                />
+                <ButtonTextUnderline
+                  text={rightLink.text}
+                  onClick={rightLink.onClick}
+                  href={rightLink.href}
+                  className={cls("text-foreground", linkClassName)}
+                />
+              </div>
+            </div>
+          </footer>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+
+export default FooterLogoReveal;
diff --git a/src/components/sections/footer/FooterMedia.tsx b/src/components/sections/footer/FooterMedia.tsx
new file mode 100644
index 0000000..4915854
--- /dev/null
+++ b/src/components/sections/footer/FooterMedia.tsx
@@ -0,0 +1,141 @@
+"use client";
+
+import Image from "next/image";
+import ButtonTextUnderline from "@/components/button/ButtonTextUnderline";
+import FooterColumns from "@/components/shared/FooterColumns";
+import MediaContent from "@/components/shared/MediaContent";
+import { cls } from "@/lib/utils";
+import type { FooterColumn } from "@/components/shared/FooterColumns";
+
+type MediaProps =
+    | {
+        imageSrc: string;
+        imageAlt?: string;
+        videoSrc?: never;
+        videoAriaLabel?: never;
+    }
+    | {
+        videoSrc: string;
+        videoAriaLabel?: string;
+        imageSrc?: never;
+        imageAlt?: never;
+    };
+
+type FooterMediaProps = MediaProps & {
+    logoSrc?: string;
+    logoAlt?: string;
+    logoText: string;
+    columns: FooterColumn[];
+    copyrightText?: string;
+    onPrivacyClick?: () => void;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    mediaWrapperClassName?: string;
+    mediaClassName?: string;
+    logoClassName?: string;
+    logoImageClassName?: string;
+    logoTextClassName?: string;
+    columnsClassName?: string;
+    columnClassName?: string;
+    columnTitleClassName?: string;
+    columnItemClassName?: string;
+    copyrightContainerClassName?: string;
+    copyrightTextClassName?: string;
+    privacyButtonClassName?: string;
+};
+
+const FooterMedia = ({
+    imageSrc,
+    videoSrc,
+    imageAlt = "",
+    videoAriaLabel = "Footer video",
+    logoSrc,
+    logoAlt = "",
+    logoText,
+    columns,
+    copyrightText = `© 2025 | Webild`,
+    onPrivacyClick,
+    ariaLabel = "Site footer",
+    className = "",
+    containerClassName = "",
+    mediaWrapperClassName = "",
+    mediaClassName = "",
+    logoClassName = "",
+    logoImageClassName = "",
+    logoTextClassName = "",
+    columnsClassName = "",
+    columnClassName = "",
+    columnTitleClassName = "",
+    columnItemClassName = "",
+    copyrightContainerClassName = "",
+    copyrightTextClassName = "",
+    privacyButtonClassName = "",
+}: FooterMediaProps) => {
+    return (
+        <footer
+            role="contentinfo"
+            aria-label={ariaLabel}
+            className={cls("relative overflow-hidden w-full mt-20", className)}
+        >
+            <div className={cls("w-full aspect-square md:aspect-[16/6] mask-fade-top-long", mediaWrapperClassName)}>
+                <MediaContent
+                    imageSrc={imageSrc}
+                    videoSrc={videoSrc}
+                    imageAlt={imageAlt}
+                    videoAriaLabel={videoAriaLabel}
+                    imageClassName={cls("w-full h-full object-cover rounded-none!", mediaClassName)}
+                />
+            </div>
+
+            <div className="primary-button text-primary-cta-text py-15">
+                <div
+                    className={cls("relative w-content-width mx-auto z-10", containerClassName)}
+                >
+                    <div className="flex flex-col md:flex-row gap-10 md:gap-0 justify-between items-start mb-10">
+                        {logoSrc ? (
+                            <div className={cls("relative h-[calc(var(--text-4xl)*1.25)] w-auto flex-shrink-0", logoClassName)}>
+                                <Image
+                                    src={logoSrc}
+                                    alt={logoAlt}
+                                    width={200}
+                                    height={50}
+                                    className={cls("h-full w-auto object-contain", logoImageClassName)}
+                                    unoptimized={logoSrc.startsWith('http') || logoSrc.startsWith('//')}
+                                />
+                            </div>
+                        ) : (
+                            <h2 className={cls("text-4xl font-medium text-primary-cta-text", logoTextClassName)}>
+                                {logoText}
+                            </h2>
+                        )}
+
+                        <FooterColumns
+                            columns={columns}
+                            className={columnsClassName}
+                            columnClassName={columnClassName}
+                            columnTitleClassName={cls("text-primary-cta-text/50", columnTitleClassName)}
+                            columnItemClassName={cls("text-primary-cta-text", columnItemClassName)}
+                        />
+                    </div>
+
+                    <div
+                        className={cls("w-full flex items-center justify-between pt-9 border-t border-primary-cta-text/20", copyrightContainerClassName)}
+                    >
+                        <span className={cls("text-primary-cta-text/50 text-sm", copyrightTextClassName)}>
+                            {copyrightText}
+                        </span>
+                        <ButtonTextUnderline
+                            text="Privacy Policy"
+                            onClick={onPrivacyClick}
+                            className={cls("text-primary-cta-text/50", privacyButtonClassName)}
+                        />
+                    </div>
+                </div>
+            </div>
+        </footer>
+    );
+};
+
+
+export default FooterMedia;
diff --git a/src/components/sections/footer/FooterSimple.tsx b/src/components/sections/footer/FooterSimple.tsx
new file mode 100644
index 0000000..a0402be
--- /dev/null
+++ b/src/components/sections/footer/FooterSimple.tsx
@@ -0,0 +1,72 @@
+"use client";
+
+import FooterColumns from "@/components/shared/FooterColumns";
+import { cls } from "@/lib/utils";
+import type { FooterColumn } from "@/components/shared/FooterColumns";
+
+interface FooterSimpleProps {
+  columns: FooterColumn[];
+  bottomLeftText: string;
+  bottomRightText: string;
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  columnsClassName?: string;
+  columnClassName?: string;
+  columnTitleClassName?: string;
+  columnItemClassName?: string;
+  dividerClassName?: string;
+  bottomContainerClassName?: string;
+  bottomLeftTextClassName?: string;
+  bottomRightTextClassName?: string;
+}
+
+const FooterSimple = ({
+  columns,
+  bottomLeftText,
+  bottomRightText,
+  ariaLabel = "Site footer",
+  className = "",
+  containerClassName = "",
+  columnsClassName = "",
+  columnClassName = "",
+  columnTitleClassName = "",
+  columnItemClassName = "",
+  dividerClassName = "",
+  bottomContainerClassName = "",
+  bottomLeftTextClassName = "",
+  bottomRightTextClassName = "",
+}: FooterSimpleProps) => {
+  return (
+    <footer
+      role="contentinfo"
+      aria-label={ariaLabel}
+      className={cls("relative w-full pt-20 pb-10", className)}
+    >
+      <div className={cls("w-content-width mx-auto", containerClassName)}>
+        <FooterColumns
+          columns={columns}
+          className={cls("w-full! justify-between mb-10", columnsClassName)}
+          columnClassName={columnClassName}
+          columnTitleClassName={columnTitleClassName}
+          columnItemClassName={columnItemClassName}
+        />
+        <div
+          className={cls("w-full h-px bg-foreground/20", dividerClassName)}
+        />
+        <div
+          className={cls("w-full flex items-center justify-between pt-6", bottomContainerClassName)}
+        >
+          <p className={cls("text-foreground/50 text-sm", bottomLeftTextClassName)}>
+            {bottomLeftText}
+          </p>
+          <p className={cls("text-foreground/50 text-sm", bottomRightTextClassName)}>
+            {bottomRightText}
+          </p>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default FooterSimple;
diff --git a/src/components/sections/footer/index.ts b/src/components/sections/footer/index.ts
new file mode 100644
index 0000000..500e762
--- /dev/null
+++ b/src/components/sections/footer/index.ts
@@ -0,0 +1,8 @@
+export { default as FooterBase } from './FooterBase';
+export { default as FooterBaseCard } from './FooterBaseCard';
+export { default as FooterBaseReveal } from './FooterBaseReveal';
+export { default as FooterCard } from './FooterCard';
+export { default as FooterLogoEmphasis } from './FooterLogoEmphasis';
+export { default as FooterLogoReveal } from './FooterLogoReveal';
+export { default as FooterMedia } from './FooterMedia';
+export { default as FooterSimple } from './FooterSimple';
diff --git a/src/components/sections/hero/HeroBillboard.tsx b/src/components/sections/hero/HeroBillboard.tsx
new file mode 100644
index 0000000..f210449
--- /dev/null
+++ b/src/components/sections/hero/HeroBillboard.tsx
@@ -0,0 +1,170 @@
+"use client";
+
+import TextBox from "@/components/Textbox";
+import MediaContent from "@/components/shared/MediaContent";
+import HeroBackgrounds, { type HeroBackgroundVariantProps } from "@/components/background/HeroBackgrounds";
+import LogoMarquee, { type MarqueeItem } from "@/components/shared/LogoMarquee";
+import { cls } from "@/lib/utils";
+import { useButtonAnimation } from "@/components/hooks/useButtonAnimation";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, ButtonAnimationType } from "@/types/button";
+import type { Avatar } from "@/components/shared/AvatarGroup";
+
+type HeroBillboardBackgroundProps = Extract<
+  HeroBackgroundVariantProps,
+  | { variant: "plain" }
+  | { variant: "animated-grid" }
+  | { variant: "canvas-reveal" }
+  | { variant: "cell-wave" }
+  | { variant: "downward-rays-animated" }
+  | { variant: "downward-rays-animated-grid" }
+  | { variant: "downward-rays-static" }
+  | { variant: "downward-rays-static-grid" }
+  | { variant: "gradient-bars" }
+  | { variant: "radial-gradient" }
+  | { variant: "rotated-rays-animated" }
+  | { variant: "rotated-rays-animated-grid" }
+  | { variant: "rotated-rays-static" }
+  | { variant: "rotated-rays-static-grid" }
+  | { variant: "sparkles-gradient" }
+>;
+
+interface HeroBillboardProps {
+  title: string;
+  description: string;
+  background: HeroBillboardBackgroundProps;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  tagAnimation?: ButtonAnimationType;
+  buttons?: ButtonConfig[];
+  buttonAnimation?: ButtonAnimationType;
+  avatars?: Avatar[];
+  avatarText?: string;
+  imageSrc?: string;
+  videoSrc?: string;
+  imageAlt?: string;
+  videoAriaLabel?: string;
+  mediaAnimation?: ButtonAnimationType;
+  marqueeItems?: MarqueeItem[];
+  marqueeSpeed?: number;
+  showMarqueeCard?: boolean;
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  textBoxClassName?: string;
+  titleClassName?: string;
+  descriptionClassName?: string;
+  tagClassName?: string;
+  avatarGroupClassName?: string;
+  buttonContainerClassName?: string;
+  buttonClassName?: string;
+  buttonTextClassName?: string;
+  mediaWrapperClassName?: string;
+  imageClassName?: string;
+  marqueeClassName?: string;
+  marqueeItemClassName?: string;
+  marqueeCardClassName?: string;
+  marqueeImageClassName?: string;
+  marqueeTextClassName?: string;
+  marqueeIconClassName?: string;
+}
+
+const HeroBillboard = ({
+  title,
+  description,
+  background = { variant: "plain" },
+  tag,
+  tagIcon,
+  tagAnimation = "opacity",
+  buttons = [],
+  buttonAnimation = "slide-up",
+  avatars,
+  avatarText,
+  imageSrc,
+  videoSrc,
+  imageAlt = "",
+  videoAriaLabel = "Hero video",
+  mediaAnimation = "none",
+  marqueeItems,
+  marqueeSpeed = 30,
+  showMarqueeCard = true,
+  ariaLabel = "Hero section",
+  className = "",
+  containerClassName = "",
+  textBoxClassName = "",
+  titleClassName = "",
+  descriptionClassName = "",
+  tagClassName = "",
+  avatarGroupClassName = "",
+  buttonContainerClassName = "",
+  buttonClassName = "",
+  buttonTextClassName = "",
+  mediaWrapperClassName = "",
+  imageClassName = "",
+  marqueeClassName = "",
+  marqueeItemClassName = "",
+  marqueeCardClassName = "",
+  marqueeImageClassName = "",
+  marqueeTextClassName = "",
+  marqueeIconClassName = "",
+}: HeroBillboardProps) => {
+  const { containerRef: mediaContainerRef } = useButtonAnimation({ animationType: mediaAnimation });
+
+  return (
+    <section
+      aria-label={ariaLabel}
+      className={cls("relative w-full py-hero-page-padding", className)}
+    >
+      <HeroBackgrounds {...background} />
+      <div className={cls("w-content-width mx-auto flex flex-col gap-14 md:gap-15 relative z-10", containerClassName)}>
+        <TextBox
+          title={title}
+          description={description}
+          tag={tag}
+          tagIcon={tagIcon}
+          tagAnimation={tagAnimation}
+          buttons={buttons}
+          buttonAnimation={buttonAnimation}
+          avatars={avatars}
+          avatarText={avatarText}
+          avatarsAbove={true}
+          className={cls("flex flex-col gap-3 md:gap-3", textBoxClassName)}
+          titleClassName={cls("text-6xl font-medium text-balance", titleClassName)}
+          descriptionClassName={cls("text-base md:text-lg leading-tight", descriptionClassName)}
+          tagClassName={cls("px-3 py-1 text-sm rounded-theme card text-foreground inline-flex items-center gap-2 mb-1", tagClassName)}
+          avatarGroupClassName={avatarGroupClassName}
+          buttonContainerClassName={cls("flex flex-wrap gap-4 max-md:justify-center mt-2", buttonContainerClassName)}
+          buttonClassName={buttonClassName}
+          buttonTextClassName={buttonTextClassName}
+          center={true}
+        />
+        <div className="flex flex-col gap-6" >
+          <div ref={mediaContainerRef} className={cls("w-full overflow-hidden rounded-theme-capped card p-4", mediaWrapperClassName)}>
+            <MediaContent
+              imageSrc={imageSrc}
+              videoSrc={videoSrc}
+              imageAlt={imageAlt}
+              videoAriaLabel={videoAriaLabel}
+              imageClassName={cls("z-1 aspect-square md:aspect-video", imageClassName)}
+            />
+          </div>
+          {marqueeItems && marqueeItems.length > 0 && (
+            <LogoMarquee
+              items={marqueeItems}
+              speed={marqueeSpeed}
+              showCard={showMarqueeCard}
+              className={cls("w-content-width mx-auto z-10", marqueeClassName)}
+              itemClassName={marqueeItemClassName}
+              cardClassName={marqueeCardClassName}
+              imageClassName={marqueeImageClassName}
+              textClassName={marqueeTextClassName}
+              iconClassName={marqueeIconClassName}
+            />
+          )}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default HeroBillboard;
\ No newline at end of file
diff --git a/src/components/sections/hero/HeroBillboardCarousel.tsx b/src/components/sections/hero/HeroBillboardCarousel.tsx
new file mode 100644
index 0000000..84e0c25
--- /dev/null
+++ b/src/components/sections/hero/HeroBillboardCarousel.tsx
@@ -0,0 +1,153 @@
+"use client";
+
+import TextBox from "@/components/Textbox";
+import MediaContent from "@/components/shared/MediaContent";
+import AutoCarousel from "@/components/cardStack/layouts/carousels/AutoCarousel";
+import HeroBackgrounds, { type HeroBackgroundVariantProps } from "@/components/background/HeroBackgrounds";
+import { cls } from "@/lib/utils";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, ButtonAnimationType } from "@/types/button";
+
+export interface MediaItem {
+    imageSrc?: string;
+    videoSrc?: string;
+    imageAlt?: string;
+    videoAriaLabel?: string;
+}
+
+type HeroBillboardCarouselBackgroundProps = Extract<
+  HeroBackgroundVariantProps,
+  | { variant: "plain" }
+  | { variant: "animated-grid" }
+  | { variant: "canvas-reveal" }
+  | { variant: "cell-wave" }
+  | { variant: "downward-rays-animated" }
+  | { variant: "downward-rays-animated-grid" }
+  | { variant: "downward-rays-static" }
+  | { variant: "downward-rays-static-grid" }
+  | { variant: "gradient-bars" }
+  | { variant: "radial-gradient" }
+  | { variant: "rotated-rays-animated" }
+  | { variant: "rotated-rays-animated-grid" }
+  | { variant: "rotated-rays-static" }
+  | { variant: "rotated-rays-static-grid" }
+  | { variant: "sparkles-gradient" }
+>;
+
+interface HeroBillboardCarouselProps {
+    title: string;
+    description: string;
+    background: HeroBillboardCarouselBackgroundProps;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    tagAnimation?: ButtonAnimationType;
+    buttons?: ButtonConfig[];
+    buttonAnimation?: ButtonAnimationType;
+    mediaItems: MediaItem[];
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    textBoxClassName?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
+    tagClassName?: string;
+    buttonContainerClassName?: string;
+    buttonClassName?: string;
+    buttonTextClassName?: string;
+    mediaWrapperClassName?: string;
+}
+
+const HeroBillboardCarousel = ({
+    title,
+    description,
+    background = { variant: "plain" },
+    tag,
+    tagIcon,
+    tagAnimation = "opacity",
+    buttons = [],
+    buttonAnimation = "slide-up",
+    mediaItems,
+    ariaLabel = "Hero section",
+    className = "",
+    containerClassName = "",
+    textBoxClassName = "",
+    titleClassName = "",
+    descriptionClassName = "",
+    tagClassName = "",
+    buttonContainerClassName = "",
+    buttonClassName = "",
+    buttonTextClassName = "",
+    mediaWrapperClassName = "",
+}: HeroBillboardCarouselProps) => {
+    const renderCarouselItem = (item: MediaItem, index: number) => (
+        <div
+            key={index}
+            className="w-full aspect-[4/5] overflow-hidden rounded-theme-capped card p-2 shadow-lg"
+        >
+            <MediaContent
+                imageSrc={item.imageSrc}
+                videoSrc={item.videoSrc}
+                imageAlt={item.imageAlt || ""}
+                videoAriaLabel={item.videoAriaLabel || "Carousel media"}
+                imageClassName="z-1 h-full object-cover"
+            />
+        </div>
+    );
+
+    return (
+        <section
+            aria-label={ariaLabel}
+            className={cls(
+                "relative w-full py-hero-page-padding md:h-svh md:py-0",
+                className
+            )}
+        >
+            <HeroBackgrounds {...background} />
+            <div className={cls(
+                "mx-auto flex flex-col gap-14 md:gap-10 relative z-10",
+                "w-full md:w-content-width md:h-full md:items-center md:justify-center",
+                containerClassName
+            )}>
+                <TextBox
+                    title={title}
+                    description={description}
+                    tag={tag}
+                    tagIcon={tagIcon}
+                    tagAnimation={tagAnimation}
+                    buttons={buttons}
+                    buttonAnimation={buttonAnimation}
+                    className={cls(
+                        "flex flex-col gap-3 md:gap-3 w-content-width mx-auto",
+                        textBoxClassName
+                    )}
+                    titleClassName={cls("text-6xl font-medium text-balance", titleClassName)}
+                    descriptionClassName={cls("text-base md:text-lg leading-tight", descriptionClassName)}
+                    tagClassName={cls("px-3 py-1 text-sm rounded-theme card text-foreground inline-flex items-center gap-2 mb-1", tagClassName)}
+                    buttonContainerClassName={cls("flex flex-wrap gap-4 max-md:justify-center mt-2", buttonContainerClassName)}
+                    buttonClassName={buttonClassName}
+                    buttonTextClassName={buttonTextClassName}
+                    center={true}
+                />
+
+                <div className={cls("w-full -mx-[var(--content-padding)]", mediaWrapperClassName)}>
+                    <AutoCarousel
+                        title=""
+                        description=""
+                        textboxLayout="default"
+                        animationType="none"
+                        className="py-0"
+                        carouselClassName="py-0"
+                        containerClassName="!w-full"
+                        itemClassName="!w-55 md:!w-carousel-item-4"
+                        ariaLabel="Hero carousel"
+                        showTextBox={false}
+                    >
+                        {mediaItems?.map(renderCarouselItem)}
+                    </AutoCarousel>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default HeroBillboardCarousel;
\ No newline at end of file
diff --git a/src/components/sections/hero/HeroBillboardDashboard.tsx b/src/components/sections/hero/HeroBillboardDashboard.tsx
new file mode 100644
index 0000000..a41ac2e
--- /dev/null
+++ b/src/components/sections/hero/HeroBillboardDashboard.tsx
@@ -0,0 +1,130 @@
+"use client";
+
+import TextBox from "@/components/Textbox";
+import Dashboard from "@/components/shared/Dashboard";
+import HeroBackgrounds, { type HeroBackgroundVariantProps } from "@/components/background/HeroBackgrounds";
+import { cls } from "@/lib/utils";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, ButtonAnimationType } from "@/types/button";
+import type { DashboardSidebarItem, DashboardStat, DashboardListItem } from "@/components/shared/Dashboard";
+import type { ChartDataItem } from "@/components/bento/BentoLineChart/utils";
+
+type HeroBillboardDashboardBackgroundProps = Extract<
+  HeroBackgroundVariantProps,
+  | { variant: "plain" }
+  | { variant: "animated-grid" }
+  | { variant: "canvas-reveal" }
+  | { variant: "cell-wave" }
+  | { variant: "downward-rays-animated" }
+  | { variant: "downward-rays-animated-grid" }
+  | { variant: "downward-rays-static" }
+  | { variant: "downward-rays-static-grid" }
+  | { variant: "gradient-bars" }
+  | { variant: "radial-gradient" }
+  | { variant: "rotated-rays-animated" }
+  | { variant: "rotated-rays-animated-grid" }
+  | { variant: "rotated-rays-static" }
+  | { variant: "rotated-rays-static-grid" }
+  | { variant: "sparkles-gradient" }
+>;
+
+interface HeroBillboardDashboardProps {
+  title: string;
+  description: string;
+  background: HeroBillboardDashboardBackgroundProps;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  tagAnimation?: ButtonAnimationType;
+  buttons?: ButtonConfig[];
+  buttonAnimation?: ButtonAnimationType;
+  ariaLabel?: string;
+  dashboard: {
+    title: string;
+    stats: [DashboardStat, DashboardStat, DashboardStat];
+    logoIcon: LucideIcon;
+    sidebarItems: DashboardSidebarItem[];
+    searchPlaceholder?: string;
+    buttons: ButtonConfig[];
+    chartTitle?: string;
+    chartData?: ChartDataItem[];
+    listItems: DashboardListItem[];
+    listTitle?: string;
+    imageSrc: string;
+    videoSrc?: string;
+    imageAlt?: string;
+    videoAriaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    sidebarClassName?: string;
+    statClassName?: string;
+    chartClassName?: string;
+    listClassName?: string;
+  };
+  className?: string;
+  containerClassName?: string;
+  textBoxClassName?: string;
+  titleClassName?: string;
+  descriptionClassName?: string;
+  tagClassName?: string;
+  buttonContainerClassName?: string;
+  buttonClassName?: string;
+  buttonTextClassName?: string;
+  dashboardClassName?: string;
+}
+
+const HeroBillboardDashboard = ({
+  title,
+  description,
+  background = { variant: "plain" },
+  tag,
+  tagIcon,
+  tagAnimation = "opacity",
+  buttons = [],
+  buttonAnimation = "slide-up",
+  ariaLabel = "Hero section",
+  dashboard,
+  className = "",
+  containerClassName = "",
+  textBoxClassName = "",
+  titleClassName = "",
+  descriptionClassName = "",
+  tagClassName = "",
+  buttonContainerClassName = "",
+  buttonClassName = "",
+  buttonTextClassName = "",
+  dashboardClassName = "",
+}: HeroBillboardDashboardProps) => {
+  return (
+    <section
+      aria-label={ariaLabel}
+      className={cls("relative w-full py-hero-page-padding", className)}
+    >
+      <HeroBackgrounds {...background} />
+      <div className={cls("w-content-width mx-auto flex flex-col gap-14 md:gap-15 relative z-10", containerClassName)}>
+        <TextBox
+          title={title}
+          description={description}
+          tag={tag}
+          tagIcon={tagIcon}
+          tagAnimation={tagAnimation}
+          buttons={buttons}
+          buttonAnimation={buttonAnimation}
+          className={cls("flex flex-col gap-3 md:gap-3", textBoxClassName)}
+          titleClassName={cls("text-6xl font-medium text-balance", titleClassName)}
+          descriptionClassName={cls("text-base md:text-lg leading-tight", descriptionClassName)}
+          tagClassName={cls("px-3 py-1 text-sm rounded-theme card text-foreground inline-flex items-center gap-2 mb-1", tagClassName)}
+          buttonContainerClassName={cls("flex flex-wrap gap-4 max-md:justify-center mt-2", buttonContainerClassName)}
+          buttonClassName={buttonClassName}
+          buttonTextClassName={buttonTextClassName}
+          center={true}
+        />
+        <Dashboard
+          {...dashboard}
+          className={cls(dashboard.className, dashboardClassName)}
+        />
+      </div>
+    </section>
+  );
+};
+
+export default HeroBillboardDashboard;
diff --git a/src/components/sections/hero/HeroBillboardGallery.tsx b/src/components/sections/hero/HeroBillboardGallery.tsx
new file mode 100644
index 0000000..ac51cb5
--- /dev/null
+++ b/src/components/sections/hero/HeroBillboardGallery.tsx
@@ -0,0 +1,198 @@
+"use client";
+
+import TextBox from "@/components/Textbox";
+import MediaContent from "@/components/shared/MediaContent";
+import AutoCarousel from "@/components/cardStack/layouts/carousels/AutoCarousel";
+import HeroBackgrounds, { type HeroBackgroundVariantProps } from "@/components/background/HeroBackgrounds";
+import { cls } from "@/lib/utils";
+import { useButtonAnimation } from "@/components/hooks/useButtonAnimation";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, ButtonAnimationType } from "@/types/button";
+
+export interface MediaItem {
+  imageSrc?: string;
+  videoSrc?: string;
+  imageAlt?: string;
+  videoAriaLabel?: string;
+}
+
+type HeroBillboardGalleryBackgroundProps = Extract<
+  HeroBackgroundVariantProps,
+  | { variant: "plain" }
+  | { variant: "animated-grid" }
+  | { variant: "canvas-reveal" }
+  | { variant: "cell-wave" }
+  | { variant: "downward-rays-animated" }
+  | { variant: "downward-rays-animated-grid" }
+  | { variant: "downward-rays-static" }
+  | { variant: "downward-rays-static-grid" }
+  | { variant: "gradient-bars" }
+  | { variant: "radial-gradient" }
+  | { variant: "rotated-rays-animated" }
+  | { variant: "rotated-rays-animated-grid" }
+  | { variant: "rotated-rays-static" }
+  | { variant: "rotated-rays-static-grid" }
+  | { variant: "sparkles-gradient" }
+>;
+
+interface HeroBillboardGalleryProps {
+  title: string;
+  description: string;
+  background: HeroBillboardGalleryBackgroundProps;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  tagAnimation?: ButtonAnimationType;
+  buttons?: ButtonConfig[];
+  buttonAnimation?: ButtonAnimationType;
+  mediaItems: MediaItem[];
+  mediaAnimation?: ButtonAnimationType;
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  textBoxClassName?: string;
+  titleClassName?: string;
+  descriptionClassName?: string;
+  tagClassName?: string;
+  buttonContainerClassName?: string;
+  buttonClassName?: string;
+  buttonTextClassName?: string;
+  mediaWrapperClassName?: string;
+  imageClassName?: string;
+}
+
+const HeroBillboardGallery = ({
+  title,
+  description,
+  background = { variant: "plain" },
+  tag,
+  tagIcon,
+  tagAnimation = "opacity",
+  buttons = [],
+  buttonAnimation = "slide-up",
+  mediaItems,
+  mediaAnimation = "none",
+  ariaLabel = "Hero section",
+  className = "",
+  containerClassName = "",
+  textBoxClassName = "",
+  titleClassName = "",
+  descriptionClassName = "",
+  tagClassName = "",
+  buttonContainerClassName = "",
+  buttonClassName = "",
+  buttonTextClassName = "",
+  mediaWrapperClassName = "",
+  imageClassName = "",
+}: HeroBillboardGalleryProps) => {
+  const { containerRef: mediaContainerRef } = useButtonAnimation({ animationType: mediaAnimation });
+
+  const renderCarouselItem = (item: MediaItem, index: number) => (
+    <div
+      key={index}
+      className="w-full aspect-[4/5] overflow-hidden rounded-theme-capped card p-2 shadow-lg"
+    >
+      <MediaContent
+        imageSrc={item.imageSrc}
+        videoSrc={item.videoSrc}
+        imageAlt={item.imageAlt || ""}
+        videoAriaLabel={item.videoAriaLabel || "Gallery media"}
+        imageClassName="h-full object-cover"
+      />
+    </div>
+  );
+
+  const itemCount = mediaItems?.length || 0;
+  const desktopWidthClass = itemCount === 3 ? "md:w-[24%]" : itemCount === 4 ? "md:w-[24%]" : "md:w-[23%]";
+
+  return (
+    <section
+      aria-label={ariaLabel}
+      className={cls(
+        "relative w-full py-hero-page-padding md:h-svh md:py-0",
+        className
+      )}
+    >
+      <HeroBackgrounds {...background} />
+      <div className={cls(
+        "mx-auto flex flex-col gap-14 relative z-10",
+        "w-full md:w-content-width md:h-full md:items-center md:justify-center",
+        containerClassName
+      )}>
+        <TextBox
+          title={title}
+          description={description}
+          tag={tag}
+          tagIcon={tagIcon}
+          tagAnimation={tagAnimation}
+          buttons={buttons}
+          buttonAnimation={buttonAnimation}
+          className={cls(
+            "flex flex-col gap-3 md:gap-3 w-content-width mx-auto",
+            textBoxClassName
+          )}
+          titleClassName={cls("text-6xl font-medium text-balance", titleClassName)}
+          descriptionClassName={cls("text-base md:text-lg leading-tight", descriptionClassName)}
+          tagClassName={cls("px-3 py-1 text-sm rounded-theme card text-foreground inline-flex items-center gap-2 mb-1", tagClassName)}
+          buttonContainerClassName={cls("flex flex-wrap gap-4 max-md:justify-center mt-2", buttonContainerClassName)}
+          buttonClassName={buttonClassName}
+          buttonTextClassName={buttonTextClassName}
+          center={true}
+        />
+
+        <div className={cls("w-full", mediaWrapperClassName)}>
+          <div className="block md:hidden -mx-[var(--content-padding)]">
+            <AutoCarousel
+              title=""
+              description=""
+              textboxLayout="default"
+              animationType="none"
+              className="py-0"
+              carouselClassName="py-0"
+              containerClassName="!w-full"
+              itemClassName="!w-55"
+              ariaLabel="Hero gallery carousel"
+              showTextBox={false}
+            >
+              {mediaItems?.slice(0, 5).map(renderCarouselItem)}
+            </AutoCarousel>
+          </div>
+
+          <div ref={mediaContainerRef} className="hidden md:flex justify-center items-center pt-2">
+            <div className="relative flex items-center justify-center w-full">
+              {mediaItems?.slice(0, 5).map((item, index) => {
+                const rotations = ["-rotate-6", "rotate-6", "-rotate-6", "rotate-6", "-rotate-6"];
+                const zIndexes = ["z-10", "z-20", "z-30", "z-40", "z-50"];
+                const translates = ["-translate-y-5", "translate-y-5", "-translate-y-5", "translate-y-5", "-translate-y-5"];
+                const marginClass = index > 0 ? "-ml-12 md:-ml-15" : "";
+
+                return (
+                  <div
+                    key={index}
+                    className={cls(
+                      "relative aspect-[4/5] overflow-hidden rounded-theme-capped card p-2 shadow-lg transition-transform duration-500 ease-out hover:scale-110",
+                      desktopWidthClass,
+                      rotations[index],
+                      zIndexes[index],
+                      translates[index],
+                      marginClass
+                    )}
+                  >
+                    <MediaContent
+                      imageSrc={item.imageSrc}
+                      videoSrc={item.videoSrc}
+                      imageAlt={item.imageAlt || ""}
+                      videoAriaLabel={item.videoAriaLabel || "Gallery media"}
+                      imageClassName={cls("z-1 h-full object-cover", imageClassName)}
+                    />
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default HeroBillboardGallery;
diff --git a/src/components/sections/hero/HeroBillboardRotatedCarousel.tsx b/src/components/sections/hero/HeroBillboardRotatedCarousel.tsx
new file mode 100644
index 0000000..5c5f50d
--- /dev/null
+++ b/src/components/sections/hero/HeroBillboardRotatedCarousel.tsx
@@ -0,0 +1,125 @@
+"use client";
+
+
+import TextBox from "@/components/Textbox";
+import AngledCarousel from "@/components/cardStack/layouts/carousels/AngledCarousel";
+import HeroBackgrounds, { type HeroBackgroundVariantProps } from "@/components/background/HeroBackgrounds";
+import { cls } from "@/lib/utils";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, ButtonAnimationType } from "@/types/button";
+
+type HeroBillboardRotatedCarouselBackgroundProps = Extract<
+  HeroBackgroundVariantProps,
+  | { variant: "plain" }
+  | { variant: "animated-grid" }
+  | { variant: "canvas-reveal" }
+  | { variant: "cell-wave" }
+  | { variant: "downward-rays-animated" }
+  | { variant: "downward-rays-animated-grid" }
+  | { variant: "downward-rays-static" }
+  | { variant: "downward-rays-static-grid" }
+  | { variant: "gradient-bars" }
+  | { variant: "radial-gradient" }
+  | { variant: "rotated-rays-animated" }
+  | { variant: "rotated-rays-animated-grid" }
+  | { variant: "rotated-rays-static" }
+  | { variant: "rotated-rays-static-grid" }
+  | { variant: "sparkles-gradient" }
+>;
+
+interface CarouselItem {
+  id: string;
+  imageSrc?: string;
+  videoSrc?: string;
+  imageAlt?: string;
+  videoAriaLabel?: string;
+}
+
+interface HeroBillboardRotatedCarouselProps {
+  title: string;
+  description: string;
+  background: HeroBillboardRotatedCarouselBackgroundProps;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  tagAnimation?: ButtonAnimationType;
+  buttons?: ButtonConfig[];
+  buttonAnimation?: ButtonAnimationType;
+  carouselItems: CarouselItem[];
+  autoPlay?: boolean;
+  autoPlayInterval?: number;
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  textBoxClassName?: string;
+  titleClassName?: string;
+  descriptionClassName?: string;
+  tagClassName?: string;
+  buttonContainerClassName?: string;
+  buttonClassName?: string;
+  buttonTextClassName?: string;
+  carouselClassName?: string;
+}
+
+const HeroBillboardRotatedCarousel = ({
+  title,
+  description,
+  background = { variant: "plain" },
+  tag,
+  tagIcon,
+  tagAnimation = "opacity",
+  buttons = [],
+  buttonAnimation = "slide-up",
+  carouselItems,
+  autoPlay = true,
+  autoPlayInterval = 4000,
+  ariaLabel = "Hero section",
+  className = "",
+  containerClassName = "",
+  textBoxClassName = "",
+  titleClassName = "",
+  descriptionClassName = "",
+  tagClassName = "",
+  buttonContainerClassName = "",
+  buttonClassName = "",
+  buttonTextClassName = "",
+  carouselClassName = "",
+}: HeroBillboardRotatedCarouselProps) => {
+  return (
+    <section
+      aria-label={ariaLabel}
+      className={cls("relative w-full h-fit md:min-h-svh flex items-center justify-center py-hero-page-padding", className)}
+    >
+      <HeroBackgrounds {...background} />
+      <div className={cls("w-full flex flex-col gap-14 md:gap-15 relative z-10", containerClassName)}>
+        <div className="w-content-width mx-auto" >
+          <TextBox
+            title={title}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            tagAnimation={tagAnimation}
+            buttons={buttons}
+            buttonAnimation={buttonAnimation}
+            className={cls("flex flex-col gap-3 md:gap-3", textBoxClassName)}
+            titleClassName={cls("text-6xl font-medium text-balance", titleClassName)}
+            descriptionClassName={cls("text-base md:text-lg leading-tight", descriptionClassName)}
+            tagClassName={cls("px-3 py-1 text-sm rounded-theme card text-foreground inline-flex items-center gap-2 mb-1", tagClassName)}
+            buttonContainerClassName={cls("flex flex-wrap gap-4 max-md:justify-center mt-2", buttonContainerClassName)}
+            buttonClassName={buttonClassName}
+            buttonTextClassName={buttonTextClassName}
+            center={true}
+          />
+        </div>
+
+        <AngledCarousel
+          items={carouselItems}
+          autoPlay={autoPlay}
+          autoPlayInterval={autoPlayInterval}
+          className={carouselClassName}
+        />
+      </div>
+    </section>
+  );
+};
+
+export default HeroBillboardRotatedCarousel;
diff --git a/src/components/sections/hero/HeroBillboardScroll.tsx b/src/components/sections/hero/HeroBillboardScroll.tsx
new file mode 100644
index 0000000..4bd1211
--- /dev/null
+++ b/src/components/sections/hero/HeroBillboardScroll.tsx
@@ -0,0 +1,166 @@
+"use client";
+
+import { useRef } from "react";
+import { useScroll, useTransform, motion } from "motion/react";
+import TextBox from "@/components/Textbox";
+import MediaContent from "@/components/shared/MediaContent";
+import HeroBackgrounds, { type HeroBackgroundVariantProps } from "@/components/background/HeroBackgrounds";
+import { cls } from "@/lib/utils";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, ButtonAnimationType } from "@/types/button";
+
+type HeroBillboardScrollBackgroundProps = Extract<
+  HeroBackgroundVariantProps,
+  | { variant: "plain" }
+  | { variant: "animated-grid" }
+  | { variant: "canvas-reveal" }
+  | { variant: "cell-wave" }
+  | { variant: "downward-rays-animated" }
+  | { variant: "downward-rays-animated-grid" }
+  | { variant: "downward-rays-static" }
+  | { variant: "downward-rays-static-grid" }
+  | { variant: "gradient-bars" }
+  | { variant: "radial-gradient" }
+  | { variant: "rotated-rays-animated" }
+  | { variant: "rotated-rays-animated-grid" }
+  | { variant: "rotated-rays-static" }
+  | { variant: "rotated-rays-static-grid" }
+  | { variant: "sparkles-gradient" }
+>;
+
+interface HeroBillboardScrollProps {
+  title: string;
+  description: string;
+  background: HeroBillboardScrollBackgroundProps;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  tagAnimation?: ButtonAnimationType;
+  buttons?: ButtonConfig[];
+  buttonAnimation?: ButtonAnimationType;
+  imageSrc?: string;
+  videoSrc?: string;
+  imageAlt?: string;
+  videoAriaLabel?: string;
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  textBoxClassName?: string;
+  titleClassName?: string;
+  descriptionClassName?: string;
+  tagClassName?: string;
+  buttonContainerClassName?: string;
+  buttonClassName?: string;
+  buttonTextClassName?: string;
+  cardWrapperClassName?: string;
+  cardInnerClassName?: string;
+  imageClassName?: string;
+}
+
+const HeroBillboardScroll = ({
+  title,
+  description,
+  background = { variant: "plain" },
+  tag,
+  tagIcon,
+  tagAnimation = "opacity",
+  buttons = [],
+  buttonAnimation = "slide-up",
+  imageSrc,
+  videoSrc,
+  imageAlt = "",
+  videoAriaLabel = "Hero video",
+  ariaLabel = "Hero section",
+  className = "",
+  containerClassName = "",
+  textBoxClassName = "",
+  titleClassName = "",
+  descriptionClassName = "",
+  tagClassName = "",
+  buttonContainerClassName = "",
+  buttonClassName = "",
+  buttonTextClassName = "",
+  cardWrapperClassName = "",
+  cardInnerClassName = "",
+  imageClassName = "",
+}: HeroBillboardScrollProps) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const { scrollYProgress } = useScroll({
+    target: containerRef,
+  });
+
+  const rotate = useTransform(scrollYProgress, [0, 1], [20, 0]);
+  const scale = useTransform(scrollYProgress, [0, 1], [1.05, 1]);
+
+  return (
+    <section
+      aria-label={ariaLabel}
+      ref={containerRef}
+      className={cls("relative h-fit flex items-center justify-center", className)}
+    >
+      <HeroBackgrounds {...background} />
+      <div
+        className={cls("py-hero-page-padding w-full relative z-10", containerClassName)}
+        style={{
+          perspective: "1000px",
+        }}
+      >
+        <div className="w-content-width mx-auto">
+          <TextBox
+            title={title}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            tagAnimation={tagAnimation}
+            buttons={buttons}
+            buttonAnimation={buttonAnimation}
+            className={cls("flex flex-col gap-3 md:gap-3", textBoxClassName)}
+            titleClassName={cls("text-6xl font-medium text-balance", titleClassName)}
+            descriptionClassName={cls("text-base md:text-lg leading-tight", descriptionClassName)}
+            tagClassName={cls("px-3 py-1 text-sm rounded-theme card text-foreground inline-flex items-center gap-2 mb-1", tagClassName)}
+            buttonContainerClassName={cls("flex flex-wrap gap-4 max-md:justify-center mt-2", buttonContainerClassName)}
+            buttonClassName={buttonClassName}
+            buttonTextClassName={buttonTextClassName}
+            center={true}
+          />
+        </div>
+
+        <div
+          className={cls("relative w-content-width h-[50svh] mt-8 mx-auto md:hidden", cardWrapperClassName)}
+          style={{
+            transform: "rotateX(20deg)",
+          }}
+        >
+          <div className={cls("h-full w-full overflow-hidden rounded-theme-capped card p-4", cardInnerClassName)}>
+            <MediaContent
+              imageSrc={imageSrc}
+              videoSrc={videoSrc}
+              imageAlt={imageAlt}
+              videoAriaLabel={videoAriaLabel}
+              imageClassName={cls("z-1 h-full w-full object-cover object-left-top aspect-square md:aspect-video", imageClassName)}
+            />
+          </div>
+        </div>
+
+        <motion.div
+          style={{
+            rotateX: rotate,
+            scale,
+          }}
+          className={cls("hidden md:block relative w-content-width mt-8 h-[75svh] mx-auto", cardWrapperClassName)}
+        >
+          <div className={cls("h-full w-full overflow-hidden rounded-theme-capped card p-4", cardInnerClassName)}>
+            <MediaContent
+              imageSrc={imageSrc}
+              videoSrc={videoSrc}
+              imageAlt={imageAlt}
+              videoAriaLabel={videoAriaLabel}
+              imageClassName={cls("z-1 h-full w-full object-cover object-left-top", imageClassName)}
+            />
+          </div>
+        </motion.div>
+      </div>
+    </section>
+  );
+};
+
+export default HeroBillboardScroll;
diff --git a/src/components/sections/hero/HeroBillboardTestimonial.tsx b/src/components/sections/hero/HeroBillboardTestimonial.tsx
new file mode 100644
index 0000000..b3a66cc
--- /dev/null
+++ b/src/components/sections/hero/HeroBillboardTestimonial.tsx
@@ -0,0 +1,265 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import TextBox from "@/components/Textbox";
+import MediaContent from "@/components/shared/MediaContent";
+import HeroBackgrounds, { type HeroBackgroundVariantProps } from "@/components/background/HeroBackgrounds";
+import LogoMarquee, { type MarqueeItem } from "@/components/shared/LogoMarquee";
+import TestimonialAuthor from "@/components/shared/TestimonialAuthor";
+import AnimationContainer from "@/components/sections/AnimationContainer";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useButtonAnimation } from "@/components/hooks/useButtonAnimation";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import { Star } from "lucide-react";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, ButtonAnimationType } from "@/types/button";
+import type { Avatar } from "@/components/shared/AvatarGroup";
+
+type Testimonial = {
+  name: string;
+  handle: string;
+  testimonial: string;
+  rating: number;
+  imageSrc?: string;
+  imageAlt?: string;
+};
+
+type HeroBillboardTestimonialBackgroundProps = Extract<
+  HeroBackgroundVariantProps,
+  | { variant: "plain" }
+  | { variant: "animated-grid" }
+  | { variant: "canvas-reveal" }
+  | { variant: "cell-wave" }
+  | { variant: "downward-rays-animated" }
+  | { variant: "downward-rays-animated-grid" }
+  | { variant: "downward-rays-static" }
+  | { variant: "downward-rays-static-grid" }
+  | { variant: "glowing-orb" }
+  | { variant: "gradient-bars" }
+  | { variant: "radial-gradient" }
+  | { variant: "rotated-rays-animated" }
+  | { variant: "rotated-rays-animated-grid" }
+  | { variant: "rotated-rays-static" }
+  | { variant: "rotated-rays-static-grid" }
+  | { variant: "sparkles-gradient" }
+>;
+
+interface HeroBillboardTestimonialProps {
+  title: string;
+  description: string;
+  background: HeroBillboardTestimonialBackgroundProps;
+  testimonials: Testimonial[];
+  testimonialRotationInterval?: number;
+  useInvertedBackground?: boolean;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  tagAnimation?: ButtonAnimationType;
+  buttons?: ButtonConfig[];
+  buttonAnimation?: ButtonAnimationType;
+  avatars?: Avatar[];
+  avatarText?: string;
+  imageSrc?: string;
+  videoSrc?: string;
+  imageAlt?: string;
+  videoAriaLabel?: string;
+  mediaAnimation?: ButtonAnimationType;
+  marqueeItems?: MarqueeItem[];
+  marqueeSpeed?: number;
+  showMarqueeCard?: boolean;
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  textBoxClassName?: string;
+  titleClassName?: string;
+  descriptionClassName?: string;
+  tagClassName?: string;
+  avatarGroupClassName?: string;
+  buttonContainerClassName?: string;
+  buttonClassName?: string;
+  buttonTextClassName?: string;
+  mediaWrapperClassName?: string;
+  imageClassName?: string;
+  testimonialCardClassName?: string;
+  testimonialContentClassName?: string;
+  testimonialTextClassName?: string;
+  testimonialRatingClassName?: string;
+  testimonialAuthorClassName?: string;
+  testimonialAuthorImageClassName?: string;
+  testimonialAuthorNameClassName?: string;
+  testimonialAuthorHandleClassName?: string;
+  marqueeClassName?: string;
+  marqueeItemClassName?: string;
+  marqueeCardClassName?: string;
+  marqueeImageClassName?: string;
+  marqueeTextClassName?: string;
+  marqueeIconClassName?: string;
+}
+
+const HeroBillboardTestimonial = ({
+  title,
+  description,
+  background = { variant: "plain" },
+  testimonials,
+  testimonialRotationInterval = 5000,
+  useInvertedBackground = false,
+  tag,
+  tagIcon,
+  tagAnimation = "opacity",
+  buttons = [],
+  buttonAnimation = "slide-up",
+  avatars,
+  avatarText,
+  imageSrc,
+  videoSrc,
+  imageAlt = "",
+  videoAriaLabel = "Hero video",
+  mediaAnimation = "none",
+  marqueeItems,
+  marqueeSpeed = 30,
+  showMarqueeCard = true,
+  ariaLabel = "Hero section",
+  className = "",
+  containerClassName = "",
+  textBoxClassName = "",
+  titleClassName = "",
+  descriptionClassName = "",
+  tagClassName = "",
+  avatarGroupClassName = "",
+  buttonContainerClassName = "",
+  buttonClassName = "",
+  buttonTextClassName = "",
+  mediaWrapperClassName = "",
+  imageClassName = "",
+  testimonialCardClassName = "",
+  testimonialContentClassName = "",
+  testimonialTextClassName = "",
+  testimonialRatingClassName = "",
+  testimonialAuthorClassName = "",
+  testimonialAuthorImageClassName = "",
+  testimonialAuthorNameClassName = "",
+  testimonialAuthorHandleClassName = "",
+  marqueeClassName = "",
+  marqueeItemClassName = "",
+  marqueeCardClassName = "",
+  marqueeImageClassName = "",
+  marqueeTextClassName = "",
+  marqueeIconClassName = "",
+}: HeroBillboardTestimonialProps) => {
+  const theme = useTheme();
+  const { containerRef: mediaContainerRef } = useButtonAnimation({ animationType: mediaAnimation });
+  const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [animationKey, setAnimationKey] = useState(0);
+
+  useEffect(() => {
+    if (!testimonialRotationInterval || testimonials.length <= 1) return;
+
+    const interval = setInterval(() => {
+      setCurrentIndex((prev) => (prev + 1) % testimonials.length);
+      setAnimationKey((prev) => prev + 1);
+    }, testimonialRotationInterval);
+
+    return () => clearInterval(interval);
+  }, [testimonialRotationInterval, testimonials.length]);
+
+  const currentTestimonial = testimonials[currentIndex];
+
+  return (
+    <section
+      aria-label={ariaLabel}
+      className={cls("relative w-full py-hero-page-padding", className)}
+    >
+      <HeroBackgrounds {...background} />
+      <div className={cls("w-content-width mx-auto flex flex-col gap-14 md:gap-15 relative z-10", containerClassName)}>
+        <TextBox
+          title={title}
+          description={description}
+          tag={tag}
+          tagIcon={tagIcon}
+          tagAnimation={tagAnimation}
+          buttons={buttons}
+          buttonAnimation={buttonAnimation}
+          avatars={avatars}
+          avatarText={avatarText}
+          avatarsAbove={true}
+          className={cls("flex flex-col gap-3 md:gap-3", textBoxClassName)}
+          titleClassName={cls("text-6xl font-medium text-balance", titleClassName)}
+          descriptionClassName={cls("text-base md:text-lg leading-tight", descriptionClassName)}
+          tagClassName={cls("px-3 py-1 text-sm rounded-theme card text-foreground inline-flex items-center gap-2 mb-1", tagClassName)}
+          avatarGroupClassName={avatarGroupClassName}
+          buttonContainerClassName={cls("flex flex-wrap gap-4 max-md:justify-center mt-2", buttonContainerClassName)}
+          buttonClassName={buttonClassName}
+          buttonTextClassName={buttonTextClassName}
+          center={true}
+        />
+        <div className="flex flex-col gap-6">
+          <div ref={mediaContainerRef} className={cls("relative w-full overflow-hidden rounded-theme-capped card p-4", mediaWrapperClassName)}>
+            <MediaContent
+              imageSrc={imageSrc}
+              videoSrc={videoSrc}
+              imageAlt={imageAlt}
+              videoAriaLabel={videoAriaLabel}
+              imageClassName={cls("z-1 aspect-square md:aspect-video", imageClassName)}
+            />
+
+            {currentTestimonial && (
+              <div className={cls(
+                "absolute! bottom-[calc(var(--spacing-4)+var(--spacing-4))] left-[calc(var(--spacing-4)+var(--spacing-4))] max-md:right-[calc(var(--spacing-4)+var(--spacing-4))] max-w-full md:max-w-3/10 2xl:max-w-25/100 card rounded-theme-capped p-6 flex flex-col justify-between gap-5",
+                testimonialCardClassName
+              )}>
+                <AnimationContainer key={animationKey} className="flex flex-col gap-5">
+                  <div className={cls("flex flex-col gap-5 items-start", testimonialContentClassName)}>
+                    <div className={cls("relative z-1 flex gap-1", testimonialRatingClassName)}>
+                      {Array.from({ length: 5 }).map((_, index) => (
+                        <Star
+                          key={index}
+                          className={cls(
+                            "h-5 w-auto text-accent",
+                            index < currentTestimonial.rating ? "fill-accent" : "fill-transparent"
+                          )}
+                          strokeWidth={1.5}
+                        />
+                      ))}
+                    </div>
+
+                    <p className={cls("relative z-1 text-lg leading-[1.2]", shouldUseLightText ? "text-background" : "text-foreground", testimonialTextClassName)}>
+                      {currentTestimonial.testimonial}
+                    </p>
+                  </div>
+
+                  <TestimonialAuthor
+                    name={currentTestimonial.name}
+                    subtitle={currentTestimonial.handle}
+                    imageSrc={currentTestimonial.imageSrc}
+                    imageAlt={currentTestimonial.imageAlt}
+                    useInvertedBackground={useInvertedBackground}
+                    className={testimonialAuthorClassName}
+                    imageClassName={testimonialAuthorImageClassName}
+                    nameClassName={testimonialAuthorNameClassName}
+                    subtitleClassName={testimonialAuthorHandleClassName}
+                  />
+                </AnimationContainer>
+              </div>
+            )}
+          </div>
+          {marqueeItems && marqueeItems.length > 0 && (
+            <LogoMarquee
+              items={marqueeItems}
+              speed={marqueeSpeed}
+              showCard={showMarqueeCard}
+              className={cls("w-content-width mx-auto z-10", marqueeClassName)}
+              itemClassName={marqueeItemClassName}
+              cardClassName={marqueeCardClassName}
+              imageClassName={marqueeImageClassName}
+              textClassName={marqueeTextClassName}
+              iconClassName={marqueeIconClassName}
+            />
+          )}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default HeroBillboardTestimonial;
diff --git a/src/components/sections/hero/HeroCentered.tsx b/src/components/sections/hero/HeroCentered.tsx
new file mode 100644
index 0000000..b096b5a
--- /dev/null
+++ b/src/components/sections/hero/HeroCentered.tsx
@@ -0,0 +1,129 @@
+"use client";
+
+import TextBox from "@/components/Textbox";
+import HeroBackgrounds, { type HeroBackgroundVariantProps } from "@/components/background/HeroBackgrounds";
+import LogoMarquee, { type MarqueeItem } from "@/components/shared/LogoMarquee";
+import { cls } from "@/lib/utils";
+import type { ButtonConfig, ButtonAnimationType } from "@/types/button";
+import type { Avatar } from "@/components/shared/AvatarGroup";
+
+type HeroCenteredBackgroundProps = Extract<
+  HeroBackgroundVariantProps,
+  | { variant: "plain" }
+  | { variant: "animated-grid" }
+  | { variant: "canvas-reveal" }
+  | { variant: "cell-wave" }
+  | { variant: "downward-rays-animated" }
+  | { variant: "downward-rays-animated-grid" }
+  | { variant: "downward-rays-static" }
+  | { variant: "downward-rays-static-grid" }
+  | { variant: "gradient-bars" }
+  | { variant: "radial-gradient" }
+  | { variant: "rotated-rays-animated" }
+  | { variant: "rotated-rays-animated-grid" }
+  | { variant: "rotated-rays-static" }
+  | { variant: "rotated-rays-static-grid" }
+  | { variant: "sparkles-gradient" }
+>;
+
+interface HeroCenteredProps {
+  title: string;
+  description: string;
+  background: HeroCenteredBackgroundProps;
+  avatars: Avatar[];
+  avatarText?: string;
+  buttons?: ButtonConfig[];
+  buttonAnimation?: ButtonAnimationType;
+  marqueeItems?: MarqueeItem[];
+  marqueeSpeed?: number;
+  showMarqueeCard?: boolean;
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  textBoxClassName?: string;
+  titleClassName?: string;
+  descriptionClassName?: string;
+  avatarGroupClassName?: string;
+  buttonContainerClassName?: string;
+  buttonClassName?: string;
+  buttonTextClassName?: string;
+  marqueeClassName?: string;
+  marqueeItemClassName?: string;
+  marqueeCardClassName?: string;
+  marqueeImageClassName?: string;
+  marqueeTextClassName?: string;
+  marqueeIconClassName?: string;
+}
+
+const HeroCentered = ({
+  title,
+  description,
+  background = { variant: "plain" },
+  avatars,
+  avatarText,
+  buttons = [],
+  buttonAnimation = "slide-up",
+  marqueeItems,
+  marqueeSpeed = 30,
+  showMarqueeCard = true,
+  ariaLabel = "Hero section",
+  className = "",
+  containerClassName = "",
+  textBoxClassName = "",
+  titleClassName = "",
+  descriptionClassName = "",
+  avatarGroupClassName = "",
+  buttonContainerClassName = "",
+  buttonClassName = "",
+  buttonTextClassName = "",
+  marqueeClassName = "",
+  marqueeItemClassName = "",
+  marqueeCardClassName = "",
+  marqueeImageClassName = "",
+  marqueeTextClassName = "",
+  marqueeIconClassName = "",
+}: HeroCenteredProps) => {
+  return (
+    <section
+      aria-label={ariaLabel}
+      className={cls("relative w-full h-svh md:h-screen flex flex-col items-center justify-center", className)}
+    >
+      <HeroBackgrounds {...background} />
+      <div className={cls("w-content-width mx-auto relative z-10", containerClassName)}>
+        <TextBox
+          title={title}
+          description={description}
+          avatars={avatars}
+          avatarText={avatarText}
+          avatarsAbove={true}
+          buttons={buttons}
+          buttonAnimation={buttonAnimation}
+          className={cls("md:max-w-7/10 mx-auto flex flex-col gap-3 md:gap-3", textBoxClassName)}
+          titleClassName={cls("text-7xl font-medium text-balance", titleClassName)}
+          descriptionClassName={cls("text-lg md:text-xl leading-tight", descriptionClassName)}
+          avatarGroupClassName={avatarGroupClassName}
+          buttonContainerClassName={cls("flex flex-wrap gap-4 max-md:justify-center mt-3", buttonContainerClassName)}
+          buttonClassName={buttonClassName}
+          buttonTextClassName={buttonTextClassName}
+          center={true}
+        />
+      </div>
+
+      {marqueeItems && marqueeItems.length > 0 && (
+        <LogoMarquee
+          items={marqueeItems}
+          speed={marqueeSpeed}
+          showCard={showMarqueeCard}
+          className={cls("absolute bottom-6 left-1/2 -translate-x-1/2 w-content-width z-10", marqueeClassName)}
+          itemClassName={marqueeItemClassName}
+          cardClassName={marqueeCardClassName}
+          imageClassName={marqueeImageClassName}
+          textClassName={marqueeTextClassName}
+          iconClassName={marqueeIconClassName}
+        />
+      )}
+    </section>
+  );
+};
+
+export default HeroCentered;
diff --git a/src/components/sections/hero/HeroLogo.tsx b/src/components/sections/hero/HeroLogo.tsx
new file mode 100644
index 0000000..8e9b05a
--- /dev/null
+++ b/src/components/sections/hero/HeroLogo.tsx
@@ -0,0 +1,127 @@
+"use client";
+
+import MediaContent from "@/components/shared/MediaContent";
+import FillWidthText, { hasDescenders } from "@/components/shared/FillWidthText/FillWidthText";
+import TextAnimation from "@/components/text/TextAnimation";
+import Button from "@/components/button/Button";
+import { cls } from "@/lib/utils";
+import { getButtonProps } from "@/lib/buttonUtils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import { useButtonAnimation } from "@/components/hooks/useButtonAnimation";
+import type { ButtonConfig, ButtonAnimationType } from "@/types/button";
+
+const MASK_GRADIENT = "linear-gradient(to bottom, transparent, black 60%)";
+
+interface HeroLogoProps {
+  logoText: string;
+  description: string;
+  buttons: ButtonConfig[];
+  buttonAnimation?: ButtonAnimationType;
+  imageSrc?: string;
+  videoSrc?: string;
+  imageAlt?: string;
+  videoAriaLabel?: string;
+  showDimOverlay?: boolean;
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  contentContainerClassName?: string;
+  descriptionClassName?: string;
+  buttonContainerClassName?: string;
+  buttonClassName?: string;
+  buttonTextClassName?: string;
+  logoContainerClassName?: string;
+  logoClassName?: string;
+  mediaWrapperClassName?: string;
+  imageClassName?: string;
+  blurClassName?: string;
+  dimOverlayClassName?: string;
+}
+
+const HeroLogo = ({
+  logoText,
+  description,
+  buttons = [],
+  buttonAnimation = "none",
+  imageSrc,
+  videoSrc,
+  imageAlt = "",
+  videoAriaLabel = "Hero video",
+  showDimOverlay = false,
+  ariaLabel = "Hero section",
+  className = "",
+  containerClassName = "",
+  contentContainerClassName = "",
+  descriptionClassName = "",
+  buttonContainerClassName = "",
+  buttonClassName = "",
+  buttonTextClassName = "",
+  logoContainerClassName = "",
+  logoClassName = "",
+  mediaWrapperClassName = "",
+  imageClassName = "",
+  blurClassName = "",
+  dimOverlayClassName = "",
+}: HeroLogoProps) => {
+  const theme = useTheme();
+  const { containerRef: buttonContainerRef } = useButtonAnimation({ animationType: buttonAnimation });
+
+  return (
+    <section
+      aria-label={ariaLabel}
+      className={cls("relative w-full h-svh overflow-hidden flex flex-col justify-end", className)}
+    >
+      <div className={cls("absolute inset-0 w-full h-full", mediaWrapperClassName)}>
+        {showDimOverlay && (
+          <div className={cls("absolute top-0 left-0 w-full h-full bg-background/20 pointer-events-none select-none", dimOverlayClassName)} />
+        )}
+        <MediaContent
+          imageSrc={imageSrc}
+          videoSrc={videoSrc}
+          imageAlt={imageAlt}
+          videoAriaLabel={videoAriaLabel}
+          imageClassName={cls("w-full h-full object-cover !rounded-none", imageClassName)}
+        />
+      </div>
+
+      <div
+        className={cls(
+          "absolute z-10 backdrop-blur-xl opacity-100 w-full h-[50svh] md:h-[75svh] left-0 bottom-0 pointer-events-none select-none",
+          blurClassName
+        )}
+        style={{ maskImage: MASK_GRADIENT }}
+        aria-hidden="true"
+      />
+
+      <div className={cls("relative z-20 w-content-width mx-auto h-fit flex items-end", containerClassName)}>
+        <div className={cls("w-full flex flex-col", logoContainerClassName)}>
+          <div className={cls("w-full flex flex-col md:flex-row md:justify-between items-start md:items-end gap-3 md:gap-6", contentContainerClassName)}>
+            <div className="w-full md:w-1/2" >
+              <TextAnimation
+                type={theme.defaultTextAnimation}
+                text={description}
+                variant="words-trigger"
+                start="top 100%"
+                className={cls("text-lg md:text-2xl text-background text-balance font-medium leading-[1.2] md:max-w-1/2", descriptionClassName)}
+              />
+            </div>
+            <div className="w-full md:w-1/2 flex justify-start md:justify-end" >
+              <div ref={buttonContainerRef} className={cls("flex flex-wrap gap-4", buttonContainerClassName)}>
+                {buttons.slice(0, 2).map((button, index) => (
+                  <Button key={index} {...getButtonProps(button, index, theme.defaultButtonVariant, cls("", buttonClassName), cls("text-base", buttonTextClassName))} />
+                ))}
+              </div>
+            </div>
+          </div>
+          <div className="w-full flex">
+            <FillWidthText className={cls("font-bold text-background", !hasDescenders(logoText) && "my-10", logoClassName)}>
+              {logoText}
+            </FillWidthText>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default HeroLogo;
diff --git a/src/components/sections/hero/HeroLogoBillboard.tsx b/src/components/sections/hero/HeroLogoBillboard.tsx
new file mode 100644
index 0000000..53f79a2
--- /dev/null
+++ b/src/components/sections/hero/HeroLogoBillboard.tsx
@@ -0,0 +1,166 @@
+"use client";
+
+import MediaContent from "@/components/shared/MediaContent";
+import FillWidthText from "@/components/shared/FillWidthText/FillWidthText";
+import TextAnimation from "@/components/text/TextAnimation";
+import Button from "@/components/button/Button";
+import HeroBackgrounds, { type HeroBackgroundVariantProps } from "@/components/background/HeroBackgrounds";
+import { cls } from "@/lib/utils";
+import { getButtonProps } from "@/lib/buttonUtils";
+import { Plus } from "lucide-react";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import { useButtonAnimation } from "@/components/hooks/useButtonAnimation";
+import type { ButtonConfig } from "@/components/cardStack/types";
+import type { ButtonAnimationType } from "@/types/button";
+
+type HeroLogoBillboardBackgroundProps = Extract<
+  HeroBackgroundVariantProps,
+  | { variant: "plain" }
+  | { variant: "animated-grid" }
+  | { variant: "canvas-reveal" }
+  | { variant: "cell-wave" }
+  | { variant: "downward-rays-animated" }
+  | { variant: "downward-rays-animated-grid" }
+  | { variant: "downward-rays-static" }
+  | { variant: "downward-rays-static-grid" }
+  | { variant: "glowing-orb" }
+  | { variant: "gradient-bars" }
+  | { variant: "radial-gradient" }
+  | { variant: "rotated-rays-animated" }
+  | { variant: "rotated-rays-animated-grid" }
+  | { variant: "rotated-rays-static" }
+  | { variant: "rotated-rays-static-grid" }
+  | { variant: "sparkles-gradient" }
+>;
+
+interface HeroLogoBillboardProps {
+    logoText: string;
+    description: string;
+    buttons: ButtonConfig[];
+    buttonAnimation?: ButtonAnimationType;
+    background: HeroLogoBillboardBackgroundProps;
+    mediaAnimation?: ButtonAnimationType;
+    imageSrc?: string;
+    videoSrc?: string;
+    imageAlt?: string;
+    videoAriaLabel?: string;
+    frameStyle?: "card" | "browser";
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    logoContainerClassName?: string;
+    logoClassName?: string;
+    descriptionClassName?: string;
+    buttonContainerClassName?: string;
+    buttonClassName?: string;
+    buttonTextClassName?: string;
+    mediaWrapperClassName?: string;
+    imageClassName?: string;
+    browserBarClassName?: string;
+    addressBarClassName?: string;
+}
+
+const HeroLogoBillboard = ({
+    logoText,
+    description,
+    buttons = [],
+    buttonAnimation = "none",
+    background = { variant: "plain" },
+    mediaAnimation = "none",
+    imageSrc,
+    videoSrc,
+    imageAlt = "",
+    videoAriaLabel = "Hero video",
+    frameStyle = "card",
+    ariaLabel = "Hero section",
+    className = "",
+    containerClassName = "",
+    logoContainerClassName = "",
+    logoClassName = "",
+    descriptionClassName = "",
+    buttonContainerClassName = "",
+    buttonClassName = "",
+    buttonTextClassName = "",
+    mediaWrapperClassName = "",
+    imageClassName = "",
+    browserBarClassName = "",
+    addressBarClassName = "",
+}: HeroLogoBillboardProps) => {
+    const theme = useTheme();
+    const { containerRef: buttonContainerRef } = useButtonAnimation({ animationType: buttonAnimation });
+    const { containerRef: mediaContainerRef } = useButtonAnimation({ animationType: mediaAnimation });
+
+    return (
+        <section
+            aria-label={ariaLabel}
+            className={cls("relative w-full py-hero-page-padding", className)}
+        >
+            <HeroBackgrounds {...background} />
+            <div className={cls("w-content-width mx-auto flex flex-col gap-14 md:gap-15 relative z-10", containerClassName)}>
+                <div className={cls("w-full flex flex-col items-end gap-6 md:gap-8", logoContainerClassName)}>
+                    <div className="relative w-full flex">
+                        <FillWidthText className={cls("text-foreground", logoClassName)}>
+                            {logoText}
+                        </FillWidthText>
+                    </div>
+                    <div className="relative w-full md:w-1/2" >
+                        <TextAnimation
+                            type={theme.defaultTextAnimation}
+                            text={description}
+                            variant="words-trigger"
+                            start="top 100%"
+                            className={cls("text-lg md:text-3xl text-foreground/75 text-balance text-end leading-[1.2]", descriptionClassName)}
+                        />
+                    </div>
+                    <div ref={buttonContainerRef} className={cls("flex flex-wrap justify-end gap-3", buttonContainerClassName)}>
+                        {buttons.slice(0, 2).map((button, index) => (
+                            <Button
+                                key={`${button.text}-${index}`}
+                                {...getButtonProps(button, index, theme.defaultButtonVariant, buttonClassName, buttonTextClassName)}
+                            />
+                        ))}
+                    </div>
+                </div>
+
+                {frameStyle === "browser" ? (
+                    <div ref={mediaContainerRef} className={cls("w-full overflow-hidden rounded-theme-capped card", mediaWrapperClassName)}>
+                        <div className={cls("relative z-1 bg-background border-b border-foreground/10 px-4 py-3 flex items-center gap-4", browserBarClassName)}>
+                            <div className="flex items-center gap-2">
+                                <div className="h-3 w-auto aspect-square rounded-theme bg-accent" />
+                                <div className="h-3 w-auto aspect-square rounded-theme bg-accent" />
+                                <div className="h-3 w-auto aspect-square rounded-theme bg-accent" />
+                            </div>
+                            <div className="flex items-center gap-2 flex-1">
+                                <div className={cls("w-15 md:w-10 h-8 rounded-theme bg-accent/10", addressBarClassName)} />
+                                <div className="w-15 md:w-10 h-8 rounded-theme bg-accent/10" />
+                                <div className="hidden md:block w-10 h-8 rounded-theme bg-accent/10" />
+                            </div>
+                            <Plus className="h-[var(--text-sm)] w-auto text-foreground" />
+                        </div>
+                        <div className="relative z-1 p-0">
+                            <MediaContent
+                                imageSrc={imageSrc}
+                                videoSrc={videoSrc}
+                                imageAlt={imageAlt}
+                                videoAriaLabel={videoAriaLabel}
+                                imageClassName={cls("z-1 rounded-none! aspect-square md:aspect-video", imageClassName)}
+                            />
+                        </div>
+                    </div>
+                ) : (
+                    <div ref={mediaContainerRef} className={cls("w-full overflow-hidden rounded-theme-capped card p-4", mediaWrapperClassName)}>
+                        <MediaContent
+                            imageSrc={imageSrc}
+                            videoSrc={videoSrc}
+                            imageAlt={imageAlt}
+                            videoAriaLabel={videoAriaLabel}
+                            imageClassName={cls("z-1 aspect-square md:aspect-video", imageClassName)}
+                        />
+                    </div>
+                )}
+            </div>
+        </section>
+    );
+};
+
+export default HeroLogoBillboard;
\ No newline at end of file
diff --git a/src/components/sections/hero/HeroOverlay.tsx b/src/components/sections/hero/HeroOverlay.tsx
new file mode 100644
index 0000000..57f5c16
--- /dev/null
+++ b/src/components/sections/hero/HeroOverlay.tsx
@@ -0,0 +1,154 @@
+"use client";
+
+import TextBox from "@/components/Textbox";
+import MediaContent from "@/components/shared/MediaContent";
+import { cls } from "@/lib/utils";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, ButtonAnimationType } from "@/types/button";
+import type { Avatar } from "@/components/shared/AvatarGroup";
+
+const RADIAL_MASK_GRADIENT = "radial-gradient(circle, black 20%, transparent 70%)";
+
+interface HeroOverlayProps {
+  title: string;
+  description: string;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  tagAnimation?: ButtonAnimationType;
+  buttons?: ButtonConfig[];
+  buttonAnimation?: ButtonAnimationType;
+  avatars?: Avatar[];
+  avatarText?: string;
+  imageSrc?: string;
+  videoSrc?: string;
+  imageAlt?: string;
+  videoAriaLabel?: string;
+  showDimOverlay?: boolean;
+  showBlur?: boolean;
+  textPosition?: "top" | "bottom";
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  textBoxClassName?: string;
+  titleClassName?: string;
+  descriptionClassName?: string;
+  tagClassName?: string;
+  buttonContainerClassName?: string;
+  buttonClassName?: string;
+  buttonTextClassName?: string;
+  avatarGroupClassName?: string;
+  mediaWrapperClassName?: string;
+  imageClassName?: string;
+  blurClassName?: string;
+  dimOverlayClassName?: string;
+}
+
+const HeroOverlay = ({
+  title,
+  description,
+  tag,
+  tagIcon,
+  tagAnimation = "opacity",
+  buttons = [],
+  buttonAnimation = "slide-up",
+  avatars,
+  avatarText,
+  imageSrc,
+  videoSrc,
+  imageAlt = "",
+  videoAriaLabel = "Hero video",
+  showDimOverlay = false,
+  showBlur = true,
+  textPosition = "bottom",
+  ariaLabel = "Hero section",
+  className = "",
+  containerClassName = "",
+  textBoxClassName = "",
+  titleClassName = "",
+  descriptionClassName = "",
+  tagClassName = "",
+  buttonContainerClassName = "",
+  buttonClassName = "",
+  buttonTextClassName = "",
+  avatarGroupClassName = "",
+  mediaWrapperClassName = "",
+  imageClassName = "",
+  blurClassName = "",
+  dimOverlayClassName = "",
+}: HeroOverlayProps) => {
+  return (
+    <section
+      aria-label={ariaLabel}
+      className={cls(
+        "relative w-full h-svh overflow-hidden flex flex-col",
+        textPosition === "top" ? "justify-start" : "justify-end",
+        className
+      )}
+    >
+      <div className={cls("absolute inset-0 w-full h-full", mediaWrapperClassName)}>
+        {showDimOverlay && (
+          <div className={cls("absolute top-0 left-0 w-full h-full bg-background/20 pointer-events-none select-none", dimOverlayClassName)} />
+        )}
+        <MediaContent
+          imageSrc={imageSrc}
+          videoSrc={videoSrc}
+          imageAlt={imageAlt}
+          videoAriaLabel={videoAriaLabel}
+          imageClassName={cls("w-full h-full object-cover !rounded-none", imageClassName)}
+        />
+      </div>
+
+      {showBlur && (
+        <div
+          className={cls(
+            "absolute z-10 backdrop-blur-sm opacity-100 pointer-events-auto select-none w-[150vw] h-[150vw] left-0 -translate-x-1/2",
+            textPosition === "top" ? "top-0 -translate-y-1/2" : "bottom-0 translate-y-1/2",
+            blurClassName
+          )}
+          style={{ maskImage: RADIAL_MASK_GRADIENT }}
+          aria-hidden="true"
+        />
+      )}
+
+      <div className={cls(
+        "relative z-10 w-content-width mx-auto h-fit flex",
+        textPosition === "top" ? "items-start pt-hero-page-padding" : "items-end pb-[var(--width-10)] md:pb-hero-page-padding",
+        containerClassName
+      )}>
+        <TextBox
+          title={title}
+          description={description}
+          tag={tag}
+          tagIcon={tagIcon}
+          tagAnimation={tagAnimation}
+          buttons={buttons}
+          buttonAnimation={buttonAnimation}
+          avatars={avatars}
+          avatarText={avatarText}
+          avatarGroupClassName={avatarGroupClassName}
+          className={cls(
+            "flex flex-col gap-3 md:gap-3 text-background w-full md:w-1/2",
+            textBoxClassName
+          )}
+          titleClassName={cls(
+            "text-7xl 2xl:text-8xl font-medium text-balance text-left",
+            titleClassName
+          )}
+          descriptionClassName={cls(
+            "text-lg md:text-xl leading-[1.2] text-left",
+            descriptionClassName
+          )}
+          tagClassName={cls(
+            "w-fit px-3 py-1 text-sm rounded-theme card text-foreground inline-flex items-center gap-2 mb-3",
+            tagClassName
+          )}
+          buttonContainerClassName={cls("flex flex-wrap gap-4 max-md:justify-center mt-4", buttonContainerClassName)}
+          buttonClassName={cls("", buttonClassName)}
+          buttonTextClassName={cls("text-base", buttonTextClassName)}
+        />
+      </div>
+    </section>
+  );
+};
+
+export default HeroOverlay;
diff --git a/src/components/sections/hero/HeroOverlayTestimonial.tsx b/src/components/sections/hero/HeroOverlayTestimonial.tsx
new file mode 100644
index 0000000..6f798c6
--- /dev/null
+++ b/src/components/sections/hero/HeroOverlayTestimonial.tsx
@@ -0,0 +1,247 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import TextBox from "@/components/Textbox";
+import MediaContent from "@/components/shared/MediaContent";
+import TestimonialAuthor from "@/components/shared/TestimonialAuthor";
+import AnimationContainer from "@/components/sections/AnimationContainer";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import { Star } from "lucide-react";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, ButtonAnimationType } from "@/types/button";
+import type { Avatar } from "@/components/shared/AvatarGroup";
+
+const RADIAL_MASK_GRADIENT = "radial-gradient(circle, black 20%, transparent 70%)";
+
+type Testimonial = {
+  name: string;
+  handle: string;
+  testimonial: string;
+  rating: number;
+  imageSrc?: string;
+  imageAlt?: string;
+};
+
+interface HeroOverlayTestimonialProps {
+  title: string;
+  description: string;
+  testimonials: Testimonial[];
+  testimonialRotationInterval?: number;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  tagAnimation?: ButtonAnimationType;
+  buttons?: ButtonConfig[];
+  buttonAnimation?: ButtonAnimationType;
+  avatars?: Avatar[];
+  avatarText?: string;
+  imageSrc?: string;
+  videoSrc?: string;
+  imageAlt?: string;
+  videoAriaLabel?: string;
+  showDimOverlay?: boolean;
+  showBlur?: boolean;
+  textPosition?: "top" | "bottom";
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  textBoxClassName?: string;
+  titleClassName?: string;
+  descriptionClassName?: string;
+  tagClassName?: string;
+  buttonContainerClassName?: string;
+  buttonClassName?: string;
+  buttonTextClassName?: string;
+  avatarGroupClassName?: string;
+  mediaWrapperClassName?: string;
+  imageClassName?: string;
+  blurClassName?: string;
+  dimOverlayClassName?: string;
+  testimonialCardClassName?: string;
+  testimonialContentClassName?: string;
+  testimonialTextClassName?: string;
+  testimonialRatingClassName?: string;
+  testimonialAuthorClassName?: string;
+  testimonialAuthorImageClassName?: string;
+  testimonialAuthorNameClassName?: string;
+  testimonialAuthorHandleClassName?: string;
+}
+
+const HeroOverlayTestimonial = ({
+  title,
+  description,
+  testimonials,
+  testimonialRotationInterval = 5000,
+  tag,
+  tagIcon,
+  tagAnimation = "opacity",
+  buttons = [],
+  buttonAnimation = "slide-up",
+  avatars,
+  avatarText,
+  imageSrc,
+  videoSrc,
+  imageAlt = "",
+  videoAriaLabel = "Hero video",
+  showDimOverlay = false,
+  showBlur = true,
+  textPosition = "bottom",
+  ariaLabel = "Hero section",
+  className = "",
+  containerClassName = "",
+  textBoxClassName = "",
+  titleClassName = "",
+  descriptionClassName = "",
+  tagClassName = "",
+  buttonContainerClassName = "",
+  buttonClassName = "",
+  buttonTextClassName = "",
+  avatarGroupClassName = "",
+  mediaWrapperClassName = "",
+  imageClassName = "",
+  blurClassName = "",
+  dimOverlayClassName = "",
+  testimonialCardClassName = "",
+  testimonialContentClassName = "",
+  testimonialTextClassName = "",
+  testimonialRatingClassName = "",
+  testimonialAuthorClassName = "",
+  testimonialAuthorImageClassName = "",
+  testimonialAuthorNameClassName = "",
+  testimonialAuthorHandleClassName = "",
+}: HeroOverlayTestimonialProps) => {
+  const theme = useTheme();
+  const shouldUseLightText = shouldUseInvertedText(false, theme.cardStyle);
+
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [animationKey, setAnimationKey] = useState(0);
+
+  useEffect(() => {
+    if (!testimonialRotationInterval || testimonials.length <= 1) return;
+
+    const interval = setInterval(() => {
+      setCurrentIndex((prev) => (prev + 1) % testimonials.length);
+      setAnimationKey((prev) => prev + 1);
+    }, testimonialRotationInterval);
+
+    return () => clearInterval(interval);
+  }, [testimonialRotationInterval, testimonials.length]);
+
+  const currentTestimonial = testimonials[currentIndex];
+
+  return (
+    <section
+      aria-label={ariaLabel}
+      className={cls(
+        "relative w-full h-svh overflow-hidden flex flex-col",
+        textPosition === "top" ? "justify-start" : "justify-end",
+        className
+      )}
+    >
+      <div className={cls("absolute inset-0 w-full h-full", mediaWrapperClassName)}>
+        {showDimOverlay && (
+          <div className={cls("absolute top-0 left-0 w-full h-full bg-background/20 pointer-events-none select-none z-1", dimOverlayClassName)} />
+        )}
+        <MediaContent
+          imageSrc={imageSrc}
+          videoSrc={videoSrc}
+          imageAlt={imageAlt}
+          videoAriaLabel={videoAriaLabel}
+          imageClassName={cls("w-full h-full object-cover !rounded-none", imageClassName)}
+        />
+      </div>
+
+      {showBlur && (
+        <div
+          className={cls(
+            "absolute z-10 backdrop-blur-sm opacity-100 pointer-events-auto select-none w-[150vw] h-[150vw] left-0 -translate-x-1/2",
+            textPosition === "top" ? "top-0 -translate-y-1/2" : "bottom-0 translate-y-1/2",
+            blurClassName
+          )}
+          style={{ maskImage: RADIAL_MASK_GRADIENT }}
+          aria-hidden="true"
+        />
+      )}
+
+      <div className={cls(
+        "relative z-10 w-content-width mx-auto h-fit flex",
+        textPosition === "top" ? "items-start pt-hero-page-padding-1_5" : "items-end pb-[var(--width-10)] md:pb-hero-page-padding",
+        containerClassName
+      )}>
+        <TextBox
+          title={title}
+          description={description}
+          tag={tag}
+          tagIcon={tagIcon}
+          tagAnimation={tagAnimation}
+          buttons={buttons}
+          buttonAnimation={buttonAnimation}
+          avatars={avatars}
+          avatarText={avatarText}
+          avatarGroupClassName={avatarGroupClassName}
+          className={cls(
+            "flex flex-col gap-3 md:gap-3 text-background w-full md:w-1/2",
+            textBoxClassName
+          )}
+          titleClassName={cls(
+            "text-7xl 2xl:text-8xl font-medium text-balance text-left",
+            titleClassName
+          )}
+          descriptionClassName={cls(
+            "text-lg md:text-xl leading-tight text-left text-balance",
+            descriptionClassName
+          )}
+          tagClassName={cls(
+            "w-fit px-3 py-1 text-sm rounded-theme card text-foreground inline-flex items-center gap-2 mb-3",
+            tagClassName
+          )}
+          buttonContainerClassName={cls("flex flex-wrap gap-4 mt-4 max-md:justify-start", buttonContainerClassName)}
+          buttonClassName={cls("", buttonClassName)}
+          buttonTextClassName={cls("text-base", buttonTextClassName)}
+        />
+      </div>
+
+      {currentTestimonial && (
+        <div className={cls(
+          "flex absolute! z-10 bottom-4 left-4 right-4 md:left-auto md:bottom-8 md:right-8 md:max-w-3/10 2xl:max-w-25/100 card rounded-theme-capped p-4 md:p-6 flex-col justify-between gap-4 md:gap-5",
+          testimonialCardClassName
+        )}>
+          <AnimationContainer key={animationKey} className="flex flex-col gap-5">
+            <div className={cls("flex flex-col gap-5 items-start", testimonialContentClassName)}>
+              <div className={cls("relative z-1 flex gap-1", testimonialRatingClassName)}>
+                {Array.from({ length: 5 }).map((_, index) => (
+                  <Star
+                    key={index}
+                    className={cls(
+                      "h-5 w-auto text-accent",
+                      index < currentTestimonial.rating ? "fill-accent" : "fill-transparent"
+                    )}
+                    strokeWidth={1.5}
+                  />
+                ))}
+              </div>
+
+              <p className={cls("relative z-1 text-lg leading-tight", shouldUseLightText ? "text-background" : "text-foreground", testimonialTextClassName)}>
+                {currentTestimonial.testimonial}
+              </p>
+            </div>
+
+            <TestimonialAuthor
+              name={currentTestimonial.name}
+              subtitle={currentTestimonial.handle}
+              imageSrc={currentTestimonial.imageSrc}
+              imageAlt={currentTestimonial.imageAlt}
+              useInvertedBackground={false}
+              className={testimonialAuthorClassName}
+              imageClassName={testimonialAuthorImageClassName}
+              nameClassName={testimonialAuthorNameClassName}
+              subtitleClassName={testimonialAuthorHandleClassName}
+            />
+          </AnimationContainer>
+        </div>
+      )}
+    </section>
+  );
+};
+
+export default HeroOverlayTestimonial;
diff --git a/src/components/sections/hero/HeroPersonalLinks.tsx b/src/components/sections/hero/HeroPersonalLinks.tsx
new file mode 100644
index 0000000..aac0cbe
--- /dev/null
+++ b/src/components/sections/hero/HeroPersonalLinks.tsx
@@ -0,0 +1,198 @@
+"use client";
+
+import Textbox from "@/components/Textbox";
+import Button from "@/components/button/Button";
+import MediaContent from "@/components/shared/MediaContent";
+import HeroBackgrounds, { type HeroBackgroundVariantProps } from "@/components/background/HeroBackgrounds";
+import { cls } from "@/lib/utils";
+import { getButtonProps } from "@/lib/buttonUtils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import { useButtonClick } from "@/components/button/useButtonClick";
+import { useButtonAnimation } from "@/components/hooks/useButtonAnimation";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, ButtonAnimationType } from "@/types/button";
+
+type TitleSegment =
+    | { type: "text"; content: string }
+    | { type: "image"; src: string; alt?: string };
+
+type HeroPersonalLinksBackgroundProps = Extract<
+    HeroBackgroundVariantProps,
+    | { variant: "plain" }
+    | { variant: "animated-grid" }
+    | { variant: "canvas-reveal" }
+    | { variant: "cell-wave" }
+    | { variant: "downward-rays-animated" }
+    | { variant: "downward-rays-animated-grid" }
+    | { variant: "downward-rays-static" }
+    | { variant: "downward-rays-static-grid" }
+    | { variant: "gradient-bars" }
+    | { variant: "radial-gradient" }
+    | { variant: "rotated-rays-animated" }
+    | { variant: "rotated-rays-animated-grid" }
+    | { variant: "rotated-rays-static" }
+    | { variant: "rotated-rays-static-grid" }
+    | { variant: "sparkles-gradient" }
+>;
+
+interface SocialLink {
+    icon: LucideIcon;
+    label: string;
+    href: string;
+}
+
+interface LinkCard {
+    icon?: LucideIcon;
+    imageSrc?: string;
+    videoSrc?: string;
+    imageAlt?: string;
+    videoAriaLabel?: string;
+    imageClassName?: string;
+    title: string;
+    description: string;
+    button: ButtonConfig;
+}
+
+interface HeroPersonalLinksProps {
+    background: HeroPersonalLinksBackgroundProps;
+    title: string;
+    titleSegments?: TitleSegment[];
+    socialLinks?: SocialLink[];
+    linkCards: LinkCard[];
+    buttonAnimation?: ButtonAnimationType;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    textboxClassName?: string;
+    titleClassName?: string;
+    titleImageWrapperClassName?: string;
+    titleImageClassName?: string;
+    socialLinksClassName?: string;
+    socialLinkClassName?: string;
+    linkCardsClassName?: string;
+    linkCardClassName?: string;
+    linkCardIconClassName?: string;
+    linkCardTitleClassName?: string;
+    linkCardDescriptionClassName?: string;
+    buttonClassName?: string;
+    buttonTextClassName?: string;
+}
+
+const SocialLinkButton = ({ social, className }: { social: SocialLink; className?: string }) => {
+    const handleClick = useButtonClick(social.href);
+    const Icon = social.icon;
+
+    return (
+        <button
+            type="button"
+            onClick={handleClick}
+            className={cls(
+                "flex items-center gap-2 px-4 py-2 rounded-theme card text-sm text-foreground hover:opacity-80 transition-opacity duration-300 ease-out cursor-pointer",
+                className
+            )}
+        >
+            <Icon className="h-[1em] w-auto aspect-square" />
+            <span>{social.label}</span>
+        </button>
+    );
+};
+
+const HeroPersonalLinks = ({
+    background = { variant: "plain" },
+    title,
+    titleSegments,
+    socialLinks,
+    linkCards,
+    buttonAnimation = "none",
+    ariaLabel = "Personal links section",
+    className = "",
+    containerClassName = "",
+    textboxClassName = "",
+    titleClassName = "",
+    titleImageWrapperClassName = "",
+    titleImageClassName = "",
+    socialLinksClassName = "",
+    socialLinkClassName = "",
+    linkCardsClassName = "",
+    linkCardClassName = "",
+    linkCardIconClassName = "",
+    linkCardTitleClassName = "",
+    linkCardDescriptionClassName = "",
+    buttonClassName = "",
+    buttonTextClassName = "",
+}: HeroPersonalLinksProps) => {
+    const theme = useTheme();
+    const { containerRef: buttonContainerRef } = useButtonAnimation({ animationType: buttonAnimation });
+
+    return (
+        <section
+            aria-label={ariaLabel}
+            className={cls("relative w-full min-h-screen flex items-center justify-center py-20", className)}
+        >
+            <HeroBackgrounds {...background} />
+            <div className={cls("w-content-width md:w-35 mx-auto flex flex-col items-center gap-8 relative z-10", containerClassName)}>
+                <Textbox
+                    title={title}
+                    titleSegments={titleSegments}
+                    description=""
+                    textboxLayout="inline-image"
+                    center
+                    className={textboxClassName}
+                    titleClassName={titleClassName}
+                    titleImageWrapperClassName={titleImageWrapperClassName}
+                    titleImageClassName={titleImageClassName}
+                />
+
+                {socialLinks && socialLinks.length > 0 && (
+                    <div className={cls("flex flex-wrap justify-center gap-3", socialLinksClassName)}>
+                        {socialLinks.map((social) => (
+                            <SocialLinkButton
+                                key={social.label}
+                                social={social}
+                                className={socialLinkClassName}
+                            />
+                        ))}
+                    </div>
+                )}
+
+                <div ref={buttonContainerRef} className={cls("w-full flex flex-col gap-4 mt-4", linkCardsClassName)}>
+                    {linkCards.map((card) => (
+                        <div
+                            key={card.title}
+                            className={cls("w-full card rounded-theme-capped p-5 flex items-center gap-5", linkCardClassName)}
+                        >
+                            <div className={cls("relative h-10 w-auto aspect-square card shadow rounded-theme flex items-center justify-center flex-shrink-0 overflow-hidden", linkCardIconClassName)}>
+                                {card.videoSrc ? (
+                                    <MediaContent
+                                        videoSrc={card.videoSrc}
+                                        videoAriaLabel={card.videoAriaLabel}
+                                        imageClassName={cls("w-full h-full object-cover", card.imageClassName)}
+                                    />
+                                ) : card.imageSrc ? (
+                                    <MediaContent
+                                        imageSrc={card.imageSrc}
+                                        imageAlt={card.imageAlt}
+                                        imageClassName={cls("w-full h-full object-cover", card.imageClassName)}
+                                    />
+                                ) : card.icon ? (
+                                    <card.icon className="h-4/10 w-4/10 text-foreground" strokeWidth={1.5} />
+                                ) : null}
+                            </div>
+
+                            <div className="flex-1 min-w-0">
+                                <h3 className={cls("font-medium text-foreground", linkCardTitleClassName)}>{card.title}</h3>
+                                <p className={cls("text-sm text-foreground/60 truncate", linkCardDescriptionClassName)}>{card.description}</p>
+                            </div>
+
+                            <Button
+                                {...getButtonProps(card.button, 0, theme.defaultButtonVariant, cls("flex-shrink-0", buttonClassName), buttonTextClassName)}
+                            />
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default HeroPersonalLinks;
diff --git a/src/components/sections/hero/HeroSignup.tsx b/src/components/sections/hero/HeroSignup.tsx
new file mode 100644
index 0000000..27ac15e
--- /dev/null
+++ b/src/components/sections/hero/HeroSignup.tsx
@@ -0,0 +1,113 @@
+"use client";
+
+import TextBox from "@/components/Textbox";
+import HeroBackgrounds, { type HeroBackgroundVariantProps } from "@/components/background/HeroBackgrounds";
+import EmailSignupForm from "@/components/form/EmailSignupForm";
+import { cls } from "@/lib/utils";
+import { LucideIcon } from "lucide-react";
+import type { ButtonAnimationType } from "@/types/button";
+
+type HeroSignupBackgroundProps = Extract<
+  HeroBackgroundVariantProps,
+  | { variant: "plain" }
+  | { variant: "animated-grid" }
+  | { variant: "canvas-reveal" }
+  | { variant: "cell-wave" }
+  | { variant: "downward-rays-animated" }
+  | { variant: "downward-rays-animated-grid" }
+  | { variant: "downward-rays-static" }
+  | { variant: "downward-rays-static-grid" }
+  | { variant: "glowing-orb" }
+  | { variant: "glowing-orb-sparkles" }
+  | { variant: "gradient-bars" }
+  | { variant: "radial-gradient" }
+  | { variant: "rotated-rays-animated" }
+  | { variant: "rotated-rays-animated-grid" }
+  | { variant: "rotated-rays-static" }
+  | { variant: "rotated-rays-static-grid" }
+  | { variant: "sparkles-gradient" }
+>;
+
+interface HeroSignupProps {
+  title: string;
+  description: string;
+  background: HeroSignupBackgroundProps;
+  tag: string;
+  tagIcon?: LucideIcon;
+  tagAnimation?: ButtonAnimationType;
+  inputPlaceholder?: string;
+  buttonText?: string;
+  onSubmit?: (email: string) => void;
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  textBoxClassName?: string;
+  titleClassName?: string;
+  descriptionClassName?: string;
+  tagClassName?: string;
+  formWrapperClassName?: string;
+  formClassName?: string;
+  inputClassName?: string;
+  buttonClassName?: string;
+  buttonTextClassName?: string;
+}
+
+const HeroSignup = ({
+  title,
+  description,
+  background = { variant: "plain" },
+  tag,
+  tagIcon,
+  tagAnimation = "opacity",
+  inputPlaceholder = "Enter your email",
+  buttonText = "Get Started",
+  onSubmit,
+  ariaLabel = "Hero section",
+  className = "",
+  containerClassName = "",
+  textBoxClassName = "",
+  titleClassName = "",
+  descriptionClassName = "",
+  tagClassName = "",
+  formWrapperClassName = "",
+  formClassName = "",
+  inputClassName = "",
+  buttonClassName = "",
+  buttonTextClassName = "",
+}: HeroSignupProps) => {
+  return (
+    <section
+      aria-label={ariaLabel}
+      className={cls("relative w-full h-svh md:h-screen flex items-center justify-center", className)}
+    >
+      <HeroBackgrounds {...background} />
+      <div className={cls("w-content-width mx-auto relative z-10", containerClassName)}>
+        <TextBox
+          title={title}
+          description={description}
+          tag={tag}
+          tagIcon={tagIcon}
+          tagAnimation={tagAnimation}
+          className={cls("md:max-w-6/10 xl:max-w-45/100 mx-auto flex flex-col gap-3 md:gap-6", textBoxClassName)}
+          titleClassName={cls("text-7xl font-medium text-balance", titleClassName)}
+          descriptionClassName={cls("text-lg md:text-xl leading-tight text-balance", descriptionClassName)}
+          tagClassName={cls("mb-0", tagClassName)}
+          center={true}
+        />
+        <div className={cls("md:max-w-6/10 xl:max-w-45/100 mx-auto mt-6", formWrapperClassName)}>
+          <EmailSignupForm
+            inputPlaceholder={inputPlaceholder}
+            buttonText={buttonText}
+            onSubmit={onSubmit}
+            className={cls("w-full mx-auto", formClassName)}
+            inputClassName={inputClassName}
+            buttonClassName={buttonClassName}
+            buttonTextClassName={buttonTextClassName}
+          />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default HeroSignup;
diff --git a/src/components/sections/hero/HeroSplit.tsx b/src/components/sections/hero/HeroSplit.tsx
new file mode 100644
index 0000000..4bbdc5e
--- /dev/null
+++ b/src/components/sections/hero/HeroSplit.tsx
@@ -0,0 +1,208 @@
+"use client";
+
+import TextBox from "@/components/Textbox";
+import MediaContent from "@/components/shared/MediaContent";
+import HeroBackgrounds, { type HeroBackgroundVariantProps } from "@/components/background/HeroBackgrounds";
+import LogoMarquee, { type MarqueeItem } from "@/components/shared/LogoMarquee";
+import { cls } from "@/lib/utils";
+import { useButtonAnimation } from "@/components/hooks/useButtonAnimation";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, ButtonAnimationType } from "@/types/button";
+import type { Avatar } from "@/components/shared/AvatarGroup";
+
+type HeroSplitBackgroundProps = Extract<
+  HeroBackgroundVariantProps,
+  | { variant: "plain" }
+  | { variant: "animated-grid" }
+  | { variant: "canvas-reveal" }
+  | { variant: "cell-wave" }
+  | { variant: "downward-rays-animated" }
+  | { variant: "downward-rays-animated-grid" }
+  | { variant: "downward-rays-static" }
+  | { variant: "downward-rays-static-grid" }
+  | { variant: "glowing-orb" }
+  | { variant: "gradient-bars" }
+  | { variant: "radial-gradient" }
+  | { variant: "rotated-rays-animated" }
+  | { variant: "rotated-rays-animated-grid" }
+  | { variant: "rotated-rays-static" }
+  | { variant: "rotated-rays-static-grid" }
+  | { variant: "sparkles-gradient" }
+>;
+
+interface HeroSplitProps {
+  title: string;
+  description: string;
+  background: HeroSplitBackgroundProps;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  tagAnimation?: ButtonAnimationType;
+  buttons?: ButtonConfig[];
+  buttonAnimation?: ButtonAnimationType;
+  avatars?: Avatar[];
+  mediaAnimation?: ButtonAnimationType;
+  avatarText?: string;
+  imageSrc?: string;
+  videoSrc?: string;
+  imageAlt?: string;
+  videoAriaLabel?: string;
+  ariaLabel?: string;
+  imagePosition?: "left" | "right";
+  fixedMediaHeight?: boolean;
+  className?: string;
+  containerClassName?: string;
+  textBoxClassName?: string;
+  titleClassName?: string;
+  descriptionClassName?: string;
+  tagClassName?: string;
+  buttonContainerClassName?: string;
+  buttonClassName?: string;
+  buttonTextClassName?: string;
+  mediaWrapperClassName?: string;
+  imageClassName?: string;
+  avatarGroupClassName?: string;
+  marqueeItems?: MarqueeItem[];
+  marqueeSpeed?: number;
+  showMarqueeCard?: boolean;
+  marqueeClassName?: string;
+  marqueeItemClassName?: string;
+  marqueeCardClassName?: string;
+  marqueeImageClassName?: string;
+  marqueeTextClassName?: string;
+  marqueeIconClassName?: string;
+}
+
+const HeroSplit = ({
+  title,
+  description,
+  background = { variant: "plain" },
+  tag,
+  tagIcon,
+  tagAnimation = "opacity",
+  buttons = [],
+  buttonAnimation = "slide-up",
+  avatars,
+  mediaAnimation = "none",
+  avatarText,
+  imageSrc,
+  videoSrc,
+  imageAlt = "",
+  videoAriaLabel = "Hero video",
+  ariaLabel = "Hero section",
+  imagePosition = "right",
+  fixedMediaHeight = true,
+  className = "",
+  containerClassName = "",
+  textBoxClassName = "",
+  titleClassName = "",
+  descriptionClassName = "",
+  tagClassName = "",
+  buttonContainerClassName = "",
+  buttonClassName = "",
+  buttonTextClassName = "",
+  mediaWrapperClassName = "",
+  imageClassName = "",
+  avatarGroupClassName = "",
+  marqueeItems,
+  marqueeSpeed = 30,
+  showMarqueeCard = true,
+  marqueeClassName = "",
+  marqueeItemClassName = "",
+  marqueeCardClassName = "",
+  marqueeImageClassName = "",
+  marqueeTextClassName = "",
+  marqueeIconClassName = "",
+}: HeroSplitProps) => {
+  const { containerRef: mediaContainerRef } = useButtonAnimation({ animationType: mediaAnimation });
+
+  const mediaContent = (
+    <div ref={mediaContainerRef} className={cls(
+      "w-full h-fit md:w-1/2 overflow-hidden rounded-theme-capped card p-4 md:max-h-[75svh]",
+      fixedMediaHeight && "h-100 md:h-[65vh]",
+      mediaWrapperClassName
+    )}>
+      <MediaContent
+        imageSrc={imageSrc}
+        videoSrc={videoSrc}
+        imageAlt={imageAlt}
+        videoAriaLabel={videoAriaLabel}
+        imageClassName={cls("h-full min-h-0", imageClassName)}
+      />
+    </div>
+  );
+
+  return (
+    <section
+      aria-label={ariaLabel}
+      className={cls("relative w-full h-fit py-hero-page-padding md:py-0 md:h-svh flex items-center", className)}
+    >
+      <HeroBackgrounds {...background} />
+      <div className={cls("w-content-width mx-auto flex flex-col md:flex-row gap-13 md:gap-15 items-center relative z-10", containerClassName)}>
+        {imagePosition === "left" && mediaContent}
+
+        <div className={cls("w-full md:w-1/2")}>
+          {/* Mobile */}
+          <TextBox
+            title={title}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            tagAnimation={tagAnimation}
+            buttons={buttons}
+            buttonAnimation={buttonAnimation}
+            avatars={avatars}
+            avatarText={avatarText}
+            avatarGroupClassName={cls("!mt-5", avatarGroupClassName)}
+            className={cls("flex flex-col gap-3 md:hidden", textBoxClassName)}
+            titleClassName={cls("text-7xl 2xl:text-8xl font-medium text-center md:text-left text-balance", titleClassName)}
+            descriptionClassName={cls("max-w-8/10 text-lg md:text-xl leading-[1.2] text-center md:text-left", descriptionClassName)}
+            tagClassName={cls("w-fit px-3 py-1 text-sm rounded-theme card text-foreground inline-flex items-center gap-2 mb-3", tagClassName)}
+            buttonContainerClassName={cls("flex flex-wrap gap-4 max-md:justify-center mt-2", buttonContainerClassName)}
+            buttonClassName={cls("", buttonClassName)}
+            buttonTextClassName={cls("text-base", buttonTextClassName)}
+            center={true}
+          />
+          {/* Desktop */}
+          <TextBox
+            title={title}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            tagAnimation={tagAnimation}
+            buttons={buttons}
+            buttonAnimation={buttonAnimation}
+            avatars={avatars}
+            avatarText={avatarText}
+            avatarGroupClassName={cls("", avatarGroupClassName)}
+            className={cls("hidden md:flex flex-col gap-3 md:gap-4", textBoxClassName)}
+            titleClassName={cls("text-7xl 2xl:text-8xl font-medium text-center md:text-left text-balance", titleClassName)}
+            descriptionClassName={cls("max-w-8/10 text-lg md:text-xl leading-tight text-center md:text-left", descriptionClassName)}
+            tagClassName={cls("w-fit px-3 py-1 text-sm rounded-theme card text-foreground inline-flex items-center gap-2 mb-3", tagClassName)}
+            buttonContainerClassName={cls("flex flex-wrap gap-4 max-md:justify-center mt-2", buttonContainerClassName)}
+            buttonClassName={cls("", buttonClassName)}
+            buttonTextClassName={cls("text-base", buttonTextClassName)}
+            center={false}
+          />
+        </div>
+
+        {imagePosition === "right" && mediaContent}
+      </div>
+
+      {marqueeItems && marqueeItems.length > 0 && (
+        <LogoMarquee
+          items={marqueeItems}
+          speed={marqueeSpeed}
+          showCard={showMarqueeCard}
+          className={cls("absolute bottom-6 left-1/2 -translate-x-1/2 w-content-width z-10", marqueeClassName)}
+          itemClassName={marqueeItemClassName}
+          cardClassName={marqueeCardClassName}
+          imageClassName={marqueeImageClassName}
+          textClassName={marqueeTextClassName}
+          iconClassName={marqueeIconClassName}
+        />
+      )}
+    </section>
+  );
+};
+
+export default HeroSplit;
diff --git a/src/components/sections/hero/HeroSplitDoubleCarousel.tsx b/src/components/sections/hero/HeroSplitDoubleCarousel.tsx
new file mode 100644
index 0000000..931f64d
--- /dev/null
+++ b/src/components/sections/hero/HeroSplitDoubleCarousel.tsx
@@ -0,0 +1,234 @@
+"use client";
+
+import TextBox from "@/components/Textbox";
+import MediaContent from "@/components/shared/MediaContent";
+import HeroBackgrounds, { type HeroBackgroundVariantProps } from "@/components/background/HeroBackgrounds";
+import LogoMarquee, { type MarqueeItem } from "@/components/shared/LogoMarquee";
+import { cls } from "@/lib/utils";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, ButtonAnimationType } from "@/types/button";
+import type { Avatar } from "@/components/shared/AvatarGroup";
+
+export interface CarouselMediaItem {
+  imageSrc?: string;
+  videoSrc?: string;
+  imageAlt?: string;
+  videoAriaLabel?: string;
+}
+
+type HeroSplitDoubleCarouselBackgroundProps = Extract<
+  HeroBackgroundVariantProps,
+  | { variant: "plain" }
+  | { variant: "animated-grid" }
+  | { variant: "canvas-reveal" }
+  | { variant: "cell-wave" }
+  | { variant: "downward-rays-animated" }
+  | { variant: "downward-rays-animated-grid" }
+  | { variant: "downward-rays-static" }
+  | { variant: "downward-rays-static-grid" }
+  | { variant: "glowing-orb" }
+  | { variant: "gradient-bars" }
+  | { variant: "radial-gradient" }
+  | { variant: "rotated-rays-animated" }
+  | { variant: "rotated-rays-animated-grid" }
+  | { variant: "rotated-rays-static" }
+  | { variant: "rotated-rays-static-grid" }
+  | { variant: "sparkles-gradient" }
+>;
+
+interface HeroSplitDoubleCarouselProps {
+  title: string;
+  description: string;
+  background: HeroSplitDoubleCarouselBackgroundProps;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  tagAnimation?: ButtonAnimationType;
+  buttons?: ButtonConfig[];
+  buttonAnimation?: ButtonAnimationType;
+  avatars?: Avatar[];
+  avatarText?: string;
+  leftCarouselItems: CarouselMediaItem[];
+  rightCarouselItems: CarouselMediaItem[];
+  ariaLabel?: string;
+  carouselPosition?: "left" | "right";
+  className?: string;
+  containerClassName?: string;
+  textBoxClassName?: string;
+  titleClassName?: string;
+  descriptionClassName?: string;
+  tagClassName?: string;
+  buttonContainerClassName?: string;
+  buttonClassName?: string;
+  buttonTextClassName?: string;
+  carouselWrapperClassName?: string;
+  carouselColumnClassName?: string;
+  carouselItemClassName?: string;
+  carouselImageClassName?: string;
+  avatarGroupClassName?: string;
+  marqueeItems?: MarqueeItem[];
+  marqueeSpeed?: number;
+  showMarqueeCard?: boolean;
+  marqueeClassName?: string;
+  marqueeItemClassName?: string;
+  marqueeCardClassName?: string;
+  marqueeImageClassName?: string;
+  marqueeTextClassName?: string;
+  marqueeIconClassName?: string;
+}
+
+const HeroSplitDoubleCarousel = ({
+  title,
+  description,
+  background = { variant: "plain" },
+  tag,
+  tagIcon,
+  tagAnimation = "opacity",
+  buttons = [],
+  buttonAnimation = "slide-up",
+  avatars,
+  avatarText,
+  leftCarouselItems,
+  rightCarouselItems,
+  ariaLabel = "Hero section",
+  carouselPosition = "right",
+  className = "",
+  containerClassName = "",
+  textBoxClassName = "",
+  titleClassName = "",
+  descriptionClassName = "",
+  tagClassName = "",
+  buttonContainerClassName = "",
+  buttonClassName = "",
+  buttonTextClassName = "",
+  carouselWrapperClassName = "",
+  carouselColumnClassName = "",
+  carouselItemClassName = "",
+  carouselImageClassName = "",
+  avatarGroupClassName = "",
+  marqueeItems,
+  marqueeSpeed = 30,
+  showMarqueeCard = true,
+  marqueeClassName = "",
+  marqueeItemClassName = "",
+  marqueeCardClassName = "",
+  marqueeImageClassName = "",
+  marqueeTextClassName = "",
+  marqueeIconClassName = "",
+}: HeroSplitDoubleCarouselProps) => {
+  const duplicatedLeftItems = [...leftCarouselItems, ...leftCarouselItems, ...leftCarouselItems, ...leftCarouselItems];
+  const duplicatedRightItems = [...rightCarouselItems, ...rightCarouselItems, ...rightCarouselItems, ...rightCarouselItems];
+
+  const renderColumn = (items: CarouselMediaItem[], direction: "up" | "down") => (
+    <div className={cls("flex-1 h-full min-h-0 overflow-hidden mask-fade-y-medium", carouselColumnClassName)}>
+      <div className={cls("flex flex-col gap-4 px-px", direction === "up" ? "animate-marquee-vertical" : "animate-marquee-vertical-reverse")}>
+        {items.map((item, index) => (
+          <div
+            key={index}
+            className={cls("relative card aspect-square rounded-theme-capped p-1 overflow-hidden flex-shrink-0", carouselItemClassName)}
+          >
+            <div className="h-full w-full rounded-[calc(var(--radius-theme-capped)*0.92)] overflow-hidden">
+              <MediaContent
+                imageSrc={item.imageSrc}
+                videoSrc={item.videoSrc}
+                imageAlt={item.imageAlt || ""}
+                videoAriaLabel={item.videoAriaLabel || "Carousel video"}
+                imageClassName={cls("h-full w-full object-cover rounded-none!", carouselImageClassName)}
+              />
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+
+  const carouselContent = (
+    <div className="w-full md:w-1/2 overflow-hidden h-100 md:h-screen md:py-hero-page-padding" >
+      <div
+        className={cls(
+          "w-full h-full overflow-hidden",
+          carouselWrapperClassName
+        )}
+      >
+        <div className="h-full flex gap-4">
+          {renderColumn(duplicatedLeftItems, "up")}
+          {renderColumn(duplicatedRightItems, "down")}
+        </div>
+      </div>
+    </div>
+  );
+
+  return (
+    <section
+      aria-label={ariaLabel}
+      className={cls("relative w-full h-fit py-hero-page-padding md:py-0 md:h-svh flex items-center", className)}
+    >
+      <HeroBackgrounds {...background} />
+      <div className={cls("w-content-width mx-auto flex flex-col md:flex-row gap-10 md:gap-15 items-center relative z-10", containerClassName)}>
+        {carouselPosition === "left" && carouselContent}
+
+        <div className={cls("w-full md:w-1/2")}>
+          {/* Mobile */}
+          <TextBox
+            title={title}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            tagAnimation={tagAnimation}
+            buttons={buttons}
+            buttonAnimation={buttonAnimation}
+            avatars={avatars}
+            avatarText={avatarText}
+            avatarGroupClassName={cls("!mt-5", avatarGroupClassName)}
+            className={cls("flex flex-col gap-3 md:hidden", textBoxClassName)}
+            titleClassName={cls("text-7xl 2xl:text-8xl font-medium text-center md:text-left text-balance", titleClassName)}
+            descriptionClassName={cls("max-w-8/10 text-lg md:text-xl leading-[1.2] text-center md:text-left", descriptionClassName)}
+            tagClassName={cls("w-fit px-3 py-1 text-sm rounded-theme card text-foreground inline-flex items-center gap-2 mb-3", tagClassName)}
+            buttonContainerClassName={cls("flex flex-wrap gap-4 max-md:justify-center mt-2", buttonContainerClassName)}
+            buttonClassName={cls("", buttonClassName)}
+            buttonTextClassName={cls("text-base", buttonTextClassName)}
+            center={true}
+          />
+          {/* Desktop */}
+          <TextBox
+            title={title}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            tagAnimation={tagAnimation}
+            buttons={buttons}
+            buttonAnimation={buttonAnimation}
+            avatars={avatars}
+            avatarText={avatarText}
+            avatarGroupClassName={cls("", avatarGroupClassName)}
+            className={cls("hidden md:flex flex-col gap-3 md:gap-4", textBoxClassName)}
+            titleClassName={cls("text-7xl 2xl:text-8xl font-medium text-center md:text-left text-balance", titleClassName)}
+            descriptionClassName={cls("max-w-8/10 text-lg md:text-xl leading-tight text-center md:text-left", descriptionClassName)}
+            tagClassName={cls("w-fit px-3 py-1 text-sm rounded-theme card text-foreground inline-flex items-center gap-2 mb-3", tagClassName)}
+            buttonContainerClassName={cls("flex flex-wrap gap-4 max-md:justify-center mt-2", buttonContainerClassName)}
+            buttonClassName={cls("", buttonClassName)}
+            buttonTextClassName={cls("text-base", buttonTextClassName)}
+            center={false}
+          />
+        </div>
+
+        {carouselPosition === "right" && carouselContent}
+      </div>
+
+      {marqueeItems && marqueeItems.length > 0 && (
+        <LogoMarquee
+          items={marqueeItems}
+          speed={marqueeSpeed}
+          showCard={showMarqueeCard}
+          className={cls("absolute bottom-6 left-1/2 -translate-x-1/2 w-content-width z-10", marqueeClassName)}
+          itemClassName={marqueeItemClassName}
+          cardClassName={marqueeCardClassName}
+          imageClassName={marqueeImageClassName}
+          textClassName={marqueeTextClassName}
+          iconClassName={marqueeIconClassName}
+        />
+      )}
+    </section>
+  );
+};
+
+export default HeroSplitDoubleCarousel;
diff --git a/src/components/sections/hero/HeroSplitDualMedia.tsx b/src/components/sections/hero/HeroSplitDualMedia.tsx
new file mode 100644
index 0000000..8618b21
--- /dev/null
+++ b/src/components/sections/hero/HeroSplitDualMedia.tsx
@@ -0,0 +1,191 @@
+"use client";
+
+import TextBox from "@/components/Textbox";
+import MediaContent from "@/components/shared/MediaContent";
+import HeroBackgrounds, { type HeroBackgroundVariantProps } from "@/components/background/HeroBackgrounds";
+import { cls } from "@/lib/utils";
+import { useButtonAnimation } from "@/components/hooks/useButtonAnimation";
+import { Star } from "lucide-react";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, ButtonAnimationType } from "@/types/button";
+
+type HeroSplitDualMediaBackgroundProps = Extract<
+    HeroBackgroundVariantProps,
+    | { variant: "plain" }
+    | { variant: "animated-grid" }
+    | { variant: "canvas-reveal" }
+    | { variant: "cell-wave" }
+    | { variant: "downward-rays-animated" }
+    | { variant: "downward-rays-animated-grid" }
+    | { variant: "downward-rays-static" }
+    | { variant: "downward-rays-static-grid" }
+    | { variant: "glowing-orb" }
+    | { variant: "gradient-bars" }
+    | { variant: "radial-gradient" }
+    | { variant: "rotated-rays-animated" }
+    | { variant: "rotated-rays-animated-grid" }
+    | { variant: "rotated-rays-static" }
+    | { variant: "rotated-rays-static-grid" }
+    | { variant: "sparkles-gradient" }
+>;
+
+interface MediaItem {
+    imageSrc?: string;
+    videoSrc?: string;
+    imageAlt?: string;
+    videoAriaLabel?: string;
+}
+
+interface HeroSplitDualMediaProps {
+    title: string;
+    description: string;
+    background: HeroSplitDualMediaBackgroundProps;
+    tag: string;
+    tagIcon?: LucideIcon;
+    tagAnimation?: ButtonAnimationType;
+    buttons?: ButtonConfig[];
+    buttonAnimation?: ButtonAnimationType;
+    mediaItems: [MediaItem, MediaItem];
+    mediaAnimation?: ButtonAnimationType;
+    rating: number;
+    ratingText: string;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    textBoxClassName?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
+    tagClassName?: string;
+    buttonContainerClassName?: string;
+    buttonClassName?: string;
+    buttonTextClassName?: string;
+    mediaWrapperClassName?: string;
+    mediaItemClassName?: string;
+    imageClassName?: string;
+    ratingClassName?: string;
+    ratingTextClassName?: string;
+}
+
+const HeroSplitDualMedia = ({
+    title,
+    description,
+    background = { variant: "plain" },
+    tag,
+    tagIcon,
+    tagAnimation = "opacity",
+    buttons = [],
+    buttonAnimation = "slide-up",
+    mediaItems,
+    mediaAnimation = "none",
+    rating,
+    ratingText,
+    ariaLabel = "Hero section",
+    className = "",
+    containerClassName = "",
+    textBoxClassName = "",
+    titleClassName = "",
+    descriptionClassName = "",
+    tagClassName = "",
+    buttonContainerClassName = "",
+    buttonClassName = "",
+    buttonTextClassName = "",
+    mediaWrapperClassName = "",
+    mediaItemClassName = "",
+    imageClassName = "",
+    ratingClassName = "",
+    ratingTextClassName = "",
+}: HeroSplitDualMediaProps) => {
+    const { containerRef: mediaContainerRef } = useButtonAnimation({ animationType: mediaAnimation });
+
+    const mediaContent = (
+        <div ref={mediaContainerRef} className={cls("w-full md:w-1/2 grid grid-cols-2 gap-4", mediaWrapperClassName)}>
+            {mediaItems.map((item, index) => (
+                <div
+                    key={index}
+                    className={cls(
+                        "w-full h-100 md:h-[55vh] overflow-hidden rounded-theme-capped card p-3",
+                        mediaItemClassName
+                    )}
+                >
+                    <MediaContent
+                        imageSrc={item.imageSrc}
+                        videoSrc={item.videoSrc}
+                        imageAlt={item.imageAlt}
+                        videoAriaLabel={item.videoAriaLabel}
+                        imageClassName={cls("h-full w-full object-cover", imageClassName)}
+                    />
+                </div>
+            ))}
+        </div>
+    );
+
+    const ratingElement = (
+        <div className={cls("w-full min-w-0 md:w-75/100 flex flex-col gap-6 mt-8", ratingClassName)}>
+            <div className="w-full h-px bg-background-accent" />
+            <div className="w-full min-w-0 flex items-center justify-center md:justify-start gap-3 text-base md:text-xl">
+                <div className="flex items-center gap-1">
+                    {Array.from({ length: rating }).map((_, index) => (
+                        <Star
+                            key={index}
+                            className="h-[1em] w-auto aspect-square text-primary-cta fill-primary-cta"
+                        />
+                    ))}
+                </div>
+                <div className="h-[1em] w-px bg-background-accent" />
+                <p className={cls("text-foreground truncate", ratingTextClassName)}>{ratingText}</p>
+            </div>
+        </div>
+    );
+
+    return (
+        <section
+            aria-label={ariaLabel}
+            className={cls("relative w-full h-fit py-hero-page-padding md:py-0 md:h-svh flex items-center", className)}
+        >
+            <HeroBackgrounds {...background} />
+            <div className={cls("w-content-width mx-auto flex flex-col md:flex-row gap-13 md:gap-15 items-center relative z-10", containerClassName)}>
+                <div className="w-full md:w-1/2">
+                    <TextBox
+                        title={title}
+                        description={description}
+                        tag={tag}
+                        tagIcon={tagIcon}
+                        tagAnimation={tagAnimation}
+                        buttons={buttons}
+                        buttonAnimation={buttonAnimation}
+                        className={cls("flex flex-col gap-3 md:gap-4 md:hidden", textBoxClassName)}
+                        titleClassName={cls("text-7xl 2xl:text-8xl font-medium text-center md:text-left text-balance", titleClassName)}
+                        descriptionClassName={cls("max-w-8/10 text-lg md:text-xl leading-[1.2] text-center md:text-left", descriptionClassName)}
+                        tagClassName={cls("w-fit px-3 py-1 text-sm rounded-theme card text-foreground inline-flex items-center gap-2 mb-3", tagClassName)}
+                        buttonContainerClassName={cls("flex flex-wrap gap-4 max-md:justify-center mt-2", buttonContainerClassName)}
+                        buttonClassName={buttonClassName}
+                        buttonTextClassName={cls("text-base", buttonTextClassName)}
+                        center={true}
+                    />
+                    <TextBox
+                        title={title}
+                        description={description}
+                        tag={tag}
+                        tagIcon={tagIcon}
+                        tagAnimation={tagAnimation}
+                        buttons={buttons}
+                        buttonAnimation={buttonAnimation}
+                        className={cls("hidden md:flex flex-col gap-3 md:gap-4", textBoxClassName)}
+                        titleClassName={cls("text-7xl 2xl:text-8xl font-medium text-center md:text-left text-balance", titleClassName)}
+                        descriptionClassName={cls("max-w-8/10 text-lg md:text-xl leading-[1.2] text-center md:text-left", descriptionClassName)}
+                        tagClassName={cls("w-fit px-3 py-1 text-sm rounded-theme card text-foreground inline-flex items-center gap-2 mb-3", tagClassName)}
+                        buttonContainerClassName={cls("flex flex-wrap gap-4 max-md:justify-center mt-2", buttonContainerClassName)}
+                        buttonClassName={buttonClassName}
+                        buttonTextClassName={cls("text-base", buttonTextClassName)}
+                        center={false}
+                    />
+                    {ratingElement}
+                </div>
+
+                {mediaContent}
+            </div>
+        </section>
+    );
+};
+
+export default HeroSplitDualMedia;
diff --git a/src/components/sections/hero/HeroSplitKpi.tsx b/src/components/sections/hero/HeroSplitKpi.tsx
new file mode 100644
index 0000000..abef1ac
--- /dev/null
+++ b/src/components/sections/hero/HeroSplitKpi.tsx
@@ -0,0 +1,320 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import TextBox from "@/components/Textbox";
+import MediaContent from "@/components/shared/MediaContent";
+import HeroBackgrounds, { type HeroBackgroundVariantProps } from "@/components/background/HeroBackgrounds";
+import LogoMarquee, { type MarqueeItem } from "@/components/shared/LogoMarquee";
+import { cls } from "@/lib/utils";
+import { useButtonAnimation } from "@/components/hooks/useButtonAnimation";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, ButtonAnimationType } from "@/types/button";
+import type { Avatar } from "@/components/shared/AvatarGroup";
+
+const MOBILE_BREAKPOINT = 768;
+
+const useKpiAnimation = (enableAnimation: boolean = true) => {
+    const sectionRef = useRef<HTMLElement>(null);
+    const boxRef1 = useRef<HTMLDivElement>(null);
+    const boxRef2 = useRef<HTMLDivElement>(null);
+    const boxRef3 = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        if (!enableAnimation) return;
+
+        const isMobile = window.innerWidth <= MOBILE_BREAKPOINT;
+        if (isMobile) return;
+
+        let mouseX = 0;
+        let mouseY = 0;
+
+        let box1X = 0, box1Y = 0;
+        let box2X = 0, box2Y = 0;
+        let box3X = 0, box3Y = 0;
+
+        const speed = 0.025;
+
+        const handleMouseMove = (event: MouseEvent): void => {
+            mouseX = (event.clientX / window.innerWidth) * 100 - 50;
+            mouseY = (event.clientY / window.innerHeight) * 100 - 50;
+        };
+
+        const animate = (): void => {
+            // Box 1 movement
+            const distX1 = (mouseX * -0.25) - box1X;
+            const distY1 = (mouseY * -0.25) - box1Y;
+            box1X += distX1 * speed;
+            box1Y += distY1 * speed;
+
+            // Box 2 movement
+            const distX2 = (mouseX * -0.5) - box2X;
+            const distY2 = (mouseY * -0.5) - box2Y;
+            box2X += distX2 * speed;
+            box2Y += distY2 * speed;
+
+            // Box 3 movement
+            const distX3 = (mouseX * 0.25) - box3X;
+            const distY3 = (mouseY * 0.25) - box3Y;
+            box3X += distX3 * speed;
+            box3Y += distY3 * speed;
+
+            // Apply transforms
+            if (boxRef1.current) {
+                boxRef1.current.style.transform = `translate(${box1X}px, ${box1Y}px)`;
+            }
+            if (boxRef2.current) {
+                boxRef2.current.style.transform = `translate(${box2X}px, ${box2Y}px)`;
+            }
+            if (boxRef3.current) {
+                boxRef3.current.style.transform = `translate(${box3X}px, ${box3Y}px)`;
+            }
+
+            requestAnimationFrame(animate);
+        };
+
+        animate();
+        window.addEventListener('mousemove', handleMouseMove);
+
+        return () => {
+            window.removeEventListener('mousemove', handleMouseMove);
+        };
+    }, [enableAnimation]);
+
+    return { sectionRef, boxRef1, boxRef2, boxRef3 };
+};
+
+type HeroSplitKpiBackgroundProps = Extract<
+  HeroBackgroundVariantProps,
+  | { variant: "plain" }
+  | { variant: "animated-grid" }
+  | { variant: "canvas-reveal" }
+  | { variant: "cell-wave" }
+  | { variant: "downward-rays-animated" }
+  | { variant: "downward-rays-animated-grid" }
+  | { variant: "downward-rays-static" }
+  | { variant: "downward-rays-static-grid" }
+  | { variant: "glowing-orb" }
+  | { variant: "gradient-bars" }
+  | { variant: "radial-gradient" }
+  | { variant: "rotated-rays-animated" }
+  | { variant: "rotated-rays-animated-grid" }
+  | { variant: "rotated-rays-static" }
+  | { variant: "rotated-rays-static-grid" }
+  | { variant: "sparkles-gradient" }
+>;
+
+interface KpiItem {
+    value: string;
+    label: string;
+}
+
+interface HeroSplitKpiProps {
+    title: string;
+    description: string;
+    background: HeroSplitKpiBackgroundProps;
+    kpis: [KpiItem, KpiItem, KpiItem];
+    enableKpiAnimation: boolean;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    tagAnimation?: ButtonAnimationType;
+    buttons?: ButtonConfig[];
+    buttonAnimation?: ButtonAnimationType;
+    avatars?: Avatar[];
+    avatarText?: string;
+    mediaAnimation?: ButtonAnimationType;
+    imageSrc?: string;
+    videoSrc?: string;
+    imageAlt?: string;
+    videoAriaLabel?: string;
+    ariaLabel?: string;
+    imagePosition?: "left" | "right";
+    className?: string;
+    containerClassName?: string;
+    textBoxClassName?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
+    tagClassName?: string;
+    buttonContainerClassName?: string;
+    buttonClassName?: string;
+    buttonTextClassName?: string;
+    mediaWrapperClassName?: string;
+    imageClassName?: string;
+    avatarGroupClassName?: string;
+    kpiClassName?: string;
+    kpiValueClassName?: string;
+    kpiLabelClassName?: string;
+    marqueeItems?: MarqueeItem[];
+    marqueeSpeed?: number;
+    showMarqueeCard?: boolean;
+    marqueeClassName?: string;
+    marqueeItemClassName?: string;
+    marqueeCardClassName?: string;
+    marqueeImageClassName?: string;
+    marqueeTextClassName?: string;
+    marqueeIconClassName?: string;
+}
+
+const HeroSplitKpi = ({
+    title,
+    description,
+    background = { variant: "plain" },
+    kpis,
+    enableKpiAnimation,
+    tag,
+    tagIcon,
+    tagAnimation = "opacity",
+    buttons = [],
+    buttonAnimation = "slide-up",
+    avatars,
+    avatarText,
+    mediaAnimation = "none",
+    imageSrc,
+    videoSrc,
+    imageAlt = "",
+    videoAriaLabel = "Hero video",
+    ariaLabel = "Hero section",
+    imagePosition = "right",
+    className = "",
+    containerClassName = "",
+    textBoxClassName = "",
+    titleClassName = "",
+    descriptionClassName = "",
+    tagClassName = "",
+    buttonContainerClassName = "",
+    buttonClassName = "",
+    buttonTextClassName = "",
+    mediaWrapperClassName = "",
+    imageClassName = "",
+    avatarGroupClassName = "",
+    kpiClassName = "",
+    kpiValueClassName = "",
+    kpiLabelClassName = "",
+    marqueeItems,
+    marqueeSpeed = 30,
+    showMarqueeCard = true,
+    marqueeClassName = "",
+    marqueeItemClassName = "",
+    marqueeCardClassName = "",
+    marqueeImageClassName = "",
+    marqueeTextClassName = "",
+    marqueeIconClassName = "",
+}: HeroSplitKpiProps) => {
+    const { sectionRef, boxRef1, boxRef2, boxRef3 } = useKpiAnimation(enableKpiAnimation);
+    const { containerRef: mediaContainerRef } = useButtonAnimation({ animationType: mediaAnimation });
+    const boxRefs = [boxRef1, boxRef2, boxRef3];
+    const mediaContent = (
+        <div
+            className={cls(
+                "relative w-full h-fit md:w-1/2 aspect-square md:aspect-auto md:h-[65vh]",
+                mediaWrapperClassName
+            )}
+        >
+            <div ref={mediaContainerRef} className="relative h-full scale-75 w-full overflow-hidden rounded-theme-capped card p-4">
+                <MediaContent
+                    imageSrc={imageSrc}
+                    videoSrc={videoSrc}
+                    imageAlt={imageAlt}
+                    videoAriaLabel={videoAriaLabel}
+                    imageClassName={cls("h-full min-h-0", imageClassName)}
+                />
+            </div>
+
+            {kpis.map((kpi, index) => (
+                <div
+                    key={index}
+                    ref={boxRefs[index]}
+                    className={cls(
+                        "absolute! card backdrop-blur-xs rounded-theme-capped px-4 py-3 md:px-6 md:py-4 flex flex-col items-center",
+                        index === 0 && "top-[5%] left-[5%] md:top-[0%] md:left-[0%]",
+                        index === 1 && "top-[35%] right-[2.5%] md:top-[35%]",
+                        index === 2 && "bottom-[7.5%] left-[10%] md:left-[7.5%] md:bottom-[0%]",
+                        kpiClassName
+                    )}
+                >
+                    <p className={cls("text-2xl md:text-4xl font-medium text-foreground", kpiValueClassName)}>
+                        {kpi.value}
+                    </p>
+                    <p className={cls("text-sm md:text-base text-foreground/70", kpiLabelClassName)}>
+                        {kpi.label}
+                    </p>
+                </div>
+            ))}
+        </div>
+    );
+
+    return (
+        <section
+            ref={sectionRef}
+            aria-label={ariaLabel}
+            className={cls("relative w-full h-fit py-hero-page-padding md:py-0 md:h-svh flex items-center", className)}
+        >
+            <HeroBackgrounds {...background} />
+            <div className={cls("w-content-width mx-auto flex flex-col md:flex-row gap-13 md:gap-15 items-center relative z-10", containerClassName)}>
+                {imagePosition === "left" && mediaContent}
+
+                <div className={cls("w-full md:w-1/2")}>
+                    {/* Mobile */}
+                    <TextBox
+                        title={title}
+                        description={description}
+                        tag={tag}
+                        tagIcon={tagIcon}
+                        tagAnimation={tagAnimation}
+                        buttons={buttons}
+                        buttonAnimation={buttonAnimation}
+                        avatars={avatars}
+                        avatarText={avatarText}
+                        avatarGroupClassName={cls("!mt-5", avatarGroupClassName)}
+                        className={cls("flex flex-col gap-3 md:hidden", textBoxClassName)}
+                        titleClassName={cls("text-7xl 2xl:text-8xl font-medium text-center md:text-left text-balance", titleClassName)}
+                        descriptionClassName={cls("max-w-8/10 text-lg md:text-xl leading-[1.2] text-center md:text-left", descriptionClassName)}
+                        tagClassName={cls("w-fit px-3 py-1 text-sm rounded-theme card text-foreground inline-flex items-center gap-2 mb-3", tagClassName)}
+                        buttonContainerClassName={cls("flex flex-wrap gap-4 max-md:justify-center mt-2", buttonContainerClassName)}
+                        buttonClassName={cls("", buttonClassName)}
+                        buttonTextClassName={cls("text-base", buttonTextClassName)}
+                        center={true}
+                    />
+                    {/* Desktop */}
+                    <TextBox
+                        title={title}
+                        description={description}
+                        tag={tag}
+                        tagIcon={tagIcon}
+                        tagAnimation={tagAnimation}
+                        buttons={buttons}
+                        buttonAnimation={buttonAnimation}
+                        avatars={avatars}
+                        avatarText={avatarText}
+                        avatarGroupClassName={cls("", avatarGroupClassName)}
+                        className={cls("hidden md:flex flex-col gap-3 md:gap-4", textBoxClassName)}
+                        titleClassName={cls("text-7xl 2xl:text-8xl font-medium text-center md:text-left text-balance", titleClassName)}
+                        descriptionClassName={cls("max-w-8/10 text-lg md:text-xl leading-[1.2] text-center md:text-left", descriptionClassName)}
+                        tagClassName={cls("w-fit px-3 py-1 text-sm rounded-theme card text-foreground inline-flex items-center gap-2 mb-3", tagClassName)}
+                        buttonContainerClassName={cls("flex flex-wrap gap-4 max-md:justify-center mt-2", buttonContainerClassName)}
+                        buttonClassName={cls("", buttonClassName)}
+                        buttonTextClassName={cls("text-base", buttonTextClassName)}
+                        center={false}
+                    />
+                </div>
+
+                {imagePosition === "right" && mediaContent}
+            </div>
+
+            {marqueeItems && marqueeItems.length > 0 && (
+                <LogoMarquee
+                    items={marqueeItems}
+                    speed={marqueeSpeed}
+                    showCard={showMarqueeCard}
+                    className={cls("absolute bottom-6 left-1/2 -translate-x-1/2 w-content-width z-10", marqueeClassName)}
+                    itemClassName={marqueeItemClassName}
+                    cardClassName={marqueeCardClassName}
+                    imageClassName={marqueeImageClassName}
+                    textClassName={marqueeTextClassName}
+                    iconClassName={marqueeIconClassName}
+                />
+            )}
+        </section>
+    );
+};
+
+export default HeroSplitKpi;
\ No newline at end of file
diff --git a/src/components/sections/hero/HeroSplitTestimonial.tsx b/src/components/sections/hero/HeroSplitTestimonial.tsx
new file mode 100644
index 0000000..7294515
--- /dev/null
+++ b/src/components/sections/hero/HeroSplitTestimonial.tsx
@@ -0,0 +1,302 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import TextBox from "@/components/Textbox";
+import MediaContent from "@/components/shared/MediaContent";
+import HeroBackgrounds, { type HeroBackgroundVariantProps } from "@/components/background/HeroBackgrounds";
+import LogoMarquee, { type MarqueeItem } from "@/components/shared/LogoMarquee";
+import TestimonialAuthor from "@/components/shared/TestimonialAuthor";
+import AnimationContainer from "@/components/sections/AnimationContainer";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useButtonAnimation } from "@/components/hooks/useButtonAnimation";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import { Star } from "lucide-react";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, ButtonAnimationType } from "@/types/button";
+import type { Avatar } from "@/components/shared/AvatarGroup";
+
+type Testimonial = {
+  name: string;
+  handle: string;
+  testimonial: string;
+  rating: number;
+  imageSrc?: string;
+  imageAlt?: string;
+};
+
+type HeroSplitTestimonialBackgroundProps = Extract<
+  HeroBackgroundVariantProps,
+  | { variant: "plain" }
+  | { variant: "animated-grid" }
+  | { variant: "canvas-reveal" }
+  | { variant: "cell-wave" }
+  | { variant: "downward-rays-animated" }
+  | { variant: "downward-rays-animated-grid" }
+  | { variant: "downward-rays-static" }
+  | { variant: "downward-rays-static-grid" }
+  | { variant: "glowing-orb" }
+  | { variant: "gradient-bars" }
+  | { variant: "radial-gradient" }
+  | { variant: "rotated-rays-animated" }
+  | { variant: "rotated-rays-animated-grid" }
+  | { variant: "rotated-rays-static" }
+  | { variant: "rotated-rays-static-grid" }
+  | { variant: "sparkles-gradient" }
+>;
+
+interface HeroSplitTestimonialProps {
+  title: string;
+  description: string;
+  background: HeroSplitTestimonialBackgroundProps;
+  testimonials: Testimonial[];
+  testimonialRotationInterval?: number;
+  useInvertedBackground?: boolean;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  tagAnimation?: ButtonAnimationType;
+  buttons?: ButtonConfig[];
+  buttonAnimation?: ButtonAnimationType;
+  avatars?: Avatar[];
+  mediaAnimation?: ButtonAnimationType;
+  avatarText?: string;
+  imageSrc?: string;
+  videoSrc?: string;
+  imageAlt?: string;
+  videoAriaLabel?: string;
+  ariaLabel?: string;
+  imagePosition?: "left" | "right";
+  fixedMediaHeight?: boolean;
+  className?: string;
+  containerClassName?: string;
+  textBoxClassName?: string;
+  titleClassName?: string;
+  descriptionClassName?: string;
+  tagClassName?: string;
+  buttonContainerClassName?: string;
+  buttonClassName?: string;
+  buttonTextClassName?: string;
+  mediaWrapperClassName?: string;
+  imageClassName?: string;
+  avatarGroupClassName?: string;
+  testimonialCardClassName?: string;
+  testimonialContentClassName?: string;
+  testimonialTextClassName?: string;
+  testimonialRatingClassName?: string;
+  testimonialAuthorClassName?: string;
+  testimonialAuthorImageClassName?: string;
+  testimonialAuthorNameClassName?: string;
+  testimonialAuthorHandleClassName?: string;
+  marqueeItems?: MarqueeItem[];
+  marqueeSpeed?: number;
+  showMarqueeCard?: boolean;
+  marqueeClassName?: string;
+  marqueeItemClassName?: string;
+  marqueeCardClassName?: string;
+  marqueeImageClassName?: string;
+  marqueeTextClassName?: string;
+  marqueeIconClassName?: string;
+}
+
+const HeroSplitTestimonial = ({
+  title,
+  description,
+  background = { variant: "plain" },
+  testimonials,
+  testimonialRotationInterval = 5000,
+  useInvertedBackground = false,
+  tag,
+  tagIcon,
+  tagAnimation = "opacity",
+  buttons = [],
+  buttonAnimation = "slide-up",
+  avatars,
+  mediaAnimation = "none",
+  avatarText,
+  imageSrc,
+  videoSrc,
+  imageAlt = "",
+  videoAriaLabel = "Hero video",
+  ariaLabel = "Hero section",
+  imagePosition = "right",
+  fixedMediaHeight = true,
+  className = "",
+  containerClassName = "",
+  textBoxClassName = "",
+  titleClassName = "",
+  descriptionClassName = "",
+  tagClassName = "",
+  buttonContainerClassName = "",
+  buttonClassName = "",
+  buttonTextClassName = "",
+  mediaWrapperClassName = "",
+  imageClassName = "",
+  avatarGroupClassName = "",
+  testimonialCardClassName = "",
+  testimonialContentClassName = "",
+  testimonialTextClassName = "",
+  testimonialRatingClassName = "",
+  testimonialAuthorClassName = "",
+  testimonialAuthorImageClassName = "",
+  testimonialAuthorNameClassName = "",
+  testimonialAuthorHandleClassName = "",
+  marqueeItems,
+  marqueeSpeed = 30,
+  showMarqueeCard = true,
+  marqueeClassName = "",
+  marqueeItemClassName = "",
+  marqueeCardClassName = "",
+  marqueeImageClassName = "",
+  marqueeTextClassName = "",
+  marqueeIconClassName = "",
+}: HeroSplitTestimonialProps) => {
+  const theme = useTheme();
+  const { containerRef: mediaContainerRef } = useButtonAnimation({ animationType: mediaAnimation });
+  const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [animationKey, setAnimationKey] = useState(0);
+
+  useEffect(() => {
+    if (!testimonialRotationInterval || testimonials.length <= 1) return;
+
+    const interval = setInterval(() => {
+      setCurrentIndex((prev) => (prev + 1) % testimonials.length);
+      setAnimationKey((prev) => prev + 1);
+    }, testimonialRotationInterval);
+
+    return () => clearInterval(interval);
+  }, [testimonialRotationInterval, testimonials.length]);
+
+  const currentTestimonial = testimonials[currentIndex];
+
+  const mediaContent = (
+    <div ref={mediaContainerRef} className={cls(
+      "relative w-full h-fit md:w-1/2 overflow-hidden rounded-theme-capped card p-4 md:max-h-[75svh]",
+      fixedMediaHeight && "h-100 md:h-[65vh]",
+      mediaWrapperClassName
+    )}>
+      <MediaContent
+        imageSrc={imageSrc}
+        videoSrc={videoSrc}
+        imageAlt={imageAlt}
+        videoAriaLabel={videoAriaLabel}
+        imageClassName={cls("h-full min-h-0", imageClassName)}
+      />
+
+      {currentTestimonial && (
+        <div className={cls(
+          "absolute! bottom-[calc(var(--spacing-4)+var(--spacing-4))] right-[calc(var(--spacing-4)+var(--spacing-4))] max-md:left-[calc(var(--spacing-4)+var(--spacing-4))] max-w-full md:max-w-5/10 card rounded-theme-capped p-6 flex flex-col justify-between gap-5",
+          testimonialCardClassName
+        )}>
+          <AnimationContainer key={animationKey} className="flex flex-col gap-5">
+            <div className={cls("flex flex-col gap-5 items-start", testimonialContentClassName)}>
+              <div className={cls("relative z-1 flex gap-1", testimonialRatingClassName)}>
+                {Array.from({ length: 5 }).map((_, index) => (
+                  <Star
+                    key={index}
+                    className={cls(
+                      "h-5 w-auto text-accent",
+                      index < currentTestimonial.rating ? "fill-accent" : "fill-transparent"
+                    )}
+                    strokeWidth={1.5}
+                  />
+                ))}
+              </div>
+
+              <p className={cls("relative z-1 text-lg leading-[1.2]", shouldUseLightText ? "text-background" : "text-foreground", testimonialTextClassName)}>
+                {currentTestimonial.testimonial}
+              </p>
+            </div>
+
+            <TestimonialAuthor
+              name={currentTestimonial.name}
+              subtitle={currentTestimonial.handle}
+              imageSrc={currentTestimonial.imageSrc}
+              imageAlt={currentTestimonial.imageAlt}
+              useInvertedBackground={useInvertedBackground}
+              className={testimonialAuthorClassName}
+              imageClassName={testimonialAuthorImageClassName}
+              nameClassName={testimonialAuthorNameClassName}
+              subtitleClassName={testimonialAuthorHandleClassName}
+            />
+          </AnimationContainer>
+        </div>
+      )}
+    </div>
+  );
+
+  return (
+    <section
+      aria-label={ariaLabel}
+      className={cls("relative w-full h-fit py-hero-page-padding md:py-0 md:h-svh flex items-center", className)}
+    >
+      <HeroBackgrounds {...background} />
+      <div className={cls("w-content-width mx-auto flex flex-col md:flex-row gap-13 md:gap-15 items-center relative z-10", containerClassName)}>
+        {imagePosition === "left" && mediaContent}
+
+        <div className={cls("w-full md:w-1/2")}>
+          {/* Mobile */}
+          <TextBox
+            title={title}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            tagAnimation={tagAnimation}
+            buttons={buttons}
+            buttonAnimation={buttonAnimation}
+            avatars={avatars}
+            avatarText={avatarText}
+            avatarGroupClassName={cls("!mt-5", avatarGroupClassName)}
+            className={cls("flex flex-col gap-3 md:hidden", textBoxClassName)}
+            titleClassName={cls("text-7xl 2xl:text-8xl font-medium text-center md:text-left text-balance", titleClassName)}
+            descriptionClassName={cls("max-w-8/10 text-lg md:text-xl leading-[1.2] text-center md:text-left", descriptionClassName)}
+            tagClassName={cls("w-fit px-3 py-1 text-sm rounded-theme card text-foreground inline-flex items-center gap-2 mb-3", tagClassName)}
+            buttonContainerClassName={cls("flex flex-wrap gap-4 max-md:justify-center mt-2", buttonContainerClassName)}
+            buttonClassName={cls("", buttonClassName)}
+            buttonTextClassName={cls("text-base", buttonTextClassName)}
+            center={true}
+          />
+          {/* Desktop */}
+          <TextBox
+            title={title}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            tagAnimation={tagAnimation}
+            buttons={buttons}
+            buttonAnimation={buttonAnimation}
+            avatars={avatars}
+            avatarText={avatarText}
+            avatarGroupClassName={cls("", avatarGroupClassName)}
+            className={cls("hidden md:flex flex-col gap-3 md:gap-4", textBoxClassName)}
+            titleClassName={cls("text-7xl 2xl:text-8xl font-medium text-center md:text-left text-balance", titleClassName)}
+            descriptionClassName={cls("max-w-8/10 text-lg md:text-xl leading-tight text-center md:text-left", descriptionClassName)}
+            tagClassName={cls("w-fit px-3 py-1 text-sm rounded-theme card text-foreground inline-flex items-center gap-2 mb-3", tagClassName)}
+            buttonContainerClassName={cls("flex flex-wrap gap-4 max-md:justify-center mt-2", buttonContainerClassName)}
+            buttonClassName={cls("", buttonClassName)}
+            buttonTextClassName={cls("text-base", buttonTextClassName)}
+            center={false}
+          />
+        </div>
+
+        {imagePosition === "right" && mediaContent}
+      </div>
+
+      {marqueeItems && marqueeItems.length > 0 && (
+        <LogoMarquee
+          items={marqueeItems}
+          speed={marqueeSpeed}
+          showCard={showMarqueeCard}
+          className={cls("absolute bottom-6 left-1/2 -translate-x-1/2 w-content-width z-10", marqueeClassName)}
+          itemClassName={marqueeItemClassName}
+          cardClassName={marqueeCardClassName}
+          imageClassName={marqueeImageClassName}
+          textClassName={marqueeTextClassName}
+          iconClassName={marqueeIconClassName}
+        />
+      )}
+    </section>
+  );
+};
+
+export default HeroSplitTestimonial;
diff --git a/src/components/sections/hero/heroCarouselLogo/HeroCarouselLogo.tsx b/src/components/sections/hero/heroCarouselLogo/HeroCarouselLogo.tsx
new file mode 100644
index 0000000..3606739
--- /dev/null
+++ b/src/components/sections/hero/heroCarouselLogo/HeroCarouselLogo.tsx
@@ -0,0 +1,169 @@
+"use client";
+
+import { useCallback } from "react";
+import MediaContent from "@/components/shared/MediaContent";
+import FillWidthText, { hasDescenders } from "@/components/shared/FillWidthText/FillWidthText";
+import TextAnimation from "@/components/text/TextAnimation";
+import Button from "@/components/button/Button";
+import { cls } from "@/lib/utils";
+import { getButtonProps } from "@/lib/buttonUtils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import { useCarouselFullscreen } from "./useCarouselFullscreen";
+import type { ButtonConfig } from "@/types/button";
+
+const MASK_GRADIENT = "linear-gradient(to bottom, transparent, black 60%)";
+
+interface CarouselSlide {
+    imageSrc?: string;
+    videoSrc?: string;
+    imageAlt?: string;
+    videoAriaLabel?: string;
+}
+
+interface HeroCarouselLogoProps {
+    logoText: string;
+    description: string;
+    buttons: ButtonConfig[];
+    slides: CarouselSlide[];
+    autoplayDelay?: number;
+    showDimOverlay?: boolean;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    contentContainerClassName?: string;
+    descriptionClassName?: string;
+    buttonContainerClassName?: string;
+    buttonClassName?: string;
+    buttonTextClassName?: string;
+    logoContainerClassName?: string;
+    logoClassName?: string;
+    mediaWrapperClassName?: string;
+    imageClassName?: string;
+    blurClassName?: string;
+    dimOverlayClassName?: string;
+    progressBarClassName?: string;
+}
+
+const HeroCarouselLogo = ({
+    logoText,
+    description,
+    buttons = [],
+    slides,
+    autoplayDelay = 3000,
+    showDimOverlay = false,
+    ariaLabel = "Hero section",
+    className = "",
+    containerClassName = "",
+    contentContainerClassName = "",
+    descriptionClassName = "",
+    buttonContainerClassName = "",
+    buttonClassName = "",
+    buttonTextClassName = "",
+    logoContainerClassName = "",
+    logoClassName = "",
+    mediaWrapperClassName = "",
+    imageClassName = "",
+    blurClassName = "",
+    dimOverlayClassName = "",
+    progressBarClassName = "",
+}: HeroCarouselLogoProps) => {
+    const theme = useTheme();
+
+    const { currentSlide, progressRefs, goToSlide } = useCarouselFullscreen({
+        totalSlides: slides.length,
+        autoplayDelay,
+    });
+
+    const setProgressRef = useCallback(
+        (el: HTMLDivElement | null, index: number) => {
+            progressRefs.current[index] = el;
+        },
+        [progressRefs]
+    );
+
+    return (
+        <section
+            aria-label={ariaLabel}
+            className={cls("relative w-full h-svh overflow-hidden flex flex-col justify-end", className)}
+        >
+            <div className={cls("absolute inset-0 w-full h-full", mediaWrapperClassName)}>
+                {showDimOverlay && (
+                    <div className={cls("absolute top-0 left-0 w-full h-full bg-background/20 z-10 pointer-events-none select-none", dimOverlayClassName)} />
+                )}
+                {slides.map((slide, index) => (
+                    <div
+                        key={index}
+                        className={cls(
+                            "absolute inset-0 transition-opacity duration-600",
+                            currentSlide === index ? "opacity-100 z-[1]" : "opacity-0 pointer-events-none"
+                        )}
+                        aria-hidden={currentSlide !== index}
+                    >
+                        <MediaContent
+                            imageSrc={slide.imageSrc}
+                            videoSrc={slide.videoSrc}
+                            imageAlt={slide.imageAlt || ""}
+                            videoAriaLabel={slide.videoAriaLabel || "Hero video"}
+                            imageClassName={cls("w-full h-full object-cover !rounded-none", imageClassName)}
+                        />
+                    </div>
+                ))}
+            </div>
+
+            <div
+                className={cls(
+                    "absolute z-10 backdrop-blur-xl opacity-100 w-full h-[50svh] md:h-[75svh] left-0 bottom-0 pointer-events-none select-none",
+                    blurClassName
+                )}
+                style={{ maskImage: MASK_GRADIENT }}
+                aria-hidden="true"
+            />
+
+            <div className={cls("relative z-20 w-content-width mx-auto h-fit flex items-end", containerClassName)}>
+                <div className={cls("w-full flex flex-col", logoContainerClassName)}>
+                    <div className={cls("w-full flex flex-col md:flex-row md:justify-between items-start md:items-end gap-3 md:gap-6", contentContainerClassName)}>
+                        <div className="w-full md:w-1/2">
+                            <TextAnimation
+                                type={theme.defaultTextAnimation}
+                                text={description}
+                                variant="words-trigger"
+                                className={cls("text-lg md:text-2xl text-background text-balance font-medium leading-[1.2] md:max-w-1/2", descriptionClassName)}
+                            />
+                        </div>
+                        <div className="w-full md:w-1/2 flex justify-start md:justify-end">
+                            <div className={cls("flex flex-wrap gap-4", buttonContainerClassName)}>
+                                {buttons.slice(0, 2).map((button, index) => (
+                                    <Button key={index} {...getButtonProps(button, index, theme.defaultButtonVariant, cls("", buttonClassName), cls("text-base", buttonTextClassName))} />
+                                ))}
+                            </div>
+                        </div>
+                    </div>
+                    <div className="w-full flex">
+                        <FillWidthText className={cls("text-background", !hasDescenders(logoText) && "my-10", logoClassName)}>
+                            {logoText}
+                        </FillWidthText>
+                    </div>
+                    <div className="w-full flex gap-3 pb-12 pt-6">
+                        {Array.from({ length: slides.length }, (_, index) => (
+                            <button
+                                key={index}
+                                className={cls("relative cursor-pointer h-1 w-full rounded-theme overflow-hidden bg-white/10 backdrop-blur-sm", progressBarClassName)}
+                                onClick={() => goToSlide(index)}
+                                aria-label={`Go to slide ${index + 1}`}
+                                aria-current={currentSlide === index ? "true" : "false"}
+                            >
+                                <div
+                                    ref={(el) => setProgressRef(el, index)}
+                                    className="absolute inset-0 bg-white rounded-theme"
+                                    style={{ transform: "translateX(-100%)" }}
+                                />
+                            </button>
+                        ))}
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default HeroCarouselLogo;
\ No newline at end of file
diff --git a/src/components/sections/hero/heroCarouselLogo/useCarouselFullscreen.ts b/src/components/sections/hero/heroCarouselLogo/useCarouselFullscreen.ts
new file mode 100644
index 0000000..e11c366
--- /dev/null
+++ b/src/components/sections/hero/heroCarouselLogo/useCarouselFullscreen.ts
@@ -0,0 +1,103 @@
+import { useEffect, useRef, useState, useCallback } from "react";
+
+interface UseCarouselFullscreenProps {
+    totalSlides: number;
+    autoplayDelay?: number;
+}
+
+interface UseCarouselFullscreenReturn {
+    currentSlide: number;
+    progressRefs: React.MutableRefObject<(HTMLDivElement | null)[]>;
+    goToSlide: (index: number) => void;
+}
+
+export const useCarouselFullscreen = ({
+    totalSlides,
+    autoplayDelay = 3000,
+}: UseCarouselFullscreenProps): UseCarouselFullscreenReturn => {
+    const [currentSlide, setCurrentSlide] = useState(0);
+    const progressRefs = useRef<(HTMLDivElement | null)[]>([]);
+    const animationFrameRef = useRef<number | null>(null);
+    const intervalRef = useRef<NodeJS.Timeout | null>(null);
+    const previousSlideRef = useRef<number>(0);
+
+    const resetProgressBars = useCallback(
+        (fromIndex: number, isLooping: boolean = false) => {
+            if (animationFrameRef.current) {
+                cancelAnimationFrame(animationFrameRef.current);
+            }
+
+            progressRefs.current.forEach((bar, index) => {
+                if (bar) {
+                    if (isLooping || index >= fromIndex) {
+                        bar.style.transform = "translateX(-100%)";
+                    } else {
+                        bar.style.transform = "translateX(0%)";
+                    }
+                }
+            });
+        },
+        []
+    );
+
+    const animateProgress = useCallback(
+        (index: number, prevIndex: number) => {
+            const isLooping = prevIndex === totalSlides - 1 && index === 0;
+            resetProgressBars(index, isLooping);
+
+            if (!progressRefs.current[index]) return;
+
+            let startTime: number | null = null;
+
+            const animate = (timestamp: number) => {
+                if (!startTime) startTime = timestamp;
+                const elapsed = timestamp - startTime;
+                const progress = Math.min(elapsed / autoplayDelay, 1);
+
+                const translateValue = -100 + progress * 100;
+                if (progressRefs.current[index]) {
+                    progressRefs.current[index]!.style.transform = `translateX(${translateValue}%)`;
+                }
+
+                if (progress < 1) {
+                    animationFrameRef.current = requestAnimationFrame(animate);
+                }
+            };
+
+            animationFrameRef.current = requestAnimationFrame(animate);
+        },
+        [autoplayDelay, resetProgressBars, totalSlides]
+    );
+
+    const goToSlide = useCallback((index: number) => {
+        setCurrentSlide(index);
+    }, []);
+
+    useEffect(() => {
+        animateProgress(currentSlide, previousSlideRef.current);
+        previousSlideRef.current = currentSlide;
+
+        if (intervalRef.current) {
+            clearInterval(intervalRef.current);
+        }
+
+        intervalRef.current = setInterval(() => {
+            setCurrentSlide((prev) => (prev + 1) % totalSlides);
+        }, autoplayDelay);
+
+        return () => {
+            if (intervalRef.current) {
+                clearInterval(intervalRef.current);
+            }
+            if (animationFrameRef.current) {
+                cancelAnimationFrame(animationFrameRef.current);
+            }
+        };
+    }, [currentSlide, totalSlides, autoplayDelay, animateProgress]);
+
+    return {
+        currentSlide,
+        progressRefs,
+        goToSlide,
+    };
+};
\ No newline at end of file
diff --git a/src/components/sections/hero/index.ts b/src/components/sections/hero/index.ts
new file mode 100644
index 0000000..c8d7cd1
--- /dev/null
+++ b/src/components/sections/hero/index.ts
@@ -0,0 +1,19 @@
+export { default as HeroBillboard } from './HeroBillboard';
+export { default as HeroBillboardCarousel } from './HeroBillboardCarousel';
+export { default as HeroBillboardDashboard } from './HeroBillboardDashboard';
+export { default as HeroBillboardGallery } from './HeroBillboardGallery';
+export { default as HeroBillboardRotatedCarousel } from './HeroBillboardRotatedCarousel';
+export { default as HeroBillboardScroll } from './HeroBillboardScroll';
+export { default as HeroBillboardTestimonial } from './HeroBillboardTestimonial';
+export { default as HeroCarouselLogo } from './heroCarouselLogo/HeroCarouselLogo';
+export { default as HeroCentered } from './HeroCentered';
+export { default as HeroLogo } from './HeroLogo';
+export { default as HeroLogoBillboard } from './HeroLogoBillboard';
+export { default as HeroOverlay } from './HeroOverlay';
+export { default as HeroPersonalLinks } from './HeroPersonalLinks';
+export { default as HeroSignup } from './HeroSignup';
+export { default as HeroSplit } from './HeroSplit';
+export { default as HeroSplitDoubleCarousel } from './HeroSplitDoubleCarousel';
+export { default as HeroSplitDualMedia } from './HeroSplitDualMedia';
+export { default as HeroSplitKpi } from './HeroSplitKpi';
+export { default as HeroSplitTestimonial } from './HeroSplitTestimonial';
diff --git a/src/components/sections/metrics/MetricCardEleven.tsx b/src/components/sections/metrics/MetricCardEleven.tsx
new file mode 100644
index 0000000..4d5b63c
--- /dev/null
+++ b/src/components/sections/metrics/MetricCardEleven.tsx
@@ -0,0 +1,271 @@
+"use client";
+
+
+import CardStackTextBox from "@/components/cardStack/CardStackTextBox";
+import MediaContent from "@/components/shared/MediaContent";
+import { useCardAnimation } from "@/components/cardStack/hooks/useCardAnimation";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type MediaProps =
+    | {
+        imageSrc: string;
+        imageAlt?: string;
+        videoSrc?: never;
+        videoAriaLabel?: never;
+    }
+    | {
+        videoSrc: string;
+        videoAriaLabel?: string;
+        imageSrc?: never;
+        imageAlt?: never;
+    };
+
+type Metric = MediaProps & {
+    id: string;
+    value: string;
+    title: string;
+    description: string;
+};
+
+interface MetricCardElevenProps {
+    metrics: Metric[];
+    animationType: CardAnimationType;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    tagAnimation?: ButtonAnimationType;
+    buttons?: ButtonConfig[];
+    buttonAnimation?: ButtonAnimationType;
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    textBoxClassName?: string;
+    textBoxTitleClassName?: string;
+    textBoxTitleImageWrapperClassName?: string;
+    textBoxTitleImageClassName?: string;
+    textBoxDescriptionClassName?: string;
+    textBoxTagClassName?: string;
+    textBoxButtonContainerClassName?: string;
+    textBoxButtonClassName?: string;
+    textBoxButtonTextClassName?: string;
+    gridClassName?: string;
+    cardClassName?: string;
+    valueClassName?: string;
+    cardTitleClassName?: string;
+    cardDescriptionClassName?: string;
+    mediaCardClassName?: string;
+    mediaClassName?: string;
+}
+
+interface MetricTextCardProps {
+    metric: Metric;
+    shouldUseLightText: boolean;
+    cardClassName?: string;
+    valueClassName?: string;
+    cardTitleClassName?: string;
+    cardDescriptionClassName?: string;
+}
+
+interface MetricMediaCardProps {
+    metric: Metric;
+    mediaCardClassName?: string;
+    mediaClassName?: string;
+}
+
+const MetricTextCard = ({
+    metric,
+    shouldUseLightText,
+    cardClassName = "",
+    valueClassName = "",
+    cardTitleClassName = "",
+    cardDescriptionClassName = "",
+}: MetricTextCardProps) => {
+    return (
+        <div className={cls(
+            "relative w-full min-w-0 max-w-full h-full card text-foreground rounded-theme-capped flex flex-col justify-between p-6 md:p-8",
+            cardClassName
+        )}>
+            <h3 className={cls(
+                "text-5xl md:text-6xl font-medium leading-tight truncate",
+                shouldUseLightText ? "text-background" : "text-foreground",
+                valueClassName
+            )}>
+                {metric.value}
+            </h3>
+
+            <div className="w-full min-w-0 flex flex-col gap-2 mt-auto">
+                <p className={cls(
+                    "text-xl md:text-2xl font-medium leading-tight truncate",
+                    shouldUseLightText ? "text-background" : "text-foreground",
+                    cardTitleClassName
+                )}>
+                    {metric.title}
+                </p>
+                <div className="w-full h-px bg-accent" />
+                <p className={cls(
+                    "text-base truncate leading-tight",
+                    shouldUseLightText ? "text-background/75" : "text-foreground/75",
+                    cardDescriptionClassName
+                )}>
+                    {metric.description}
+                </p>
+            </div>
+        </div>
+    );
+};
+
+
+const MetricMediaCard = ({
+    metric,
+    mediaCardClassName = "",
+    mediaClassName = "",
+}: MetricMediaCardProps) => {
+    return (
+        <div className={cls(
+            "relative h-full rounded-theme-capped overflow-hidden",
+            mediaCardClassName
+        )}>
+            <MediaContent
+                imageSrc={metric.imageSrc}
+                videoSrc={metric.videoSrc}
+                imageAlt={metric.imageAlt}
+                videoAriaLabel={metric.videoAriaLabel}
+                imageClassName={cls("w-full h-full object-cover", mediaClassName)}
+            />
+        </div>
+    );
+};
+
+
+const MetricCardEleven = ({
+    metrics,
+    animationType,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    tagAnimation = "opacity",
+    buttons = [],
+    buttonAnimation = "slide-up",
+    textboxLayout,
+    useInvertedBackground = false,
+    ariaLabel = "Metrics section",
+    className = "",
+    containerClassName = "",
+    textBoxClassName = "",
+    textBoxTitleClassName = "",
+    textBoxTitleImageWrapperClassName = "",
+    textBoxTitleImageClassName = "",
+    textBoxDescriptionClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+    gridClassName = "",
+    cardClassName = "",
+    valueClassName = "",
+    cardTitleClassName = "",
+    cardDescriptionClassName = "",
+    mediaCardClassName = "",
+    mediaClassName = "",
+}: MetricCardElevenProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    // Inner grid for each metric item (text + media side by side)
+    const innerGridCols = "grid-cols-2";
+
+    const { itemRefs } = useCardAnimation({ animationType, itemCount: metrics.length });
+
+    return (
+        <section
+            aria-label={ariaLabel}
+            className={cls("relative py-20 w-full", useInvertedBackground && "bg-foreground", className)}
+        >
+            <div className={cls("w-content-width mx-auto", containerClassName)}>
+                <CardStackTextBox
+                    title={title}
+                    titleSegments={titleSegments}
+                    description={description}
+                    tag={tag}
+                    tagIcon={tagIcon}
+                    tagAnimation={tagAnimation}
+                    buttons={buttons}
+                    buttonAnimation={buttonAnimation}
+                    textboxLayout={textboxLayout}
+                    useInvertedBackground={useInvertedBackground}
+                    textBoxClassName={textBoxClassName}
+                    titleClassName={textBoxTitleClassName}
+                    titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
+                    titleImageClassName={textBoxTitleImageClassName}
+                    descriptionClassName={textBoxDescriptionClassName}
+                    tagClassName={textBoxTagClassName}
+                    buttonContainerClassName={textBoxButtonContainerClassName}
+                    buttonClassName={textBoxButtonClassName}
+                    buttonTextClassName={textBoxButtonTextClassName}
+                />
+
+                <div className={cls(
+                    "grid gap-4 mt-8 md:mt-12",
+                    metrics.length === 1 ? "grid-cols-1" : "grid-cols-1 md:grid-cols-2",
+                    gridClassName
+                )}>
+                    {metrics.map((metric, index) => {
+                        const isLastItem = index === metrics.length - 1;
+                        const isOddTotal = metrics.length % 2 !== 0;
+                        const isSingleItem = metrics.length === 1;
+                        const shouldSpanFull = isSingleItem || (isLastItem && isOddTotal);
+                        // On mobile, even items (2nd, 4th, 6th - index 1, 3, 5) have media first
+                        const isEvenItem = (index + 1) % 2 === 0;
+
+                        return (
+                            <div
+                                key={`${metric.id}-${index}`}
+                                ref={(el) => { itemRefs.current[index] = el; }}
+                                className={cls(
+                                    "grid gap-4",
+                                    innerGridCols,
+                                    shouldSpanFull && "md:col-span-2"
+                                )}
+                            >
+                                <MetricTextCard
+                                    metric={metric}
+                                    shouldUseLightText={shouldUseLightText}
+                                    cardClassName={cls(
+                                        shouldSpanFull ? "aspect-square md:aspect-video" : "aspect-square",
+                                        isEvenItem && "order-2 md:order-1",
+                                        cardClassName
+                                    )}
+                                    valueClassName={valueClassName}
+                                    cardTitleClassName={cardTitleClassName}
+                                    cardDescriptionClassName={cardDescriptionClassName}
+                                />
+                                <MetricMediaCard
+                                    metric={metric}
+                                    mediaCardClassName={cls(
+                                        shouldSpanFull ? "aspect-square md:aspect-video" : "aspect-square",
+                                        isEvenItem && "order-1 md:order-2",
+                                        mediaCardClassName
+                                    )}
+                                    mediaClassName={mediaClassName}
+                                />
+                            </div>
+                        );
+                    })}
+                </div>
+            </div>
+        </section>
+    );
+};
+
+
+export default MetricCardEleven;
\ No newline at end of file
diff --git a/src/components/sections/metrics/MetricCardFourteen.tsx b/src/components/sections/metrics/MetricCardFourteen.tsx
new file mode 100644
index 0000000..97d588a
--- /dev/null
+++ b/src/components/sections/metrics/MetricCardFourteen.tsx
@@ -0,0 +1,140 @@
+"use client";
+
+import TextAnimation from "@/components/text/TextAnimation";
+import Tag from "@/components/shared/Tag";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import { useButtonAnimation } from "@/components/hooks/useButtonAnimation";
+import type { ButtonAnimationType } from "@/components/cardStack/types";
+import type { InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type MetricItem = {
+    id: string;
+    value: string;
+    description: string;
+};
+
+interface MetricCardFourteenProps {
+    title: string;
+    tag: string;
+    tagAnimation?: ButtonAnimationType;
+    metricsAnimation?: ButtonAnimationType;
+    metrics: MetricItem[];
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    titleClassName?: string;
+    tagClassName?: string;
+    metricsContainerClassName?: string;
+    metricClassName?: string;
+    valueClassName?: string;
+    descriptionClassName?: string;
+}
+
+const MetricCardFourteen = ({
+    title,
+    tag,
+    tagAnimation = "none",
+    metricsAnimation = "none",
+    metrics,
+    useInvertedBackground = false,
+    ariaLabel = "Metrics section",
+    className = "",
+    containerClassName = "",
+    titleClassName = "",
+    tagClassName = "",
+    metricsContainerClassName = "",
+    metricClassName = "",
+    valueClassName = "",
+    descriptionClassName = "",
+}: MetricCardFourteenProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+    const { containerRef: tagContainerRef } = useButtonAnimation({ animationType: tagAnimation });
+    const { containerRef: metricsContainerRef } = useButtonAnimation({ animationType: metricsAnimation });
+
+    return (
+        <section
+            aria-label={ariaLabel}
+            className={cls("relative py-20 w-full", useInvertedBackground && "bg-foreground", className)}
+        >
+            <div className={cls("w-content-width mx-auto flex flex-col gap-10", containerClassName)}>
+                <div className="flex flex-col gap-5">
+                    <div ref={tagContainerRef} className="w-fit md:hidden">
+                        <Tag
+                            text={tag}
+                            useInvertedBackground={useInvertedBackground}
+                            className={cls("min-w-0 max-w-full text-xl px-6", tagClassName)}
+                            textClassName="truncate"
+                        />
+                    </div>
+
+                    <TextAnimation
+                        type={theme.defaultTextAnimation}
+                        text={title}
+                        variant="words-trigger"
+                        className={cls(
+                            "text-3xl md:text-5xl font-medium leading-tight",
+                            useInvertedBackground && "text-background",
+                            titleClassName
+                        )}
+                    />
+                </div>
+
+                <div className="relative w-full h-px bg-accent/20" />
+
+                <div className="flex flex-col md:flex-row md:items-start gap-10 md:gap-8">
+                    <div className="hidden md:block w-15">
+                        <Tag
+                            text={tag}
+                            useInvertedBackground={useInvertedBackground}
+                            className={cls("min-w-0 max-w-full text-xl px-6", tagClassName)}
+                            textClassName="truncate"
+                        />
+                    </div>
+
+                    <div
+                        ref={metricsContainerRef}
+                        className={cls(
+                            "w-full grid grid-cols-1 gap-4 flex-1",
+                            metrics.length >= 2 && "md:grid-cols-2",
+                            metricsContainerClassName
+                        )}
+                    >
+                        {metrics.map((metric) => (
+                            <div
+                                key={metric.id}
+                                className={cls(
+                                    "card rounded-theme-capped p-6 md:p-8 flex flex-col justify-between aspect-video",
+                                    metricClassName
+                                )}
+                            >
+                                <p className={cls(
+                                    "text-6xl md:text-8xl font-medium",
+                                    shouldUseLightText ? "text-background" : "text-foreground",
+                                    valueClassName
+                                )}>
+                                    {metric.value}
+                                </p>
+                                <div className="flex flex-col gap-4">
+                                    <div className="w-full h-px bg-accent/20" />
+                                    <p className={cls(
+                                        "text-base md:text-lg leading-tight text-balance",
+                                        shouldUseLightText ? "text-background" : "text-foreground",
+                                        descriptionClassName
+                                    )}>
+                                        {metric.description}
+                                    </p>
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+
+export default MetricCardFourteen;
diff --git a/src/components/sections/metrics/MetricCardOne.tsx b/src/components/sections/metrics/MetricCardOne.tsx
new file mode 100644
index 0000000..a1e3dea
--- /dev/null
+++ b/src/components/sections/metrics/MetricCardOne.tsx
@@ -0,0 +1,210 @@
+"use client";
+
+
+import CardStack from "@/components/cardStack/CardStack";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, GridVariant, CardAnimationTypeWith3D, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type MetricCardOneGridVariant = Extract<GridVariant, "uniform-all-items-equal" | "bento-grid" | "bento-grid-inverted">;
+
+type Metric = {
+    id: string;
+    value: string;
+    title: string;
+    description: string;
+    icon: LucideIcon;
+};
+
+interface MetricCardOneProps {
+    metrics: Metric[];
+    carouselMode?: "auto" | "buttons";
+    gridVariant: MetricCardOneGridVariant;
+    uniformGridCustomHeightClasses?: string;
+    animationType: CardAnimationTypeWith3D;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    tagAnimation?: ButtonAnimationType;
+    buttons?: ButtonConfig[];
+    buttonAnimation?: ButtonAnimationType;
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    cardClassName?: string;
+    textBoxTitleClassName?: string;
+    textBoxTitleImageWrapperClassName?: string;
+    textBoxTitleImageClassName?: string;
+    textBoxDescriptionClassName?: string;
+    valueClassName?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
+    iconContainerClassName?: string;
+    iconClassName?: string;
+    gridClassName?: string;
+    carouselClassName?: string;
+    controlsClassName?: string;
+    textBoxClassName?: string;
+    textBoxTagClassName?: string;
+    textBoxButtonContainerClassName?: string;
+    textBoxButtonClassName?: string;
+    textBoxButtonTextClassName?: string;
+}
+
+interface MetricCardItemProps {
+    metric: Metric;
+    shouldUseLightText: boolean;
+    cardClassName?: string;
+    valueClassName?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
+    iconContainerClassName?: string;
+    iconClassName?: string;
+}
+
+const MetricCardItem = ({
+    metric,
+    shouldUseLightText,
+    cardClassName = "",
+    valueClassName = "",
+    titleClassName = "",
+    descriptionClassName = "",
+    iconContainerClassName = "",
+    iconClassName = "",
+}: MetricCardItemProps) => {
+    return (
+        <div className={cls("relative w-full min-w-0 h-full card text-foreground rounded-theme-capped p-6 flex flex-col items-center justify-center gap-0", cardClassName)}>
+            <h2
+                className={cls("relative z-1 w-full text-9xl font-foreground font-medium leading-[1.1] truncate text-center", valueClassName)}
+                style={{
+                    backgroundImage: shouldUseLightText
+                        ? `linear-gradient(to bottom, var(--color-background) 0%, var(--color-background) 20%, transparent 72%, transparent 80%, transparent 100%)`
+                        : `linear-gradient(to bottom, var(--color-foreground) 0%, var(--color-foreground) 20%, transparent 72%, transparent 80%, transparent 100%)`,
+                    WebkitBackgroundClip: "text",
+                    backgroundClip: "text",
+                    WebkitTextFillColor: "transparent",
+                    color: "transparent",
+                }}
+            >
+                {metric.value}
+            </h2>
+            <p className={cls("relative w-full z-1 mt-[calc(var(--text-4xl)*-0.75)] md:mt-[calc(var(--text-4xl)*-1.15)] text-4xl font-medium text-center truncate", shouldUseLightText ? "text-background" : "text-foreground", titleClassName)}>
+                {metric.title}
+            </p>
+            <p className={cls("relative line-clamp-2 z-1 max-w-9/10 md:max-w-7/10 text-base text-center leading-[1.1] mt-2", shouldUseLightText ? "text-background" : "text-foreground", descriptionClassName)}>
+                {metric.description}
+            </p>
+            <div className={cls("absolute! z-1 left-6 bottom-6 h-10 aspect-square primary-button rounded-theme flex items-center justify-center", iconContainerClassName)}>
+                <metric.icon className={cls("h-4/10 text-primary-cta-text", iconClassName)} />
+            </div>
+        </div>
+    );
+};
+
+
+const MetricCardOne = ({
+    metrics,
+    carouselMode = "buttons",
+    gridVariant,
+    uniformGridCustomHeightClasses,
+    animationType,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    tagAnimation = "opacity",
+    buttons = [],
+    buttonAnimation = "slide-up",
+    textboxLayout,
+    useInvertedBackground = false,
+    ariaLabel = "Metrics section",
+    className = "",
+    containerClassName = "",
+    cardClassName = "",
+    textBoxTitleClassName = "",
+    textBoxTitleImageWrapperClassName = "",
+    textBoxTitleImageClassName = "",
+    textBoxDescriptionClassName = "",
+    valueClassName = "",
+    titleClassName = "",
+    descriptionClassName = "",
+    iconContainerClassName = "",
+    iconClassName = "",
+    gridClassName = "",
+    carouselClassName = "",
+    controlsClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+}: MetricCardOneProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    const customUniformHeight = gridVariant === "uniform-all-items-equal"
+        ? "min-h-70 2xl:min-h-80"
+        : uniformGridCustomHeightClasses;
+
+    return (
+        <CardStack
+            useInvertedBackground={useInvertedBackground}
+            mode={carouselMode}
+            gridVariant={gridVariant}
+            uniformGridCustomHeightClasses={customUniformHeight}
+            animationType={animationType}
+            supports3DAnimation={true}
+            carouselThreshold={4}
+            carouselItemClassName="w-carousel-item-3!"
+
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            tagAnimation={tagAnimation}
+            buttons={buttons}
+            buttonAnimation={buttonAnimation}
+            textboxLayout={textboxLayout}
+            className={className}
+            containerClassName={containerClassName}
+            gridClassName={gridClassName}
+            carouselClassName={carouselClassName}
+            controlsClassName={controlsClassName}
+            textBoxClassName={textBoxClassName}
+            titleClassName={textBoxTitleClassName}
+            titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
+            titleImageClassName={textBoxTitleImageClassName}
+            descriptionClassName={textBoxDescriptionClassName}
+            tagClassName={textBoxTagClassName}
+            buttonContainerClassName={textBoxButtonContainerClassName}
+            buttonClassName={textBoxButtonClassName}
+            buttonTextClassName={textBoxButtonTextClassName}
+            ariaLabel={ariaLabel}
+        >
+            {metrics.map((metric, index) => (
+                <MetricCardItem
+                    key={`${metric.id}-${index}`}
+                    metric={metric}
+                    shouldUseLightText={shouldUseLightText}
+                    cardClassName={cardClassName}
+                    valueClassName={valueClassName}
+                    titleClassName={titleClassName}
+                    descriptionClassName={descriptionClassName}
+                    iconContainerClassName={iconContainerClassName}
+                    iconClassName={iconClassName}
+                />
+            ))}
+        </CardStack>
+    );
+};
+
+
+export default MetricCardOne;
diff --git a/src/components/sections/metrics/MetricCardSeven.tsx b/src/components/sections/metrics/MetricCardSeven.tsx
new file mode 100644
index 0000000..eddd16c
--- /dev/null
+++ b/src/components/sections/metrics/MetricCardSeven.tsx
@@ -0,0 +1,192 @@
+"use client";
+
+
+import CardStack from "@/components/cardStack/CardStack";
+import PricingFeatureList from "@/components/shared/PricingFeatureList";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, CardAnimationTypeWith3D, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type Metric = {
+    id: string;
+    value: string;
+    title: string;
+    items: string[];
+};
+
+interface MetricCardSevenProps {
+    metrics: Metric[];
+    carouselMode?: "auto" | "buttons";
+    uniformGridCustomHeightClasses?: string;
+    animationType: CardAnimationTypeWith3D;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    tagAnimation?: ButtonAnimationType;
+    buttons?: ButtonConfig[];
+    buttonAnimation?: ButtonAnimationType;
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    cardClassName?: string;
+    textBoxTitleClassName?: string;
+    textBoxTitleImageWrapperClassName?: string;
+    textBoxTitleImageClassName?: string;
+    textBoxDescriptionClassName?: string;
+    valueClassName?: string;
+    metricTitleClassName?: string;
+    featuresClassName?: string;
+    featureItemClassName?: string;
+    gridClassName?: string;
+    carouselClassName?: string;
+    controlsClassName?: string;
+    textBoxClassName?: string;
+    textBoxTagClassName?: string;
+    textBoxButtonContainerClassName?: string;
+    textBoxButtonClassName?: string;
+    textBoxButtonTextClassName?: string;
+}
+
+interface MetricCardItemProps {
+    metric: Metric;
+    shouldUseLightText: boolean;
+    cardClassName?: string;
+    valueClassName?: string;
+    metricTitleClassName?: string;
+    featuresClassName?: string;
+    featureItemClassName?: string;
+}
+
+const MetricCardItem = ({
+    metric,
+    shouldUseLightText,
+    cardClassName = "",
+    valueClassName = "",
+    metricTitleClassName = "",
+    featuresClassName = "",
+    featureItemClassName = "",
+}: MetricCardItemProps) => {
+    return (
+        <div className={cls("relative h-full card text-foreground rounded-theme-capped p-6 flex flex-col justify-between gap-4", cardClassName)}>
+            <div className="flex flex-col gap-0" >
+                <h3 className={cls("relative z-1 text-9xl md:text-8xl font-medium truncate", shouldUseLightText ? "text-background" : "text-foreground", valueClassName)}>
+                    {metric.value}
+                </h3>
+                <p className={cls("relative z-1 text-2xl md:text-xl truncate", shouldUseLightText ? "text-background" : "text-foreground", metricTitleClassName)}>
+                    {metric.title}
+                </p>
+            </div>
+            <div className="pt-4 border-t border-t-accent" >
+                {metric.items.length > 0 && (
+                    <PricingFeatureList
+                        features={metric.items}
+                        shouldUseLightText={shouldUseLightText}
+                        className={cls("mt-1", featuresClassName)}
+                        featureItemClassName={featureItemClassName}
+                    />
+                )}
+            </div>
+        </div>
+    );
+};
+
+
+const MetricCardSeven = ({
+    metrics,
+    carouselMode = "buttons",
+    uniformGridCustomHeightClasses,
+    animationType,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    tagAnimation = "opacity",
+    buttons = [],
+    buttonAnimation = "slide-up",
+    textboxLayout,
+    useInvertedBackground = false,
+    ariaLabel = "Metrics section",
+    className = "",
+    containerClassName = "",
+    cardClassName = "",
+    textBoxTitleClassName = "",
+    textBoxTitleImageWrapperClassName = "",
+    textBoxTitleImageClassName = "",
+    textBoxDescriptionClassName = "",
+    valueClassName = "",
+    metricTitleClassName = "",
+    featuresClassName = "",
+    featureItemClassName = "",
+    gridClassName = "",
+    carouselClassName = "",
+    controlsClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+}: MetricCardSevenProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    const customUniformHeight = uniformGridCustomHeightClasses || "min-h-70 2xl:min-h-80";
+
+    return (
+        <CardStack
+            useInvertedBackground={useInvertedBackground}
+            mode={carouselMode}
+            gridVariant="uniform-all-items-equal"
+            uniformGridCustomHeightClasses={customUniformHeight}
+            animationType={animationType}
+            supports3DAnimation={true}
+
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            tagAnimation={tagAnimation}
+            buttons={buttons}
+            buttonAnimation={buttonAnimation}
+            textboxLayout={textboxLayout}
+            className={className}
+            containerClassName={containerClassName}
+            gridClassName={gridClassName}
+            carouselClassName={carouselClassName}
+            controlsClassName={controlsClassName}
+            textBoxClassName={textBoxClassName}
+            titleClassName={textBoxTitleClassName}
+            titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
+            titleImageClassName={textBoxTitleImageClassName}
+            descriptionClassName={textBoxDescriptionClassName}
+            tagClassName={textBoxTagClassName}
+            buttonContainerClassName={textBoxButtonContainerClassName}
+            buttonClassName={textBoxButtonClassName}
+            buttonTextClassName={textBoxButtonTextClassName}
+            ariaLabel={ariaLabel}
+        >
+            {metrics.map((metric, index) => (
+                <MetricCardItem
+                    key={`${metric.id}-${index}`}
+                    metric={metric}
+                    shouldUseLightText={shouldUseLightText}
+                    cardClassName={cardClassName}
+                    valueClassName={valueClassName}
+                    metricTitleClassName={metricTitleClassName}
+                    featuresClassName={featuresClassName}
+                    featureItemClassName={featureItemClassName}
+                />
+            ))}
+        </CardStack>
+    );
+};
+
+
+export default MetricCardSeven;
diff --git a/src/components/sections/metrics/MetricCardThree.tsx b/src/components/sections/metrics/MetricCardThree.tsx
new file mode 100644
index 0000000..578b99b
--- /dev/null
+++ b/src/components/sections/metrics/MetricCardThree.tsx
@@ -0,0 +1,184 @@
+"use client";
+
+
+import CardStack from "@/components/cardStack/CardStack";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, CardAnimationTypeWith3D, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type Metric = {
+    id: string;
+    icon: LucideIcon;
+    title: string;
+    value: string;
+};
+
+interface MetricCardThreeProps {
+    metrics: Metric[];
+    carouselMode?: "auto" | "buttons";
+    uniformGridCustomHeightClasses?: string;
+    animationType: CardAnimationTypeWith3D;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    tagAnimation?: ButtonAnimationType;
+    buttons?: ButtonConfig[];
+    buttonAnimation?: ButtonAnimationType;
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    cardClassName?: string;
+    textBoxTitleClassName?: string;
+    textBoxTitleImageWrapperClassName?: string;
+    textBoxTitleImageClassName?: string;
+    textBoxDescriptionClassName?: string;
+    iconContainerClassName?: string;
+    iconClassName?: string;
+    metricTitleClassName?: string;
+    valueClassName?: string;
+    gridClassName?: string;
+    carouselClassName?: string;
+    controlsClassName?: string;
+    textBoxClassName?: string;
+    textBoxTagClassName?: string;
+    textBoxButtonContainerClassName?: string;
+    textBoxButtonClassName?: string;
+    textBoxButtonTextClassName?: string;
+}
+
+interface MetricCardItemProps {
+    metric: Metric;
+    shouldUseLightText: boolean;
+    cardClassName?: string;
+    iconContainerClassName?: string;
+    iconClassName?: string;
+    metricTitleClassName?: string;
+    valueClassName?: string;
+}
+
+const MetricCardItem = ({
+    metric,
+    shouldUseLightText,
+    cardClassName = "",
+    iconContainerClassName = "",
+    iconClassName = "",
+    metricTitleClassName = "",
+    valueClassName = "",
+}: MetricCardItemProps) => {
+    return (
+        <div className={cls("relative h-full card text-foreground rounded-theme-capped p-6 flex flex-col items-center justify-center gap-3", cardClassName)}>
+            <div className="relative z-1 w-full flex items-center justify-center gap-2">
+                <div className={cls("h-8 primary-button aspect-square rounded-theme flex items-center justify-center", iconContainerClassName)}>
+                    <metric.icon className={cls("h-4/10 text-primary-cta-text", iconClassName)} strokeWidth={1.5} />
+                </div>
+                <h3 className={cls("text-xl truncate", shouldUseLightText ? "text-background" : "text-foreground", metricTitleClassName)}>
+                    {metric.title}
+                </h3>
+            </div>
+            <div className="relative z-1 w-full flex items-center justify-center">
+                <h4 className={cls("text-7xl font-medium truncate", shouldUseLightText ? "text-background" : "text-foreground", valueClassName)}>
+                    {metric.value}
+                </h4>
+            </div>
+        </div>
+    );
+};
+
+
+const MetricCardThree = ({
+    metrics,
+    carouselMode = "buttons",
+    uniformGridCustomHeightClasses = "min-h-70 2xl:min-h-80",
+    animationType,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    tagAnimation = "opacity",
+    buttons = [],
+    buttonAnimation = "slide-up",
+    textboxLayout,
+    useInvertedBackground = false,
+    ariaLabel = "Metrics section",
+    className = "",
+    containerClassName = "",
+    cardClassName = "",
+    textBoxTitleClassName = "",
+    textBoxTitleImageWrapperClassName = "",
+    textBoxTitleImageClassName = "",
+    textBoxDescriptionClassName = "",
+    iconContainerClassName = "",
+    iconClassName = "",
+    metricTitleClassName = "",
+    valueClassName = "",
+    gridClassName = "",
+    carouselClassName = "",
+    controlsClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+}: MetricCardThreeProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    return (
+        <CardStack
+            useInvertedBackground={useInvertedBackground}
+            mode={carouselMode}
+            gridVariant="uniform-all-items-equal"
+            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+            animationType={animationType}
+            supports3DAnimation={true}
+
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            tagAnimation={tagAnimation}
+            buttons={buttons}
+            buttonAnimation={buttonAnimation}
+            textboxLayout={textboxLayout}
+            className={className}
+            containerClassName={containerClassName}
+            gridClassName={gridClassName}
+            carouselClassName={carouselClassName}
+            controlsClassName={controlsClassName}
+            textBoxClassName={textBoxClassName}
+            titleClassName={textBoxTitleClassName}
+            titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
+            titleImageClassName={textBoxTitleImageClassName}
+            descriptionClassName={textBoxDescriptionClassName}
+            tagClassName={textBoxTagClassName}
+            buttonContainerClassName={textBoxButtonContainerClassName}
+            buttonClassName={textBoxButtonClassName}
+            buttonTextClassName={textBoxButtonTextClassName}
+            ariaLabel={ariaLabel}
+        >
+            {metrics.map((metric, index) => (
+                <MetricCardItem
+                    key={`${metric.id}-${index}`}
+                    metric={metric}
+                    shouldUseLightText={shouldUseLightText}
+                    cardClassName={cardClassName}
+                    iconContainerClassName={iconContainerClassName}
+                    iconClassName={iconClassName}
+                    metricTitleClassName={metricTitleClassName}
+                    valueClassName={valueClassName}
+                />
+            ))}
+        </CardStack>
+    );
+};
+
+
+export default MetricCardThree;
\ No newline at end of file
diff --git a/src/components/sections/metrics/MetricCardTwo.tsx b/src/components/sections/metrics/MetricCardTwo.tsx
new file mode 100644
index 0000000..eb60282
--- /dev/null
+++ b/src/components/sections/metrics/MetricCardTwo.tsx
@@ -0,0 +1,181 @@
+"use client";
+
+
+import CardStack from "@/components/cardStack/CardStack";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, GridVariant, CardAnimationTypeWith3D, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type MetricCardTwoGridVariant = Extract<GridVariant, "uniform-all-items-equal" | "bento-grid" | "bento-grid-inverted">;
+
+type Metric = {
+    id: string;
+    value: string;
+    description: string;
+};
+
+interface MetricCardTwoProps {
+    metrics: Metric[];
+    carouselMode?: "auto" | "buttons";
+    gridVariant: MetricCardTwoGridVariant;
+    uniformGridCustomHeightClasses?: string;
+    animationType: CardAnimationTypeWith3D;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    tagAnimation?: ButtonAnimationType;
+    buttons?: ButtonConfig[];
+    buttonAnimation?: ButtonAnimationType;
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    cardClassName?: string;
+    textBoxTitleClassName?: string;
+    textBoxTitleImageWrapperClassName?: string;
+    textBoxTitleImageClassName?: string;
+    textBoxDescriptionClassName?: string;
+    valueClassName?: string;
+    metricDescriptionClassName?: string;
+    gridClassName?: string;
+    carouselClassName?: string;
+    controlsClassName?: string;
+    textBoxClassName?: string;
+    textBoxTagClassName?: string;
+    textBoxButtonContainerClassName?: string;
+    textBoxButtonClassName?: string;
+    textBoxButtonTextClassName?: string;
+}
+
+interface MetricCardItemProps {
+    metric: Metric;
+    shouldUseLightText: boolean;
+    cardClassName?: string;
+    valueClassName?: string;
+    metricDescriptionClassName?: string;
+}
+
+const MetricCardItem = ({
+    metric,
+    shouldUseLightText,
+    cardClassName = "",
+    valueClassName = "",
+    metricDescriptionClassName = "",
+}: MetricCardItemProps) => {
+    return (
+        <div className={cls("relative h-full card text-foreground rounded-theme-capped p-6 flex flex-col justify-between", cardClassName)}>
+            <h3 className={cls("relative z-1 text-9xl md:text-7xl font-medium truncate", shouldUseLightText ? "text-background" : "text-foreground", valueClassName)}>
+                {metric.value}
+            </h3>
+            <p className={cls("relative z-1 text-xl", shouldUseLightText ? "text-background" : "text-foreground", metricDescriptionClassName)}>
+                {metric.description}
+            </p>
+        </div>
+    );
+};
+
+
+const MetricCardTwo = ({
+    metrics,
+    carouselMode = "buttons",
+    gridVariant,
+    uniformGridCustomHeightClasses,
+    animationType,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    tagAnimation = "opacity",
+    buttons = [],
+    buttonAnimation = "slide-up",
+    textboxLayout,
+    useInvertedBackground = false,
+    ariaLabel = "Metrics section",
+    className = "",
+    containerClassName = "",
+    cardClassName = "",
+    textBoxTitleClassName = "",
+    textBoxTitleImageWrapperClassName = "",
+    textBoxTitleImageClassName = "",
+    textBoxDescriptionClassName = "",
+    valueClassName = "",
+    metricDescriptionClassName = "",
+    gridClassName = "",
+    carouselClassName = "",
+    controlsClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+}: MetricCardTwoProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    const customUniformHeight = gridVariant === "uniform-all-items-equal"
+        ? "min-h-70 2xl:min-h-80"
+        : uniformGridCustomHeightClasses;
+
+    const customGridRows = (gridVariant === "bento-grid" || gridVariant === "bento-grid-inverted")
+        ? "md:grid-rows-[14rem_14rem] 2xl:grid-rows-[17rem_17rem]"
+        : undefined;
+
+    return (
+        <CardStack
+            useInvertedBackground={useInvertedBackground}
+            mode={carouselMode}
+            gridVariant={gridVariant}
+            uniformGridCustomHeightClasses={customUniformHeight}
+            gridRowsClassName={customGridRows}
+            animationType={animationType}
+            supports3DAnimation={true}
+
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            tagAnimation={tagAnimation}
+            buttons={buttons}
+            buttonAnimation={buttonAnimation}
+            textboxLayout={textboxLayout}
+            className={className}
+            containerClassName={containerClassName}
+            gridClassName={gridClassName}
+            carouselClassName={carouselClassName}
+            controlsClassName={controlsClassName}
+            textBoxClassName={textBoxClassName}
+            titleClassName={textBoxTitleClassName}
+            titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
+            titleImageClassName={textBoxTitleImageClassName}
+            descriptionClassName={textBoxDescriptionClassName}
+            tagClassName={textBoxTagClassName}
+            buttonContainerClassName={textBoxButtonContainerClassName}
+            buttonClassName={textBoxButtonClassName}
+            buttonTextClassName={textBoxButtonTextClassName}
+            ariaLabel={ariaLabel}
+            carouselThreshold={4}
+            carouselItemClassName="w-carousel-item-3!"
+        >
+            {metrics.map((metric, index) => (
+                <MetricCardItem
+                    key={`${metric.id}-${index}`}
+                    metric={metric}
+                    shouldUseLightText={shouldUseLightText}
+                    cardClassName={cardClassName}
+                    valueClassName={valueClassName}
+                    metricDescriptionClassName={metricDescriptionClassName}
+                />
+            ))}
+        </CardStack>
+    );
+};
+
+
+export default MetricCardTwo;
diff --git a/src/components/sections/metrics/index.ts b/src/components/sections/metrics/index.ts
new file mode 100644
index 0000000..26192d9
--- /dev/null
+++ b/src/components/sections/metrics/index.ts
@@ -0,0 +1,6 @@
+export { default as MetricCardEleven } from './MetricCardEleven';
+export { default as MetricCardFourteen } from './MetricCardFourteen';
+export { default as MetricCardOne } from './MetricCardOne';
+export { default as MetricCardSeven } from './MetricCardSeven';
+export { default as MetricCardThree } from './MetricCardThree';
+export { default as MetricCardTwo } from './MetricCardTwo';
diff --git a/src/components/sections/pricing/PricingCardEight.tsx b/src/components/sections/pricing/PricingCardEight.tsx
new file mode 100644
index 0000000..cf82846
--- /dev/null
+++ b/src/components/sections/pricing/PricingCardEight.tsx
@@ -0,0 +1,246 @@
+"use client";
+
+
+import CardStack from "@/components/cardStack/CardStack";
+import Button from "@/components/button/Button";
+import PricingBadge from "@/components/shared/PricingBadge";
+import PricingFeatureList from "@/components/shared/PricingFeatureList";
+import { getButtonProps } from "@/lib/buttonUtils";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type PricingPlan = {
+    id: string;
+    badge: string;
+    badgeIcon?: LucideIcon;
+    price: string;
+    subtitle: string;
+    buttons: ButtonConfig[];
+    features: string[];
+};
+
+interface PricingCardEightProps {
+    plans: PricingPlan[];
+    carouselMode?: "auto" | "buttons";
+    uniformGridCustomHeightClasses?: string;
+    animationType: CardAnimationType;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    tagAnimation?: ButtonAnimationType;
+    buttons?: ButtonConfig[];
+    buttonAnimation?: ButtonAnimationType;
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    cardClassName?: string;
+    textBoxTitleClassName?: string;
+    textBoxTitleImageWrapperClassName?: string;
+    textBoxTitleImageClassName?: string;
+    textBoxDescriptionClassName?: string;
+    badgeClassName?: string;
+    priceClassName?: string;
+    subtitleClassName?: string;
+    planButtonContainerClassName?: string;
+    planButtonClassName?: string;
+    featuresClassName?: string;
+    featureItemClassName?: string;
+    gridClassName?: string;
+    carouselClassName?: string;
+    controlsClassName?: string;
+    textBoxClassName?: string;
+    textBoxTagClassName?: string;
+    textBoxButtonContainerClassName?: string;
+    textBoxButtonClassName?: string;
+    textBoxButtonTextClassName?: string;
+}
+
+interface PricingCardItemProps {
+    plan: PricingPlan;
+    shouldUseLightText: boolean;
+    cardClassName?: string;
+    badgeClassName?: string;
+    priceClassName?: string;
+    subtitleClassName?: string;
+    planButtonContainerClassName?: string;
+    planButtonClassName?: string;
+    featuresClassName?: string;
+    featureItemClassName?: string;
+}
+
+const PricingCardItem = ({
+    plan,
+    shouldUseLightText,
+    cardClassName = "",
+    badgeClassName = "",
+    priceClassName = "",
+    subtitleClassName = "",
+    planButtonContainerClassName = "",
+    planButtonClassName = "",
+    featuresClassName = "",
+    featureItemClassName = "",
+}: PricingCardItemProps) => {
+    const theme = useTheme();
+
+    const getButtonConfigProps = () => {
+        if (theme.defaultButtonVariant === "hover-bubble") {
+            return { bgClassName: "w-full" };
+        }
+        if (theme.defaultButtonVariant === "icon-arrow") {
+            return { className: "justify-between" };
+        }
+        return {};
+    };
+
+    return (
+        <div className={cls("relative h-full card text-foreground rounded-theme-capped p-3 flex flex-col gap-3", cardClassName)}>
+            <div className="relative secondary-button p-3 flex flex-col gap-3 rounded-theme-capped" >
+                <PricingBadge
+                    badge={plan.badge}
+                    badgeIcon={plan.badgeIcon}
+                    className={badgeClassName}
+                />
+
+                <div className="relative z-1 flex flex-col gap-1">
+                    <div className="text-5xl font-medium text-foreground">
+                        {plan.price}
+                    </div>
+
+                    <p className="text-base text-foreground">
+                        {plan.subtitle}
+                    </p>
+                </div>
+
+                {plan.buttons && plan.buttons.length > 0 && (
+                    <div className={cls("relative z-1 w-full flex flex-col gap-3", planButtonContainerClassName)}>
+                        {plan.buttons.slice(0, 2).map((button, index) => (
+                            <Button
+                                key={`${button.text}-${index}`}
+                                {...getButtonProps(
+                                    { ...button, props: { ...button.props, ...getButtonConfigProps() } },
+                                    index,
+                                    theme.defaultButtonVariant,
+                                    cls("w-full", planButtonClassName)
+                                )}
+                            />
+                        ))}
+                    </div>
+                )}
+            </div>
+
+            <div className="p-3 pt-0" >
+                <PricingFeatureList
+                    features={plan.features}
+                    shouldUseLightText={shouldUseLightText}
+                    className={cls("mt-1", featuresClassName)}
+                    featureItemClassName={featureItemClassName}
+                />
+            </div>
+        </div>
+    );
+};
+
+
+const PricingCardEight = ({
+    plans,
+    carouselMode = "buttons",
+    uniformGridCustomHeightClasses,
+    animationType,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    tagAnimation = "opacity",
+    buttons = [],
+    buttonAnimation = "slide-up",
+    textboxLayout,
+    useInvertedBackground = false,
+    ariaLabel = "Pricing section",
+    className = "",
+    containerClassName = "",
+    cardClassName = "",
+    textBoxTitleClassName = "",
+    textBoxTitleImageWrapperClassName = "",
+    textBoxTitleImageClassName = "",
+    textBoxDescriptionClassName = "",
+    badgeClassName = "",
+    priceClassName = "",
+    subtitleClassName = "",
+    planButtonContainerClassName = "",
+    planButtonClassName = "",
+    featuresClassName = "",
+    featureItemClassName = "",
+    gridClassName = "",
+    carouselClassName = "",
+    controlsClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+}: PricingCardEightProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    return (
+        <CardStack
+            useInvertedBackground={useInvertedBackground}
+            mode={carouselMode}
+            gridVariant="uniform-all-items-equal"
+            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+            animationType={animationType}
+            
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            tagAnimation={tagAnimation}
+            buttons={buttons}
+            buttonAnimation={buttonAnimation}
+            textboxLayout={textboxLayout}
+            className={className}
+            containerClassName={containerClassName}
+            gridClassName={gridClassName}
+            carouselClassName={carouselClassName}
+            controlsClassName={controlsClassName}
+            textBoxClassName={textBoxClassName}
+            titleClassName={textBoxTitleClassName}
+            titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
+            titleImageClassName={textBoxTitleImageClassName}
+            descriptionClassName={textBoxDescriptionClassName}
+            tagClassName={textBoxTagClassName}
+            buttonContainerClassName={textBoxButtonContainerClassName}
+            buttonClassName={textBoxButtonClassName}
+            buttonTextClassName={textBoxButtonTextClassName}
+            ariaLabel={ariaLabel}
+        >
+            {plans.map((plan, index) => (
+                <PricingCardItem
+                    key={`${plan.id}-${index}`}
+                    plan={plan}
+                    shouldUseLightText={shouldUseLightText}
+                    cardClassName={cardClassName}
+                    badgeClassName={badgeClassName}
+                    priceClassName={priceClassName}
+                    subtitleClassName={subtitleClassName}
+                    planButtonContainerClassName={planButtonContainerClassName}
+                    planButtonClassName={planButtonClassName}
+                    featuresClassName={featuresClassName}
+                    featureItemClassName={featureItemClassName}
+                />
+            ))}
+        </CardStack>
+    );
+};
+
+
+export default PricingCardEight;
diff --git a/src/components/sections/pricing/PricingCardFive.tsx b/src/components/sections/pricing/PricingCardFive.tsx
new file mode 100644
index 0000000..aba0435
--- /dev/null
+++ b/src/components/sections/pricing/PricingCardFive.tsx
@@ -0,0 +1,230 @@
+"use client";
+
+import { Check } from "lucide-react";
+import CardList from "@/components/cardStack/CardList";
+import Tag from "@/components/shared/Tag";
+import Button from "@/components/button/Button";
+import { getButtonProps } from "@/lib/buttonUtils";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, ButtonAnimationType, CardAnimationType, TitleSegment } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type PricingPlan = {
+    id: string;
+    tag: string;
+    tagIcon?: LucideIcon;
+    price: string;
+    period: string;
+    description: string;
+    button: ButtonConfig;
+    featuresTitle: string;
+    features: string[];
+};
+
+interface PricingCardFiveProps {
+    plans: PricingPlan[];
+    animationType: CardAnimationType;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    tagAnimation?: ButtonAnimationType;
+    buttons?: ButtonConfig[];
+    buttonAnimation?: ButtonAnimationType;
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    cardClassName?: string;
+    textBoxTitleClassName?: string;
+    textBoxDescriptionClassName?: string;
+    textBoxClassName?: string;
+    textBoxTagClassName?: string;
+    textBoxButtonContainerClassName?: string;
+    textBoxButtonClassName?: string;
+    textBoxButtonTextClassName?: string;
+    titleImageWrapperClassName?: string;
+    titleImageClassName?: string;
+    cardContentClassName?: string;
+    planTagClassName?: string;
+    planPriceClassName?: string;
+    planPeriodClassName?: string;
+    planDescriptionClassName?: string;
+    planButtonClassName?: string;
+    planButtonTextClassName?: string;
+    featuresTitleClassName?: string;
+    featuresListClassName?: string;
+    featureItemClassName?: string;
+    featureIconClassName?: string;
+    featureTextClassName?: string;
+}
+
+const PricingCardFive = ({
+    plans,
+    animationType,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    tagAnimation = "opacity",
+    buttons = [],
+    buttonAnimation = "slide-up",
+    textboxLayout,
+    useInvertedBackground = false,
+    ariaLabel = "Pricing section",
+    className = "",
+    containerClassName = "",
+    cardClassName = "",
+    textBoxTitleClassName = "",
+    textBoxDescriptionClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+    titleImageWrapperClassName = "",
+    titleImageClassName = "",
+    cardContentClassName = "",
+    planTagClassName = "",
+    planPriceClassName = "",
+    planPeriodClassName = "",
+    planDescriptionClassName = "",
+    planButtonClassName = "",
+    planButtonTextClassName = "",
+    featuresTitleClassName = "",
+    featuresListClassName = "",
+    featureItemClassName = "",
+    featureIconClassName = "",
+    featureTextClassName = "",
+}: PricingCardFiveProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    const getButtonConfigProps = () => {
+        if (theme.defaultButtonVariant === "hover-bubble") {
+            return { bgClassName: "w-full" };
+        }
+        if (theme.defaultButtonVariant === "icon-arrow") {
+            return { className: "justify-between" };
+        }
+        return {};
+    };
+
+    return (
+        <CardList
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            tagAnimation={tagAnimation}
+            buttons={buttons}
+            buttonAnimation={buttonAnimation}
+            textboxLayout={textboxLayout}
+            animationType={animationType}
+            
+            useInvertedBackground={useInvertedBackground}
+            className={className}
+            containerClassName={containerClassName}
+            cardClassName={cardClassName}
+            titleClassName={textBoxTitleClassName}
+            descriptionClassName={textBoxDescriptionClassName}
+            textBoxClassName={textBoxClassName}
+            tagClassName={textBoxTagClassName}
+            buttonContainerClassName={textBoxButtonContainerClassName}
+            buttonClassName={textBoxButtonClassName}
+            buttonTextClassName={textBoxButtonTextClassName}
+            titleImageWrapperClassName={titleImageWrapperClassName}
+            titleImageClassName={titleImageClassName}
+            ariaLabel={ariaLabel}
+        >
+            {plans.map((plan) => (
+                <div
+                    key={plan.id}
+                    className={cls(
+                        "relative z-1 w-full min-h-0 h-full flex flex-col md:flex-row justify-between items-stretch gap-8 md:gap-15 p-6 md:p-15",
+                        cardContentClassName
+                    )}
+                >
+                    <div className="w-full md:w-1/2 min-w-0 flex flex-col justify-between gap-6">
+                        <div className="flex flex-col gap-4">
+                            <Tag
+                                text={plan.tag}
+                                icon={plan.tagIcon}
+                                className={planTagClassName}
+                            />
+                            <div className="flex items-baseline gap-1 mt-1">
+                                <span className={cls(
+                                    "text-5xl md:text-6xl font-medium",
+                                    shouldUseLightText ? "text-background" : "text-foreground",
+                                    planPriceClassName
+                                )}>
+                                    {plan.price}
+                                </span>
+                                <span className={cls(
+                                    "text-xl",
+                                    shouldUseLightText ? "text-background" : "text-foreground",
+                                    planPeriodClassName
+                                )}>
+                                    {plan.period}
+                                </span>
+                            </div>
+                            <p className={cls(
+                                "text-2xl leading-tight text-balance",
+                                shouldUseLightText ? "text-background" : "text-foreground",
+                                planDescriptionClassName
+                            )}>
+                                {plan.description}
+                            </p>
+                        </div>
+                        <Button
+                            {...getButtonProps(
+                                { ...plan.button, props: { ...plan.button.props, ...getButtonConfigProps() } },
+                                0,
+                                theme.defaultButtonVariant,
+                                cls("w-full h-12", planButtonClassName),
+                                planButtonTextClassName
+                            )}
+                        />
+                    </div>
+
+                    <div className="relative z-1 w-full h-px bg-foreground/20 md:hidden" />
+
+                    <div className="w-full md:w-1/2 min-w-0 flex flex-col gap-4">
+                        <h3 className={cls(
+                            "text-xl",
+                            shouldUseLightText ? "text-background" : "text-foreground",
+                            featuresTitleClassName
+                        )}>
+                            {plan.featuresTitle}
+                        </h3>
+                        <ul className={cls("flex flex-col gap-3", featuresListClassName)}>
+                            {plan.features.map((feature, index) => (
+                                <li key={index} className={cls("flex items-start gap-3", featureItemClassName)}>
+                                    <div className={cls("flex-shrink-0 h-6 w-auto aspect-square rounded-theme primary-button flex items-center justify-center", featureIconClassName)}>
+                                        <Check className="h-4/10 w-4/10 text-primary-cta-text" strokeWidth={2.5} />
+                                    </div>
+                                    <span className={cls(
+                                        "text-sm leading-[1.4]",
+                                        shouldUseLightText ? "text-background/80" : "text-foreground/80",
+                                        featureTextClassName
+                                    )}>
+                                        {feature}
+                                    </span>
+                                </li>
+                            ))}
+                        </ul>
+                    </div>
+                </div>
+            ))}
+        </CardList>
+    );
+};
+
+
+export default PricingCardFive;
diff --git a/src/components/sections/pricing/PricingCardNine.tsx b/src/components/sections/pricing/PricingCardNine.tsx
new file mode 100644
index 0000000..591fc39
--- /dev/null
+++ b/src/components/sections/pricing/PricingCardNine.tsx
@@ -0,0 +1,215 @@
+"use client";
+
+import { Check } from "lucide-react";
+import CardList from "@/components/cardStack/CardList";
+import Button from "@/components/button/Button";
+import MediaContent from "@/components/shared/MediaContent";
+import Tag from "@/components/shared/Tag";
+import { getButtonProps } from "@/lib/buttonUtils";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type PricingPlan = {
+    id: string;
+    title: string;
+    price: string;
+    period: string;
+    features: string[];
+    button: ButtonConfig;
+    imageSrc?: string;
+    videoSrc?: string;
+    imageAlt?: string;
+    videoAriaLabel?: string;
+};
+
+interface PricingCardNineProps {
+    plans: PricingPlan[];
+    animationType: CardAnimationType;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    tagAnimation?: ButtonAnimationType;
+    buttons?: ButtonConfig[];
+    buttonAnimation?: ButtonAnimationType;
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    cardClassName?: string;
+    textBoxTitleClassName?: string;
+    textBoxDescriptionClassName?: string;
+    textBoxClassName?: string;
+    textBoxTagClassName?: string;
+    textBoxButtonContainerClassName?: string;
+    textBoxButtonClassName?: string;
+    textBoxButtonTextClassName?: string;
+    titleImageWrapperClassName?: string;
+    titleImageClassName?: string;
+    cardContentClassName?: string;
+    planImageWrapperClassName?: string;
+    planImageClassName?: string;
+    planTitleClassName?: string;
+    planPriceClassName?: string;
+    planButtonClassName?: string;
+    planButtonTextClassName?: string;
+    featuresListClassName?: string;
+    featureItemClassName?: string;
+    featureIconClassName?: string;
+    featureTextClassName?: string;
+}
+
+const PricingCardNine = ({
+    plans,
+    animationType,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    tagAnimation = "opacity",
+    buttons = [],
+    buttonAnimation = "slide-up",
+    textboxLayout,
+    useInvertedBackground = false,
+    ariaLabel = "Pricing section",
+    className = "",
+    containerClassName = "",
+    cardClassName = "",
+    textBoxTitleClassName = "",
+    textBoxDescriptionClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+    titleImageWrapperClassName = "",
+    titleImageClassName = "",
+    cardContentClassName = "",
+    planImageWrapperClassName = "",
+    planImageClassName = "",
+    planTitleClassName = "",
+    planPriceClassName = "",
+    planButtonClassName = "",
+    planButtonTextClassName = "",
+    featuresListClassName = "",
+    featureItemClassName = "",
+    featureIconClassName = "",
+    featureTextClassName = "",
+}: PricingCardNineProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    const getButtonConfigProps = () => {
+        if (theme.defaultButtonVariant === "hover-bubble") {
+            return { bgClassName: "w-full" };
+        }
+        if (theme.defaultButtonVariant === "icon-arrow") {
+            return { className: "justify-between" };
+        }
+        return {};
+    };
+
+    return (
+        <CardList
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            tagAnimation={tagAnimation}
+            buttons={buttons}
+            buttonAnimation={buttonAnimation}
+            textboxLayout={textboxLayout}
+            animationType={animationType}
+            
+            useInvertedBackground={useInvertedBackground}
+            className={className}
+            containerClassName={containerClassName}
+            cardClassName={cardClassName}
+            titleClassName={textBoxTitleClassName}
+            descriptionClassName={textBoxDescriptionClassName}
+            textBoxClassName={textBoxClassName}
+            tagClassName={textBoxTagClassName}
+            buttonContainerClassName={textBoxButtonContainerClassName}
+            buttonClassName={textBoxButtonClassName}
+            buttonTextClassName={textBoxButtonTextClassName}
+            titleImageWrapperClassName={titleImageWrapperClassName}
+            titleImageClassName={titleImageClassName}
+            ariaLabel={ariaLabel}
+        >
+            {plans.map((plan) => (
+                <div
+                    key={plan.id}
+                    className={cls(
+                        "relative z-1 w-full min-h-0 h-full flex flex-col md:flex-row items-stretch gap-6 md:gap-10 p-4 md:p-6",
+                        cardContentClassName
+                    )}
+                >
+                    <div className={cls("w-full md:w-1/2 min-w-0 aspect-square md:aspect-[4/3]", planImageWrapperClassName)}>
+                        <MediaContent
+                            imageSrc={plan.imageSrc}
+                            videoSrc={plan.videoSrc}
+                            imageAlt={plan.imageAlt || plan.title}
+                            videoAriaLabel={plan.videoAriaLabel || plan.title}
+                            imageClassName={cls("w-full h-full object-cover rounded-theme", planImageClassName)}
+                        />
+                    </div>
+
+                    <div className="w-full md:w-1/2 min-w-0 flex flex-col justify-center gap-6 py-2">
+                        <div className="flex flex-col gap-4">
+                            <Tag
+                                text={`${plan.price}${plan.period}`}
+                                useInvertedBackground={useInvertedBackground}
+                                className={planPriceClassName}
+                            />
+
+                            <h3 className={cls(
+                                "text-4xl md:text-5xl font-medium mb-1 truncate",
+                                shouldUseLightText ? "text-background" : "text-foreground",
+                                planTitleClassName
+                            )}>
+                                {plan.title}
+                            </h3>
+
+                            <ul className={cls("flex flex-col gap-3", featuresListClassName)}>
+                                {plan.features.map((feature, index) => (
+                                    <li key={index} className={cls("flex items-start gap-3", featureItemClassName)}>
+                                        <div className={cls("flex-shrink-0 h-6 w-auto aspect-square rounded-theme primary-button flex items-center justify-center", featureIconClassName)}>
+                                            <Check className="h-4/10 w-4/10 text-primary-cta-text" strokeWidth={2.5} />
+                                        </div>
+                                        <span className={cls(
+                                            "text-sm leading-[1.4]",
+                                            shouldUseLightText ? "text-background/80" : "text-foreground/80",
+                                            featureTextClassName
+                                        )}>
+                                            {feature}
+                                        </span>
+                                    </li>
+                                ))}
+                            </ul>
+                        </div>
+
+                        <Button
+                            {...getButtonProps(
+                                { ...plan.button, props: { ...plan.button.props, ...getButtonConfigProps() } },
+                                0,
+                                theme.defaultButtonVariant,
+                                planButtonClassName,
+                                planButtonTextClassName
+                            )}
+                        />
+                    </div>
+                </div>
+            ))}
+        </CardList>
+    );
+};
+
+
+export default PricingCardNine;
diff --git a/src/components/sections/pricing/PricingCardOne.tsx b/src/components/sections/pricing/PricingCardOne.tsx
new file mode 100644
index 0000000..9e05d36
--- /dev/null
+++ b/src/components/sections/pricing/PricingCardOne.tsx
@@ -0,0 +1,204 @@
+"use client";
+
+
+import CardStack from "@/components/cardStack/CardStack";
+import PricingBadge from "@/components/shared/PricingBadge";
+import PricingFeatureList from "@/components/shared/PricingFeatureList";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, CardAnimationTypeWith3D, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type PricingPlan = {
+    id: string;
+    badge: string;
+    badgeIcon?: LucideIcon;
+    price: string;
+    subtitle: string;
+    features: string[];
+};
+
+interface PricingCardOneProps {
+    plans: PricingPlan[];
+    carouselMode?: "auto" | "buttons";
+    uniformGridCustomHeightClasses?: string;
+    animationType: CardAnimationTypeWith3D;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    tagAnimation?: ButtonAnimationType;
+    buttons?: ButtonConfig[];
+    buttonAnimation?: ButtonAnimationType;
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    cardClassName?: string;
+    textBoxTitleClassName?: string;
+    textBoxTitleImageWrapperClassName?: string;
+    textBoxTitleImageClassName?: string;
+    textBoxDescriptionClassName?: string;
+    badgeClassName?: string;
+    priceClassName?: string;
+    subtitleClassName?: string;
+    featuresClassName?: string;
+    featureItemClassName?: string;
+    gridClassName?: string;
+    carouselClassName?: string;
+    controlsClassName?: string;
+    textBoxClassName?: string;
+    textBoxTagClassName?: string;
+    textBoxButtonContainerClassName?: string;
+    textBoxButtonClassName?: string;
+    textBoxButtonTextClassName?: string;
+}
+
+interface PricingCardItemProps {
+    plan: PricingPlan;
+    shouldUseLightText: boolean;
+    cardClassName?: string;
+    badgeClassName?: string;
+    priceClassName?: string;
+    subtitleClassName?: string;
+    featuresClassName?: string;
+    featureItemClassName?: string;
+}
+
+const PricingCardItem = ({
+    plan,
+    shouldUseLightText,
+    cardClassName = "",
+    badgeClassName = "",
+    priceClassName = "",
+    subtitleClassName = "",
+    featuresClassName = "",
+    featureItemClassName = "",
+}: PricingCardItemProps) => {
+    return (
+        <div className={cls("relative h-full card text-foreground rounded-theme-capped p-6 flex flex-col gap-6 md:gap-8", cardClassName)}>
+            <PricingBadge
+                badge={plan.badge}
+                badgeIcon={plan.badgeIcon}
+                className={badgeClassName}
+            />
+
+            <div className="relative z-1 flex flex-col gap-1">
+                <div className={cls("text-5xl font-medium", shouldUseLightText ? "text-background" : "text-foreground", priceClassName)}>
+                    {plan.price}
+                </div>
+
+                <p className={cls("text-base", shouldUseLightText ? "text-background" : "text-foreground", subtitleClassName)}>
+                    {plan.subtitle}
+                </p>
+            </div>
+
+            <div className="relative z-1 w-full h-px bg-foreground/20" />
+
+            <PricingFeatureList
+                features={plan.features}
+                shouldUseLightText={shouldUseLightText}
+                className={cls("mt-1", featuresClassName)}
+                featureItemClassName={featureItemClassName}
+            />
+        </div>
+    );
+};
+
+
+const PricingCardOne = ({
+    plans,
+    carouselMode = "buttons",
+    uniformGridCustomHeightClasses,
+    animationType,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    tagAnimation = "opacity",
+    buttons = [],
+    buttonAnimation = "slide-up",
+    textboxLayout,
+    useInvertedBackground = false,
+    ariaLabel = "Pricing section",
+    className = "",
+    containerClassName = "",
+    cardClassName = "",
+    textBoxTitleClassName = "",
+    textBoxTitleImageWrapperClassName = "",
+    textBoxTitleImageClassName = "",
+    textBoxDescriptionClassName = "",
+    badgeClassName = "",
+    priceClassName = "",
+    subtitleClassName = "",
+    featuresClassName = "",
+    featureItemClassName = "",
+    gridClassName = "",
+    carouselClassName = "",
+    controlsClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+}: PricingCardOneProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    return (
+        <CardStack
+            useInvertedBackground={useInvertedBackground}
+            mode={carouselMode}
+            gridVariant="uniform-all-items-equal"
+            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+            animationType={animationType}
+            supports3DAnimation={true}
+
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            tagAnimation={tagAnimation}
+            buttons={buttons}
+            buttonAnimation={buttonAnimation}
+            textboxLayout={textboxLayout}
+            className={className}
+            containerClassName={containerClassName}
+            gridClassName={gridClassName}
+            carouselClassName={carouselClassName}
+            controlsClassName={controlsClassName}
+            textBoxClassName={textBoxClassName}
+            titleClassName={textBoxTitleClassName}
+            titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
+            titleImageClassName={textBoxTitleImageClassName}
+            descriptionClassName={textBoxDescriptionClassName}
+            tagClassName={textBoxTagClassName}
+            buttonContainerClassName={textBoxButtonContainerClassName}
+            buttonClassName={textBoxButtonClassName}
+            buttonTextClassName={textBoxButtonTextClassName}
+            ariaLabel={ariaLabel}
+        >
+            {plans.map((plan, index) => (
+                <PricingCardItem
+                    key={`${plan.id}-${index}`}
+                    plan={plan}
+                    shouldUseLightText={shouldUseLightText}
+                    cardClassName={cardClassName}
+                    badgeClassName={badgeClassName}
+                    priceClassName={priceClassName}
+                    subtitleClassName={subtitleClassName}
+                    featuresClassName={featuresClassName}
+                    featureItemClassName={featureItemClassName}
+                />
+            ))}
+        </CardStack>
+    );
+};
+
+
+export default PricingCardOne;
diff --git a/src/components/sections/pricing/PricingCardThree.tsx b/src/components/sections/pricing/PricingCardThree.tsx
new file mode 100644
index 0000000..45ae147
--- /dev/null
+++ b/src/components/sections/pricing/PricingCardThree.tsx
@@ -0,0 +1,245 @@
+"use client";
+
+
+import CardStack from "@/components/cardStack/CardStack";
+import PricingFeatureList from "@/components/shared/PricingFeatureList";
+import Button from "@/components/button/Button";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import { getButtonProps } from "@/lib/buttonUtils";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type PricingPlan = {
+    id: string;
+    badge?: string;
+    badgeIcon?: LucideIcon;
+    price: string;
+    name: string;
+    buttons: ButtonConfig[];
+    features: string[];
+};
+
+interface PricingCardThreeProps {
+    plans: PricingPlan[];
+    carouselMode?: "auto" | "buttons";
+    uniformGridCustomHeightClasses?: string;
+    animationType: CardAnimationType;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    tagAnimation?: ButtonAnimationType;
+    buttons?: ButtonConfig[];
+    buttonAnimation?: ButtonAnimationType;
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    cardClassName?: string;
+    textBoxTitleClassName?: string;
+    textBoxTitleImageWrapperClassName?: string;
+    textBoxTitleImageClassName?: string;
+    textBoxDescriptionClassName?: string;
+    badgeClassName?: string;
+    priceClassName?: string;
+    nameClassName?: string;
+    planButtonContainerClassName?: string;
+    planButtonClassName?: string;
+    featuresClassName?: string;
+    featureItemClassName?: string;
+    gridClassName?: string;
+    carouselClassName?: string;
+    controlsClassName?: string;
+    textBoxClassName?: string;
+    textBoxTagClassName?: string;
+    textBoxButtonContainerClassName?: string;
+    textBoxButtonClassName?: string;
+    textBoxButtonTextClassName?: string;
+}
+
+interface PricingCardItemProps {
+    plan: PricingPlan;
+    shouldUseLightText: boolean;
+    cardClassName?: string;
+    badgeClassName?: string;
+    priceClassName?: string;
+    nameClassName?: string;
+    planButtonContainerClassName?: string;
+    planButtonClassName?: string;
+    featuresClassName?: string;
+    featureItemClassName?: string;
+}
+
+const PricingCardItem = ({
+    plan,
+    shouldUseLightText,
+    cardClassName = "",
+    badgeClassName = "",
+    priceClassName = "",
+    nameClassName = "",
+    planButtonContainerClassName = "",
+    planButtonClassName = "",
+    featuresClassName = "",
+    featureItemClassName = "",
+}: PricingCardItemProps) => {
+    const theme = useTheme();
+
+    const getButtonConfigProps = () => {
+        if (theme.defaultButtonVariant === "hover-bubble") {
+            return { bgClassName: "w-full" };
+        }
+        if (theme.defaultButtonVariant === "icon-arrow") {
+            return { className: "justify-between" };
+        }
+        return {};
+    };
+
+    return (
+        <div className="relative h-full flex flex-col">
+            <div className={cls("px-4 py-3 primary-button rounded-t-theme-capped rounded-b-none text-base text-primary-cta-text whitespace-nowrap z-10 flex items-center justify-center gap-2", plan.badge ? "visible" : "invisible", badgeClassName)}>
+                {plan.badgeIcon && <plan.badgeIcon className="inline h-[1em] w-auto" />}
+                {plan.badge || "placeholder"}
+            </div>
+            <div className={cls("relative min-h-0 h-full card text-foreground p-6 flex flex-col justify-between items-center gap-6 md:gap-8", plan.badge ? "rounded-t-none rounded-b-theme-capped" : "rounded-theme-capped", cardClassName)}>
+                <div className="flex flex-col items-center gap-6 md:gap-8" >
+                    <div className="relative z-1 flex flex-col gap-2 text-center">
+                        <div className={cls("text-5xl font-medium", shouldUseLightText ? "text-background" : "text-foreground", priceClassName)}>
+                            {plan.price}
+                        </div>
+
+                        <h3 className={cls("text-xl font-medium leading-[1.1]", shouldUseLightText ? "text-background" : "text-foreground", nameClassName)}>
+                            {plan.name}
+                        </h3>
+                    </div>
+
+                    <div className="relative z-1 w-full h-px bg-foreground/10" />
+
+                    <PricingFeatureList
+                        features={plan.features}
+                        shouldUseLightText={shouldUseLightText}
+                        className={featuresClassName}
+                        featureItemClassName={featureItemClassName}
+                    />
+                </div>
+
+                {plan.buttons && plan.buttons.length > 0 && (
+                    <div className={cls("relative z-1 w-full flex flex-col gap-3", planButtonContainerClassName)}>
+                        {plan.buttons.slice(0, 2).map((button, index) => (
+                            <Button
+                                key={`${button.text}-${index}`}
+                                {...getButtonProps(
+                                    { ...button, props: { ...button.props, ...getButtonConfigProps() } },
+                                    index,
+                                    theme.defaultButtonVariant,
+                                    cls("w-full", planButtonClassName)
+                                )}
+                            />
+                        ))}
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};
+
+
+const PricingCardThree = ({
+    plans,
+    carouselMode = "buttons",
+    uniformGridCustomHeightClasses,
+    animationType,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    tagAnimation = "opacity",
+    buttons = [],
+    buttonAnimation = "slide-up",
+    textboxLayout,
+    useInvertedBackground = false,
+    ariaLabel = "Pricing section",
+    className = "",
+    containerClassName = "",
+    cardClassName = "",
+    textBoxTitleClassName = "",
+    textBoxTitleImageWrapperClassName = "",
+    textBoxTitleImageClassName = "",
+    textBoxDescriptionClassName = "",
+    badgeClassName = "",
+    priceClassName = "",
+    nameClassName = "",
+    planButtonContainerClassName = "",
+    planButtonClassName = "",
+    featuresClassName = "",
+    featureItemClassName = "",
+    gridClassName = "",
+    carouselClassName = "",
+    controlsClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+}: PricingCardThreeProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    return (
+        <CardStack
+            useInvertedBackground={useInvertedBackground}
+            mode={carouselMode}
+            gridVariant="uniform-all-items-equal"
+            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+            animationType={animationType}
+
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            tagAnimation={tagAnimation}
+            buttons={buttons}
+            buttonAnimation={buttonAnimation}
+            textboxLayout={textboxLayout}
+            className={className}
+            containerClassName={containerClassName}
+            gridClassName={gridClassName}
+            carouselClassName={carouselClassName}
+            controlsClassName={controlsClassName}
+            textBoxClassName={textBoxClassName}
+            titleClassName={textBoxTitleClassName}
+            titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
+            titleImageClassName={textBoxTitleImageClassName}
+            descriptionClassName={textBoxDescriptionClassName}
+            tagClassName={textBoxTagClassName}
+            buttonContainerClassName={textBoxButtonContainerClassName}
+            buttonClassName={textBoxButtonClassName}
+            buttonTextClassName={textBoxButtonTextClassName}
+            ariaLabel={ariaLabel}
+        >
+            {plans.map((plan, index) => (
+                <PricingCardItem
+                    key={`${plan.id}-${index}`}
+                    plan={plan}
+                    shouldUseLightText={shouldUseLightText}
+                    cardClassName={cardClassName}
+                    badgeClassName={badgeClassName}
+                    priceClassName={priceClassName}
+                    nameClassName={nameClassName}
+                    planButtonContainerClassName={planButtonContainerClassName}
+                    planButtonClassName={planButtonClassName}
+                    featuresClassName={featuresClassName}
+                    featureItemClassName={featureItemClassName}
+                />
+            ))}
+        </CardStack>
+    );
+};
+
+
+export default PricingCardThree;
diff --git a/src/components/sections/pricing/PricingCardTwo.tsx b/src/components/sections/pricing/PricingCardTwo.tsx
new file mode 100644
index 0000000..4cc78aa
--- /dev/null
+++ b/src/components/sections/pricing/PricingCardTwo.tsx
@@ -0,0 +1,244 @@
+"use client";
+
+
+import CardStack from "@/components/cardStack/CardStack";
+import PricingBadge from "@/components/shared/PricingBadge";
+import PricingFeatureList from "@/components/shared/PricingFeatureList";
+import Button from "@/components/button/Button";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import { getButtonProps } from "@/lib/buttonUtils";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type PricingPlan = {
+    id: string;
+    badge: string;
+    badgeIcon?: LucideIcon;
+    price: string;
+    subtitle: string;
+    buttons: ButtonConfig[];
+    features: string[];
+};
+
+interface PricingCardTwoProps {
+    plans: PricingPlan[];
+    carouselMode?: "auto" | "buttons";
+    uniformGridCustomHeightClasses?: string;
+    animationType: CardAnimationType;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    tagAnimation?: ButtonAnimationType;
+    buttons?: ButtonConfig[];
+    buttonAnimation?: ButtonAnimationType;
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    cardClassName?: string;
+    textBoxTitleClassName?: string;
+    textBoxTitleImageWrapperClassName?: string;
+    textBoxTitleImageClassName?: string;
+    textBoxDescriptionClassName?: string;
+    badgeClassName?: string;
+    priceClassName?: string;
+    subtitleClassName?: string;
+    planButtonContainerClassName?: string;
+    planButtonClassName?: string;
+    featuresClassName?: string;
+    featureItemClassName?: string;
+    gridClassName?: string;
+    carouselClassName?: string;
+    controlsClassName?: string;
+    textBoxClassName?: string;
+    textBoxTagClassName?: string;
+    textBoxButtonContainerClassName?: string;
+    textBoxButtonClassName?: string;
+    textBoxButtonTextClassName?: string;
+}
+
+interface PricingCardItemProps {
+    plan: PricingPlan;
+    shouldUseLightText: boolean;
+    cardClassName?: string;
+    badgeClassName?: string;
+    priceClassName?: string;
+    subtitleClassName?: string;
+    planButtonContainerClassName?: string;
+    planButtonClassName?: string;
+    featuresClassName?: string;
+    featureItemClassName?: string;
+}
+
+const PricingCardItem = ({
+    plan,
+    shouldUseLightText,
+    cardClassName = "",
+    badgeClassName = "",
+    priceClassName = "",
+    subtitleClassName = "",
+    planButtonContainerClassName = "",
+    planButtonClassName = "",
+    featuresClassName = "",
+    featureItemClassName = "",
+}: PricingCardItemProps) => {
+    const theme = useTheme();
+
+    const getButtonConfigProps = () => {
+        if (theme.defaultButtonVariant === "hover-bubble") {
+            return { bgClassName: "w-full" };
+        }
+        if (theme.defaultButtonVariant === "icon-arrow") {
+            return { className: "justify-between" };
+        }
+        return {};
+    };
+
+    return (
+        <div className={cls("relative h-full card text-foreground rounded-theme-capped p-6 flex flex-col items-center gap-6 md:gap-8", cardClassName)}>
+            <PricingBadge
+                badge={plan.badge}
+                badgeIcon={plan.badgeIcon}
+                className={badgeClassName}
+            />
+
+            <div className="relative z-1 flex flex-col gap-1 text-center">
+                <div className={cls("text-5xl font-medium", shouldUseLightText ? "text-background" : "text-foreground", priceClassName)}>
+                    {plan.price}
+                </div>
+
+                <p className={cls("text-base", shouldUseLightText ? "text-background" : "text-foreground", subtitleClassName)}>
+                    {plan.subtitle}
+                </p>
+            </div>
+
+            {plan.buttons && plan.buttons.length > 0 && (
+                <div className={cls("relative z-1 w-full flex flex-col gap-3", planButtonContainerClassName)}>
+                    {plan.buttons.slice(0, 2).map((button, index) => (
+                        <Button
+                            key={`${button.text}-${index}`}
+                            {...getButtonProps(
+                                { ...button, props: { ...button.props, ...getButtonConfigProps() } },
+                                index,
+                                theme.defaultButtonVariant,
+                                cls("w-full", planButtonClassName)
+                            )}
+                        />
+                    ))}
+                </div>
+            )}
+
+            <div className="relative z-1 w-full h-px bg-foreground/10 my-3" />
+
+            <PricingFeatureList
+                features={plan.features}
+                shouldUseLightText={shouldUseLightText}
+                className={featuresClassName}
+                featureItemClassName={featureItemClassName}
+            />
+        </div>
+    );
+};
+
+
+const PricingCardTwo = ({
+    plans,
+    carouselMode = "buttons",
+    uniformGridCustomHeightClasses,
+    animationType,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    tagAnimation = "opacity",
+    buttons = [],
+    buttonAnimation = "slide-up",
+    textboxLayout,
+    useInvertedBackground = false,
+    ariaLabel = "Pricing section",
+    className = "",
+    containerClassName = "",
+    cardClassName = "",
+    textBoxTitleClassName = "",
+    textBoxTitleImageWrapperClassName = "",
+    textBoxTitleImageClassName = "",
+    textBoxDescriptionClassName = "",
+    badgeClassName = "",
+    priceClassName = "",
+    subtitleClassName = "",
+    planButtonContainerClassName = "",
+    planButtonClassName = "",
+    featuresClassName = "",
+    featureItemClassName = "",
+    gridClassName = "",
+    carouselClassName = "",
+    controlsClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+}: PricingCardTwoProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    return (
+        <CardStack
+            useInvertedBackground={useInvertedBackground}
+            mode={carouselMode}
+            gridVariant="uniform-all-items-equal"
+            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+            animationType={animationType}
+            
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            tagAnimation={tagAnimation}
+            buttons={buttons}
+            buttonAnimation={buttonAnimation}
+            textboxLayout={textboxLayout}
+            className={className}
+            containerClassName={containerClassName}
+            gridClassName={gridClassName}
+            carouselClassName={carouselClassName}
+            controlsClassName={controlsClassName}
+            textBoxClassName={textBoxClassName}
+            titleClassName={textBoxTitleClassName}
+            titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
+            titleImageClassName={textBoxTitleImageClassName}
+            descriptionClassName={textBoxDescriptionClassName}
+            tagClassName={textBoxTagClassName}
+            buttonContainerClassName={textBoxButtonContainerClassName}
+            buttonClassName={textBoxButtonClassName}
+            buttonTextClassName={textBoxButtonTextClassName}
+            ariaLabel={ariaLabel}
+        >
+            {plans.map((plan, index) => (
+                <PricingCardItem
+                    key={`${plan.id}-${index}`}
+                    plan={plan}
+                    shouldUseLightText={shouldUseLightText}
+                    cardClassName={cardClassName}
+                    badgeClassName={badgeClassName}
+                    priceClassName={priceClassName}
+                    subtitleClassName={subtitleClassName}
+                    planButtonContainerClassName={planButtonContainerClassName}
+                    planButtonClassName={planButtonClassName}
+                    featuresClassName={featuresClassName}
+                    featureItemClassName={featureItemClassName}
+                />
+            ))}
+        </CardStack>
+    );
+};
+
+
+export default PricingCardTwo;
diff --git a/src/components/sections/pricing/index.ts b/src/components/sections/pricing/index.ts
new file mode 100644
index 0000000..1434c4e
--- /dev/null
+++ b/src/components/sections/pricing/index.ts
@@ -0,0 +1,6 @@
+export { default as PricingCardEight } from './PricingCardEight';
+export { default as PricingCardFive } from './PricingCardFive';
+export { default as PricingCardNine } from './PricingCardNine';
+export { default as PricingCardOne } from './PricingCardOne';
+export { default as PricingCardThree } from './PricingCardThree';
+export { default as PricingCardTwo } from './PricingCardTwo';
diff --git a/src/components/sections/product/ProductCardFour.tsx b/src/components/sections/product/ProductCardFour.tsx
new file mode 100644
index 0000000..7cc909a
--- /dev/null
+++ b/src/components/sections/product/ProductCardFour.tsx
@@ -0,0 +1,236 @@
+"use client";
+
+import { useCallback } from "react";
+import { useRouter } from "next/navigation";
+import CardStack from "@/components/cardStack/CardStack";
+import ProductImage from "@/components/shared/ProductImage";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import { useProducts } from "@/hooks/useProducts";
+import type { Product } from "@/lib/api/product";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, GridVariant, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type ProductCardFourGridVariant = Exclude<GridVariant, "items-top-row-full-width-bottom" | "full-width-top-items-bottom-row">;
+
+type ProductCard = Product & {
+  variant: string;
+};
+
+interface ProductCardFourProps {
+  products?: ProductCard[];
+  carouselMode?: "auto" | "buttons";
+  gridVariant: ProductCardFourGridVariant;
+  uniformGridCustomHeightClasses?: string;
+  animationType: CardAnimationType;
+  title: string;
+  titleSegments?: TitleSegment[];
+  description: string;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  tagAnimation?: ButtonAnimationType;
+  buttons?: ButtonConfig[];
+  buttonAnimation?: ButtonAnimationType;
+  textboxLayout: TextboxLayout;
+  useInvertedBackground: InvertedBackground;
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  cardClassName?: string;
+  imageClassName?: string;
+  textBoxTitleClassName?: string;
+  textBoxTitleImageWrapperClassName?: string;
+  textBoxTitleImageClassName?: string;
+  textBoxDescriptionClassName?: string;
+  cardNameClassName?: string;
+  cardPriceClassName?: string;
+  cardVariantClassName?: string;
+  actionButtonClassName?: string;
+  gridClassName?: string;
+  carouselClassName?: string;
+  controlsClassName?: string;
+  textBoxClassName?: string;
+  textBoxTagClassName?: string;
+  textBoxButtonContainerClassName?: string;
+  textBoxButtonClassName?: string;
+  textBoxButtonTextClassName?: string;
+}
+
+interface ProductCardItemProps {
+  product: ProductCard;
+  shouldUseLightText: boolean;
+  cardClassName?: string;
+  imageClassName?: string;
+  cardNameClassName?: string;
+  cardPriceClassName?: string;
+  cardVariantClassName?: string;
+  actionButtonClassName?: string;
+}
+
+const ProductCardItem = ({
+  product,
+  shouldUseLightText,
+  cardClassName = "",
+  imageClassName = "",
+  cardNameClassName = "",
+  cardPriceClassName = "",
+  cardVariantClassName = "",
+  actionButtonClassName = "",
+}: ProductCardItemProps) => {
+  return (
+    <article
+      className={cls("card group relative h-full flex flex-col gap-4 cursor-pointer p-4 rounded-theme-capped", cardClassName)}
+      onClick={product.onProductClick}
+      role="article"
+      aria-label={`${product.name} - ${product.price}`}
+    >
+      <ProductImage
+        imageSrc={product.imageSrc}
+        imageAlt={product.imageAlt || product.name}
+        isFavorited={product.isFavorited}
+        onFavoriteToggle={product.onFavorite}
+        showActionButton={true}
+        actionButtonAriaLabel={`View ${product.name} details`}
+        imageClassName={imageClassName}
+        actionButtonClassName={actionButtonClassName}
+      />
+
+      <div className="flex flex-col gap-2">
+        <div className="flex items-center justify-between gap-4">
+          <div className="flex flex-col gap-0 flex-1 min-w-0">
+            <h3 className={cls("text-base font-medium leading-[1.3]", shouldUseLightText ? "text-background" : "text-foreground", cardNameClassName)}>
+              {product.name}
+            </h3>
+            <p className={cls("text-sm leading-[1.3]", shouldUseLightText ? "text-background/60" : "text-foreground/60", cardVariantClassName)}>
+              {product.variant}
+            </p>
+          </div>
+          <p className={cls("text-base font-medium leading-[1.3] flex-shrink-0", shouldUseLightText ? "text-background" : "text-foreground", cardPriceClassName)}>
+            {product.price}
+          </p>
+        </div>
+      </div>
+    </article>
+  );
+};
+
+
+const ProductCardFour = ({
+  products: productsProp,
+  carouselMode = "buttons",
+  gridVariant,
+  uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",
+  animationType,
+  title,
+  titleSegments,
+  description,
+  tag,
+  tagIcon,
+  tagAnimation = "opacity",
+  buttons = [],
+  buttonAnimation = "slide-up",
+  textboxLayout,
+  useInvertedBackground = false,
+  ariaLabel = "Product section",
+  className = "",
+  containerClassName = "",
+  cardClassName = "",
+  imageClassName = "",
+  textBoxTitleClassName = "",
+  textBoxTitleImageWrapperClassName = "",
+  textBoxTitleImageClassName = "",
+  textBoxDescriptionClassName = "",
+  cardNameClassName = "",
+  cardPriceClassName = "",
+  cardVariantClassName = "",
+  actionButtonClassName = "",
+  gridClassName = "",
+  carouselClassName = "",
+  controlsClassName = "",
+  textBoxClassName = "",
+  textBoxTagClassName = "",
+  textBoxButtonContainerClassName = "",
+  textBoxButtonClassName = "",
+  textBoxButtonTextClassName = "",
+}: ProductCardFourProps) => {
+  const theme = useTheme();
+  const router = useRouter();
+  const { products: fetchedProducts, isLoading } = useProducts();
+  const isFromApi = fetchedProducts.length > 0;
+  const products = (isFromApi ? fetchedProducts : productsProp) as ProductCard[];
+  const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+  const handleProductClick = useCallback((product: ProductCard) => {
+    if (isFromApi) {
+      router.push(`/shop/${product.id}`);
+    } else {
+      product.onProductClick?.();
+    }
+  }, [isFromApi, router]);
+
+
+  if (isLoading && !productsProp) {
+    return (
+      <div className="w-content-width mx-auto py-20 text-center">
+        <p className="text-foreground">Loading products...</p>
+      </div>
+    );
+  }
+
+  if (!products || products.length === 0) {
+    return null;
+  }
+
+  return (
+    <CardStack
+      mode={carouselMode}
+      gridVariant={gridVariant}
+      uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+      animationType={animationType}
+
+      title={title}
+      titleSegments={titleSegments}
+      description={description}
+      tag={tag}
+      tagIcon={tagIcon}
+      tagAnimation={tagAnimation}
+      buttons={buttons}
+      buttonAnimation={buttonAnimation}
+      textboxLayout={textboxLayout}
+      useInvertedBackground={useInvertedBackground}
+      className={className}
+      containerClassName={containerClassName}
+      gridClassName={gridClassName}
+      carouselClassName={carouselClassName}
+      controlsClassName={controlsClassName}
+      textBoxClassName={textBoxClassName}
+      titleClassName={textBoxTitleClassName}
+      titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
+      titleImageClassName={textBoxTitleImageClassName}
+      descriptionClassName={textBoxDescriptionClassName}
+      tagClassName={textBoxTagClassName}
+      buttonContainerClassName={textBoxButtonContainerClassName}
+      buttonClassName={textBoxButtonClassName}
+      buttonTextClassName={textBoxButtonTextClassName}
+      ariaLabel={ariaLabel}
+    >
+      {products?.map((product, index) => (
+        <ProductCardItem
+          key={`${product.id}-${index}`}
+          product={{ ...product, onProductClick: () => handleProductClick(product) }}
+          shouldUseLightText={shouldUseLightText}
+          cardClassName={cardClassName}
+          imageClassName={imageClassName}
+          cardNameClassName={cardNameClassName}
+          cardPriceClassName={cardPriceClassName}
+          cardVariantClassName={cardVariantClassName}
+          actionButtonClassName={actionButtonClassName}
+        />
+      ))}
+    </CardStack>
+  );
+};
+
+
+export default ProductCardFour;
diff --git a/src/components/sections/product/ProductCardOne.tsx b/src/components/sections/product/ProductCardOne.tsx
new file mode 100644
index 0000000..3aa1db7
--- /dev/null
+++ b/src/components/sections/product/ProductCardOne.tsx
@@ -0,0 +1,224 @@
+"use client";
+
+import { useCallback } from "react";
+import { useRouter } from "next/navigation";
+import { ArrowUpRight } from "lucide-react";
+import CardStack from "@/components/cardStack/CardStack";
+import ProductImage from "@/components/shared/ProductImage";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import { useProducts } from "@/hooks/useProducts";
+import type { Product } from "@/lib/api/product";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, GridVariant, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type ProductCardOneGridVariant = GridVariant;
+
+type ProductCard = Product;
+
+interface ProductCardOneProps {
+    products?: ProductCard[];
+    carouselMode?: "auto" | "buttons";
+    gridVariant: ProductCardOneGridVariant;
+    uniformGridCustomHeightClasses?: string;
+    animationType: CardAnimationType;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    tagAnimation?: ButtonAnimationType;
+    buttons?: ButtonConfig[];
+    buttonAnimation?: ButtonAnimationType;
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    cardClassName?: string;
+    imageClassName?: string;
+    textBoxTitleClassName?: string;
+    textBoxTitleImageWrapperClassName?: string;
+    textBoxTitleImageClassName?: string;
+    textBoxDescriptionClassName?: string;
+    cardNameClassName?: string;
+    cardPriceClassName?: string;
+    gridClassName?: string;
+    carouselClassName?: string;
+    controlsClassName?: string;
+    textBoxClassName?: string;
+    textBoxTagClassName?: string;
+    textBoxButtonContainerClassName?: string;
+    textBoxButtonClassName?: string;
+    textBoxButtonTextClassName?: string;
+}
+
+interface ProductCardItemProps {
+    product: ProductCard;
+    shouldUseLightText: boolean;
+    cardClassName?: string;
+    imageClassName?: string;
+    cardNameClassName?: string;
+    cardPriceClassName?: string;
+}
+
+const ProductCardItem = ({
+    product,
+    shouldUseLightText,
+    cardClassName = "",
+    imageClassName = "",
+    cardNameClassName = "",
+    cardPriceClassName = "",
+}: ProductCardItemProps) => {
+    return (
+        <article
+            className={cls("card group relative h-full flex flex-col gap-4 cursor-pointer p-4 rounded-theme-capped", cardClassName)}
+            onClick={product.onProductClick}
+            role="article"
+            aria-label={`${product.name} - ${product.price}`}
+        >
+            <ProductImage
+                imageSrc={product.imageSrc}
+                imageAlt={product.imageAlt || product.name}
+                isFavorited={product.isFavorited}
+                onFavoriteToggle={product.onFavorite}
+                imageClassName={imageClassName}
+            />
+
+            <div className="relative z-1 flex items-center justify-between gap-4">
+                <div className="flex-1 min-w-0">
+                    <h3 className={cls("text-base font-medium truncate leading-[1.3]", shouldUseLightText ? "text-background" : "text-foreground", cardNameClassName)}>
+                        {product.name}
+                    </h3>
+                    <p className={cls("text-2xl font-medium leading-[1.3]", shouldUseLightText ? "text-background" : "text-foreground", cardPriceClassName)}>
+                        {product.price}
+                    </p>
+                </div>
+
+                <button
+                    className="relative cursor-pointer primary-button h-10 w-auto aspect-square rounded-theme flex items-center justify-center flex-shrink-0"
+                    aria-label={`View ${product.name} details`}
+                    type="button"
+                >
+                    <ArrowUpRight className="h-4/10 text-primary-cta-text transition-transform duration-300 group-hover:rotate-45" strokeWidth={1.5} />
+                </button>
+            </div>
+        </article>
+    );
+};
+
+
+const ProductCardOne = ({
+    products: productsProp,
+    carouselMode = "buttons",
+    gridVariant,
+    uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",
+    animationType,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    tagAnimation = "opacity",
+    buttons = [],
+    buttonAnimation = "slide-up",
+    textboxLayout,
+    useInvertedBackground = false,
+    ariaLabel = "Product section",
+    className = "",
+    containerClassName = "",
+    cardClassName = "",
+    imageClassName = "",
+    textBoxTitleClassName = "",
+    textBoxTitleImageWrapperClassName = "",
+    textBoxTitleImageClassName = "",
+    textBoxDescriptionClassName = "",
+    cardNameClassName = "",
+    cardPriceClassName = "",
+    gridClassName = "",
+    carouselClassName = "",
+    controlsClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+}: ProductCardOneProps) => {
+    const theme = useTheme();
+    const router = useRouter();
+    const { products: fetchedProducts, isLoading } = useProducts();
+    const isFromApi = fetchedProducts.length > 0;
+    const products = isFromApi ? fetchedProducts : productsProp;
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    const handleProductClick = useCallback((product: ProductCard) => {
+        if (isFromApi) {
+            router.push(`/shop/${product.id}`);
+        } else {
+            product.onProductClick?.();
+        }
+    }, [isFromApi, router]);
+
+    if (isLoading && !productsProp) {
+        return (
+            <div className="w-content-width mx-auto py-20 text-center">
+                <p className="text-foreground">Loading products...</p>
+            </div>
+        );
+    }
+
+    if (!products || products.length === 0) {
+        return null;
+    }
+
+    return (
+        <CardStack
+            mode={carouselMode}
+            gridVariant={gridVariant}
+            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+            animationType={animationType}
+
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            tagAnimation={tagAnimation}
+            buttons={buttons}
+            buttonAnimation={buttonAnimation}
+            textboxLayout={textboxLayout}
+            useInvertedBackground={useInvertedBackground}
+            className={className}
+            containerClassName={containerClassName}
+            gridClassName={gridClassName}
+            carouselClassName={carouselClassName}
+            controlsClassName={controlsClassName}
+            textBoxClassName={textBoxClassName}
+            titleClassName={textBoxTitleClassName}
+            titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
+            titleImageClassName={textBoxTitleImageClassName}
+            descriptionClassName={textBoxDescriptionClassName}
+            tagClassName={textBoxTagClassName}
+            buttonContainerClassName={textBoxButtonContainerClassName}
+            buttonClassName={textBoxButtonClassName}
+            buttonTextClassName={textBoxButtonTextClassName}
+            ariaLabel={ariaLabel}
+        >
+            {products?.map((product, index) => (
+                <ProductCardItem
+                    key={`${product.id}-${index}`}
+                    product={{ ...product, onProductClick: () => handleProductClick(product) }}
+                    shouldUseLightText={shouldUseLightText}
+                    cardClassName={cardClassName}
+                    imageClassName={imageClassName}
+                    cardNameClassName={cardNameClassName}
+                    cardPriceClassName={cardPriceClassName}
+                />
+            ))}
+        </CardStack>
+    );
+};
+
+
+export default ProductCardOne;
diff --git a/src/components/sections/product/ProductCardThree.tsx b/src/components/sections/product/ProductCardThree.tsx
new file mode 100644
index 0000000..1a5b1c8
--- /dev/null
+++ b/src/components/sections/product/ProductCardThree.tsx
@@ -0,0 +1,281 @@
+"use client";
+
+import { useState, useCallback } from "react";
+import { useRouter } from "next/navigation";
+import { Plus, Minus } from "lucide-react";
+import CardStack from "@/components/cardStack/CardStack";
+import ProductImage from "@/components/shared/ProductImage";
+import QuantityButton from "@/components/shared/QuantityButton";
+import Button from "@/components/button/Button";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import { useProducts } from "@/hooks/useProducts";
+import { getButtonProps } from "@/lib/buttonUtils";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import type { Product } from "@/lib/api/product";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, ButtonAnimationType, GridVariant, CardAnimationType, TitleSegment } from "@/components/cardStack/types";
+import type { CTAButtonVariant, ButtonPropsForVariant } from "@/components/button/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type ProductCardThreeGridVariant = Exclude<GridVariant, "items-top-row-full-width-bottom" | "full-width-top-items-bottom-row">;
+
+type ProductCard = Product & {
+    onQuantityChange?: (quantity: number) => void;
+    initialQuantity?: number;
+    priceButtonProps?: Partial<ButtonPropsForVariant<CTAButtonVariant>>;
+};
+
+interface ProductCardThreeProps {
+    products?: ProductCard[];
+    carouselMode?: "auto" | "buttons";
+    gridVariant: ProductCardThreeGridVariant;
+    uniformGridCustomHeightClasses?: string;
+    animationType: CardAnimationType;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    tagAnimation?: ButtonAnimationType;
+    buttons?: ButtonConfig[];
+    buttonAnimation?: ButtonAnimationType;
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    cardClassName?: string;
+    imageClassName?: string;
+    textBoxTitleClassName?: string;
+    textBoxTitleImageWrapperClassName?: string;
+    textBoxTitleImageClassName?: string;
+    textBoxDescriptionClassName?: string;
+    cardNameClassName?: string;
+    quantityControlsClassName?: string;
+    gridClassName?: string;
+    carouselClassName?: string;
+    controlsClassName?: string;
+    textBoxClassName?: string;
+    textBoxTagClassName?: string;
+    textBoxButtonContainerClassName?: string;
+    textBoxButtonClassName?: string;
+    textBoxButtonTextClassName?: string;
+}
+
+
+interface ProductCardItemProps {
+    product: ProductCard;
+    shouldUseLightText: boolean;
+    isFromApi: boolean;
+    onBuyClick?: (productId: string, quantity: number) => void;
+    cardClassName?: string;
+    imageClassName?: string;
+    cardNameClassName?: string;
+    quantityControlsClassName?: string;
+}
+
+const ProductCardItem = ({
+    product,
+    shouldUseLightText,
+    isFromApi,
+    onBuyClick,
+    cardClassName = "",
+    imageClassName = "",
+    cardNameClassName = "",
+    quantityControlsClassName = "",
+}: ProductCardItemProps) => {
+    const theme = useTheme();
+    const [quantity, setQuantity] = useState(product.initialQuantity || 1);
+
+    const handleIncrement = useCallback((e: React.MouseEvent) => {
+        e.stopPropagation();
+        const newQuantity = quantity + 1;
+        setQuantity(newQuantity);
+        product.onQuantityChange?.(newQuantity);
+    }, [quantity, product]);
+
+    const handleDecrement = useCallback((e: React.MouseEvent) => {
+        e.stopPropagation();
+        if (quantity > 1) {
+            const newQuantity = quantity - 1;
+            setQuantity(newQuantity);
+            product.onQuantityChange?.(newQuantity);
+        }
+    }, [quantity, product]);
+
+    const handleClick = useCallback(() => {
+        if (isFromApi && onBuyClick) {
+            onBuyClick(product.id, quantity);
+        } else {
+            product.onProductClick?.();
+        }
+    }, [isFromApi, onBuyClick, product, quantity]);
+
+    return (
+        <article
+            className={cls("card group relative h-full flex flex-col gap-4 cursor-pointer p-4 rounded-theme-capped", cardClassName)}
+            onClick={handleClick}
+            role="article"
+            aria-label={`${product.name} - ${product.price}`}
+        >
+            <ProductImage
+                imageSrc={product.imageSrc}
+                imageAlt={product.imageAlt || product.name}
+                isFavorited={product.isFavorited}
+                onFavoriteToggle={product.onFavorite}
+                imageClassName={imageClassName}
+            />
+
+            <div className="relative z-1 flex flex-col gap-3">
+                <h3 className={cls("text-xl font-medium leading-[1.15] truncate", shouldUseLightText ? "text-background" : "text-foreground", cardNameClassName)}>
+                    {product.name}
+                </h3>
+
+                <div className="flex items-center justify-between gap-4">
+                    <div className={cls("flex items-center gap-2", quantityControlsClassName)}>
+                        <QuantityButton
+                            onClick={handleDecrement}
+                            ariaLabel="Decrease quantity"
+                            Icon={Minus}
+                        />
+                        <span className={cls("text-base font-medium min-w-[2ch] text-center leading-[1]", shouldUseLightText ? "text-background" : "text-foreground")}>
+                            {quantity}
+                        </span>
+                        <QuantityButton
+                            onClick={handleIncrement}
+                            ariaLabel="Increase quantity"
+                            Icon={Plus}
+                        />
+                    </div>
+
+                    <Button
+                        {...getButtonProps(
+                            {
+                                text: product.price,
+                                props: product.priceButtonProps,
+                            },
+                            0,
+                            theme.defaultButtonVariant
+                        )}
+                    />
+                </div>
+            </div>
+        </article>
+    );
+};
+
+
+const ProductCardThree = ({
+    products: productsProp,
+    carouselMode = "buttons",
+    gridVariant,
+    uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",
+    animationType,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    tagAnimation = "opacity",
+    buttons = [],
+    buttonAnimation = "slide-up",
+    textboxLayout,
+    useInvertedBackground = false,
+    ariaLabel = "Product section",
+    className = "",
+    containerClassName = "",
+    cardClassName = "",
+    imageClassName = "",
+    textBoxTitleClassName = "",
+    textBoxTitleImageWrapperClassName = "",
+    textBoxTitleImageClassName = "",
+    textBoxDescriptionClassName = "",
+    cardNameClassName = "",
+    quantityControlsClassName = "",
+    gridClassName = "",
+    carouselClassName = "",
+    controlsClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+}: ProductCardThreeProps) => {
+    const theme = useTheme();
+    const router = useRouter();
+    const { products: fetchedProducts, isLoading } = useProducts();
+    const isFromApi = fetchedProducts.length > 0;
+    const products = (isFromApi ? fetchedProducts : productsProp) as ProductCard[];
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    const handleProductClick = useCallback((product: ProductCard) => {
+        if (isFromApi) {
+            router.push(`/shop/${product.id}`);
+        } else {
+            product.onProductClick?.();
+        }
+    }, [isFromApi, router]);
+
+    if (isLoading && !productsProp) {
+        return (
+            <div className="w-content-width mx-auto py-20 text-center">
+                <p className="text-foreground">Loading products...</p>
+            </div>
+        );
+    }
+
+    if (!products || products.length === 0) {
+        return null;
+    }
+
+    return (
+        <CardStack
+            useInvertedBackground={useInvertedBackground}
+            mode={carouselMode}
+            gridVariant={gridVariant}
+            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+            animationType={animationType}
+
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            tagAnimation={tagAnimation}
+            buttons={buttons}
+            buttonAnimation={buttonAnimation}
+            textboxLayout={textboxLayout}
+            className={className}
+            containerClassName={containerClassName}
+            gridClassName={gridClassName}
+            carouselClassName={carouselClassName}
+            controlsClassName={controlsClassName}
+            textBoxClassName={textBoxClassName}
+            titleClassName={textBoxTitleClassName}
+            titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
+            titleImageClassName={textBoxTitleImageClassName}
+            descriptionClassName={textBoxDescriptionClassName}
+            tagClassName={textBoxTagClassName}
+            buttonContainerClassName={textBoxButtonContainerClassName}
+            buttonClassName={textBoxButtonClassName}
+            buttonTextClassName={textBoxButtonTextClassName}
+            ariaLabel={ariaLabel}
+        >
+            {products?.map((product, index) => (
+                <ProductCardItem
+                    key={`${product.id}-${index}`}
+                    product={{ ...product, onProductClick: () => handleProductClick(product) }}
+                    shouldUseLightText={shouldUseLightText}
+                    isFromApi={isFromApi}
+                    cardClassName={cardClassName}
+                    imageClassName={imageClassName}
+                    cardNameClassName={cardNameClassName}
+                    quantityControlsClassName={quantityControlsClassName}
+                />
+            ))}
+        </CardStack>
+    );
+};
+
+
+export default ProductCardThree;
diff --git a/src/components/sections/product/ProductCardTwo.tsx b/src/components/sections/product/ProductCardTwo.tsx
new file mode 100644
index 0000000..25f6da4
--- /dev/null
+++ b/src/components/sections/product/ProductCardTwo.tsx
@@ -0,0 +1,265 @@
+"use client";
+
+import { useCallback } from "react";
+import { useRouter } from "next/navigation";
+import { Star } from "lucide-react";
+import CardStack from "@/components/cardStack/CardStack";
+import ProductImage from "@/components/shared/ProductImage";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import { useProducts } from "@/hooks/useProducts";
+import type { Product } from "@/lib/api/product";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, GridVariant, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type ProductCardTwoGridVariant = Exclude<GridVariant, "one-large-right-three-stacked-left" | "items-top-row-full-width-bottom" | "full-width-top-items-bottom-row" | "one-large-left-three-stacked-right">;
+
+type ProductCard = Product & {
+    brand: string;
+    rating: number;
+    reviewCount: string;
+};
+
+interface ProductCardTwoProps {
+    products?: ProductCard[];
+    carouselMode?: "auto" | "buttons";
+    gridVariant: ProductCardTwoGridVariant;
+    uniformGridCustomHeightClasses?: string;
+    animationType: CardAnimationType;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    tagAnimation?: ButtonAnimationType;
+    buttons?: ButtonConfig[];
+    buttonAnimation?: ButtonAnimationType;
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    cardClassName?: string;
+    imageClassName?: string;
+    textBoxTitleClassName?: string;
+    textBoxTitleImageWrapperClassName?: string;
+    textBoxTitleImageClassName?: string;
+    textBoxDescriptionClassName?: string;
+    cardBrandClassName?: string;
+    cardNameClassName?: string;
+    cardPriceClassName?: string;
+    cardRatingClassName?: string;
+    actionButtonClassName?: string;
+    gridClassName?: string;
+    carouselClassName?: string;
+    controlsClassName?: string;
+    textBoxClassName?: string;
+    textBoxTagClassName?: string;
+    textBoxButtonContainerClassName?: string;
+    textBoxButtonClassName?: string;
+    textBoxButtonTextClassName?: string;
+}
+
+interface ProductCardItemProps {
+    product: ProductCard;
+    shouldUseLightText: boolean;
+    cardClassName?: string;
+    imageClassName?: string;
+    cardBrandClassName?: string;
+    cardNameClassName?: string;
+    cardPriceClassName?: string;
+    cardRatingClassName?: string;
+    actionButtonClassName?: string;
+}
+
+const ProductCardItem = ({
+    product,
+    shouldUseLightText,
+    cardClassName = "",
+    imageClassName = "",
+    cardBrandClassName = "",
+    cardNameClassName = "",
+    cardPriceClassName = "",
+    cardRatingClassName = "",
+    actionButtonClassName = "",
+}: ProductCardItemProps) => {
+    return (
+        <article
+            className={cls("card group relative h-full flex flex-col gap-4 cursor-pointer p-4 rounded-theme-capped", cardClassName)}
+            onClick={product.onProductClick}
+            role="article"
+            aria-label={`${product.brand} ${product.name} - ${product.price}`}
+        >
+            <ProductImage
+                imageSrc={product.imageSrc}
+                imageAlt={product.imageAlt || `${product.brand} ${product.name}`}
+                isFavorited={product.isFavorited}
+                onFavoriteToggle={product.onFavorite}
+                showActionButton={true}
+                actionButtonAriaLabel={`View ${product.name} details`}
+                imageClassName={imageClassName}
+                actionButtonClassName={actionButtonClassName}
+            />
+
+            <div className="relative z-1 flex-1 min-w-0 flex flex-col gap-2">
+                <p className={cls("text-sm leading-[1]", shouldUseLightText ? "text-background" : "text-foreground", cardBrandClassName)}>
+                    {product.brand}
+                </p>
+                <div className="flex flex-col gap-1" >
+                    <h3 className={cls("text-xl font-medium truncate leading-[1.15]", shouldUseLightText ? "text-background" : "text-foreground", cardNameClassName)}>
+                        {product.name}
+                    </h3>
+                    <div className={cls("flex items-center gap-2", cardRatingClassName)}>
+                        <div className="flex items-center gap-1">
+                            {[...Array(5)].map((_, i) => (
+                                <Star
+                                    key={i}
+                                    className={cls(
+                                        "h-4 w-auto",
+                                        i < Math.floor(product.rating)
+                                            ? "text-accent fill-accent"
+                                            : "text-accent opacity-20"
+                                    )}
+                                    strokeWidth={1.5}
+                                />
+                            ))}
+                        </div>
+                        <span className={cls("text-sm leading-[1.3]", shouldUseLightText ? "text-background" : "text-foreground")}>
+                            ({product.reviewCount})
+                        </span>
+                    </div>
+                </div>
+                <p className={cls("text-2xl font-medium leading-[1.3]", shouldUseLightText ? "text-background" : "text-foreground", cardPriceClassName)}>
+                    {product.price}
+                </p>
+            </div>
+        </article>
+    );
+};
+
+
+const ProductCardTwo = ({
+    products: productsProp,
+    carouselMode = "buttons",
+    gridVariant,
+    uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",
+    animationType,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    tagAnimation = "opacity",
+    buttons = [],
+    buttonAnimation = "slide-up",
+    textboxLayout,
+    useInvertedBackground = false,
+    ariaLabel = "Product section",
+    className = "",
+    containerClassName = "",
+    cardClassName = "",
+    imageClassName = "",
+    textBoxTitleClassName = "",
+    textBoxTitleImageWrapperClassName = "",
+    textBoxTitleImageClassName = "",
+    textBoxDescriptionClassName = "",
+    cardBrandClassName = "",
+    cardNameClassName = "",
+    cardPriceClassName = "",
+    cardRatingClassName = "",
+    actionButtonClassName = "",
+    gridClassName = "",
+    carouselClassName = "",
+    controlsClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+}: ProductCardTwoProps) => {
+    const theme = useTheme();
+    const router = useRouter();
+    const { products: fetchedProducts, isLoading } = useProducts();
+    const isFromApi = fetchedProducts.length > 0;
+    const products = (fetchedProducts.length > 0 ? fetchedProducts : productsProp) as ProductCard[];
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    const handleProductClick = useCallback((product: ProductCard) => {
+        if (isFromApi) {
+            router.push(`/shop/${product.id}`);
+        } else {
+            product.onProductClick?.();
+        }
+    }, [isFromApi, router]);
+
+    const customGridRows = (gridVariant === "bento-grid" || gridVariant === "bento-grid-inverted")
+        ? "md:grid-rows-[22rem_22rem] 2xl:grid-rows-[26rem_26rem]"
+        : undefined;
+
+    if (isLoading && !productsProp) {
+        return (
+            <div className="w-content-width mx-auto py-20 text-center">
+                <p className="text-foreground">Loading products...</p>
+            </div>
+        );
+    }
+
+    if (!products || products.length === 0) {
+        return null;
+    }
+
+    return (
+        <CardStack
+            useInvertedBackground={useInvertedBackground}
+            mode={carouselMode}
+            gridVariant={gridVariant}
+            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+            gridRowsClassName={customGridRows}
+            animationType={animationType}
+
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            tagAnimation={tagAnimation}
+            buttons={buttons}
+            buttonAnimation={buttonAnimation}
+            textboxLayout={textboxLayout}
+            className={className}
+            containerClassName={containerClassName}
+            gridClassName={gridClassName}
+            carouselClassName={carouselClassName}
+            controlsClassName={controlsClassName}
+            textBoxClassName={textBoxClassName}
+            titleClassName={textBoxTitleClassName}
+            titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
+            titleImageClassName={textBoxTitleImageClassName}
+            descriptionClassName={textBoxDescriptionClassName}
+            tagClassName={textBoxTagClassName}
+            buttonContainerClassName={textBoxButtonContainerClassName}
+            buttonClassName={textBoxButtonClassName}
+            buttonTextClassName={textBoxButtonTextClassName}
+            ariaLabel={ariaLabel}
+        >
+            {products?.map((product, index) => (
+                <ProductCardItem
+                    key={`${product.id}-${index}`}
+                    product={{ ...product, onProductClick: () => handleProductClick(product) }}
+                    shouldUseLightText={shouldUseLightText}
+                    cardClassName={cardClassName}
+                    imageClassName={imageClassName}
+                    cardBrandClassName={cardBrandClassName}
+                    cardNameClassName={cardNameClassName}
+                    cardPriceClassName={cardPriceClassName}
+                    cardRatingClassName={cardRatingClassName}
+                    actionButtonClassName={actionButtonClassName}
+                />
+            ))}
+        </CardStack>
+    );
+};
+
+
+export default ProductCardTwo;
diff --git a/src/components/sections/product/index.ts b/src/components/sections/product/index.ts
new file mode 100644
index 0000000..f4f7391
--- /dev/null
+++ b/src/components/sections/product/index.ts
@@ -0,0 +1,4 @@
+export { default as ProductCardFour } from './ProductCardFour';
+export { default as ProductCardOne } from './ProductCardOne';
+export { default as ProductCardThree } from './ProductCardThree';
+export { default as ProductCardTwo } from './ProductCardTwo';
diff --git a/src/components/sections/socialProof/SocialProofOne.tsx b/src/components/sections/socialProof/SocialProofOne.tsx
new file mode 100644
index 0000000..9e3130c
--- /dev/null
+++ b/src/components/sections/socialProof/SocialProofOne.tsx
@@ -0,0 +1,120 @@
+"use client";
+
+import Marquee from "react-fast-marquee";
+import CardStackTextBox from "@/components/cardStack/CardStackTextBox";
+import { cls } from "@/lib/utils";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+interface SocialProofOneProps {
+    names: string[];
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    tagAnimation?: ButtonAnimationType;
+    buttons?: ButtonConfig[];
+    buttonAnimation?: ButtonAnimationType;
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    speed?: number;
+    showCard?: boolean;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    textBoxTitleClassName?: string;
+    titleImageWrapperClassName?: string;
+    titleImageClassName?: string;
+    textBoxDescriptionClassName?: string;
+    textBoxClassName?: string;
+    textBoxTagClassName?: string;
+    textBoxButtonContainerClassName?: string;
+    textBoxButtonClassName?: string;
+    textBoxButtonTextClassName?: string;
+    contentClassName?: string;
+    logoItemClassName?: string;
+    logoCardClassName?: string;
+    logoTextClassName?: string;
+}
+
+const SocialProofOne = ({
+    names,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    tagAnimation = "opacity",
+    buttons = [],
+    buttonAnimation = "slide-up",
+    textboxLayout,
+    useInvertedBackground = false,
+    speed = 40,
+    showCard = true,
+    ariaLabel = "Social proof section",
+    className = "",
+    containerClassName = "",
+    textBoxTitleClassName = "",
+    titleImageWrapperClassName = "",
+    titleImageClassName = "",
+    textBoxDescriptionClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+    contentClassName = "",
+    logoItemClassName = "",
+    logoCardClassName = "",
+    logoTextClassName = "",
+}: SocialProofOneProps) => {
+    const repeatedItems = [...names, ...names, ...names];
+
+    return (
+        <section aria-label={ariaLabel} className={cls("relative py-20 w-full", useInvertedBackground && "bg-foreground", className)}>
+            <div className={cls("w-content-width mx-auto flex flex-col gap-8", containerClassName)}>
+                {(title || description) && (
+                    <CardStackTextBox
+                        title={title}
+                        titleSegments={titleSegments}
+                        description={description}
+                        tag={tag}
+                        tagIcon={tagIcon}
+                        tagAnimation={tagAnimation}
+                        buttons={buttons}
+                        buttonAnimation={buttonAnimation}
+                        textboxLayout={textboxLayout}
+                        useInvertedBackground={useInvertedBackground}
+                        textBoxClassName={textBoxClassName}
+                        titleClassName={textBoxTitleClassName}
+                        titleImageWrapperClassName={titleImageWrapperClassName}
+                        titleImageClassName={titleImageClassName}
+                        descriptionClassName={textBoxDescriptionClassName}
+                        tagClassName={textBoxTagClassName}
+                        buttonContainerClassName={textBoxButtonContainerClassName}
+                        buttonClassName={textBoxButtonClassName}
+                        buttonTextClassName={textBoxButtonTextClassName}
+                    />
+                )}
+
+                <div className={cls("mask-padding-x", contentClassName)}>
+                    <Marquee gradient={false} speed={speed}>
+                        {repeatedItems.map((item, i) => (
+                            <div className={cls(showCard ? "mx-4" : "mx-8", logoItemClassName)} key={i}>
+                                <div className={cls(showCard ? "card px-4 py-3 mb-1 rounded-theme" : "", logoCardClassName)}>
+                                    <span className={cls("relative z-1 text-2xl text-foreground/75 font-semibold whitespace-nowrap", logoTextClassName)}>
+                                        {item}
+                                    </span>
+                                </div>
+                            </div>
+                        ))}
+                    </Marquee>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default SocialProofOne;
diff --git a/src/components/sections/socialProof/index.ts b/src/components/sections/socialProof/index.ts
new file mode 100644
index 0000000..baa19e4
--- /dev/null
+++ b/src/components/sections/socialProof/index.ts
@@ -0,0 +1 @@
+export { default as SocialProofOne } from './SocialProofOne';
diff --git a/src/components/sections/team/TeamCardEleven.tsx b/src/components/sections/team/TeamCardEleven.tsx
new file mode 100644
index 0000000..a147782
--- /dev/null
+++ b/src/components/sections/team/TeamCardEleven.tsx
@@ -0,0 +1,195 @@
+"use client";
+
+import CardList from "@/components/cardStack/CardList";
+import MediaContent from "@/components/shared/MediaContent";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type TeamMember = {
+    id: string;
+    title: string;
+    subtitle: string;
+    detail: string;
+    imageSrc?: string;
+    imageAlt?: string;
+    videoSrc?: string;
+    videoAriaLabel?: string;
+};
+
+type TeamGroup = {
+    id: string;
+    groupTitle: string;
+    members: TeamMember[];
+};
+
+interface TeamCardElevenProps {
+    groups: TeamGroup[];
+    animationType: CardAnimationType;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    tagAnimation?: ButtonAnimationType;
+    buttons?: ButtonConfig[];
+    buttonAnimation?: ButtonAnimationType;
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    cardClassName?: string;
+    textBoxClassName?: string;
+    textBoxTitleClassName?: string;
+    textBoxDescriptionClassName?: string;
+    textBoxTagClassName?: string;
+    textBoxButtonContainerClassName?: string;
+    textBoxButtonClassName?: string;
+    textBoxButtonTextClassName?: string;
+    titleImageWrapperClassName?: string;
+    titleImageClassName?: string;
+    groupTitleClassName?: string;
+    memberClassName?: string;
+    memberImageClassName?: string;
+    memberTitleClassName?: string;
+    memberSubtitleClassName?: string;
+    memberDetailClassName?: string;
+}
+
+const TeamCardEleven = ({
+    groups,
+    animationType,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    tagAnimation = "opacity",
+    buttons = [],
+    buttonAnimation = "slide-up",
+    textboxLayout,
+    useInvertedBackground = false,
+    ariaLabel = "Team section",
+    className = "",
+    containerClassName = "",
+    cardClassName = "",
+    textBoxClassName = "",
+    textBoxTitleClassName = "",
+    textBoxDescriptionClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+    titleImageWrapperClassName = "",
+    titleImageClassName = "",
+    groupTitleClassName = "",
+    memberClassName = "",
+    memberImageClassName = "",
+    memberTitleClassName = "",
+    memberSubtitleClassName = "",
+    memberDetailClassName = "",
+}: TeamCardElevenProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    const renderMemberRow = (member: TeamMember) => (
+        <div
+            key={member.id}
+            className={cls(
+                "flex flex-col md:flex-row md:items-center gap-4 py-6",
+                memberClassName
+            )}
+        >
+            <div className="flex items-center gap-4 flex-1">
+                <div className={cls(
+                    "relative h-14 w-auto md:h-16 aspect-square rounded-theme overflow-hidden shrink-0",
+                    memberImageClassName
+                )}>
+                    <MediaContent
+                        imageSrc={member.imageSrc}
+                        imageAlt={member.imageAlt || member.title}
+                        videoSrc={member.videoSrc}
+                        videoAriaLabel={member.videoAriaLabel}
+                        imageClassName="w-full h-full object-cover"
+                    />
+                </div>
+
+                <div className="flex flex-col">
+                    <p className={cls(
+                        "text-lg md:text-xl font-medium",
+                        shouldUseLightText ? "text-background" : "text-foreground",
+                        memberTitleClassName
+                    )}>
+                        {member.title}
+                    </p>
+                    <p className={cls(
+                        "text-base",
+                        shouldUseLightText ? "text-background/60" : "text-foreground/60",
+                        memberSubtitleClassName
+                    )}>
+                        {member.subtitle}
+                    </p>
+                </div>
+            </div>
+
+            <p className={cls(
+                "text-base md:text-lg font-medium",
+                shouldUseLightText ? "text-background" : "text-foreground",
+                memberDetailClassName
+            )}>
+                {member.detail}
+            </p>
+        </div>
+    );
+
+    return (
+        <CardList
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            tagAnimation={tagAnimation}
+            buttons={buttons}
+            buttonAnimation={buttonAnimation}
+            textboxLayout={textboxLayout}
+            animationType={animationType}
+            useInvertedBackground={useInvertedBackground}
+            className={className}
+            containerClassName={containerClassName}
+            cardClassName={cardClassName}
+            titleClassName={textBoxTitleClassName}
+            descriptionClassName={textBoxDescriptionClassName}
+            textBoxClassName={textBoxClassName}
+            tagClassName={textBoxTagClassName}
+            buttonContainerClassName={textBoxButtonContainerClassName}
+            buttonClassName={textBoxButtonClassName}
+            buttonTextClassName={textBoxButtonTextClassName}
+            titleImageWrapperClassName={titleImageWrapperClassName}
+            titleImageClassName={titleImageClassName}
+            ariaLabel={ariaLabel}
+        >
+            {groups.map((group) => (
+                <div key={group.id} className="p-6 md:p-8">
+                    <h3 className={cls(
+                        "text-2xl md:text-3xl font-medium mb-2",
+                        shouldUseLightText ? "text-background" : "text-foreground",
+                        groupTitleClassName
+                    )}>
+                        {group.groupTitle}
+                    </h3>
+
+                    <div className="flex flex-col divide-y divide-accent/40 border-y border-accent/40">
+                        {group.members.map(renderMemberRow)}
+                    </div>
+                </div>
+            ))}
+        </CardList>
+    );
+};
+
+
+export default TeamCardEleven;
diff --git a/src/components/sections/team/TeamCardFive.tsx b/src/components/sections/team/TeamCardFive.tsx
new file mode 100644
index 0000000..3e91d6b
--- /dev/null
+++ b/src/components/sections/team/TeamCardFive.tsx
@@ -0,0 +1,147 @@
+"use client";
+
+import CardStackTextBox from "@/components/cardStack/CardStackTextBox";
+import MediaContent from "@/components/shared/MediaContent";
+import { useCardAnimation } from "@/components/cardStack/hooks/useCardAnimation";
+import { cls } from "@/lib/utils";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
+import type { InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type TeamMember = {
+  id: string;
+  name: string;
+  role: string;
+  imageSrc?: string;
+  videoSrc?: string;
+  imageAlt?: string;
+  videoAriaLabel?: string;
+};
+
+interface TeamCardFiveProps {
+  team: TeamMember[];
+  animationType: CardAnimationType;
+  title: string;
+  titleSegments?: TitleSegment[];
+  description: string;
+  textboxLayout: "default" | "inline-image";
+  useInvertedBackground: InvertedBackground;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  tagAnimation?: ButtonAnimationType;
+  buttons?: ButtonConfig[];
+  buttonAnimation?: ButtonAnimationType;
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  textBoxTitleClassName?: string;
+  textBoxTitleImageWrapperClassName?: string;
+  textBoxTitleImageClassName?: string;
+  textBoxDescriptionClassName?: string;
+  textBoxClassName?: string;
+  textBoxTagClassName?: string;
+  textBoxButtonContainerClassName?: string;
+  textBoxButtonClassName?: string;
+  textBoxButtonTextClassName?: string;
+  gridClassName?: string;
+  cardClassName?: string;
+  mediaWrapperClassName?: string;
+  mediaClassName?: string;
+  nameClassName?: string;
+  roleClassName?: string;
+}
+
+const TeamCardFive = ({
+  team,
+  animationType,
+  title,
+  titleSegments,
+  description,
+  textboxLayout,
+  useInvertedBackground = false,
+  tag,
+  tagIcon,
+  tagAnimation = "opacity",
+  buttons = [],
+  buttonAnimation = "slide-up",
+  ariaLabel = "Team section",
+  className = "",
+  containerClassName = "",
+  textBoxTitleClassName = "",
+  textBoxTitleImageWrapperClassName = "",
+  textBoxTitleImageClassName = "",
+  textBoxDescriptionClassName = "",
+  textBoxClassName = "",
+  textBoxTagClassName = "",
+  textBoxButtonContainerClassName = "",
+  textBoxButtonClassName = "",
+  textBoxButtonTextClassName = "",
+  gridClassName = "",
+  cardClassName = "",
+  mediaWrapperClassName = "",
+  mediaClassName = "",
+  nameClassName = "",
+  roleClassName = "",
+}: TeamCardFiveProps) => {
+  const { itemRefs } = useCardAnimation({ animationType, itemCount: team.length });
+
+  return (
+    <section
+      aria-label={ariaLabel}
+      className={cls("relative py-20 w-full", useInvertedBackground && "bg-foreground", className)}
+    >
+      <div className={cls("w-content-width mx-auto flex flex-col gap-8", containerClassName)}>
+        <CardStackTextBox
+          title={title}
+          titleSegments={titleSegments}
+          description={description}
+          tag={tag}
+          tagIcon={tagIcon}
+          tagAnimation={tagAnimation}
+          buttons={buttons}
+          buttonAnimation={buttonAnimation}
+          textboxLayout={textboxLayout}
+          useInvertedBackground={useInvertedBackground}
+          textBoxClassName={textBoxClassName}
+          titleClassName={textBoxTitleClassName}
+          titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
+          titleImageClassName={textBoxTitleImageClassName}
+          descriptionClassName={textBoxDescriptionClassName}
+          tagClassName={textBoxTagClassName}
+          buttonContainerClassName={textBoxButtonContainerClassName}
+          buttonClassName={textBoxButtonClassName}
+          buttonTextClassName={textBoxButtonTextClassName}
+        />
+
+        <div className={cls("flex flex-row flex-wrap gap-y-6 md:gap-x-0 justify-center", gridClassName)}>
+          {team.map((member, index) => (
+            <div
+              key={member.id}
+              ref={(el) => { itemRefs.current[index] = el; }}
+              className={cls("relative flex flex-col items-center text-center w-[55%] md:w-[28%] -mx-[4%] md:-mx-[2%]", cardClassName)}
+            >
+              <div className={cls("relative card w-full aspect-square rounded-theme overflow-hidden p-2 mb-4", mediaWrapperClassName)}>
+                <MediaContent
+                  imageSrc={member.imageSrc}
+                  videoSrc={member.videoSrc}
+                  imageAlt={member.imageAlt || member.name}
+                  videoAriaLabel={member.videoAriaLabel || member.name}
+                  imageClassName={cls("relative z-1 w-full h-full object-cover rounded-theme!", mediaClassName)}
+                />
+              </div>
+              <h3 className={cls("relative z-1 w-8/10 text-2xl font-medium leading-tight truncate", useInvertedBackground ? "text-background" : "text-foreground", nameClassName)}>
+                {member.name}
+              </h3>
+              <p className={cls("relative z-1 w-8/10 text-base leading-tight mt-1 truncate", useInvertedBackground ? "text-background/75" : "text-foreground/75", roleClassName)}>
+                {member.role}
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+
+export default TeamCardFive;
diff --git a/src/components/sections/team/TeamCardOne.tsx b/src/components/sections/team/TeamCardOne.tsx
new file mode 100644
index 0000000..228a422
--- /dev/null
+++ b/src/components/sections/team/TeamCardOne.tsx
@@ -0,0 +1,189 @@
+"use client";
+
+import CardStack from "@/components/cardStack/CardStack";
+import MediaContent from "@/components/shared/MediaContent";
+import { cls } from "@/lib/utils";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, GridVariant, CardAnimationTypeWith3D, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type TeamCardOneGridVariant = GridVariant;
+
+type TeamMember = {
+    id: string;
+    name: string;
+    role: string;
+    imageSrc?: string;
+    videoSrc?: string;
+    imageAlt?: string;
+    videoAriaLabel?: string;
+};
+
+interface TeamCardOneProps {
+    members: TeamMember[];
+    carouselMode?: "auto" | "buttons";
+    gridVariant: TeamCardOneGridVariant;
+    uniformGridCustomHeightClasses?: string;
+    animationType: CardAnimationTypeWith3D;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    tagAnimation?: ButtonAnimationType;
+    buttons?: ButtonConfig[];
+    buttonAnimation?: ButtonAnimationType;
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    cardClassName?: string;
+    textBoxTitleClassName?: string;
+    textBoxTitleImageWrapperClassName?: string;
+    textBoxTitleImageClassName?: string;
+    textBoxDescriptionClassName?: string;
+    imageClassName?: string;
+    overlayClassName?: string;
+    nameClassName?: string;
+    roleClassName?: string;
+    gridClassName?: string;
+    carouselClassName?: string;
+    controlsClassName?: string;
+    textBoxClassName?: string;
+    textBoxTagClassName?: string;
+    textBoxButtonContainerClassName?: string;
+    textBoxButtonClassName?: string;
+    textBoxButtonTextClassName?: string;
+}
+
+interface TeamMemberCardProps {
+    member: TeamMember;
+    cardClassName?: string;
+    imageClassName?: string;
+    overlayClassName?: string;
+    nameClassName?: string;
+    roleClassName?: string;
+}
+
+const TeamMemberCard = ({
+    member,
+    cardClassName = "",
+    imageClassName = "",
+    overlayClassName = "",
+    nameClassName = "",
+    roleClassName = "",
+}: TeamMemberCardProps) => {
+    return (
+        <div className={cls("relative h-full w-full max-w-full card rounded-theme-capped p-4 aspect-[8/10]", cardClassName)}>
+            <div className="relative z-1 w-full h-full rounded-theme-capped overflow-hidden">
+                <MediaContent
+                    imageSrc={member.imageSrc}
+                    videoSrc={member.videoSrc}
+                    imageAlt={member.imageAlt || member.name}
+                    videoAriaLabel={member.videoAriaLabel || member.name}
+                    imageClassName={cls("w-full h-full object-cover", imageClassName)}
+                />
+
+                <div className={cls("!absolute z-1 bottom-4 left-4 right-4 card backdrop-blur-xs p-4 rounded-theme-capped flex items-center justify-between gap-3", overlayClassName)}>
+                    <h3 className={cls("relative z-1 text-xl font-medium text-foreground leading-[1.1] truncate", nameClassName)}>
+                        {member.name}
+                    </h3>
+                    <div className="min-w-0 max-w-full w-fit primary-button px-3 py-2 rounded-theme">
+                        <p className={cls("text-sm text-primary-cta-text leading-[1.1] truncate", roleClassName)}>
+                            {member.role}
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+const TeamCardOne = ({
+    members,
+    carouselMode = "buttons",
+    gridVariant,
+    uniformGridCustomHeightClasses = "min-h-none",
+    animationType,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    tagAnimation = "opacity",
+    buttons = [],
+    buttonAnimation = "slide-up",
+    textboxLayout,
+    useInvertedBackground = false,
+    ariaLabel = "Team section",
+    className = "",
+    containerClassName = "",
+    cardClassName = "",
+    textBoxTitleClassName = "",
+    textBoxTitleImageWrapperClassName = "",
+    textBoxTitleImageClassName = "",
+    textBoxDescriptionClassName = "",
+    imageClassName = "",
+    overlayClassName = "",
+    nameClassName = "",
+    roleClassName = "",
+    gridClassName = "",
+    carouselClassName = "",
+    controlsClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+}: TeamCardOneProps) => {
+    return (
+        <CardStack
+            mode={carouselMode}
+            gridVariant={gridVariant}
+            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+            animationType={animationType}
+            supports3DAnimation={true}
+
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            tagAnimation={tagAnimation}
+            buttons={buttons}
+            buttonAnimation={buttonAnimation}
+            textboxLayout={textboxLayout}
+            useInvertedBackground={useInvertedBackground}
+            className={className}
+            containerClassName={containerClassName}
+            gridClassName={gridClassName}
+            carouselClassName={carouselClassName}
+            controlsClassName={controlsClassName}
+            textBoxClassName={textBoxClassName}
+            titleClassName={textBoxTitleClassName}
+            titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
+            titleImageClassName={textBoxTitleImageClassName}
+            descriptionClassName={textBoxDescriptionClassName}
+            tagClassName={textBoxTagClassName}
+            buttonContainerClassName={textBoxButtonContainerClassName}
+            buttonClassName={textBoxButtonClassName}
+            buttonTextClassName={textBoxButtonTextClassName}
+            ariaLabel={ariaLabel}
+        >
+            {members.map((member, index) => (
+                <TeamMemberCard
+                    key={`${member.id}-${index}`}
+                    member={member}
+                    cardClassName={cardClassName}
+                    imageClassName={imageClassName}
+                    overlayClassName={overlayClassName}
+                    nameClassName={nameClassName}
+                    roleClassName={roleClassName}
+                />
+            ))}
+        </CardStack>
+    );
+};
+
+export default TeamCardOne;
diff --git a/src/components/sections/team/TeamCardSix.tsx b/src/components/sections/team/TeamCardSix.tsx
new file mode 100644
index 0000000..b40572a
--- /dev/null
+++ b/src/components/sections/team/TeamCardSix.tsx
@@ -0,0 +1,195 @@
+"use client";
+
+import CardStack from "@/components/cardStack/CardStack";
+import MediaContent from "@/components/shared/MediaContent";
+import { cls } from "@/lib/utils";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, GridVariant, CardAnimationTypeWith3D, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type TeamCardSixGridVariant = Exclude<GridVariant, "two-columns-alternating-heights" | "four-items-2x2-equal-grid">;
+
+const MASK_GRADIENT = "linear-gradient(to bottom, transparent, black 60%)";
+
+type TeamMember = {
+    id: string;
+    name: string;
+    role: string;
+    imageSrc?: string;
+    videoSrc?: string;
+    imageAlt?: string;
+    videoAriaLabel?: string;
+};
+
+interface TeamCardSixProps {
+    members: TeamMember[];
+    carouselMode?: "auto" | "buttons";
+    gridVariant: TeamCardSixGridVariant;
+    uniformGridCustomHeightClasses?: string;
+    animationType: CardAnimationTypeWith3D;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    tagAnimation?: ButtonAnimationType;
+    buttons?: ButtonConfig[];
+    buttonAnimation?: ButtonAnimationType;
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    cardClassName?: string;
+    textBoxTitleClassName?: string;
+    textBoxTitleImageWrapperClassName?: string;
+    textBoxTitleImageClassName?: string;
+    textBoxDescriptionClassName?: string;
+    imageClassName?: string;
+    overlayClassName?: string;
+    nameClassName?: string;
+    roleClassName?: string;
+    gridClassName?: string;
+    carouselClassName?: string;
+    controlsClassName?: string;
+    textBoxClassName?: string;
+    textBoxTagClassName?: string;
+    textBoxButtonContainerClassName?: string;
+    textBoxButtonClassName?: string;
+    textBoxButtonTextClassName?: string;
+}
+
+interface TeamMemberCardProps {
+    member: TeamMember;
+    cardClassName?: string;
+    imageClassName?: string;
+    overlayClassName?: string;
+    nameClassName?: string;
+    roleClassName?: string;
+}
+
+const TeamMemberCard = ({
+    member,
+    cardClassName = "",
+    imageClassName = "",
+    overlayClassName = "",
+    nameClassName = "",
+    roleClassName = "",
+}: TeamMemberCardProps) => {
+    return (
+        <div className={cls("relative h-full rounded-theme-capped", cardClassName)}>
+            <div className="relative w-full h-full rounded-theme-capped overflow-hidden">
+                <MediaContent
+                    imageSrc={member.imageSrc}
+                    videoSrc={member.videoSrc}
+                    imageAlt={member.imageAlt || member.name}
+                    videoAriaLabel={member.videoAriaLabel || member.name}
+                    imageClassName={cls("w-full h-full object-cover", imageClassName)}
+                />
+
+                <div className={cls("absolute z-10 bottom-4 left-4 right-4 p-4 flex flex-col gap-0 text-background", overlayClassName)}>
+                    <h3 className={cls("text-2xl font-medium leading-tight truncate", nameClassName)}>
+                        {member.name}
+                    </h3>
+                    <p className={cls("text-base leading-tight truncate", roleClassName)}>
+                        {member.role}
+                    </p>
+                </div>
+
+                <div
+                    className="absolute z-0 backdrop-blur-xl opacity-100 w-full h-1/3 left-0 bottom-0"
+                    style={{ maskImage: MASK_GRADIENT }}
+                    aria-hidden="true"
+                />
+            </div>
+        </div>
+    );
+};
+
+const TeamCardSix = ({
+    members,
+    carouselMode = "buttons",
+    gridVariant,
+    uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",
+    animationType,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    tagAnimation = "opacity",
+    buttons = [],
+    buttonAnimation = "slide-up",
+    textboxLayout,
+    useInvertedBackground = false,
+    ariaLabel = "Team section",
+    className = "",
+    containerClassName = "",
+    cardClassName = "",
+    textBoxTitleClassName = "",
+    textBoxTitleImageWrapperClassName = "",
+    textBoxTitleImageClassName = "",
+    textBoxDescriptionClassName = "",
+    imageClassName = "",
+    overlayClassName = "",
+    nameClassName = "",
+    roleClassName = "",
+    gridClassName = "",
+    carouselClassName = "",
+    controlsClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+}: TeamCardSixProps) => {
+    return (
+        <CardStack
+            mode={carouselMode}
+            gridVariant={gridVariant}
+            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+            animationType={animationType}
+            supports3DAnimation={true}
+
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            tagAnimation={tagAnimation}
+            buttons={buttons}
+            buttonAnimation={buttonAnimation}
+            textboxLayout={textboxLayout}
+            useInvertedBackground={useInvertedBackground}
+            className={className}
+            containerClassName={containerClassName}
+            gridClassName={gridClassName}
+            carouselClassName={carouselClassName}
+            controlsClassName={controlsClassName}
+            textBoxClassName={textBoxClassName}
+            titleClassName={textBoxTitleClassName}
+            titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
+            titleImageClassName={textBoxTitleImageClassName}
+            descriptionClassName={textBoxDescriptionClassName}
+            tagClassName={textBoxTagClassName}
+            buttonContainerClassName={textBoxButtonContainerClassName}
+            buttonClassName={textBoxButtonClassName}
+            buttonTextClassName={textBoxButtonTextClassName}
+            ariaLabel={ariaLabel}
+        >
+            {members.map((member, index) => (
+                <TeamMemberCard
+                    key={`${member.id}-${index}`}
+                    member={member}
+                    cardClassName={cardClassName}
+                    imageClassName={imageClassName}
+                    overlayClassName={overlayClassName}
+                    nameClassName={nameClassName}
+                    roleClassName={roleClassName}
+                />
+            ))}
+        </CardStack>
+    );
+};
+
+export default TeamCardSix;
\ No newline at end of file
diff --git a/src/components/sections/team/TeamCardTen.tsx b/src/components/sections/team/TeamCardTen.tsx
new file mode 100644
index 0000000..a9ae5e1
--- /dev/null
+++ b/src/components/sections/team/TeamCardTen.tsx
@@ -0,0 +1,148 @@
+"use client";
+
+import TextAnimation from "@/components/text/TextAnimation";
+import MediaContent from "@/components/shared/MediaContent";
+import Tag from "@/components/shared/Tag";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import { useButtonAnimation } from "@/components/hooks/useButtonAnimation";
+import type { ButtonAnimationType } from "@/components/cardStack/types";
+import type { InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type TeamMember = {
+    id: string;
+    name: string;
+    imageSrc?: string;
+    imageAlt?: string;
+    videoSrc?: string;
+    videoAriaLabel?: string;
+};
+
+interface TeamCardTenProps {
+    title: string;
+    tag: string;
+    tagAnimation?: ButtonAnimationType;
+    membersAnimation: ButtonAnimationType;
+    members: TeamMember[];
+    memberVariant: "default" | "card";
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    titleClassName?: string;
+    tagClassName?: string;
+    membersContainerClassName?: string;
+    memberClassName?: string;
+    mediaWrapperClassName?: string;
+    mediaClassName?: string;
+    nameClassName?: string;
+}
+
+const TeamCardTen = ({
+    title,
+    tag,
+    tagAnimation = "opacity",
+    membersAnimation,
+    members,
+    memberVariant,
+    useInvertedBackground = false,
+    ariaLabel = "Team section",
+    className = "",
+    containerClassName = "",
+    titleClassName = "",
+    tagClassName = "",
+    membersContainerClassName = "",
+    memberClassName = "",
+    mediaWrapperClassName = "",
+    mediaClassName = "",
+    nameClassName = "",
+}: TeamCardTenProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+    const { containerRef: tagContainerRef } = useButtonAnimation({ animationType: tagAnimation ?? "none" });
+    const { containerRef: membersContainerRef } = useButtonAnimation({ animationType: membersAnimation });
+
+    return (
+        <section
+            aria-label={ariaLabel}
+            className={cls("relative py-20 w-full", useInvertedBackground && "bg-foreground", className)}
+        >
+            <div className={cls("w-content-width mx-auto flex flex-col gap-10", containerClassName)}>
+                <div className="flex flex-col gap-5">
+                    <div ref={tagContainerRef} className="w-fit md:hidden">
+                        <Tag
+                            text={tag}
+                            useInvertedBackground={useInvertedBackground}
+                            className={cls("min-w-0 max-w-full text-xl px-6", tagClassName)}
+                            textClassName="truncate"
+                        />
+                    </div>
+
+                    <TextAnimation
+                        type={theme.defaultTextAnimation}
+                        text={title}
+                        variant="words-trigger"
+                        className={cls(
+                            "text-3xl md:text-5xl font-medium leading-tight",
+                            useInvertedBackground && "text-background",
+                            titleClassName
+                        )}
+                    />
+                </div>
+
+                <div className="relative w-full h-px bg-accent/20" />
+
+                <div className="flex flex-col md:flex-row md:items-start gap-10 md:gap-8">
+                    <div className="hidden md:block w-15">
+                        <Tag
+                            text={tag}
+                            useInvertedBackground={useInvertedBackground}
+                            className={cls("min-w-0 max-w-full text-xl px-6", tagClassName)}
+                            textClassName="truncate"
+                        />
+                    </div>
+
+                    <div
+                        ref={membersContainerRef}
+                        className={cls(
+                            "w-full grid grid-cols-1 gap-8 flex-1",
+                            members.length >= 2 && "md:grid-cols-2",
+                            membersContainerClassName
+                        )}
+                    >
+                        {members.map((member) => (
+                            <div
+                                key={member.id}
+                                className={cls(
+                                    "flex flex-col gap-4",
+                                    memberVariant === "card" && "card rounded-theme-capped p-4",
+                                    memberClassName
+                                )}
+                            >
+                                <div className={cls("relative aspect-square rounded-theme-capped overflow-hidden", mediaWrapperClassName)}>
+                                    <MediaContent
+                                        imageSrc={member.imageSrc}
+                                        imageAlt={member.imageAlt || member.name}
+                                        videoSrc={member.videoSrc}
+                                        videoAriaLabel={member.videoAriaLabel}
+                                        imageClassName={cls("w-full h-full object-cover", mediaClassName)}
+                                    />
+                                </div>
+                                <p className={cls(
+                                    "text-xl md:text-3xl font-medium truncate",
+                                    shouldUseLightText ? "text-background" : "text-foreground",
+                                    nameClassName
+                                )}>
+                                    {member.name}
+                                </p>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+
+export default TeamCardTen;
diff --git a/src/components/sections/team/TeamCardTwo.tsx b/src/components/sections/team/TeamCardTwo.tsx
new file mode 100644
index 0000000..91928ec
--- /dev/null
+++ b/src/components/sections/team/TeamCardTwo.tsx
@@ -0,0 +1,235 @@
+"use client";
+
+import CardStack from "@/components/cardStack/CardStack";
+import MediaContent from "@/components/shared/MediaContent";
+import { cls } from "@/lib/utils";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, GridVariant, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type TeamCardTwoGridVariant = GridVariant;
+
+type SocialLink = {
+    icon: LucideIcon;
+    url: string;
+};
+
+type TeamMember = {
+    id: string;
+    name: string;
+    role: string;
+    description: string;
+    imageSrc?: string;
+    videoSrc?: string;
+    imageAlt?: string;
+    videoAriaLabel?: string;
+    socialLinks?: SocialLink[];
+};
+
+interface TeamCardTwoProps {
+    members: TeamMember[];
+    carouselMode?: "auto" | "buttons";
+    gridVariant: TeamCardTwoGridVariant;
+    uniformGridCustomHeightClasses?: string;
+    animationType: CardAnimationType;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    tagAnimation?: ButtonAnimationType;
+    buttons?: ButtonConfig[];
+    buttonAnimation?: ButtonAnimationType;
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    cardClassName?: string;
+    textBoxTitleClassName?: string;
+    textBoxTitleImageWrapperClassName?: string;
+    textBoxTitleImageClassName?: string;
+    textBoxDescriptionClassName?: string;
+    imageClassName?: string;
+    overlayClassName?: string;
+    nameClassName?: string;
+    roleClassName?: string;
+    memberDescriptionClassName?: string;
+    socialLinksClassName?: string;
+    socialIconClassName?: string;
+    gridClassName?: string;
+    carouselClassName?: string;
+    controlsClassName?: string;
+    textBoxClassName?: string;
+    textBoxTagClassName?: string;
+    textBoxButtonContainerClassName?: string;
+    textBoxButtonClassName?: string;
+    textBoxButtonTextClassName?: string;
+}
+
+interface TeamMemberCardProps {
+    member: TeamMember;
+    cardClassName?: string;
+    imageClassName?: string;
+    overlayClassName?: string;
+    nameClassName?: string;
+    roleClassName?: string;
+    memberDescriptionClassName?: string;
+    socialLinksClassName?: string;
+    socialIconClassName?: string;
+}
+
+const TeamMemberCard = ({
+    member,
+    cardClassName = "",
+    imageClassName = "",
+    overlayClassName = "",
+    nameClassName = "",
+    roleClassName = "",
+    memberDescriptionClassName = "",
+    socialLinksClassName = "",
+    socialIconClassName = "",
+}: TeamMemberCardProps) => {
+    return (
+        <div className={cls("relative h-full rounded-theme-capped overflow-hidden group", cardClassName)}>
+            <MediaContent
+                imageSrc={member.imageSrc}
+                videoSrc={member.videoSrc}
+                imageAlt={member.imageAlt || member.name}
+                videoAriaLabel={member.videoAriaLabel || member.name}
+                imageClassName={cls("relative z-1 w-full h-full object-cover", imageClassName)}
+            />
+
+            <div className={cls("!absolute z-10 bottom-6 left-6 right-6 card backdrop-blur-xs p-6 flex flex-col gap-2 rounded-theme-capped", overlayClassName)}>
+                <div className="relative z-1 flex items-start justify-between">
+                    <h3 className={cls("text-2xl font-medium text-foreground leading-[1.1] truncate", nameClassName)}>
+                        {member.name}
+                    </h3>
+                    <div className="relative z-1 secondary-button px-3 py-1 rounded-theme" >
+                        <p className={cls("text-xs text-secondary-cta-text leading-[1.1] truncate", roleClassName)}>
+                            {member.role}
+                        </p>
+                    </div>
+                </div>
+
+                <p className={cls("relative z-1 text-base text-foreground leading-[1.1]", memberDescriptionClassName)}>
+                    {member.description}
+                </p>
+
+                {member.socialLinks && member.socialLinks.length > 0 && (
+                    <div className={cls("relative z-1 flex gap-3 mt-1", socialLinksClassName)}>
+                        {member.socialLinks.map((link, index) => (
+                            <a
+                                key={index}
+                                href={link.url}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className={cls("primary-button h-9 aspect-square w-auto flex items-center justify-center rounded-theme", socialIconClassName)}
+                            >
+                                <link.icon className="h-4/10 text-primary-cta-text" strokeWidth={1.5} />
+                            </a>
+                        ))}
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};
+
+const TeamCardTwo = ({
+    members,
+    carouselMode = "buttons",
+    gridVariant,
+    uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",
+    animationType,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    tagAnimation = "opacity",
+    buttons = [],
+    buttonAnimation = "slide-up",
+    textboxLayout,
+    useInvertedBackground = false,
+    ariaLabel = "Team section",
+    className = "",
+    containerClassName = "",
+    cardClassName = "",
+    textBoxTitleClassName = "",
+    textBoxTitleImageWrapperClassName = "",
+    textBoxTitleImageClassName = "",
+    textBoxDescriptionClassName = "",
+    imageClassName = "",
+    overlayClassName = "",
+    nameClassName = "",
+    roleClassName = "",
+    memberDescriptionClassName = "",
+    socialLinksClassName = "",
+    socialIconClassName = "",
+    gridClassName = "",
+    carouselClassName = "",
+    controlsClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+}: TeamCardTwoProps) => {
+    const customGridRows = (gridVariant === "bento-grid" || gridVariant === "bento-grid-inverted")
+        ? "md:grid-rows-[22rem_22rem] 2xl:grid-rows-[26rem_26rem]"
+        : undefined;
+
+    return (
+        <CardStack
+            mode={carouselMode}
+            gridVariant={gridVariant}
+            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+            gridRowsClassName={customGridRows}
+            animationType={animationType}
+            
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            tagAnimation={tagAnimation}
+            buttons={buttons}
+            buttonAnimation={buttonAnimation}
+            textboxLayout={textboxLayout}
+            useInvertedBackground={useInvertedBackground}
+            className={className}
+            containerClassName={containerClassName}
+            gridClassName={gridClassName}
+            carouselClassName={carouselClassName}
+            controlsClassName={controlsClassName}
+            textBoxClassName={textBoxClassName}
+            titleClassName={textBoxTitleClassName}
+            titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
+            titleImageClassName={textBoxTitleImageClassName}
+            descriptionClassName={textBoxDescriptionClassName}
+            tagClassName={textBoxTagClassName}
+            buttonContainerClassName={textBoxButtonContainerClassName}
+            buttonClassName={textBoxButtonClassName}
+            buttonTextClassName={textBoxButtonTextClassName}
+            ariaLabel={ariaLabel}
+        >
+            {members.map((member, index) => (
+                <TeamMemberCard
+                    key={`${member.id}-${index}`}
+                    member={member}
+                    cardClassName={cardClassName}
+                    imageClassName={imageClassName}
+                    overlayClassName={overlayClassName}
+                    nameClassName={nameClassName}
+                    roleClassName={roleClassName}
+                    memberDescriptionClassName={memberDescriptionClassName}
+                    socialLinksClassName={socialLinksClassName}
+                    socialIconClassName={socialIconClassName}
+                />
+            ))}
+        </CardStack>
+    );
+};
+
+export default TeamCardTwo;
diff --git a/src/components/sections/team/index.ts b/src/components/sections/team/index.ts
new file mode 100644
index 0000000..4f378bc
--- /dev/null
+++ b/src/components/sections/team/index.ts
@@ -0,0 +1,6 @@
+export { default as TeamCardEleven } from './TeamCardEleven';
+export { default as TeamCardFive } from './TeamCardFive';
+export { default as TeamCardOne } from './TeamCardOne';
+export { default as TeamCardSix } from './TeamCardSix';
+export { default as TeamCardTen } from './TeamCardTen';
+export { default as TeamCardTwo } from './TeamCardTwo';
diff --git a/src/components/sections/testimonial/TestimonialCardFifteen.tsx b/src/components/sections/testimonial/TestimonialCardFifteen.tsx
new file mode 100644
index 0000000..995beb1
--- /dev/null
+++ b/src/components/sections/testimonial/TestimonialCardFifteen.tsx
@@ -0,0 +1,116 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Star } from "lucide-react";
+import TextAnimation from "@/components/text/TextAnimation";
+import AvatarGroup from "@/components/shared/AvatarGroup";
+import type { Avatar } from "@/components/shared/AvatarGroup";
+import { cls } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import { useButtonAnimation } from "@/components/hooks/useButtonAnimation";
+import type { ButtonAnimationType } from "@/components/cardStack/types";
+import type { InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+interface TestimonialCardFifteenProps {
+    testimonial: string;
+    rating: number;
+    author: string;
+    avatars: Avatar[];
+    ratingAnimation: ButtonAnimationType;
+    avatarsAnimation: ButtonAnimationType;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    ratingClassName?: string;
+    starClassName?: string;
+    testimonialClassName?: string;
+    avatarGroupClassName?: string;
+    avatarClassName?: string;
+    avatarImageClassName?: string;
+}
+
+const TestimonialCardFifteen = ({
+    testimonial,
+    rating,
+    author,
+    avatars,
+    ratingAnimation,
+    avatarsAnimation,
+    useInvertedBackground = false,
+    ariaLabel = "Testimonial section",
+    className = "",
+    containerClassName = "",
+    ratingClassName = "",
+    starClassName = "",
+    testimonialClassName = "",
+    avatarGroupClassName = "",
+    avatarClassName = "",
+    avatarImageClassName = "",
+}: TestimonialCardFifteenProps) => {
+    const theme = useTheme();
+    const { containerRef: ratingContainerRef } = useButtonAnimation({ animationType: ratingAnimation });
+    const [isMobile, setIsMobile] = useState(false);
+
+    useEffect(() => {
+        const checkMobile = () => setIsMobile(window.innerWidth < 768);
+        checkMobile();
+        window.addEventListener("resize", checkMobile);
+        return () => window.removeEventListener("resize", checkMobile);
+    }, []);
+
+    return (
+        <section
+            aria-label={ariaLabel}
+            className={cls("relative py-20 w-full", useInvertedBackground && "bg-foreground", className)}
+        >
+            <div className={cls("w-content-width mx-auto flex flex-col items-center gap-6", containerClassName)}>
+                <div ref={ratingContainerRef} className={cls("relative z-1 flex gap-1 -mb-1", ratingClassName)}>
+                    {Array.from({ length: 5 }).map((_, index) => (
+                        <Star
+                            key={index}
+                            className={cls(
+                                "h-6 w-auto text-accent",
+                                index < rating ? "fill-accent" : "fill-transparent",
+                                starClassName
+                            )}
+                            strokeWidth={1.5}
+                        />
+                    ))}
+                </div>
+
+                <TextAnimation
+                    type={theme.defaultTextAnimation}
+                    text={testimonial}
+                    variant="words-trigger"
+                    as="p"
+                    className={cls(
+                        "text-3xl md:text-5xl font-medium text-balance text-center leading-tight",
+                        useInvertedBackground && "text-background",
+                        testimonialClassName
+                    )}
+                />
+
+                <p className={cls(
+                    "text-xl text-center mb-1",
+                    useInvertedBackground && "text-background"
+                )}>
+                    {author}
+                </p>
+
+                <AvatarGroup
+                    avatars={avatars}
+                    maxVisible={isMobile ? 3 : 6}
+                    animationType={avatarsAnimation}
+                    className={cls("justify-center", avatarGroupClassName)}
+                    avatarClassName={avatarClassName}
+                    avatarImageClassName={cls("h-[var(--width-17_5)] md:h-[var(--width-5)]", avatarImageClassName)}
+                    avatarOverlapClassName="-ml-8"
+                />
+            </div>
+        </section>
+    );
+};
+
+
+export default TestimonialCardFifteen;
diff --git a/src/components/sections/testimonial/TestimonialCardFive.tsx b/src/components/sections/testimonial/TestimonialCardFive.tsx
new file mode 100644
index 0000000..4695ef6
--- /dev/null
+++ b/src/components/sections/testimonial/TestimonialCardFive.tsx
@@ -0,0 +1,234 @@
+"use client";
+
+
+
+
+import FullWidthCarousel from "@/components/cardStack/layouts/carousels/FullWidthCarousel";
+import MediaContent from "@/components/shared/MediaContent";
+import Tag from "@/components/shared/Tag";
+import TestimonialAuthor from "@/components/shared/TestimonialAuthor";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, ButtonAnimationType, TitleSegment, TextboxLayout, InvertedBackground } from "@/components/cardStack/types";
+
+type Testimonial = {
+    id: string;
+    name: string;
+    date: string;
+    title: string;
+    quote: string;
+    tag: string;
+    avatarSrc: string;
+    avatarAlt?: string;
+    imageSrc?: string;
+    videoSrc?: string;
+    imageAlt?: string;
+    videoAriaLabel?: string;
+};
+
+interface TestimonialCardFiveProps {
+    testimonials: Testimonial[];
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    tagAnimation?: ButtonAnimationType;
+    buttons?: ButtonConfig[];
+    buttonAnimation?: ButtonAnimationType;
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    cardClassName?: string;
+    textBoxTitleClassName?: string;
+    textBoxTitleImageWrapperClassName?: string;
+    textBoxTitleImageClassName?: string;
+    textBoxDescriptionClassName?: string;
+    cardTagClassName?: string;
+    cardTitleClassName?: string;
+    cardQuoteClassName?: string;
+    cardAuthorClassName?: string;
+    cardAvatarWrapperClassName?: string;
+    cardAvatarClassName?: string;
+    cardNameClassName?: string;
+    cardDateClassName?: string;
+    cardImageClassName?: string;
+    carouselClassName?: string;
+    dotsClassName?: string;
+    textBoxClassName?: string;
+    textBoxTagClassName?: string;
+    textBoxButtonContainerClassName?: string;
+    textBoxButtonClassName?: string;
+    textBoxButtonTextClassName?: string;
+}
+
+interface TestimonialCardProps {
+    testimonial: Testimonial;
+    useInvertedBackground: boolean;
+    cardClassName?: string;
+    tagClassName?: string;
+    titleClassName?: string;
+    quoteClassName?: string;
+    authorClassName?: string;
+    avatarWrapperClassName?: string;
+    avatarClassName?: string;
+    nameClassName?: string;
+    dateClassName?: string;
+    imageClassName?: string;
+}
+
+const TestimonialCard = ({
+    testimonial,
+    useInvertedBackground,
+    cardClassName = "",
+    tagClassName = "",
+    titleClassName = "",
+    quoteClassName = "",
+    authorClassName = "",
+    avatarWrapperClassName = "",
+    avatarClassName = "",
+    nameClassName = "",
+    dateClassName = "",
+    imageClassName = "",
+}: TestimonialCardProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    return (
+        <div className={cls("card h-full rounded-theme-capped overflow-hidden flex flex-col-reverse md:grid md:grid-cols-2 gap-0", cardClassName)}>
+            <div className="relative z-1 p-6 md:p-10 flex flex-col gap-10 justify-between flex-1 md:flex-auto">
+                <div className="flex flex-col gap-4 md:gap-6">
+                    <Tag
+                        text={testimonial.tag}
+                        useInvertedBackground={useInvertedBackground}
+                        className={tagClassName}
+                    />
+
+                    <div className="flex flex-col gap-4 overflow-hidden">
+                        <h3 className={cls("text-4xl font-medium leading-tight line-clamp-3", shouldUseLightText ? "text-background" : "text-foreground", titleClassName)}>
+                            {testimonial.title}
+                        </h3>
+                        <blockquote className={cls("text-base md:text-lg leading-tight line-clamp-10", shouldUseLightText ? "text-background/75" : "text-foreground/75", quoteClassName)}>
+                            {testimonial.quote}
+                        </blockquote>
+                    </div>
+                </div>
+
+                <TestimonialAuthor
+                    name={testimonial.name}
+                    subtitle={testimonial.date}
+                    imageSrc={testimonial.avatarSrc}
+                    imageAlt={testimonial.avatarAlt}
+                    useInvertedBackground={useInvertedBackground}
+                    className={authorClassName}
+                    imageWrapperClassName={avatarWrapperClassName}
+                    imageClassName={avatarClassName}
+                    nameClassName={nameClassName}
+                    subtitleClassName={dateClassName}
+                />
+            </div>
+
+            <div className="relative z-1 min-h-0 aspect-square">
+                <MediaContent
+                    imageSrc={testimonial.imageSrc}
+                    videoSrc={testimonial.videoSrc}
+                    imageAlt={testimonial.imageAlt}
+                    videoAriaLabel={testimonial.videoAriaLabel}
+                    imageClassName={cls("!absolute inset-0 w-full h-full object-cover !rounded-none", imageClassName)}
+                />
+            </div>
+        </div>
+    );
+};
+
+
+const TestimonialCardFive = ({
+    testimonials,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    tagAnimation = "opacity",
+    buttons = [],
+    buttonAnimation = "slide-up",
+    textboxLayout,
+    useInvertedBackground = false,
+    ariaLabel = "Testimonials section",
+    className = "",
+    containerClassName = "",
+    cardClassName = "",
+    textBoxTitleClassName = "",
+    textBoxTitleImageWrapperClassName = "",
+    textBoxTitleImageClassName = "",
+    textBoxDescriptionClassName = "",
+    cardTagClassName = "",
+    cardTitleClassName = "",
+    cardQuoteClassName = "",
+    cardAuthorClassName = "",
+    cardAvatarWrapperClassName = "",
+    cardAvatarClassName = "",
+    cardNameClassName = "",
+    cardDateClassName = "",
+    cardImageClassName = "",
+    carouselClassName = "",
+    dotsClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+}: TestimonialCardFiveProps) => {
+    return (
+        <FullWidthCarousel
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            tagAnimation={tagAnimation}
+            buttons={buttons}
+            buttonAnimation={buttonAnimation}
+            textboxLayout={textboxLayout}
+            useInvertedBackground={useInvertedBackground}
+            className={className}
+            containerClassName={containerClassName}
+            carouselClassName={carouselClassName}
+            dotsClassName={dotsClassName}
+            textBoxClassName={textBoxClassName}
+            titleClassName={textBoxTitleClassName}
+            titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
+            titleImageClassName={textBoxTitleImageClassName}
+            descriptionClassName={textBoxDescriptionClassName}
+            tagClassName={textBoxTagClassName}
+            buttonContainerClassName={textBoxButtonContainerClassName}
+            buttonClassName={textBoxButtonClassName}
+            buttonTextClassName={textBoxButtonTextClassName}
+            ariaLabel={ariaLabel}
+        >
+            {testimonials.map((testimonial, index) => (
+                <TestimonialCard
+                    key={`${testimonial.id}-${index}`}
+                    testimonial={testimonial}
+                    useInvertedBackground={useInvertedBackground}
+                    cardClassName={cardClassName}
+                    tagClassName={cardTagClassName}
+                    titleClassName={cardTitleClassName}
+                    quoteClassName={cardQuoteClassName}
+                    authorClassName={cardAuthorClassName}
+                    avatarWrapperClassName={cardAvatarWrapperClassName}
+                    avatarClassName={cardAvatarClassName}
+                    nameClassName={cardNameClassName}
+                    dateClassName={cardDateClassName}
+                    imageClassName={cardImageClassName}
+                />
+            ))}
+        </FullWidthCarousel>
+    );
+};
+
+
+export default TestimonialCardFive;
diff --git a/src/components/sections/testimonial/TestimonialCardOne.tsx b/src/components/sections/testimonial/TestimonialCardOne.tsx
new file mode 100644
index 0000000..2c304a7
--- /dev/null
+++ b/src/components/sections/testimonial/TestimonialCardOne.tsx
@@ -0,0 +1,214 @@
+"use client";
+
+import CardStack from "@/components/cardStack/CardStack";
+import MediaContent from "@/components/shared/MediaContent";
+import { cls } from "@/lib/utils";
+import { Star } from "lucide-react";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, ButtonAnimationType, CardAnimationTypeWith3D, GridVariant, TitleSegment, TextboxLayout, InvertedBackground } from "@/components/cardStack/types";
+
+type Testimonial = {
+    id: string;
+    name: string;
+    role: string;
+    company: string;
+    rating: number;
+    imageSrc?: string;
+    videoSrc?: string;
+    imageAlt?: string;
+    videoAriaLabel?: string;
+};
+
+interface TestimonialCardOneProps {
+    testimonials: Testimonial[];
+    carouselMode?: "auto" | "buttons";
+    uniformGridCustomHeightClasses?: string;
+    gridVariant: GridVariant;
+    animationType: CardAnimationTypeWith3D;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    tagAnimation?: ButtonAnimationType;
+    buttons?: ButtonConfig[];
+    buttonAnimation?: ButtonAnimationType;
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    cardClassName?: string;
+    textBoxTitleClassName?: string;
+    textBoxTitleImageWrapperClassName?: string;
+    textBoxTitleImageClassName?: string;
+    textBoxDescriptionClassName?: string;
+    imageClassName?: string;
+    overlayClassName?: string;
+    ratingClassName?: string;
+    nameClassName?: string;
+    roleClassName?: string;
+    companyClassName?: string;
+    gridClassName?: string;
+    carouselClassName?: string;
+    controlsClassName?: string;
+    textBoxClassName?: string;
+    textBoxTagClassName?: string;
+    textBoxButtonContainerClassName?: string;
+    textBoxButtonClassName?: string;
+    textBoxButtonTextClassName?: string;
+}
+
+interface TestimonialCardProps {
+    testimonial: Testimonial;
+    cardClassName?: string;
+    imageClassName?: string;
+    overlayClassName?: string;
+    ratingClassName?: string;
+    nameClassName?: string;
+    roleClassName?: string;
+    companyClassName?: string;
+}
+
+const TestimonialCard = ({
+    testimonial,
+    cardClassName = "",
+    imageClassName = "",
+    overlayClassName = "",
+    ratingClassName = "",
+    nameClassName = "",
+    roleClassName = "",
+    companyClassName = "",
+}: TestimonialCardProps) => {
+    return (
+        <div className={cls("relative h-full rounded-theme-capped overflow-hidden group", cardClassName)}>
+            <MediaContent
+                imageSrc={testimonial.imageSrc}
+                videoSrc={testimonial.videoSrc}
+                imageAlt={testimonial.imageAlt || testimonial.name}
+                videoAriaLabel={testimonial.videoAriaLabel || testimonial.name}
+                imageClassName={cls("relative z-1 w-full h-full object-cover!", imageClassName)}
+            />
+
+            <div className={cls("!absolute z-1 bottom-6 left-6 right-6 card backdrop-blur-xs p-6 flex flex-col gap-3 rounded-theme-capped", overlayClassName)}>
+                <div className={cls("relative z-1 flex gap-1", ratingClassName)}>
+                    {Array.from({ length: 5 }).map((_, index) => (
+                        <Star
+                            key={index}
+                            className={cls(
+                                "h-5 w-auto text-accent",
+                                index < testimonial.rating ? "fill-accent" : "fill-transparent"
+                            )}
+                            strokeWidth={1.5}
+                        />
+                    ))}
+                </div>
+
+                <h3 className={cls("relative z-1 text-2xl font-medium text-foreground leading-[1.1] mt-1", nameClassName)}>
+                    {testimonial.name}
+                </h3>
+
+                <div className="relative z-1 flex flex-col gap-1">
+                    <p className={cls("text-base text-foreground leading-[1.1]", roleClassName)}>
+                        {testimonial.role}
+                    </p>
+                    <p className={cls("text-base text-foreground leading-[1.1]", companyClassName)}>
+                        {testimonial.company}
+                    </p>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+const TestimonialCardOne = ({
+    testimonials,
+    carouselMode = "buttons",
+    uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",
+    gridVariant,
+    animationType,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    tagAnimation = "opacity",
+    buttons = [],
+    buttonAnimation = "slide-up",
+    textboxLayout,
+    useInvertedBackground = false,
+    ariaLabel = "Testimonials section",
+    className = "",
+    containerClassName = "",
+    cardClassName = "",
+    textBoxTitleClassName = "",
+    textBoxTitleImageWrapperClassName = "",
+    textBoxTitleImageClassName = "",
+    textBoxDescriptionClassName = "",
+    imageClassName = "",
+    overlayClassName = "",
+    ratingClassName = "",
+    nameClassName = "",
+    roleClassName = "",
+    companyClassName = "",
+    gridClassName = "",
+    carouselClassName = "",
+    controlsClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+}: TestimonialCardOneProps) => {
+    return (
+        <CardStack
+            mode={carouselMode}
+            gridVariant={gridVariant}
+            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+            animationType={animationType}
+            supports3DAnimation={true}
+
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            tagAnimation={tagAnimation}
+            buttons={buttons}
+            buttonAnimation={buttonAnimation}
+            textboxLayout={textboxLayout}
+            useInvertedBackground={useInvertedBackground}
+            className={className}
+            containerClassName={containerClassName}
+            gridClassName={gridClassName}
+            carouselClassName={carouselClassName}
+            controlsClassName={controlsClassName}
+            textBoxClassName={textBoxClassName}
+            titleClassName={textBoxTitleClassName}
+            titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
+            titleImageClassName={textBoxTitleImageClassName}
+            descriptionClassName={textBoxDescriptionClassName}
+            tagClassName={textBoxTagClassName}
+            buttonContainerClassName={textBoxButtonContainerClassName}
+            buttonClassName={textBoxButtonClassName}
+            buttonTextClassName={textBoxButtonTextClassName}
+            ariaLabel={ariaLabel}
+        >
+            {testimonials.map((testimonial, index) => (
+                <TestimonialCard
+                    key={`${testimonial.id}-${index}`}
+                    testimonial={testimonial}
+                    cardClassName={cardClassName}
+                    imageClassName={imageClassName}
+                    overlayClassName={overlayClassName}
+                    ratingClassName={ratingClassName}
+                    nameClassName={nameClassName}
+                    roleClassName={roleClassName}
+                    companyClassName={companyClassName}
+                />
+            ))}
+        </CardStack>
+    );
+};
+
+export default TestimonialCardOne;
diff --git a/src/components/sections/testimonial/TestimonialCardSix.tsx b/src/components/sections/testimonial/TestimonialCardSix.tsx
new file mode 100644
index 0000000..15ef1c6
--- /dev/null
+++ b/src/components/sections/testimonial/TestimonialCardSix.tsx
@@ -0,0 +1,201 @@
+"use client";
+
+
+import AutoCarousel from "@/components/cardStack/layouts/carousels/AutoCarousel";
+import TestimonialAuthor from "@/components/shared/TestimonialAuthor";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import { Quote } from "lucide-react";
+import type { LucideIcon } from "lucide-react";
+import type { CardAnimationType, ButtonConfig, ButtonAnimationType, TitleSegment, TextboxLayout, InvertedBackground } from "@/components/cardStack/types";
+
+type Testimonial = {
+    id: string;
+    name: string;
+    handle: string;
+    testimonial: string;
+    imageSrc?: string;
+    imageAlt?: string;
+    icon?: LucideIcon;
+};
+
+interface TestimonialCardSixProps {
+    testimonials: Testimonial[];
+    animationType: CardAnimationType;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    tagAnimation?: ButtonAnimationType;
+    buttons?: ButtonConfig[];
+    buttonAnimation?: ButtonAnimationType;
+    speed?: number;
+    topMarqueeDirection?: "left" | "right";
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    carouselClassName?: string;
+    bottomCarouselClassName?: string;
+    cardClassName?: string;
+    testimonialClassName?: string;
+    imageWrapperClassName?: string;
+    imageClassName?: string;
+    iconClassName?: string;
+    nameClassName?: string;
+    handleClassName?: string;
+    textBoxClassName?: string;
+    textBoxTitleClassName?: string;
+    textBoxTitleImageWrapperClassName?: string;
+    textBoxTitleImageClassName?: string;
+    textBoxDescriptionClassName?: string;
+    textBoxTagClassName?: string;
+    textBoxButtonContainerClassName?: string;
+    textBoxButtonClassName?: string;
+    textBoxButtonTextClassName?: string;
+}
+
+interface TestimonialCardProps {
+    testimonial: Testimonial;
+    useInvertedBackground: boolean;
+    cardClassName?: string;
+    testimonialClassName?: string;
+    imageWrapperClassName?: string;
+    imageClassName?: string;
+    iconClassName?: string;
+    nameClassName?: string;
+    handleClassName?: string;
+}
+
+const TestimonialCard = ({
+    testimonial,
+    useInvertedBackground,
+    cardClassName = "",
+    testimonialClassName = "",
+    imageWrapperClassName = "",
+    imageClassName = "",
+    iconClassName = "",
+    nameClassName = "",
+    handleClassName = "",
+}: TestimonialCardProps) => {
+    const Icon = testimonial.icon || Quote;
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    return (
+        <div className={cls("relative h-full card rounded-theme-capped p-6 min-h-0 flex flex-col gap-10", cardClassName)}>
+            <p className={cls("relative z-1 text-lg leading-tight line-clamp-2", shouldUseLightText ? "text-background" : "text-foreground", testimonialClassName)}>
+                {testimonial.testimonial}
+            </p>
+
+            <TestimonialAuthor
+                name={testimonial.name}
+                subtitle={testimonial.handle}
+                imageSrc={testimonial.imageSrc}
+                imageAlt={testimonial.imageAlt}
+                icon={Icon}
+                useInvertedBackground={useInvertedBackground}
+                imageWrapperClassName={imageWrapperClassName}
+                imageClassName={imageClassName}
+                iconClassName={iconClassName}
+                nameClassName={nameClassName}
+                subtitleClassName={handleClassName}
+            />
+        </div>
+    );
+};
+
+
+const TestimonialCardSix = ({
+    testimonials,
+    animationType,
+    title,
+    titleSegments,
+    description,
+    textboxLayout,
+    useInvertedBackground = false,
+    tag,
+    tagIcon,
+    tagAnimation = "opacity",
+    buttons = [],
+    buttonAnimation = "slide-up",
+    speed = 40,
+    topMarqueeDirection = "left",
+    ariaLabel = "Testimonials section",
+    className = "",
+    containerClassName = "",
+    carouselClassName = "",
+    bottomCarouselClassName = "",
+    cardClassName = "",
+    testimonialClassName = "",
+    imageWrapperClassName = "",
+    imageClassName = "",
+    iconClassName = "",
+    nameClassName = "",
+    handleClassName = "",
+    textBoxClassName = "",
+    textBoxTitleClassName = "",
+    textBoxTitleImageWrapperClassName = "",
+    textBoxTitleImageClassName = "",
+    textBoxDescriptionClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+}: TestimonialCardSixProps) => {
+    return (
+        <AutoCarousel
+            speed={speed}
+            uniformGridCustomHeightClasses="min-h-none"
+            animationType={animationType}
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            tagAnimation={tagAnimation}
+            buttons={buttons}
+            buttonAnimation={buttonAnimation}
+            textboxLayout={textboxLayout}
+            useInvertedBackground={useInvertedBackground}
+            showTextBox={true}
+            dualMarquee={true}
+            topMarqueeDirection={topMarqueeDirection}
+            carouselClassName={carouselClassName}
+            bottomCarouselClassName={bottomCarouselClassName}
+            containerClassName={containerClassName}
+            className={className}
+            textBoxClassName={textBoxClassName}
+            titleClassName={textBoxTitleClassName}
+            titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
+            titleImageClassName={textBoxTitleImageClassName}
+            descriptionClassName={textBoxDescriptionClassName}
+            tagClassName={textBoxTagClassName}
+            buttonContainerClassName={textBoxButtonContainerClassName}
+            buttonClassName={textBoxButtonClassName}
+            buttonTextClassName={textBoxButtonTextClassName}
+            ariaLabel={ariaLabel}
+            itemClassName="w-60! md:w-carousel-item-3! xl:w-carousel-item-4!"
+        >
+            {testimonials.map((testimonial, index) => (
+                <TestimonialCard
+                    key={`${testimonial.id}-${index}`}
+                    testimonial={testimonial}
+                    useInvertedBackground={useInvertedBackground}
+                    cardClassName={cardClassName}
+                    testimonialClassName={testimonialClassName}
+                    imageWrapperClassName={imageWrapperClassName}
+                    imageClassName={imageClassName}
+                    iconClassName={iconClassName}
+                    nameClassName={nameClassName}
+                    handleClassName={handleClassName}
+                />
+            ))}
+        </AutoCarousel>
+    );
+};
+
+
+export default TestimonialCardSix;
\ No newline at end of file
diff --git a/src/components/sections/testimonial/TestimonialCardSixteen.tsx b/src/components/sections/testimonial/TestimonialCardSixteen.tsx
new file mode 100644
index 0000000..bb55e6a
--- /dev/null
+++ b/src/components/sections/testimonial/TestimonialCardSixteen.tsx
@@ -0,0 +1,238 @@
+"use client";
+
+
+import CardStack from "@/components/cardStack/CardStack";
+import MediaContent from "@/components/shared/MediaContent";
+import { cls } from "@/lib/utils";
+import { Star } from "lucide-react";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, ButtonAnimationType, CardAnimationTypeWith3D, TitleSegment, TextboxLayout, InvertedBackground } from "@/components/cardStack/types";
+
+type Testimonial = {
+    id: string;
+    name: string;
+    role: string;
+    company: string;
+    rating: number;
+    imageSrc?: string;
+    videoSrc?: string;
+    imageAlt?: string;
+    videoAriaLabel?: string;
+};
+
+type KpiItem = {
+    value: string;
+    label: string;
+};
+
+interface TestimonialCardSixteenProps {
+    testimonials: Testimonial[];
+    kpiItems: [KpiItem, KpiItem, KpiItem];
+    carouselMode?: "auto" | "buttons";
+    uniformGridCustomHeightClasses?: string;
+    animationType: CardAnimationTypeWith3D;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    tagAnimation?: ButtonAnimationType;
+    buttons?: ButtonConfig[];
+    buttonAnimation?: ButtonAnimationType;
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    cardClassName?: string;
+    textBoxTitleClassName?: string;
+    textBoxTitleImageWrapperClassName?: string;
+    textBoxTitleImageClassName?: string;
+    textBoxDescriptionClassName?: string;
+    imageClassName?: string;
+    overlayClassName?: string;
+    ratingClassName?: string;
+    nameClassName?: string;
+    roleClassName?: string;
+    companyClassName?: string;
+    gridClassName?: string;
+    carouselClassName?: string;
+    controlsClassName?: string;
+    textBoxClassName?: string;
+    textBoxTagClassName?: string;
+    textBoxButtonContainerClassName?: string;
+    textBoxButtonClassName?: string;
+    textBoxButtonTextClassName?: string;
+}
+
+interface TestimonialCardProps {
+    testimonial: Testimonial;
+    cardClassName?: string;
+    imageClassName?: string;
+    overlayClassName?: string;
+    ratingClassName?: string;
+    nameClassName?: string;
+    roleClassName?: string;
+    companyClassName?: string;
+}
+
+const TestimonialCard = ({
+    testimonial,
+    cardClassName = "",
+    imageClassName = "",
+    overlayClassName = "",
+    ratingClassName = "",
+    nameClassName = "",
+    roleClassName = "",
+    companyClassName = "",
+}: TestimonialCardProps) => {
+    return (
+        <div className={cls("relative h-full w-full max-w-full aspect-[8/10] rounded-theme-capped overflow-hidden group", cardClassName)}>
+            <MediaContent
+                imageSrc={testimonial.imageSrc}
+                videoSrc={testimonial.videoSrc}
+                imageAlt={testimonial.imageAlt || testimonial.name}
+                videoAriaLabel={testimonial.videoAriaLabel || testimonial.name}
+                imageClassName={cls("relative z-1 w-full h-full object-cover!", imageClassName)}
+            />
+
+            <div className={cls("!absolute z-1 bottom-6 left-6 right-6 card backdrop-blur-xs p-6 flex flex-col gap-3 rounded-theme-capped", overlayClassName)}>
+                <div className={cls("relative z-1 flex gap-1", ratingClassName)}>
+                    {Array.from({ length: 5 }).map((_, index) => (
+                        <Star
+                            key={index}
+                            className={cls(
+                                "h-5 w-auto text-accent",
+                                index < testimonial.rating ? "fill-accent" : "fill-transparent"
+                            )}
+                            strokeWidth={1.5}
+                        />
+                    ))}
+                </div>
+
+                <h3 className={cls("relative z-1 text-2xl font-medium text-foreground leading-[1.1] mt-1", nameClassName)}>
+                    {testimonial.name}
+                </h3>
+
+                <div className="relative z-1 flex flex-col gap-1">
+                    <p className={cls("text-base text-foreground leading-[1.1]", roleClassName)}>
+                        {testimonial.role}
+                    </p>
+                    <p className={cls("text-base text-foreground leading-[1.1]", companyClassName)}>
+                        {testimonial.company}
+                    </p>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+
+const TestimonialCardSixteen = ({
+    testimonials,
+    kpiItems,
+    carouselMode = "buttons",
+    uniformGridCustomHeightClasses = "min-h-none",
+    animationType,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    tagAnimation = "opacity",
+    buttons = [],
+    buttonAnimation = "slide-up",
+    textboxLayout,
+    useInvertedBackground = false,
+    ariaLabel = "Testimonials section",
+    className = "",
+    containerClassName = "",
+    cardClassName = "",
+    textBoxTitleClassName = "",
+    textBoxTitleImageWrapperClassName = "",
+    textBoxTitleImageClassName = "",
+    textBoxDescriptionClassName = "",
+    imageClassName = "",
+    overlayClassName = "",
+    ratingClassName = "",
+    nameClassName = "",
+    roleClassName = "",
+    companyClassName = "",
+    gridClassName = "",
+    carouselClassName = "",
+    controlsClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+}: TestimonialCardSixteenProps) => {
+    const kpiSection = (
+        <div className="card rounded-theme-capped p-8 md:py-16 flex flex-col md:flex-row items-center justify-between">
+            {kpiItems.map((item, index) => (
+                <div key={index} className="flex flex-col md:flex-row items-center w-full md:flex-1">
+                    <div className="flex flex-col items-center text-center flex-1 py-4 md:py-0 gap-1">
+                        <h3 className="text-5xl font-medium text-foreground">{item.value}</h3>
+                        <p className="text-base text-foreground">{item.label}</p>
+                    </div>
+                    {index < 2 && (
+                        <div className="w-full h-px md:h-[calc(var(--text-5xl)+var(--text-base))] md:w-px bg-foreground" />
+                    )}
+                </div>
+            ))}
+        </div>
+    );
+
+    return (
+        <CardStack
+            mode={carouselMode}
+            gridVariant="uniform-all-items-equal"
+            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+            animationType={animationType}
+            supports3DAnimation={true}
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            tagAnimation={tagAnimation}
+            buttons={buttons}
+            buttonAnimation={buttonAnimation}
+            textboxLayout={textboxLayout}
+            useInvertedBackground={useInvertedBackground}
+            bottomContent={kpiSection}
+            className={className}
+            containerClassName={containerClassName}
+            gridClassName={gridClassName}
+            carouselClassName={carouselClassName}
+            controlsClassName={controlsClassName}
+            textBoxClassName={textBoxClassName}
+            titleClassName={textBoxTitleClassName}
+            titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
+            titleImageClassName={textBoxTitleImageClassName}
+            descriptionClassName={textBoxDescriptionClassName}
+            tagClassName={textBoxTagClassName}
+            buttonContainerClassName={textBoxButtonContainerClassName}
+            buttonClassName={textBoxButtonClassName}
+            buttonTextClassName={textBoxButtonTextClassName}
+            ariaLabel={ariaLabel}
+        >
+            {testimonials.map((testimonial, index) => (
+                <TestimonialCard
+                    key={`${testimonial.id}-${index}`}
+                    testimonial={testimonial}
+                    cardClassName={cardClassName}
+                    imageClassName={imageClassName}
+                    overlayClassName={overlayClassName}
+                    ratingClassName={ratingClassName}
+                    nameClassName={nameClassName}
+                    roleClassName={roleClassName}
+                    companyClassName={companyClassName}
+                />
+            ))}
+        </CardStack>
+    );
+};
+
+
+export default TestimonialCardSixteen;
diff --git a/src/components/sections/testimonial/TestimonialCardTen.tsx b/src/components/sections/testimonial/TestimonialCardTen.tsx
new file mode 100644
index 0000000..654169d
--- /dev/null
+++ b/src/components/sections/testimonial/TestimonialCardTen.tsx
@@ -0,0 +1,233 @@
+"use client";
+
+import { useState } from "react";
+import { ArrowLeft, ArrowRight } from "lucide-react";
+import CardStackTextBox from "@/components/cardStack/CardStackTextBox";
+import MediaContent from "@/components/shared/MediaContent";
+import AnimationContainer from "@/components/sections/AnimationContainer";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, ButtonAnimationType, TitleSegment } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+interface Testimonial {
+    id: string;
+    title: string;
+    quote: string;
+    name: string;
+    role: string;
+    imageSrc?: string;
+    videoSrc?: string;
+    imageAlt?: string;
+    videoAriaLabel?: string;
+}
+
+interface TestimonialCardTenProps {
+    testimonials: Testimonial[];
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    tagAnimation?: ButtonAnimationType;
+    buttons?: ButtonConfig[];
+    buttonAnimation?: ButtonAnimationType;
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    textBoxTitleClassName?: string;
+    textBoxDescriptionClassName?: string;
+    textBoxClassName?: string;
+    textBoxTagClassName?: string;
+    textBoxButtonContainerClassName?: string;
+    textBoxButtonClassName?: string;
+    textBoxButtonTextClassName?: string;
+    titleImageWrapperClassName?: string;
+    titleImageClassName?: string;
+    contentClassName?: string;
+    quoteCardClassName?: string;
+    testimonialTitleClassName?: string;
+    quoteClassName?: string;
+    nameClassName?: string;
+    roleClassName?: string;
+    navigationClassName?: string;
+    navigationButtonClassName?: string;
+    mediaCardClassName?: string;
+    mediaClassName?: string;
+}
+
+const TestimonialCardTen = ({
+    testimonials,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    tagAnimation = "opacity",
+    buttons = [],
+    buttonAnimation = "slide-up",
+    textboxLayout,
+    useInvertedBackground = false,
+    ariaLabel = "Testimonials section",
+    className = "",
+    containerClassName = "",
+    textBoxTitleClassName = "",
+    textBoxDescriptionClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+    titleImageWrapperClassName = "",
+    titleImageClassName = "",
+    contentClassName = "",
+    quoteCardClassName = "",
+    testimonialTitleClassName = "",
+    quoteClassName = "",
+    nameClassName = "",
+    roleClassName = "",
+    navigationClassName = "",
+    navigationButtonClassName = "",
+    mediaCardClassName = "",
+    mediaClassName = "",
+}: TestimonialCardTenProps) => {
+    const [activeIndex, setActiveIndex] = useState(0);
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    const handlePrev = () => {
+        setActiveIndex((prev) => (prev === 0 ? testimonials.length - 1 : prev - 1));
+    };
+
+    const handleNext = () => {
+        setActiveIndex((prev) => (prev === testimonials.length - 1 ? 0 : prev + 1));
+    };
+
+    const activeTestimonial = testimonials[activeIndex];
+
+    return (
+        <section
+            aria-label={ariaLabel}
+            className={cls("relative py-20 w-full", useInvertedBackground && "bg-foreground", className)}
+        >
+            <div className={cls("w-content-width mx-auto flex flex-col gap-10", containerClassName)}>
+                <CardStackTextBox
+                    title={title}
+                    titleSegments={titleSegments}
+                    description={description}
+                    tag={tag}
+                    tagIcon={tagIcon}
+                    tagAnimation={tagAnimation}
+                    buttons={buttons}
+                    buttonAnimation={buttonAnimation}
+                    textboxLayout={textboxLayout}
+                    useInvertedBackground={useInvertedBackground}
+                    textBoxClassName={textBoxClassName}
+                    titleClassName={textBoxTitleClassName}
+                    titleImageWrapperClassName={titleImageWrapperClassName}
+                    titleImageClassName={titleImageClassName}
+                    descriptionClassName={textBoxDescriptionClassName}
+                    tagClassName={textBoxTagClassName}
+                    buttonContainerClassName={textBoxButtonContainerClassName}
+                    buttonClassName={textBoxButtonClassName}
+                    buttonTextClassName={textBoxButtonTextClassName}
+                />
+
+                <div className={cls(
+                    "grid grid-cols-1 gap-6 md:grid-cols-2",
+                    contentClassName
+                )}>
+                    <div className={cls(
+                        "flex flex-col justify-between gap-6 card rounded-theme-capped p-6 md:p-10",
+                        quoteCardClassName
+                    )}>
+                        <AnimationContainer key={activeIndex} animationType="fade" className="relative z-1 flex flex-col justify-between gap-6 flex-1">
+                            <div className="flex flex-col gap-3">
+                                <h3 className={cls(
+                                    "text-2xl md:text-3xl font-medium leading-tight",
+                                    shouldUseLightText ? "text-background" : "text-foreground",
+                                    testimonialTitleClassName
+                                )}>
+                                    {activeTestimonial.title}
+                                </h3>
+
+                                <blockquote className={cls(
+                                    "text-base md:text-lg leading-tight",
+                                    shouldUseLightText ? "text-background/75" : "text-foreground/75",
+                                    quoteClassName
+                                )}>
+                                    &ldquo;{activeTestimonial.quote}&rdquo;
+                                </blockquote>
+                            </div>
+
+                            <div className={cls(
+                                "w-full h-px md:hidden",
+                                shouldUseLightText ? "bg-background/20" : "bg-foreground/20"
+                            )} />
+
+                            <div className={cls("flex items-center justify-between gap-4", navigationClassName)}>
+                                <div className="flex flex-col">
+                                    <p className={cls(
+                                        "text-base leading-tight font-medium",
+                                        shouldUseLightText ? "text-background" : "text-foreground",
+                                        nameClassName
+                                    )}>
+                                        {activeTestimonial.name}
+                                    </p>
+                                    <p className={cls(
+                                        "text-sm leading-tight",
+                                        shouldUseLightText ? "text-background/75" : "text-foreground/75",
+                                        roleClassName
+                                    )}>
+                                        {activeTestimonial.role}
+                                    </p>
+                                </div>
+
+                                <div className="flex gap-4">
+                                    <button
+                                        onClick={handlePrev}
+                                        aria-label="Previous testimonial"
+                                        className={cls(
+                                            "relative cursor-pointer h-9 w-auto aspect-square rounded-theme flex items-center justify-center primary-button",
+                                            navigationButtonClassName
+                                        )}
+                                    >
+                                        <ArrowLeft className="h-4/10 w-4/10 text-primary-cta-text" strokeWidth={1.5} />
+                                    </button>
+                                    <button
+                                        onClick={handleNext}
+                                        aria-label="Next testimonial"
+                                        className={cls(
+                                            "relative cursor-pointer h-9 w-auto aspect-square rounded-theme flex items-center justify-center primary-button",
+                                            navigationButtonClassName
+                                        )}
+                                    >
+                                        <ArrowRight className="h-4/10 w-4/10 text-primary-cta-text" strokeWidth={1.5} />
+                                    </button>
+                                </div>
+                            </div>
+                        </AnimationContainer>
+                    </div>
+
+                    <div className={cls("rounded-theme-capped overflow-hidden", mediaCardClassName)}>
+                        <AnimationContainer key={activeIndex} animationType="fade">
+                            <MediaContent
+                                imageSrc={activeTestimonial.imageSrc}
+                                videoSrc={activeTestimonial.videoSrc}
+                                imageAlt={activeTestimonial.imageAlt || activeTestimonial.name}
+                                videoAriaLabel={activeTestimonial.videoAriaLabel || activeTestimonial.name}
+                                imageClassName={cls("w-full h-full aspect-square object-cover", mediaClassName)}
+                            />
+                        </AnimationContainer>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+
+export default TestimonialCardTen;
diff --git a/src/components/sections/testimonial/TestimonialCardThirteen.tsx b/src/components/sections/testimonial/TestimonialCardThirteen.tsx
new file mode 100644
index 0000000..b69fa0f
--- /dev/null
+++ b/src/components/sections/testimonial/TestimonialCardThirteen.tsx
@@ -0,0 +1,238 @@
+"use client";
+
+
+import CardStack from "@/components/cardStack/CardStack";
+import TestimonialAuthor from "@/components/shared/TestimonialAuthor";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import { Quote, Star } from "lucide-react";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, ButtonAnimationType, CardAnimationTypeWith3D, TitleSegment, TextboxLayout, InvertedBackground } from "@/components/cardStack/types";
+
+type Testimonial = {
+    id: string;
+    name: string;
+    handle: string;
+    testimonial: string;
+    rating: number;
+    imageSrc?: string;
+    imageAlt?: string;
+    icon?: LucideIcon;
+};
+
+interface TestimonialCardThirteenProps {
+    testimonials: Testimonial[];
+    showRating: boolean;
+    carouselMode?: "auto" | "buttons";
+    uniformGridCustomHeightClasses?: string;
+    animationType: CardAnimationTypeWith3D;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    tagAnimation?: ButtonAnimationType;
+    buttons?: ButtonConfig[];
+    buttonAnimation?: ButtonAnimationType;
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    cardClassName?: string;
+    textBoxTitleClassName?: string;
+    textBoxTitleImageWrapperClassName?: string;
+    textBoxTitleImageClassName?: string;
+    textBoxDescriptionClassName?: string;
+    imageWrapperClassName?: string;
+    imageClassName?: string;
+    iconClassName?: string;
+    nameClassName?: string;
+    handleClassName?: string;
+    testimonialClassName?: string;
+    ratingClassName?: string;
+    contentWrapperClassName?: string;
+    gridClassName?: string;
+    carouselClassName?: string;
+    controlsClassName?: string;
+    textBoxClassName?: string;
+    textBoxTagClassName?: string;
+    textBoxButtonContainerClassName?: string;
+    textBoxButtonClassName?: string;
+    textBoxButtonTextClassName?: string;
+}
+
+interface TestimonialCardProps {
+    testimonial: Testimonial;
+    showRating: boolean;
+    useInvertedBackground: boolean;
+    cardClassName?: string;
+    imageWrapperClassName?: string;
+    imageClassName?: string;
+    iconClassName?: string;
+    nameClassName?: string;
+    handleClassName?: string;
+    testimonialClassName?: string;
+    ratingClassName?: string;
+    contentWrapperClassName?: string;
+}
+
+const TestimonialCard = ({
+    testimonial,
+    showRating,
+    useInvertedBackground,
+    cardClassName = "",
+    imageWrapperClassName = "",
+    imageClassName = "",
+    iconClassName = "",
+    nameClassName = "",
+    handleClassName = "",
+    testimonialClassName = "",
+    ratingClassName = "",
+    contentWrapperClassName = "",
+}: TestimonialCardProps) => {
+    const Icon = testimonial.icon || Quote;
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    return (
+        <div className={cls("relative h-full card rounded-theme-capped p-6 flex flex-col justify-between", showRating ? "gap-5" : "gap-16", cardClassName)}>
+            <div className={cls("flex flex-col gap-5 items-start", contentWrapperClassName)}>
+                {showRating ? (
+                    <div className={cls("relative z-1 flex gap-1", ratingClassName)}>
+                        {Array.from({ length: 5 }).map((_, index) => (
+                            <Star
+                                key={index}
+                                className={cls(
+                                    "h-5 w-auto text-accent",
+                                    index < testimonial.rating ? "fill-accent" : "fill-transparent"
+                                )}
+                                strokeWidth={1.5}
+                            />
+                        ))}
+                    </div>
+                ) : (
+                    <Quote className="h-6 w-auto text-accent fill-accent" strokeWidth={1.5} />
+                )}
+
+                <p className={cls("relative z-1 text-lg leading-[1.2]", shouldUseLightText ? "text-background" : "text-foreground", testimonialClassName)}>
+                    {testimonial.testimonial}
+                </p>
+            </div>
+
+            <TestimonialAuthor
+                name={testimonial.name}
+                subtitle={testimonial.handle}
+                imageSrc={testimonial.imageSrc}
+                imageAlt={testimonial.imageAlt}
+                icon={Icon}
+                useInvertedBackground={useInvertedBackground}
+                imageWrapperClassName={imageWrapperClassName}
+                imageClassName={imageClassName}
+                iconClassName={iconClassName}
+                nameClassName={nameClassName}
+                subtitleClassName={handleClassName}
+            />
+        </div>
+    );
+};
+
+
+const TestimonialCardThirteen = ({
+    testimonials,
+    showRating,
+    carouselMode = "buttons",
+    uniformGridCustomHeightClasses = "min-h-none",
+    animationType,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    tagAnimation = "opacity",
+    buttons = [],
+    buttonAnimation = "slide-up",
+    textboxLayout,
+    useInvertedBackground = false,
+    ariaLabel = "Testimonials section",
+    className = "",
+    containerClassName = "",
+    cardClassName = "",
+    textBoxTitleClassName = "",
+    textBoxTitleImageWrapperClassName = "",
+    textBoxTitleImageClassName = "",
+    textBoxDescriptionClassName = "",
+    imageWrapperClassName = "",
+    imageClassName = "",
+    iconClassName = "",
+    nameClassName = "",
+    handleClassName = "",
+    testimonialClassName = "",
+    ratingClassName = "",
+    contentWrapperClassName = "",
+    gridClassName = "",
+    carouselClassName = "",
+    controlsClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+}: TestimonialCardThirteenProps) => {
+    return (
+        <CardStack
+            mode={carouselMode}
+            gridVariant="uniform-all-items-equal"
+            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+            animationType={animationType}
+            supports3DAnimation={true}
+
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            tagAnimation={tagAnimation}
+            buttons={buttons}
+            buttonAnimation={buttonAnimation}
+            textboxLayout={textboxLayout}
+            useInvertedBackground={useInvertedBackground}
+            className={className}
+            containerClassName={containerClassName}
+            gridClassName={gridClassName}
+            carouselClassName={carouselClassName}
+            controlsClassName={controlsClassName}
+            textBoxClassName={textBoxClassName}
+            titleClassName={textBoxTitleClassName}
+            titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
+            titleImageClassName={textBoxTitleImageClassName}
+            descriptionClassName={textBoxDescriptionClassName}
+            tagClassName={textBoxTagClassName}
+            buttonContainerClassName={textBoxButtonContainerClassName}
+            buttonClassName={textBoxButtonClassName}
+            buttonTextClassName={textBoxButtonTextClassName}
+            ariaLabel={ariaLabel}
+        >
+            {testimonials.map((testimonial, index) => (
+                <TestimonialCard
+                    key={`${testimonial.id}-${index}`}
+                    testimonial={testimonial}
+                    showRating={showRating}
+                    useInvertedBackground={useInvertedBackground}
+                    cardClassName={cardClassName}
+                    imageWrapperClassName={imageWrapperClassName}
+                    imageClassName={imageClassName}
+                    iconClassName={iconClassName}
+                    nameClassName={nameClassName}
+                    handleClassName={handleClassName}
+                    testimonialClassName={testimonialClassName}
+                    ratingClassName={ratingClassName}
+                    contentWrapperClassName={contentWrapperClassName}
+                />
+            ))}
+        </CardStack>
+    );
+};
+
+
+export default TestimonialCardThirteen;
diff --git a/src/components/sections/testimonial/TestimonialCardTwelve.tsx b/src/components/sections/testimonial/TestimonialCardTwelve.tsx
new file mode 100644
index 0000000..e1c1688
--- /dev/null
+++ b/src/components/sections/testimonial/TestimonialCardTwelve.tsx
@@ -0,0 +1,127 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import AvatarGroup from "@/components/shared/AvatarGroup";
+import Tag from "@/components/shared/Tag";
+import Button from "@/components/button/Button";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { getButtonProps } from "@/lib/buttonUtils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import { useButtonAnimation } from "@/components/hooks/useButtonAnimation";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonAnimationType, ButtonConfig } from "@/components/cardStack/types";
+import type { InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type Testimonial = {
+  id: string;
+  name: string;
+  imageSrc: string;
+  imageAlt?: string;
+};
+
+interface TestimonialCardTwelveProps {
+  testimonials: Testimonial[];
+  cardTitle: string;
+  cardTag: string;
+  cardTagIcon?: LucideIcon;
+  buttons?: ButtonConfig[];
+  buttonAnimation?: ButtonAnimationType;
+  cardAnimation: ButtonAnimationType;
+  useInvertedBackground: InvertedBackground;
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  cardClassName?: string;
+  avatarGroupClassName?: string;
+  avatarClassName?: string;
+  cardTitleClassName?: string;
+  cardTagClassName?: string;
+  buttonContainerClassName?: string;
+  buttonClassName?: string;
+  buttonTextClassName?: string;
+}
+
+const TestimonialCardTwelve = ({
+  testimonials,
+  cardTitle,
+  cardTag,
+  cardTagIcon,
+  buttons,
+  buttonAnimation,
+  cardAnimation,
+  useInvertedBackground,
+  ariaLabel = "Testimonials section",
+  className = "",
+  containerClassName = "",
+  cardClassName = "",
+  avatarGroupClassName = "",
+  avatarClassName = "",
+  cardTitleClassName = "",
+  cardTagClassName = "",
+  buttonContainerClassName = "",
+  buttonClassName = "",
+  buttonTextClassName = "",
+}: TestimonialCardTwelveProps) => {
+  const theme = useTheme();
+  const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+  const { containerRef: cardContainerRef } = useButtonAnimation({ animationType: cardAnimation });
+
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const checkMobile = () => setIsMobile(window.innerWidth < 768);
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+    return () => window.removeEventListener("resize", checkMobile);
+  }, []);
+
+  const avatars = testimonials.map((testimonial) => ({
+    src: testimonial.imageSrc,
+    alt: testimonial.imageAlt || testimonial.name,
+  }));
+
+  return (
+    <section
+      aria-label={ariaLabel}
+      className={cls("relative py-20 w-full", useInvertedBackground && "bg-foreground", className)}
+    >
+      <div ref={cardContainerRef} className={cls("w-content-width mx-auto", containerClassName)}>
+        <div className={cls("w-full card rounded-theme-capped p-8 flex flex-col items-center justify-between gap-8", cardClassName)}>
+          <div className="flex flex-col gap-3 items-center">
+            <Tag
+              text={cardTag}
+              icon={cardTagIcon}
+              useInvertedBackground={useInvertedBackground}
+              className={cardTagClassName}
+            />
+            <h3 className={cls("relative md:max-w-7/10 text-3xl md:text-5xl font-medium leading-tight text-center text-balance", shouldUseLightText ? "text-background" : "text-foreground", cardTitleClassName)}>
+              {cardTitle}
+            </h3>
+            {buttons && buttons.length > 0 && (
+              <div className={cls("flex flex-wrap gap-4 justify-center mt-2", buttonContainerClassName)}>
+                {buttons.map((button, index) => (
+                  <Button
+                    key={`${button.text}-${index}`}
+                    {...getButtonProps(button, index, theme.defaultButtonVariant, buttonClassName, buttonTextClassName)}
+                  />
+                ))}
+              </div>
+            )}
+          </div>
+          <AvatarGroup
+            avatars={avatars}
+            className={avatarGroupClassName}
+            avatarClassName={avatarClassName}
+            maxVisible={isMobile ? 3 : 4}
+            ariaLabel="Customer testimonials"
+            avatarImageClassName="h-[var(--width-17_5)] md:h-[var(--width-12_5)]"
+            avatarOverlapClassName="-ml-8"
+          />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+
+export default TestimonialCardTwelve;
diff --git a/src/components/sections/testimonial/TestimonialCardTwo.tsx b/src/components/sections/testimonial/TestimonialCardTwo.tsx
new file mode 100644
index 0000000..d22c75a
--- /dev/null
+++ b/src/components/sections/testimonial/TestimonialCardTwo.tsx
@@ -0,0 +1,214 @@
+"use client";
+
+
+import Image from "next/image";
+import CardStack from "@/components/cardStack/CardStack";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import { Quote } from "lucide-react";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, ButtonAnimationType, CardAnimationTypeWith3D, TitleSegment, TextboxLayout, InvertedBackground } from "@/components/cardStack/types";
+
+type Testimonial = {
+    id: string;
+    name: string;
+    role: string;
+    testimonial: string;
+    imageSrc?: string;
+    imageAlt?: string;
+    icon?: LucideIcon;
+};
+
+interface TestimonialCardTwoProps {
+    testimonials: Testimonial[];
+    carouselMode?: "auto" | "buttons";
+    uniformGridCustomHeightClasses?: string;
+    animationType: CardAnimationTypeWith3D;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    tagAnimation?: ButtonAnimationType;
+    buttons?: ButtonConfig[];
+    buttonAnimation?: ButtonAnimationType;
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    cardClassName?: string;
+    textBoxTitleClassName?: string;
+    textBoxTitleImageWrapperClassName?: string;
+    textBoxTitleImageClassName?: string;
+    textBoxDescriptionClassName?: string;
+    imageWrapperClassName?: string;
+    imageClassName?: string;
+    iconClassName?: string;
+    nameClassName?: string;
+    roleClassName?: string;
+    testimonialClassName?: string;
+    gridClassName?: string;
+    carouselClassName?: string;
+    controlsClassName?: string;
+    textBoxClassName?: string;
+    textBoxTagClassName?: string;
+    textBoxButtonContainerClassName?: string;
+    textBoxButtonClassName?: string;
+    textBoxButtonTextClassName?: string;
+}
+
+interface TestimonialCardProps {
+    testimonial: Testimonial;
+    shouldUseLightText: boolean;
+    cardClassName?: string;
+    imageWrapperClassName?: string;
+    imageClassName?: string;
+    iconClassName?: string;
+    nameClassName?: string;
+    roleClassName?: string;
+    testimonialClassName?: string;
+}
+
+const TestimonialCard = ({
+    testimonial,
+    shouldUseLightText,
+    cardClassName = "",
+    imageWrapperClassName = "",
+    imageClassName = "",
+    iconClassName = "",
+    nameClassName = "",
+    roleClassName = "",
+    testimonialClassName = "",
+}: TestimonialCardProps) => {
+    const Icon = testimonial.icon || Quote;
+
+    return (
+        <div className={cls("relative h-full card rounded-theme-capped p-6 flex flex-col gap-6", cardClassName)}>
+            <div className={cls("relative z-1 h-30 w-fit aspect-square rounded-theme flex items-center justify-center primary-button overflow-hidden", imageWrapperClassName)}>
+                {testimonial.imageSrc ? (
+                    <Image
+                        src={testimonial.imageSrc}
+                        alt={testimonial.imageAlt || testimonial.name}
+                        width={800}
+                        height={800}
+                        className={cls("absolute inset-0 h-full w-full object-cover", imageClassName)}
+                        unoptimized={testimonial.imageSrc.startsWith('http') || testimonial.imageSrc.startsWith('//')}
+                        aria-hidden={testimonial.imageAlt === ""}
+                    />
+                ) : (
+                    <Icon className={cls("h-1/2 w-1/2 text-primary-cta-text", iconClassName)} strokeWidth={1} />
+                )}
+            </div>
+
+            <div className="relative z-1 flex flex-col gap-1 mt-1">
+                <h3 className={cls("text-2xl font-medium leading-[1.1]", shouldUseLightText ? "text-background" : "text-foreground", nameClassName)}>
+                    {testimonial.name}
+                </h3>
+                <p className={cls("text-base leading-[1.1]", shouldUseLightText ? "text-background" : "text-foreground", roleClassName)}>
+                    {testimonial.role}
+                </p>
+            </div>
+
+            <p className={cls("relative z-1 text-lg leading-[1.25]", shouldUseLightText ? "text-background" : "text-foreground", testimonialClassName)}>
+                {testimonial.testimonial}
+            </p>
+        </div>
+    );
+};
+
+
+const TestimonialCardTwo = ({
+    testimonials,
+    carouselMode = "buttons",
+    uniformGridCustomHeightClasses = "min-h-none",
+    animationType,
+    title,
+  titleSegments,
+    description,
+    tag,
+    tagIcon,
+    tagAnimation = "opacity",
+    buttons = [],
+    buttonAnimation = "slide-up",
+    textboxLayout,
+    useInvertedBackground = false,
+    ariaLabel = "Testimonials section",
+    className = "",
+    containerClassName = "",
+    cardClassName = "",
+    textBoxTitleClassName = "",
+  textBoxTitleImageWrapperClassName = "",
+  textBoxTitleImageClassName = "",
+    textBoxDescriptionClassName = "",
+    imageWrapperClassName = "",
+    imageClassName = "",
+    iconClassName = "",
+    nameClassName = "",
+    roleClassName = "",
+    testimonialClassName = "",
+    gridClassName = "",
+    carouselClassName = "",
+    controlsClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+}: TestimonialCardTwoProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+    return (
+        <CardStack
+            mode={carouselMode}
+            gridVariant="uniform-all-items-equal"
+            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+            animationType={animationType}
+            supports3DAnimation={true}
+
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            tagAnimation={tagAnimation}
+            buttons={buttons}
+            buttonAnimation={buttonAnimation}
+            textboxLayout={textboxLayout}
+            useInvertedBackground={useInvertedBackground}
+            className={className}
+            containerClassName={containerClassName}
+            gridClassName={gridClassName}
+            carouselClassName={carouselClassName}
+            controlsClassName={controlsClassName}
+            textBoxClassName={textBoxClassName}
+            titleClassName={textBoxTitleClassName}
+            titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
+            titleImageClassName={textBoxTitleImageClassName}
+            descriptionClassName={textBoxDescriptionClassName}
+            tagClassName={textBoxTagClassName}
+            buttonContainerClassName={textBoxButtonContainerClassName}
+            buttonClassName={textBoxButtonClassName}
+            buttonTextClassName={textBoxButtonTextClassName}
+            ariaLabel={ariaLabel}
+        >
+            {testimonials.map((testimonial, index) => (
+                <TestimonialCard
+                    key={`${testimonial.id}-${index}`}
+                    testimonial={testimonial}
+                    shouldUseLightText={shouldUseLightText}
+                    cardClassName={cardClassName}
+                    imageWrapperClassName={imageWrapperClassName}
+                    imageClassName={imageClassName}
+                    iconClassName={iconClassName}
+                    nameClassName={nameClassName}
+                    roleClassName={roleClassName}
+                    testimonialClassName={testimonialClassName}
+                />
+            ))}
+        </CardStack>
+    );
+};
+
+
+export default TestimonialCardTwo;
diff --git a/src/components/sections/testimonial/index.ts b/src/components/sections/testimonial/index.ts
new file mode 100644
index 0000000..b26cf2f
--- /dev/null
+++ b/src/components/sections/testimonial/index.ts
@@ -0,0 +1,9 @@
+export { default as TestimonialCardFifteen } from './TestimonialCardFifteen';
+export { default as TestimonialCardFive } from './TestimonialCardFive';
+export { default as TestimonialCardOne } from './TestimonialCardOne';
+export { default as TestimonialCardSix } from './TestimonialCardSix';
+export { default as TestimonialCardSixteen } from './TestimonialCardSixteen';
+export { default as TestimonialCardTen } from './TestimonialCardTen';
+export { default as TestimonialCardThirteen } from './TestimonialCardThirteen';
+export { default as TestimonialCardTwelve } from './TestimonialCardTwelve';
+export { default as TestimonialCardTwo } from './TestimonialCardTwo';
diff --git a/src/components/shared/AvatarGroup.tsx b/src/components/shared/AvatarGroup.tsx
new file mode 100644
index 0000000..746c6e2
--- /dev/null
+++ b/src/components/shared/AvatarGroup.tsx
@@ -0,0 +1,95 @@
+"use client";
+
+
+import { cls } from "@/lib/utils";
+import Image from "next/image";
+import { useButtonAnimation } from "@/components/hooks/useButtonAnimation";
+import type { ButtonAnimationType } from "@/components/cardStack/types";
+
+export interface Avatar {
+  src: string;
+  alt: string;
+}
+
+interface AvatarGroupProps {
+  avatars: Avatar[];
+  text?: string;
+  maxVisible?: number;
+  animationType?: ButtonAnimationType;
+  className?: string;
+  avatarClassName?: string;
+  avatarImageClassName?: string;
+  avatarOverlapClassName?: string;
+  textClassName?: string;
+  ariaLabel?: string;
+}
+
+const AvatarGroup = ({
+  avatars,
+  text,
+  maxVisible = 5,
+  animationType = "none",
+  className = "",
+  avatarClassName = "",
+  avatarImageClassName = "",
+  avatarOverlapClassName = "-ml-3",
+  textClassName = "",
+  ariaLabel = "User avatars",
+}: AvatarGroupProps) => {
+  const { containerRef } = useButtonAnimation({ animationType });
+  const visibleAvatars = avatars.slice(0, maxVisible);
+  const remainingCount = Math.max(0, avatars.length - maxVisible);
+
+  return (
+    <div
+      ref={containerRef}
+      role="group"
+      aria-label={ariaLabel}
+      className={cls("relative z-1 flex items-center gap-3", className)}
+    >
+      <div className="flex items-center">
+        {visibleAvatars.map((avatar, index) => (
+          <div
+            key={index}
+            className={cls(
+              "relative card p-0.5 rounded-theme",
+              index !== 0 && avatarOverlapClassName,
+              `z-[${visibleAvatars.length - index}]`,
+              avatarClassName
+            )}
+          >
+            <div className={cls("relative z-1 h-12 w-auto aspect-square rounded-theme overflow-hidden", avatarImageClassName)}>
+              <Image
+                src={avatar.src}
+                alt={avatar.alt}
+                fill
+                className="w-full h-full object-cover"
+                unoptimized={avatar.src.startsWith('http') || avatar.src.startsWith('//')}
+              />
+            </div>
+          </div>
+        ))}
+        {remainingCount > 0 && (
+          <div
+            className={cls(
+              `card p-0.5 rounded-theme ${avatarOverlapClassName} z-0`,
+              avatarClassName
+            )}
+          >
+            <div className={cls("relative z-1 h-12 w-auto aspect-square rounded-theme flex items-center justify-center text-xs text-foreground", avatarImageClassName)}>
+              +{remainingCount}
+            </div>
+          </div>
+        )}
+      </div>
+      {text && (
+        <p className={cls("relative z-1 text-sm text-foreground text-balance", textClassName)}>
+          {text}
+        </p>
+      )}
+    </div>
+  );
+};
+
+
+export default AvatarGroup;
diff --git a/src/components/shared/Badge.tsx b/src/components/shared/Badge.tsx
new file mode 100644
index 0000000..3a87615
--- /dev/null
+++ b/src/components/shared/Badge.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import { cls } from "@/lib/utils";
+
+interface BadgeProps {
+    text: string;
+    variant?: "primary" | "card";
+    className?: string;
+}
+
+const Badge = ({
+    text,
+    variant = "primary",
+    className = "",
+}: BadgeProps) => {
+    return (
+        <div className={cls(
+            "px-3 py-1 rounded-theme w-fit",
+            variant === "primary" ? "primary-button" : "card",
+            className
+        )}>
+            <p className={cls(
+                "relative z-1 text-xs",
+                variant === "primary" ? "text-primary-cta-text" : "text-foreground"
+            )}>
+                {text}
+            </p>
+        </div>
+    );
+};
+
+export default Badge;
diff --git a/src/components/shared/Dashboard.tsx b/src/components/shared/Dashboard.tsx
new file mode 100644
index 0000000..3cd2eef
--- /dev/null
+++ b/src/components/shared/Dashboard.tsx
@@ -0,0 +1,330 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { cls } from "@/lib/utils";
+import type { LucideIcon } from "lucide-react";
+import {
+    ArrowUpRight,
+    Bell,
+    ChevronLeft,
+    ChevronRight,
+    Plus,
+    Search,
+} from "lucide-react";
+import AnimationContainer from "@/components/sections/AnimationContainer";
+import Button from "@/components/button/Button";
+import { getButtonProps } from "@/lib/buttonUtils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import MediaContent from "@/components/shared/MediaContent";
+import BentoLineChart from "@/components/bento/BentoLineChart/BentoLineChart";
+import type { ChartDataItem } from "@/components/bento/BentoLineChart/utils";
+import type { ButtonConfig } from "@/types/button";
+import { useCardAnimation } from "@/components/cardStack/hooks/useCardAnimation";
+import TextNumberCount from "@/components/text/TextNumberCount";
+
+export interface DashboardSidebarItem {
+    icon: LucideIcon;
+    active?: boolean;
+}
+
+export interface DashboardStat {
+    title: string;
+    titleMobile?: string;
+    values: [number, number, number];
+    valuePrefix?: string;
+    valueSuffix?: string;
+    valueFormat?: Omit<Intl.NumberFormatOptions, "notation"> & {
+        notation?: Exclude<Intl.NumberFormatOptions["notation"], "scientific" | "engineering">;
+    };
+    description: string;
+}
+
+export interface DashboardListItem {
+    icon: LucideIcon;
+    title: string;
+    status: string;
+}
+
+interface DashboardProps {
+    title: string;
+    stats: [DashboardStat, DashboardStat, DashboardStat];
+    logoIcon: LucideIcon;
+    sidebarItems: DashboardSidebarItem[];
+    searchPlaceholder?: string;
+    buttons: ButtonConfig[];
+    chartTitle?: string;
+    chartData?: ChartDataItem[];
+    listItems: DashboardListItem[];
+    listTitle?: string;
+    imageSrc: string;
+    videoSrc?: string;
+    imageAlt?: string;
+    videoAriaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    sidebarClassName?: string;
+    statClassName?: string;
+    chartClassName?: string;
+    listClassName?: string;
+}
+
+const Dashboard = ({
+    title,
+    stats,
+    logoIcon: LogoIcon,
+    sidebarItems,
+    searchPlaceholder = "Search",
+    buttons,
+    chartTitle = "Revenue Overview",
+    chartData,
+    listItems,
+    listTitle = "Recent Transfers",
+    imageSrc,
+    videoSrc,
+    imageAlt = "",
+    videoAriaLabel = "Avatar video",
+    className = "",
+    containerClassName = "",
+    sidebarClassName = "",
+    statClassName = "",
+    chartClassName = "",
+    listClassName = "",
+}: DashboardProps) => {
+    const theme = useTheme();
+    const [activeStatIndex, setActiveStatIndex] = useState(0);
+    const [statValueIndex, setStatValueIndex] = useState(0);
+    const { itemRefs: statRefs } = useCardAnimation({
+        animationType: "slide-up",
+        itemCount: 3,
+    });
+
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setStatValueIndex((prev) => (prev + 1) % 3);
+        }, 3000);
+        return () => clearInterval(interval);
+    }, []);
+
+    const statCard = (stat: DashboardStat, index: number, withRef = false) => (
+        <div
+            key={index}
+            ref={withRef ? (el) => { statRefs.current[index] = el; } : undefined}
+            className={cls(
+                "group rounded-theme-capped p-5 flex flex-col justify-between h-40 md:h-50 card shadow",
+                statClassName
+            )}
+        >
+            <div className="flex items-center justify-between">
+                <p className="text-base font-medium text-foreground">
+                    {stat.title}
+                </p>
+                <div className="h-6 w-auto aspect-square rounded-theme secondary-button flex items-center justify-center transition-transform duration-300 hover:-translate-y-[3px]">
+                    <ArrowUpRight className="h-1/2 w-1/2 text-secondary-cta-text transition-transform duration-300 group-hover:rotate-45" />
+                </div>
+            </div>
+            <div className="flex flex-col">
+                <TextNumberCount
+                    value={stat.values[statValueIndex]}
+                    prefix={stat.valuePrefix}
+                    suffix={stat.valueSuffix}
+                    format={stat.valueFormat}
+                    className="text-xl md:text-3xl font-medium text-foreground truncate"
+                />
+                <p className="text-sm text-foreground/75 truncate">
+                    {stat.description}
+                </p>
+            </div>
+        </div>
+    );
+
+    return (
+        <div
+            className={cls(
+                "w-content-width flex gap-5 p-5 rounded-theme-capped card shadow",
+                className
+            )}
+        >
+            <div
+                className={cls(
+                    "hidden md:flex gap-5 shrink-0",
+                    sidebarClassName
+                )}
+            >
+                <div className="flex flex-col items-center gap-10" >
+                    <div className="relative secondary-button h-9 w-auto aspect-square rounded-theme flex items-center justify-center transition-transform duration-300 hover:-translate-y-[3px]">
+                        <LogoIcon className="h-4/10 w-4/10 text-secondary-cta-text" />
+                    </div>
+                    <nav className="flex flex-col gap-3">
+                        {sidebarItems.map((item, index) => (
+                            <div
+                                key={index}
+                                className={cls(
+                                    "h-9 w-auto aspect-square rounded-theme flex items-center justify-center transition-transform duration-300 hover:-translate-y-[3px]",
+                                    item.active
+                                        ? "primary-button"
+                                        : "secondary-button"
+                                )}
+                            >
+                                <item.icon
+                                    className={cls(
+                                        "h-4/10 w-4/10",
+                                        item.active
+                                            ? "text-primary-cta-text"
+                                            : "text-secondary-cta-text"
+                                    )}
+                                    strokeWidth={1.5}
+                                />
+                            </div>
+                        ))}
+                    </nav>
+                </div>
+                <div className="h-full w-px bg-background-accent" />
+            </div>
+            <div
+                className={cls(
+                    "flex-1 flex flex-col gap-5 min-w-0",
+                    containerClassName
+                )}
+            >
+                <div className="flex items-center justify-between h-9">
+                    <div className="h-9 px-6 rounded-theme card shadow flex items-center gap-3 transition-all duration-300 hover:px-8">
+                        <Search className="h-(--text-sm) w-auto text-foreground" />
+                        <p className="text-sm text-foreground">
+                            {searchPlaceholder}
+                        </p>
+                    </div>
+                    <div className="flex items-center gap-5">
+                        <div className="h-9 w-auto aspect-square secondary-button rounded-theme flex items-center justify-center transition-transform duration-300 hover:-translate-y-[3px]">
+                            <Bell className="h-4/10 w-4/10 text-secondary-cta-text" />
+                        </div>
+                        <div className="h-9 w-auto aspect-square rounded-theme overflow-hidden transition-transform duration-300 hover:-translate-y-[3px]">
+                            <MediaContent
+                                imageSrc={imageSrc}
+                                videoSrc={videoSrc}
+                                imageAlt={imageAlt}
+                                videoAriaLabel={videoAriaLabel}
+                                imageClassName="w-full h-full object-cover"
+                            />
+                        </div>
+                    </div>
+                </div>
+                <div className="w-full h-px bg-background-accent" />
+                <div className="flex flex-col md:flex-row md:items-center justify-between gap-3">
+                    <h2 className="text-xl md:text-3xl font-medium text-foreground">
+                        {title}
+                    </h2>
+                    <div className="flex items-center gap-5">
+                        {buttons.slice(0, 2).map((button, index) => (
+                            <Button
+                                key={`${button.text}-${index}`}
+                                {...getButtonProps(
+                                    button,
+                                    index,
+                                    theme.defaultButtonVariant
+                                )}
+                            />
+                        ))}
+                    </div>
+                </div>
+                <div className="hidden md:grid grid-cols-3 gap-5">
+                    {stats.map((stat, index) => statCard(stat, index, true))}
+                </div>
+                <div className="flex flex-col gap-3 md:hidden">
+                    <AnimationContainer
+                        key={activeStatIndex}
+                        className="w-full"
+                        animationType="fade"
+                    >
+                        {statCard(stats[activeStatIndex], activeStatIndex)}
+                    </AnimationContainer>
+                    <div className="w-full flex justify-end gap-3">
+                        <button
+                            onClick={() => setActiveStatIndex((prev) => (prev - 1 + 3) % 3)}
+                            className="secondary-button h-8 aspect-square flex items-center justify-center rounded-theme cursor-pointer transition-transform duration-300 hover:-translate-y-[3px]"
+                            type="button"
+                            aria-label="Previous stat"
+                        >
+                            <ChevronLeft className="h-[40%] w-auto aspect-square text-secondary-cta-text" />
+                        </button>
+                        <button
+                            onClick={() => setActiveStatIndex((prev) => (prev + 1) % 3)}
+                            className="secondary-button h-8 aspect-square flex items-center justify-center rounded-theme cursor-pointer transition-transform duration-300 hover:-translate-y-[3px]"
+                            type="button"
+                            aria-label="Next stat"
+                        >
+                            <ChevronRight className="h-[40%] w-auto aspect-square text-secondary-cta-text" />
+                        </button>
+                    </div>
+                </div>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
+                    <div
+                        className={cls(
+                            "group/chart rounded-theme-capped p-3 md:p-4 flex flex-col h-80 card shadow",
+                            chartClassName
+                        )}
+                    >
+                        <div className="flex items-center justify-between mb-2">
+                            <p className="text-base font-medium text-foreground">
+                                {chartTitle}
+                            </p>
+                            <div className="h-6 w-auto aspect-square rounded-theme secondary-button flex items-center justify-center transition-transform duration-300 hover:-translate-y-[3px]">
+                                <ArrowUpRight className="h-1/2 w-1/2 text-secondary-cta-text transition-transform duration-300 group-hover/chart:rotate-45" />
+                            </div>
+                        </div>
+                        <div className="flex-1 min-h-0">
+                            <BentoLineChart
+                                data={chartData}
+                                metricLabel={chartTitle}
+                                useInvertedBackground={false}
+                            />
+                        </div>
+                    </div>
+                    <div
+                        className={cls(
+                            "group/list rounded-theme-capped p-5 flex flex-col h-80 card shadow",
+                            listClassName
+                        )}
+                    >
+                        <div className="flex items-center justify-between">
+                            <p className="text-base font-medium text-foreground">
+                                {listTitle}
+                            </p>
+                            <div className="h-6 w-auto aspect-square rounded-theme secondary-button flex items-center justify-center transition-transform duration-300 hover:-translate-y-[3px]">
+                                <Plus className="h-1/2 w-1/2 text-secondary-cta-text transition-transform duration-300 group-hover/list:rotate-90" />
+                            </div>
+                        </div>
+                        <div className="overflow-hidden mask-fade-y flex-1 min-h-0 mt-3">
+                            <div className="flex flex-col animate-marquee-vertical px-px">
+                                {[...listItems, ...listItems, ...listItems, ...listItems].map((item, index) => {
+                                    const ItemIcon = item.icon;
+                                    return (
+                                        <div
+                                            key={index}
+                                            className="flex items-center gap-2.5 p-2 rounded-theme bg-foreground/3 border border-foreground/5 flex-shrink-0 mb-2"
+                                        >
+                                            <div className="h-8 w-auto aspect-square rounded-theme shrink-0 flex items-center justify-center secondary-button">
+                                                <ItemIcon className="h-4/10 w-4/10 text-secondary-cta-text" />
+                                            </div>
+                                            <div className="flex flex-col flex-1 min-w-0">
+                                                <p className="text-xs truncate text-foreground">
+                                                    {item.title}
+                                                </p>
+                                                <p className="text-xs text-foreground/75">
+                                                    {item.status}
+                                                </p>
+                                            </div>
+                                            <ChevronRight className="h-(--text-xs) w-auto shrink-0 text-foreground/75" />
+                                        </div>
+                                    );
+                                })}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+
+export default Dashboard;
diff --git a/src/components/shared/FavoriteButton.tsx b/src/components/shared/FavoriteButton.tsx
new file mode 100644
index 0000000..c02fef3
--- /dev/null
+++ b/src/components/shared/FavoriteButton.tsx
@@ -0,0 +1,58 @@
+"use client";
+
+import { useState, useCallback } from "react";
+import { Heart } from "lucide-react";
+import { cls } from "@/lib/utils";
+
+interface FavoriteButtonProps {
+    initialFavorited?: boolean;
+    onToggle?: () => void;
+    className?: string;
+}
+
+const FavoriteButton = ({
+    initialFavorited = false,
+    onToggle,
+    className = "",
+}: FavoriteButtonProps) => {
+    const [isFavorited, setIsFavorited] = useState(initialFavorited);
+
+    const handleClick = useCallback((e: React.MouseEvent) => {
+        e.stopPropagation();
+        setIsFavorited(prev => !prev);
+        onToggle?.();
+    }, [onToggle]);
+
+    return (
+        <button
+            onClick={handleClick}
+            className={cls(
+                "absolute cursor-pointer top-4 right-4 card h-8 w-auto aspect-square rounded-theme flex items-center justify-center z-10",
+                className
+            )}
+            aria-label={isFavorited ? "Remove from favorites" : "Add to favorites"}
+            type="button"
+        >
+            <div className="relative z-1 w-full h-full flex items-center justify-center">
+                <Heart
+                    className={cls(
+                        "h-4/10 text-foreground transition-all duration-300",
+                        isFavorited ? "opacity-0 blur-xs" : "opacity-100 blur-0"
+                    )}
+                    fill="none"
+                    strokeWidth={1.5}
+                />
+                <Heart
+                    className={cls(
+                        "h-4/10 text-accent absolute transition-all duration-300",
+                        isFavorited ? "opacity-100 blur-0" : "opacity-0 blur-xs"
+                    )}
+                    fill="currentColor"
+                    strokeWidth={0}
+                />
+            </div>
+        </button>
+    );
+};
+
+export default FavoriteButton;
diff --git a/src/components/shared/FillWidthText/FillWidthText.tsx b/src/components/shared/FillWidthText/FillWidthText.tsx
new file mode 100644
index 0000000..b5083d0
--- /dev/null
+++ b/src/components/shared/FillWidthText/FillWidthText.tsx
@@ -0,0 +1,55 @@
+"use client";
+
+import useFillWidthText from "./useFillWidthText";
+import { cls } from "@/lib/utils";
+
+type TextElement = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span";
+
+// Lowercase characters that have descenders (extend below the baseline)
+// Uppercase versions (G, J, P, Q, Y) don't have descenders
+const DESCENDER_CHARS = /[gjpqy]/;
+
+// Utility function to check if text has descender characters
+export const hasDescenders = (text: string): boolean => DESCENDER_CHARS.test(text);
+
+interface FillWidthTextProps {
+    children: string;
+    as?: TextElement;
+    className?: string;
+}
+
+const FillWidthText = ({
+    children,
+    as: Component = "h1",
+    className = "",
+}: FillWidthTextProps) => {
+    const { containerRef, textRef, fontSize, isReady } = useFillWidthText(children);
+
+    // Use tighter line height if text has no descender characters
+    const lineHeight = DESCENDER_CHARS.test(children) ? 1.2 : 0.8;
+
+    return (
+        <div
+            ref={containerRef}
+            className="w-full min-w-0 flex-1"
+        >
+            <Component
+                ref={textRef as React.RefObject<HTMLHeadingElement & HTMLParagraphElement & HTMLSpanElement>}
+                className={cls(
+                    "whitespace-nowrap transition-opacity duration-150",
+                    isReady ? "opacity-100" : "opacity-0",
+                    className
+                )}
+                style={{
+                    fontSize: `${fontSize}px`,
+                    lineHeight,
+                }}
+            >
+                {children}
+            </Component>
+        </div>
+    );
+};
+
+
+export default FillWidthText;
diff --git a/src/components/shared/FillWidthText/useFillWidthText.ts b/src/components/shared/FillWidthText/useFillWidthText.ts
new file mode 100644
index 0000000..174d7d8
--- /dev/null
+++ b/src/components/shared/FillWidthText/useFillWidthText.ts
@@ -0,0 +1,109 @@
+'use client';
+
+import { useRef, useEffect, useState, useCallback } from 'react';
+
+interface UseFillWidthTextReturn {
+    containerRef: React.RefObject<HTMLDivElement | null>;
+    textRef: React.RefObject<HTMLElement | null>;
+    fontSize: number;
+    isReady: boolean;
+}
+
+const BASE_FONT_SIZE = 100;
+
+// Shared canvas for text measurement (no DOM manipulation needed)
+let measureCanvas: HTMLCanvasElement | null = null;
+
+function getMeasureCanvas(): CanvasRenderingContext2D | null {
+    if (typeof document === 'undefined') return null;
+    if (!measureCanvas) {
+        measureCanvas = document.createElement('canvas');
+    }
+    return measureCanvas.getContext('2d');
+}
+
+export default function useFillWidthText(text: string): UseFillWidthTextReturn {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const textRef = useRef<HTMLElement>(null);
+    const [fontSize, setFontSize] = useState(BASE_FONT_SIZE);
+    const [isReady, setIsReady] = useState(false);
+
+    // Cache for computed styles
+    const stylesRef = useRef<{ fontFamily: string; fontWeight: string } | null>(null);
+
+    const calculateFontSize = useCallback(() => {
+        if (!containerRef.current || !textRef.current) return;
+
+        const container = containerRef.current;
+        const textElement = textRef.current;
+
+        const containerWidth = container.offsetWidth;
+        if (containerWidth === 0) return;
+
+        // Cache styles on first calculation
+        if (!stylesRef.current) {
+            const computed = getComputedStyle(textElement);
+            stylesRef.current = {
+                fontFamily: computed.fontFamily,
+                fontWeight: computed.fontWeight,
+            };
+        }
+
+        const ctx = getMeasureCanvas();
+        if (!ctx) return;
+
+        // Measure text using canvas (fast, no reflow)
+        const { fontFamily, fontWeight } = stylesRef.current;
+        ctx.font = `${fontWeight} ${BASE_FONT_SIZE}px ${fontFamily}`;
+        const textWidth = ctx.measureText(text).width;
+
+        if (textWidth === 0) return;
+
+        const newFontSize = (containerWidth / textWidth) * BASE_FONT_SIZE;
+
+        setFontSize(newFontSize);
+        setIsReady(true);
+    }, [text]);
+
+    // Initial calculation
+    useEffect(() => {
+        const rafId = requestAnimationFrame(() => {
+            calculateFontSize();
+        });
+        return () => cancelAnimationFrame(rafId);
+    }, [text, calculateFontSize]);
+
+    // Debounced resize observer
+    useEffect(() => {
+        if (!containerRef.current) return;
+
+        let rafId: number | null = null;
+
+        const resizeObserver = new ResizeObserver(() => {
+            // Debounce using RAF - only calculate once per frame
+            if (rafId) cancelAnimationFrame(rafId);
+            rafId = requestAnimationFrame(() => {
+                calculateFontSize();
+            });
+        });
+
+        resizeObserver.observe(containerRef.current);
+
+        return () => {
+            if (rafId) cancelAnimationFrame(rafId);
+            resizeObserver.disconnect();
+        };
+    }, [calculateFontSize]);
+
+    // Reset style cache if text changes (might have different element)
+    useEffect(() => {
+        stylesRef.current = null;
+    }, [text]);
+
+    return {
+        containerRef,
+        textRef,
+        fontSize,
+        isReady
+    };
+}
diff --git a/src/components/shared/FooterColumns.tsx b/src/components/shared/FooterColumns.tsx
new file mode 100644
index 0000000..2a8052c
--- /dev/null
+++ b/src/components/shared/FooterColumns.tsx
@@ -0,0 +1,61 @@
+"use client";
+
+
+import ButtonTextUnderline from "@/components/button/ButtonTextUnderline";
+import { cls } from "@/lib/utils";
+
+export interface FooterColumn {
+  title: string;
+  items: Array<{
+    label: string;
+    href?: string;
+    onClick?: () => void;
+  }>;
+}
+
+interface FooterColumnsProps {
+  columns: FooterColumn[];
+  className?: string;
+  columnClassName?: string;
+  columnTitleClassName?: string;
+  columnItemClassName?: string;
+}
+
+const FooterColumns = ({
+  columns,
+  className = "",
+  columnClassName = "",
+  columnTitleClassName = "",
+  columnItemClassName = "",
+}: FooterColumnsProps) => {
+  return (
+    <div
+      className={cls("w-full md:w-fit flex flex-wrap gap-y-[var(--width-10)] md:gap-[calc(var(--width-10)/1.5)]", className)}
+    >
+      {columns.map((column) => (
+        <div
+          key={column.title}
+          className={cls("relative z-1 w-1/2 md:w-auto flex items-start flex-col gap-4", columnClassName)}
+        >
+          <h3
+            className={cls("text-sm text-accent/75", columnTitleClassName)}
+          >
+            {column.title}
+          </h3>
+          {column.items.map((item) => (
+            <ButtonTextUnderline
+              key={item.label}
+              text={item.label}
+              href={item.href}
+              onClick={item.onClick}
+              className={cls("text-base text-foreground", columnItemClassName)}
+            />
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+
+export default FooterColumns;
diff --git a/src/components/shared/LogoMarquee.tsx b/src/components/shared/LogoMarquee.tsx
new file mode 100644
index 0000000..c8eee0f
--- /dev/null
+++ b/src/components/shared/LogoMarquee.tsx
@@ -0,0 +1,77 @@
+"use client";
+
+import Image from "next/image";
+import Marquee from "react-fast-marquee";
+import { cls } from "@/lib/utils";
+import type { LucideIcon } from "lucide-react";
+
+export type MarqueeItem =
+  | { type: "image"; src: string; alt?: string }
+  | { type: "text"; text: string }
+  | { type: "text-icon"; text: string; icon: LucideIcon };
+
+interface LogoMarqueeProps {
+  items: MarqueeItem[];
+  speed?: number;
+  showCard?: boolean;
+  className?: string;
+  itemClassName?: string;
+  cardClassName?: string;
+  imageClassName?: string;
+  textClassName?: string;
+  iconClassName?: string;
+}
+
+const LogoMarquee = ({
+  items,
+  speed = 30,
+  showCard = true,
+  className = "",
+  itemClassName = "",
+  cardClassName = "",
+  imageClassName = "",
+  textClassName = "",
+  iconClassName = "",
+}: LogoMarqueeProps) => {
+  const repeatedItems = [...items, ...items, ...items];
+
+  return (
+    <div className={cls("mask-padding-x", className)}>
+      <Marquee gradient={false} speed={speed}>
+        {repeatedItems.map((item, i) => {
+          const hasCard = item.type !== "image" && showCard;
+          return (
+            <div className={cls(hasCard ? "mx-2" : "mx-6", itemClassName)} key={i}>
+              <div className={cls(hasCard ? "card px-4 py-3 mb-1 rounded-theme" : "", cardClassName)}>
+                {item.type === "image" && (
+                  <Image
+                    width={500}
+                    height={500}
+                    src={item.src}
+                    alt={item.alt || `Logo ${i + 1}`}
+                    className={cls("relative z-1 h-6 w-auto", imageClassName)}
+                    unoptimized={item.src.startsWith("http") || item.src.startsWith("//")}
+                  />
+                )}
+                {item.type === "text" && (
+                  <p className={cls("relative z-1 text-foreground text-sm", textClassName)}>
+                    {item.text}
+                  </p>
+                )}
+                {item.type === "text-icon" && (
+                  <span className={cls("relative z-1 flex items-center gap-2 text-foreground text-sm", textClassName)}>
+                    <item.icon className={cls("h-[1em] w-auto", iconClassName)} strokeWidth={1.5} />
+                    {item.text}
+                  </span>
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </Marquee>
+    </div>
+  );
+};
+
+
+export default LogoMarquee;
diff --git a/src/components/shared/MediaBadge.tsx b/src/components/shared/MediaBadge.tsx
new file mode 100644
index 0000000..166a64d
--- /dev/null
+++ b/src/components/shared/MediaBadge.tsx
@@ -0,0 +1,46 @@
+"use client";
+
+import Image from "next/image";
+import { cls } from "@/lib/utils";
+
+export interface MediaBadgeProps {
+  text: string;
+  avatarSrc?: string;
+  avatarAlt?: string;
+  className?: string;
+}
+
+const MediaBadge = ({
+  text,
+  avatarSrc,
+  avatarAlt = "",
+  className = "",
+}: MediaBadgeProps) => {
+  return (
+    <div
+      className={cls(
+        "absolute! z-20 card backdrop-blur flex items-center gap-2 px-4 py-2 rounded-theme",
+        avatarSrc
+          ? "-top-[calc(var(--spacing-2)+var(--text-sm))] -right-[calc(var(--spacing-2)+var(--text-sm))]"
+          : "-top-[calc(var(--spacing-2)+var(--text-sm)/2)] -right-[calc(var(--spacing-2)+var(--text-sm)/2)]",
+        className
+      )}
+    >
+      <span className="h-(--text-sm) w-auto aspect-square rounded-full bg-accent animate-pulsate" />
+      <p className="text-sm leading-tight font-medium text-foreground">{text}</p>
+      {avatarSrc && (
+        <div className="relative h-[calc(var(--text-sm)*2)] aspect-square card rounded-theme overflow-hidden">
+          <Image
+            src={avatarSrc}
+            alt={avatarAlt}
+            fill
+            className="object-cover"
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+
+export default MediaBadge;
diff --git a/src/components/shared/MediaContent.tsx b/src/components/shared/MediaContent.tsx
new file mode 100644
index 0000000..57808c3
--- /dev/null
+++ b/src/components/shared/MediaContent.tsx
@@ -0,0 +1,52 @@
+"use client";
+
+
+import Image from "next/image";
+import { cls } from "@/lib/utils";
+
+interface MediaContentProps {
+  imageSrc?: string;
+  videoSrc?: string;
+  imageAlt?: string;
+  videoAriaLabel?: string;
+  imageClassName?: string;
+}
+
+const MediaContent = ({
+  imageSrc,
+  videoSrc,
+  imageAlt = "",
+  videoAriaLabel = "Video content",
+  imageClassName = "",
+}: MediaContentProps) => {
+  return (
+    <>
+      {videoSrc ? (
+        <video
+          src={videoSrc}
+          aria-label={videoAriaLabel}
+          className={cls("w-full h-auto object-cover rounded-theme-capped", imageClassName)}
+          autoPlay
+          loop
+          muted
+          playsInline
+        />
+      ) : (
+        imageSrc && (
+          <Image
+            src={imageSrc}
+            alt={imageAlt}
+            width={1920}
+            height={1080}
+            className={cls("w-full h-auto object-cover rounded-theme-capped", imageClassName)}
+            unoptimized={imageSrc.startsWith('http') || imageSrc.startsWith('//')}
+            aria-hidden={imageAlt === ""}
+          />
+        )
+      )}
+    </>
+  );
+};
+
+
+export default MediaContent;
diff --git a/src/components/shared/OverlayArrowButton.tsx b/src/components/shared/OverlayArrowButton.tsx
new file mode 100644
index 0000000..dd93c5e
--- /dev/null
+++ b/src/components/shared/OverlayArrowButton.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+import { ArrowUpRight } from "lucide-react";
+import { cls } from "@/lib/utils";
+
+interface OverlayArrowButtonProps {
+    ariaLabel?: string;
+    className?: string;
+}
+
+const OverlayArrowButton = ({
+    ariaLabel = "View details",
+    className = "",
+}: OverlayArrowButtonProps) => {
+    return (
+        <div
+            className={cls(
+                "!absolute z-1 top-4 right-4 cursor-pointer card h-8 w-auto aspect-square rounded-theme flex items-center justify-center flex-shrink-0",
+                className
+            )}
+            aria-label={ariaLabel}
+        >
+            <ArrowUpRight className="relative z-1 h-4/10 text-foreground transition-transform duration-300 group-hover:rotate-45" strokeWidth={1.5} />
+        </div>
+    );
+};
+
+export default OverlayArrowButton;
diff --git a/src/components/shared/PricingBadge.tsx b/src/components/shared/PricingBadge.tsx
new file mode 100644
index 0000000..980ba78
--- /dev/null
+++ b/src/components/shared/PricingBadge.tsx
@@ -0,0 +1,25 @@
+"use client";
+
+import { cls } from "@/lib/utils";
+import type { LucideIcon } from "lucide-react";
+
+interface PricingBadgeProps {
+    badge: string;
+    badgeIcon?: LucideIcon;
+    className?: string;
+}
+
+const PricingBadge = ({
+    badge,
+    badgeIcon: BadgeIcon,
+    className = "",
+}: PricingBadgeProps) => {
+    return (
+        <div className={cls("relative z-1 inline-flex items-center gap-2 px-4 py-2 w-fit card rounded-theme text-sm", className)}>
+            {BadgeIcon && <BadgeIcon className="relative z-1 h-[1em] w-auto" />}
+            <span>{badge}</span>
+        </div>
+    );
+};
+
+export default PricingBadge;
diff --git a/src/components/shared/PricingFeatureList.tsx b/src/components/shared/PricingFeatureList.tsx
new file mode 100644
index 0000000..81ec5dd
--- /dev/null
+++ b/src/components/shared/PricingFeatureList.tsx
@@ -0,0 +1,41 @@
+"use client";
+
+import { Check, LucideIcon } from "lucide-react";
+import { cls } from "@/lib/utils";
+
+interface PricingFeatureListProps {
+    features: string[];
+    icon?: LucideIcon;
+    shouldUseLightText?: boolean;
+    className?: string;
+    featureItemClassName?: string;
+    featureIconWrapperClassName?: string;
+    featureIconClassName?: string;
+    featureTextClassName?: string;
+}
+
+const PricingFeatureList = ({
+    features,
+    icon: Icon = Check,
+    shouldUseLightText = false,
+    className = "",
+    featureItemClassName = "",
+    featureIconWrapperClassName = "",
+    featureIconClassName = "",
+    featureTextClassName = "",
+}: PricingFeatureListProps) => {
+    return (
+        <div className={cls("relative z-1 flex flex-col gap-3", className)}>
+            {features.map((feature, featureIndex) => (
+                <div key={featureIndex} className={cls("flex items-start gap-3", featureItemClassName)}>
+                    <div className={cls("h-6 aspect-square primary-button rounded-theme flex items-center justify-center", featureIconWrapperClassName)}>
+                        <Icon className={cls("h-4/10 text-primary-cta-text", featureIconClassName)} strokeWidth={1.5} />
+                    </div>
+                    <span className={cls("text-base", shouldUseLightText ? "text-background" : "text-foreground", featureTextClassName)}>{feature}</span>
+                </div>
+            ))}
+        </div>
+    );
+};
+
+export default PricingFeatureList;
diff --git a/src/components/shared/ProductImage.tsx b/src/components/shared/ProductImage.tsx
new file mode 100644
index 0000000..31db627
--- /dev/null
+++ b/src/components/shared/ProductImage.tsx
@@ -0,0 +1,65 @@
+"use client";
+
+import Image from "next/image";
+import { ArrowUpRight } from "lucide-react";
+import FavoriteButton from "@/components/shared/FavoriteButton";
+import { cls } from "@/lib/utils";
+
+interface ProductImageProps {
+    imageSrc: string;
+    imageAlt: string;
+    isFavorited?: boolean;
+    onFavoriteToggle?: () => void;
+    showActionButton?: boolean;
+    actionButtonAriaLabel?: string;
+    onActionClick?: () => void;
+    className?: string;
+    imageClassName?: string;
+    actionButtonClassName?: string;
+}
+
+const ProductImage = ({
+    imageSrc,
+    imageAlt,
+    isFavorited = false,
+    onFavoriteToggle,
+    showActionButton = false,
+    actionButtonAriaLabel = "View details",
+    onActionClick,
+    className = "",
+    imageClassName = "",
+    actionButtonClassName = "",
+}: ProductImageProps) => {
+    return (
+        <div className={cls("relative w-full h-full rounded-theme-capped overflow-hidden card", className)}>
+            <div className="relative z-1 w-full h-full overflow-hidden rounded-theme-capped">
+                <Image
+                    src={imageSrc}
+                    alt={imageAlt}
+                    fill
+                    className={cls("w-full h-full object-cover transition-transform duration-500 ease-in-out group-hover:scale-105", imageClassName)}
+                    unoptimized={imageSrc.startsWith('http') || imageSrc.startsWith('//')}
+                    aria-hidden={imageAlt === ""}
+                />
+            </div>
+
+            <FavoriteButton
+                initialFavorited={isFavorited}
+                onToggle={onFavoriteToggle}
+            />
+
+            {showActionButton && (
+                <button
+                    className={cls("absolute! z-2 top-3 right-3 cursor-pointer card backdrop-blur-lg h-8 w-auto aspect-square rounded-theme flex items-center justify-center", actionButtonClassName)}
+                    aria-label={actionButtonAriaLabel}
+                    type="button"
+                    onClick={onActionClick}
+                >
+                    <ArrowUpRight className="h-4/10 text-foreground transition-transform duration-300 group-hover:rotate-45" strokeWidth={1.5} />
+                </button>
+            )}
+        </div>
+    );
+};
+
+export default ProductImage;
diff --git a/src/components/shared/QuantityButton.tsx b/src/components/shared/QuantityButton.tsx
new file mode 100644
index 0000000..e4cf516
--- /dev/null
+++ b/src/components/shared/QuantityButton.tsx
@@ -0,0 +1,22 @@
+"use client";
+
+import type { LucideIcon } from "lucide-react";
+
+interface QuantityButtonProps {
+    onClick: (e: React.MouseEvent) => void;
+    ariaLabel: string;
+    Icon: LucideIcon;
+}
+
+const QuantityButton = ({ onClick, ariaLabel, Icon }: QuantityButtonProps) => (
+    <button
+        onClick={onClick}
+        className="secondary-button h-8 aspect-square rounded-theme flex items-center justify-center cursor-pointer"
+        aria-label={ariaLabel}
+        type="button"
+    >
+        <Icon className="relative h-4/10 text-secondary-cta-text" strokeWidth={1.5} />
+    </button>
+);
+
+export default QuantityButton;
diff --git a/src/components/shared/SocialLinks.tsx b/src/components/shared/SocialLinks.tsx
new file mode 100644
index 0000000..625ea7d
--- /dev/null
+++ b/src/components/shared/SocialLinks.tsx
@@ -0,0 +1,48 @@
+"use client";
+
+
+import { cls } from "@/lib/utils";
+import type { LucideIcon } from "lucide-react";
+
+export interface SocialLink {
+  icon: LucideIcon;
+  href: string;
+  ariaLabel: string;
+}
+
+interface SocialLinksProps {
+  socialLinks: SocialLink[];
+  className?: string;
+  iconClassName?: string;
+}
+
+const SocialLinks = ({
+  socialLinks,
+  className = "",
+  iconClassName = "",
+}: SocialLinksProps) => {
+  return (
+    <div className={cls("relative z-1 flex items-center gap-4", className)}>
+      {socialLinks.map((social, index) => {
+        const SocialIcon = social.icon;
+        return (
+          <a
+            key={index}
+            href={social.href}
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label={social.ariaLabel}
+            className={cls(
+              "card h-10 w-auto aspect-square rounded-theme flex items-center justify-center",
+              iconClassName
+            )}
+          >
+            <SocialIcon className="relative z-1 h-45/100 w-45/100 text-foreground" strokeWidth={1.5} />
+          </a>
+        );
+      })}
+    </div>
+  );
+};
+
+export default SocialLinks;
diff --git a/src/components/shared/SvgTextLogo/SvgTextLogo.tsx b/src/components/shared/SvgTextLogo/SvgTextLogo.tsx
new file mode 100644
index 0000000..edf3348
--- /dev/null
+++ b/src/components/shared/SvgTextLogo/SvgTextLogo.tsx
@@ -0,0 +1,50 @@
+"use client";
+
+
+import useSvgTextLogo from "./useSvgTextLogo";
+import { cls } from "@/lib/utils";
+
+interface SvgTextLogoProps {
+  logoText: string;
+  adjustHeightFactor?: number;
+  verticalAlign?: "top" | "center";
+  className?: string;
+}
+
+const SvgTextLogo = ({
+  logoText,
+  adjustHeightFactor,
+  verticalAlign = "top",
+  className = "",
+}: SvgTextLogoProps) => {
+  const { svgRef, textRef, viewBox, aspectRatio } = useSvgTextLogo(logoText, false, adjustHeightFactor);
+
+  return (
+    <svg
+      ref={svgRef}
+      viewBox={viewBox}
+      className={cls("w-full", className)}
+      style={{ aspectRatio: aspectRatio }}
+      preserveAspectRatio="none"
+      role="img"
+      aria-label={`${logoText} logo`}
+    >
+      <text
+        ref={textRef}
+        x="0"
+        y={verticalAlign === "center" ? "50%" : "0"}
+        className="font-bold fill-current"
+        style={{
+          fontSize: "20px",
+          letterSpacing: "-0.02em",
+          dominantBaseline: verticalAlign === "center" ? "middle" : "hanging"
+        }}
+      >
+        {logoText}
+      </text>
+    </svg>
+  );
+};
+
+
+export default SvgTextLogo;
diff --git a/src/components/shared/SvgTextLogo/useSvgTextLogo.ts b/src/components/shared/SvgTextLogo/useSvgTextLogo.ts
new file mode 100644
index 0000000..6d36ddc
--- /dev/null
+++ b/src/components/shared/SvgTextLogo/useSvgTextLogo.ts
@@ -0,0 +1,34 @@
+'use client';
+
+import { useRef, useEffect, useState } from 'react';
+
+interface UseSvgTextLogoReturn {
+    svgRef: React.RefObject<SVGSVGElement | null>;
+    textRef: React.RefObject<SVGTextElement | null>;
+    viewBox: string;
+    aspectRatio: number;
+}
+
+export default function useSvgTextLogo(logoText: string, hasLogoSrc: boolean, adjustHeightFactor?: number): UseSvgTextLogoReturn {
+    const svgRef = useRef<SVGSVGElement>(null);
+    const textRef = useRef<SVGTextElement>(null);
+    const [viewBox, setViewBox] = useState('0 0 100 20');
+    const [aspectRatio, setAspectRatio] = useState(5);
+
+    useEffect(() => {
+        if (!hasLogoSrc && textRef.current && svgRef.current) {
+            const bbox = textRef.current.getBBox();
+            const height = adjustHeightFactor ? bbox.height * adjustHeightFactor : bbox.height;
+            const yOffset = adjustHeightFactor ? bbox.y + (bbox.height - height) / 2 : bbox.y;
+            setViewBox(`${bbox.x} ${yOffset} ${bbox.width} ${height}`);
+            setAspectRatio(bbox.width / height);
+        }
+    }, [hasLogoSrc, logoText, adjustHeightFactor]);
+
+    return {
+        svgRef,
+        textRef,
+        viewBox,
+        aspectRatio
+    };
+}
diff --git a/src/components/shared/Tag.tsx b/src/components/shared/Tag.tsx
new file mode 100644
index 0000000..2106ff5
--- /dev/null
+++ b/src/components/shared/Tag.tsx
@@ -0,0 +1,36 @@
+"use client";
+
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import { LucideIcon } from "lucide-react";
+
+interface TagProps {
+    text: string;
+    icon?: LucideIcon;
+    useInvertedBackground?: boolean;
+    className?: string;
+    textClassName?: string;
+}
+
+const Tag = ({
+    text,
+    icon: Icon,
+    useInvertedBackground,
+    className = "",
+    textClassName = "",
+}: TagProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    return (
+        <div className={cls(
+            "relative z-1 px-3 py-1 text-sm rounded-theme card inline-flex items-center gap-2 w-fit",
+            className
+        )}>
+            {Icon && <Icon className={cls("relative z-1 h-[1em] w-auto", shouldUseLightText ? "text-background" : "text-foreground")} />}
+            <span className={cls(shouldUseLightText ? "text-background" : "text-foreground", textClassName)}>{text}</span>
+        </div>
+    );
+};
+
+export default Tag;
diff --git a/src/components/shared/TestimonialAuthor.tsx b/src/components/shared/TestimonialAuthor.tsx
new file mode 100644
index 0000000..0dc8f9d
--- /dev/null
+++ b/src/components/shared/TestimonialAuthor.tsx
@@ -0,0 +1,72 @@
+"use client";
+
+import Image from "next/image";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { LucideIcon } from "lucide-react";
+
+interface TestimonialAuthorProps {
+    name: string;
+    subtitle: string;
+    imageSrc?: string;
+    imageAlt?: string;
+    icon?: LucideIcon;
+    useInvertedBackground?: boolean;
+    className?: string;
+    imageWrapperClassName?: string;
+    imageClassName?: string;
+    iconClassName?: string;
+    nameClassName?: string;
+    subtitleClassName?: string;
+}
+
+const TestimonialAuthor = ({
+    name,
+    subtitle,
+    imageSrc,
+    imageAlt,
+    icon: Icon,
+    useInvertedBackground,
+    className = "",
+    imageWrapperClassName = "",
+    imageClassName = "",
+    iconClassName = "",
+    nameClassName = "",
+    subtitleClassName = "",
+}: TestimonialAuthorProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    return (
+        <div className={cls("relative z-1 flex items-center gap-4", className)}>
+            <div className={cls("relative shrink-0 h-11 w-fit aspect-square rounded-theme flex items-center justify-center primary-button overflow-hidden", imageWrapperClassName)}>
+                {imageSrc ? (
+                    <Image
+                        src={imageSrc}
+                        alt={imageAlt || name}
+                        width={800}
+                        height={800}
+                        className={cls("absolute inset-0 w-full h-full object-cover", imageClassName)}
+                        unoptimized={imageSrc.startsWith('http') || imageSrc.startsWith('//')}
+                        aria-hidden={imageAlt === ""}
+                    />
+                ) : Icon ? (
+                    <Icon className={cls("h-1/2 w-1/2 text-primary-cta-text", iconClassName)} strokeWidth={1} />
+                ) : (
+                    <div className={cls("h-1/2 w-1/2 rounded-full bg-primary-cta-text/20", iconClassName)} aria-hidden="true" />
+                )}
+            </div>
+
+            <div className="w-full min-w-0 flex flex-col gap-0">
+                <h3 className={cls("text-2xl font-medium leading-[1.15] truncate", shouldUseLightText ? "text-background" : "text-foreground", nameClassName)}>
+                    {name}
+                </h3>
+                <p className={cls("text-sm leading-[1.15]", shouldUseLightText ? "text-background" : "text-foreground", subtitleClassName)}>
+                    {subtitle}
+                </p>
+            </div>
+        </div>
+    );
+};
+
+export default TestimonialAuthor;
diff --git a/src/components/text/TextAnimation.tsx b/src/components/text/TextAnimation.tsx
new file mode 100644
index 0000000..7b03e99
--- /dev/null
+++ b/src/components/text/TextAnimation.tsx
@@ -0,0 +1,286 @@
+"use client";
+
+import { useRef, useEffect } from "react";
+import { gsap } from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+import { SplitText } from "gsap/SplitText";
+
+gsap.registerPlugin(ScrollTrigger, SplitText);
+
+import { cls } from "@/lib/utils";
+
+interface ScrollTriggerConfig {
+  trigger: HTMLElement;
+  start: string;
+  end: string;
+  markers: boolean;
+  toggleActions: string;
+}
+
+type AnimationType = "entrance-slide" | "reveal-blur" | "background-highlight";
+type VariantType = "trigger" | "words-trigger";
+
+interface TextAnimationProps {
+  type?: AnimationType;
+  text: string;
+  children?: React.ReactNode;
+  className?: string;
+  duration?: number;
+  stagger?: number;
+  start?: string;
+  end?: string;
+  variant?: VariantType;
+  ariaLabel?: string;
+  as?: "div" | "span" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p";
+  gradientColors?: {
+    from: string;
+    to: string;
+  };
+}
+
+const ANIMATION_CONFIG = {
+  trigger: {
+    stagger: 0.0075,
+    useDuration: false,
+    duration: 0.6,
+  },
+  "words-trigger": {
+    stagger: 0.03,
+    useDuration: false,
+    duration: 0.6,
+  },
+} as const;
+
+const ANIMATION_TYPES = {
+  "entrance-slide": {
+    classPrefix: "slide",
+    fromVars: {
+      opacity: 0,
+      yPercent: 50,
+    },
+    toVars: {
+      opacity: 1,
+      yPercent: 0,
+      ease: "power1",
+    },
+  },
+  "reveal-blur": {
+    classPrefix: "blur",
+    fromVars: {
+      autoAlpha: 0,
+      filter: "blur(10px)",
+    },
+    toVars: {
+      autoAlpha: 1,
+      filter: "blur(0px)",
+      ease: "power1.inOut",
+    },
+  },
+  "background-highlight": {
+    classPrefix: "highlight",
+    fromVars: {
+      opacity: 0.25,
+    },
+    toVars: {
+      opacity: 1,
+      ease: "power2.inOut",
+    },
+  },
+} as const;
+
+const TextAnimation = ({
+  type = "entrance-slide",
+  text,
+  children,
+  className = "",
+  duration = 1,
+  stagger,
+  start = "top 80%",
+  end = "top 20%",
+  variant = "trigger",
+  ariaLabel,
+  as = "div",
+  gradientColors,
+}: TextAnimationProps) => {
+  const textRef = useRef<HTMLDivElement | HTMLSpanElement>(null);
+  const splitRef = useRef<SplitText | null>(null);
+  const scrollTriggerRef = useRef<ScrollTrigger | null>(null);
+
+  useEffect(() => {
+    if (!textRef.current) return;
+
+    const ctx = gsap.context(() => {
+      const isWords = variant === "words-trigger";
+      const animConfig = ANIMATION_TYPES[type];
+      const classPrefix = animConfig.classPrefix;
+
+      splitRef.current = new SplitText(textRef.current!, {
+        type: isWords ? "lines,words" : "lines,words,chars",
+        linesClass: `${classPrefix}-line`,
+        wordsClass: `${classPrefix}-word`,
+        charsClass: isWords ? undefined : `${classPrefix}-char`,
+      });
+
+      const lines = splitRef.current.lines;
+      if (type === "entrance-slide") {
+        gsap.set(lines, {
+          overflow: "hidden",
+          display: as === "span" ? "inline" : undefined,
+        });
+      } else if (as === "span") {
+        gsap.set(lines, {
+          display: "inline",
+        });
+      }
+
+      const words = splitRef.current.words;
+      gsap.set(words, {
+        display: "inline-block",
+        whiteSpace: "nowrap",
+      });
+
+      const animateTarget = isWords
+        ? splitRef.current.words
+        : splitRef.current.chars;
+      const config = ANIMATION_CONFIG[variant];
+      const animationDuration = config.useDuration
+        ? duration
+        : config.duration!;
+      const animationStagger = stagger ?? config.stagger;
+
+      if (gradientColors) {
+        animateTarget.forEach((element) => {
+          gsap.set(element as HTMLElement, {
+            backgroundImage: `linear-gradient(180deg, ${gradientColors.from} 0%, ${gradientColors.to} 100%)`,
+            WebkitBackgroundClip: "text",
+            backgroundClip: "text",
+            WebkitTextFillColor: "transparent",
+            display: "inline-block",
+          });
+        });
+      }
+
+      const scrollTriggerConfig: ScrollTriggerConfig = {
+        trigger: textRef.current!,
+        start: start,
+        end: end,
+        markers: false,
+        toggleActions: "play none none none",
+      };
+
+      if (type === "reveal-blur") {
+        const tl = gsap.timeline({
+          scrollTrigger: scrollTriggerConfig,
+        });
+
+        const parentElement = textRef.current;
+        const splitInstance = splitRef.current;
+
+        tl.fromTo(
+          animateTarget,
+          animConfig.fromVars,
+          {
+            ...animConfig.toVars,
+            duration: animationDuration,
+            stagger: animationStagger,
+            force3D: true,
+            onStart: function () {
+              if (this._targets && this._targets.length > 0) {
+                this._targets.forEach((target: HTMLElement) => {
+                  target.style.willChange = "filter, opacity, transform";
+                });
+              }
+            },
+            onComplete: function () {
+              if (this._targets && this._targets.length > 0) {
+                this._targets.forEach((target: HTMLElement) => {
+                  target.style.willChange = "auto";
+                });
+              }
+
+              if (parentElement && splitInstance) {
+                gsap.set(parentElement, {
+                  opacity: 1,
+                  visibility: 'visible',
+                  filter: 'blur(0px)',
+                  transform: 'none'
+                });
+
+                splitInstance.revert();
+                splitRef.current = null;
+              }
+            },
+          }
+        );
+
+        scrollTriggerRef.current = tl.scrollTrigger as ScrollTrigger;
+      } else {
+        const parentElement = textRef.current;
+        const splitInstance = splitRef.current;
+
+        gsap.fromTo(
+          animateTarget,
+          animConfig.fromVars,
+          {
+            ...animConfig.toVars,
+            duration: animationDuration,
+            stagger: animationStagger,
+            force3D: true,
+            scrollTrigger: scrollTriggerConfig,
+            onComplete: () => {
+              if (parentElement && splitInstance) {
+                gsap.set(parentElement, {
+                  opacity: 1,
+                  transform: 'none'
+                });
+
+                splitInstance.revert();
+                splitRef.current = null;
+              }
+            },
+          }
+        );
+      }
+    }, textRef);
+
+    const currentTextRef = textRef.current;
+
+    return () => {
+      if (
+        type === "reveal-blur" &&
+        scrollTriggerRef.current &&
+        scrollTriggerRef.current.trigger === currentTextRef
+      ) {
+        scrollTriggerRef.current.kill();
+      }
+      ctx.revert();
+      if (splitRef.current) {
+        splitRef.current.revert();
+      }
+    };
+  }, [text, type, duration, stagger, start, end, variant, as, gradientColors]);
+
+  const animConfig = ANIMATION_TYPES[type];
+  const Component = as;
+
+  return (
+    <Component
+      // @ts-expect-error - Dynamic component type requires flexible ref
+      ref={textRef}
+      className={cls(
+        `${animConfig.classPrefix}-text`,
+        className
+      )}
+      style={{
+        fontKerning: 'none',
+        textRendering: 'optimizeSpeed',
+      }}
+      aria-label={ariaLabel || text || undefined}
+    >
+      {children || text?.replace(/-/g, '\u2011')}
+    </Component>
+  );
+};
+
+
+export default TextAnimation;
\ No newline at end of file
diff --git a/src/components/text/TextNumberCount.tsx b/src/components/text/TextNumberCount.tsx
new file mode 100644
index 0000000..b7cf591
--- /dev/null
+++ b/src/components/text/TextNumberCount.tsx
@@ -0,0 +1,105 @@
+"use client";
+
+import { useState, useEffect, useRef, useCallback } from "react";
+import { AnimateNumber } from "motion-number";
+
+interface TextNumberCountProps {
+  value: number;
+  format?: Omit<Intl.NumberFormatOptions, "notation"> & {
+    notation?: Exclude<
+      Intl.NumberFormatOptions["notation"],
+      "scientific" | "engineering"
+    >;
+  };
+  locales?: Intl.LocalesArgument;
+  className?: string;
+  suffix?: string;
+  prefix?: string;
+  animateOnScroll?: boolean;
+  startFrom?: number;
+  duration?: number;
+  threshold?: number;
+}
+
+const TextNumberCount = ({
+  value,
+  format,
+  locales = "en-US",
+  className = "",
+  suffix,
+  prefix,
+  animateOnScroll = false,
+  startFrom,
+  duration = 2,
+  threshold = 0.5,
+}: TextNumberCountProps) => {
+  const initialValue = animateOnScroll ? (startFrom ?? 0) : value;
+  const [displayValue, setDisplayValue] = useState(initialValue);
+  const [hasAnimated, setHasAnimated] = useState(false);
+  const containerRef = useRef<HTMLSpanElement>(null);
+  const observerRef = useRef<IntersectionObserver | null>(null);
+
+  const handleIntersection = useCallback(
+    (entries: IntersectionObserverEntry[]) => {
+      const [entry] = entries;
+      if (entry?.isIntersecting && !hasAnimated) {
+        setDisplayValue(value);
+        setHasAnimated(true);
+        observerRef.current?.disconnect();
+      }
+    },
+    [value, hasAnimated]
+  );
+
+  useEffect(() => {
+    if (!animateOnScroll || hasAnimated || typeof window === "undefined") {
+      return;
+    }
+
+    const element = containerRef.current;
+    if (!element) return;
+
+    observerRef.current = new IntersectionObserver(handleIntersection, {
+      threshold: Math.min(Math.max(threshold, 0), 1),
+      rootMargin: "0px",
+    });
+
+    observerRef.current.observe(element);
+
+    return () => {
+      observerRef.current?.disconnect();
+    };
+  }, [animateOnScroll, hasAnimated, threshold, handleIntersection]);
+
+  useEffect(() => {
+    if (!animateOnScroll) {
+      setDisplayValue(value);
+    }
+  }, [value, animateOnScroll]);
+
+  const animateProps = animateOnScroll
+    ? { animate: { duration } }
+    : {};
+
+  const content = (
+    <AnimateNumber
+      format={format}
+      locales={locales}
+      className={className}
+      suffix={suffix}
+      prefix={prefix}
+      {...animateProps}
+    >
+      {displayValue}
+    </AnimateNumber>
+  );
+
+  if (animateOnScroll) {
+    return <span ref={containerRef}>{content}</span>;
+  }
+
+  return content;
+};
+
+
+export default TextNumberCount;
\ No newline at end of file
diff --git a/src/components/text/types.ts b/src/components/text/types.ts
new file mode 100644
index 0000000..ddaf2ac
--- /dev/null
+++ b/src/components/text/types.ts
@@ -0,0 +1 @@
+export type AnimationType = "entrance-slide" | "reveal-blur" | "background-highlight";
diff --git a/src/hooks/useBlogPosts.ts b/src/hooks/useBlogPosts.ts
new file mode 100644
index 0000000..61f52d6
--- /dev/null
+++ b/src/hooks/useBlogPosts.ts
@@ -0,0 +1,39 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { BlogPost, defaultPosts, fetchBlogPosts } from "@/lib/api/blog";
+
+export function useBlogPosts() {
+    const [posts, setPosts] = useState<BlogPost[]>(defaultPosts);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState<Error | null>(null);
+
+    useEffect(() => {
+        let isMounted = true;
+
+        async function loadPosts() {
+            try {
+                const data = await fetchBlogPosts();
+                if (isMounted) {
+                    setPosts(data);
+                }
+            } catch (err) {
+                if (isMounted) {
+                    setError(err instanceof Error ? err : new Error("Failed to fetch posts"));
+                }
+            } finally {
+                if (isMounted) {
+                    setIsLoading(false);
+                }
+            }
+        }
+
+        loadPosts();
+
+        return () => {
+            isMounted = false;
+        };
+    }, []);
+
+    return { posts, isLoading, error };
+}
diff --git a/src/hooks/useCart.ts b/src/hooks/useCart.ts
new file mode 100644
index 0000000..64fa51d
--- /dev/null
+++ b/src/hooks/useCart.ts
@@ -0,0 +1,160 @@
+"use client";
+
+import { useState, useEffect, useCallback, useMemo } from "react";
+import { useSearchParams, useRouter } from "next/navigation";
+import type { CartItem } from "@/components/ecommerce/cart/ProductCartItem";
+
+export interface ExtendedCartItem extends CartItem {
+    productId: string;
+}
+
+const CART_STORAGE_KEY = "shop_cart_items";
+
+const saveCartToStorage = (items: ExtendedCartItem[]) => {
+    try {
+        localStorage.setItem(CART_STORAGE_KEY, JSON.stringify(items));
+    } catch (error) {
+        console.warn("Failed to save cart to localStorage:", error);
+    }
+};
+
+const loadCartFromStorage = (): ExtendedCartItem[] => {
+    try {
+        const stored = localStorage.getItem(CART_STORAGE_KEY);
+        if (stored) {
+            return JSON.parse(stored);
+        }
+    } catch (error) {
+        console.warn("Failed to load cart from localStorage:", error);
+    }
+    return [];
+};
+
+const clearCartFromStorage = () => {
+    try {
+        localStorage.removeItem(CART_STORAGE_KEY);
+    } catch (error) {
+        console.warn("Failed to clear cart from localStorage:", error);
+    }
+};
+
+export function useCart() {
+    const router = useRouter();
+    const searchParams = useSearchParams();
+    const [cartItems, setCartItems] = useState<ExtendedCartItem[]>([]);
+    const [isOpen, setIsOpen] = useState(false);
+
+    useEffect(() => {
+        if (typeof window === "undefined") return;
+
+        const success = searchParams.get("success");
+        const sessionId = searchParams.get("session_id");
+
+        if (success === "true" || sessionId) {
+            clearCartFromStorage();
+            setCartItems([]);
+
+            const url = new URL(window.location.href);
+            url.searchParams.delete("success");
+            url.searchParams.delete("session_id");
+            router.replace(url.pathname + url.search);
+        } else {
+            const loadedItems = loadCartFromStorage();
+            if (loadedItems.length > 0) {
+                setCartItems(loadedItems);
+            }
+        }
+    }, [searchParams, router]);
+
+    useEffect(() => {
+        if (typeof window === "undefined") return;
+
+        const success = searchParams.get("success");
+        const sessionId = searchParams.get("session_id");
+        if (success === "true" || sessionId) return;
+
+        if (cartItems.length > 0) {
+            saveCartToStorage(cartItems);
+        } else {
+            clearCartFromStorage();
+        }
+    }, [cartItems, searchParams]);
+
+    const addItem = useCallback((item: ExtendedCartItem) => {
+        setCartItems((prev) => {
+            const existing = prev.find((i) => i.id === item.id);
+            if (existing) {
+                return prev.map((i) =>
+                    i.id === item.id
+                        ? { ...i, quantity: i.quantity + item.quantity }
+                        : i
+                );
+            }
+            return [...prev, item];
+        });
+        setIsOpen(true);
+    }, []);
+
+    const updateQuantity = useCallback((itemId: string, quantity: number) => {
+        setCartItems((prev) =>
+            prev.map((item) => (item.id === itemId ? { ...item, quantity } : item))
+        );
+    }, []);
+
+    const removeItem = useCallback((itemId: string) => {
+        setCartItems((prev) => prev.filter((item) => item.id !== itemId));
+    }, []);
+
+    const clearCart = useCallback(() => {
+        setCartItems([]);
+        clearCartFromStorage();
+    }, []);
+
+    const total = useMemo(() => {
+        return cartItems
+            .reduce((sum, item) =>
+                sum + parseFloat(item.price.replace("$", "").replace(",", "")) * item.quantity,
+                0
+            )
+            .toFixed(2);
+    }, [cartItems]);
+
+    const itemCount = useMemo(() => {
+        return cartItems.reduce((sum, item) => sum + item.quantity, 0);
+    }, [cartItems]);
+
+    const getCheckoutItems = useCallback(() => {
+        return cartItems.map((item) => {
+            const metadata: Record<string, string> = {};
+            if (item.variants && item.variants.length > 0) {
+                item.variants.forEach((variant) => {
+                    const [key, value] = variant.split(':').map(s => s.trim());
+                    if (key && value) {
+                        metadata[key.toLowerCase()] = value;
+                    }
+                });
+            }
+
+            return {
+                productId: item.productId,
+                quantity: item.quantity,
+                imageSrc: item.imageSrc,
+                imageAlt: item.imageAlt,
+                metadata: Object.keys(metadata).length > 0 ? metadata : undefined,
+            };
+        });
+    }, [cartItems]);
+
+    return {
+        items: cartItems,
+        isOpen,
+        setIsOpen,
+        addItem,
+        updateQuantity,
+        removeItem,
+        clearCart,
+        total,
+        itemCount,
+        getCheckoutItems,
+    };
+}
diff --git a/src/hooks/useCheckout.ts b/src/hooks/useCheckout.ts
new file mode 100644
index 0000000..961228f
--- /dev/null
+++ b/src/hooks/useCheckout.ts
@@ -0,0 +1,117 @@
+"use client";
+
+import { useState } from "react";
+import { Product } from "@/lib/api/product";
+
+export type CheckoutItem = {
+    productId: string;
+    quantity: number;
+    imageSrc?: string;
+    imageAlt?: string;
+    metadata?: {
+        brand?: string;
+        variant?: string;
+        rating?: number;
+        reviewCount?: string;
+        [key: string]: string | number | undefined;
+    };
+};
+
+export type CheckoutResult = {
+    success: boolean;
+    url?: string;
+    error?: string;
+};
+
+export function useCheckout() {
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    const checkout = async (items: CheckoutItem[], options?: { successUrl?: string; cancelUrl?: string }): Promise<CheckoutResult> => {
+        const apiUrl = process.env.NEXT_PUBLIC_API_URL;
+        const projectId = process.env.NEXT_PUBLIC_PROJECT_ID;
+
+        if (!apiUrl || !projectId) {
+            const errorMsg = "NEXT_PUBLIC_API_URL or NEXT_PUBLIC_PROJECT_ID not configured";
+            setError(errorMsg);
+            return { success: false, error: errorMsg };
+        }
+
+        setIsLoading(true);
+        setError(null);
+
+        try {
+
+            const response = await fetch(`${apiUrl}/stripe/project/checkout-session`, {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify({
+                    projectId,
+                    items,
+                    successUrl: options?.successUrl || window.location.href,
+                    cancelUrl: options?.cancelUrl || window.location.href,
+                }),
+            });
+
+            if (!response.ok) {
+                const errorData = await response.json().catch(() => ({}));
+                const errorMsg = errorData.message || `Request failed with status ${response.status}`;
+                setError(errorMsg);
+                return { success: false, error: errorMsg };
+            }
+
+            const data = await response.json();
+
+            if (data.data.url) {
+                window.location.href = data.data.url;
+            }
+
+            return { success: true, url: data.data.url };
+        } catch (err) {
+            const errorMsg = err instanceof Error ? err.message : "Failed to create checkout session";
+            setError(errorMsg);
+            return { success: false, error: errorMsg };
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const buyNow = async (product: Product | string, quantity: number = 1): Promise<CheckoutResult> => {
+        const successUrl = new URL(window.location.href);
+        successUrl.searchParams.set("success", "true");
+
+        if (typeof product === "string") {
+            return checkout([{ productId: product, quantity }], { successUrl: successUrl.toString() });
+        }
+
+        let metadata: CheckoutItem["metadata"] = {};
+
+        if (product.metadata && Object.keys(product.metadata).length > 0) {
+            const { imageSrc, imageAlt, images, ...restMetadata } = product.metadata;
+            metadata = restMetadata;
+        } else {
+            if (product.brand) metadata.brand = product.brand;
+            if (product.variant) metadata.variant = product.variant;
+            if (product.rating !== undefined) metadata.rating = product.rating;
+            if (product.reviewCount) metadata.reviewCount = product.reviewCount;
+        }
+
+        return checkout([{
+            productId: product.id,
+            quantity,
+            imageSrc: product.imageSrc,
+            imageAlt: product.imageAlt,
+            metadata: Object.keys(metadata).length > 0 ? metadata : undefined,
+        }], { successUrl: successUrl.toString() });
+    };
+
+    return {
+        checkout,
+        buyNow,
+        isLoading,
+        error,
+        clearError: () => setError(null),
+    };
+}
\ No newline at end of file
diff --git a/src/hooks/useClickOutside.ts b/src/hooks/useClickOutside.ts
new file mode 100644
index 0000000..383d639
--- /dev/null
+++ b/src/hooks/useClickOutside.ts
@@ -0,0 +1,38 @@
+import { useEffect, RefObject } from "react";
+
+export const useClickOutside = (
+  ref: RefObject<HTMLElement | null>,
+  handler: () => void,
+  isActive: boolean = true,
+  excludeRefs?: RefObject<HTMLElement | null>[]
+) => {
+  useEffect(() => {
+    if (!isActive) return;
+
+    const handleClickOutside = (event: MouseEvent) => {
+      if (ref.current && !ref.current.contains(event.target as Node)) {
+        const isExcluded = excludeRefs?.some((excludeRef) =>
+          excludeRef.current?.contains(event.target as Node)
+        );
+
+        if (!isExcluded) {
+          handler();
+        }
+      }
+    };
+
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        handler();
+      }
+    };
+
+    document.addEventListener("click", handleClickOutside);
+    document.addEventListener("keydown", handleEscape);
+
+    return () => {
+      document.removeEventListener("click", handleClickOutside);
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [ref, handler, isActive, excludeRefs]);
+};
diff --git a/src/hooks/useProduct.ts b/src/hooks/useProduct.ts
new file mode 100644
index 0000000..3407f3a
--- /dev/null
+++ b/src/hooks/useProduct.ts
@@ -0,0 +1,45 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Product, fetchProduct } from "@/lib/api/product";
+
+export function useProduct(productId: string) {
+    const [product, setProduct] = useState<Product | null>(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState<Error | null>(null);
+
+    useEffect(() => {
+        let isMounted = true;
+
+        async function loadProduct() {
+            if (!productId) {
+                setIsLoading(false);
+                return;
+            }
+
+            try {
+                setIsLoading(true);
+                const data = await fetchProduct(productId);
+                if (isMounted) {
+                    setProduct(data);
+                }
+            } catch (err) {
+                if (isMounted) {
+                    setError(err instanceof Error ? err : new Error("Failed to fetch product"));
+                }
+            } finally {
+                if (isMounted) {
+                    setIsLoading(false);
+                }
+            }
+        }
+
+        loadProduct();
+
+        return () => {
+            isMounted = false;
+        };
+    }, [productId]);
+
+    return { product, isLoading, error };
+}
diff --git a/src/hooks/useProductCatalog.ts b/src/hooks/useProductCatalog.ts
new file mode 100644
index 0000000..c4ae5cf
--- /dev/null
+++ b/src/hooks/useProductCatalog.ts
@@ -0,0 +1,115 @@
+"use client";
+
+import { useState, useMemo, useCallback } from "react";
+import { useRouter } from "next/navigation";
+import { useProducts } from "./useProducts";
+import type { Product } from "@/lib/api/product";
+import type { CatalogProduct } from "@/components/ecommerce/productCatalog/ProductCatalogItem";
+import type { ProductVariant } from "@/components/ecommerce/productDetail/ProductDetailCard";
+
+export type SortOption = "Newest" | "Price: Low-High" | "Price: High-Low";
+
+interface UseProductCatalogOptions {
+    basePath?: string;
+}
+
+export function useProductCatalog(options: UseProductCatalogOptions = {}) {
+    const { basePath = "/shop" } = options;
+    const router = useRouter();
+    const { products: fetchedProducts, isLoading } = useProducts();
+
+    const [search, setSearch] = useState("");
+    const [category, setCategory] = useState("All");
+    const [sort, setSort] = useState<SortOption>("Newest");
+
+    const handleProductClick = useCallback((productId: string) => {
+        router.push(`${basePath}/${productId}`);
+    }, [router, basePath]);
+
+    const catalogProducts: CatalogProduct[] = useMemo(() => {
+        if (fetchedProducts.length === 0) return [];
+
+        return fetchedProducts.map((product) => ({
+            id: product.id,
+            name: product.name,
+            price: product.price,
+            imageSrc: product.imageSrc,
+            imageAlt: product.imageAlt || product.name,
+            rating: product.rating || 0,
+            reviewCount: product.reviewCount,
+            category: product.brand,
+            onProductClick: () => handleProductClick(product.id),
+        }));
+    }, [fetchedProducts, handleProductClick]);
+
+    const categories = useMemo(() => {
+        const categorySet = new Set<string>();
+        catalogProducts.forEach((product) => {
+            if (product.category) {
+                categorySet.add(product.category);
+            }
+        });
+        return Array.from(categorySet).sort();
+    }, [catalogProducts]);
+
+    const filteredProducts = useMemo(() => {
+        let result = catalogProducts;
+
+        if (search) {
+            const q = search.toLowerCase();
+            result = result.filter(
+                (p) =>
+                    p.name.toLowerCase().includes(q) ||
+                    (p.category?.toLowerCase().includes(q) ?? false)
+            );
+        }
+
+        if (category !== "All") {
+            result = result.filter((p) => p.category === category);
+        }
+
+        if (sort === "Price: Low-High") {
+            result = [...result].sort(
+                (a, b) =>
+                    parseFloat(a.price.replace("$", "").replace(",", "")) -
+                    parseFloat(b.price.replace("$", "").replace(",", ""))
+            );
+        } else if (sort === "Price: High-Low") {
+            result = [...result].sort(
+                (a, b) =>
+                    parseFloat(b.price.replace("$", "").replace(",", "")) -
+                    parseFloat(a.price.replace("$", "").replace(",", ""))
+            );
+        }
+
+        return result;
+    }, [catalogProducts, search, category, sort]);
+
+    const filters: ProductVariant[] = useMemo(() => [
+        {
+            label: "Category",
+            options: ["All", ...categories],
+            selected: category,
+            onChange: setCategory,
+        },
+        {
+            label: "Sort",
+            options: ["Newest", "Price: Low-High", "Price: High-Low"] as SortOption[],
+            selected: sort,
+            onChange: (value) => setSort(value as SortOption),
+        },
+    ], [categories, category, sort]);
+
+    return {
+        products: filteredProducts,
+        isLoading,
+        search,
+        setSearch,
+        category,
+        setCategory,
+        sort,
+        setSort,
+        filters,
+        categories,
+    };
+}
diff --git a/src/hooks/useProductDetail.ts b/src/hooks/useProductDetail.ts
new file mode 100644
index 0000000..dd0c4d7
--- /dev/null
+++ b/src/hooks/useProductDetail.ts
@@ -0,0 +1,196 @@
+"use client";
+
+import { useState, useMemo, useCallback } from "react";
+import { useProduct } from "./useProduct";
+import type { Product } from "@/lib/api/product";
+import type { ProductVariant } from "@/components/ecommerce/productDetail/ProductDetailCard";
+import type { ExtendedCartItem } from "./useCart";
+
+interface ProductImage {
+    src: string;
+    alt: string;
+}
+
+interface ProductMeta {
+    salePrice?: string;
+    ribbon?: string;
+    inventoryStatus?: string;
+    inventoryQuantity?: number;
+    sku?: string;
+}
+
+export function useProductDetail(productId: string) {
+    const { product, isLoading, error } = useProduct(productId);
+    const [selectedQuantity, setSelectedQuantity] = useState(1);
+    const [selectedVariants, setSelectedVariants] = useState<Record<string, string>>({});
+
+    const images = useMemo<ProductImage[]>(() => {
+        if (!product) return [];
+
+        if (product.images && product.images.length > 0) {
+            return product.images.map((src, index) => ({
+                src,
+                alt: product.imageAlt || `${product.name} - Image ${index + 1}`,
+            }));
+        }
+        return [{
+            src: product.imageSrc,
+            alt: product.imageAlt || product.name,
+        }];
+    }, [product]);
+
+    const meta = useMemo<ProductMeta>(() => {
+        if (!product?.metadata) return {};
+
+        const metadata = product.metadata;
+
+        let salePrice: string | undefined;
+        const onSaleValue = metadata.onSale;
+        const onSale = String(onSaleValue) === "true" || onSaleValue === 1 || String(onSaleValue) === "1";
+        const salePriceValue = metadata.salePrice;
+
+        if (onSale && salePriceValue !== undefined && salePriceValue !== null) {
+            if (typeof salePriceValue === 'number') {
+                salePrice = `$${salePriceValue.toFixed(2)}`;
+            } else {
+                const salePriceStr = String(salePriceValue);
+                salePrice = salePriceStr.startsWith('$') ? salePriceStr : `$${salePriceStr}`;
+            }
+        }
+
+        let inventoryQuantity: number | undefined;
+        if (metadata.inventoryQuantity !== undefined) {
+            const qty = metadata.inventoryQuantity;
+            inventoryQuantity = typeof qty === 'number' ? qty : parseInt(String(qty), 10);
+        }
+
+        return {
+            salePrice,
+            ribbon: metadata.ribbon ? String(metadata.ribbon) : undefined,
+            inventoryStatus: metadata.inventoryStatus ? String(metadata.inventoryStatus) : undefined,
+            inventoryQuantity,
+            sku: metadata.sku ? String(metadata.sku) : undefined,
+        };
+    }, [product]);
+
+    const variants = useMemo<ProductVariant[]>(() => {
+        if (!product) return [];
+
+        const variantList: ProductVariant[] = [];
+
+        if (product.metadata?.variantOptions) {
+            try {
+                const variantOptionsStr = String(product.metadata.variantOptions);
+                const parsedOptions = JSON.parse(variantOptionsStr);
+
+                if (Array.isArray(parsedOptions)) {
+                    parsedOptions.forEach((option: any) => {
+                        if (option.name && option.values) {
+                            const values = typeof option.values === 'string'
+                                ? option.values.split(',').map((v: string) => v.trim())
+                                : Array.isArray(option.values)
+                                    ? option.values.map((v: any) => String(v).trim())
+                                    : [String(option.values)];
+
+                            if (values.length > 0) {
+                                const optionLabel = option.name;
+                                const currentSelected = selectedVariants[optionLabel] || values[0];
+
+                                variantList.push({
+                                    label: optionLabel,
+                                    options: values,
+                                    selected: currentSelected,
+                                    onChange: (value) => {
+                                        setSelectedVariants((prev) => ({
+                                            ...prev,
+                                            [optionLabel]: value,
+                                        }));
+                                    },
+                                });
+                            }
+                        }
+                    });
+                }
+            } catch (error) {
+                console.warn("Failed to parse variantOptions:", error);
+            }
+        }
+
+        if (variantList.length === 0 && product.brand) {
+            variantList.push({
+                label: "Brand",
+                options: [product.brand],
+                selected: product.brand,
+                onChange: () => { },
+            });
+        }
+
+        if (variantList.length === 0 && product.variant) {
+            const variantOptions = product.variant.includes('/')
+                ? product.variant.split('/').map(v => v.trim())
+                : [product.variant];
+
+            const variantLabel = "Variant";
+            const currentSelected = selectedVariants[variantLabel] || variantOptions[0];
+
+            variantList.push({
+                label: variantLabel,
+                options: variantOptions,
+                selected: currentSelected,
+                onChange: (value) => {
+                    setSelectedVariants((prev) => ({
+                        ...prev,
+                        [variantLabel]: value,
+                    }));
+                },
+            });
+        }
+
+        return variantList;
+    }, [product, selectedVariants]);
+
+    const quantityVariant = useMemo<ProductVariant>(() => ({
+        label: "Quantity",
+        options: Array.from({ length: 10 }, (_, i) => String(i + 1)),
+        selected: String(selectedQuantity),
+        onChange: (value) => setSelectedQuantity(parseInt(value, 10)),
+    }), [selectedQuantity]);
+
+    const createCartItem = useCallback((): ExtendedCartItem | null => {
+        if (!product) return null;
+
+        const variantStrings = Object.entries(selectedVariants).map(
+            ([label, value]) => `${label}: ${value}`
+        );
+
+        if (variantStrings.length === 0 && product.variant) {
+            variantStrings.push(`Variant: ${product.variant}`);
+        }
+
+        const variantId = Object.values(selectedVariants).join('-') || 'default';
+
+        return {
+            id: `${product.id}-${variantId}-${selectedQuantity}`,
+            productId: product.id,
+            name: product.name,
+            variants: variantStrings,
+            price: product.price,
+            quantity: selectedQuantity,
+            imageSrc: product.imageSrc,
+            imageAlt: product.imageAlt || product.name,
+        };
+    }, [product, selectedVariants, selectedQuantity]);
+
+    return {
+        product,
+        isLoading,
+        error,
+        images,
+        meta,
+        variants,
+        quantityVariant,
+        selectedQuantity,
+        selectedVariants,
+        createCartItem,
+    };
+}
diff --git a/src/hooks/useProducts.ts b/src/hooks/useProducts.ts
new file mode 100644
index 0000000..53609fa
--- /dev/null
+++ b/src/hooks/useProducts.ts
@@ -0,0 +1,39 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Product, fetchProducts } from "@/lib/api/product";
+
+export function useProducts() {
+    const [products, setProducts] = useState<Product[]>([]);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState<Error | null>(null);
+
+    useEffect(() => {
+        let isMounted = true;
+
+        async function loadProducts() {
+            try {
+                const data = await fetchProducts();
+                if (isMounted) {
+                    setProducts(data);
+                }
+            } catch (err) {
+                if (isMounted) {
+                    setError(err instanceof Error ? err : new Error("Failed to fetch products"));
+                }
+            } finally {
+                if (isMounted) {
+                    setIsLoading(false);
+                }
+            }
+        }
+
+        loadProducts();
+
+        return () => {
+            isMounted = false;
+        };
+    }, []);
+
+    return { products, isLoading, error };
+}
diff --git a/src/lib/api/blog.ts b/src/lib/api/blog.ts
new file mode 100644
index 0000000..f8a7218
--- /dev/null
+++ b/src/lib/api/blog.ts
@@ -0,0 +1,106 @@
+export type BlogPost = {
+    id: string;
+    category: string;
+    title: string;
+    excerpt: string;
+    imageSrc: string;
+    imageAlt?: string;
+    authorName: string;
+    authorAvatar: string;
+    date: string;
+    onBlogClick?: () => void;
+};
+
+export const defaultPosts: BlogPost[] = [
+    {
+        id: "1",
+        category: "Design",
+        title: "UX review presentations",
+        excerpt: "How do you create compelling presentations that wow your colleagues and impress your managers?",
+        imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/placeholder3.avif",
+        imageAlt: "Abstract design with purple and silver tones",
+        authorName: "Olivia Rhye",
+        authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/placeholder3.avif",
+        date: "20 Jan 2025",
+    },
+    {
+        id: "2",
+        category: "Development",
+        title: "Building scalable applications",
+        excerpt: "Learn the best practices for building applications that can handle millions of users.",
+        imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/placeholder4.webp",
+        imageAlt: "Development workspace",
+        authorName: "John Smith",
+        authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/placeholder4.webp",
+        date: "18 Jan 2025",
+    },
+    {
+        id: "3",
+        category: "Marketing",
+        title: "Content strategy essentials",
+        excerpt: "Discover how to create a content strategy that drives engagement and conversions.",
+        imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/placeholder3.avif",
+        imageAlt: "Marketing strategy board",
+        authorName: "Sarah Johnson",
+        authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/placeholder3.avif",
+        date: "15 Jan 2025",
+    },
+    {
+        id: "4",
+        category: "Product",
+        title: "Product management 101",
+        excerpt: "Everything you need to know to become an effective product manager in 2025.",
+        imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/placeholder4.webp",
+        imageAlt: "Product planning session",
+        authorName: "Mike Davis",
+        authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/placeholder4.webp",
+        date: "12 Jan 2025",
+    },
+];
+
+export async function fetchBlogPosts(): Promise<BlogPost[]> {
+    const apiUrl = process.env.NEXT_PUBLIC_API_URL;
+    const projectId = process.env.NEXT_PUBLIC_PROJECT_ID;
+
+    if (!apiUrl || !projectId) {
+        console.warn("NEXT_PUBLIC_API_URL or NEXT_PUBLIC_PROJECT_ID not configured");
+        return [];
+    }
+
+    try {
+        const url = `${apiUrl}/posts/${projectId}?status=published`;
+        const response = await fetch(url, {
+            method: "GET",
+            headers: {
+                "Content-Type": "application/json",
+            },
+        });
+
+        if (!response.ok) {
+            console.warn(`API request failed with status ${response.status}`);
+            return [];
+        }
+
+        const resp = await response.json();
+        const data = resp.data;
+
+        if (!Array.isArray(data) || data.length === 0) {
+            return [];
+        }
+
+        return data.map((post: any) => ({
+            id: post.id || String(Math.random()),
+            category: post.category || "General",
+            title: post.title || "Untitled",
+            excerpt: post.excerpt || post.content?.slice(0, 30) || "",
+            imageSrc: post.imageUrl || "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/placeholder3.avif",
+            imageAlt: post.imageAlt || post.title || "",
+            authorName: post.author?.name || "Anonymous",
+            authorAvatar: post.author?.avatar || "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/placeholder3.avif",
+            date: post.date || post.createdAt || new Date().toLocaleDateString("en-GB", { day: "numeric", month: "short", year: "numeric" }),
+        }));
+    } catch (error) {
+        console.error("Error fetching posts:", error);
+        return [];
+    }
+}
diff --git a/src/lib/api/product.ts b/src/lib/api/product.ts
new file mode 100644
index 0000000..0b1310b
--- /dev/null
+++ b/src/lib/api/product.ts
@@ -0,0 +1,219 @@
+export type Product = {
+    id: string;
+    name: string;
+    price: string;
+    imageSrc: string;
+    imageAlt?: string;
+    images?: string[];
+    brand?: string;
+    variant?: string;
+    rating?: number;
+    reviewCount?: string;
+    description?: string;
+    priceId?: string;
+    metadata?: {
+        [key: string]: string | number | undefined;
+    };
+    onFavorite?: () => void;
+    onProductClick?: () => void;
+    isFavorited?: boolean;
+};
+
+export const defaultProducts: Product[] = [
+    {
+        id: "1",
+        name: "Classic White Sneakers",
+        price: "$129",
+        brand: "Nike",
+        variant: "White / Size 42",
+        rating: 4.5,
+        reviewCount: "128",
+        imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/placeholder3.avif",
+        imageAlt: "Classic white sneakers",
+    },
+    {
+        id: "2",
+        name: "Leather Crossbody Bag",
+        price: "$89",
+        brand: "Coach",
+        variant: "Brown / Medium",
+        rating: 4.8,
+        reviewCount: "256",
+        imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/placeholder4.webp",
+        imageAlt: "Brown leather crossbody bag",
+    },
+    {
+        id: "3",
+        name: "Wireless Headphones",
+        price: "$199",
+        brand: "Sony",
+        variant: "Black",
+        rating: 4.7,
+        reviewCount: "512",
+        imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/placeholder3.avif",
+        imageAlt: "Black wireless headphones",
+    },
+    {
+        id: "4",
+        name: "Minimalist Watch",
+        price: "$249",
+        brand: "Fossil",
+        variant: "Silver / 40mm",
+        rating: 4.6,
+        reviewCount: "89",
+        imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/placeholder4.webp",
+        imageAlt: "Silver minimalist watch",
+    },
+];
+
+function formatPrice(amount: number, currency: string): string {
+    const formatter = new Intl.NumberFormat("en-US", {
+        style: "currency",
+        currency: currency.toUpperCase(),
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 2,
+    });
+    return formatter.format(amount / 100);
+}
+
+export async function fetchProducts(): Promise<Product[]> {
+    const apiUrl = process.env.NEXT_PUBLIC_API_URL;
+    const projectId = process.env.NEXT_PUBLIC_PROJECT_ID;
+
+    if (!apiUrl || !projectId) {
+        return [];
+    }
+
+    try {
+        const url = `${apiUrl}/stripe/project/products?projectId=${projectId}&expandDefaultPrice=true`;
+        const response = await fetch(url, {
+            method: "GET",
+            headers: {
+                "Content-Type": "application/json",
+            },
+        });
+
+        if (!response.ok) {
+            return [];
+        }
+
+        const resp = await response.json();
+        const data = resp.data.data || resp.data;
+
+        if (!Array.isArray(data) || data.length === 0) {
+            return [];
+        }
+
+        return data.map((product: any) => {
+            const metadata: Record<string, string | number | undefined> = {};
+            if (product.metadata && typeof product.metadata === 'object') {
+                Object.keys(product.metadata).forEach(key => {
+                    const value = product.metadata[key];
+                    if (value !== null && value !== undefined) {
+                        const numValue = parseFloat(value);
+                        metadata[key] = isNaN(numValue) ? value : numValue;
+                    }
+                });
+            }
+
+            const imageSrc = product.images?.[0] || product.imageSrc || "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/placeholder3.avif";
+            const imageAlt = product.imageAlt || product.name || "";
+            const images = product.images && Array.isArray(product.images) && product.images.length > 0
+                ? product.images
+                : [imageSrc];
+
+            return {
+                id: product.id || String(Math.random()),
+                name: product.name || "Untitled Product",
+                description: product.description || "",
+                price: product.default_price?.unit_amount
+                    ? formatPrice(product.default_price.unit_amount, product.default_price.currency || "usd")
+                    : product.price || "$0",
+                priceId: product.default_price?.id || product.priceId,
+                imageSrc,
+                imageAlt,
+                images,
+                brand: product.metadata?.brand || product.brand || "",
+                variant: product.metadata?.variant || product.variant || "",
+                rating: product.metadata?.rating ? parseFloat(product.metadata.rating) : undefined,
+                reviewCount: product.metadata?.reviewCount || undefined,
+                metadata: Object.keys(metadata).length > 0 ? metadata : undefined,
+            };
+        });
+    } catch (error) {
+        return [];
+    }
+}
+
+export async function fetchProduct(productId: string): Promise<Product | null> {
+    const apiUrl = process.env.NEXT_PUBLIC_API_URL;
+    const projectId = process.env.NEXT_PUBLIC_PROJECT_ID;
+
+    if (!apiUrl || !projectId) {
+        return null;
+    }
+
+    try {
+        const url = `${apiUrl}/stripe/project/products/${productId}?projectId=${projectId}&expandDefaultPrice=true`;
+        const response = await fetch(url, {
+            method: "GET",
+            headers: {
+                "Content-Type": "application/json",
+            },
+        });
+
+        if (!response.ok) {
+            return null;
+        }
+
+        const resp = await response.json();
+        const product = resp.data?.data || resp.data || resp;
+
+        if (!product || typeof product !== 'object') {
+            return null;
+        }
+
+        const metadata: Record<string, string | number | undefined> = {};
+        if (product.metadata && typeof product.metadata === 'object') {
+            Object.keys(product.metadata).forEach(key => {
+                const value = product.metadata[key];
+                if (value !== null && value !== undefined && value !== '') {
+                    const numValue = parseFloat(String(value));
+                    metadata[key] = isNaN(numValue) ? String(value) : numValue;
+                }
+            });
+        }
+
+        let priceValue = product.price;
+        if (!priceValue && product.default_price?.unit_amount) {
+            priceValue = formatPrice(product.default_price.unit_amount, product.default_price.currency || "usd");
+        }
+        if (!priceValue) {
+            priceValue = "$0";
+        }
+
+        const imageSrc = product.images?.[0] || product.imageSrc || "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/placeholder3.avif";
+        const imageAlt = product.imageAlt || product.name || "";
+        const images = product.images && Array.isArray(product.images) && product.images.length > 0
+            ? product.images
+            : [imageSrc];
+
+        return {
+            id: product.id || String(Math.random()),
+            name: product.name || "Untitled Product",
+            description: product.description || "",
+            price: priceValue,
+            priceId: product.default_price?.id || product.priceId,
+            imageSrc,
+            imageAlt,
+            images,
+            brand: product.metadata?.brand || product.brand || "",
+            variant: product.metadata?.variant || product.variant || "",
+            rating: product.metadata?.rating ? parseFloat(String(product.metadata.rating)) : undefined,
+            reviewCount: product.metadata?.reviewCount || undefined,
+            metadata: Object.keys(metadata).length > 0 ? metadata : undefined,
+        };
+    } catch (error) {
+        return null;
+    }
+}
\ No newline at end of file
diff --git a/src/lib/buttonUtils.ts b/src/lib/buttonUtils.ts
new file mode 100644
index 0000000..7b27ac2
--- /dev/null
+++ b/src/lib/buttonUtils.ts
@@ -0,0 +1,102 @@
+import { cls } from "./utils";
+import { hasBgClassName } from "@/components/button/types";
+import type { CTAButtonVariant, ButtonPropsForVariant } from "@/components/button/types";
+import type { ButtonConfig } from "@/types/button";
+
+export const getButtonProps = (
+  button: ButtonConfig,
+  index: number,
+  variant: CTAButtonVariant,
+  buttonClassName?: string,
+  buttonTextClassName?: string
+): ButtonPropsForVariant<CTAButtonVariant> => {
+  const isPrimary = index === 0;
+  const buttonBgClass = isPrimary ? "primary-button" : "secondary-button";
+  const buttonTextClass = isPrimary ? "text-primary-cta-text" : "text-secondary-cta-text";
+
+  // Base props shared by all variants
+  const baseProps = {
+    text: button.text,
+    variant,
+    href: button.href,
+    onClick: button.onClick,
+  };
+
+  // directional-hover variant (needs circleClassName handling)
+  if (variant === "directional-hover") {
+    const circleClass = isPrimary ? "bg-foreground" : "bg-foreground/5";
+    const { bgClassName, textClassName, circleClassName } = (button.props || {}) as { bgClassName?: string; textClassName?: string; circleClassName?: string };
+    return {
+      ...button.props,
+      ...baseProps,
+      className: cls(buttonTextClass, buttonClassName, button.props?.className),
+      bgClassName: cls(buttonBgClass, bgClassName),
+      textClassName: cls(buttonTextClassName, textClassName),
+      circleClassName: cls(circleClass, circleClassName),
+    } as ButtonPropsForVariant<CTAButtonVariant>;
+  }
+
+  // Variants with bgClassName (text-stagger, shift-hover, bounce-effect)
+  if (hasBgClassName(variant)) {
+    const { bgClassName, textClassName } = (button.props || {}) as { bgClassName?: string; textClassName?: string };
+    return {
+      ...button.props,
+      ...baseProps,
+      className: cls(buttonTextClass, buttonClassName, button.props?.className),
+      bgClassName: cls(buttonBgClass, bgClassName),
+      textClassName: cls(buttonTextClassName, textClassName),
+    } as ButtonPropsForVariant<CTAButtonVariant>;
+  }
+
+  // icon-arrow variant
+  if (variant === "icon-arrow") {
+    const iconBgClass = isPrimary ? "secondary-button text-secondary-cta-text" : "primary-button text-primary-cta-text";
+    const { textClassName, iconClassName } = (button.props || {}) as { textClassName?: string; iconClassName?: string };
+    return {
+      ...button.props,
+      ...baseProps,
+      className: cls(buttonBgClass, buttonTextClass, buttonClassName, button.props?.className),
+      textClassName: cls(buttonTextClassName, textClassName),
+      iconClassName: cls(iconBgClass, iconClassName),
+    } as ButtonPropsForVariant<CTAButtonVariant>;
+  }
+
+  // expand-hover variant
+  if (variant === "expand-hover") {
+    const iconBgClass = isPrimary ? "secondary-button" : "primary-button";
+    const iconTextClass = isPrimary ? "text-secondary-cta-text" : "text-primary-cta-text";
+    const hoverTextClass = isPrimary ? "md:group-hover:text-secondary-cta-text" : "md:group-hover:text-primary-cta-text";
+    const { textClassName, iconClassName, iconBgClassName } = (button.props || {}) as { textClassName?: string; iconClassName?: string; iconBgClassName?: string };
+    return {
+      ...button.props,
+      ...baseProps,
+      className: cls(buttonBgClass, buttonTextClass, buttonClassName, button.props?.className),
+      textClassName: cls(hoverTextClass, buttonTextClassName, textClassName),
+      iconClassName: cls(iconTextClass, iconClassName),
+      iconBgClassName: cls(iconBgClass, iconBgClassName),
+    } as ButtonPropsForVariant<CTAButtonVariant>;
+  }
+
+  // hover-bubble variant
+  if (variant === "hover-bubble") {
+    const iconBgClass = isPrimary ? "secondary-button text-secondary-cta-text" : "primary-button text-primary-cta-text";
+    const baseTextClass = isPrimary ? "text-primary-cta-text" : "text-secondary-cta-text";
+    const { bgClassName, textClassName, iconClassName } = (button.props || {}) as { bgClassName?: string; textClassName?: string; iconClassName?: string };
+    return {
+      ...button.props,
+      ...baseProps,
+      className: cls(buttonClassName, button.props?.className),
+      bgClassName: cls(buttonBgClass, bgClassName),
+      textClassName: cls(baseTextClass, buttonTextClassName, textClassName),
+      iconClassName: cls(iconBgClass, iconClassName),
+    } as ButtonPropsForVariant<CTAButtonVariant>;
+  }
+
+  // hover-magnetic variant (default fallback)
+  return {
+    ...button.props,
+    ...baseProps,
+    className: cls(buttonBgClass, buttonTextClass, buttonClassName, button.props?.className),
+    textClassName: cls(buttonTextClassName, buttonTextClass),
+  } as ButtonPropsForVariant<CTAButtonVariant>;
+};
diff --git a/src/lib/gsap-setup.ts b/src/lib/gsap-setup.ts
new file mode 100644
index 0000000..dd8dc84
--- /dev/null
+++ b/src/lib/gsap-setup.ts
@@ -0,0 +1,6 @@
+"use client";
+import { gsap } from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+import { SplitText } from "gsap/SplitText";
+
+gsap.registerPlugin(ScrollTrigger, SplitText);
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
new file mode 100644
index 0000000..9e3decd
--- /dev/null
+++ b/src/lib/utils.ts
@@ -0,0 +1,20 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+import type { CardStyleVariant } from "@/providers/themeProvider/config/types";
+
+export function cn(...inputs: (string | undefined | null | false)[]) {
+  return inputs.filter(Boolean).join(" ");
+}
+
+export function cls(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+// Check if text should use inverted color based on cardStyle
+export function shouldUseInvertedText(useInvertedBackground: boolean | undefined, cardStyle: CardStyleVariant): boolean {
+  if (!useInvertedBackground) return false;
+
+  const lightCardStyles: CardStyleVariant[] = [];
+
+  return lightCardStyles.includes(cardStyle);
+}
diff --git a/src/providers/themeProvider/ThemeProvider.tsx b/src/providers/themeProvider/ThemeProvider.tsx
new file mode 100644
index 0000000..984ddb6
--- /dev/null
+++ b/src/providers/themeProvider/ThemeProvider.tsx
@@ -0,0 +1,138 @@
+"use client";
+
+import { createContext, useContext, useMemo } from "react";
+import type { ThemeConfig, ThemeProviderProps } from "./config/types";
+import { borderRadiusMap, borderRadiusCappedMap, contentWidthMap, expandedContentWidthMap, baseVwMap, textSizingMap, backgroundComponents, headingFontWeightMap } from "./config/constants";
+import { cardStyleMap, getGradientBorderedPseudo } from "./styles/cardStyles";
+import { primaryButtonStyleMap, getInsetGlowPseudo } from "./styles/primaryButtonStyles";
+import { secondaryButtonStyleMap } from "./styles/secondaryButtonStyles";
+
+const ThemeContext = createContext<ThemeConfig | undefined>(undefined);
+
+export const useTheme = () => {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error(
+      "useTheme must be used within a ThemeProvider. Wrap your sections in <ThemeProvider> at the app/page level."
+    );
+  }
+  return context;
+};
+
+export const ThemeProvider = ({
+  children,
+  defaultButtonVariant,
+  defaultTextAnimation,
+  borderRadius,
+  contentWidth,
+  sizing,
+  background,
+  cardStyle,
+  primaryButtonStyle,
+  secondaryButtonStyle,
+  headingFontWeight,
+}: ThemeProviderProps) => {
+  const themeConfig = useMemo<ThemeConfig>(() => ({
+    defaultButtonVariant,
+    defaultTextAnimation,
+    borderRadius,
+    contentWidth,
+    sizing,
+    background,
+    cardStyle,
+    primaryButtonStyle,
+    secondaryButtonStyle,
+    headingFontWeight,
+  }), [
+    defaultButtonVariant, defaultTextAnimation, borderRadius,
+    contentWidth, sizing, background, cardStyle,
+    primaryButtonStyle, secondaryButtonStyle, headingFontWeight,
+  ]);
+
+  const BackgroundComponent = backgroundComponents[background];
+
+  const styleString = useMemo(() => {
+    const borderRadiusValue = borderRadiusMap[borderRadius];
+    const borderRadiusCappedValue = borderRadiusCappedMap[borderRadius];
+    const contentWidthValues = contentWidthMap[contentWidth];
+    const expandedContentWidthValues = expandedContentWidthMap[contentWidth];
+    const baseVwValues = baseVwMap[sizing];
+    const textSizingValues = textSizingMap[sizing];
+    const headingFontWeightValue = headingFontWeightMap[headingFontWeight];
+
+    const cardCss = cardStyleMap[cardStyle];
+    const primaryButtonCss = primaryButtonStyleMap[primaryButtonStyle];
+    const secondaryButtonCss = secondaryButtonStyleMap[secondaryButtonStyle];
+
+    const gradientBorderedPseudo = getGradientBorderedPseudo(cardStyle);
+    const insetGlowPseudo = getInsetGlowPseudo(primaryButtonStyle);
+
+    return `
+    :root {
+      --theme-border-radius: ${borderRadiusValue};
+      --theme-border-radius-capped: ${borderRadiusCappedValue};
+      --width-content-width: ${contentWidthValues.desktop};
+      --width-content-width-expanded: ${expandedContentWidthValues.desktop};
+      --vw: ${baseVwValues.desktop};
+      --heading-font-weight: ${headingFontWeightValue};
+      --text-2xs: ${textSizingValues.desktop.text2xs};
+      --text-xs: ${textSizingValues.desktop.textXs};
+      --text-sm: ${textSizingValues.desktop.textSm};
+      --text-base: ${textSizingValues.desktop.textBase};
+      --text-lg: ${textSizingValues.desktop.textLg};
+      --text-xl: ${textSizingValues.desktop.textXl};
+      --text-2xl: ${textSizingValues.desktop.text2xl};
+      --text-3xl: ${textSizingValues.desktop.text3xl};
+      --text-4xl: ${textSizingValues.desktop.text4xl};
+      --text-5xl: ${textSizingValues.desktop.text5xl};
+      --text-6xl: ${textSizingValues.desktop.text6xl};
+      --text-7xl: ${textSizingValues.desktop.text7xl};
+      --text-8xl: ${textSizingValues.desktop.text8xl};
+      --text-9xl: ${textSizingValues.desktop.text9xl};
+    }
+    @media (max-width: 768px) {
+      :root {
+        --width-content-width: ${contentWidthValues.mobile};
+        --width-content-width-expanded: ${expandedContentWidthValues.mobile};
+        --vw: ${baseVwValues.mobile};
+        --text-2xs: ${textSizingValues.mobile.text2xs};
+        --text-xs: ${textSizingValues.mobile.textXs};
+        --text-sm: ${textSizingValues.mobile.textSm};
+        --text-base: ${textSizingValues.mobile.textBase};
+        --text-lg: ${textSizingValues.mobile.textLg};
+        --text-xl: ${textSizingValues.mobile.textXl};
+        --text-2xl: ${textSizingValues.mobile.text2xl};
+        --text-3xl: ${textSizingValues.mobile.text3xl};
+        --text-4xl: ${textSizingValues.mobile.text4xl};
+        --text-5xl: ${textSizingValues.mobile.text5xl};
+        --text-6xl: ${textSizingValues.mobile.text6xl};
+        --text-7xl: ${textSizingValues.mobile.text7xl};
+        --text-8xl: ${textSizingValues.mobile.text8xl};
+        --text-9xl: ${textSizingValues.mobile.text9xl};
+      }
+    }
+    .card {
+      ${cardCss}
+    }
+    ${gradientBorderedPseudo}
+    .primary-button {
+      ${primaryButtonCss}
+    }
+    ${insetGlowPseudo}
+    .secondary-button {
+      ${secondaryButtonCss}
+    }
+  `;
+  }, [
+    borderRadius, contentWidth, sizing, headingFontWeight,
+    cardStyle, primaryButtonStyle, secondaryButtonStyle,
+  ]);
+
+  return (
+    <ThemeContext.Provider value={themeConfig}>
+      <style>{styleString}</style>
+      {BackgroundComponent && <BackgroundComponent />}
+      {children}
+    </ThemeContext.Provider>
+  );
+};
diff --git a/src/providers/themeProvider/config/background.ts b/src/providers/themeProvider/config/background.ts
new file mode 100644
index 0000000..2f5b807
--- /dev/null
+++ b/src/providers/themeProvider/config/background.ts
@@ -0,0 +1,25 @@
+import CircleGradientBackground from "@/components/background/CircleGradientBackground";
+import AuroraBackground from "@/components/background/AuroraBackground";
+import FloatingGradientBackground from "@/components/background/floatingGradientBackground/FloatingGradientBackground";
+import NoiseBackground from "@/components/background/NoiseBackground";
+import NoiseDiagonalGradientBackground from "@/components/background/NoiseDiagonalGradientBackground";
+import FluidBackground from "@/components/background/FluidBackground";
+import BlurBottomBackground from "@/components/background/BlurBottomBackground";
+import GridBackround from "@/components/background/GridBackround";
+import type { BackgroundType } from "./types";
+
+interface BackgroundComponentProps {
+  className?: string;
+}
+
+export const backgroundComponents: Record<BackgroundType, React.ComponentType<BackgroundComponentProps> | null> = {
+  none: null,
+  circleGradient: CircleGradientBackground,
+  aurora: AuroraBackground,
+  floatingGradient: FloatingGradientBackground,
+  noise: NoiseBackground,
+  noiseDiagonalGradient: NoiseDiagonalGradientBackground,
+  fluid: FluidBackground,
+  blurBottom: BlurBottomBackground,
+  grid: GridBackround,
+};
diff --git a/src/providers/themeProvider/config/baseVw.ts b/src/providers/themeProvider/config/baseVw.ts
new file mode 100644
index 0000000..aa918b9
--- /dev/null
+++ b/src/providers/themeProvider/config/baseVw.ts
@@ -0,0 +1,44 @@
+import type { SizingPreset } from "./types";
+
+export const baseVwMap: Record<SizingPreset, { desktop: string; mobile: string }> = {
+  medium: {
+    desktop: "clamp(0.5rem, 0.8vw, 1rem)",
+    mobile: "3vw",
+  },
+  mediumLarge: {
+    desktop: "clamp(0.5rem, 0.84vw, 1rem)",
+    mobile: "3.15vw",
+  },
+  largeSmall: {
+    desktop: "clamp(0.5rem, 0.88vw, 1rem)",
+    mobile: "3.30vw",
+  },
+  large: {
+    desktop: "clamp(0.5rem, 0.92vw, 1rem)",
+    mobile: "3.45vw",
+  },
+  mediumSizeLargeTitles: {
+    desktop: "clamp(0.5rem, 0.8vw, 1rem)",
+    mobile: "3vw",
+  },
+  largeSizeMediumTitles: {
+    desktop: "clamp(0.5rem, 0.92vw, 1rem)",
+    mobile: "3.45vw",
+  },
+  mediumLargeSizeLargeTitles: {
+    desktop: "clamp(0.5rem, 0.84vw, 1rem)",
+    mobile: "3.15vw",
+  },
+  largeSmallSizeLargeTitles: {
+    desktop: "clamp(0.5rem, 0.88vw, 1rem)",
+    mobile: "3.30vw",
+  },
+  mediumLargeSizeMediumTitles: {
+    desktop: "clamp(0.5rem, 0.84vw, 1rem)",
+    mobile: "3.15vw",
+  },
+  largeSmallSizeMediumTitles: {
+    desktop: "clamp(0.5rem, 0.88vw, 1rem)",
+    mobile: "3.30vw",
+  },
+};
diff --git a/src/providers/themeProvider/config/borderRadius.ts b/src/providers/themeProvider/config/borderRadius.ts
new file mode 100644
index 0000000..a008da3
--- /dev/null
+++ b/src/providers/themeProvider/config/borderRadius.ts
@@ -0,0 +1,13 @@
+import type { BorderRadiusPreset } from "./types";
+
+export const borderRadiusMap: Record<BorderRadiusPreset, string> = {
+  rounded: "var(--radius)",
+  soft: "var(--radius-lg)",
+  pill: "var(--radius-full)",
+};
+
+export const borderRadiusCappedMap: Record<BorderRadiusPreset, string> = {
+  rounded: "var(--radius)",
+  soft: "var(--radius-lg)",
+  pill: "var(--radius-xl)",
+};
diff --git a/src/providers/themeProvider/config/constants.ts b/src/providers/themeProvider/config/constants.ts
new file mode 100644
index 0000000..6330117
--- /dev/null
+++ b/src/providers/themeProvider/config/constants.ts
@@ -0,0 +1,7 @@
+// Re-export all config modules for backward compatibility
+export { borderRadiusMap, borderRadiusCappedMap } from "./borderRadius";
+export { contentWidthMap, expandedContentWidthMap } from "./contentWidth";
+export { textSizingMap, type TextSizingValues } from "./textSizing";
+export { baseVwMap } from "./baseVw";
+export { backgroundComponents } from "./background";
+export { headingFontWeightMap, type TextboxLayout, type InvertedBackground } from "./shared";
diff --git a/src/providers/themeProvider/config/contentWidth.ts b/src/providers/themeProvider/config/contentWidth.ts
new file mode 100644
index 0000000..50f2359
--- /dev/null
+++ b/src/providers/themeProvider/config/contentWidth.ts
@@ -0,0 +1,82 @@
+import type { ContentWidthPreset } from "./types";
+
+export const contentWidthMap: Record<ContentWidthPreset, { desktop: string; mobile: string }> = {
+  small: {
+    desktop: "clamp(40rem, 70vw, 100rem)",
+    mobile: "80vw",
+  },
+  smallMedium: {
+    desktop: "clamp(40rem, 72.5vw, 100rem)",
+    mobile: "80vw",
+  },
+  compact: {
+    desktop: "clamp(40rem, 75vw, 100rem)",
+    mobile: "80vw",
+  },
+  mediumSmall: {
+    desktop: "clamp(40rem, 77.5vw, 100rem)",
+    mobile: "80vw",
+  },
+  medium: {
+    desktop: "clamp(40rem, 80vw, 100rem)",
+    mobile: "80vw",
+  },
+  mediumLarge: {
+    desktop: "clamp(40rem, 82.5vw, 100rem)",
+    mobile: "85vw",
+  },
+};
+
+function calculateExpandedWidth(width: string): string {
+  const clampMatch = width.match(/clamp\(([\d.]+)rem,\s*([\d.]+)vw,\s*([\d.]+)rem\)/);
+  if (clampMatch) {
+    const minRem = clampMatch[1];
+    const vwValue = parseFloat(clampMatch[2]);
+    const maxRem = clampMatch[3];
+
+    const remainingVw = 100 - vwValue;
+    const expandedVw = vwValue + (remainingVw / 2);
+
+    const expandedMin = `calc(${minRem}rem - (${minRem}rem - 100vw) / 2)`;
+    const expandedMax = `calc(${maxRem}rem + (100vw - ${maxRem}rem) / 2)`;
+
+    return `clamp(${expandedMin}, ${expandedVw}vw, ${expandedMax})`;
+  }
+
+  const vwMatch = width.match(/([\d.]+)vw/);
+  if (vwMatch) {
+    const vwValue = parseFloat(vwMatch[1]);
+    const remainingVw = 100 - vwValue;
+    const expandedVw = vwValue + (remainingVw / 2);
+    return `${expandedVw}vw`;
+  }
+
+  return width;
+}
+
+export const expandedContentWidthMap: Record<ContentWidthPreset, { desktop: string; mobile: string }> = {
+  small: {
+    desktop: calculateExpandedWidth(contentWidthMap.small.desktop),
+    mobile: calculateExpandedWidth(contentWidthMap.small.mobile),
+  },
+  smallMedium: {
+    desktop: calculateExpandedWidth(contentWidthMap.smallMedium.desktop),
+    mobile: calculateExpandedWidth(contentWidthMap.smallMedium.mobile),
+  },
+  compact: {
+    desktop: calculateExpandedWidth(contentWidthMap.compact.desktop),
+    mobile: calculateExpandedWidth(contentWidthMap.compact.mobile),
+  },
+  mediumSmall: {
+    desktop: calculateExpandedWidth(contentWidthMap.mediumSmall.desktop),
+    mobile: calculateExpandedWidth(contentWidthMap.mediumSmall.mobile),
+  },
+  medium: {
+    desktop: calculateExpandedWidth(contentWidthMap.medium.desktop),
+    mobile: calculateExpandedWidth(contentWidthMap.medium.mobile),
+  },
+  mediumLarge: {
+    desktop: calculateExpandedWidth(contentWidthMap.mediumLarge.desktop),
+    mobile: calculateExpandedWidth(contentWidthMap.mediumLarge.mobile),
+  },
+};
diff --git a/src/providers/themeProvider/config/shared.ts b/src/providers/themeProvider/config/shared.ts
new file mode 100644
index 0000000..b3fb663
--- /dev/null
+++ b/src/providers/themeProvider/config/shared.ts
@@ -0,0 +1,16 @@
+import type { HeadingFontWeight } from "./types";
+
+/**
+ * Shared component layout and styling type definitions
+ */
+export type TextboxLayout = "default" | "split" | "split-actions" | "split-description" | "inline-image";
+export type InvertedBackground = boolean;
+
+export const headingFontWeightMap: Record<HeadingFontWeight, string> = {
+  light: "300",
+  normal: "400",
+  medium: "500",
+  semibold: "600",
+  bold: "700",
+  extrabold: "800",
+};
diff --git a/src/providers/themeProvider/config/textSizing.ts b/src/providers/themeProvider/config/textSizing.ts
new file mode 100644
index 0000000..e6e261e
--- /dev/null
+++ b/src/providers/themeProvider/config/textSizing.ts
@@ -0,0 +1,385 @@
+import type { SizingPreset } from "./types";
+
+export interface TextSizingValues {
+  text2xs: string;
+  textXs: string;
+  textSm: string;
+  textBase: string;
+  textLg: string;
+  textXl: string;
+  text2xl: string;
+  text3xl: string;
+  text4xl: string;
+  text5xl: string;
+  text6xl: string;
+  text7xl: string;
+  text8xl: string;
+  text9xl: string;
+}
+
+export const textSizingMap: Record<SizingPreset, { desktop: TextSizingValues; mobile: TextSizingValues }> = {
+  medium: {
+    desktop: {
+      text2xs: "clamp(0.465rem, 0.62vw, 0.62rem)",
+      textXs: "clamp(0.54rem, 0.72vw, 0.72rem)",
+      textSm: "clamp(0.615rem, 0.82vw, 0.82rem)",
+      textBase: "clamp(0.69rem, 0.92vw, 0.92rem)",
+      textLg: "clamp(0.75rem, 1vw, 1rem)",
+      textXl: "clamp(0.825rem, 1.1vw, 1.1rem)",
+      text2xl: "clamp(0.975rem, 1.3vw, 1.3rem)",
+      text3xl: "clamp(1.2rem, 1.6vw, 1.6rem)",
+      text4xl: "clamp(1.5rem, 2vw, 2rem)",
+      text5xl: "clamp(2.025rem, 2.75vw, 2.75rem)",
+      text6xl: "clamp(2.475rem, 3.3vw, 3.3rem)",
+      text7xl: "clamp(3rem, 4vw, 4rem)",
+      text8xl: "clamp(3.5rem, 4.5vw, 4.5rem)",
+      text9xl: "clamp(5.25rem, 7vw, 7rem)",
+    },
+    mobile: {
+      text2xs: "2.5vw",
+      textXs: "2.75vw",
+      textSm: "3vw",
+      textBase: "3.25vw",
+      textLg: "3.5vw",
+      textXl: "4.25vw",
+      text2xl: "5vw",
+      text3xl: "6vw",
+      text4xl: "7vw",
+      text5xl: "7.5vw",
+      text6xl: "8.5vw",
+      text7xl: "10vw",
+      text8xl: "12vw",
+      text9xl: "14vw",
+    },
+  },
+  mediumLarge: {
+    desktop: {
+      text2xs: "clamp(0.465rem, 0.651vw, 0.62rem)",
+      textXs: "clamp(0.54rem, 0.756vw, 0.72rem)",
+      textSm: "clamp(0.615rem, 0.861vw, 0.82rem)",
+      textBase: "clamp(0.69rem, 0.966vw, 0.92rem)",
+      textLg: "clamp(0.75rem, 1.05vw, 1rem)",
+      textXl: "clamp(0.825rem, 1.155vw, 1.1rem)",
+      text2xl: "clamp(0.975rem, 1.365vw, 1.3rem)",
+      text3xl: "clamp(1.2rem, 1.68vw, 1.6rem)",
+      text4xl: "clamp(1.5rem, 2.1vw, 2rem)",
+      text5xl: "clamp(2.025rem, 2.8875vw, 2.75rem)",
+      text6xl: "clamp(2.475rem, 3.465vw, 3.3rem)",
+      text7xl: "clamp(3rem, 4.2vw, 4rem)",
+      text8xl: "clamp(3.5rem, 4.725vw, 4.5rem)",
+      text9xl: "clamp(5.25rem, 7.35vw, 7rem)",
+    },
+    mobile: {
+      text2xs: "2.625vw",
+      textXs: "2.8875vw",
+      textSm: "3.15vw",
+      textBase: "3.4125vw",
+      textLg: "3.675vw",
+      textXl: "4.4625vw",
+      text2xl: "5.25vw",
+      text3xl: "6.3vw",
+      text4xl: "7.35vw",
+      text5xl: "7.875vw",
+      text6xl: "8.925vw",
+      text7xl: "10.5vw",
+      text8xl: "12.6vw",
+      text9xl: "14.7vw",
+    },
+  },
+  largeSmall: {
+    desktop: {
+      text2xs: "clamp(0.465rem, 0.682vw, 0.62rem)",
+      textXs: "clamp(0.54rem, 0.792vw, 0.72rem)",
+      textSm: "clamp(0.615rem, 0.902vw, 0.82rem)",
+      textBase: "clamp(0.69rem, 1.012vw, 0.92rem)",
+      textLg: "clamp(0.75rem, 1.1vw, 1rem)",
+      textXl: "clamp(0.825rem, 1.21vw, 1.1rem)",
+      text2xl: "clamp(0.975rem, 1.43vw, 1.3rem)",
+      text3xl: "clamp(1.2rem, 1.76vw, 1.6rem)",
+      text4xl: "clamp(1.5rem, 2.2vw, 2rem)",
+      text5xl: "clamp(2.025rem, 3.025vw, 2.75rem)",
+      text6xl: "clamp(2.475rem, 3.63vw, 3.3rem)",
+      text7xl: "clamp(3rem, 4.4vw, 4rem)",
+      text8xl: "clamp(3.5rem, 4.95vw, 4.5rem)",
+      text9xl: "clamp(5.25rem, 7.7vw, 7rem)",
+    },
+    mobile: {
+      text2xs: "2.75vw",
+      textXs: "3.025vw",
+      textSm: "3.3vw",
+      textBase: "3.575vw",
+      textLg: "3.85vw",
+      textXl: "4.675vw",
+      text2xl: "5.5vw",
+      text3xl: "6.6vw",
+      text4xl: "7.7vw",
+      text5xl: "8.25vw",
+      text6xl: "9.35vw",
+      text7xl: "11vw",
+      text8xl: "13.2vw",
+      text9xl: "15.4vw",
+    },
+  },
+  large: {
+    desktop: {
+      text2xs: "clamp(0.465rem, 0.713vw, 0.62rem)",
+      textXs: "clamp(0.54rem, 0.828vw, 0.72rem)",
+      textSm: "clamp(0.615rem, 0.943vw, 0.82rem)",
+      textBase: "clamp(0.69rem, 1.058vw, 0.92rem)",
+      textLg: "clamp(0.75rem, 1.15vw, 1rem)",
+      textXl: "clamp(0.825rem, 1.265vw, 1.1rem)",
+      text2xl: "clamp(0.975rem, 1.495vw, 1.3rem)",
+      text3xl: "clamp(1.2rem, 1.84vw, 1.6rem)",
+      text4xl: "clamp(1.5rem, 2.3vw, 2rem)",
+      text5xl: "clamp(2.025rem, 3.1625vw, 2.75rem)",
+      text6xl: "clamp(2.475rem, 3.795vw, 3.3rem)",
+      text7xl: "clamp(3rem, 4.6vw, 4rem)",
+      text8xl: "clamp(3.5rem, 5.175vw, 4.5rem)",
+      text9xl: "clamp(5.25rem, 8.05vw, 7rem)",
+    },
+    mobile: {
+      text2xs: "2.875vw",
+      textXs: "3.1625vw",
+      textSm: "3.45vw",
+      textBase: "3.7375vw",
+      textLg: "4.025vw",
+      textXl: "4.8875vw",
+      text2xl: "5.75vw",
+      text3xl: "6.9vw",
+      text4xl: "8.05vw",
+      text5xl: "8.625vw",
+      text6xl: "9.775vw",
+      text7xl: "11.5vw",
+      text8xl: "13.8vw",
+      text9xl: "16.1vw",
+    },
+  },
+  mediumSizeLargeTitles: {
+    desktop: {
+      // Medium body text sizes: use medium values
+      text2xs: "clamp(0.465rem, 0.62vw, 0.62rem)",
+      textXs: "clamp(0.54rem, 0.72vw, 0.72rem)",
+      textSm: "clamp(0.615rem, 0.82vw, 0.82rem)",
+      textBase: "clamp(0.69rem, 0.92vw, 0.92rem)",
+      textLg: "clamp(0.75rem, 1vw, 1rem)",
+      textXl: "clamp(0.825rem, 1.1vw, 1.1rem)",
+      text2xl: "clamp(0.975rem, 1.3vw, 1.3rem)",
+      text3xl: "clamp(1.2rem, 1.6vw, 1.6rem)",
+      text4xl: "clamp(1.5rem, 2vw, 2rem)",
+      // Large title sizes: use large preset values
+      text5xl: "clamp(2.025rem, 3.1625vw, 2.75rem)",
+      text6xl: "clamp(2.475rem, 3.795vw, 3.3rem)",
+      text7xl: "clamp(3rem, 4.6vw, 4rem)",
+      text8xl: "clamp(3.5rem, 5.175vw, 4.5rem)",
+      text9xl: "clamp(5.25rem, 8.05vw, 7rem)",
+    },
+    mobile: {
+      // Medium body text sizes: use medium values
+      text2xs: "2.5vw",
+      textXs: "2.75vw",
+      textSm: "3vw",
+      textBase: "3.25vw",
+      textLg: "3.5vw",
+      textXl: "4.25vw",
+      text2xl: "5vw",
+      text3xl: "6vw",
+      text4xl: "7vw",
+      // Large title sizes: use large preset values
+      text5xl: "8.625vw",
+      text6xl: "9.775vw",
+      text7xl: "11.5vw",
+      text8xl: "13.8vw",
+      text9xl: "16.1vw",
+    },
+  },
+  largeSizeMediumTitles: {
+    desktop: {
+      // Large body text sizes: use large values
+      text2xs: "clamp(0.465rem, 0.713vw, 0.62rem)",
+      textXs: "clamp(0.54rem, 0.828vw, 0.72rem)",
+      textSm: "clamp(0.615rem, 0.943vw, 0.82rem)",
+      textBase: "clamp(0.69rem, 1.058vw, 0.92rem)",
+      textLg: "clamp(0.75rem, 1.15vw, 1rem)",
+      textXl: "clamp(0.825rem, 1.265vw, 1.1rem)",
+      text2xl: "clamp(0.975rem, 1.495vw, 1.3rem)",
+      text3xl: "clamp(1.2rem, 1.84vw, 1.6rem)",
+      text4xl: "clamp(1.5rem, 2.3vw, 2rem)",
+      // Medium title sizes: use medium preset values
+      text5xl: "clamp(2.025rem, 2.75vw, 2.75rem)",
+      text6xl: "clamp(2.475rem, 3.3vw, 3.3rem)",
+      text7xl: "clamp(3rem, 4vw, 4rem)",
+      text8xl: "clamp(3.5rem, 4.5vw, 4.5rem)",
+      text9xl: "clamp(5.25rem, 7vw, 7rem)",
+    },
+    mobile: {
+      // Large body text sizes: use large values
+      text2xs: "2.875vw",
+      textXs: "3.1625vw",
+      textSm: "3.45vw",
+      textBase: "3.7375vw",
+      textLg: "4.025vw",
+      textXl: "4.8875vw",
+      text2xl: "5.75vw",
+      text3xl: "6.9vw",
+      text4xl: "8.05vw",
+      // Medium title sizes: use medium preset values
+      text5xl: "7.5vw",
+      text6xl: "8.5vw",
+      text7xl: "10vw",
+      text8xl: "12vw",
+      text9xl: "14vw",
+    },
+  },
+  mediumLargeSizeLargeTitles: {
+    desktop: {
+      // MediumLarge body text sizes
+      text2xs: "clamp(0.465rem, 0.651vw, 0.62rem)",
+      textXs: "clamp(0.54rem, 0.756vw, 0.72rem)",
+      textSm: "clamp(0.615rem, 0.861vw, 0.82rem)",
+      textBase: "clamp(0.69rem, 0.966vw, 0.92rem)",
+      textLg: "clamp(0.75rem, 1.05vw, 1rem)",
+      textXl: "clamp(0.825rem, 1.155vw, 1.1rem)",
+      text2xl: "clamp(0.975rem, 1.365vw, 1.3rem)",
+      text3xl: "clamp(1.2rem, 1.68vw, 1.6rem)",
+      text4xl: "clamp(1.5rem, 2.1vw, 2rem)",
+      // Large title sizes
+      text5xl: "clamp(2.025rem, 3.1625vw, 2.75rem)",
+      text6xl: "clamp(2.475rem, 3.795vw, 3.3rem)",
+      text7xl: "clamp(3rem, 4.6vw, 4rem)",
+      text8xl: "clamp(3.5rem, 5.175vw, 4.5rem)",
+      text9xl: "clamp(5.25rem, 8.05vw, 7rem)",
+    },
+    mobile: {
+      // MediumLarge body text sizes
+      text2xs: "2.625vw",
+      textXs: "2.8875vw",
+      textSm: "3.15vw",
+      textBase: "3.4125vw",
+      textLg: "3.675vw",
+      textXl: "4.4625vw",
+      text2xl: "5.25vw",
+      text3xl: "6.3vw",
+      text4xl: "7.35vw",
+      // Large title sizes
+      text5xl: "8.625vw",
+      text6xl: "9.775vw",
+      text7xl: "11.5vw",
+      text8xl: "13.8vw",
+      text9xl: "16.1vw",
+    },
+  },
+  largeSmallSizeLargeTitles: {
+    desktop: {
+      // LargeSmall body text sizes
+      text2xs: "clamp(0.465rem, 0.682vw, 0.62rem)",
+      textXs: "clamp(0.54rem, 0.792vw, 0.72rem)",
+      textSm: "clamp(0.615rem, 0.902vw, 0.82rem)",
+      textBase: "clamp(0.69rem, 1.012vw, 0.92rem)",
+      textLg: "clamp(0.75rem, 1.1vw, 1rem)",
+      textXl: "clamp(0.825rem, 1.21vw, 1.1rem)",
+      text2xl: "clamp(0.975rem, 1.43vw, 1.3rem)",
+      text3xl: "clamp(1.2rem, 1.76vw, 1.6rem)",
+      text4xl: "clamp(1.5rem, 2.2vw, 2rem)",
+      // Large title sizes
+      text5xl: "clamp(2.025rem, 3.1625vw, 2.75rem)",
+      text6xl: "clamp(2.475rem, 3.795vw, 3.3rem)",
+      text7xl: "clamp(3rem, 4.6vw, 4rem)",
+      text8xl: "clamp(3.5rem, 5.175vw, 4.5rem)",
+      text9xl: "clamp(5.25rem, 8.05vw, 7rem)",
+    },
+    mobile: {
+      // LargeSmall body text sizes
+      text2xs: "2.75vw",
+      textXs: "3.025vw",
+      textSm: "3.3vw",
+      textBase: "3.575vw",
+      textLg: "3.85vw",
+      textXl: "4.675vw",
+      text2xl: "5.5vw",
+      text3xl: "6.6vw",
+      text4xl: "7.7vw",
+      // Large title sizes
+      text5xl: "8.625vw",
+      text6xl: "9.775vw",
+      text7xl: "11.5vw",
+      text8xl: "13.8vw",
+      text9xl: "16.1vw",
+    },
+  },
+  mediumLargeSizeMediumTitles: {
+    desktop: {
+      // MediumLarge body text sizes
+      text2xs: "clamp(0.465rem, 0.651vw, 0.62rem)",
+      textXs: "clamp(0.54rem, 0.756vw, 0.72rem)",
+      textSm: "clamp(0.615rem, 0.861vw, 0.82rem)",
+      textBase: "clamp(0.69rem, 0.966vw, 0.92rem)",
+      textLg: "clamp(0.75rem, 1.05vw, 1rem)",
+      textXl: "clamp(0.825rem, 1.155vw, 1.1rem)",
+      text2xl: "clamp(0.975rem, 1.365vw, 1.3rem)",
+      text3xl: "clamp(1.2rem, 1.68vw, 1.6rem)",
+      text4xl: "clamp(1.5rem, 2.1vw, 2rem)",
+      // Medium title sizes
+      text5xl: "clamp(2.025rem, 2.75vw, 2.75rem)",
+      text6xl: "clamp(2.475rem, 3.3vw, 3.3rem)",
+      text7xl: "clamp(3rem, 4vw, 4rem)",
+      text8xl: "clamp(3.5rem, 4.5vw, 4.5rem)",
+      text9xl: "clamp(5.25rem, 7vw, 7rem)",
+    },
+    mobile: {
+      // MediumLarge body text sizes
+      text2xs: "2.625vw",
+      textXs: "2.8875vw",
+      textSm: "3.15vw",
+      textBase: "3.4125vw",
+      textLg: "3.675vw",
+      textXl: "4.4625vw",
+      text2xl: "5.25vw",
+      text3xl: "6.3vw",
+      text4xl: "7.35vw",
+      // Medium title sizes
+      text5xl: "7.5vw",
+      text6xl: "8.5vw",
+      text7xl: "10vw",
+      text8xl: "12vw",
+      text9xl: "14vw",
+    },
+  },
+  largeSmallSizeMediumTitles: {
+    desktop: {
+      // LargeSmall body text sizes
+      text2xs: "clamp(0.465rem, 0.682vw, 0.62rem)",
+      textXs: "clamp(0.54rem, 0.792vw, 0.72rem)",
+      textSm: "clamp(0.615rem, 0.902vw, 0.82rem)",
+      textBase: "clamp(0.69rem, 1.012vw, 0.92rem)",
+      textLg: "clamp(0.75rem, 1.1vw, 1rem)",
+      textXl: "clamp(0.825rem, 1.21vw, 1.1rem)",
+      text2xl: "clamp(0.975rem, 1.43vw, 1.3rem)",
+      text3xl: "clamp(1.2rem, 1.76vw, 1.6rem)",
+      text4xl: "clamp(1.5rem, 2.2vw, 2rem)",
+      // Medium title sizes
+      text5xl: "clamp(2.025rem, 2.75vw, 2.75rem)",
+      text6xl: "clamp(2.475rem, 3.3vw, 3.3rem)",
+      text7xl: "clamp(3rem, 4vw, 4rem)",
+      text8xl: "clamp(3.5rem, 4.5vw, 4.5rem)",
+      text9xl: "clamp(5.25rem, 7vw, 7rem)",
+    },
+    mobile: {
+      // LargeSmall body text sizes
+      text2xs: "2.75vw",
+      textXs: "3.025vw",
+      textSm: "3.3vw",
+      textBase: "3.575vw",
+      textLg: "3.85vw",
+      textXl: "4.675vw",
+      text2xl: "5.5vw",
+      text3xl: "6.6vw",
+      text4xl: "7.7vw",
+      // Medium title sizes
+      text5xl: "7.5vw",
+      text6xl: "8.5vw",
+      text7xl: "10vw",
+      text8xl: "12vw",
+      text9xl: "14vw",
+    },
+  },
+};
diff --git a/src/providers/themeProvider/config/types.ts b/src/providers/themeProvider/config/types.ts
new file mode 100644
index 0000000..e2ca391
--- /dev/null
+++ b/src/providers/themeProvider/config/types.ts
@@ -0,0 +1,48 @@
+import type { CTAButtonVariant } from "@/components/button/types";
+import type { AnimationType } from "@/components/text/types";
+
+export type BorderRadiusPreset = "rounded" | "soft" | "pill";
+export type ContentWidthPreset = "small" | "smallMedium" | "compact" | "mediumSmall" | "medium" | "mediumLarge";
+export type SizingPreset = "medium" | "mediumLarge" | "largeSmall" | "large" | "mediumSizeLargeTitles" | "mediumLargeSizeLargeTitles" | "largeSmallSizeLargeTitles" | "largeSizeMediumTitles" | "mediumLargeSizeMediumTitles" | "largeSmallSizeMediumTitles";
+export type HeadingFontWeight = "light" | "normal" | "medium" | "semibold" | "bold" | "extrabold";
+export type BackgroundType =
+  | "none"
+  | "circleGradient"
+  | "aurora"
+  | "floatingGradient"
+  | "noise"
+  | "noiseDiagonalGradient"
+  | "fluid"
+  | "blurBottom"
+  | "grid";
+
+export type CardStyleVariant = "solid" | "outline" | "gradient-mesh" | "gradient-radial" | "inset" | "glass-elevated" | "glass-depth" | "gradient-bordered" | "layered-gradient" | "soft-shadow" | "subtle-shadow" | "elevated-border" | "inner-glow" | "spotlight";
+export type PrimaryButtonStyleVariant = "gradient" | "shadow" | "flat" | "radial-glow" | "diagonal-gradient" | "double-inset" | "primary-glow" | "inset-glow" | "soft-glow" | "glass-shimmer" | "neon-outline" | "lifted" | "depth-layers" | "accent-edge" | "metallic";
+export type SecondaryButtonStyleVariant = "glass" | "solid" | "layered" | "radial-glow";
+
+export interface ThemeConfig {
+  defaultButtonVariant: CTAButtonVariant;
+  defaultTextAnimation: AnimationType;
+  borderRadius: BorderRadiusPreset;
+  contentWidth: ContentWidthPreset;
+  sizing: SizingPreset;
+  background: BackgroundType;
+  cardStyle: CardStyleVariant;
+  primaryButtonStyle: PrimaryButtonStyleVariant;
+  secondaryButtonStyle: SecondaryButtonStyleVariant;
+  headingFontWeight: HeadingFontWeight;
+}
+
+export interface ThemeProviderProps {
+  children: React.ReactNode;
+  defaultButtonVariant: CTAButtonVariant;
+  defaultTextAnimation: AnimationType;
+  borderRadius: BorderRadiusPreset;
+  contentWidth: ContentWidthPreset;
+  sizing: SizingPreset;
+  background: BackgroundType;
+  cardStyle: CardStyleVariant;
+  primaryButtonStyle: PrimaryButtonStyleVariant;
+  secondaryButtonStyle: SecondaryButtonStyleVariant;
+  headingFontWeight: HeadingFontWeight;
+}
diff --git a/src/providers/themeProvider/styles/cardStyles.ts b/src/providers/themeProvider/styles/cardStyles.ts
new file mode 100644
index 0000000..ad7dc71
--- /dev/null
+++ b/src/providers/themeProvider/styles/cardStyles.ts
@@ -0,0 +1,120 @@
+import type { CardStyleVariant } from "../config/types";
+
+export const cardStyleMap: Record<CardStyleVariant, string> = {
+  "solid": `
+    position: relative;
+    background: var(--color-card);
+  `,
+  "outline": `
+    position: relative;
+    background: var(--color-card);
+    border: 1px solid color-mix(in srgb, var(--color-accent) 25%, transparent);
+  `,
+  "gradient-mesh": `
+    position: relative;
+    background:
+      radial-gradient(at 0% 0%, color-mix(in srgb, var(--color-accent) 15%, transparent) 0px, transparent 50%),
+      radial-gradient(at 100% 0%, color-mix(in srgb, var(--color-accent) 10%, transparent) 0px, transparent 50%),
+      radial-gradient(at 100% 100%, color-mix(in srgb, var(--color-accent) 20%, transparent) 0px, transparent 50%),
+      radial-gradient(at 0% 100%, color-mix(in srgb, var(--color-accent) 12%, transparent) 0px, transparent 50%),
+      var(--color-card);
+  `,
+  "gradient-radial": `
+    position: relative;
+    background: radial-gradient(circle at center, color-mix(in srgb, var(--color-card) 100%, var(--color-accent) 20%) 0%, var(--color-card) 90%);
+  `,
+  "inset": `
+    position: relative;
+    background: color-mix(in srgb, var(--color-card) 95%, var(--color-accent) 5%);
+    box-shadow:
+      inset 2px 2px 4px color-mix(in srgb, var(--color-foreground) 8%, transparent),
+      inset -2px -2px 4px color-mix(in srgb, var(--color-background) 20%, transparent);
+  `,
+  "glass-elevated": `
+    position: relative;
+    backdrop-filter: blur(8px);
+    background: linear-gradient(to bottom right, color-mix(in srgb, var(--color-card) 80%, transparent), color-mix(in srgb, var(--color-card) 40%, transparent));
+    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    border: 1px solid var(--color-card);
+  `,
+  "glass-depth": `
+    position: relative;
+    background: color-mix(in srgb, var(--color-card) 80%, transparent);
+    backdrop-filter: blur(14px);
+    box-shadow:
+      inset 0 0 20px 0 color-mix(in srgb, var(--color-accent) 7.5%, transparent);
+    border: 1px solid color-mix(in srgb, var(--color-accent) 7.5%, transparent);
+  `,
+  "gradient-bordered": `
+    position: relative;
+    background: linear-gradient(180deg, color-mix(in srgb, var(--color-card) 100%, var(--color-accent) 5%) -35%, var(--color-card) 65%);
+    box-shadow: 0px 0px 10px 4px color-mix(in srgb, var(--color-accent) 4%, transparent);
+  `,
+  "layered-gradient": `
+    position: relative;
+    background:
+      linear-gradient(color-mix(in srgb, var(--color-accent) 6%, transparent) 0%, transparent 59.26%),
+      linear-gradient(var(--color-card) 0%, var(--color-card) 100%),
+      var(--color-card);
+    box-shadow:
+      20px 18px 7px color-mix(in srgb, var(--color-accent) 0%, transparent),
+      2px 2px 2px color-mix(in srgb, var(--color-accent) 6.5%, transparent),
+      1px 1px 2px color-mix(in srgb, var(--color-accent) 2%, transparent);
+    border: 2px solid var(--color-secondary-cta);
+  `,
+  "soft-shadow": `
+    position: relative;
+    background: var(--color-card);
+    box-shadow: color-mix(in srgb, var(--color-accent) 10%, transparent) 0px 0.706592px 0.706592px -0.666667px, color-mix(in srgb, var(--color-accent) 8%, transparent) 0px 1.80656px 1.80656px -1.33333px, color-mix(in srgb, var(--color-accent) 7%, transparent) 0px 3.62176px 3.62176px -2px, color-mix(in srgb, var(--color-accent) 7%, transparent) 0px 6.8656px 6.8656px -2.66667px, color-mix(in srgb, var(--color-accent) 5%, transparent) 0px 13.6468px 13.6468px -3.33333px, color-mix(in srgb, var(--color-accent) 2%, transparent) 0px 30px 30px -4px, var(--color-background) 0px 3px 1px 0px inset;
+  `,
+  "subtle-shadow": `
+    position: relative;
+    background: var(--color-card);
+    box-shadow: color-mix(in srgb, var(--color-foreground) 5%, transparent) 0px 4px 32px 0px;
+  `,
+  "elevated-border": `
+    position: relative;
+    background: linear-gradient(180deg, color-mix(in srgb, var(--color-card) 100%, var(--color-foreground) 3%) 0%, var(--color-card) 100%);
+    box-shadow: 0 1px 0 0 color-mix(in srgb, var(--color-foreground) 8%, transparent), 0 4px 6px -1px color-mix(in srgb, var(--color-foreground) 5%, transparent), 0 10px 15px -3px color-mix(in srgb, var(--color-foreground) 4%, transparent);
+    border: 1px solid color-mix(in srgb, var(--color-foreground) 6%, transparent);
+  `,
+  "inner-glow": `
+    position: relative;
+    background: var(--color-card);
+    box-shadow: inset 0 0 30px 0 color-mix(in srgb, var(--color-foreground) 4%, transparent), inset 0 1px 0 0 color-mix(in srgb, var(--color-foreground) 8%, transparent), 0 4px 12px -4px color-mix(in srgb, var(--color-foreground) 8%, transparent);
+  `,
+  "spotlight": `
+    position: relative;
+    background:
+      radial-gradient(ellipse at 0% 0%, color-mix(in srgb, var(--color-accent) 20%, transparent) 0%, transparent 50%),
+      var(--color-card);
+    box-shadow: inset 1px 1px 0 0 color-mix(in srgb, var(--color-foreground) 10%, transparent), 0 4px 16px -4px color-mix(in srgb, var(--color-foreground) 10%, transparent);
+  `,
+};
+
+export const getGradientBorderedPseudo = (cardStyle: CardStyleVariant): string => {
+  if (cardStyle !== "gradient-bordered") return '';
+
+  return `
+    .card::before {
+      content: "";
+      position: absolute;
+      pointer-events: none;
+      inset: 0;
+      padding: 1px;
+      border-radius: inherit;
+      background: linear-gradient(
+        160deg,
+        color-mix(in srgb, var(--color-accent) 25%, transparent) 0%,
+        color-mix(in srgb, var(--color-accent) 5%, transparent) 35%,
+        color-mix(in srgb, var(--color-foreground) 5%, transparent) 75%,
+        color-mix(in srgb, var(--color-background-accent) 15%, transparent) 100%
+      );
+      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+      -webkit-mask-composite: xor;
+      mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+      mask-composite: exclude;
+    }
+  `;
+};
+
diff --git a/src/providers/themeProvider/styles/primaryButtonStyles.ts b/src/providers/themeProvider/styles/primaryButtonStyles.ts
new file mode 100644
index 0000000..6f3daf7
--- /dev/null
+++ b/src/providers/themeProvider/styles/primaryButtonStyles.ts
@@ -0,0 +1,101 @@
+import type { PrimaryButtonStyleVariant } from "../config/types";
+
+export const primaryButtonStyleMap: Record<PrimaryButtonStyleVariant, string> = {
+  gradient: `
+    background: linear-gradient(to bottom, color-mix(in srgb, var(--color-primary-cta) 75%, transparent), var(--color-primary-cta));
+    box-shadow: color-mix(in srgb, var(--color-background) 25%, transparent) 0px 1px 1px 0px inset, color-mix(in srgb, var(--color-primary-cta) 15%, transparent) 3px 3px 3px 0px;
+  `,
+  shadow: `
+    background: var(--color-primary-cta);
+    box-shadow: 2.10837px 3.16256px 9.48767px color-mix(in srgb, var(--color-primary-cta) 40%, transparent);
+  `,
+  flat: `
+    background: var(--color-primary-cta);
+    box-shadow: none;
+  `,
+  "radial-glow": `
+    background:
+      radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--color-background) 32.5%, transparent) 0%, transparent 45%),
+      radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--color-background) 32.5%, transparent) 0%, transparent 45%),
+      var(--color-primary-cta);
+    box-shadow: 2.10837px 3.16256px 9.48767px color-mix(in srgb, var(--color-accent) 30%, transparent);
+  `,
+  "diagonal-gradient": `
+    background: linear-gradient(to bottom right, color-mix(in srgb, var(--color-primary-cta) 80%, transparent), var(--color-foreground));
+    box-shadow: 2.10837px 3.16256px 9.48767px color-mix(in srgb, var(--color-accent) 30%, transparent);
+  `,
+  "double-inset": `
+    background: var(--color-primary-cta);
+    box-shadow: color-mix(in srgb, var(--color-background) 15%, transparent) 0px 4px 10px 0px inset, color-mix(in srgb, var(--color-background) 15%, transparent) 0px -4px 8px 0px inset;
+  `,
+  "primary-glow": `
+    background: var(--color-primary-cta);
+    box-shadow: color-mix(in srgb, var(--color-background) 20%, transparent) 0px 3px 1px 0px inset, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 0.839802px 0.503881px -0.3125px, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 1.99048px 1.19429px -0.625px, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 3.63084px 2.1785px -0.9375px, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 6.03627px 3.62176px -1.25px, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 9.74808px 5.84885px -1.5625px, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 15.9566px 9.57398px -1.875px, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 27.4762px 16.4857px -2.1875px, color-mix(in srgb, var(--color-primary-cta) 13%, transparent) 0px 50px 30px -2.5px;
+  `,
+  "inset-glow": `
+    position: relative;
+    background: linear-gradient(180deg, color-mix(in srgb, var(--color-primary-cta) 65%, var(--color-background)) -35%, var(--color-primary-cta) 65%);
+    box-shadow: 0 10px 18px -7px color-mix(in srgb, var(--color-background) 50%, transparent), inset 0 1px 0 0 color-mix(in srgb, var(--color-foreground) 15%, transparent);
+  `,
+  "soft-glow": `
+    position: relative;
+    background: radial-gradient(ellipse at 50% -20%, color-mix(in srgb, var(--color-primary-cta) 70%, var(--color-foreground)) 0%, var(--color-primary-cta) 70%);
+    box-shadow: 0 8px 24px -6px color-mix(in srgb, var(--color-primary-cta) 35%, transparent), inset 0 1px 0 0 color-mix(in srgb, var(--color-foreground) 20%, transparent);
+  `,
+  "glass-shimmer": `
+    position: relative;
+    background: linear-gradient(165deg, color-mix(in srgb, var(--color-primary-cta) 85%, var(--color-foreground)) 0%, var(--color-primary-cta) 40%, color-mix(in srgb, var(--color-primary-cta) 90%, var(--color-background)) 100%);
+    box-shadow: inset 0 1px 1px 0 color-mix(in srgb, var(--color-foreground) 25%, transparent), inset 0 -1px 1px 0 color-mix(in srgb, var(--color-background) 15%, transparent), 0 4px 12px -2px color-mix(in srgb, var(--color-primary-cta) 25%, transparent);
+  `,
+  "neon-outline": `
+    position: relative;
+    background: var(--color-primary-cta);
+    box-shadow: 0 0 5px color-mix(in srgb, var(--color-accent) 50%, transparent), 0 0 15px color-mix(in srgb, var(--color-accent) 30%, transparent), 0 0 30px color-mix(in srgb, var(--color-accent) 15%, transparent), inset 0 0 8px color-mix(in srgb, var(--color-accent) 10%, transparent);
+  `,
+  "lifted": `
+    position: relative;
+    background: linear-gradient(180deg, color-mix(in srgb, var(--color-primary-cta) 95%, var(--color-foreground)) 0%, var(--color-primary-cta) 50%, color-mix(in srgb, var(--color-primary-cta) 95%, var(--color-background)) 100%);
+    box-shadow: inset 0 2px 3px 0 color-mix(in srgb, var(--color-foreground) 20%, transparent), inset 0 -2px 3px 0 color-mix(in srgb, var(--color-background) 25%, transparent), 0 2px 4px -1px color-mix(in srgb, var(--color-background) 40%, transparent);
+  `,
+  "depth-layers": `
+    position: relative;
+    background: var(--color-primary-cta);
+    box-shadow: 0 1px 2px color-mix(in srgb, var(--color-primary-cta) 20%, transparent), 0 2px 4px color-mix(in srgb, var(--color-primary-cta) 20%, transparent), 0 4px 8px color-mix(in srgb, var(--color-primary-cta) 15%, transparent), 0 8px 16px color-mix(in srgb, var(--color-primary-cta) 10%, transparent), 0 16px 32px color-mix(in srgb, var(--color-primary-cta) 5%, transparent);
+  `,
+  "accent-edge": `
+    position: relative;
+    background: linear-gradient(180deg, var(--color-primary-cta) 0%, color-mix(in srgb, var(--color-primary-cta) 90%, var(--color-background)) 100%);
+    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 60%, transparent), 0 4px 12px -2px color-mix(in srgb, var(--color-accent) 35%, transparent), inset 0 1px 0 0 color-mix(in srgb, var(--color-foreground) 20%, transparent);
+  `,
+  "metallic": `
+    position: relative;
+    background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary-cta) 80%, var(--color-foreground)) 0%, var(--color-primary-cta) 25%, color-mix(in srgb, var(--color-primary-cta) 90%, var(--color-background)) 50%, var(--color-primary-cta) 75%, color-mix(in srgb, var(--color-primary-cta) 85%, var(--color-foreground)) 100%);
+    box-shadow: inset 0 1px 0 0 color-mix(in srgb, var(--color-foreground) 30%, transparent), 0 3px 8px -2px color-mix(in srgb, var(--color-background) 50%, transparent);
+  `,
+};
+
+export const getInsetGlowPseudo = (style: PrimaryButtonStyleVariant): string => {
+  if (style !== "inset-glow") return '';
+
+  return `
+    .primary-button::before {
+      content: "";
+      position: absolute;
+      pointer-events: none;
+      inset: 0;
+      padding: 1px;
+      border-radius: inherit;
+      background: linear-gradient(
+        0deg,
+        color-mix(in srgb, var(--color-primary-cta) 20%, var(--color-background)) 0%,
+        color-mix(in srgb, var(--color-primary-cta) 40%, var(--color-background)) 27%,
+        color-mix(in srgb, var(--color-primary-cta) 60%, var(--color-foreground)) 62%,
+        color-mix(in srgb, var(--color-primary-cta) 80%, var(--color-foreground)) 100%
+      );
+      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+      -webkit-mask-composite: xor;
+      mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+      mask-composite: exclude;
+    }
+  `;
+};
diff --git a/src/providers/themeProvider/styles/secondaryButtonStyles.ts b/src/providers/themeProvider/styles/secondaryButtonStyles.ts
new file mode 100644
index 0000000..ba62704
--- /dev/null
+++ b/src/providers/themeProvider/styles/secondaryButtonStyles.ts
@@ -0,0 +1,33 @@
+import type { SecondaryButtonStyleVariant } from "../config/types";
+
+export const secondaryButtonStyleMap: Record<SecondaryButtonStyleVariant, string> = {
+  glass: `
+    backdrop-filter: blur(8px);
+    background: linear-gradient(to bottom right, color-mix(in srgb, var(--color-secondary-cta) 80%, transparent), var(--color-secondary-cta));
+    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    border: 1px solid var(--color-secondary-cta);
+  `,
+  solid: `
+    background: var(--color-secondary-cta);
+    box-shadow: none;
+  `,
+  layered: `
+    background:
+      linear-gradient(color-mix(in srgb, var(--color-accent) 5%, transparent) 0%, transparent 59.26%),
+      linear-gradient(var(--color-secondary-cta), var(--color-secondary-cta)),
+      linear-gradient(var(--color-secondary-cta), var(--color-secondary-cta)),
+      linear-gradient(color-mix(in srgb, var(--color-accent) 5%, transparent) 0%, transparent 59.26%),
+      linear-gradient(color-mix(in srgb, var(--color-secondary-cta) 60%, transparent), color-mix(in srgb, var(--color-secondary-cta) 60%, transparent)),
+      var(--color-secondary-cta);
+    box-shadow:
+      2.10837px 3.16256px 9.48767px color-mix(in srgb, var(--color-accent) 10%, transparent);
+    border: 1px solid var(--color-secondary-cta);
+  `,
+  "radial-glow": `
+    background:
+      radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--color-accent) 15%, transparent) 0%, transparent 40%),
+      radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--color-accent) 15%, transparent) 0%, transparent 40%),
+      var(--color-secondary-cta);
+    box-shadow: 2.10837px 3.16256px 9.48767px color-mix(in srgb, var(--color-accent) 10%, transparent);
+  `,
+};
diff --git a/src/providers/themeProvider/utils/detectLightBackground.ts b/src/providers/themeProvider/utils/detectLightBackground.ts
new file mode 100644
index 0000000..8dcb149
--- /dev/null
+++ b/src/providers/themeProvider/utils/detectLightBackground.ts
@@ -0,0 +1,21 @@
+/**
+ * Detects if the current background color is light or dark
+ * Used for AnimatedAuroraBackground to determine if colors should be inverted
+ *
+ * @returns true for light backgrounds (hex starting with 8-f), false for dark backgrounds (hex starting with 0-7)
+ */
+export const detectLightBackground = (): boolean => {
+  if (typeof window === 'undefined') return true;
+
+  const computedBg = getComputedStyle(document.documentElement)
+    .getPropertyValue('--background')
+    .trim();
+
+  // If it starts with #0-7, it's likely dark
+  if (computedBg.startsWith('#')) {
+    const firstChar = computedBg.charAt(1).toLowerCase();
+    return firstChar >= '8'; // 8-f is light, 0-7 is dark
+  }
+
+  return true; // Default to light
+};
diff --git a/src/tag/Tag.tsx b/src/tag/Tag.tsx
new file mode 100644
index 0000000..8d4bf45
--- /dev/null
+++ b/src/tag/Tag.tsx
@@ -0,0 +1,56 @@
+"use client";
+
+import { useRive, useStateMachineInput, Layout, Fit } from "@rive-app/react-canvas";
+import { useTagEffects } from "./useTagEffects";
+
+const STATE_MACHINE_NAME = "State Machine 1";
+const HOVER_INPUT_NAME = "Hover";
+
+const Tag = () => {
+    const { shouldShow, handleMouseEnter, handleClick } = useTagEffects();
+
+    const { rive, RiveComponent } = useRive({
+        src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/watermark-bob2.riv",
+        stateMachines: STATE_MACHINE_NAME,
+        autoplay: true,
+        layout: new Layout({
+            fit: Fit.Contain,
+        }),
+    });
+
+    const hoverInput = useStateMachineInput(rive, STATE_MACHINE_NAME, HOVER_INPUT_NAME);
+
+    const handleTagClick = () => {
+        window.open('https://webild.io', '_blank');
+    };
+
+    const onMouseEnter = () => {
+        handleMouseEnter();
+        if (hoverInput) {
+            hoverInput.value = true;
+        }
+    };
+
+    const onMouseLeave = () => {
+        if (hoverInput) {
+            hoverInput.value = false;
+        }
+    };
+
+    if (!shouldShow) {
+        return null;
+    }
+
+    return (
+        <button
+            className="fixed z-[99999] bottom-6 right-6 w-[160px] h-[92px] cursor-pointer"
+            onClick={(e) => handleClick(e, handleTagClick)}
+            onMouseEnter={onMouseEnter}
+            onMouseLeave={onMouseLeave}
+        >
+            <RiveComponent className="w-full h-full" />
+        </button>
+    );
+};
+
+export default Tag;
diff --git a/src/tag/useTagEffects.ts b/src/tag/useTagEffects.ts
new file mode 100644
index 0000000..61c6307
--- /dev/null
+++ b/src/tag/useTagEffects.ts
@@ -0,0 +1,54 @@
+import { useRef, useEffect, useCallback, useState } from "react";
+
+export function useTagEffects<T extends HTMLElement = HTMLButtonElement>() {
+  const audioRef = useRef<HTMLAudioElement | null>(null);
+  const [shouldShow, setShouldShow] = useState(true);
+
+  useEffect(() => {
+    audioRef.current = new Audio("https://webuild-dev.s3.eu-north-1.amazonaws.com/default/audio/click.mp3");
+    audioRef.current.volume = 0.75;
+  }, []);
+
+  useEffect(() => {
+    if (window.self !== window.top) {
+      try {
+        const parentHostname = window.top?.location.hostname;
+        if (parentHostname?.includes('webild.io')) {
+          setShouldShow(false);
+        }
+      } catch {
+        setShouldShow(true);
+      }
+    }
+  }, []);
+
+  const playSound = useCallback(() => {
+    if (audioRef.current) {
+      audioRef.current.currentTime = 0;
+      audioRef.current.play().catch(() => {});
+    }
+  }, []);
+
+  const handleMouseEnter = useCallback(() => {
+    if (window.innerWidth > 768) {
+      playSound();
+    }
+  }, [playSound]);
+
+  const handleClick = useCallback(
+    (e: React.MouseEvent<T>, onClick?: (e: React.MouseEvent<T>) => void) => {
+      playSound();
+      if (onClick) {
+        onClick(e);
+      }
+    },
+    [playSound]
+  );
+
+  return {
+    shouldShow,
+    handleMouseEnter,
+    handleClick,
+    buttonClassName: "transition-all duration-200 hover:-translate-y-[3px]",
+  };
+}
diff --git a/src/types/button.ts b/src/types/button.ts
new file mode 100644
index 0000000..e6983cf
--- /dev/null
+++ b/src/types/button.ts
@@ -0,0 +1,11 @@
+import type { CTAButtonVariant, ButtonPropsForVariant } from "@/components/button/types";
+
+export type ButtonAnimationType = "none" | "opacity" | "slide-up" | "blur-reveal";
+
+export interface ButtonConfig {
+    text: string;
+    onClick?: () => void;
+    href?: string;
+    scrollToSection?: boolean;
+    props?: Partial<ButtonPropsForVariant<CTAButtonVariant>>;
+}
diff --git a/src/types/navigation.ts b/src/types/navigation.ts
new file mode 100644
index 0000000..17ae4b8
--- /dev/null
+++ b/src/types/navigation.ts
@@ -0,0 +1,11 @@
+export interface NavItem {
+    name: string;
+    id: string;
+}
+
+export interface NavbarProps {
+    navItems: NavItem[];
+    // logoSrc?: string;
+    // logoAlt?: string;
+    brandName?: string;
+}
\ No newline at end of file
diff --git a/src/utils/debounce.ts b/src/utils/debounce.ts
new file mode 100644
index 0000000..f876b0d
--- /dev/null
+++ b/src/utils/debounce.ts
@@ -0,0 +1,15 @@
+export function debounce<T extends (...args: unknown[]) => void>(
+  func: T,
+  wait: number
+): (...args: Parameters<T>) => void {
+  let timeout: NodeJS.Timeout | null = null;
+
+  return function (...args: Parameters<T>) {
+    if (timeout) {
+      clearTimeout(timeout);
+    }
+    timeout = setTimeout(() => {
+      func(...args);
+    }, wait);
+  };
+}
\ No newline at end of file
diff --git a/src/utils/sendContactEmail.ts b/src/utils/sendContactEmail.ts
new file mode 100644
index 0000000..20958ee
--- /dev/null
+++ b/src/utils/sendContactEmail.ts
@@ -0,0 +1,62 @@
+export interface ContactEmailData {
+  formData?: Record<string, string>;
+  message?: string;
+  email?: string;
+}
+
+function createMessage(data: ContactEmailData): string {
+  if (data.message && data.message.trim()) {
+    return data.message.trim();
+  }
+
+  if (data.formData && Object.keys(data.formData).length > 0) {
+    if (data.formData.message && data.formData.message.trim()) {
+      return data.formData.message.trim();
+    }
+
+    const lines: string[] = [];
+    Object.entries(data.formData).forEach(([key, value]) => {
+      if (value && value.trim()) {
+        const fieldName = key.charAt(0).toUpperCase() + key.slice(1).replace(/([A-Z])/g, ' $1');
+        lines.push(`${fieldName}: ${value.trim()}`);
+      }
+    });
+
+    if (lines.length > 0) {
+      return lines.join('\n\n');
+    }
+  }
+
+  return 'A new contact form submission has been received.';
+}
+
+export async function sendContactEmail(data: ContactEmailData): Promise<Response> {
+  const message = createMessage(data);
+  const fromEmail = data.formData?.email || data.email || 'noreply@example.com';
+
+  const apiUrl = process.env.NEXT_PUBLIC_API_URL;
+  const projectId = process.env.NEXT_PUBLIC_PROJECT_ID;
+
+  if (!apiUrl || !projectId) {
+    throw new Error('NEXT_PUBLIC_API_URL and NEXT_PUBLIC_PROJECT_ID must be set');
+  }
+
+  const response = await fetch(`${apiUrl}/emails/projects/${projectId}/sendMail`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      message,
+      fromEmail,
+      formData: data.formData,
+    }),
+  });
+
+  if (!response.ok) {
+    const error = await response.json().catch(() => ({ error: 'Failed to send email' }));
+    throw new Error(error.error || 'Failed to send email');
+  }
+
+  return response;
+}
diff --git a/src/utils/throttle.ts b/src/utils/throttle.ts
new file mode 100644
index 0000000..a1fd390
--- /dev/null
+++ b/src/utils/throttle.ts
@@ -0,0 +1,24 @@
+export function throttle<T extends (...args: unknown[]) => void>(
+  func: T,
+  wait: number
+): (...args: Parameters<T>) => void {
+  let inThrottle: boolean = false;
+  let lastArgs: Parameters<T> | null = null;
+
+  return function (...args: Parameters<T>) {
+    if (!inThrottle) {
+      func(...args);
+      inThrottle = true;
+      
+      setTimeout(() => {
+        inThrottle = false;
+        if (lastArgs) {
+          func(...lastArgs);
+          lastArgs = null;
+        }
+      }, wait);
+    } else {
+      lastArgs = args;
+    }
+  };
+}
\ No newline at end of file
diff --git a/src/utils/visual-edit-script.ts b/src/utils/visual-edit-script.ts
new file mode 100644
index 0000000..16b705b
--- /dev/null
+++ b/src/utils/visual-edit-script.ts
@@ -0,0 +1,1367 @@
+const visualEditorScript = (): string => {
+    return `
+(function() {
+  if (window.self === window.top) return;
+
+  if (window.__webildEditorInitialized) return;
+  window.__webildEditorInitialized = true;
+
+  let isActive = false;
+  let hoveredElement = null;
+  let selectedElement = null;
+  let originalContent = null;
+  let isEditing = false;
+  let elementTypeLabel = null;
+  let hoverOverlay = null;
+  let scrollTimeout = null;
+  let isScrolling = false;
+
+  const invalidElements = ['html', 'body', 'script', 'style', 'meta', 'link', 'head', 'noscript', 'title'];
+  const hoverClass = 'webild-hover';
+  const selectedClass = 'webild-selected';
+
+  const style = document.createElement('style');
+  style.id = 'webild-inspector-styles';
+  style.textContent = '' +
+    '.webild-hover {' +
+    '  outline: 2px dashed #4d96ff80 !important;' +
+    '  border-radius: 0 !important;' +
+    '  outline-offset: 2px !important;' +
+    '  cursor: pointer !important;' +
+    '  transition: outline 0.15s ease !important;' +
+    '  background-color: #4d96ff05 !important;' +
+    '}' +
+    '.webild-selected {' +
+    '  outline: 2px solid #4d96ff !important;' +
+    '  outline-offset: 2px !important;' +
+    '  transition: outline 0.15s ease !important;' +
+    '  background-color: #4d96ff05 !important;' +
+    '  border-radius: 0 !important;' +
+    '}' +
+    '[contenteditable="true"].webild-selected {' +
+    '  outline: 2px solid #4d96ff !important;' +
+    '  background-color: #4d96ff05 !important;' +
+    '}' +
+    'img.webild-hover,' +
+    'img.webild-selected,' +
+    'video.webild-hover,' +
+    'video.webild-selected {' +
+    '  outline-offset: 2px !important;' +
+    '}' +
+    '.webild-element-type-label {' +
+    '  position: fixed !important;' +
+    '  z-index: 999999 !important;' +
+    '  background: #4d96ff !important;' +
+    '  color: white !important;' +
+    '  padding: 4px 8px !important;' +
+    '  font-size: 11px !important;' +
+    '  font-weight: 600 !important;' +
+    '  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;' +
+    '  pointer-events: none !important;' +
+    '  white-space: nowrap !important;' +
+    '  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;' +
+    '  letter-spacing: 0.3px !important;' +
+    '  border: 1px solid #4d96ff20 !important;' +
+    '}' +
+    '.webild-element-type-label.label-top {' +
+    '  border-radius: 6px 6px 0 0 !important;' +
+    '}' +
+    '.webild-element-type-label.label-bottom {' +
+    '  border-radius: 0 0 6px 6px !important;' +
+    '}' +
+    '.webild-hover-overlay {' +
+    '  position: fixed !important;' +
+    '  background-color: #4d96ff15 !important;' +
+    '  pointer-events: none !important;' +
+    '  z-index: 999998 !important;' +
+    '  transition: all 0.15s ease !important;' +
+    '}';
+  document.head.appendChild(style);
+  
+  const getUniqueSelector = (element, assignId = false) => {
+    if (element.dataset && element.dataset.webildSelector) {
+      return element.dataset.webildSelector;
+    }
+    
+    const existingId = element.getAttribute('data-webild-id');
+    if (existingId) {
+      return '[data-webild-id="' + existingId + '"]';
+    }
+    
+    if (assignId) {
+      const uniqueId = 'webild-' + Date.now() + '-' + Math.random().toString(36).substr(2, 9);
+      element.setAttribute('data-webild-id', uniqueId);
+      return '[data-webild-id="' + uniqueId + '"]';
+    }
+    
+    return null;
+  };
+  
+  const getSectionId = (element) => {
+    let current = element;
+    while (current && current !== document.body) {
+      const sectionId = current.getAttribute('data-section');
+      if (sectionId) {
+        return sectionId;
+      }
+      current = current.parentElement;
+    }
+    return 'hero';
+  };
+  
+  const getElementType = (element) => {
+  const tagName = element.tagName.toLowerCase();
+  const computedStyle = window.getComputedStyle(element);
+
+  if (tagName === 'img') {
+    return 'Image';
+  }
+
+  if (tagName === 'video') {
+    return 'Video';
+  }
+
+  const backgroundImage = computedStyle.backgroundImage;
+  if (backgroundImage && backgroundImage !== 'none') {
+    const urlMatch = backgroundImage.match(/url(['"]?([^'")]+)['"]?)/);
+    if (urlMatch && urlMatch[1] && !urlMatch[1].includes('gradient')) {
+      const area = element.offsetWidth * element.offsetHeight;
+      const hasReasonableSize = area > 1000;
+      const hasFewChildren = element.children.length <= 2;
+      
+      if (hasReasonableSize && hasFewChildren) {
+        return 'Image';
+      }
+    }
+  }
+
+    if (tagName === 'button') return 'Button';
+    if (tagName === 'a' && element.getAttribute('href')) return 'Button';
+    if (element.getAttribute('role') === 'button') return 'Button';
+
+    const buttonClasses = ['btn', 'button', 'cta', 'action-button'];
+    const hasButtonClass = buttonClasses.some(cls =>
+      element.classList.contains(cls) || element.classList.contains('btn-' + cls)
+    );
+
+    if (hasButtonClass && element.textContent && element.textContent.trim().length > 0) {
+      return 'Button';
+    }
+
+    const textTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'span', 'label', 'li'];
+    if (textTags.includes(tagName)) {
+      return 'Text';
+    }
+
+    if (tagName === 'div') {
+      const hasDirectText = Array.from(element.childNodes).some(node => 
+        node.nodeType === Node.TEXT_NODE && node.textContent && node.textContent.trim().length > 0
+      );
+      
+      if (hasDirectText && !element.querySelector('div, section, article, main, header, footer')) {
+        return 'Text';
+      }
+      
+      return 'Div';
+    }
+
+    if (tagName === 'article') {
+      return 'Article';
+    }
+
+    if (tagName === 'a' && !element.getAttribute('href')) {
+      return 'Text';
+    }
+
+    return 'Section';
+  };
+
+  const extractOriginalUrl = (url) => {
+    if (!url) return url;
+
+    if (url.includes('/_next/')) {
+      try {
+        const urlObj = new URL(url);
+        const originalPath = urlObj.searchParams.get('url');
+        if (originalPath) {
+          return originalPath;
+        }
+      } catch (e) {
+        return url;
+      }
+    }
+    
+    if (url.includes('.webild.io')) {
+      try {
+        const urlObj = new URL(url);
+        return urlObj.pathname;
+      } catch (e) {
+        return url;
+      }
+    }
+
+    return url;
+  };
+
+  const getMediaTypeFromUrl = (url) => {
+    const videoExts = ['.mp4', '.webm', '.ogg', '.mov', '.avi', '.mkv', '.m4v', '.wmv'];
+    const imageExts = ['.jpg', '.jpeg', '.png', '.gif', '.webp', '.svg', '.bmp', '.ico', '.tiff', '.avif'];
+    try {
+      const pathname = new URL(url).pathname.toLowerCase();
+      if (videoExts.some(function(ext) { return pathname.endsWith(ext); })) return 'video';
+      if (imageExts.some(function(ext) { return pathname.endsWith(ext); })) return 'image';
+    } catch(e) {}
+    return 'unknown';
+  };
+
+  const swapMediaElement = (oldEl, newTag, newSrc) => {
+    const newEl = document.createElement(newTag);
+    Array.from(oldEl.attributes).forEach(function(attr) {
+      if (attr.name !== 'src' && attr.name !== 'alt' && attr.name !== 'srcset' && attr.name !== 'autoplay' && attr.name !== 'loop' && attr.name !== 'muted' && attr.name !== 'playsinline') {
+        try { newEl.setAttribute(attr.name, attr.value); } catch(e) {}
+      }
+    });
+    newEl.style.cssText = oldEl.style.cssText;
+    if (newTag === 'video') {
+      newEl.setAttribute('autoplay', '');
+      newEl.setAttribute('loop', '');
+      newEl.setAttribute('muted', '');
+      newEl.setAttribute('playsinline', '');
+    }
+    newEl.src = newSrc;
+    if (oldEl.parentNode) {
+      oldEl.parentNode.replaceChild(newEl, oldEl);
+    }
+    return newEl;
+  };
+
+  const getElementInfo = (element, assignId = false) => {
+    const rect = element.getBoundingClientRect();
+    const tagName = element.tagName.toLowerCase();
+    const selector = getUniqueSelector(element, assignId);
+    const sectionId = getSectionId(element);
+    
+    let className = undefined;
+    try {
+      if (element.className) {
+        if (typeof element.className === 'string') {
+          className = element.className;
+        } else if (element.className.baseVal !== undefined) {
+          className = element.className.baseVal;
+        }
+      }
+    } catch (e) {}
+    
+    const info = {
+      tagName: tagName,
+      id: element.id || undefined,
+      className: className,
+      selector: selector,
+      elementType: null,
+      sectionId: sectionId,
+      boundingBox: {
+        x: rect.left,
+        y: rect.top,
+        width: rect.width,
+        height: rect.height
+      }
+    };
+    
+    if (tagName === 'img') {
+      const originalSrc = extractOriginalUrl(element.src);
+      info.imageData = {
+        src: originalSrc,
+        alt: element.alt || undefined,
+        naturalWidth: element.naturalWidth,
+        naturalHeight: element.naturalHeight,
+        isBackground: false
+      };
+    }
+
+    if (tagName === 'video') {
+      const rawSrc = element.src || element.currentSrc || (element.querySelector('source') && element.querySelector('source').src) || '';
+      const resolvedSrc = extractOriginalUrl(rawSrc);
+      info.imageData = {
+        src: resolvedSrc,
+        alt: element.getAttribute('aria-label') || undefined,
+        isBackground: false,
+        isVideo: true
+      };
+    }
+
+    const computedStyle = window.getComputedStyle(element);
+    const backgroundImage = computedStyle.backgroundImage;
+    if (backgroundImage && backgroundImage !== 'none') {
+      const urlMatch = backgroundImage.match(/url(['"]?([^'")]+)['"]?)/);
+      if (urlMatch) {
+        const originalBgSrc = extractOriginalUrl(urlMatch[1]);
+        if (tagName !== 'img') {
+          info.imageData = {
+            src: originalBgSrc,
+            isBackground: true
+          };
+        } else {
+          if (!info.imageData) info.imageData = {};
+          info.imageData.backgroundImageSrc = originalBgSrc;
+        }
+      }
+    }
+    
+    const elementType = getElementType(element);
+    info.elementType = elementType;
+    
+    if (elementType === 'Button') {
+      const buttonText = element.textContent?.trim() || element.value || element.getAttribute('aria-label') || '';
+      const buttonHref = element.getAttribute('href') ||
+                        element.getAttribute('data-href') ||
+                        element.getAttribute('onclick') ||
+                        element.dataset?.link ||
+                        undefined;
+
+      info.buttonData = {
+        text: buttonText,
+        href: buttonHref
+      };
+    }
+
+    if (elementType === 'Text') {
+      info.textContent = element.textContent || '';
+    }
+    
+    return info;
+  };
+  
+  const isValidElement = (element) => {
+    if (!isActive) return false;
+    const tagName = element.tagName?.toLowerCase();
+    if (invalidElements.includes(tagName)) return false;
+    const isImage = tagName === 'img';
+    const isVideo = tagName === 'video';
+    if (isImage || isVideo) return true;
+    const hasInnerHTML = element.innerHTML && element.innerHTML.trim().length > 0;
+    const hasTextContent = element.textContent && element.textContent.trim().length > 0;
+    const hasChildren = element.children && element.children.length > 0;
+    if (!hasInnerHTML && !hasTextContent && !hasChildren) {
+      return false;
+    }
+    const hasBackgroundImage = window.getComputedStyle(element).backgroundImage !== 'none';
+    if (hasBackgroundImage && !hasChildren && !hasTextContent) {
+      return false;
+    }
+    
+    return true;
+  };
+
+  const getMostSpecificElement = (x, y) => {
+    const elements = document.elementsFromPoint(x, y);
+    const validElements = elements.filter(el =>
+      isValidElement(el) &&
+      !el.classList.contains('webild-hover-overlay') &&
+      !el.classList.contains('webild-element-type-label')
+    );
+
+    if (validElements.length === 0) return null;
+    const scoredElements = validElements.map(element => {
+      let score = 0;
+      const rect = element.getBoundingClientRect();
+      const tagName = element.tagName.toLowerCase();
+      const computedStyle = window.getComputedStyle(element);
+      let depth = 0;
+      let current = element;
+      while (current && current !== document.body) {
+        depth++;
+        current = current.parentElement;
+      }
+      score += depth * 2;
+      const hasDirectText = Array.from(element.childNodes).some(node => 
+        node.nodeType === Node.TEXT_NODE && node.textContent && node.textContent.trim().length > 0
+      );
+
+      const hasImages = element.tagName === 'IMG' || element.tagName === 'VIDEO' || computedStyle.backgroundImage !== 'none' || element.querySelector('img') || element.querySelector('video');
+      const isInteractive = ['BUTTON', 'A', 'INPUT', 'SELECT', 'TEXTAREA'].includes(element.tagName);
+      const hasFewChildren = element.children.length <= 3;
+      const area = rect.width * rect.height;
+      const viewportArea = window.innerWidth * window.innerHeight;
+      const isSmallElement = area < viewportArea * 0.1;
+      if (hasDirectText) score += 20;
+      if (hasImages) score += 15;
+      if (isInteractive) score += 25;
+      if (hasFewChildren) score += 10;
+      if (isSmallElement) score += 5;
+      if (area > viewportArea * 0.3) score -= 30;
+      if (element.hasAttribute('data-section')) score -= 15;
+      if (['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(tagName)) score += 20;
+      if (['p', 'span', 'label'].includes(tagName)) score += 15;
+      if (tagName === 'div' && !hasDirectText && element.children.length > 2) score -= 10;
+
+      return { element, score };
+    });
+    scoredElements.sort((a, b) => b.score - a.score);
+    return scoredElements[0]?.element || validElements[0];
+  };
+
+  const isTextElement = (element) => {
+    const elementType = getElementType(element);
+    return elementType === 'Text';
+  };
+
+  const isButtonElement = (element) => {
+    const elementType = getElementType(element);
+    return elementType === 'Button';
+  };
+
+  const updateButtonText = (element, newText) => {
+    const textNodes = [];
+    const walker = document.createTreeWalker(
+      element,
+      NodeFilter.SHOW_TEXT,
+      null
+    );
+
+    let node;
+    while (node = walker.nextNode()) {
+      if (node.textContent && node.textContent.trim()) {
+        textNodes.push(node);
+      }
+    }
+
+    if (textNodes.length > 0) {
+      textNodes[0].textContent = newText;
+      for (let i = 1; i < textNodes.length; i++) {
+        textNodes[i].textContent = '';
+      }
+    } else {
+      element.textContent = newText;
+    }
+  };
+
+  const makeEditable = (element, clickEvent) => {
+    if (!isTextElement(element)) return;
+    
+    originalContent = element.textContent;
+    element.contentEditable = 'true';
+    
+    if (!element.dataset.webildOriginalWhiteSpace) {
+      const computedStyle = window.getComputedStyle(element);
+      element.dataset.webildOriginalWhiteSpace = computedStyle.whiteSpace;
+      element.dataset.webildOriginalWordWrap = computedStyle.wordWrap;
+      element.dataset.webildOriginalOverflowWrap = computedStyle.overflowWrap;
+      element.dataset.webildOriginalOverflow = computedStyle.overflow;
+    }
+    
+    element.style.whiteSpace = 'pre-wrap';
+    element.style.wordWrap = 'break-word';
+    element.style.overflowWrap = 'break-word';
+    element.style.overflow = 'visible';
+    
+    element.focus();
+    isEditing = true;
+    
+    window.parent.postMessage({
+      type: 'webild-text-editing-started',
+      data: { selector: getElementInfo(element).selector }
+    }, '*');
+    
+    const handleBeforeInput = (e) => {
+      // Prevent deletion if it would leave the element empty
+      const currentText = element.textContent || '';
+      const inputType = e.inputType;
+      
+      // Check if this is a delete operation that would leave the element empty
+      if ((inputType === 'deleteContentBackward' || inputType === 'deleteContentForward' || inputType === 'deleteByCut') && currentText.length <= 1) {
+        e.preventDefault();
+        element.textContent = ' ';
+        // Move cursor to the beginning
+        const range = document.createRange();
+        const sel = window.getSelection();
+        range.setStart(element.firstChild || element, 0);
+        range.collapse(true);
+        sel.removeAllRanges();
+        sel.addRange(range);
+      }
+    };
+    
+    const handleInput = () => {
+      const elementInfo = getElementInfo(element);
+      let currentText = element.textContent;
+      
+      // Ensure there's always at least a space to keep the element editable
+      if (currentText === '' || currentText === null || currentText.length === 0) {
+        element.textContent = ' ';
+        currentText = ' ';
+        // Move cursor to the beginning
+        try {
+          const range = document.createRange();
+          const sel = window.getSelection();
+          range.setStart(element.firstChild || element, 0);
+          range.collapse(true);
+          sel.removeAllRanges();
+          sel.addRange(range);
+        } catch (e) {
+          // Ignore cursor positioning errors
+        }
+      }
+
+      window.parent.postMessage({
+        type: 'webild-element-changed',
+        data: {
+          type: 'updateText',
+          selector: elementInfo.selector,
+          oldValue: originalContent,
+          newValue: currentText,
+          elementType: elementInfo.elementType,
+          sectionId: elementInfo.sectionId,
+          timestamp: Date.now()
+        }
+      }, '*');
+      
+      if (currentText !== originalContent) {
+        window.parent.postMessage({
+          type: 'webild-text-changed',
+          data: { 
+            selector: elementInfo.selector,
+            hasChanges: true
+          }
+        }, '*');
+      }
+    };
+    
+    element.addEventListener('beforeinput', handleBeforeInput);
+    element.addEventListener('input', handleInput);
+    element.dataset.inputHandler = 'true';
+    element.dataset.beforeInputHandler = 'true';
+    
+    if (clickEvent && element.childNodes.length > 0) {
+      try {
+        let range = null;
+        
+        if (document.caretRangeFromPoint) {
+          range = document.caretRangeFromPoint(clickEvent.clientX, clickEvent.clientY);
+        } else if (document.caretPositionFromPoint) {
+          const position = document.caretPositionFromPoint(clickEvent.clientX, clickEvent.clientY);
+          if (position) {
+            range = document.createRange();
+            range.setStart(position.offsetNode, position.offset);
+            range.collapse(true);
+          }
+        }
+        
+        if (range) {
+          const selection = window.getSelection();
+          selection.removeAllRanges();
+          selection.addRange(range);
+        }
+      } catch (e) {
+        console.warn('[Webild] Could not set caret position:', e);
+      }
+    }
+  };
+  
+  const makeUneditable = (element, save = false) => {
+    if (!element || element.contentEditable !== 'true') return;
+    
+    element.contentEditable = 'false';
+    isEditing = false;
+    
+    if (element.dataset.webildOriginalWhiteSpace) {
+      element.style.whiteSpace = element.dataset.webildOriginalWhiteSpace === 'normal' ? '' : element.dataset.webildOriginalWhiteSpace;
+      delete element.dataset.webildOriginalWhiteSpace;
+    }
+    if (element.dataset.webildOriginalWordWrap) {
+      element.style.wordWrap = element.dataset.webildOriginalWordWrap === 'normal' ? '' : element.dataset.webildOriginalWordWrap;
+      delete element.dataset.webildOriginalWordWrap;
+    }
+    if (element.dataset.webildOriginalOverflowWrap) {
+      element.style.overflowWrap = element.dataset.webildOriginalOverflowWrap === 'normal' ? '' : element.dataset.webildOriginalOverflowWrap;
+      delete element.dataset.webildOriginalOverflowWrap;
+    }
+    if (element.dataset.webildOriginalOverflow) {
+      element.style.overflow = element.dataset.webildOriginalOverflow === 'visible' ? '' : element.dataset.webildOriginalOverflow;
+      delete element.dataset.webildOriginalOverflow;
+    }
+    
+    if (element.dataset.beforeInputHandler === 'true') {
+      element.removeEventListener('beforeinput', () => {});
+      delete element.dataset.beforeInputHandler;
+    }
+    
+    if (element.dataset.inputHandler === 'true') {
+      element.removeEventListener('input', () => {});
+      delete element.dataset.inputHandler;
+    }
+    
+    window.parent.postMessage({
+      type: 'webild-text-editing-ended',
+      data: { selector: getElementInfo(element).selector }
+    }, '*');
+    
+    if (save && originalContent !== element.textContent) {
+      const elementInfo = getElementInfo(element);
+      let finalText = element.textContent;
+      
+      // Trim the final text and convert space-only to empty string for saving
+      if (finalText === ' ' || finalText.trim() === '') {
+        finalText = '';
+        // Update the actual element text to empty for display
+        element.textContent = '';
+      }
+      
+      const change = {
+        type: 'updateText',
+        selector: elementInfo.selector,
+        oldValue: originalContent,
+        newValue: finalText,
+        elementType: elementInfo.elementType,
+        sectionId: elementInfo.sectionId,
+        timestamp: Date.now()
+      };
+
+      saveChangeToStorage(change);
+
+      window.parent.postMessage({
+        type: 'webild-element-changed',
+        data: change
+      }, '*');
+    } else if (!save && originalContent !== null) {
+      element.textContent = originalContent;
+    }
+    
+    originalContent = null;
+  };
+  
+  const createHoverOverlay = (element) => {
+    const rect = element.getBoundingClientRect();
+    const overlay = document.createElement('div');
+    overlay.className = 'webild-hover-overlay';
+    overlay.style.cssText =
+      'position: fixed !important;' +
+      'top: ' + (rect.top - 2) + 'px !important;' +
+      'left: ' + (rect.left - 2) + 'px !important;' +
+      'width: ' + (rect.width + 4) + 'px !important;' +
+      'height: ' + (rect.height + 4) + 'px !important;' +
+      'background-color: rgba(90, 113, 230, 0.15) !important;' +
+      'pointer-events: none !important;' +
+      'z-index: 999998 !important;' +
+      'transition: all 0.15s ease !important;';
+    document.body.appendChild(overlay);
+    return overlay;
+  };
+  
+  const removeHoverOverlay = () => {
+    if (hoverOverlay) {
+      hoverOverlay.remove();
+      hoverOverlay = null;
+    }
+  };
+  
+  const showElementTypeLabel = (element, elementType) => {
+    if (!elementType) return;
+
+    removeElementTypeLabel();
+
+    const rect = element.getBoundingClientRect();
+    elementTypeLabel = document.createElement('div');
+    elementTypeLabel.className = 'webild-element-type-label';
+    const ariaLabel = element.getAttribute('aria-label');
+    let labelText;
+    
+    if (elementType === 'Div') {
+      labelText = 'Div';
+    } else if (elementType === 'Article') {
+      labelText = 'Article';
+    } else if (elementType === 'Section') {
+      labelText = ariaLabel || 'Section';
+    } else {
+      labelText = elementType;
+    }
+    
+    elementTypeLabel.textContent = labelText;
+    document.body.appendChild(elementTypeLabel);
+    const labelRect = elementTypeLabel.getBoundingClientRect();
+    let labelTop = rect.top - labelRect.height - 2;
+    let labelLeft = rect.left - 3;
+    let isLabelOnTop = true;
+    if (labelTop < 0) {
+      labelTop = rect.bottom + 1;
+      isLabelOnTop = false;
+    }
+    if (labelTop + labelRect.height > window.innerHeight) {
+      labelTop = rect.bottom - labelRect.height;
+      isLabelOnTop = false;
+      if (labelTop < 0) {
+        labelTop = rect.top;
+        isLabelOnTop = true;
+      }
+    }
+    if (labelLeft + labelRect.width > window.innerWidth) {
+      labelLeft = window.innerWidth - labelRect.width;
+    }
+    if (labelLeft < 0) {
+      labelLeft = 0;
+    }
+    if (isLabelOnTop) {
+      elementTypeLabel.classList.add('label-top');
+    } else {
+      elementTypeLabel.classList.add('label-bottom');
+    }
+
+    elementTypeLabel.style.cssText =
+      'left: ' + labelLeft + 'px !important;' +
+      'top: ' + labelTop + 'px !important;' +
+      'transform: none !important;';
+  };
+  
+  const removeElementTypeLabel = () => {
+    if (elementTypeLabel) {
+      elementTypeLabel.remove();
+      elementTypeLabel = null;
+    }
+  };
+  
+  const handleMouseOver = (e) => {
+    if (!isActive) return;
+
+    lastMouseX = e.clientX;
+    lastMouseY = e.clientY;
+
+    const target = getMostSpecificElement(e.clientX, e.clientY) || e.target;
+
+    if (!isValidElement(target) || target === hoveredElement || target === selectedElement) {
+      return;
+    }
+    
+    if (hoveredElement && hoveredElement !== selectedElement) {
+      hoveredElement.classList.remove(hoverClass);
+      if (hoveredElement.dataset.webildOriginalPosition) {
+        hoveredElement.style.position = hoveredElement.dataset.webildOriginalPosition === 'none' ? '' : hoveredElement.dataset.webildOriginalPosition;
+        delete hoveredElement.dataset.webildOriginalPosition;
+      }
+      removeHoverOverlay();
+      removeElementTypeLabel();
+    }
+    
+    hoveredElement = target;
+    
+    const computedStyle = window.getComputedStyle(target);
+    const currentPosition = computedStyle.position;
+    
+    if (currentPosition === 'static' || currentPosition === '') {
+      hoveredElement.dataset.webildOriginalPosition = currentPosition || 'none';
+      hoveredElement.style.position = 'relative';
+    }
+    
+    hoveredElement.classList.add(hoverClass);
+    
+    if ((!selectedElement || selectedElement !== target) && !isScrolling) {
+      hoverOverlay = createHoverOverlay(target);
+    }
+    
+    const elementType = getElementType(target);
+    showElementTypeLabel(target, elementType);
+    
+    window.parent.postMessage({
+      type: 'webild-element-hover',
+      data: getElementInfo(target, false)
+    }, '*');
+  };
+  
+  const handleMouseOut = (e) => {
+    if (!isActive) return;
+    
+    if (hoveredElement && hoveredElement !== selectedElement) {
+      hoveredElement.classList.remove(hoverClass);
+      
+      if (hoveredElement.dataset.webildOriginalPosition) {
+        hoveredElement.style.position = hoveredElement.dataset.webildOriginalPosition === 'none' ? '' : hoveredElement.dataset.webildOriginalPosition;
+        delete hoveredElement.dataset.webildOriginalPosition;
+      }
+      
+      removeHoverOverlay();
+      removeElementTypeLabel();
+      
+      hoveredElement = null;
+      
+      window.parent.postMessage({
+        type: 'webild-element-hover',
+        data: null
+      }, '*');
+    }
+  };
+  
+  const handleClick = (e) => {
+  if (!isActive) return;
+
+  if (isEditing) {
+    e.stopPropagation();
+    return;
+  }
+
+  e.preventDefault();
+  e.stopPropagation();
+
+  const target = getMostSpecificElement(e.clientX, e.clientY) || e.target;  
+  if (!isValidElement(target)) return;
+    
+    if (selectedElement && selectedElement !== target) {
+      makeUneditable(selectedElement, false);
+      selectedElement.classList.remove(selectedClass);
+      selectedElement.classList.remove(hoverClass);
+      
+      if (selectedElement.dataset.webildOriginalPosition) {
+        selectedElement.style.position = selectedElement.dataset.webildOriginalPosition === 'none' ? '' : selectedElement.dataset.webildOriginalPosition;
+        delete selectedElement.dataset.webildOriginalPosition;
+      }
+      
+      removeHoverOverlay();
+      removeElementTypeLabel();
+    }
+    
+    if (selectedElement === target) {
+      if (target.dataset.webildOriginalPosition) {
+        target.style.position = target.dataset.webildOriginalPosition === 'none' ? '' : target.dataset.webildOriginalPosition;
+        delete target.dataset.webildOriginalPosition;
+      }
+      
+      removeHoverOverlay();
+      removeElementTypeLabel();
+      
+      selectedElement = null;
+      window.parent.postMessage({
+        type: 'webild-element-selected',
+        data: null
+      }, '*');
+      return;
+    }
+    
+    selectedElement = target;
+    selectedElement.classList.add(selectedClass);
+    
+    removeHoverOverlay();
+    removeElementTypeLabel();
+    
+    if (hoveredElement === target) {
+      hoveredElement.classList.remove(hoverClass);
+      hoveredElement = null;
+    }
+    
+    const elementInfo = getElementInfo(target, true);
+    selectedElement.dataset.webildSelector = elementInfo.selector;
+    showElementTypeLabel(target, elementInfo.elementType);
+    
+    window.parent.postMessage({
+      type: 'webild-element-selected',
+      data: elementInfo
+    }, '*');
+    
+    if (isTextElement(target)) {
+      setTimeout(() => makeEditable(target, e), 50);
+    }
+  };
+  
+  const handleKeyDown = (e) => {
+    if (!isActive) return;
+    if (!isEditing || !selectedElement) return;
+    
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      makeUneditable(selectedElement, true);
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      makeUneditable(selectedElement, false);
+    }
+  };
+  
+  const handleBlur = (e) => {
+    if (!isActive) return;
+    if (isEditing && selectedElement && e.target === selectedElement) {
+      makeUneditable(selectedElement, true);
+    }
+  };
+  
+  let lastMouseX = 0;
+  let lastMouseY = 0;
+
+  const handleScroll = () => {
+    if (!isActive) return;
+    
+    if (isEditing) return;
+    
+    if (selectedElement) {
+      makeUneditable(selectedElement, false);
+      selectedElement.classList.remove(selectedClass);
+      if (selectedElement.dataset.webildOriginalPosition) {
+        selectedElement.style.position = selectedElement.dataset.webildOriginalPosition === 'none' ? '' : selectedElement.dataset.webildOriginalPosition;
+        delete selectedElement.dataset.webildOriginalPosition;
+      }
+      selectedElement = null;
+
+      window.parent.postMessage({
+        type: 'webild-element-selected',
+        data: null
+      }, '*');
+    }
+
+    if (hoveredElement) {
+      hoveredElement.classList.remove(hoverClass);
+      if (hoveredElement.dataset.webildOriginalPosition) {
+        hoveredElement.style.position = hoveredElement.dataset.webildOriginalPosition === 'none' ? '' : hoveredElement.dataset.webildOriginalPosition;
+        delete hoveredElement.dataset.webildOriginalPosition;
+      }
+      hoveredElement = null;
+
+      window.parent.postMessage({
+        type: 'webild-element-hover',
+        data: null
+      }, '*');
+    }
+
+    removeHoverOverlay();
+    removeElementTypeLabel();
+
+    isScrolling = true;
+
+    if (scrollTimeout) {
+      clearTimeout(scrollTimeout);
+    }
+
+    scrollTimeout = setTimeout(() => {
+      isScrolling = false;
+
+      if (lastMouseX > 0 && lastMouseY > 0) {
+        const target = getMostSpecificElement(lastMouseX, lastMouseY);
+        if (target && isValidElement(target) && target !== selectedElement) {
+          hoveredElement = target;
+
+          const computedStyle = window.getComputedStyle(target);
+          const currentPosition = computedStyle.position;
+
+          if (currentPosition === 'static' || currentPosition === '') {
+            hoveredElement.dataset.webildOriginalPosition = currentPosition || 'none';
+            hoveredElement.style.position = 'relative';
+          }
+
+          hoveredElement.classList.add(hoverClass);
+          hoverOverlay = createHoverOverlay(target);
+
+          const elementType = getElementType(target);
+          showElementTypeLabel(target, elementType);
+
+          window.parent.postMessage({
+            type: 'webild-element-hover',
+            data: getElementInfo(target, false)
+          }, '*');
+        }
+      }
+    }, 150);
+
+    window.parent.postMessage({
+      type: 'webild-iframe-scroll'
+    }, '*');
+  };
+  
+  const getStorageKey = () => {
+    const url = new URL(window.location.href);
+    const pathParts = url.pathname.split('/').filter(Boolean);
+    return 'webild-changes-' + pathParts.join('-');
+  };
+
+  const saveChangeToStorage = (change) => {
+    try {
+      const storageKey = getStorageKey();
+      const existingChanges = JSON.parse(localStorage.getItem(storageKey) || '[]');
+
+      const filteredChanges = existingChanges.filter(c => {
+        return !(c.oldValue === change.oldValue && c.sectionId === change.sectionId);
+      });
+      filteredChanges.push(change);
+
+      localStorage.setItem(storageKey, JSON.stringify(filteredChanges));
+
+      window.parent.postMessage({
+        type: 'webild-change-saved-locally',
+        data: { change, allChanges: filteredChanges }
+      }, '*');
+    } catch (error) {
+      console.error('Failed to save change to localStorage:', error);
+    }
+  };
+
+  const clearLocalChanges = () => {
+    try {
+      const storageKey = getStorageKey();
+      localStorage.removeItem(storageKey);
+      window.parent.postMessage({
+        type: 'webild-local-changes-cleared',
+        data: {}
+      }, '*');
+    } catch (error) {
+      console.error('Failed to clear local changes:', error);
+    }
+  };
+
+  const handleMessage = (e) => {
+    if (!e.data || !e.data.type) return;
+
+    if (e.data.type === 'webild-activate-editor') {
+      if (!isActive) {
+        isActive = true;
+        window.parent.postMessage({ type: 'webild-editor-activated' }, '*');
+      }
+      return;
+    }
+
+    if (e.data.type === 'webild-deactivate-editor') {
+      if (isActive) {
+        isActive = false;
+
+        if (selectedElement) {
+          makeUneditable(selectedElement, false);
+          selectedElement.classList.remove(selectedClass);
+          selectedElement = null;
+        }
+        if (hoveredElement) {
+          hoveredElement.classList.remove(hoverClass);
+          hoveredElement = null;
+        }
+
+        removeHoverOverlay();
+        removeElementTypeLabel();
+        window.parent.postMessage({ type: 'webild-editor-deactivated' }, '*');
+      }
+      return;
+    }
+
+    if (e.data.type === 'webild-clear-local-changes') {
+      clearLocalChanges();
+      return;
+    }
+
+    if (e.data.type === 'webild-cancel-changes') {
+      try {
+        const storageKey = getStorageKey();
+        const savedChanges = localStorage.getItem(storageKey);
+        if (savedChanges) {
+          const changes = JSON.parse(savedChanges);
+          changes.forEach(change => {
+            try {
+              const element = document.querySelector(change.selector);
+              if (!element) return;
+
+              if (change.type === 'updateText') {
+                if (isTextElement(element)) {
+                  element.textContent = change.oldValue;
+                }
+              } else if (change.type === 'updateButton') {
+                if (isButtonElement(element)) {
+                  updateButtonText(element, change.oldValue);
+                }
+              } else if (change.type === 'replaceImage') {
+                const revertTag = element.tagName.toLowerCase();
+                const isBackground = revertTag !== 'img' && revertTag !== 'video';
+                if (isBackground) {
+                  element.style.backgroundImage = change.oldValue ? 'url(' + change.oldValue + ')' : '';
+                } else {
+                  const oldMediaType = getMediaTypeFromUrl(change.oldValue);
+                  if (revertTag === 'video' && oldMediaType === 'image') {
+                    swapMediaElement(element, 'img', change.oldValue);
+                  } else if (revertTag === 'img' && oldMediaType === 'video') {
+                    swapMediaElement(element, 'video', change.oldValue);
+                  } else if (revertTag === 'video') {
+                    element.src = change.oldValue;
+                    element.load();
+                  } else {
+                    element.src = change.oldValue;
+                  }
+                }
+              }
+            } catch (err) {
+              console.warn('[Webild] Failed to revert change:', err);
+            }
+          });
+        }
+        clearLocalChanges();
+      } catch (error) {
+        console.error('[Webild] Failed to cancel changes:', error);
+      }
+      return;
+    }
+
+    if (e.data.type === 'webild-update-text') {
+      const { selector, newValue, oldValue, sectionId } = e.data.data;
+      try {
+        let element = null;
+        
+        if (selectedElement && isTextElement(selectedElement)) {
+          element = selectedElement;
+        }
+        else if (selector) {
+          try {
+            element = document.querySelector(selector);
+          } catch (err) {
+            console.warn('[Webild] Invalid selector:', selector);
+          }
+        }
+        
+        if (!element && sectionId) {
+          const sectionElement = document.querySelector('[data-section="' + sectionId + '"]');
+          if (sectionElement) {
+            const textElements = sectionElement.querySelectorAll('h1, h2, h3, h4, h5, h6, p, span, a, button, div');
+            for (let i = 0; i < textElements.length; i++) {
+              const el = textElements[i];
+              if (isTextElement(el) && el.textContent.trim() === (oldValue || '').trim()) {
+                element = el;
+                const newSelector = getUniqueSelector(element, true);
+                if (newSelector) {
+                  element.dataset.webildSelector = newSelector;
+                }
+                break;
+              }
+            }
+          }
+        }
+        
+        if (element && isTextElement(element)) {
+          element.textContent = newValue;
+          const finalSelector = element.dataset.webildSelector || getUniqueSelector(element, true);
+          
+          window.parent.postMessage({
+            type: 'webild-text-update-success',
+            data: {
+              selector: finalSelector,
+              newValue: newValue
+            }
+          }, '*');
+        } else {
+          window.parent.postMessage({
+            type: 'webild-text-update-failed',
+            data: { selector, newValue }
+          }, '*');
+        }
+      } catch (error) {
+        window.parent.postMessage({
+          type: 'webild-text-update-failed',
+          data: { selector, newValue, error: error.message }
+        }, '*');
+      }
+      return;
+    }
+
+    if (e.data.type === 'webild-update-button') {
+      const { selector, text, href } = e.data.data;
+      try {
+        const element = document.querySelector(selector);
+        if (element && isButtonElement(element)) {
+          if (text !== undefined) {
+            updateButtonText(element, text);
+          }
+          if (href !== undefined) {
+            if (element.tagName.toLowerCase() === 'a') {
+              element.href = href;
+            } else {
+              element.setAttribute('data-href', href);
+            }
+          }
+        }
+      } catch (error) {
+        console.error('[Webild] Invalid selector for button update:', selector, error);
+      }
+      return;
+    }
+
+    if (!isActive) return;
+
+    if (e.data.type === 'webild-replace-image') {
+      const { selector, newSrc, isBackground, allowMediaTypeSwap } = e.data.data;
+      let element = null;
+
+      try {
+        element = document.querySelector(selector);
+      } catch {
+        window.parent.postMessage({
+          type: 'webild-image-replacement-error',
+          data: { selector, message: 'Invalid selector: ' + error.message, success: false }
+        }, '*');
+        return;
+      }
+
+      if (!element) {
+        window.parent.postMessage({
+          type: 'webild-image-replacement-error',
+          data: { selector, message: 'Element not found', success: false }
+        }, '*');
+        return;
+      }
+
+      try {
+        let replaced = false;
+        let oldValue = '';
+
+        if (isBackground) {
+          oldValue = window.getComputedStyle(element).backgroundImage;
+          element.style.backgroundImage = 'url(\\'' + newSrc + '\\')';
+          replaced = true;
+        } else if (element.tagName.toLowerCase() === 'img') {
+          oldValue = element.src;
+          const newMediaType = getMediaTypeFromUrl(newSrc);
+          if (newMediaType === 'video' && allowMediaTypeSwap) {
+            const swapped = swapMediaElement(element, 'video', newSrc);
+            if (selectedElement === element) selectedElement = swapped;
+            element = swapped;
+          } else {
+            element.src = newSrc;
+          }
+          element.srcset = ''; 
+          replaced = true;
+        } else if (element.tagName.toLowerCase() === 'video') {
+          oldValue = element.src || element.currentSrc || '';
+          const newMediaType = getMediaTypeFromUrl(newSrc);
+          const sources = element.querySelectorAll('source');
+          if (newMediaType === 'image' && allowMediaTypeSwap) {
+            const swapped = swapMediaElement(element, 'img', newSrc);
+            if (selectedElement === element) selectedElement = swapped;
+            element = swapped;
+          } else {
+            if (sources.length > 0) {
+              sources.forEach(function(source) { source.src = newSrc; });
+              element.load();
+            } else {
+              element.src = newSrc;
+              element.load();
+            }
+          }
+          replaced = true;
+        } else {
+          const hasBackgroundImage = window.getComputedStyle(element).backgroundImage !== 'none';
+          if (hasBackgroundImage) {
+            oldValue = window.getComputedStyle(element).backgroundImage;
+            element.style.backgroundImage = 'url(\\'' + newSrc + '\\')';
+            replaced = true;
+          }
+        }
+
+        if (replaced) {
+          const elementInfo = getElementInfo(element);
+
+          let cleanOldValue = oldValue;
+          if (oldValue.includes('url(')) {
+            const urlMatch = oldValue.match(/url(['"]?([^'")]+)['"]?)/);
+            if (urlMatch) {
+              cleanOldValue = urlMatch[1];
+            }
+          }
+
+          cleanOldValue = extractOriginalUrl(cleanOldValue);
+
+          const change = {
+            type: 'replaceImage',
+            selector: selector,
+            oldValue: cleanOldValue,
+            newValue: newSrc,
+            elementType: elementInfo.elementType,
+            sectionId: elementInfo.sectionId,
+            timestamp: Date.now()
+          };
+
+          saveChangeToStorage(change);
+
+          window.parent.postMessage({
+            type: 'webild-element-changed',
+            data: change
+          }, '*');
+
+          window.parent.postMessage({
+            type: 'webild-image-replaced',
+            data: { selector, newSrc, success: true }
+          }, '*');
+        } else {
+          window.parent.postMessage({
+            type: 'webild-image-replacement-error',
+            data: { selector, message: 'Could not determine how to replace image', success: false }
+          }, '*');
+        }
+      } catch (error) {
+        window.parent.postMessage({
+          type: 'webild-image-replacement-error',
+          data: { selector, message: error.message || 'Failed to replace image', success: false }
+        }, '*');
+      }
+    }
+  };
+  
+  document.addEventListener('mouseover', handleMouseOver, true);
+  document.addEventListener('mouseout', handleMouseOut, true);
+  document.addEventListener('click', handleClick, true);
+  document.addEventListener('keydown', handleKeyDown, true);
+  document.addEventListener('blur', handleBlur, true);
+  window.addEventListener('scroll', handleScroll, true);
+  window.addEventListener('message', handleMessage, true);
+  
+  let lastPathname = window.location.pathname;
+  
+  const notifyPageChange = () => {
+    window.parent.postMessage({
+      type: 'webild-page-changed',
+      data: { pathname: window.location.pathname }
+    }, '*');
+  };
+  
+  window.addEventListener('popstate', () => {
+    if (lastPathname !== window.location.pathname) {
+      lastPathname = window.location.pathname;
+      notifyPageChange();
+    }
+  }, true);
+  
+  const urlCheckInterval = setInterval(() => {
+    if (lastPathname !== window.location.pathname) {
+      lastPathname = window.location.pathname;
+      notifyPageChange();
+    }
+  }, 500);
+  
+  notifyPageChange();
+  
+  window.webildCleanup = () => {
+    isActive = false;
+    
+    if (selectedElement) {
+      makeUneditable(selectedElement, false);
+    }
+    
+    removeHoverOverlay();
+    removeElementTypeLabel();
+    
+    if (urlCheckInterval) {
+      clearInterval(urlCheckInterval);
+    }
+    
+    document.removeEventListener('mouseover', handleMouseOver, true);
+    document.removeEventListener('mouseout', handleMouseOut, true);
+    document.removeEventListener('click', handleClick, true);
+    document.removeEventListener('keydown', handleKeyDown, true);
+    document.removeEventListener('blur', handleBlur, true);
+    window.removeEventListener('scroll', handleScroll, true);
+    window.removeEventListener('message', handleMessage, true);
+    
+    document.querySelectorAll('.' + hoverClass).forEach(el => {
+      el.classList.remove(hoverClass);
+    });
+    document.querySelectorAll('.' + selectedClass).forEach(el => {
+      el.classList.remove(selectedClass);
+    });
+    
+    const styleEl = document.getElementById('webild-inspector-styles');
+    if (styleEl) styleEl.remove();
+    
+    hoveredElement = null;
+    selectedElement = null;
+  };
+  
+  window.parent.postMessage({ type: 'webild-editor-ready' }, '*');
+})();
+`;
+};
+
+export const getVisualEditScript = () => {
+    return visualEditorScript().replace(/`/g, '\\`').replace(/\$/g, '\\$');
+}
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..07bb88e
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,42 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "noImplicitAny": false,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}
diff --git a/tsconfig.tsbuildinfo b/tsconfig.tsbuildinfo
new file mode 100644
index 0000000..fb16277
--- /dev/null
+++ b/tsconfig.tsbuildinfo
@@ -0,0 +1 @@
+{"fileNames":["./node_modules/typescript/lib/lib.es5.d.ts","./node_modules/typescript/lib/lib.es2015.d.ts","./node_modules/typescript/lib/lib.es2016.d.ts","./node_modules/typescript/lib/lib.es2017.d.ts","./node_modules/typescript/lib/lib.es2018.d.ts","./node_modules/typescript/lib/lib.es2019.d.ts","./node_modules/typescript/lib/lib.es2020.d.ts","./node_modules/typescript/lib/lib.es2021.d.ts","./node_modules/typescript/lib/lib.es2022.d.ts","./node_modules/typescript/lib/lib.es2023.d.ts","./node_modules/typescript/lib/lib.es2024.d.ts","./node_modules/typescript/lib/lib.esnext.d.ts","./node_modules/typescript/lib/lib.dom.d.ts","./node_modules/typescript/lib/lib.dom.iterable.d.ts","./node_modules/typescript/lib/lib.es2015.core.d.ts","./node_modules/typescript/lib/lib.es2015.collection.d.ts","./node_modules/typescript/lib/lib.es2015.generator.d.ts","./node_modules/typescript/lib/lib.es2015.iterable.d.ts","./node_modules/typescript/lib/lib.es2015.promise.d.ts","./node_modules/typescript/lib/lib.es2015.proxy.d.ts","./node_modules/typescript/lib/lib.es2015.reflect.d.ts","./node_modules/typescript/lib/lib.es2015.symbol.d.ts","./node_modules/typescript/lib/lib.es2015.symbol.wellknown.d.ts","./node_modules/typescript/lib/lib.es2016.array.include.d.ts","./node_modules/typescript/lib/lib.es2016.intl.d.ts","./node_modules/typescript/lib/lib.es2017.arraybuffer.d.ts","./node_modules/typescript/lib/lib.es2017.date.d.ts","./node_modules/typescript/lib/lib.es2017.object.d.ts","./node_modules/typescript/lib/lib.es2017.sharedmemory.d.ts","./node_modules/typescript/lib/lib.es2017.string.d.ts","./node_modules/typescript/lib/lib.es2017.intl.d.ts","./node_modules/typescript/lib/lib.es2017.typedarrays.d.ts","./node_modules/typescript/lib/lib.es2018.asyncgenerator.d.ts","./node_modules/typescript/lib/lib.es2018.asynciterable.d.ts","./node_modules/typescript/lib/lib.es2018.intl.d.ts","./node_modules/typescript/lib/lib.es2018.promise.d.ts","./node_modules/typescript/lib/lib.es2018.regexp.d.ts","./node_modules/typescript/lib/lib.es2019.array.d.ts","./node_modules/typescript/lib/lib.es2019.object.d.ts","./node_modules/typescript/lib/lib.es2019.string.d.ts","./node_modules/typescript/lib/lib.es2019.symbol.d.ts","./node_modules/typescript/lib/lib.es2019.intl.d.ts","./node_modules/typescript/lib/lib.es2020.bigint.d.ts","./node_modules/typescript/lib/lib.es2020.date.d.ts","./node_modules/typescript/lib/lib.es2020.promise.d.ts","./node_modules/typescript/lib/lib.es2020.sharedmemory.d.ts","./node_modules/typescript/lib/lib.es2020.string.d.ts","./node_modules/typescript/lib/lib.es2020.symbol.wellknown.d.ts","./node_modules/typescript/lib/lib.es2020.intl.d.ts","./node_modules/typescript/lib/lib.es2020.number.d.ts","./node_modules/typescript/lib/lib.es2021.promise.d.ts","./node_modules/typescript/lib/lib.es2021.string.d.ts","./node_modules/typescript/lib/lib.es2021.weakref.d.ts","./node_modules/typescript/lib/lib.es2021.intl.d.ts","./node_modules/typescript/lib/lib.es2022.array.d.ts","./node_modules/typescript/lib/lib.es2022.error.d.ts","./node_modules/typescript/lib/lib.es2022.intl.d.ts","./node_modules/typescript/lib/lib.es2022.object.d.ts","./node_modules/typescript/lib/lib.es2022.string.d.ts","./node_modules/typescript/lib/lib.es2022.regexp.d.ts","./node_modules/typescript/lib/lib.es2023.array.d.ts","./node_modules/typescript/lib/lib.es2023.collection.d.ts","./node_modules/typescript/lib/lib.es2023.intl.d.ts","./node_modules/typescript/lib/lib.es2024.arraybuffer.d.ts","./node_modules/typescript/lib/lib.es2024.collection.d.ts","./node_modules/typescript/lib/lib.es2024.object.d.ts","./node_modules/typescript/lib/lib.es2024.promise.d.ts","./node_modules/typescript/lib/lib.es2024.regexp.d.ts","./node_modules/typescript/lib/lib.es2024.sharedmemory.d.ts","./node_modules/typescript/lib/lib.es2024.string.d.ts","./node_modules/typescript/lib/lib.esnext.array.d.ts","./node_modules/typescript/lib/lib.esnext.collection.d.ts","./node_modules/typescript/lib/lib.esnext.intl.d.ts","./node_modules/typescript/lib/lib.esnext.disposable.d.ts","./node_modules/typescript/lib/lib.esnext.promise.d.ts","./node_modules/typescript/lib/lib.esnext.decorators.d.ts","./node_modules/typescript/lib/lib.esnext.iterator.d.ts","./node_modules/typescript/lib/lib.esnext.float16.d.ts","./node_modules/typescript/lib/lib.esnext.error.d.ts","./node_modules/typescript/lib/lib.esnext.sharedmemory.d.ts","./node_modules/typescript/lib/lib.decorators.d.ts","./node_modules/typescript/lib/lib.decorators.legacy.d.ts","./node_modules/@types/react/global.d.ts","./node_modules/csstype/index.d.ts","./node_modules/@types/react/index.d.ts","./node_modules/next/dist/styled-jsx/types/css.d.ts","./node_modules/next/dist/styled-jsx/types/macro.d.ts","./node_modules/next/dist/styled-jsx/types/style.d.ts","./node_modules/next/dist/styled-jsx/types/global.d.ts","./node_modules/next/dist/styled-jsx/types/index.d.ts","./node_modules/next/dist/server/get-page-files.d.ts","./node_modules/@types/node/compatibility/disposable.d.ts","./node_modules/@types/node/compatibility/indexable.d.ts","./node_modules/@types/node/compatibility/iterators.d.ts","./node_modules/@types/node/compatibility/index.d.ts","./node_modules/@types/node/globals.typedarray.d.ts","./node_modules/@types/node/buffer.buffer.d.ts","./node_modules/@types/node/globals.d.ts","./node_modules/@types/node/web-globals/abortcontroller.d.ts","./node_modules/@types/node/web-globals/domexception.d.ts","./node_modules/@types/node/web-globals/events.d.ts","./node_modules/buffer/index.d.ts","./node_modules/undici-types/header.d.ts","./node_modules/undici-types/readable.d.ts","./node_modules/undici-types/file.d.ts","./node_modules/undici-types/fetch.d.ts","./node_modules/undici-types/formdata.d.ts","./node_modules/undici-types/connector.d.ts","./node_modules/undici-types/client.d.ts","./node_modules/undici-types/errors.d.ts","./node_modules/undici-types/dispatcher.d.ts","./node_modules/undici-types/global-dispatcher.d.ts","./node_modules/undici-types/global-origin.d.ts","./node_modules/undici-types/pool-stats.d.ts","./node_modules/undici-types/pool.d.ts","./node_modules/undici-types/handlers.d.ts","./node_modules/undici-types/balanced-pool.d.ts","./node_modules/undici-types/agent.d.ts","./node_modules/undici-types/mock-interceptor.d.ts","./node_modules/undici-types/mock-agent.d.ts","./node_modules/undici-types/mock-client.d.ts","./node_modules/undici-types/mock-pool.d.ts","./node_modules/undici-types/mock-errors.d.ts","./node_modules/undici-types/proxy-agent.d.ts","./node_modules/undici-types/env-http-proxy-agent.d.ts","./node_modules/undici-types/retry-handler.d.ts","./node_modules/undici-types/retry-agent.d.ts","./node_modules/undici-types/api.d.ts","./node_modules/undici-types/interceptors.d.ts","./node_modules/undici-types/util.d.ts","./node_modules/undici-types/cookies.d.ts","./node_modules/undici-types/patch.d.ts","./node_modules/undici-types/websocket.d.ts","./node_modules/undici-types/eventsource.d.ts","./node_modules/undici-types/filereader.d.ts","./node_modules/undici-types/diagnostics-channel.d.ts","./node_modules/undici-types/content-type.d.ts","./node_modules/undici-types/cache.d.ts","./node_modules/undici-types/index.d.ts","./node_modules/@types/node/web-globals/fetch.d.ts","./node_modules/@types/node/assert.d.ts","./node_modules/@types/node/assert/strict.d.ts","./node_modules/@types/node/async_hooks.d.ts","./node_modules/@types/node/buffer.d.ts","./node_modules/@types/node/child_process.d.ts","./node_modules/@types/node/cluster.d.ts","./node_modules/@types/node/console.d.ts","./node_modules/@types/node/constants.d.ts","./node_modules/@types/node/crypto.d.ts","./node_modules/@types/node/dgram.d.ts","./node_modules/@types/node/diagnostics_channel.d.ts","./node_modules/@types/node/dns.d.ts","./node_modules/@types/node/dns/promises.d.ts","./node_modules/@types/node/domain.d.ts","./node_modules/@types/node/events.d.ts","./node_modules/@types/node/fs.d.ts","./node_modules/@types/node/fs/promises.d.ts","./node_modules/@types/node/http.d.ts","./node_modules/@types/node/http2.d.ts","./node_modules/@types/node/https.d.ts","./node_modules/@types/node/inspector.generated.d.ts","./node_modules/@types/node/module.d.ts","./node_modules/@types/node/net.d.ts","./node_modules/@types/node/os.d.ts","./node_modules/@types/node/path.d.ts","./node_modules/@types/node/perf_hooks.d.ts","./node_modules/@types/node/process.d.ts","./node_modules/@types/node/punycode.d.ts","./node_modules/@types/node/querystring.d.ts","./node_modules/@types/node/readline.d.ts","./node_modules/@types/node/readline/promises.d.ts","./node_modules/@types/node/repl.d.ts","./node_modules/@types/node/sea.d.ts","./node_modules/@types/node/stream.d.ts","./node_modules/@types/node/stream/promises.d.ts","./node_modules/@types/node/stream/consumers.d.ts","./node_modules/@types/node/stream/web.d.ts","./node_modules/@types/node/string_decoder.d.ts","./node_modules/@types/node/test.d.ts","./node_modules/@types/node/timers.d.ts","./node_modules/@types/node/timers/promises.d.ts","./node_modules/@types/node/tls.d.ts","./node_modules/@types/node/trace_events.d.ts","./node_modules/@types/node/tty.d.ts","./node_modules/@types/node/url.d.ts","./node_modules/@types/node/util.d.ts","./node_modules/@types/node/v8.d.ts","./node_modules/@types/node/vm.d.ts","./node_modules/@types/node/wasi.d.ts","./node_modules/@types/node/worker_threads.d.ts","./node_modules/@types/node/zlib.d.ts","./node_modules/@types/node/index.d.ts","./node_modules/@types/react/canary.d.ts","./node_modules/@types/react/experimental.d.ts","./node_modules/@types/react-dom/index.d.ts","./node_modules/@types/react-dom/canary.d.ts","./node_modules/@types/react-dom/experimental.d.ts","./node_modules/next/dist/lib/fallback.d.ts","./node_modules/next/dist/compiled/webpack/webpack.d.ts","./node_modules/next/dist/shared/lib/modern-browserslist-target.d.ts","./node_modules/next/dist/shared/lib/entry-constants.d.ts","./node_modules/next/dist/shared/lib/constants.d.ts","./node_modules/next/dist/server/config.d.ts","./node_modules/next/dist/lib/load-custom-routes.d.ts","./node_modules/next/dist/shared/lib/image-config.d.ts","./node_modules/next/dist/build/webpack/plugins/subresource-integrity-plugin.d.ts","./node_modules/next/dist/server/body-streams.d.ts","./node_modules/next/dist/server/lib/cache-control.d.ts","./node_modules/next/dist/lib/setup-exception-listeners.d.ts","./node_modules/next/dist/lib/worker.d.ts","./node_modules/next/dist/lib/constants.d.ts","./node_modules/next/dist/lib/bundler.d.ts","./node_modules/next/dist/client/components/app-router-headers.d.ts","./node_modules/next/dist/client/components/router-reducer/router-reducer-types.d.ts","./node_modules/next/dist/client/flight-data-helpers.d.ts","./node_modules/next/dist/client/components/segment-cache/cache-key.d.ts","./node_modules/next/dist/client/components/router-reducer/fetch-server-response.d.ts","./node_modules/next/dist/shared/lib/app-router-types.d.ts","./node_modules/next/dist/build/static-paths/types.d.ts","./node_modules/next/dist/build/rendering-mode.d.ts","./node_modules/next/dist/server/lib/router-utils/build-prefetch-segment-data-route.d.ts","./node_modules/next/dist/server/require-hook.d.ts","./node_modules/next/dist/server/lib/experimental/ppr.d.ts","./node_modules/next/dist/lib/page-types.d.ts","./node_modules/next/dist/build/segment-config/app/app-segment-config.d.ts","./node_modules/next/dist/build/segment-config/pages/pages-segment-config.d.ts","./node_modules/next/dist/build/analysis/get-page-static-info.d.ts","./node_modules/next/dist/build/webpack/loaders/get-module-build-info.d.ts","./node_modules/next/dist/build/webpack/plugins/middleware-plugin.d.ts","./node_modules/next/dist/server/node-polyfill-crypto.d.ts","./node_modules/next/dist/server/node-environment-baseline.d.ts","./node_modules/next/dist/server/node-environment-extensions/error-inspect.d.ts","./node_modules/next/dist/server/node-environment-extensions/console-file.d.ts","./node_modules/next/dist/server/node-environment-extensions/console-exit.d.ts","./node_modules/next/dist/server/node-environment-extensions/console-dim.external.d.ts","./node_modules/next/dist/server/node-environment-extensions/unhandled-rejection.d.ts","./node_modules/next/dist/server/node-environment-extensions/random.d.ts","./node_modules/next/dist/server/node-environment-extensions/date.d.ts","./node_modules/next/dist/server/node-environment-extensions/web-crypto.d.ts","./node_modules/next/dist/server/node-environment-extensions/node-crypto.d.ts","./node_modules/next/dist/server/node-environment.d.ts","./node_modules/next/dist/build/page-extensions-type.d.ts","./node_modules/next/dist/server/route-kind.d.ts","./node_modules/next/dist/server/route-definitions/route-definition.d.ts","./node_modules/next/dist/server/route-definitions/app-page-route-definition.d.ts","./node_modules/next/dist/server/lib/cache-handlers/types.d.ts","./node_modules/next/dist/server/response-cache/types.d.ts","./node_modules/next/dist/server/resume-data-cache/cache-store.d.ts","./node_modules/next/dist/server/resume-data-cache/resume-data-cache.d.ts","./node_modules/next/dist/server/render-result.d.ts","./node_modules/next/dist/build/webpack/plugins/flight-manifest-plugin.d.ts","./node_modules/next/dist/server/instrumentation/types.d.ts","./node_modules/next/dist/lib/coalesced-function.d.ts","./node_modules/next/dist/shared/lib/router/utils/middleware-route-matcher.d.ts","./node_modules/next/dist/server/lib/router-utils/types.d.ts","./node_modules/next/dist/trace/types.d.ts","./node_modules/next/dist/trace/trace.d.ts","./node_modules/next/dist/trace/shared.d.ts","./node_modules/next/dist/trace/index.d.ts","./node_modules/next/dist/build/load-jsconfig.d.ts","./node_modules/@next/env/dist/index.d.ts","./node_modules/next/dist/build/webpack/plugins/telemetry-plugin/use-cache-tracker-utils.d.ts","./node_modules/next/dist/build/webpack/plugins/telemetry-plugin/telemetry-plugin.d.ts","./node_modules/next/dist/telemetry/storage.d.ts","./node_modules/next/dist/build/build-context.d.ts","./node_modules/next/dist/shared/lib/bloom-filter.d.ts","./node_modules/next/dist/build/webpack-config.d.ts","./node_modules/next/dist/build/swc/generated-native.d.ts","./node_modules/next/dist/build/swc/types.d.ts","./node_modules/next/dist/server/dev/parse-version-info.d.ts","./node_modules/next/dist/next-devtools/shared/types.d.ts","./node_modules/next/dist/server/dev/dev-indicator-server-state.d.ts","./node_modules/next/dist/next-devtools/dev-overlay/cache-indicator.d.ts","./node_modules/next/dist/server/lib/parse-stack.d.ts","./node_modules/next/dist/next-devtools/server/shared.d.ts","./node_modules/next/dist/next-devtools/shared/stack-frame.d.ts","./node_modules/next/dist/next-devtools/dev-overlay/utils/get-error-by-type.d.ts","./node_modules/@types/react/jsx-runtime.d.ts","./node_modules/next/dist/next-devtools/dev-overlay/container/runtime-error/render-error.d.ts","./node_modules/next/dist/next-devtools/dev-overlay/shared.d.ts","./node_modules/next/dist/server/dev/debug-channel.d.ts","./node_modules/next/dist/server/dev/hot-reloader-types.d.ts","./node_modules/next/dist/server/lib/i18n-provider.d.ts","./node_modules/next/dist/server/web/next-url.d.ts","./node_modules/next/dist/compiled/@edge-runtime/cookies/index.d.ts","./node_modules/next/dist/server/web/spec-extension/cookies.d.ts","./node_modules/next/dist/server/web/spec-extension/request.d.ts","./node_modules/next/dist/server/after/builtin-request-context.d.ts","./node_modules/next/dist/server/web/spec-extension/fetch-event.d.ts","./node_modules/next/dist/server/web/spec-extension/response.d.ts","./node_modules/next/dist/build/segment-config/middleware/middleware-config.d.ts","./node_modules/next/dist/server/web/types.d.ts","./node_modules/next/dist/build/webpack/plugins/pages-manifest-plugin.d.ts","./node_modules/next/dist/shared/lib/router/utils/parse-url.d.ts","./node_modules/next/dist/server/base-http/node.d.ts","./node_modules/next/dist/build/webpack/plugins/next-font-manifest-plugin.d.ts","./node_modules/next/dist/server/route-definitions/locale-route-definition.d.ts","./node_modules/next/dist/server/route-definitions/pages-route-definition.d.ts","./node_modules/next/dist/shared/lib/mitt.d.ts","./node_modules/next/dist/client/with-router.d.ts","./node_modules/next/dist/client/router.d.ts","./node_modules/next/dist/client/route-loader.d.ts","./node_modules/next/dist/client/page-loader.d.ts","./node_modules/next/dist/shared/lib/router/router.d.ts","./node_modules/next/dist/shared/lib/router-context.shared-runtime.d.ts","./node_modules/next/dist/shared/lib/loadable-context.shared-runtime.d.ts","./node_modules/next/dist/shared/lib/loadable.shared-runtime.d.ts","./node_modules/next/dist/shared/lib/image-config-context.shared-runtime.d.ts","./node_modules/next/dist/shared/lib/hooks-client-context.shared-runtime.d.ts","./node_modules/next/dist/shared/lib/head-manager-context.shared-runtime.d.ts","./node_modules/next/dist/shared/lib/app-router-context.shared-runtime.d.ts","./node_modules/next/dist/shared/lib/server-inserted-html.shared-runtime.d.ts","./node_modules/next/dist/server/route-modules/pages/vendored/contexts/entrypoints.d.ts","./node_modules/next/dist/server/route-modules/pages/module.compiled.d.ts","./node_modules/next/dist/build/templates/pages.d.ts","./node_modules/next/dist/server/route-modules/pages/module.d.ts","./node_modules/next/dist/shared/lib/deep-readonly.d.ts","./node_modules/next/dist/next-devtools/userspace/pages/pages-dev-overlay-setup.d.ts","./node_modules/next/dist/server/render.d.ts","./node_modules/next/dist/server/response-cache/index.d.ts","./node_modules/next/dist/server/route-definitions/pages-api-route-definition.d.ts","./node_modules/next/dist/server/route-matches/pages-api-route-match.d.ts","./node_modules/next/dist/server/route-matchers/route-matcher.d.ts","./node_modules/next/dist/server/route-matcher-providers/route-matcher-provider.d.ts","./node_modules/next/dist/server/route-matcher-managers/route-matcher-manager.d.ts","./node_modules/next/dist/server/normalizers/normalizer.d.ts","./node_modules/next/dist/server/normalizers/locale-route-normalizer.d.ts","./node_modules/next/dist/server/normalizers/request/pathname-normalizer.d.ts","./node_modules/next/dist/server/normalizers/request/suffix.d.ts","./node_modules/next/dist/server/normalizers/request/rsc.d.ts","./node_modules/next/dist/server/normalizers/request/prefetch-rsc.d.ts","./node_modules/next/dist/server/normalizers/request/next-data.d.ts","./node_modules/next/dist/server/normalizers/request/segment-prefix-rsc.d.ts","./node_modules/next/dist/server/base-server.d.ts","./node_modules/next/dist/server/lib/async-callback-set.d.ts","./node_modules/next/dist/shared/lib/router/utils/route-regex.d.ts","./node_modules/next/dist/shared/lib/router/utils/route-matcher.d.ts","./node_modules/sharp/lib/index.d.ts","./node_modules/next/dist/server/image-optimizer.d.ts","./node_modules/next/dist/server/next-server.d.ts","./node_modules/next/dist/server/lib/types.d.ts","./node_modules/next/dist/server/lib/lru-cache.d.ts","./node_modules/next/dist/server/lib/dev-bundler-service.d.ts","./node_modules/next/dist/server/use-cache/cache-life.d.ts","./node_modules/next/dist/server/dev/static-paths-worker.d.ts","./node_modules/next/dist/server/dev/next-dev-server.d.ts","./node_modules/next/dist/server/next.d.ts","./node_modules/next/dist/server/lib/render-server.d.ts","./node_modules/next/dist/server/lib/router-server.d.ts","./node_modules/next/dist/shared/lib/router/utils/path-match.d.ts","./node_modules/next/dist/server/lib/router-utils/filesystem.d.ts","./node_modules/next/dist/server/lib/router-utils/setup-dev-bundler.d.ts","./node_modules/next/dist/server/lib/router-utils/router-server-context.d.ts","./node_modules/next/dist/server/route-modules/route-module.d.ts","./node_modules/next/dist/server/load-components.d.ts","./node_modules/next/dist/server/web/adapter.d.ts","./node_modules/next/dist/server/app-render/types.d.ts","./node_modules/next/dist/build/webpack/loaders/metadata/types.d.ts","./node_modules/next/dist/build/webpack/loaders/next-app-loader/index.d.ts","./node_modules/next/dist/server/lib/app-dir-module.d.ts","./node_modules/next/dist/server/web/spec-extension/adapters/request-cookies.d.ts","./node_modules/next/dist/server/async-storage/draft-mode-provider.d.ts","./node_modules/next/dist/server/web/spec-extension/adapters/headers.d.ts","./node_modules/next/dist/server/app-render/cache-signal.d.ts","./node_modules/next/dist/server/app-render/dynamic-rendering.d.ts","./node_modules/next/dist/server/request/fallback-params.d.ts","./node_modules/next/dist/server/app-render/work-unit-async-storage-instance.d.ts","./node_modules/next/dist/server/lib/lazy-result.d.ts","./node_modules/next/dist/server/lib/implicit-tags.d.ts","./node_modules/next/dist/server/app-render/staged-rendering.d.ts","./node_modules/next/dist/server/app-render/work-unit-async-storage.external.d.ts","./node_modules/next/dist/shared/lib/router/utils/parse-relative-url.d.ts","./node_modules/next/dist/server/app-render/app-render.d.ts","./node_modules/next/dist/server/route-modules/app-page/vendored/contexts/entrypoints.d.ts","./node_modules/next/dist/client/components/error-boundary.d.ts","./node_modules/next/dist/client/components/layout-router.d.ts","./node_modules/next/dist/client/components/render-from-template-context.d.ts","./node_modules/next/dist/server/app-render/action-async-storage-instance.d.ts","./node_modules/next/dist/server/app-render/action-async-storage.external.d.ts","./node_modules/next/dist/client/components/client-page.d.ts","./node_modules/next/dist/client/components/client-segment.d.ts","./node_modules/next/dist/server/request/search-params.d.ts","./node_modules/next/dist/client/components/hooks-server-context.d.ts","./node_modules/next/dist/client/components/http-access-fallback/error-boundary.d.ts","./node_modules/next/dist/lib/metadata/types/alternative-urls-types.d.ts","./node_modules/next/dist/lib/metadata/types/extra-types.d.ts","./node_modules/next/dist/lib/metadata/types/metadata-types.d.ts","./node_modules/next/dist/lib/metadata/types/manifest-types.d.ts","./node_modules/next/dist/lib/metadata/types/opengraph-types.d.ts","./node_modules/next/dist/lib/metadata/types/twitter-types.d.ts","./node_modules/next/dist/lib/metadata/types/metadata-interface.d.ts","./node_modules/next/dist/lib/metadata/types/resolvers.d.ts","./node_modules/next/dist/lib/metadata/types/icons.d.ts","./node_modules/next/dist/lib/metadata/resolve-metadata.d.ts","./node_modules/next/dist/lib/metadata/metadata.d.ts","./node_modules/next/dist/lib/framework/boundary-components.d.ts","./node_modules/next/dist/server/app-render/rsc/preloads.d.ts","./node_modules/next/dist/server/app-render/rsc/postpone.d.ts","./node_modules/next/dist/server/app-render/rsc/taint.d.ts","./node_modules/next/dist/shared/lib/segment-cache/segment-value-encoding.d.ts","./node_modules/next/dist/server/app-render/collect-segment-data.d.ts","./node_modules/next/dist/next-devtools/userspace/app/segment-explorer-node.d.ts","./node_modules/next/dist/server/app-render/entry-base.d.ts","./node_modules/next/dist/build/templates/app-page.d.ts","./node_modules/@types/react/jsx-dev-runtime.d.ts","./node_modules/@types/react/compiler-runtime.d.ts","./node_modules/next/dist/server/route-modules/app-page/vendored/rsc/entrypoints.d.ts","./node_modules/@types/react-dom/client.d.ts","./node_modules/@types/react-dom/server.d.ts","./node_modules/next/dist/server/route-modules/app-page/vendored/ssr/entrypoints.d.ts","./node_modules/next/dist/server/route-modules/app-page/module.d.ts","./node_modules/next/dist/server/route-modules/app-page/module.compiled.d.ts","./node_modules/next/dist/server/route-definitions/app-route-route-definition.d.ts","./node_modules/next/dist/server/async-storage/work-store.d.ts","./node_modules/next/dist/server/web/http.d.ts","./node_modules/next/dist/server/route-modules/app-route/shared-modules.d.ts","./node_modules/next/dist/client/components/redirect-status-code.d.ts","./node_modules/next/dist/client/components/redirect-error.d.ts","./node_modules/next/dist/build/templates/app-route.d.ts","./node_modules/next/dist/server/route-modules/app-route/module.d.ts","./node_modules/next/dist/server/route-modules/app-route/module.compiled.d.ts","./node_modules/next/dist/build/segment-config/app/app-segments.d.ts","./node_modules/next/dist/build/utils.d.ts","./node_modules/next/dist/build/turborepo-access-trace/types.d.ts","./node_modules/next/dist/build/turborepo-access-trace/result.d.ts","./node_modules/next/dist/build/turborepo-access-trace/helpers.d.ts","./node_modules/next/dist/build/turborepo-access-trace/index.d.ts","./node_modules/next/dist/export/routes/types.d.ts","./node_modules/next/dist/export/types.d.ts","./node_modules/next/dist/export/worker.d.ts","./node_modules/next/dist/build/worker.d.ts","./node_modules/next/dist/build/index.d.ts","./node_modules/next/dist/server/lib/incremental-cache/index.d.ts","./node_modules/next/dist/server/after/after.d.ts","./node_modules/next/dist/server/after/after-context.d.ts","./node_modules/next/dist/server/app-render/work-async-storage-instance.d.ts","./node_modules/next/dist/server/app-render/work-async-storage.external.d.ts","./node_modules/next/dist/server/request/params.d.ts","./node_modules/next/dist/server/route-matches/route-match.d.ts","./node_modules/next/dist/server/request-meta.d.ts","./node_modules/next/dist/cli/next-test.d.ts","./node_modules/next/dist/server/config-shared.d.ts","./node_modules/next/dist/server/base-http/index.d.ts","./node_modules/next/dist/server/api-utils/index.d.ts","./node_modules/next/dist/build/adapter/build-complete.d.ts","./node_modules/next/dist/types.d.ts","./node_modules/next/dist/shared/lib/html-context.shared-runtime.d.ts","./node_modules/next/dist/shared/lib/utils.d.ts","./node_modules/next/dist/pages/_app.d.ts","./node_modules/next/app.d.ts","./node_modules/next/dist/server/web/spec-extension/unstable-cache.d.ts","./node_modules/next/dist/server/web/spec-extension/revalidate.d.ts","./node_modules/next/dist/server/web/spec-extension/unstable-no-store.d.ts","./node_modules/next/dist/server/use-cache/cache-tag.d.ts","./node_modules/next/cache.d.ts","./node_modules/next/dist/pages/_document.d.ts","./node_modules/next/document.d.ts","./node_modules/next/dist/shared/lib/dynamic.d.ts","./node_modules/next/dynamic.d.ts","./node_modules/next/dist/pages/_error.d.ts","./node_modules/next/error.d.ts","./node_modules/next/dist/shared/lib/head.d.ts","./node_modules/next/head.d.ts","./node_modules/next/dist/server/request/cookies.d.ts","./node_modules/next/dist/server/request/headers.d.ts","./node_modules/next/dist/server/request/draft-mode.d.ts","./node_modules/next/headers.d.ts","./node_modules/next/dist/shared/lib/get-img-props.d.ts","./node_modules/next/dist/client/image-component.d.ts","./node_modules/next/dist/shared/lib/image-external.d.ts","./node_modules/next/image.d.ts","./node_modules/next/dist/client/link.d.ts","./node_modules/next/link.d.ts","./node_modules/next/dist/client/components/readonly-url-search-params.d.ts","./node_modules/next/dist/client/components/unrecognized-action-error.d.ts","./node_modules/next/dist/client/components/redirect.d.ts","./node_modules/next/dist/client/components/not-found.d.ts","./node_modules/next/dist/client/components/forbidden.d.ts","./node_modules/next/dist/client/components/unauthorized.d.ts","./node_modules/next/dist/client/components/unstable-rethrow.server.d.ts","./node_modules/next/dist/client/components/unstable-rethrow.d.ts","./node_modules/next/dist/client/components/navigation.react-server.d.ts","./node_modules/next/dist/client/components/navigation.d.ts","./node_modules/next/navigation.d.ts","./node_modules/next/router.d.ts","./node_modules/next/dist/client/script.d.ts","./node_modules/next/script.d.ts","./node_modules/next/dist/server/web/spec-extension/user-agent.d.ts","./node_modules/next/dist/compiled/@edge-runtime/primitives/url.d.ts","./node_modules/next/dist/server/web/spec-extension/image-response.d.ts","./node_modules/next/dist/compiled/@vercel/og/satori/index.d.ts","./node_modules/next/dist/compiled/@vercel/og/emoji/index.d.ts","./node_modules/next/dist/compiled/@vercel/og/types.d.ts","./node_modules/next/dist/server/after/index.d.ts","./node_modules/next/dist/server/request/connection.d.ts","./node_modules/next/server.d.ts","./node_modules/next/types/global.d.ts","./node_modules/next/types/compiled.d.ts","./node_modules/next/types.d.ts","./node_modules/next/index.d.ts","./node_modules/next/image-types/global.d.ts","./.next/types/routes.d.ts","./next-env.d.ts","./next.config.ts","./node_modules/lucide-react/dist/lucide-react.d.ts","./src/app/components/example4/mockdata.ts","./src/components/bento/bentolinechart/utils.ts","./src/components/button/types.ts","./node_modules/lenis/dist/lenis.d.ts","./node_modules/lenis/dist/lenis-react.d.ts","./src/components/button/usebuttonclick.ts","./src/components/button/usecharanimation.ts","./src/components/button/buttondirectionalhover/usedirectionalhover.ts","./node_modules/gsap/types/animation.d.ts","./node_modules/gsap/types/custom-bounce.d.ts","./node_modules/gsap/types/custom-ease.d.ts","./node_modules/gsap/types/custom-wiggle.d.ts","./node_modules/gsap/types/css-plugin.d.ts","./node_modules/gsap/types/css-rule-plugin.d.ts","./node_modules/gsap/types/draggable.d.ts","./node_modules/gsap/types/draw-svg-plugin.d.ts","./node_modules/gsap/types/ease.d.ts","./node_modules/gsap/types/easel-plugin.d.ts","./node_modules/gsap/types/flip.d.ts","./node_modules/gsap/types/gs-dev-tools.d.ts","./node_modules/gsap/types/gsap-plugins.d.ts","./node_modules/gsap/types/gsap-utils.d.ts","./node_modules/gsap/types/inertia-plugin.d.ts","./node_modules/gsap/types/morph-svg-plugin.d.ts","./node_modules/gsap/types/motion-path-plugin.d.ts","./node_modules/gsap/types/motion-path-helper.d.ts","./node_modules/gsap/types/observer.d.ts","./node_modules/gsap/types/physics-2d-plugin.d.ts","./node_modules/gsap/types/physics-props-plugin.d.ts","./node_modules/gsap/types/pixi-plugin.d.ts","./node_modules/gsap/types/scramble-text-plugin.d.ts","./node_modules/gsap/types/scroll-to-plugin.d.ts","./node_modules/gsap/types/scroll-trigger.d.ts","./node_modules/gsap/types/scroll-smoother.d.ts","./node_modules/gsap/types/split-text.d.ts","./node_modules/gsap/types/text-plugin.d.ts","./node_modules/gsap/types/timeline.d.ts","./node_modules/gsap/types/tween.d.ts","./node_modules/gsap/types/utils/velocity-tracker.d.ts","./node_modules/gsap/types/gsap-core.d.ts","./node_modules/gsap/types/index.d.ts","./src/components/button/buttonelasticeffect/useelasticeffect.ts","./src/components/button/buttonhovermagnetic/usemagneticeffect.ts","./src/types/button.ts","./src/components/text/types.ts","./src/providers/themeprovider/config/types.ts","./src/providers/themeprovider/config/borderradius.ts","./src/providers/themeprovider/config/contentwidth.ts","./src/providers/themeprovider/config/textsizing.ts","./src/providers/themeprovider/config/basevw.ts","./node_modules/clsx/clsx.d.mts","./node_modules/tailwind-merge/dist/types.d.ts","./src/lib/utils.ts","./src/components/background/circlegradientbackground.tsx","./src/components/background/aurorabackground.tsx","./src/components/background/floatinggradientbackground/floatinggradientbackground.tsx","./src/components/background/noisebackground.tsx","./src/components/background/noisediagonalgradientbackground.tsx","./node_modules/@types/three/src/constants.d.ts","./node_modules/@types/three/src/core/layers.d.ts","./node_modules/@types/three/src/math/vector2.d.ts","./node_modules/@types/three/src/math/matrix3.d.ts","./node_modules/@types/three/src/core/bufferattribute.d.ts","./node_modules/@types/three/src/core/interleavedbuffer.d.ts","./node_modules/@types/three/src/core/interleavedbufferattribute.d.ts","./node_modules/@types/three/src/math/quaternion.d.ts","./node_modules/@types/three/src/math/euler.d.ts","./node_modules/@types/three/src/math/matrix4.d.ts","./node_modules/@types/three/src/math/vector4.d.ts","./node_modules/@types/three/src/cameras/camera.d.ts","./node_modules/@types/three/src/math/colormanagement.d.ts","./node_modules/@types/three/src/math/color.d.ts","./node_modules/@types/three/src/math/cylindrical.d.ts","./node_modules/@types/three/src/math/spherical.d.ts","./node_modules/@types/three/src/math/vector3.d.ts","./node_modules/@types/three/src/objects/bone.d.ts","./node_modules/@types/three/src/math/interpolant.d.ts","./node_modules/@types/three/src/math/interpolants/cubicinterpolant.d.ts","./node_modules/@types/three/src/math/interpolants/discreteinterpolant.d.ts","./node_modules/@types/three/src/math/interpolants/linearinterpolant.d.ts","./node_modules/@types/three/src/animation/keyframetrack.d.ts","./node_modules/@types/three/src/animation/animationclip.d.ts","./node_modules/@types/three/src/extras/core/curve.d.ts","./node_modules/@types/three/src/extras/core/curvepath.d.ts","./node_modules/@types/three/src/extras/core/path.d.ts","./node_modules/@types/three/src/extras/core/shape.d.ts","./node_modules/@types/three/src/math/line3.d.ts","./node_modules/@types/three/src/math/sphere.d.ts","./node_modules/@types/three/src/math/plane.d.ts","./node_modules/@types/three/src/math/triangle.d.ts","./node_modules/@types/three/src/math/box3.d.ts","./node_modules/@types/three/src/renderers/common/storagebufferattribute.d.ts","./node_modules/@types/three/src/renderers/common/indirectstoragebufferattribute.d.ts","./node_modules/@types/three/src/core/eventdispatcher.d.ts","./node_modules/@types/three/src/core/glbufferattribute.d.ts","./node_modules/@types/three/src/core/buffergeometry.d.ts","./node_modules/@types/three/src/objects/group.d.ts","./node_modules/@types/three/src/textures/depthtexture.d.ts","./node_modules/@types/three/src/core/rendertarget.d.ts","./node_modules/@types/three/src/textures/compressedtexture.d.ts","./node_modules/@types/three/src/textures/cubetexture.d.ts","./node_modules/@types/three/src/textures/source.d.ts","./node_modules/@types/three/src/textures/texture.d.ts","./node_modules/@types/three/src/materials/linebasicmaterial.d.ts","./node_modules/@types/three/src/materials/linedashedmaterial.d.ts","./node_modules/@types/three/src/materials/meshbasicmaterial.d.ts","./node_modules/@types/three/src/materials/meshdepthmaterial.d.ts","./node_modules/@types/three/src/materials/meshdistancematerial.d.ts","./node_modules/@types/three/src/materials/meshlambertmaterial.d.ts","./node_modules/@types/three/src/materials/meshmatcapmaterial.d.ts","./node_modules/@types/three/src/materials/meshnormalmaterial.d.ts","./node_modules/@types/three/src/materials/meshphongmaterial.d.ts","./node_modules/@types/three/src/materials/meshstandardmaterial.d.ts","./node_modules/@types/three/src/materials/meshphysicalmaterial.d.ts","./node_modules/@types/three/src/materials/meshtoonmaterial.d.ts","./node_modules/@types/three/src/materials/pointsmaterial.d.ts","./node_modules/@types/three/src/core/uniform.d.ts","./node_modules/@types/three/src/core/uniformsgroup.d.ts","./node_modules/@types/three/src/renderers/shaders/uniformslib.d.ts","./node_modules/@types/three/src/materials/shadermaterial.d.ts","./node_modules/@types/three/src/materials/rawshadermaterial.d.ts","./node_modules/@types/three/src/materials/shadowmaterial.d.ts","./node_modules/@types/three/src/materials/spritematerial.d.ts","./node_modules/@types/three/src/materials/materials.d.ts","./node_modules/@types/three/src/objects/sprite.d.ts","./node_modules/@types/three/src/math/frustum.d.ts","./node_modules/@types/three/src/renderers/webglrendertarget.d.ts","./node_modules/@types/three/src/lights/lightshadow.d.ts","./node_modules/@types/three/src/lights/light.d.ts","./node_modules/@types/three/src/scenes/fog.d.ts","./node_modules/@types/three/src/scenes/fogexp2.d.ts","./node_modules/@types/three/src/scenes/scene.d.ts","./node_modules/@types/three/src/math/box2.d.ts","./node_modules/@types/three/src/renderers/webgl/webglcapabilities.d.ts","./node_modules/@types/three/src/renderers/webgl/webglextensions.d.ts","./node_modules/@types/three/src/renderers/webgl/webglproperties.d.ts","./node_modules/@types/three/src/renderers/webgl/webglstate.d.ts","./node_modules/@types/three/src/renderers/webgl/webglutils.d.ts","./node_modules/@types/three/src/renderers/webgl/webgltextures.d.ts","./node_modules/@types/three/src/renderers/webgl/webgluniforms.d.ts","./node_modules/@types/three/src/renderers/webgl/webglprogram.d.ts","./node_modules/@types/three/src/renderers/webgl/webglinfo.d.ts","./node_modules/@types/three/src/renderers/webgl/webglrenderlists.d.ts","./node_modules/@types/three/src/renderers/webgl/webglobjects.d.ts","./node_modules/@types/three/src/renderers/webgl/webglshadowmap.d.ts","./node_modules/@types/webxr/index.d.ts","./node_modules/@types/three/src/cameras/perspectivecamera.d.ts","./node_modules/@types/three/src/cameras/arraycamera.d.ts","./node_modules/@types/three/src/objects/mesh.d.ts","./node_modules/@webgpu/types/dist/index.d.ts","./node_modules/@types/three/src/textures/externaltexture.d.ts","./node_modules/@types/three/src/renderers/webxr/webxrcontroller.d.ts","./node_modules/@types/three/src/renderers/webxr/webxrmanager.d.ts","./node_modules/@types/three/src/renderers/webglrenderer.d.ts","./node_modules/@types/three/src/renderers/webgl/webglattributes.d.ts","./node_modules/@types/three/src/renderers/webgl/webglbindingstates.d.ts","./node_modules/@types/three/src/renderers/webgl/webglclipping.d.ts","./node_modules/@types/three/src/renderers/webgl/webglcubemaps.d.ts","./node_modules/@types/three/src/renderers/webgl/webgllights.d.ts","./node_modules/@types/three/src/renderers/webgl/webglprograms.d.ts","./node_modules/@types/three/src/materials/material.d.ts","./node_modules/@types/three/src/textures/datatexture.d.ts","./node_modules/@types/three/src/objects/skeleton.d.ts","./node_modules/@types/three/src/math/ray.d.ts","./node_modules/@types/three/src/core/raycaster.d.ts","./node_modules/@types/three/src/core/object3d.d.ts","./node_modules/@types/three/src/animation/animationobjectgroup.d.ts","./node_modules/@types/three/src/animation/animationmixer.d.ts","./node_modules/@types/three/src/animation/animationaction.d.ts","./node_modules/@types/three/src/animation/animationutils.d.ts","./node_modules/@types/three/src/animation/propertybinding.d.ts","./node_modules/@types/three/src/animation/propertymixer.d.ts","./node_modules/@types/three/src/animation/tracks/booleankeyframetrack.d.ts","./node_modules/@types/three/src/animation/tracks/colorkeyframetrack.d.ts","./node_modules/@types/three/src/animation/tracks/numberkeyframetrack.d.ts","./node_modules/@types/three/src/animation/tracks/quaternionkeyframetrack.d.ts","./node_modules/@types/three/src/animation/tracks/stringkeyframetrack.d.ts","./node_modules/@types/three/src/animation/tracks/vectorkeyframetrack.d.ts","./node_modules/@types/three/src/audio/audiocontext.d.ts","./node_modules/@types/three/src/audio/audiolistener.d.ts","./node_modules/@types/three/src/audio/audio.d.ts","./node_modules/@types/three/src/audio/audioanalyser.d.ts","./node_modules/@types/three/src/audio/positionalaudio.d.ts","./node_modules/@types/three/src/renderers/webglcuberendertarget.d.ts","./node_modules/@types/three/src/cameras/cubecamera.d.ts","./node_modules/@types/three/src/cameras/orthographiccamera.d.ts","./node_modules/@types/three/src/cameras/stereocamera.d.ts","./node_modules/@types/three/src/core/clock.d.ts","./node_modules/@types/three/src/core/instancedbufferattribute.d.ts","./node_modules/@types/three/src/core/instancedbuffergeometry.d.ts","./node_modules/@types/three/src/core/instancedinterleavedbuffer.d.ts","./node_modules/@types/three/src/core/rendertarget3d.d.ts","./node_modules/@types/three/src/core/timer.d.ts","./node_modules/@types/three/src/extras/controls.d.ts","./node_modules/@types/three/src/extras/core/shapepath.d.ts","./node_modules/@types/three/src/extras/curves/ellipsecurve.d.ts","./node_modules/@types/three/src/extras/curves/arccurve.d.ts","./node_modules/@types/three/src/extras/curves/catmullromcurve3.d.ts","./node_modules/@types/three/src/extras/curves/cubicbeziercurve.d.ts","./node_modules/@types/three/src/extras/curves/cubicbeziercurve3.d.ts","./node_modules/@types/three/src/extras/curves/linecurve.d.ts","./node_modules/@types/three/src/extras/curves/linecurve3.d.ts","./node_modules/@types/three/src/extras/curves/quadraticbeziercurve.d.ts","./node_modules/@types/three/src/extras/curves/quadraticbeziercurve3.d.ts","./node_modules/@types/three/src/extras/curves/splinecurve.d.ts","./node_modules/@types/three/src/extras/curves/curves.d.ts","./node_modules/@types/three/src/extras/datautils.d.ts","./node_modules/@types/three/src/extras/imageutils.d.ts","./node_modules/@types/three/src/extras/shapeutils.d.ts","./node_modules/@types/three/src/extras/textureutils.d.ts","./node_modules/@types/three/src/geometries/boxgeometry.d.ts","./node_modules/@types/three/src/geometries/capsulegeometry.d.ts","./node_modules/@types/three/src/geometries/circlegeometry.d.ts","./node_modules/@types/three/src/geometries/cylindergeometry.d.ts","./node_modules/@types/three/src/geometries/conegeometry.d.ts","./node_modules/@types/three/src/geometries/polyhedrongeometry.d.ts","./node_modules/@types/three/src/geometries/dodecahedrongeometry.d.ts","./node_modules/@types/three/src/geometries/edgesgeometry.d.ts","./node_modules/@types/three/src/geometries/extrudegeometry.d.ts","./node_modules/@types/three/src/geometries/icosahedrongeometry.d.ts","./node_modules/@types/three/src/geometries/lathegeometry.d.ts","./node_modules/@types/three/src/geometries/octahedrongeometry.d.ts","./node_modules/@types/three/src/geometries/planegeometry.d.ts","./node_modules/@types/three/src/geometries/ringgeometry.d.ts","./node_modules/@types/three/src/geometries/shapegeometry.d.ts","./node_modules/@types/three/src/geometries/spheregeometry.d.ts","./node_modules/@types/three/src/geometries/tetrahedrongeometry.d.ts","./node_modules/@types/three/src/geometries/torusgeometry.d.ts","./node_modules/@types/three/src/geometries/torusknotgeometry.d.ts","./node_modules/@types/three/src/geometries/tubegeometry.d.ts","./node_modules/@types/three/src/geometries/wireframegeometry.d.ts","./node_modules/@types/three/src/geometries/geometries.d.ts","./node_modules/@types/three/src/objects/line.d.ts","./node_modules/@types/three/src/helpers/arrowhelper.d.ts","./node_modules/@types/three/src/objects/linesegments.d.ts","./node_modules/@types/three/src/helpers/axeshelper.d.ts","./node_modules/@types/three/src/helpers/box3helper.d.ts","./node_modules/@types/three/src/helpers/boxhelper.d.ts","./node_modules/@types/three/src/helpers/camerahelper.d.ts","./node_modules/@types/three/src/lights/directionallightshadow.d.ts","./node_modules/@types/three/src/lights/directionallight.d.ts","./node_modules/@types/three/src/helpers/directionallighthelper.d.ts","./node_modules/@types/three/src/helpers/gridhelper.d.ts","./node_modules/@types/three/src/lights/hemispherelight.d.ts","./node_modules/@types/three/src/helpers/hemispherelighthelper.d.ts","./node_modules/@types/three/src/helpers/planehelper.d.ts","./node_modules/@types/three/src/lights/pointlightshadow.d.ts","./node_modules/@types/three/src/lights/pointlight.d.ts","./node_modules/@types/three/src/helpers/pointlighthelper.d.ts","./node_modules/@types/three/src/helpers/polargridhelper.d.ts","./node_modules/@types/three/src/objects/skinnedmesh.d.ts","./node_modules/@types/three/src/helpers/skeletonhelper.d.ts","./node_modules/@types/three/src/helpers/spotlighthelper.d.ts","./node_modules/@types/three/src/lights/ambientlight.d.ts","./node_modules/@types/three/src/math/sphericalharmonics3.d.ts","./node_modules/@types/three/src/lights/lightprobe.d.ts","./node_modules/@types/three/src/lights/rectarealight.d.ts","./node_modules/@types/three/src/lights/spotlightshadow.d.ts","./node_modules/@types/three/src/lights/spotlight.d.ts","./node_modules/@types/three/src/loaders/loadingmanager.d.ts","./node_modules/@types/three/src/loaders/loader.d.ts","./node_modules/@types/three/src/loaders/animationloader.d.ts","./node_modules/@types/three/src/loaders/audioloader.d.ts","./node_modules/@types/three/src/loaders/buffergeometryloader.d.ts","./node_modules/@types/three/src/loaders/cache.d.ts","./node_modules/@types/three/src/loaders/compressedtextureloader.d.ts","./node_modules/@types/three/src/loaders/cubetextureloader.d.ts","./node_modules/@types/three/src/loaders/datatextureloader.d.ts","./node_modules/@types/three/src/loaders/fileloader.d.ts","./node_modules/@types/three/src/loaders/imagebitmaploader.d.ts","./node_modules/@types/three/src/loaders/imageloader.d.ts","./node_modules/@types/three/src/loaders/loaderutils.d.ts","./node_modules/@types/three/src/loaders/materialloader.d.ts","./node_modules/@types/three/src/loaders/objectloader.d.ts","./node_modules/@types/three/src/loaders/textureloader.d.ts","./node_modules/@types/three/src/math/frustumarray.d.ts","./node_modules/@types/three/src/math/interpolants/quaternionlinearinterpolant.d.ts","./node_modules/@types/three/src/math/mathutils.d.ts","./node_modules/@types/three/src/math/matrix2.d.ts","./node_modules/@types/three/src/objects/batchedmesh.d.ts","./node_modules/@types/three/src/objects/instancedmesh.d.ts","./node_modules/@types/three/src/objects/lineloop.d.ts","./node_modules/@types/three/src/objects/lod.d.ts","./node_modules/@types/three/src/objects/points.d.ts","./node_modules/@types/three/src/textures/data3dtexture.d.ts","./node_modules/@types/three/src/renderers/webgl3drendertarget.d.ts","./node_modules/@types/three/src/textures/dataarraytexture.d.ts","./node_modules/@types/three/src/renderers/webglarrayrendertarget.d.ts","./node_modules/@types/three/src/textures/canvastexture.d.ts","./node_modules/@types/three/src/textures/compressedarraytexture.d.ts","./node_modules/@types/three/src/textures/compressedcubetexture.d.ts","./node_modules/@types/three/src/textures/framebuffertexture.d.ts","./node_modules/@types/three/src/textures/videotexture.d.ts","./node_modules/@types/three/src/textures/videoframetexture.d.ts","./node_modules/@types/three/src/utils.d.ts","./node_modules/@types/three/src/three.core.d.ts","./node_modules/@types/three/src/extras/pmremgenerator.d.ts","./node_modules/@types/three/src/renderers/shaders/shaderchunk.d.ts","./node_modules/@types/three/src/renderers/shaders/shaderlib.d.ts","./node_modules/@types/three/src/renderers/shaders/uniformsutils.d.ts","./node_modules/@types/three/src/renderers/webgl/webglbufferrenderer.d.ts","./node_modules/@types/three/src/renderers/webgl/webglcubeuvmaps.d.ts","./node_modules/@types/three/src/renderers/webgl/webglgeometries.d.ts","./node_modules/@types/three/src/renderers/webgl/webglindexedbufferrenderer.d.ts","./node_modules/@types/three/src/renderers/webgl/webglshader.d.ts","./node_modules/@types/three/src/renderers/webxr/webxrdepthsensing.d.ts","./node_modules/@types/three/src/three.d.ts","./node_modules/@types/three/build/three.module.d.ts","./node_modules/@types/react-reconciler/index.d.ts","./node_modules/zustand/esm/vanilla.d.mts","./node_modules/zustand/esm/react.d.mts","./node_modules/zustand/esm/index.d.mts","./node_modules/zustand/esm/traditional.d.mts","./node_modules/@react-three/fiber/dist/declarations/src/core/store.d.ts","./node_modules/@react-three/fiber/dist/declarations/src/core/reconciler.d.ts","./node_modules/@react-three/fiber/dist/declarations/src/core/utils.d.ts","./node_modules/@react-three/fiber/dist/declarations/src/core/events.d.ts","./node_modules/@react-three/fiber/dist/declarations/src/core/hooks.d.ts","./node_modules/@react-three/fiber/dist/declarations/src/core/loop.d.ts","./node_modules/@react-three/fiber/dist/declarations/src/core/renderer.d.ts","./node_modules/@react-three/fiber/dist/declarations/src/core/index.d.ts","./node_modules/@react-three/fiber/dist/declarations/src/three-types.d.ts","./node_modules/react-use-measure/dist/index.d.ts","./node_modules/@react-three/fiber/dist/declarations/src/web/canvas.d.ts","./node_modules/@react-three/fiber/dist/declarations/src/web/events.d.ts","./node_modules/@react-three/fiber/dist/declarations/src/index.d.ts","./node_modules/@react-three/fiber/dist/react-three-fiber.cjs.d.ts","./node_modules/utility-types/dist/aliases-and-guards.d.ts","./node_modules/utility-types/dist/mapped-types.d.ts","./node_modules/utility-types/dist/utility-types.d.ts","./node_modules/utility-types/dist/functional-helpers.d.ts","./node_modules/utility-types/dist/index.d.ts","./node_modules/@react-three/drei/helpers/ts-utils.d.ts","./node_modules/@react-three/drei/web/html.d.ts","./node_modules/@react-three/drei/web/cycleraycast.d.ts","./node_modules/@react-three/drei/web/usecursor.d.ts","./node_modules/@react-three/drei/web/loader.d.ts","./node_modules/@react-three/drei/web/scrollcontrols.d.ts","./node_modules/@react-three/drei/web/presentationcontrols.d.ts","./node_modules/@react-three/drei/web/keyboardcontrols.d.ts","./node_modules/@react-three/drei/web/select.d.ts","./node_modules/@react-three/drei/core/billboard.d.ts","./node_modules/@react-three/drei/core/screenspace.d.ts","./node_modules/@react-three/drei/core/screensizer.d.ts","./node_modules/three-stdlib/misc/md2charactercomplex.d.ts","./node_modules/three-stdlib/misc/convexobjectbreaker.d.ts","./node_modules/three-stdlib/misc/morphblendmesh.d.ts","./node_modules/three-stdlib/misc/gpucomputationrenderer.d.ts","./node_modules/three-stdlib/misc/gyroscope.d.ts","./node_modules/three-stdlib/misc/morphanimmesh.d.ts","./node_modules/three-stdlib/misc/rollercoaster.d.ts","./node_modules/three-stdlib/misc/timer.d.ts","./node_modules/three-stdlib/misc/webgl.d.ts","./node_modules/three-stdlib/misc/md2character.d.ts","./node_modules/three-stdlib/misc/volume.d.ts","./node_modules/three-stdlib/misc/volumeslice.d.ts","./node_modules/three-stdlib/misc/tubepainter.d.ts","./node_modules/three-stdlib/misc/progressivelightmap.d.ts","./node_modules/three-stdlib/renderers/css2drenderer.d.ts","./node_modules/three-stdlib/renderers/css3drenderer.d.ts","./node_modules/three-stdlib/renderers/projector.d.ts","./node_modules/three-stdlib/renderers/svgrenderer.d.ts","./node_modules/three-stdlib/textures/flakestexture.d.ts","./node_modules/three-stdlib/modifiers/curvemodifier.d.ts","./node_modules/three-stdlib/modifiers/simplifymodifier.d.ts","./node_modules/three-stdlib/modifiers/edgesplitmodifier.d.ts","./node_modules/three-stdlib/modifiers/tessellatemodifier.d.ts","./node_modules/three-stdlib/exporters/gltfexporter.d.ts","./node_modules/three-stdlib/exporters/usdzexporter.d.ts","./node_modules/three-stdlib/exporters/plyexporter.d.ts","./node_modules/three-stdlib/exporters/dracoexporter.d.ts","./node_modules/three-stdlib/exporters/colladaexporter.d.ts","./node_modules/three-stdlib/exporters/mmdexporter.d.ts","./node_modules/three-stdlib/exporters/stlexporter.d.ts","./node_modules/three-stdlib/exporters/objexporter.d.ts","./node_modules/three-stdlib/environments/roomenvironment.d.ts","./node_modules/three-stdlib/animation/animationclipcreator.d.ts","./node_modules/three-stdlib/animation/ccdiksolver.d.ts","./node_modules/three-stdlib/animation/mmdphysics.d.ts","./node_modules/three-stdlib/animation/mmdanimationhelper.d.ts","./node_modules/three-stdlib/objects/batchedmesh.d.ts","./node_modules/three-stdlib/types/shared.d.ts","./node_modules/three-stdlib/objects/reflector.d.ts","./node_modules/three-stdlib/objects/refractor.d.ts","./node_modules/three-stdlib/objects/shadowmesh.d.ts","./node_modules/three-stdlib/objects/lensflare.d.ts","./node_modules/three-stdlib/objects/water.d.ts","./node_modules/three-stdlib/objects/marchingcubes.d.ts","./node_modules/three-stdlib/geometries/lightningstrike.d.ts","./node_modules/three-stdlib/objects/lightningstorm.d.ts","./node_modules/three-stdlib/objects/reflectorrtt.d.ts","./node_modules/three-stdlib/objects/reflectorforssrpass.d.ts","./node_modules/three-stdlib/objects/sky.d.ts","./node_modules/three-stdlib/objects/water2.d.ts","./node_modules/three-stdlib/objects/groundprojectedenv.d.ts","./node_modules/three-stdlib/utils/sceneutils.d.ts","./node_modules/three-stdlib/utils/uvsdebug.d.ts","./node_modules/three-stdlib/utils/geometryutils.d.ts","./node_modules/three-stdlib/utils/roughnessmipmapper.d.ts","./node_modules/three-stdlib/utils/skeletonutils.d.ts","./node_modules/three-stdlib/utils/shadowmapviewer.d.ts","./node_modules/three-stdlib/utils/buffergeometryutils.d.ts","./node_modules/three-stdlib/utils/geometrycompressionutils.d.ts","./node_modules/three-stdlib/shaders/bokehshader2.d.ts","./node_modules/three-stdlib/cameras/cinematiccamera.d.ts","./node_modules/three-stdlib/math/convexhull.d.ts","./node_modules/three-stdlib/math/meshsurfacesampler.d.ts","./node_modules/three-stdlib/math/simplexnoise.d.ts","./node_modules/three-stdlib/math/obb.d.ts","./node_modules/three-stdlib/math/capsule.d.ts","./node_modules/three-stdlib/math/colorconverter.d.ts","./node_modules/three-stdlib/math/improvednoise.d.ts","./node_modules/three-stdlib/math/octree.d.ts","./node_modules/three-stdlib/math/lut.d.ts","./node_modules/three-stdlib/controls/eventdispatcher.d.ts","./node_modules/three-stdlib/controls/experimental/cameracontrols.d.ts","./node_modules/three-stdlib/controls/firstpersoncontrols.d.ts","./node_modules/three-stdlib/controls/transformcontrols.d.ts","./node_modules/three-stdlib/controls/dragcontrols.d.ts","./node_modules/three-stdlib/controls/pointerlockcontrols.d.ts","./node_modules/three-stdlib/controls/standardcontrolseventmap.d.ts","./node_modules/three-stdlib/controls/deviceorientationcontrols.d.ts","./node_modules/three-stdlib/controls/trackballcontrols.d.ts","./node_modules/three-stdlib/controls/orbitcontrols.d.ts","./node_modules/three-stdlib/controls/arcballcontrols.d.ts","./node_modules/three-stdlib/controls/flycontrols.d.ts","./node_modules/three-stdlib/postprocessing/pass.d.ts","./node_modules/three-stdlib/shaders/types.d.ts","./node_modules/three-stdlib/postprocessing/shaderpass.d.ts","./node_modules/three-stdlib/postprocessing/lutpass.d.ts","./node_modules/three-stdlib/postprocessing/clearpass.d.ts","./node_modules/three-stdlib/shaders/digitalglitch.d.ts","./node_modules/three-stdlib/postprocessing/glitchpass.d.ts","./node_modules/three-stdlib/postprocessing/halftonepass.d.ts","./node_modules/three-stdlib/postprocessing/smaapass.d.ts","./node_modules/three-stdlib/shaders/filmshader.d.ts","./node_modules/three-stdlib/postprocessing/filmpass.d.ts","./node_modules/three-stdlib/postprocessing/outlinepass.d.ts","./node_modules/three-stdlib/postprocessing/ssaopass.d.ts","./node_modules/three-stdlib/postprocessing/savepass.d.ts","./node_modules/three-stdlib/postprocessing/bokehpass.d.ts","./node_modules/three-stdlib/postprocessing/texturepass.d.ts","./node_modules/three-stdlib/postprocessing/adaptivetonemappingpass.d.ts","./node_modules/three-stdlib/postprocessing/unrealbloompass.d.ts","./node_modules/three-stdlib/postprocessing/cubetexturepass.d.ts","./node_modules/three-stdlib/postprocessing/saopass.d.ts","./node_modules/three-stdlib/shaders/afterimageshader.d.ts","./node_modules/three-stdlib/postprocessing/afterimagepass.d.ts","./node_modules/three-stdlib/postprocessing/maskpass.d.ts","./node_modules/three-stdlib/postprocessing/effectcomposer.d.ts","./node_modules/three-stdlib/shaders/dotscreenshader.d.ts","./node_modules/three-stdlib/postprocessing/dotscreenpass.d.ts","./node_modules/three-stdlib/postprocessing/ssrpass.d.ts","./node_modules/three-stdlib/postprocessing/ssaarenderpass.d.ts","./node_modules/three-stdlib/postprocessing/taarenderpass.d.ts","./node_modules/three-stdlib/postprocessing/renderpass.d.ts","./node_modules/three-stdlib/postprocessing/renderpixelatedpass.d.ts","./node_modules/three-stdlib/shaders/convolutionshader.d.ts","./node_modules/three-stdlib/postprocessing/bloompass.d.ts","./node_modules/three-stdlib/postprocessing/waterpass.d.ts","./node_modules/three-stdlib/webxr/arbutton.d.ts","./node_modules/three-stdlib/webxr/xrhandmeshmodel.d.ts","./node_modules/three-stdlib/webxr/oculushandmodel.d.ts","./node_modules/three-stdlib/webxr/oculushandpointermodel.d.ts","./node_modules/three-stdlib/webxr/text2d.d.ts","./node_modules/three-stdlib/webxr/vrbutton.d.ts","./node_modules/three-stdlib/loaders/dracoloader.d.ts","./node_modules/three-stdlib/loaders/ktx2loader.d.ts","./node_modules/three-stdlib/loaders/gltfloader.d.ts","./node_modules/three-stdlib/libs/motioncontrollers.d.ts","./node_modules/three-stdlib/webxr/xrcontrollermodelfactory.d.ts","./node_modules/three-stdlib/webxr/xrestimatedlight.d.ts","./node_modules/three-stdlib/webxr/xrhandprimitivemodel.d.ts","./node_modules/three-stdlib/webxr/xrhandmodelfactory.d.ts","./node_modules/three-stdlib/geometries/parametricgeometry.d.ts","./node_modules/three-stdlib/geometries/parametricgeometries.d.ts","./node_modules/three-stdlib/geometries/convexgeometry.d.ts","./node_modules/three-stdlib/geometries/roundedboxgeometry.d.ts","./node_modules/three-stdlib/geometries/boxlinegeometry.d.ts","./node_modules/three-stdlib/geometries/decalgeometry.d.ts","./node_modules/three-stdlib/geometries/teapotgeometry.d.ts","./node_modules/three-stdlib/loaders/fontloader.d.ts","./node_modules/three-stdlib/geometries/textgeometry.d.ts","./node_modules/three-stdlib/csm/csmfrustum.d.ts","./node_modules/three-stdlib/csm/csm.d.ts","./node_modules/three-stdlib/csm/csmhelper.d.ts","./node_modules/three-stdlib/csm/csmshader.d.ts","./node_modules/three-stdlib/shaders/acesfilmictonemappingshader.d.ts","./node_modules/three-stdlib/shaders/basicshader.d.ts","./node_modules/three-stdlib/shaders/bleachbypassshader.d.ts","./node_modules/three-stdlib/shaders/blendshader.d.ts","./node_modules/three-stdlib/shaders/bokehshader.d.ts","./node_modules/three-stdlib/shaders/brightnesscontrastshader.d.ts","./node_modules/three-stdlib/shaders/colorcorrectionshader.d.ts","./node_modules/three-stdlib/shaders/colorifyshader.d.ts","./node_modules/three-stdlib/shaders/copyshader.d.ts","./node_modules/three-stdlib/shaders/dofmipmapshader.d.ts","./node_modules/three-stdlib/shaders/depthlimitedblurshader.d.ts","./node_modules/three-stdlib/shaders/fxaashader.d.ts","./node_modules/three-stdlib/shaders/focusshader.d.ts","./node_modules/three-stdlib/shaders/freichenshader.d.ts","./node_modules/three-stdlib/shaders/fresnelshader.d.ts","./node_modules/three-stdlib/shaders/gammacorrectionshader.d.ts","./node_modules/three-stdlib/shaders/godraysshader.d.ts","./node_modules/three-stdlib/shaders/halftoneshader.d.ts","./node_modules/three-stdlib/shaders/horizontalblurshader.d.ts","./node_modules/three-stdlib/shaders/horizontaltiltshiftshader.d.ts","./node_modules/three-stdlib/shaders/huesaturationshader.d.ts","./node_modules/three-stdlib/shaders/kaleidoshader.d.ts","./node_modules/three-stdlib/shaders/luminosityhighpassshader.d.ts","./node_modules/three-stdlib/shaders/luminosityshader.d.ts","./node_modules/three-stdlib/shaders/mirrorshader.d.ts","./node_modules/three-stdlib/shaders/normalmapshader.d.ts","./node_modules/three-stdlib/shaders/parallaxshader.d.ts","./node_modules/three-stdlib/shaders/pixelshader.d.ts","./node_modules/three-stdlib/shaders/rgbshiftshader.d.ts","./node_modules/three-stdlib/shaders/saoshader.d.ts","./node_modules/three-stdlib/shaders/smaashader.d.ts","./node_modules/three-stdlib/shaders/ssaoshader.d.ts","./node_modules/three-stdlib/shaders/ssrshader.d.ts","./node_modules/three-stdlib/shaders/sepiashader.d.ts","./node_modules/three-stdlib/shaders/sobeloperatorshader.d.ts","./node_modules/three-stdlib/shaders/subsurfacescatteringshader.d.ts","./node_modules/three-stdlib/shaders/technicolorshader.d.ts","./node_modules/three-stdlib/shaders/tonemapshader.d.ts","./node_modules/three-stdlib/shaders/toonshader.d.ts","./node_modules/three-stdlib/shaders/triangleblurshader.d.ts","./node_modules/three-stdlib/shaders/unpackdepthrgbashader.d.ts","./node_modules/three-stdlib/shaders/verticalblurshader.d.ts","./node_modules/three-stdlib/shaders/verticaltiltshiftshader.d.ts","./node_modules/three-stdlib/shaders/vignetteshader.d.ts","./node_modules/three-stdlib/shaders/volumeshader.d.ts","./node_modules/three-stdlib/shaders/waterrefractionshader.d.ts","./node_modules/three-stdlib/interactive/htmlmesh.d.ts","./node_modules/three-stdlib/interactive/interactivegroup.d.ts","./node_modules/three-stdlib/interactive/selectionbox.d.ts","./node_modules/three-stdlib/interactive/selectionhelper.d.ts","./node_modules/three-stdlib/physics/ammophysics.d.ts","./node_modules/three-stdlib/effects/parallaxbarriereffect.d.ts","./node_modules/three-stdlib/effects/peppersghosteffect.d.ts","./node_modules/three-stdlib/effects/outlineeffect.d.ts","./node_modules/three-stdlib/effects/anaglypheffect.d.ts","./node_modules/three-stdlib/effects/asciieffect.d.ts","./node_modules/three-stdlib/effects/stereoeffect.d.ts","./node_modules/three-stdlib/loaders/fbxloader.d.ts","./node_modules/three-stdlib/loaders/tgaloader.d.ts","./node_modules/three-stdlib/loaders/lutcubeloader.d.ts","./node_modules/three-stdlib/loaders/nrrdloader.d.ts","./node_modules/three-stdlib/loaders/stlloader.d.ts","./node_modules/three-stdlib/loaders/mtlloader.d.ts","./node_modules/three-stdlib/loaders/xloader.d.ts","./node_modules/three-stdlib/loaders/bvhloader.d.ts","./node_modules/three-stdlib/loaders/colladaloader.d.ts","./node_modules/three-stdlib/loaders/kmzloader.d.ts","./node_modules/three-stdlib/loaders/vrmloader.d.ts","./node_modules/three-stdlib/loaders/vrmlloader.d.ts","./node_modules/three-stdlib/loaders/lottieloader.d.ts","./node_modules/three-stdlib/loaders/ttfloader.d.ts","./node_modules/three-stdlib/loaders/rgbeloader.d.ts","./node_modules/three-stdlib/loaders/assimploader.d.ts","./node_modules/three-stdlib/loaders/mddloader.d.ts","./node_modules/three-stdlib/loaders/exrloader.d.ts","./node_modules/three-stdlib/loaders/3mfloader.d.ts","./node_modules/three-stdlib/loaders/xyzloader.d.ts","./node_modules/three-stdlib/loaders/vtkloader.d.ts","./node_modules/three-stdlib/loaders/lut3dlloader.d.ts","./node_modules/three-stdlib/loaders/ddsloader.d.ts","./node_modules/three-stdlib/loaders/pvrloader.d.ts","./node_modules/three-stdlib/loaders/gcodeloader.d.ts","./node_modules/three-stdlib/loaders/basistextureloader.d.ts","./node_modules/three-stdlib/loaders/tdsloader.d.ts","./node_modules/three-stdlib/loaders/ldrawloader.d.ts","./node_modules/three-stdlib/loaders/svgloader.d.ts","./node_modules/three-stdlib/loaders/3dmloader.d.ts","./node_modules/three-stdlib/loaders/objloader.d.ts","./node_modules/three-stdlib/loaders/amfloader.d.ts","./node_modules/three-stdlib/loaders/mmdloader.d.ts","./node_modules/three-stdlib/loaders/md2loader.d.ts","./node_modules/three-stdlib/loaders/ktxloader.d.ts","./node_modules/three-stdlib/loaders/tiltloader.d.ts","./node_modules/three-stdlib/loaders/hdrcubetextureloader.d.ts","./node_modules/three-stdlib/loaders/pdbloader.d.ts","./node_modules/three-stdlib/loaders/prwmloader.d.ts","./node_modules/three-stdlib/loaders/rgbmloader.d.ts","./node_modules/three-stdlib/loaders/voxloader.d.ts","./node_modules/three-stdlib/loaders/pcdloader.d.ts","./node_modules/three-stdlib/loaders/lwoloader.d.ts","./node_modules/three-stdlib/loaders/plyloader.d.ts","./node_modules/three-stdlib/lines/linesegmentsgeometry.d.ts","./node_modules/three-stdlib/lines/linegeometry.d.ts","./node_modules/three-stdlib/lines/linematerial.d.ts","./node_modules/three-stdlib/lines/wireframe.d.ts","./node_modules/three-stdlib/lines/wireframegeometry2.d.ts","./node_modules/three-stdlib/lines/linesegments2.d.ts","./node_modules/three-stdlib/lines/line2.d.ts","./node_modules/three-stdlib/helpers/lightprobehelper.d.ts","./node_modules/three-stdlib/helpers/raycasterhelper.d.ts","./node_modules/three-stdlib/helpers/vertextangentshelper.d.ts","./node_modules/three-stdlib/helpers/positionalaudiohelper.d.ts","./node_modules/three-stdlib/helpers/vertexnormalshelper.d.ts","./node_modules/three-stdlib/helpers/rectarealighthelper.d.ts","./node_modules/three-stdlib/lights/rectarealightuniformslib.d.ts","./node_modules/three-stdlib/lights/lightprobegenerator.d.ts","./node_modules/three-stdlib/curves/nurbsutils.d.ts","./node_modules/three-stdlib/curves/nurbscurve.d.ts","./node_modules/three-stdlib/curves/nurbssurface.d.ts","./node_modules/three-stdlib/curves/curveextras.d.ts","./node_modules/three-stdlib/deprecated/geometry.d.ts","./node_modules/three-stdlib/libs/meshoptdecoder.d.ts","./node_modules/three-stdlib/index.d.ts","./node_modules/@react-three/drei/core/line.d.ts","./node_modules/@react-three/drei/core/quadraticbezierline.d.ts","./node_modules/@react-three/drei/core/cubicbezierline.d.ts","./node_modules/@react-three/drei/core/catmullromline.d.ts","./node_modules/@react-three/drei/core/positionalaudio.d.ts","./node_modules/@react-three/drei/core/text.d.ts","./node_modules/@react-three/drei/core/usefont.d.ts","./node_modules/@react-three/drei/core/text3d.d.ts","./node_modules/@react-three/drei/core/effects.d.ts","./node_modules/@react-three/drei/core/gradienttexture.d.ts","./node_modules/@react-three/drei/core/image.d.ts","./node_modules/@react-three/drei/core/edges.d.ts","./node_modules/@react-three/drei/core/outlines.d.ts","./node_modules/meshline/dist/meshlinegeometry.d.ts","./node_modules/meshline/dist/meshlinematerial.d.ts","./node_modules/meshline/dist/raycast.d.ts","./node_modules/meshline/dist/index.d.ts","./node_modules/@react-three/drei/core/trail.d.ts","./node_modules/@react-three/drei/core/sampler.d.ts","./node_modules/@react-three/drei/core/computedattribute.d.ts","./node_modules/@react-three/drei/core/clone.d.ts","./node_modules/@react-three/drei/core/marchingcubes.d.ts","./node_modules/@react-three/drei/core/decal.d.ts","./node_modules/@react-three/drei/core/svg.d.ts","./node_modules/@react-three/drei/core/gltf.d.ts","./node_modules/@react-three/drei/core/asciirenderer.d.ts","./node_modules/@react-three/drei/core/splat.d.ts","./node_modules/@react-three/drei/core/orthographiccamera.d.ts","./node_modules/@react-three/drei/core/perspectivecamera.d.ts","./node_modules/@react-three/drei/core/cubecamera.d.ts","./node_modules/@react-three/drei/core/deviceorientationcontrols.d.ts","./node_modules/@react-three/drei/core/flycontrols.d.ts","./node_modules/@react-three/drei/core/mapcontrols.d.ts","./node_modules/@react-three/drei/core/orbitcontrols.d.ts","./node_modules/@react-three/drei/core/trackballcontrols.d.ts","./node_modules/@react-three/drei/core/arcballcontrols.d.ts","./node_modules/@react-three/drei/core/transformcontrols.d.ts","./node_modules/@react-three/drei/core/pointerlockcontrols.d.ts","./node_modules/@react-three/drei/core/firstpersoncontrols.d.ts","./node_modules/camera-controls/dist/types.d.ts","./node_modules/camera-controls/dist/eventdispatcher.d.ts","./node_modules/camera-controls/dist/cameracontrols.d.ts","./node_modules/camera-controls/dist/index.d.ts","./node_modules/@react-three/drei/core/cameracontrols.d.ts","./node_modules/@react-three/drei/core/motionpathcontrols.d.ts","./node_modules/@react-three/drei/core/gizmohelper.d.ts","./node_modules/@react-three/drei/core/gizmoviewcube.d.ts","./node_modules/@react-three/drei/core/gizmoviewport.d.ts","./node_modules/@react-three/drei/core/grid.d.ts","./node_modules/@react-three/drei/core/cubetexture.d.ts","./node_modules/@react-three/drei/core/fbx.d.ts","./node_modules/@react-three/drei/core/ktx2.d.ts","./node_modules/@react-three/drei/core/progress.d.ts","./node_modules/@react-three/drei/core/texture.d.ts","./node_modules/hls.js/dist/hls.d.mts","./node_modules/@react-three/drei/core/videotexture.d.ts","./node_modules/@react-three/drei/core/usespriteloader.d.ts","./node_modules/@react-three/drei/core/helper.d.ts","./node_modules/@react-three/drei/core/stats.d.ts","./node_modules/stats-gl/dist/stats-gl.d.ts","./node_modules/@react-three/drei/core/statsgl.d.ts","./node_modules/@react-three/drei/core/usedepthbuffer.d.ts","./node_modules/@react-three/drei/core/useaspect.d.ts","./node_modules/@react-three/drei/core/usecamera.d.ts","./node_modules/detect-gpu/dist/src/index.d.ts","./node_modules/@react-three/drei/core/detectgpu.d.ts","./node_modules/three-mesh-bvh/src/index.d.ts","./node_modules/@react-three/drei/core/bvh.d.ts","./node_modules/@react-three/drei/core/usecontextbridge.d.ts","./node_modules/@react-three/drei/core/useanimations.d.ts","./node_modules/@react-three/drei/core/fbo.d.ts","./node_modules/@react-three/drei/core/useintersect.d.ts","./node_modules/@react-three/drei/core/useboxprojectedenv.d.ts","./node_modules/@react-three/drei/core/bbanchor.d.ts","./node_modules/@react-three/drei/core/trailtexture.d.ts","./node_modules/@react-three/drei/core/example.d.ts","./node_modules/@react-three/drei/core/instances.d.ts","./node_modules/@react-three/drei/core/spriteanimator.d.ts","./node_modules/@react-three/drei/core/curvemodifier.d.ts","./node_modules/@react-three/drei/core/meshdistortmaterial.d.ts","./node_modules/@react-three/drei/core/meshwobblematerial.d.ts","./node_modules/@react-three/drei/materials/meshreflectormaterial.d.ts","./node_modules/@react-three/drei/core/meshreflectormaterial.d.ts","./node_modules/@react-three/drei/materials/meshrefractionmaterial.d.ts","./node_modules/@react-three/drei/core/meshrefractionmaterial.d.ts","./node_modules/@react-three/drei/core/meshtransmissionmaterial.d.ts","./node_modules/@react-three/drei/core/meshdiscardmaterial.d.ts","./node_modules/@react-three/drei/core/multimaterial.d.ts","./node_modules/@react-three/drei/core/pointmaterial.d.ts","./node_modules/@react-three/drei/core/shadermaterial.d.ts","./node_modules/@react-three/drei/core/softshadows.d.ts","./node_modules/@react-three/drei/core/shapes.d.ts","./node_modules/@react-three/drei/core/roundedbox.d.ts","./node_modules/@react-three/drei/core/screenquad.d.ts","./node_modules/@react-three/drei/core/center.d.ts","./node_modules/@react-three/drei/core/resize.d.ts","./node_modules/@react-three/drei/core/bounds.d.ts","./node_modules/@react-three/drei/core/camerashake.d.ts","./node_modules/@react-three/drei/core/float.d.ts","./node_modules/@react-three/drei/helpers/environment-assets.d.ts","./node_modules/@react-three/drei/core/useenvironment.d.ts","./node_modules/@react-three/drei/core/environment.d.ts","./node_modules/@react-three/drei/core/contactshadows.d.ts","./node_modules/@react-three/drei/core/accumulativeshadows.d.ts","./node_modules/@react-three/drei/core/stage.d.ts","./node_modules/@react-three/drei/core/backdrop.d.ts","./node_modules/@react-three/drei/core/shadow.d.ts","./node_modules/@react-three/drei/core/caustics.d.ts","./node_modules/@react-three/drei/core/spotlight.d.ts","./node_modules/@react-three/drei/core/lightformer.d.ts","./node_modules/@react-three/drei/core/sky.d.ts","./node_modules/@react-three/drei/core/stars.d.ts","./node_modules/@react-three/drei/core/cloud.d.ts","./node_modules/@react-three/drei/core/sparkles.d.ts","./node_modules/@react-three/drei/core/matcaptexture.d.ts","./node_modules/@react-three/drei/core/normaltexture.d.ts","./node_modules/@react-three/drei/materials/wireframematerial.d.ts","./node_modules/@react-three/drei/core/wireframe.d.ts","./node_modules/@react-three/drei/core/shadowalpha.d.ts","./node_modules/@react-three/drei/core/points.d.ts","./node_modules/@react-three/drei/core/segments.d.ts","./node_modules/@react-three/drei/core/detailed.d.ts","./node_modules/@react-three/drei/core/preload.d.ts","./node_modules/@react-three/drei/core/bakeshadows.d.ts","./node_modules/@react-three/drei/core/meshbounds.d.ts","./node_modules/@react-three/drei/core/adaptivedpr.d.ts","./node_modules/@react-three/drei/core/adaptiveevents.d.ts","./node_modules/@react-three/drei/core/performancemonitor.d.ts","./node_modules/@react-three/drei/core/rendertexture.d.ts","./node_modules/@react-three/drei/core/rendercubetexture.d.ts","./node_modules/@react-three/drei/core/mask.d.ts","./node_modules/@react-three/drei/core/hud.d.ts","./node_modules/@react-three/drei/core/fisheye.d.ts","./node_modules/@react-three/drei/core/meshportalmaterial.d.ts","./node_modules/@react-three/drei/core/calculatescalefactor.d.ts","./node_modules/@react-three/drei/core/index.d.ts","./node_modules/@react-three/drei/web/view.d.ts","./node_modules/@react-three/drei/web/pivotcontrols/context.d.ts","./node_modules/@react-three/drei/web/pivotcontrols/index.d.ts","./node_modules/@react-three/drei/web/screenvideotexture.d.ts","./node_modules/@react-three/drei/web/webcamvideotexture.d.ts","./node_modules/@mediapipe/tasks-vision/vision.d.ts","./node_modules/@react-three/drei/web/facemesh.d.ts","./node_modules/@react-three/drei/web/facecontrols.d.ts","./node_modules/@use-gesture/core/dist/declarations/src/types/utils.d.ts","./node_modules/@use-gesture/core/dist/declarations/src/types/state.d.ts","./node_modules/@use-gesture/core/dist/declarations/src/types/config.d.ts","./node_modules/@use-gesture/core/dist/declarations/src/types/internalconfig.d.ts","./node_modules/@use-gesture/core/dist/declarations/src/types/handlers.d.ts","./node_modules/@use-gesture/core/dist/declarations/src/config/resolver.d.ts","./node_modules/@use-gesture/core/dist/declarations/src/eventstore.d.ts","./node_modules/@use-gesture/core/dist/declarations/src/timeoutstore.d.ts","./node_modules/@use-gesture/core/dist/declarations/src/controller.d.ts","./node_modules/@use-gesture/core/dist/declarations/src/engines/engine.d.ts","./node_modules/@use-gesture/core/dist/declarations/src/types/action.d.ts","./node_modules/@use-gesture/core/dist/declarations/src/types/index.d.ts","./node_modules/@use-gesture/core/dist/declarations/src/types.d.ts","./node_modules/@use-gesture/core/types/dist/use-gesture-core-types.cjs.d.ts","./node_modules/@use-gesture/react/dist/declarations/src/types.d.ts","./node_modules/@use-gesture/react/dist/declarations/src/usedrag.d.ts","./node_modules/@use-gesture/react/dist/declarations/src/usepinch.d.ts","./node_modules/@use-gesture/react/dist/declarations/src/usewheel.d.ts","./node_modules/@use-gesture/react/dist/declarations/src/usescroll.d.ts","./node_modules/@use-gesture/react/dist/declarations/src/usemove.d.ts","./node_modules/@use-gesture/react/dist/declarations/src/usehover.d.ts","./node_modules/@use-gesture/react/dist/declarations/src/usegesture.d.ts","./node_modules/@use-gesture/react/dist/declarations/src/createusegesture.d.ts","./node_modules/@use-gesture/core/dist/declarations/src/utils/maths.d.ts","./node_modules/@use-gesture/core/dist/declarations/src/utils.d.ts","./node_modules/@use-gesture/core/utils/dist/use-gesture-core-utils.cjs.d.ts","./node_modules/@use-gesture/core/dist/declarations/src/actions.d.ts","./node_modules/@use-gesture/core/actions/dist/use-gesture-core-actions.cjs.d.ts","./node_modules/@use-gesture/react/dist/declarations/src/index.d.ts","./node_modules/@use-gesture/react/dist/use-gesture-react.cjs.d.ts","./node_modules/@react-three/drei/web/dragcontrols.d.ts","./node_modules/@react-three/drei/web/facelandmarker.d.ts","./node_modules/@react-three/drei/web/index.d.ts","./node_modules/@react-three/drei/index.d.ts","./src/components/background/fluidbackground.tsx","./src/components/background/blurbottombackground.tsx","./src/components/background/gridbackround.tsx","./src/providers/themeprovider/config/background.ts","./src/providers/themeprovider/config/shared.ts","./src/providers/themeprovider/config/constants.ts","./src/components/cardstack/types.ts","./node_modules/@gsap/react/types/index.d.ts","./src/components/cardstack/hooks/usedepth3danimation.ts","./src/components/cardstack/hooks/usecardanimation.ts","./src/components/cardstack/hooks/usephoneanimations.ts","./node_modules/embla-carousel/esm/components/alignment.d.ts","./node_modules/embla-carousel/esm/components/noderects.d.ts","./node_modules/embla-carousel/esm/components/axis.d.ts","./node_modules/embla-carousel/esm/components/slidestoscroll.d.ts","./node_modules/embla-carousel/esm/components/limit.d.ts","./node_modules/embla-carousel/esm/components/scrollcontain.d.ts","./node_modules/embla-carousel/esm/components/dragtracker.d.ts","./node_modules/embla-carousel/esm/components/utils.d.ts","./node_modules/embla-carousel/esm/components/animations.d.ts","./node_modules/embla-carousel/esm/components/counter.d.ts","./node_modules/embla-carousel/esm/components/eventhandler.d.ts","./node_modules/embla-carousel/esm/components/eventstore.d.ts","./node_modules/embla-carousel/esm/components/percentofview.d.ts","./node_modules/embla-carousel/esm/components/resizehandler.d.ts","./node_modules/embla-carousel/esm/components/vector1d.d.ts","./node_modules/embla-carousel/esm/components/scrollbody.d.ts","./node_modules/embla-carousel/esm/components/scrollbounds.d.ts","./node_modules/embla-carousel/esm/components/scrolllooper.d.ts","./node_modules/embla-carousel/esm/components/scrollprogress.d.ts","./node_modules/embla-carousel/esm/components/slideregistry.d.ts","./node_modules/embla-carousel/esm/components/scrolltarget.d.ts","./node_modules/embla-carousel/esm/components/scrollto.d.ts","./node_modules/embla-carousel/esm/components/slidefocus.d.ts","./node_modules/embla-carousel/esm/components/translate.d.ts","./node_modules/embla-carousel/esm/components/slidelooper.d.ts","./node_modules/embla-carousel/esm/components/slideshandler.d.ts","./node_modules/embla-carousel/esm/components/slidesinview.d.ts","./node_modules/embla-carousel/esm/components/engine.d.ts","./node_modules/embla-carousel/esm/components/optionshandler.d.ts","./node_modules/embla-carousel/esm/components/plugins.d.ts","./node_modules/embla-carousel/esm/components/emblacarousel.d.ts","./node_modules/embla-carousel/esm/components/draghandler.d.ts","./node_modules/embla-carousel/esm/components/options.d.ts","./node_modules/embla-carousel/esm/index.d.ts","./src/components/cardstack/hooks/useprevnextbuttons.ts","./src/components/cardstack/hooks/usescrollprogress.ts","./src/components/cardstack/hooks/usetimelinehorizontal.ts","./src/components/cardstack/layouts/grid/gridconfigs.ts","./src/components/hooks/usebuttonanimation.ts","./src/components/navbar/navbarlayoutfloatingoverlay/usemenuanimation.ts","./src/utils/throttle.ts","./src/components/navbar/navbarlayoutfloatingoverlay/useresponsive.ts","./src/components/navbar/navbarlayoutfloatingoverlay/usescrolldetection.ts","./src/components/navbar/navbarstyleapple/usescrollstate.ts","./src/components/navbar/expandingmenu/useresponsivemenuwidth.ts","./src/components/navbar/mobilemenu/usemenuanimation.ts","./src/components/text/textanimation.tsx","./src/providers/themeprovider/styles/cardstyles.ts","./src/providers/themeprovider/styles/primarybuttonstyles.ts","./src/providers/themeprovider/styles/secondarybuttonstyles.ts","./src/providers/themeprovider/themeprovider.tsx","./src/components/sections/about/aboutmetric.tsx","./src/components/button/buttonhovermagnetic/buttonhovermagnetic.tsx","./src/components/button/buttoniconarrow.tsx","./src/components/button/buttonshifthover/buttonshifthover.tsx","./src/components/button/buttontextstagger/buttontextstagger.tsx","./src/components/button/buttontextunderline.tsx","./src/components/button/buttonhoverbubble.tsx","./src/components/button/buttonexpandhover.tsx","./src/components/button/buttonelasticeffect/buttonelasticeffect.tsx","./src/components/button/buttonbounceeffect/buttonbounceeffect.tsx","./src/components/button/buttondirectionalhover/buttondirectionalhover.tsx","./src/components/button/buttontextshift/buttontextshift.tsx","./src/components/button/button.tsx","./src/lib/buttonutils.ts","./src/components/sections/about/inlineimagesplittextabout.tsx","./src/components/shared/mediacontent.tsx","./src/components/shared/tag.tsx","./src/components/shared/avatargroup.tsx","./src/components/textbox.tsx","./src/components/sections/about/mediaabout.tsx","./src/components/sections/about/metricsplitmediaabout.tsx","./src/components/cardstack/cardstacktextbox.tsx","./src/components/sections/about/splitabout.tsx","./src/components/sections/about/testimonialaboutcard.tsx","./src/components/sections/about/textabout.tsx","./src/components/sections/about/textsplitabout.tsx","./src/components/sections/about/index.ts","./src/components/cardstack/layouts/grid/gridlayout.tsx","./node_modules/react-fast-marquee/dist/components/marquee.d.ts","./node_modules/react-fast-marquee/dist/index.d.ts","./src/components/cardstack/layouts/carousels/autocarousel.tsx","./node_modules/embla-carousel-react/esm/components/useemblacarousel.d.ts","./node_modules/embla-carousel-react/esm/index.d.ts","./src/components/cardstack/layouts/carousels/buttoncarousel.tsx","./src/components/cardstack/layouts/timelines/timelinebase.tsx","./src/components/cardstack/cardstack.tsx","./src/components/shared/badge.tsx","./src/components/shared/overlayarrowbutton.tsx","./src/lib/api/blog.ts","./src/components/sections/blog/blogcardone.tsx","./src/components/sections/blog/blogcardthree.tsx","./src/components/sections/blog/blogcardtwo.tsx","./src/components/sections/blog/index.ts","./node_modules/motion-utils/dist/index.d.ts","./node_modules/motion-dom/dist/index.d.ts","./node_modules/framer-motion/dist/types.d-dseekk6g.d.ts","./node_modules/framer-motion/dist/types/index.d.ts","./src/components/background/animatedgridbackground.tsx","./src/components/background/canvasrevealeffect.tsx","./src/components/background/canvasrevealbackground.tsx","./src/components/background/cellwavebackground.tsx","./src/components/background/downwardraysbackground.tsx","./src/components/background/glowingorbbackground.tsx","./node_modules/@tsparticles/engine/types/enums/modes/pixelmode.d.ts","./node_modules/@tsparticles/engine/types/core/interfaces/irangevalue.d.ts","./node_modules/@tsparticles/engine/types/types/rangevalue.d.ts","./node_modules/@tsparticles/engine/types/core/interfaces/icoordinates.d.ts","./node_modules/@tsparticles/engine/types/core/utils/constants.d.ts","./node_modules/@tsparticles/engine/types/enums/types/easingtype.d.ts","./node_modules/@tsparticles/engine/types/types/customeventargs.d.ts","./node_modules/@tsparticles/engine/types/types/customeventlistener.d.ts","./node_modules/@tsparticles/engine/types/types/easingfunction.d.ts","./node_modules/@tsparticles/engine/types/types/singleormultiple.d.ts","./node_modules/@tsparticles/engine/types/core/interfaces/colors.d.ts","./node_modules/@tsparticles/engine/types/core/interfaces/icolormanager.d.ts","./node_modules/@tsparticles/engine/types/types/exportresult.d.ts","./node_modules/@tsparticles/engine/types/core/interfaces/idelta.d.ts","./node_modules/@tsparticles/engine/types/options/interfaces/ioptionscolor.d.ts","./node_modules/@tsparticles/engine/types/enums/directions/outmodedirection.d.ts","./node_modules/@tsparticles/engine/types/core/utils/vectors.d.ts","./node_modules/@tsparticles/engine/types/core/interfaces/ibubbleparticledata.d.ts","./node_modules/@tsparticles/engine/types/core/interfaces/imovepathgenerator.d.ts","./node_modules/@tsparticles/engine/types/enums/animationstatus.d.ts","./node_modules/@tsparticles/engine/types/core/interfaces/iparticlevalueanimation.d.ts","./node_modules/@tsparticles/engine/types/core/interfaces/iparticlehslanimation.d.ts","./node_modules/@tsparticles/engine/types/core/interfaces/idistance.d.ts","./node_modules/@tsparticles/engine/types/core/interfaces/iparticleretinaprops.d.ts","./node_modules/@tsparticles/engine/types/enums/types/altertype.d.ts","./node_modules/@tsparticles/engine/types/core/interfaces/iparticleroll.d.ts","./node_modules/@tsparticles/engine/types/enums/modes/animationmode.d.ts","./node_modules/@tsparticles/engine/types/enums/types/startvaluetype.d.ts","./node_modules/@tsparticles/engine/types/options/interfaces/ianimation.d.ts","./node_modules/@tsparticles/engine/types/options/interfaces/icoloranimation.d.ts","./node_modules/@tsparticles/engine/types/options/interfaces/ihslanimation.d.ts","./node_modules/@tsparticles/engine/types/options/interfaces/ianimatablecolor.d.ts","./node_modules/@tsparticles/engine/types/enums/modes/collisionmode.d.ts","./node_modules/@tsparticles/engine/types/options/interfaces/particles/collisions/icollisionsabsorb.d.ts","./node_modules/@tsparticles/engine/types/options/interfaces/particles/collisions/icollisionsoverlap.d.ts","./node_modules/@tsparticles/engine/types/options/interfaces/ivaluewithrandom.d.ts","./node_modules/@tsparticles/engine/types/options/interfaces/particles/bounce/iparticlesbounce.d.ts","./node_modules/@tsparticles/engine/types/options/interfaces/particles/collisions/icollisions.d.ts","./node_modules/@tsparticles/engine/types/types/recursivepartial.d.ts","./node_modules/@tsparticles/engine/types/core/interfaces/ishapevalues.d.ts","./node_modules/@tsparticles/engine/types/types/shapedata.d.ts","./node_modules/@tsparticles/engine/types/options/interfaces/particles/effect/ieffect.d.ts","./node_modules/@tsparticles/engine/types/options/interfaces/interactivity/events/iclickevent.d.ts","./node_modules/@tsparticles/engine/types/enums/types/divtype.d.ts","./node_modules/@tsparticles/engine/types/options/interfaces/interactivity/events/idivevent.d.ts","./node_modules/@tsparticles/engine/types/options/interfaces/interactivity/events/iparallax.d.ts","./node_modules/@tsparticles/engine/types/options/interfaces/interactivity/events/ihoverevent.d.ts","./node_modules/@tsparticles/engine/types/options/interfaces/interactivity/events/iresizeevent.d.ts","./node_modules/@tsparticles/engine/types/options/interfaces/interactivity/events/ievents.d.ts","./node_modules/@tsparticles/engine/types/options/interfaces/interactivity/modes/imodes.d.ts","./node_modules/@tsparticles/engine/types/enums/interactivitydetect.d.ts","./node_modules/@tsparticles/engine/types/options/interfaces/interactivity/iinteractivity.d.ts","./node_modules/@tsparticles/engine/types/enums/directions/movedirection.d.ts","./node_modules/@tsparticles/engine/types/options/interfaces/particles/move/imoveangle.d.ts","./node_modules/@tsparticles/engine/types/options/interfaces/particles/move/imoveattract.d.ts","./node_modules/@tsparticles/engine/types/options/interfaces/particles/move/imovecenter.d.ts","./node_modules/@tsparticles/engine/types/options/interfaces/particles/move/imovegravity.d.ts","./node_modules/@tsparticles/engine/types/types/pathoptions.d.ts","./node_modules/@tsparticles/engine/types/options/interfaces/particles/move/path/imovepath.d.ts","./node_modules/@tsparticles/engine/types/options/interfaces/particles/move/imovetrailfill.d.ts","./node_modules/@tsparticles/engine/types/options/interfaces/particles/move/imovetrail.d.ts","./node_modules/@tsparticles/engine/types/enums/modes/outmode.d.ts","./node_modules/@tsparticles/engine/types/options/interfaces/particles/move/ioutmodes.d.ts","./node_modules/@tsparticles/engine/types/options/interfaces/particles/move/ispin.d.ts","./node_modules/@tsparticles/engine/types/options/interfaces/particles/move/imove.d.ts","./node_modules/@tsparticles/engine/types/enums/types/destroytype.d.ts","./node_modules/@tsparticles/engine/types/options/interfaces/particles/opacity/iopacityanimation.d.ts","./node_modules/@tsparticles/engine/types/options/interfaces/particles/opacity/iopacity.d.ts","./node_modules/@tsparticles/engine/types/options/interfaces/particles/number/iparticlesdensity.d.ts","./node_modules/@tsparticles/engine/types/enums/modes/limitmode.d.ts","./node_modules/@tsparticles/engine/types/options/interfaces/particles/number/iparticlesnumberlimit.d.ts","./node_modules/@tsparticles/engine/types/options/interfaces/particles/number/iparticlesnumber.d.ts","./node_modules/@tsparticles/engine/types/options/interfaces/particles/ishadow.d.ts","./node_modules/@tsparticles/engine/types/options/interfaces/particles/shape/ishape.d.ts","./node_modules/@tsparticles/engine/types/options/interfaces/particles/size/isizeanimation.d.ts","./node_modules/@tsparticles/engine/types/options/interfaces/particles/size/isize.d.ts","./node_modules/@tsparticles/engine/types/options/interfaces/particles/istroke.d.ts","./node_modules/@tsparticles/engine/types/options/interfaces/particles/zindex/izindex.d.ts","./node_modules/@tsparticles/engine/types/types/particlesgroups.d.ts","./node_modules/@tsparticles/engine/types/options/interfaces/particles/iparticlesoptions.d.ts","./node_modules/@tsparticles/engine/types/core/interfaces/islowparticledata.d.ts","./node_modules/@tsparticles/engine/types/options/interfaces/ioptionloader.d.ts","./node_modules/@tsparticles/engine/types/options/classes/interactivity/events/clickevent.d.ts","./node_modules/@tsparticles/engine/types/options/classes/interactivity/events/divevent.d.ts","./node_modules/@tsparticles/engine/types/options/classes/interactivity/events/parallax.d.ts","./node_modules/@tsparticles/engine/types/options/classes/interactivity/events/hoverevent.d.ts","./node_modules/@tsparticles/engine/types/options/classes/interactivity/events/resizeevent.d.ts","./node_modules/@tsparticles/engine/types/options/classes/interactivity/events/events.d.ts","./node_modules/@tsparticles/engine/types/options/classes/interactivity/modes/modes.d.ts","./node_modules/@tsparticles/engine/types/options/classes/interactivity/interactivity.d.ts","./node_modules/@tsparticles/engine/types/enums/types/particleouttype.d.ts","./node_modules/@tsparticles/engine/types/options/classes/animationoptions.d.ts","./node_modules/@tsparticles/engine/types/options/classes/coloranimation.d.ts","./node_modules/@tsparticles/engine/types/options/classes/hslanimation.d.ts","./node_modules/@tsparticles/engine/types/options/classes/optionscolor.d.ts","./node_modules/@tsparticles/engine/types/options/classes/animatablecolor.d.ts","./node_modules/@tsparticles/engine/types/options/classes/particles/collisions/collisionsabsorb.d.ts","./node_modules/@tsparticles/engine/types/options/classes/particles/collisions/collisionsoverlap.d.ts","./node_modules/@tsparticles/engine/types/options/classes/valuewithrandom.d.ts","./node_modules/@tsparticles/engine/types/options/classes/particles/bounce/particlesbouncefactor.d.ts","./node_modules/@tsparticles/engine/types/options/classes/particles/bounce/particlesbounce.d.ts","./node_modules/@tsparticles/engine/types/options/classes/particles/collisions/collisions.d.ts","./node_modules/@tsparticles/engine/types/options/classes/particles/effect/effect.d.ts","./node_modules/@tsparticles/engine/types/options/classes/particles/move/moveangle.d.ts","./node_modules/@tsparticles/engine/types/options/classes/particles/move/moveattract.d.ts","./node_modules/@tsparticles/engine/types/options/classes/particles/move/movecenter.d.ts","./node_modules/@tsparticles/engine/types/options/classes/particles/move/movegravity.d.ts","./node_modules/@tsparticles/engine/types/options/classes/particles/move/path/movepath.d.ts","./node_modules/@tsparticles/engine/types/options/classes/particles/move/movetrailfill.d.ts","./node_modules/@tsparticles/engine/types/options/classes/particles/move/movetrail.d.ts","./node_modules/@tsparticles/engine/types/options/classes/particles/move/outmodes.d.ts","./node_modules/@tsparticles/engine/types/options/classes/particles/move/spin.d.ts","./node_modules/@tsparticles/engine/types/options/classes/particles/move/move.d.ts","./node_modules/@tsparticles/engine/types/options/classes/particles/opacity/opacityanimation.d.ts","./node_modules/@tsparticles/engine/types/options/classes/particles/opacity/opacity.d.ts","./node_modules/@tsparticles/engine/types/options/classes/particles/number/particlesdensity.d.ts","./node_modules/@tsparticles/engine/types/options/classes/particles/number/particlesnumberlimit.d.ts","./node_modules/@tsparticles/engine/types/options/classes/particles/number/particlesnumber.d.ts","./node_modules/@tsparticles/engine/types/options/classes/particles/shadow.d.ts","./node_modules/@tsparticles/engine/types/options/classes/particles/shape/shape.d.ts","./node_modules/@tsparticles/engine/types/options/classes/particles/size/sizeanimation.d.ts","./node_modules/@tsparticles/engine/types/options/classes/particles/size/size.d.ts","./node_modules/@tsparticles/engine/types/options/classes/particles/stroke.d.ts","./node_modules/@tsparticles/engine/types/options/classes/particles/zindex/zindex.d.ts","./node_modules/@tsparticles/engine/types/options/classes/particles/particlesoptions.d.ts","./node_modules/@tsparticles/engine/types/core/particle.d.ts","./node_modules/@tsparticles/engine/types/core/interfaces/icontainerplugin.d.ts","./node_modules/@tsparticles/engine/types/core/interfaces/ishapedrawdata.d.ts","./node_modules/@tsparticles/engine/types/core/interfaces/ieffectdrawer.d.ts","./node_modules/@tsparticles/engine/types/options/interfaces/background/ibackground.d.ts","./node_modules/@tsparticles/engine/types/options/interfaces/backgroundmask/ibackgroundmaskcover.d.ts","./node_modules/@tsparticles/engine/types/options/interfaces/backgroundmask/ibackgroundmask.d.ts","./node_modules/@tsparticles/engine/types/options/interfaces/fullscreen/ifullscreen.d.ts","./node_modules/@tsparticles/engine/types/options/interfaces/imanualparticle.d.ts","./node_modules/@tsparticles/engine/types/enums/modes/responsivemode.d.ts","./node_modules/@tsparticles/engine/types/options/interfaces/iresponsive.d.ts","./node_modules/@tsparticles/engine/types/enums/modes/thememode.d.ts","./node_modules/@tsparticles/engine/types/options/interfaces/theme/ithemedefault.d.ts","./node_modules/@tsparticles/engine/types/options/interfaces/theme/itheme.d.ts","./node_modules/@tsparticles/engine/types/options/interfaces/ioptions.d.ts","./node_modules/@tsparticles/engine/types/types/isourceoptions.d.ts","./node_modules/@tsparticles/engine/types/enums/types/interactortype.d.ts","./node_modules/@tsparticles/engine/types/options/classes/background/background.d.ts","./node_modules/@tsparticles/engine/types/options/classes/backgroundmask/backgroundmaskcover.d.ts","./node_modules/@tsparticles/engine/types/options/classes/backgroundmask/backgroundmask.d.ts","./node_modules/@tsparticles/engine/types/options/classes/fullscreen/fullscreen.d.ts","./node_modules/@tsparticles/engine/types/options/classes/manualparticle.d.ts","./node_modules/@tsparticles/engine/types/options/classes/responsive.d.ts","./node_modules/@tsparticles/engine/types/options/classes/theme/themedefault.d.ts","./node_modules/@tsparticles/engine/types/options/classes/theme/theme.d.ts","./node_modules/@tsparticles/engine/types/options/classes/options.d.ts","./node_modules/@tsparticles/engine/types/core/interfaces/iinteractor.d.ts","./node_modules/@tsparticles/engine/types/core/interfaces/iloadparams.d.ts","./node_modules/@tsparticles/engine/types/core/interfaces/iparticlemover.d.ts","./node_modules/@tsparticles/engine/types/core/interfaces/iparticlecolorstyle.d.ts","./node_modules/@tsparticles/engine/types/core/interfaces/iparticletransformvalues.d.ts","./node_modules/@tsparticles/engine/types/core/interfaces/iparticleupdater.d.ts","./node_modules/@tsparticles/engine/types/core/interfaces/iplugin.d.ts","./node_modules/@tsparticles/engine/types/core/interfaces/ishapedrawer.d.ts","./node_modules/@tsparticles/engine/types/core/interfaces/ibounds.d.ts","./node_modules/@tsparticles/engine/types/core/interfaces/icirclebouncer.d.ts","./node_modules/@tsparticles/engine/types/core/interfaces/imousedata.d.ts","./node_modules/@tsparticles/engine/types/core/interfaces/icontainerinteractivity.d.ts","./node_modules/@tsparticles/engine/types/core/interfaces/idimension.d.ts","./node_modules/@tsparticles/engine/types/core/interfaces/idrawparticleparams.d.ts","./node_modules/@tsparticles/engine/types/core/interfaces/iexternalinteractor.d.ts","./node_modules/@tsparticles/engine/types/core/interfaces/iparticlelife.d.ts","./node_modules/@tsparticles/engine/types/core/interfaces/iparticlesinteractor.d.ts","./node_modules/@tsparticles/engine/types/core/interfaces/ipositionfromsizeparams.d.ts","./node_modules/@tsparticles/engine/types/core/interfaces/irectsideresult.d.ts","./node_modules/@tsparticles/engine/types/core/interfaces/itrailfilldata.d.ts","./node_modules/@tsparticles/engine/types/options/interfaces/ianimatable.d.ts","./node_modules/@tsparticles/engine/types/options/interfaces/interactivity/modes/imodediv.d.ts","./node_modules/@tsparticles/engine/types/core/utils/eventlisteners.d.ts","./node_modules/@tsparticles/engine/types/core/utils/interactionmanager.d.ts","./node_modules/@tsparticles/engine/types/core/utils/ranges.d.ts","./node_modules/@tsparticles/engine/types/core/utils/point.d.ts","./node_modules/@tsparticles/engine/types/core/utils/quadtree.d.ts","./node_modules/@tsparticles/engine/types/core/particles.d.ts","./node_modules/@tsparticles/engine/types/core/retina.d.ts","./node_modules/@tsparticles/engine/types/export-types.d.ts","./node_modules/@tsparticles/engine/types/core/engine.d.ts","./node_modules/@tsparticles/engine/types/core/canvas.d.ts","./node_modules/@tsparticles/engine/types/core/container.d.ts","./node_modules/@tsparticles/engine/types/core/utils/externalinteractorbase.d.ts","./node_modules/@tsparticles/engine/types/core/utils/particlesinteractorbase.d.ts","./node_modules/@tsparticles/engine/types/enums/directions/rotatedirection.d.ts","./node_modules/@tsparticles/engine/types/enums/types/gradienttype.d.ts","./node_modules/@tsparticles/engine/types/enums/types/eventtype.d.ts","./node_modules/@tsparticles/engine/types/utils/canvasutils.d.ts","./node_modules/@tsparticles/engine/types/utils/colorutils.d.ts","./node_modules/@tsparticles/engine/types/utils/numberutils.d.ts","./node_modules/@tsparticles/engine/types/utils/optionsutils.d.ts","./node_modules/@tsparticles/engine/types/utils/utils.d.ts","./node_modules/@tsparticles/engine/types/utils/typeutils.d.ts","./node_modules/@tsparticles/engine/types/exports.d.ts","./node_modules/@tsparticles/engine/types/index.d.ts","./node_modules/@tsparticles/react/dist/iparticlesprops.d.ts","./node_modules/@tsparticles/react/dist/particles.d.ts","./node_modules/@tsparticles/react/dist/index.d.ts","./node_modules/@tsparticles/slim/types/index.d.ts","./src/components/background/sparkles.tsx","./src/components/background/glowingorbsparklesbackground.tsx","./src/components/background/gradientbarsbackground.tsx","./src/components/background/radialgradientbackground.tsx","./src/components/background/rotatedraysbackground.tsx","./src/components/background/rotatinggradientbackground.tsx","./src/components/background/sparklesgradientbackground.tsx","./src/components/background/herobackgrounds.tsx","./src/components/sections/contact/contactcta.tsx","./src/components/form/emailsignupform.tsx","./src/components/form/contactform.tsx","./src/utils/sendcontactemail.ts","./src/components/sections/contact/contactcenter.tsx","./src/components/accordion.tsx","./src/components/sections/contact/contactfaq.tsx","./src/components/sections/contact/contactsplit.tsx","./src/components/form/input.tsx","./src/components/form/textarea.tsx","./src/components/sections/contact/contactsplitform.tsx","./src/components/sections/contact/contacttext.tsx","./src/components/sections/contact/index.ts","./src/components/sections/faq/faqbase.tsx","./src/components/sections/faq/faqdouble.tsx","./src/components/sections/faq/faqsplitmedia.tsx","./src/components/sections/faq/faqsplittext.tsx","./src/components/sections/faq/index.ts","./node_modules/phenomenon/dist/index.d.ts","./node_modules/cobe/dist/index.d.ts","./src/components/bento/bentoglobe.tsx","./src/components/bento/bentoiconinfocards.tsx","./src/components/bento/bentoanimatedbarchart.tsx","./src/components/bento/bento3dstackcards.tsx","./src/components/bento/bento3dtasklist.tsx","./src/components/bento/bentoorbitingicons.tsx","./src/components/bento/bentomap.tsx","./src/components/bento/bentomarquee.tsx","./node_modules/recharts/types/container/surface.d.ts","./node_modules/recharts/types/container/layer.d.ts","./node_modules/recharts/types/shape/dot.d.ts","./node_modules/@types/d3-path/index.d.ts","./node_modules/@types/d3-shape/index.d.ts","./node_modules/victory-vendor/d3-shape.d.ts","./node_modules/recharts/types/synchronisation/types.d.ts","./node_modules/recharts/types/chart/types.d.ts","./node_modules/recharts/types/component/defaulttooltipcontent.d.ts","./node_modules/recharts/types/component/text.d.ts","./node_modules/recharts/types/zindex/zindexlayer.d.ts","./node_modules/recharts/types/component/label.d.ts","./node_modules/recharts/types/cartesian/cartesianaxis.d.ts","./node_modules/redux/dist/redux.d.ts","./node_modules/@reduxjs/toolkit/node_modules/immer/dist/immer.d.ts","./node_modules/reselect/dist/reselect.d.ts","./node_modules/redux-thunk/dist/redux-thunk.d.ts","./node_modules/@reduxjs/toolkit/dist/uncheckedindexed.ts","./node_modules/@reduxjs/toolkit/dist/index.d.mts","./node_modules/recharts/types/state/optionsslice.d.ts","./node_modules/recharts/types/context/brushupdatecontext.d.ts","./node_modules/recharts/types/state/chartdataslice.d.ts","./node_modules/recharts/types/state/layoutslice.d.ts","./node_modules/recharts/types/state/types/linesettings.d.ts","./node_modules/recharts/types/state/types/scattersettings.d.ts","./node_modules/recharts/types/shape/curve.d.ts","./node_modules/recharts/types/component/labellist.d.ts","./node_modules/recharts/types/state/types/stackedgraphicalitem.d.ts","./node_modules/recharts/types/util/stacks/stacktypes.d.ts","./node_modules/recharts/types/state/selectors/areaselectors.d.ts","./node_modules/recharts/types/cartesian/area.d.ts","./node_modules/recharts/types/state/types/areasettings.d.ts","./node_modules/recharts/types/animation/easing.d.ts","./node_modules/recharts/types/shape/rectangle.d.ts","./node_modules/recharts/types/cartesian/bar.d.ts","./node_modules/recharts/types/util/barutils.d.ts","./node_modules/recharts/types/state/types/barsettings.d.ts","./node_modules/recharts/types/state/types/radialbarsettings.d.ts","./node_modules/recharts/types/util/svgpropertiesnoevents.d.ts","./node_modules/recharts/types/util/useuniqueid.d.ts","./node_modules/recharts/types/state/types/piesettings.d.ts","./node_modules/recharts/types/state/types/radarsettings.d.ts","./node_modules/recharts/types/state/graphicalitemsslice.d.ts","./node_modules/immer/dist/immer.d.ts","./node_modules/recharts/types/util/ifoverflow.d.ts","./node_modules/recharts/types/util/resolvedefaultprops.d.ts","./node_modules/recharts/types/cartesian/referenceline.d.ts","./node_modules/recharts/types/state/referenceelementsslice.d.ts","./node_modules/recharts/types/state/brushslice.d.ts","./node_modules/recharts/types/state/legendslice.d.ts","./node_modules/recharts/types/state/rootpropsslice.d.ts","./node_modules/recharts/types/state/polaraxisslice.d.ts","./node_modules/recharts/types/state/polaroptionsslice.d.ts","./node_modules/recharts/types/cartesian/line.d.ts","./node_modules/recharts/types/shape/symbols.d.ts","./node_modules/recharts/types/cartesian/scatter.d.ts","./node_modules/recharts/types/cartesian/errorbar.d.ts","./node_modules/recharts/types/state/errorbarslice.d.ts","./node_modules/recharts/types/state/zindexslice.d.ts","./node_modules/recharts/types/state/store.d.ts","./node_modules/recharts/types/cartesian/getticks.d.ts","./node_modules/recharts/types/cartesian/cartesiangrid.d.ts","./node_modules/recharts/types/state/selectors/combiners/combinedisplayedstackeddata.d.ts","./node_modules/recharts/types/state/selectors/selecttooltipaxistype.d.ts","./node_modules/recharts/types/state/selectors/axisselectors.d.ts","./node_modules/recharts/types/state/cartesianaxisslice.d.ts","./node_modules/recharts/types/state/tooltipslice.d.ts","./node_modules/recharts/types/util/chartutils.d.ts","./node_modules/recharts/types/component/dots.d.ts","./node_modules/recharts/types/util/types.d.ts","./node_modules/recharts/types/component/defaultlegendcontent.d.ts","./node_modules/recharts/types/util/payload/getuniqpayload.d.ts","./node_modules/recharts/types/util/useelementoffset.d.ts","./node_modules/recharts/types/component/legend.d.ts","./node_modules/recharts/types/component/cursor.d.ts","./node_modules/recharts/types/component/tooltip.d.ts","./node_modules/recharts/types/component/responsivecontainer.d.ts","./node_modules/recharts/types/component/cell.d.ts","./node_modules/recharts/types/component/customized.d.ts","./node_modules/recharts/types/shape/sector.d.ts","./node_modules/recharts/types/shape/polygon.d.ts","./node_modules/recharts/types/shape/cross.d.ts","./node_modules/recharts/types/polar/polargrid.d.ts","./node_modules/recharts/types/polar/defaultpolarradiusaxisprops.d.ts","./node_modules/recharts/types/polar/polarradiusaxis.d.ts","./node_modules/recharts/types/polar/defaultpolarangleaxisprops.d.ts","./node_modules/recharts/types/polar/polarangleaxis.d.ts","./node_modules/recharts/types/polar/pie.d.ts","./node_modules/recharts/types/polar/radar.d.ts","./node_modules/recharts/types/polar/radialbar.d.ts","./node_modules/recharts/types/cartesian/brush.d.ts","./node_modules/recharts/types/cartesian/referencedot.d.ts","./node_modules/recharts/types/util/excludeeventprops.d.ts","./node_modules/recharts/types/util/svgpropertiesandevents.d.ts","./node_modules/recharts/types/cartesian/referencearea.d.ts","./node_modules/recharts/types/cartesian/barstack.d.ts","./node_modules/recharts/types/cartesian/xaxis.d.ts","./node_modules/recharts/types/cartesian/yaxis.d.ts","./node_modules/recharts/types/cartesian/zaxis.d.ts","./node_modules/recharts/types/chart/linechart.d.ts","./node_modules/recharts/types/chart/barchart.d.ts","./node_modules/recharts/types/chart/piechart.d.ts","./node_modules/recharts/types/chart/treemap.d.ts","./node_modules/recharts/types/chart/sankey.d.ts","./node_modules/recharts/types/chart/radarchart.d.ts","./node_modules/recharts/types/chart/scatterchart.d.ts","./node_modules/recharts/types/chart/areachart.d.ts","./node_modules/recharts/types/chart/radialbarchart.d.ts","./node_modules/recharts/types/chart/composedchart.d.ts","./node_modules/recharts/types/chart/sunburstchart.d.ts","./node_modules/recharts/types/shape/trapezoid.d.ts","./node_modules/recharts/types/cartesian/funnel.d.ts","./node_modules/recharts/types/chart/funnelchart.d.ts","./node_modules/recharts/types/util/global.d.ts","./node_modules/recharts/types/zindex/defaultzindexes.d.ts","./node_modules/decimal.js-light/decimal.d.ts","./node_modules/recharts/types/util/scale/getnicetickvalues.d.ts","./node_modules/recharts/types/types.d.ts","./node_modules/recharts/types/hooks.d.ts","./node_modules/recharts/types/context/chartlayoutcontext.d.ts","./node_modules/recharts/types/index.d.ts","./src/components/bento/bentolinechart/customtooltip.tsx","./src/components/bento/bentolinechart/bentolinechart.tsx","./src/components/bento/bentophoneanimation.tsx","./src/components/bento/bentochatanimation.tsx","./src/components/bento/bento3dcardgrid.tsx","./src/components/bento/bentorevealicon.tsx","./src/components/bento/bentotimeline.tsx","./src/components/bento/bentomediastack.tsx","./src/components/sections/feature/featurebento.tsx","./node_modules/motion/dist/react.d.ts","./src/components/background/glowingeffect.tsx","./src/components/sections/feature/featureborderglow/constants.ts","./src/components/sections/feature/featureborderglow/featureborderglowitem.tsx","./src/components/sections/feature/featureborderglow/featureborderglow.tsx","./src/components/cardstack/layouts/timelines/timelinehorizontalcardstack.tsx","./src/components/sections/feature/featurecardeight.tsx","./src/components/sections/feature/featurecardmedia.tsx","./src/components/cardstack/layouts/timelines/timelinephoneview.tsx","./src/components/sections/feature/featurecardnine.tsx","./src/components/cardstack/layouts/timelines/timelinecardstack.tsx","./src/components/sections/feature/featurecardnineteen.tsx","./src/components/sections/feature/featurecardone.tsx","./src/components/cardstack/cardlist.tsx","./src/components/sections/feature/featurecardseven.tsx","./src/components/sections/feature/featurecardsix.tsx","./src/components/shared/pricingfeaturelist.tsx","./src/components/sections/feature/featurecardsixteen.tsx","./src/components/cardstack/layouts/timelines/timelineprocessflow.tsx","./src/components/sections/feature/featurecardten.tsx","./src/components/sections/feature/featurecardthree/featurecardthreeitem.tsx","./src/components/sections/feature/featurecardthree/usedynamicdimensions.ts","./src/hooks/useclickoutside.ts","./src/components/sections/feature/featurecardthree/featurecardthree.tsx","./src/components/sections/feature/featurecardtwelve.tsx","./src/components/sections/feature/featurecardtwentyfive.tsx","./src/components/sections/feature/featurecardtwentyfour.tsx","./src/components/sections/feature/featurecardtwentyone.tsx","./src/components/sections/feature/featurecardtwentyseven.tsx","./src/components/cardstack/layouts/carousels/arrowcarousel.tsx","./src/components/sections/feature/featurecardtwentysix.tsx","./src/components/sections/feature/featurecardtwentythree.tsx","./src/components/background/cardpattern.tsx","./src/components/sections/feature/featurehoverpattern/constants.ts","./src/components/sections/feature/featurehoverpattern/usepatterninteraction.ts","./src/components/sections/feature/featurehoverpattern/featurehoverpatternitem.tsx","./src/components/sections/feature/featurehoverpattern/featurehoverpattern.tsx","./src/components/sections/feature/index.ts","./src/components/shared/footercolumns.tsx","./src/components/sections/footer/footerbase.tsx","./src/components/sections/footer/footerbasecard.tsx","./src/components/sections/footer/footerbasereveal.tsx","./src/components/shared/fillwidthtext/usefillwidthtext.ts","./src/components/shared/fillwidthtext/fillwidthtext.tsx","./src/components/shared/sociallinks.tsx","./src/components/sections/footer/footercard.tsx","./src/components/sections/footer/footerlogoemphasis.tsx","./src/components/sections/footer/footerlogoreveal.tsx","./src/components/sections/footer/footermedia.tsx","./src/components/sections/footer/footersimple.tsx","./src/components/sections/footer/index.ts","./src/components/shared/logomarquee.tsx","./src/components/sections/hero/herobillboard.tsx","./src/components/sections/hero/herobillboardcarousel.tsx","./src/components/sections/animationcontainer.tsx","./node_modules/motion-number/dist/index.d.ts","./src/components/text/textnumbercount.tsx","./src/components/shared/dashboard.tsx","./src/components/sections/hero/herobillboarddashboard.tsx","./src/components/sections/hero/herobillboardgallery.tsx","./src/components/cardstack/layouts/carousels/angledcarousel.tsx","./src/components/sections/hero/herobillboardrotatedcarousel.tsx","./src/components/sections/hero/herobillboardscroll.tsx","./src/components/shared/testimonialauthor.tsx","./src/components/sections/hero/herobillboardtestimonial.tsx","./src/components/sections/hero/herocarousellogo/usecarouselfullscreen.ts","./src/components/sections/hero/herocarousellogo/herocarousellogo.tsx","./src/components/sections/hero/herocentered.tsx","./src/components/sections/hero/herologo.tsx","./src/components/sections/hero/herologobillboard.tsx","./src/components/sections/hero/herologobillboardsplit.tsx","./src/components/sections/hero/herooverlay.tsx","./src/components/sections/hero/heropersonallinks.tsx","./src/components/sections/hero/herosignup.tsx","./src/components/sections/hero/herosplit.tsx","./src/components/sections/hero/herosplitdoublecarousel.tsx","./src/components/sections/hero/herosplitdualmedia.tsx","./src/components/sections/hero/herosplitkpi.tsx","./src/components/sections/hero/herosplittestimonial.tsx","./src/components/sections/hero/index.ts","./src/components/sections/metrics/metriccardeleven.tsx","./src/components/sections/metrics/metriccardfourteen.tsx","./src/components/sections/metrics/metriccardone.tsx","./src/components/sections/metrics/metriccardseven.tsx","./src/components/sections/metrics/metriccardten.tsx","./src/components/sections/metrics/metriccardthree.tsx","./src/components/sections/metrics/metriccardtwo.tsx","./src/components/sections/metrics/index.ts","./src/components/shared/pricingbadge.tsx","./src/components/sections/pricing/pricingcardeight.tsx","./src/components/sections/pricing/pricingcardfive.tsx","./src/components/sections/pricing/pricingcardnine.tsx","./src/components/sections/pricing/pricingcardone.tsx","./src/components/sections/pricing/pricingcardthree.tsx","./src/components/sections/pricing/pricingcardtwo.tsx","./src/components/sections/pricing/index.ts","./src/components/shared/favoritebutton.tsx","./src/components/shared/productimage.tsx","./src/lib/api/product.ts","./src/hooks/useproducts.ts","./src/components/sections/product/productcardfour.tsx","./src/components/sections/product/productcardone.tsx","./src/components/shared/quantitybutton.tsx","./src/components/sections/product/productcardthree.tsx","./src/components/sections/product/productcardtwo.tsx","./src/components/sections/product/index.ts","./src/components/sections/socialproof/socialproofone.tsx","./src/components/sections/socialproof/index.ts","./src/components/sections/team/teamcardeleven.tsx","./src/components/sections/team/teamcardfive.tsx","./src/components/sections/team/teamcardone.tsx","./src/components/sections/team/teamcardsix.tsx","./src/components/sections/team/teamcardten.tsx","./src/components/sections/team/teamcardtwo.tsx","./src/components/sections/team/index.ts","./src/components/sections/testimonial/testimonialcardfifteen.tsx","./src/components/cardstack/layouts/carousels/fullwidthcarousel.tsx","./src/components/sections/testimonial/testimonialcardfive.tsx","./src/components/sections/testimonial/testimonialcardone.tsx","./src/components/sections/testimonial/testimonialcardsix.tsx","./src/components/sections/testimonial/testimonialcardsixteen.tsx","./src/components/sections/testimonial/testimonialcardten.tsx","./src/components/sections/testimonial/testimonialcardthirteen.tsx","./src/components/sections/testimonial/testimonialcardtwelve.tsx","./src/components/sections/testimonial/testimonialcardtwo.tsx","./src/components/sections/testimonial/index.ts","./src/components/shared/svgtextlogo/usesvgtextlogo.ts","./src/hooks/useblogposts.ts","./src/components/ecommerce/cart/productcartitem.tsx","./src/hooks/usecart.ts","./src/hooks/usecheckout.ts","./src/hooks/useproduct.ts","./src/components/ecommerce/productcatalog/productcatalogitem.tsx","./src/components/ecommerce/productdetail/productdetailgallery.tsx","./src/components/ecommerce/productdetail/productdetailvariantselect.tsx","./src/components/ecommerce/productdetail/productdetailcard.tsx","./src/hooks/useproductcatalog.ts","./src/hooks/useproductdetail.ts","./src/lib/gsap-setup.ts","./src/lib/design-agent/theme-provider-options.util.ts","./src/lib/design-agent/design-agent-prompt.ts","./src/lib/design-agent/get-design-agent-prompt.ts","./src/lib/design-agent/index.ts","./src/lib/design-agent/original.ts","./src/providers/themeprovider/utils/detectlightbackground.ts","./src/tag/usetageffects.ts","./src/types/navigation.ts","./src/utils/debounce.ts","./src/utils/visual-edit-script.ts","./src/app/error.tsx","./src/app/global-error.tsx","./node_modules/next/dist/compiled/@next/font/dist/types.d.ts","./node_modules/next/dist/compiled/@next/font/dist/google/index.d.ts","./node_modules/next/font/google/index.d.ts","./src/components/servicewrapper.tsx","./node_modules/@rive-app/canvas/rive_advanced.mjs.d.ts","./node_modules/@rive-app/canvas/rive.d.ts","./node_modules/@rive-app/react-canvas/dist/types/components/rive.d.ts","./node_modules/@rive-app/react-canvas/dist/types/types.d.ts","./node_modules/@rive-app/react-canvas/dist/types/hooks/userive.d.ts","./node_modules/@rive-app/react-canvas/dist/types/hooks/usestatemachineinput.d.ts","./node_modules/@rive-app/react-canvas/dist/types/hooks/useviewmodel.d.ts","./node_modules/@rive-app/react-canvas/dist/types/hooks/useviewmodelinstance.d.ts","./node_modules/@rive-app/react-canvas/dist/types/hooks/useviewmodelinstancenumber.d.ts","./node_modules/@rive-app/react-canvas/dist/types/hooks/useviewmodelinstancestring.d.ts","./node_modules/@rive-app/react-canvas/dist/types/hooks/useviewmodelinstanceboolean.d.ts","./node_modules/@rive-app/react-canvas/dist/types/hooks/useviewmodelinstancecolor.d.ts","./node_modules/@rive-app/react-canvas/dist/types/hooks/useviewmodelinstanceenum.d.ts","./node_modules/@rive-app/react-canvas/dist/types/hooks/useviewmodelinstancetrigger.d.ts","./node_modules/@rive-app/react-canvas/dist/types/hooks/useviewmodelinstanceimage.d.ts","./node_modules/@rive-app/react-canvas/dist/types/hooks/useviewmodelinstancelist.d.ts","./node_modules/@rive-app/react-canvas/dist/types/hooks/useresizecanvas.d.ts","./node_modules/@rive-app/react-canvas/dist/types/hooks/userivefile.d.ts","./node_modules/@rive-app/react-canvas/dist/types/hooks/useviewmodelinstanceartboard.d.ts","./node_modules/@rive-app/react-canvas/dist/types/index.d.ts","./src/tag/tag.tsx","./src/app/layout.tsx","./src/app/page.tsx","./src/components/navbar/expandingmenu/expandingmenu.tsx","./src/components/navbar/logo.tsx","./src/components/navbar/navbarlayoutfloatingoverlay/navbarlayoutfloatingoverlay.tsx","./src/app/blog/page.tsx","./src/app/components/page.tsx","./src/app/components/background/page.tsx","./src/app/components/background/animatedgridbackground/page.tsx","./src/app/components/background/aurorabackground/page.tsx","./src/app/components/background/blurbottombackground/page.tsx","./src/app/components/background/canvasrevealbackground/page.tsx","./src/app/components/background/cellwavebackground/page.tsx","./src/app/components/background/circlegradientbackground/page.tsx","./src/components/background/dotgridbackground.tsx","./src/app/components/background/dotgridbackground/page.tsx","./src/app/components/background/downwardraysbackground/page.tsx","./src/app/components/background/floatinggradientbackground/page.tsx","./src/app/components/background/fluidbackground/page.tsx","./src/app/components/background/glowingorbbackground/page.tsx","./src/app/components/background/gradientbarsbackground/page.tsx","./src/app/components/background/gridbackground/page.tsx","./src/app/components/background/noisebackground/page.tsx","./src/app/components/background/noisediagonalgradientbackground/page.tsx","./src/components/background/noisegradientbackground.tsx","./src/app/components/background/noisegradientbackground/page.tsx","./src/components/background/plainbackground.tsx","./src/app/components/background/plainbackground/page.tsx","./src/app/components/background/radialgradientbackground/page.tsx","./src/app/components/background/rotatedraysbackground/page.tsx","./src/app/components/background/rotatinggradientbackground/page.tsx","./src/app/components/background/sparkles/page.tsx","./src/app/components/background/sparklesgradientbackground/page.tsx","./src/app/components/buttons/page.tsx","./src/app/components/buttons/buttonbounceeffect/page.tsx","./src/app/components/buttons/buttondirectionalhover/page.tsx","./src/app/components/buttons/buttonelasticeffect/page.tsx","./src/app/components/buttons/buttonexpandhover/page.tsx","./src/app/components/buttons/buttonhoverbubble/page.tsx","./src/app/components/buttons/buttonhovermagnetic/page.tsx","./src/app/components/buttons/buttoniconarrow/page.tsx","./src/app/components/buttons/buttonshifthover/page.tsx","./src/components/button/buttonslidebackground.tsx","./src/app/components/buttons/buttonslidebackground/page.tsx","./src/app/components/buttons/buttontextshift/page.tsx","./src/app/components/buttons/buttontextstagger/page.tsx","./src/app/components/buttons/buttontextunderline/page.tsx","./src/app/components/ecommerce/page.tsx","./src/components/navbar/navbarlayoutfloatinginline.tsx","./src/components/ecommerce/productcatalog/productcatalog.tsx","./src/app/components/ecommerce/product-catalog/page.tsx","./src/components/ecommerce/cart/productcart.tsx","./src/app/components/ecommerce/product-detail-card/page.tsx","./src/app/components/example/page.tsx","./src/components/navbar/mobilemenu/mobilemenu.tsx","./src/components/navbar/navbarstyleapple/navbarstyleapple.tsx","./src/app/components/example2/page.tsx","./src/app/components/example3/page.tsx","./src/app/components/example4/page.tsx","./src/app/components/navbar/page.tsx","./src/app/components/navbar/navbarlayoutfloatinginline/page.tsx","./src/app/components/navbar/navbarlayoutfloatingoverlay/page.tsx","./src/app/components/navbar/navbarstyleapple/page.tsx","./src/components/navbar/hamburgerbutton.tsx","./src/components/navbar/navbarstylecentered/navbarstylecentered.tsx","./src/app/components/navbar/navbarstylecentered/page.tsx","./src/components/navbar/navbarstylefullscreen/navbarstylefullscreen.tsx","./src/app/components/navbar/navbarstylefullscreen/page.tsx","./src/app/components/sections/page.tsx","./src/app/components/sections/about/page.tsx","./src/app/components/sections/about/inline-image-split-text/page.tsx","./src/app/components/sections/about/media/page.tsx","./src/app/components/sections/about/metric/page.tsx","./src/app/components/sections/about/metric-split-media/page.tsx","./src/app/components/sections/about/split/page.tsx","./src/app/components/sections/about/testimonial-about-card/page.tsx","./src/app/components/sections/about/text/page.tsx","./src/app/components/sections/about/text-split/page.tsx","./src/app/components/sections/blog/page.tsx","./src/app/components/sections/blog/card-one/page.tsx","./src/app/components/sections/blog/card-three/page.tsx","./src/app/components/sections/blog/card-two/page.tsx","./src/app/components/sections/contact/page.tsx","./src/app/components/sections/contact/center/page.tsx","./src/app/components/sections/contact/cta/page.tsx","./src/app/components/sections/contact/faq/page.tsx","./src/app/components/sections/contact/split/page.tsx","./src/app/components/sections/contact/splitform/page.tsx","./src/app/components/sections/contact/text/page.tsx","./src/app/components/sections/faq/page.tsx","./src/app/components/sections/faq/base/page.tsx","./src/app/components/sections/faq/double/page.tsx","./src/app/components/sections/faq/split-media/page.tsx","./src/app/components/sections/faq/split-text/page.tsx","./src/app/components/sections/feature/page.tsx","./src/app/components/sections/feature/bento/page.tsx","./src/app/components/sections/feature/border-glow/page.tsx","./src/app/components/sections/feature/card-eight/page.tsx","./src/app/components/sections/feature/card-media/page.tsx","./src/app/components/sections/feature/card-nine/page.tsx","./src/app/components/sections/feature/card-nineteen/page.tsx","./src/app/components/sections/feature/card-one/page.tsx","./src/app/components/sections/feature/card-seven/page.tsx","./src/app/components/sections/feature/card-six/page.tsx","./src/app/components/sections/feature/card-sixteen/page.tsx","./src/app/components/sections/feature/card-ten/page.tsx","./src/app/components/sections/feature/card-three/page.tsx","./src/app/components/sections/feature/card-twelve/page.tsx","./src/app/components/sections/feature/card-twenty-five/page.tsx","./src/app/components/sections/feature/card-twenty-four/page.tsx","./src/app/components/sections/feature/card-twenty-one/page.tsx","./src/app/components/sections/feature/card-twenty-seven/page.tsx","./src/app/components/sections/feature/card-twenty-six/page.tsx","./src/app/components/sections/feature/card-twenty-three/page.tsx","./src/app/components/sections/feature/hover-pattern/page.tsx","./src/components/sections/feature/featuretimelinebento.tsx","./src/app/components/sections/feature/timeline-bento/page.tsx","./src/app/components/sections/footer/page.tsx","./src/app/components/sections/footer/base/page.tsx","./src/app/components/sections/footer/base-card/page.tsx","./src/app/components/sections/footer/base-reveal/page.tsx","./src/app/components/sections/footer/card/page.tsx","./src/app/components/sections/footer/logo-emphasis/page.tsx","./src/components/sections/footer/footerlogoemphasisreveal.tsx","./src/app/components/sections/footer/logo-emphasis-reveal/page.tsx","./src/app/components/sections/footer/logo-reveal/page.tsx","./src/app/components/sections/footer/media/page.tsx","./src/app/components/sections/footer/simple/page.tsx","./src/app/components/sections/hero/page.tsx","./src/app/components/sections/hero/billboard/page.tsx","./src/app/components/sections/hero/billboard-carousel/page.tsx","./src/app/components/sections/hero/billboard-dashboard/page.tsx","./src/app/components/sections/hero/billboard-gallery/page.tsx","./src/app/components/sections/hero/billboard-rotated-carousel/page.tsx","./src/app/components/sections/hero/billboard-scroll/page.tsx","./src/app/components/sections/hero/billboard-testimonial/page.tsx","./src/app/components/sections/hero/carousel-logo/page.tsx","./src/app/components/sections/hero/centered/page.tsx","./src/app/components/sections/hero/logo/page.tsx","./src/app/components/sections/hero/logo-billboard/page.tsx","./src/app/components/sections/hero/logo-billboard-split/page.tsx","./src/app/components/sections/hero/overlay/page.tsx","./src/app/components/sections/hero/signup/page.tsx","./src/app/components/sections/hero/split/page.tsx","./src/app/components/sections/hero/split-double-carousel/page.tsx","./src/app/components/sections/hero/split-dual-media/page.tsx","./src/app/components/sections/hero/split-kpi/page.tsx","./src/app/components/sections/hero/split-testimonial/page.tsx","./src/app/components/sections/legal/page.tsx","./src/components/legal/legalsection.tsx","./src/app/components/sections/legal/privacy-policy/page.tsx","./src/app/components/sections/legal/terms-of-service/page.tsx","./src/app/components/sections/metrics/page.tsx","./src/app/components/sections/metrics/card-eleven/page.tsx","./src/app/components/sections/metrics/card-fourteen/page.tsx","./src/app/components/sections/metrics/card-one/page.tsx","./src/app/components/sections/metrics/card-seven/page.tsx","./src/app/components/sections/metrics/card-ten/page.tsx","./src/app/components/sections/metrics/card-three/page.tsx","./src/app/components/sections/metrics/card-two/page.tsx","./src/app/components/sections/pricing/page.tsx","./src/app/components/sections/pricing/card-eight/page.tsx","./src/app/components/sections/pricing/card-five/page.tsx","./src/app/components/sections/pricing/card-nine/page.tsx","./src/app/components/sections/pricing/card-one/page.tsx","./src/app/components/sections/pricing/card-three/page.tsx","./src/app/components/sections/pricing/card-two/page.tsx","./src/app/components/sections/product/page.tsx","./src/app/components/sections/product/card-four/page.tsx","./src/app/components/sections/product/card-one/page.tsx","./src/app/components/sections/product/card-three/page.tsx","./src/app/components/sections/product/card-two/page.tsx","./src/app/components/sections/socialproof/page.tsx","./src/app/components/sections/socialproof/one/page.tsx","./src/app/components/sections/team/page.tsx","./src/app/components/sections/team/card-eleven/page.tsx","./src/app/components/sections/team/card-five/page.tsx","./src/app/components/sections/team/card-six/page.tsx","./src/app/components/sections/team/card-ten/page.tsx","./src/app/components/sections/team/one/page.tsx","./src/app/components/sections/team/two/page.tsx","./src/app/components/sections/testimonial/page.tsx","./src/app/components/sections/testimonial/card-fifteen/page.tsx","./src/app/components/sections/testimonial/card-five/page.tsx","./src/app/components/sections/testimonial/card-one/page.tsx","./src/app/components/sections/testimonial/card-six/page.tsx","./src/app/components/sections/testimonial/card-sixteen/page.tsx","./src/app/components/sections/testimonial/card-ten/page.tsx","./src/app/components/sections/testimonial/card-thirteen/page.tsx","./src/app/components/sections/testimonial/card-twelve/page.tsx","./src/app/components/sections/testimonial/card-two/page.tsx","./src/app/components/shared/dashboard/page.tsx","./src/app/components/templates/page.tsx","./src/app/components/templates/ai-agents/page.tsx","./src/app/components/templates/architecture-studio/page.tsx","./src/app/components/templates/business-coach/page.tsx","./src/app/components/templates/dentist/page.tsx","./src/app/components/templates/italian-restaurant/page.tsx","./src/app/components/templates/japanese-restaurant/page.tsx","./src/app/components/templates/luxury-travel-agency/page.tsx","./src/app/components/templates/merydian/page.tsx","./src/app/components/templates/online-course/page.tsx","./src/app/components/templates/personal-grid/page.tsx","./src/app/components/templates/personal-trainer/page.tsx","./src/app/components/templates/real-estate/page.tsx","./src/app/components/templates/saas/page.tsx","./src/app/components/templates/skincare/page.tsx","./src/app/components/templates/skincare-luxury/page.tsx","./src/app/components/templates/waitlist/page.tsx","./src/app/components/templates/web-agency/page.tsx","./src/app/components/test/page.tsx","./src/app/components/text/page.tsx","./src/app/components/text/textanimation/page.tsx","./src/app/components/text/textnumbercount/page.tsx","./src/app/components/textbox/page.tsx","./src/app/shop/page.tsx","./src/app/shop/[id]/page.tsx","./src/components/background/animatedaurorabackground.tsx","./src/components/button/selectorbutton.tsx","./src/components/form/waitlistform.tsx","./src/components/shared/svgtextlogo/svgtextlogo.tsx","./.next/types/validator.ts","./node_modules/@types/d3-array/index.d.ts","./node_modules/@types/d3-color/index.d.ts","./node_modules/@types/d3-ease/index.d.ts","./node_modules/@types/d3-interpolate/index.d.ts","./node_modules/@types/d3-time/index.d.ts","./node_modules/@types/d3-scale/index.d.ts","./node_modules/@types/d3-timer/index.d.ts","./node_modules/@types/draco3d/index.d.ts","./node_modules/@types/estree/index.d.ts","./node_modules/@types/json-schema/index.d.ts","./node_modules/@types/json5/index.d.ts","./node_modules/@types/offscreencanvas/index.d.ts","./node_modules/@types/stats.js/index.d.ts","./node_modules/@types/three/index.d.ts","./node_modules/@types/use-sync-external-store/index.d.ts"],"fileIdsList":[[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,278,499,502,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1952,1953,1957,1958,1959,1960,1961,1962,1963,1964,1965,1967,1968,1969,1970,1971,1972,1973,1974,1975,1977,1979,1980,1981,1982,1983,1984,1985,1986,1987,1988,1989,1990,1991,1992,1993,1995,1996,1997,1998,1999,2002,2004,2005,2008,2009,2010,2011,2012,2013,2014,2017,2019,2020,2021,2022,2023,2024,2025,2026,2027,2028,2029,2030,2031,2032,2033,2034,2035,2036,2037,2038,2039,2040,2041,2042,2043,2044,2045,2046,2047,2048,2049,2050,2051,2052,2053,2054,2055,2056,2057,2058,2059,2060,2061,2062,2063,2064,2065,2066,2069,2070,2071,2072,2073,2074,2077,2078,2079,2080,2081,2082,2083,2084,2085,2086,2087,2088,2089,2090,2091,2092,2093,2094,2095,2096,2097,2098,2099,2100,2102,2103,2104,2105,2106,2107,2108,2109,2110,2111,2112,2113,2114,2115,2116,2117,2118,2119,2120,2121,2122,2123,2124,2125,2126,2127,2128,2129,2130,2131,2132,2133,2134,2135,2136,2137,2138,2139,2140,2141,2142,2143,2144,2145,2146,2147,2148,2149,2150,2151,2153,2154,2155,2156,2157,2158,2160,2161,2162,2163,2164,2165,2166,2167,2168],[97,144,500,501,502,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,278,500,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,813,832,838,1123,1124,1126,1142,1164,1182,1192,1195,1196,1198,1200,1201,1202,1217,1219,1223,1227,1228,1229,1233,1235,1236,1249,1294],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,813,832,838,1115,1123,1124,1126,1142,1164,1182,1192,1195,1196,1198,1200,1201,1202,1217,1219,1223,1227,1228,1229,1233,1235,1236,1249,1294],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,832,1123,1124,1126,1142,1164,1192,1195,1196,1198,1200,1201,1202,1217,1219,1223,1227,1228,1229,1233,1235,1236,1249,1294],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,813,832,1123,1124,1126,1142,1164,1182,1192,1195,1196,1198,1200,1201,1202,1217,1219,1223,1227,1228,1229,1233,1235,1236,1249,1294],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,813,832,838,1123,1124,1126,1142,1164,1182,1192,1195,1196,1198,1200,1201,1202,1217,1219,1223,1227,1228,1229,1233,1235,1236,1249,1294],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,813,832,1123,1124,1126,1142,1164,1182,1192,1195,1196,1198,1200,1201,1202,1217,1219,1223,1227,1228,1229,1233,1235,1236,1249,1294],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,813,832,838,1123,1124,1126,1142,1158,1164,1182,1192,1195,1196,1198,1200,1201,1202,1217,1219,1223,1227,1228,1229,1233,1235,1236,1249,1294],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,838],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,838,1115,1116],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,813,821,832,1123,1124,1126,1142,1164,1182,1192,1195,1196,1198,1200,1201,1202,1217,1219,1223,1227,1228,1229,1233,1235,1236,1249,1294],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,813,1182],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,813,838,1115,1116,1182],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,813,832,838,1115,1123,1124,1126,1142,1164,1182,1192,1195,1196,1198,1200,1201,1202,1217,1219,1223,1227,1228,1229,1233,1235,1236,1249,1294],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1180],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,813,832,1115,1123,1124,1126,1142,1164,1182,1192,1195,1196,1198,1200,1201,1202,1215,1216,1217,1219,1223,1227,1228,1229,1233,1235,1236,1249,1294],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,813,1136,1182],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,832,838,1115,1123,1124,1126,1142,1164,1192,1195,1196,1198,1200,1201,1202,1217,1219,1223,1227,1228,1229,1233,1235,1236,1249,1294],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,813,832,1115,1123,1124,1126,1136,1142,1164,1182,1192,1195,1196,1198,1200,1201,1202,1217,1219,1223,1227,1228,1229,1233,1235,1236,1249,1294],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,813,837,1182],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,847,848,849,1116,1117,1118,1119,1120,1121,1122,1123,1124,1125,1126,1127,1128,1133,1134,1135,1136,1137,1138,1139,1140,1141,1142,1143,1144,1145,1146,1147,1148,1149,1150,1151,1152,1153,1154,1159,1160,1161,1162,1163,1164,1165,1166,1167,1168,1169,1171,1172,1173,1174,1176,1177,1178,1179,1181,1183,1184,1185,1186,1187,1188,1189,1190,1191,1192,1193,1194,1195,1196,1198,1200,1201,1202,1203,1204,1205,1206,1207,1208,1209,1210,1211,1212,1213,1214,1216,1217,1218,1219,1220,1221,1222,1223,1224,1225,1226,1227,1228,1229,1230,1231,1233,1234,1235,1236,1237,1238,1239,1240,1241,1242,1243,1244,1245,1246,1247,1248,1249,1250],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,813,821,832,838,1123,1124,1126,1142,1164,1182,1192,1195,1196,1198,1200,1201,1202,1217,1219,1223,1227,1228,1229,1233,1235,1236,1249,1294],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,813,1182],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,832,838,1123,1124,1126,1142,1164,1192,1195,1196,1197,1198,1200,1201,1202,1217,1219,1223,1227,1228,1229,1233,1235,1236,1249,1294],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,813,832,1123,1124,1126,1142,1164,1182,1192,1195,1196,1198,1199,1200,1201,1202,1217,1219,1223,1227,1228,1229,1233,1235,1236,1249,1294],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,817],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,813,821,832,1123,1124,1126,1142,1164,1172,1182,1192,1195,1196,1198,1200,1201,1202,1217,1219,1223,1227,1228,1229,1233,1235,1236,1249,1294],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,832,1123,1124,1126,1142,1164,1192,1195,1196,1198,1200,1201,1202,1210,1215,1217,1218,1219,1223,1227,1228,1229,1233,1235,1236,1249,1294],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,838,1175],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,832,838,1123,1124,1126,1142,1164,1192,1195,1196,1198,1200,1201,1202,1217,1219,1223,1227,1228,1229,1233,1235,1236,1249,1294],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,813,832,838,1115,1122,1123,1124,1126,1142,1164,1182,1192,1195,1196,1198,1200,1201,1202,1217,1219,1223,1227,1228,1229,1233,1235,1236,1249,1294],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,813,838,1132,1182],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,813,1182,1215],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1115],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,813,1170,1182],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,813,832,1123,1124,1126,1142,1164,1182,1192,1195,1196,1198,1200,1201,1202,1217,1219,1223,1227,1228,1229,1232,1233,1235,1236,1249,1294],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1292],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,813,838,1182,1289],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,813,1171,1182,1257,1258],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1257],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,813,832,837,838,1123,1124,1126,1142,1164,1182,1192,1195,1196,1198,1200,1201,1202,1217,1219,1223,1227,1228,1229,1233,1235,1236,1249,1294],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,839,840,841,842,843,844,845,846,1251,1252,1254,1255,1256,1258,1259,1290,1291],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,813,838,1182,1253],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,813,1170,1171,1182],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,813,838,1182],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,813,819,821,1182],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,813,819,820,821,1182],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,819,820,821,822,823,824,825],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,651,819],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,813,814,819,821,822,827,1182],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,813,819,820,821,822,827,1182],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,651,813,817,818,821,822,1182],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,813,814,819,820,1182],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,826,827,829,830],[85,89,97,144,193,194,196,197,278,405,446,493,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,813,821,826,1182],[85,97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,826,827,828],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,819,822],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,831],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1659,1660,1661,1662,1663],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1931],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1932],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1932,1934],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1934],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1932],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1932,1934],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1932,1933,1934,1935,1936,1937,1938,1939,1940,1941,1942,1943,1944,1945,1946,1947,1948,1949],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1422,1534,1535,1572,1590,1592],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1427,1534,1535,1537,1549,1559,1567,1571,1587,1588,1590,1591],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1414,1415,1416,1417,1418,1420,1427,1447,1488,1533,1534,1535,1537,1549,1559,1560,1561,1562,1565,1566,1567,1589,1592],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1411,1418],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1419],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1412,1425],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1570],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1412,1421,1422,1423,1424,1534],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1409,1411],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1409],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1422,1481,1534,1563,1564,1592],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1534,1536,1592],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1422,1447,1458,1497,1534,1560],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1422,1447,1488,1533,1534,1549,1550,1559],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1418,1549],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1412],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1422,1425,1534,1592],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1429],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1422,1534],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1431],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1433],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1422,1534,1560],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1422,1447,1488,1533,1534,1563,1564],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1411,1428],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1535,1549,1559,1592],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1412,1572],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1447,1488],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1412,1419,1422,1425,1426,1427,1429,1430,1432,1434,1447,1448,1488,1489,1498,1499,1533,1590,1592],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1412,1422,1447,1488,1534,1562,1565,1570,1572,1586,1590,1592],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1534,1592],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1592],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1422,1534,1550,1574,1592],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1422,1534,1590,1592],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1422,1534,1550,1576,1592],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1412,1534],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1412,1534,1572,1584,1585],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1410,1411,1412,1415,1416,1418,1419,1420,1421,1422,1423,1426,1427,1429,1430,1431,1432,1434,1437,1438,1439,1440,1442,1443,1444,1445,1446,1447,1448,1449,1450,1451,1453,1454,1455,1456,1457,1458,1460,1462,1463,1464,1465,1466,1467,1469,1471,1472,1473,1475,1476,1477,1479,1480,1481,1482,1483,1484,1485,1486,1487,1488,1489,1490,1534,1535,1536,1537,1538,1539,1540,1541,1542,1544,1546,1547,1548,1549,1560,1561,1562,1563,1564,1565,1566,1567,1568,1569,1570,1571,1572,1573,1574,1575,1576,1577,1578,1579,1580,1581,1582,1583,1586,1587,1588,1590,1591,1592],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1409,1413,1414,1424,1425,1428,1433,1435,1436,1441,1452,1459,1461,1470,1474,1478,1491,1492,1493,1494,1495,1496,1497,1498,1499,1500,1501,1502,1503,1504,1505,1506,1507,1508,1509,1510,1512,1513,1514,1515,1516,1518,1519,1520,1521,1522,1523,1524,1525,1526,1527,1528,1529,1530,1531,1532,1533,1543,1545,1550,1551,1552,1553,1554,1555,1556,1557,1558,1559,1584,1585,1593,1594,1595,1596,1597,1598,1599,1600,1601,1602,1603],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1589,1604],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1418,1440,1447,1490,1502,1503],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1411,1435,1436,1437,1447,1490],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1447,1490,1503,1538],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1447,1490,1540,1552],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1447,1490,1503,1539],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1411,1438,1447,1490,1500],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1447,1490,1541],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1439,1447,1490,1501],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1418,1447,1451,1490],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1418,1447,1452,1453,1490],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1418,1447,1457,1490,1491,1492,1494,1495],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1418,1447,1455,1490,1493],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1447,1454,1490],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1447,1456,1490],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1447,1459,1460,1490,1496,1497,1590,1592],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1447,1458,1490,1590,1592],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1412,1447,1488,1490,1542],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1411,1418,1447,1490,1498,1533,1548,1549,1551,1553,1554,1555,1556,1558,1590,1592],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1418,1419,1423,1447,1490],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1445,1447,1490,1508],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1507],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1411,1441,1446,1447,1490,1505,1506,1509],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1442,1447,1490],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1443,1447,1490],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1418,1447,1449,1450,1490],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1411,1431,1447,1461,1473,1490,1512,1513,1514,1515,1516,1518,1519,1520],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1411,1447,1462,1490],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1411,1412,1447,1463,1490],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1409,1447,1464,1490],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1411,1447,1465,1490],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1447,1469,1490,1517],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1447,1468,1490,1503],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1447,1470,1471,1490],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1447,1466,1467,1490,1507],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1411,1412,1447,1472,1490],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1447,1477,1490],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1447,1480,1490,1524,1525],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1447,1478,1479,1490],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1447,1476,1490,1507,1522],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1447,1474,1475,1490,1500],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1418,1447,1460,1487,1488,1490,1504,1509,1510,1511,1521,1523,1526,1527,1528,1530,1531,1532,1590,1592],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1412,1447,1481,1490,1503],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1418,1447,1449,1482,1490],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1447,1484,1490,1507,1529],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1447,1474,1483,1490,1500],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1411,1447,1485,1490,1504],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1447,1486,1490,1507],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1447,1490,1543,1544,1549],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1447,1490,1547,1549,1557],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1447,1490,1545,1546],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1411,1444,1447,1490,1500],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1423],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1419,1447,1539],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1437],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1423,1438,1439],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1411,1435,1436],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1411,1437],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1438],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1412,1447,1488],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1418],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1418,1452],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1418,1451,1453,1455,1456],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1418,1454],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1457,1458,1459],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1447],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1411,1418,1447,1460,1488,1538,1540,1541,1542,1544,1547],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1543,1549],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1444],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1411,1441,1442,1443,1445],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1418,1449],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1418,1440,1445,1446,1447,1450,1460,1473,1476,1480,1481,1482,1484,1485,1486,1487],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1412,1423],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1411,1419,1440,1447],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1411,1431,1461,1462,1463,1464,1465,1467,1469,1470,1471,1472],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1411],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1411,1412],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1468],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1470],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1444,1466],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1477,1479],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1478],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1444,1475],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1437,1474],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1444,1483],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1546,1549],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1545],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1415],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1447,1548],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1488],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1410],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1418,1448],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1412,1419,1422,1433,1534,1535,1572,1573,1592],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1410,1419,1422,1423,1429,1430,1502,1534,1590],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1411,1412,1425,1461,1577],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1447,1488,1490,1533,1590,1592],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1412,1418,1422,1424,1429,1474,1492,1507,1534,1568,1569,1572,1581],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1605,1606,1607],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1605],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1606],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1605],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,2175],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,2178],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1649],[97,141,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,143,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,149,177,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,145,150,155,163,174,185,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,145,146,155,163,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[92,93,94,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,147,186,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,148,149,156,164,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,149,174,182,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,150,152,155,163,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,143,144,151,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,152,153,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,154,155,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,143,144,155,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,155,156,157,174,185,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,155,156,157,170,174,177,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,152,155,158,163,174,185,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,155,156,158,159,163,174,182,185,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,158,160,174,182,185,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[95,96,97,98,99,100,101,140,141,142,143,144,145,146,147,148,149,150,151,152,153,154,155,156,157,158,159,160,161,162,163,164,165,166,167,168,169,170,171,172,173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190,191,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,155,161,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,162,185,190,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,152,155,163,174,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,164,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,165,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,143,144,166,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,141,142,143,144,145,146,147,148,149,150,151,152,153,154,155,156,157,158,159,160,161,162,163,164,165,166,167,168,169,170,171,172,173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190,191,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,168,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,169,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,155,170,171,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,170,172,186,188,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,155,174,175,177,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,176,177,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,174,175,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,177,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,178,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,141,144,174,179,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,155,180,181,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,180,181,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,149,163,174,182,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,183,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,163,184,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,158,169,185,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,149,186,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,174,187,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,162,188,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,189,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,139,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,139,144,155,157,166,174,177,185,188,190,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,174,191,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[85,89,97,144,193,194,195,197,446,493,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827],[85,89,97,144,193,194,195,196,408,446,493,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827],[85,97,144,197,408,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[85,89,97,144,194,196,197,446,493,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827],[85,89,97,144,193,196,197,446,493,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827],[83,84,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,812],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,564,587,671,673],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,564,580,581,586,671],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,564,587,599,671,672,674],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,671],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,568,587],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,564,568,583,584,585],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,668,671],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,676],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,586],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,564,586],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,671,684,685],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,686],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,671,684],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,685,686],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,652],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,564,565,573,574,580,671],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,564,575,604,671,689],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,575,671],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,566,575,671],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,575,652],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,564,567,573],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,566,568,570,571,573,580,593,596,598,599,600],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,568],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,601],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,568,569],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,564,568,570],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,567,568,569,573],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,565,567,571,572,573,575,580,587,591,599,601,602,607,608,637,659,666,668,670],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,565,566,575,580,657,669,671],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,574,599,603,608],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,604],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,564,599,622],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,599,671],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,566,580],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,566,580,588],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,566,589],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,566,590],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,566,577,590,591],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,701],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,580,588],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,566,588],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,701,702,703,704,705,706,707,708,709,710],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,580,606,608,632,637,659],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,566],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,564,608],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,719],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,721],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,566,580,588,591,601],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,716,717,718,719,720,721,722,723,724,725,726,727,728,729,730,731,732,733,734,735,736],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,566,601],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,591,601],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,580,588,601],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,577,580,654,671,738],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,577,601,609,740],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,577,596,740],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,577,601,609,671,740],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,573,575,577,740],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,573,577,671,738,746],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,573,577,611,671,749],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,594,740],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,573,577,671,753],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,577,740],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,573,577,581,671,740,756],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,573,577,634,671,740],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,577,634],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,577,580,634,671,745],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,633,691],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,577,580,634],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,577,633,671],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,634,760],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,564,566,573,574,575,631,632,634,671],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,577,634,752],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,633,634,652],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,577,580,608,634,671,763],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,633,652],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,587,765,766],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,765,766],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,601,695,765,766],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,605,765,766],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,606,765,766],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,667,765,766],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,765],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,766],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,608,666,765,766],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,587,601,607,608,666,671,695,765,766],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,608,765,766],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,577,608,666],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,609,666],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,564,566,572,575,577,594,599,601,602,607,608,637,659,665,671],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,609,610,611,612,613,614,615,616,617,618,619,620,621,625,626,627,628,666],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,564,572,577,608,666],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,564,608,666],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,608,666],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,564,566,572,577,608,666],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,564,566,577,608,666],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,564,566,608,666],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,566,577,608,618,666],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,625],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,564,566,567,573,574,580,623,624,666,671],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,577,666],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,568,573,580,593,594,595,671],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,567,568,570,576,580],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,564,567,577,580],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,580],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,571,573,580],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,564,573,580,593,594,596,630,671],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,564,580,593,596,630,653,671],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,582],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,573,580],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,571],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,566,573,580],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,564,567,571,572,580],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,567,573,580,592,593,596],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,568,570,572,573,580],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,573,580,593,594,596],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,573,580,594,596],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,566,568,570,574,580,594,596],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,567,568],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,567,568,570,571,572,573,575,577,578,579],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,568,571,573],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,573,575,577,593,596,601,654,666],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,568,573,577,593,596,601,654,666,667,671,694],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,601,666,671],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,601,666,671,738],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,580,601,666,671],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,573,581,667],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,564,573,580,593,596,601,654,666,668,671],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,566,601,629,671],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,568,597],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,624],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,566,567,577],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,623,624],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,568,570,600],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,568,601,646,660,666,671],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,640,647],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,564],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,575,594,641,666],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,659],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,608,659],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,568,601,647,660,671],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,646],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,640],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,645,659],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,564,624,634,637,639,640,646,659,661,662,663,664,666,671],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,575,601,602,637,641,646,666,671],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,564,575,634,637,639,649,659],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,564,574,632,640,666],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,639,640,641,642,643,647],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,644,646],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,564,640],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,604,632,790],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,604,632,792],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,604,606,608,632,659],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,564,566,568,574,575,577,580,594,596,601,608,632,637,638,639,640,641,642,646,647,648,650,658,666,671],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,604,608],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,580,602,671],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,654,656,658],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,574,599,651,652,653,654,656,657,659],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,577],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,572,577,606,608,635,636,666,671],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,564,605],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,564,568,608],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,608,655],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,564,566,567,599,604,605,606,607],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,564,798],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,564,565,566,567,568,569,570,571,572,573,574,575,576,577,578,579,580,581,582,583,584,585,586,587,588,589,590,591,592,593,594,595,596,599,600,601,602,603,604,605,606,607,608,622,623,629,630,631,632,633,634,635,636,637,638,652,653,654,656,657,667,668,669,670,671,672,673,674,675,676,677,678,679,680,681,682,683,684,685,686,687,688,689,690,691,692,693,694,695,696,697,698,699,700,711,712,713,714,715,737,738,739,740,741,742,743,744,745,746,747,748,749,750,751,752,753,754,755,756,757,758,759,760,761,762,763,764,765,766,767,768,769,770,771,772,773,774,775,776,777,778,779,780,781,782,783,784,785,786,787,788,789,790,791,792,793,794,795,796,797,798,799,800],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,624,639,640,641,642,643,644,645,646,647,648,649,650,657,658,659,660,661,662,663,664,665,801,802,803,804,805,806,807,808,809,810,811],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1286],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1265,1272],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1272],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1266,1267,1272],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1266,1267,1268,1272],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1268,1272],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1271],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1262,1265,1268,1269],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1260,1261],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1260,1261,1262],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1260,1261,1262,1263,1264,1270],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1260,1262],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1283],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1284],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1273,1274],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1273,1275,1276,1277,1278,1279,1280,1281,1282,1285,1287],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1273],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1288],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,813,1155,1156,1182],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1156,1157],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1636],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1338],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1387],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1312,1332],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1306],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1307,1311,1312,1313,1314,1315,1317,1319,1320,1325,1326,1335],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1307,1312],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1315,1332,1334,1337],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1306,1307,1308,1309,1312,1313,1314,1315,1316,1317,1318,1319,1320,1321,1322,1323,1324,1325,1326,1327,1328,1329,1330,1331,1336,1337],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1335],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1305,1307,1308,1310,1318,1327,1330,1331,1336],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1312,1337],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1333,1335,1337],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1306,1307,1312,1315,1335],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1319],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1309,1317,1319,1320],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1309],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1309,1319],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1313,1314,1315,1319,1320,1325],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1315,1316,1320,1324,1326,1335],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1307,1319,1328],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1308,1309,1310],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1315,1335],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1315],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1306,1307],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1307],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1311],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1315,1320,1332,1333,1334,1335,1337],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1399,1400],[85,97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1399,1400,1401],[97,144,515,516,517,518,519,520,521,522,523,524,525,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,514,515,516,517,518,519,520,521,522,523,524,525,526,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,542,543,544,545,546],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,544,545,546],[85,97,144,509,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1129,1130,1131],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,813,1130,1182],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1399],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1776],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1402],[97,144,449,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,451,452,453,454,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,202,204,208,220,229,432,442,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,204,224,225,226,228,442,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,204,259,261,263,264,267,442,444,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,204,208,210,211,212,213,219,220,221,431,442,444,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,442,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,218,219,225,412,421,438,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,204,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,198,218,438,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,269,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,268,442,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,158,403,412,498,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,158,371,383,421,437,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,158,314,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,425,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,424,425,426,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,424,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[91,97,144,158,198,204,208,211,219,222,223,225,229,241,242,269,344,422,432,442,446,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,202,204,227,259,260,265,266,442,498,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,227,498,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,202,242,358,442,498,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,498,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,204,227,228,498,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,262,498,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,222,423,430,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,169,278,438,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827],[97,144,278,438,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827],[85,97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827],[85,97,144,375,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,311,312,438,474,475,482,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,418,474,476,477,478,479,481,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,417,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,417,418,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,213,214,215,216,218,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,217,218,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,480,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,218,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[85,97,144,205,468,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[85,97,144,185,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[85,97,144,227,302,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[85,97,144,227,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,300,304,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[85,97,144,301,448,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1927],[85,89,97,144,158,192,193,194,196,197,446,491,492,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827],[97,144,158,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,158,208,249,319,334,355,357,427,428,442,443,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,241,429,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,446,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,203,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[85,97,144,360,373,382,392,394,437,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,169,360,373,391,392,393,437,497,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,385,386,387,388,389,390,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,387,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,391,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,276,277,278,280,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827],[85,97,144,270,271,272,273,279,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,276,279,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,274,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,275,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[85,97,144,278,301,448,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827],[85,97,144,278,447,448,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827],[85,97,144,278,448,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827],[97,144,334,434,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,434,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,158,443,448,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,379,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,143,144,378,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,218,250,251,317,320,357,366,369,371,372,411,437,440,443,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,218,251,400,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,371,437,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[85,97,144,371,376,377,379,380,381,382,383,384,395,396,397,398,399,401,402,437,438,498,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,365,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,158,169,205,249,251,252,273,296,317,334,344,355,356,411,433,442,443,444,446,498,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,437,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,143,144,225,317,344,368,433,435,436,443,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,371,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,143,144,249,286,320,361,362,363,364,365,366,367,369,370,437,438,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,158,286,287,361,443,444,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,225,334,344,357,433,437,443,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,158,442,444,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,158,174,440,443,444,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,158,169,185,198,208,219,227,250,251,252,254,283,288,293,296,317,319,320,322,325,327,330,331,332,333,355,357,432,433,438,440,442,443,444,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,158,174,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,204,205,206,223,440,441,446,448,498,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,202,442,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,282,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,158,174,185,244,267,269,270,271,272,273,280,281,498,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,169,185,198,219,244,259,292,293,294,295,320,325,334,340,343,345,355,357,433,438,440,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,219,222,223,241,344,433,442,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,158,185,205,208,320,338,440,442,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,359,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,158,273,281,282,341,342,352,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,440,442,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,366,368,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,317,320,432,448,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,158,169,255,259,295,325,340,343,347,440,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,158,222,241,259,348,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,204,254,350,432,442,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,158,185,273,442,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,158,227,253,254,255,264,282,349,351,432,442,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[91,97,144,251,317,354,446,448,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,158,169,185,208,222,229,241,250,252,288,292,293,294,295,296,320,322,334,335,337,339,355,357,432,433,438,439,440,448,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,158,174,222,340,346,352,440,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,232,233,234,235,236,237,238,239,240,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,283,326,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,328,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,326,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,328,329,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,158,208,211,213,249,443,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,158,169,203,205,250,251,296,316,317,318,355,440,444,446,448,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,158,169,185,207,213,318,320,366,433,439,443,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,361,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,362,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,218,219,411,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,363,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,243,247,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,158,208,243,250,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,246,247,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,248,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,243,244,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,243,297,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,243,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,283,324,439,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,323,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,244,438,439,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,321,439,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,244,438,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,411,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,208,218,220,245,250,317,320,354,357,360,366,373,374,404,407,410,432,440,443,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,305,308,309,310,311,312,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[85,97,144,195,197,278,405,406,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827],[85,97,144,195,197,278,405,406,409,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827],[97,144,420,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,225,287,317,354,357,371,379,383,413,414,415,416,418,419,422,432,437,442,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,311,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,316,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,158,250,298,313,315,319,354,440,446,448,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,305,306,307,308,309,310,311,312,447,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[91,97,144,158,169,185,243,244,252,296,317,320,352,353,355,432,433,442,443,446,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,287,289,292,433,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,158,283,442,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,286,371,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,285,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,287,288,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,284,286,442,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,158,207,287,289,290,291,442,443,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[85,97,144,214,218,438,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[85,97,144,217,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,200,201,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[85,97,144,205,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[85,97,144,438,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[85,91,97,144,296,317,446,448,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,205,468,469,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[85,97,144,304,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[85,97,144,169,185,203,266,299,301,303,448,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,227,438,443,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,336,438,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[85,97,144,156,158,169,202,203,261,304,446,447,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[85,97,144,193,194,196,197,446,493,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827],[85,86,87,88,89,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,149,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,256,257,258,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,256,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[85,89,97,144,158,160,169,192,193,194,195,196,197,198,203,252,347,391,444,445,448,493,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827],[97,144,456,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,458,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,460,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1928],[97,144,462,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,464,465,466,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,470,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[90,97,144,450,455,457,459,461,463,467,471,473,484,485,487,496,497,498,499,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,472,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,483,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,301,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,486,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,143,144,287,289,290,292,488,489,490,493,494,495,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,192,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1384],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1656,1667,1671,1672,1674,1675,1677,1710,1711,1713,1715],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1651,1656,1672,1678,1679,1681,1682,1710,1711,1713,1715],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1679,1713,1766],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1666,1715],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1655,1656,1657,1711,1715],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1656,1706,1711,1713,1715],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1656,1680,1699,1701,1715],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1672,1688,1712,1715,1756],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1711,1715],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1656,1667,1671,1672,1710,1711,1715],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1656,1657,1679,1690,1739],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1648,1656,1657,1690],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1656,1657,1690,1691,1715],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1654,1656,1670,1671,1672,1700,1710,1711,1712,1715],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1711,1713,1715],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1710,1711,1713,1715],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1715],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1679,1712,1715],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1712,1715],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1652],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1656,1712,1715],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1648,1656,1715],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1655,1656,1715],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1656,1657,1715,1766],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1716,1717,1718],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1653,1654,1711,1712,1715,1717,1720],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1705,1715],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1652,1710,1711,1715,1763],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1646,1647,1648,1652,1654,1655,1656,1657,1658,1671,1672,1676,1679,1680,1690,1692,1699,1700,1701,1702,1707,1712,1715,1716,1719,1721,1722,1723,1724,1725,1726,1727,1728,1730,1732,1733,1734,1735,1736,1737,1740,1741,1742,1743,1744,1745,1746,1747,1748,1749,1750,1751,1752,1753,1754,1755,1756,1757,1758,1759,1760,1762,1763,1764,1765],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1656,1672,1684,1686,1712,1715],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1655,1656,1691,1713,1715,1731],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1656,1711],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1656,1691,1715,1729],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1656,1672,1713,1715],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1651,1656,1667,1672,1710,1711,1713,1715,1725],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1651,1715],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1678,1715],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1659,1664,1715],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1658,1659,1664,1710,1713,1715],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1659,1664,1666],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1659,1664,1688,1702,1715],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1659,1664,1667,1669,1670,1677,1682,1683,1686,1687,1711,1715],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1659,1664,1715,1716,1719],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1659,1664,1712,1715],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1659,1664,1711],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1659,1664],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1659,1664,1689,1690,1692,1711],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1652,1659,1664,1676,1715],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1674,1688,1705,1715],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1667,1673,1674,1688,1693,1697,1703,1705,1707,1708,1709,1711,1713,1715],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1667,1673,1674,1711],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1705],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1664,1665,1667,1668,1688,1693,1694,1695,1696,1697,1698,1703,1704,1711,1712],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1653,1654,1659,1664,1688,1711,1715],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1667,1673,1676,1688,1715],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1673,1681,1688],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1667,1688,1715],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1654,1684,1685,1688,1715],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1688],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1673,1688],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1654,1667,1688,1715],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1688,1713,1715],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1712,1715],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1679,1680,1715],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1651,1654,1674,1695,1710,1712,1715],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1715,1761],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1651,1673,1688,1713],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1684,1738],[85,97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1648,1652,1653,1657,1676,1684,1710,1713,1714],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1659],[97,144,174,192,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,813,883,884,1182],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,813,909,1182],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,813,920,926,1182],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,813,920,1182],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,813,989,1182],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,813,990,1182],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,813,980,1182],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,813,987,1182],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,850,851,852,853,854,855,856,857,858,859,860,861,862,863,864,865,866,867,868,869,870,871,872,873,874,875,876,877,878,879,880,881,882,883,884,885,886,888,889,890,891,892,893,894,895,896,897,898,899,900,901,902,903,904,905,906,907,908,909,910,911,912,913,914,915,916,917,918,919,921,922,923,924,925,927,928,929,930,931,932,933,934,935,936,937,938,939,940,941,942,943,944,945,946,947,948,949,950,951,952,953,954,955,956,957,958,959,960,961,962,963,964,965,966,967,968,969,970,971,972,973,974,975,976,977,978,979,980,981,982,983,984,985,986,987,988,989,990,991,992,993,994,995,996,997,998,999,1000,1001,1002,1003,1004,1005,1006,1007,1008,1009,1010,1011,1012,1013,1014,1015,1016,1017,1018,1019,1020,1021,1022,1023,1024,1025,1026,1027,1028,1029,1030,1031,1032,1033,1034,1035,1036,1037,1038,1039,1040,1041,1042,1043,1044,1045,1046,1047,1048,1049,1050,1051,1052,1053,1054,1055,1056,1057,1058,1059,1060,1061,1062,1063,1064,1065,1066,1067,1068,1069,1070,1071,1072,1073,1074,1075,1076,1077,1078,1079,1080,1081,1082,1083,1084,1085,1086,1087,1088,1089,1090,1091,1092,1093,1094,1095,1096,1097,1098,1099,1100,1101,1102,1103,1104,1105,1106,1107,1108,1109,1110,1111,1112,1113,1114],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,813,1041,1182],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,651,813,1182],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1095,1096,1099],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,813,1094,1182],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,813,1094,1096,1182],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,813,972,973,1182],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,813,1064,1182],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,813,1058,1182],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,813,860,1182],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,813,1055,1182],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,813,972,974,1182],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,813,915,1182],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,813,861,1182],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,813,894,1182],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,813,887,1182],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,813,888,1182],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,813,932,1182],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,813,932,952,1182],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,813,932,963,1182],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,813,932,956,1182],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,813,932,941,1182],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,813,932,937,1182],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,813,934,1182],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,813,932,933,1182],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,813,897,932,1182],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,813,959,1182],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,813,933,1182],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,933],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,651,813,967,1182],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,813,974,975,1182],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,813,967,978,1182],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,813,979,1182],[97,111,115,144,185,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,111,144,174,185,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,106,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,108,111,144,182,185,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,163,182,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,106,144,192,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,108,111,144,163,185,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,103,104,107,110,144,155,174,185,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,111,118,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,103,109,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,111,132,133,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,107,111,144,177,185,192,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,132,144,192,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,105,106,144,192,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,111,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,105,106,107,108,109,110,111,112,113,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,133,134,135,136,137,138,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,111,126,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,111,118,119,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,109,111,119,120,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,110,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,103,106,111,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,111,115,119,120,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,115,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,109,111,114,144,185,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,103,108,111,118,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,174,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,106,111,132,144,190,192,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,833,834,835,836],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,833],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,834],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,1650],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,815,816],[97,144,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,815],[97,144,278,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1395,1814,1815,1903,1956],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1403],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,560,827],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1295],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1405],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1406],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,559,827],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1966],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1407],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,561,827],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1294],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1408],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1612],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1296],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,562,827],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,563,827],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1976],[97,144,278,473,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1978],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1613],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1614],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1615],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1610],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1616],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1365],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1366],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1364],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1363],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1362],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1357],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1358],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1359],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1994],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1367],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1360],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1361],[85,97,144,278,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1908,2000,2001],[85,97,144,278,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1904,1911,2000,2003],[97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1378,1788,1822,1850,1862,1869,1876,1879,1894,1922,1956],[97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1622,1838,1879,1882,1894,2007],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1375,1631,1817,1897,2007],[97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827],[97,144,278,505,506,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1375,1378,1379,1380,1381,1395,1396,1397,1622,1624,1625,1628,1629,1631,1632,1633,1634,1785,1787,1788,1791,1799,1800,1802,1807,1815,1816,1817,1821,1822,1823,1824,1828,1835,1837,1838,1844,1847,1850,1857,1858,1859,1860,1862,1865,1866,1867,1868,1869,1870,1876,1877,1879,1880,1884,1885,1886,1888,1889,1891,1893,1894,1897,1898,1899,1900],[97,144,278,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1922,2000],[97,144,278,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1922,1956],[97,144,278,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1922,2007],[97,144,278,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,2016],[97,144,278,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1922,2018],[97,144,278,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1370],[97,144,278,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1375],[97,144,278,505,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1376],[97,144,278,505,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1356],[97,144,278,505,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1378],[97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1379],[97,144,278,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1381],[97,144,278,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1380],[97,144,278,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1395],[85,97,144,278,505,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1396],[97,144,278,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1397],[97,144,278,505,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1622],[97,144,278,505,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1618],[97,144,278,505,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1624],[97,144,278,505,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1625],[97,144,278,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1628],[97,144,278,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1629],[97,144,278,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1631],[97,144,278,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1632],[97,144,278,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1633],[97,144,278,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1634],[97,144,278,505,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1775,1956],[97,144,278,505,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1780,1956],[97,144,278,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1782,1956],[97,144,278,505,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1783],[97,144,278,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1785,1956],[97,144,278,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1787],[97,144,278,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1788,1956],[97,144,278,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1790,1956],[97,144,278,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1791,1956],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1793],[97,144,278,505,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1795,1956],[97,144,278,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1799,1956],[97,144,278,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1800],[97,144,278,505,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1801,1956],[97,144,278,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1802],[97,144,278,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1803],[97,144,278,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1804,1956],[97,144,278,505,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1806,1956],[97,144,278,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1807],[97,144,278,505,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1812,1956],[97,144,278,505,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1956,2067],[97,144,278,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1816],[97,144,278,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1817],[97,144,278,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1815],[97,144,278,505,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1821],[97,144,278,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,2075],[97,144,278,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1822],[97,144,278,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1823],[97,144,278,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1824],[97,144,278,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1825],[97,144,278,505,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1829,1956],[97,144,278,505,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1834],[97,144,278,505,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1835,1956],[97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1837,1956],[97,144,278,505,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1838,1956],[97,144,278,505,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1840,1956],[97,144,278,505,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1828,1956],[97,144,278,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1842,1956],[97,144,278,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1843,1956],[97,144,278,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1846,1956],[97,144,278,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1845,1956],[97,144,278,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1844,1956],[97,144,278,505,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1847,1956],[97,144,278,505,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1849,1956],[97,144,278,505,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1851,1956],[97,144,278,505,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1852,1956],[85,97,144,278,505,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1853,1956],[97,144,278,505,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1854,1956],[97,144,278,505,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1850,1956],[97,144,278,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,2000,2101],[97,144,278,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1856],[97,144,278,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1857],[97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1858],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1859],[97,144,278,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1860],[97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1861],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1862],[97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1865],[97,144,278,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1866],[97,144,278,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1867],[97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1868],[97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1869],[97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1870],[97,144,278,505,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1876],[97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1877],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1879],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1880],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1882],[97,144,278,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1884],[97,144,278,505,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1885],[97,144,278,505,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1887],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1888],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1886],[97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1889],[97,144,278,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1891],[97,144,278,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1893],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1894],[85,97,144,278,505,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1895],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1896],[97,144,278,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1897],[97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1898],[97,144,278,505,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1899],[97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1900],[97,144,278,505,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1833],[97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1376,1618,1632,1775,1812,1816,1834,1869,1895,2018],[97,144,278,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1380,1625,1791,1817,1850,1862,2000],[97,144,278,505,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1629,1633,1801,1822,1852,1888,1896,2000],[97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1370,1625,1788,1815,1853,1880,1895,2000],[97,144,278,505,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1380,1629,1793,1823,1828,1857,1877,1897,2000],[97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1376,1622,1633,1787,1815,1829,1880,1889,1895,2016],[97,144,278,505,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1370,1628,1783,1785,1788,1821,1842,1893,2000],[97,144,278,505,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1380,1618,1631,1775,1780,1812,1838,1868,2000,2067,2075],[97,144,278,505,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1380,1633,1775,1793,1806,1823,1828,2000],[97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1848],[97,144,278,505,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1380,1625,1775,1790,1821,1853,1858,1891,2018],[97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1375,1618,1799,1825,1835,1861,1876,1886,1893,2016],[97,144,278,505,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1622,1775,1780,1817,1843,1865,1891,2000],[97,144,278,505,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1395,1628,1633,1788,1791,1822,1837,1856,1876,1956],[97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1370,1622,1633,1775,1816,1845,1877,1891,2016],[97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1849],[97,144,278,505,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1380,1629,1787,1795,1821,1853,1858,1893,2000],[97,144,278,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827],[97,144,278,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1351],[97,144,278,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1832],[97,144,278,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1374],[97,144,278,500,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1914,1924,1929,1930,1951],[97,144,278,484,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827],[85,97,144,278,484,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1905,1906,1911,1913,2000,2003,2007],[85,97,144,278,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1355,1912,2000,2001],[85,97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1355],[85,97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827],[85,97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1402],[85,97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1404],[85,97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,813,827,832,1123,1124,1126,1142,1164,1182,1192,1195,1196,1198,1200,1201,1202,1217,1219,1223,1227,1228,1229,1233,1235,1236,1249,1294],[85,97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1402],[85,97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,813,827,832,1123,1124,1126,1142,1164,1182,1192,1195,1196,1198,1200,1201,1202,1217,1219,1223,1227,1228,1229,1233,1235,1236,1249,1293,1294],[85,97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1776],[85,97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1610],[85,97,144,278,459,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1403,1405,1406,1407,1408,1611,1612,1613,1614,1615,1616],[85,97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1402,1605,1608,1609],[85,97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1299],[85,97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1299,1355],[85,97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1637],[85,97,144,278,507,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1299,1355,1766,1767],[85,97,144,278,507,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827],[85,97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1299,1355],[85,97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1299,1355,1385],[85,97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1299,1371],[85,97,144,278,508,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1357,1358,1359,1360,1361,1362,1363,1364,1365,1366,1367],[85,97,144,278,511,512,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827],[85,97,144,278,511,513,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827],[85,97,144,278,511,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,547,558,827],[85,97,144,278,505,511,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827],[85,97,144,278,511,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,548,558,827],[85,97,144,278,511,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827],[85,97,144,278,484,510,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827],[85,97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1299,1300,1303,1377],[85,97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1300,1342,1383,1386,1389,1390],[85,97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1300,1374],[85,97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1300,1301,1302],[85,97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1338],[85,97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1371,1402],[85,97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1300,1338,1377,1388],[85,97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1300,1303,1377,1385],[85,97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1300,1303,1339,1340,1377,1388],[85,97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1300,1338,1377,1388],[85,97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1300,1303,1342,1377],[85,97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1299,1300,1377],[85,97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1300,1341,1371,1377],[85,97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1299,1300,1303,1304,1371,1377],[97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,549,827,1299],[85,97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,549,558,827,1355,1368,1369,1830,1904],[85,97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1371,1878],[85,97,144,278,484,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1626,1875,1908,1910,1911],[85,97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1873],[85,97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,549,558,827,1355,1368,1369,1909,1910],[85,97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1339,1371,1388],[85,97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1911],[85,97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,549,550,558,827,1343,1351,1355,1372,1619],[85,97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1355,1368,1369],[85,97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1355,1368,1369,1626],[85,97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,549,827,1301],[85,97,144,278,511,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1349],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827],[97,144,278,511,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827],[85,97,144,278,505,511,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1350,1922],[85,97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,549,558,827,1355,1361,1368,1369,1922,1955],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,549,558,827,1344,1346,1347,1355,1368,1369,1922,1954,1955],[85,97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1345],[85,97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,549,558,827,1348,1355,1361,1368,1369,1922,1955,2006],[85,97,144,278,505,511,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,549,558,827,1355,1368,1369,1922,1955,2015],[85,97,144,278,510,511,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,549,558,827,1355,1368,1369,1922,1955,2015],[97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,549,558,827,1343,1351,1355],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1356,1370,1375,1376,1378,1379,1380,1381],[85,97,144,278,471,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,549,558,827,1299,1343,1355,1368,1369],[97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,549,558,827,1371,1374],[85,97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,549,558,827,1299,1343,1355,1371,1374],[85,97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,549,558,827,1299,1300,1343,1355,1371,1377],[97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,549,550,558,827,1299,1343,1351,1355,1371,1372],[97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,549,558,827,1343,1351,1355,1368,1369,1372],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,549,558,827,1343,1351,1355,1368,1369],[85,97,144,278,471,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1299,1300,1355,1391,1392,1393,1394],[85,97,144,278,471,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1299,1300,1355,1371,1372,1391,1393,1394],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1395,1396,1397],[97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,549,558,827,1617,1620,1621],[97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,549,558,827,1299,1374,1617],[85,97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,549,558,827,1299,1300,1303,1355,1368,1369,1623],[97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,549,558,827,1343,1371,1617,1620,1621],[85,97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,549,550,558,827,1343,1351,1355,1368,1369,1371,1621,1626,1627],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,549,558,827,1299,1351,1355,1368,1369,1617],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1618,1622,1624,1625,1628,1629],[85,97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1299,1300,1343,1377,1623],[85,97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1299,1300,1343,1371,1377,1623],[85,97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,550,558,827,1300,1343,1351,1355,1368,1369,1623],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1631,1632,1633,1634],[97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1299,1300,1355,1368,1369,1391,1638,1639,1640,1641,1642,1643,1644,1645,1768,1769,1770,1771,1772,1773,1774],[97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1299,1300,1355,1391,1779],[85,97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1777,1778],[97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1299,1300,1355,1781],[85,97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1299,1300,1355,1368,1369,1371,1372,1391],[97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1299,1300,1304,1355,1368,1369,1784],[97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1299,1300,1355,1368,1369,1371,1372,1786],[97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1299,1300,1355,1368,1369,1371,1391],[97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1299,1300,1355,1368,1369,1371,1789],[97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1299,1300,1355,1368,1369,1371,1786],[97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1299,1300,1303,1355,1377,1792],[85,97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1299,1300,1355,1371,1794],[85,97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1299,1300,1391,1796,1797,1798],[85,97,144,278,471,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827],[85,97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1299,1300,1355,1368,1369,1789],[97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1299,1300,1355,1371,1391],[97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1299,1300,1355,1371,1372,1789],[85,97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1299,1300,1343,1371,1374,1623],[85,97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1299,1300,1371,1391],[85,97,144,278,505,511,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1300,1371,1805],[85,97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1299,1300,1355,1371,1372,1391],[97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1299,1300,1355,1391,1811],[85,97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1300,1355,1368,1369,1402,1808,1810],[85,97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1402,1809],[97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1299,1300,1355,1368,1369,1638,1639,1640,1641,1642,1643,1644,1645,1768,1769,1770,1771,1772,1773,1774,1789],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1775,1780,1782,1783,1785,1787,1788,1790,1791,1793,1795,1799,1800,1801,1802,1803,1804,1806,1807,1812],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1361,1814],[85,97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1815],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1819,1820],[97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1361,1819],[85,97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1822],[85,97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1361,1819],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1361,1371,1814],[85,97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1814],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1815,1816,1817,1821,1822,1823,1824,1825],[97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,549,558,827,1343,1371,1373,1374,1617,1827],[97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,549,558,827,1371,1374,1386,1617],[97,144,278,505,507,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,549,558,827,1374,1617,1833],[97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,549,558,827,1343,1371,1374,1386,1617],[97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,549,558,827,1374,1617,1836],[85,97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,549,558,827,1371,1374,1617,1776],[85,97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,549,558,827,1343,1355,1371,1373,1374,1617,1827,1830,1839],[85,97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,549,558,827,1351,1355,1368,1369,1371,1819,1841],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,549,558,827,1373,1374,1617,1827],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,549,558,827,1343,1351,1355,1368,1369,1371,1819],[97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,549,558,827,1300,1343,1351,1355,1368,1369,1371,1617,1819],[97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,549,558,827,1343,1351,1355,1368,1369,1371,1617,1819],[85,97,144,278,505,511,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,549,558,827,1343,1355,1368,1369,1371,1374,1617],[97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,549,558,827,1374,1617,1619],[97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,549,558,827,1371,1373,1374,1617,1827],[97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,549,558,827,1343,1371,1374,1617],[85,97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,549,558,827,1343,1371,1373,1374,1617,1827],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1828,1829,1834,1835,1837,1838,1840,1842,1843,1844,1845,1846,1847,1848,1849,1850,1851,1852,1853,1854],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1856,1857,1858,1859,1860,1861,1862],[85,97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1299,1300,1303,1355,1371,1377],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1299,1300,1343,1351,1355,1372],[85,97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1299,1300,1355,1391],[85,97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1299,1300,1355,1391,1792],[85,97,144,278,505,508,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1299,1300,1355,1368,1369,1391],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1865,1866,1867,1868,1869,1870],[85,97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1299,1300,1355,1368,1369,1391,1792,1864],[97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1299,1300,1355,1368,1369,1372,1789],[97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1299,1300,1355,1368,1369,1371,1372,1789],[85,97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1299,1300,1355,1391,1792,1864],[85,97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1299,1300,1355,1368,1369,1391,1792],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1876,1877,1879,1880],[85,97,144,278,484,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1299,1300,1355,1391,1873,1874,1875],[85,97,144,278,484,505,508,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1299,1300,1355,1368,1369,1391,1873,1874,1875,1878],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1882],[97,144,278,471,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1299,1300,1377,1385],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1884,1885,1886,1887,1888,1889],[97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1299,1300,1355,1371,1789],[97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1299,1300,1303,1371,1377],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1299,1300,1343,1351,1355,1371,1372],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1891,1893,1894,1895,1896,1897,1898,1899,1900],[85,97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1299,1300,1343,1351,1355,1373],[85,97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1300,1355,1371,1372,1839,1892],[85,97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1300,1371,1391],[85,97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1300,1355,1386,1839],[85,97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1299,1300,1355,1371,1377,1830],[85,97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1300,1355,1391,1839],[85,97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1299,1300,1343,1355,1372,1373],[85,97,144,278,471,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1300,1355,1391],[97,144,278,487,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827],[85,97,144,278,471,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1300,1343],[85,97,144,278,505,507,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,549,558,827,1303,1355,1368,1369,1371,1768,1830,1832],[85,97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827],[85,97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1818],[85,97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1361],[97,144,278,471,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1385],[85,97,144,278,471,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827],[85,97,144,278,471,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1872],[85,97,144,278,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827],[85,97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1902],[85,97,144,278,471,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,558,827,1355],[85,97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1831],[85,97,144,278,471,505,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,549,550,558,827,1299,1343,1351,1355,1368,1369,1372,1373],[85,97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1394],[85,97,144,278,484,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1904],[85,97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1874],[85,97,144,278,484,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1874,1875,1908,1911],[85,97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1874,1905,1907,1911],[97,144,278,508,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,549,558,827],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1915],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1916],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1915,1916],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,551,827],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,551,556,557,827],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,551,559,560,561,562,563,827,1294,1295,1296],[97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,552,553,554,555,827,1297,1298],[97,144,278,508,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,550,827],[85,97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,551,827,1299,1352,1353,1354],[85,97,144,278,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827,1921,1950],[97,144,278,508,515,516,517,518,519,520,521,522,523,524,525,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,545,546,827]],"fileInfos":[{"version":"c430d44666289dae81f30fa7b2edebf186ecc91a2d4c71266ea6ae76388792e1","affectsGlobalScope":true,"impliedFormat":1},{"version":"45b7ab580deca34ae9729e97c13cfd999df04416a79116c3bfb483804f85ded4","impliedFormat":1},{"version":"3facaf05f0c5fc569c5649dd359892c98a85557e3e0c847964caeb67076f4d75","impliedFormat":1},{"version":"e44bb8bbac7f10ecc786703fe0a6a4b952189f908707980ba8f3c8975a760962","impliedFormat":1},{"version":"5e1c4c362065a6b95ff952c0eab010f04dcd2c3494e813b493ecfd4fcb9fc0d8","impliedFormat":1},{"version":"68d73b4a11549f9c0b7d352d10e91e5dca8faa3322bfb77b661839c42b1ddec7","impliedFormat":1},{"version":"5efce4fc3c29ea84e8928f97adec086e3dc876365e0982cc8479a07954a3efd4","impliedFormat":1},{"version":"feecb1be483ed332fad555aff858affd90a48ab19ba7272ee084704eb7167569","impliedFormat":1},{"version":"ee7bad0c15b58988daa84371e0b89d313b762ab83cb5b31b8a2d1162e8eb41c2","impliedFormat":1},{"version":"27bdc30a0e32783366a5abeda841bc22757c1797de8681bbe81fbc735eeb1c10","impliedFormat":1},{"version":"8fd575e12870e9944c7e1d62e1f5a73fcf23dd8d3a321f2a2c74c20d022283fe","impliedFormat":1},{"version":"2ab096661c711e4a81cc464fa1e6feb929a54f5340b46b0a07ac6bbf857471f0","impliedFormat":1},{"version":"080941d9f9ff9307f7e27a83bcd888b7c8270716c39af943532438932ec1d0b9","affectsGlobalScope":true,"impliedFormat":1},{"version":"2e80ee7a49e8ac312cc11b77f1475804bee36b3b2bc896bead8b6e1266befb43","affectsGlobalScope":true,"impliedFormat":1},{"version":"c57796738e7f83dbc4b8e65132f11a377649c00dd3eee333f672b8f0a6bea671","affectsGlobalScope":true,"impliedFormat":1},{"version":"dc2df20b1bcdc8c2d34af4926e2c3ab15ffe1160a63e58b7e09833f616efff44","affectsGlobalScope":true,"impliedFormat":1},{"version":"515d0b7b9bea2e31ea4ec968e9edd2c39d3eebf4a2d5cbd04e88639819ae3b71","affectsGlobalScope":true,"impliedFormat":1},{"version":"0559b1f683ac7505ae451f9a96ce4c3c92bdc71411651ca6ddb0e88baaaad6a3","affectsGlobalScope":true,"impliedFormat":1},{"version":"0dc1e7ceda9b8b9b455c3a2d67b0412feab00bd2f66656cd8850e8831b08b537","affectsGlobalScope":true,"impliedFormat":1},{"version":"ce691fb9e5c64efb9547083e4a34091bcbe5bdb41027e310ebba8f7d96a98671","affectsGlobalScope":true,"impliedFormat":1},{"version":"8d697a2a929a5fcb38b7a65594020fcef05ec1630804a33748829c5ff53640d0","affectsGlobalScope":true,"impliedFormat":1},{"version":"4ff2a353abf8a80ee399af572debb8faab2d33ad38c4b4474cff7f26e7653b8d","affectsGlobalScope":true,"impliedFormat":1},{"version":"fb0f136d372979348d59b3f5020b4cdb81b5504192b1cacff5d1fbba29378aa1","affectsGlobalScope":true,"impliedFormat":1},{"version":"d15bea3d62cbbdb9797079416b8ac375ae99162a7fba5de2c6c505446486ac0a","affectsGlobalScope":true,"impliedFormat":1},{"version":"68d18b664c9d32a7336a70235958b8997ebc1c3b8505f4f1ae2b7e7753b87618","affectsGlobalScope":true,"impliedFormat":1},{"version":"eb3d66c8327153d8fa7dd03f9c58d351107fe824c79e9b56b462935176cdf12a","affectsGlobalScope":true,"impliedFormat":1},{"version":"38f0219c9e23c915ef9790ab1d680440d95419ad264816fa15009a8851e79119","affectsGlobalScope":true,"impliedFormat":1},{"version":"69ab18c3b76cd9b1be3d188eaf8bba06112ebbe2f47f6c322b5105a6fbc45a2e","affectsGlobalScope":true,"impliedFormat":1},{"version":"a680117f487a4d2f30ea46f1b4b7f58bef1480456e18ba53ee85c2746eeca012","affectsGlobalScope":true,"impliedFormat":1},{"version":"2f11ff796926e0832f9ae148008138ad583bd181899ab7dd768a2666700b1893","affectsGlobalScope":true,"impliedFormat":1},{"version":"4de680d5bb41c17f7f68e0419412ca23c98d5749dcaaea1896172f06435891fc","affectsGlobalScope":true,"impliedFormat":1},{"version":"954296b30da6d508a104a3a0b5d96b76495c709785c1d11610908e63481ee667","affectsGlobalScope":true,"impliedFormat":1},{"version":"ac9538681b19688c8eae65811b329d3744af679e0bdfa5d842d0e32524c73e1c","affectsGlobalScope":true,"impliedFormat":1},{"version":"0a969edff4bd52585473d24995c5ef223f6652d6ef46193309b3921d65dd4376","affectsGlobalScope":true,"impliedFormat":1},{"version":"9e9fbd7030c440b33d021da145d3232984c8bb7916f277e8ffd3dc2e3eae2bdb","affectsGlobalScope":true,"impliedFormat":1},{"version":"811ec78f7fefcabbda4bfa93b3eb67d9ae166ef95f9bff989d964061cbf81a0c","affectsGlobalScope":true,"impliedFormat":1},{"version":"717937616a17072082152a2ef351cb51f98802fb4b2fdabd32399843875974ca","affectsGlobalScope":true,"impliedFormat":1},{"version":"d7e7d9b7b50e5f22c915b525acc5a49a7a6584cf8f62d0569e557c5cfc4b2ac2","affectsGlobalScope":true,"impliedFormat":1},{"version":"71c37f4c9543f31dfced6c7840e068c5a5aacb7b89111a4364b1d5276b852557","affectsGlobalScope":true,"impliedFormat":1},{"version":"576711e016cf4f1804676043e6a0a5414252560eb57de9faceee34d79798c850","affectsGlobalScope":true,"impliedFormat":1},{"version":"89c1b1281ba7b8a96efc676b11b264de7a8374c5ea1e6617f11880a13fc56dc6","affectsGlobalScope":true,"impliedFormat":1},{"version":"74f7fa2d027d5b33eb0471c8e82a6c87216223181ec31247c357a3e8e2fddc5b","affectsGlobalScope":true,"impliedFormat":1},{"version":"d6d7ae4d1f1f3772e2a3cde568ed08991a8ae34a080ff1151af28b7f798e22ca","affectsGlobalScope":true,"impliedFormat":1},{"version":"063600664504610fe3e99b717a1223f8b1900087fab0b4cad1496a114744f8df","affectsGlobalScope":true,"impliedFormat":1},{"version":"934019d7e3c81950f9a8426d093458b65d5aff2c7c1511233c0fd5b941e608ab","affectsGlobalScope":true,"impliedFormat":1},{"version":"52ada8e0b6e0482b728070b7639ee42e83a9b1c22d205992756fe020fd9f4a47","affectsGlobalScope":true,"impliedFormat":1},{"version":"3bdefe1bfd4d6dee0e26f928f93ccc128f1b64d5d501ff4a8cf3c6371200e5e6","affectsGlobalScope":true,"impliedFormat":1},{"version":"59fb2c069260b4ba00b5643b907ef5d5341b167e7d1dbf58dfd895658bda2867","affectsGlobalScope":true,"impliedFormat":1},{"version":"639e512c0dfc3fad96a84caad71b8834d66329a1f28dc95e3946c9b58176c73a","affectsGlobalScope":true,"impliedFormat":1},{"version":"368af93f74c9c932edd84c58883e736c9e3d53cec1fe24c0b0ff451f529ceab1","affectsGlobalScope":true,"impliedFormat":1},{"version":"af3dd424cf267428f30ccfc376f47a2c0114546b55c44d8c0f1d57d841e28d74","affectsGlobalScope":true,"impliedFormat":1},{"version":"995c005ab91a498455ea8dfb63aa9f83fa2ea793c3d8aa344be4a1678d06d399","affectsGlobalScope":true,"impliedFormat":1},{"version":"959d36cddf5e7d572a65045b876f2956c973a586da58e5d26cde519184fd9b8a","affectsGlobalScope":true,"impliedFormat":1},{"version":"965f36eae237dd74e6cca203a43e9ca801ce38824ead814728a2807b1910117d","affectsGlobalScope":true,"impliedFormat":1},{"version":"3925a6c820dcb1a06506c90b1577db1fdbf7705d65b62b99dce4be75c637e26b","affectsGlobalScope":true,"impliedFormat":1},{"version":"0a3d63ef2b853447ec4f749d3f368ce642264246e02911fcb1590d8c161b8005","affectsGlobalScope":true,"impliedFormat":1},{"version":"8cdf8847677ac7d20486e54dd3fcf09eda95812ac8ace44b4418da1bbbab6eb8","affectsGlobalScope":true,"impliedFormat":1},{"version":"8444af78980e3b20b49324f4a16ba35024fef3ee069a0eb67616ea6ca821c47a","affectsGlobalScope":true,"impliedFormat":1},{"version":"3287d9d085fbd618c3971944b65b4be57859f5415f495b33a6adc994edd2f004","affectsGlobalScope":true,"impliedFormat":1},{"version":"b4b67b1a91182421f5df999988c690f14d813b9850b40acd06ed44691f6727ad","affectsGlobalScope":true,"impliedFormat":1},{"version":"df83c2a6c73228b625b0beb6669c7ee2a09c914637e2d35170723ad49c0f5cd4","affectsGlobalScope":true,"impliedFormat":1},{"version":"436aaf437562f276ec2ddbee2f2cdedac7664c1e4c1d2c36839ddd582eeb3d0a","affectsGlobalScope":true,"impliedFormat":1},{"version":"8e3c06ea092138bf9fa5e874a1fdbc9d54805d074bee1de31b99a11e2fec239d","affectsGlobalScope":true,"impliedFormat":1},{"version":"87dc0f382502f5bbce5129bdc0aea21e19a3abbc19259e0b43ae038a9fc4e326","affectsGlobalScope":true,"impliedFormat":1},{"version":"b1cb28af0c891c8c96b2d6b7be76bd394fddcfdb4709a20ba05a7c1605eea0f9","affectsGlobalScope":true,"impliedFormat":1},{"version":"2fef54945a13095fdb9b84f705f2b5994597640c46afeb2ce78352fab4cb3279","affectsGlobalScope":true,"impliedFormat":1},{"version":"ac77cb3e8c6d3565793eb90a8373ee8033146315a3dbead3bde8db5eaf5e5ec6","affectsGlobalScope":true,"impliedFormat":1},{"version":"56e4ed5aab5f5920980066a9409bfaf53e6d21d3f8d020c17e4de584d29600ad","affectsGlobalScope":true,"impliedFormat":1},{"version":"4ece9f17b3866cc077099c73f4983bddbcb1dc7ddb943227f1ec070f529dedd1","affectsGlobalScope":true,"impliedFormat":1},{"version":"0a6282c8827e4b9a95f4bf4f5c205673ada31b982f50572d27103df8ceb8013c","affectsGlobalScope":true,"impliedFormat":1},{"version":"1c9319a09485199c1f7b0498f2988d6d2249793ef67edda49d1e584746be9032","affectsGlobalScope":true,"impliedFormat":1},{"version":"e3a2a0cee0f03ffdde24d89660eba2685bfbdeae955a6c67e8c4c9fd28928eeb","affectsGlobalScope":true,"impliedFormat":1},{"version":"811c71eee4aa0ac5f7adf713323a5c41b0cf6c4e17367a34fbce379e12bbf0a4","affectsGlobalScope":true,"impliedFormat":1},{"version":"51ad4c928303041605b4d7ae32e0c1ee387d43a24cd6f1ebf4a2699e1076d4fa","affectsGlobalScope":true,"impliedFormat":1},{"version":"60037901da1a425516449b9a20073aa03386cce92f7a1fd902d7602be3a7c2e9","affectsGlobalScope":true,"impliedFormat":1},{"version":"d4b1d2c51d058fc21ec2629fff7a76249dec2e36e12960ea056e3ef89174080f","affectsGlobalScope":true,"impliedFormat":1},{"version":"22adec94ef7047a6c9d1af3cb96be87a335908bf9ef386ae9fd50eeb37f44c47","affectsGlobalScope":true,"impliedFormat":1},{"version":"196cb558a13d4533a5163286f30b0509ce0210e4b316c56c38d4c0fd2fb38405","affectsGlobalScope":true,"impliedFormat":1},{"version":"73f78680d4c08509933daf80947902f6ff41b6230f94dd002ae372620adb0f60","affectsGlobalScope":true,"impliedFormat":1},{"version":"c5239f5c01bcfa9cd32f37c496cf19c61d69d37e48be9de612b541aac915805b","affectsGlobalScope":true,"impliedFormat":1},{"version":"8e7f8264d0fb4c5339605a15daadb037bf238c10b654bb3eee14208f860a32ea","affectsGlobalScope":true,"impliedFormat":1},{"version":"782dec38049b92d4e85c1585fbea5474a219c6984a35b004963b00beb1aab538","affectsGlobalScope":true,"impliedFormat":1},{"version":"170d4db14678c68178ee8a3d5a990d5afb759ecb6ec44dbd885c50f6da6204f6","affectsGlobalScope":true,"impliedFormat":1},{"version":"8a8eb4ebffd85e589a1cc7c178e291626c359543403d58c9cd22b81fab5b1fb9","impliedFormat":1},{"version":"bea6c0f5b819cf8cba6608bf3530089119294f949640714011d46ec8013b61c2","impliedFormat":1},{"version":"acd8fd5090ac73902278889c38336ff3f48af6ba03aa665eb34a75e7ba1dccc4","impliedFormat":1},{"version":"d6258883868fb2680d2ca96bc8b1352cab69874581493e6d52680c5ffecdb6cc","impliedFormat":1},{"version":"1b61d259de5350f8b1e5db06290d31eaebebc6baafd5f79d314b5af9256d7153","impliedFormat":1},{"version":"f258e3960f324a956fc76a3d3d9e964fff2244ff5859dcc6ce5951e5413ca826","impliedFormat":1},{"version":"643f7232d07bf75e15bd8f658f664d6183a0efaca5eb84b48201c7671a266979","impliedFormat":1},{"version":"21da358700a3893281ce0c517a7a30cbd46be020d9f0c3f2834d0a8ad1f5fc75","impliedFormat":1},{"version":"70521b6ab0dcba37539e5303104f29b721bfb2940b2776da4cc818c07e1fefc1","affectsGlobalScope":true,"impliedFormat":1},{"version":"ab41ef1f2cdafb8df48be20cd969d875602483859dc194e9c97c8a576892c052","affectsGlobalScope":true,"impliedFormat":1},{"version":"d153a11543fd884b596587ccd97aebbeed950b26933ee000f94009f1ab142848","affectsGlobalScope":true,"impliedFormat":1},{"version":"21d819c173c0cf7cc3ce57c3276e77fd9a8a01d35a06ad87158781515c9a438a","impliedFormat":1},{"version":"a79e62f1e20467e11a904399b8b18b18c0c6eea6b50c1168bf215356d5bebfaf","affectsGlobalScope":true,"impliedFormat":1},{"version":"49a5a44f2e68241a1d2bd9ec894535797998841c09729e506a7cbfcaa40f2180","affectsGlobalScope":true,"impliedFormat":1},{"version":"2e2e0a2dfc6bfabffacba3cc3395aa8197f30893942a2625bd9923ea34a27a3c","affectsGlobalScope":true,"impliedFormat":1},{"version":"1db0b7dca579049ca4193d034d835f6bfe73096c73663e5ef9a0b5779939f3d0","affectsGlobalScope":true,"impliedFormat":1},{"version":"9798340ffb0d067d69b1ae5b32faa17ab31b82466a3fc00d8f2f2df0c8554aaa","affectsGlobalScope":true,"impliedFormat":1},{"version":"456fa0c0ab68731564917642b977c71c3b7682240685b118652fb9253c9a6429","affectsGlobalScope":true,"impliedFormat":1},{"version":"4967529644e391115ca5592184d4b63980569adf60ee685f968fd59ab1557188","impliedFormat":1},{"version":"5929864ce17fba74232584d90cb721a89b7ad277220627cc97054ba15a98ea8f","impliedFormat":1},{"version":"763fe0f42b3d79b440a9b6e51e9ba3f3f91352469c1e4b3b67bfa4ff6352f3f4","impliedFormat":1},{"version":"25c8056edf4314820382a5fdb4bb7816999acdcb929c8f75e3f39473b87e85bc","impliedFormat":1},{"version":"c464d66b20788266e5353b48dc4aa6bc0dc4a707276df1e7152ab0c9ae21fad8","impliedFormat":1},{"version":"78d0d27c130d35c60b5e5566c9f1e5be77caf39804636bc1a40133919a949f21","impliedFormat":1},{"version":"c6fd2c5a395f2432786c9cb8deb870b9b0e8ff7e22c029954fabdd692bff6195","impliedFormat":1},{"version":"1d6e127068ea8e104a912e42fc0a110e2aa5a66a356a917a163e8cf9a65e4a75","impliedFormat":1},{"version":"5ded6427296cdf3b9542de4471d2aa8d3983671d4cac0f4bf9c637208d1ced43","impliedFormat":1},{"version":"7f182617db458e98fc18dfb272d40aa2fff3a353c44a89b2c0ccb3937709bfb5","impliedFormat":1},{"version":"cadc8aced301244057c4e7e73fbcae534b0f5b12a37b150d80e5a45aa4bebcbd","impliedFormat":1},{"version":"385aab901643aa54e1c36f5ef3107913b10d1b5bb8cbcd933d4263b80a0d7f20","impliedFormat":1},{"version":"9670d44354bab9d9982eca21945686b5c24a3f893db73c0dae0fd74217a4c219","impliedFormat":1},{"version":"0b8a9268adaf4da35e7fa830c8981cfa22adbbe5b3f6f5ab91f6658899e657a7","impliedFormat":1},{"version":"11396ed8a44c02ab9798b7dca436009f866e8dae3c9c25e8c1fbc396880bf1bb","impliedFormat":1},{"version":"ba7bc87d01492633cb5a0e5da8a4a42a1c86270e7b3d2dea5d156828a84e4882","impliedFormat":1},{"version":"4893a895ea92c85345017a04ed427cbd6a1710453338df26881a6019432febdd","impliedFormat":1},{"version":"c21dc52e277bcfc75fac0436ccb75c204f9e1b3fa5e12729670910639f27343e","impliedFormat":1},{"version":"13f6f39e12b1518c6650bbb220c8985999020fe0f21d818e28f512b7771d00f9","impliedFormat":1},{"version":"9b5369969f6e7175740bf51223112ff209f94ba43ecd3bb09eefff9fd675624a","impliedFormat":1},{"version":"4fe9e626e7164748e8769bbf74b538e09607f07ed17c2f20af8d680ee49fc1da","impliedFormat":1},{"version":"24515859bc0b836719105bb6cc3d68255042a9f02a6022b3187948b204946bd2","impliedFormat":1},{"version":"ea0148f897b45a76544ae179784c95af1bd6721b8610af9ffa467a518a086a43","impliedFormat":1},{"version":"24c6a117721e606c9984335f71711877293a9651e44f59f3d21c1ea0856f9cc9","impliedFormat":1},{"version":"dd3273ead9fbde62a72949c97dbec2247ea08e0c6952e701a483d74ef92d6a17","impliedFormat":1},{"version":"405822be75ad3e4d162e07439bac80c6bcc6dbae1929e179cf467ec0b9ee4e2e","impliedFormat":1},{"version":"0db18c6e78ea846316c012478888f33c11ffadab9efd1cc8bcc12daded7a60b6","impliedFormat":1},{"version":"e61be3f894b41b7baa1fbd6a66893f2579bfad01d208b4ff61daef21493ef0a8","impliedFormat":1},{"version":"bd0532fd6556073727d28da0edfd1736417a3f9f394877b6d5ef6ad88fba1d1a","impliedFormat":1},{"version":"89167d696a849fce5ca508032aabfe901c0868f833a8625d5a9c6e861ef935d2","impliedFormat":1},{"version":"615ba88d0128ed16bf83ef8ccbb6aff05c3ee2db1cc0f89ab50a4939bfc1943f","impliedFormat":1},{"version":"a4d551dbf8746780194d550c88f26cf937caf8d56f102969a110cfaed4b06656","impliedFormat":1},{"version":"8bd86b8e8f6a6aa6c49b71e14c4ffe1211a0e97c80f08d2c8cc98838006e4b88","impliedFormat":1},{"version":"317e63deeb21ac07f3992f5b50cdca8338f10acd4fbb7257ebf56735bf52ab00","impliedFormat":1},{"version":"4732aec92b20fb28c5fe9ad99521fb59974289ed1e45aecb282616202184064f","impliedFormat":1},{"version":"2e85db9e6fd73cfa3d7f28e0ab6b55417ea18931423bd47b409a96e4a169e8e6","impliedFormat":1},{"version":"c46e079fe54c76f95c67fb89081b3e399da2c7d109e7dca8e4b58d83e332e605","impliedFormat":1},{"version":"bf67d53d168abc1298888693338cb82854bdb2e69ef83f8a0092093c2d562107","impliedFormat":1},{"version":"2cbe0621042e2a68c7cbce5dfed3906a1862a16a7d496010636cdbdb91341c0f","affectsGlobalScope":true,"impliedFormat":1},{"version":"6d586db0a09a9495ebb5dece28f54df9684bfbd6e1f568426ca153126dac4a40","impliedFormat":1},{"version":"7394959e5a741b185456e1ef5d64599c36c60a323207450991e7a42e08911419","impliedFormat":1},{"version":"8c0bcd6c6b67b4b503c11e91a1fb91522ed585900eab2ab1f61bba7d7caa9d6f","impliedFormat":1},{"version":"567b7f607f400873151d7bc63a049514b53c3c00f5f56e9e95695d93b66a138e","affectsGlobalScope":true,"impliedFormat":1},{"version":"823f9c08700a30e2920a063891df4e357c64333fdba6889522acc5b7ae13fc08","impliedFormat":1},{"version":"84c1930e33d1bb12ad01bcbe11d656f9646bd21b2fb2afd96e8e10615a021aef","impliedFormat":1},{"version":"35ec8b6760fd7138bbf5809b84551e31028fb2ba7b6dc91d95d098bf212ca8b4","affectsGlobalScope":true,"impliedFormat":1},{"version":"5524481e56c48ff486f42926778c0a3cce1cc85dc46683b92b1271865bcf015a","impliedFormat":1},{"version":"4b87f767c7bc841511113c876a6b8bf1fd0cb0b718c888ad84478b372ec486b1","affectsGlobalScope":true,"impliedFormat":1},{"version":"8d04e3640dd9eb67f7f1e5bd3d0bf96c784666f7aefc8ac1537af6f2d38d4c29","impliedFormat":1},{"version":"9d19808c8c291a9010a6c788e8532a2da70f811adb431c97520803e0ec649991","impliedFormat":1},{"version":"2bf469abae4cc9c0f340d4e05d9d26e37f936f9c8ca8f007a6534f109dcc77e4","impliedFormat":1},{"version":"4aacb0dd020eeaef65426153686cc639a78ec2885dc72ad220be1d25f1a439df","impliedFormat":1},{"version":"f0bd7e6d931657b59605c44112eaf8b980ba7f957a5051ed21cb93d978cf2f45","impliedFormat":1},{"version":"0ada07543808f3b967624645a8e1ccd446f8b01ade47842acf1328aec899fed0","affectsGlobalScope":true,"impliedFormat":1},{"version":"4c21aaa8257d7950a5b75a251d9075b6a371208fc948c9c8402f6690ef3b5b55","impliedFormat":1},{"version":"685657a3ec619ef12aa7f754eee3b28598d3bf9749da89839a72a343fffef5ff","impliedFormat":1},{"version":"0c52340a45f6a46b67d766210f921aed61a5f1defe9e708fa5d3389bdf743d98","impliedFormat":1},{"version":"de735eca2c51dd8b860254e9fdb6d9ec19fe402dfe597c23090841ce3937cfc5","impliedFormat":1},{"version":"fed70ffbe859d54d8c7e1ef8cc2bc38af99b00a273ebb69ac293d2cb656210bd","impliedFormat":1},{"version":"5650cf3dace09e7c25d384e3e6b818b938f68f4e8de96f52d9c5a1b3db068e86","impliedFormat":1},{"version":"1354ca5c38bd3fd3836a68e0f7c9f91f172582ba30ab15bb8c075891b91502b7","affectsGlobalScope":true,"impliedFormat":1},{"version":"5155da3047ef977944d791a2188ff6e6c225f6975cc1910ab7bb6838ab84cede","impliedFormat":1},{"version":"93f437e1398a4f06a984f441f7fa7a9f0535c04399619b5c22e0b87bdee182cb","impliedFormat":1},{"version":"afbe24ab0d74694372baa632ecb28bb375be53f3be53f9b07ecd7fc994907de5","impliedFormat":1},{"version":"e16d218a30f6a6810b57f7e968124eaa08c7bb366133ea34bbf01e7cd6b8c0ad","affectsGlobalScope":true,"impliedFormat":1},{"version":"eb8692dea24c27821f77e397272d9ed2eda0b95e4a75beb0fdda31081d15a8ae","affectsGlobalScope":true,"impliedFormat":1},{"version":"9e043a1bc8fbf2a255bccf9bf27e0f1caf916c3b0518ea34aa72357c0afd42ec","impliedFormat":1},{"version":"b4f70ec656a11d570e1a9edce07d118cd58d9760239e2ece99306ee9dfe61d02","impliedFormat":1},{"version":"3bc2f1e2c95c04048212c569ed38e338873f6a8593930cf5a7ef24ffb38fc3b6","impliedFormat":1},{"version":"8145e07aad6da5f23f2fcd8c8e4c5c13fb26ee986a79d03b0829b8fce152d8b2","impliedFormat":1},{"version":"f9d9d753d430ed050dc1bf2667a1bab711ccbb1c1507183d794cc195a5b085cc","impliedFormat":1},{"version":"9eece5e586312581ccd106d4853e861aaaa1a39f8e3ea672b8c3847eedd12f6e","impliedFormat":1},{"version":"5b6844ad931dcc1d3aca53268f4bd671428421464b1286746027aede398094f2","impliedFormat":1},{"version":"37ba7b45141a45ce6e80e66f2a96c8a5ab1bcef0fc2d0f56bb58df96ec67e972","impliedFormat":1},{"version":"125d792ec6c0c0f657d758055c494301cc5fdb327d9d9d5960b3f129aff76093","impliedFormat":1},{"version":"0225ecb9ed86bdb7a2c7fd01f1556906902929377b44483dc4b83e03b3ef227d","affectsGlobalScope":true,"impliedFormat":1},{"version":"1851a3b4db78664f83901bb9cac9e45e03a37bb5933cc5bf37e10bb7e91ab4eb","impliedFormat":1},{"version":"461e54289e6287e8494a0178ba18182acce51a02bca8dea219149bf2cf96f105","impliedFormat":1},{"version":"12ed4559eba17cd977aa0db658d25c4047067444b51acfdcbf38470630642b23","affectsGlobalScope":true,"impliedFormat":1},{"version":"f3ffabc95802521e1e4bcba4c88d8615176dc6e09111d920c7a213bdda6e1d65","impliedFormat":1},{"version":"e31e51c55800014d926e3f74208af49cb7352803619855c89296074d1ecbb524","impliedFormat":1},{"version":"ae56f65caf3be91108707bd8dfbccc2a57a91feb5daabf7165a06a945545ed26","impliedFormat":1},{"version":"a136d5de521da20f31631a0a96bf712370779d1c05b7015d7019a9b2a0446ca9","impliedFormat":1},{"version":"dfb96ba5177b68003deec9e773c47257da5c4c8a74053d8956389d832df72002","affectsGlobalScope":true,"impliedFormat":1},{"version":"92d3070580cf72b4bb80959b7f16ede9a3f39e6f4ef2ac87cfa4561844fdc69f","affectsGlobalScope":true,"impliedFormat":1},{"version":"d3dffd70e6375b872f0b4e152de4ae682d762c61a24881ecc5eb9f04c5caf76f","impliedFormat":1},{"version":"613deebaec53731ff6b74fe1a89f094b708033db6396b601df3e6d5ab0ec0a47","impliedFormat":1},{"version":"d91a7d8b5655c42986f1bdfe2105c4408f472831c8f20cf11a8c3345b6b56c8c","impliedFormat":1},{"version":"19f91bb37a651a21fe05a20bd546f107176ad654524066771ecdff3ce61e560d","affectsGlobalScope":true,"impliedFormat":1},{"version":"e8a979b8af001c9fc2e774e7809d233c8ca955a28756f52ee5dee88ccb0611d2","impliedFormat":1},{"version":"b1810689b76fd473bd12cc9ee219f8e62f54a7d08019a235d07424afbf074d25","impliedFormat":1},{"version":"ab000310ff917b7f29e6ad73714e42b5b65cfb4dec1607a7cf9fb4892138bdea","impliedFormat":1},{"version":"022f47e3d8599ca736e2e07fb950a2519e5f8ad571a96f4542ecdfd27daf0883","impliedFormat":1},{"version":"a0acca63c9e39580f32a10945df231815f0fe554c074da96ba6564010ffbd2d8","impliedFormat":1},{"version":"c9d1207e10abc45f95aedfc0bea31ebdf9c1c9b584331516f8ac3d1577ed1bb0","impliedFormat":1},{"version":"ee4630965cc6a24ae679e5720b8930f872860ab34d64cb1fb8e570319f59bc07","impliedFormat":1},{"version":"413df52d4ea14472c2fa5bee62f7a40abd1eb49be0b9722ee01ee4e52e63beb2","impliedFormat":1},{"version":"db6d2d9daad8a6d83f281af12ce4355a20b9a3e71b82b9f57cddcca0a8964a96","impliedFormat":1},{"version":"446a50749b24d14deac6f8843e057a6355dd6437d1fac4f9e5ce4a5071f34bff","impliedFormat":1},{"version":"182e9fcbe08ac7c012e0a6e2b5798b4352470be29a64fdc114d23c2bab7d5106","impliedFormat":1},{"version":"14109b34dc927e3b872c0f954a8d2536c245e38062bc47e8f97ba27f922fc9bd","impliedFormat":1},{"version":"1214c8bb321e2376f9dfc174a97b06c6e7bef05a61a1c50f094617d99fc4c9dd","impliedFormat":1},{"version":"96ffa70b486207241c0fcedb5d9553684f7fa6746bc2b04c519e7ebf41a51205","impliedFormat":1},{"version":"5c24c66b3ba29ce9f2a79c719967e6e944131352a117a0bc43fa5b346b5562b3","impliedFormat":1},{"version":"a86f82d646a739041d6702101afa82dcb935c416dd93cbca7fd754fd0282ce1f","impliedFormat":1},{"version":"ad0d1d75d129b1c80f911be438d6b61bfa8703930a8ff2be2f0e1f8a91841c64","impliedFormat":1},{"version":"ce75b1aebb33d510ff28af960a9221410a3eaf7f18fc5f21f9404075fba77256","impliedFormat":1},{"version":"e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855","impliedFormat":1},{"version":"496bbf339f3838c41f164238543e9fe5f1f10659cb30b68903851618464b98ba","impliedFormat":1},{"version":"099f915371bf0f8fd812d48a088531397f9edaf2ebfefe422cbe774c274a1621","impliedFormat":1},{"version":"78a2869ad0cbf3f9045dda08c0d4562b7e1b2bfe07b19e0db072f5c3c56e9584","impliedFormat":1},{"version":"f0a1bd6ad77f98dd7ed0d3207fcbcb5dd109ba144799cf41b8ea4dacb4e3e009","impliedFormat":1},{"version":"197efda3bbcdd3f1bc5379cd0534f1ab740f3be957efb17b320da8e7dcb2743b","impliedFormat":1},{"version":"0c05e9842ec4f8b7bfebfd3ca61604bb8c914ba8da9b5337c4f25da427a005f2","impliedFormat":1},{"version":"faed7a5153215dbd6ebe76dfdcc0af0cfe760f7362bed43284be544308b114cf","impliedFormat":1},{"version":"612f05ebdd6c4c3bab261d327082ad0c876332263b23cb29ea37ef5921086a2e","impliedFormat":1},{"version":"42277254e219cd5b047373e39d48248cd228d84b200b08e4d4d0949d6a48ef86","impliedFormat":1},{"version":"b06d68a692d3c1dd12bed02eaa3b4c06cfc2a3e9560b0cecd2014bba480c4e8e","impliedFormat":1},{"version":"9e2739b32f741859263fdba0244c194ca8e96da49b430377930b8f721d77c000","impliedFormat":1},{"version":"fb1d8e814a3eeb5101ca13515e0548e112bd1ff3fb358ece535b93e94adf5a3a","impliedFormat":1},{"version":"ffa495b17a5ef1d0399586b590bd281056cee6ce3583e34f39926f8dcc6ecdb5","impliedFormat":1},{"version":"f8d5ff8eafd37499f2b6a98659dd9b45a321de186b8db6b6142faed0fea3de77","impliedFormat":1},{"version":"c86fe861cf1b4c46a0fb7d74dffe596cf679a2e5e8b1456881313170f092e3fa","impliedFormat":1},{"version":"c685d9f68c70fe11ce527287526585a06ea13920bb6c18482ca84945a4e433a7","impliedFormat":1},{"version":"540cc83ab772a2c6bc509fe1354f314825b5dba3669efdfbe4693ecd3048e34f","impliedFormat":1},{"version":"121b0696021ab885c570bbeb331be8ad82c6efe2f3b93a6e63874901bebc13e3","impliedFormat":1},{"version":"4e01846df98d478a2a626ec3641524964b38acaac13945c2db198bf9f3df22ee","impliedFormat":1},{"version":"678d6d4c43e5728bf66e92fc2269da9fa709cb60510fed988a27161473c3853f","impliedFormat":1},{"version":"e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855","impliedFormat":1},{"version":"e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855","impliedFormat":1},{"version":"8e609bb71c20b858c77f0e9f90bb1319db8477b13f9f965f1a1e18524bf50881","impliedFormat":1},{"version":"8e609bb71c20b858c77f0e9f90bb1319db8477b13f9f965f1a1e18524bf50881","impliedFormat":1},{"version":"aa14cee20aa0db79f8df101fc027d929aec10feb5b8a8da3b9af3895d05b7ba2","impliedFormat":1},{"version":"493c700ac3bd317177b2eb913805c87fe60d4e8af4fb39c41f04ba81fae7e170","impliedFormat":1},{"version":"aeb554d876c6b8c818da2e118d8b11e1e559adbe6bf606cc9a611c1b6c09f670","impliedFormat":1},{"version":"acf5a2ac47b59ca07afa9abbd2b31d001bf7448b041927befae2ea5b1951d9f9","impliedFormat":1},{"version":"8e609bb71c20b858c77f0e9f90bb1319db8477b13f9f965f1a1e18524bf50881","impliedFormat":1},{"version":"d71291eff1e19d8762a908ba947e891af44749f3a2cbc5bd2ec4b72f72ea795f","impliedFormat":1},{"version":"c0480e03db4b816dff2682b347c95f2177699525c54e7e6f6aa8ded890b76be7","impliedFormat":1},{"version":"892258709c8fc69cc1711d3554503f35101381df7e33eec344356bdc443ba07b","impliedFormat":1},{"version":"b620391fe8060cf9bedc176a4d01366e6574d7a71e0ac0ab344a4e76576fcbb8","impliedFormat":1},{"version":"3e7efde639c6a6c3edb9847b3f61e308bf7a69685b92f665048c45132f51c218","impliedFormat":1},{"version":"df45ca1176e6ac211eae7ddf51336dc075c5314bc5c253651bae639defd5eec5","impliedFormat":1},{"version":"106c6025f1d99fd468fd8bf6e5bda724e11e5905a4076c5d29790b6c3745e50c","impliedFormat":1},{"version":"ee8df1cb8d0faaca4013a1b442e99130769ce06f438d18d510fed95890067563","impliedFormat":1},{"version":"bfb7f8475428637bee12bdd31bd9968c1c8a1cc2c3e426c959e2f3a307f8936f","impliedFormat":1},{"version":"6f491d0108927478d3247bbbc489c78c2da7ef552fd5277f1ab6819986fdf0b1","impliedFormat":1},{"version":"0d8f2b8781c721170b87a6b662b3cb038fd1a721165ecca390352c818d425872","impliedFormat":1},{"version":"15a234e5031b19c48a69ccc1607522d6e4b50f57d308ecb7fe863d44cd9f9eb3","impliedFormat":1},{"version":"380647d8f3b7f852cca6d154a376dbf8ac620a2f12b936594504a8a852e71d2f","impliedFormat":1},{"version":"148679c6d0f449210a96e7d2e562d589e56fcde87f843a92808b3ff103f1a774","impliedFormat":1},{"version":"6459054aabb306821a043e02b89d54da508e3a6966601a41e71c166e4ea1474f","impliedFormat":1},{"version":"2f9c89cbb29d362290531b48880a4024f258c6033aaeb7e59fbc62db26819650","impliedFormat":1},{"version":"bb37588926aba35c9283fe8d46ebf4e79ffe976343105f5c6d45f282793352b2","impliedFormat":1},{"version":"05c97cddbaf99978f83d96de2d8af86aded9332592f08ce4a284d72d0952c391","impliedFormat":1},{"version":"72179f9dd22a86deaad4cc3490eb0fe69ee084d503b686985965654013f1391b","impliedFormat":1},{"version":"2e6114a7dd6feeef85b2c80120fdbfb59a5529c0dcc5bfa8447b6996c97a69f5","impliedFormat":1},{"version":"7b6ff760c8a240b40dab6e4419b989f06a5b782f4710d2967e67c695ef3e93c4","impliedFormat":1},{"version":"c8f004e6036aa1c764ad4ec543cf89a5c1893a9535c80ef3f2b653e370de45e6","impliedFormat":1},{"version":"dd80b1e600d00f5c6a6ba23f455b84a7db121219e68f89f10552c54ba46e4dc9","impliedFormat":1},{"version":"b064c36f35de7387d71c599bfcf28875849a1dbc733e82bd26cae3d1cd060521","impliedFormat":1},{"version":"05c7280d72f3ed26f346cbe7cbbbb002fb7f15739197cbbee6ab3fd1a6cb9347","impliedFormat":1},{"version":"8de9fe97fa9e00ec00666fa77ab6e91b35d25af8ca75dabcb01e14ad3299b150","impliedFormat":1},{"version":"803cd2aaf1921c218916c2c7ee3fce653e852d767177eb51047ff15b5b253893","impliedFormat":1},{"version":"dba114fb6a32b355a9cfc26ca2276834d72fe0e94cd2c3494005547025015369","impliedFormat":1},{"version":"7ab12b2f1249187223d11a589f5789c75177a0b597b9eb7f8e2e42d045393347","impliedFormat":1},{"version":"b4d871fb9b74fb5f9d4a4d54f5e01254282b2250bb0e8152bbd51aac2e67d9f7","impliedFormat":1},{"version":"93436bd74c66baba229bfefe1314d122c01f0d4c1d9e35081a0c4f0470ac1a6c","impliedFormat":1},{"version":"f974e4a06953682a2c15d5bd5114c0284d5abf8bc0fe4da25cb9159427b70072","impliedFormat":1},{"version":"50256e9c31318487f3752b7ac12ff365c8949953e04568009c8705db802776fb","impliedFormat":1},{"version":"7d73b24e7bf31dfb8a931ca6c4245f6bb0814dfae17e4b60c9e194a631fe5f7b","impliedFormat":1},{"version":"d130c5f73768de51402351d5dc7d1b36eaec980ca697846e53156e4ea9911476","impliedFormat":1},{"version":"413586add0cfe7369b64979d4ec2ed56c3f771c0667fbde1bf1f10063ede0b08","impliedFormat":1},{"version":"06472528e998d152375ad3bd8ebcb69ff4694fd8d2effaf60a9d9f25a37a097a","impliedFormat":1},{"version":"50b5bc34ce6b12eccb76214b51aadfa56572aa6cc79c2b9455cdbb3d6c76af1d","impliedFormat":1},{"version":"b7e16ef7f646a50991119b205794ebfd3a4d8f8e0f314981ebbe991639023d0e","impliedFormat":1},{"version":"42c169fb8c2d42f4f668c624a9a11e719d5d07dacbebb63cbcf7ef365b0a75b3","impliedFormat":1},{"version":"a401617604fa1f6ce437b81689563dfdc377069e4c58465dbd8d16069aede0a5","impliedFormat":1},{"version":"6e9082e91370de5040e415cd9f24e595b490382e8c7402c4e938a8ce4bccc99f","impliedFormat":1},{"version":"8695dec09ad439b0ceef3776ea68a232e381135b516878f0901ed2ea114fd0fe","impliedFormat":1},{"version":"5ab8a9b437a9b2d1d3729def9694ba15525fd4028307e803fafc09aa30a8486a","impliedFormat":1},{"version":"d682336018141807fb602709e2d95a192828fcb8d5ba06dda3833a8ea98f69e3","impliedFormat":1},{"version":"6124e973eab8c52cabf3c07575204efc1784aca6b0a30c79eb85fe240a857efa","impliedFormat":1},{"version":"0d891735a21edc75df51f3eb995e18149e119d1ce22fd40db2b260c5960b914e","impliedFormat":1},{"version":"3b414b99a73171e1c4b7b7714e26b87d6c5cb03d200352da5342ab4088a54c85","impliedFormat":1},{"version":"4fbd3116e00ed3a6410499924b6403cc9367fdca303e34838129b328058ede40","impliedFormat":1},{"version":"b01bd582a6e41457bc56e6f0f9de4cb17f33f5f3843a7cf8210ac9c18472fb0f","impliedFormat":1},{"version":"0a437ae178f999b46b6153d79095b60c42c996bc0458c04955f1c996dc68b971","impliedFormat":1},{"version":"74b2a5e5197bd0f2e0077a1ea7c07455bbea67b87b0869d9786d55104006784f","impliedFormat":1},{"version":"4a7baeb6325920044f66c0f8e5e6f1f52e06e6d87588d837bdf44feb6f35c664","impliedFormat":1},{"version":"12d218a49dbe5655b911e6cc3c13b2c655e4c783471c3b0432137769c79e1b3c","impliedFormat":1},{"version":"7274fbffbd7c9589d8d0ffba68157237afd5cecff1e99881ea3399127e60572f","impliedFormat":1},{"version":"6b0fc04121360f752d196ba35b6567192f422d04a97b2840d7d85f8b79921c92","impliedFormat":1},{"version":"1a82deef4c1d39f6882f28d275cad4c01f907b9b39be9cbc472fcf2cf051e05b","impliedFormat":1},{"version":"c5426dbfc1cf90532f66965a7aa8c1136a78d4d0f96d8180ecbfc11d7722f1a5","impliedFormat":1},{"version":"65a15fc47900787c0bd18b603afb98d33ede930bed1798fc984d5ebb78b26cf9","impliedFormat":1},{"version":"9d202701f6e0744adb6314d03d2eb8fc994798fc83d91b691b75b07626a69801","impliedFormat":1},{"version":"de9d2df7663e64e3a91bf495f315a7577e23ba088f2949d5ce9ec96f44fba37d","impliedFormat":1},{"version":"c7af78a2ea7cb1cd009cfb5bdb48cd0b03dad3b54f6da7aab615c2e9e9d570c5","impliedFormat":1},{"version":"1ee45496b5f8bdee6f7abc233355898e5bf9bd51255db65f5ff7ede617ca0027","impliedFormat":1},{"version":"42189cd810c0bf1247da0742d5744bb7c1486de6fd62269d5c25833b7ec38732","affectsGlobalScope":true,"impliedFormat":1},{"version":"3fbdd025f9d4d820414417eeb4107ffa0078d454a033b506e22d3a23bc3d9c41","affectsGlobalScope":true,"impliedFormat":1},{"version":"a8f8e6ab2fa07b45251f403548b78eaf2022f3c2254df3dc186cb2671fe4996d","affectsGlobalScope":true,"impliedFormat":1},{"version":"fa6c12a7c0f6b84d512f200690bfc74819e99efae69e4c95c4cd30f6884c526e","impliedFormat":1},{"version":"f1c32f9ce9c497da4dc215c3bc84b722ea02497d35f9134db3bb40a8d918b92b","impliedFormat":1},{"version":"b73c319af2cc3ef8f6421308a250f328836531ea3761823b4cabbd133047aefa","affectsGlobalScope":true,"impliedFormat":1},{"version":"e433b0337b8106909e7953015e8fa3f2d30797cea27141d1c5b135365bb975a6","impliedFormat":1},{"version":"40436e992021afc07b61da5f488e9671729a3c5b5e6665b99b1fb43a39081ee3","impliedFormat":1},{"version":"ddff7fc6edbdc5163a09e22bf8df7bef75f75369ebd7ecea95ba55c4386e2441","impliedFormat":1},{"version":"3a788c7fb7b1b1153d69a4d1d9e1d0dfbcf1127e703bdb02b6d12698e683d1fb","impliedFormat":1},{"version":"2e4f37ffe8862b14d8e24ae8763daaa8340c0df0b859d9a9733def0eee7562d9","impliedFormat":1},{"version":"d38530db0601215d6d767f280e3a3c54b2a83b709e8d9001acb6f61c67e965fc","impliedFormat":1},{"version":"6ac6715916fa75a1f7ebdfeacac09513b4d904b667d827b7535e84ff59679aff","impliedFormat":1},{"version":"4805f6161c2c8cefb8d3b8bd96a080c0fe8dbc9315f6ad2e53238f9a79e528a6","impliedFormat":1},{"version":"b83cb14474fa60c5f3ec660146b97d122f0735627f80d82dd03e8caa39b4388c","impliedFormat":1},{"version":"9c82171d836c47486074e4ca8e059735bf97b205e70b196535b5efd40cbe1bc5","impliedFormat":1},{"version":"f374cb24e93e7798c4d9e83ff872fa52d2cdb36306392b840a6ddf46cb925cb6","impliedFormat":1},{"version":"42b81043b00ff27c6bd955aea0f6e741545f2265978bf364b614702b72a027ab","impliedFormat":1},{"version":"162e071992b34bc36ca257d629547f93cb43728d6fe073ad18a237e4f7c52d7d","impliedFormat":1},{"version":"b73cbf0a72c8800cf8f96a9acfe94f3ad32ca71342a8908b8ae484d61113f647","impliedFormat":1},{"version":"bae6dd176832f6423966647382c0d7ba9e63f8c167522f09a982f086cd4e8b23","impliedFormat":1},{"version":"20865ac316b8893c1a0cc383ccfc1801443fbcc2a7255be166cf90d03fac88c9","impliedFormat":1},{"version":"c9958eb32126a3843deedda8c22fb97024aa5d6dd588b90af2d7f2bfac540f23","impliedFormat":1},{"version":"461d0ad8ae5f2ff981778af912ba71b37a8426a33301daa00f21c6ccb27f8156","impliedFormat":1},{"version":"e927c2c13c4eaf0a7f17e6022eee8519eb29ef42c4c13a31e81a611ab8c95577","impliedFormat":1},{"version":"fcafff163ca5e66d3b87126e756e1b6dfa8c526aa9cd2a2b0a9da837d81bbd72","impliedFormat":1},{"version":"70246ad95ad8a22bdfe806cb5d383a26c0c6e58e7207ab9c431f1cb175aca657","impliedFormat":1},{"version":"f00f3aa5d64ff46e600648b55a79dcd1333458f7a10da2ed594d9f0a44b76d0b","impliedFormat":1},{"version":"772d8d5eb158b6c92412c03228bd9902ccb1457d7a705b8129814a5d1a6308fc","impliedFormat":1},{"version":"45490817629431853543adcb91c0673c25af52a456479588b6486daba34f68bb","impliedFormat":1},{"version":"802e797bcab5663b2c9f63f51bdf67eff7c41bc64c0fd65e6da3e7941359e2f7","impliedFormat":1},{"version":"8b4327413e5af38cd8cb97c59f48c3c866015d5d642f28518e3a891c469f240e","impliedFormat":1},{"version":"d76bd0317e0958a220262a40d24f43fd5db2ff6e0ef0b2e14d2acdf7f88a78af","impliedFormat":1},{"version":"4b20fcf10a5413680e39f5666464859fc56b1003e7dfe2405ced82371ebd49b6","impliedFormat":1},{"version":"c06ef3b2569b1c1ad99fcd7fe5fba8d466e2619da5375dfa940a94e0feea899b","impliedFormat":1},{"version":"f7d628893c9fa52ba3ab01bcb5e79191636c4331ee5667ecc6373cbccff8ae12","impliedFormat":1},{"version":"5b2323ca2d1bd97e1f32f09452908e015b012e0e4f958f649cbe0c8989a3fb4f","impliedFormat":1},{"version":"8c50ee1fcb97de2860d9ebd76561614ab6d365ac8390ef4a02bb4e76929705d1","impliedFormat":1},{"version":"cff125b5bbb8b819d7835c6b78809416d08da8b00e66611bfe368e0964be7b83","impliedFormat":1},{"version":"d663134457d8d669ae0df34eabd57028bddc04fc444c4bc04bc5215afc91e1f4","impliedFormat":1},{"version":"985153f0deb9b4391110331a2f0c114019dbea90cba5ca68a4107700796e0d75","impliedFormat":1},{"version":"382654d5da3eda8ea18f931d380ab6b099daa4913ae5b64265e6960338572914","impliedFormat":1},{"version":"43e96a3d5d1411ab40ba2f61d6a3192e58177bcf3b133a80ad2a16591611726d","impliedFormat":1},{"version":"58659b06d33fa430bee1105b75cf876c0a35b2567207487c8578aec51ca2d977","impliedFormat":1},{"version":"d8cdd9477b9c5d1a8fbf2fa58e2eb6723969e7201b3549f998e0d2661dfec9d8","impliedFormat":1},{"version":"cfa846a7b7847a1d973605fbb8c91f47f3a0f0643c18ac05c47077ebc72e71c7","impliedFormat":1},{"version":"20e1c8beced348a9bf7864dd2b3ca7efa9ea6675dde8ecae6109b1a3f7248cd2","impliedFormat":1},{"version":"6c800b281b9e89e69165fd11536195488de3ff53004e55905e6c0059a2d8591e","impliedFormat":1},{"version":"7d4254b4c6c67a29d5e7f65e67d72540480ac2cfb041ca484847f5ae70480b62","impliedFormat":1},{"version":"19c3d6db2020cee6f9d8d79e13c15e546e05b6db2020a3ee63789ec74a9990b3","impliedFormat":1},{"version":"41eeb453ccb75c5b2c3abef97adbbd741bd7e9112a2510e12f03f646dc9ad13d","impliedFormat":1},{"version":"0285dbbb2fdb8c5e9b50b92570c4c039b1eea2da4cfb5a04e77c1ca8b1949771","impliedFormat":1},{"version":"301cf1d98bce8b1666184888c7aaacd6c9dfed9185510f4317ed623596e38d2c","impliedFormat":1},{"version":"6c66d5cf284a56109703f941c92b9a22f2472c14645f80a2dbb8e4ef2128d67c","impliedFormat":1},{"version":"a3e7d932dc9c09daa99141a8e4800fc6c58c625af0d4bbb017773dc36da75426","impliedFormat":1},{"version":"0b888a0aa10655cadc0dc3b66cd79a99d79ff376aaacc9b628a3c497646fddab","impliedFormat":1},{"version":"a57b1802794433adec9ff3fed12aa79d671faed86c49b09e02e1ac41b4f1d33a","impliedFormat":1},{"version":"ad10d4f0517599cdeca7755b930f148804e3e0e5b5a3847adce0f1f71bbccd74","impliedFormat":1},{"version":"1042064ece5bb47d6aba91648fbe0635c17c600ebdf567588b4ca715602f0a9d","impliedFormat":1},{"version":"c49469a5349b3cc1965710b5b0f98ed6c028686aa8450bcb3796728873eb923e","impliedFormat":1},{"version":"4a889f2c763edb4d55cb624257272ac10d04a1cad2ed2948b10ed4a7fda2a428","impliedFormat":1},{"version":"7bb79aa2fead87d9d56294ef71e056487e848d7b550c9a367523ee5416c44cfa","impliedFormat":1},{"version":"d88ea80a6447d7391f52352ec97e56b52ebec934a4a4af6e2464cfd8b39c3ba8","impliedFormat":1},{"version":"d3c8b73132efa48e9399d63e8946a57ed4a7176e2f26d2f144bb14c89fcdefc1","impliedFormat":1},{"version":"96171c03c2e7f314d66d38acd581f9667439845865b7f85da8df598ff9617476","impliedFormat":1},{"version":"27ff4196654e6373c9af16b6165120e2dd2169f9ad6abb5c935af5abd8c7938c","impliedFormat":1},{"version":"8c030e515014c10a2b98f9f48408e3ba18023dfd3f56e3312c6c2f3ae1f55a16","impliedFormat":1},{"version":"d193c8a86144b3a87b22bc1f5534b9c3e0f5a187873ec337c289a183973a58fe","impliedFormat":1},{"version":"d2aa1580a899bcec04c29b1c37f2a60f62e2f03acb731534d4e210307c982da8","impliedFormat":1},{"version":"58d70c38037fc0f949243388ff7ae20cf43321107152f14a9d36ca79311e0ada","impliedFormat":1},{"version":"f56bdc6884648806d34bc66d31cdb787c4718d04105ce2cd88535db214631f82","impliedFormat":1},{"version":"68ab1530f0ddf7475425917b0e04068afdc1aee2db033bed9aa9b60a914c512e","impliedFormat":1},{"version":"01479d9d5a5dda16d529b91811375187f61a06e74be294a35ecce77e0b9e8d6c","impliedFormat":1},{"version":"49f95e989b4632c6c2a578cc0078ee19a5831832d79cc59abecf5160ea71abad","impliedFormat":1},{"version":"9666533332f26e8995e4d6fe472bdeec9f15d405693723e6497bf94120c566c8","impliedFormat":1},{"version":"ce0df82a9ae6f914ba08409d4d883983cc08e6d59eb2df02d8e4d68309e7848b","impliedFormat":1},{"version":"796273b2edc72e78a04e86d7c58ae94d370ab93a0ddf40b1aa85a37a1c29ecd7","impliedFormat":1},{"version":"5df15a69187d737d6d8d066e189ae4f97e41f4d53712a46b2710ff9f8563ec9f","impliedFormat":1},{"version":"1a4dc28334a926d90ba6a2d811ba0ff6c22775fcc13679521f034c124269fd40","impliedFormat":1},{"version":"f05315ff85714f0b87cc0b54bcd3dde2716e5a6b99aedcc19cad02bf2403e08c","impliedFormat":1},{"version":"8a8c64dafaba11c806efa56f5c69f611276471bef80a1db1f71316ec4168acef","impliedFormat":1},{"version":"43ba4f2fa8c698f5c304d21a3ef596741e8e85a810b7c1f9b692653791d8d97a","impliedFormat":1},{"version":"5fad3b31fc17a5bc58095118a8b160f5260964787c52e7eb51e3d4fcf5d4a6f0","impliedFormat":1},{"version":"72105519d0390262cf0abe84cf41c926ade0ff475d35eb21307b2f94de985778","impliedFormat":1},{"version":"d0a4cac61fa080f2be5ebb68b82726be835689b35994ba0e22e3ed4d2bc45e3b","impliedFormat":1},{"version":"c857e0aae3f5f444abd791ec81206020fbcc1223e187316677e026d1c1d6fe08","impliedFormat":1},{"version":"ccf6dd45b708fb74ba9ed0f2478d4eb9195c9dfef0ff83a6092fa3cf2ff53b4f","impliedFormat":1},{"version":"2d7db1d73456e8c5075387d4240c29a2a900847f9c1bff106a2e490da8fbd457","impliedFormat":1},{"version":"2b15c805f48e4e970f8ec0b1915f22d13ca6212375e8987663e2ef5f0205e832","impliedFormat":1},{"version":"205a31b31beb7be73b8df18fcc43109cbc31f398950190a0967afc7a12cb478c","impliedFormat":1},{"version":"8fca3039857709484e5893c05c1f9126ab7451fa6c29e19bb8c2411a2e937345","impliedFormat":1},{"version":"35069c2c417bd7443ae7c7cafd1de02f665bf015479fec998985ffbbf500628c","impliedFormat":1},{"version":"dba6c7006e14a98ec82999c6f89fbbbfd1c642f41db148535f3b77b8018829b8","impliedFormat":1},{"version":"7f897b285f22a57a5c4dc14a27da2747c01084a542b4d90d33897216dceeea2e","impliedFormat":1},{"version":"7e0b7f91c5ab6e33f511efc640d36e6f933510b11be24f98836a20a2dc914c2d","impliedFormat":1},{"version":"045b752f44bf9bbdcaffd882424ab0e15cb8d11fa94e1448942e338c8ef19fba","impliedFormat":1},{"version":"2894c56cad581928bb37607810af011764a2f511f575d28c9f4af0f2ef02d1ab","impliedFormat":1},{"version":"0a72186f94215d020cb386f7dca81d7495ab6c17066eb07d0f44a5bf33c1b21a","impliedFormat":1},{"version":"d96b39301d0ded3f1a27b47759676a33a02f6f5049bfcbde81e533fd10f50dcb","impliedFormat":1},{"version":"2ded4f930d6abfaa0625cf55e58f565b7cbd4ab5b574dd2cb19f0a83a2f0be8b","impliedFormat":1},{"version":"0aedb02516baf3e66b2c1db9fef50666d6ed257edac0f866ea32f1aa05aa474f","impliedFormat":1},{"version":"ca0f4d9068d652bad47e326cf6ba424ac71ab866e44b24ddb6c2bd82d129586a","affectsGlobalScope":true,"impliedFormat":1},{"version":"04d36005fcbeac741ac50c421181f4e0316d57d148d37cc321a8ea285472462b","impliedFormat":1},{"version":"56ccb49443bfb72e5952f7012f0de1a8679f9f75fc93a5c1ac0bafb28725fc5f","impliedFormat":1},{"version":"20fa37b636fdcc1746ea0738f733d0aed17890d1cd7cb1b2f37010222c23f13e","impliedFormat":1},{"version":"d90b9f1520366d713a73bd30c5a9eb0040d0fb6076aff370796bc776fd705943","impliedFormat":1},{"version":"88e9caa9c5d2ba629240b5913842e7c57c5c0315383b8dc9d436ef2b60f1c391","impliedFormat":1},{"version":"c3fdbbd7360e302a9208655a01de8a942ea5f4d1d01317aa7ffe3c287b328a45","affectsGlobalScope":true,"impliedFormat":1},{"version":"bef86adb77316505c6b471da1d9b8c9e428867c2566270e8894d4d773a1c4dc2","impliedFormat":1},{"version":"1b239954e46191b95913d20771cf4283f63c3ebac79d7e30736a8d40b094fdaf","impliedFormat":1},{"version":"6ac6715916fa75a1f7ebdfeacac09513b4d904b667d827b7535e84ff59679aff","impliedFormat":1},{"version":"2652448ac55a2010a1f71dd141f828b682298d39728f9871e1cdf8696ef443fd","impliedFormat":1},{"version":"02c4fc9e6bb27545fa021f6056e88ff5fdf10d9d9f1467f1d10536c6e749ac50","impliedFormat":1},{"version":"120599fd965257b1f4d0ff794bc696162832d9d8467224f4665f713a3119078b","impliedFormat":1},{"version":"5433f33b0a20300cca35d2f229a7fc20b0e8477c44be2affeb21cb464af60c76","impliedFormat":1},{"version":"db036c56f79186da50af66511d37d9fe77fa6793381927292d17f81f787bb195","impliedFormat":1},{"version":"bd4131091b773973ca5d2326c60b789ab1f5e02d8843b3587effe6e1ea7c9d86","impliedFormat":1},{"version":"c7f6485931085bf010fbaf46880a9b9ec1a285ad9dc8c695a9e936f5a48f34b4","impliedFormat":1},{"version":"14f6b927888a1112d662877a5966b05ac1bf7ed25d6c84386db4c23c95a5363b","impliedFormat":1},{"version":"6ac6715916fa75a1f7ebdfeacac09513b4d904b667d827b7535e84ff59679aff","impliedFormat":1},{"version":"b5189fd031ef3232ec66817df5a8e7b23b079fdf3cd29a0c100eff1e98b2ce8e","impliedFormat":1},{"version":"00d3b80428c646edbd62379ea531606ee94eed51c4759cbab5a454e92b379690","impliedFormat":1},{"version":"49c346823ba6d4b12278c12c977fb3a31c06b9ca719015978cb145eb86da1c61","impliedFormat":1},{"version":"bfac6e50eaa7e73bb66b7e052c38fdc8ccfc8dbde2777648642af33cf349f7f1","impliedFormat":1},{"version":"92f7c1a4da7fbfd67a2228d1687d5c2e1faa0ba865a94d3550a3941d7527a45d","impliedFormat":1},{"version":"f53b120213a9289d9a26f5af90c4c686dd71d91487a0aa5451a38366c70dc64b","impliedFormat":1},{"version":"83fe880c090afe485a5c02262c0b7cdd76a299a50c48d9bde02be8e908fb4ae6","impliedFormat":1},{"version":"946a709579b7868a92a70ad70906444f32803fa6e6ce3739b6594c17691837ce","impliedFormat":1},{"version":"57d67b72e06059adc5e9454de26bbfe567d412b962a501d263c75c2db430f40e","impliedFormat":1},{"version":"6511e4503cf74c469c60aafd6589e4d14d5eb0a25f9bf043dcbecdf65f261972","impliedFormat":1},{"version":"5b955caba32e3dc3c3e293e00c104e255f0868848796e5bd5763f990c36d2798","impliedFormat":1},{"version":"8c70ddc0c22d85e56011d49fddfaae3405eb53d47b59327b9dd589e82df672e7","impliedFormat":1},{"version":"a67b87d0281c97dfc1197ef28dfe397fc2c865ccd41f7e32b53f647184cc7307","impliedFormat":1},{"version":"771ffb773f1ddd562492a6b9aaca648192ac3f056f0e1d997678ff97dbb6bf9b","impliedFormat":1},{"version":"232f70c0cf2b432f3a6e56a8dc3417103eb162292a9fd376d51a3a9ea5fbbf6f","impliedFormat":1},{"version":"4162ae9d4c1b8a7ab7f9ef287d98e9000b57062db1eb1ae735c4814845c2cb5d","impliedFormat":1},{"version":"a0ba218ac1baa3da0d5d9c1ec1a7c2f8676c284e6f5b920d6d049b13fa267377","impliedFormat":1},{"version":"8a0e762ceb20c7e72504feef83d709468a70af4abccb304f32d6b9bac1129b2c","impliedFormat":1},{"version":"d0af5b1b8d6262ef94fee7f8a39d12db1e21762a048ae33d4a5941a5b9fc2e1d","impliedFormat":1},{"version":"9252d498a77517aab5d8d4b5eb9d71e4b225bbc7123df9713e08181de63180f6","impliedFormat":1},{"version":"54d320df89710586fddb799b1b4f5b3364773a510dc5d507f3fbf52d8a734ae4","impliedFormat":1},{"version":"35e6379c3f7cb27b111ad4c1aa69538fd8e788ab737b8ff7596a1b40e96f4f90","impliedFormat":1},{"version":"1fffe726740f9787f15b532e1dc870af3cd964dbe29e191e76121aa3dd8693f2","impliedFormat":1},{"version":"371bf6127c1d427836de95197155132501cb6b69ef8709176ce6e0b85d059264","impliedFormat":1},{"version":"2bafd700e617d3693d568e972d02b92224b514781f542f70d497a8fdf92d52a2","affectsGlobalScope":true,"impliedFormat":1},{"version":"5542d8a7ea13168cb573be0d1ba0d29460d59430fb12bb7bf4674efd5604e14c","impliedFormat":1},{"version":"af48e58339188d5737b608d41411a9c054685413d8ae88b8c1d0d9bfabdf6e7e","impliedFormat":1},{"version":"616775f16134fa9d01fc677ad3f76e68c051a056c22ab552c64cc281a9686790","impliedFormat":1},{"version":"65c24a8baa2cca1de069a0ba9fba82a173690f52d7e2d0f1f7542d59d5eb4db0","impliedFormat":1},{"version":"f9fe6af238339a0e5f7563acee3178f51db37f32a2e7c09f85273098cee7ec49","impliedFormat":1},{"version":"1de8c302fd35220d8f29dea378a4ae45199dc8ff83ca9923aca1400f2b28848a","impliedFormat":1},{"version":"77e71242e71ebf8528c5802993697878f0533db8f2299b4d36aa015bae08a79c","impliedFormat":1},{"version":"98a787be42bd92f8c2a37d7df5f13e5992da0d967fab794adbb7ee18370f9849","impliedFormat":1},{"version":"332248ee37cca52903572e66c11bef755ccc6e235835e63d3c3e60ddda3e9b93","impliedFormat":1},{"version":"94e8cc88ae2ef3d920bb3bdc369f48436db123aa2dc07f683309ad8c9968a1e1","impliedFormat":1},{"version":"4545c1a1ceca170d5d83452dd7c4994644c35cf676a671412601689d9a62da35","impliedFormat":1},{"version":"320f4091e33548b554d2214ce5fc31c96631b513dffa806e2e3a60766c8c49d9","impliedFormat":1},{"version":"a2d648d333cf67b9aeac5d81a1a379d563a8ffa91ddd61c6179f68de724260ff","impliedFormat":1},{"version":"d90d5f524de38889d1e1dbc2aeef00060d779f8688c02766ddb9ca195e4a713d","impliedFormat":1},{"version":"a3f41ed1b4f2fc3049394b945a68ae4fdefd49fa1739c32f149d32c0545d67f5","impliedFormat":1},{"version":"b0309e1eda99a9e76f87c18992d9c3689b0938266242835dd4611f2b69efe456","impliedFormat":1},{"version":"47699512e6d8bebf7be488182427189f999affe3addc1c87c882d36b7f2d0b0e","impliedFormat":1},{"version":"6ceb10ca57943be87ff9debe978f4ab73593c0c85ee802c051a93fc96aaf7a20","impliedFormat":1},{"version":"1de3ffe0cc28a9fe2ac761ece075826836b5a02f340b412510a59ba1d41a505a","impliedFormat":1},{"version":"e46d6cc08d243d8d0d83986f609d830991f00450fb234f5b2f861648c42dc0d8","impliedFormat":1},{"version":"1c0a98de1323051010ce5b958ad47bc1c007f7921973123c999300e2b7b0ecc0","impliedFormat":1},{"version":"ff863d17c6c659440f7c5c536e4db7762d8c2565547b2608f36b798a743606ca","impliedFormat":1},{"version":"5412ad0043cd60d1f1406fc12cb4fb987e9a734decbdd4db6f6acf71791e36fe","impliedFormat":1},{"version":"ad036a85efcd9e5b4f7dd5c1a7362c8478f9a3b6c3554654ca24a29aa850a9c5","impliedFormat":1},{"version":"fedebeae32c5cdd1a85b4e0504a01996e4a8adf3dfa72876920d3dd6e42978e7","impliedFormat":1},{"version":"b6c1f64158da02580f55e8a2728eda6805f79419aed46a930f43e68ad66a38fc","impliedFormat":1},{"version":"cdf21eee8007e339b1b9945abf4a7b44930b1d695cc528459e68a3adc39a622e","impliedFormat":1},{"version":"9f9bb6755a8ce32d656ffa4763a8144aa4f274d6b69b59d7c32811031467216e","impliedFormat":1},{"version":"bc9ee0192f056b3d5527bcd78dc3f9e527a9ba2bdc0a2c296fbc9027147df4b2","impliedFormat":1},{"version":"330896c1a2b9693edd617be24fbf9e5895d6e18c7955d6c08f028f272b37314d","impliedFormat":1},{"version":"1d9c0a9a6df4e8f29dc84c25c5aa0bb1da5456ebede7a03e03df08bb8b27bae6","impliedFormat":1},{"version":"84380af21da938a567c65ef95aefb5354f676368ee1a1cbb4cae81604a4c7d17","impliedFormat":1},{"version":"1af3e1f2a5d1332e136f8b0b95c0e6c0a02aaabd5092b36b64f3042a03debf28","impliedFormat":1},{"version":"30d8da250766efa99490fc02801047c2c6d72dd0da1bba6581c7e80d1d8842a4","impliedFormat":1},{"version":"03566202f5553bd2d9de22dfab0c61aa163cabb64f0223c08431fb3fc8f70280","impliedFormat":1},{"version":"4c0a1233155afb94bd4d7518c75c84f98567cd5f13fc215d258de196cdb40d91","impliedFormat":1},{"version":"f9ceb394e029da0392ebd49564002b01fb4517cef0d14b238f2a8e7362a833e1","impliedFormat":1},{"version":"1de80059b8078ea5749941c9f863aa970b4735bdbb003be4925c853a8b6b4450","impliedFormat":1},{"version":"1d079c37fa53e3c21ed3fa214a27507bda9991f2a41458705b19ed8c2b61173d","impliedFormat":1},{"version":"5bf5c7a44e779790d1eb54c234b668b15e34affa95e78eada73e5757f61ed76a","impliedFormat":1},{"version":"5835a6e0d7cd2738e56b671af0e561e7c1b4fb77751383672f4b009f4e161d70","impliedFormat":1},{"version":"5c634644d45a1b6bc7b05e71e05e52ec04f3d73d9ac85d5927f647a5f965181a","impliedFormat":1},{"version":"4b7f74b772140395e7af67c4841be1ab867c11b3b82a51b1aeb692822b76c872","impliedFormat":1},{"version":"27be6622e2922a1b412eb057faa854831b95db9db5035c3f6d4b677b902ab3b7","impliedFormat":1},{"version":"a68d4b3182e8d776cdede7ac9630c209a7bfbb59191f99a52479151816ef9f9e","impliedFormat":99},{"version":"39644b343e4e3d748344af8182111e3bbc594930fff0170256567e13bbdbebb0","impliedFormat":99},{"version":"ed7fd5160b47b0de3b1571c5c5578e8e7e3314e33ae0b8ea85a895774ee64749","impliedFormat":99},{"version":"63a7595a5015e65262557f883463f934904959da563b4f788306f699411e9bac","impliedFormat":1},{"version":"4ba137d6553965703b6b55fd2000b4e07ba365f8caeb0359162ad7247f9707a6","impliedFormat":1},{"version":"6de125ea94866c736c6d58d68eb15272cf7d1020a5b459fea1c660027eca9a90","affectsGlobalScope":true,"impliedFormat":1},{"version":"8fac4a15690b27612d8474fb2fc7cc00388df52d169791b78d1a3645d60b4c8b","affectsGlobalScope":true,"impliedFormat":1},{"version":"064ac1c2ac4b2867c2ceaa74bbdce0cb6a4c16e7c31a6497097159c18f74aa7c","impliedFormat":1},{"version":"3dc14e1ab45e497e5d5e4295271d54ff689aeae00b4277979fdd10fa563540ae","impliedFormat":1},{"version":"d3b315763d91265d6b0e7e7fa93cfdb8a80ce7cdd2d9f55ba0f37a22db00bdb8","impliedFormat":1},{"version":"b789bf89eb19c777ed1e956dbad0925ca795701552d22e68fd130a032008b9f9","impliedFormat":1},{"version":"c82c29b1550264f4abf19c75297b1dc7b5da4a29240481751a3559b748abff8c","affectsGlobalScope":true},"7b550dda9686c16f36a17bf9051d5dbf31e98555b30d114ac49fc49a1e712651","30c8737a7fcb1a3ba5e7c28d50c61af17c3b85bfbc460f7b8011edd8e18a286f",{"version":"2d4ac711533bc098081b7541844e828d0972877d2efeb82254ad3ee0b6843316","impliedFormat":1},"edf29d75f4e6ea385e6a25ca4e94234e9f282e4406aa4eac0d1ad9e8a6aa55b8","f4be4e70697edcae358d2289346b6f3289ad7d390b21c491c0fb5c0285e6ecfa","17240a5ab215926de13c6c733ed86d0fa73238980814694d5403984a60640323",{"version":"384bb777eef31e33ec4e834ef979308c7cb3e40bd1e111cdb299839322ac7ce0","affectsGlobalScope":true,"impliedFormat":99},{"version":"6c7aa6a7577e5e0a6d7b009dd5809a84a7d9e484f9db90a744c08a7f90e0ff32","impliedFormat":99},"385c9a58c09a3f30071681d9103dede8201ab932d104e4ea9cb2c70493effd14","39d85af45b3ccb246ee4bfafa95862675712afd947b955b0706d8a504feb1dff","3c98f42c6cf229ef42d18a536f30155fda81fb9451846487067faff81b4ef3a4",{"version":"a0815a09aed3b0279eb15c335aaa2fdbaaa1794a76ccb3bd9c6032915c03bb76","affectsGlobalScope":true,"impliedFormat":1},{"version":"af4f7a54357c1868ff9caf7991f1833cdb338c4afcec37a03cf104f3782ddf9b","affectsGlobalScope":true,"impliedFormat":1},{"version":"0e335736c960d3b971ad3ad79159df8252caa29d0a8114a0029e09cfe4a7cbc0","affectsGlobalScope":true,"impliedFormat":1},{"version":"770a83a0cd5cf52044ea1ec7c17ff32608f5b0e75d1cfe72f2fac13add3b8df6","affectsGlobalScope":true,"impliedFormat":1},{"version":"033cc8d0cf4529bc62746a9a026e43454f06f86d560b533e2726e677caf43c5f","affectsGlobalScope":true,"impliedFormat":1},{"version":"56ed2fc77c5587ed572b52c0c679ab284a84254875628d39d63a1ad84aa47993","affectsGlobalScope":true,"impliedFormat":1},{"version":"da04a353ae1f194880392596c1c65bd16039d7cb7d8c95394c8cc833bbeb5600","affectsGlobalScope":true,"impliedFormat":1},{"version":"7f0b457714a6a7dc40d51506cf9e5ab38aec893d78d10dc853d51e4ece6c8a86","affectsGlobalScope":true,"impliedFormat":1},{"version":"42dc1c1fb9a082bfc981edb18b50e12f7fda5009a15468ef6e6f939e86300fbd","affectsGlobalScope":true,"impliedFormat":1},{"version":"4b36ac8539e453915ead7ddf25653d6a7691e6dac52003372c12244965480df2","affectsGlobalScope":true,"impliedFormat":1},{"version":"b98109e756e7e1adf0f305b3f1e9d65a40da0c71ec6d23ffddd9c0ea75cb312a","affectsGlobalScope":true,"impliedFormat":1},{"version":"b3bee285d6a28772aba2633b6bcd9cd53a517f7a4862cf7893197222e73cfddc","affectsGlobalScope":true,"impliedFormat":1},{"version":"122c612162cb2e09d70ebdd670941441e902a26ee79b37f006c5b9d38868ed32","affectsGlobalScope":true,"impliedFormat":1},{"version":"c5af587b79f02783d656cbacf0c2ef79e95b93fb237b313f62e7bb5fbf4e3fe5","affectsGlobalScope":true,"impliedFormat":1},{"version":"f98e2b5fcf96686f2432d1823f195a2ad443762006d7fbda7b4d8d25efd0e384","affectsGlobalScope":true,"impliedFormat":1},{"version":"d3f5b5ecd76cd87ee280a5e72e69f941481e62f12430db4f27aa885c3addfdc7","affectsGlobalScope":true,"impliedFormat":1},{"version":"598710556d7994badb8c5c72d65a602121488d233b70e1c1318faf476a3a76d6","affectsGlobalScope":true,"impliedFormat":1},{"version":"5dabdd06cdb220b33a81312a965f8cab510044ccc522dfac4704baf7ae8aaa79","affectsGlobalScope":true,"impliedFormat":1},{"version":"29c8673e8a6fe0116035c345438591056032a76cad5744c81b5feb039d26789a","affectsGlobalScope":true,"impliedFormat":1},{"version":"9569b7fdc41e43e971cdd193685b085d682a3f2c7243c9a41360521cb21265fa","affectsGlobalScope":true,"impliedFormat":1},{"version":"a66a81b1b7e9582442c41807d62a7baee789e65a8ce6951e6a0b2553a94859a1","affectsGlobalScope":true,"impliedFormat":1},{"version":"f4a2170e218a95ea4352470799614733e6ac9576e9f2d10b57a986dc26763936","affectsGlobalScope":true,"impliedFormat":1},{"version":"1eb62bccdb763ded6f74a2ccd5eb939e3d63fc2a25677409d9c45bd982dec75e","affectsGlobalScope":true,"impliedFormat":1},{"version":"4bcb4739ebaa38c7c8bb85a5b40971ab83809c6f1f217e4d26c4418d9b9b07ad","affectsGlobalScope":true,"impliedFormat":1},{"version":"b83d4344e841547f1f5f791abc348c465b39fc81b1aa3090191e8d38a53a5e70","affectsGlobalScope":true,"impliedFormat":1},{"version":"8f54dfac75c73a9e55bb938d2dab1b48fb6fa8fc677dc7a21c3f90e92dae38b0","affectsGlobalScope":true,"impliedFormat":1},{"version":"ed91ce329a07818d9ad47f86644ec23991b202aca41849e076f2bce1006f1869","affectsGlobalScope":true,"impliedFormat":1},{"version":"3bac8c62839badb7cf43d2a507d8df73e61a5313bb6bf0eb0e373b51b1d94e1b","affectsGlobalScope":true,"impliedFormat":1},{"version":"5d94554e80c2392a2b51be4baad4619268158eccb18d23e5d7107849bc409485","affectsGlobalScope":true,"impliedFormat":1},{"version":"ceb1a78b91d40a8cef51b498546780d8842cd42811597af2c5584fa68defe048","affectsGlobalScope":true,"impliedFormat":1},{"version":"07cc2729a92e8293f16fa19e56aaeb9f350b4442a24724d358073131222e0bae","affectsGlobalScope":true,"impliedFormat":1},{"version":"9f352c8cba96c98d43bc7bcc5c807626c466df52c2d8168da48e969d1a9d994f","affectsGlobalScope":true,"impliedFormat":1},{"version":"fbaebab968e6f4a972ce9ef52028f07ab258bafe8944e18a490397361fcb8133","affectsGlobalScope":true,"impliedFormat":1},"c7f467ef043afbee7ef35ed47856e822147ac17e0f972c4aee7b8d957ecf651a","8b33d8d5f8b851f79872c6557bc5032aa5d712cceddb2eaf4f0c5d0ab4646d3c","0261d7631f52e8267f683a7be63fee136d50c06ef991f5323256ebf215481927","193cacddcdf0a3019e627b3249a0dba85e6b88ad9fbc9a5772162ce0732a8c81","3aeeae762c5ebe0c37122071258016cae1890bc508852f38d282530fc321747d","d4c8d0c05f5149b237131a382c5eb0b9ee48ca9fac9869e288ab8ed2c4eb5ca6","132ebbe8ed178b1b76afb8f8b1bce6c89689cf873e3ceca465bfc2b7c04194d8","94e3df952e582f1ea0681f14250b40b1fe1ef3c608f28f000355cac7e75ea4f8","a3d6f3d7905ddd64d78560448e0d9dbc1053c2c5f03b46818fcf5ffaf4d2a2e6",{"version":"c57b441e0c0a9cbdfa7d850dae1f8a387d6f81cbffbc3cd0465d530084c2417d","impliedFormat":99},{"version":"51954e948be6a5b728fcfaf561f12331b4f54f068934c77adfc8f70eea17d285","impliedFormat":1},"2a16bcacd829da80f43c3dbf940f1d8b478b2a0ff67e0024a5083efa25b08f3d","1b7e32b148e45538b5e4679734c9d6a0de1ccb021ac06a030045fd9cbdf4d390","fee8a7d7624b2651110d0c69120d698dfc1e28500ff7ab5fdc06e1719ef29f2d","69e6b5b2933a95bcd64fb9e020a7178c4d18a1ecf62d62ead44bfc22bc3daa44","9ddbc7bf8ece843b1b578e3e90b09d016512ed2216caa72e9a0f7cd182cc681b","5ed78b5430b4b22e32eca32e899efc571dec7e211a5607c200f2363c7c10417f",{"version":"45df11ed45eb1c707ef59206bb0c6daddd348e59803bf26646ad0d85c00eb633","impliedFormat":99},{"version":"ae046314c0651da4a01e9e48ddf370ce9d22ad21f48962f25a12c1c09de9b01a","impliedFormat":99},{"version":"d0e136d6bf3c38be7af296b7e01912b6e8944a428ba7fd1e415a10acd9e687e8","impliedFormat":99},{"version":"7a685305685db7f9d2195ae629df44ae5888c13371a032ebe629a615a177a45b","impliedFormat":99},{"version":"026b28bf8f8c6f88e4e3aee7dd69f2523b91df8310bf6557d71c853144ec0720","impliedFormat":99},{"version":"4bc5ace72e3fcd7da9d8872af098c4b157ad8bd98b1996c097212884dc8e09cb","impliedFormat":99},{"version":"c3aa1b9d09adac7ac5e49aba8e8fa7114c2c842d46c2c5f51da53ec889787bac","impliedFormat":99},{"version":"7cd8fbd00f9608795145d427ff641d7abc485cd485d833ea1d9a90222ee73778","impliedFormat":99},{"version":"0f4f54801406a0a67455a9ad950bed9f4d2921fd66a91682f83a985086d60082","impliedFormat":99},{"version":"7c128cd80303077ca51f3b70b6103f5715048642f5b232cacc02f515ea2c0149","impliedFormat":99},{"version":"8c18a2ccca01e6ec6bb951c9a376d12b08112ee5237826caa913d85b4e3cadb5","impliedFormat":99},{"version":"935c01e5232775764203dce2944dfd69047e66765e6e521fa11d110b74aac76a","impliedFormat":99},{"version":"6aeb63cfffaa8f3274025ba556e6d90d9e90a0b5a664bdcd26fcb23486309efd","impliedFormat":99},{"version":"4f0d9edb39ca115f34bf49e6047d041fa9b589dbe5e652ccec0e61bcc4ceb6a5","impliedFormat":99},{"version":"6e5aa91099e2fe5d1d05f6f3100a90e5a5d9b8aea7b0ea6f4d05a0f192899a64","impliedFormat":99},{"version":"bd85cba544b37cd32e8d02b138c3a2a4075930d01146b3f5e33d713b39dafe77","impliedFormat":99},{"version":"0356655e60acc281c43788011d9f0115438503e6da81ae50afa063c212b86cdd","impliedFormat":99},{"version":"20ca05d62223bf6f117925ef8f9b9781e894cb146d30ac491e0763d34e53a5d0","impliedFormat":99},{"version":"4ba733d1a5ff0a0779b714468b13c9089f0d877e6fbd0147fac7c3af54c89fe0","impliedFormat":99},{"version":"697203f3f5a1fea90e40fe660360325090ab36e630dc9422a1909dd4faa2cacc","impliedFormat":99},{"version":"ad1226eba93a65cdccdb1b4f115d67c5469e12705dbe80139c2988d6b296d04d","impliedFormat":99},{"version":"4ea2c94c3a1c87029d10f11c209674d4c6a0c675a97503dc9668d2815ff6ea11","impliedFormat":99},{"version":"2c78675da824686c3541304a927c852a10611b38cdd99b7798e7d923429dc759","impliedFormat":99},{"version":"42ff88c837d04ae4aa8dad82b40613d4f23eddfa674862cf323a4765864f895f","impliedFormat":99},{"version":"94cfe3be66e4a6a1d52eaff0eb03bea21b4cded83428272c28feedfa5f9a152a","impliedFormat":99},{"version":"c2cf5eb33fc641dd321afd12c726ac3e753a81ab1618270ce6cd508f927989c7","impliedFormat":99},{"version":"a7f2f38cd72a96e7678555a1166a4488771b94e5a9c799d1c8943974ada483bd","impliedFormat":99},{"version":"c519327110a82e5eeaad683dc64f36994f19d9893fe69c4ea2b19d41b7e3e45b","impliedFormat":99},{"version":"fa525a25eaf81e3eaef7ca328c352bf4b38e1392ba468aeef117477a5dc42ea7","impliedFormat":99},{"version":"74a3f8babbd6269b402051673c8b255ad31db07539e37bc15aedcf6311fbb53c","impliedFormat":99},{"version":"73c4f628937d4e4a94d5af1c04bf57008a9d2c5f94a8fe6d9da8d51783069e15","impliedFormat":99},{"version":"f8e1fd0e462a1208e7c1e804fa87790112a6ba8c90ad3dc341d7c6430a8b79e1","impliedFormat":99},{"version":"1636e5ef72e41182b6a6a3e62595a3ff60c48f8b6fdb7373b2e7f7eb0f9485d7","impliedFormat":99},{"version":"6fbdecf06e73381e692ae1c2637a93fe2fa21f08e7cfebfac1cd2d50c6c6df6c","impliedFormat":99},{"version":"e437fb52a096addea9cf385b00cadc5fc34b8b8f6a7e63ef02b26cdc495478ab","impliedFormat":99},{"version":"75ad38105b8decc3c60ee068c8d76e3f546b4db1ca55255d0a509f45e4b52990","impliedFormat":99},{"version":"13ce682bb57f9df36d87418dba739412fd47a143f0846ea8a1eb579f85eeed5d","impliedFormat":99},{"version":"d6608a9dd5b11c6386446e415dc53f964f0b39641c161775de537bd964a338da","impliedFormat":99},{"version":"d45218d368df27abcfd0253d4b1287e1b954156f32ff263f31913bad81a80918","impliedFormat":99},{"version":"dfb31f55c4a39440f89ae132de8bad7d4ff09c0f419df24955800ab5266cd7f5","impliedFormat":99},{"version":"edd454b3d3813b5cc5d87c68ba3c982ad8ec4b22b6ebd5e03a4f6a06f56f6e98","impliedFormat":99},{"version":"c5b7d15ea876bf33972a2ab1d31aa0dd9328e23ee6e59349afff62fa784e6da2","impliedFormat":99},{"version":"f154284eee40d23741c6d62884cecad12fdda3b4981bd4cd46d5515910ce84b3","impliedFormat":99},{"version":"827a02d7987f70a3675cadeef9e7128cb4d65135fd8ea6fca87f91263b6229db","impliedFormat":99},{"version":"bfc938fd99ffb5407a7c0bde6d49c42a3d23f0e8fbdbbb5a50926b72114d5d1f","impliedFormat":99},{"version":"ebdc3b72652592040fe10eaaa4ae53621460085eaf70be4b0e560fc30d459877","impliedFormat":99},{"version":"c35b0845639396a86ea5bf1276550dc0db6aadbbfb1d7145fe5974701065f99a","impliedFormat":99},{"version":"7c7dfb0cb2a27eb09a6e6b47566678a13e85de27c244d37d897ecb17399c24ea","impliedFormat":99},{"version":"f5f99c35649b9ad64c6b3dcdd8cfc7c9db3472d27eeb04156b15c17be0e30e5c","impliedFormat":99},{"version":"ecd5b86187507d8dd18df5c1dfdf466533fa0c219f1141874544cad4ee8181d0","impliedFormat":99},{"version":"d4af10887947f5f2d16df413017ec9b69fccf0f1dcdd284b6284d2784c976018","impliedFormat":99},{"version":"f38ae89747f696e40b633f4c4813e4a7b1e677ffc4d1fe41fa842bc89ece4979","impliedFormat":99},{"version":"b3f309aab87ae7d8c0b3db432480f23a023204fcd58c9ebba001b53aa3ec313b","impliedFormat":99},{"version":"96dd81986d1a9b9da2002c35040d94a4a97362b810c558cdc46e573abf4aa717","impliedFormat":99},{"version":"277835d2fa0011bc11b00e550e92a95c82c128af031405938d85a38d8de12ed8","impliedFormat":99},{"version":"70859886ddd69237ad8e8c2e20d052c778870c6e3d420dbcddf4d2d9d56878f8","impliedFormat":99},{"version":"ad42398997e18754aa0441a40d1c73e3a45adef0742ca4b4d4bdc335405f6735","impliedFormat":99},{"version":"ba2edd91e0df0a3d331b411440c9273f4cf55f1603ba36af2bf849f1ab9e7edb","impliedFormat":99},{"version":"c91b058ab74323c57dda1cbda7eb8cee56272002249a642deebbbd977c4a0baa","impliedFormat":99},{"version":"cb7f489960477f1f432a3389f691dc243ca075e87f20032a2866321dab05bae2","impliedFormat":99},{"version":"ca885b971dc0c8217ef8aca9f3879c3c2d53415c4dfbe457748045160f6e5205","impliedFormat":99},{"version":"966c9476536dcff6470b95afd27f30acef2692e4795ef8da8ee4b568b4baeb34","impliedFormat":99},{"version":"13c2e1798a144acb07b57bc6b66d4eadf6e79f1bbd72472357d303e7b794842a","impliedFormat":99},{"version":"516f5feb685e00a96e4d4c148f9f71f0c388bdc223350c76b7fb97a2750d4d98","impliedFormat":99},{"version":"24c626960973658ff450798d90b9696c53271c2d60192ce73306bd4298dcbd1b","impliedFormat":99},{"version":"7c7a960997d3470573faaaa089e6effd21cd6233d97ba7245974b4adf46597fd","impliedFormat":99},{"version":"560ad98415f922fd0bbe0371224646932d43d3719a5f2b4375817dc3704cb77b","impliedFormat":99},{"version":"69a24ce73bd1a72860582848f778a9404611a2cb05adeb2313c7d13bbc8fbad1","impliedFormat":99},{"version":"017907864b01ae728f5be6be99ea7632e68b2a35c2d7c9606bde20f85f10f838","impliedFormat":99},{"version":"a73fe468accce86f9cd30cb927ae0890fc56e0f5b895bdaa1883a2ea00f2ac52","impliedFormat":99},{"version":"22f98eae982b7f0d26d3dd7849210e033dc1992f594d87c6fe30075eb94b7a24","impliedFormat":99},{"version":"ec47b34311c3c799d1c90a3dcac1651ed23948c064aca4f0617fa253e648ab15","impliedFormat":99},{"version":"761efac4dfd849586e4fe49fc6cda2aba8e708fa8e4eb19ae85373084cba0d51","impliedFormat":99},{"version":"45d1e62fd2cfcf9fd0b42e636a94c2939ffd835d8aa42cccb88bdf4f6042549a","impliedFormat":99},{"version":"965bfde0433a808a389b80a8e45b717cd2d5a3a0cdf418707cfda3046e33fa5e","impliedFormat":99},{"version":"1d107f6f5f233d9a19c67d423cfdd3cb3aec49f41e338ad09a50cab2a1c94bd2","impliedFormat":99},{"version":"b011f71b5d21579da9f868e56acf3887051fc4027cc7cde7317facb232ed3e95","impliedFormat":99},{"version":"7714308befeeb34cbc1d6715bb650d05e2b4e0516db9e58ef4c399e462d222b1","impliedFormat":99},{"version":"3098f0794f8cecb813ede63e9484a44bb75926c37c9983efc85c9994ebc6e9a6","impliedFormat":99},{"version":"eb8a258495db43e8e4641def32bbbee1b73ecdc680407f948543bd9950668293","impliedFormat":99},{"version":"aa7a83f4acf2686925511ecc32d148062c02984068d563c44f00835fee5b164f","impliedFormat":99},{"version":"d4632bbd2d2afbb1b75163dc7cabab5cc218c2fa933cb8f7d5b7089255faa6fd","impliedFormat":99},{"version":"0cf4827f19c749c5befed9585862c6196a4a5b3d889d20e0f5f4bdb6f734dcc7","impliedFormat":99},{"version":"14d3c7499d1759af5c78eec4f26a6f5b85bdd5b0e41ef3f5e6e813f1ae88c06a","impliedFormat":99},{"version":"0082935dc2cb31cd632eaa6bbdec17f1a9142652e38ede025c0ffab00c50bac4","impliedFormat":99},{"version":"0df7497ada3a4f6459420803ecf7e555f1ad1e7bd43c1e17bdafbc34e19d7162","impliedFormat":99},{"version":"5cccc8d1dd17c789bb6baba06a035e98e378a80d133da3071045c9901bee0094","impliedFormat":99},{"version":"c8a40bb3df60346af02e8d786473985ba53b716bc7caefd21ab838f025ec103b","affectsGlobalScope":true,"impliedFormat":1},{"version":"64da9a17f7cb5d84731607aed8493e4550a3e613cc7b880c87ce82b209d66b96","impliedFormat":99},{"version":"c00cdbfab0c58bb06a3d3931d912428f47925e7f913d8024437ca26a120e4140","impliedFormat":99},{"version":"4ca5b927a7e047f0a0974c7daaeb882230ac08ba3fc165c8e63ddcbd10da5261","impliedFormat":99},{"version":"98033c4e4156d3de12cdc2bfb5494a3eba887661e46a492788f0d9a0cb0c25ea","affectsGlobalScope":true,"impliedFormat":1},{"version":"0b6d4c3f82f8dc5ea956b45f38badb561e5b580651397c7d7c06c472f9a7f2c3","impliedFormat":99},{"version":"6d056661e4b636cc04e36c36b24a4eb692499b21fe0b18cb81f8bb655d7a3930","impliedFormat":99},{"version":"e71c5f5440bea23cee6fa272d088930e69694c09ccb89f8811b097feb7c078dc","impliedFormat":99},{"version":"d5de759fa4dc835dd077e4187cb2ff88443990f91dcd606c2ce2a2add88669c2","impliedFormat":99},{"version":"1f957c8657bb868e8cb92e46eac8c8b1877a96708e962015a1ed47fd42c697f6","impliedFormat":99},{"version":"217800577a2c9a7232e5a9d1abd1c1836acbb004e7522a5261299aa867713f96","impliedFormat":99},{"version":"60981ae7c2a8926f7855d8068c42e05a3b1959f0bb795a8bb9773c912a9a6f16","impliedFormat":99},{"version":"4a6de5821d23f5e1781c567ab6550e5357b2c2ae3e8813a277062512f73d4a28","impliedFormat":99},{"version":"618b5aa1f8b9791938f8033f1855238774b555f9dd35f0b8a5443cc066721605","impliedFormat":99},{"version":"760064e691b40768713d8d4d55c8516c402670fed62d189a67d9c9b11ca64cb6","impliedFormat":99},{"version":"bdf1401d357e12cb102b886ee5bd88ef1d975a0fc408cf190ea2e2b824d5b8cd","impliedFormat":99},{"version":"8e8fa002f1dabd3fadbdc4c110274558e44279e0628f53053c23cf89070d6a99","impliedFormat":99},{"version":"68617a52d0596e488c88549c000e964c5f6a241e5361095b2c6203586689b1f3","impliedFormat":99},{"version":"8d4a70e05b1f8450f5fb8997e5bfc336dd0baec3f2c8117f6f260d4eb68de0ac","impliedFormat":99},{"version":"8fa060b55694a9427afa2346181d988302de37181cac7df6e29f252b3741164c","impliedFormat":99},{"version":"e61ce3bbfe37669692af8ac289869baa7b9d01b7e260e5cd0294095a4f6c29a2","impliedFormat":99},{"version":"10f60c4f46231065e5a4815651300d69925049b6d654c141eea7bc3410fa5b4d","impliedFormat":99},{"version":"ab6f3cd2e0edc76fb4d65a8f109f3085d4d0791cb083b685b73c4a45c46d9d8e","impliedFormat":99},{"version":"8cc3ab398412f20af6fdd1d307176f933f3a4a6b7eeab11388d3a084b811bec8","impliedFormat":99},{"version":"696116447a588ebeff9d158672b83ce1d26b2be7ffb29acee5925b75c1e29ed4","impliedFormat":99},{"version":"8ca97507cc241216ed30a5c73091a6dd4818dc9cf6dbd3bdab039e40f474202e","impliedFormat":99},{"version":"5676038845e4209868d017df816419f7492d62530eb41bccc2de6783f3df2598","impliedFormat":99},{"version":"cdc154f5e44aa28c4f948ddce70d8cc57acd0992809549761b2f352c409e03b4","impliedFormat":99},{"version":"d7697f915c61a7f7ee03922e9f4e2dd3ef8122a3bcdafc1d7824f2c664b67ad0","impliedFormat":99},{"version":"8ae0357ed41745154782684b1cd3a8b9c84dc92935348d3711b8c949472d6398","impliedFormat":99},{"version":"ece19f08fb075c84c2e22fee2af1991bd2f67f60157b72a2993dc6d1087a7e80","impliedFormat":99},{"version":"4804c3e9ab498d31144a0c9b95defba9f913a4326063d19d8583eb4ba9708a15","impliedFormat":99},{"version":"f7292171fc81d858880863eeea33c85f9522909b6929559f780b5ed697c99020","impliedFormat":99},{"version":"b90f14bca14cdbdd60dc83c451aca97e8df63c8eb8a158a9ed84de4bfb4cad76","impliedFormat":99},{"version":"654fac848dea765dcd6fb3456ab083d6ab20a91b78721928a8d0d691387ae8c2","impliedFormat":99},{"version":"daf3cb7fbb067540163df0a3421e791ebde6bd2e699aad4cdb13366871cb7196","impliedFormat":99},{"version":"98ba4768c426848773fb4a39203aac92e6baa545d93510665cdf207454d0811c","impliedFormat":99},{"version":"f65116ea54fd65813a0d9695249ceaa716487c932247e4aede3e2e3ad3d07316","impliedFormat":99},{"version":"99484c7a277c488a16c49ac1affe465e4fbb5e4d57b8c2190092c5d7b4fe6fca","impliedFormat":99},{"version":"459576a2bc7f798ca767ded6a79cc639a26cb797e5b0c417d0f05eb46f595019","impliedFormat":99},{"version":"0f1ea4f6570d745ee2dfa784baa306ae15c35ff7742566ac5ccc1a893af9a1ba","impliedFormat":99},{"version":"06e727ca4d41b4f549f875d7999d940a392058b1b579846441351ff011a63a31","impliedFormat":99},{"version":"d7e8d8a15b4fdd368720cb7a1ad3e740e2f25b9a5ac24c26839921b8d0b7134b","impliedFormat":99},{"version":"d94acd15b4a3517523756dfeabcb7b4fb8ee853bba680d892ccfd3df4c81edc1","impliedFormat":99},{"version":"0f65f9b61383ffcfa1a409da90c35741cd81ece1a2dc6f2ebd094d81599bc5f6","impliedFormat":99},{"version":"9abd03a84d5473e66b038270dbeae266129ab97261d348a5fbd32ec876161a85","impliedFormat":99},{"version":"884f8073c4687a2058be4f15a8f3d8ad613864a4f2d637bf8523fa52b32cf93f","impliedFormat":99},{"version":"693c4ea033e1d8cb4968972024b972aed022d155a338d67425381446dcea5491","impliedFormat":99},{"version":"e3ac1db377991a0bea76cfcfd60959f9ba94878cf99d141222c8f11470f540ff","impliedFormat":99},{"version":"b6024c6222886b95cb29ab236155a98f8e5dc41151233781815e81a83debf67b","impliedFormat":99},{"version":"94dab3752006a2cd2726462342f1775ef18ff4986404d016d317fe79a9d0a14c","impliedFormat":99},{"version":"727b3a462015bbed74b520861445761ebaecf94e09d95bbf59dfcf22afaccae9","impliedFormat":99},{"version":"2c0300921d8d04b21353c94a8f50a2b6c902feccd1303b6f136bedbb2cec5ed1","impliedFormat":99},{"version":"d496217c7f38f218fc162e8f3e6ed611343aa65615f730f82c494dee6c892bc0","impliedFormat":99},{"version":"282ed4ab5b5c4759d5c917c51a5b2f03ca1df4072275b6bccb936cf60078e973","impliedFormat":99},{"version":"2c96813e14e7edcd8e846f009b24fb1bd842b90e2dcd85481136e52588de7982","impliedFormat":99},{"version":"aa70da8072bb8b6e8fae35c7d394d543be8e5c946dad666225a3475010fd2bf0","impliedFormat":99},{"version":"d2c35cb9836cae1899ae9e7e114410dc128bcff4a79cc26318db285699e0223a","impliedFormat":99},{"version":"f89fbb50fd3736e09b418a2e66b98ff9a04820259856afe54bc67977e1acd05b","impliedFormat":99},{"version":"4c76aceec7002f299d9a57ec8e6623f3573bea208b1ea51cc5ea03bf140adad4","impliedFormat":99},{"version":"a0f217b01453d43058cea514325ac8bd3ac3a184265314429eec8059c62824b6","impliedFormat":99},{"version":"e06bc5a68917139f31f323293f575cf1eb75231ac23ac1b95341079364ef1873","impliedFormat":99},{"version":"31a4b6d0c23346d5fb30b52bd3a8f83113fc928ee6474338d5571361943d58ea","impliedFormat":99},{"version":"aecd83ca7059d21a33fb7ed01dfa06a36c545698dbe0017073dba45532a8487d","impliedFormat":99},{"version":"7fb874c17f3c769961d1b07b6bb0ef07b3ca3d49da344726d8b69608997ef190","impliedFormat":99},{"version":"979e969f86456425e505f6054f5d299f848223d70770a5283fa7c405020b47e1","impliedFormat":99},{"version":"2ad6c5849a68263e12b9f246ffd09b4713cef96d617618076adbe2f7907f3d12","impliedFormat":99},{"version":"acd7f9268858029bcec5eba752515b9351d4435b21f1956461242c706dcc0cf9","impliedFormat":99},{"version":"53e2856f8644978742fae88b3c7f570ab509dc4d13288b3912a4446993fa3bc7","impliedFormat":99},{"version":"ea2b6112bfd326f1075896bf76c9108dfd08ccbae2482ba31f68ca43f0b59ca5","impliedFormat":99},{"version":"3f9368aa15d0cc227a3af7af3e3df431dadf0f7cd9897fcc54507f7eb68761cc","impliedFormat":99},{"version":"0f2d4be859066fc3ea8d04b583cd0774e1f9dce7f60b9890bcc0a10efb9fac33","impliedFormat":99},{"version":"ac09b9131c553c189311d9e94d3853b7942d0097925304fe043220a893701ce9","impliedFormat":99},{"version":"f1b34ea3d64f73fc79ce1f312589134db27aa78ef9e156a8f14f89f768e800ac","impliedFormat":99},{"version":"873da6c837a1ee62b5f9b286845be06dc887290a75c553bed7f431107d25a3b6","impliedFormat":99},{"version":"b2abee3c001c024d4e552c4a3319bf3fcc94a1f48bb0d21f5d300d9b4920bde9","impliedFormat":99},{"version":"f9740d044306830442cac761b593538117f46c5ea57a8dc6d61f0bee12e971b6","impliedFormat":99},{"version":"7cf786964e26f0e2c3a904f93f6e31609e2636723df8c1ce248d39b55055c89f","impliedFormat":99},{"version":"41c6aff52e4289763ea30f0849b712437aaeb420c8448aeb8047ee2eca4549f4","impliedFormat":99},{"version":"f5db101f7d90f614627bcab5f8d06d9ccd144a1735b475637940c54097786b67","impliedFormat":99},{"version":"8c575a8e1b6032e576577f28d74066f73aefa7a35d741d0015be36956bbc30aa","impliedFormat":99},{"version":"1989cb4fb2174c56b15f8b10d18ecb0c053e7b39f94582581d69767d7bfb9b32","impliedFormat":99},{"version":"7d90add559ac0a060d621c722127b9a5880a6ab4c15d512a91c57a7b14a073ca","impliedFormat":99},{"version":"47921880701610e8d8a5930d0c9ea03ee9c13773e6665f4ffc8378d5f8c8c168","impliedFormat":99},{"version":"41cbf6c58f2f4e1e5ee95a829b3f193f83952385fa303062f648040a314f939b","impliedFormat":99},{"version":"bb11cd0d046d21d4ae4a28fc4b0eb5d9336a728f9bd489807a6a313142903bc1","impliedFormat":99},{"version":"a96d6463ab2a5a4cf31b01946f1b0929dc3f8be9f28c7c43da29a9e6b7649db1","impliedFormat":99},{"version":"ec43d6b21fd1ed5a1afeb779ceba99e80fe010458bb0a67d9ef301426b1929e5","impliedFormat":99},{"version":"105bb5317c5212d56f82fd9730322b87f4ad8aea2927ef7684341afad050f49b","impliedFormat":99},{"version":"79ffce57ab318282b29bceb505812c490957124a3a96c7d280a342488b0859bf","impliedFormat":99},{"version":"3631657afc1d7e451e25bd3c2eb7444417b75330963dde464708df353778396c","impliedFormat":99},{"version":"c4b46086b44bb8816d4a995654c00f64b3601eb50a163f2bba4dfe48ae6c6b91","impliedFormat":99},{"version":"32e670209322bd3692e8fc884c63002f6bd565e83f62f1fd23c46729aa335d1b","impliedFormat":99},{"version":"97717d35deb9f6a6127f3abff60c9af080ab0ccba60aa06a5a3486a374747573","impliedFormat":99},{"version":"4d70c89489fdef067b0819f22eec5fd0323a8b488d93075cb7953bbfc636e03e","impliedFormat":99},{"version":"27548f1a6ff90f3f3fe65ad4d8ba26a3ddc3e833aae59eb312dde605f6ab7591","impliedFormat":99},{"version":"e3fbf3f3e99083f8fc21bbde7677c3b1cad0c730fe231599a69911aa66487d01","impliedFormat":99},{"version":"59110c7d72a09bacde4a80f4ba95d9990b352911f0e4ea09bf766804f8d3e44b","impliedFormat":99},{"version":"3d827d1dd689311e57a98e476b3451445d39e573f4855ac265b7ec1747075c4f","impliedFormat":99},{"version":"e0669b0e7c953962035bb39e7fdfd5cc8fc3d9a666a8b167b78417355609be01","impliedFormat":99},{"version":"8495eef8be427c71a2d574e3ead06c537a9a6d437dd669e6786dab3df009f125","impliedFormat":99},{"version":"15741df16deef60b197560d3cfe45e6c1eff69fa7b85a861e3d8aa8a26683b83","impliedFormat":99},{"version":"c1fc3a728bc95e5ae7dbbb3c650247e77bdeccd7c246f76ca917aadc94a8fba7","impliedFormat":99},{"version":"bb77b52bead9b75d7173bec685e5e2136f6c3f226cedae736db63a44f69db679","impliedFormat":99},{"version":"b3f7783d4977af919bdb8db798fe185908083c6f4bd3b07460967c8e093f7312","impliedFormat":99},{"version":"5a6bae49831f960e7f0bc66f49b2c40077b136d9573871f865507fde09580436","impliedFormat":99},{"version":"c8366dba8df08ef5a83995e10faea3ef86d81cd656b18e89e32e043aa7b0f7f1","impliedFormat":99},{"version":"e6295124f95b686a16233c1031d04cd971f9685e3416631f463bde75a5c86ce7","impliedFormat":99},{"version":"00c38bd1fe89fed8d4e8502db4f896aef7415b097ac061c2d65f2b539b6df6a7","impliedFormat":99},{"version":"94a2d7c15538d8e83415299f17fd00ab88c594b6a0a40be1e26c99febbab45f6","impliedFormat":99},{"version":"20bbd68ac2d2e7cdf9f60816ba9b378e13c07f0fdafccf9ae5833c876c6f51bc","impliedFormat":99},{"version":"df109d2490b693bd75105efaae08738ab84102bfdb2eee2372e9e3f369ec5fc2","impliedFormat":99},{"version":"9d5c684e68509dccdc68d5778dd58873138b299cf9f16a16ea9911f04eddce43","impliedFormat":99},{"version":"d411ba0bcd6a51485be855a01cb95f79649fa90039b4f235ba8481dc68edae3e","impliedFormat":99},{"version":"8f47a2e6bd2914f74471a693fc3389f243a97367d8bdd920f27198b6018872ad","impliedFormat":99},{"version":"d6e125557820886c2add872cfb3e9502d4113fd1dd22a1f76ded1f439837f119","impliedFormat":99},{"version":"6e688e8aeba98c268b195f80355a8d163d87ac135ad03c708ceda608e6e269b2","impliedFormat":99},{"version":"802a6978c1b38822934ce43a3505e13b555584848c50bc5db9deb2e896c0940e","impliedFormat":99},{"version":"f502c7d829f5774109007ec2262c23efc941dd1ce42acc140f293a7c5ccfd25b","impliedFormat":99},{"version":"af3444bd00030bae3bef81569f8703ecddc2e569cb6b728ec045f0d73d47572b","impliedFormat":99},{"version":"53102281f8a153bb051e0223a8dc51ff9c4cf92da127d91e3f60e74b4e8f41ca","impliedFormat":99},{"version":"e402e111fadcd36fa26ea1ad74f3defd6ef478f6d278a69c547e664b57770392","impliedFormat":99},{"version":"bf8f4b3b372e92a4e4942ce7f872b2b1e1bd1d3f8698af21627db2dee0dda813","impliedFormat":99},{"version":"0ff08be8d55c47d19f3d6bd79110a2ac67c6c72858250710ba2b689a74149ee2","impliedFormat":99},{"version":"77676a7a58c79c467b6afdb39bed7261a8d3ba510e9fd9b4dbb84a71dd947df3","impliedFormat":99},{"version":"dad5c38d723d08fc0134279b90fac87441ee99b71b0d30814b86954e0111d504","impliedFormat":99},{"version":"dd7510a9a4d30db5ac6418ef1d5381202c6b42c550efeb5fb24dd663eac3f6a2","impliedFormat":99},{"version":"cef653b7f2115c8e2a9b6558bf9a083dbcc37ce8fb6bae0e48cde3b92fdaacb2","impliedFormat":99},{"version":"2c87178f8b940592781cea818e840a825ad9cf5168593ff36469c5edb82c8ee2","impliedFormat":99},{"version":"34e0a7e03021f1f29f109cee7054216f94a6a769aa965070b3d00cf4648a8ce4","impliedFormat":99},{"version":"c85f04a8ff65051d2cffc664baa83b70583bd72b9811a50c77f880968c1188ea","impliedFormat":99},{"version":"ad48586787d5e217f4fcc229e3c3d8de8aa12979fdf1f186134e3684d56577ac","impliedFormat":99},{"version":"229d6bca5145c86846793cb3166c83abb256cfdb5c425f25ada8eee49c993e54","impliedFormat":99},{"version":"292856f47dad178fe1cb3401554428b3b0157369a8fa52792587fd2bd06fcbec","impliedFormat":99},{"version":"c7d9ac6cbda9b080656b859f3a05e1b5efa14f82aa7e0c7821b4ba1e129d6240","impliedFormat":99},{"version":"b18c7a06ac51bb77d1baaf6691ea048d4d77445475692d797bf05f777c20a580","impliedFormat":99},{"version":"b8562e5aefa86c069ec1c61dff56ef0492e9fbd731cbcdd4d7fce28a8644e9f6","impliedFormat":99},{"version":"69722e1a7d3aebbbb9d057ff25ae3667abf15218c14e7d8685ddcd8ed64686e3","impliedFormat":99},{"version":"dd6c7d6abb025e7494d02fa9f118af4a5ab0217e03ae54dd836f1160cb7a9201","impliedFormat":99},{"version":"b8ecf3aa6da346b8dcf36e93c4dd9232bbf3a413fae23f5bcc950eaa62d0139d","impliedFormat":99},{"version":"440c9aba92c41b63d718656bd3758f8f98619dbe827448e47601faa51e7a42fa","impliedFormat":99},{"version":"c98507e3d5155788df0decbdcc1feb4bab28171edb642f0239ee930c98dfeff0","impliedFormat":99},{"version":"d9cf429fa9667112f53e9bb67bb7b32eeb3697f524d01b9781b65247f1733da4","impliedFormat":99},{"version":"d12caf569803d56c5f827e4d90b00da9e631e8dfc088fa836256c647c0ac21d3","impliedFormat":99},{"version":"4cd4400178414d9a106f9b58ef98018330411e3e6ab6000205bcffd03a4d2c7e","impliedFormat":99},{"version":"4e549cbc811726ceeb47b55c3a68ec89b7d4413710f03eda57fd43b85b73d8af","impliedFormat":99},{"version":"c6b196ae0b930bc53f969cac072d2d5484727ff7574533d65c52202c226433ac","impliedFormat":99},{"version":"21c180c753baa409e924458db18bbe02c838c9b8a37605e042c3701488ecc561","impliedFormat":99},{"version":"2fcb9b13c206fa4f6e88a2c090e4d591e4a963f8fc53b70ddc67507a976b7dcf","impliedFormat":99},{"version":"37f443b8a01997b7ed60837d5ca6f4d5d66776b709c9f562623324bef792cb98","impliedFormat":99},{"version":"e5b973ad95b871ea4444aa82d9005a198268bd69294e762ff7ca50cca02b6fd1","impliedFormat":99},{"version":"e67fbc9a974d14cab74cb47b4bed04205886bf534c7e2f17ecb8f7789d297b1c","impliedFormat":99},{"version":"82d76af0a89cd5eb4338771a2a5b27f3cbc689b22be0b840de75be4cfc61f864","impliedFormat":99},{"version":"24e856aec3b5c4228ffed866dcd8e7e692aa86eccaecc4fa8205fadd9737d1af","impliedFormat":99},{"version":"fe395a24df9ffd344cb825575d4b35c1cf69275208c0f99517c715bd7d08ff79","impliedFormat":99},{"version":"39e8edcbd5ac35c6cfdf2b1a794a9693a461a54efb2a475ab7fc08ab13504e26","impliedFormat":99},{"version":"12012b6c28d09a6f1d86b2a30213a92a9e92ad9ee573f94c92a8b237b6422bb7","impliedFormat":99},{"version":"8ee28204ddb2be7d6dfb68891493f654cbf10f5e1667bd33bd62920d9eb9e164","impliedFormat":99},{"version":"b09669391dd3312b8a52242af7823a3c44b50c7dcdc216db8da88b679af46574","impliedFormat":99},{"version":"b71e7f69e72d51d44ad171e6e93aedc2c33c339dab5fa2656e7b1ee5ba19b2ad","impliedFormat":99},{"version":"d17f54b297c4a0ba7be1621b4d696ef657764e3acddcc8380e9bfc66eeb324a3","impliedFormat":99},{"version":"9c61e1d1777ef5ec76a62eb9c66ebc0c1ee5bf1d1037767208693cc3fe61bf9a","impliedFormat":99},{"version":"a715a2786c285a9e27ea2bbaa2ed249d3017e7139782f5ebb8eeedb777b26926","impliedFormat":99},{"version":"86de522a6c6f7854738c1a88f3639e472e1778dff42ffd9f296476099cf170e6","impliedFormat":1},{"version":"4d7d964609a07368d076ce943b07106c5ebee8138c307d3273ba1cf3a0c3c751","impliedFormat":99},{"version":"0e48c1354203ba2ca366b62a0f22fec9e10c251d9d6420c6d435da1d079e6126","impliedFormat":99},{"version":"0662a451f0584bb3026340c3661c3a89774182976cd373eca502a1d3b5c7b580","impliedFormat":99},{"version":"c02203ae7f03fd2dd9c0da1a08a886734c54aae25fdf8543b1125589f20f0b52","impliedFormat":99},{"version":"409d9b2dffd896e5589be900b59d81149fd48dd811a6fca9311407e03b331e80","impliedFormat":1},{"version":"85caf550ab6f9d0020b0aaf23acf2cbb092fe8ec8058ea3805dcdbdbfd0b3e44","impliedFormat":1},{"version":"21bc4db82aff687d0a4e58858d51ff544677cbc3b6789934bbd4c9abe7bd04aa","impliedFormat":1},{"version":"1dd4deeb0e37d39f07354a91c65e3b040ff408960e1ceed31446343419f9a07b","impliedFormat":1},{"version":"3456acb6ff0d0a202eec1307f2e8b2d1cbba68dace120c47b7e38d7343da19f2","impliedFormat":1},{"version":"7a429fa77d22d12f8febc7ebbb00fa45c75c60b47ce840f92f03b05e9d16648d","impliedFormat":1},{"version":"4852930d1e33da62f75e66ae71bf7b6646d0e0aba7704ff3d1bdda15656dd7f7","impliedFormat":1},{"version":"9dc3f2a0efa278d6255bcd95b42ce28f8e14f177f6701bd6668999a34356f1c7","impliedFormat":1},{"version":"5483233566b27fecdef8a3f40420d60db822ffbdb0cf20073ac8fd0157fd2290","impliedFormat":1},{"version":"b42bc4e718dbeba955b71adc452e5023b8dda17aa57bb9050ec8c542a8e7e626","impliedFormat":99},{"version":"2091e884437c2fac7ef5b4c37a55a1d0291f3d9e774ca484054adf9088a49788","impliedFormat":1},{"version":"c2762b064c3f241efdcbfce2a3fb4fe926b9c705cbea1da8f2ee92a90bc44e27","impliedFormat":1},{"version":"6b33b56ce86bed582039802da1de9ff7f9c60946b710fb5a7a00ee8a089dc1a2","impliedFormat":1},{"version":"b4fbfaa34aacd768965b0135a0c4e7dbaa055a8a4d6ffe7bedf1786d3dc614de","impliedFormat":1},{"version":"2dffb65044b6a28dcba73284ac6c274985b03a6ce4a3b33967d783df18f8b48c","impliedFormat":1},{"version":"f7e187abe606adf3c1e319e080d4301ba98cb9927fd851eded5bcac226b35fd1","impliedFormat":1},{"version":"335084b62e38b8882a84580945a03f5c887255ac9ba999af5df8b50275f3d94f","impliedFormat":1},{"version":"5d874fb879ab8601c02549817dceb2d0a30729cb7e161625dd6f819bbff1ec0b","impliedFormat":1},{"version":"ace68d700c2960e2d013598730888cde6d8825c54065c9f5077aaf3b2e55e3ad","impliedFormat":1},{"version":"be3daf180476b92514b9003e9bd1583a2a71ad80c9342f627ca325b863ca55d4","impliedFormat":1},{"version":"8ab9b0dd5ad04b64911bbf9ae853690d047c1e12651940bd08da5b6c8fae8b04","impliedFormat":1},{"version":"6fcb9ff90e597db84de7e94537a661dca09dc3c384e1414496d76d31f91232a3","impliedFormat":1},{"version":"ad68aac2dffb24c0330e5bcfe57aa0f2e829650c8dfe63d7329d58af7277990e","impliedFormat":1},{"version":"df0627eabd39ed947e03aedef8c677eb9ad91b733f8d6c7cdc48fc012a41ed8a","impliedFormat":1},{"version":"2164ae0de9e076bf50b097cc192d6600a7b3eb07a0e1cd3281f7f5d19d4f4638","impliedFormat":1},{"version":"e9759993d816a63028cb9a42120223941b0835c6b27aa8af69cc650a18c1bf91","impliedFormat":1},{"version":"f964f0ebc9cad8ce4873f24e82241b8eb609d304cbc1662a739443b24ef11c9e","impliedFormat":1},{"version":"f0f65a61b70d5ddb3d7f07a6e3f9d73a5da863172c815a3559c8bbb5c18bcc23","impliedFormat":1},{"version":"639c15ef2ce567ec3a62d9c51a43b65f1a8eabfdc88dc5ed57f1f23cc213189f","impliedFormat":1},{"version":"b6d80e669780b6591b159637ad0e8cf678cf6929fa0643be7d16aff7ca499bd6","impliedFormat":1},{"version":"d4e6925460a27b532a99e38bb0e579ed74b5f6422d70a210aeca9da358526f89","impliedFormat":1},{"version":"8a9d6ffa232e5599cebac02c653c01afa9480875139bab7d70654d1a557c7582","impliedFormat":99},{"version":"9ee450d9e0fbae0c5d862b03ae90d3690b725b4bd084c5daec5206aefa27c3f1","impliedFormat":99},{"version":"e2e459aac2973963ed39ec89eaba3f31ede317a089085bf551cc3a3e8d205bb4","impliedFormat":99},{"version":"bd3a31455afb2f7b1e291394d42434383b6078c848a9a3da80c46b3fa1da17d5","impliedFormat":99},{"version":"51053ea0f7669f2fe8fc894dcea5f28a811b4fefdbaa12c7a33ed6b39f23190b","impliedFormat":99},{"version":"5f1caf6596b088bd67d5c166a1b6b3cd487c95e795d41b928898553daf90db8d","impliedFormat":99},{"version":"eaeaddb037a447787e3ee09f7141d694231f2ac7378939f1a4f8b450e2f8f21f","impliedFormat":99},{"version":"7c76a8f04c519d13690b57d28a1efe81541d00f090a9e35dca43cde055fed31b","impliedFormat":99},{"version":"17c976add56f90dd5aad81236898bad57901d6bdac0bd16f3941514d42c6fcc7","impliedFormat":99},{"version":"0d793c82f81d7c076f8f137fa0d3e7e9b6a705b9f12e39a35c715097c55520c9","impliedFormat":99},{"version":"7c6fd782f657caea1bfc97a0ad6485b3ad6e46037505d18f21b4839483a66a1c","impliedFormat":99},{"version":"4281390dad9412423b5cc3afccf677278d262a8952991e1dfaa032055c6b13fb","impliedFormat":99},{"version":"02565e437972f3c420157d88ae89e8f3e033c2962e010483321c54792bce620a","impliedFormat":99},{"version":"1623082417056ce69446be4cf7d83f812640f9e9c5f1be99d6bc0fad0df081ab","impliedFormat":99},{"version":"0c1f67774332e01286cdd5e57386028dd3255576c8676723c10bd002948c1077","impliedFormat":99},{"version":"232c6c58a21eb801d382fb79af792c0ec4b2226a4c9e4cf64a52246538488468","impliedFormat":99},{"version":"196ce15505ddb7df64fa2b9525ec99ec348d66b021e76130220a9ac37840a04a","impliedFormat":99},{"version":"899a2d983c33f9c00808bf53720d3d74a4c04a06305049c5da8c9e694c0c0c74","impliedFormat":99},{"version":"942719a6fafe1205a3c07cecc1ea0c5d888ff5701a7fbbd75d2917070b2b7114","impliedFormat":99},{"version":"7ad9c5c8ca6f45cf8cc029f1e789177360ef8a1ac2d2e05e3157f943e70f1fa3","impliedFormat":99},{"version":"e9204156d21f5dd62fa4676de6299768b8826bb02708a6e96043989288c782c7","impliedFormat":99},{"version":"b892c877d4b18faad42fd174f057154101518281f961a402281b21225bf86e2f","impliedFormat":99},{"version":"755e75ad8e93039274b454954c1c9bb74a58ac9cef9ff37f18c6f1e866842e2e","impliedFormat":99},{"version":"53e7a7fa0388634e99cf1e1be2c9760c7c656c0358c520f7ec4302bd1c5e2c65","impliedFormat":99},{"version":"f81b440b0a50aa0e34f33160e2b8346127dbf01380631f4fc20e1d37f407bef9","impliedFormat":99},{"version":"0791871b50f78d061f72d2a285c9bfac78dba0e08f0445373ad10850c26a6401","impliedFormat":99},{"version":"d45d1d173b8db71a469df3c97a680ed979d91df737aa4462964d1770d3f5da1b","impliedFormat":99},{"version":"e616ad1ce297bf53c4606ffdd162a38b30648a5ab8c54c469451288c1537f92e","impliedFormat":99},{"version":"8b456d248bb6bc211daf1aae5dcb14194084df458872680161596600f29acb8d","impliedFormat":99},{"version":"1a0baa8f0e35f7006707a9515fe9a633773d01216c3753cea81cf5c1f9549cbd","impliedFormat":99},{"version":"7fa79c7135ff5a0214597bf99b21d695f434e403d2932a3acad582b6cd3fffef","impliedFormat":99},{"version":"fb6f6c173c151260d7a007e36aa39256dd0f5a429e0223ec1c4af5b67cc50633","impliedFormat":99},{"version":"eebfa1b87f6a8f272ff6e9e7c6c0f5922482c04420cde435ec8962bc6b959406","impliedFormat":99},{"version":"ab16001e8a01821a0156cf6257951282b20a627ee812a64f95af03f039560420","impliedFormat":99},{"version":"f77b14c72bd27c8eea6fffc7212846b35d80d0db90422e48cd8400aafb019699","impliedFormat":99},{"version":"53c00919cc1a2ce6301b2a10422694ab6f9b70a46444ba415e26c6f1c3767b33","impliedFormat":99},{"version":"5a11ae96bfae3fb5a044f0f39e8a042015fb9a2d0b9addc0a00f50bd8c2cc697","impliedFormat":99},{"version":"59259f74c18b507edb829e52dd326842368eaef51255685b789385cd3468938f","impliedFormat":99},{"version":"30015e41e877d8349b41c381e38c9f28244990d3185e245db72f78dfba3bbb41","impliedFormat":99},{"version":"52e70acadb4a0f20b191a3582a6b0c16dd7e47489703baf2e7437063f6b4295a","impliedFormat":99},{"version":"15b7ac867a17a97c9ce9c763b4ccf4d56f813f48ea8730f19d7e9b59b0ed6402","impliedFormat":99},{"version":"fb4a64655583aafcb7754f174d396b9895c4198242671b60116eecca387f058d","impliedFormat":99},{"version":"23dae33db692c3d1e399d5f19a127ae79324fee2047564f02c372e02dbca272d","impliedFormat":99},{"version":"4c8da58ebee817a2bac64f2e45fc629dc1c53454525477340d379b79319fff29","impliedFormat":99},{"version":"50e6a35405aea9033f9fded180627f04acf95f62b5a17abc12c7401e487f643f","impliedFormat":99},{"version":"c1a3ca43ec723364c687d352502bec1b4ffece71fc109fbbbb7d5fca0bef48f1","impliedFormat":99},{"version":"e88f169d46b117f67f428eca17e09b9e3832d934b265c16ac723c9bf7d580378","impliedFormat":99},{"version":"c138a966cc2e5e48f6f3a1def9736043bb94a25e2a25e4b14aed43bff6926734","impliedFormat":99},{"version":"b9f9097d9563c78f18b8fb3aa0639a5508f9983d9a1b8ce790cbabcb2067374b","impliedFormat":99},{"version":"925ad2351a435a3d88e1493065726bdaf03016b9e36fe1660278d3280a146daf","impliedFormat":99},{"version":"100e076338a86bc8990cbe20eb7771f594b60ecc3bfc28b87eb9f4ab5148c116","impliedFormat":99},{"version":"d2edbba429d4952d3cf5962dbfbe754aa9f7abcfcbdda800191f37e07ec3181b","impliedFormat":99},{"version":"8107fdc5308223459d7558b0a9fa9582fa2c662bd68d498c43dd9ab764856bc7","impliedFormat":99},{"version":"a35a8a48ad5d4aad45a79f6743f2308bdaea287c857c06402c98f9c3522a7420","impliedFormat":99},{"version":"e4aa88040fd946f04fe412197e1004fb760968ac3bd90d1a20bfb8b048f80ce0","impliedFormat":99},{"version":"f16df903c7a06f3edd65f6292fef3698d31445eaca70f11020201f8295c069b5","impliedFormat":99},{"version":"d889a5532ecd42d61637e65fac81ea545289b5366f33be030e3505a5056ee48a","impliedFormat":99},{"version":"6d8762dd63ee9f93277e47bf727276d6b8bdd1f44eb149cfa55923d65b9e36bc","impliedFormat":99},{"version":"bf7eebda1ab67091ac899798c1f0b002b46f3c52e20cccb1e7f345121fc7c6c2","impliedFormat":99},{"version":"9a3983d073297027d04edec69b54287c1fbbd13bbe767576fdab4ce379edc1df","impliedFormat":99},{"version":"8f42567aa98c36a58b8efb414a62c6ad458510a9de1217eee363fbf96dfd0222","impliedFormat":99},{"version":"8593dde7e7ffe705b00abf961c875baef32261d5a08102bc3890034ae381c135","impliedFormat":99},{"version":"53cf4e012067ce875983083131c028e5900ce481bc3d0f51128225681e59341b","impliedFormat":99},{"version":"6090fc47646aa054bb73eb0c660809dc73fb5b8447a8d59e6c1053d994bf006e","impliedFormat":99},{"version":"b6a9bf548a5f0fe46a6d6e81e695d367f5d02ce1674c3bc61fe0c987f7b2944f","impliedFormat":99},{"version":"d77fa89fff74a40f5182369cc667c9dcc370af7a86874f00d4486f15bdf2a282","impliedFormat":99},{"version":"0c10513a95961a9447a1919ba22a09297b1194908a465be72e3b86ab6c2094cc","impliedFormat":99},{"version":"acfce7df88ff405d37dc0166dca87298df88d91561113724fdcb7ad5e114a6ba","impliedFormat":99},{"version":"2fb0e1fc9762f55d9dbd2d61bbc990b90212e3891a0a5ce51129ed45e83f33ee","impliedFormat":99},{"version":"7be15512c38fdbed827641166c788b276bcfa67eda3a752469863dbc7de09634","impliedFormat":99},{"version":"cbba36c244682bbfaa3e078e1fb9a696227d227d1d6fc0c9b90f0a381a91f435","impliedFormat":99},{"version":"ec893d1310e425750d4d36eb09185d6e63d37a8860309158244ea84adb3a41b8","impliedFormat":99},{"version":"0d350b4b9b4fea30b1dbac257c0fc6ff01e53c56563f9f4691458d88de5e6f71","impliedFormat":99},{"version":"4642959656940773e3a15db30ed35e262d13d16864c79ded8f46fb2a94ed4c72","impliedFormat":99},{"version":"a2341c64daa3762ce6aefdefc92e4e0e9bf5b39458be47d732979fb64021fb4f","impliedFormat":99},{"version":"5640ea5f7dfd6871ab4684a4e731d48a54102fd42ea7de143626496e57071704","impliedFormat":99},{"version":"7f6170c966bbd9c55fd3e6bcc324b35f5ca27d70e509972f4b6b1c62b96c08ff","impliedFormat":99},{"version":"62cb7efe6e2beecb46e0530858383f27e59d302eb0a6161f66e4d6a98ae30ff5","impliedFormat":99},{"version":"a67ae9840f867db93aca8ec9300c0c927116d2543ecc0d5af8b7ab706cdda5ad","impliedFormat":99},{"version":"658b8dbb0eef3dcfbcaf37e90b69b1686ba45716d3b9fb6e14bb6f6f9ef52154","impliedFormat":99},{"version":"1e62ffb0b2bc05b7b04a354710596e60ac005cab6e12face413855c409239e9b","impliedFormat":99},{"version":"c92349bad69a4e56ac867121cda04887a79789adb418b4ee78948a477f0c4586","impliedFormat":99},{"version":"d49420a87cc4608acbd4e8ce774920f593891047d91c6b153f0da3df3349b9be","impliedFormat":99},{"version":"44376b040b0712ffe875ad014bb8c9f84d7648487cdf36e8bbe8f4888f860a03","impliedFormat":99},{"version":"4c704b137991192a3d2f9e23a3ded54bdb44f53ea5884c611c48637064e8c6cb","impliedFormat":99},{"version":"917af11888db0ac87046f9b31f8ccb081d2da9ba650d6aab9636a018f2d86259","impliedFormat":99},{"version":"d6c196e038cb164428f2f92feb0191de8a95d60aad8eb65bc703d3499d7ff888","impliedFormat":99},{"version":"b27723af585d0cf2e5f6a253b2989d084ba5c7ffe24130ab33d3c01f60f8f7c8","impliedFormat":99},{"version":"37f271a1de9b674667cffbd616832f4127c0a364d502b2b33e3e9c6b16fde1b8","impliedFormat":99},{"version":"0c796f53945fee54a07b295dbd1f1303c7a73cdd2c629e66fbfa5e29df16de9e","impliedFormat":99},{"version":"2b3045052668b317d06947a6ab1187755b2ad4885dd6640b6a8fe174e139ec5e","impliedFormat":99},{"version":"44ee21f3f866b5517804aadc860c89da792cca2d3ad7431d5742c147be7deb82","impliedFormat":99},{"version":"57bc6a334f498834fe779ea68e92a06c569e3b6757b608a092119589c34b7242","impliedFormat":99},{"version":"ccc8793b3493c8cf50af8e181da08e4e7ff327535724dfde8bf56249a385954f","impliedFormat":99},{"version":"c48b220c9a10db0df2d791b93d332575bb57033797da241c124f87c2171159ea","impliedFormat":99},{"version":"d1509856fe7e38720ef11b8e449d4ada04879e5ecfd2d09b41c2e4a07b3d8dd1","impliedFormat":99},{"version":"3883734e7cba8ceb7a314ca68c97ac3f69031a2fde7830e5b2e2339f10520497","impliedFormat":99},{"version":"54396051cf9f736287426d1f3c9ec0f8afad30a4d3e607f65ffd6205ec90bdce","impliedFormat":99},{"version":"4c5ed0d7c2b8dc59f2bcc2141a9479bc1ae8309d271145329b8074337507575d","impliedFormat":99},{"version":"2bdc0310704fe6b970799ee5214540c2d2ff57e029b4775db3687fbe9325a1e4","impliedFormat":99},{"version":"d9c92e20ad3c537e99a035c20021a79c66670da1c4946e1b66468ca0159e7afd","impliedFormat":99},{"version":"b62f1c33a042e7eb17ac850e53eb9ee1e7a7adbfa4aacf0d54ea9c692b64fc07","impliedFormat":99},{"version":"c5f8b0b4351f0883983eb2a2aaa98556cc56ed30547f447ea705dbfbe751c979","impliedFormat":99},{"version":"6a643b9e7a1a477674578ba8e7eed20b106adbef86dabe0faf7c2ba73dc5b263","impliedFormat":99},{"version":"6e434425d09e4a222f64090febcbbfbb8fb19b39cec68a36263a8e3231dab7ad","impliedFormat":99},{"version":"58afdddfd9bc4529afe96203e2001dcc150d6f46603b2930e14843a2adc0bef3","impliedFormat":99},{"version":"faa121086350e966ec3c19a86b64748221146b47b946745c6b6402d7ecf449d4","impliedFormat":99},{"version":"a9286d1583b12fd76bf08bcd1d8dad0c5e3c0618367fe3fe49326386fee528bd","impliedFormat":99},{"version":"141c5152b14aa1044b7411b83a6a9707f63e24298bfc566561a22d61b02177a4","impliedFormat":99},{"version":"dce464247d9d69227307f085606844dc1a6badc1e10d6f8e06f3a72d471e7766","impliedFormat":99},{"version":"26333aa1e58f4c7c6acb6cdb1490ba000c857f7e8a21608019ca9323ad97365e","impliedFormat":99},{"version":"b36269da8b9c370075ad842a17f7d284bae04bc07d743aa25cc396d2bbd922cd","impliedFormat":99},{"version":"1e5afd6a1d7f160c2da8ed1d298efcd5086b5a1bdb10e6d56f3ed9d70840aa5d","impliedFormat":99},{"version":"2e7c3024fa224f85f7c7044eded4dba89bf39c6189c20224fa41207462831e06","impliedFormat":99},{"version":"4ca05a8dfe3b861cf6dc4e763519778fc98b40655e71ddee5e8546390cf42b21","impliedFormat":99},{"version":"f96c214198c797da18198b7c660627faf40303ba4d1ac291ac431046ec018853","impliedFormat":99},{"version":"fa20380686e1f6c7429e3194dea61e9d68b7af55fa5fc6da5f1da8fc2b885c3d","impliedFormat":99},{"version":"d3a480946bced3c94e6b8ab3617330e59bf35c3273a96448d6e81ba354f6c20e","impliedFormat":99},{"version":"ff72b0d58aa1f69f3c7fa6e5a806aa588b5024d8bd81cb8314b6df32759cafdd","impliedFormat":99},{"version":"feccbe0137990c333898ac789870caf62bddf7b7f825cca3f5aac4388d867695","impliedFormat":99},{"version":"5d0b0e10dd5f4857dcf4703a4c86d92fe3e1d82a68ffc6739d777fc2ff6d6902","impliedFormat":99},{"version":"d002e1dad5ff22c6d7b9b4e8b09302b99fe6089f907e4e00310b1eea88d24a01","impliedFormat":99},{"version":"0497b91aa0292f7cafe54202e69cb467242426a414623aac0febc931c92b10f2","impliedFormat":99},{"version":"faf1f29f98e2a8db3737827234c5de88d2bf1546471c05b136578190ed647eb9","impliedFormat":99},{"version":"80634ab7f8f65c7b4663e807f8d961c683eaea3b0e58818524c847abb657b795","impliedFormat":99},{"version":"85e852e090c97b25243fb6c986cad3d2b48d0bb83cd1c369f6ff1cf9743ab490","impliedFormat":99},{"version":"12e856f6193309e09fbab3ce89f70e622c19b52cbeaad07b14d47ef19063e4dc","impliedFormat":99},{"version":"d3f4fda002f6200565ef1a5f6bcad4e28e150c209e95716e101d6c689ae11503","impliedFormat":99},{"version":"497a791143290119136bfcde6cd402e3b7d211df944188d1a4a511b8df5a9b13","impliedFormat":99},{"version":"1cb9dab41d415a2a401d52c6bede4ad5aa14a732b2914c01c16cc8b0fc69cf88","impliedFormat":99},{"version":"617108f6e6514fbfa7bf226cf99c33c8872a28517f5b7e855c657d4132afeb3d","impliedFormat":99},{"version":"194823a242a97327f6ac0af92f3d37fc078d4773149724fbb5176093eb7b0617","impliedFormat":99},{"version":"085f9e9b8f27c4833a6cf9228b1ae26d383bf7eb4e0677b5321029564336deff","impliedFormat":99},{"version":"34b81ae7140be9b70a7dfded8acebc06d62c5508617b196739e578595949724d","impliedFormat":99},{"version":"c7631702b00fbbac3682deeeaeaac4bfc0694bec74dda8db4afae1098310e18c","impliedFormat":99},{"version":"b0c04f92ff4c9da466ba563170892afe043ecd0f088deb3d3dc482a747d75bf0","impliedFormat":99},{"version":"c4d6664fa99f28b210a65e5feccc41723bf77d89e5f00afdbdaf25726a9ea4c3","impliedFormat":99},{"version":"f4940ce6889056747592fc93a331d7e33db8889d48e401397cfa15fa27ac4000","impliedFormat":99},{"version":"2e3ae7d41b13b4ebfdf76eb20d4282b72b4eafb9b75b0f850177d03e92f59d7b","impliedFormat":99},{"version":"e37392287850bebf777be5e4b573ef447b3437bf46f85969f9d9b4b37b7a8629","impliedFormat":99},{"version":"68771841743fe93f5732c94a93447cfc2ebce7de956330fcb704e82725f218be","impliedFormat":99},{"version":"6e58d2b1619cb5b2312a57fb1a0071f693ac0c7547f12d4e38c2b49629f71b9f","impliedFormat":99},{"version":"8363077b4b4520e9cfff74d0ae1d034b84f7429d35265e9e77daedeb428297f2","impliedFormat":99},{"version":"541cfa49f8c37ea962d96f4e591487524af58bfbf4faf45e904a4e1b25b7a7aa","impliedFormat":99},{"version":"ebb09c62607092b0aa7dbc658b186ee8cc39621de7f3ccf8acbd829f2418d976","impliedFormat":99},{"version":"f797dc6c71867b6da17755cfdbd06ef5ed5062e1b6fd354a07929a56546d4f4d","impliedFormat":99},{"version":"686bd9db685be2e1f812cf82d476c7702986ad177374dad64337635af24a0b9f","impliedFormat":99},{"version":"cc8520ff04dae6933f1eec93629b76197fb4a40a3a00da87c44e709cfa4af1ba","impliedFormat":99},{"version":"55880163bc61bc2478772370acce81a947301156cdce0d8459015f0e5a3f3f9c","impliedFormat":99},{"version":"d7591af9e3eee9e3406129e0dacb69eb2ac02f8d7ceb62767a6489cb280ca997","impliedFormat":99},{"version":"522356a026eb12397c71931ff85ce86065980138e2c8bce3fefc05559153eb80","impliedFormat":99},{"version":"1b998abad2ae5be415392d268ba04d9331e1b63d4e19fa97f97fe71ba6751665","impliedFormat":99},{"version":"81af071877c96ddb63dcf4827ecdd2da83ee458377d3a0cb18e404df4b5f6aa0","impliedFormat":99},{"version":"d087a17b172f43ff030d5a3ede4624c750b7ca59289e8af36bc49adb27c187af","impliedFormat":99},{"version":"e1cc224d0c75c8166ae984f68bfcdcd5d0e9c203fe7b8899c197e6012089694c","impliedFormat":99},{"version":"1025296be4b9c0cbc74466aab29dcd813eb78b57c4bef49a336a1b862d24cab0","impliedFormat":99},{"version":"18c8cf7b6d86f7250a7b723a066f3e3bf44fd39d2cb135eaffe2746e9e29cc01","impliedFormat":99},{"version":"c77cd0bddb5bec3652ff2e5dd412854a6c57eaa5b65cbf0b6a47aae37341eca9","impliedFormat":99},{"version":"e4a2ca50c6ded65a6829639f098560c60f5a11bc27f6d6d22c548fe3ec80894d","impliedFormat":99},{"version":"e989badc045124ca9516f28f49f670b8aeee1fb2150f6aefd87bb9df3175b052","impliedFormat":99},{"version":"d274cf19b989b9deff1304e4e874bc742816fca7aae3998c7feec0a1224079c7","impliedFormat":99},{"version":"0aefb67a9c212a540e2dedb089c4bbe274d32e5a179864d11c4eea7dc3644666","impliedFormat":99},{"version":"2767af8f266375ebd57c74932f35ce7231e16179d3066e87bcb67da9b2365245","impliedFormat":99},{"version":"34a1c0d17046ac6b326ed8fbe6e5a0b94aeef9e50119e78461b3f0e0c3a4618a","impliedFormat":99},{"version":"6fd58a158e4a9c661d506c053e10c7321edaa42b930e73b7a6d34eb81f2a71e8","impliedFormat":99},{"version":"60e18895fc4bff9e2f6fb58b74fcf83191386553e8ab0acc54660d65564e996c","impliedFormat":99},{"version":"41d624e8c6522001554fdddef30fed443b4c250ec8ddbb553bbe89e7f7daf2f4","impliedFormat":99},{"version":"b3034ec5a961ab98a41bc59c781bf950bb710834f1f99bf4b07bfbba77e2f04a","impliedFormat":99},{"version":"2115776fcd8001f094066e24d80b7473bbc2443a5488684f9f3a94a3842daadb","impliedFormat":99},{"version":"55e49ce04550294b3a40dcd9146d5611cfcd4fa317eb2dcb2c19dd28dea09f58","impliedFormat":99},{"version":"96149ea111d0a0017b95606821a16d4a1cf2470f1460549ba65ec63bf9224b5d","impliedFormat":99},{"version":"5b290d80e30d0858b30aab7ccff4dbfa68195f7a38f732a59cfe341764932910","impliedFormat":99},{"version":"a85ee477d4e97c2bfae6716b0faaaacef6b4f3de64e0b449c0347322e92a594e","impliedFormat":99},{"version":"8c11d3a3eac4c18abf364d20dde653c8b4d3c3ad85bb55da285209140dae256c","impliedFormat":99},{"version":"262fcc12bd0cb2fe7ce2115093ae2b083cf425329b7966d8857af78e1e33814d","impliedFormat":99},{"version":"24f4daf278786772d9cee29876e85f5f6712c65b741b997a900b1d942c8f217e","impliedFormat":99},{"version":"a2be1e277d805c54f038fee25fd291b5fdd76990be855454bd48e336b315fb8b","impliedFormat":99},{"version":"dce9350553d244fa5ad6cff4e9aea3664d918113ddff74ef84210b0481b79f74","impliedFormat":99},{"version":"8802c923b63c304b8e014600ff58fb9542323e842701aba9e69df60c7c979df5","impliedFormat":99},{"version":"b5a14e52ffa8efd7e31e7856bbf36a7bce32446283a9b51e0a819b04a94f2ce4","impliedFormat":99},{"version":"9cc999adecb60f81915c635cc91acdb0b79904370653acc283b97656b5b2cfa8","impliedFormat":99},{"version":"80249dc33a16d10faf6ec20ea50d4c72b0d92e55070bba0327de428e1d0979e7","impliedFormat":99},{"version":"7367f5f54504a630ff69d0445d4aecf9f8c22286f375842a9a4324de1b35066f","impliedFormat":99},{"version":"0b86afbb8d60fd89e3033c89d6410844d6cb6a11d87e85a3ef6f75f4f1bae8a8","impliedFormat":99},{"version":"9cfb95029f27b79f6c849bbb7d36a4318d8acf1c7b7d3618936c219ad5cddab7","impliedFormat":99},{"version":"2a4181e00cfe58bdce671461642f96301f1f8921d0f05bd1cc7750bbf25dd54a","impliedFormat":99},{"version":"24e33e2ece5223951e52df17904dcc52a4022be3eb639ab388e673903608eb37","impliedFormat":99},{"version":"506eaf48e9f57567649da05e18ddd5e43e4ad46d0227127d67f07152e4415f29","impliedFormat":99},{"version":"9e5247c2cdf36b8c44d22caa499decd252577b8b5f718b498f7a8b813d81a210","impliedFormat":99},{"version":"69abcf790968f38d1e58bccff7691aa2553d14daada9f96dcc5fe2b1f43762c3","impliedFormat":99},{"version":"5e88a51477d77e8ec02675edf32e7d1fccdc2af60972d530c3e961bd15730788","impliedFormat":99},{"version":"0620fa1ded997cd0cdc1340e9b34d3fe5e84f46ba109b4a69176df548e76081c","impliedFormat":99},{"version":"8508ed314834f8865469a0628cc8d6c31bf5ea2905f8a87f336a2168e66f91f4","impliedFormat":99},{"version":"9757602b417a9364a599c07507e8c9a4e567f78829eeb03a7c64b79ffb16caf9","impliedFormat":99},{"version":"e0bfc7204238bd5b19f0b9f3cd8aa9e31979835772102d2f4fa0e4728140bdbf","impliedFormat":99},{"version":"070ff67371e23b620cbf776e08881a3d1ff6cdf06c1cf6a753fb89b870c6f310","impliedFormat":99},{"version":"d2e8a7070ff0c6815be4ccca5071fe90d7923702e6348fa83275b452768f701a","impliedFormat":99},{"version":"63c057f6b98e622b13aa24a973bbdf0fef58d44e142a1c67753e981185465603","impliedFormat":99},{"version":"2b857bdc485905b1be1cee2e47f60fc50e4113f4f7c2c7301cdc0f14c013278e","impliedFormat":99},{"version":"4abccbf2fc4841cf06c0ff49f6178d8f190f2645acda5d365e61a48877b8b03e","impliedFormat":99},{"version":"b4ababf5c8f64e398617d5f683ad6c8694f19f589485580623a927121cfab64b","impliedFormat":99},{"version":"f856d3559afde2a5e3f0e4e877d0397fe673eea71ac3683abb7c6cef429c192d","impliedFormat":99},{"version":"8148fe494a3556aec26a46b0deba7a85d78883b285e408ebf69ff1cfd1531c00","impliedFormat":99},{"version":"0942f7d40c91c30a5936d896de2194238ad65a45e7540bab7f7f588b70242bb8","impliedFormat":99},{"version":"b808dbc3d555d643bd6410da582c2d7512b39dc8331acef7d4752fff0f390b5f","impliedFormat":99},{"version":"65971cd38702bdce2440a7322eccccf978a37e481b44e22dd0b34aee30e0b6dd","impliedFormat":99},{"version":"c6f038949f364df4f690cebfe93324f54d53c9c50aec6c8e5508b7f6a6ea4df7","impliedFormat":99},{"version":"58a0bdd8fa7be3a362ce850e4af11c7a4f82abcbfad36201463f7b28ebf53e7e","impliedFormat":99},{"version":"cc9f07af7679c686e5e68c3933a4430af6ea651ed0c1cfcf0db7c60576d05ccc","impliedFormat":99},{"version":"d45698ab81cc9a9722ec492e7442de1136be3c2a5c830b7c700c3cae020bbf70","impliedFormat":99},{"version":"18441c1a35fed75775881c3b918c3ea4a630f02e43c8179225a268055907b140","impliedFormat":99},{"version":"bbe0ac66e24ba0c5d30dfc8f0579e3c660f8e1f3b8f234c7cbdd9fd2db9ed22f","impliedFormat":99},{"version":"63e65622cd147ea99f39f8833c65d7c2b7a0595c86ce71e92e04b07d1f38d3ad","impliedFormat":99},{"version":"6a840e9604c761dd515f8c76ea08c648beed01129b75133e0d54e24372802302","impliedFormat":99},{"version":"7b853ab7e6a660ca2dfdc36eff9d3cb5215b3e10acbe65a09ed6d9be52c38d9b","impliedFormat":99},{"version":"cb1f24cd504d21fe92ea004fab2b3e496248b4230c3133c239fbc37413a872b7","impliedFormat":99},{"version":"d7ec8da78b951af56a738ab0586815263a433ef3517c4e3ea6aad5dfd65c4a04","impliedFormat":99},{"version":"6adb1517628439ae88aeb0419f4fa89eacda98f89791fcd05fa92ad2cdc389af","impliedFormat":99},{"version":"87e256c8149c5487ef2c47297770c4e0e622271ac1c8902dc0b31795062a1410","impliedFormat":99},{"version":"99c98d7abbf313f8978c0df4fae66f5caf05b1e7075a2a3f0e8cd28c5abb56d2","impliedFormat":99},{"version":"3d7c052002e317d7ff01dbe4c6cf82aa20b6ef751101139c38c547636d872ffe","impliedFormat":99},{"version":"353fd6acf4bc2232c850bcf24fa6512a85517623f84dabe4dc4a22fcd0a69f00","impliedFormat":99},{"version":"f9c4bdf33b97ce2f7c4fa422c32ce85f8f4cafa4421e02172279ee5ebd097804","impliedFormat":99},{"version":"1f098514ce3fb820e89bde510a34b939f281581a7c1e9d39527ec90cec46f7c8","impliedFormat":99},{"version":"54b21f4fe217619f1b1dc43b92f86b741c55400b5f35bfd42f8ea51b2f6248a1","impliedFormat":99},{"version":"48d9c8e386b3ba47dd187ee4b118c49d658cdac580879984b1dc364cf5a994ca","impliedFormat":99},{"version":"b69cecaec600733bb42800ac1f4be532036f3e8c88e681f692b4654475275261","impliedFormat":99},{"version":"bb8e4982de3a8add33577b084a2a0a3c3e9ebf5a1ec17ddfe6677130ec19b97d","impliedFormat":99},{"version":"5a8aa1adc0a8d6cf8a106fd8cc422e28ca130292d452b75d17678d24ab31626b","impliedFormat":99},{"version":"f4d331bd8e86deaaeedc9d69d872696f9d263bcb8b8980212181171a70bf2b03","impliedFormat":99},{"version":"c4717c87eecbb4f01c31838d859b0ac5487c1538767bba9b77a76232fa3f942e","impliedFormat":99},{"version":"90a8959154cd1c2605ac324459da3c9a02317b26e456bb838bd4f294135e2935","impliedFormat":99},{"version":"5a68e0660309b9afb858087f281a88775d4c21f0c953c5ec477a49bb92baa6ec","impliedFormat":99},{"version":"38e6bb4a7fc25d355def36664faf0ecfed49948b86492b3996f54b4fd9e6531e","impliedFormat":99},{"version":"a8826523bac19611e6266fe72adcc0a4b1ebc509531688608be17f55cba5bb19","impliedFormat":99},{"version":"4dc964991e81d75b24363d787fefbae1ee6289d5d9cc9d29c9cec756ffed282b","impliedFormat":99},{"version":"e42a756747bc0dbc1b182fe3e129bfa90e8fb388eee2b15e97547e02c377c5ef","impliedFormat":99},{"version":"8b5b2e11343212230768bc59c8be400d4523849953a21f47812e60c0c88184b3","impliedFormat":99},{"version":"d96b4e9f736167c37d33c40d1caae8b26806cdd435c1d71a3a3c747365c4163c","impliedFormat":99},{"version":"363b0e97b95b3bcc1c27eb587ae16dfa60a6d1369994b6da849c3f10f263fd04","impliedFormat":99},{"version":"6c7278e2386b1993c5d9dfa7381c617dc2d206653b324559f7ef0595a024a3da","impliedFormat":99},{"version":"f5d731a9084db49b8ffd42bc60aecb28f90966e489261d7ec5f00c853efc3865","impliedFormat":99},{"version":"4dcc76850d97256f83a7d45b40327725db3aa7ee02dee3b1e860ca81ce591694","impliedFormat":99},{"version":"70fa22a23b35e04482f13ab7f697a057506503e21ced87d933359e3224c92ed5","impliedFormat":99},{"version":"709622bea0f7188c66bcee996bd4f24221c69d67e1d04797a11ebdd1311096cd","impliedFormat":99},{"version":"e8ad189c7d2932a01feadccefca9c873bee40d202fb53f708f1e7b1efce4ffef","impliedFormat":99},{"version":"ed3dbe543bbf46c4365e3eb5faa3fa87f0fe0c3db4b2476b8f430838432e2b8c","impliedFormat":99},{"version":"1ad2f20d17cad8ed17df10daf3f9050161fd42a86d5b7afd0a1dacac216e9c14","impliedFormat":99},{"version":"4e6502d4dc180cdff48d77f6ee04007167bef42f7b5488dbadedb0ddb1e9cdf1","impliedFormat":99},{"version":"e41e03387b7c74aae146473ff507c26b07699cfcd953f79dd174bfd624bcb5d0","impliedFormat":99},{"version":"ff671a3c1efcc1a96ca6f418c7a9616ae4a4c6110ece811fc1ec8013a3a24e6b","impliedFormat":99},{"version":"a105278208759f167642ea5b37b78661edf4b0350824ad2f961a329e5976b9b6","impliedFormat":99},{"version":"6f9a389203f44e1c344e5e5d8c0ddad05f0f2e033d0657297894cd8e6ca4747f","impliedFormat":99},{"version":"636ddb4225f892b1033182ae24af259fe30d5209a2b9e69d7374c3268818b9d3","impliedFormat":99},{"version":"c00c3b2b915c5cd789a78f86c98c211c78646872ed84ddc478994e97c6560a0a","impliedFormat":99},{"version":"592640ac835589f476f9cefbffdfeef79dc327bb9b25c0a3f92549fcd8e8c514","impliedFormat":99},{"version":"24033c6280d58689e7cdb5af09e2766c6b44a3747dbb0d844f155bd0621024f0","impliedFormat":99},{"version":"1914db9d25d18ff046611a41a8129ad01c829d5f9565f16660c7d09c66f776c6","impliedFormat":99},{"version":"054c4bef46bc70b9fbb18481f501bac861cd54af683fe5942e5c7e7d3b0c1fb5","impliedFormat":99},{"version":"d6ce9fe8c2849756dae3c9e11de07966bb58b6638a462098a3a1b23d78b56ef0","impliedFormat":99},{"version":"0f149ffde075123eb05b9aefdd405d5dc1acd729f94b3dedaf9f48d9fbbe2348","impliedFormat":99},{"version":"193a5fc1bfbc703c3772e05dfffb1c821ef30bb2d787f906fc26c38718bb35bb","impliedFormat":99},{"version":"dfdc408e78629b12771eca9a58edbeeb2f4783e79841368a069b8eb65ce447ce","impliedFormat":99},{"version":"513601842e2f161c0e7c3bc35c433f793f338b5d7d0465423d071486f43b65e4","impliedFormat":99},{"version":"5270479971ab757c197fa22d4eb07bf7bfc886440a76da240e095d5ffb2e95bc","impliedFormat":99},{"version":"8f5d63fde9f0ace19cfcec1a2bc4bc0efec47b89465216817204448dc6dfd5a2","impliedFormat":99},{"version":"65323bbeb0b10634c92484812f6a0020d3ca38a888c2a536962b425cb77d8e77","impliedFormat":1},{"version":"767183261649b963ccc7daa3d2ae38cc604ce60fc3a453a15a8afa9a4daba71f","impliedFormat":1},{"version":"5fb2b92475a3963e7b4ee8152cc6c3ae066081364b4abaeea695a5001db32e63","impliedFormat":1},{"version":"890d6c959fe26e8bd017bbb9b25623c227368fa1983a8966055c960b14de1452","impliedFormat":1},{"version":"4b5ed80412f64641dc5caf5af1c98d8083315bcf5f4d9bceea7b6aac4a1b865b","impliedFormat":1},{"version":"81957f051f71d2f4b0b20fbe8bfc40cbaa4d9a441ee3af3ec82646a96076429d","impliedFormat":1},{"version":"e4630dcc04c04cfed62e267a2233cae1367a7366d5cadcf0d2c0d367fd43e8d4","impliedFormat":1},{"version":"f7f13164c6c9b9e638ac98ffd06041a334cb20564d24d37185e29408d00cea8f","impliedFormat":1},{"version":"eec0d8defb7ed885473e742b9298a2f253f2113688787c2495b4f8228bc22590","impliedFormat":1},{"version":"de2cddc05d2aff0460f1bb27f796e9134b049e4fab33716b4d658628e0976105","impliedFormat":1},{"version":"4bd3e56fca57ce532152c64036a2153d61f2c1acfc27b4d679b1f4829988b9f4","impliedFormat":1},{"version":"7640a64392d0920c04d091373eb8ca038d6e80cc5b202bddcb0ea0937f90def4","impliedFormat":1},{"version":"ec817057681d50c1c0d2a3c805aee50e6df7c51c60484fdf590c81b9a5001931","impliedFormat":1},{"version":"bf6c2b7d7ef94e5d5add264d87aa2321e2e1d875d74e2ff1a5870b3fd0fa4506","impliedFormat":99},{"version":"da85d4bf5436447eea22ed6404226fa97f44ae375559ac97b5d3d5d86c1d5b72","impliedFormat":99},{"version":"e86e6db08b9106c95115542563d5a49d20447cf08cd2994dbd86c1896c49dc08","impliedFormat":99},{"version":"c3bbaa7348f9e5ca7e7c67c18aa0db9cfbfb1485ab4c13b73e8e0a15766b99de","impliedFormat":99},{"version":"338d21e6e39eac5d7df7fbad9179a489c4689471775cedc24a4eacd2b4acfc97","impliedFormat":1},{"version":"71c894f7dbb289f6b9907e4d70f0ccaa746be732a7d65354e6bcd23405fcc1e6","impliedFormat":1},{"version":"0cb45071af866142b4198636d458bd6d2f564b7d79896907a75b01d66c135625","impliedFormat":1},{"version":"e151f7178771544d572824da291a8e2c45325c0cc2dbfe513de06c9d3cf771fc","impliedFormat":1},{"version":"16d707a765a9a3114e9911c1a57634fb3c90d678539c2d6d793c30cc87e759f3","impliedFormat":1},{"version":"4ce2e4991a21c8e6a98905d0dc3a9efaf75e8e8812a2b930f77ed8aa4435784d","impliedFormat":1},{"version":"4b86cb06a21c36b5ff47731a046e0109cb41d540e17215b8f95829e30da1bb94","impliedFormat":1},{"version":"7cc83c9b21c59ab3b08196adbeb13d999e16c56a5bbf89864d6e01cc1a6e6204","impliedFormat":1},{"version":"102334bccff335c3ef1c556fabac2c2f12bf93ce1a5cd8ce826ed188707496ed","impliedFormat":1},{"version":"c9144f4f50f868501918f526697deb558eb9d82bcad179b3807609246ba6b32b","impliedFormat":1},{"version":"8bb219fc6b96eb8fee00d73aa6e570b01885a01be42f2b85d93a1fa102f52ccd","impliedFormat":1},{"version":"fcc36716f4a5bb4ac1babbd30a3c55483def152357c0d17c570ecc406ef8f159","impliedFormat":1},{"version":"66c695ccbaa50b938c0e058b28b3a004fc8954e7e0f7f01177bae4bb8e92cc0f","impliedFormat":1},{"version":"6e01462f84beeb73382f987fae1bc554f0ed6d9f70056106f417a9f6088bdbc5","impliedFormat":1},{"version":"1b46f9a444f79e8aaa88e9c7ccff9f131ab101015b8933ea3a8fc7cc2021adc9","impliedFormat":1},{"version":"7749ee7c2eb72db8f09271082b925580321c546d8b2aef68960f3f4bf483d454","impliedFormat":1},{"version":"3d77e968a4a37fe3857daf2227ccaa7efb978830a6873de10d6a887daabda9cb","impliedFormat":1},{"version":"0ee14e6d06ffdcc74c5fc496224c15e6275bda1c413ffc86b0ad19d1452898a6","impliedFormat":1},{"version":"b10364cad5f3ba55bb99c69d21eb4a0df657c7a36027a2618f8739ed69142570","impliedFormat":1},{"version":"c7c4c05e6788ee40a4f1e374ab1355d3a8dcd1c947afadc8ac1dfdd0bb0ea41b","impliedFormat":1},{"version":"0a5e955193cb8aea98e00bf54042651f8c8b9b00c87337ff3c0ce8960345b5ba","impliedFormat":1},{"version":"5ad71db5434af4e0d796a387bb7f4b7c1837199b866723921e5bd67fb01c2f0f","impliedFormat":1},{"version":"f2d68f4ccfd297a6b22d2df8271e68bb8a4d38c5e2a503b1a24ced9a3c7d7d9f","impliedFormat":1},{"version":"0a176b1b69c74bcc70bb1e3220fb14f5377e50b3fca16546a78c8ac87d84501e","impliedFormat":1},{"version":"cedac9b020418397b6dac0c22ada9f2539ead0c4d6c4f002900aceaac860437a","impliedFormat":1},{"version":"938492e3d181452f0cd89248fdb15e8126ac2aab687948d8d488d255d7a4fea6","impliedFormat":1},{"version":"b1a02c272b834972bef5cb8d9c79acb0352966ed5ae3a37482cec39da5e51276","impliedFormat":1},{"version":"25197fdcec1f0b168131c901881f9689b950c546a8d5d3620a9028765e9c91d8","impliedFormat":1},{"version":"c2a5d0ee3f7dd09d0741ba10eb9d07ccc714ee5f7fad3e550fe8ad99eedda1a5","impliedFormat":1},{"version":"81af227428e65ccfec74d0e439a810fcc2f33f3fa0e74730d486edf14ad2e367","impliedFormat":1},{"version":"2e6b2ac20f09b0351d256155e9b8d8854434ed9a01ba7e55a87a5d13e4365f63","impliedFormat":1},{"version":"3b0b108ad2bfedd6aba6c50b5b6aa969a75644935e40a749ecc2d28de9d9e788","impliedFormat":1},{"version":"221e3b82ae572a418be0a8e112681c64aae84166f2c25f4fd39297d0a6958b92","impliedFormat":1},{"version":"8a5fea1b0a68c64d9d830e878ea4e81efac6be802b4af1aa29cdfaad9be210f0","impliedFormat":1},{"version":"367fd06f031fee62713fa846885d31c8cfa8101b7e3ab129f1d89d9d5e719124","impliedFormat":1},{"version":"7163a9b5ad66c4e388aaeb18acf502e7c5afdbc52cb163bac5faf5d140abedfe","impliedFormat":1},{"version":"a9347756f992e52cd1ad3a5a7f35f3176e05795f44f4299f2809f5458699981a","impliedFormat":1},{"version":"68f142589baa770d72f2ec2c76dc5850d243ce5eb9b8b1f7e895e52c5dde89ed","impliedFormat":99},{"version":"dd6585c64a7e2247adc774fe92a3c5bebac28af2c1bc06bbdafeb58a2813d725","impliedFormat":1},{"version":"e0feff26b376e6eda473fea2273a6e96c5b380276a9ad9d3730cb607a0bcf1ce","impliedFormat":1},{"version":"4a286cb32756749c240e70cdb3e751b676fd0305f9d35928e3d3976e0d3c39b1","impliedFormat":1},{"version":"5b9716db2e3ca48d084e8baff9e2db5b2824ac7f7413e001dc33976e9f8e9636","impliedFormat":1},{"version":"ceacff8e81d4c413c8cdba7ef6eb5d35a2a20a7b0bc5b316114bbdce888b58da","impliedFormat":99},{"version":"dc62e0d530ec9d6b960e09c39f3eb0e1f0384511facc30f07e441b0abef2c5c0","impliedFormat":1},{"version":"9da9c5a6b9c0020c1e8f2d087168d2ea5d43ad70fec8d8b31be7db2e2296ef55","impliedFormat":1},{"version":"690bc2bd40e8d87f033168d99e4cde82607b8e0a181163350e7de07ccc98f5b1","impliedFormat":1},{"version":"4619bbac2522271def9ec6d67b1b421a8fe4b85a90bc2f92ddd8f4b7a08f728e","impliedFormat":1},{"version":"9019d34b102c683cf2810e38477cd5e8964e46a15870abcd27c108c31d90970d","impliedFormat":1},{"version":"dd0b8ff0d6d5922e247969e6b3df41cae2d7294d000b056f9f93eda3e5bc31f9","impliedFormat":1},{"version":"b53e04ce667e2497d2e1e5826eb739840b6d83e73abeba7d267416990cf7c900","impliedFormat":99},{"version":"466d30b0f75773a2677ad69bc7d94facb224e061e0276c18b22a50d922e7a6be","impliedFormat":1},{"version":"858520cadc012c1c8ff47ddc61686f50f4ee52c9b87a7c10b8fb84b60ababc32","impliedFormat":1},{"version":"09e286c715f875d3772a8c196677934495eb7cc0b0222ddbf6756f4f3c57830d","impliedFormat":1},{"version":"f45c90fb3bc0f1bc18aabaeaf52747c633152994792d6c119ddd7d29e9d53414","impliedFormat":1},{"version":"29b553ef6920613307fa4edbd656a105bf159c7db2438fd84fe624a4ef6fc491","impliedFormat":1},{"version":"a69b64cc44b49bdadaa0de322b4b347b16fcb9c7fc08029a0372a082cb0f4467","impliedFormat":1},{"version":"7596bc71c0939bf0b534c1ead88b0c13c6ce7a8ffed9e47fd176036b3a464062","impliedFormat":1},{"version":"51cafc266445e20b92529192d8eb0ff3385ac1bc44fe125e84561563f338ec80","impliedFormat":1},{"version":"86a9434282d3ac8a6438ad0d6bec7f9e6463106edb2dc63c26a9dc63a6050d24","impliedFormat":1},{"version":"c16cffd6aa4a2c0701bd16332f4dfe6517a17f770f00218867d1fd4b13617fe2","impliedFormat":1},{"version":"ff1e570657ad6fb9247c2d7160d8c318796b88ab5db739336515fb04547a2d20","impliedFormat":1},{"version":"2ef29f5b7766615f2dc6b2fad24f5ce9e64204f6bdc035f3c9f90ade189196b5","impliedFormat":1},{"version":"ff4a940841cc11f423a911011edef12b47541e48c02cd5be4e8aa0addb0cf3f7","impliedFormat":1},{"version":"2ce39f6923be247a53eb5ea78ee1b5df3be8086253b8dd70be2584f5d8c2537a","impliedFormat":1},{"version":"bac47ef1b5d6cbf8c3e80f672e8f9ecf1cbab10da5fd25b7f228702306fceff8","impliedFormat":1},{"version":"3ef21503ad78f542c2efbd785f22a8c77e3798a2462be8a25a806937d4d85a3a","impliedFormat":1},{"version":"bd1ff4e0676496bf4f98f4f3ee31765bb49339aafa8b076952ec27cb041db0c7","impliedFormat":1},{"version":"5b89a6e06ccb15548326fac4c3ccb65892d8b10cf52fccb2867d0eb9a0b27bfd","impliedFormat":1},{"version":"2aba54f9c5acaf97b2f54e15dd52b88a26069c04e40118c5c1b4e1c7d0b13704","impliedFormat":1},{"version":"22b47c263603277f4caae17f9b5aa564f600a9b770f05920e68bee09394e2178","impliedFormat":1},{"version":"bdb92c931b192ef315b53cd48aa02e4398c251a8ea8800492cf0f43cb038ba28","impliedFormat":1},{"version":"eb37622408d5a60a38a9141acc5ce584f031df61fa67eeba98d495704fa14ddd","impliedFormat":1},{"version":"d787f15bf7abaa3a0d38c657e4281b13f86cc38b8845094a6977d583a9347ea2","impliedFormat":1},{"version":"8cb8894f63c1636f90fb7730fe50e421cdf56c779d0ba298010f0be89022cd39","impliedFormat":1},{"version":"749fb78249cdfc1fbb9ef8cef948a13f85f9942ca5489f1468736922500d78e1","impliedFormat":1},{"version":"30fd5d3577a7e58f873b83049dfbd2f173c350851c17b1e9a4b0878020626b97","impliedFormat":1},{"version":"66231c5bc015e15786504a220d622ddc6aac651b2a49f9cbf3fb945e27e733cd","impliedFormat":1},{"version":"819175b71a0809ed8bd0e76470a5e1deac5e02897862d4b633c17238ffc22b97","impliedFormat":1},{"version":"5426089e9fcec830597afd777d68bfe372de694dea4a8e7e68e3ca28acc8a6db","impliedFormat":1},{"version":"8e302e6fa5c43ca2384fe54b39fbdf0c320224a6919d71da5efc423366551314","impliedFormat":1},{"version":"fdc1bebcfdb5da0d3db8b11a94e68e0f40aff9f126ba06512c74e83cbab03a03","impliedFormat":1},{"version":"9139c1f3d72a1419734da74c4cbed997d073dafdb8fba63f9088a6fce6f23c99","impliedFormat":1},{"version":"79314b827217deb6d8518be67e201505f4da047bfd8fee11457f997403e0e7e9","impliedFormat":1},{"version":"5e788a039b7435497ef94c30ceff9f92ae097522e53ee75652407f1fba79579d","impliedFormat":1},{"version":"8782f99016b5b587eeb2e57c913a0a9470200941afda788224ce960fae47eeb4","impliedFormat":1},{"version":"c471dc722410fa62a4ff2c7f033cc15814087f5b445b5e9fbda596cd4c228a2e","impliedFormat":1},{"version":"0548857ee66b6fad6f26fdfaa76ee25334fa62454997c3a954726c166deb6a5a","impliedFormat":1},{"version":"a1ffd087cb5a5f76ff56226148d0acf8d223a9474eaf9d97dbd45fa6a19c1e58","impliedFormat":1},{"version":"cc5f3ec646bf93a7f13e27a9bb72f42b2a094a551a015296361cfe7f0d4350d2","impliedFormat":1},{"version":"f9e8a5ef3b0cbc104b6e66b936e5e76119630186ede7d3bef2cf53df506ca5a6","impliedFormat":1},{"version":"3644cfe268c1fe7de7b18619b385f8fdae10531ebd0ea4193ca6ab8bc8175e72","impliedFormat":1},{"version":"a05cfa018e37d5f3a5f39773145e5e77d18f32819ba3e115cd49b468f3ac139e","impliedFormat":1},{"version":"e2ecb11f739a7f3556659fee61d144d3ca1d715436ceb727f5701cd12461a65b","impliedFormat":1},{"version":"6ec1463df8c2070371669bdaee719272607903467a19f9883348166b50af8d54","impliedFormat":1},{"version":"cc08bd4e50ec465e694826816b4797e6f6a4a5211e98bb76bb05342439c7ce38","impliedFormat":1},{"version":"96cfa668e8ad2f88bf255184086129046467ff400f678de888c2cddf82b999ec","impliedFormat":1},{"version":"8d27a16268750bef7f8f2816fdcb28a9500fb9e6ba5a1e5981a053d35b416c3d","impliedFormat":1},{"version":"d90ff671df07b5dc26709a9ff6688a96fbf467e6835bee3ad8e96af26871d42c","impliedFormat":1},{"version":"7a0555e1186c549e113b9603b37994dbdb9b0aea18c1ebaccbade9fba289d260","impliedFormat":1},{"version":"ad1eab49ed8d2c7027c7d5b8333217688ef1bf628c6b68ca7674329c262433c5","impliedFormat":1},{"version":"c8d412a9b07756667bf4779a960226b71418a858cb6801188992f4e9ed023839","impliedFormat":1},{"version":"7801e1a8f4396ec3a8eb0fae480baf1fe9ea036a5d68868337a7bcc50bf769e4","impliedFormat":1},{"version":"9dfbe649c60c743bf0cbf473639551cf743a1acdead36e3d66a8e3feee648879","impliedFormat":1},{"version":"c214b33fb74b0ea35c672b1923e51ab30a1e3e8f876a09e94148a35f3cd2f5db","impliedFormat":1},{"version":"e3846aa20e866fce307a39d7efc4e90eef08ea0884b956738458fe724684e591","impliedFormat":1},{"version":"c19feddfc23f04fd9cda6b24568894eb79852a26b3f9733cc0472b91bfc1c0a1","impliedFormat":1},{"version":"9ac8b88f902bd4c2212ae16b11d26421e50669f0a0643586083281176f9d9132","impliedFormat":1},{"version":"5180e5bae39bbb8baf8aeba9100814e4f4d017d41638a4e609ca5c3ce83993ea","impliedFormat":1},{"version":"b69e0431f9b7f6e6c5f0754e8a3dad3f263684ed4c7406d4be7649eeb7d9af27","impliedFormat":1},{"version":"a10e2f2466f0ed484ef74a385bfb5e63f2b202d51dbf1bb4c51c294a70ba92ca","impliedFormat":1},{"version":"5347737b57f1c1cce11c140228c4e4068eca4c2435b1e4beb4d46e60c5d5e55e","impliedFormat":1},{"version":"631b3d9fcc0fd5e08affcdb01b76f5d34e1f1c607031d03a6d621cf2aa63b2e8","impliedFormat":1},{"version":"ef7ee4e86977bf10f68dc2e1a3378bbebb4e97dc476bac72ca9315cc7e89e3e2","impliedFormat":1},{"version":"3a21d83e527b6d812d75c719134026ffc18efe0f01c76e6441b29d77add09e26","impliedFormat":1},{"version":"91406250d53804ad5f3a42af40a5e17f1ea3e54c493076f6f931e77efa6db566","impliedFormat":1},{"version":"1fb51788ac6acb1e6cba5cf7e99b03d07ca8b4120550defd561b331dfa8e816d","impliedFormat":1},{"version":"3cc15f1ebcd824e7752f390dab07e92b15e02514f2c9ceb1737ee42d4e3164e3","impliedFormat":1},{"version":"830c34482ca4bce8c4fa2f14cff1197fce2017471752441e95b25112827ceef3","impliedFormat":1},{"version":"f00b89d69f241f3e74269c2de5d3cd564fea760fd4d2a403820ed5b077819724","impliedFormat":1},{"version":"d2e41732e6551589732bb50507b48762982fbe68fcb739f7a4fdacf7a2eb6bb1","impliedFormat":1},{"version":"b62750f035b864e25b966d2a5bd32a716d8a0f5e9befaa3638603ec8df578b37","impliedFormat":1},{"version":"8933e7bf77f729d2ae382fe434a1038fa304caf15c71a4c16c90c19e9ca7626f","impliedFormat":1},{"version":"20463dff6b7f9ab3573ceb503f0674d34c3571328bec2152db193e732a29bb7a","impliedFormat":1},{"version":"528e1e94b95de11acf4545f8b930b460e18ef044579a24a8b1b2d40c068fa89e","impliedFormat":1},{"version":"fc8a3cf4a55f7d1ae3f2efdda84bbeaeea605a92e535ac52b99deed6366917d5","impliedFormat":99},{"version":"4d0d2708fe857d7a1a936da40fb357b2f67f22b0e0c4994211ee6a6ccbd48a33","impliedFormat":1},{"version":"21a572262a50e7b603382800b727abae5b7d52ccd71ae163f8dc4cac379f7274","impliedFormat":1},{"version":"e674342d40884888334a6cf55ac4276abd77f36f51687f56a47d5910fd9ea033","impliedFormat":1},{"version":"ac04b4535689f4fd637d97c9811d5fafe4d2209d497c0eae539c3e99d81978fc","impliedFormat":1},{"version":"c3a31b99b4de2d53784cf340ee9b36907f2b859dcb34dd75c08425248e9e3525","impliedFormat":1},{"version":"f03893fc4406737e85fd952654fd0a81c6a787b4537427b80570fea3a6e4e8b6","impliedFormat":1},{"version":"518ee71252a0acf9fce679a78f13630ab81d24a9b4ee0b780e418a4859cc5e9f","impliedFormat":1},{"version":"3946840c77ebba396a071303e6e4993eaa15f341af507a04b8b305558410f41e","impliedFormat":1},{"version":"2fba8367edfbc4db7237afc46fd04f11a5cc68a5ff60a374f8f478fcc65aa940","impliedFormat":1},{"version":"8d6e54930ac061493fa08de0f2fd7af5a1292de5e468400c4df116fd104585a2","impliedFormat":1},{"version":"38c6778d12f0d327d11057ef49c9b66e80afb98e540274c9d10e5c126345c91d","impliedFormat":1},{"version":"2ac9c98f2e92d80b404e6c1a4a3d6b73e9dc7a265c76921c00bbcc74d6aa6a19","impliedFormat":1},{"version":"8464225b861e79722bf523bb5f9f650b5c4d92a0b0ede063cc0f3cf7a8ddd14a","impliedFormat":1},{"version":"266fb71b46300d4651ff34b6f088ac26730097d9b30d346b632128a2c481a380","impliedFormat":1},{"version":"e747335bc7db47d79474deaa7a7285bf1688359763351705379d49efcddc6d75","impliedFormat":1},{"version":"20f99f0f0fdf0c71d336110b7f28f11f86e632cf4cf0145a76b37926ffaa5e67","impliedFormat":1},{"version":"148e0a838139933abaeee7afc116198e20b5a3091c5e63f9d6460744f9ad61a0","impliedFormat":1},{"version":"72c0d33dd598971c1caa9638e46d561489e9db6f0c215ced7431d1d2630e26d3","impliedFormat":1},{"version":"611f0ccef4b1eebe00271c7e303d79309d94141b6d937c9c27b627a6c5b9837f","impliedFormat":1},{"version":"e2d98375b375d8baa7402848dca7c6cd764da6abf65ecfaa05450a81a488157f","impliedFormat":1},{"version":"b6254476d1ab4ce8525ae5f0f7e31a74d43f79eecd1503c4de3c861ee3040927","impliedFormat":1},{"version":"65f702c9b0643dc0d37be10d70da8f8bbd6a50c65c83f989f48674afb3703d06","impliedFormat":1},{"version":"5734aa7e99741993aa742bf779c109ced2d70952401efe91a56f87ed7c212d1b","impliedFormat":1},{"version":"96f46fdc3e6b3f94cd2e68eca6fd069453f96c3dea92a23e9fcf4e4e5ba6ecdb","impliedFormat":1},{"version":"bde86caf9810f742affde41641c953a5448855f03635bf3677edf863107d2beb","impliedFormat":1},{"version":"6df9dfe35560157af609b111a548dc48381c249043f68bcdf9cf7709851ac693","impliedFormat":1},{"version":"9ba8d6c8359e51801a4722ce0cbf24f259115114a339524bb1fdb533e9d179da","impliedFormat":1},{"version":"8b1f2a75b36d4a5b52771e1bfd94706b1ec9cd03b0825d4b3c7bcf45e5759eab","impliedFormat":1},{"version":"97d50788c0ec99494913915997ab16e03fb25db0d11f7d1d7395275fa0255b66","impliedFormat":1},{"version":"aea313472885609bd9f7cd0efdc6bc17112f8734699b743e7fbd873d272ca147","impliedFormat":1},{"version":"116f362c8b60668e7a99f19a46108ceac87b970e98678a83ae5b2a18382db181","impliedFormat":1},{"version":"b4fbfaa34aacd768965b0135a0c4e7dbaa055a8a4d6ffe7bedf1786d3dc614de","impliedFormat":1},{"version":"87b9b8fd9faf5298d4054bfa6bf6a159571afa41dfdbd3a23ea2a3d0fab723bd","impliedFormat":1},{"version":"cde5f66590c3a1af8b32b89444c7e975de93a3f4b7fc878087abf4187c7949fc","impliedFormat":1},{"version":"31ad2c3e09a73713d4c52f325e0fa0cf920ea3ea6bccb1fc4b271d9313183883","impliedFormat":1},{"version":"5906db268438b1a7a124f8690a92031288a8e42e6aea0f525158031b324427d7","impliedFormat":1},"6e5854ccddb05a7f42a394fdf20754541b2f1c76c231aa758c5ff2def73d33f2","8bd70bed4fa3885fa1874514ba1bbc20cb377d2b945aaf8d502cd052b773bed9","78f4dda6357dd2e847e0b4ce60c9a18d639589d739b50662ae186947eb3890a6","065e62181bb7c82d08b393d96c57c957a1f85fd9c14fe1491e1be12bf7fabf6d","6840097f30f49c5ad3f30d4f0840333ddcc2c31bd8607f1e651edcd79cd63b3f","0282bddc745ee95514fd5dcd805a4cc5ae6cb984b7cb690cc7524735927e20ac","4f359ddc8efaf51fea82461f970c69985eefc4764441b7afb3b6349c3cc3e4fb",{"version":"e6310fb7ee3536c03b835f30be51d09e6324a136c454a15d211e424fd8f9bf5b","impliedFormat":1},"a416e3e8891b8621a7d8ade8c857979dcec9c6ae3a02db40decef99670e04010","f74e38547b08ab59e502930a76fc87cf3b0655b4bf405ea1304e3ae1241ac1bb","87b914fffc0b6e8483a9fee6093c62a9cfd46fe204fb1eb258aaef87c6b260c9",{"version":"e516240bc1e5e9faef055432b900bc0d3c9ca7edce177fdabbc6c53d728cced8","impliedFormat":99},{"version":"5402765feacf44e052068ccb4535a346716fa1318713e3dae1af46e1e85f29a9","impliedFormat":99},{"version":"e16ec5d4796e7a765810efee80373675cedc4aa4814cf7272025a88addf5f0be","impliedFormat":99},{"version":"1f57157fcd45f9300c6efcfc53e2071fbe43396b0a7ed2701fbd1efb5599f07f","impliedFormat":99},{"version":"9f1886f3efddfac35babcada2d454acd4e23164345d11c979966c594af63468b","impliedFormat":99},{"version":"a3541c308f223863526df064933e408eba640c0208c7345769d7dc330ad90407","impliedFormat":99},{"version":"59af208befeb7b3c9ab0cb6c511e4fec54ede11922f2ffb7b497351deaf8aa2e","impliedFormat":99},{"version":"928b16f344f6cddaba565da8238f4cf2ddf12fe03eb426ab46a7560e9b3078fa","impliedFormat":99},{"version":"120bdf62bccef4ea96562a3d30dd60c9d55481662f5cf31c19725f56c0056b34","impliedFormat":99},{"version":"39e0da933908de42ba76ea1a92e4657305ae195804cfaa8760664e80baac2d6a","impliedFormat":99},{"version":"55ce6ca8df9d774d60cef58dd5d716807d5cc8410b8b065c06d3edac13f2e726","impliedFormat":99},{"version":"788a0faf3f28d43ce3793b4147b7539418a887b4a15a00ffb037214ed8f0b7f6","impliedFormat":99},{"version":"a3e66e7b8ccdab967cd4ada0f178151f1c42746eabb589a06958482fd4ed354e","impliedFormat":99},{"version":"bf45a2964a872c9966d06b971d0823daecbd707f97e927f2368ba54bb1b13a90","impliedFormat":99},{"version":"39973a12c57e06face646fb79462aabe8002e5523eec4e86e399228eb34b32c9","impliedFormat":99},{"version":"f01091e9b5028acfb38208113ae051fad8a0b4b8ec1f7137a2a5cf903c47eefc","impliedFormat":99},{"version":"b3e87824c9e7e3a3be7f76246e45c8d603ce83d116733047200b3aa95875445b","impliedFormat":99},{"version":"7e1f7f9ae14e362d41167dc861be6a8d76eca30dde3a9893c42946dc5a5fc686","impliedFormat":99},{"version":"9308ef3b9433063ac753a55c3f36d6d89fa38a8e6c51e05d9d8329c7f1174f24","impliedFormat":99},{"version":"cd3bb1aa24726a0abd67558fde5759fe968c3c6aa3ec7bad272e718851502894","impliedFormat":99},{"version":"1ae0f22c3b8420b5c2fec118f07b7ebd5ae9716339ab3477f63c603fe7a151c8","impliedFormat":99},{"version":"919ff537fff349930acc8ad8b875fd985a17582fb1beb43e2f558c541fd6ecd9","impliedFormat":99},{"version":"4e67811e45bae6c44bd6f13a160e4188d72fd643665f40c2ac3e8a27552d3fd9","impliedFormat":99},{"version":"3d1450fd1576c1073f6f4db9ebae5104e52e2c4599afb68d7d6c3d283bdbaf4f","impliedFormat":99},{"version":"c072af873c33ff11af126c56a846dfada32461b393983a72b6da7bff373e0002","impliedFormat":99},{"version":"de66e997ea5376d4aeb16d77b86f01c7b7d6d72fbb738241966459d42a4089e0","impliedFormat":99},{"version":"d77ea3b91e4bc44d710b7c9487c2c6158e8e5a3439d25fc578befeb27b03efd7","impliedFormat":99},{"version":"a3d5c695c3d1ebc9b0bd55804afaf2ac7c97328667cbeedf2c0861b933c45d3e","impliedFormat":99},{"version":"270724545d446036f42ddea422ee4d06963db1563ccc5e18b01c76f6e67968ae","impliedFormat":99},{"version":"85441c4f6883f7cfd1c5a211c26e702d33695acbabec8044e7fa6831ed501b45","impliedFormat":99},{"version":"0f268017a6b1891fdeea69c2a11d576646d7fd9cdfc8aac74d003cd7e87e9c5a","impliedFormat":99},{"version":"9ece188c336c80358742a5a0279f2f550175f5a07264349d8e0ce64db9701c0b","impliedFormat":99},{"version":"cf41b0fc7d57643d1a8d21af07b0247db2f2d7e2391c2e55929e9c00fbe6ab9a","impliedFormat":99},{"version":"11e7ddddd9eddaac56a6f23d8699ae7a94c2a55ae8c986fdabc719d3c3e875a1","impliedFormat":99},"68395e690b97850a4c0c65677d361b667e8a6ab724855d9dfd5d8101144aea6d","031f3629f46c8c46e4db9181b2c7ddde59c872ac7e621f9aa362a358d7385f72","b1e16e69b9bf5d990a6477199d98f94ab8969eec411cb3db30bd67ad3338e602","0ddcec36683837f6819a7e4f5026d5a85ea4c160ced221d57f0519933f59a131","12fe9896183e0a7459eae4b33975cc8d5008c850f7aeccf2e4839e89113339bb","ece2bdf5b8554490f0e5261b080b7cb264677a75512ebe573475f2e2e2b5f054","8999e798a984e1b161611ff9fa8bcc3e07fe803138c1d99d988f232ff17f589d","cc3679bbe1e6b7ed7b1e5ddc1bb0fe01eae26fc82b829fc38657d58f3606db41","d6c4471f86fa8718fab7ef4742a59de955880dc13344881a06293a6e29628ce3","67766de5326962401f2a5fb491c9ec3fb74f929bde412083e7db4b467785f56e","558798a6884376b548ca08d5ef61e3c34ea48736e4b0be85e478ad7480ef4641","aa5efc1451d61df9a1d12af80517904510b1952aeefda771aa67d74af9d258a0","123f2ccbdfa8227e4e984c058329c9c2880c824b5b36c3ba9015743ee6ae7f74","fa4f8e820dd317810a116d29106cab2510db6b9dd689704ad187b12880efc788","4cc95d014a64999986bcc7b092fea0bf3ab477141d42145898ad0fdf042fbfe3","1b1e23349ae00b9ac85f4caf7cccf6dae4e45a21a747bf7425354d065e1b1061","c6242e8ab18c91661033287fead7caf603f8143cefc531e56111baa270ed2cdc","ea1ed792f61322ebecb0c57f9e807e6d4ddb11f4a55e4e0b1d633841fb5087ab","66de6a2ab68578ac493f5f8879b7d5e45f47897c8eb33e9f1a1d7973e16f4122","bc686c1d593be7c35d24fb723cd11c13773853dfc411713a8796b0710d71adfa","20af2de9abb5261d4820b28595da146fead8488f6782c4942c04767bc2c98450","f4a158a17b68c17c84aebab5b47907d188572f7559a5577fe377c09b774eab0f","313e0441cd80f04ea092b8656463b03ba217b5fbc17b5a57c617b523250b14d2","cc78a6189ffac3a0d3c4d724828583cdd96f937ecb93ca98fb6d26454d5faa76","dd1ce1c05fa1e7a2f03687c2f720b5854b684db75bcd535116b5a0be764419db","c0cc81bdcb33208b8b30520539d542396d4da8067934e9e5d134a37d21806074","8b19fb10fab56bab4be37439120aa4e4993438982c46234c9ed732342b23ffc5","b58208f78132405991449ca39aba845fcc840bc607ae49d9f307d9572938a2e2","0f13978ada82ef76311c00226d220e2cb3559a24ffd8744487c93d1aebfd3352","399c85012b57ba1dd9dec7d31dffa63e129cfa534f5c8d8eadee4e548b5dd920","35683f909899ea4636318cb1c79dfa85a7d4b082ddc2602f83cdd69850458fd7","75f037e5a4f2c901272b4fb8cb4e43ee9a6a622404cd42f29dfa3b63264b68f7","438168c306a4249e5b9b0a665bc6e2d140659e4ab6bb9d27ec192e693d31e9bf","d3eeeadf70361480d7773d46acc9362111616585e5a94ffc12143b0562749f08","7f262f87713a2a981c2f5d2c9172819a0b7fcc0aba703f59e4d3738c1f8a2889","77af8b4ae387a4a6ab3bde35248a6e2ab974502f1c88098a1982d8cd77f8dcb4","98a19579e8e3f9fbba21a5423c288e0501e848d7d924e0e504efdecbe10df6c9","b93348b386d5129710df092060e8a6e5a3f3437563eba5c8d3ba6326e2753a79","e5c8dcdf53ea03958d01bd3bf920ad1a59f2f65b416752bd5fc8c876361f583a","d6e136b32ac62cf9b53e953a1c91bfd938632f8653023ed9cb8807da48cfe0f0","2270041656d651d455fc334183151b26c85c3733d28a5a68805ec554ea08b28a","5977416abf50a3cd9fd497710f6b4ba47339c4fc052b7d95c1204d3afe8228a3","ddf2371b1ea1d2205a46dec813e6fb940e94254effb105f8b0c259124e647bdc","5719d86885ae28680bf7c761888b12094c9a6b99e321e87a70cf1545a61084c2","e209439d5189fda6fdbc3dbb2ac528d3cac7cd46b072d259c633830a978514d7",{"version":"ae7a112baee89c1bd33f1f8589976acdf11de0e8642dc9bafae67f6fe042a441","impliedFormat":1},{"version":"8584532e536389edd37888a74d5b50ead6ad56cfbf9f629a5c511cbdde7f97bd","impliedFormat":1},"f336978e7edc9e0944a1c17b2053c44548f4f6643ab3a2df65b7f6109c88709b",{"version":"dd129c2d348be7dbf9f15d34661defdfc11ee00628ca6f7161bead46095c6bc3","impliedFormat":99},{"version":"c38d8e7cfc64bbfc14a63346388249c1cfa2cc02166c5f37e5a57da4790ce27f","impliedFormat":99},"0a38a90f0d38e4b7c169202ab8f12f3da9343ace65bf90292ce832621a544515","6d39e0d2bb4ffdf5d2f128e732253ff70f68313bcc0f4703a929e42107947dc9","7799d82038aa18b130ae5ba3e90c75afa4a27b437ec0177c1f6f3a21b2b0c105","8d4002a2909f4e678fecabbaae6cd58d3c6bc50c4218cf5329e96c42fe12e99d","a245c39bc8de126917c2cf1aa0710d76b8b163395ffd39bd96502343b6ca83af","41d425b4cf146defc3c65aa1a6b9a41988b0dd857d3096b134d45f42f9c6d46c","48f0ac44661d09a914223ca5003f656e38eff7410b9939a295ba945d3a0de289","2289a63ef11b9c3fc83c9ae47c4ed0703ca2ea6ebf99cbdab77b9b769227b42f","eddba11f07cf7d385b2f1df22d6fab466a12a7abc493b5bb1cae796e08529ffe","31adc63d7e93baa6d9255068d94d7d5e83c42b4d6d7f35fe2b2c52bcf2492abf",{"version":"37c7961117708394f64361ade31a41f96cef7f2a6606300821c72438dd4abda3","impliedFormat":1},{"version":"5f38aeb6dea42ad0e3cc7f8feafadad51e0d8a51a743e88cd6f3380caf921779","affectsGlobalScope":true,"impliedFormat":1},{"version":"5f82d68904af18c50789f935c2e6d5aa10672ba9fafcadf1d5d07a0c2a740c0e","affectsGlobalScope":true,"impliedFormat":1},{"version":"a2a3306a3820976d669cc342bea5de7f8ed94a97a7e1ab766cc62481ea3dc9b8","impliedFormat":1},"5be04405653782acb25fe5c679810c15732553d76fecf3d34c33d72b849d454d","196bb858d6bec8df59034472a693f1c762790d143fd95b3d3a7f4148e3cbac62","a391de1a74815e38f16e1fa8d53dc58ba46bf9b216c6e3e4474f7984a4ac4d9f","056b6e80066d8ca009696a8afc51262e1b820578d8cd07fcb92dc9c91ad01772","e32b5f971049b4e781c5b48a4fea9d9196abdf1edf7b05fadef89d7437f8530b","27d2c3cc154f812c4bff44ea75b96f8e48c43d98e831e0a7417f2c6c1ba902b8",{"version":"e2fa582a5166ef4ab0a9480183e3f8cbe539bbfa7afa22b9d0657fcf164a4987","impliedFormat":1},{"version":"b61a8716b40eeb252d43807dc86e5a0f994f10a69d8694cd29e53450b4301daf","impliedFormat":1},{"version":"e497f9f941ae9e06e0168105fe608ea2257afd8bf179a1dfb04106401f3a99e0","impliedFormat":1},{"version":"1861864e0ee168caf489d91f4bbc2f71b285bcc7d630797af0a76dc7ccace4e3","impliedFormat":1},{"version":"b2bb0fe1ff3002401172928ed1e239eababe9f2db59f861abbff0f9e81483b01","impliedFormat":1},{"version":"ab2e67509a4b288ccb6685528f57767cd011da3b96d7c60128d10c9ba3bc34ad","impliedFormat":1},{"version":"a0d1cb0cec8bd5880465d108429c0bd552b4cf1cd7a68c5c45f312d3c792940b","impliedFormat":1},{"version":"8cf4ed136518ef5be26e750ca7d8e8be47cc74ed8c7f81336598ab94a034bc8d","impliedFormat":1},{"version":"e6de39d2208f63e509f39577acf21c6fcd05fa827595f8ffa2c8fc4bf1eebc97","impliedFormat":1},{"version":"fd30c90654caf9936182c02161c3ec1ee218260c295234750fc64d26a4cbcf04","impliedFormat":1},{"version":"2e68cf80cf0d02cf897083d8e264de44ac07b5a947bbea5da2971d7ae46ae19f","impliedFormat":1},{"version":"2dc439b2862a51ce16e4096084db6c3dad2d605c4ece2f828bca8b5bed180aaf","impliedFormat":1},{"version":"ee4f1a686a0d53451fa2adabdb5136e5833c0a7f9bebdb31bb17e35227416695","impliedFormat":1},{"version":"69382e624100df05309a8b56a6a24bb403a61d38d4f8f69ee4ad32083c978d7b","impliedFormat":1},{"version":"0ca156cc6baf3d75fffd8ce14feefa2b9c522b87d521ddde82015394dd046bea","impliedFormat":1},{"version":"4894a84c6312e16d17288e18aa75e88403c37f9aed8a119b1a41c4febff2faf0","impliedFormat":1},{"version":"74b2f3604f46a62c1088d6d3f375bb683d238d8cddd949a8ab91c3805b3406b7","impliedFormat":1},{"version":"22a2caa57978a37b7366ce83c66b00f07052e06d9b1b176eb9bc7e7342b9874a","impliedFormat":1},{"version":"1bc2db743934d601d345c698212884f896e21aff23713c09385222a745331072","impliedFormat":1},{"version":"2d78f2a3c1776319e8e13569909f49f1b1ea47d0d1f6373daeaa91c67a6c3be2","impliedFormat":1},{"version":"b517471537578ada03e321b6aa44e5d53c76d72e9be5f1a199a3b21a40790df3","impliedFormat":1},{"version":"eeca1236542aa1768a1c0ef257ec11e122ca243b707d150a9f6c637ff04878a0","impliedFormat":1},{"version":"54cae0368d0ca85b90aef00d5fca7222d78bbc621a745e430ebc900905037fad","impliedFormat":1},{"version":"01017150d14d510f924aae82f927030475b44247e8d471eb9c4ed28b8e530d2e","impliedFormat":1},{"version":"ab49f0e7249b79be5e6bb13005eb500b294ab1ea360280992461869d36072e64","impliedFormat":1},{"version":"f03a2b4e53c54458bb0cc14422efc9bd8adfd578ea862222ac31c3c107757c8c","impliedFormat":1},{"version":"fa8c3ca5afdb472258bb68caf8a67986d927a4dbc6327dee8b52d129b25ad833","impliedFormat":1},{"version":"4afca0cf0a81f73443512af5a32ab61056b45b431b01a1a06689a078b3fc21c4","impliedFormat":1},{"version":"e3d45b5d5d135493af86358d4951d4310fd1e9f62ae1efb60355ad01f37bcdf5","impliedFormat":1},{"version":"e8efb564030c4702f468ba6b6bacd5e59d385949d4d896f1a54b5066cedc6a1e","impliedFormat":1},{"version":"dcff7b20db5f5896caf96f3d3af3c50b4d945d2696005a3eb049828f3e9fe15e","impliedFormat":1},{"version":"a1682a4429dd34a0eb37d71cfe8a028b7057f051a6a8c1f161f84e4b2afe71d7","impliedFormat":1},{"version":"428663180cd3cbc59232ee7e6a6e805b6bf71f3fe37532134897777c379fb380","impliedFormat":1},{"version":"80eb3ff6d7b58593883b435abfcd998f37e5ae2343eb7ed783a3d6e679beeb79","impliedFormat":1},{"version":"7122b3696c294f5b8f39562b2e58196c8ef939be41da9f6d64bc400061c56ab2","impliedFormat":1},{"version":"75c45bdddff1906a9e36a92af5018089e02912a4cc87fff09547c8cf02badd49","impliedFormat":1},{"version":"f1ededeaec351d10af21a2e5d7631d86490dd006a995e3b6b7f653b6c60299b2","impliedFormat":1},{"version":"3fb3bab8d6abfc27b4c67fc6a697ac69e728dfe233b122bf98a9a3b04ea4f562","impliedFormat":1},{"version":"27dded06d11f269fd0d615c37c052f4e1089f70d37992d9b4d83e34554a981f0","impliedFormat":1},{"version":"ba29e4851f4002836d649869cfaddc3e7420130d9f06f244c738c9dbb41f974c","impliedFormat":1},{"version":"45702fb35587cc9a36d4ebf3864ff36889dd9b5cb2405398b9336a8bd578672f","impliedFormat":1},{"version":"abc6415c56e22a575c20df95065776d4f2710d8cffcb6423194c3c423bf29ff8","impliedFormat":1},{"version":"148b534ee1983512ee2ebbe8ad29ba2156679e0efb7b2e17aef5e5ef9ec26800","impliedFormat":1},{"version":"cfcd29077ed6a4cdde656fd3d972ba44aab0c9fb954822371910096f0645b0dc","impliedFormat":1},{"version":"711a6a870ae8fe085d9d102f1487ee75c24fa5deae4bb16a21687f5289d9c0d0","impliedFormat":1},{"version":"06241744b71ff8f3215adbfba29ae9e7ede82701b55f0e26e45008f83e27b39b","impliedFormat":1},{"version":"2016337201ec17ecff18d64d565237fbf1acd78fee5ba14a828db2f5264868e4","impliedFormat":1},{"version":"81f9951db8f22afaf1d35c9238c351f436b657ae53a828c89309c10eb5d2901d","impliedFormat":1},{"version":"8a502f62704edf23e685909f3a56fbee1f93c13fdbaae8b246b7af44992e7a32","impliedFormat":1},{"version":"225405fa3cc163ee6325e70d1904999d07987d6263ac7048f1a238bf412224dd","impliedFormat":1},{"version":"c4f516bbc1edcf15a99a430574c9e8ab10f3c01406dd04ef5b29684bd70d4196","impliedFormat":1},{"version":"6d237f63f9e2f5e62177c830f0607e2a05f4abdfcd78e984712d28e1107ec5be","impliedFormat":1},{"version":"2d8818e6f74728af15922b81efb205e0572c807a3296fb47fdd273f73b99a5a0","impliedFormat":1},{"version":"d406ad610d04d113d8c69416a5aa26f174bf1570d182d7c73096a9e1f2cb1cba","impliedFormat":1},{"version":"d749a6e24166422bffef5cd388bf2f986d067d62fe66e8a1ab628c5069c1b384","impliedFormat":1},{"version":"c845d06b50fe5f2d76bd13051d894095ef98e048887f108b9cee2d2abc4c9c6a","impliedFormat":1},{"version":"257653bdffbc4fb0036931a246537a5d81d3c9c9b67f74a0f5f1d471febe2202","impliedFormat":1},{"version":"44d26f626d55c2722d5a0285a909a16f66dad9c3e848db3ac4630216485b198b","impliedFormat":1},{"version":"46cbe41594494c9c2d8511fdc98e7219cfb6c2210ddba55e2d6841578985cc9b","impliedFormat":1},{"version":"9faa5269ec485f676745e8a606a31b64f3d32bf583855c325c861bce0af71f61","impliedFormat":1},{"version":"037029c10b4e6a96c7878aa91b588f1653d0f966ac83369951d2c8097acec736","impliedFormat":1},{"version":"c6cf9907b076d13e6c905a1b367879e49f1f43bb619d3a5d201d4c7ab86a8a59","impliedFormat":1},{"version":"1334baed9fabf76b1992007b89043c43954fcaceb1382bb9affe975b8311c879","impliedFormat":1},{"version":"7f38aab4ed05fc226ddb167723b05e99fd29cfcddeee20cdbcedf8376ae2c1e8","impliedFormat":1},{"version":"48a617ab7d8ebace5213698848774310b7e7c8e748b5784ef62f92d25b53c2c1","impliedFormat":1},{"version":"01457cda419bf562ddef49f681f8a0aaeaca1022c8f3ffaf218981f9c5675a02","impliedFormat":1},{"version":"8773c8fe2e7ecb5706263407e04bd01e09ade6ddb501c098451f63da78cf1ac9","impliedFormat":1},{"version":"9ef82ffdb668e7284e1d0e786ec47980a8efeb3fc2e8d90b3f54f3979500a6f2","impliedFormat":1},{"version":"22e5a57d5b944ed7d1b2a343ee50b86ab789f54b7dd9c1ee6fc373df80e3ec85","impliedFormat":1},{"version":"6e80a7e6ddf2197a9b4a1777f11109f75c93b729842570c24745e2b99fbbf117","impliedFormat":1},{"version":"20c7c3d47fbb92d3bccd863bd037b6d238701732647c8e1c1b4f2d02fae138f1","impliedFormat":1},{"version":"0afa803cc53ece7f5eec0d8bec0ce87cb397058a358cf10b5d9bda1411c40fc8","impliedFormat":1},{"version":"2fd236ac888c18879ce0bfc289187776f3f72c855fd1fc926395512efad81424","impliedFormat":1},{"version":"a3f80ee274f164aa5fbefa55cb01bfd97c3a0ffeeeff933968a28e2fb712f66e","impliedFormat":1},{"version":"f8179604456cc9146e5b7b466022cc465b3377fcc291855555b86281dd4ed006","impliedFormat":1},{"version":"07770db02c956fc178e41effeb2c59b3c27e386bd18506eead7223e3cb833734","impliedFormat":1},{"version":"42d33042d60563a8d7cb2b4649380f25654df58f3250ea74cf7c5169fcedbac6","impliedFormat":1},{"version":"513e825b3bf415a160cfa832d4fbf73a75183dd4a33aa7d214ffc90a6a567d0d","impliedFormat":1},{"version":"9a969c525dae40e904f53b6fbe2fc0b76ac463fc3e87a4ef90436c22a4af5eb7","impliedFormat":1},{"version":"c59f2df030dbc2bdcc94cbc6bef1c9dca9a18f5a2b62c84512ad8949a207f1f5","impliedFormat":1},{"version":"487ea27e1ce8cc024628113015e56602ab64396f4577da484afffcfe95db5144","impliedFormat":1},{"version":"b9db677d82a63a27b520583224bc18b1e91773a0f614739da58ab66a0c3f66e8","impliedFormat":1},{"version":"929152a2fab5e4aad9699e7353c8248218fa45490577cce8de01e58eab0ebebf","impliedFormat":1},{"version":"83301082190ced6dc739b946a34326534ab203a3c2c7740724160efd451c26e5","impliedFormat":1},{"version":"f607b3f5bbddbce54291c2badb425e618a5f239e596cddd57b06dd1456634425","impliedFormat":1},{"version":"085615f361e0789fcefe75b8cdc4ef127a400767c9f4e74019c1663f1408df6e","impliedFormat":1},{"version":"b4d8e86ecf0b0d83f06184be6165ae626fd4aeb3fe3225d3be00c6cc25a706d8","impliedFormat":1},{"version":"6759a2ec407880192b41020daae2c1903be2db73bcb7fec0e1015f30ee84a565","impliedFormat":1},{"version":"11973eb15e6b177fcd6f7014aa06d964fec1c7b2b1fbfcab2e6e85fd82003e98","impliedFormat":1},{"version":"bd57d6702c0d7815a5fcb38153ad25bbc3de0fc39a77dae594c09d6da9c94288","impliedFormat":1},{"version":"037a786b0989f8e0d075a5bfa251aa413294571d482d13137090ded922e8bece","impliedFormat":1},{"version":"5d0d878b823f464c787027bbaddca7aab64d7da6e9d669a8082ca01b3859c46f","impliedFormat":1},{"version":"1d8f62cb85a9c77ff25469531c1e1c125129ac26ba884a94cc93307024f93a84","impliedFormat":1},{"version":"617d631c1c1553f0ad1a940b644e84d69a904152701c7f7a7c7db87637adee8a","impliedFormat":1},{"version":"f2cc9a0e78e8b5fae508bb70702cc955caa2ece98814d832f251cb23a5dfdaec","impliedFormat":1},{"version":"300d9f1054289b7a6c1f1b8cff72cdde94ef70606bbd29afb45412fcbaa9f0d9","impliedFormat":1},{"version":"99d323858780e3bda96bc5c80500a1b3b6e0839caeef27807883d97400497955","impliedFormat":1},{"version":"b545dbd47d74a604467fc217714e8a0330b1a4a4746024facb1e3f7980ffbfb2","impliedFormat":1},{"version":"33f2045b1c97c2be9b3994d7f08b18922cad2e8b6ed35bf815b947283c34c749","impliedFormat":1},{"version":"dfcdba34d5cb92f6360c9f0f7ca36ebb38fc64336a04347ff0939bac5ab2526b","impliedFormat":1},{"version":"cc9fdd78e42b7ccf47566f6b5dcb41c6c3a871a549d8d2bc8d5b93fd6a4fb878","impliedFormat":1},{"version":"2032e198165a228dd3345eafd22b6a928aa8920360cd6766f73425d72886de96","impliedFormat":1},{"version":"58720570345f8f28906c2307c3a71df535a10f809f46b0124570e8b215ed8c97","impliedFormat":1},{"version":"f135d524f9b489a2c6bcf0c09185722e3acebc36dfd42cb21997a3aedd4fe6ea","impliedFormat":1},{"version":"19c13c4686368f2a1242cf287e841b9f06bd81c76dcb45a1259293109fd97b7d","impliedFormat":1},{"version":"f6b057f37debe9d9b2ec56d4bcb75c0d10aeaa644052e01faf96b601c0cc3e36","impliedFormat":1},{"version":"72b972dbff25f1a60f55716d2b9077bb707d71bbb162170e8a9a98bdb2d0f6ba","impliedFormat":1},{"version":"d1bd6ab67bfd8ae3b9975bbe5219e797eaeed6e6f2be7dc85879aaa13a41c869","impliedFormat":1},{"version":"4892b0ba83aaf32b778aa480bcbc5c3d8acc75a6c057512d540b1113320bd6d6","impliedFormat":1},{"version":"f2f4b9d5cc9c6db53bdcd5ca21fa1daf0fe3fb69791114871dbfe2d01ccca337","impliedFormat":1},{"version":"dd0ca4277f3041d55f0f522cede5615f2a4d6bbc77bcf01ebd14ea7bb25fce6b","impliedFormat":1},{"version":"a559c0cc2ca7eb5a2917c3b24ab48786a109c453016e2a86a080bd2d0e4a5465","impliedFormat":1},{"version":"72037b24ef9fd21f9a7efbb96608c08b24e1491196ca17d20a2b3095f707997d","impliedFormat":1},{"version":"3c31d9111e5da84328c0a4fb31c8ca2ed95b1fc9e4ea67427cd3368645d9cee5","impliedFormat":1},{"version":"b0f7f0a0d05349e33475388fd9b01a1957ad9bd22c3d1dcfa25e4d008cc6b9e8","impliedFormat":1},{"version":"3f21a8db690b7fa927f0d07c7224b9434ed81de12f66e6886625b649bdb69f20","impliedFormat":1},{"version":"1f96034ff2d46c9fd80657cd11d8fde1f02590f1349a5d5c3550b670a9d33edb","impliedFormat":1},{"version":"072fc776280792035018180c70399f6c9d9355b43b5fd434d0249b40cb0ad01a","impliedFormat":1},{"version":"9bee2787f43abddd2aed84b875858015413178644757411cddbb5cbdab4f8c8a","impliedFormat":1},{"version":"6a40b2c4735963184f98fc2d084e868c881ca7953a43dd88a23f14e11fb32b50","impliedFormat":1},{"version":"b0afaca54d9d359229d73424d7777d468d78e0573d25264c26427bd39e56c3db","impliedFormat":1},{"version":"30559795522d378908e9b3f070cef300c95155afc8dd3f35c2165a76ee507a64","impliedFormat":1},{"version":"48a443dd2f0f1f04554e1f90db2f210410cb524b3dbab4ff555adcfe5aebd2a0","impliedFormat":1},{"version":"11477531cb4cb9e1b5b15472c779925150a08466f3fa825e40ec1ee284f52c9b","impliedFormat":1},{"version":"0522f23434980dcd4ab553f200067e0dbae0ba5cec2d89f26ca1e1813a481f70","impliedFormat":1},{"version":"1bf1ccbb06c17b4ec3f93df7461175975970ddc0fe6a7c495b141282370cb7db","impliedFormat":1},{"version":"bc0002547b99d2aa1b9933f338fc606576d59623582cb5fbcb8ad764cba518ad","impliedFormat":1},{"version":"7bd24befeacba6998a9724159ab62f6091fdfa1f5d32de246e416fae5eb806a6","impliedFormat":1},{"version":"376c997e61781ac2dde3227e2bff6ce4291b0c34257906e86f46299954e3253c","impliedFormat":1},{"version":"b4e33a56a898387a2018a32b250e8e79aedc6dad92100abd27eb023a6e862ce7","impliedFormat":1},{"version":"2e2d1cc13792f36dde1d5f95c4d9aa2de986dfd823f276627fbeef80e4337828","impliedFormat":1},{"version":"f593296873ca5baa78932147753099085d5d7b897bda6d9a3430d829ee628264","impliedFormat":1},{"version":"5554e5e4c78aa9110a0172d6d110b9bd687277270d8de755a45c63f8d1f4cec3","impliedFormat":1},{"version":"bfebb37cd1510fef4a937fceaa4a614ebc9969b977db9adfada4ee7a78fa7fd3","impliedFormat":1},{"version":"23d328d8429b8052f20b55d184defbaab61836c59203855f559fd1d4298c3efc","impliedFormat":1},{"version":"50334f0d3afe55cbbeef6b568f2cdf5ad0e3d3950644f3fede699bc267f86940","impliedFormat":1},{"version":"88b6c73390961d7218e2da7f8bd25b3e056294251660612f6cfe7495ac2334cb","impliedFormat":1},{"version":"721cde7f28730bd29c93e800a08387dd093842ef0d8e210de7f0da6941cd2583","impliedFormat":1},{"version":"1cea9a8fae5555348bc7888fa592bae6820148e868487556940769210176ed14","impliedFormat":1},{"version":"aa9f300f1a791fddac2985d057fe887ecaaf0cb905240879b288f720f35f6efc","impliedFormat":1},{"version":"a0c4dd4522cb4599cd5a58558bbf176a1613642183c6fba82aa11ba0fe7aa7cd","impliedFormat":1},{"version":"f51c2f27d205519e5d02ef510c7551d90ce779db3074537c99159212a44190a9","impliedFormat":1},{"version":"997ac72863b267e7f728bbc117fe58a30025dd27d7bc65097009db07954c13c3","impliedFormat":1},{"version":"f64860f62232c933da4cf59bfdb1df22db2c3d4d5f7b9781f75fd3db9679735b","impliedFormat":1},{"version":"e37ded0703653f2636f58232df6a7de1342ef5e21b45efd99eb90569df77f028","impliedFormat":1},{"version":"dfa97f3939aaec958860f4d8c5f3b05f3891e0873b6d1eb0c78ff0e7c2294ad9","impliedFormat":1},{"version":"27dc020fcb8b3cbba32cc64d6e6b988beaa2d741e1ff755f2918cf14efdba232","impliedFormat":1},{"version":"b03c0c293c1cc7b36c440d6a59bd7fbb073b4b2cf815e096a6e62bc05f626bd6","impliedFormat":1},{"version":"82fb6f995ed49bc45d0ea6f652a780136d98b57acc3e7cbbf154dd576c7c4e77","impliedFormat":1},{"version":"e7463c07399e6d09a169230bef69c4eaf3dc8ef91b4332eb3162a64102fde314","impliedFormat":1},{"version":"4c43e6719c5f3b9fbed7bce5a83b1a785ed89ec6d4196c1fc6c943e88dd2dbc8","impliedFormat":1},{"version":"d9b697e74bf73e5a437e1aaae19df43985ddbf5c62e1c2c45a759f72cee833e1","impliedFormat":1},{"version":"d1a49b6292b1c847c874f0c965ad13801099a56e30665e7b4e78280c4d8ca206","impliedFormat":1},{"version":"3a2f360689b6533d617158201103299f7345d657adade329cdd52f2c92f16fab","impliedFormat":1},{"version":"ad0e633f2a6f5b83798f8165a6d8391f5c01d9f99db61e43f04f4f9b9f858ceb","impliedFormat":1},{"version":"8b77874a26af8fff6b151877b98afc8457cd5987307311df87cf51dbd9363eeb","impliedFormat":1},{"version":"d6b856f1673dd173f1926894a3546d9acdc3f1780c9054d76abaec41bef0284f","impliedFormat":1},{"version":"08186e8642f8007ef9e1274b44f0f87aca68174a530b43efa4c68a11d9fc94eb","impliedFormat":1},{"version":"0a8dc82f6b12899b45f7fb74b10c9510906becb638843da57edec07695141008","impliedFormat":1},{"version":"11f6a43647128c9e115e234c48e6e147af609f1ec27e633360a78a4ed5e1df7e","impliedFormat":1},{"version":"1c570afa7617d7665e85dc781a95441a85488975075c99a9c7b87727b04c8258","impliedFormat":1},{"version":"0a7861ecdc4e37cc3d51a1e9743f1b45d1b6f715cd9e47204bb17893fa097ed4","impliedFormat":1},{"version":"3e7e1445798612cdd78fb209c4fa7a782ad317ac4e60bbfb795253c05339dae5","impliedFormat":1},{"version":"e4bdef13be2c488e74e8109a8030a44b7ebb360bcb013de74ab7087d77801126","impliedFormat":1},{"version":"b4ecb1903f2e45a2fa191a224cdd1170ce600399a7c6901b8fc3b11b777c91c4","impliedFormat":1},{"version":"069b3df8e16129d67b07250f3ebbf8740e75ebdc18d8bbe9412cf237f9e2f69e","impliedFormat":1},{"version":"19c0ca50ad5a482de0c76a3ef986d8bbcfc6d6a5c7b3e106275d0528af82596a","impliedFormat":1},{"version":"da0a364906e719793a0920a42fa3df4292ecfca426959d21237b3fa31339d82d","impliedFormat":1},{"version":"b2569060ffe1b0790cfc62b8bccc8334eba26fb8713702eb11b8cff918a98e8c","impliedFormat":1},{"version":"7003c4bbe1700b648bc17589b7e17c28ac568095967e0c8c09e62c4222797a6e","impliedFormat":1},{"version":"5fe6599aaadffb25568ceb9d70ae2122a127c878b3c138efe024a3d11b336849","impliedFormat":1},{"version":"63fb07310f383eadf62f65601380b8d44d1332c635afed72a5c8992469ffb5d6","impliedFormat":1},{"version":"05eb06d56c5e885c24fff5fc3b40dfed140ca9e7a60a98a5311a9fdfaf4a49a0","impliedFormat":1},{"version":"28984704fdba384cdd2b01a61433913e292b739913b3200a4f6f3df13105f0d4","impliedFormat":1},{"version":"09938f0ed72cd61c31e24f3b788a05e26cfff87a98d5013c54cc9915c80275d4","impliedFormat":1},{"version":"3781a4b311844ceb617842608e6d048f74cb709d6ab2e1176f9feb82dc1afaca","impliedFormat":1},{"version":"1aba58ec47bf19eeaac94305f9bc4425ad196d33bd92a9a424a1db9f077bcc12","impliedFormat":1},{"version":"234cd8e6363bcd5a64898dc722d8457013e1b35cf2bc2afe365f109661d05620","impliedFormat":1},{"version":"cddca5accb84604b36f9b74a71dd53f3108f8f39bbafd898be45ad28a222de62","impliedFormat":1},{"version":"51d0039abb7c6ff656e313ee9a3bd3452a270c3e2dfa4f3ec0e40526c12c6015","impliedFormat":1},{"version":"eeb7395bedf9736bec2819dd86bedc8ad0e905d7b774e4065d2903951199f756","impliedFormat":1},{"version":"73433dbc16c35e1ab13dd6b219e86763c3598f783e29fb6622d63bec04dc2001","affectsGlobalScope":true,"impliedFormat":1},{"version":"51bc6b683e5e0fe8a295667699effe37352272da802aed71835a6910081d8ab6","impliedFormat":1},{"version":"b3de20033351dbf94132f8a802632c3fe345224618f17c206d99cdfa5a928323","impliedFormat":1},{"version":"55d76ec9cf8fc0ed47ff5a600d3f40d8b564fea9f721932f2bd38ea3ccce6dcf","impliedFormat":1},{"version":"3fa44bf807dea33f8a4ec1a0f3927acd44c9facb93ae8d536572dd955fd726c9","impliedFormat":1},{"version":"606d8701994fe161c72df227bec39dbc64d977d304f7fbf32dfd99c671c4232f","impliedFormat":1},{"version":"d69730e27fe581f294709fc1bdd4527d54f9f74f55276b4d0f6102db3278a4c8","impliedFormat":1},{"version":"664101003d9b081a4d3884bd81f70ff06d25702b42ab9be8ae6568d16560b234","impliedFormat":1},{"version":"48838a4acf80b332cc8575371eecb20a4113d1c93ada4d29a73c8dc646b248ee","impliedFormat":1},{"version":"97217e52ebbd06f5f6ca1a16977c03031354e84c0e3c540df19a914d1a8cc341","impliedFormat":1},{"version":"e003a1899c8d04a09508faf07215205acf03aee89badc3e453fde9d2b7a33125","impliedFormat":1},{"version":"c489280e64db9fc86d05532eaa43bcd5a930dc944425032d56b04165d9f7c223","impliedFormat":1},{"version":"4823403b994583746a9383188ac1970ccc50dd3caef190903d1a2fd86d833d93","impliedFormat":1},{"version":"ede7b33d45b279d118c8852d392613fbbe7f4a442781b4dc060b5c147d7b1d0e","impliedFormat":1},{"version":"00c9624e81714578d4a7aa92e837c64dd4bcbc8a19a38934475dc640a7e8f00b","impliedFormat":1},{"version":"36210ceb4f5f647e403f987fa667dd417353f887c4d78f09a92f3a468b0229df","impliedFormat":1},{"version":"59be79ea4da9b24ffcc7141e37a405b9dc6442c8001a56e5d0e3c1e0b6fdb88b","impliedFormat":99},{"version":"4ce284ab62a13bcdafcdcb4cfb700281f7743ddf33367687c51dd572afa0a0ad","impliedFormat":99},{"version":"3d8d6c55ce65b4817f85702b9c719637f270da1b953aba1f95316a95943f412e","impliedFormat":99},{"version":"15234d71a13e57e5e0aba9417b0488bb00bdd066e772de55c3eef79989c12019","impliedFormat":1},"7376fa8bd674ba2aa809ede1f87f88a8d2aea10016276ea84dfa8dd7fa6ee9a4","0d1b53af5276e87eb970fb4bff3c3bf4ea37537ff7a5780170d4e937af4e2ae0","3652d83abacddbc4f04cbe1378007b34508bb6bd7825629089008a2a1309401e","b8bb32c8f62f5f78ddb9a09831246702586f4641999d47f089b49f7ecd793ba0","2df9ddc10a156e09e0fa40c6637fe607590a8d35d0eaf394264ecd6ace19e5b8","994337864889f4f8ad96996d98eca24d095c63e55a97ee3b4cea2a5337ad9209","ccdc868a5133aaa912a5ffb690d7983633f395fe0f4652ec503955b0b1d9cab5","636675e9282f348e3451bd9d1cccb829399cba8a266fc177cff4386d86e090e9","349f6ccb35828705b724b089053e412a0a23da8c4023737cb8019bedc293f5ce","7866f34b44a79ef6e1eaf3b944ae5e14209169856d134561dcfc29601f51f689","5b9eaf628999672fd45ca4172886eceb4756cf866b3f6b2b65a567e819739304","8459cf913f9c6dba0b3b209a9516398365deff41df174c9271525b34a155ef34","323586f0f9824ecdb63b246aae9ed5332a216fe2e80cbc9e477088a4239fb17a","d5bbe32c1cc81de34eb0841b9b70b6e2459deb7d4f634886ad3fe88ef4fee35f","8220be8621b66c65677be6435a47e8cec335a0d5afac5af2c04b6df6264cd7ca","55e658693f294556c1bd39eaf8cd8aed791dee8d18a5f86a0be1177eb3037265","ad58e2af70b0e4bf705c1673e7318aa1057895856f18aed84708eacbb94dcba8","4e867bfdc36147cd3cba6dae6d96a9b708c8b53a6a9677b73d5ffe1df4fd7e00","d096fecf217828f8eda3dd5e160982e621c595032c43c395ab502f11cfc66024","995554ae8bbcbaaebe1104e3cffa969291e2306b99aa49014f447b5116d92714","e4a31f78a81d3064419eab36f0a6931b37fb94ad1e4eb8bf0542efecef8aaeab","ba23f0bb4a416971ec98e89132a68bf0fbaf006380b0ed7ba111f59080f6550c","40309cfb52d4bd08f653a520ee58a6004c0076524cfcd98c3329a23c1b4a96f9","19f4827cad93b86acd5c5dccc423c6df38fc4e8285f196b7fa28f56c953631af","2f643ae04a747698d7166fbe91034eda61eae5cd2f43d90534b7196157da935b","b01d1fd6c44edb7be88e9eb7e25c606c6f75e9b69adef54d6ba661d646a720f2",{"version":"105ef6bce4f856459d6147d28bae326ae651cfeeffc79ff86f9e3d2dc0ebabae","impliedFormat":1},{"version":"06cdc2f8ab4cd0f631d1c181fe70f56df4dffee356f1c4825324ffe4565b06d8","impliedFormat":99},"f5d4119398797c222e7eac3ce4285403b87620d7f04e69af16bc2b6c6e45d65a","36ad1e69586191a308df9ba8ca2a22c40d4de29c76b9767627f34dd3f04481cf","9b1541dcfde6a0992f4f0fc7b2e8cfabc97770cebc5cfaba61b852ac887c3fd4","3cfeef57b919d452d501e538d4e2f5d62914ff06ccb6ac87b873efe67264545a","7d6e218e7c35bb7cd1ca1c963b1d71f4dbda9838906117a913c762a5faaee6c0","0a738f783c0a1dc30fdb4ab4afbabc41a44a22bbf9528b7e100d9635719d1aed","e096ec6873ac836a3b305f2af92ba3034f33a1e71221608a1ecb22238296d157","95aa637b1f8540de101f3283ac1b783198a00981e998af442eaab7a48136f152",{"version":"c1424847f8905ee22d15ce094f27ac27a0b33801fec847dbaf9b1239a5c2abd9","impliedFormat":1},{"version":"222ca30f5d8caedf7c691abb6ec681b4fe9d6a6008418f0c5f27ca64ee30e536","impliedFormat":1},{"version":"411203926c577c696777e7e9f3312c3c2f02ffd3028d736aa6127d7ddfe55d51","impliedFormat":1},{"version":"2c378d9368abcd2eba8c29b294d40909845f68557bc0b38117e4f04fc56e5f9c","impliedFormat":1},{"version":"9b048390bcffe88c023a4cd742a720b41d4cd7df83bc9270e6f2339bf38de278","affectsGlobalScope":true,"impliedFormat":1},{"version":"c60b14c297cc569c648ddaea70bc1540903b7f4da416edd46687e88a543515a1","impliedFormat":1},{"version":"ce6603fcee6c000c0930d500060b7fca478dcef634196c6c27126d78ecd8fa1b","impliedFormat":1},{"version":"3a27bb0c62815883459287a792ea8c14262ad9c49f7aebbfed02a370111310c5","impliedFormat":1},{"version":"0b97d15d1426be92466d166a8ffdb5fd6d3455ef1c9345f2d22f46939106b3ec","impliedFormat":1},{"version":"95f68773e13bd8cb5ea55d2a62bd6638dae5046ee42a0a2795730cdc96e4b314","impliedFormat":1},{"version":"89eeeebbc612a079c6e7ebe0bde08e06fbc46cfeaebf6157ea3051ed55967b10","impliedFormat":1},{"version":"0374140d30daf800e4e579a04f0cd40abb6b1909fd04b7e2b1a151f021cbb50c","impliedFormat":1},{"version":"1e35ae1a5e62238a4e72e2cf55321434dfb95e5b4f613c84f99a1415327b875f","impliedFormat":1},{"version":"f734b58ea162765ff4d4a36f671ee06da898921e985a2064510f4925ec1ed062","affectsGlobalScope":true,"impliedFormat":1},{"version":"55c0569d0b70dbc0bb9a811469a1e2a7b8e2bab2d70c013f2e40dfb2d2803d05","impliedFormat":1},{"version":"37f96daaddc2dd96712b2e86f3901f477ac01a5c2539b1bc07fd609d62039ee1","impliedFormat":1},{"version":"9c5c84c449a3d74e417343410ba9f1bd8bfeb32abd16945a1b3d0592ded31bc8","impliedFormat":1},{"version":"a7f09d2aaf994dbfd872eda4f2411d619217b04dbe0916202304e7a3d4b0f5f8","impliedFormat":1},{"version":"a66ebe9a1302d167b34d302dd6719a83697897f3104d255fe02ff65c47c5814e","impliedFormat":99},{"version":"1801a58e8cbd538d216fbea6af3808bd2b25fa01cf8d52dba29b6b8ac93cb70c","impliedFormat":1},{"version":"81c4a0e6de3d5674ec3a721e04b3eb3244180bda86a22c4185ecac0e3f051cd8","impliedFormat":1},{"version":"edb97ba9b21b555d6d5a0ed9b977b23b9694f759dc079f88015658c7493a0744","impliedFormat":1},{"version":"322f70408b4e1f550ecc411869707764d8b28da3608e4422587630b366daf9de","impliedFormat":1},{"version":"7261cabedede09ebfd50e135af40be34f76fb9dbc617e129eaec21b00161ae86","impliedFormat":1},{"version":"ea554794a0d4136c5c6ea8f59ae894c3c0848b17848468a63ed5d3a307e148ae","impliedFormat":1},{"version":"f7ea3333fe96dfc70788566470bd7be32c0c0a29b6c112a181a7712cf0d813c1","impliedFormat":1},{"version":"10b06ec08657d910d842bc0b7440d28d32cf95882d68642b9993ecae43967e40","impliedFormat":1},{"version":"846068dbe466864be6e2cae9993a4e3ac492a5cb05a36d5ce36e98690fde41f4","impliedFormat":1},{"version":"94c8c60f751015c8f38923e0d1ae32dd4780b572660123fa087b0cf9884a68a8","impliedFormat":1},{"version":"e451e32b6e0d25ae9d5c9149d2cd4afba4aec07874b7282b27e7f1e27cb8286d","impliedFormat":1},{"version":"8c37ef5d1f90530375bb4c1fee185f0e0c6b253d071c2310b09a4efc52a83cfb","impliedFormat":1},{"version":"c5b47653a15ec7c0bde956e77e5ca103ddc180d40eb4b311e4a024ef7c668fb0","impliedFormat":1},{"version":"223709d7c096b4e2bb00390775e43481426c370ac8e270de7e4c36d355fc8bc9","impliedFormat":1},{"version":"c40e015cc1920a5e8ba63e6bbbf52f6d5a0c7c63a550848a4cf3f03e699efc81","impliedFormat":1},{"version":"b8bb8640e7eb594ad3d4e459d2478b3dd34dfa0b4875b31f89fa79dcc034e10c","impliedFormat":1},{"version":"d5e806fbb24521445d9e5b11bc3fd626fdb2c0b11d3a8f96f9b68ea402cad9fa","impliedFormat":1},{"version":"953440f26228d2301293dbb5a71397b5508ba09f57c5dbcd33b16eca57076eb2","impliedFormat":1},{"version":"fb7e20b94d23d989fa7c7d20fccebef31c1ef2d3d9ca179cadba6516e4e918ad","impliedFormat":1},{"version":"8326f735a1f0d2b4ad20539cda4e0d2e7c5fc0b534e3c0d503d5ed20a5711009","impliedFormat":1},{"version":"8d720cd4ee809af1d81f4ce88f02168568d5fded574d89875afd8fe7afd9549e","impliedFormat":1},{"version":"df87c2628c5567fd71dc0b765c845b0cbfef61e7c2e56961ac527bfb615ea639","impliedFormat":1},{"version":"659a83f1dd901de4198c9c2aa70e4a46a9bd0c41ce8a42ee26f2dbff5e86b1f3","impliedFormat":1},{"version":"a66f3da7de689a5879af9501bbae12a28b42194e0a364afb7a6d395b3e3813c3","impliedFormat":1},{"version":"acb93abc527fa52eb2adc5602a7c3c0949861f8e4317a187bb5c3372f872eff4","impliedFormat":1},{"version":"64843c2f493a1ff3ef8cf8db3cff661598f13b6cb794675fc0b2af5fdb2f3116","impliedFormat":1},{"version":"0e447b14e81b5b3e5d83cbea58b734850f78fb883f810e46d3dedba1a5124658","impliedFormat":1},{"version":"ad84fab1fe3609c3f29b8339061ea44ba841558dfe56e23e2d654c860d2a9fac","impliedFormat":1},{"version":"929939785efdef0b6781b7d3a7098238ea3af41be010f18d6627fd061b6c9edf","impliedFormat":1},{"version":"fca68ac3b92725dbf3dac3f9fbc80775b66d2a9c642e75595a4a11a2095b3c9a","impliedFormat":1},{"version":"df6251bd4b5fad52759bfe96e8ab8f2ce625d0b6739b825209b263729a9c321e","impliedFormat":1},{"version":"245d13141d7f9ec6edd36b14844b247e0680950c1c3289774d431cbbd47e714e","impliedFormat":1},{"version":"4326dc453ff5bf36ad778e93b7021cdd9abcfc4efe75a5c04032324f404af558","impliedFormat":1},{"version":"9b597900f033ffe72808c6c39d62142c920499e51748a247d2f9dc16cdd3bcd5","impliedFormat":1},{"version":"2d1e8716e44417b352eb01e47075306d9f555dcebc92e33daef1eeda6f2cbe9f","impliedFormat":1},{"version":"64aff4bce69cccfd193353af05e8b3ae3125c009969d2dda49072ec297e2fc82","impliedFormat":1},{"version":"f93be7a16a1eb7f94eb6cb35f38fde4f0b1d1d0db2e73a01d0359f9977303804","impliedFormat":1},{"version":"201b676cc58c0613185b9c7d85b673ae372d861128a8516305614b4aa7fd8d6e","impliedFormat":1},{"version":"3f3526aea8d29f0c53f8fb99201c770c87c357b5e87349aca8494bfd0c145c26","impliedFormat":1},{"version":"6ee92d844e5a1c0eb562d110676a3a17f00d2cd2ea2aaaff0a98d7881b9a4041","impliedFormat":1},{"version":"d65d0a4617a365090b075ef495e3d3bb2d3cbd2e6f8f6f9aec9416f3bab91ef2","impliedFormat":1},{"version":"6052522a593f094cfee0e99c76312a229cf2d49ac2e75095af83813ec9f4b109","impliedFormat":1},{"version":"930dfbfe1f67a5ee16f8243347fc753b9d3effd23d46ab177d714737f6404806","impliedFormat":1},{"version":"a63ce903dd08c662702e33700a3d28ca66ed21ac0591e1dbf4a0b309ae80e690","impliedFormat":1},{"version":"2b63d2725550866e0f2b56b2394ce001ebf1145cb4b04dc9daa29d73867b878c","impliedFormat":1},{"version":"2bec110d94660129fbf40701fee14c29e44e239183e01c10a9ccd6fb92858c54","impliedFormat":1},{"version":"f46299561742f907d0de2243d505bcbaabb0289663ab6ab57a68353de1cb1fcc","impliedFormat":1},{"version":"b1ef93c18f6704b4c6b06add93d360105cffccc1bfa54c34c9e90ad5858fdfc2","impliedFormat":1},{"version":"13b79c05938f76206d77d5bbb5552000860e5e6363945512ee0e355553443785","impliedFormat":1},{"version":"6e2d2b63c278fd1c8dd54da2328622c964f50afa62978ed1a73ccd85e99a4fc7","impliedFormat":1},{"version":"6795e7a6e26d3d0938e0963f5b340bdacc1ffbd22c78786307126b6595bb63bc","impliedFormat":1},{"version":"f642b9a36789a744a3f269de516bdd08675bceda13ee45d26bc0302e9ec2dabe","impliedFormat":1},{"version":"6ce50ada4bc9d2ad69927dce35cead36da337a618de0a2daaaeeafe38c692597","impliedFormat":1},{"version":"13b8d0a9b0493191f15d11a5452e7c523f811583a983852c1c8539ab2cfdae7c","impliedFormat":1},{"version":"a6369c42700294860db09204c2fb17ec1eee762e14a061f33e2ee49773c20c6f","impliedFormat":1},{"version":"068f5afbae92a20a5fcd9cfce76f7b90de2c59a952396b5da225b61f95a1d60a","impliedFormat":1},{"version":"9474dc43d3f9115ee8ac0b8c6dcfeb62bdc961d07ca9eb1c66e3acedc6533b56","impliedFormat":1},{"version":"a99bbc08536893273b1faa9c07c59c862f0fd363475a31d0c4b7bfc6df170c35","impliedFormat":1},{"version":"cd3af1d8ad8ceec924fe3e3c333153b83653e705bff3786be6251b594cfb9e2c","impliedFormat":1},{"version":"0d364dcd873ebebc7d9c47c14808e9e179948537e903e76178237483581bbf6c","impliedFormat":1},{"version":"f19601e1d6b199e9b2458e470c90ed592f750950aad6683c0299e41e65546e4a","impliedFormat":1},{"version":"14e655243975208ff46b52e65b9b36e3225dc610ffdd61afd8878565e2b62f3d","impliedFormat":1},{"version":"7e9dc9cc4442f044c87b2edfd96c41f5937a8d824497278ce4885de21eef434c","impliedFormat":1},{"version":"ec25e4b3f4c5e9a7ab3a135afe4d3c8a60f17e7d2fc9f4b2e852f72adeae181a","impliedFormat":1},{"version":"b271f2881c9be3d1f91169798aa915c924e93c18c83abbd1c04fd48e6c2c2fd5","impliedFormat":1},{"version":"d6a77e910038fa82f19a9597f6c491b83af8245275435ae4175ced9451c080a6","impliedFormat":1},{"version":"a7b5a6027406b4453c50837512d61283d325135b84a1001ccacc3c6836833d88","impliedFormat":1},{"version":"50ff7a1059e31dd905ca88febd9ed1add4c7c3ad09af8dca78e9cf5be4654563","impliedFormat":1},{"version":"e0adf520aab77e560e5cc0b53195c43822139260e3f199fde52f192605ec31cb","impliedFormat":1},{"version":"5817942aadf0bf6781e68c87aa30ec236268c00b87150b79b7dea6c1cc5f7ea7","impliedFormat":1},{"version":"164718a6eb0e8577b942b6270169ae30f4bc32935ab0417ac0a17ce450df69b0","impliedFormat":1},{"version":"cda585aca02973f81ab27e1418f31aa2880dd77fe2a5ce20973303a7cd1b2a41","impliedFormat":1},{"version":"aea472c03e15cef7104857527590a31bfe4a9b3ae704b3ae4fee3c69e1d7ade2","impliedFormat":1},{"version":"4edfc4848068bf58016856dfeb27341c15679884575e1a501e2389a1fea5c579","impliedFormat":1},{"version":"0c3d7a094ef401b3c36c8e3d88382a7e7a8b1e4f702769eba861d03db559876b","impliedFormat":1},{"version":"8b7753003f30d1fb8644cd8d76015cb2a376e7b5f826f7a8f684664587f6a9b5","impliedFormat":1},{"version":"73d969b21f1459ec4bb43cfeb71cf234fc49facdabb084a01a28834cec64dd33","impliedFormat":1},{"version":"5f9c65257f5193a53f3366966fc4d700d5a881f0961b99d0d4d7e9dbe1959e22","impliedFormat":1},{"version":"22dd8e5c7d9dd12ad75a75a061d220db44c6987396f4eff78abc568cc0ec741d","impliedFormat":1},{"version":"1cc8bc6838f2c178b56fe4e56d4de6595a75c68501683b58b9556bcb3422c2f8","impliedFormat":1},{"version":"ed051eebfff8a5f8c7d75961c050fe3d60df8ce4fb227e081714b8748bec6f37","impliedFormat":1},{"version":"97355dd6ec9ce54ab5f6b339051eca8e6e5d8ad62d1c5c4f188f4378e1a001a8","impliedFormat":1},{"version":"e86d022839d73690b432cb2ece668500e24b69e6957ccd8ba32200e44182c8b4","impliedFormat":1},{"version":"ab3a9d66001cf2712edf2b282c7856ee1861dc2048f2a37996d4c42cc0416a6d","impliedFormat":1},{"version":"ab8334937b064bf0f5c3243286326d24413e629f198b3158f52b13e26b3904e5","impliedFormat":1},{"version":"2d113be6ff7bd8ebf7d18dbf6f461e52d30d75ee36442bec2b6a6311c4b555d3","impliedFormat":1},{"version":"2717b1f95b59c6675e176bc9ef4f487124470aa2f231eb6f40b746637d3d0c50","impliedFormat":1},{"version":"9f37b064a5929d995c84d1c8fe1c124c26aa93912574354ff995591eac262a49","impliedFormat":1},{"version":"7b02a1a4710318baa903afe624abcd067287182b0ece13bc2739657cd0427811","impliedFormat":1},{"version":"c9784daad6f72867ebcdb4c12c03c98e44d8e530e1438d468dc13bbc2e42e9ce","impliedFormat":1},{"version":"edf2eebd14a0efc50d961e8d38c450bc9fdd183534cd918ab5d39b99f9619fa3","impliedFormat":1},{"version":"084a351b9fc6c3b829b1872ca216bb1f6fb313c20ac930fdf11656017d357dd4","impliedFormat":1},{"version":"c56987e3656299b2c87f2c0c4ab95811c8dffeda15ed89668bbe239d1eb74655","impliedFormat":1},{"version":"deefccab0d0412dc815ebd44844d640845028e4aa2cc756702617d7ff18e076e","impliedFormat":1},{"version":"af31f37264ea5d5349eec50786ceca75c572ed3be91bdd7cb428fdd8cd14b17c","impliedFormat":1},{"version":"8d56fb4ae16943117591d60ffd52f4544affc46c44111b492d4f2ab51ff5268c","impliedFormat":1},{"version":"40683566071340b03c74d0a4ffa84d49fedb181a691ce04c97e11b231a7deee4","impliedFormat":1},{"version":"02631c985f434279165a322afdf222a825ab8293ab5085b694593cb92c6f273d","impliedFormat":1},{"version":"e885933b92f26fa3204403999eddc61651cd3109faf8bffa4f6b6e558b0ab2fa","impliedFormat":1},{"version":"d6809c6b3195e1a999453512d08c9a612b655d1ec9aea128c70dc78a522cd5e2","impliedFormat":1},{"version":"a78933feaa889d6430bae4ab579a12c54808037f20617f4bb486c24f5870516c","impliedFormat":1},{"version":"5aecfa9c615f131c3d927e48824a7383ad8709b433fb447fa766b712d28d08aa","impliedFormat":1},"3e2b8e0a3443fd2bb8764038b6f7f7f5434db7d6763e77a36b1f1ffc2010f233","4ffe849d44363b6da07194a06d7381ac74e3357eb7fae9cc06fe52945d0d98eb","2ff3c0b3fcf1ba528ab252cb421aa95ed3cbdc0fed9fbb9676d2f31c3451d4d1","e03b15bc90198aa96d05d0b08786ff1ab7ff2d6d0d4b8d6580a34f1ae4d42fd7","00e935534dfd5ac8261043cd78c4cfc8ce6984858be1b1bc7bc525331f4ad9bc","89d54ee5dadc73a058eb20f4c28f0e1ff25e729d460ff7bc05d4131f22bbc849","29b24a29ab115e9a82613410acfa398f693db5d4120c5dde5b28377b4d8d7900","4c240192263b05eb5956a5ec57569df3d51763bc7dd809ce9b9333d60f06fbd7","81e7ff63fba7f9fe0416cc7a6ef746e32b9e836d7b22946fd4b59e78dd1d3632",{"version":"39875f62f78dfcd829f2d38f7b06e8a8d5e39bbb9487abe63b81b41fe3b58c04","impliedFormat":1},"c574f41547f71215f13ca62f8973b02a44f35689493b7e976cdf6646c1de2d6f","2f0123aa65da6d81630bbb8be3e5fd06a3ad6cfc8703a7d26f48a7f922a03ff0","509be954015e228942f6e530c11386f01bc8a26420c5d11fb032a593db4f9484","e2b9c85e5ca853d16bcb8a5b897b995c08aab247ca33c6ac6088bda396da1a2a","2c65ddd29fd4d568f78916260a310b685d4fbf35cb11b1ba9da8ab8eaa6ae3a7","d0ad5777ddb78a0c975a4da67d76002c4921490740ae29e659ba5262e132988c","79488c7ec5bf345f079915305a713b5ae2f14c9a9b836aa95a8b746633af57d1","6332bcc8cab882a11b508e1c41fd901d546aeebbeca90b8e786de87a41e6c6a2","7b1fbd9f2cf87ec46d759ce1c251601802edcb34a6f808d7acf232a2f745a8c6","ca255d18c301498d759c9dd4220eb085527851dc6c87ed76b2dc1fadb8c82c82","62c874084a419600384353ab974039d640547f2300092752c265776a8dc80937","92764f29f81c285d53163a12e60f1f250c4f1fe7a05e151ab737e7549fb019ea","28b37e91b4e94b6bdb7184d12d9d96efaf6eb36a11032767984898c1f64c79d2","29f98669fc83b1f44cb3542dd14728683709a7c2cd3a8e3f871ba168e7795837","0c1785df16d0639d439f289df2dee01143ca91450fe60a9658f3e62497cf0c6f","ba626493bcd736ff4eaaa8f3fe93a531f4c4b275ebfd9e56913c02351844f200","d4ffa1bb744c4a60aecce5a92c9f45d605eb7a237f9eee367f7565b756b6dce7","9514642cc2740956d92f43d84706d9c09ca053056dc8ed338926776f85953678","f3fb7d02e8440cf47d0b519772abc16fc77b847e592328e16445855b78a89e06","277d7909df908f4bb7454be7dc9671d79916b56596ea3062814eaa4a73df540d","220c8454dffdb212cd89e83a539b87874d9c9dd66ead2dc8ccef6d652e155db5","db30f0f22db451eba766297a2d15820a0924f3c4b1cedb53189417f8404440c6","edde5c477b23cf223e083dd6a05b922926ac38aec3f98d7189ff10463db050ee","c037c3d8ca6f7552af3c937768071285f3e3a2e29f4fec8ee1495c086d6d8eb1","99b3e54bc54c01d08b257b451ada1d7c844dd8509486c21b03f72245191aea1c","4a9525888c0690adf3ab1d7d21ca8d8a08149d80fa296bca457307e9a758c559","8fa6ae7f5923823aea04a402f1f134f90fadb142eff0df04872e1a16008ae5c8","93cef11335bcfd2b663884c77d630af7f3f063c13e6456d1debfded37e161a1e","1b2e31b1dc1b50a335eaa05940fb74f7b94978e49bc0df33e85c19baf6ef5192","9095d0aab4bf1e3b7ebadfccedd7ca92acfbaa8635c6c184cc9a8169f6f5df06","07b52863f90d5f1110d5dec90ee67a6870fa6095d659cbd7a38d718f31734ca8","0be1b59c1232ce8f327d2b67ebd7909ea189d8605770e5fff2542f851a04f171","ebae9075dbb8c9a523570ed6e2062b7a26731829c77fe827df519e20d9dc9ba1","f373c4de0c06e6eeecbc580be58625d7591341e3420e1a7b7d669f18972018e2","62a93a4107284ea76e57a1f8e53554c7a63ead464ffc1ad95d78a6d91ed18d85","30b220b527a4669a1c656d483af32f5810ff399cf35f457ba17e3f08934c043b","b66b3296e53d027afe51062c94c6fff56afa53b711d2957a49baf3e9cc19ec6a","fc92d891eed425d17f336bd9b8fbe182b6e2d895de97c15d0b8d0c5bbdf3fd15","b28321c4b0fb1019e2da1dd8e1540cbfd5dd36720b4383f118cd2af20ab3d106","25e3a1ecb5f6cecfbe6b98c1077e7ed1af8846456778331cea2a7e91c5db8084","f897ec120f87d774af4825033b6c4a4df6b3fcfcc547690de4c8abc318666829","6e445232745c484dbd4d052f3aede8f1f32471838fe648f9e202088dc9e4055f","3ecd9f49429c57af70336d6f3650e8707fb2e56a90f92f478a89f88bd4be7be4","0c96c9fdebea3e1fca83fa54ddff1a14aea3f332a3fbd6753b5cf887243f5daa","8d2492e5b7782bc08864f50993d982505cf8d14ce9cf8c05bf4bbcb0d102a746","fd920129715f3e1d16b1ec354e4d22000865bfd1e49aa4288ccb0cf6c7ae2af8","2524aa37b1de1ac28dc4ec1a13fb943234f84ef9fda43452562d49f353078452","f57af58662f50dc77340d37ac54a469ae7091ba7cc29ecfd335e9f66700a9bfc","7832f37e2ff8cb68095708caecb2601cadf6dc9ef454942e0a02d5fc2a4155e3","2fd37544e2a212f7c894bd751a5dcb3bf4ba637cb6a4fdc1b152543377385c5b","d3e497594f7482f7f636528020def0dc068b5f43624ada51c97b6d1fa706b549","29742422ca9c5b675e1afa2f428d9e5fbb0e348a6f0491ad6c3cdc60d84c427a","e9e4060604d2524b766cf46d7347e6e6ae01ae78ee23cb629365bd0038e32458","60efe743bd0c5859643cade1cde4021bcc2c97e45a69eda094d6d102d31e20d2",{"version":"761268425d4eeb408b0edf95c857a392e86669cbca89f81e10f4b234df8102de","impliedFormat":1},"3ecab1e2c16bb04308bcc2977b868a617c220962a5c270dca481d816c718b16b","ac698c354349e1cb368b89a48f3f7b06c3bef253f976c731c7a2d4978da88423","bcf65bf89b7d3319a8fbdcea2fa786ee8ca7b08bc5eb8fbf7854678ec5006e79","413f89a0b4fd9ba675be90fb36e1411ddc4943e44533474765d37caebb31e95d","df8001328c468bc7417764508c703626afe1cbd8fbd05a5b3f192fce95d731fe","ef506bee7baf3f9b7f654bc36acb1644470c9d7e1364a0edb0972b66d50acb58","a07a078bc51861aa4b231344eb6f6770fccabfc2fdca4278aafeb60444c39834","6b796d5275b6737504874a946734ee0a2665ce25a05b407419a7eddbc79b1f73","4d196f06ee6ce86e63ad8c3cdca0a9bda8ffca28428c8f1d0d18470e789fe302","a13cb072d8c3f7502d6ca2d9946a45f1b2e64754f0bcee452855f510e9ea2556","462f063b65e1d1575c9d35cf6607ded5502d994d9e4ad7a9e9d26e9a6cdce617","6d7c1c908d3d5296bfea0fa7c6bce01c5c186b0630b149c6046c78e683142556","04e9710046523da056b456bc50591920b242fa19a74c8cebfbba10d63ca295b4","18694bb434910d247fc6a671f83bb46e225d3c3f1d900725f4d07ce927521219","1c9fddbf69fb3bb53803232f35f6c31aa8673c2a8c6c80b1d7b2227d7aa8502c","d7aba51b97b78781dfda184b9778c72703086d6d1bf94d474ad95e5eb4fedec3","9aea48203c7d455111199f51e9f7cdb145a4e3e93dab328a4d043aeec95040a1","0a127b237c0d0b94294e0a61508198fd774cf6e7de6965cfe0341d5983def5cb","eacf24bd0a029c8907934d5653bb897e61fe411aaed9a816ad0570bcf6982d3a","c1b9c547489b7f82cde4fdb080d62945525b09a6b473699562c1c23c44bf0d93","c9b474e16e1ce2ac63fcb2c1a2f85079598fb2e9d0a6bb338bba26c51f034ab6","f6e3e3fb2b7842c479c7150020bbb7b3106d6d3eedd2f3175e421d3f66703ca8","7c6c67de7d793352a9788f02ed9ed51f07e08e43a6b8c2fd136bdfd5cd5f75a3","6a45f279c903d5e3253f97ea6fdf14c36eb9f9f55a521986d91633df9a485a13","364ce6ce966bc7a7535026875b6b725192b3342aad503621e9c25757f642e34f","b2dfbe54e51d7701273cea283a5c7fe651c7839552e5fbe9dad63a0a736a5b7a","e9f1f60235e856e3f227afa89709a0d30bf42cbe65fa07e133cf233bb8f423ad","9850126bc82a7866c62f20e4ee56bc02f89e0801e25b091dd28a945c6180a14f","b8b8ffa69bb12a24bc330fe5184ad233a14b70e8a2af3e933b7f0b430c80224c","791f1f4226c6ef0a64962caa8a52efbc76148bf9cc64b9a2ac38d155e7a6db92","a726c785ffbbe293b6984ae0a2787bf2ba3fcfe58adeac6e6764373ea6fe14cf","b775f6ec2404d42ec81ad616ae7733773190e16ad05dba3f0d8d81cf44e9ac40","20ced830ec7aa5a082cb8fc1e5a9dfa72094a6070e77637dae26fc3158d7c5f6","2efdf502c811e8eab1e5e5677b7d9907a76e7c2cb5d9348a031ff6f0f89b89b3","f3fb2e95416e1184d14f46beb1e07dd5f26d4ccafe7bc671bbd983accf2eb964","45b7617f9f007858b05fcb17d30620b9c4db3fa43812222d5f486d96f4680469","ea1d74dc721cc60fb0f848e9db6bd3c8c278d1f0654964faccb18b10ade102bc","e57296030e0b40cd5478b785abd58cd3acc0965e7442df6fbefda965626fe819","ef7fdd7f8de6a148a2a45ddbc1755fc1dae434bd877e29e802067ee0cc7d8db7","44c03aadaa33274d0af5ff3de9e078e60a9cc4c560fe2f0d98ea395acb6ae68d","ca662c6221cefdb2c6c74683947cc366af481494fc41fcfc3ef2e0f2d7f8f72b","90cdd23cb02828bce10c0f339ff7d42a13cb98605771b176f27ee4065d9369c4","5b661ad30228d66e39419439f67629d256f611a97bdb6bc5e99af7268acb4ebd","b79d66fac34d9e483d003b47b60b179e10d5700c238ad23e85fe3e7c2d84b0f3","15f310a37fcb150af2511c3e42a29b0b30c4a207be8df67dbc5f6b39a401834c","1abf895eea3e00fe09e0acb576d1727d220bbe3bf90bb1081df85bbbb6fcf77b","87589c5be9e2830274e75ffbd7b8b9cb28fc4f4b8d0c47c3a08a4a9e3bd8e10e","0e95cdbaaed92756207173a2a0051d98f5c3e3ca96b7ec2f20a9d23c4405bab7","b7854ed810cfdf98989468182f1f8d012c06685d4cd47817bb6f9c35d253fd50","7a92e7d3fe775f9fbb4c1e67db1f373ca583162f41735091ac65f3df6f8be16a","2caa3067a319a50d8940eb72e2e305e95f8144aa95ad2ce818550e6332d0be4a","9604d36870b69ebbe5630584f250fec344c58e5be0452789fae0ad449be4a737","49af52e5750468beb3ab7b489dfb570de4d60cb701cd894fc9dbe3864f9da5cc","87c95cbfa734cafd8bd124c9d6300ed62d5c4b57047aa9a37971901cd191395f","828b87d4796d90395781a1ee0b52d6f8a282ed10ab1464d27ca271aa9bd37cf5","990bb5af29846397754d53f9c12edf5118d5a4628a316d128e9c19a8ff72ffe6","d18bf03574197034d64ef01158df709f6792abff0d09e29a10b62374c5fba065","4369bd0c4f864a5e669b93d4fee642f9df1c17f0a85a4909ba8680c7843c428b","490013ad6ba64d8aaeb2b4d6143a9018ebcda99b0b72ab9173b6bfabe70c31b0","87b39d07a6e308ed93bec0f12422dd5c7b1c7893bceba4ca9de97fef703ddbbd","50c3af86e65d07760f7f47cf366a0aa5450aab2b12aef3037e51d551650bfcbf","03f5fbc416468b619a316e845ebdd97c72058f1e4c6796c9ea124045827c88fd","35acb7f0c43c98d99e972b40d08481509bf5843bd3339c4cf57846777f557c10","67a7b451f6d79b70c03e362416593cc8d3a7d8798f6f9df667f6c1ccee7176cc","4e0fcf030d94987a7873d42acec4bbd1d231c6f9f78c344fd3022ea0d9a27182","b71c84fd046e7eb9bb9dcf670deab8bca15c707cac9078adde7696fc8f7ee5d9","08ddcbf0b2e36e6d90b1dd80f3e64d6e164ba791efd4477f6cde8704dbfe4f0b","0973582c064d55302372b3079123fd0225180006f623128eeaa3e698284c1664","7daaa2079ed6607b2f67ba8a50d93dd719d5f94f5e84b9abde4424e315ffde67","d4c69891decdb945fef75e8aa6dfd105c8566bb06ce0e211448e6e5c1b422fde","52629787325d5d4d673f6f5cf547f729a321a736f4241a20ee9b9cef3b370eb5","e9dafc4ea8c3c460dadb4803a49b5e15975c671b77d7959a6370b7c86e36994f","7c653d2b6681fd00f383220890ea846765dca6f8160c0705bf323b76c205d72d","755f176c7ebc4ce759e2254a75c8e033bfc6f7f4f7d13876110ca058eaa295a8","0b62ab7b8e94c7587afac28dc0a7bf0e97028d91ba19a40639dc83bdd5fdbd19","da3a928f454e92cb1f5d15e58616fea786cad5549b23c665836f0f77aa680fc3","107ae2c020921de07e13a1af32da915ffb5e34207fdb2e258fb836f31a97d69e","61549444624e73445de1ca8402bd796a26c9a7e6ac76502c572fc68adb067247","d38f50d1b7e6fa0c8abb6ec6cfd9edaa8034a8712ed4c237b1740146da6cd957","3c1419349a4dfd675b8fdd99676ac2697480c0cb22bd19fa7c0348bffb90ad04","9040bdeb90ff9ff9ef9d3f5781ddef7ff79d7d1a0410704f8af812ad61e2ace2","52ebe1481e03d2507741a0a87b847fb65125db80ac20f6a3328051cafd4b9dcb","660c15f0843ad3aa183f5a6d11f64c8e47ad2f32f9010cca876a51f0b780257b","a914ac49e2f4a0992ef2e6492102a8ff69c89b78d72864fc9caa93ca3e355bd7",{"version":"34b6f1a74ec4db785b1f6fe0041e8787258c52d545e270d414386cd581f01b79","signature":"7eeeb3328f8b87f62ff4a800d75a76b97bebb5c97d6d2f4508aa636153eb2086"},"4e423bc738c05ce2e778837b849daadd077b90b2e79d8a03cb5985e7bf4cd4ea","dd8d6baad1a62f8e90a9755afe0265fb31a5c228b7f3043d20c5e9220791b941",{"version":"210dfbf7bd6250e67e0919c61d8cdf70b21a9b025b72d8db09a7e9baca7fbb67","signature":"451140a42b90c43e979fed72c1dd1875a36b648b37dd395f7e506dd9beb987bc"},"6c954221a517d820fa961a94555b1e171a298e00253d551ca4a93674db29af1f","fc985be05e887fc863d5ce5cdffd8ecd0a1df40de518955c45c315416cd925ba","0592e44e024b853bca32846956086a7d200d7b079a10ab0427065e918f0155d8","c3a9c6f7f9902002615bde500f79d28f42f09b14178e0eaf3b57e12c02d9325b","c902c730ff6bf1cc88beec1f9d48d23e4879542ce0096165325188c6f46b1bf3","f1fae19f0bbbbf66d1868198cac7d1424ecb27202ffb5520183a6ebca358c949","9cbccf51ee359b93cdce858d3fd1a270ceb905ab5a694da3f61fb14cf9102547",{"version":"fe93c474ab38ac02e30e3af073412b4f92b740152cf3a751fdaee8cbea982341","impliedFormat":1},{"version":"1bddafb2bee422e871de305b43a484ec058de25c3605b8da7dc8e63dc074e09f","impliedFormat":1},{"version":"1e00b8bf9e3766c958218cd6144ffe08418286f89ff44ba5a2cc830c03dd22c7","impliedFormat":1},"04fc800408d6492bd65cb49eeb2f0972d7a943935e1d073440d4be25211698d9",{"version":"90a419271b3b49a1aab9df890f7cdbcf6f0256bafd3148adc968db985b3aa7f7","impliedFormat":1},{"version":"8af1add2f5ef90c2eebfcf3e9b6d53fbfbe3dc1a43b3a9003fb9914c71a64a9b","impliedFormat":1},{"version":"03bba8a7ca2794c7a6a53246edf9a39b8cdb4e5b5b64a88c8d8f38ea6bf24f15","impliedFormat":1},{"version":"b071d70d122858d597d5fa77495d986d2dad131016a168baa0f97cff8cf852a1","impliedFormat":1},{"version":"0da7c26e2330fce2b6199bed7d67c695bb53edf6f9bb739b5b9f21161bb7a387","impliedFormat":1},{"version":"1f2844cb08890a2d4a1bb475a9cc27714b54fc7ea83096878ba7338cebad36c6","impliedFormat":1},{"version":"dfa1fba786c1e058e0a7a3b9ff6afe73a877216a20bf7f94bb6bcd9afcd35d80","impliedFormat":1},{"version":"f3dde5c21d319bcaa439377cd8182ece3de2c04ff4d50ad3d212ba27b07a4862","impliedFormat":1},{"version":"a26ec03e97349b92fbcad6095b429ac4bbe6441e62fa2582a52e1a054b9facc9","impliedFormat":1},{"version":"35d5c6b46cd84c463823f32dd485178b781da446c2d16df7178ccb7f87e4f6eb","impliedFormat":1},{"version":"cffc27311090993c7eec0a247304cd3758027b3dde467c30ae6fc17166d3ac1f","impliedFormat":1},{"version":"b3754f0fdc34045fcfc3662f270a00e0db386f4f1fc77f8b511e14479cd0c731","impliedFormat":1},{"version":"22bce6b2657950db19df8459a845ab713868bfb2a6110d62a2400dddd67e4e84","impliedFormat":1},{"version":"2149a1d4360374f95d93583685a456049a75a4de0995470978e4662d644954b9","impliedFormat":1},{"version":"8b18b0c34a460b75114b426f352414c89383f024748e96cc25187fc207d89b34","impliedFormat":1},{"version":"92848720ec5d412ca4bb7503d88ea322540c0275284276c93a275628d6286dac","impliedFormat":1},{"version":"eb02a0bab197a881a47152477eea066280447349ab134607ea02e97651d57a2a","impliedFormat":1},{"version":"f54695ab4d038db29457536237287b71a4f4fa975c8de4118032054e6b0eede7","impliedFormat":1},{"version":"8724530388c0ddd30a844a69e6331b83cbcd5553281404b598e4c9e392ec39f4","impliedFormat":1},{"version":"51ac8a80b50828f543dff6486241a23fdd6dadb3b6e2e5ced6b303c87c32ed34","impliedFormat":1},"f63d346b0582f9ad2bc816ca95538271344ee64800536bd057e7624b0b6d537f","f9f687deb82a7cb041585bc919c539f0c70c319d8f31bc0cac73645fbb913256","514f42ba19267d86616e2ef092897f2f5a7e8dcf94758a00804ce591fb78a2b4","654fc293cdf4a40c2b8c3d1830af7a7241269f127c757ba2d5c93184ea985c8d","1b77bdfccab251015217f4d49e0714959affdf62c45f7c67406e215795222146","13b5ddc914e494330ae93fab2c1a35561b6e1c4982da07c9311fa0e33f773eca","d94e300253feb260d129289d7ff9b0c5040d2cfdbb60dd0b461b626fb0c24a4a","aa0f8b8f9474316083c8baaa2fbb075525989075e1224c8d8395def88e487610","d6a8b37e466702dc1bfb2575c492aa4a27adaeab83de2e74eaab06a2a2697beb","e1beb09365ec6980ff026fad9b1fc9a2739b433a39fda791e61dbe96376a58e8","1e974815b51a32f43c049d33e5d986817a4d84f6560834f2210496e144ec18bf","223b4b12ec6a21c8f332ddcfe8a7f8f1300859130c6c7b61a67480b71dab69f7","d5373176aa90b9ac1507b0fd5f663b286f0332b1e303bfc0174eaa3c8c223fd7","41607a8e37bed19a88925d2e6a40dcbd24220f6ba1289e90e5920b0357c0d39f","1a65f8ee09c9c00affbed9b6613749c9e3c647d363aa505560faa07adc7e4378","769b36b0987093111df4f953761108e88ce6d4a7d59af1990238c505c73b08e6","b7d210a54283f2fdc132d30aa1d84a613775e04d5e6226bf02a7ba7d87731909","fd65cf6992f1e5cd9991de8e2bae8c8354b3a9b88c33616f0a6335a290321d34","ef0c8315bdc9913a09afa4537dd200988b9c06b915af2391f354402ffc2c6494","32f0a82a94ffad7c8fe0a3ab2157c6a47bc8a65c73129f0b928fb36a7c1429a8","e36b747dfef06f396896841ec7d593b29016d2e28c782d20882aa51816debf55","f7b5bbd5c5497959824a6b5fd59d1e2fc017df95200f1d0e17374e542fe7e79c","2ff6961c18fd74954ffd3bd615cf2289fd308c98fa74071d773470601e9f219d","d80ab941bf9b962d48d67f830aecd020f2e7be0fbe358f55a65fa217f7dabcb4","2ff6bc5e4226453cf659fea3f14a51fee67e6c10497a04a6f5a056b3f1bb2022","97b1852476f16fb4639f43799e5a840b9cf09bdca3c81616c4025d44aa8f6263","6bdfec001ed6049c338701cd456e81154398800322ee3f8a03608b985ecbd583","00a0b158ae496d01f937015fc6b17630feacded09e4965554760f6a16f58d3bc","4277694a7c0a53c7955835d5db9a04a9053c1de3a151edf2d93d0761df1c2b8e","0db67d4dceaa1a72712ed905448e0fbb196539f4f341b9749d7276c545eca72c","305e3b3759f97dd35613530a9e3cda099ecbed7573353e7c2bbdea11ccfb0764","41e3f8f4aec15dd627fb826d4521c1970155d90ec2db46e68d2101ba49d2429d","10e4b2ed2a97f7811227bccdae31448bb43bae75a8ff12614cf504341bf77b9d","85ca66ced14bb573e6c02f42b3092cbac617be01bc36c3dbc3e40323544bbd32","21fe0d1086dc60c8091812be8d7a19f92c44fed377e4439ac1ebf451aff292b6","df4d9c7b5e0b5aea2c59dda77912e7e6362ef25175cc0a6378b4adb3e36af7f9","cbc949e380bc1c88ca0712b83296248f60f3bab059220b8567b61a28223aade4","032153fe590aad3a2d88cf5a0c1ec85433cc7e7bf68443b0da25e28818553dd3","e7703942da4810802f70ddd4b36a3d24a44dc688a18d0fa1ddc44b6f81edb557","2d630dc2d777ac2b85b9dc737e32a3bfc5ecc31bd243a8a86f266fd8515c61dd","7f8cde50cf0c48bfa639fc6774c9a20a5967fda9beeaf915d6296faa5412416f","8c27303d58926a151195094b62115fe22d49585ff1aee78407773593e75b61eb","38ba5ebf8b09a42a5d21f83ef8add7859a77b2a58f29ff434ffe1b3f0b538003","858c62c004da212be5edf3744a379415dadc62c13ad4ffdb5855b7c7c2207bf2","f2619cc8adf249a2f2e4b7b017b65ccec674678ffc60b3ffed7b3bd2c9fb6455","cef81e2e0f7ebe618910dfbedbaaaeb10da43a4f50986f21ceb28019176d9860","64e4bf66820a60705365c90986ca30af16d6ab3096da7fcf2d6cfdcee5a7effc","3abce0b27aed1b6fcba0ca0765575abf09eff6b2b806b0151bcb88b2fb3173bc","0816fff1e9f0293be68f9ef52489a1ed73738da7d60c58646fe9eb0748b0c711","13f6fb406144fe561b8821bebc4372bfac79642fe5136d5acd2b84d05385ed4a","a1d8e20b5841446702bf4a8799573f2bc34b6fdbdc5cc9f9a8e8d2bea0adf330","09b32cafe2b4caabd44d405411e17def9427a266c35dfbb3b7b58e84b48ffbdb","e4122996336996b9c67f8d3d646027bffd5bcc314e21f8e504388d3a946062b0","ed11c237f426f73098acfd218ed337b46fd813fe8a85196b021e3bb15bc2d1d9","8302adcd98cdce8b9a496c1b8241fb629ed65230d5a97b73672d781fc6bd1411","5c497ad41c7df992886345e0e63bc718117f471866f82c4f248e459c1531cfbe","60c0a2efc35eb71d5d3a3d090c5e438ab29d6fedf547a0bbb66dbd51af62e55b","f5bde5a81abfa18a355564714fcd94e099c1e8620a2053fe47c91f10714b7ea5","1813daca75edc68d542d132b045a227cdd3f3971a1c40db78b74216535978acf","d5c92642d788d9e99fbc6b5ddc8141f336f55c955eabe73de7ea9dbd4eb3bf0f","c53b7a01ea41fb8593156c9c8c13e3764c424afd09ff1e1bd6a4df8caf11380e","427025f5c0b083db88586a6ee40f14a459c11444f0f01dbbb649624fd3a9b937","7c64a45e7b2f2ce098aae5b19e6ca3481c41d93191c0cdc4cd9bd5e59f893974","3d12b04d806fea164c15b38448ad71a3aa39fba38d36f7decef20be7494de48e","2cb322d5f4bd261dc204e2947992a8447a7e5b250e93bc19d8746d9be727eeeb","53406497098cd1e991076ac2b6b080c9bd057d4f50f3019600b6fc82b505896a","d3e1e021ae186da5c6c79e224f5d8929a1cf295f8e61770166aa3e8d2f15a4b2","1cff3aa61afff3d0274dd0ff852560a21f54843ab0f97e0208f84e530bf3876b","1258cd322f44075769cd1055b88e4219d8fcfbd788960bc11bcfcfaee44ba9a4","a70c6962037097db6f51a554d1f7eee5ea13aa7d3f5e35eb93a71aad82540dd5","2e62c8c6037f7a7e20a7c75f122564ab10b638de5e2b21c9a155c7e8d0d3f1d2","b60554458df1e576ca309fbcc81ecd0686eb770957ca338152fb9cbc59ef10f8","ac59bc5ab05c63eb3681f92c8b402b8cc0996db313214467d3a161ea030a2edb","1bb4dc6a8fe3f88b9336f3553fee2396e869ef5521d781de2a1c68c3796ad668","436e84b365362e25eaa1cd9dba298de40e0aa08f2d6ee17c7a9044df9b94ed91","27fcee5c40936c9e3331103022c921d1cbd5290f712c86fc2abd124a4e915a0b","26c320ccdbf5dcf932642024b9b1c482b3d15494fa091c79d54fb1a8b24536cc","7759063f630b2fa7ec1f774b1eea94e6404641cf1d86a0784eb0d818fe937e51","a23dd25ed16169b4c5154ebb33d169129ac42e48b5155a015e660a90ae7beb57","7713f553718e369765cae26533a296d181f5e47cadc038700822ff1717870a88","d938b9c0789bf69bb317855f97023018d860e4b0f243ad4984e7cf21170d7d62","689a026012bc52070f650ce373c4654bb0b579194581fd668c781a19315b9042","05adad03f02f6a888277252c8f5cb044b2ac96f81fd6ecfb367625e044d475f8","fb38c6e608919043cd16f3b999d373ad88e5700ef28beeb3e01fdc02636fc636","ab953ad77525069d9e0e19abe60dce4ce78554455a435ea9e244b83265833ed9","c950d2a7b6c535397ed6c99c7cdc6e6b09811a47cf3169e859b424b75ec47553","7787c39a80e95517ae05389940e46c66ad7745fd1fc7cd4b0aed4a153780d77d","2a62dc0af6af3b59b1b2d471d812c0033b1f8b5828e1b43a4b2ad49dfc028578","a0544de65bb5de27b2ebbf70a35b732f15980951a4899bdf7183f5a675f242dc","7974af71a34aea40270c7bcafed668b96c331bc48077945dc0d32dfc3368260c","ca43f5baae03106039f7ce588afb2a2092e2035b88cbf135c93aaf8fefcd4d7f","b4134d8fab8be1bf76a7a6a950f3b44c8a62643a0e858ec20713ef12aedf32fe","212e96004aab8e17443d4b2ed0263bf5f113e6a7b557ac003e46e383ac7a740d","b3ca6a0408e842c084c497eebd2190972b32ebe8777a2cd55594747777264ed2","e6fd59ca5c7225fb6b2d902ca77398132f7da03bfab92753101ea5438149413b","ad99a455ccbe2cd7f2558b3a0238070585dbb8232caf6a40468b51d15aaee99e","0c5b7b852772e1df0dc6849d7535255a195d242693127c06cfe22b368af1edd0","a5aba921c36e463a968d7466b4d24241cf712e65fbf993758be84a99da910170","9b703cd32df211c35dd25281462f70b6b020508f4de3d779aef8eb6ba5d58213","02b34f4d11d2f52a0ac1f5d889c6926b1457fa070f3081870ca5b60348f43e59","7432142313529b95e6ab362e1a02cdb676cec27d36904ae77d710bdff55cd6e8","21d1ea629f0c1d88b2729559f0557e267794126cee9123fba9686aad13ad5178","e5857a67d050e1a6e998508767ee60ab0cc128ff7339b293fa61e90b19fc80b2","a30ccaf8e3ddb5d54fa6a03389b1afaf1bb7be48050b5ccaadd47983ca056aa6","3636d3297029ca0aa14b5ec4b5f701c1215ad37fa6e0ffd8b35a53242edc895a","27269f892e62e62b8885c6460a03df09e43cedb57d34bf83170e737d168a6353","c021c05275446b9e5edda6c21f44b666adab9edf9c3d2592e0b58540d078020d","654e1c858cb522095d81af4423fdbbc4adaa26031bb0b90a73c3702b21432d66","e22789e1d2d5b9b94419cdf7f33fe90e35f6b827c3b19b161510bbc18ea2fab7","1bc88867ff0c1b1ff2a4985341250ae301e5a51a1bd939a253dd404aa06270c5","f007827daeaf90536c8de630cb14dad5665e2dccb2d4d02b8f9009da30ccf03f","dda0225f6b3e72001bdc727fe15f52c105fdacf2a1d7f1ca2bd23323fba8b741","7a4ac82a2fefc727b3269d528de1d1f85e3e6dcef3bd6d9b9de4cf17e0942398","d812172ed188742b35c0b45c7760b95039ac75a1e332a8f49d36f433ce4573fd","5e3a2877c53cf50bb9cbea7ad00f58dd418a09e457f82e10e428b7297bb425ff","df8fdf2824708d4427464efc52c166b49f370a4912fe4e9141a017793a6d96f7","3281bb41a95d9b055355102ba5f3a2bedc2099c548ca0e76b7441fef45b9fa4d","a3f22fab2934604719c816ef2b43e37b0d7240db1184b9483fe9751f2479039a","8b93d263a62edccbe8b2d3ff472ad45dee21790654975377aa12b82752723182","9d9b6b70e61c101c23809287daf3a5a94b5ae65fa83ccfd12df21fcff7288d1b","545d5a0d7356385f19f65744018f70cbab2ae5ec3b134945d2c88d499306c121","bb5295f10e1a7a02e7e0437db95f0d2d8bf36f5c4ce90ba9d17a563ce95f5f1f","679028025947735d8e7901501ff712b17fa74663c667451eb1dc4979e266912c","381a4c7a38ad42b5dbcacfa19c798a0e360ffd1eb185d23c0cf6d4ee6f721c17","8d7e5cb9d0ef2721b8a2146d8f96646ebee34d8b7c35953f3dde5944983bc4fe","38ccc54a084601679696e51beb06f0bc1a9dac8eb387ab6b3a7d4d835ea297da","b047a9eabc1baff70a688819acbb96675d0aec91cd6ef4baa70bae484f7531b6","435585514393c04ec512b8665698afa53402e7b607a6562fd9a8bcc8fda4c13a","6eaddf82d0d142413b47c6f43c564d89dde5988496531e202bb8bee2f33c2a77","1b3575b28bf4fab070413b3bb59f2635fc19977e6482f34068f97e42f602bcf6","67b715219b66fd13dd59c175b1c09a4f48c6606d82d19071633bca7655adb141","aedd45cabc3bba994075537b9267698accb2f8cfbb7f4b52b14c8c33b6b051bb","96a34b04f1419cb9ec67cbff4e47bd6fba51ea17a44d451d7d9a3ef094a628b7","d0cf7580743881456a3f7b6ec1c2e8855b81dd5cc8b4a2e855c82cb022c8dbfc","81c2d89060e09e2c67f0f1d13438e4c4dad7fd7ff0fbac3a7e2ad767949bcf3e","08ad31438199daffd4c82fff42cb6779d6b2c65bc96c097f31447eed8315b050","6bafb7874ec526c2953c8449f66b7b0ca811f6cef99a20af6c0f20405e380349","76680a7d931984070b20ae6632b673b91957f41e2d2f004e37ce4fdf1fe1401d","9b024e3621c28fb3e4d94587256f65062e3db3a064427a661d93c2c9f53e14d2","4d21f138527ebf2943f8091baaf01fcb40af92136c006ec42dbbe09398b76b73","1251cf9da7d4028317840c7684b8cef0a7c68f051900a56d60e4676ceeb4e4f0","9829f0149514e19e7899eba7debc8774ff33e4690b2ce385e61d05ce280823d9","6fb0b61fd23dc530db13757ed54fd763547962d77a78f11f3449eea4c59f6a52","b986de252eede23e968a9effd5436866ecf5a7d2e4b6ebfa439edc0130f22c3f","d53f61d8cf51bd61cc55c391c43567f6087bb2fca674ce447331c1a1ea12cbf7","a6f89ea55507fd0913fb1b9ea52ebfcd465b511c208944de5d4eb2beb4bb3d70","4d983961c44e8dfac6f7a9649f8c9c9c806e680211be3a2166cf22fcbd35f582","d6228bbefda39ea247996a15a2ca47d7243321d8c4aa623f5b9d1397cc5b963d","942e3dab54a7b5b282c98206784f2a567fe34c34e2247fff447584429872dc08","2f9d31155e9ecb8f2d3e86c15f6c40925cbaa62844f69ec13cc970d2a87ded64","5bd3de279af4e39a66bebb5448d2d16bff42737b779add28ce82920a5eab7e58","ede8e80824a15264b8508d4d722836db759a02d9305b1ea563f48e38cc68d246","f059fbd5456eaf8cef4daff2913ab6204f4c3d9c51cb45f47fdfb9969f7b9434","5dfb09eb1233aef1176c197ca13a94e45bb4654c07f2e62dd61aca2b1bb5e7c6","19a9d20c4b58dffe346a6df4f530897269f39a6028ff0b341c99a7c8c70d533b","324dc173b92e0ae77f2d499601486eea4fa2b9984512ff6d6f87512df50be44c","e06706d8d9dcaac32b43889b661aeabbf0c21d8da6ebdf41197e652707e4ff6c","57a9247b290c66f211af19cf1f2ac9c967245098b8a7fb21ecf21241c7044792","d4df2a8aa5df95a3eec77450abf9b3199a581262385a2c0decbd5184be0c45bf","baddd2a7b90b17a9da33a41d6644166159a1d0940709f2a47071074f76526143","bb29bc20fe41b71f21b59cc49d5dfe4ea14d1149a0fc4069e0e4cced71bce85a","8e650dcc03097eaeae000ed5ea05353d6d129e7b033b6ce350a9e205a38b9cdd","d18ea9a53c76d016befdb777b68b449bc0acad3c998aef85d5e6e8c4dd056d2d","9d5de741a83496406e77e886c69dfd6782be3013fee38b61e59da1e2f7cdc845","66a3dd8ed22d515b8000856147f0c503b9470244e3eb04bd024faf907255ef03","3e2b00f4a1b20ada5401b30ad8d97782c3d578101c4e3aba63a1546b4e9dcbad","cbb5f6eeca74f89711e9e0b24e380464874fd70c5673ded236184bf286a2a797","2c284263d9eb4700728513d864e353373fb8057ca2f0aa9156a3402389a955f8","1095e16661d9c3b1a53f2695982e9cc6508c0a7c2aa0b7c26e6fab87b8aad050","413a66966422c289b8e580a63d3df9348722aba09bfef043200e3af034b329f5","be1762235164418cb4dff793cad2a59640f5236d3eda68be45a218af44e0a3b4","b1111c975b37ab8607c3fc43b40d6939e84669919dea097208a00d6ee9ca2a94","552ec5285edc6d454f0b4f2b732f862381f7797e9fd5892c1128d71e2fde914c","a32d540344d916d8a4f67a1883b6156959296e3c515d45c2e073b402a76ab0aa","f3ddaa91524b4581903b3572f8b108f5d4946a36c106a4544ee3be97c29af121","cafdbb2e78f63c02dd79fcc4d9d10d738ad847e243ac75d73c29e1c2e549e97a","e15db8c7ff3e1112a2016800607176bf5e62b9cfc523e076ce6ca32baf5cbf06","0d1b0f518ddc3ae838cf6d603f95107664ff60089280458e1efbca4085355863","283c728fb254beb9f34bca1551fe27712921fdceb8c73d013d53971eb17be384","e2893a4ea3749840e7331368a11341f658d1aa24b51fc751f565f9e6e1a891de","1c30b839df592ce1eccff0c5d482ae50f040d7a12894dd62ad346a8c58b6973c","6bfbcec6efa17543d22ae2b45fbeb0ee39ae604a79d1e6b8ba1e9c30272a4db8","2fccfc6874dbd2c7f2f2dec11ba94c6d4220ac95b45bab14da4ecdbef8762be0","0e8c23d43b220076b5e8614c1944a7867b581f50a783ce52badd1c2b026a214e","41ce3f81f0f62f29f9b9df864d1ee6b6861a22bb1cfa4fab9f92b8b1f1d9fd36","a75a289766a8f9709fb9689c6597748805c1150f6c21d01227a1a1fc1432f558","42794a0bc78833c002a3aeee1e84bc569858814c23782a5804a585360166c97a","d56cf06c36fdc7d20cecacaa10c65219eb95ef586806a625eaff2324d2206866","61a89ab2b7965dfa80c558241da20eeb86933e3918dce9538a18043d519d3c3a","e17635f3ff30df9d48a45610483ba157fcc3141fc772b2bd508c08ccfce9329b","688313c8b5614eb144b5088d752c3d356fd3b07da72fae692d0eb57bcbfb79e0","6881e33034e422694f84e8d6605cd45ba3c4b72435faedc6d98d97fa57a5cf6a","352efb40ab450ba397146b90bc9c1579b560de8a937ac3ddcbcf1bc4973d78e0","242a779b14dfe3a6b440107c4ceab96d95b5e164d3ecf88d0ee6c692dcdf260c","ebe056a06143f323493304c1d02af7781343c183cfbc806ec2ac704552658dfd","4d1b7b12f5c56d5f793ae8880fe1c67e8ca34ec5d4e872a5203f26a865c17708","f267822cc079125935e394cac1b7bf6da58a552e49e0b93fb96674ed9bfd069f","e92ef124216f896d658c6b95a69bd5d20b26bb23a57368847eaa8b9f989426c7","5ac20ad786ad4fbaaff7a0c541a7bca96c973039da0274da0d6e8fa57a01666e","0e705cc85deb7d5649e2ff2e4010808d311b39a696ea67572d08ab514ae9f5a0","1fe832d1f331d6bfb9395360ad75c99081285970cfd6640a7c1c2798bd6b93e4","448b35634e0234e3795768a932c735c6e66fe3af81ef68dbbbd0b235b15ad8e4","15c7bf17d165c25f6f75eedff493fe18b25e56997201a0bf4d1f585bed46e7a3","d9889ee7b4667c3f4dc6a8c40c21b33f922ce9897cdb12c77ef637d6f57eb96b","88c9a9f79c4ecb2651330ae74ebb781e6335c03f8b1c17fb3bdd2a453b0b5ce9","618d2de2e2d9dc27a0568ecf64f2616a86eabe06ce224e6d978077696ed726be","799dcf70cbe379b7c9abb424bda0030c308144d4401c27e3edbe2b81c0bbf5fc","219409cd9b90af786f21983728d075fedae8072309d43e55820f117423f7f7df","c2eb3681f384515dd945465a9aac753c89487f6f3f083d3bc2bb446625cefabc","c2285eb578df0bf292d348bab9228084f4b9898b3719ed113ddbffc4849c7ab3","876ce92bd6a66f352200c0974b24f1e1de902371aa1d7c9159e131687332f868","4bfc5740c2e4db68d3222ec4c99b78fddaa2a02827b7441a98347a107ec3303a","58aeaeb37c707c1a33840235b5e550df3cdd1a3d2878336bc4fe9cacf5a3a849","2e7b43bff6cbac1c9b98ec0541bc803d0f73968320156d3f9e4d166f69287252","f5bd8e3c772a668ffcb6ed94cc6b991d381f2cdf1c0175257cfe45b934ea262d","1ceefb63febc2a98fe45be48c4f418af3f34fc47ee1ab04afed40cca7e1a36d6","d07c77b518069549c7e0b3d2eb38627e1dbacb6bfc95c763df3063fd56667daf","a22ade15d60b153cd53b72fd20e2ce56b4aa614837bdbccfbd27b6134d4ec93f","f4e1a247b482203a19c2a638046c05308004e8a799f84913a60920abd888e938","20114dc633ea6a8bbdeeaec0d8a43b68b569b29d3f5493804339eb55896601f4","7e96e027803a71cd137ce098217dd6e70f4d45b1616b51291bfae04e6cb047e1","efd45e45a09d61570b891617fa0ec822789e4c12f1d955f94e4ae0823ad94691","a717d3a1c8ad799e343333c2a7a5f555a1489886256009605fc3ac4aca4bb5ad",{"version":"b1538a92b9bae8d230267210c5db38c2eb6bdb352128a3ce3aa8c6acf9fc9622","impliedFormat":1},{"version":"6fc1a4f64372593767a9b7b774e9b3b92bf04e8785c3f9ea98973aa9f4bbe490","impliedFormat":1},{"version":"ff09b6fbdcf74d8af4e131b8866925c5e18d225540b9b19ce9485ca93e574d84","impliedFormat":1},{"version":"d5895252efa27a50f134a9b580aa61f7def5ab73d0a8071f9b5bf9a317c01c2d","impliedFormat":1},{"version":"56208c500dcb5f42be7e18e8cb578f257a1a89b94b3280c506818fed06391805","impliedFormat":1},{"version":"0c94c2e497e1b9bcfda66aea239d5d36cd980d12a6d9d59e66f4be1fa3da5d5a","impliedFormat":1},{"version":"1f366bde16e0513fa7b64f87f86689c4d36efd85afce7eb24753e9c99b91c319","impliedFormat":1},{"version":"0e298df8752b8bdcafdf4c8e8560df048c3c5688fa683f14a827490e0fe0cf0f","impliedFormat":1},{"version":"151ff381ef9ff8da2da9b9663ebf657eac35c4c9a19183420c05728f31a6761d","impliedFormat":1},{"version":"f3d8c757e148ad968f0d98697987db363070abada5f503da3c06aefd9d4248c1","impliedFormat":1},{"version":"96d14f21b7652903852eef49379d04dbda28c16ed36468f8c9fa08f7c14c9538","impliedFormat":1},{"version":"921394bdf2d9f67c9e30d98c4b1c56a899ac06770e5ce3389f95b6b85a58e009","affectsGlobalScope":true,"impliedFormat":1},{"version":"6fa90b705a01002f5ad698417243165eab6cf568d0b2586c2041dd807515c61e","affectsGlobalScope":true,"impliedFormat":1},{"version":"420845f2661ac73433cbdc45f36d1f7ca7ea4eca60c3cbd077adf3355387cb63","impliedFormat":99},{"version":"7fa8d75d229eeaee235a801758d9c694e94405013fe77d5d1dd8e3201fc414f1","impliedFormat":1}],"root":[[502,504],[506,508],[511,513],[547,555],[558,563],[1294,1300],[1302,1304],[1339,1383],1386,[1389,1398],[1403,1408],[1610,1635],[1638,1645],[1767,1775],[1777,1830],[1832,1926],1930,[1951,2173]],"options":{"allowJs":true,"esModuleInterop":true,"jsx":4,"module":99,"noImplicitAny":false,"skipLibCheck":true,"strict":false,"target":4},"referencedMap":[[502,1],[2173,2],[503,3],[504,4],[1301,1],[1257,1],[261,1],[1219,5],[1241,1],[1242,1],[1151,6],[1141,7],[1221,8],[1239,1],[1189,9],[847,10],[1212,9],[1183,5],[1250,11],[1159,12],[1213,13],[1119,14],[1223,5],[1210,10],[1136,5],[1228,15],[1135,9],[1218,10],[1145,9],[1165,16],[1118,17],[1194,18],[1138,5],[1237,5],[1181,19],[1146,6],[1127,6],[1124,6],[1217,20],[1191,8],[1186,16],[1166,21],[1154,22],[1248,8],[1214,5],[1147,6],[1161,11],[1162,8],[1163,8],[1140,23],[1125,9],[1164,10],[1173,24],[1247,7],[1126,10],[1251,25],[1192,26],[1167,16],[1225,10],[1116,6],[1148,6],[1137,6],[1246,10],[1230,16],[1240,27],[1202,10],[1195,10],[1249,10],[1198,28],[1200,29],[1201,10],[1196,10],[1160,9],[1203,8],[1231,16],[1149,6],[1143,5],[1128,9],[1243,7],[1144,5],[1153,6],[1204,10],[1235,5],[1120,10],[1238,27],[1168,30],[1117,17],[1245,5],[1244,5],[1211,15],[1208,10],[1134,9],[1209,10],[849,10],[848,10],[1236,18],[1205,11],[1222,10],[1234,16],[1207,10],[1226,6],[1206,1],[1229,10],[1142,9],[1224,5],[1193,31],[1220,32],[1227,10],[1174,7],[1176,33],[1139,10],[1121,34],[1123,35],[1169,16],[1150,6],[1133,36],[1190,16],[1152,18],[1185,16],[1178,1],[1188,9],[1179,16],[1184,7],[1177,27],[1216,37],[1122,38],[1187,16],[1172,11],[1171,39],[1233,40],[1215,1],[838,7],[1293,41],[1197,27],[1199,11],[1232,11],[840,16],[1290,42],[1259,43],[1291,44],[1258,15],[839,45],[1292,46],[845,30],[842,7],[1253,16],[1254,47],[844,7],[1255,48],[843,49],[846,9],[841,1],[1252,16],[1256,48],[822,50],[823,51],[826,52],[824,53],[820,54],[825,55],[819,56],[821,57],[831,58],[827,59],[829,60],[830,61],[832,62],[1664,63],[1663,64],[1660,1],[1932,65],[1931,1],[1933,66],[1947,67],[1935,68],[1948,68],[1936,69],[1937,70],[1938,70],[1949,70],[1941,70],[1942,70],[1943,70],[1945,70],[1946,70],[1939,70],[1940,70],[1944,70],[1950,71],[1934,66],[1591,72],[1592,73],[1590,74],[1419,75],[1568,1],[1426,76],[1569,77],[1420,76],[1571,78],[1535,79],[1412,80],[1422,1],[1572,81],[1431,1],[1573,82],[1537,83],[1574,84],[1560,85],[1561,86],[1570,87],[1427,88],[1563,1],[1430,89],[1575,1],[1562,90],[1432,91],[1434,92],[1576,93],[1564,1],[1565,94],[1429,95],[1566,96],[1577,97],[1410,1],[1578,1],[1536,90],[1567,83],[1448,98],[1489,1],[1579,76],[1534,99],[1587,100],[1588,101],[1413,87],[1582,102],[1593,103],[1583,104],[1594,105],[1585,106],[1586,107],[1584,97],[1425,87],[1428,1],[1461,1],[1424,1],[1595,1],[1459,1],[1435,1],[1441,1],[1478,1],[1470,1],[1409,1],[1543,1],[1545,1],[1433,1],[1474,1],[1452,1],[1414,1],[1597,1],[1596,1],[1550,1],[1499,1],[1436,1],[1589,108],[1604,109],[1605,110],[1504,111],[1500,112],[1551,113],[1553,114],[1552,115],[1501,116],[1554,117],[1502,118],[1491,119],[1492,120],[1496,121],[1494,122],[1493,123],[1495,124],[1498,125],[1497,126],[1555,127],[1559,128],[1503,129],[1509,130],[1508,131],[1510,132],[1505,133],[1506,134],[1511,135],[1521,136],[1512,137],[1513,138],[1514,139],[1515,140],[1518,141],[1517,142],[1519,143],[1516,144],[1520,145],[1524,146],[1526,147],[1525,148],[1523,149],[1522,150],[1533,151],[1527,152],[1528,153],[1530,154],[1529,155],[1531,156],[1532,157],[1556,158],[1558,159],[1557,160],[1507,161],[1538,162],[1540,163],[1539,162],[1541,1],[1580,164],[1440,165],[1437,166],[1438,167],[1439,168],[1542,169],[1451,170],[1453,171],[1457,172],[1455,173],[1454,1],[1456,1],[1460,174],[1581,170],[1458,1],[1490,175],[1548,176],[1423,76],[1544,177],[1444,167],[1445,178],[1446,179],[1442,1],[1443,1],[1450,180],[1488,181],[1481,182],[1485,183],[1473,184],[1462,185],[1463,186],[1464,87],[1465,185],[1469,187],[1468,162],[1471,188],[1472,186],[1467,189],[1477,1],[1480,190],[1479,191],[1476,192],[1475,193],[1482,180],[1484,194],[1483,193],[1486,178],[1547,195],[1546,196],[1415,102],[1416,197],[1417,1],[1421,1],[1549,198],[1487,199],[1466,1],[1411,200],[1447,1],[1449,201],[1418,1],[1598,202],[1599,203],[1600,204],[1601,205],[1603,1],[1602,206],[1608,207],[1606,208],[1607,209],[1609,210],[2174,1],[2175,1],[2176,1],[2177,211],[1649,1],[2179,212],[1650,213],[2178,1],[2180,1],[2181,1],[2182,1],[2183,1],[2184,1],[141,214],[142,214],[143,215],[97,216],[144,217],[145,218],[146,219],[92,1],[95,220],[93,1],[94,1],[147,221],[148,222],[149,223],[150,224],[151,225],[152,226],[153,226],[154,227],[155,228],[156,229],[157,230],[98,1],[96,1],[158,231],[159,232],[160,233],[192,234],[161,235],[162,236],[163,237],[164,238],[165,239],[166,240],[167,241],[168,242],[169,243],[170,244],[171,244],[172,245],[173,1],[174,246],[176,247],[175,248],[177,249],[178,250],[179,251],[180,252],[181,253],[182,254],[183,255],[184,256],[185,257],[186,258],[187,259],[188,260],[189,261],[99,1],[100,1],[101,1],[140,262],[190,263],[191,264],[2185,1],[196,265],[408,7],[197,266],[195,7],[409,267],[814,7],[193,268],[406,1],[194,269],[83,1],[85,270],[405,7],[278,7],[2186,1],[813,271],[2187,271],[674,272],[587,273],[673,274],[672,275],[675,276],[586,277],[676,278],[677,279],[678,280],[679,281],[680,281],[681,281],[682,280],[683,281],[686,282],[687,283],[684,1],[685,284],[688,285],[653,286],[575,287],[690,288],[691,289],[652,290],[692,291],[564,1],[568,292],[601,293],[693,1],[599,1],[600,1],[694,294],[695,295],[696,296],[569,297],[570,298],[565,1],[671,299],[670,300],[604,301],[697,302],[698,1],[622,1],[623,303],[699,304],[588,305],[589,306],[590,307],[591,308],[700,309],[702,310],[703,311],[704,312],[705,311],[711,313],[701,312],[706,312],[707,311],[708,312],[709,311],[710,312],[712,1],[713,1],[802,314],[714,315],[715,316],[716,295],[717,295],[718,295],[720,317],[719,295],[722,318],[723,295],[724,319],[737,320],[725,318],[726,321],[727,318],[728,295],[721,295],[729,295],[730,322],[731,295],[732,318],[733,295],[734,295],[735,323],[736,295],[739,324],[741,325],[742,326],[743,327],[744,328],[747,329],[748,325],[750,330],[751,331],[754,332],[755,333],[757,334],[758,335],[759,336],[746,337],[745,338],[749,339],[634,340],[761,341],[633,342],[753,343],[752,344],[762,336],[764,345],[763,346],[767,347],[768,348],[769,349],[770,1],[771,350],[772,351],[773,352],[774,348],[775,348],[776,348],[766,353],[777,1],[765,354],[778,355],[779,356],[780,357],[609,358],[610,359],[666,360],[629,361],[611,362],[612,363],[613,364],[614,365],[615,366],[616,367],[617,365],[619,368],[618,365],[620,366],[621,358],[626,369],[625,370],[627,371],[628,358],[638,315],[596,372],[577,373],[576,374],[578,375],[572,376],[631,377],[781,378],[582,1],[583,379],[584,379],[585,379],[782,379],[592,380],[783,381],[784,1],[567,382],[573,383],[594,384],[571,385],[669,386],[593,387],[579,375],[760,375],[595,388],[566,389],[580,390],[574,391],[785,392],[581,275],[602,275],[786,393],[738,394],[787,395],[740,395],[788,289],[654,396],[789,394],[668,397],[756,398],[630,399],[598,400],[597,294],[803,1],[804,401],[624,402],[805,403],[660,404],[661,405],[806,406],[639,407],[662,408],[663,409],[807,410],[640,1],[808,411],[809,1],[647,412],[664,413],[649,1],[646,414],[665,415],[641,1],[648,416],[810,1],[650,417],[642,418],[644,419],[645,420],[643,421],[791,422],[793,423],[689,424],[659,425],[632,426],[657,427],[811,428],[658,429],[635,430],[636,430],[637,431],[794,316],[795,432],[796,432],[605,433],[606,316],[790,433],[792,433],[667,433],[603,316],[656,434],[797,316],[607,375],[608,435],[799,436],[798,316],[801,437],[812,438],[800,1],[2188,1],[651,1],[1287,439],[1286,440],[1265,441],[1268,442],[1269,443],[1266,444],[1267,1],[1272,445],[1270,446],[1262,447],[1264,448],[1271,449],[1263,448],[1261,450],[1260,1],[1284,451],[1283,441],[1273,441],[1285,452],[1282,453],[1288,454],[1274,455],[1275,453],[1281,453],[1280,453],[1279,453],[1276,453],[1278,453],[1277,453],[1289,456],[655,1],[102,1],[1157,457],[1156,1],[1158,458],[1155,27],[556,1],[1637,459],[84,1],[1761,1],[1180,1],[1387,460],[1388,461],[1305,1],[1313,462],[1307,463],[1314,1],[1336,464],[1311,465],[1335,466],[1332,467],[1315,468],[1316,1],[1309,1],[1306,1],[1337,469],[1333,470],[1317,1],[1334,471],[1318,472],[1320,473],[1321,474],[1310,475],[1322,476],[1323,475],[1325,476],[1326,477],[1327,478],[1329,479],[1324,480],[1330,481],[1331,482],[1308,483],[1328,484],[1312,485],[1319,1],[1338,486],[1401,487],[1402,488],[514,1],[518,1],[519,1],[515,1],[516,1],[517,1],[520,1],[521,1],[522,1],[523,1],[524,1],[525,1],[545,1],[526,1],[527,489],[546,490],[528,491],[529,1],[531,1],[530,1],[532,1],[533,1],[534,1],[535,1],[536,1],[539,1],[537,1],[538,1],[540,1],[541,1],[542,1],[543,1],[544,491],[1170,1],[1689,1],[510,492],[509,1],[505,7],[1132,493],[1129,27],[1130,27],[1131,494],[1400,495],[1831,496],[1399,1],[1776,497],[450,498],[455,499],[445,500],[227,501],[265,502],[432,503],[260,504],[242,1],[220,1],[225,1],[422,505],[291,506],[226,1],[219,507],[268,508],[269,509],[404,510],[419,511],[315,512],[426,513],[427,514],[425,515],[424,1],[423,516],[267,517],[228,518],[358,1],[359,519],[251,520],[229,521],[296,520],[293,520],[206,520],[263,522],[262,1],[431,523],[441,1],[213,1],[380,524],[381,525],[375,7],[478,1],[383,1],[384,526],[376,527],[483,528],[482,529],[477,1],[474,1],[418,530],[417,1],[476,531],[377,7],[217,532],[214,533],[216,1],[479,1],[475,1],[481,534],[480,1],[215,535],[469,536],[472,537],[303,538],[302,539],[301,540],[486,7],[300,541],[285,1],[489,1],[1928,542],[1927,1],[492,1],[491,7],[493,543],[199,1],[428,544],[429,545],[430,546],[212,1],[253,1],[211,547],[198,1],[396,7],[204,548],[395,549],[394,550],[385,1],[386,1],[393,1],[388,1],[391,551],[387,1],[389,552],[392,553],[390,552],[224,1],[209,1],[210,520],[273,1],[279,554],[280,555],[277,556],[275,557],[276,558],[271,1],[402,526],[318,526],[449,559],[456,560],[460,561],[435,562],[434,1],[288,1],[494,563],[444,564],[378,565],[379,566],[373,567],[364,1],[401,568],[365,569],[403,570],[398,571],[397,1],[399,1],[370,1],[357,572],[436,573],[437,574],[367,575],[371,576],[362,577],[414,578],[443,579],[295,580],[334,581],[207,582],[442,583],[203,584],[281,585],[272,1],[282,586],[346,587],[270,1],[345,588],[91,1],[339,589],[252,1],[360,590],[335,1],[208,1],[246,1],[343,591],[223,1],[283,592],[369,593],[433,594],[368,1],[342,1],[274,1],[348,595],[349,596],[221,1],[351,597],[353,598],[352,599],[255,1],[341,582],[355,600],[340,601],[347,602],[231,1],[235,1],[234,1],[233,1],[238,1],[232,1],[240,1],[237,1],[236,1],[239,1],[241,603],[230,1],[327,604],[326,1],[332,605],[328,606],[331,607],[330,607],[333,605],[329,606],[250,608],[319,609],[440,610],[495,1],[464,611],[466,612],[366,613],[465,614],[438,573],[382,573],[222,1],[320,615],[247,616],[248,617],[249,618],[245,619],[413,619],[297,619],[321,620],[298,620],[244,621],[243,1],[325,622],[324,623],[323,624],[322,625],[439,626],[412,627],[411,628],[374,629],[407,630],[410,631],[421,632],[420,633],[416,634],[314,635],[316,636],[313,637],[354,638],[344,1],[454,1],[356,639],[415,1],[284,640],[363,544],[361,641],[286,642],[289,643],[490,1],[287,644],[290,644],[452,1],[451,1],[453,1],[488,1],[292,645],[311,646],[218,647],[266,1],[202,648],[317,1],[458,7],[201,1],[468,649],[310,7],[462,526],[309,650],[447,651],[308,649],[205,1],[470,652],[306,7],[307,7],[299,1],[200,1],[305,653],[304,654],[254,655],[372,243],[294,243],[350,1],[337,656],[336,1],[400,535],[312,7],[448,657],[86,7],[89,658],[90,659],[87,7],[88,1],[264,660],[259,661],[258,1],[257,662],[256,1],[446,663],[457,664],[459,665],[461,666],[1929,667],[463,668],[467,669],[501,670],[471,670],[500,671],[473,672],[484,673],[485,674],[487,675],[496,676],[499,547],[498,1],[497,677],[1636,1],[1384,7],[1385,678],[828,1],[1678,1],[1676,679],[1680,680],[1741,681],[1736,682],[1658,683],[1707,684],[1702,685],[1757,686],[1706,687],[1699,688],[1740,689],[1737,690],[1692,691],[1701,692],[1742,693],[1743,693],[1744,694],[1752,695],[1746,695],[1754,695],[1758,695],[1745,695],[1747,695],[1750,695],[1753,695],[1749,696],[1751,695],[1755,697],[1748,697],[1653,698],[1723,7],[1720,699],[1724,7],[1716,695],[1654,695],[1714,700],[1657,701],[1672,702],[1719,703],[1722,695],[1655,7],[1721,704],[1647,7],[1646,7],[1666,7],[1765,705],[1764,706],[1766,707],[1731,1],[1729,1],[1733,708],[1732,709],[1728,710],[1730,711],[1734,712],[1735,713],[1727,7],[1671,714],[1648,695],[1726,695],[1679,715],[1725,695],[1700,714],[1756,695],[1694,716],[1711,717],[1667,718],[1703,719],[1688,720],[1668,716],[1695,721],[1665,722],[1697,723],[1698,724],[1693,725],[1696,726],[1675,727],[1710,728],[1708,729],[1709,730],[1705,731],[1712,732],[1677,733],[1682,734],[1669,735],[1686,736],[1687,737],[1683,738],[1670,739],[1673,740],[1704,724],[1652,741],[1763,1],[1681,742],[1713,743],[1738,1],[1759,1],[1690,1],[1717,1],[1691,1],[1762,744],[1674,745],[1739,746],[1684,1],[1715,747],[1718,1],[1685,1],[1760,1],[1656,7],[1662,748],[1659,1],[1661,1],[338,749],[1175,1],[557,1],[1182,27],[882,27],[883,27],[885,750],[884,27],[910,751],[930,752],[927,752],[924,753],[920,1],[921,753],[922,753],[931,753],[929,752],[925,753],[926,1],[928,752],[923,27],[990,754],[989,27],[991,755],[992,1],[1112,27],[1110,27],[1111,27],[1109,27],[1113,27],[1047,27],[1048,27],[1046,27],[1044,27],[1045,27],[1049,27],[881,27],[877,27],[876,27],[873,27],[878,27],[880,27],[875,27],[879,27],[874,27],[984,27],[982,27],[985,27],[894,27],[981,756],[980,27],[983,27],[986,27],[988,757],[1101,27],[1104,27],[1102,27],[1106,27],[1105,27],[1103,27],[1115,758],[1039,27],[1040,27],[1041,27],[1042,759],[1114,1],[975,760],[1108,27],[1107,1],[1100,761],[1095,762],[1096,27],[1099,763],[1094,27],[1097,763],[1098,762],[1079,27],[1068,27],[1081,27],[1065,27],[1075,27],[1057,27],[1058,27],[1072,27],[972,27],[1067,27],[1050,27],[987,27],[1074,27],[974,764],[1086,765],[1059,766],[973,27],[1084,27],[1077,27],[1062,27],[1071,27],[1052,27],[1092,27],[1083,27],[1066,27],[1082,27],[1055,27],[1053,767],[1080,768],[1091,27],[1087,27],[1093,27],[1088,27],[1073,27],[1064,27],[1089,27],[1054,27],[1078,27],[1076,27],[1051,27],[1085,27],[1063,27],[1090,27],[1061,27],[1060,769],[1070,27],[1056,27],[1069,27],[915,27],[916,27],[911,27],[917,1],[919,27],[912,27],[914,27],[918,770],[913,1],[851,27],[853,27],[854,27],[859,27],[850,27],[855,27],[852,27],[863,27],[856,27],[857,1],[862,27],[860,771],[861,767],[858,1],[869,27],[871,27],[870,27],[872,27],[886,27],[900,27],[891,27],[895,772],[893,27],[888,773],[897,27],[896,774],[889,773],[890,27],[898,27],[892,27],[899,773],[1043,27],[948,775],[953,776],[964,777],[946,775],[936,775],[950,775],[957,778],[955,775],[942,779],[938,780],[939,775],[935,781],[954,775],[943,775],[932,27],[961,775],[962,775],[951,775],[945,775],[934,782],[940,775],[959,775],[944,775],[958,783],[960,784],[947,775],[949,775],[965,775],[864,27],[865,27],[866,27],[867,27],[993,785],[952,785],[994,786],[995,785],[996,1],[997,785],[909,27],[998,1],[999,27],[1000,27],[963,785],[1001,785],[1003,785],[937,1],[1002,1],[956,27],[941,1],[1005,1],[1006,27],[1007,1],[1004,27],[1008,785],[1009,27],[1010,1],[1011,785],[1012,1],[1013,1],[1014,1],[1015,27],[1016,1],[1017,1],[1018,27],[1019,1],[1020,1],[1021,1],[1022,785],[1026,1],[1023,27],[1027,27],[1024,27],[1025,27],[1028,1],[1029,1],[1030,1],[1031,27],[1032,27],[933,27],[1033,1],[1034,785],[1035,1],[1036,1],[1037,27],[1038,1],[868,1],[887,1],[907,27],[908,27],[903,27],[904,27],[901,27],[906,27],[905,27],[902,27],[966,760],[968,787],[969,27],[970,27],[971,27],[976,788],[977,760],[967,27],[979,789],[978,790],[81,1],[82,1],[13,1],[14,1],[16,1],[15,1],[2,1],[17,1],[18,1],[19,1],[20,1],[21,1],[22,1],[23,1],[24,1],[3,1],[25,1],[26,1],[4,1],[27,1],[31,1],[28,1],[29,1],[30,1],[32,1],[33,1],[34,1],[5,1],[35,1],[36,1],[37,1],[38,1],[6,1],[42,1],[39,1],[40,1],[41,1],[43,1],[7,1],[44,1],[49,1],[50,1],[45,1],[46,1],[47,1],[48,1],[8,1],[54,1],[51,1],[52,1],[53,1],[55,1],[9,1],[56,1],[57,1],[58,1],[60,1],[59,1],[61,1],[62,1],[10,1],[63,1],[64,1],[65,1],[11,1],[66,1],[67,1],[68,1],[69,1],[70,1],[1,1],[71,1],[72,1],[12,1],[76,1],[74,1],[79,1],[78,1],[73,1],[77,1],[75,1],[80,1],[118,791],[128,792],[117,791],[138,793],[109,794],[108,795],[137,677],[131,796],[136,797],[111,798],[125,799],[110,800],[134,801],[106,802],[105,677],[135,803],[107,804],[112,805],[113,1],[116,805],[103,1],[139,806],[129,807],[120,808],[121,809],[123,810],[119,811],[122,812],[132,677],[114,813],[115,814],[124,815],[104,816],[127,807],[126,805],[130,1],[133,817],[833,1],[836,1],[837,818],[834,819],[835,820],[1651,821],[817,822],[816,823],[818,823],[815,1],[1957,824],[1960,825],[1961,826],[1962,827],[1963,828],[1964,829],[1965,830],[1967,831],[1968,832],[1969,833],[1970,834],[1971,835],[1972,836],[1973,837],[1974,838],[1975,839],[1977,840],[1959,841],[1979,842],[1980,843],[1981,844],[1982,845],[1983,846],[1984,847],[1986,848],[1987,849],[1988,850],[1989,851],[1990,852],[1991,853],[1992,854],[1993,855],[1995,856],[1996,857],[1997,858],[1998,859],[1985,841],[1999,841],[2002,860],[2004,861],[2005,862],[2008,863],[2009,864],[506,865],[2010,866],[2012,867],[2013,868],[2014,869],[2017,870],[2019,871],[2011,841],[1958,841],[2022,872],[2023,873],[2025,874],[2024,875],[2021,841],[2026,876],[2027,877],[2029,878],[2028,879],[2031,880],[2032,881],[2033,882],[2030,841],[2035,883],[2036,884],[2037,885],[2034,841],[2038,886],[2039,887],[2040,888],[2042,889],[2043,890],[2041,841],[2044,891],[2045,892],[2047,893],[2048,894],[2049,895],[2050,896],[2051,897],[2052,898],[2053,899],[2054,900],[2055,901],[2056,902],[2057,903],[2058,904],[2059,905],[2060,906],[2061,907],[2062,908],[2063,909],[2064,910],[2065,911],[2066,912],[2046,841],[2068,913],[2071,914],[2072,915],[2070,916],[2073,917],[2076,918],[2074,919],[2077,920],[2078,921],[2069,841],[2079,922],[2082,923],[2083,924],[2084,925],[2085,926],[2086,927],[2087,928],[2081,929],[2088,930],[2089,931],[2092,932],[2091,933],[2090,934],[2093,935],[2080,841],[2094,936],[2096,937],[2097,938],[2098,939],[2099,940],[2095,941],[2100,841],[2102,942],[2103,942],[2105,943],[2106,944],[2107,945],[2108,946],[2109,947],[2110,948],[2111,949],[2104,841],[2020,841],[2113,950],[2114,951],[2115,952],[2116,953],[2117,954],[2118,955],[2112,841],[2120,956],[2121,957],[2122,958],[2123,959],[2119,841],[2125,960],[2124,841],[2127,961],[2128,962],[2129,963],[2130,964],[2131,965],[2126,841],[2132,966],[2134,967],[2135,968],[2136,969],[2137,970],[2138,971],[2139,972],[2140,973],[2141,974],[2142,975],[2133,841],[2143,976],[2145,977],[2146,978],[2147,979],[2148,980],[2149,981],[2150,982],[2151,983],[2152,984],[2153,985],[2144,841],[2154,986],[2155,987],[2156,988],[2157,989],[2159,990],[2158,991],[2160,992],[2161,993],[2162,994],[2163,841],[2164,995],[2165,996],[2166,997],[1925,526],[1926,526],[1952,998],[1953,999],[2168,1000],[2167,1001],[1623,1002],[2169,1003],[1403,1004],[560,1003],[1295,1003],[1405,1005],[1404,1006],[1808,1007],[1406,1003],[559,1003],[1966,1003],[1407,1003],[561,1003],[1294,1008],[1777,1009],[1408,1003],[1611,1010],[1612,1003],[1296,1003],[1617,1011],[562,1003],[563,1003],[1976,1003],[1978,1003],[1613,1003],[1614,1003],[1615,1010],[1610,1012],[1616,1010],[1771,1013],[1641,1014],[1642,1014],[1640,1003],[1770,1014],[1638,1015],[1639,1014],[1768,1016],[1767,1017],[507,64],[1644,1018],[1645,1019],[1774,1020],[1643,1014],[1769,1013],[1772,1013],[1773,1013],[1368,1021],[1365,1022],[1366,1023],[513,526],[1364,1024],[547,526],[1363,1025],[1362,1025],[1357,1026],[548,526],[1358,1025],[1359,1022],[1994,1027],[1367,1022],[1360,1022],[1361,1027],[2170,1003],[508,64],[511,1028],[512,526],[1789,1029],[1391,1030],[1377,1031],[1303,1032],[1302,526],[1304,526],[1339,1033],[1340,1033],[1341,526],[1836,1034],[1805,1035],[1386,1036],[1389,1037],[1892,1038],[1342,64],[1383,1039],[1390,1029],[1786,1040],[1781,1041],[1784,1042],[1794,1029],[1300,1043],[2003,1044],[1904,1045],[2001,1046],[1908,1047],[1911,1048],[1909,1049],[1910,1050],[1620,1051],[1619,1052],[1626,1003],[1627,1003],[2171,1053],[1343,1054],[2101,1003],[1954,1055],[1349,526],[2015,1056],[1955,1057],[2006,1058],[1350,526],[2000,1059],[1956,1060],[1344,526],[1346,1061],[1347,1061],[2007,1062],[1348,526],[2016,1063],[2018,1064],[1356,1065],[1382,1066],[1370,1067],[1375,1068],[1376,1069],[1378,1070],[1379,1071],[1380,1072],[1381,1073],[1830,526],[1395,1074],[1396,1075],[1397,1074],[1398,1076],[1622,1077],[1618,1078],[1624,1079],[1625,1080],[1628,1081],[1629,1082],[1630,1083],[1631,1084],[1632,1084],[1633,1085],[1634,1086],[1635,1087],[1775,1088],[1778,64],[1780,1089],[1779,1090],[1782,1091],[1783,1092],[1785,1093],[1787,1094],[1788,1095],[1790,1096],[1791,1097],[1793,1098],[1795,1099],[1799,1100],[1796,1101],[1797,526],[1800,1102],[1801,1103],[1802,1104],[1803,1105],[1804,1106],[1806,1107],[1807,1108],[1809,64],[1812,1109],[1811,1110],[1810,1111],[2067,1112],[1813,1113],[1815,1114],[1816,1114],[1817,1115],[1821,1116],[1822,1117],[2075,1118],[1823,1119],[1824,1120],[1825,1121],[1826,1122],[1828,1123],[1829,1124],[1834,1125],[1835,1126],[1837,1127],[1838,1128],[1840,1129],[1842,1130],[1841,526],[1843,1131],[1844,1132],[1845,1133],[1846,1134],[1847,1068],[1848,1135],[1849,1136],[1850,1123],[1851,1137],[1852,1138],[1853,1139],[1854,1129],[1855,1140],[1863,1141],[1856,1142],[1857,1143],[1858,1144],[1859,1145],[1860,1146],[1861,1144],[1862,1144],[1871,1147],[1865,1148],[1866,1149],[1867,1150],[1868,1151],[1869,1152],[1870,1148],[1881,1153],[1876,1154],[1877,1154],[1879,1155],[1880,1154],[1883,1156],[1882,1157],[1890,1158],[1884,1159],[1885,1160],[1886,1106],[1887,1106],[1888,1161],[1889,1106],[1901,1162],[1891,1163],[1893,1164],[1894,1165],[1895,1166],[1896,1165],[1897,1167],[1898,1168],[1899,1169],[1900,1170],[1930,1171],[1373,1172],[1392,1003],[1833,1173],[1872,1174],[1819,1175],[1818,526],[1814,1176],[1827,1177],[1371,1178],[1393,1174],[1864,1174],[1792,1174],[1873,1179],[1878,1180],[1820,1174],[2172,1181],[1902,526],[1372,1002],[1839,1182],[1351,1003],[1832,1183],[550,64],[1374,1184],[1903,1185],[1905,1186],[1906,1187],[1798,526],[1907,1187],[1912,1188],[1913,1189],[1875,1187],[1394,64],[1874,64],[1369,1190],[1916,1191],[1917,1192],[1918,1193],[1919,1191],[1915,1194],[1914,64],[558,1195],[1297,1196],[555,1194],[552,1194],[1299,1197],[553,1194],[1298,1194],[554,1194],[551,1198],[1352,1194],[1353,1194],[1354,1194],[1355,1199],[1920,64],[1951,1200],[1921,526],[549,1201],[1922,64],[1923,64],[1621,64],[1345,64],[1924,64]],"semanticDiagnosticsPerFile":[[2152,[{"start":9751,"length":16,"code":2322,"category":1,"messageText":{"messageText":"Type '{ background: { variant: \"downward-rays-animated-grid\"; }; tag: string; tagIcon: ForwardRefExoticComponent<Omit<LucideProps, \"ref\"> & RefAttributes<SVGSVGElement>>; ... 7 more ...; showMarqueeCard: boolean; }' is not assignable to type 'IntrinsicAttributes & HeroBillboardScrollProps'.","category":1,"code":2322,"next":[{"messageText":"Property 'mediaAspectRatio' does not exist on type 'IntrinsicAttributes & HeroBillboardScrollProps'.","category":1,"code":2339}]}}]],[2159,[{"start":3830,"length":12,"code":2322,"category":1,"messageText":{"messageText":"Type '{ title: string; description: string; tag: string; tagIcon: ForwardRefExoticComponent<Omit<LucideProps, \"ref\"> & RefAttributes<SVGSVGElement>>; ... 8 more ...; showMarqueeCard: boolean; }' is not assignable to type 'IntrinsicAttributes & HeroBillboardRotatedCarouselProps'.","category":1,"code":2322,"next":[{"messageText":"Property 'marqueeItems' does not exist on type 'IntrinsicAttributes & HeroBillboardRotatedCarouselProps'.","category":1,"code":2339}]}},{"start":9801,"length":17,"code":2322,"category":1,"messageText":{"messageText":"Type '{ title: string; description: string; tag: string; tagIcon: ForwardRefExoticComponent<Omit<LucideProps, \"ref\"> & RefAttributes<SVGSVGElement>>; ... 7 more ...; cardDescriptionClassName: string; }' is not assignable to type 'IntrinsicAttributes & FeatureCardOneProps'.","category":1,"code":2322,"next":[{"messageText":"Property 'showVerifiedBadge' does not exist on type 'IntrinsicAttributes & FeatureCardOneProps'.","category":1,"code":2339}]}}]]],"affectedFilesPendingEmit":[2173,504,1957,1960,1961,1962,1963,1964,1965,1967,1968,1969,1970,1971,1972,1973,1974,1975,1977,1959,1979,1980,1981,1982,1983,1984,1986,1987,1988,1989,1990,1991,1992,1993,1995,1996,1997,1998,1985,1999,2002,2004,2005,2008,2009,506,2010,2012,2013,2014,2017,2019,2011,1958,2022,2023,2025,2024,2021,2026,2027,2029,2028,2031,2032,2033,2030,2035,2036,2037,2034,2038,2039,2040,2042,2043,2041,2044,2045,2047,2048,2049,2050,2051,2052,2053,2054,2055,2056,2057,2058,2059,2060,2061,2062,2063,2064,2065,2066,2046,2068,2071,2072,2070,2073,2076,2074,2077,2078,2069,2079,2082,2083,2084,2085,2086,2087,2081,2088,2089,2092,2091,2090,2093,2080,2094,2096,2097,2098,2099,2095,2100,2102,2103,2105,2106,2107,2108,2109,2110,2111,2104,2020,2113,2114,2115,2116,2117,2118,2112,2120,2121,2122,2123,2119,2125,2124,2127,2128,2129,2130,2131,2126,2132,2134,2135,2136,2137,2138,2139,2140,2141,2142,2133,2143,2145,2146,2147,2148,2149,2150,2151,2152,2153,2144,2154,2155,2156,2157,2159,2158,2160,2161,2162,2163,2164,2165,2166,1925,1926,1952,1953,2168,2167,1623,2169,1403,560,1295,1405,1404,1808,1406,559,1966,1407,561,1294,1777,1408,1611,1612,1296,1617,562,563,1976,1978,1613,1614,1615,1610,1616,1771,1641,1642,1640,1770,1638,1639,1768,1767,507,1644,1645,1774,1643,1769,1772,1773,1368,1365,1366,513,1364,547,1363,1362,1357,548,1358,1359,1994,1367,1360,1361,2170,508,511,512,1789,1391,1377,1303,1302,1304,1339,1340,1341,1836,1805,1386,1389,1892,1342,1383,1390,1786,1781,1784,1794,1300,2003,1904,2001,1908,1911,1909,1910,1620,1619,1626,1627,2171,1343,2101,1954,1349,2015,1955,2006,1350,2000,1956,1344,1346,1347,2007,1348,2016,2018,1356,1382,1370,1375,1376,1378,1379,1380,1381,1830,1395,1396,1397,1398,1622,1618,1624,1625,1628,1629,1630,1631,1632,1633,1634,1635,1775,1778,1780,1779,1782,1783,1785,1787,1788,1790,1791,1793,1795,1799,1796,1797,1800,1801,1802,1803,1804,1806,1807,1809,1812,1811,1810,2067,1813,1815,1816,1817,1821,1822,2075,1823,1824,1825,1826,1828,1829,1834,1835,1837,1838,1840,1842,1841,1843,1844,1845,1846,1847,1848,1849,1850,1851,1852,1853,1854,1855,1863,1856,1857,1858,1859,1860,1861,1862,1871,1865,1866,1867,1868,1869,1870,1881,1876,1877,1879,1880,1883,1882,1890,1884,1885,1886,1887,1888,1889,1901,1891,1893,1894,1895,1896,1897,1898,1899,1900,1930,1373,1392,1833,1872,1819,1818,1814,1827,1371,1393,1864,1792,1873,1878,1820,2172,1902,1372,1839,1351,1832,550,1374,1903,1905,1906,1798,1907,1912,1913,1875,1394,1874,1369,1916,1917,1918,1919,1915,1914,558,1297,555,552,1299,553,1298,554,551,1352,1353,1354,1355,1920,1951,1921,549,1922,1923,1621,1345,1924],"version":"5.9.3"}
\ No newline at end of file
diff --git a/vercel.json b/vercel.json
new file mode 100644
index 0000000..81489ad
--- /dev/null
+++ b/vercel.json
@@ -0,0 +1,5 @@
+{
+  "installCommand": "npm ci",
+  "buildCommand": "npm run build",
+  "outputDirectory": ".next"
+}
\ No newline at end of file