commit ecb043f83b505468aa87148581b89e85a575d5a9
Author: vitalijmulika <vitalijmulika@gmail.com>
Date:   Mon Dec 15 11:53:22 2025 +0200

    Initial commit

diff --git a/.gitea/workflows/build.yml b/.gitea/workflows/build.yml
new file mode 100644
index 0000000..bebe879
--- /dev/null
+++ b/.gitea/workflows/build.yml
@@ -0,0 +1,51 @@
+name: Build
+
+on:
+  workflow_dispatch:
+    inputs:
+      branch:
+        description: 'Branch to build'
+        required: true
+        default: 'main'
+
+permissions:
+  contents: read
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout branch
+        uses: actions/checkout@v3
+        with:
+          ref: ${{ gitea.event.inputs.branch }}
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 24
+
+      - name: Install dependencies
+        run: |
+          set -euo pipefail
+          npm ci 2>&1 | tee install.log
+
+      - name: Build (next build)
+        run: |
+          set -euo pipefail
+          npm run build 2>&1 | tee build.log
+
+      # Sanity check that Next produced the expected .next artifacts
+      - name: Verify .next exists
+        run: test -d .next || (echo "No .next folder. Check build logs above."; exit 1)
+
+      - name: Upload logs on failure
+        if: failure()
+        uses: actions/upload-artifact@v3
+        with:
+          name: build-logs
+          path: |
+            install.log
+            build.log
+          if-no-files-found: ignore
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..5ef6a52
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
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..1b7e225
--- /dev/null
+++ b/THEME_PROVIDER_OPTIONS.txt
@@ -0,0 +1,140 @@
+================================================================================
+                        THEME PROVIDER OPTIONS
+================================================================================
+
+PROPS (All Required except showBlurBottom)
+-------------------------------------------
+
+1. defaultButtonVariant
+   • "hover-magnetic"
+   • "hover-bubble"
+   • "expand-hover"
+   • "icon-arrow"
+   • "shift-hover"
+   • "text-stagger"
+
+2. defaultTextAnimation
+   • "entrance-slide"
+   • "reveal-blur"
+   • "background-highlight"
+
+3. borderRadius
+   • "sharp"
+   • "rounded"
+   • "soft"
+   • "pill"
+
+4. contentWidth
+   • "small"
+   • "medium"
+   • "large"
+
+5. sizing
+   • "small"
+   • "medium"
+   • "large"
+   • "mediumSizeExtraLargeTitles"
+   • "smallSizeLargeTitles"
+   • "largeSizeMediumTitles"
+   • "mediumSizeExtraLargeSpacing"
+   • "mediumSizeExtraSmallSpacing"
+   • "largeSizeExtraLargeSpacing"
+
+6. background
+   • "none"
+   • "plain"
+   • "grid"
+   • "dotGrid"
+   • "circleGradient"
+   • "aurora"
+   • "floatingGradient"
+   • "animatedGrid"
+   • "animatedAurora"
+   • "fluid"
+   • "radialGradient"
+   • "gradientBars"
+   • "noise"
+   • "noiseGradient"
+   • "noiseDiagonalGradient"
+
+7. cardStyle
+   • "solid"
+   • "solid-accent"
+   • "solid-accent-light"
+   • "outline"
+   • "outline-light"
+   • "glass-outline"
+   • "glass-outline-light"
+   • "elevated"
+   • "elevated-accent"
+   • "elevated-accent-light"
+   • "floating"
+   • "gradient-subtle"
+   • "gradient-mesh"
+   • "gradient-radial"
+   • "frosted-heavy"
+   • "neon-glow"
+   • "accent-corner-border"
+   • "inset"
+   • "spotlight"
+   • "shadow-colored"
+   • "glass-elevated"
+   • "glass-flat"
+   • "glass-depth"
+   • "gradient-bordered"
+   • "solid-bordered"
+   • "layered-gradient"
+   • "noise"
+   • "noise-gradient"
+
+8. primaryButtonStyle
+   • "gradient"
+   • "shadow"
+   • "flat"
+   • "layered-depth"
+   • "radial-glow"
+   • "diagonal-gradient"
+   • "neon-glow-border"
+   • "outline"
+
+9. secondaryButtonStyle
+   • "glass"
+   • "outline"
+   • "solid"
+   • "minimal"
+   • "layered"
+   • "radial-glow"
+
+10. headingFontWeight
+    • "light"
+    • "normal"
+    • "medium"
+    • "semibold"
+    • "bold"
+    • "extrabold"
+
+11. showBlurBottom (optional)
+    • true
+    • false (default)
+
+================================================================================
+
+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..4a0305f
--- /dev/null
+++ b/colorThemes.css
@@ -0,0 +1,1435 @@
+/* ============================================ */
+/* LIGHT THEME VARIANTS */
+/* ============================================ */
+
+/* Light Theme - Minimal */
+:root {
+  --background: #ffffff;
+  --card: #fcfcfc;
+  --foreground: #000000e6;
+  --primary-cta: #1a1a1a;
+  --secondary-cta: #ffffff;
+  --accent: #bebebe;
+  --background-accent: #c4c4c4;
+}
+
+/* Light Theme - Minimal Light Blue */
+:root[data-theme="minimal-light-blue"] {
+  --background: #ffffff;
+  --card: #fcfcfc;
+  --foreground: #000a18e6;
+  --primary-cta: #409fff;
+  --secondary-cta: #ffffff;
+  --accent: #e2e2e2;
+  --background-accent: #c4c4c4;
+}
+
+/* Light Theme - Minimal Dark Blue */
+:root[data-theme="minimal-dark-blue"] {
+  --background: #ffffff;
+  --card: #fcfcfc;
+  --foreground: #000612e6;
+  --primary-cta: #15479c;
+  --secondary-cta: #ffffff;
+  --accent: #e2e2e2;
+  --background-accent: #c4c4c4;
+}
+
+/* Light Theme - Minimal Light Green */
+:root[data-theme="minimal-light-green"] {
+  --background: #ffffff;
+  --card: #fcfcfc;
+  --foreground: #00120ae6;
+  --primary-cta: #15ad59;
+  --secondary-cta: #ffffff;
+  --accent: #e2e2e2;
+  --background-accent: #c4c4c4;
+}
+
+/* Light Theme - Minimal Dark Green */
+:root[data-theme="minimal-dark-green"] {
+  --background: #ffffff;
+  --card: #fcfcfc;
+  --foreground: #000f06e6;
+  --primary-cta: #0a7039;
+  --secondary-cta: #ffffff;
+  --accent: #e2e2e2;
+  --background-accent: #c4c4c4;
+}
+
+/* Light Theme - Minimal Light Red */
+:root[data-theme="minimal-light-red"] {
+  --background: #ffffff;
+  --card: #fcfcfc;
+  --foreground: #120006e6;
+  --primary-cta: #e63946;
+  --secondary-cta: #ffffff;
+  --accent: #e2e2e2;
+  --background-accent: #c4c4c4;
+}
+
+/* Light Theme - Minimal Dark Red */
+:root[data-theme="minimal-dark-red"] {
+  --background: #ffffff;
+  --card: #fcfcfc;
+  --foreground: #0f0003e6;
+  --primary-cta: #c1121f;
+  --secondary-cta: #ffffff;
+  --accent: #e2e2e2;
+  --background-accent: #c4c4c4;
+}
+
+/* Light Theme - Minimal Light Purple */
+:root[data-theme="minimal-light-purple"] {
+  --background: #ffffff;
+  --card: #fcfcfc;
+  --foreground: #0a0018e6;
+  --primary-cta: #8b5cf6;
+  --secondary-cta: #ffffff;
+  --accent: #e2e2e2;
+  --background-accent: #c4c4c4;
+}
+
+/* Light Theme - Minimal Dark Purple */
+:root[data-theme="minimal-dark-purple"] {
+  --background: #ffffff;
+  --card: #fcfcfc;
+  --foreground: #080015e6;
+  --primary-cta: #7c3aed;
+  --secondary-cta: #ffffff;
+  --accent: #e2e2e2;
+  --background-accent: #c4c4c4;
+}
+
+/* Light Theme - Minimal Light Orange */
+:root[data-theme="minimal-light-orange"] {
+  --background: #ffffff;
+  --card: #fcfcfc;
+  --foreground: #120a00e6;
+  --primary-cta: #ff8c42;
+  --secondary-cta: #ffffff;
+  --accent: #e2e2e2;
+  --background-accent: #c4c4c4;
+}
+
+/* Light Theme - Minimal Dark Orange */
+:root[data-theme="minimal-dark-orange"] {
+  --background: #ffffff;
+  --card: #fcfcfc;
+  --foreground: #0f0600e6;
+  --primary-cta: #e8590c;
+  --secondary-cta: #ffffff;
+  --accent: #e2e2e2;
+  --background-accent: #c4c4c4;
+}
+
+/* Light Theme - Minimal Light Cyan */
+:root[data-theme="minimal-light-cyan"] {
+  --background: #ffffff;
+  --card: #fcfcfc;
+  --foreground: #001212e6;
+  --primary-cta: #16d4f6;
+  --secondary-cta: #ffffff;
+  --accent: #e2e2e2;
+  --background-accent: #c4c4c4;
+}
+
+/* Light Theme - Minimal Dark Cyan */
+:root[data-theme="minimal-dark-cyan"] {
+  --background: #ffffff;
+  --card: #fcfcfc;
+  --foreground: #000f0fe6;
+  --primary-cta: #00c9e8;
+  --secondary-cta: #ffffff;
+  --accent: #e2e2e2;
+  --background-accent: #c4c4c4;
+}
+
+/* Light Theme - Minimal Light Yellow */
+:root[data-theme="minimal-light-yellow"] {
+  --background: #ffffff;
+  --card: #fcfcfc;
+  --foreground: #121200e6;
+  --primary-cta: #ffcf40;
+  --secondary-cta: #ffffff;
+  --accent: #e2e2e2;
+  --background-accent: #c4c4c4;
+}
+
+/* Light Theme - Minimal Dark Yellow */
+:root[data-theme="minimal-dark-yellow"] {
+  --background: #ffffff;
+  --card: #fcfcfc;
+  --foreground: #0f0f00e6;
+  --primary-cta: #ffae00;
+  --secondary-cta: #ffffff;
+  --accent: #e2e2e2;
+  --background-accent: #c4c4c4;
+}
+
+/* Light Theme - Brutalist Red */
+:root[data-theme="brutalist-red"] {
+  --background: #ffffff;
+  --card: #fafafa;
+  --foreground: #000000;
+  --primary-cta: #ff0000;
+  --secondary-cta: #ffffff;
+  --accent: #e5e5e5;
+  --background-accent: #f5f5f5;
+}
+
+/* Light Theme - Brutalist Blue */
+:root[data-theme="brutalist-blue"] {
+  --background: #ffffff;
+  --card: #fafafa;
+  --foreground: #000000;
+  --primary-cta: #0066ff;
+  --secondary-cta: #ffffff;
+  --accent: #e5e5e5;
+  --background-accent: #f5f5f5;
+}
+
+/* Light Theme - Brutalist Green */
+:root[data-theme="brutalist-green"] {
+  --background: #ffffff;
+  --card: #fafafa;
+  --foreground: #000000;
+  --primary-cta: #00cc00;
+  --secondary-cta: #ffffff;
+  --accent: #e5e5e5;
+  --background-accent: #f5f5f5;
+}
+
+/* Light Theme - Brutalist Purple */
+:root[data-theme="brutalist-purple"] {
+  --background: #ffffff;
+  --card: #fafafa;
+  --foreground: #000000;
+  --primary-cta: #9933ff;
+  --secondary-cta: #ffffff;
+  --accent: #e5e5e5;
+  --background-accent: #f5f5f5;
+}
+
+/* Light Theme - Brutalist Orange */
+:root[data-theme="brutalist-orange"] {
+  --background: #ffffff;
+  --card: #fafafa;
+  --foreground: #000000;
+  --primary-cta: #ff6600;
+  --secondary-cta: #ffffff;
+  --accent: #e5e5e5;
+  --background-accent: #f5f5f5;
+}
+
+/* Light Theme - Brutalist Cyan */
+:root[data-theme="brutalist-cyan"] {
+  --background: #ffffff;
+  --card: #fafafa;
+  --foreground: #000000;
+  --primary-cta: #00ccff;
+  --secondary-cta: #ffffff;
+  --accent: #e5e5e5;
+  --background-accent: #f5f5f5;
+}
+
+/* Light Theme - Brutalist Yellow */
+:root[data-theme="brutalist-yellow"] {
+  --background: #ffffff;
+  --card: #fafafa;
+  --foreground: #000000;
+  --primary-cta: #ffcc00;
+  --secondary-cta: #ffffff;
+  --accent: #e5e5e5;
+  --background-accent: #f5f5f5;
+}
+
+/* Light Theme - Brutalist Pink */
+:root[data-theme="brutalist-pink"] {
+  --background: #ffffff;
+  --card: #fafafa;
+  --foreground: #000000;
+  --primary-cta: #ff0066;
+  --secondary-cta: #ffffff;
+  --accent: #e5e5e5;
+  --background-accent: #f5f5f5;
+}
+
+/* Light Theme - Light Blue */
+:root[data-theme="light-blue"] {
+  --background: #f8fcff;
+  --card: #ffffff;
+  --foreground: #00101f;
+  --primary-cta: #409fff;
+  --secondary-cta: #ffffff;
+  --accent: #7cbdff;
+  --background-accent: #409fff;
+}
+
+/* Light Theme - Dark Blue */
+:root[data-theme="dark-blue"] {
+  --background: #f5faff;
+  --card: #f1f8ff;
+  --foreground: #001122;
+  --primary-cta: #15479c;
+  --secondary-cta: #ffffff;
+  --accent: #0059b3;
+  --background-accent: #15479c;
+}
+
+/* Light Theme - Light Green */
+:root[data-theme="light-green"] {
+  --background: #f9fefb;
+  --card: #f7fef8;
+  --foreground: #001a00;
+  --primary-cta: #15ad59;
+  --secondary-cta: #ffffff;
+  --accent: #10c25d;
+  --background-accent: #15ad59;
+}
+
+/* Light Theme - Dark Green */
+:root[data-theme="dark-green"] {
+  --background: #fafffb;
+  --card: #f7fffa;
+  --foreground: #001a0a;
+  --primary-cta: #0a7039;
+  --secondary-cta: #ffffff;
+  --accent: #0d8f47;
+  --background-accent: #0a7039;
+}
+
+/* Light Theme - Light Red */
+:root[data-theme="light-red"] {
+  --background: #fffafa;
+  --card: #fff7f7;
+  --foreground: #1a0000;
+  --primary-cta: #e63946;
+  --secondary-cta: #ffffff;
+  --accent: #ff4d5a;
+  --background-accent: #e63946;
+}
+
+/* Light Theme - Dark Red */
+:root[data-theme="dark-red"] {
+  --background: #fffcfc;
+  --card: #fffafa;
+  --foreground: #220000;
+  --primary-cta: #c1121f;
+  --secondary-cta: #ffffff;
+  --accent: #e63946;
+  --background-accent: #c1121f;
+}
+
+/* Light Theme - Light Purple */
+:root[data-theme="light-purple"] {
+  --background: #fbfaff;
+  --card: #f7f5ff;
+  --foreground: #0f0022;
+  --primary-cta: #8b5cf6;
+  --secondary-cta: #ffffff;
+  --accent: #a78bfa;
+  --background-accent: #8b5cf6;
+}
+
+/* Light Theme - Dark Purple */
+:root[data-theme="dark-purple"] {
+  --background: #fcfcff;
+  --card: #fafaff;
+  --foreground: #150022;
+  --primary-cta: #7c3aed;
+  --secondary-cta: #ffffff;
+  --accent: #8b5cf6;
+  --background-accent: #7c3aed;
+}
+
+/* Light Theme - Light Orange */
+:root[data-theme="light-orange"] {
+  --background: #fffaf5;
+  --card: #fff7f0;
+  --foreground: #1a0800;
+  --primary-cta: #ff8c42;
+  --secondary-cta: #ffffff;
+  --accent: #ffaa70;
+  --background-accent: #ff8c42;
+}
+
+/* Light Theme - Dark Orange */
+:root[data-theme="dark-orange"] {
+  --background: #fffcfa;
+  --card: #fffaf7;
+  --foreground: #220a00;
+  --primary-cta: #e8590c;
+  --secondary-cta: #ffffff;
+  --accent: #ff8c42;
+  --background-accent: #e8590c;
+}
+
+/* Light Theme - Light Cyan */
+:root[data-theme="light-cyan"] {
+  --background: #fafefe;
+  --card: #f0feff;
+  --foreground: #001a1a;
+  --primary-cta: #16d4f6;
+  --secondary-cta: #ffffff;
+  --accent: #22d3ee;
+  --background-accent: #06b6d4;
+}
+
+/* Light Theme - Dark Cyan */
+:root[data-theme="dark-cyan"] {
+  --background: #faffff;
+  --card: #f7feff;
+  --foreground: #00171a;
+  --primary-cta: #00c9e8;
+  --secondary-cta: #ffffff;
+  --accent: #06b6d4;
+  --background-accent: #0891b2;
+}
+
+/* Light Theme - Light Yellow */
+:root[data-theme="light-yellow"] {
+  --background: #fefef5;
+  --card: #fdfdf0;
+  --foreground: #1a1a00;
+  --primary-cta: #ffcf40;
+  --secondary-cta: #ffffff;
+  --accent: #facc15;
+  --background-accent: #ffbf00;
+}
+
+/* Light Theme - Dark Yellow */
+:root[data-theme="dark-yellow"] {
+  --background: #fffef7;
+  --card: #fffdf0;
+  --foreground: #221a00;
+  --primary-cta: #ffae00;
+  --secondary-cta: #ffffff;
+  --accent: #eab308;
+  --background-accent: #ca8a04;
+}
+
+/* ============================================ */
+/* DARK THEME VARIANTS */
+/* ============================================ */
+
+/* Dark Theme - Minimal */
+:root[data-theme="dark"] {
+  --background: #0a0a0a;
+  --card: #1a1a1a;
+  --foreground: #ffffffe6;
+  --primary-cta: #e6e6e6;
+  --secondary-cta: #1a1a1a;
+  --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;
+  --secondary-cta: #1a1a1a;
+  --accent: #737373;
+  --background-accent: #737373;
+}
+
+/* Dark Theme - Minimal Dark Blue */
+:root[data-theme="dark-minimal-dark-blue"] {
+  --background: #0a0a0a;
+  --card: #1a1a1a;
+  --foreground: #f0f5fce6;
+  --primary-cta: #3891f6;
+  --secondary-cta: #1a1a1a;
+  --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;
+  --secondary-cta: #1a1a1a;
+  --accent: #737373;
+  --background-accent: #737373;
+}
+
+/* Dark Theme - Minimal Dark Green */
+:root[data-theme="dark-minimal-dark-green"] {
+  --background: #0a0a0a;
+  --card: #1a1a1a;
+  --foreground: #f0fff8e6;
+  --primary-cta: #1cde5d;
+  --secondary-cta: #1a1a1a;
+  --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;
+  --secondary-cta: #1a1a1a;
+  --accent: #737373;
+  --background-accent: #737373;
+}
+
+/* Dark Theme - Minimal Dark Red */
+:root[data-theme="dark-minimal-dark-red"] {
+  --background: #0a0a0a;
+  --card: #1a1a1a;
+  --foreground: #fff0f0e6;
+  --primary-cta: #ff3d4a;
+  --secondary-cta: #1a1a1a;
+  --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;
+  --secondary-cta: #1a1a1a;
+  --accent: #737373;
+  --background-accent: #737373;
+}
+
+/* Dark Theme - Minimal Dark Purple */
+:root[data-theme="dark-minimal-dark-purple"] {
+  --background: #0a0a0a;
+  --card: #1a1a1a;
+  --foreground: #f5f0fce6;
+  --primary-cta: #b366ff;
+  --secondary-cta: #1a1a1a;
+  --accent: #737373;
+  --background-accent: #737373;
+}
+
+/* Dark Theme - Minimal Light Orange */
+:root[data-theme="dark-minimal-light-orange"] {
+  --background: #0a0a0a;
+  --card: #1a1a1a;
+  --foreground: #fffaf5e6;
+  --primary-cta: #ffaa70;
+  --secondary-cta: #1a1a1a;
+  --accent: #737373;
+  --background-accent: #737373;
+}
+
+/* Dark Theme - Minimal Dark Orange */
+:root[data-theme="dark-minimal-dark-orange"] {
+  --background: #0a0a0a;
+  --card: #1a1a1a;
+  --foreground: #fff8f0e6;
+  --primary-cta: #ff8c42;
+  --secondary-cta: #1a1a1a;
+  --accent: #737373;
+  --background-accent: #737373;
+}
+
+/* Dark Theme - Minimal Light Cyan */
+:root[data-theme="dark-minimal-light-cyan"] {
+  --background: #0a0a0a;
+  --card: #1a1a1a;
+  --foreground: #f5fafae6;
+  --primary-cta: #67e8f9;
+  --secondary-cta: #1a1a1a;
+  --accent: #737373;
+  --background-accent: #737373;
+}
+
+/* Dark Theme - Minimal Dark Cyan */
+:root[data-theme="dark-minimal-dark-cyan"] {
+  --background: #0a0a0a;
+  --card: #1a1a1a;
+  --foreground: #f0f8f8e6;
+  --primary-cta: #22d3ee;
+  --secondary-cta: #1a1a1a;
+  --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;
+  --secondary-cta: #1a1a1a;
+  --accent: #737373;
+  --background-accent: #737373;
+}
+
+/* Dark Theme - Minimal Dark Yellow */
+:root[data-theme="dark-minimal-dark-yellow"] {
+  --background: #0a0a0a;
+  --card: #1a1a1a;
+  --foreground: #fffef5e6;
+  --primary-cta: #facc15;
+  --secondary-cta: #1a1a1a;
+  --accent: #737373;
+  --background-accent: #737373;
+}
+
+/* Dark Theme - Brutalist Red */
+:root[data-theme="dark-brutalist-red"] {
+  --background: #000000;
+  --card: #0a0a0a;
+  --foreground: #ffffff;
+  --primary-cta: #ff0000;
+  --secondary-cta: #000000;
+  --accent: #1a1a1a;
+  --background-accent: #0f0f0f;
+}
+
+/* Dark Theme - Brutalist Blue */
+:root[data-theme="dark-brutalist-blue"] {
+  --background: #000000;
+  --card: #0a0a0a;
+  --foreground: #ffffff;
+  --primary-cta: #0066ff;
+  --secondary-cta: #000000;
+  --accent: #1a1a1a;
+  --background-accent: #0f0f0f;
+}
+
+/* Dark Theme - Brutalist Green */
+:root[data-theme="dark-brutalist-green"] {
+  --background: #000000;
+  --card: #0a0a0a;
+  --foreground: #ffffff;
+  --primary-cta: #00cc00;
+  --secondary-cta: #000000;
+  --accent: #1a1a1a;
+  --background-accent: #0f0f0f;
+}
+
+/* Dark Theme - Brutalist Purple */
+:root[data-theme="dark-brutalist-purple"] {
+  --background: #000000;
+  --card: #0a0a0a;
+  --foreground: #ffffff;
+  --primary-cta: #9933ff;
+  --secondary-cta: #000000;
+  --accent: #1a1a1a;
+  --background-accent: #0f0f0f;
+}
+
+/* Dark Theme - Brutalist Orange */
+:root[data-theme="dark-brutalist-orange"] {
+  --background: #000000;
+  --card: #0a0a0a;
+  --foreground: #ffffff;
+  --primary-cta: #ff6600;
+  --secondary-cta: #000000;
+  --accent: #1a1a1a;
+  --background-accent: #0f0f0f;
+}
+
+/* Dark Theme - Brutalist Cyan */
+:root[data-theme="dark-brutalist-cyan"] {
+  --background: #000000;
+  --card: #0a0a0a;
+  --foreground: #ffffff;
+  --primary-cta: #00ccff;
+  --secondary-cta: #000000;
+  --accent: #1a1a1a;
+  --background-accent: #0f0f0f;
+}
+
+/* Dark Theme - Brutalist Yellow */
+:root[data-theme="dark-brutalist-yellow"] {
+  --background: #000000;
+  --card: #0a0a0a;
+  --foreground: #ffffff;
+  --primary-cta: #ffcc00;
+  --secondary-cta: #000000;
+  --accent: #1a1a1a;
+  --background-accent: #0f0f0f;
+}
+
+/* Dark Theme - Brutalist Pink */
+:root[data-theme="dark-brutalist-pink"] {
+  --background: #000000;
+  --card: #0a0a0a;
+  --foreground: #ffffff;
+  --primary-cta: #ff0066;
+  --secondary-cta: #000000;
+  --accent: #1a1a1a;
+  --background-accent: #0f0f0f;
+}
+
+/* Dark Theme - Light Blue */
+:root[data-theme="dark-light-blue"] {
+  --background: #010912;
+  --card: #152840;
+  --foreground: #e6f0ff;
+  --primary-cta: #cee7ff;
+  --secondary-cta: #0e1a29;
+  --accent: #80bfff;
+  --background-accent: #004a93;
+}
+
+/* Dark Theme - Dark Blue */
+:root[data-theme="dark-dark-blue"] {
+  --background: #00070e;
+  --card: #152840;
+  --foreground: #e6f0ff;
+  --primary-cta: #3891f6;
+  --secondary-cta: #0e1a29;
+  --accent: #80bfff;
+  --background-accent: #016ad3;
+}
+
+/* Dark Theme - Light Green */
+:root[data-theme="dark-light-green"] {
+  --background: #000802;
+  --card: #0b1a0b;
+  --foreground: #e6ffe6;
+  --primary-cta: #80da9b;
+  --secondary-cta: #07170b;
+  --accent: #7ff09d;
+  --background-accent: #2c6541;
+}
+
+/* Dark Theme - Dark Green */
+:root[data-theme="dark-dark-green"] {
+  --background: #000602;
+  --card: #0d1d0d;
+  --foreground: #e6ffe6;
+  --primary-cta: #1cde5d;
+  --secondary-cta: #0a1f0f;
+  --accent: #5dd882;
+  --background-accent: #0d6b32;
+}
+
+/* Dark Theme - Light Red */
+:root[data-theme="dark-light-red"] {
+  --background: #080000;
+  --card: #1e0d0d;
+  --foreground: #ffe6e6;
+  --primary-cta: #ff7a7a;
+  --secondary-cta: #1e0909;
+  --accent: #ff8a8a;
+  --background-accent: #65292c;
+}
+
+/* Dark Theme - Dark Red */
+:root[data-theme="dark-dark-red"] {
+  --background: #060000;
+  --card: #1d0d0d;
+  --foreground: #ffe6e6;
+  --primary-cta: #ff3d4a;
+  --secondary-cta: #1f0a0a;
+  --accent: #ff5c5c;
+  --background-accent: #b8111f;
+}
+
+/* Dark Theme - Light Purple */
+:root[data-theme="dark-light-purple"] {
+  --background: #020008;
+  --card: #0b1a1d;
+  --foreground: #f0e6ff;
+  --primary-cta: #c89bff;
+  --secondary-cta: #0b0717;
+  --accent: #d4a3ff;
+  --background-accent: #65417c;
+}
+
+/* Dark Theme - Dark Purple */
+:root[data-theme="dark-dark-purple"] {
+  --background: #020006;
+  --card: #1d0d1d;
+  --foreground: #f0e6ff;
+  --primary-cta: #b366ff;
+  --secondary-cta: #1a0a29;
+  --accent: #b58cff;
+  --background-accent: #6b28d9;
+}
+
+/* Dark Theme - Light Orange */
+:root[data-theme="dark-light-orange"] {
+  --background: #080200;
+  --card: #1a0d0b;
+  --foreground: #ffe6d5;
+  --primary-cta: #ffaa70;
+  --secondary-cta: #170b07;
+  --accent: #ffc299;
+  --background-accent: #b8541e;
+}
+
+/* Dark Theme - Dark Orange */
+:root[data-theme="dark-dark-orange"] {
+  --background: #060200;
+  --card: #1d0d0b;
+  --foreground: #ffe6d5;
+  --primary-cta: #ff8c42;
+  --secondary-cta: #1f0a00;
+  --accent: #ffaa70;
+  --background-accent: #b8400c;
+}
+
+/* Dark Theme - Light Cyan */
+:root[data-theme="dark-light-cyan"] {
+  --background: #000808;
+  --card: #0b1a1d;
+  --foreground: #d5f5ff;
+  --primary-cta: #67e8f9;
+  --secondary-cta: #071719;
+  --accent: #a5f3fc;
+  --background-accent: #0e7490;
+}
+
+/* Dark Theme - Dark Cyan */
+:root[data-theme="dark-dark-cyan"] {
+  --background: #000606;
+  --card: #0d1d1d;
+  --foreground: #d5f5ff;
+  --primary-cta: #22d3ee;
+  --secondary-cta: #0a1f1f;
+  --accent: #67e8f9;
+  --background-accent: #0891b2;
+}
+
+/* Dark Theme - Light Yellow */
+:root[data-theme="dark-light-yellow"] {
+  --background: #080800;
+  --card: #1a1d0b;
+  --foreground: #fffde6;
+  --primary-cta: #fde047;
+  --secondary-cta: #17190b;
+  --accent: #fef08a;
+  --background-accent: #a16207;
+}
+
+/* Dark Theme - Dark Yellow */
+:root[data-theme="dark-dark-yellow"] {
+  --background: #060600;
+  --card: #1d1d0b;
+  --foreground: #fffde6;
+  --primary-cta: #facc15;
+  --secondary-cta: #1f1f0a;
+  --accent: #fde047;
+  --background-accent: #854d0e;
+}
+
+/* ============================================ */
+/* SOFT/PASTEL THEME VARIANTS */
+/* ============================================ */
+
+/* Light Theme - Soft Peach */
+:root[data-theme="soft-peach"] {
+  --background: #fef5f1;
+  --card: #fdf0eb;
+  --foreground: #4a4540;
+  --primary-cta: #e8b4a0;
+  --secondary-cta: #ffffff;
+  --accent: #f5d4c8;
+  --background-accent: #d9a18f;
+}
+
+/* Light Theme - Soft Lavender */
+:root[data-theme="soft-lavender"] {
+  --background: #f5f3f9;
+  --card: #eeebf5;
+  --foreground: #44404a;
+  --primary-cta: #b8a8d4;
+  --secondary-cta: #ffffff;
+  --accent: #d4c8e8;
+  --background-accent: #a593c4;
+}
+
+/* Light Theme - Soft Mint */
+:root[data-theme="soft-mint"] {
+  --background: #f1f9f5;
+  --card: #ebf5ef;
+  --foreground: #3f4a44;
+  --primary-cta: #9ed4b8;
+  --secondary-cta: #ffffff;
+  --accent: #c8e8d4;
+  --background-accent: #8bc4a5;
+}
+
+/* Light Theme - Soft Blush */
+:root[data-theme="soft-blush"] {
+  --background: #f9f3f5;
+  --card: #f5ebee;
+  --foreground: #4a4044;
+  --primary-cta: #d4a8b8;
+  --secondary-cta: #ffffff;
+  --accent: #e8c8d4;
+  --background-accent: #c493a5;
+}
+
+/* Light Theme - Soft Sky */
+:root[data-theme="soft-sky"] {
+  --background: #f1f7f9;
+  --card: #ebf2f5;
+  --foreground: #404548;
+  --primary-cta: #a0c4d4;
+  --secondary-cta: #ffffff;
+  --accent: #c8dce8;
+  --background-accent: #8fb0c4;
+}
+
+/* Light Theme - Soft Sage */
+:root[data-theme="soft-sage"] {
+  --background: #f3f7f1;
+  --card: #edf2eb;
+  --foreground: #43483f;
+  --primary-cta: #a8c4a0;
+  --secondary-cta: #ffffff;
+  --accent: #cbd8c8;
+  --background-accent: #93b08b;
+}
+
+/* Light Theme - Soft Coral */
+:root[data-theme="soft-coral"] {
+  --background: #f9f3f1;
+  --card: #f5eeeb;
+  --foreground: #4a4440;
+  --primary-cta: #d4b0a0;
+  --secondary-cta: #ffffff;
+  --accent: #e8d4c8;
+  --background-accent: #c49d8f;
+}
+
+/* Light Theme - Soft Periwinkle */
+:root[data-theme="soft-periwinkle"] {
+  --background: #f3f5f9;
+  --card: #ebeef5;
+  --foreground: #404348;
+  --primary-cta: #a8b4d4;
+  --secondary-cta: #ffffff;
+  --accent: #c8d1e8;
+  --background-accent: #93a1c4;
+}
+
+/* Dark Theme - Soft Peach */
+:root[data-theme="dark-soft-peach"] {
+  --background: #1a1614;
+  --card: #241f1c;
+  --foreground: #f5e8e0;
+  --primary-cta: #e8b4a0;
+  --secondary-cta: #1a1614;
+  --accent: #b88a78;
+  --background-accent: #8f6d5f;
+}
+
+/* Dark Theme - Soft Lavender */
+:root[data-theme="dark-soft-lavender"] {
+  --background: #18161a;
+  --card: #221e26;
+  --foreground: #ede5f5;
+  --primary-cta: #b8a8d4;
+  --secondary-cta: #18161a;
+  --accent: #8a7aa0;
+  --background-accent: #6e608a;
+}
+
+/* Dark Theme - Soft Mint */
+:root[data-theme="dark-soft-mint"] {
+  --background: #141a17;
+  --card: #1c241f;
+  --foreground: #e5f0ea;
+  --primary-cta: #9ed4b8;
+  --secondary-cta: #141a17;
+  --accent: #78a88c;
+  --background-accent: #5f8a72;
+}
+
+/* Dark Theme - Soft Blush */
+:root[data-theme="dark-soft-blush"] {
+  --background: #1a1618;
+  --card: #261e22;
+  --foreground: #f0e5ea;
+  --primary-cta: #d4a8b8;
+  --secondary-cta: #1a1618;
+  --accent: #a07a8a;
+  --background-accent: #8a606e;
+}
+
+/* Dark Theme - Soft Sky */
+:root[data-theme="dark-soft-sky"] {
+  --background: #141719;
+  --card: #1c2124;
+  --foreground: #e5ecf0;
+  --primary-cta: #a0c4d4;
+  --secondary-cta: #141719;
+  --accent: #7896a4;
+  --background-accent: #607a8a;
+}
+
+/* Dark Theme - Soft Sage */
+:root[data-theme="dark-soft-sage"] {
+  --background: #161a14;
+  --card: #1e241c;
+  --foreground: #e8ede5;
+  --primary-cta: #a8c4a0;
+  --secondary-cta: #161a14;
+  --accent: #7a9478;
+  --background-accent: #647a5f;
+}
+
+/* Dark Theme - Soft Coral */
+:root[data-theme="dark-soft-coral"] {
+  --background: #1a1714;
+  --card: #24211c;
+  --foreground: #f0e8e5;
+  --primary-cta: #d4b0a0;
+  --secondary-cta: #1a1714;
+  --accent: #a4887a;
+  --background-accent: #8a7264;
+}
+
+/* Dark Theme - Soft Periwinkle */
+:root[data-theme="dark-soft-periwinkle"] {
+  --background: #161719;
+  --card: #1e2024;
+  --foreground: #e8eaf0;
+  --primary-cta: #a8b4d4;
+  --secondary-cta: #161719;
+  --accent: #7e88a0;
+  --background-accent: #686e8a;
+}
+
+/* ============================================ */
+/* NEON THEME VARIANTS */
+/* ============================================ */
+
+/* Light Neon - Green */
+:root[data-theme="neon-green"] {
+  --background: #f5fff5;
+  --card: #ebffeb;
+  --foreground: #003300;
+  --primary-cta: #00ff00;
+  --secondary-cta: #ffffff;
+  --accent: #66ff66;
+  --background-accent: #00cc00;
+}
+
+/* Light Neon - Pink */
+:root[data-theme="neon-pink"] {
+  --background: #fff5ff;
+  --card: #ffebff;
+  --foreground: #330033;
+  --primary-cta: #ff00ff;
+  --secondary-cta: #ffffff;
+  --accent: #ff66ff;
+  --background-accent: #cc00cc;
+}
+
+/* Light Neon - Purple */
+:root[data-theme="neon-purple"] {
+  --background: #f7f0ff;
+  --card: #ede0ff;
+  --foreground: #2a0033;
+  --primary-cta: #cc00ff;
+  --secondary-cta: #ffffff;
+  --accent: #dd66ff;
+  --background-accent: #aa00cc;
+}
+
+/* Light Neon - Red */
+:root[data-theme="neon-red"] {
+  --background: #fff0f5;
+  --card: #ffe0eb;
+  --foreground: #330011;
+  --primary-cta: #ff0044;
+  --secondary-cta: #ffffff;
+  --accent: #ff3366;
+  --background-accent: #cc0033;
+}
+
+/* Dark Neon - Green */
+:root[data-theme="dark-neon-green"] {
+  --background: #050a05;
+  --card: #0a120a;
+  --foreground: #e0ffe0;
+  --primary-cta: #00ff00;
+  --secondary-cta: #050a05;
+  --accent: #00cc00;
+  --background-accent: #003300;
+}
+
+/* Dark Neon - Pink */
+:root[data-theme="dark-neon-pink"] {
+  --background: #0a050a;
+  --card: #120a12;
+  --foreground: #ffe0ff;
+  --primary-cta: #ff00ff;
+  --secondary-cta: #0a050a;
+  --accent: #cc00cc;
+  --background-accent: #330033;
+}
+
+/* Dark Neon - Purple */
+:root[data-theme="dark-neon-purple"] {
+  --background: #08050a;
+  --card: #100a12;
+  --foreground: #f0e0ff;
+  --primary-cta: #cc00ff;
+  --secondary-cta: #08050a;
+  --accent: #aa00cc;
+  --background-accent: #2a0033;
+}
+
+/* Dark Neon - Red */
+:root[data-theme="dark-neon-red"] {
+  --background: #0a0505;
+  --card: #120a0a;
+  --foreground: #ffe0e0;
+  --primary-cta: #ff0044;
+  --secondary-cta: #0a0505;
+  --accent: #ff0066;
+  --background-accent: #330011;
+}
+
+/* ============================================ */
+/* MONOCHROME/GRAYSCALE THEME VARIANTS */
+/* ============================================ */
+
+/* Light Monochrome - White */
+:root[data-theme="monochrome-white"] {
+  --background: #ffffff;
+  --card: #fafafa;
+  --foreground: #000000;
+  --primary-cta: #000000;
+  --secondary-cta: #ffffff;
+  --accent: #cccccc;
+  --background-accent: #999999;
+}
+
+/* Light Monochrome - Light Gray */
+:root[data-theme="monochrome-light-gray"] {
+  --background: #f5f5f5;
+  --card: #eeeeee;
+  --foreground: #1a1a1a;
+  --primary-cta: #333333;
+  --secondary-cta: #ffffff;
+  --accent: #cccccc;
+  --background-accent: #888888;
+}
+
+/* Light Monochrome - Medium Gray */
+:root[data-theme="monochrome-medium-gray"] {
+  --background: #e0e0e0;
+  --card: #d4d4d4;
+  --foreground: #1a1a1a;
+  --primary-cta: #000000;
+  --secondary-cta: #ffffff;
+  --accent: #999999;
+  --background-accent: #666666;
+}
+
+/* Light Monochrome - Dark Gray */
+:root[data-theme="monochrome-dark-gray"] {
+  --background: #cccccc;
+  --card: #bbbbbb;
+  --foreground: #000000;
+  --primary-cta: #1a1a1a;
+  --secondary-cta: #ffffff;
+  --accent: #888888;
+  --background-accent: #555555;
+}
+
+/* Dark Monochrome - Black */
+:root[data-theme="dark-monochrome-black"] {
+  --background: #000000;
+  --card: #0a0a0a;
+  --foreground: #ffffff;
+  --primary-cta: #ffffff;
+  --secondary-cta: #000000;
+  --accent: #666666;
+  --background-accent: #999999;
+}
+
+/* Dark Monochrome - Charcoal */
+:root[data-theme="dark-monochrome-charcoal"] {
+  --background: #1a1a1a;
+  --card: #242424;
+  --foreground: #ffffff;
+  --primary-cta: #eeeeee;
+  --secondary-cta: #1a1a1a;
+  --accent: #888888;
+  --background-accent: #aaaaaa;
+}
+
+/* Dark Monochrome - Dark Gray */
+:root[data-theme="dark-monochrome-dark-gray"] {
+  --background: #333333;
+  --card: #404040;
+  --foreground: #ffffff;
+  --primary-cta: #ffffff;
+  --secondary-cta: #1a1a1a;
+  --accent: #999999;
+  --background-accent: #bbbbbb;
+}
+
+/* Dark Monochrome - Medium Gray */
+:root[data-theme="dark-monochrome-medium-gray"] {
+  --background: #555555;
+  --card: #666666;
+  --foreground: #ffffff;
+  --primary-cta: #f5f5f5;
+  --secondary-cta: #333333;
+  --accent: #aaaaaa;
+  --background-accent: #cccccc;
+}
+
+/* ============================================ */
+/* EARTH TONES/ORGANIC THEME VARIANTS */
+/* ============================================ */
+
+/* Light Earth - Terracotta */
+:root[data-theme="earth-terracotta"] {
+  --background: #faf5f2;
+  --card: #f5ede8;
+  --foreground: #3d2417;
+  --primary-cta: #d4704c;
+  --secondary-cta: #ffffff;
+  --accent: #e8a88f;
+  --background-accent: #b85a3a;
+}
+
+/* Light Earth - Olive */
+:root[data-theme="earth-olive"] {
+  --background: #f5f5f0;
+  --card: #efeee8;
+  --foreground: #2a2d1f;
+  --primary-cta: #7a7a52;
+  --secondary-cta: #ffffff;
+  --accent: #a0a085;
+  --background-accent: #5f5f3f;
+}
+
+/* Light Earth - Moss */
+:root[data-theme="earth-moss"] {
+  --background: #f3f5f0;
+  --card: #ebede8;
+  --foreground: #22331e;
+  --primary-cta: #6b7c5a;
+  --secondary-cta: #ffffff;
+  --accent: #93a887;
+  --background-accent: #556b47;
+}
+
+/* Light Earth - Burnt Orange */
+:root[data-theme="earth-burnt-orange"] {
+  --background: #faf5f0;
+  --card: #f5ede5;
+  --foreground: #3d2610;
+  --primary-cta: #cc6633;
+  --secondary-cta: #ffffff;
+  --accent: #e69966;
+  --background-accent: #a85028;
+}
+
+/* Dark Earth - Terracotta */
+:root[data-theme="dark-earth-terracotta"] {
+  --background: #1a0f0a;
+  --card: #261712;
+  --foreground: #f5e8e0;
+  --primary-cta: #d4704c;
+  --secondary-cta: #1a0f0a;
+  --accent: #a85a3a;
+  --background-accent: #8a4830;
+}
+
+/* Dark Earth - Olive */
+:root[data-theme="dark-earth-olive"] {
+  --background: #14160f;
+  --card: #1f2117;
+  --foreground: #eeeed8;
+  --primary-cta: #7a7a52;
+  --secondary-cta: #14160f;
+  --accent: #5f5f3f;
+  --background-accent: #4a4a30;
+}
+
+/* Dark Earth - Moss */
+:root[data-theme="dark-earth-moss"] {
+  --background: #0f140d;
+  --card: #1a2116;
+  --foreground: #e8f0e0;
+  --primary-cta: #6b7c5a;
+  --secondary-cta: #0f140d;
+  --accent: #556b47;
+  --background-accent: #445538;
+}
+
+/* Dark Earth - Burnt Orange */
+:root[data-theme="dark-earth-burnt-orange"] {
+  --background: #1a0f08;
+  --card: #261812;
+  --foreground: #f5e8d8;
+  --primary-cta: #cc6633;
+  --secondary-cta: #1a0f08;
+  --accent: #a85028;
+  --background-accent: #8a4020;
+}
+
+/* ============================================ */
+/* MULTI-COLOR COMBO THEME VARIANTS */
+/* ============================================ */
+
+/* Light - Blue Purple */
+:root[data-theme="blue-purple"] {
+  --background: #f8faff;
+  --card: #f0f4ff;
+  --foreground: #1a1a2e;
+  --primary-cta: #3b82f6;
+  --secondary-cta: #ffffff;
+  --accent: #a78bfa;
+  --background-accent: #8b5cf6;
+}
+
+/* Light - Blue Orange */
+:root[data-theme="blue-orange"] {
+  --background: #f7fafd;
+  --card: #eff6fc;
+  --foreground: #1a2433;
+  --primary-cta: #2563eb;
+  --secondary-cta: #ffffff;
+  --accent: #fb923c;
+  --background-accent: #f97316;
+}
+
+/* Light - Coral Teal */
+:root[data-theme="coral-teal"] {
+  --background: #fff9f5;
+  --card: #fff3eb;
+  --foreground: #2e2a1a;
+  --primary-cta: #ff7f5c;
+  --secondary-cta: #ffffff;
+  --accent: #5eead4;
+  --background-accent: #14b8a6;
+}
+
+/* Light - Navy Gold */
+:root[data-theme="navy-gold"] {
+  --background: #f7f9fc;
+  --card: #eff3f8;
+  --foreground: #1a2433;
+  --primary-cta: #1e3a8a;
+  --secondary-cta: #ffffff;
+  --accent: #fbbf24;
+  --background-accent: #d97706;
+}
+
+/* Light - Sage Terracotta */
+:root[data-theme="sage-terracotta"] {
+  --background: #f7f9f5;
+  --card: #eff3eb;
+  --foreground: #2a331a;
+  --primary-cta: #6b7c5a;
+  --secondary-cta: #ffffff;
+  --accent: #e8a88f;
+  --background-accent: #b85a3a;
+}
+
+/* Light - Crimson Sky */
+:root[data-theme="crimson-sky"] {
+  --background: #fef7f9;
+  --card: #fceef3;
+  --foreground: #3a1a24;
+  --primary-cta: #dc2626;
+  --secondary-cta: #ffffff;
+  --accent: #7dd3fc;
+  --background-accent: #0ea5e9;
+}
+
+/* Light - Charcoal Yellow */
+:root[data-theme="charcoal-yellow"] {
+  --background: #fafafa;
+  --card: #f0f0f0;
+  --foreground: #1a1a1a;
+  --primary-cta: #262626;
+  --secondary-cta: #ffffff;
+  --accent: #fbbf24;
+  --background-accent: #f59e0b;
+}
+
+/* Dark - Blue Purple */
+:root[data-theme="dark-blue-purple"] {
+  --background: #0a0e1a;
+  --card: #121626;
+  --foreground: #e0e8ff;
+  --primary-cta: #3b82f6;
+  --secondary-cta: #0a0e1a;
+  --accent: #a78bfa;
+  --background-accent: #8b5cf6;
+}
+
+/* Dark - Blue Orange */
+:root[data-theme="dark-blue-orange"] {
+  --background: #0a1219;
+  --card: #121a26;
+  --foreground: #e0ecf8;
+  --primary-cta: #2563eb;
+  --secondary-cta: #0a1219;
+  --accent: #fb923c;
+  --background-accent: #f97316;
+}
+
+/* Dark - Coral Teal */
+:root[data-theme="dark-coral-teal"] {
+  --background: #1a0f0a;
+  --card: #261812;
+  --foreground: #ffe8e0;
+  --primary-cta: #ff7f5c;
+  --secondary-cta: #1a0f0a;
+  --accent: #5eead4;
+  --background-accent: #14b8a6;
+}
+
+/* Dark - Navy Gold */
+:root[data-theme="dark-navy-gold"] {
+  --background: #0a0f19;
+  --card: #121826;
+  --foreground: #e0e8f8;
+  --primary-cta: #1e3a8a;
+  --secondary-cta: #0a0f19;
+  --accent: #fbbf24;
+  --background-accent: #d97706;
+}
+
+/* Dark - Sage Terracotta */
+:root[data-theme="dark-sage-terracotta"] {
+  --background: #0f140d;
+  --card: #1a2116;
+  --foreground: #e8f0e0;
+  --primary-cta: #6b7c5a;
+  --secondary-cta: #0f140d;
+  --accent: #e8a88f;
+  --background-accent: #b85a3a;
+}
+
+/* Dark - Crimson Sky */
+:root[data-theme="dark-crimson-sky"] {
+  --background: #190a0f;
+  --card: #261218;
+  --foreground: #ffe0e8;
+  --primary-cta: #dc2626;
+  --secondary-cta: #190a0f;
+  --accent: #7dd3fc;
+  --background-accent: #0ea5e9;
+}
+
+/* Dark - Charcoal Yellow */
+:root[data-theme="dark-charcoal-yellow"] {
+  --background: #0a0a0a;
+  --card: #141414;
+  --foreground: #f0f0f0;
+  --primary-cta: #262626;
+  --secondary-cta: #0a0a0a;
+  --accent: #fbbf24;
+  --background-accent: #f59e0b;
+}
diff --git a/colorThemes.json b/colorThemes.json
new file mode 100644
index 0000000..fe8fdfe
--- /dev/null
+++ b/colorThemes.json
@@ -0,0 +1,1158 @@
+{
+  "lightTheme": {
+    "minimal": {
+      "--background": "#ffffff",
+      "--card": "#fcfcfc",
+      "--foreground": "#000000e6",
+      "--primary-cta": "#1a1a1a",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#bebebe",
+      "--background-accent": "#c4c4c4"
+    },
+    "minimalLightBlue": {
+      "--background": "#ffffff",
+      "--card": "#fcfcfc",
+      "--foreground": "#000a18e6",
+      "--primary-cta": "#409fff",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#e2e2e2",
+      "--background-accent": "#c4c4c4"
+    },
+    "minimalDarkBlue": {
+      "--background": "#ffffff",
+      "--card": "#fcfcfc",
+      "--foreground": "#000612e6",
+      "--primary-cta": "#15479c",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#e2e2e2",
+      "--background-accent": "#c4c4c4"
+    },
+    "minimalLightGreen": {
+      "--background": "#ffffff",
+      "--card": "#fcfcfc",
+      "--foreground": "#00120ae6",
+      "--primary-cta": "#15ad59",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#e2e2e2",
+      "--background-accent": "#c4c4c4"
+    },
+    "minimalDarkGreen": {
+      "--background": "#ffffff",
+      "--card": "#fcfcfc",
+      "--foreground": "#000f06e6",
+      "--primary-cta": "#0a7039",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#e2e2e2",
+      "--background-accent": "#c4c4c4"
+    },
+    "minimalLightRed": {
+      "--background": "#ffffff",
+      "--card": "#fcfcfc",
+      "--foreground": "#120006e6",
+      "--primary-cta": "#e63946",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#e2e2e2",
+      "--background-accent": "#c4c4c4"
+    },
+    "minimalDarkRed": {
+      "--background": "#ffffff",
+      "--card": "#fcfcfc",
+      "--foreground": "#0f0003e6",
+      "--primary-cta": "#c1121f",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#e2e2e2",
+      "--background-accent": "#c4c4c4"
+    },
+    "minimalLightPurple": {
+      "--background": "#ffffff",
+      "--card": "#fcfcfc",
+      "--foreground": "#0a0018e6",
+      "--primary-cta": "#8b5cf6",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#e2e2e2",
+      "--background-accent": "#c4c4c4"
+    },
+    "minimalDarkPurple": {
+      "--background": "#ffffff",
+      "--card": "#fcfcfc",
+      "--foreground": "#080015e6",
+      "--primary-cta": "#7c3aed",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#e2e2e2",
+      "--background-accent": "#c4c4c4"
+    },
+    "minimalLightOrange": {
+      "--background": "#ffffff",
+      "--card": "#fcfcfc",
+      "--foreground": "#120a00e6",
+      "--primary-cta": "#ff8c42",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#e2e2e2",
+      "--background-accent": "#c4c4c4"
+    },
+    "minimalDarkOrange": {
+      "--background": "#ffffff",
+      "--card": "#fcfcfc",
+      "--foreground": "#0f0600e6",
+      "--primary-cta": "#e8590c",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#e2e2e2",
+      "--background-accent": "#c4c4c4"
+    },
+    "minimalLightCyan": {
+      "--background": "#ffffff",
+      "--card": "#fcfcfc",
+      "--foreground": "#001212e6",
+      "--primary-cta": "#16d4f6",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#e2e2e2",
+      "--background-accent": "#c4c4c4"
+    },
+    "minimalDarkCyan": {
+      "--background": "#ffffff",
+      "--card": "#fcfcfc",
+      "--foreground": "#000f0fe6",
+      "--primary-cta": "#00c9e8",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#e2e2e2",
+      "--background-accent": "#c4c4c4"
+    },
+    "minimalLightYellow": {
+      "--background": "#ffffff",
+      "--card": "#fcfcfc",
+      "--foreground": "#121200e6",
+      "--primary-cta": "#ffcf40",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#e2e2e2",
+      "--background-accent": "#c4c4c4"
+    },
+    "minimalDarkYellow": {
+      "--background": "#ffffff",
+      "--card": "#fcfcfc",
+      "--foreground": "#0f0f00e6",
+      "--primary-cta": "#ffae00",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#e2e2e2",
+      "--background-accent": "#c4c4c4"
+    },
+    "brutalistRed": {
+      "--background": "#ffffff",
+      "--card": "#fafafa",
+      "--foreground": "#000000",
+      "--primary-cta": "#ff0000",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#e5e5e5",
+      "--background-accent": "#f5f5f5"
+    },
+    "brutalistBlue": {
+      "--background": "#ffffff",
+      "--card": "#fafafa",
+      "--foreground": "#000000",
+      "--primary-cta": "#0066ff",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#e5e5e5",
+      "--background-accent": "#f5f5f5"
+    },
+    "brutalistGreen": {
+      "--background": "#ffffff",
+      "--card": "#fafafa",
+      "--foreground": "#000000",
+      "--primary-cta": "#00cc00",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#e5e5e5",
+      "--background-accent": "#f5f5f5"
+    },
+    "brutalistPurple": {
+      "--background": "#ffffff",
+      "--card": "#fafafa",
+      "--foreground": "#000000",
+      "--primary-cta": "#9933ff",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#e5e5e5",
+      "--background-accent": "#f5f5f5"
+    },
+    "brutalistOrange": {
+      "--background": "#ffffff",
+      "--card": "#fafafa",
+      "--foreground": "#000000",
+      "--primary-cta": "#ff6600",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#e5e5e5",
+      "--background-accent": "#f5f5f5"
+    },
+    "brutalistCyan": {
+      "--background": "#ffffff",
+      "--card": "#fafafa",
+      "--foreground": "#000000",
+      "--primary-cta": "#00ccff",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#e5e5e5",
+      "--background-accent": "#f5f5f5"
+    },
+    "brutalistYellow": {
+      "--background": "#ffffff",
+      "--card": "#fafafa",
+      "--foreground": "#000000",
+      "--primary-cta": "#ffcc00",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#e5e5e5",
+      "--background-accent": "#f5f5f5"
+    },
+    "brutalistPink": {
+      "--background": "#ffffff",
+      "--card": "#fafafa",
+      "--foreground": "#000000",
+      "--primary-cta": "#ff0066",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#e5e5e5",
+      "--background-accent": "#f5f5f5"
+    },
+    "lightBlue": {
+      "--background": "#f8fcff",
+      "--card": "#ffffff",
+      "--foreground": "#00101f",
+      "--primary-cta": "#409fff",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#7cbdff",
+      "--background-accent": "#409fff"
+    },
+    "darkBlue": {
+      "--background": "#f5faff",
+      "--card": "#f1f8ff",
+      "--foreground": "#001122",
+      "--primary-cta": "#15479c",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#0059b3",
+      "--background-accent": "#15479c"
+    },
+    "lightGreen": {
+      "--background": "#000802",
+      "--card": "#0b1a0b",
+      "--foreground": "#e6ffe6",
+      "--primary-cta": "#62f58e",
+      "--secondary-cta": "#07170b",
+      "--accent": "#7ff09d",
+      "--background-accent": "#2c6541"
+    },
+    "darkGreen": {
+      "--background": "#fafffb",
+      "--card": "#f7fffa",
+      "--foreground": "#001a0a",
+      "--primary-cta": "#0a7039",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#0d8f47",
+      "--background-accent": "#0a7039"
+    },
+    "lightRed": {
+      "--background": "#fffafa",
+      "--card": "#fff7f7",
+      "--foreground": "#1a0000",
+      "--primary-cta": "#e63946",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#ff4d5a",
+      "--background-accent": "#e63946"
+    },
+    "darkRed": {
+      "--background": "#fffcfc",
+      "--card": "#fffafa",
+      "--foreground": "#220000",
+      "--primary-cta": "#c1121f",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#e63946",
+      "--background-accent": "#c1121f"
+    },
+    "lightPurple": {
+      "--background": "#fbfaff",
+      "--card": "#f7f5ff",
+      "--foreground": "#0f0022",
+      "--primary-cta": "#8b5cf6",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#a78bfa",
+      "--background-accent": "#8b5cf6"
+    },
+    "darkPurple": {
+      "--background": "#fcfcff",
+      "--card": "#fafaff",
+      "--foreground": "#150022",
+      "--primary-cta": "#7c3aed",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#8b5cf6",
+      "--background-accent": "#7c3aed"
+    },
+    "lightOrange": {
+      "--background": "#fffaf5",
+      "--card": "#fff7f0",
+      "--foreground": "#1a0800",
+      "--primary-cta": "#ff8c42",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#ffaa70",
+      "--background-accent": "#ff8c42"
+    },
+    "darkOrange": {
+      "--background": "#fffcfa",
+      "--card": "#fffaf7",
+      "--foreground": "#220a00",
+      "--primary-cta": "#e8590c",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#ff8c42",
+      "--background-accent": "#e8590c"
+    },
+    "lightCyan": {
+      "--background": "#fafefe",
+      "--card": "#f0feff",
+      "--foreground": "#001a1a",
+      "--primary-cta": "#16d4f6",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#22d3ee",
+      "--background-accent": "#06b6d4"
+    },
+    "darkCyan": {
+      "--background": "#faffff",
+      "--card": "#f7feff",
+      "--foreground": "#00171a",
+      "--primary-cta": "#00c9e8",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#06b6d4",
+      "--background-accent": "#0891b2"
+    },
+    "lightYellow": {
+      "--background": "#fefef5",
+      "--card": "#fdfdf0",
+      "--foreground": "#1a1a00",
+      "--primary-cta": "#ffcf40",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#facc15",
+      "--background-accent": "#ffbf00"
+    },
+    "darkYellow": {
+      "--background": "#fffef7",
+      "--card": "#fffdf0",
+      "--foreground": "#221a00",
+      "--primary-cta": "#ffae00",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#eab308",
+      "--background-accent": "#ca8a04"
+    },
+    "softPeach": {
+      "--background": "#fef5f1",
+      "--card": "#fdf0eb",
+      "--foreground": "#4a4540",
+      "--primary-cta": "#e8b4a0",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#f5d4c8",
+      "--background-accent": "#d9a18f"
+    },
+    "softLavender": {
+      "--background": "#f5f3f9",
+      "--card": "#eeebf5",
+      "--foreground": "#44404a",
+      "--primary-cta": "#b8a8d4",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#d4c8e8",
+      "--background-accent": "#a593c4"
+    },
+    "softMint": {
+      "--background": "#f1f9f5",
+      "--card": "#ebf5ef",
+      "--foreground": "#3f4a44",
+      "--primary-cta": "#9ed4b8",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#c8e8d4",
+      "--background-accent": "#8bc4a5"
+    },
+    "softBlush": {
+      "--background": "#f9f3f5",
+      "--card": "#f5ebee",
+      "--foreground": "#4a4044",
+      "--primary-cta": "#d4a8b8",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#e8c8d4",
+      "--background-accent": "#c493a5"
+    },
+    "softSky": {
+      "--background": "#f1f7f9",
+      "--card": "#ebf2f5",
+      "--foreground": "#404548",
+      "--primary-cta": "#a0c4d4",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#c8dce8",
+      "--background-accent": "#8fb0c4"
+    },
+    "softSage": {
+      "--background": "#f3f7f1",
+      "--card": "#edf2eb",
+      "--foreground": "#43483f",
+      "--primary-cta": "#a8c4a0",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#cbd8c8",
+      "--background-accent": "#93b08b"
+    },
+    "softCoral": {
+      "--background": "#f9f3f1",
+      "--card": "#f5eeeb",
+      "--foreground": "#4a4440",
+      "--primary-cta": "#d4b0a0",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#e8d4c8",
+      "--background-accent": "#c49d8f"
+    },
+    "softPeriwinkle": {
+      "--background": "#f3f5f9",
+      "--card": "#ebeef5",
+      "--foreground": "#404348",
+      "--primary-cta": "#a8b4d4",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#c8d1e8",
+      "--background-accent": "#93a1c4"
+    },
+    "neonGreen": {
+      "--background": "#f5fff5",
+      "--card": "#ebffeb",
+      "--foreground": "#003300",
+      "--primary-cta": "#00ff00",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#66ff66",
+      "--background-accent": "#00cc00"
+    },
+    "neonPink": {
+      "--background": "#fff5ff",
+      "--card": "#ffebff",
+      "--foreground": "#330033",
+      "--primary-cta": "#ff00ff",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#ff66ff",
+      "--background-accent": "#cc00cc"
+    },
+    "neonPurple": {
+      "--background": "#f7f0ff",
+      "--card": "#ede0ff",
+      "--foreground": "#2a0033",
+      "--primary-cta": "#cc00ff",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#dd66ff",
+      "--background-accent": "#aa00cc"
+    },
+    "neonRed": {
+      "--background": "#fff0f5",
+      "--card": "#ffe0eb",
+      "--foreground": "#330011",
+      "--primary-cta": "#ff0044",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#ff3366",
+      "--background-accent": "#cc0033"
+    },
+    "monochromeWhite": {
+      "--background": "#ffffff",
+      "--card": "#fafafa",
+      "--foreground": "#000000",
+      "--primary-cta": "#000000",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#cccccc",
+      "--background-accent": "#999999"
+    },
+    "monochromeLightGray": {
+      "--background": "#f5f5f5",
+      "--card": "#eeeeee",
+      "--foreground": "#1a1a1a",
+      "--primary-cta": "#333333",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#cccccc",
+      "--background-accent": "#888888"
+    },
+    "monochromeMediumGray": {
+      "--background": "#e0e0e0",
+      "--card": "#d4d4d4",
+      "--foreground": "#1a1a1a",
+      "--primary-cta": "#000000",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#999999",
+      "--background-accent": "#666666"
+    },
+    "monochromeDarkGray": {
+      "--background": "#cccccc",
+      "--card": "#bbbbbb",
+      "--foreground": "#000000",
+      "--primary-cta": "#1a1a1a",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#888888",
+      "--background-accent": "#555555"
+    },
+    "earthTerracotta": {
+      "--background": "#faf5f2",
+      "--card": "#f5ede8",
+      "--foreground": "#3d2417",
+      "--primary-cta": "#d4704c",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#e8a88f",
+      "--background-accent": "#b85a3a"
+    },
+    "earthOlive": {
+      "--background": "#f5f5f0",
+      "--card": "#efeee8",
+      "--foreground": "#2a2d1f",
+      "--primary-cta": "#7a7a52",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#a0a085",
+      "--background-accent": "#5f5f3f"
+    },
+    "earthMoss": {
+      "--background": "#f3f5f0",
+      "--card": "#ebede8",
+      "--foreground": "#22331e",
+      "--primary-cta": "#6b7c5a",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#93a887",
+      "--background-accent": "#556b47"
+    },
+    "earthBurntOrange": {
+      "--background": "#faf5f0",
+      "--card": "#f5ede5",
+      "--foreground": "#3d2610",
+      "--primary-cta": "#cc6633",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#e69966",
+      "--background-accent": "#a85028"
+    },
+    "bluePurple": {
+      "--background": "#f8faff",
+      "--card": "#f0f4ff",
+      "--foreground": "#1a1a2e",
+      "--primary-cta": "#3b82f6",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#a78bfa",
+      "--background-accent": "#8b5cf6"
+    },
+    "blueOrange": {
+      "--background": "#f7fafd",
+      "--card": "#eff6fc",
+      "--foreground": "#1a2433",
+      "--primary-cta": "#2563eb",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#fb923c",
+      "--background-accent": "#f97316"
+    },
+    "coralTeal": {
+      "--background": "#fff9f5",
+      "--card": "#fff3eb",
+      "--foreground": "#2e2a1a",
+      "--primary-cta": "#ff7f5c",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#5eead4",
+      "--background-accent": "#14b8a6"
+    },
+    "navyGold": {
+      "--background": "#f8f9fa",
+      "--card": "#f0f2f5",
+      "--foreground": "#1e293b",
+      "--primary-cta": "#1e3a8a",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#fbbf24",
+      "--background-accent": "#d97706"
+    },
+    "sageTerracotta": {
+      "--background": "#f6f7f4",
+      "--card": "#eef0eb",
+      "--foreground": "#2d332a",
+      "--primary-cta": "#84a98c",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#e07a5f",
+      "--background-accent": "#d4704c"
+    },
+    "crimsonSky": {
+      "--background": "#fef8f9",
+      "--card": "#fdf0f2",
+      "--foreground": "#3a1a1e",
+      "--primary-cta": "#dc2626",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#7dd3fc",
+      "--background-accent": "#38bdf8"
+    },
+    "charcoalYellow": {
+      "--background": "#fafafa",
+      "--card": "#f4f4f5",
+      "--foreground": "#27272a",
+      "--primary-cta": "#3f3f46",
+      "--secondary-cta": "#ffffff",
+      "--accent": "#facc15",
+      "--background-accent": "#eab308"
+    }
+  },
+  "darkTheme": {
+    "minimal": {
+      "--background": "#0a0a0a",
+      "--card": "#1a1a1a",
+      "--foreground": "#ffffffe6",
+      "--primary-cta": "#e6e6e6",
+      "--secondary-cta": "#1a1a1a",
+      "--accent": "#737373",
+      "--background-accent": "#737373"
+    },
+    "minimalLightBlue": {
+      "--background": "#0a0a0a",
+      "--card": "#1a1a1a",
+      "--foreground": "#f0f8ffe6",
+      "--primary-cta": "#cee7ff",
+      "--secondary-cta": "#1a1a1a",
+      "--accent": "#737373",
+      "--background-accent": "#737373"
+    },
+    "minimalDarkBlue": {
+      "--background": "#0a0a0a",
+      "--card": "#1a1a1a",
+      "--foreground": "#f0f5fce6",
+      "--primary-cta": "#3891f6",
+      "--secondary-cta": "#1a1a1a",
+      "--accent": "#737373",
+      "--background-accent": "#737373"
+    },
+    "minimalLightGreen": {
+      "--background": "#0a0a0a",
+      "--card": "#1a1a1a",
+      "--foreground": "#f5fffae6",
+      "--primary-cta": "#80da9b",
+      "--secondary-cta": "#1a1a1a",
+      "--accent": "#737373",
+      "--background-accent": "#737373"
+    },
+    "minimalDarkGreen": {
+      "--background": "#0a0a0a",
+      "--card": "#1a1a1a",
+      "--foreground": "#f0fff8e6",
+      "--primary-cta": "#1cde5d",
+      "--secondary-cta": "#1a1a1a",
+      "--accent": "#737373",
+      "--background-accent": "#737373"
+    },
+    "minimalLightRed": {
+      "--background": "#0a0a0a",
+      "--card": "#1a1a1a",
+      "--foreground": "#fff5f5e6",
+      "--primary-cta": "#ff7a7a",
+      "--secondary-cta": "#1a1a1a",
+      "--accent": "#737373",
+      "--background-accent": "#737373"
+    },
+    "minimalDarkRed": {
+      "--background": "#0a0a0a",
+      "--card": "#1a1a1a",
+      "--foreground": "#fff0f0e6",
+      "--primary-cta": "#ff3d4a",
+      "--secondary-cta": "#1a1a1a",
+      "--accent": "#737373",
+      "--background-accent": "#737373"
+    },
+    "minimalLightPurple": {
+      "--background": "#0a0a0a",
+      "--card": "#1a1a1a",
+      "--foreground": "#f8f5ffe6",
+      "--primary-cta": "#c89bff",
+      "--secondary-cta": "#1a1a1a",
+      "--accent": "#737373",
+      "--background-accent": "#737373"
+    },
+    "minimalDarkPurple": {
+      "--background": "#0a0a0a",
+      "--card": "#1a1a1a",
+      "--foreground": "#f5f0fce6",
+      "--primary-cta": "#b366ff",
+      "--secondary-cta": "#1a1a1a",
+      "--accent": "#737373",
+      "--background-accent": "#737373"
+    },
+    "minimalLightOrange": {
+      "--background": "#0a0a0a",
+      "--card": "#1a1a1a",
+      "--foreground": "#fffaf5e6",
+      "--primary-cta": "#ffaa70",
+      "--secondary-cta": "#1a1a1a",
+      "--accent": "#737373",
+      "--background-accent": "#737373"
+    },
+    "minimalDarkOrange": {
+      "--background": "#0a0a0a",
+      "--card": "#1a1a1a",
+      "--foreground": "#fff8f0e6",
+      "--primary-cta": "#ff8c42",
+      "--secondary-cta": "#1a1a1a",
+      "--accent": "#737373",
+      "--background-accent": "#737373"
+    },
+    "minimalLightCyan": {
+      "--background": "#0a0a0a",
+      "--card": "#1a1a1a",
+      "--foreground": "#f5fafae6",
+      "--primary-cta": "#67e8f9",
+      "--secondary-cta": "#1a1a1a",
+      "--accent": "#737373",
+      "--background-accent": "#737373"
+    },
+    "minimalDarkCyan": {
+      "--background": "#0a0a0a",
+      "--card": "#1a1a1a",
+      "--foreground": "#f0f8f8e6",
+      "--primary-cta": "#22d3ee",
+      "--secondary-cta": "#1a1a1a",
+      "--accent": "#737373",
+      "--background-accent": "#737373"
+    },
+    "minimalLightYellow": {
+      "--background": "#0a0a0a",
+      "--card": "#1a1a1a",
+      "--foreground": "#fffffae6",
+      "--primary-cta": "#fde047",
+      "--secondary-cta": "#1a1a1a",
+      "--accent": "#737373",
+      "--background-accent": "#737373"
+    },
+    "minimalDarkYellow": {
+      "--background": "#0a0a0a",
+      "--card": "#1a1a1a",
+      "--foreground": "#fffef5e6",
+      "--primary-cta": "#facc15",
+      "--secondary-cta": "#1a1a1a",
+      "--accent": "#737373",
+      "--background-accent": "#737373"
+    },
+    "brutalistRed": {
+      "--background": "#000000",
+      "--card": "#0a0a0a",
+      "--foreground": "#ffffff",
+      "--primary-cta": "#ff0000",
+      "--secondary-cta": "#000000",
+      "--accent": "#1a1a1a",
+      "--background-accent": "#0f0f0f"
+    },
+    "brutalistBlue": {
+      "--background": "#000000",
+      "--card": "#0a0a0a",
+      "--foreground": "#ffffff",
+      "--primary-cta": "#0066ff",
+      "--secondary-cta": "#000000",
+      "--accent": "#1a1a1a",
+      "--background-accent": "#0f0f0f"
+    },
+    "brutalistGreen": {
+      "--background": "#000000",
+      "--card": "#0a0a0a",
+      "--foreground": "#ffffff",
+      "--primary-cta": "#00cc00",
+      "--secondary-cta": "#000000",
+      "--accent": "#1a1a1a",
+      "--background-accent": "#0f0f0f"
+    },
+    "brutalistPurple": {
+      "--background": "#000000",
+      "--card": "#0a0a0a",
+      "--foreground": "#ffffff",
+      "--primary-cta": "#9933ff",
+      "--secondary-cta": "#000000",
+      "--accent": "#1a1a1a",
+      "--background-accent": "#0f0f0f"
+    },
+    "brutalistOrange": {
+      "--background": "#000000",
+      "--card": "#0a0a0a",
+      "--foreground": "#ffffff",
+      "--primary-cta": "#ff6600",
+      "--secondary-cta": "#000000",
+      "--accent": "#1a1a1a",
+      "--background-accent": "#0f0f0f"
+    },
+    "brutalistCyan": {
+      "--background": "#000000",
+      "--card": "#0a0a0a",
+      "--foreground": "#ffffff",
+      "--primary-cta": "#00ccff",
+      "--secondary-cta": "#000000",
+      "--accent": "#1a1a1a",
+      "--background-accent": "#0f0f0f"
+    },
+    "brutalistYellow": {
+      "--background": "#000000",
+      "--card": "#0a0a0a",
+      "--foreground": "#ffffff",
+      "--primary-cta": "#ffcc00",
+      "--secondary-cta": "#000000",
+      "--accent": "#1a1a1a",
+      "--background-accent": "#0f0f0f"
+    },
+    "brutalistPink": {
+      "--background": "#000000",
+      "--card": "#0a0a0a",
+      "--foreground": "#ffffff",
+      "--primary-cta": "#ff0066",
+      "--secondary-cta": "#000000",
+      "--accent": "#1a1a1a",
+      "--background-accent": "#0f0f0f"
+    },
+    "lightBlue": {
+      "--background": "#010912",
+      "--card": "#152840",
+      "--foreground": "#e6f0ff",
+      "--primary-cta": "#cee7ff",
+      "--secondary-cta": "#0e1a29",
+      "--accent": "#80bfff",
+      "--background-accent": "#004a93"
+    },
+    "darkBlue": {
+      "--background": "#00070e",
+      "--card": "#152840",
+      "--foreground": "#e6f0ff",
+      "--primary-cta": "#3891f6",
+      "--secondary-cta": "#0e1a29",
+      "--accent": "#80bfff",
+      "--background-accent": "#016ad3"
+    },
+    "lightGreen": {
+      "--background": "#000802",
+      "--card": "#0b1a0b",
+      "--foreground": "#e6ffe6",
+      "--primary-cta": "#80da9b",
+      "--secondary-cta": "#07170b",
+      "--accent": "#7ff09d",
+      "--background-accent": "#2c6541"
+    },
+    "darkGreen": {
+      "--background": "#000602",
+      "--card": "#0d1d0d",
+      "--foreground": "#e6ffe6",
+      "--primary-cta": "#1cde5d",
+      "--secondary-cta": "#0a1f0f",
+      "--accent": "#5dd882",
+      "--background-accent": "#0d6b32"
+    },
+    "lightRed": {
+      "--background": "#080000",
+      "--card": "#1e0d0d",
+      "--foreground": "#ffe6e6",
+      "--primary-cta": "#ff7a7a",
+      "--secondary-cta": "#1e0909",
+      "--accent": "#ff8a8a",
+      "--background-accent": "#65292c"
+    },
+    "darkRed": {
+      "--background": "#060000",
+      "--card": "#1d0d0d",
+      "--foreground": "#ffe6e6",
+      "--primary-cta": "#ff3d4a",
+      "--secondary-cta": "#1f0a0a",
+      "--accent": "#ff5c5c",
+      "--background-accent": "#b8111f"
+    },
+    "lightPurple": {
+      "--background": "#020008",
+      "--card": "#0b1a1d",
+      "--foreground": "#f0e6ff",
+      "--primary-cta": "#c89bff",
+      "--secondary-cta": "#0b0717",
+      "--accent": "#d4a3ff",
+      "--background-accent": "#65417c"
+    },
+    "darkPurple": {
+      "--background": "#020006",
+      "--card": "#1d0d1d",
+      "--foreground": "#f0e6ff",
+      "--primary-cta": "#b366ff",
+      "--secondary-cta": "#1a0a29",
+      "--accent": "#b58cff",
+      "--background-accent": "#6b28d9"
+    },
+    "lightOrange": {
+      "--background": "#080200",
+      "--card": "#1a0d0b",
+      "--foreground": "#ffe6d5",
+      "--primary-cta": "#ffaa70",
+      "--secondary-cta": "#170b07",
+      "--accent": "#ffc299",
+      "--background-accent": "#b8541e"
+    },
+    "darkOrange": {
+      "--background": "#060200",
+      "--card": "#1d0d0b",
+      "--foreground": "#ffe6d5",
+      "--primary-cta": "#ff8c42",
+      "--secondary-cta": "#1f0a00",
+      "--accent": "#ffaa70",
+      "--background-accent": "#b8400c"
+    },
+    "lightCyan": {
+      "--background": "#000808",
+      "--card": "#0b1a1d",
+      "--foreground": "#d5f5ff",
+      "--primary-cta": "#67e8f9",
+      "--secondary-cta": "#071719",
+      "--accent": "#a5f3fc",
+      "--background-accent": "#0e7490"
+    },
+    "darkCyan": {
+      "--background": "#000606",
+      "--card": "#0d1d1d",
+      "--foreground": "#d5f5ff",
+      "--primary-cta": "#22d3ee",
+      "--secondary-cta": "#0a1f1f",
+      "--accent": "#67e8f9",
+      "--background-accent": "#0891b2"
+    },
+    "lightYellow": {
+      "--background": "#080800",
+      "--card": "#1a1d0b",
+      "--foreground": "#fffde6",
+      "--primary-cta": "#fde047",
+      "--secondary-cta": "#17190b",
+      "--accent": "#fef08a",
+      "--background-accent": "#a16207"
+    },
+    "darkYellow": {
+      "--background": "#060600",
+      "--card": "#1d1d0b",
+      "--foreground": "#fffde6",
+      "--primary-cta": "#facc15",
+      "--secondary-cta": "#1f1f0a",
+      "--accent": "#fde047",
+      "--background-accent": "#854d0e"
+    },
+    "softPeach": {
+      "--background": "#1a1614",
+      "--card": "#241f1c",
+      "--foreground": "#f5e8e0",
+      "--primary-cta": "#e8b4a0",
+      "--secondary-cta": "#1a1614",
+      "--accent": "#b88a78",
+      "--background-accent": "#8f6d5f"
+    },
+    "softLavender": {
+      "--background": "#18161a",
+      "--card": "#221e26",
+      "--foreground": "#ede5f5",
+      "--primary-cta": "#b8a8d4",
+      "--secondary-cta": "#18161a",
+      "--accent": "#8a7aa0",
+      "--background-accent": "#6e608a"
+    },
+    "softMint": {
+      "--background": "#141a17",
+      "--card": "#1c241f",
+      "--foreground": "#e5f0ea",
+      "--primary-cta": "#9ed4b8",
+      "--secondary-cta": "#141a17",
+      "--accent": "#78a88c",
+      "--background-accent": "#5f8a72"
+    },
+    "softBlush": {
+      "--background": "#1a1618",
+      "--card": "#261e22",
+      "--foreground": "#f0e5ea",
+      "--primary-cta": "#d4a8b8",
+      "--secondary-cta": "#1a1618",
+      "--accent": "#a07a8a",
+      "--background-accent": "#8a606e"
+    },
+    "softSky": {
+      "--background": "#141719",
+      "--card": "#1c2124",
+      "--foreground": "#e5ecf0",
+      "--primary-cta": "#a0c4d4",
+      "--secondary-cta": "#141719",
+      "--accent": "#7896a4",
+      "--background-accent": "#607a8a"
+    },
+    "softSage": {
+      "--background": "#161a14",
+      "--card": "#1e241c",
+      "--foreground": "#e8ede5",
+      "--primary-cta": "#a8c4a0",
+      "--secondary-cta": "#161a14",
+      "--accent": "#7a9478",
+      "--background-accent": "#647a5f"
+    },
+    "softCoral": {
+      "--background": "#1a1714",
+      "--card": "#24211c",
+      "--foreground": "#f0e8e5",
+      "--primary-cta": "#d4b0a0",
+      "--secondary-cta": "#1a1714",
+      "--accent": "#a4887a",
+      "--background-accent": "#8a7264"
+    },
+    "softPeriwinkle": {
+      "--background": "#161719",
+      "--card": "#1e2024",
+      "--foreground": "#e8eaf0",
+      "--primary-cta": "#a8b4d4",
+      "--secondary-cta": "#161719",
+      "--accent": "#7e88a0",
+      "--background-accent": "#686e8a"
+    },
+    "neonGreen": {
+      "--background": "#050a05",
+      "--card": "#0a120a",
+      "--foreground": "#e0ffe0",
+      "--primary-cta": "#00ff00",
+      "--secondary-cta": "#050a05",
+      "--accent": "#00cc00",
+      "--background-accent": "#003300"
+    },
+    "neonPink": {
+      "--background": "#0a050a",
+      "--card": "#120a12",
+      "--foreground": "#ffe0ff",
+      "--primary-cta": "#ff00ff",
+      "--secondary-cta": "#0a050a",
+      "--accent": "#cc00cc",
+      "--background-accent": "#330033"
+    },
+    "neonPurple": {
+      "--background": "#08050a",
+      "--card": "#100a12",
+      "--foreground": "#f0e0ff",
+      "--primary-cta": "#cc00ff",
+      "--secondary-cta": "#08050a",
+      "--accent": "#aa00cc",
+      "--background-accent": "#2a0033"
+    },
+    "neonRed": {
+      "--background": "#0a0505",
+      "--card": "#120a0a",
+      "--foreground": "#ffe0e0",
+      "--primary-cta": "#ff0044",
+      "--secondary-cta": "#0a0505",
+      "--accent": "#ff0066",
+      "--background-accent": "#330011"
+    },
+    "monochromeBlack": {
+      "--background": "#000000",
+      "--card": "#0a0a0a",
+      "--foreground": "#ffffff",
+      "--primary-cta": "#ffffff",
+      "--secondary-cta": "#000000",
+      "--accent": "#666666",
+      "--background-accent": "#999999"
+    },
+    "monochromeCharcoal": {
+      "--background": "#1a1a1a",
+      "--card": "#242424",
+      "--foreground": "#ffffff",
+      "--primary-cta": "#eeeeee",
+      "--secondary-cta": "#1a1a1a",
+      "--accent": "#888888",
+      "--background-accent": "#aaaaaa"
+    },
+    "monochromeDarkGray": {
+      "--background": "#333333",
+      "--card": "#404040",
+      "--foreground": "#ffffff",
+      "--primary-cta": "#ffffff",
+      "--secondary-cta": "#1a1a1a",
+      "--accent": "#999999",
+      "--background-accent": "#bbbbbb"
+    },
+    "monochromeMediumGray": {
+      "--background": "#555555",
+      "--card": "#666666",
+      "--foreground": "#ffffff",
+      "--primary-cta": "#f5f5f5",
+      "--secondary-cta": "#333333",
+      "--accent": "#aaaaaa",
+      "--background-accent": "#cccccc"
+    },
+    "earthTerracotta": {
+      "--background": "#1a0f0a",
+      "--card": "#261712",
+      "--foreground": "#f5e8e0",
+      "--primary-cta": "#d4704c",
+      "--secondary-cta": "#1a0f0a",
+      "--accent": "#a85a3a",
+      "--background-accent": "#8a4830"
+    },
+    "earthOlive": {
+      "--background": "#14160f",
+      "--card": "#1f2117",
+      "--foreground": "#eeeed8",
+      "--primary-cta": "#7a7a52",
+      "--secondary-cta": "#14160f",
+      "--accent": "#5f5f3f",
+      "--background-accent": "#4a4a30"
+    },
+    "earthMoss": {
+      "--background": "#0f140d",
+      "--card": "#1a2116",
+      "--foreground": "#e8f0e0",
+      "--primary-cta": "#6b7c5a",
+      "--secondary-cta": "#0f140d",
+      "--accent": "#556b47",
+      "--background-accent": "#445538"
+    },
+    "earthBurntOrange": {
+      "--background": "#1a0f08",
+      "--card": "#261812",
+      "--foreground": "#f5e8d8",
+      "--primary-cta": "#cc6633",
+      "--secondary-cta": "#1a0f08",
+      "--accent": "#a85028",
+      "--background-accent": "#8a4020"
+    },
+    "bluePurple": {
+      "--background": "#0a0e1a",
+      "--card": "#121626",
+      "--foreground": "#e0e8ff",
+      "--primary-cta": "#3b82f6",
+      "--secondary-cta": "#0a0e1a",
+      "--accent": "#a78bfa",
+      "--background-accent": "#8b5cf6"
+    },
+    "blueOrange": {
+      "--background": "#0a0f1a",
+      "--card": "#12182b",
+      "--foreground": "#e0ebff",
+      "--primary-cta": "#2563eb",
+      "--secondary-cta": "#0a0f1a",
+      "--accent": "#fb923c",
+      "--background-accent": "#f97316"
+    },
+    "coralTeal": {
+      "--background": "#1a0f0a",
+      "--card": "#261812",
+      "--foreground": "#ffe8e0",
+      "--primary-cta": "#ff7f5c",
+      "--secondary-cta": "#1a0f0a",
+      "--accent": "#5eead4",
+      "--background-accent": "#14b8a6"
+    },
+    "navyGold": {
+      "--background": "#0d1117",
+      "--card": "#161b22",
+      "--foreground": "#e6edf3",
+      "--primary-cta": "#1e3a8a",
+      "--secondary-cta": "#0d1117",
+      "--accent": "#fbbf24",
+      "--background-accent": "#d97706"
+    },
+    "sageTerracotta": {
+      "--background": "#0f120e",
+      "--card": "#1a1f18",
+      "--foreground": "#e8ede5",
+      "--primary-cta": "#84a98c",
+      "--secondary-cta": "#0f120e",
+      "--accent": "#e07a5f",
+      "--background-accent": "#d4704c"
+    },
+    "crimsonSky": {
+      "--background": "#1a0a0e",
+      "--card": "#261216",
+      "--foreground": "#ffe0e8",
+      "--primary-cta": "#dc2626",
+      "--secondary-cta": "#1a0a0e",
+      "--accent": "#7dd3fc",
+      "--background-accent": "#38bdf8"
+    },
+    "charcoalYellow": {
+      "--background": "#0f0f0f",
+      "--card": "#1a1a1a",
+      "--foreground": "#e5e5e5",
+      "--primary-cta": "#3f3f46",
+      "--secondary-cta": "#0f0f0f",
+      "--accent": "#facc15",
+      "--background-accent": "#eab308"
+    }
+  }
+}
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..fa61ae4
--- /dev/null
+++ b/docs/CARDSTACK_SECTIONS.md
@@ -0,0 +1,492 @@
+# 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, ContainerStyle, 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" | "invertCard")
+- `TitleSegment` - Type for inline image segments ({ type: "text" | "image", content/src, alt? })
+- `ButtonConfig` - Button configuration interface
+- `GridVariant` - Grid layout variants
+- `CardAnimationType` - Card animation types
+- `ContainerStyle` - Container styling options
+
+## Overview
+
+CardStack is an intelligent layout component that automatically switches between grid, carousel, and timeline 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)
+- **3-6 items with timeline variant**: Timeline layout (or carousel if 7+)
+
+## 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
+- `timeline` - Zigzag timeline layout
+
+## 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" | "invertCard"
+  // 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..8ad8057
--- /dev/null
+++ b/docs/COMPONENT_IMPLEMENTATION.md
@@ -0,0 +1,437 @@
+# 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",
+    useInvertedBackground === "invertCard"
+      ? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground"
+      : "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" | "invertCard"`
+- `"invertCard"` creates a card-style section with expanded width and rounded corners
+- `"invertDefault"` creates a full-width inverted section
+- `"noInvert"` is the standard section with no background
+- Always use explicit string equality checks (not truthy/falsy)
+- Text colors must check for both `"invertDefault"` and `"invertCard"` modes
+
+## 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..998ed93
--- /dev/null
+++ b/docs/README.md
@@ -0,0 +1,145 @@
+# 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
+
+---
+
+### 📄 [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_STANDARDS.md` only
+
+### 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_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..dadae14
--- /dev/null
+++ b/docs/THEME_AND_STYLING.md
@@ -0,0 +1,545 @@
+# 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
+
+**`"invertCard"`** - Card-style inverted background
+- Section gets `bg-foreground` background
+- Section is constrained to `w-content-width-expanded` width
+- Centered with `mx-auto`
+- Rounded corners with `rounded-theme-capped`
+- Text uses `text-background` color for contrast
+
+### Implementation Pattern
+
+```tsx
+import { cls } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+
+interface SectionProps {
+  title: string;
+  description: string;
+  useInvertedBackground: "noInvert" | "invertDefault" | "invertCard"; // Required
+  // ... other props
+}
+
+const Section = ({
+  title,
+  description,
+  useInvertedBackground,
+  className = "",
+  // ... other props
+}: SectionProps) => {
+  const theme = useTheme();
+
+  return (
+    <section
+      className={cls(
+        "relative py-20",
+        useInvertedBackground === "invertCard"
+          ? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground"
+          : "w-full",
+        useInvertedBackground === "invertDefault" && "bg-foreground",
+        className
+      )}
+    >
+      <div className="w-content-width mx-auto">
+        <h1 className={cls(
+          "text-6xl font-medium",
+          (useInvertedBackground === "invertDefault" || useInvertedBackground === "invertCard") && "text-background",
+          titleClassName
+        )}>
+          {title}
+        </h1>
+        <p className={cls(
+          "text-lg",
+          (useInvertedBackground === "invertDefault" || useInvertedBackground === "invertCard")
+            ? "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. **Three Modes**: `"noInvert"`, `"invertDefault"`, `"invertCard"`
+3. **Section Width**:
+   - `"invertCard"` → `w-content-width-expanded mx-auto`
+   - `"noInvert"` or `"invertDefault"` → `w-full`
+4. **Background Color**:
+   - `"invertCard"` → `bg-foreground rounded-theme-capped`
+   - `"invertDefault"` → `bg-foreground`
+   - `"noInvert"` → no background
+5. **Text Colors**: Apply `text-background` or `text-background/75` for `"invertDefault"` and `"invertCard"` modes
+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",
+    useInvertedBackground === "invertCard"
+      ? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground"
+      : "w-full",
+    useInvertedBackground === "invertDefault" && "bg-foreground",
+    className
+  )}
+>
+```
+
+### Text Color Pattern
+
+**For text elements:**
+
+```tsx
+// Single check for both invert modes:
+(useInvertedBackground === "invertDefault" || useInvertedBackground === "invertCard") && "text-background"
+
+// Ternary for opacity variants:
+(useInvertedBackground === "invertDefault" || useInvertedBackground === "invertCard")
+  ? "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",
+        useInvertedBackground === "invertCard"
+          ? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground"
+          : "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"` or `"invertCard"` 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
+
+**`w-content-width-expanded`** - Expanded card-style width
+- Used only for `"invertCard"` mode on the `<section>` element
+- Wider than `w-content-width` for visual card effect
+- Combined with `mx-auto` and `rounded-theme-capped`
+
+## 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" | "invertCard"`
+- [ ] Add `relative` class to section
+- [ ] Implement three-mode section className pattern (invertCard with expanded width, invertDefault full-width, noInvert standard)
+- [ ] Apply `text-background` to text for `"invertDefault"` and `"invertCard"` modes (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..9875006
--- /dev/null
+++ b/eslint.config.mjs
@@ -0,0 +1,30 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+const eslintConfig = [
+  ...compat.extends("next/core-web-vitals", "next/typescript"),
+  {
+    rules: {
+      "react/no-unescaped-entities": "off",
+    },
+  },
+  {
+    ignores: [
+      "node_modules/**",
+      ".next/**",
+      "out/**",
+      "build/**",
+      "next-env.d.ts",
+    ],
+  },
+];
+
+export default eslintConfig;
diff --git a/fontThemes.json b/fontThemes.json
new file mode 100644
index 0000000..d587474
--- /dev/null
+++ b/fontThemes.json
@@ -0,0 +1,632 @@
+{
+  "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;"
+    },
+    "workSans": {
+      "name": "Work Sans",
+      "import": "import { Work_Sans } from \"next/font/google\";",
+      "initialization": "const workSans = Work_Sans({\n  variable: \"--font-work-sans\",\n  subsets: [\"latin\"],\n});",
+      "className": "${workSans.variable}",
+      "cssVariable": "font-family: var(--font-work-sans), sans-serif;"
+    },
+    "spaceGrotesk": {
+      "name": "Space Grotesk",
+      "import": "import { Space_Grotesk } from \"next/font/google\";",
+      "initialization": "const spaceGrotesk = Space_Grotesk({\n  variable: \"--font-space-grotesk\",\n  subsets: [\"latin\"],\n});",
+      "className": "${spaceGrotesk.variable}",
+      "cssVariable": "font-family: var(--font-space-grotesk), 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;"
+    },
+    "plusJakartaSans": {
+      "name": "Plus Jakarta Sans",
+      "import": "import { Plus_Jakarta_Sans } from \"next/font/google\";",
+      "initialization": "const plusJakartaSans = Plus_Jakarta_Sans({\n  variable: \"--font-plus-jakarta-sans\",\n  subsets: [\"latin\"],\n});",
+      "className": "${plusJakartaSans.variable}",
+      "cssVariable": "font-family: var(--font-plus-jakarta-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;"
+    },
+    "outfit": {
+      "name": "Outfit",
+      "import": "import { Outfit } from \"next/font/google\";",
+      "initialization": "const outfit = Outfit({\n  variable: \"--font-outfit\",\n  subsets: [\"latin\"],\n});",
+      "className": "${outfit.variable}",
+      "cssVariable": "font-family: var(--font-outfit), sans-serif;"
+    },
+    "rubik": {
+      "name": "Rubik",
+      "import": "import { Rubik } from \"next/font/google\";",
+      "initialization": "const rubik = Rubik({\n  variable: \"--font-rubik\",\n  subsets: [\"latin\"],\n});",
+      "className": "${rubik.variable}",
+      "cssVariable": "font-family: var(--font-rubik), sans-serif;"
+    },
+    "playfairDisplay": {
+      "name": "Playfair Display",
+      "import": "import { Playfair_Display } from \"next/font/google\";",
+      "initialization": "const playfairDisplay = Playfair_Display({\n  variable: \"--font-playfair-display\",\n  subsets: [\"latin\"],\n});",
+      "className": "${playfairDisplay.variable}",
+      "cssVariable": "font-family: var(--font-playfair-display), serif;",
+      "category": "serif"
+    },
+    "merriweather": {
+      "name": "Merriweather",
+      "import": "import { Merriweather } from \"next/font/google\";",
+      "initialization": "const merriweather = Merriweather({\n  variable: \"--font-merriweather\",\n  subsets: [\"latin\"],\n  weight: [\"300\", \"400\", \"700\", \"900\"],\n});",
+      "className": "${merriweather.variable}",
+      "cssVariable": "font-family: var(--font-merriweather), serif;",
+      "category": "serif"
+    },
+    "sourceSerif4": {
+      "name": "Source Serif 4",
+      "import": "import { Source_Serif_4 } from \"next/font/google\";",
+      "initialization": "const sourceSerif4 = Source_Serif_4({\n  variable: \"--font-source-serif-4\",\n  subsets: [\"latin\"],\n});",
+      "className": "${sourceSerif4.variable}",
+      "cssVariable": "font-family: var(--font-source-serif-4), serif;",
+      "category": "serif"
+    },
+    "jetBrainsMono": {
+      "name": "JetBrains Mono",
+      "import": "import { JetBrains_Mono } from \"next/font/google\";",
+      "initialization": "const jetBrainsMono = JetBrains_Mono({\n  variable: \"--font-jetbrains-mono\",\n  subsets: [\"latin\"],\n});",
+      "className": "${jetBrainsMono.variable}",
+      "cssVariable": "font-family: var(--font-jetbrains-mono), monospace;",
+      "category": "monospace"
+    },
+    "firaCode": {
+      "name": "Fira Code",
+      "import": "import { Fira_Code } from \"next/font/google\";",
+      "initialization": "const firaCode = Fira_Code({\n  variable: \"--font-fira-code\",\n  subsets: [\"latin\"],\n});",
+      "className": "${firaCode.variable}",
+      "cssVariable": "font-family: var(--font-fira-code), monospace;",
+      "category": "monospace"
+    },
+    "sourceCodePro": {
+      "name": "Source Code Pro",
+      "import": "import { Source_Code_Pro } from \"next/font/google\";",
+      "initialization": "const sourceCodePro = Source_Code_Pro({\n  variable: \"--font-source-code-pro\",\n  subsets: [\"latin\"],\n});",
+      "className": "${sourceCodePro.variable}",
+      "cssVariable": "font-family: var(--font-source-code-pro), monospace;",
+      "category": "monospace"
+    },
+    "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;"
+    },
+    "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;"
+    },
+    "cormorantGaramond": {
+      "name": "Cormorant Garamond",
+      "import": "import { Cormorant_Garamond } from \"next/font/google\";",
+      "initialization": "const cormorantGaramond = Cormorant_Garamond({\n  variable: \"--font-cormorant-garamond\",\n  subsets: [\"latin\"],\n  weight: [\"300\", \"400\", \"500\", \"600\", \"700\"],\n});",
+      "className": "${cormorantGaramond.variable}",
+      "cssVariable": "font-family: var(--font-cormorant-garamond), serif;",
+      "category": "serif"
+    },
+    "lora": {
+      "name": "Lora",
+      "import": "import { Lora } from \"next/font/google\";",
+      "initialization": "const lora = Lora({\n  variable: \"--font-lora\",\n  subsets: [\"latin\"],\n});",
+      "className": "${lora.variable}",
+      "cssVariable": "font-family: var(--font-lora), serif;",
+      "category": "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;"
+    },
+    "notoSans": {
+      "name": "Noto Sans",
+      "import": "import { Noto_Sans } from \"next/font/google\";",
+      "initialization": "const notoSans = Noto_Sans({\n  variable: \"--font-noto-sans\",\n  subsets: [\"latin\"],\n});",
+      "className": "${notoSans.variable}",
+      "cssVariable": "font-family: var(--font-noto-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;"
+    },
+    "fraunces": {
+      "name": "Fraunces",
+      "import": "import { Fraunces } from \"next/font/google\";",
+      "initialization": "const fraunces = Fraunces({\n  variable: \"--font-fraunces\",\n  subsets: [\"latin\"],\n});",
+      "className": "${fraunces.variable}",
+      "cssVariable": "font-family: var(--font-fraunces), serif;",
+      "category": "serif"
+    },
+    "dmSerifDisplay": {
+      "name": "DM Serif Display",
+      "import": "import { DM_Serif_Display } from \"next/font/google\";",
+      "initialization": "const dmSerifDisplay = DM_Serif_Display({\n  variable: \"--font-dm-serif-display\",\n  subsets: [\"latin\"],\n  weight: [\"400\"],\n});",
+      "className": "${dmSerifDisplay.variable}",
+      "cssVariable": "font-family: var(--font-dm-serif-display), serif;",
+      "category": "serif"
+    },
+    "prata": {
+      "name": "Prata",
+      "import": "import { Prata } from \"next/font/google\";",
+      "initialization": "const prata = Prata({\n  variable: \"--font-prata\",\n  subsets: [\"latin\"],\n  weight: [\"400\"],\n});",
+      "className": "${prata.variable}",
+      "cssVariable": "font-family: var(--font-prata), serif;",
+      "category": "serif"
+    },
+    "epilogue": {
+      "name": "Epilogue",
+      "import": "import { Epilogue } from \"next/font/google\";",
+      "initialization": "const epilogue = Epilogue({\n  variable: \"--font-epilogue\",\n  subsets: [\"latin\"],\n});",
+      "className": "${epilogue.variable}",
+      "cssVariable": "font-family: var(--font-epilogue), sans-serif;"
+    },
+    "cormorant": {
+      "name": "Cormorant",
+      "import": "import { Cormorant } from \"next/font/google\";",
+      "initialization": "const cormorant = Cormorant({\n  variable: \"--font-cormorant\",\n  subsets: [\"latin\"],\n});",
+      "className": "${cormorant.variable}",
+      "cssVariable": "font-family: var(--font-cormorant), serif;",
+      "category": "serif"
+    },
+    "ibmPlexSans": {
+      "name": "IBM Plex Sans",
+      "import": "import { IBM_Plex_Sans } from \"next/font/google\";",
+      "initialization": "const ibmPlexSans = IBM_Plex_Sans({\n  variable: \"--font-ibm-plex-sans\",\n  subsets: [\"latin\"],\n  weight: [\"100\", \"200\", \"300\", \"400\", \"500\", \"600\", \"700\"],\n});",
+      "className": "${ibmPlexSans.variable}",
+      "cssVariable": "font-family: var(--font-ibm-plex-sans), sans-serif;"
+    },
+    "sora": {
+      "name": "Sora",
+      "import": "import { Sora } from \"next/font/google\";",
+      "initialization": "const sora = Sora({\n  variable: \"--font-sora\",\n  subsets: [\"latin\"],\n});",
+      "className": "${sora.variable}",
+      "cssVariable": "font-family: var(--font-sora), sans-serif;"
+    },
+    "spectral": {
+      "name": "Spectral",
+      "import": "import { Spectral } from \"next/font/google\";",
+      "initialization": "const spectral = Spectral({\n  variable: \"--font-spectral\",\n  subsets: [\"latin\"],\n  weight: [\"200\", \"300\", \"400\", \"500\", \"600\", \"700\", \"800\"],\n});",
+      "className": "${spectral.variable}",
+      "cssVariable": "font-family: var(--font-spectral), serif;",
+      "category": "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"
+      }
+    },
+    "workSansSourceSans3": {
+      "name": "Work Sans + Source Sans 3",
+      "description": "Versatile headings with modern body. Professional and balanced.",
+      "headingFont": "workSans",
+      "bodyFont": "sourceSans3",
+      "imports": "import { Work_Sans } from \"next/font/google\";\nimport { Source_Sans_3 } from \"next/font/google\";",
+      "initializations": "const workSans = Work_Sans({\n  variable: \"--font-work-sans\",\n  subsets: [\"latin\"],\n});\n\nconst sourceSans3 = Source_Sans_3({\n  variable: \"--font-source-sans-3\",\n  subsets: [\"latin\"],\n});",
+      "classNames": "${workSans.variable} ${sourceSans3.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-source-sans-3), sans-serif;\n}",
+        "headingsRule": "h1, h2, h3, h4, h5, h6 {\n  font-family: var(--font-work-sans), sans-serif;\n}",
+        "bodyFontFamily": "var(--font-source-sans-3), sans-serif",
+        "headingsFontFamily": "var(--font-work-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"
+      }
+    },
+    "playfairNunito": {
+      "name": "Playfair Display + Nunito",
+      "description": "Classic serif headings with friendly rounded body. Elegant and approachable.",
+      "headingFont": "playfairDisplay",
+      "bodyFont": "nunito",
+      "imports": "import { Playfair_Display } from \"next/font/google\";\nimport { Nunito } from \"next/font/google\";",
+      "initializations": "const playfairDisplay = Playfair_Display({\n  variable: \"--font-playfair-display\",\n  subsets: [\"latin\"],\n});\n\nconst nunito = Nunito({\n  variable: \"--font-nunito\",\n  subsets: [\"latin\"],\n});",
+      "classNames": "${playfairDisplay.variable} ${nunito.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-nunito), sans-serif;\n}",
+        "headingsRule": "h1, h2, h3, h4, h5, h6 {\n  font-family: var(--font-playfair-display), serif;\n}",
+        "bodyFontFamily": "var(--font-nunito), sans-serif",
+        "headingsFontFamily": "var(--font-playfair-display), serif"
+      }
+    },
+    "cormorantGaramondInter": {
+      "name": "Cormorant Garamond + Inter",
+      "description": "Elegant serif headings with neutral body. Sophisticated and modern.",
+      "headingFont": "cormorantGaramond",
+      "bodyFont": "inter",
+      "imports": "import { Cormorant_Garamond } from \"next/font/google\";\nimport { Inter } from \"next/font/google\";",
+      "initializations": "const cormorantGaramond = Cormorant_Garamond({\n  variable: \"--font-cormorant-garamond\",\n  subsets: [\"latin\"],\n  weight: [\"300\", \"400\", \"500\", \"600\", \"700\"],\n});\n\nconst inter = Inter({\n  variable: \"--font-inter\",\n  subsets: [\"latin\"],\n});",
+      "classNames": "${cormorantGaramond.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-cormorant-garamond), serif;\n}",
+        "bodyFontFamily": "var(--font-inter), sans-serif",
+        "headingsFontFamily": "var(--font-cormorant-garamond), serif"
+      }
+    },
+    "loraSourceSans3": {
+      "name": "Lora + Source Sans 3",
+      "description": "Readable serif headings with modern body. Editorial and professional.",
+      "headingFont": "lora",
+      "bodyFont": "sourceSans3",
+      "imports": "import { Lora } from \"next/font/google\";\nimport { Source_Sans_3 } from \"next/font/google\";",
+      "initializations": "const lora = Lora({\n  variable: \"--font-lora\",\n  subsets: [\"latin\"],\n});\n\nconst sourceSans3 = Source_Sans_3({\n  variable: \"--font-source-sans-3\",\n  subsets: [\"latin\"],\n});",
+      "classNames": "${lora.variable} ${sourceSans3.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-source-sans-3), sans-serif;\n}",
+        "headingsRule": "h1, h2, h3, h4, h5, h6 {\n  font-family: var(--font-lora), serif;\n}",
+        "bodyFontFamily": "var(--font-source-sans-3), sans-serif",
+        "headingsFontFamily": "var(--font-lora), 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"
+      }
+    },
+    "notoSansInter": {
+      "name": "Noto Sans + Inter",
+      "description": "Universal headings with neutral body. Global and accessible.",
+      "headingFont": "notoSans",
+      "bodyFont": "inter",
+      "imports": "import { Noto_Sans } from \"next/font/google\";\nimport { Inter } from \"next/font/google\";",
+      "initializations": "const notoSans = Noto_Sans({\n  variable: \"--font-noto-sans\",\n  subsets: [\"latin\"],\n});\n\nconst inter = Inter({\n  variable: \"--font-inter\",\n  subsets: [\"latin\"],\n});",
+      "classNames": "${notoSans.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-noto-sans), sans-serif;\n}",
+        "bodyFontFamily": "var(--font-inter), sans-serif",
+        "headingsFontFamily": "var(--font-noto-sans), sans-serif"
+      }
+    },
+    "openSansWorkSans": {
+      "name": "Open Sans + Work Sans",
+      "description": "Friendly headings with versatile body. Approachable and balanced.",
+      "headingFont": "openSans",
+      "bodyFont": "workSans",
+      "imports": "import { Open_Sans } from \"next/font/google\";\nimport { Work_Sans } from \"next/font/google\";",
+      "initializations": "const openSans = Open_Sans({\n  variable: \"--font-open-sans\",\n  subsets: [\"latin\"],\n});\n\nconst workSans = Work_Sans({\n  variable: \"--font-work-sans\",\n  subsets: [\"latin\"],\n});",
+      "classNames": "${openSans.variable} ${workSans.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-work-sans), sans-serif;\n}",
+        "headingsRule": "h1, h2, h3, h4, h5, h6 {\n  font-family: var(--font-open-sans), sans-serif;\n}",
+        "bodyFontFamily": "var(--font-work-sans), sans-serif",
+        "headingsFontFamily": "var(--font-open-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"
+      }
+    },
+    "frauncesInter": {
+      "name": "Fraunces + Inter",
+      "description": "Distinctive serif headings with neutral body. Bold and modern.",
+      "headingFont": "fraunces",
+      "bodyFont": "inter",
+      "imports": "import { Fraunces } from \"next/font/google\";\nimport { Inter } from \"next/font/google\";",
+      "initializations": "const fraunces = Fraunces({\n  variable: \"--font-fraunces\",\n  subsets: [\"latin\"],\n});\n\nconst inter = Inter({\n  variable: \"--font-inter\",\n  subsets: [\"latin\"],\n});",
+      "classNames": "${fraunces.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-fraunces), serif;\n}",
+        "bodyFontFamily": "var(--font-inter), sans-serif",
+        "headingsFontFamily": "var(--font-fraunces), serif"
+      }
+    },
+    "dmSerifDisplayDmSans": {
+      "name": "DM Serif Display + DM Sans",
+      "description": "Elegant serif headings with clean sans-serif body. Cohesive DM family pairing.",
+      "headingFont": "dmSerifDisplay",
+      "bodyFont": "dmSans",
+      "imports": "import { DM_Serif_Display } from \"next/font/google\";\nimport { DM_Sans } from \"next/font/google\";",
+      "initializations": "const dmSerifDisplay = DM_Serif_Display({\n  variable: \"--font-dm-serif-display\",\n  subsets: [\"latin\"],\n  weight: [\"400\"],\n});\n\nconst dmSans = DM_Sans({\n  variable: \"--font-dm-sans\",\n  subsets: [\"latin\"],\n});",
+      "classNames": "${dmSerifDisplay.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-dm-serif-display), serif;\n}",
+        "bodyFontFamily": "var(--font-dm-sans), sans-serif",
+        "headingsFontFamily": "var(--font-dm-serif-display), serif"
+      }
+    },
+    "prataInter": {
+      "name": "Prata + Inter",
+      "description": "Elegant display serif headings with neutral body. Sophisticated and refined.",
+      "headingFont": "prata",
+      "bodyFont": "inter",
+      "imports": "import { Prata } from \"next/font/google\";\nimport { Inter } from \"next/font/google\";",
+      "initializations": "const prata = Prata({\n  variable: \"--font-prata\",\n  subsets: [\"latin\"],\n  weight: [\"400\"],\n});\n\nconst inter = Inter({\n  variable: \"--font-inter\",\n  subsets: [\"latin\"],\n});",
+      "classNames": "${prata.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-prata), serif;\n}",
+        "bodyFontFamily": "var(--font-inter), sans-serif",
+        "headingsFontFamily": "var(--font-prata), serif"
+      }
+    },
+    "epilogueInter": {
+      "name": "Epilogue + Inter",
+      "description": "Modern variable headings with neutral body. Contemporary and flexible.",
+      "headingFont": "epilogue",
+      "bodyFont": "inter",
+      "imports": "import { Epilogue } from \"next/font/google\";\nimport { Inter } from \"next/font/google\";",
+      "initializations": "const epilogue = Epilogue({\n  variable: \"--font-epilogue\",\n  subsets: [\"latin\"],\n});\n\nconst inter = Inter({\n  variable: \"--font-inter\",\n  subsets: [\"latin\"],\n});",
+      "classNames": "${epilogue.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-epilogue), sans-serif;\n}",
+        "bodyFontFamily": "var(--font-inter), sans-serif",
+        "headingsFontFamily": "var(--font-epilogue), sans-serif"
+      }
+    },
+    "plusJakartaSansInter": {
+      "name": "Plus Jakarta Sans + Inter",
+      "description": "Friendly rounded headings with neutral body. Approachable and modern.",
+      "headingFont": "plusJakartaSans",
+      "bodyFont": "inter",
+      "imports": "import { Plus_Jakarta_Sans } from \"next/font/google\";\nimport { Inter } from \"next/font/google\";",
+      "initializations": "const plusJakartaSans = Plus_Jakarta_Sans({\n  variable: \"--font-plus-jakarta-sans\",\n  subsets: [\"latin\"],\n});\n\nconst inter = Inter({\n  variable: \"--font-inter\",\n  subsets: [\"latin\"],\n});",
+      "classNames": "${plusJakartaSans.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-plus-jakarta-sans), sans-serif;\n}",
+        "bodyFontFamily": "var(--font-inter), sans-serif",
+        "headingsFontFamily": "var(--font-plus-jakarta-sans), sans-serif"
+      }
+    },
+    "nunitoInter": {
+      "name": "Nunito + Inter",
+      "description": "Rounded friendly headings with neutral body. Warm and approachable.",
+      "headingFont": "nunito",
+      "bodyFont": "inter",
+      "imports": "import { Nunito } from \"next/font/google\";\nimport { Inter } from \"next/font/google\";",
+      "initializations": "const nunito = Nunito({\n  variable: \"--font-nunito\",\n  subsets: [\"latin\"],\n});\n\nconst inter = Inter({\n  variable: \"--font-inter\",\n  subsets: [\"latin\"],\n});",
+      "classNames": "${nunito.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-nunito), sans-serif;\n}",
+        "bodyFontFamily": "var(--font-inter), sans-serif",
+        "headingsFontFamily": "var(--font-nunito), sans-serif"
+      }
+    },
+    "merriweatherOpenSans": {
+      "name": "Merriweather + Open Sans",
+      "description": "Classic serif headings with friendly body. Readable and approachable.",
+      "headingFont": "merriweather",
+      "bodyFont": "openSans",
+      "imports": "import { Merriweather } from \"next/font/google\";\nimport { Open_Sans } from \"next/font/google\";",
+      "initializations": "const merriweather = Merriweather({\n  variable: \"--font-merriweather\",\n  subsets: [\"latin\"],\n  weight: [\"300\", \"400\", \"700\", \"900\"],\n});\n\nconst openSans = Open_Sans({\n  variable: \"--font-open-sans\",\n  subsets: [\"latin\"],\n});",
+      "classNames": "${merriweather.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-merriweather), serif;\n}",
+        "bodyFontFamily": "var(--font-open-sans), sans-serif",
+        "headingsFontFamily": "var(--font-merriweather), serif"
+      }
+    },
+    "cormorantLora": {
+      "name": "Cormorant + Lora",
+      "description": "Elegant serif headings with readable serif body. Classic and refined.",
+      "headingFont": "cormorant",
+      "bodyFont": "lora",
+      "imports": "import { Cormorant } from \"next/font/google\";\nimport { Lora } from \"next/font/google\";",
+      "initializations": "const cormorant = Cormorant({\n  variable: \"--font-cormorant\",\n  subsets: [\"latin\"],\n});\n\nconst lora = Lora({\n  variable: \"--font-lora\",\n  subsets: [\"latin\"],\n});",
+      "classNames": "${cormorant.variable} ${lora.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-lora), serif;\n}",
+        "headingsRule": "h1, h2, h3, h4, h5, h6 {\n  font-family: var(--font-cormorant), serif;\n}",
+        "bodyFontFamily": "var(--font-lora), serif",
+        "headingsFontFamily": "var(--font-cormorant), 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"
+      }
+    },
+    "spaceGroteskInter": {
+      "name": "Space Grotesk + Inter",
+      "description": "Modern geometric headings with neutral body. Tech-forward and contemporary.",
+      "headingFont": "spaceGrotesk",
+      "bodyFont": "inter",
+      "imports": "import { Space_Grotesk } from \"next/font/google\";\nimport { Inter } from \"next/font/google\";",
+      "initializations": "const spaceGrotesk = Space_Grotesk({\n  variable: \"--font-space-grotesk\",\n  subsets: [\"latin\"],\n});\n\nconst inter = Inter({\n  variable: \"--font-inter\",\n  subsets: [\"latin\"],\n});",
+      "classNames": "${spaceGrotesk.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-space-grotesk), sans-serif;\n}",
+        "bodyFontFamily": "var(--font-inter), sans-serif",
+        "headingsFontFamily": "var(--font-space-grotesk), sans-serif"
+      }
+    },
+    "spectralInter": {
+      "name": "Spectral + Inter",
+      "description": "Screen-optimized serif headings with neutral body. Digital-first and readable.",
+      "headingFont": "spectral",
+      "bodyFont": "inter",
+      "imports": "import { Spectral } from \"next/font/google\";\nimport { Inter } from \"next/font/google\";",
+      "initializations": "const spectral = Spectral({\n  variable: \"--font-spectral\",\n  subsets: [\"latin\"],\n  weight: [\"200\", \"300\", \"400\", \"500\", \"600\", \"700\", \"800\"],\n});\n\nconst inter = Inter({\n  variable: \"--font-inter\",\n  subsets: [\"latin\"],\n});",
+      "classNames": "${spectral.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-spectral), serif;\n}",
+        "bodyFontFamily": "var(--font-inter), sans-serif",
+        "headingsFontFamily": "var(--font-spectral), serif"
+      }
+    },
+    "soraInter": {
+      "name": "Sora + Inter",
+      "description": "Modern geometric headings with neutral body. Perfect for SaaS and tech products.",
+      "headingFont": "sora",
+      "bodyFont": "inter",
+      "imports": "import { Sora } from \"next/font/google\";\nimport { Inter } from \"next/font/google\";",
+      "initializations": "const sora = Sora({\n  variable: \"--font-sora\",\n  subsets: [\"latin\"],\n});\n\nconst inter = Inter({\n  variable: \"--font-inter\",\n  subsets: [\"latin\"],\n});",
+      "classNames": "${sora.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-sora), sans-serif;\n}",
+        "bodyFontFamily": "var(--font-inter), sans-serif",
+        "headingsFontFamily": "var(--font-sora), sans-serif"
+      }
+    }
+  }
+}
diff --git a/next.config.ts b/next.config.ts
new file mode 100644
index 0000000..ca6c939
--- /dev/null
+++ b/next.config.ts
@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  devIndicators: false,
+};
+
+export default nextConfig;
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..13ce1fa
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,7051 @@
+{
+  "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.6",
+        "@react-three/fiber": "^9.4.0",
+        "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.11",
+        "lucide-react": "^0.544.0",
+        "motion-number": "^1.0.0",
+        "next": "15.5.7",
+        "posthog-js": "^1.273.1",
+        "react": "19.1.0",
+        "react-dom": "19.1.0",
+        "react-fast-marquee": "^1.6.5",
+        "tailwind-merge": "^3.3.1",
+        "three": "^0.181.0"
+      },
+      "devDependencies": {
+        "@eslint/eslintrc": "^3",
+        "@tailwindcss/postcss": "^4",
+        "@types/node": "^20",
+        "@types/react": "^19",
+        "@types/react-dom": "^19",
+        "eslint": "^9",
+        "eslint-config-next": "15.5.4",
+        "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/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/@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": "15.5.7",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-15.5.7.tgz",
+      "integrity": "sha512-4h6Y2NyEkIEN7Z8YxkA27pq6zTkS09bUSYC0xjd0NpwFxjnIKeZEeH591o5WECSmjpUhLn3H2QLJcDye3Uzcvg==",
+      "license": "MIT"
+    },
+    "node_modules/@next/eslint-plugin-next": {
+      "version": "15.5.4",
+      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-15.5.4.tgz",
+      "integrity": "sha512-SR1vhXNNg16T4zffhJ4TS7Xn7eq4NfKfcOsRwea7RIAHrjRpI9ALYbamqIJqkAhowLlERffiwk0FMvTLNdnVtw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-glob": "3.3.1"
+      }
+    },
+    "node_modules/@next/swc-darwin-arm64": {
+      "version": "15.5.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.5.7.tgz",
+      "integrity": "sha512-IZwtxCEpI91HVU/rAUOOobWSZv4P2DeTtNaCdHqLcTJU4wdNXgAySvKa/qJCgR5m6KI8UsKDXtO2B31jcaw1Yw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-darwin-x64": {
+      "version": "15.5.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-15.5.7.tgz",
+      "integrity": "sha512-UP6CaDBcqaCBuiq/gfCEJw7sPEoX1aIjZHnBWN9v9qYHQdMKvCKcAVs4OX1vIjeE+tC5EIuwDTVIoXpUes29lg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-gnu": {
+      "version": "15.5.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.5.7.tgz",
+      "integrity": "sha512-NCslw3GrNIw7OgmRBxHtdWFQYhexoUCq+0oS2ccjyYLtcn1SzGzeM54jpTFonIMUjNbHmpKpziXnpxhSWLcmBA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-musl": {
+      "version": "15.5.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.5.7.tgz",
+      "integrity": "sha512-nfymt+SE5cvtTrG9u1wdoxBr9bVB7mtKTcj0ltRn6gkP/2Nu1zM5ei8rwP9qKQP0Y//umK+TtkKgNtfboBxRrw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-gnu": {
+      "version": "15.5.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.5.7.tgz",
+      "integrity": "sha512-hvXcZvCaaEbCZcVzcY7E1uXN9xWZfFvkNHwbe/n4OkRhFWrs1J1QV+4U1BN06tXLdaS4DazEGXwgqnu/VMcmqw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-musl": {
+      "version": "15.5.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.5.7.tgz",
+      "integrity": "sha512-4IUO539b8FmF0odY6/SqANJdgwn1xs1GkPO5doZugwZ3ETF6JUdckk7RGmsfSf7ws8Qb2YB5It33mvNL/0acqA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-arm64-msvc": {
+      "version": "15.5.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.5.7.tgz",
+      "integrity": "sha512-CpJVTkYI3ZajQkC5vajM7/ApKJUOlm6uP4BknM3XKvJ7VXAvCqSjSLmM0LKdYzn6nBJVSjdclx8nYJSa3xlTgQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-x64-msvc": {
+      "version": "15.5.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.5.7.tgz",
+      "integrity": "sha512-gMzgBX164I6DN+9/PGA+9dQiwmTkE4TloBNx8Kv9UiGARsr9Nba7IpcBRA1iTV9vwlYnrE3Uy6I7Aj6qLjQuqw==",
+      "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/@posthog/core": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@posthog/core/-/core-1.2.2.tgz",
+      "integrity": "sha512-f16Ozx6LIigRG+HsJdt+7kgSxZTHeX5f1JlCGKI1lXcvlZgfsCR338FuMI2QRYXGl+jg/vYFzGOTQBxl90lnBg==",
+      "license": "MIT"
+    },
+    "node_modules/@react-three/drei": {
+      "version": "10.7.6",
+      "resolved": "https://registry.npmjs.org/@react-three/drei/-/drei-10.7.6.tgz",
+      "integrity": "sha512-ZSFwRlRaa4zjtB7yHO6Q9xQGuyDCzE7whXBhum92JslcMRC3aouivp0rAzszcVymIoJx6PXmibyP+xr+zKdwLg==",
+      "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/@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/@rushstack/eslint-patch": {
+      "version": "1.12.0",
+      "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.12.0.tgz",
+      "integrity": "sha512-5EwMtOqvJMMa3HbmxLlF74e+3/HhwBTMcvt3nqVJgGCozO6hzIPOBlwm8mGVNR9SN2IJpxSnlxczyDjcn7qIyw==",
+      "dev": true,
+      "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/@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/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/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.44.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.44.1.tgz",
+      "integrity": "sha512-molgphGqOBT7t4YKCSkbasmu1tb1MgrZ2szGzHbclF7PNmOkSTQVHy+2jXOSnxvR3+Xe1yySHFZoqMpz3TfQsw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/regexpp": "^4.10.0",
+        "@typescript-eslint/scope-manager": "8.44.1",
+        "@typescript-eslint/type-utils": "8.44.1",
+        "@typescript-eslint/utils": "8.44.1",
+        "@typescript-eslint/visitor-keys": "8.44.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.44.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.44.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.44.1.tgz",
+      "integrity": "sha512-EHrrEsyhOhxYt8MTg4zTF+DJMuNBzWwgvvOYNj/zm1vnaD/IC5zCXFehZv94Piqa2cRFfXrTFxIvO95L7Qc/cw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/scope-manager": "8.44.1",
+        "@typescript-eslint/types": "8.44.1",
+        "@typescript-eslint/typescript-estree": "8.44.1",
+        "@typescript-eslint/visitor-keys": "8.44.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.44.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.44.1.tgz",
+      "integrity": "sha512-ycSa60eGg8GWAkVsKV4E6Nz33h+HjTXbsDT4FILyL8Obk5/mx4tbvCNsLf9zret3ipSumAOG89UcCs/KRaKYrA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/tsconfig-utils": "^8.44.1",
+        "@typescript-eslint/types": "^8.44.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.44.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.44.1.tgz",
+      "integrity": "sha512-NdhWHgmynpSvyhchGLXh+w12OMT308Gm25JoRIyTZqEbApiBiQHD/8xgb6LqCWCFcxFtWwaVdFsLPQI3jvhywg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.44.1",
+        "@typescript-eslint/visitor-keys": "8.44.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.44.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.44.1.tgz",
+      "integrity": "sha512-B5OyACouEjuIvof3o86lRMvyDsFwZm+4fBOqFHccIctYgBjqR3qT39FBYGN87khcgf0ExpdCBeGKpKRhSFTjKQ==",
+      "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.44.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.44.1.tgz",
+      "integrity": "sha512-KdEerZqHWXsRNKjF9NYswNISnFzXfXNDfPxoTh7tqohU/PRIbwTmsjGK6V9/RTYWau7NZvfo52lgVk+sJh0K3g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.44.1",
+        "@typescript-eslint/typescript-estree": "8.44.1",
+        "@typescript-eslint/utils": "8.44.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.44.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.44.1.tgz",
+      "integrity": "sha512-Lk7uj7y9uQUOEguiDIDLYLJOrYHQa7oBiURYVFqIpGxclAFQ78f6VUOM8lI2XEuNOKNB7XuvM2+2cMXAoq4ALQ==",
+      "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.44.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.44.1.tgz",
+      "integrity": "sha512-qnQJ+mVa7szevdEyvfItbO5Vo+GfZ4/GZWWDRRLjrxYPkhM+6zYB2vRYwCsoJLzqFCdZT4mEqyJoyzkunsZ96A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/project-service": "8.44.1",
+        "@typescript-eslint/tsconfig-utils": "8.44.1",
+        "@typescript-eslint/types": "8.44.1",
+        "@typescript-eslint/visitor-keys": "8.44.1",
+        "debug": "^4.3.4",
+        "fast-glob": "^3.3.2",
+        "is-glob": "^4.0.3",
+        "minimatch": "^9.0.4",
+        "semver": "^7.6.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": ">=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/fast-glob": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
+      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
+      "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.8"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/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/@typescript-eslint/typescript-estree/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@typescript-eslint/utils": {
+      "version": "8.44.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.44.1.tgz",
+      "integrity": "sha512-DpX5Fp6edTlocMCwA+mHY8Mra+pPjRZ0TfHkXI8QFelIKcbADQz1LUPNtzOFUriBB2UYqw4Pi9+xV4w9ZczHFg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.7.0",
+        "@typescript-eslint/scope-manager": "8.44.1",
+        "@typescript-eslint/types": "8.44.1",
+        "@typescript-eslint/typescript-estree": "8.44.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.44.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.44.1.tgz",
+      "integrity": "sha512-576+u0QD+Jp3tZzvfRfxon0EA2lzcDt3lhUbsC6Lgzy9x2VR4E+JUiNyGHi5T8vk0TV+fpJ5GLG1JsJuWCaKhw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.44.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.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "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/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/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.30001745",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001745.tgz",
+      "integrity": "sha512-ywt6i8FzvdgrrrGbr1jZVObnVv6adj+0if2/omv9cmR2oiZs30zL4DIyaptKcbOrBdOIc74QTMoJvSE2QHh5UQ==",
+      "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/core-js": {
+      "version": "3.45.1",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.45.1.tgz",
+      "integrity": "sha512-L4NPsJlCfZsPeXukyzHFlg/i7IIVwHSItR0wg0FLNqYClJ4MQYTYLbC7EkjKYRLZF2iof2MUgN0EGy7MdQFChg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
+    "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/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/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/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/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": "15.5.4",
+      "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-15.5.4.tgz",
+      "integrity": "sha512-BzgVVuT3kfJes8i2GHenC1SRJ+W3BTML11lAOYFOOPzrk2xp66jBOAGEFRw+3LkYCln5UzvFsLhojrshb5Zfaw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@next/eslint-plugin-next": "15.5.4",
+        "@rushstack/eslint-patch": "^1.10.3",
+        "@typescript-eslint/eslint-plugin": "^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0",
+        "@typescript-eslint/parser": "^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0",
+        "eslint-import-resolver-node": "^0.3.6",
+        "eslint-import-resolver-typescript": "^3.5.2",
+        "eslint-plugin-import": "^2.31.0",
+        "eslint-plugin-jsx-a11y": "^6.10.0",
+        "eslint-plugin-react": "^7.37.0",
+        "eslint-plugin-react-hooks": "^5.0.0"
+      },
+      "peerDependencies": {
+        "eslint": "^7.23.0 || ^8.0.0 || ^9.0.0",
+        "typescript": ">=3.3.1"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "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": "5.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-5.2.0.tgz",
+      "integrity": "sha512-+f15FfK64YQwZdJNELETdn5ibXEUQmW1DZL6KXhNnc2heoy/sg9VJJeT7n8TlMWouzWqSWavFkIhHyIbIAEapg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "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/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/fflate": {
+      "version": "0.4.8",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.4.8.tgz",
+      "integrity": "sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA==",
+      "license": "MIT"
+    },
+    "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.3.3",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.3.tgz",
+      "integrity": "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==",
+      "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/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/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/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/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.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "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.11",
+      "resolved": "https://registry.npmjs.org/lenis/-/lenis-1.3.11.tgz",
+      "integrity": "sha512-lkyBnNTVwJzlupp+VL6LTn62WeT8WponuLpmTU0Z20cMwMsLLjqbSqwuA7I1yKSVWCBj/awo4jnFzOMOVCB8OQ==",
+      "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/lucide-react": {
+      "version": "0.544.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.544.0.tgz",
+      "integrity": "sha512-t5tS44bqd825zAW45UQxpG2CvcC4urOwn2TrwSH8u+MjeE+1NnWl6QqeQ/6NdjMqdOygyiT9p3Ev0p1NJykxjw==",
+      "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.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "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": "15.5.7",
+      "resolved": "https://registry.npmjs.org/next/-/next-15.5.7.tgz",
+      "integrity": "sha512-+t2/0jIJ48kUpGKkdlhgkv+zPTEOoXyr60qXe68eB/pl3CMJaLeIGjzp5D6Oqt25hCBiBTt8wEeeAzfJvUKnPQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@next/env": "15.5.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": "^18.18.0 || ^19.8.0 || >= 20.0.0"
+      },
+      "optionalDependencies": {
+        "@next/swc-darwin-arm64": "15.5.7",
+        "@next/swc-darwin-x64": "15.5.7",
+        "@next/swc-linux-arm64-gnu": "15.5.7",
+        "@next/swc-linux-arm64-musl": "15.5.7",
+        "@next/swc-linux-x64-gnu": "15.5.7",
+        "@next/swc-linux-x64-musl": "15.5.7",
+        "@next/swc-win32-arm64-msvc": "15.5.7",
+        "@next/swc-win32-x64-msvc": "15.5.7",
+        "sharp": "^0.34.3"
+      },
+      "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/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/posthog-js": {
+      "version": "1.273.1",
+      "resolved": "https://registry.npmjs.org/posthog-js/-/posthog-js-1.273.1.tgz",
+      "integrity": "sha512-6w3j6nAWJj7W7/iksWLXRpdLrLZrQA8jTsEQ71bvmyw4bwCqhgPfxutrmeoAUNaxot2FB1JHc9Lagslg35h61g==",
+      "license": "SEE LICENSE IN LICENSE",
+      "dependencies": {
+        "@posthog/core": "1.2.2",
+        "core-js": "^3.38.1",
+        "fflate": "^0.4.8",
+        "preact": "^10.19.3",
+        "web-vitals": "^4.2.4"
+      },
+      "peerDependencies": {
+        "@rrweb/types": "2.0.0-alpha.17",
+        "rrweb-snapshot": "2.0.0-alpha.17"
+      },
+      "peerDependenciesMeta": {
+        "@rrweb/types": {
+          "optional": true
+        },
+        "rrweb-snapshot": {
+          "optional": true
+        }
+      }
+    },
+    "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/preact": {
+      "version": "10.27.2",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.27.2.tgz",
+      "integrity": "sha512-5SYSgFKSyhCbk6SrXyMpqjb5+MQBgfvEKE/OC+PujcY34sOpqtr+0AZQtPYx5IA6VxynQ7rUPCtKzyovpj9Bpg==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/preact"
+      }
+    },
+    "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.1.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
+      "integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "19.1.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
+      "integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==",
+      "license": "MIT",
+      "dependencies": {
+        "scheduler": "^0.26.0"
+      },
+      "peerDependencies": {
+        "react": "^19.1.0"
+      }
+    },
+    "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==",
+      "dev": true,
+      "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-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/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/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.26.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.26.0.tgz",
+      "integrity": "sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==",
+      "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.3.1",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.3.1.tgz",
+      "integrity": "sha512-gBXpgUm/3rp1lMZZrM/w7D8GKqshif0zAymAhbCyIt8KMe+0v9DQ7cdYLR4FHH/cKpdTXb+A/tKKU3eolfsI+g==",
+      "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.2",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-7.5.2.tgz",
+      "integrity": "sha512-7NyxrTE4Anh8km8iEy7o0QYPs+0JKBTj5ZaqHg6B39erLg0qYXN3BijtShwbsNSvQ+LN75+KV+C4QR/f6Gwnpg==",
+      "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.0",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.181.0.tgz",
+      "integrity": "sha512-KGf6EOCOQGshXeleKxpxhbowQwAXR2dLlD93egHtZ9Qmk07Saf8sXDR+7wJb53Z1ORZiatZ4WGST9UsVxhHEbg==",
+      "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/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/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/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/web-vitals": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-4.2.4.tgz",
+      "integrity": "sha512-r4DIlprAGwJ7YM11VZp4R884m0Vmgr6EAKe3P+kO0PPj3Unqyvv59rczf6UiGcb9Z8QxZVcqKNwv/g0WNdWwsw==",
+      "license": "Apache-2.0"
+    },
+    "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/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..c508af0
--- /dev/null
+++ b/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "webild-components-2",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --turbopack",
+    "build": "next build --turbopack",
+    "start": "next start",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "@gsap/react": "^2.1.2",
+    "@react-three/drei": "^10.7.6",
+    "@react-three/fiber": "^9.4.0",
+    "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.11",
+    "lucide-react": "^0.544.0",
+    "motion-number": "^1.0.0",
+    "next": "15.5.7",
+    "posthog-js": "^1.273.1",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "react-fast-marquee": "^1.6.5",
+    "tailwind-merge": "^3.3.1",
+    "three": "^0.181.0"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3",
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "15.5.4",
+    "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/public/audio/click.mp3 b/public/audio/click.mp3
new file mode 100644
index 0000000..b85c22d
Binary files /dev/null and b/public/audio/click.mp3 differ
diff --git a/public/base/bg-texture.avif b/public/base/bg-texture.avif
new file mode 100644
index 0000000..d1c5a1d
Binary files /dev/null and b/public/base/bg-texture.avif differ
diff --git a/public/brand/logo-dot.svg b/public/brand/logo-dot.svg
new file mode 100644
index 0000000..2bc5a13
--- /dev/null
+++ b/public/brand/logo-dot.svg
@@ -0,0 +1,52 @@
+<svg width="7" height="7" viewBox="0 0 7 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_f_1295_3221)">
+<ellipse cx="3.59341" cy="3.53052" rx="1.8861" ry="1.90568" transform="rotate(25.4025 3.59341 3.53052)" fill="url(#paint0_linear_1295_3221)"/>
+</g>
+<g filter="url(#filter1_f_1295_3221)">
+<circle cx="3.69632" cy="3.86088" r="1.65146" transform="rotate(25.4025 3.69632 3.86088)" fill="url(#paint1_linear_1295_3221)"/>
+</g>
+<g filter="url(#filter2_f_1295_3221)">
+<circle cx="3.69633" cy="3.86069" r="1.65146" transform="rotate(-169.598 3.69633 3.86069)" fill="url(#paint2_linear_1295_3221)"/>
+</g>
+<g filter="url(#filter3_f_1295_3221)">
+<circle cx="3.74882" cy="3.91343" r="1.65146" transform="rotate(-169.598 3.74882 3.91343)" fill="url(#paint3_linear_1295_3221)"/>
+</g>
+<defs>
+<filter id="filter0_f_1295_3221" x="1.25185" y="1.17653" width="4.68307" height="4.70798" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0" result="effect1_foregroundBlur_1295_3221"/>
+</filter>
+<filter id="filter1_f_1295_3221" x="0.569126" y="0.733676" width="6.25433" height="6.25433" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0" result="effect1_foregroundBlur_1295_3221"/>
+</filter>
+<filter id="filter2_f_1295_3221" x="1.16377" y="1.3282" width="5.06515" height="5.06478" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.0330293" result="effect1_foregroundBlur_1295_3221"/>
+</filter>
+<filter id="filter3_f_1295_3221" x="0.687796" y="0.852469" width="6.12209" height="6.12172" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.704625" result="effect1_foregroundBlur_1295_3221"/>
+</filter>
+<linearGradient id="paint0_linear_1295_3221" x1="3.68116" y1="3.8564" x2="5.08951" y2="5.37639" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0F3DA6"/>
+<stop offset="0.951923" stop-color="#3A9AFF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1295_3221" x1="2.5674" y1="3.78948" x2="3.91229" y2="5.46656" gradientUnits="userSpaceOnUse">
+<stop offset="0.00961538" stop-color="#0D50E8"/>
+<stop offset="0.951923" stop-color="#3A9AFF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_1295_3221" x1="5.38038" y1="5.11694" x2="2.76523" y2="1.84712" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0F3DA6" stop-opacity="0"/>
+<stop offset="1" stop-color="#59ABFF"/>
+</linearGradient>
+<linearGradient id="paint3_linear_1295_3221" x1="5.43287" y1="5.16968" x2="4.3403" y2="2.57182" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0F3DA6" stop-opacity="0"/>
+<stop offset="1" stop-color="#59ABFF"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/public/brand/logo.svg b/public/brand/logo.svg
new file mode 100644
index 0000000..0c42d87
--- /dev/null
+++ b/public/brand/logo.svg
@@ -0,0 +1,74 @@
+<svg width="67" height="21" viewBox="0 0 67 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M26.4375 7.16162C28.1869 7.16171 29.6159 7.78044 30.6064 8.88428C31.5956 9.98684 32.1387 11.5637 32.1387 13.4653V14.4478H23.374V14.4917C23.3742 15.5488 23.6921 16.4168 24.249 17.019C24.8052 17.6203 25.6093 17.9673 26.6025 17.9673C28.0159 17.9672 29.0384 17.2571 29.3633 16.228L29.3877 16.1509H32.0156L31.9961 16.2778C31.6314 18.6096 29.4248 20.2515 26.543 20.2515C24.6949 20.2514 23.2009 19.6255 22.1699 18.4937C21.1401 17.3628 20.5822 15.7381 20.582 13.7603C20.582 11.7937 21.1488 10.1435 22.168 8.98389C23.1888 7.82281 24.6569 7.16165 26.4375 7.16162ZM36.1025 9.28955C36.8971 7.97245 38.2815 7.18506 39.9678 7.18506C41.5623 7.18515 42.8859 7.81845 43.8086 8.95557C44.7294 10.0905 45.2441 11.7187 45.2441 13.7007C45.2441 15.6882 44.7324 17.3191 43.8115 18.4556C42.8887 19.5944 41.5621 20.2279 39.9561 20.228C38.2187 20.228 36.8448 19.4336 36.0312 18.1226V20.0151H33.334V2.77295H36.1025V9.28955ZM67 20.0151H64.3027V18.1284C63.5158 19.417 62.1356 20.228 60.4141 20.228C58.8134 20.228 57.4778 19.588 56.5449 18.4468C55.614 17.3077 55.0899 15.677 55.0898 13.7007C55.0898 11.7241 55.6138 10.0956 56.542 8.95947C57.4719 7.82125 58.8017 7.18506 60.3906 7.18506C62.0846 7.18514 63.4609 7.98063 64.2207 9.2251V2.77295H67V20.0151ZM2.99902 2.85791L6.0918 15.9497L9.62793 2.85498L9.64941 2.77295H12.2715L12.2939 2.85498L15.8398 15.9507L18.9336 2.85791L18.9541 2.77295H21.9336L21.8955 2.91162L17.2949 19.9341L17.2734 20.0151H14.6172L14.5938 19.9351L10.9609 7.26416L7.33887 19.9351L7.31641 20.0151H4.64746L4.62598 19.9341L0.0371094 2.91162L0 2.77295H2.97949L2.99902 2.85791ZM53.9062 20.0151H51.1377V2.77295H53.9062V20.0151ZM49.0352 19.9839H46.2666V7.354H49.0352V19.9839ZM60.9092 17.9536C60.9674 17.9566 61.0263 17.9585 61.0859 17.9585V17.9575L60.9092 17.9536ZM60.6924 17.9351C60.7503 17.9417 60.8088 17.947 60.8682 17.9507C60.8088 17.947 60.7503 17.9417 60.6924 17.9351ZM60.4434 17.8979C60.5109 17.911 60.5797 17.9212 60.6494 17.9302C60.5797 17.9212 60.5109 17.911 60.4434 17.8979ZM39.2715 9.55225C38.3397 9.55229 37.5483 9.96027 36.9873 10.6792C36.4249 11.4002 36.0908 12.4394 36.0908 13.7007C36.0909 14.9739 36.425 16.0131 36.9873 16.731C37.548 17.4465 38.3393 17.8491 39.2715 17.8491C40.2407 17.8491 41.0189 17.4568 41.5576 16.7495C42.0989 16.0387 42.4052 15 42.4053 13.7007C42.4053 12.4132 42.0991 11.3737 41.5576 10.6597C41.0186 9.94925 40.2402 9.5523 39.2715 9.55225ZM61.0869 9.55225C60.1117 9.55225 59.3237 9.94972 58.7773 10.6606C58.2287 11.3747 57.917 12.4136 57.917 13.7007C57.917 14.9937 58.2288 16.0322 58.7773 16.7446C59.3236 17.454 60.1115 17.8491 61.0869 17.8491C62.0312 17.849 62.8158 17.449 63.3672 16.7358C63.9205 16.0199 64.2441 14.9807 64.2441 13.7007C64.2441 12.4325 63.9207 11.3935 63.3672 10.6743C62.8155 9.95775 62.0308 9.55241 61.0869 9.55225ZM41.2676 17.2271C41.3209 17.1788 41.3736 17.1293 41.4238 17.0767L41.4307 17.0688C41.3782 17.1242 41.3235 17.1766 41.2676 17.2271ZM57.8643 14.6216C57.8776 14.7252 57.8932 14.8268 57.9111 14.9263C57.8933 14.8268 57.8775 14.7252 57.8643 14.6216ZM57.8066 13.7007C57.8067 14.0028 57.8244 14.2919 57.8574 14.5669C57.8424 14.4409 57.8305 14.312 57.8223 14.1802L57.8076 13.7007C57.8076 13.6621 57.809 13.6237 57.8096 13.5854C57.809 13.6237 57.8066 13.6621 57.8066 13.7007ZM45.1035 14.5063C45.1121 14.3932 45.1182 14.2786 45.123 14.1626C45.1182 14.2786 45.112 14.3932 45.1035 14.5063ZM45.1338 13.7007C45.1338 13.8433 45.1302 13.9839 45.125 14.1226C45.1257 14.1037 45.1283 14.0849 45.1289 14.0659L45.1348 13.7007C45.1348 13.5487 45.1312 13.399 45.125 13.2515L45.1338 13.7007ZM57.8242 13.2104C57.8213 13.2551 57.8185 13.3 57.8164 13.3452C57.8185 13.3 57.8213 13.2551 57.8242 13.2104ZM57.8555 12.8501C57.8514 12.8844 57.8483 12.9189 57.8447 12.9536C57.8483 12.9189 57.8514 12.8844 57.8555 12.8501ZM57.9346 12.3618C57.9223 12.423 57.909 12.4846 57.8984 12.5474C57.909 12.4846 57.9223 12.423 57.9346 12.3618ZM26.4375 9.43506C24.7618 9.43512 23.5679 10.68 23.3984 12.4468H29.3623C29.3129 11.5693 29.0132 10.8288 28.5244 10.3032C28.0155 9.75613 27.2989 9.43515 26.4375 9.43506ZM57.999 12.0737C57.9868 12.1214 57.975 12.1695 57.9639 12.2183C57.975 12.1695 57.9868 12.1214 57.999 12.0737ZM58.1367 11.6313C58.1073 11.7129 58.0784 11.7959 58.0527 11.8813C58.0784 11.7959 58.1073 11.7129 58.1367 11.6313ZM58.2197 11.4146C58.204 11.4519 58.1887 11.4896 58.1738 11.5278C58.1887 11.4896 58.204 11.4519 58.2197 11.4146ZM58.3633 11.1089C58.3476 11.1388 58.3324 11.1691 58.3174 11.1997C58.3324 11.1691 58.3476 11.1388 58.3633 11.1089ZM58.9629 10.2827C58.8665 10.3786 58.7757 10.4823 58.6904 10.5933L58.7998 10.4595C58.8524 10.3981 58.9065 10.3388 58.9629 10.2827ZM59.5752 9.81885C59.3611 9.93932 59.164 10.0873 58.9854 10.2612C59.0426 10.2054 59.1021 10.1525 59.1631 10.1021C59.2493 10.0308 59.3391 9.96501 59.4326 9.90479C59.4793 9.87472 59.5268 9.84615 59.5752 9.81885ZM26.2725 9.32861C26.327 9.326 26.382 9.32471 26.4375 9.32471L26.5312 9.32666C26.5002 9.32581 26.4689 9.32373 26.4375 9.32373C26.382 9.32373 26.3269 9.32601 26.2725 9.32861Z" fill="black"/>
+<mask id="mask0_1119_6721" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="2" width="67" height="19">
+<path d="M26.4375 7.16162C28.1869 7.16171 29.6159 7.78044 30.6064 8.88428C31.5956 9.98684 32.1387 11.5637 32.1387 13.4653V14.4478H23.374V14.4917C23.3742 15.5488 23.6921 16.4168 24.249 17.019C24.8052 17.6203 25.6093 17.9673 26.6025 17.9673C28.0159 17.9672 29.0384 17.2571 29.3633 16.228L29.3877 16.1509H32.0156L31.9961 16.2778C31.6314 18.6096 29.4248 20.2515 26.543 20.2515C24.6949 20.2514 23.2009 19.6255 22.1699 18.4937C21.1401 17.3628 20.5822 15.7381 20.582 13.7603C20.582 11.7937 21.1488 10.1435 22.168 8.98389C23.1888 7.82281 24.6569 7.16165 26.4375 7.16162ZM36.1025 9.28955C36.8971 7.97245 38.2815 7.18506 39.9678 7.18506C41.5623 7.18515 42.8859 7.81845 43.8086 8.95557C44.7294 10.0905 45.2441 11.7187 45.2441 13.7007C45.2441 15.6882 44.7324 17.3191 43.8115 18.4556C42.8887 19.5944 41.5621 20.2279 39.9561 20.228C38.2187 20.228 36.8448 19.4336 36.0312 18.1226V20.0151H33.334V2.77295H36.1025V9.28955ZM67 20.0151H64.3027V18.1284C63.5158 19.417 62.1356 20.228 60.4141 20.228C58.8134 20.228 57.4778 19.588 56.5449 18.4468C55.614 17.3077 55.0899 15.677 55.0898 13.7007C55.0898 11.7241 55.6138 10.0956 56.542 8.95947C57.4719 7.82125 58.8017 7.18506 60.3906 7.18506C62.0846 7.18514 63.4609 7.98063 64.2207 9.2251V2.77295H67V20.0151ZM2.99902 2.85791L6.0918 15.9497L9.62793 2.85498L9.64941 2.77295H12.2715L12.2939 2.85498L15.8398 15.9507L18.9336 2.85791L18.9541 2.77295H21.9336L21.8955 2.91162L17.2949 19.9341L17.2734 20.0151H14.6172L14.5938 19.9351L10.9609 7.26416L7.33887 19.9351L7.31641 20.0151H4.64746L4.62598 19.9341L0.0371094 2.91162L0 2.77295H2.97949L2.99902 2.85791ZM53.9062 20.0151H51.1377V2.77295H53.9062V20.0151ZM49.0352 19.9839H46.2666V7.354H49.0352V19.9839ZM60.9092 17.9536C60.9674 17.9566 61.0263 17.9585 61.0859 17.9585V17.9575L60.9092 17.9536ZM60.6924 17.9351C60.7503 17.9417 60.8088 17.947 60.8682 17.9507C60.8088 17.947 60.7503 17.9417 60.6924 17.9351ZM60.4434 17.8979C60.5109 17.911 60.5797 17.9212 60.6494 17.9302C60.5797 17.9212 60.5109 17.911 60.4434 17.8979ZM39.2715 9.55225C38.3397 9.55229 37.5483 9.96027 36.9873 10.6792C36.4249 11.4002 36.0908 12.4394 36.0908 13.7007C36.0909 14.9739 36.425 16.0131 36.9873 16.731C37.548 17.4465 38.3393 17.8491 39.2715 17.8491C40.2407 17.8491 41.0189 17.4568 41.5576 16.7495C42.0989 16.0387 42.4052 15 42.4053 13.7007C42.4053 12.4132 42.0991 11.3737 41.5576 10.6597C41.0186 9.94925 40.2402 9.5523 39.2715 9.55225ZM61.0869 9.55225C60.1117 9.55225 59.3237 9.94972 58.7773 10.6606C58.2287 11.3747 57.917 12.4136 57.917 13.7007C57.917 14.9937 58.2288 16.0322 58.7773 16.7446C59.3236 17.454 60.1115 17.8491 61.0869 17.8491C62.0312 17.849 62.8158 17.449 63.3672 16.7358C63.9205 16.0199 64.2441 14.9807 64.2441 13.7007C64.2441 12.4325 63.9207 11.3935 63.3672 10.6743C62.8155 9.95775 62.0308 9.55241 61.0869 9.55225ZM41.2676 17.2271C41.3209 17.1788 41.3736 17.1293 41.4238 17.0767L41.4307 17.0688C41.3782 17.1242 41.3235 17.1766 41.2676 17.2271ZM57.8643 14.6216C57.8776 14.7252 57.8932 14.8268 57.9111 14.9263C57.8933 14.8268 57.8775 14.7252 57.8643 14.6216ZM57.8066 13.7007C57.8067 14.0028 57.8244 14.2919 57.8574 14.5669C57.8424 14.4409 57.8305 14.312 57.8223 14.1802L57.8076 13.7007C57.8076 13.6621 57.809 13.6237 57.8096 13.5854C57.809 13.6237 57.8066 13.6621 57.8066 13.7007ZM45.1035 14.5063C45.1121 14.3932 45.1182 14.2786 45.123 14.1626C45.1182 14.2786 45.112 14.3932 45.1035 14.5063ZM45.1338 13.7007C45.1338 13.8433 45.1302 13.9839 45.125 14.1226C45.1257 14.1037 45.1283 14.0849 45.1289 14.0659L45.1348 13.7007C45.1348 13.5487 45.1312 13.399 45.125 13.2515L45.1338 13.7007ZM57.8242 13.2104C57.8213 13.2551 57.8185 13.3 57.8164 13.3452C57.8185 13.3 57.8213 13.2551 57.8242 13.2104ZM57.8555 12.8501C57.8514 12.8844 57.8483 12.9189 57.8447 12.9536C57.8483 12.9189 57.8514 12.8844 57.8555 12.8501ZM57.9346 12.3618C57.9223 12.423 57.909 12.4846 57.8984 12.5474C57.909 12.4846 57.9223 12.423 57.9346 12.3618ZM26.4375 9.43506C24.7618 9.43512 23.5679 10.68 23.3984 12.4468H29.3623C29.3129 11.5693 29.0132 10.8288 28.5244 10.3032C28.0155 9.75613 27.2989 9.43515 26.4375 9.43506ZM57.999 12.0737C57.9868 12.1214 57.975 12.1695 57.9639 12.2183C57.975 12.1695 57.9868 12.1214 57.999 12.0737ZM58.1367 11.6313C58.1073 11.7129 58.0784 11.7959 58.0527 11.8813C58.0784 11.7959 58.1073 11.7129 58.1367 11.6313ZM58.2197 11.4146C58.204 11.4519 58.1887 11.4896 58.1738 11.5278C58.1887 11.4896 58.204 11.4519 58.2197 11.4146ZM58.3633 11.1089C58.3476 11.1388 58.3324 11.1691 58.3174 11.1997C58.3324 11.1691 58.3476 11.1388 58.3633 11.1089ZM58.9629 10.2827C58.8665 10.3786 58.7757 10.4823 58.6904 10.5933L58.7998 10.4595C58.8524 10.3981 58.9065 10.3388 58.9629 10.2827ZM59.5752 9.81885C59.3611 9.93932 59.164 10.0873 58.9854 10.2612C59.0426 10.2054 59.1021 10.1525 59.1631 10.1021C59.2493 10.0308 59.3391 9.96501 59.4326 9.90479C59.4793 9.87472 59.5268 9.84615 59.5752 9.81885ZM26.2725 9.32861C26.327 9.326 26.382 9.32471 26.4375 9.32471L26.5312 9.32666C26.5002 9.32581 26.4689 9.32373 26.4375 9.32373C26.382 9.32373 26.3269 9.32601 26.2725 9.32861Z" fill="black"/>
+</mask>
+<g mask="url(#mask0_1119_6721)">
+<g opacity="0.17" filter="url(#filter0_f_1119_6721)">
+<path d="M36.1377 2.6198H32.5596L42.4684 -6.4082L54.7993 -5.08703L62.8915 -1.34371L55.57 3.39048C54.469 3.18864 52.1459 2.90606 51.6615 3.39048C51.056 3.99602 51.056 5.64749 50.8908 6.91361C50.7587 7.92651 49.8082 7.84944 49.3495 7.68429L46.4319 8.12468L45.5511 12.4185C45.3125 12.2533 44.6813 11.5707 44.0648 10.1615C43.2941 8.39993 42.3032 7.84944 40.7068 7.68429C39.4297 7.55217 36.78 8.47332 36.1377 8.78527V2.6198Z" fill="#0597FF"/>
+</g>
+<g filter="url(#filter1_f_1119_6721)">
+<path d="M36.1377 2.6198H32.5596L42.4684 -6.4082L54.7993 -5.08703L62.8915 -1.34371L55.57 3.39048C54.469 3.18864 52.1459 2.90606 51.6615 3.39048C51.056 3.99602 51.056 5.64749 50.8908 6.91361C50.7587 7.92651 49.8082 7.84944 49.3495 7.68429L46.4319 8.12468L45.5511 12.4185C45.3125 12.2533 44.6813 11.5707 44.0648 10.1615C43.2941 8.39993 42.3032 7.84944 40.7068 7.68429C39.4297 7.55217 36.78 8.47332 36.1377 8.78527V2.6198Z" fill="#0597FF"/>
+</g>
+</g>
+<g filter="url(#filter2_f_1119_6721)">
+<ellipse cx="47.5933" cy="3.27857" rx="1.8861" ry="1.90568" transform="rotate(25.4025 47.5933 3.27857)" fill="url(#paint0_linear_1119_6721)"/>
+</g>
+<g filter="url(#filter3_f_1119_6721)">
+<circle cx="47.6964" cy="3.60892" r="1.65146" transform="rotate(25.4025 47.6964 3.60892)" fill="url(#paint1_linear_1119_6721)"/>
+</g>
+<g filter="url(#filter4_f_1119_6721)">
+<circle cx="47.6963" cy="3.60874" r="1.65146" transform="rotate(-169.598 47.6963 3.60874)" fill="url(#paint2_linear_1119_6721)"/>
+</g>
+<g filter="url(#filter5_f_1119_6721)">
+<circle cx="47.7491" cy="3.66147" r="1.65146" transform="rotate(-169.598 47.7491 3.66147)" fill="url(#paint3_linear_1119_6721)"/>
+</g>
+<defs>
+<filter id="filter0_f_1119_6721" x="31.2494" y="-7.71836" width="32.9524" height="21.447" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.655081" result="effect1_foregroundBlur_1119_6721"/>
+</filter>
+<filter id="filter1_f_1119_6721" x="27.1648" y="-11.803" width="41.1216" height="29.6162" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="2.69739" result="effect1_foregroundBlur_1119_6721"/>
+</filter>
+<filter id="filter2_f_1119_6721" x="45.2517" y="0.924576" width="4.68307" height="4.70798" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0" result="effect1_foregroundBlur_1119_6721"/>
+</filter>
+<filter id="filter3_f_1119_6721" x="44.5691" y="0.481723" width="6.25433" height="6.25433" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0" result="effect1_foregroundBlur_1119_6721"/>
+</filter>
+<filter id="filter4_f_1119_6721" x="45.1637" y="1.07625" width="5.06527" height="5.06478" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.0330293" result="effect1_foregroundBlur_1119_6721"/>
+</filter>
+<filter id="filter5_f_1119_6721" x="44.6879" y="0.600516" width="6.12221" height="6.12172" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.704625" result="effect1_foregroundBlur_1119_6721"/>
+</filter>
+<linearGradient id="paint0_linear_1119_6721" x1="47.681" y1="3.60445" x2="49.0894" y2="5.12444" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0F3DA6"/>
+<stop offset="0.951923" stop-color="#3A9AFF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1119_6721" x1="46.5675" y1="3.53753" x2="47.9124" y2="5.21461" gradientUnits="userSpaceOnUse">
+<stop offset="0.00961538" stop-color="#0D50E8"/>
+<stop offset="0.951923" stop-color="#3A9AFF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_1119_6721" x1="49.3804" y1="4.86499" x2="46.7652" y2="1.59517" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0F3DA6" stop-opacity="0"/>
+<stop offset="1" stop-color="#59ABFF"/>
+</linearGradient>
+<linearGradient id="paint3_linear_1119_6721" x1="49.4331" y1="4.91773" x2="48.3405" y2="2.31986" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0F3DA6" stop-opacity="0"/>
+<stop offset="1" stop-color="#59ABFF"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/public/brand/logowhite.svg b/public/brand/logowhite.svg
new file mode 100644
index 0000000..d6e5894
--- /dev/null
+++ b/public/brand/logowhite.svg
@@ -0,0 +1,58 @@
+<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 67 21" width="67" height="21">
+	<defs>
+		<clipPath clipPathUnits="userSpaceOnUse" id="cp1">
+			<path d="m26.44 7.16c1.75 0 3.18 0.62 4.17 1.72 0.99 1.11 1.53 2.68 1.53 4.59v0.98h-8.77v0.04c0 1.06 0.32 1.93 0.88 2.53 0.56 0.6 1.36 0.95 2.35 0.95 1.42 0 2.44-0.71 2.76-1.74l0.03-0.08h2.63l-0.02 0.13c-0.37 2.33-2.58 3.97-5.46 3.97-1.85 0-3.34-0.62-4.37-1.76-1.03-1.13-1.59-2.75-1.59-4.73 0-1.97 0.57-3.62 1.59-4.78 1.02-1.16 2.49-1.82 4.27-1.82zm9.66 2.13c0.8-1.32 2.18-2.1 3.87-2.1 1.59 0 2.92 0.63 3.84 1.77 0.92 1.13 1.43 2.76 1.43 4.74 0 1.99-0.51 3.62-1.43 4.76-0.92 1.13-2.25 1.77-3.85 1.77-1.74 0-3.12-0.8-3.93-2.11v1.9h-2.7v-17.25h2.77zm30.9 10.73h-2.7v-1.89c-0.78 1.29-2.16 2.1-3.89 2.1-1.6 0-2.93-0.64-3.87-1.78-0.93-1.14-1.45-2.77-1.45-4.75 0-1.97 0.52-3.6 1.45-4.74 0.93-1.14 2.26-1.77 3.85-1.77 1.69 0 3.07 0.79 3.83 2.04v-6.45h2.78zm-64-17.16l3.09 13.09 3.54-13.09 0.02-0.09h2.62l0.02 0.09 3.55 13.09 3.09-13.09 0.02-0.09h2.98l-0.03 0.14-4.61 17.03-0.02 0.08h-2.65l-0.03-0.08-3.63-12.67-3.62 12.67-0.02 0.08h-2.67l-0.02-0.08-4.59-17.03-0.04-0.14h2.98zm50.91 17.16h-2.77v-17.24h2.77zm-4.87-0.03h-2.77v-12.63h2.77zm11.87-2.03q0.09 0 0.18 0zm-21.64-8.4c-0.93 0-1.72 0.41-2.29 1.13-0.56 0.72-0.89 1.76-0.89 3.02 0 1.27 0.33 2.31 0.89 3.03 0.57 0.71 1.36 1.12 2.29 1.12 0.97 0 1.75-0.4 2.28-1.1 0.55-0.71 0.85-1.75 0.85-3.05 0-1.29-0.3-2.33-0.85-3.04-0.53-0.71-1.31-1.11-2.28-1.11zm21.81 0c-0.97 0-1.76 0.4-2.31 1.11-0.54 0.71-0.86 1.75-0.86 3.04 0 1.29 0.32 2.33 0.86 3.04 0.55 0.71 1.34 1.11 2.31 1.11 0.95 0 1.73-0.4 2.28-1.12 0.56-0.71 0.88-1.75 0.88-3.03 0-1.27-0.32-2.31-0.88-3.03-0.55-0.71-1.33-1.12-2.28-1.12zm-19.79 7.65q-0.01 0.01-0.03 0.03 0.02-0.02 0.03-0.03zm0.13-0.13h0.01q-0.07 0.07-0.14 0.13 0.07-0.06 0.13-0.13zm16.38-3.37q0 0.45 0.05 0.87-0.02-0.19-0.03-0.39l-0.02-0.48q0.01-0.06 0.01-0.12-0.01 0.06-0.01 0.12zm-12.67 0q0 0.04 0 0.09v-0.09q0-0.23-0.01-0.45zm0 0.36v-0.15q0 0.11-0.01 0.21 0.01-0.03 0.01-0.06zm0-0.15q0-0.06 0-0.12zm-18.69-4.47c-1.68 0-2.87 1.24-3.04 3.01h5.96c-0.05-0.88-0.35-1.62-0.84-2.15-0.5-0.54-1.22-0.86-2.08-0.86zm32.25 1.15l0.11-0.13q0.08-0.09 0.16-0.17-0.14 0.14-0.27 0.3zm0.89-0.77q-0.31 0.17-0.56 0.41 0.07-0.07 0.14-0.13 0.13-0.1 0.27-0.19 0.07-0.05 0.15-0.09zm-0.56 0.41q-0.02 0.02-0.03 0.03 0.01-0.01 0.03-0.03zm-32.75-0.9q0 0 0 0 0 0 0 0zm0.17 0h0.09q-0.05 0-0.09-0.01-0.09 0.01-0.17 0.01 0.08 0 0.17 0zm34.25 8.61q0.09 0.01 0.18 0.01-0.09 0-0.18-0.01zm-0.25-0.04q0.11 0.02 0.21 0.03-0.1-0.01-0.21-0.03zm-2.58-3.28q0.02 0.16 0.05 0.31-0.03-0.15-0.05-0.31zm-12.76-0.11q0.02-0.17 0.02-0.35 0 0.18-0.02 0.35zm12.72-1.3q0 0.07 0 0.14 0-0.07 0-0.14zm0.04-0.36q-0.01 0.05-0.02 0.1 0.01-0.05 0.02-0.1zm0.07-0.49q-0.01 0.09-0.03 0.19 0.02-0.1 0.03-0.19zm0.07-0.29q-0.02 0.08-0.04 0.15 0.02-0.07 0.04-0.15zm0.14-0.44q-0.05 0.12-0.09 0.25 0.04-0.13 0.09-0.25zm0.08-0.21q-0.02 0.05-0.05 0.11 0.03-0.06 0.05-0.11zm0.14-0.31q-0.02 0.04-0.04 0.09 0.02-0.05 0.04-0.09z"/>
+		</clipPath>
+		<filter x="-50%" y="-50%" width="200%" height="200%" id="f1"> <feGaussianBlur stdDeviation=".7"/> </filter>
+		<filter x="-50%" y="-50%" width="200%" height="200%" id="f2"> <feGaussianBlur stdDeviation="2.7"/> </filter>
+		<linearGradient id="g1" x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.62,1.977,-1.976,.62,47.533,3.611)">
+			<stop offset="0" stop-color="#0f3da6" stop-opacity="1"/>
+			<stop offset=".952" stop-color="#3a9aff" stop-opacity="0"/>
+		</linearGradient>
+		<linearGradient id="g2" x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.495,2.092,-2.092,.495,46.707,3.06)">
+			<stop offset=".01" stop-color="#0d50e8" stop-opacity="1"/>
+			<stop offset=".952" stop-color="#3a9aff" stop-opacity="0"/>
+		</linearGradient>
+		<filter x="-50%" y="-50%" width="200%" height="200%" id="f3"> <feGaussianBlur stdDeviation="0"/> </filter>
+		<linearGradient id="g3" x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1.982,3.688,-3.688,1.982,46.267,2.069)">
+			<stop offset="0" stop-color="#0f3da6" stop-opacity="0"/>
+			<stop offset="1" stop-color="#59abff" stop-opacity="1"/>
+		</linearGradient>
+		<linearGradient id="g4" x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.606,2.752,-2.752,.606,46.32,2.122)">
+			<stop offset="0" stop-color="#0f3da6" stop-opacity="0"/>
+			<stop offset="1" stop-color="#59abff" stop-opacity="1"/>
+		</linearGradient>
+	</defs>
+	<style>
+		.s0 { fill: #ffffff } 
+		.s1 { filter: url(#f1);fill: #0597ff } 
+		.s2 { filter: url(#f2);fill: #0597ff } 
+		.s3 { fill: url(#g1) } 
+		.s4 { fill: url(#g2) } 
+		.s5 { filter: url(#f3);fill: url(#g3) } 
+		.s6 { filter: url(#f1);fill: url(#g4) } 
+	</style>
+	<path class="s0" d="m26.44 7.16c1.75 0 3.18 0.62 4.17 1.72 0.99 1.11 1.53 2.68 1.53 4.59v0.98h-8.77v0.04c0 1.06 0.32 1.93 0.88 2.53 0.56 0.6 1.36 0.95 2.35 0.95 1.42 0 2.44-0.71 2.76-1.74l0.03-0.08h2.63l-0.02 0.13c-0.37 2.33-2.58 3.97-5.46 3.97-1.85 0-3.34-0.62-4.37-1.76-1.03-1.13-1.59-2.75-1.59-4.73 0-1.97 0.57-3.62 1.59-4.78 1.02-1.16 2.49-1.82 4.27-1.82zm9.66 2.13c0.8-1.32 2.18-2.1 3.87-2.1 1.59 0 2.92 0.63 3.84 1.77 0.92 1.13 1.43 2.76 1.43 4.74 0 1.99-0.51 3.62-1.43 4.76-0.92 1.13-2.25 1.77-3.85 1.77-1.74 0-3.12-0.8-3.93-2.11v1.9h-2.7v-17.25h2.77zm30.9 10.73h-2.7v-1.89c-0.78 1.29-2.16 2.1-3.89 2.1-1.6 0-2.93-0.64-3.87-1.78-0.93-1.14-1.45-2.77-1.45-4.75 0-1.97 0.52-3.6 1.45-4.74 0.93-1.14 2.26-1.77 3.85-1.77 1.69 0 3.07 0.79 3.83 2.04v-6.45h2.78zm-64-17.16l3.09 13.09 3.54-13.09 0.02-0.09h2.62l0.02 0.09 3.55 13.09 3.09-13.09 0.02-0.09h2.98l-0.03 0.14-4.61 17.03-0.02 0.08h-2.65l-0.03-0.08-3.63-12.67-3.62 12.67-0.02 0.08h-2.67l-0.02-0.08-4.59-17.03-0.04-0.14h2.98zm50.91 17.16h-2.77v-17.24h2.77zm-4.87-0.03h-2.77v-12.63h2.77zm11.87-2.03q0.09 0 0.18 0zm-0.22-0.02q0.09 0.01 0.18 0.02-0.09-0.01-0.18-0.02zm-0.25-0.03q0.1 0.02 0.21 0.03-0.11-0.01-0.21-0.03zm-21.17-8.35c-0.93 0-1.72 0.41-2.29 1.13-0.56 0.72-0.89 1.76-0.89 3.02 0 1.27 0.33 2.31 0.89 3.03 0.57 0.71 1.36 1.12 2.29 1.12 0.97 0 1.75-0.4 2.28-1.1 0.55-0.71 0.85-1.75 0.85-3.05 0-1.29-0.3-2.33-0.85-3.04-0.53-0.71-1.31-1.11-2.28-1.11zm21.81 0c-0.97 0-1.76 0.4-2.31 1.11-0.54 0.71-0.86 1.75-0.86 3.04 0 1.29 0.32 2.33 0.86 3.04 0.55 0.71 1.34 1.11 2.31 1.11 0.95 0 1.73-0.4 2.28-1.12 0.56-0.71 0.88-1.75 0.88-3.03 0-1.27-0.32-2.31-0.88-3.03-0.55-0.71-1.33-1.12-2.28-1.12zm-19.82 7.68q0.09-0.08 0.16-0.16h0.01q-0.08 0.08-0.17 0.16zm16.6-2.61q0.02 0.16 0.05 0.3-0.03-0.14-0.05-0.3zm-0.06-0.92q0 0.45 0.05 0.87-0.02-0.19-0.03-0.39l-0.02-0.48q0.01-0.06 0.01-0.12-0.01 0.06-0.01 0.12zm-12.7 0.8q0.01-0.17 0.02-0.34-0.01 0.17-0.02 0.34zm0.03-0.8q0 0.21-0.01 0.42 0-0.03 0.01-0.06v-0.36q0-0.23-0.01-0.45zm12.69-0.49q0 0.07-0.01 0.13 0.01-0.06 0.01-0.13zm0.03-0.36q0 0.05-0.01 0.1 0.01-0.05 0.01-0.1zm0.08-0.49q-0.02 0.09-0.03 0.19 0.01-0.1 0.03-0.19zm-31.49-2.93c-1.68 0-2.87 1.25-3.04 3.02h5.96c-0.05-0.88-0.35-1.62-0.84-2.15-0.51-0.54-1.22-0.87-2.08-0.87zm31.56 2.64q-0.02 0.07-0.04 0.15 0.02-0.08 0.04-0.15zm0.14-0.44q-0.05 0.12-0.09 0.25 0.04-0.13 0.09-0.25zm0.08-0.22q-0.03 0.06-0.05 0.12 0.02-0.06 0.05-0.12zm0.14-0.3q-0.02 0.04-0.04 0.09 0.02-0.05 0.04-0.09zm0.6-0.83q-0.14 0.15-0.27 0.31l0.11-0.13q0.08-0.09 0.16-0.18zm0.61-0.46q-0.32 0.18-0.59 0.44 0.09-0.08 0.18-0.16 0.13-0.11 0.27-0.2 0.07-0.04 0.14-0.08zm-33.3-0.49q0.08-0.01 0.17-0.01l0.09 0.01q-0.05-0.01-0.09-0.01-0.09 0-0.17 0.01z"/>
+	<g id="Clip-Path" clip-path="url(#cp1)">
+		<g>
+			<g style="opacity: .17">
+				<path class="s1" d="m36.14 2.62h-3.58l9.91-9.03 12.33 1.32 8.09 3.75-7.32 4.73c-1.1-0.2-3.42-0.48-3.91 0-0.6 0.61-0.6 2.26-0.77 3.52-0.13 1.02-1.08 0.94-1.54 0.77l-2.92 0.44-0.88 4.3c-0.24-0.17-0.87-0.85-1.49-2.26-0.77-1.76-1.76-2.31-3.35-2.48-1.28-0.13-3.93 0.79-4.57 1.11z"/>
+			</g>
+			<g>
+				<path class="s2" d="m36.14 2.62h-3.58l9.91-9.03 12.33 1.32 8.09 3.75-7.32 4.73c-1.1-0.2-3.42-0.48-3.91 0-0.6 0.61-0.6 2.26-0.77 3.52-0.13 1.02-1.08 0.94-1.54 0.77l-2.92 0.44-0.88 4.3c-0.24-0.17-0.87-0.85-1.49-2.26-0.77-1.76-1.76-2.31-3.35-2.48-1.28-0.13-3.93 0.79-4.57 1.11z"/>
+			</g>
+		</g>
+	</g>
+	<g>
+		<path fill-rule="evenodd" class="s3" d="m46.78 5c-0.95-0.45-1.34-1.58-0.89-2.53 0.45-0.95 1.58-1.36 2.52-0.91 0.94 0.44 1.34 1.58 0.89 2.53-0.46 0.95-1.58 1.36-2.52 0.91z"/>
+	</g>
+	<g>
+		<path fill-rule="evenodd" class="s4" d="m46.99 5.1c-0.83-0.39-1.18-1.37-0.79-2.2 0.4-0.82 1.38-1.17 2.2-0.78 0.83 0.39 1.18 1.37 0.79 2.2-0.39 0.82-1.38 1.17-2.2 0.78z"/>
+	</g>
+	<g>
+		<path fill-rule="evenodd" class="s5" d="m47.99 1.98c0.9 0.17 1.5 1.03 1.33 1.93-0.16 0.9-1.02 1.49-1.92 1.32-0.9-0.16-1.49-1.02-1.33-1.92 0.17-0.9 1.03-1.49 1.92-1.33z"/>
+	</g>
+	<g>
+		<path fill-rule="evenodd" class="s6" d="m48.05 2.04c0.9 0.16 1.49 1.02 1.32 1.92-0.16 0.9-1.02 1.49-1.92 1.33-0.9-0.17-1.49-1.03-1.33-1.93 0.17-0.89 1.03-1.49 1.93-1.32z"/>
+	</g>
+</svg>
\ No newline at end of file
diff --git a/public/images/noise.webp b/public/images/noise.webp
new file mode 100644
index 0000000..6d69dd4
Binary files /dev/null and b/public/images/noise.webp differ
diff --git a/public/placeholders/iphone.jpg b/public/placeholders/iphone.jpg
new file mode 100644
index 0000000..404ad9e
Binary files /dev/null and b/public/placeholders/iphone.jpg differ
diff --git a/public/placeholders/placeholder-logo.svg b/public/placeholders/placeholder-logo.svg
new file mode 100644
index 0000000..04c2ce8
--- /dev/null
+++ b/public/placeholders/placeholder-logo.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54.424461 14.339843" fill="#fa0c00">
+   <g>
+      <path d="M 5.996094,0 H 0 v 14.339843 z m 0,0" />
+      <path d="m 10.214844,0 h 5.988281 v 14.339843 z m 0,0" />
+      <path d="m 8.105469,5.285156 3.816406,9.054687 H 9.417969 L 8.277344,11.457031 H 5.484375 Z m 0,0" />
+   </g>
+   <g>
+      <path
+         d="m 25.985303,9.11922 0.707031,2.027344 c 0.02344,0.05078 0.05859,0.07422 0.121094,0.07422 h 1.359375 c 0.07422,0 0.08594,-0.03516 0.07422,-0.109375 L 25.438428,3.310627 c -0.01172,-0.0625 -0.02344,-0.074219 -0.08594,-0.074219 h -1.6875 c -0.04687,0 -0.07422,0.035156 -0.07422,0.085937 -0.02344,0.410157 -0.05859,0.535157 -0.109375,0.65625 l -2.503906,7.121094 c -0.01172,0.08594 0.01563,0.121094 0.08594,0.121094 h 1.214843 c 0.07422,0 0.109375,-0.02344 0.136719,-0.09766 L 23.082959,9.11922 Z M 23.469678,7.795002 c 0.367187,-1.109375 0.851562,-2.53125 1.046875,-3.34375 h 0.01172 c 0.242188,0.851562 0.8125,2.539062 1.070313,3.34375 z m 0,0" />
+      <path
+         d="m 31.857666,11.341877 c 0.730469,0 1.507813,-0.132813 2.296875,-0.472657 0.0625,-0.02344 0.07422,-0.05078 0.07422,-0.109375 -0.02344,-0.21875 -0.05078,-0.535156 -0.05078,-0.777343 v -7.34375 c 0,-0.046875 0,-0.070313 -0.05859,-0.070313 h -1.324219 c -0.05078,0 -0.07422,0.023438 -0.07422,0.085938 V 5.142658 C 32.513916,5.11922 32.369385,5.107502 32.19751,5.107502 c -2.136719,0 -3.449219,1.410156 -3.449219,3.171875 0,2.042968 1.347656,3.0625 3.109375,3.0625 z m 0.863281,-1.359375 c -0.21875,0.070312 -0.460937,0.097656 -0.707031,0.097656 -0.96875,0 -1.761719,-0.546875 -1.761719,-1.875 0,-1.175781 0.816407,-1.871094 1.898438,-1.871094 0.21875,0 0.410156,0.023438 0.570312,0.085938 z m 0,0" />
+      <path
+         d="m 38.453285,5.107502 c -1.824219,0 -2.953125,1.398437 -2.953125,3.125 0,1.542968 0.898438,3.109375 2.925781,3.109375 1.714844,0 2.917969,-1.261719 2.917969,-3.148438 0,-1.664062 -1.019531,-3.085937 -2.890625,-3.085937 z m -0.07422,1.226562 c 1.03125,0 1.46875,0.886719 1.46875,1.898438 0,1.25 -0.644531,1.871093 -1.394531,1.871093 -0.925781,0 -1.472656,-0.777343 -1.472656,-1.898437 0,-1.152344 0.582031,-1.871094 1.398437,-1.871094 z m 0,0" />
+      <path
+         d="m 42.712968,2.568439 c -0.05078,0 -0.08594,0.023438 -0.08594,0.085938 v 8.3125 c 0,0.03516 0.03516,0.09766 0.08594,0.109375 0.582031,0.179687 1.191406,0.265625 1.820312,0.265625 1.800781,0 3.550781,-1.117188 3.550781,-3.367188 0,-1.628906 -1.117187,-2.867187 -2.867187,-2.867187 -0.402344,0 -0.777344,0.0625 -1.105469,0.171875 L 44.09578,2.666095 c 0,-0.085937 -0.02344,-0.097656 -0.109375,-0.097656 z m 3.875,5.554688 c 0,1.347656 -0.921875,1.980468 -1.917969,1.980468 -0.207031,0 -0.390625,-0.01172 -0.558594,-0.0625 V 6.49422 c 0.191406,-0.074218 0.421875,-0.136718 0.847656,-0.136718 0.960938,0 1.628907,0.609375 1.628907,1.765625 z m 0,0" />
+      <path
+         d="m 53.026024,8.560627 c 0.59375,0 1.082031,-0.011719 1.25,-0.050782 0.0625,-0.011718 0.08594,-0.035156 0.09766,-0.085937 0.03516,-0.132813 0.05078,-0.410156 0.05078,-0.75 0,-1.15625 -0.695312,-2.566406 -2.492187,-2.566406 -1.835938,0 -2.855469,1.496093 -2.855469,3.183593 0,1.496094 0.789063,3.050782 3,3.050782 0.828125,0 1.363281,-0.132813 1.824219,-0.351563 0.04687,-0.02344 0.07031,-0.0625 0.07031,-0.132812 V 9.845783 c 0,-0.058594 -0.03516,-0.070313 -0.07031,-0.046875 -0.460938,0.195312 -0.960938,0.292969 -1.507813,0.292969 -1.238281,0 -1.800781,-0.683594 -1.835937,-1.53125 z m -2.46875,-1.046875 c 0.09766,-0.59375 0.472656,-1.238282 1.3125,-1.238282 0.925781,0 1.167969,0.777344 1.167969,1.128907 0,0.011718 0,0.0625 0,0.097656 -0.05078,0.011719 -0.207032,0.011719 -0.667969,0.011719 z m 0,0" />
+   </g>
+</svg>
\ No newline at end of file
diff --git a/public/placeholders/placeholder1.webp b/public/placeholders/placeholder1.webp
new file mode 100644
index 0000000..c13cdfa
Binary files /dev/null and b/public/placeholders/placeholder1.webp differ
diff --git a/public/placeholders/placeholder2.jpg b/public/placeholders/placeholder2.jpg
new file mode 100644
index 0000000..6078cac
Binary files /dev/null and b/public/placeholders/placeholder2.jpg differ
diff --git a/public/placeholders/placeholder3.avif b/public/placeholders/placeholder3.avif
new file mode 100644
index 0000000..79f618c
Binary files /dev/null and b/public/placeholders/placeholder3.avif differ
diff --git a/public/placeholders/placeholder4.webp b/public/placeholders/placeholder4.webp
new file mode 100644
index 0000000..40f6951
Binary files /dev/null and b/public/placeholders/placeholder4.webp differ
diff --git a/public/placeholders/placeholder5.jpg b/public/placeholders/placeholder5.jpg
new file mode 100644
index 0000000..999d78f
Binary files /dev/null and b/public/placeholders/placeholder5.jpg differ
diff --git a/registry.json b/registry.json
new file mode 100644
index 0000000..d0d8bbb
--- /dev/null
+++ b/registry.json
@@ -0,0 +1,15836 @@
+{
+  "componentRegistry": {
+    "layout": [
+      {
+        "import": "import CardStack from '@/components/cardStack/CardStack';",
+        "name": "CardStack",
+        "path": "@/components/cardStack/CardStack",
+        "description": "Adaptive layout component that displays children in a grid, timeline, or carousel based on item count and variant.",
+        "details": "Use for displaying collections of cards. Automatically switches between grid (1-4 items) and carousel (5+ items). Special timeline variant creates a zigzag layout for 3-6 items; automatically switches to carousel for 7+ 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' | 'uniform-staggered-items' | 'uniform-alternating-heights' | 'uniform-alternating-heights-inverted' | 'uniform-alternating-sizes' | 'uniform-alternating-sizes-inverted' | 'two-items-tall-short' | 'two-items-short-tall' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'four-items-2x2-alternating-heights' | 'four-items-2x2-alternating-heights-inverted' | 'four-items-2x2-staggered-grid' | 'four-items-2x2-staggered-grid-inverted' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right' | 'timeline' | 'timeline-three-columns' (default: 'uniform-all-items-equal')",
+          "uniformGridCustomHeightClasses?": "string (default: varies by usage)",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
+          "containerStyle": "'default' | 'card' (required - 'default': individual items have card styling with gaps, 'card': entire grid wrapped in primary-button container)",
+          "title?": "string",
+          "titleSegments?": "TitleSegment[] - Array of { type: 'text', content: string } | { type: 'image', src: string, alt?: string } for inline images in title",
+          "description?": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground?": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "ariaLabel?": "string (default: 'Card stack')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "gridClassName?": "string",
+          "carouselClassName?": "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"
+        },
+        "usage": "<CardStack title=\"Features\" buttons={[{ text: 'View All', href: 'features' }]} animationType=\"slide-up\" textboxLayout=\"default\">{/* Card components */}</CardStack>"
+      },
+      {
+        "import": "import TimelineHorizontalCardStack from '@/components/cardStack/layouts/timelines/TimelineHorizontalCardStack';",
+        "name": "TimelineHorizontalCardStack",
+        "path": "@/components/cardStack/layouts/timelines/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"
+            },
+            "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?": "TitleSegment[] - Array of { type: 'text', content: string } | { type: 'image', src: string, alt?: string } for inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "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 }>",
+          "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"
+        },
+        "usage": "<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>"
+      },
+      {
+        "import": "import TimelineCardStack from '@/components/cardStack/layouts/timelines/TimelineCardStack';",
+        "name": "TimelineCardStack",
+        "path": "@/components/cardStack/layouts/timelines/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?": "TitleSegment[] - Array of { type: 'text', content: string } | { type: 'image', src: string, alt?: string } for inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "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"
+        },
+        "usage": "<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>"
+      },
+      {
+        "import": "import TimelinePhoneView from '@/components/cardStack/layouts/timelines/TimelinePhoneView';",
+        "name": "TimelinePhoneView",
+        "path": "@/components/cardStack/layouts/timelines/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\u00b0/45\u00b0) to positioned state (rotation -10\u00b0/10\u00b0). 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\u00b0/25\u00b0 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": "TimelinePhoneViewItem[] (required) - Array of { trigger: string, content: React.ReactNode, imageOne?: string, videoOne?: string, imageAltOne?: string, videoAriaLabelOne?: string, imageTwo?: string, videoTwo?: string, imageAltTwo?: string, videoAriaLabelTwo?: string }",
+          "showTextBox?": "boolean (default: true - controls whether CardStackTextBox renders)",
+          "title": "string",
+          "titleSegments?": "TitleSegment[] - Array of { type: 'text', content: string } | { type: 'image', src: string, alt?: string } for inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "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"
+        },
+        "usage": "<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' }]} />"
+      },
+      {
+        "import": "import TimelineProcessFlow from '@/components/cardStack/layouts/timelines/TimelineProcessFlow';",
+        "name": "TimelineProcessFlow",
+        "path": "@/components/cardStack/layouts/timelines/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": {
+              "id": "string - Unique identifier displayed in number badge (required)",
+              "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": "TimelineProcessFlowItem[] - Array of timeline items",
+          "title": "string",
+          "titleSegments?": "TitleSegment[] - Array of { type: 'text', content: string } | { type: 'image', src: string, alt?: string } for inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "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"
+        },
+        "usage": "// 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        { id: '1', 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        { id: '2', 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>"
+      },
+      {
+        "import": "import TextBox from '@/components/Textbox';",
+        "name": "TextBox",
+        "path": "@/components/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",
+          "buttons?": "ButtonConfig[]",
+          "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?": "Avatar[]",
+          "avatarText?": "string",
+          "avatarGroupClassName?": "string"
+        },
+        "usage": "<TextBox title=\"Welcome\" description=\"Get started with our platform today\" buttons={[{ text: 'Learn More', href: 'about' }]} center={true} />"
+      },
+      {
+        "import": "import AvatarGroup from '@/components/shared/AvatarGroup';",
+        "name": "AvatarGroup",
+        "path": "@/components/shared/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": "Avatar[]",
+          "text?": "string",
+          "maxVisible?": "number (default: 5)",
+          "className?": "string",
+          "avatarClassName?": "string",
+          "textClassName?": "string",
+          "ariaLabel?": "string (default: 'User avatars')"
+        },
+        "usage": "<AvatarGroup avatars={[{ src: '/avatar1.jpg', alt: 'User 1' }, { src: '/avatar2.jpg', alt: 'User 2' }]} text=\"Join 1,000+ members\" />"
+      },
+      {
+        "import": "import { Globe } from '@/components/shared/Globe';",
+        "name": "Globe",
+        "path": "@/components/shared/Globe",
+        "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)"
+        },
+        "usage": "<Globe className=\"w-full h-full\" config={{ markers: [{ location: [40.7128, -74.006], size: 0.1 }] }} />"
+      }
+    ],
+    "title": [
+      {
+        "import": "import TextAnimation from '@/components/text/TextAnimation';",
+        "name": "TextAnimation",
+        "path": "@/components/text/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).",
+        "animationTypes": {
+          "entrance-slide": {
+            "description": "Scroll-synced text entrance effect where characters slide upward into view as the user scrolls.",
+            "details": "Use when you want text to feel like it's entering the viewport in sync with scroll. Each word or character fades and slides upward from below. Best for storytelling sections, hero copy, or progressive reveals tied to reading flow."
+          },
+          "reveal-blur": {
+            "description": "Scroll\u2011synced reveal where text sharpens from a blurred state as you scroll.",
+            "details": "Use for narrative sections where copy should emerge smoothly with the reader's progress. The effect scrubs with scroll: characters start blurred and gradually come into focus (optionally fading in)."
+          },
+          "background-highlight": {
+            "description": "Text that reveals or highlights progressively as the user scrolls.",
+            "details": "Use when you want text to animate with scroll position, revealing characters smoothly in sync with scroll movement. Great for storytelling sections, intros, or explanatory copy tied to scroll progress."
+          }
+        },
+        "triggerVariants": {
+          "trigger": "Character-by-character animation plays once on viewport entry - ideal for short impactful text like headlines and subheadlines",
+          "words-trigger": "Word-by-word animation on viewport entry - great for longer body text, paragraphs, and explanatory copy"
+        },
+        "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 }"
+        }
+      },
+      {
+        "import": "import TextNumberCount from '@/components/text/TextNumberCount';",
+        "name": "TextNumberCount",
+        "path": "@/components/text/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"
+        }
+      }
+    ],
+    "button": [
+      {
+        "import": "import ButtonTextUnderline from '@/components/button/ButtonTextUnderline';",
+        "name": "ButtonTextUnderline",
+        "path": "@/components/button/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')"
+        },
+        "usage": "<ButtonTextUnderline text=\"Learn more\" href=\"about\" />"
+      },
+      {
+        "import": "import ButtonIconArrow from '@/components/button/ButtonIconArrow';",
+        "name": "ButtonIconArrow",
+        "path": "@/components/button/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')"
+        },
+        "usage": "<ButtonIconArrow text=\"Continue\" href=\"next-section\" />"
+      },
+      {
+        "import": "import ButtonTextStagger from '@/components/button/ButtonTextStagger/ButtonTextStagger';",
+        "name": "ButtonTextStagger",
+        "path": "@/components/button/ButtonTextStagger/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')"
+        },
+        "usage": "<ButtonTextStagger text=\"Get Started\" href=\"https://example.com\" />"
+      },
+      {
+        "import": "import ButtonShiftHover from '@/components/button/ButtonShiftHover/ButtonShiftHover';",
+        "name": "ButtonShiftHover",
+        "path": "@/components/button/ButtonShiftHover/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\u2011line. 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')"
+        },
+        "usage": "<ButtonShiftHover text=\"Get Started\" href=\"pricing\" />"
+      },
+      {
+        "import": "import ButtonHoverMagnetic from '@/components/button/ButtonHoverMagnetic/ButtonHoverMagnetic';",
+        "name": "ButtonHoverMagnetic",
+        "path": "@/components/button/ButtonHoverMagnetic/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')"
+        },
+        "usage": "<ButtonHoverMagnetic text=\"Button\" href=\"contact\" />"
+      },
+      {
+        "import": "import ButtonHoverBubble from '@/components/button/ButtonHoverBubble';",
+        "name": "ButtonHoverBubble",
+        "path": "@/components/button/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')"
+        },
+        "usage": "<ButtonHoverBubble text=\"Contact Us\" href=\"contact\" />"
+      },
+      {
+        "import": "import ButtonExpandHover from '@/components/button/ButtonExpandHover';",
+        "name": "ButtonExpandHover",
+        "path": "@/components/button/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')"
+        },
+        "usage": "<ButtonExpandHover text=\"Get Started\" href=\"contact\" />"
+      }
+    ],
+    "form": [
+      {
+        "import": "import Input from '@/components/form/Input';",
+        "name": "Input",
+        "path": "@/components/form/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"
+        },
+        "usage": "<Input value={name} onChange={(value) => setName(value)} type=\"text\" placeholder=\"Name\" required />"
+      },
+      {
+        "import": "import Textarea from '@/components/form/Textarea';",
+        "name": "Textarea",
+        "path": "@/components/form/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"
+        },
+        "usage": "<Textarea value={message} onChange={(value) => setMessage(value)} placeholder=\"Type your message...\" rows={5} required />"
+      },
+      {
+        "import": "import EmailSignupForm from '@/components/form/EmailSignupForm';",
+        "name": "EmailSignupForm",
+        "path": "@/components/form/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"
+        },
+        "usage": "<EmailSignupForm inputPlaceholder=\"Your email\" buttonText=\"Subscribe\" onSubmit={(email) => console.log(email)} />"
+      },
+      {
+        "import": "import ContactForm from '@/components/form/ContactForm';",
+        "name": "ContactForm",
+        "path": "@/components/form/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"
+        },
+        "usage": "<ContactForm title=\"Join our newsletter\" description=\"Get updates\" tag=\"Newsletter\" onSubmit={(email) => console.log(email)} />"
+      }
+    ],
+    "navbar": [
+      {
+        "import": "import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';",
+        "name": "NavbarStyleApple",
+        "path": "@/components/navbar/NavbarStyleApple/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 when logoSrc is not provided"
+          },
+          "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 (default: '')",
+          "brandName?": "string (default: 'Webild')"
+        }
+      },
+      {
+        "import": "import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';",
+        "name": "NavbarLayoutFloatingInline",
+        "path": "@/components/navbar/NavbarLayoutFloatingInline",
+        "description": "Floating inline navbar with centered links, left-aligned logo, and right-aligned call-to-action button.",
+        "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.",
+        "constraints": {
+          "minLinks": 3,
+          "maxLinks": 6,
+          "preferredCount": 4,
+          "brandRules": {
+            "required": false,
+            "minChars": 2,
+            "maxChars": 20,
+            "example": "Webild",
+            "fallbackBehavior": "Shows brandName text when logoSrc is not provided"
+          },
+          "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 (default: '')",
+          "brandName?": "string (default: 'Webild')",
+          "button": "ButtonConfig",
+          "className?": "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",
+        "description": "Floating rounded navbar with right\u2011side 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 when logoSrc is not provided"
+          },
+          "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 (default: '')",
+          "brandName?": "string (default: 'Webild')",
+          "button": "ButtonConfig",
+          "buttonClassName?": "string (default: '')",
+          "buttonTextClassName?": "string (default: '')"
+        }
+      },
+      {
+        "import": "import NavbarStyleMinimal from '@/components/navbar/NavbarStyleMinimal';",
+        "name": "NavbarStyleMinimal",
+        "path": "@/components/navbar/NavbarStyleMinimal",
+        "description": "A minimal navbar with left-aligned logo and optional right-aligned call-to-action button.",
+        "details": "Use when a simple, distraction-free navigation is required. No inline navigation links are shown, only a logo and an optional CTA button on the right.",
+        "constraints": {
+          "brandRules": {
+            "required": false,
+            "minChars": 2,
+            "maxChars": 20,
+            "example": "Webild",
+            "fallbackBehavior": "Shows brandName text when logoSrc is not provided"
+          },
+          "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"
+            }
+          }
+        },
+        "propsSchema": {
+          "logoSrc?": "string",
+          "logoAlt?": "string (default: '')",
+          "brandName?": "string (default: 'Webild')",
+          "button": "ButtonConfig",
+          "className?": "string (default: '')",
+          "buttonClassName?": "string (default: '')",
+          "buttonTextClassName?": "string (default: '')"
+        }
+      }
+    ],
+    "background": [
+      {
+        "import": "import PlainBackground from '@/components/background/PlainBackground';",
+        "name": "PlainBackground",
+        "path": "@/components/background/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.",
+        "propsSchema": {
+          "className?": "string"
+        },
+        "usage": "<PlainBackground />"
+      },
+      {
+        "import": "import GridBackround from '@/components/background/GridBackround';",
+        "name": "GridBackround",
+        "path": "@/components/background/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.",
+        "propsSchema": {
+          "size?": "'small' | 'medium' | 'large' (default: 'medium')",
+          "perspectiveThreeD?": "boolean (default: false)",
+          "className?": "string"
+        },
+        "usage": "<GridBackround size=\"medium\" perspectiveThreeD={false} />"
+      },
+      {
+        "import": "import DotGridBackground from '@/components/background/DotGridBackground';",
+        "name": "DotGridBackground",
+        "path": "@/components/background/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%.",
+        "propsSchema": {
+          "size?": "'small' | 'medium' | 'large' (default: 'medium')",
+          "perspectiveThreeD?": "boolean (default: false)",
+          "className?": "string"
+        },
+        "usage": "<DotGridBackground size=\"medium\" perspectiveThreeD={false} />"
+      },
+      {
+        "import": "import CircleGradientBackground from '@/components/background/CircleGradientBackground';",
+        "name": "CircleGradientBackground",
+        "path": "@/components/background/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.",
+        "propsSchema": {
+          "diagonal?": "'primary' | 'secondary' (default: 'primary')",
+          "className?": "string"
+        },
+        "usage": "<CircleGradientBackground diagonal=\"primary\" />"
+      },
+      {
+        "import": "import AuroraBackground from '@/components/background/AuroraBackground';",
+        "name": "AuroraBackground",
+        "path": "@/components/background/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.",
+        "propsSchema": {
+          "className?": "string"
+        },
+        "usage": "<AuroraBackground />"
+      },
+      {
+        "import": "import FloatingGradientBackground from '@/components/background/floatingGradientBackground/FloatingGradientBackground';",
+        "name": "FloatingGradientBackground",
+        "path": "@/components/background/floatingGradientBackground/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 \u2192 visible 20-80% \u2192 transparent). Circles have varying opacities (0.1-0.2) and use hard-light blend mode.",
+        "propsSchema": {
+          "className?": "string"
+        },
+        "usage": "<FloatingGradientBackground />"
+      },
+      {
+        "import": "import AnimatedGridBackground from '@/components/background/AnimatedGridBackground';",
+        "name": "AnimatedGridBackground",
+        "path": "@/components/background/AnimatedGridBackground",
+        "description": "Grid pattern with animated pulsing squares using Framer Motion and optional 3D perspective.",
+        "details": "Use for modern, interactive backgrounds with subtle animation. Features SVG grid with randomly positioned squares that pulse in opacity. Optional perspectiveThreeD (default: true) adds skew transform and radial mask. Uses accent color for grid lines (20% opacity) and background-accent for animated squares. Requires framer-motion.",
+        "propsSchema": {
+          "squareSize?": "number (default: 100)",
+          "numSquares?": "number (default: 50)",
+          "maxOpacity?": "number (default: 0.15)",
+          "perspectiveThreeD?": "boolean (default: true)",
+          "className?": "string"
+        },
+        "usage": "<AnimatedGridBackground squareSize={100} numSquares={50} maxOpacity={0.15} perspectiveThreeD={true} />"
+      },
+      {
+        "import": "import AnimatedAuroraBackground from '@/components/background/AnimatedAuroraBackground';",
+        "name": "AnimatedAuroraBackground",
+        "path": "@/components/background/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.",
+        "propsSchema": {
+          "className?": "string",
+          "showRadialGradient?": "boolean (default: true)",
+          "invertColors": "boolean (REQUIRED - true for light backgrounds, false for dark backgrounds)"
+        },
+        "usage": "<AnimatedAuroraBackground invertColors={true} showRadialGradient={true} />"
+      },
+      {
+        "import": "import FluidBackground from '@/components/background/FluidBackground';",
+        "name": "FluidBackground",
+        "path": "@/components/background/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.",
+        "propsSchema": {
+          "className?": "string"
+        },
+        "usage": "<FluidBackground />"
+      },
+      {
+        "import": "import RadialGradientBackground from '@/components/background/RadialGradientBackground';",
+        "name": "RadialGradientBackground",
+        "path": "@/components/background/RadialGradientBackground",
+        "description": "Customizable radial gradient background with theme color integration.",
+        "details": "Use for modern, premium backgrounds with radial gradient effects. Features customizable gradient size, position, center color, and edge color. Automatically uses theme colors by default (--background for center, --color-primary-cta for edge). Gradient starts at 40% center color and transitions to 100% edge color. Size and position can be adjusted for different visual effects (default: 125% 125% at 50% 10% creates top-center spotlight). Perfect for hero sections, landing pages, or any area needing depth and visual interest.",
+        "propsSchema": {
+          "className?": "string",
+          "centerColor?": "string (default: 'var(--background)')",
+          "edgeColor?": "string (default: 'var(--color-primary-cta)')",
+          "size?": "string (default: '125% 125%')",
+          "position?": "string (default: '50% 10%')"
+        },
+        "usage": "<RadialGradientBackground centerColor=\"var(--background)\" edgeColor=\"var(--color-primary-cta)\" size=\"125% 125%\" position=\"50% 10%\" />"
+      },
+      {
+        "import": "import GradientBarsBackground from '@/components/background/GradientBarsBackground';",
+        "name": "GradientBarsBackground",
+        "path": "@/components/background/GradientBarsBackground",
+        "description": "Vertical gradient bars with dynamic height distribution creating a wave-like pattern.",
+        "details": "Use for modern, rhythmic backgrounds with vertical gradient bars. Features 15 vertical bars by default with calculated heights that create a symmetrical wave pattern (taller at edges, shorter in center). Each bar uses a linear gradient from bottom to top (gradientFrom to gradientTo). Height calculation uses power function for smooth distribution. Bars scale from bottom using CSS transform. Automatically uses theme primary color by default. Perfect for music, audio, or tech-related designs. Static design without animation for clean, professional appearance.",
+        "propsSchema": {
+          "className?": "string",
+          "numBars?": "number (default: 15)",
+          "gradientFrom?": "string (default: 'var(--color-primary-cta)')",
+          "gradientTo?": "string (default: 'transparent')",
+          "opacity?": "number (default: 0.5)"
+        },
+        "usage": "<GradientBarsBackground numBars={15} gradientFrom=\"var(--color-primary-cta)\" gradientTo=\"transparent\" opacity={0.5} />"
+      },
+      {
+        "import": "import BlurBottomBackground from '@/components/background/BlurBottomBackground';",
+        "name": "BlurBottomBackground",
+        "path": "@/components/background/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.",
+        "propsSchema": {
+          "className?": "string"
+        },
+        "usage": "<BlurBottomBackground />"
+      }
+    ]
+  },
+  "sectionRegistry": {
+    "hero": [
+      {
+        "import": "import HeroBillboard from '@/components/sections/hero/HeroBillboard';",
+        "name": "HeroBillboard",
+        "path": "@/components/sections/hero/HeroBillboard",
+        "description": "Full-width hero section with centered text content, optional tag, buttons, and single image/video below. Supports card or browser frame styles.",
+        "details": "Use for simple, impactful landing page hero sections. Features centered title and description with TextBox animations, optional tag with icon, up to 2 CTA buttons, and a single image or video media content below the text. Choose between card frame (default, simple card wrapper with padding) or browser frame (Safari-style chrome with traffic light dots, tab bars, and plus icon) for showcasing web products, applications, or dashboards.",
+        "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"
+            },
+            "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)"
+            },
+            "frameStyle": {
+              "required": false,
+              "options": [
+                "card",
+                "browser"
+              ],
+              "default": "card",
+              "note": "'card' displays simple card wrapper with padding. 'browser' displays Safari-style chrome with traffic light dots (3 accent-colored circles), tab bars (3 tabs on mobile, 2 visible on mobile with w-15, 3 visible on desktop with w-10), and plus icon. Browser frame uses theme variables: bg-background for chrome, bg-accent for dots, bg-accent/10 for tabs, text-foreground for plus icon. Image has rounded-none to fit flush with browser chrome."
+            }
+          },
+          "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",
+          "buttons?": "ButtonConfig[]",
+          "imageSrc?": "string",
+          "videoSrc?": "string",
+          "imageAlt?": "string (default: '')",
+          "videoAriaLabel?": "string (default: 'Hero video')",
+          "frameStyle?": "'card' | 'browser' (default: 'card')",
+          "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",
+          "browserBarClassName?": "string",
+          "addressBarClassName?": "string"
+        },
+        "usage": "<ThemeProvider defaultButtonVariant=\"text-stagger\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"rounded\">\n  <HeroBillboard \n    title=\"Welcome to Our Platform\" \n    description=\"Create beautiful, responsive web experiences\" \n    tag=\"New Release\" \n    imageSrc=\"/hero.jpg\" \n    imageAlt=\"Hero banner\"\n    frameStyle=\"browser\"\n    buttons={[{ text: 'Get Started', href: 'https://example.com' }, { text: 'Learn More', href: 'about' }]} \n  />\n</ThemeProvider>"
+      },
+      {
+        "import": "import HeroBillboardMetrics from '@/components/sections/hero/HeroBillboardMetrics';",
+        "name": "HeroBillboardMetrics",
+        "path": "@/components/sections/hero/HeroBillboardMetrics",
+        "description": "Hero section with centered text, media frame, and KPI metrics below. Combines billboard layout with performance statistics.",
+        "details": "Use for landing pages showcasing products/apps with key metrics. Features centered title, description, optional tag, buttons, and image/video in card or browser frame. Below media is metrics section with label text on left and 2-3 metric cards on right in responsive grid. Border-top separates metrics. Grid adapts: 2 items = 2 cols, 3 items = 3 cols (third full-width on mobile). Ideal for SaaS/startup pages highlighting both product visuals and statistics.",
+        "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
+            },
+            "tag": {
+              "required": false,
+              "example": "New Release",
+              "minChars": 2,
+              "maxChars": 30
+            },
+            "metricsLabel": {
+              "required": true,
+              "example": "Trusted by forward-thinking VCs, accelerators, and early-stage startups",
+              "minChars": 10,
+              "maxChars": 150
+            }
+          },
+          "mediaRules": {
+            "imageSrc": {
+              "required": false,
+              "example": "/hero-image.jpg",
+              "note": "Supports external URLs with unoptimized prop"
+            },
+            "videoSrc": {
+              "required": false,
+              "example": "/hero-video.mp4",
+              "note": "Takes precedence over imageSrc if both provided"
+            },
+            "imageAlt": {
+              "required": false,
+              "example": "Product screenshot",
+              "note": "Empty string marks image as decorative (aria-hidden)"
+            },
+            "frameStyle": {
+              "required": false,
+              "options": [
+                "card",
+                "browser"
+              ],
+              "default": "card",
+              "note": "card: simple wrapper with padding. browser: Safari-style chrome with dots, tabs, plus icon"
+            }
+          },
+          "metricRules": {
+            "required": true,
+            "minItems": 2,
+            "maxItems": 3,
+            "structure": {
+              "id": "string - Unique identifier (required)",
+              "value": "string - Metric value like '200+', '12k+' (required)",
+              "label": "string - Metric description (required)"
+            },
+            "examples": [
+              "{ id: '1', value: '200+', label: 'Founders Onboarded' }",
+              "{ id: '2', value: '12k+', label: 'Investors Connected' }"
+            ],
+            "note": "Grid layout: 2 items = 2 columns, 3 items = 3 columns (third item full width on mobile). Each metric displays in a card."
+          },
+          "buttonRules": {
+            "maxButtons": 2,
+            "structure": {
+              "text": "string - Button label (required)",
+              "href": "string - Link destination (optional)",
+              "onClick": "() => void - Click handler (optional)"
+            },
+            "note": "Button variant controlled by ThemeProvider's defaultButtonVariant."
+          }
+        },
+        "propsSchema": {
+          "title": "string",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "imageSrc?": "string",
+          "videoSrc?": "string",
+          "imageAlt?": "string (default: '')",
+          "videoAriaLabel?": "string (default: 'Hero video')",
+          "frameStyle?": "'card' | 'browser' (default: 'card')",
+          "metricsLabel": "string",
+          "metrics": "Metric[] - Array of { id: string, value: string, label: 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",
+          "imageClassName?": "string",
+          "browserBarClassName?": "string",
+          "addressBarClassName?": "string",
+          "metricsContainerClassName?": "string",
+          "metricsLabelClassName?": "string",
+          "metricsGridClassName?": "string",
+          "metricClassName?": "string",
+          "metricValueClassName?": "string",
+          "metricLabelClassName?": "string"
+        },
+        "usage": "<HeroBillboardMetrics title=\"Build Modern Web Experiences\" description=\"Create stunning websites\" tag=\"New Release\" imageSrc=\"/hero.jpg\" frameStyle=\"browser\" metricsLabel=\"Trusted by forward-thinking VCs\" metrics={[{ id: '1', value: '200+', label: 'Founders' }, { id: '2', value: '12k+', label: 'Investors' }]} buttons={[{ text: 'Get Started', href: '#' }]} />"
+      },
+      {
+        "import": "import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';",
+        "name": "HeroBillboardGallery",
+        "path": "@/components/sections/hero/HeroBillboardGallery",
+        "description": "Full-width hero section with centered text 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, 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.",
+        "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": {
+            "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. Supports 3-5 images maximum."
+            }
+          },
+          "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",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "mediaItems": "MediaItem[]",
+          "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"
+        },
+        "usage": "<ThemeProvider defaultButtonVariant=\"text-stagger\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"rounded\">\n  <HeroBillboardGallery \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>"
+      },
+      {
+        "import": "import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';",
+        "name": "HeroBillboardCarousel",
+        "path": "@/components/sections/hero/HeroBillboardCarousel",
+        "description": "Full-width hero section with centered text and 5+ auto-scrolling images in carousel layout.",
+        "details": "Use for showcasing large collections or portfolios. Features centered title and description with TextBox animations, 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.",
+        "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",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "mediaItems": "MediaItem[]",
+          "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"
+        },
+        "usage": "<ThemeProvider defaultButtonVariant=\"text-stagger\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"rounded\">\n  <HeroBillboardCarousel \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>"
+      },
+      {
+        "import": "import HeroBillboardCarouselSplit from '@/components/sections/hero/HeroBillboardCarouselSplit';",
+        "name": "HeroBillboardCarouselSplit",
+        "path": "@/components/sections/hero/HeroBillboardCarouselSplit",
+        "description": "Full-width hero section with split-actions layout (title + buttons only) and auto-scrolling image carousel.",
+        "details": "Use for showcasing large collections with minimal text and prominent call-to-action buttons. Features split-actions textbox layout where title appears on left and buttons on right (no description or tag). Displays 5 or more images in auto-scrolling carousel on both mobile and desktop. Full viewport height with vertical centering on desktop. TextBox animations inherited from ThemeProvider.",
+        "constraints": {
+          "textRules": {
+            "title": {
+              "required": true,
+              "example": "Explore Our Collection",
+              "minChars": 2,
+              "maxChars": 40
+            }
+          },
+          "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: 'Get Started', href: 'https://example.com' }",
+              "{ text: 'Learn More', 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."
+          },
+          "layoutRules": {
+            "note": "Uses split-actions textbox layout (hardcoded). Title and buttons only - no description or tag props available. Title appears on left side, buttons on right side on desktop. Stacks vertically on mobile."
+          }
+        },
+        "propsSchema": {
+          "title": "string",
+          "buttons?": "ButtonConfig[]",
+          "mediaItems": "MediaItem[]",
+          "ariaLabel?": "string (default: 'Hero section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "textBoxClassName?": "string",
+          "titleClassName?": "string",
+          "buttonContainerClassName?": "string",
+          "buttonClassName?": "string",
+          "buttonTextClassName?": "string",
+          "mediaWrapperClassName?": "string"
+        },
+        "usage": "<ThemeProvider defaultButtonVariant=\"text-stagger\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"rounded\">\n  <HeroBillboardCarouselSplit \n    title=\"Build amazing experiences with our design system\" \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    ]}\n    buttons={[{ text: 'Get Started', href: 'https://example.com' }, { text: 'Learn More', href: 'contact' }]} \n  />\n</ThemeProvider>"
+      },
+      {
+        "import": "import HeroBillboardSplit from '@/components/sections/hero/HeroBillboardSplit';",
+        "name": "HeroBillboardSplit",
+        "path": "@/components/sections/hero/HeroBillboardSplit",
+        "description": "Full-width hero section with split layout (tag + title + description left, buttons right) and browser/card frame media.",
+        "details": "Use for hero sections showcasing web products, applications, or dashboards with balanced text and media. Features split textbox layout where tag, title, and description appear on left with buttons on right. Displays single image or video in browser frame (Safari-style chrome with traffic light dots, tab bars, plus icon) or simple card frame. Full viewport height with vertical centering on desktop.",
+        "constraints": {
+          "textRules": {
+            "title": {
+              "required": true,
+              "example": "Build amazing experiences with our design system",
+              "minChars": 2,
+              "maxChars": 60
+            },
+            "description": {
+              "required": true,
+              "example": "Create stunning interfaces with our comprehensive component library and design tokens",
+              "minChars": 10,
+              "maxChars": 200
+            },
+            "tag": {
+              "required": true,
+              "example": "New Release",
+              "minChars": 2,
+              "maxChars": 30
+            }
+          },
+          "mediaRules": {
+            "imageSrc": {
+              "required": false,
+              "example": "/hero-image.jpg",
+              "note": "Supports external URLs with unoptimized prop"
+            },
+            "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)"
+            },
+            "frameStyle": {
+              "required": false,
+              "options": [
+                "browser",
+                "card"
+              ],
+              "default": "browser",
+              "note": "browser: Safari-style chrome with dots and tab bars. card: Simple card wrapper with padding"
+            }
+          },
+          "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: '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."
+          },
+          "layoutRules": {
+            "note": "Uses split textbox layout (hardcoded). Tag, title, and description on left, buttons on right on desktop. Stacks vertically on mobile."
+          }
+        },
+        "propsSchema": {
+          "title": "string",
+          "description": "string",
+          "tag": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons": "ButtonConfig[]",
+          "imageSrc?": "string",
+          "videoSrc?": "string",
+          "imageAlt?": "string (default: '')",
+          "videoAriaLabel?": "string (default: 'Hero media')",
+          "frameStyle?": "'browser' | 'card' (default: 'browser')",
+          "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",
+          "browserBarClassName?": "string",
+          "addressBarClassName?": "string",
+          "imageClassName?": "string"
+        },
+        "usage": "<HeroBillboardSplit tag=\"New Release\" title=\"Build amazing experiences\" description=\"Create stunning interfaces with our design system\" buttons={[{ text: 'Get Started', href: '#' }, { text: 'Learn More', href: '#' }]} imageSrc=\"/hero.jpg\" frameStyle=\"browser\" />"
+      },
+      {
+        "import": "import HeroSplit from '@/components/sections/hero/HeroSplit';",
+        "name": "HeroSplit",
+        "path": "@/components/sections/hero/HeroSplit",
+        "description": "Split-layout hero section with 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 split layout with configurable image position (left/right). Displays 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.",
+        "constraints": {
+          "textRules": {
+            "title": {
+              "required": true,
+              "example": "Build Better Products",
+              "minChars": 2,
+              "maxChars": 40
+            },
+            "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"
+            },
+            "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",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "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"
+        },
+        "usage": "<ThemeProvider defaultButtonVariant=\"text-stagger\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"rounded\" background=\"aurora\" cardStyle=\"glass-elevated\" primaryButtonStyle=\"gradient\" secondaryButtonStyle=\"glass\">\n  <HeroSplit \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>"
+      },
+      {
+        "import": "import HeroSplitLarge from '@/components/sections/hero/HeroSplitLarge';",
+        "name": "HeroSplitLarge",
+        "path": "@/components/sections/hero/HeroSplitLarge",
+        "description": "Split-layout hero with full-height media covering the right half of the viewport.",
+        "details": "Use for impactful hero sections where the image/video should dominate half the screen. Media is absolutely positioned to cover the entire right half of the viewport from edge to edge. Text content stays within content-width on the left. Responsive design stacks content vertically on mobile with full-width media. Optional tag with icon and up to 2 CTA buttons.",
+        "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-image.jpg",
+              "note": "Supports external URLs with unoptimized prop"
+            },
+            "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)"
+            }
+          },
+          "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."
+          }
+        },
+        "propsSchema": {
+          "title": "string",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "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"
+        },
+        "usage": "<HeroSplitLarge title=\"Build Modern Web Experiences\" description=\"Create stunning, responsive websites with our comprehensive component library\" tag=\"New Release\" imageSrc=\"/hero.jpg\" imageAlt=\"Hero banner\" buttons={[{ text: 'Get Started', href: 'https://example.com' }, { text: 'Learn More', href: 'about' }]} />"
+      },
+      {
+        "import": "import HeroSplitAvatars from '@/components/sections/hero/HeroSplitAvatars';",
+        "name": "HeroSplitAvatars",
+        "path": "@/components/sections/hero/HeroSplitAvatars",
+        "description": "Split-layout hero section with required avatar group, text content on one side and single image/video on the other.",
+        "details": "Use for hero sections emphasizing community, user testimonials, or social proof with avatar display. Features split layout with configurable image position (left/right). Displays one image or video with fixed height control. Shows avatar group with accompanying text below the main content. 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.",
+        "constraints": {
+          "textRules": {
+            "title": {
+              "required": true,
+              "example": "Join Our Community",
+              "minChars": 2,
+              "maxChars": 40
+            },
+            "description": {
+              "required": true,
+              "example": "Connect with thousands of creators building amazing experiences",
+              "minChars": 5,
+              "maxChars": 200
+            },
+            "tag": {
+              "required": false,
+              "example": "Community",
+              "minChars": 2,
+              "maxChars": 30
+            },
+            "avatarText": {
+              "required": true,
+              "example": "Join 1,000+ members",
+              "minChars": 5,
+              "maxChars": 50
+            }
+          },
+          "mediaRules": {
+            "imageSrc": {
+              "required": false,
+              "example": "/hero-image.jpg",
+              "note": "Supports external URLs with unoptimized prop"
+            },
+            "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"
+            },
+            "avatars": {
+              "required": true,
+              "example": "[{ src: '/user1.jpg', alt: 'User 1' }, { src: '/user2.jpg', alt: 'User 2' }, { src: '/user3.jpg', alt: 'User 3' }]",
+              "note": "Array of Avatar objects. Each avatar has src (string) and alt (string). Displays as overlapping circular avatars."
+            }
+          },
+          "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",
+          "avatars": "Avatar[]",
+          "avatarText": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "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",
+          "avatarGroupClassName?": "string",
+          "className?": "string",
+          "containerClassName?": "string",
+          "textBoxClassName?": "string",
+          "titleClassName?": "string",
+          "descriptionClassName?": "string",
+          "tagClassName?": "string",
+          "buttonContainerClassName?": "string",
+          "buttonClassName?": "string",
+          "buttonTextClassName?": "string",
+          "mediaWrapperClassName?": "string",
+          "imageClassName?": "string"
+        },
+        "usage": "<ThemeProvider defaultButtonVariant=\"text-stagger\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"rounded\" background=\"aurora\" cardStyle=\"glass-elevated\" primaryButtonStyle=\"gradient\" secondaryButtonStyle=\"glass\">\n  <HeroSplitAvatars \n    title=\"Join Our Community\" \n    description=\"Connect with thousands of creators building amazing experiences\" \n    tag=\"Community\"\n    imagePosition=\"right\" \n    imageSrc=\"/hero.jpg\"\n    imageAlt=\"Community showcase\"\n    avatars={[\n      { src: '/user1.jpg', alt: 'User 1' },\n      { src: '/user2.jpg', alt: 'User 2' },\n      { src: '/user3.jpg', alt: 'User 3' },\n      { src: '/user4.jpg', alt: 'User 4' },\n      { src: '/user5.jpg', alt: 'User 5' }\n    ]}\n    avatarText=\"Join 1,000+ members\"\n    buttons={[{ text: 'Get Started', href: 'https://example.com' }, { text: 'Learn More', href: 'about' }]} \n  />\n</ThemeProvider>"
+      },
+      {
+        "import": "import HeroSplitGlobe from '@/components/sections/hero/HeroSplitGlobe';",
+        "name": "HeroSplitGlobe",
+        "path": "@/components/sections/hero/HeroSplitGlobe",
+        "description": "Split-layout hero section with text content on one side and interactive 3D rotating globe on the other.",
+        "details": "Use for hero sections emphasizing global reach, international presence, or worldwide services. Features split layout with configurable globe position (left/right). Displays interactive 3D globe that auto-rotates with customizable markers for locations. Globe uses COBE library and automatically uses theme colors (--card for base/glow, --primary-cta for markers). Fully customizable via globeConfig prop. 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. Globe is contained in card with fixed height on desktop.",
+        "constraints": {
+          "textRules": {
+            "title": {
+              "required": true,
+              "example": "Global Reach",
+              "minChars": 2,
+              "maxChars": 40
+            },
+            "description": {
+              "required": true,
+              "example": "Create stunning, responsive websites with our comprehensive component library designed for worldwide audiences",
+              "minChars": 5,
+              "maxChars": 200
+            },
+            "tag": {
+              "required": false,
+              "example": "Worldwide",
+              "minChars": 2,
+              "maxChars": 30
+            }
+          },
+          "globeRules": {
+            "globeConfig": {
+              "required": false,
+              "note": "Optional COBEOptions configuration object. By default, globe colors use theme CSS variables (--card for baseColor/glowColor, --primary-cta for markerColor) and include default world location markers. Can customize: baseColor (RGB array), markerColor (RGB array), glowColor (RGB array), markers (array of {location: [lat, lng], size: number}), phi (rotation), theta (tilt), dark (darkness 0-1), diffuse (lighting), mapSamples, mapBrightness, and more. See COBE documentation for full options."
+            },
+            "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",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "globeConfig?": "COBEOptions - Custom globe configuration (see COBE docs)",
+          "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",
+          "globeWrapperClassName?": "string",
+          "globeClassName?": "string"
+        },
+        "usage": "<ThemeProvider defaultButtonVariant=\"text-stagger\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"rounded\" background=\"aurora\" cardStyle=\"glass-elevated\" primaryButtonStyle=\"gradient\" secondaryButtonStyle=\"glass\">\n  <HeroSplitGlobe \n    title=\"Global Reach\" \n    description=\"Create stunning, responsive websites with our comprehensive component library designed for worldwide audiences\" \n    tag=\"Worldwide\"\n    imagePosition=\"right\" \n    buttons={[{ text: 'Get Started', href: 'https://example.com' }, { text: 'Learn More', href: 'about' }]} \n  />\n</ThemeProvider>"
+      },
+      {
+        "import": "import HeroSplitGlobeKpi from '@/components/sections/hero/HeroSplitGlobeKpi';",
+        "name": "HeroSplitGlobeKpi",
+        "path": "@/components/sections/hero/HeroSplitGlobeKpi",
+        "description": "Split-layout hero with 3D globe and three KPI metric boxes positioned around it.",
+        "details": "Use for hero sections emphasizing global reach with key performance metrics. Features split layout with configurable globe position (left/right). Displays interactive 3D globe without card wrapper, with three KPI boxes positioned around it (top-left, right, bottom-center). Globe uses COBE library with theme-aware colors. Each KPI box shows a large value and label with glass styling. Responsive design centers content on mobile. Optional tag with icon and CTA buttons.",
+        "constraints": {
+          "textRules": {
+            "title": {
+              "required": true,
+              "example": "The Future of Supply Chain",
+              "minChars": 2,
+              "maxChars": 40
+            },
+            "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' }]"
+            }
+          },
+          "globeRules": {
+            "globeConfig": {
+              "required": false,
+              "note": "Optional COBEOptions configuration. Globe colors use theme CSS variables by default."
+            },
+            "globePosition": {
+              "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",
+          "kpis": "[KpiItem, KpiItem, KpiItem] - Array of exactly 3 KPI items with value and label",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "globeConfig?": "COBEOptions",
+          "ariaLabel?": "string (default: 'Hero section')",
+          "globePosition?": "'left' | 'right' (default: 'right')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "textBoxClassName?": "string",
+          "titleClassName?": "string",
+          "descriptionClassName?": "string",
+          "tagClassName?": "string",
+          "buttonContainerClassName?": "string",
+          "buttonClassName?": "string",
+          "buttonTextClassName?": "string",
+          "globeWrapperClassName?": "string",
+          "globeClassName?": "string",
+          "kpiClassName?": "string",
+          "kpiValueClassName?": "string",
+          "kpiLabelClassName?": "string"
+        },
+        "usage": "<HeroSplitGlobeKpi title=\"The Future of Supply Chain\" description=\"Ship globally within 3 days with smart fulfillment\" kpis={[{ value: '4-10 Days', label: 'Worldwide Delivery' }, { value: '99.8%', label: 'Order Accuracy' }, { value: '10x', label: 'Faster Lead Times' }]} buttons={[{ text: 'Get Started', href: 'https://example.com' }]} />"
+      },
+      {
+        "import": "import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';",
+        "name": "HeroSplitKpi",
+        "path": "@/components/sections/hero/HeroSplitKpi",
+        "description": "Split-layout hero with media image/video and three KPI metric boxes positioned around it.",
+        "details": "Use for hero sections showcasing key performance metrics alongside visual content. Features 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. Uses TextBox component for title, description, and buttons.",
+        "constraints": {
+          "textRules": {
+            "title": {
+              "required": true,
+              "example": "The Future of Supply Chain",
+              "minChars": 2,
+              "maxChars": 40
+            },
+            "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"
+            },
+            "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",
+          "kpis": "[KpiItem, KpiItem, KpiItem] - Array of exactly 3 KPI items with value and label",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "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",
+          "kpiClassName?": "string",
+          "kpiValueClassName?": "string",
+          "kpiLabelClassName?": "string"
+        },
+        "usage": "<HeroSplitKpi title=\"The Future of Supply Chain\" description=\"Ship globally within 3 days with smart fulfillment\" 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' }]} />"
+      },
+      {
+        "import": "import HeroGlobe from '@/components/sections/hero/HeroGlobe';",
+        "name": "HeroGlobe",
+        "path": "@/components/sections/hero/HeroGlobe",
+        "description": "Centered hero section with text content at top and large interactive 3D globe below in a card container.",
+        "details": "Use for hero sections emphasizing global reach, international presence, or worldwide services with a centered design. Features centered text layout with title, description, and buttons at top, followed by large interactive 3D globe in card below. Globe uses COBE library and automatically uses theme colors (--card for base/glow, --primary-cta for markers). Fully customizable via globeConfig prop. Responsive with adjusted aspect ratios (4:3 on mobile, 16:9 on desktop). Optional tag with icon and up to 2 CTA buttons.",
+        "constraints": {
+          "textRules": {
+            "title": {
+              "required": true,
+              "example": "Global Reach, Local Impact",
+              "minChars": 2,
+              "maxChars": 50
+            },
+            "description": {
+              "required": true,
+              "example": "Connect with audiences worldwide through our comprehensive platform",
+              "minChars": 5,
+              "maxChars": 200
+            },
+            "tag": {
+              "required": false,
+              "example": "Worldwide",
+              "minChars": 2,
+              "maxChars": 30
+            }
+          },
+          "globeRules": {
+            "globeConfig": {
+              "required": false,
+              "note": "Optional COBEOptions configuration object. By default, globe colors use theme CSS variables (--card for baseColor/glowColor, --primary-cta for markerColor) and include default world location markers. Can customize: baseColor (RGB array), markerColor (RGB array), glowColor (RGB array), markers (array of {location: [lat, lng], size: number}), phi (rotation), theta (tilt), dark (darkness 0-1), diffuse (lighting), mapSamples, mapBrightness, and more. See COBE documentation for full options."
+            }
+          },
+          "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",
+          "buttons?": "ButtonConfig[]",
+          "globeConfig?": "COBEOptions - Custom globe configuration (see COBE docs)",
+          "ariaLabel?": "string (default: 'Hero section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "textBoxClassName?": "string",
+          "titleClassName?": "string",
+          "descriptionClassName?": "string",
+          "tagClassName?": "string",
+          "buttonContainerClassName?": "string",
+          "buttonClassName?": "string",
+          "buttonTextClassName?": "string",
+          "globeWrapperClassName?": "string",
+          "globeClassName?": "string"
+        },
+        "usage": "<ThemeProvider defaultButtonVariant=\"icon-arrow\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"rounded\" background=\"aurora\" cardStyle=\"glass-flat\" primaryButtonStyle=\"gradient\" secondaryButtonStyle=\"glass\">\n  <HeroGlobe \n    title=\"Global Reach, Local Impact\" \n    description=\"Connect with audiences worldwide through our comprehensive platform\" \n    buttons={[{ text: 'Get Started', href: 'https://example.com' }, { text: 'Learn More', href: 'about' }]} \n  />\n</ThemeProvider>"
+      },
+      {
+        "import": "import HeroGlobeOverlay from '@/components/sections/hero/HeroGlobeOverlay';",
+        "name": "HeroGlobeOverlay",
+        "path": "@/components/sections/hero/HeroGlobeOverlay",
+        "description": "Hero section with large globe at top fading into background, with centered text content overlapping below.",
+        "details": "Use for hero sections emphasizing global reach with a dramatic visual presentation. Features large 3D globe at top with gradient fade using mask-fade-bottom-large, text content positioned below with negative margin to create overlay effect. Globe uses COBE library and automatically uses theme colors (--card for base/glow, --primary-cta for markers). Globe is 70% width on desktop, full width on mobile. Creates immersive full-viewport experience. Optional tag with icon and up to 2 CTA buttons.",
+        "constraints": {
+          "textRules": {
+            "title": {
+              "required": true,
+              "example": "Global Reach, Local Impact",
+              "minChars": 2,
+              "maxChars": 50
+            },
+            "description": {
+              "required": true,
+              "example": "Connect with audiences worldwide through our comprehensive platform",
+              "minChars": 5,
+              "maxChars": 200
+            },
+            "tag": {
+              "required": false,
+              "example": "Worldwide",
+              "minChars": 2,
+              "maxChars": 30
+            }
+          },
+          "globeRules": {
+            "globeConfig": {
+              "required": false,
+              "note": "Optional COBEOptions configuration object. By default, globe colors use theme CSS variables (--card for baseColor/glowColor, --primary-cta for markerColor). Can customize markers, rotation, lighting, and more."
+            }
+          },
+          "buttonRules": {
+            "maxButtons": 2,
+            "structure": {
+              "text": "string - Button label (required)",
+              "href": "string - Link destination (optional)",
+              "onClick": "() => void - Click handler (optional)"
+            },
+            "note": "Button variant controlled by ThemeProvider's defaultButtonVariant."
+          }
+        },
+        "propsSchema": {
+          "title": "string",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "globeConfig?": "COBEOptions",
+          "ariaLabel?": "string (default: 'Hero section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "textBoxClassName?": "string",
+          "titleClassName?": "string",
+          "descriptionClassName?": "string",
+          "tagClassName?": "string",
+          "buttonContainerClassName?": "string",
+          "buttonClassName?": "string",
+          "buttonTextClassName?": "string",
+          "globeWrapperClassName?": "string",
+          "globeClassName?": "string"
+        },
+        "usage": "<HeroGlobeOverlay title=\"Global Reach, Local Impact\" description=\"Connect with audiences worldwide through our comprehensive platform\" buttons={[{ text: 'Get Started', href: '#' }, { text: 'Learn More', href: '#' }]} />"
+      },
+      {
+        "import": "import HeroSplitStacked from '@/components/sections/hero/HeroSplitStacked';",
+        "name": "HeroSplitStacked",
+        "path": "@/components/sections/hero/HeroSplitStacked",
+        "description": "Split-layout hero section with text content on one side and 3-4 overlapping stacked images on the other, with responsive centering.",
+        "details": "Use for hero sections showcasing multiple images in a creative gallery layout. Features split layout with configurable image position (left/right). Displays 3-4 overlapping images with rotation effects. Stacked layout has 'default' and 'card' variants - 'default' has no wrapper styling, 'card' adds card background with rounded borders and padding. 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.",
+        "constraints": {
+          "textRules": {
+            "title": {
+              "required": true,
+              "example": "Explore Our Collection",
+              "minChars": 2,
+              "maxChars": 40
+            },
+            "description": {
+              "required": true,
+              "example": "Discover stunning visuals from our premium photo library",
+              "minChars": 5,
+              "maxChars": 200
+            },
+            "tag": {
+              "required": false,
+              "example": "Featured Gallery",
+              "minChars": 2,
+              "maxChars": 30
+            }
+          },
+          "mediaRules": {
+            "mediaItems": {
+              "required": true,
+              "example": "[{ imageSrc: '/img1.jpg', imageAlt: 'Collection 1' }, { imageSrc: '/img2.jpg', imageAlt: 'Collection 2' }, { imageSrc: '/img3.jpg', imageAlt: 'Collection 3' }, { imageSrc: '/img4.jpg', imageAlt: 'Collection 4' }]",
+              "note": "Array of 3-4 MediaItem objects. Each item can have imageSrc, videoSrc, imageAlt, videoAriaLabel. Supports 3-4 images maximum. Last item has highest z-index (centered), others positioned around it."
+            },
+            "stackedVariant": {
+              "required": false,
+              "options": [
+                "default",
+                "card"
+              ],
+              "default": "default",
+              "note": "'default' has no wrapper styling, 'card' adds card background with rounded borders and padding"
+            },
+            "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: 'View Gallery', href: 'gallery' }",
+              "{ 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",
+          "buttons?": "ButtonConfig[]",
+          "mediaItems": "MediaItem[] - Array of 3-4 items. MediaItem: { imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }",
+          "stackedVariant?": "'default' | 'card' (default: 'default')",
+          "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"
+        },
+        "usage": "<ThemeProvider defaultButtonVariant=\"icon-arrow\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"rounded\" background=\"animatedGrid\" cardStyle=\"glass-flat\" primaryButtonStyle=\"gradient\" secondaryButtonStyle=\"glass\">\n  <HeroSplitStacked \n    title=\"Explore Our Collection\" \n    description=\"Discover stunning visuals from our premium photo library\" \n    tag=\"Featured Gallery\"\n    stackedVariant=\"card\" \n    imagePosition=\"right\"\n    mediaItems={[\n      { imageSrc: '/img1.jpg', imageAlt: 'Collection 1' },\n      { imageSrc: '/img2.jpg', imageAlt: 'Collection 2' },\n      { imageSrc: '/img3.jpg', imageAlt: 'Collection 3' },\n      { imageSrc: '/img4.jpg', imageAlt: 'Collection 4' }\n    ]} \n    buttons={[{ text: 'View Gallery', href: 'gallery' }, { text: 'Learn More', href: 'about' }]} \n  />\n</ThemeProvider>"
+      },
+      {
+        "import": "import HeroOverlay from '@/components/sections/hero/HeroOverlay';",
+        "name": "HeroOverlay",
+        "path": "@/components/sections/hero/HeroOverlay",
+        "description": "Full-screen hero section with background image/video overlay, circular blur effect, and configurable text positioning (center or bottom-left).",
+        "details": "Use for dramatic, immersive landing pages with strong visual impact. Features full viewport height with background media (image or video), text overlay with two positioning options: centered for balanced composition or 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"
+            },
+            "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)"
+            },
+            "textPosition": {
+              "required": false,
+              "options": [
+                "center",
+                "bottom-left"
+              ],
+              "default": "bottom-left",
+              "note": "'center' positions text in the center of viewport, 'bottom-left' positions text at bottom-left corner"
+            },
+            "showBlur": {
+              "required": false,
+              "default": true,
+              "note": "Controls circular blur effect with radial gradient. Blur follows text position (centered or 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",
+          "buttons?": "ButtonConfig[]",
+          "imageSrc?": "string",
+          "videoSrc?": "string",
+          "imageAlt?": "string (default: '')",
+          "videoAriaLabel?": "string (default: 'Hero video')",
+          "textPosition?": "'center' | 'bottom-left' (default: 'bottom-left')",
+          "showDimOverlay?": "boolean (default: false)",
+          "showBlur?": "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",
+          "mediaWrapperClassName?": "string",
+          "imageClassName?": "string",
+          "blurClassName?": "string",
+          "dimOverlayClassName?": "string"
+        },
+        "usage": "<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    textPosition=\"bottom-left\"\n    showBlur={true}\n    showDimOverlay={false}\n    buttons={[{ text: 'Get Started', href: 'https://example.com' }, { text: 'Learn More', href: 'about' }]} \n  />\n</ThemeProvider>"
+      },
+      {
+        "import": "import HeroOverlaySplit from '@/components/sections/hero/HeroOverlaySplit';",
+        "name": "HeroOverlaySplit",
+        "path": "@/components/sections/hero/HeroOverlaySplit",
+        "description": "Full-screen hero section with background media, large title text on top-left and description with buttons on bottom-right. No blur or TextBox component.",
+        "details": "Use for immersive, visually-driven landing pages that emphasize dramatic background imagery with bold typography. Features full viewport height with background media (image or video), optional dim overlay for readability, and split text layout. Large title text (text-9xl on desktop, text-8xl on mobile) positioned at top-left with 2/3 width on desktop. Description text and up to 2 buttons positioned at bottom-right with 1/3 width on desktop. All text uses inverted colors (text-background) for contrast against media. Content uses w-content-width with pt-hero-page-padding pb-10 for consistent spacing. Only first 2 buttons are displayed using slice(0, 2).",
+        "constraints": {
+          "textRules": {
+            "title": {
+              "required": true,
+              "example": "Live Inside your Wildest Winter Dream",
+              "minChars": 5,
+              "maxChars": 100
+            },
+            "description": {
+              "required": true,
+              "example": "Escape into the silent heart of the mountains, where glass-framed stays meet alpine wilderness. Welcome to Iceburg where design and snow converge.",
+              "minChars": 5,
+              "maxChars": 300
+            }
+          },
+          "buttonRules": {
+            "buttons": {
+              "required": true,
+              "minItems": 1,
+              "maxItems": 2,
+              "note": "Only first 2 buttons are displayed using slice(0, 2). Uses theme.defaultButtonVariant for styling."
+            }
+          },
+          "mediaRules": {
+            "imageSrc": {
+              "required": false,
+              "example": "/hero-background.jpg",
+              "note": "Supports external URLs with unoptimized prop"
+            },
+            "videoSrc": {
+              "required": false,
+              "example": "/hero-video.mp4",
+              "note": "Takes precedence over imageSrc if both provided"
+            },
+            "imageAlt": {
+              "required": false,
+              "example": "Winter mountain landscape",
+              "note": "Empty string marks image as decorative (aria-hidden)"
+            },
+            "showDimOverlay": {
+              "required": false,
+              "default": false,
+              "note": "When true, adds bg-background/20 overlay for improved text readability"
+            }
+          }
+        },
+        "propsSchema": {
+          "title": "string",
+          "description": "string",
+          "buttons": "ButtonConfig[]",
+          "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",
+          "titleClassName?": "string",
+          "descriptionClassName?": "string",
+          "buttonContainerClassName?": "string",
+          "buttonClassName?": "string",
+          "buttonTextClassName?": "string",
+          "mediaWrapperClassName?": "string",
+          "imageClassName?": "string",
+          "dimOverlayClassName?": "string"
+        },
+        "usage": "<ThemeProvider defaultButtonVariant=\"hover-bubble\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"pill\">\n  <HeroOverlaySplit \n    title=\"Live Inside your Wildest Winter Dream\" \n    description=\"Escape into the silent heart of the mountains, where glass-framed stays meet alpine wilderness. Welcome to Iceburg where design and snow converge.\" \n    buttons={[\n      { text: 'Reserve Now', href: '#' }\n    ]}\n    imageSrc=\"/winter-mountains.jpg\" \n    imageAlt=\"Winter mountain landscape\"\n    showDimOverlay={false}\n  />\n</ThemeProvider>"
+      },
+      {
+        "import": "import HeroOverlayBottomSplit from '@/components/sections/hero/HeroOverlayBottomSplit';",
+        "name": "HeroOverlayBottomSplit",
+        "path": "@/components/sections/hero/HeroOverlayBottomSplit",
+        "description": "Full viewport hero section with background media, large title at bottom-left, and a card containing description and buttons at bottom-right.",
+        "details": "Use for immersive landing pages with dramatic background imagery where content is anchored at the bottom. Features full viewport height with background media (image or video), optional dim overlay for readability. Bottom row has large title on left (1/2 width) and a card with description and buttons on right (1/3 width). Card uses standard card styling with rounded-theme-capped corners. Mobile layout stacks vertically: title then card below. Title uses inverted colors (text-background) for contrast against background. Card content text color uses shouldUseInvertedText logic based on cardStyle - light card styles use text-foreground/75, dark card styles use text-background/75. Uses w-content-width pattern with pt-hero-page-padding and pb-20 spacing.",
+        "constraints": {
+          "textRules": {
+            "title": {
+              "required": true,
+              "example": "Design & Code together powered by AI.",
+              "minChars": 5,
+              "maxChars": 80
+            },
+            "description": {
+              "required": true,
+              "example": "Collaborate in real-time on React components like never before, streamlining your workflow and enhancing productivity.",
+              "minChars": 10,
+              "maxChars": 300
+            }
+          },
+          "mediaRules": {
+            "imageSrc": {
+              "required": false,
+              "example": "/hero-background.jpg",
+              "note": "Full-bleed background image"
+            },
+            "videoSrc": {
+              "required": false,
+              "example": "/hero-background.mp4",
+              "note": "Video takes precedence over image 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 contrast"
+            }
+          },
+          "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)",
+              "props": "Partial<ButtonPropsForVariant> - Additional button props (optional)"
+            },
+            "examples": [
+              "{ text: 'Get Started', href: 'https://example.com' }",
+              "{ text: 'How it Works', href: 'features' }"
+            ],
+            "note": "Button variant controlled by ThemeProvider's defaultButtonVariant"
+          }
+        },
+        "propsSchema": {
+          "title": "string",
+          "description": "string",
+          "buttons": "ButtonConfig[]",
+          "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",
+          "titleClassName?": "string",
+          "descriptionClassName?": "string",
+          "cardClassName?": "string",
+          "buttonContainerClassName?": "string",
+          "buttonClassName?": "string",
+          "buttonTextClassName?": "string",
+          "mediaWrapperClassName?": "string",
+          "imageClassName?": "string",
+          "dimOverlayClassName?": "string"
+        },
+        "usage": "<ThemeProvider defaultButtonVariant=\"hover-bubble\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"pill\">\n  <HeroOverlayBottomSplit \n    title=\"Design & Code together powered by AI.\" \n    description=\"Collaborate in real-time on React components like never before, streamlining your workflow and enhancing productivity with instant updates.\" \n    buttons={[\n      { text: 'Get Started', href: 'https://github.com' },\n      { text: 'How it Works', href: 'features' }\n    ]}\n    imageSrc=\"/hero-background.jpg\" \n    imageAlt=\"Hero background\"\n    showDimOverlay={false}\n  />\n</ThemeProvider>"
+      },
+      {
+        "import": "import HeroShowcaseSplit from '@/components/sections/hero/HeroShowcaseSplit';",
+        "name": "HeroShowcaseSplit",
+        "path": "@/components/sections/hero/HeroShowcaseSplit",
+        "description": "Full viewport hero section with showcase image card on left, title and buttons on right, tags list at bottom left, and description at bottom right.",
+        "details": "Use for product showcases, SaaS landing pages, or portfolio sites where you want to highlight a product/feature image alongside compelling copy. Features split layout with showcase image in a card frame (2/5 width) on left and large title with buttons (3/5 width) on right at top. Bottom row has vertical tags list on left (max 6) and description text on right (1/2 width). Mobile layout stacks vertically: title + buttons, description, showcase image (square aspect), then tags in horizontal row with dot separators (max 4). Uses w-content-width pattern with pt-hero-page-padding-1_5 and pb-hero-page-padding spacing.",
+        "constraints": {
+          "textRules": {
+            "title": {
+              "required": true,
+              "example": "Design & Code together powered by AI.",
+              "minChars": 5,
+              "maxChars": 80
+            },
+            "description": {
+              "required": true,
+              "example": "Collaborate in real-time on React components like never before, streamlining your workflow and enhancing productivity.",
+              "minChars": 10,
+              "maxChars": 300
+            },
+            "tags": {
+              "required": true,
+              "example": ["AI", "Design", "Development", "React"],
+              "minItems": 1,
+              "maxItems": 6,
+              "note": "Desktop shows max 6 tags vertically, mobile shows max 4 tags horizontally with dot separators"
+            }
+          },
+          "mediaRules": {
+            "showcaseImageSrc": {
+              "required": false,
+              "example": "/product-showcase.jpg",
+              "note": "Image displayed in card frame. Desktop: 2/5 width aspect-video. Mobile: full width aspect-square"
+            },
+            "showcaseVideoSrc": {
+              "required": false,
+              "example": "/product-demo.mp4",
+              "note": "Video takes precedence over image if both provided"
+            },
+            "showcaseImageAlt": {
+              "required": false,
+              "example": "Product interface showcase",
+              "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 open in new tab, internal values scroll to sections",
+              "onClick": "() => void - Additional click handler (optional)",
+              "props": "Partial<ButtonPropsForVariant> - Additional button props (optional)"
+            },
+            "examples": [
+              "{ text: 'Get Started', href: 'https://example.com' }",
+              "{ text: 'How it Works', href: 'features' }"
+            ],
+            "note": "Button variant controlled by ThemeProvider's defaultButtonVariant"
+          }
+        },
+        "propsSchema": {
+          "title": "string",
+          "description": "string",
+          "tags": "string[]",
+          "buttons": "ButtonConfig[]",
+          "showcaseImageSrc?": "string",
+          "showcaseVideoSrc?": "string",
+          "showcaseImageAlt?": "string (default: '')",
+          "showcaseVideoAriaLabel?": "string (default: 'Showcase video')",
+          "ariaLabel?": "string (default: 'Hero section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "titleClassName?": "string",
+          "descriptionClassName?": "string",
+          "tagsContainerClassName?": "string",
+          "tagClassName?": "string",
+          "buttonContainerClassName?": "string",
+          "buttonClassName?": "string",
+          "buttonTextClassName?": "string",
+          "showcaseWrapperClassName?": "string",
+          "showcaseImageClassName?": "string"
+        },
+        "usage": "<ThemeProvider defaultButtonVariant=\"hover-bubble\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"pill\">\n  <HeroShowcaseSplit \n    title=\"Design & Code together powered by AI.\" \n    description=\"Collaborate in real-time on React components like never before, streamlining your workflow and enhancing productivity with instant updates.\" \n    tags={['AI', 'Design', 'Development', 'React components']}\n    buttons={[\n      { text: 'Get Started', href: 'https://github.com' },\n      { text: 'How it Works', href: 'features' }\n    ]}\n    showcaseImageSrc=\"/product-showcase.jpg\" \n    showcaseImageAlt=\"Product interface\"\n  />\n</ThemeProvider>"
+      },
+      {
+        "import": "import HeroShowcaseSplitOverlay from '@/components/sections/hero/HeroShowcaseSplitOverlay';",
+        "name": "HeroShowcaseSplitOverlay",
+        "path": "@/components/sections/hero/HeroShowcaseSplitOverlay",
+        "description": "HeroShowcaseSplit variant with full-bleed background image/video featuring mask-fade-bottom-long effect, showcase image card on left, title and buttons on right, tags at bottom left, description at bottom right.",
+        "details": "Use for immersive landing pages combining dramatic background imagery with the showcase split layout. Identical to HeroShowcaseSplit but adds full viewport background media with mask-fade-bottom-long gradient fade effect. Optional dim overlay for improved text readability. Desktop: showcase image in card frame (2/5 width) on left, large title with buttons (3/5 width) on right at top, vertical tags list at bottom-left (max 6), description at bottom-right (1/2 width). Mobile: stacks vertically as title + buttons, description, showcase image (square aspect), then tags in horizontal row with dot separators (max 4). Uses standard text-foreground colors. Uses w-content-width pattern with pt-hero-page-padding-1_5 and pb-hero-page-padding spacing.",
+        "constraints": {
+          "textRules": {
+            "title": {
+              "required": true,
+              "example": "Design & Code together powered by AI.",
+              "minChars": 5,
+              "maxChars": 80
+            },
+            "description": {
+              "required": true,
+              "example": "Collaborate in real-time on React components like never before, streamlining your workflow and enhancing productivity.",
+              "minChars": 10,
+              "maxChars": 300
+            },
+            "tags": {
+              "required": true,
+              "example": ["AI", "Design", "Development", "React"],
+              "minItems": 1,
+              "maxItems": 6,
+              "note": "Desktop shows max 6 tags vertically, mobile shows max 4 tags horizontally with dot separators"
+            }
+          },
+          "mediaRules": {
+            "showcaseImageSrc": {
+              "required": false,
+              "example": "/product-showcase.jpg",
+              "note": "Image displayed in card frame. Desktop: 2/5 width aspect-video. Mobile: full width aspect-square"
+            },
+            "showcaseVideoSrc": {
+              "required": false,
+              "example": "/product-demo.mp4",
+              "note": "Video takes precedence over image if both provided for showcase"
+            },
+            "showcaseImageAlt": {
+              "required": false,
+              "example": "Product interface showcase",
+              "note": "Empty string marks image as decorative (aria-hidden)"
+            },
+            "imageSrc": {
+              "required": false,
+              "example": "/hero-background.jpg",
+              "note": "Full-bleed background image with mask-fade-bottom-long effect"
+            },
+            "videoSrc": {
+              "required": false,
+              "example": "/hero-background.mp4",
+              "note": "Background video takes precedence over image if both provided"
+            },
+            "imageAlt": {
+              "required": false,
+              "example": "Hero background",
+              "note": "Empty string marks background 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 contrast"
+            }
+          },
+          "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)",
+              "props": "Partial<ButtonPropsForVariant> - Additional button props (optional)"
+            },
+            "examples": [
+              "{ text: 'Get Started', href: 'https://example.com' }",
+              "{ text: 'How it Works', href: 'features' }"
+            ],
+            "note": "Button variant controlled by ThemeProvider's defaultButtonVariant"
+          }
+        },
+        "propsSchema": {
+          "title": "string",
+          "description": "string",
+          "tags": "string[]",
+          "buttons": "ButtonConfig[]",
+          "showcaseImageSrc?": "string",
+          "showcaseVideoSrc?": "string",
+          "showcaseImageAlt?": "string (default: '')",
+          "showcaseVideoAriaLabel?": "string (default: 'Showcase video')",
+          "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",
+          "titleClassName?": "string",
+          "descriptionClassName?": "string",
+          "tagsContainerClassName?": "string",
+          "tagClassName?": "string",
+          "buttonContainerClassName?": "string",
+          "buttonClassName?": "string",
+          "buttonTextClassName?": "string",
+          "showcaseWrapperClassName?": "string",
+          "showcaseImageClassName?": "string",
+          "mediaWrapperClassName?": "string",
+          "imageClassName?": "string",
+          "dimOverlayClassName?": "string"
+        },
+        "usage": "<ThemeProvider defaultButtonVariant=\"hover-bubble\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"pill\">\n  <HeroShowcaseSplitOverlay \n    title=\"Design & Code together powered by AI.\" \n    description=\"Collaborate in real-time on React components like never before, streamlining your workflow and enhancing productivity with instant updates.\" \n    tags={['AI', 'Design', 'Development', 'React components']}\n    buttons={[\n      { text: 'Get Started', href: 'https://github.com' },\n      { text: 'How it Works', href: 'features' }\n    ]}\n    showcaseImageSrc=\"/product-showcase.jpg\"\n    showcaseImageAlt=\"Product interface\"\n    imageSrc=\"/hero-background.jpg\" \n    imageAlt=\"Hero background\"\n    showDimOverlay={false}\n  />\n</ThemeProvider>"
+      },
+      {
+        "import": "import HeroLogo from '@/components/sections/hero/HeroLogo';",
+        "name": "HeroLogo",
+        "path": "@/components/sections/hero/HeroLogo",
+        "description": "Full-screen hero section with background media, large SVG text logo at bottom, 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 SVG text logo that fills the 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). Logo height adjusts responsively (1.1x on mobile, 0.8x on desktop) for optimal scaling.",
+        "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"
+            },
+            "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": "ButtonConfig[]",
+          "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"
+        },
+        "usage": "<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>"
+      },
+      {
+        "import": "import HeroLogoCarousel from '@/components/sections/hero/HeroLogoCarousel';",
+        "name": "HeroLogoCarousel",
+        "path": "@/components/sections/hero/HeroLogoCarousel",
+        "description": "Hero section with large SVG text logo at top, description text, and auto-scrolling image carousel below.",
+        "details": "Use for brand-focused landing pages that emphasize logo and showcase portfolio or product imagery. Features large responsive SVG text logo that fills the width at the top, followed by description text aligned to the right (desktop) or centered (mobile), and auto-scrolling carousel with 5+ images at the bottom. Logo height adjusts responsively (1.1x on mobile, 0.8x on desktop). Description text is larger on desktop (text-3xl) than mobile (text-lg). Carousel images have card styling with padding and rounded corners.",
+        "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": {
+            "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 for carousel effect."
+            }
+          }
+        },
+        "propsSchema": {
+          "logoText": "string",
+          "description": "string",
+          "mediaItems": "MediaItem[]",
+          "ariaLabel?": "string (default: 'Hero section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "logoContainerClassName?": "string",
+          "logoClassName?": "string",
+          "descriptionClassName?": "string",
+          "carouselWrapperClassName?": "string"
+        },
+        "usage": "<ThemeProvider defaultButtonVariant=\"text-stagger\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"pill\" cardStyle=\"layered-gradient\">\n  <HeroLogoCarousel \n    logoText=\"klime studio\" \n    description=\"we help driven founders build the brands of tomorrow through websites, product design & branding.\" \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    ]}\n  />\n</ThemeProvider>"
+      },
+      {
+        "import": "import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';",
+        "name": "HeroLogoBillboard",
+        "path": "@/components/sections/hero/HeroLogoBillboard",
+        "description": "Hero section with large SVG text logo at top, 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 SVG text logo that fills the 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. Logo height adjusts responsively (1.1x on mobile, 0.8x on desktop). 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"
+            },
+            "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",
+          "imageSrc?": "string",
+          "videoSrc?": "string",
+          "imageAlt?": "string (default: '')",
+          "videoAriaLabel?": "string (default: 'Hero video')",
+          "frameStyle?": "'card' | 'browser' (default: 'card')",
+          "ariaLabel?": "string (default: 'Hero section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "logoContainerClassName?": "string",
+          "logoClassName?": "string",
+          "descriptionClassName?": "string",
+          "mediaWrapperClassName?": "string",
+          "imageClassName?": "string",
+          "browserBarClassName?": "string",
+          "addressBarClassName?": "string"
+        },
+        "usage": "<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    imageSrc=\"/hero.jpg\"\n    imageAlt=\"Hero showcase\"\n    frameStyle=\"card\"\n  />\n</ThemeProvider>"
+      },
+      {
+        "import": "import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboardSplit';",
+        "name": "HeroLogoBillboardSplit",
+        "path": "@/components/sections/hero/HeroLogoBillboardSplit",
+        "description": "Hero section with split layout (description left, buttons right), large SVG text logo, and single framed media at bottom. Supports flex-col or flex-col-reverse layout order.",
+        "details": "Use for brand-focused landing pages that prioritize messaging and CTAs with flexible logo positioning. Features split layout on desktop with description text on the left (1/2 width) and up to 2 action buttons on the right, aligned to bottom of description. Large responsive SVG text logo fills the width and can be positioned above or below the split section using layoutOrder prop ('default' = split then logo, 'reverse' = logo then split). Media section at bottom can be displayed in simple card frame or browser mockup with address bar. Logo height adjusts responsively (1.0x on mobile, 0.8x on desktop). Description text is larger on desktop (text-3xl) than mobile (text-lg). Only first 2 buttons are displayed using slice(0, 2).",
+        "constraints": {
+          "textRules": {
+            "logoText": {
+              "required": true,
+              "example": "ACME",
+              "minChars": 2,
+              "maxChars": 30
+            },
+            "description": {
+              "required": true,
+              "example": "Create stunning, responsive websites with our comprehensive component library",
+              "minChars": 5,
+              "maxChars": 300
+            }
+          },
+          "layoutRules": {
+            "layoutOrder": {
+              "required": true,
+              "options": [
+                "default",
+                "reverse"
+              ],
+              "note": "'default' displays split section (description/buttons) then logo (flex-col). 'reverse' displays logo then split section (flex-col-reverse)."
+            }
+          },
+          "buttonRules": {
+            "buttons": {
+              "required": true,
+              "minItems": 1,
+              "maxItems": 2,
+              "note": "Only first 2 buttons are displayed using slice(0, 2). Uses theme.defaultButtonVariant for styling."
+            }
+          },
+          "mediaRules": {
+            "imageSrc": {
+              "required": false,
+              "example": "/hero-image.jpg",
+              "note": "Supports external URLs with unoptimized prop"
+            },
+            "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": "ButtonConfig[]",
+          "layoutOrder": "'default' | 'reverse'",
+          "imageSrc?": "string",
+          "videoSrc?": "string",
+          "imageAlt?": "string (default: '')",
+          "videoAriaLabel?": "string (default: 'Hero video')",
+          "frameStyle?": "'card' | 'browser' (default: 'card')",
+          "ariaLabel?": "string (default: 'Hero section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "logoContainerClassName?": "string",
+          "descriptionClassName?": "string",
+          "buttonContainerClassName?": "string",
+          "buttonClassName?": "string",
+          "buttonTextClassName?": "string",
+          "logoClassName?": "string",
+          "mediaWrapperClassName?": "string",
+          "imageClassName?": "string",
+          "browserBarClassName?": "string",
+          "addressBarClassName?": "string"
+        },
+        "usage": "<ThemeProvider defaultButtonVariant=\"text-stagger\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"pill\" cardStyle=\"layered-gradient\">\n  <HeroLogoBillboardSplit \n    logoText=\"ACME\" \n    description=\"Create stunning, responsive websites with our comprehensive component library\" \n    buttons={[\n      { text: 'Get Started', href: '#' },\n      { text: 'Learn More', href: '#' }\n    ]}\n    layoutOrder=\"default\"\n    imageSrc=\"/hero.jpg\"\n    imageAlt=\"Hero showcase\"\n    frameStyle=\"browser\"\n  />\n</ThemeProvider>"
+      },
+      {
+        "import": "import HeroLogoBillboardSplitImage from '@/components/sections/hero/HeroLogoBillboardSplitImage';",
+        "name": "HeroLogoBillboardSplitImage",
+        "path": "@/components/sections/hero/HeroLogoBillboardSplitImage",
+        "description": "Hero section with grid/flex split layout featuring description+buttons stacked on left and image on right, large SVG text logo, and billboard media at bottom. Supports flex-col or flex-col-reverse layout order.",
+        "details": "Use for brand-focused landing pages that showcase products/services alongside messaging and CTAs. Features responsive split layout: on mobile uses CSS Grid to make the image match text height, on desktop uses flexbox with description/buttons stacked vertically on the left (2/5 width) and image on the right (1/3 width, aspect-video). Large responsive SVG text logo fills the width and can be positioned above or below the split section using layoutOrder prop ('default' = split then logo, 'reverse' = logo then split). Billboard media section at bottom can be displayed in simple card frame or browser mockup with address bar. Logo height adjusts responsively (1.0x on mobile, 0.8x on desktop). Description text is larger on desktop (text-3xl) than mobile (text-lg). Only first 2 buttons are displayed using slice(0, 2). Mobile uses grid-cols-[1fr_auto] to stretch image to text height, desktop uses flex-row with justify-between.",
+        "constraints": {
+          "textRules": {
+            "logoText": {
+              "required": true,
+              "example": "POWERFLOW",
+              "minChars": 2,
+              "maxChars": 30
+            },
+            "description": {
+              "required": true,
+              "example": "Clean Power, Anywhere. Instantly. Zero-emission energy solutions and more with. Delivered fast. Engineered to last.",
+              "minChars": 5,
+              "maxChars": 300
+            }
+          },
+          "layoutRules": {
+            "layoutOrder": {
+              "required": true,
+              "options": [
+                "default",
+                "reverse"
+              ],
+              "note": "'default' displays split section (description/buttons + image) then logo (flex-col). 'reverse' displays logo then split section (flex-col-reverse)."
+            }
+          },
+          "buttonRules": {
+            "buttons": {
+              "required": true,
+              "minItems": 1,
+              "maxItems": 2,
+              "note": "Only first 2 buttons are displayed using slice(0, 2). Uses theme.defaultButtonVariant for styling."
+            }
+          },
+          "mediaRules": {
+            "splitImageSrc": {
+              "required": false,
+              "example": "/product.jpg",
+              "note": "Image displayed in the split section on the right side. On mobile stretches to match text height using CSS Grid. Supports external URLs with unoptimized prop"
+            },
+            "splitVideoSrc": {
+              "required": false,
+              "example": "/product-video.mp4",
+              "note": "Takes precedence over splitImageSrc if both provided"
+            },
+            "splitImageAlt": {
+              "required": false,
+              "example": "Product showcase",
+              "note": "Empty string marks image as decorative (aria-hidden)"
+            },
+            "imageSrc": {
+              "required": false,
+              "example": "/hero-billboard.jpg",
+              "note": "Billboard section image at bottom. Supports external URLs with unoptimized prop"
+            },
+            "videoSrc": {
+              "required": false,
+              "example": "/hero-video.mp4",
+              "note": "Takes precedence over imageSrc if both provided"
+            },
+            "imageAlt": {
+              "required": false,
+              "example": "Hero showcase",
+              "note": "Empty string marks image as decorative (aria-hidden)"
+            },
+            "frameStyle": {
+              "required": false,
+              "options": [
+                "card",
+                "browser"
+              ],
+              "default": "card",
+              "note": "'card' displays billboard media in simple card with padding. 'browser' wraps media in browser mockup with address bar and window controls."
+            }
+          }
+        },
+        "propsSchema": {
+          "logoText": "string",
+          "description": "string",
+          "buttons": "ButtonConfig[]",
+          "layoutOrder": "'default' | 'reverse'",
+          "splitImageSrc?": "string",
+          "splitVideoSrc?": "string",
+          "splitImageAlt?": "string (default: '')",
+          "splitVideoAriaLabel?": "string (default: 'Split section video')",
+          "imageSrc?": "string",
+          "videoSrc?": "string",
+          "imageAlt?": "string (default: '')",
+          "videoAriaLabel?": "string (default: 'Hero video')",
+          "frameStyle?": "'card' | 'browser' (default: 'card')",
+          "ariaLabel?": "string (default: 'Hero section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "logoContainerClassName?": "string",
+          "descriptionClassName?": "string",
+          "buttonContainerClassName?": "string",
+          "buttonClassName?": "string",
+          "buttonTextClassName?": "string",
+          "logoClassName?": "string",
+          "splitMediaWrapperClassName?": "string",
+          "splitImageClassName?": "string",
+          "mediaWrapperClassName?": "string",
+          "imageClassName?": "string",
+          "browserBarClassName?": "string",
+          "addressBarClassName?": "string"
+        },
+        "usage": "<ThemeProvider defaultButtonVariant=\"text-stagger\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"pill\" cardStyle=\"layered-gradient\">\n  <HeroLogoBillboardSplitImage \n    logoText=\"POWERFLOW\" \n    description=\"Clean Power, Anywhere. Instantly. Zero-emission energy solutions and more with. Delivered fast. Engineered to last.\" \n    buttons={[\n      { text: \"Let's Talk Power\", href: '#' },\n      { text: 'Learn more', href: '#' }\n    ]}\n    layoutOrder=\"default\"\n    splitImageSrc=\"/product.jpg\"\n    splitImageAlt=\"Power solution showcase\"\n    imageSrc=\"/hero.jpg\"\n    imageAlt=\"Hero showcase\"\n    frameStyle=\"card\"\n  />\n</ThemeProvider>"
+      },
+      {
+        "import": "import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';",
+        "name": "HeroBillboardScroll",
+        "path": "@/components/sections/hero/HeroBillboardScroll",
+        "description": "Full-screen hero section with centered text 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. 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. Features centered TextBox above the animated card with consistent Billboard styling. 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"
+            },
+            "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",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "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",
+          "cardWrapperClassName?": "string",
+          "cardInnerClassName?": "string",
+          "imageClassName?": "string"
+        },
+        "usage": "<ThemeProvider defaultButtonVariant=\"hover-bubble\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"pill\">\n  <HeroBillboardScroll \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>"
+      },
+      {
+        "import": "import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';",
+        "name": "HeroCarouselLogo",
+        "path": "@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo",
+        "description": "Full-screen hero section with auto-playing carousel background, large SVG text logo at bottom, 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 SVG text logo fills the 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. Logo height adjusts responsively (1.1x on mobile, 0.8x on desktop). 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": "ButtonConfig[]",
+          "slides": "CarouselSlide[] - Array of { imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }",
+          "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"
+        },
+        "usage": "<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>"
+      },
+      {
+        "import": "import HeroChatPrompt from '@/components/sections/hero/HeroChatPrompt';",
+        "name": "HeroChatPrompt",
+        "path": "@/components/sections/hero/HeroChatPrompt",
+        "description": "Full-viewport hero section with centered text content, decorative prompt input box, and feature tags below. Designed for AI/chat product landing pages.",
+        "details": "Use for AI product, chatbot, or conversation-focused landing pages. Features centered title and description with TextBox animations, optional tag with icon. Below text is a decorative card containing non-functional prompt text and send button icon (ArrowUp, hardcoded). At bottom are feature tags displayed as small cards in a flex-wrap layout, each with required icon and label. All elements centered and responsive. Prompt box uses w-full md:w-50, feature tags container also w-full md:w-50.",
+        "constraints": {
+          "textRules": {
+            "title": {
+              "required": true,
+              "example": "Chat with Intelligence",
+              "minChars": 2,
+              "maxChars": 40
+            },
+            "description": {
+              "required": true,
+              "example": "Experience the power of AI-driven conversations",
+              "minChars": 5,
+              "maxChars": 200
+            },
+            "tag": {
+              "required": false,
+              "example": "AI Assistant",
+              "minChars": 2,
+              "maxChars": 30
+            },
+            "promptText": {
+              "required": false,
+              "example": "Ask me anything...",
+              "default": "Ask me anything...",
+              "minChars": 2,
+              "maxChars": 100
+            }
+          },
+          "featureTagRules": {
+            "required": true,
+            "structure": {
+              "id": "string - Unique identifier (required)",
+              "label": "string - Feature tag text (required)",
+              "icon": "LucideIcon - Icon for tag (required, not optional)"
+            },
+            "examples": [
+              "{ id: '1', label: 'Lightning Fast', icon: Zap }",
+              "{ id: '2', label: 'Smart Responses', icon: Brain }"
+            ],
+            "note": "Feature tags array is required. Each tag must have an icon (not optional). Tags displayed as small cards with icon and label."
+          }
+        },
+        "propsSchema": {
+          "title": "string",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "promptText?": "string (default: 'Ask me anything...')",
+          "featureTags": "FeatureTag[] - Array of { id: string, label: string, icon: LucideIcon }",
+          "ariaLabel?": "string (default: 'Hero section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "textBoxClassName?": "string",
+          "titleClassName?": "string",
+          "descriptionClassName?": "string",
+          "tagClassName?": "string",
+          "promptContainerClassName?": "string",
+          "promptTextClassName?": "string",
+          "promptButtonClassName?": "string",
+          "featureTagsClassName?": "string",
+          "featureTagClassName?": "string"
+        },
+        "usage": "<ThemeProvider defaultButtonVariant=\"hover-magnetic\" defaultTextAnimation=\"reveal-blur\" borderRadius=\"rounded\">\n  <HeroChatPrompt \n    title=\"Chat with Intelligence\" \n    description=\"Experience the power of AI-driven conversations\" \n    tag=\"AI Assistant\" \n    tagIcon={Sparkles}\n    promptText=\"Ask me anything...\"\n    featureTags={[\n      { id: '1', label: 'Lightning Fast', icon: Zap },\n      { id: '2', label: 'Smart Responses', icon: Brain },\n      { id: '3', label: 'Natural Conversation', icon: MessageSquare }\n    ]}\n  />\n</ThemeProvider>"
+      },
+      {
+        "import": "import HeroChatPromptFeatures from '@/components/sections/hero/HeroChatPromptFeatures';",
+        "name": "HeroChatPromptFeatures",
+        "path": "@/components/sections/hero/HeroChatPromptFeatures",
+        "description": "Full-viewport hero with centered text, feature tags, prompt input, divider, and feature highlights grid. Enhanced version for showcasing AI product capabilities.",
+        "details": "Use for AI/SaaS landing pages that need to highlight both quick features and detailed capabilities. Features centered title/description with optional tag, feature tags (small chips with icons) displayed above prompt box, decorative prompt input card with send button, horizontal divider line, and 2-4 feature highlights below in responsive grid. Feature highlights include icon, title, and subtitle in card layout. Grid adapts: 2 items = 2 cols, 3 items = 3 cols, 4 items = 2x2 grid. All centered with w-50 max width on desktop.",
+        "constraints": {
+          "textRules": {
+            "title": {
+              "required": true,
+              "example": "Jump into the future of sales with Human",
+              "minChars": 2,
+              "maxChars": 60
+            },
+            "description": {
+              "required": true,
+              "example": "Supercharge your sales team with intelligent AI automation for faster growth",
+              "minChars": 5,
+              "maxChars": 200
+            },
+            "tag": {
+              "required": false,
+              "example": "AI Assistant",
+              "minChars": 2,
+              "maxChars": 30
+            },
+            "promptText": {
+              "required": false,
+              "example": "Generate insights now...",
+              "default": "Ask me anything...",
+              "minChars": 2,
+              "maxChars": 100
+            }
+          },
+          "featureTagRules": {
+            "required": true,
+            "structure": {
+              "id": "string - Unique identifier (required)",
+              "label": "string - Feature tag text (required)",
+              "icon": "LucideIcon - Icon for tag (required)"
+            },
+            "examples": [
+              "{ id: '1', label: 'Thinking', icon: Brain }",
+              "{ id: '2', label: 'GPT-4', icon: Sparkles }"
+            ],
+            "note": "Feature tags displayed as small chips above prompt box. Array is required."
+          },
+          "featureHighlightRules": {
+            "required": true,
+            "minItems": 2,
+            "maxItems": 4,
+            "structure": {
+              "id": "string - Unique identifier (required)",
+              "icon": "LucideIcon - Feature icon (required)",
+              "title": "string - Feature title (required)",
+              "subtitle": "string - Feature description (required)"
+            },
+            "examples": [
+              "{ id: '1', icon: Brain, title: 'Automated sales Insights', subtitle: 'Eliminate repetitive tasks' }",
+              "{ id: '2', icon: TrendingUp, title: 'Predictive lead Scoring', subtitle: 'Machine learning to forecast trends' }"
+            ],
+            "note": "2 items: 2-column grid. 3 items: 3-column grid. 4 items: 2x2 grid. Each highlight is a card with icon, title, and subtitle."
+          }
+        },
+        "propsSchema": {
+          "title": "string",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "promptText?": "string (default: 'Ask me anything...')",
+          "featureTags": "FeatureTag[] - Array of { id: string, label: string, icon: LucideIcon }",
+          "featureHighlights": "FeatureHighlight[] - Array of { id: string, icon: LucideIcon, title: string, subtitle: string }",
+          "ariaLabel?": "string (default: 'Hero section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "textBoxClassName?": "string",
+          "titleClassName?": "string",
+          "descriptionClassName?": "string",
+          "tagClassName?": "string",
+          "promptContainerClassName?": "string",
+          "promptTextClassName?": "string",
+          "promptButtonClassName?": "string",
+          "featureTagsClassName?": "string",
+          "featureTagClassName?": "string",
+          "featureHighlightsClassName?": "string",
+          "featureHighlightClassName?": "string",
+          "featureHighlightIconClassName?": "string",
+          "featureHighlightTitleClassName?": "string",
+          "featureHighlightSubtitleClassName?": "string"
+        },
+        "usage": "<HeroChatPromptFeatures title=\"Jump into the future of sales\" description=\"Supercharge your sales team with AI automation\" tag=\"NEW\" promptText=\"Generate insights now...\" featureTags={[{ id: '1', label: 'Thinking', icon: Brain }]} featureHighlights={[{ id: '1', icon: Brain, title: 'Automated sales Insights', subtitle: 'Eliminate repetitive tasks' }, { id: '2', icon: TrendingUp, title: 'Predictive lead Scoring', subtitle: 'Machine learning to forecast' }]} />"
+      },
+      {
+        "import": "import HeroEmailSignup from '@/components/sections/hero/HeroEmailSignup';",
+        "name": "HeroEmailSignup",
+        "path": "@/components/sections/hero/HeroEmailSignup",
+        "description": "Full-viewport hero section with centered text content and email signup form. Designed for newsletter signups, lead capture, and email collection.",
+        "details": "Use for newsletter signups, waitlist pages, or lead capture landing pages. Features centered title and description with TextBox animations, optional tag with icon. Below text is a functional EmailSignupForm component in a card with input field and submit button. Form uses w-full md:w-30 container width. Includes onSubmit callback for email handling. Form has built-in validation and responsive design (stacked on mobile, horizontal on desktop).",
+        "constraints": {
+          "textRules": {
+            "title": {
+              "required": true,
+              "example": "Stay Updated",
+              "minChars": 2,
+              "maxChars": 40
+            },
+            "description": {
+              "required": true,
+              "example": "Join thousands of subscribers who get the latest insights",
+              "minChars": 5,
+              "maxChars": 200
+            },
+            "tag": {
+              "required": false,
+              "example": "Newsletter",
+              "minChars": 2,
+              "maxChars": 30
+            },
+            "inputPlaceholder": {
+              "required": false,
+              "example": "Enter your email address",
+              "default": "Enter your email",
+              "minChars": 5,
+              "maxChars": 50
+            },
+            "buttonText": {
+              "required": false,
+              "example": "Subscribe",
+              "default": "Sign Up",
+              "minChars": 2,
+              "maxChars": 30
+            }
+          }
+        },
+        "propsSchema": {
+          "title": "string",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "inputPlaceholder?": "string (default: 'Enter your email')",
+          "buttonText?": "string (default: 'Sign Up')",
+          "onSubmit?": "(email: string) => void",
+          "ariaLabel?": "string (default: 'Hero section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "textBoxClassName?": "string",
+          "titleClassName?": "string",
+          "descriptionClassName?": "string",
+          "tagClassName?": "string",
+          "formClassName?": "string",
+          "inputClassName?": "string",
+          "buttonClassName?": "string",
+          "buttonTextClassName?": "string"
+        },
+        "usage": "<ThemeProvider defaultButtonVariant=\"hover-magnetic\" defaultTextAnimation=\"reveal-blur\" borderRadius=\"rounded\">\n  <HeroEmailSignup \n    title=\"Stay Updated\" \n    description=\"Join thousands of subscribers who get the latest insights\" \n    tag=\"Newsletter\" \n    tagIcon={Mail}\n    inputPlaceholder=\"Enter your email address\"\n    buttonText=\"Subscribe\"\n    onSubmit={(email) => console.log('Email:', email)}\n  />\n</ThemeProvider>"
+      },
+      {
+        "import": "import HeroWaitlist from '@/components/sections/hero/HeroWaitlist';",
+        "name": "HeroWaitlist",
+        "path": "@/components/sections/hero/HeroWaitlist",
+        "description": "Full-viewport hero section with centered text content and customizable multi-field waitlist form. Designed for product launches, beta signups, and flexible data collection.",
+        "details": "Use for product launch pages, beta signups, or waitlist campaigns requiring multiple fields. Features centered title and description with TextBox animations, optional tag with icon. Below text is a flexible WaitlistForm component that accepts any number of configurable input fields via the fields array. Fields are arranged horizontally on desktop, stacked on mobile. Full-width submit button below inputs. Form uses w-full md:w-40 container width. Includes onSubmit callback that returns all field data as a key-value object. Form has built-in validation for required fields. Default fields are email and username, but can be customized to collect any data (name, company, phone, etc.).",
+        "constraints": {
+          "textRules": {
+            "title": {
+              "required": true,
+              "example": "Join the Waitlist",
+              "minChars": 2,
+              "maxChars": 40
+            },
+            "description": {
+              "required": true,
+              "example": "Be the first to know when we launch",
+              "minChars": 5,
+              "maxChars": 200
+            },
+            "tag": {
+              "required": false,
+              "example": "Coming Soon",
+              "minChars": 2,
+              "maxChars": 30
+            },
+            "buttonText": {
+              "required": false,
+              "example": "Join waitlist",
+              "default": "Join waitlist",
+              "minChars": 2,
+              "maxChars": 30
+            }
+          },
+          "fieldsRules": {
+            "required": false,
+            "default": "[{ name: 'email', type: 'email', placeholder: 'Your email', ariaLabel: 'Email address', required: true }, { name: 'username', type: 'text', placeholder: 'Telegram username', ariaLabel: 'Username', required: true }]",
+            "structure": {
+              "name": "string - Field identifier used as key in onSubmit data (required)",
+              "type": "string - HTML input type: 'text', 'email', 'tel', etc. (optional, default: 'text')",
+              "placeholder": "string - Placeholder text displayed in input (optional)",
+              "ariaLabel": "string - Accessibility label (optional, defaults to placeholder)",
+              "required": "boolean - Whether field is required (optional, default: true)"
+            },
+            "examples": [
+              "{ name: 'email', type: 'email', placeholder: 'Your email', required: true }",
+              "{ name: 'company', type: 'text', placeholder: 'Company name' }",
+              "{ name: 'phone', type: 'tel', placeholder: 'Phone number', required: false }"
+            ],
+            "note": "Fields array is optional. Defaults to email and username fields. Can be customized to collect any data. onSubmit returns object with field names as keys."
+          }
+        },
+        "propsSchema": {
+          "title": "string",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "fields?": "FormField[] - Array of { name: string, type?: string, placeholder?: string, ariaLabel?: string, required?: boolean }. Default: [email, username] fields",
+          "buttonText?": "string (default: 'Join waitlist')",
+          "onSubmit?": "(data: Record<string, string>) => void - Receives object with field names as keys",
+          "ariaLabel?": "string (default: 'Hero section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "textBoxClassName?": "string",
+          "titleClassName?": "string",
+          "descriptionClassName?": "string",
+          "tagClassName?": "string",
+          "formClassName?": "string",
+          "inputsContainerClassName?": "string",
+          "inputClassName?": "string",
+          "buttonClassName?": "string",
+          "buttonTextClassName?": "string"
+        },
+        "usage": "<ThemeProvider defaultButtonVariant=\"hover-magnetic\" defaultTextAnimation=\"reveal-blur\" borderRadius=\"rounded\">\n  <HeroWaitlist \n    title=\"Join the Waitlist\" \n    description=\"Be the first to know when we launch\" \n    tag=\"Coming Soon\" \n    tagIcon={Users}\n    fields={[\n      { name: 'email', type: 'email', placeholder: 'Your email', ariaLabel: 'Email address', required: true },\n      { name: 'username', type: 'text', placeholder: 'Telegram username', ariaLabel: 'Username', required: true }\n    ]}\n    buttonText=\"Join waitlist\"\n    onSubmit={(data) => console.log('Waitlist:', data)}\n  />\n</ThemeProvider>"
+      },
+      {
+        "import": "import HeroMetrics from '@/components/sections/hero/HeroMetrics';",
+        "name": "HeroMetrics",
+        "path": "@/components/sections/hero/HeroMetrics",
+        "description": "Full-viewport hero with centered text and KPI metrics at bottom. Ideal for SaaS/startup landing pages showcasing key statistics.",
+        "details": "Use for landing pages that need to highlight company metrics, user statistics, or key performance indicators. Features centered title, description, optional tag with icon, and action buttons. Bottom section displays metrics with label text on left and 2-3 metric cards on right in responsive grid. Layout uses flexbox with equal spacing top and bottom of TextBox. Metrics grid adapts: 2 items = 2 cols, 3 items = 3 cols (third item spans full width on mobile). Border-top separates metrics from content.",
+        "constraints": {
+          "textRules": {
+            "title": {
+              "required": true,
+              "example": "Run your startup in the cloud, effortlessly",
+              "minChars": 5,
+              "maxChars": 80
+            },
+            "description": {
+              "required": true,
+              "example": "Comprehensive platform for initiating, growing, and overseeing contemporary startups",
+              "minChars": 10,
+              "maxChars": 200
+            },
+            "tag": {
+              "required": false,
+              "example": "Secure & VC-trusted platform",
+              "minChars": 2,
+              "maxChars": 40
+            },
+            "metricsLabel": {
+              "required": true,
+              "example": "Trusted by forward-thinking VCs, accelerators, and early-stage startups",
+              "minChars": 10,
+              "maxChars": 150
+            }
+          },
+          "metricRules": {
+            "required": true,
+            "minItems": 2,
+            "maxItems": 3,
+            "structure": {
+              "id": "string - Unique identifier (required)",
+              "value": "string - Metric value like '200+', '12k+' (required)",
+              "label": "string - Metric description (required)"
+            },
+            "examples": [
+              "{ id: '1', value: '200+', label: 'Founders Onboarded' }",
+              "{ id: '2', value: '12k+', label: 'Investors Connected' }"
+            ],
+            "note": "Grid layout: 2 items = 2 columns, 3 items = 3 columns (third item full width on mobile). Each metric displays in a card."
+          },
+          "buttonRules": {
+            "maxButtons": 2,
+            "structure": {
+              "text": "string - Button label (required)",
+              "href": "string - Link destination (optional)",
+              "onClick": "() => void - Click handler (optional)"
+            },
+            "note": "Button variant controlled by ThemeProvider's defaultButtonVariant."
+          }
+        },
+        "propsSchema": {
+          "title": "string",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "metricsLabel": "string",
+          "metrics": "Metric[] - Array of { id: string, value: string, label: string }",
+          "ariaLabel?": "string (default: 'Hero section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "textBoxClassName?": "string",
+          "titleClassName?": "string",
+          "descriptionClassName?": "string",
+          "tagClassName?": "string",
+          "buttonContainerClassName?": "string",
+          "buttonClassName?": "string",
+          "buttonTextClassName?": "string",
+          "metricsContainerClassName?": "string",
+          "metricsLabelClassName?": "string",
+          "metricsGridClassName?": "string",
+          "metricClassName?": "string",
+          "metricValueClassName?": "string",
+          "metricLabelClassName?": "string"
+        },
+        "usage": "<HeroMetrics title=\"Run your startup in the cloud\" description=\"Comprehensive platform for startups\" tag=\"Secure & VC-trusted\" metricsLabel=\"Trusted by forward-thinking VCs\" metrics={[{ id: '1', value: '200+', label: 'Founders Onboarded' }, { id: '2', value: '12k+', label: 'Investors Connected' }]} buttons={[{ text: 'Start for free', href: '#' }]} />"
+      },
+      {
+        "import": "import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';",
+        "name": "HeroBillboardRotatedCarousel",
+        "path": "@/components/sections/hero/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)",
+              "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",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "carouselItems": "CarouselItem[] - Array of { id: string, imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string } (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"
+        },
+        "usage": "<ThemeProvider defaultButtonVariant=\"hover-bubble\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"pill\">\n  <HeroBillboardRotatedCarousel \n    title=\"Transform Your Workflow\" \n    description=\"Experience seamless collaboration and productivity\" \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>"
+      }
+    ],
+    "about": [
+      {
+        "import": "import SplitAbout from '@/components/sections/about/SplitAbout';",
+        "name": "SplitAbout",
+        "path": "@/components/sections/about/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"
+            },
+            "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?": "TitleSegment[] - Array of { type: 'text', content: string } | { type: 'image', src: string, alt?: string } for inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "bulletPoints": "Array<{ title: string, description: string, icon?: LucideIcon }>",
+          "imageSrc?": "string",
+          "videoSrc?": "string",
+          "imageAlt?": "string (default: '')",
+          "videoAriaLabel?": "string (default: 'About section video')",
+          "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": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "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"
+        },
+        "usage": "// 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={\"noInvert\"} bulletPoints={[{ title: 'Innovation', description: 'We push boundaries', icon: Lightbulb }, { title: 'Quality', description: 'Excellence in every detail' }]} imageSrc=\"/about.jpg\" />\n</ThemeProvider>"
+      },
+      {
+        "import": "import TextSplitAbout from '@/components/sections/about/TextSplitAbout';",
+        "name": "TextSplitAbout",
+        "path": "@/components/sections/about/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>> }>",
+          "showBorder?": "boolean (default: false)",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "ariaLabel?": "string (default: 'About section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "titleClassName?": "string",
+          "descriptionClassName?": "string",
+          "buttonContainerClassName?": "string",
+          "buttonClassName?": "string",
+          "buttonTextClassName?": "string"
+        },
+        "usage": "// 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={\"noInvert\"} buttons={[{ text: 'Learn More', href: 'about' }]} />\n</ThemeProvider>"
+      },
+      {
+        "import": "import TextAbout from '@/components/sections/about/TextAbout';",
+        "name": "TextAbout",
+        "path": "@/components/sections/about/TextAbout",
+        "description": "Centered about section with large animated text and optional buttons below.",
+        "details": "Use for simple, impactful about statements. Features 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": 200
+            }
+          },
+          "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",
+          "buttons?": "Array<{ text: string, onClick?: () => void, href?: string, props?: Partial<ButtonPropsForVariant<CTAButtonVariant>> }>",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "ariaLabel?": "string (default: 'About section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "titleClassName?": "string",
+          "buttonContainerClassName?": "string",
+          "buttonClassName?": "string",
+          "buttonTextClassName?": "string"
+        },
+        "usage": "// Wrap in ThemeProvider\n<ThemeProvider defaultButtonVariant=\"icon-arrow\" defaultTextAnimation=\"reveal-blur\" borderRadius=\"soft\" background=\"aurora\" cardStyle=\"glass-elevated\" primaryButtonStyle=\"gradient\" secondaryButtonStyle=\"glass\">\n  <TextAbout title=\"We create exceptional digital experiences\" useInvertedBackground={\"noInvert\"} buttons={[{ text: 'Get Started', href: 'https://example.com' }, { text: 'Learn More', href: 'about' }]} />\n</ThemeProvider>"
+      },
+      {
+        "import": "import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';",
+        "name": "InlineImageSplitTextAbout",
+        "path": "@/components/sections/about/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>> }>",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "ariaLabel?": "string (default: 'About section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "headingClassName?": "string",
+          "imageWrapperClassName?": "string",
+          "imageClassName?": "string",
+          "buttonContainerClassName?": "string",
+          "buttonClassName?": "string",
+          "buttonTextClassName?": "string"
+        },
+        "usage": "// 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={\"noInvert\"} buttons={[{ text: 'Get Started', href: '/signup' }, { text: 'Learn More', href: '/about' }]} />\n</ThemeProvider>"
+      },
+      {
+        "import": "import AboutMetric from '@/components/sections/about/AboutMetric';",
+        "name": "AboutMetric",
+        "path": "@/components/sections/about/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 }>",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "ariaLabel?": "string (default: 'About metrics section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "titleClassName?": "string",
+          "metricsContainerClassName?": "string",
+          "metricCardClassName?": "string",
+          "metricIconClassName?": "string",
+          "metricLabelClassName?": "string",
+          "metricValueClassName?": "string"
+        },
+        "usage": "// 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={\"noInvert\"}\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>"
+      },
+      {
+        "import": "import AboutFeature from '@/components/sections/about/AboutFeature';",
+        "name": "AboutFeature",
+        "path": "@/components/sections/about/AboutFeature",
+        "description": "About section with centered animated title and feature cards in a responsive grid.",
+        "details": "Use for showcasing company features, values, or services 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 feature cards in a responsive grid (1 column mobile, 2-4 columns desktop based on feature count). Each card includes an icon in a primary-button styled container at the top, feature title (h3), and description below. Cards have fixed responsive heights (h-50 on mobile, md:h-60, 2xl:h-70), rounded-theme-capped borders, and card styling. Perfect for highlighting key features, core values, or service offerings.",
+        "constraints": {
+          "textRules": {
+            "title": {
+              "required": true,
+              "example": "We believe in creating experiences that inspire, empower, and transform. Our team is dedicated to building solutions that make a real difference.",
+              "minChars": 20,
+              "maxChars": 300
+            }
+          },
+          "featureRules": {
+            "minFeatures": 2,
+            "maxFeatures": 4,
+            "structure": {
+              "icon": "LucideIcon - Icon component from lucide-react (required)",
+              "title": "string - Feature title/heading (required, e.g., 'Innovation First', 'Team Collaboration')",
+              "description": "string - Feature description explaining the benefit or value (required)"
+            },
+            "note": "Provide 2-4 features for optimal layout. Grid automatically adjusts columns based on feature count (2 features = 2 cols, 3 features = 3 cols, 4 features = 4 cols). Import icons from lucide-react."
+          }
+        },
+        "propsSchema": {
+          "title": "string",
+          "features": "Array<{ icon: LucideIcon, title: string, description: string }>",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "ariaLabel?": "string (default: 'About features section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "titleClassName?": "string",
+          "featuresContainerClassName?": "string",
+          "featureCardClassName?": "string",
+          "featureIconContainerClassName?": "string",
+          "featureIconClassName?": "string",
+          "featureTitleClassName?": "string",
+          "featureDescriptionClassName?": "string"
+        },
+        "usage": "// Wrap in ThemeProvider\nimport { Rocket, Users, Target, Sparkles } from 'lucide-react';\n\n<ThemeProvider defaultButtonVariant=\"text-stagger\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"rounded\" contentWidth=\"medium\" sizing=\"medium\" background=\"aurora\" cardStyle=\"glass-elevated\" primaryButtonStyle=\"gradient\" secondaryButtonStyle=\"glass\">\n  <AboutFeature \n    title=\"We believe in creating experiences that inspire, empower, and transform. Our team is dedicated to building solutions that make a real difference.\" \n    useInvertedBackground={\"noInvert\"}\n    features={[\n      { icon: Rocket, title: 'Innovation First', description: 'We push boundaries and embrace cutting-edge technologies to deliver exceptional results that exceed expectations.' },\n      { icon: Users, title: 'Team Collaboration', description: 'Our diverse team works together seamlessly to bring your vision to life with expertise and dedication.' },\n      { icon: Target, title: 'Goal Oriented', description: 'We focus on measurable outcomes and strategic objectives to ensure your success and growth.' },\n      { icon: Sparkles, title: 'Quality Driven', description: 'Every detail matters. We maintain the highest standards in everything we create and deliver.' }\n    ]} \n  />\n</ThemeProvider>"
+      },
+      {
+        "import": "import SplitAboutMetric from '@/components/sections/about/SplitAboutMetric';",
+        "name": "SplitAboutMetric",
+        "path": "@/components/sections/about/SplitAboutMetric",
+        "description": "Split-layout about section with title on left, description and metrics on right.",
+        "details": "Use for showcasing company metrics in a professional split layout. Features large animated title (7xl) on the left column (50% width), and description text with metrics on the right column (50% width). Description uses large text (base on mobile, 2xl on desktop) with theme's default text animation. Divider separates description from metrics. Exactly 2 metrics displayed in a grid with large centered values (9xl) and labels below. Values and labels use truncate for single-line display. Follows TextSplitAbout pattern for consistent split-section layouts. Optional bottom border with showBorder prop.",
+        "constraints": {
+          "textRules": {
+            "title": {
+              "required": true,
+              "example": "A Legacy Of Timeless Elegance",
+              "minChars": 10,
+              "maxChars": 100
+            },
+            "description": {
+              "required": true,
+              "example": "Shivalik developers are on a quest to build a legacy of timeless elegance.",
+              "minChars": 50,
+              "maxChars": 400,
+              "note": "Array of description strings. Each string is rendered with text animation."
+            }
+          },
+          "metricRules": {
+            "exactMetrics": 2,
+            "structure": {
+              "label": "string - Descriptive label for the metric (required, single line, uses truncate)",
+              "value": "string - Metric value to display (required, single line, uses truncate, e.g., '75+', '15M+')"
+            },
+            "note": "Must provide exactly 2 metrics. Values and labels are displayed centered with truncate to ensure single-line display. No icons supported."
+          }
+        },
+        "propsSchema": {
+          "title": "string",
+          "description": "string[]",
+          "metrics": "[{ label: string, value: string }, { label: string, value: string }]",
+          "showBorder?": "boolean (default: false)",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "ariaLabel?": "string (default: 'About metrics section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "titleClassName?": "string",
+          "descriptionClassName?": "string",
+          "metricsContainerClassName?": "string",
+          "metricClassName?": "string",
+          "metricValueClassName?": "string",
+          "metricLabelClassName?": "string"
+        },
+        "usage": "// Wrap in ThemeProvider\n\n<ThemeProvider defaultButtonVariant=\"text-stagger\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"rounded\" contentWidth=\"medium\" sizing=\"medium\" background=\"aurora\" cardStyle=\"glass-elevated\" primaryButtonStyle=\"gradient\" secondaryButtonStyle=\"glass\">\n  <SplitAboutMetric \n    title=\"A Legacy Of Timeless Elegance\" \n    useInvertedBackground={\"noInvert\"}\n    description={[\n      \"Shivalik developers are on a quest to build a legacy of timeless elegance. Pioneering the skyline of the city already, they are steadily conquering the state of Gujarat on the front of luxurious Residential & Commercial Spaces.\"\n    ]} \n    metrics={[\n      { label: 'Various types of landmarks built', value: '75+' },\n      { label: 'Sq.ft area', value: '15M+' }\n    ]} \n  />\n</ThemeProvider>"
+      },
+      {
+        "import": "import SplitAboutFeatures from '@/components/sections/about/SplitAboutFeatures';",
+        "name": "SplitAboutFeatures",
+        "path": "@/components/sections/about/SplitAboutFeatures",
+        "description": "Split-layout about section with title on left, flexible 2-column grid of icon-based feature cards on right.",
+        "details": "Use for highlighting key features or benefits in about sections. Layout: Title on left (w-1/2, text-7xl) \u2192 2-column Grid of Feature Cards on right (w-1/2, grid-cols-2, gap-6). Each feature card has card styling with rounded-theme-capped, displays icon in primary-button square container (h-8, aspect-square, rounded-theme), and feature text (p-8 padding). Icon container uses h-45/100 w-45/100 sizing with text-background color. Text uses shouldUseInvertedText logic. Supports flexible array of 2-8 features - when odd count (3, 5, 7), last item spans full width (col-span-2). Optional bottom border. Best for showcasing company values, product benefits, or service highlights with visual icons.",
+        "constraints": {
+          "textRules": {
+            "title": {
+              "required": true,
+              "example": "About",
+              "minChars": 2,
+              "maxChars": 100
+            }
+          },
+          "featureRules": {
+            "minFeatures": 2,
+            "maxFeatures": 8,
+            "recommendedFeatures": "4-6",
+            "structure": {
+              "text": "string - Feature description text (required)",
+              "icon": "LucideIcon - Icon component from lucide-react (required)"
+            },
+            "note": "Flexible array of 2-8 features. Grid is 2 columns - odd counts (3, 5, 7) make last item span full width. Each card has icon in primary-button container and text with leading-tight."
+          }
+        },
+        "propsSchema": {
+          "title": "string",
+          "features": "Array<{ text: string, icon: LucideIcon }> (2-8 items)",
+          "showBorder?": "boolean (default: false)",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "ariaLabel?": "string (default: 'About features section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "titleClassName?": "string",
+          "featuresContainerClassName?": "string",
+          "featureClassName?": "string",
+          "featureIconClassName?": "string",
+          "featureTextClassName?": "string"
+        },
+        "usage": "<SplitAboutFeatures title=\"About\" features={[{ text: 'Lightning-fast performance that scales with your needs', icon: Zap }, { text: 'Enterprise-grade security protecting your data', icon: Shield }, { text: 'Built for teams of all sizes and structures', icon: Users }, { text: 'Focused on achieving your business goals', icon: Target }]} useInvertedBackground={\"noInvert\"} />"
+      },
+      {
+        "import": "import TagAbout from '@/components/sections/about/TagAbout';",
+        "name": "TagAbout",
+        "path": "@/components/sections/about/TagAbout",
+        "description": "About section with inline tag label and large animated description text.",
+        "details": "Use for showcasing company statements, mission, or values with a category label. Features a small inline tag label (base on mobile, xl on desktop) followed by large animated description text (2xl on mobile, 5xl on desktop) that flows inline. Tag uses accent color with reduced opacity. Description uses theme's default text animation with words-trigger variant. Both tag and description flow inline, creating a cohesive visual statement. Perfect for 'Why us', 'Our mission', 'About us' sections with categorized content.",
+        "constraints": {
+          "textRules": {
+            "tag": {
+              "required": true,
+              "example": "Why us",
+              "minChars": 2,
+              "maxChars": 20,
+              "note": "Short category label (e.g., 'Why us', 'Our mission', 'About')"
+            },
+            "description": {
+              "required": true,
+              "example": "At DialedWeb, we embody the startup mindset \u2014 dynamic, innovative, and hungry to make a difference.",
+              "minChars": 50,
+              "maxChars": 500,
+              "note": "Main description text that flows inline after the tag"
+            }
+          }
+        },
+        "propsSchema": {
+          "tag": "string",
+          "description": "string",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "ariaLabel?": "string (default: 'About section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "tagClassName?": "string",
+          "descriptionClassName?": "string"
+        },
+        "usage": "// Wrap in ThemeProvider\n\n<ThemeProvider defaultButtonVariant=\"text-stagger\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"rounded\" contentWidth=\"medium\" sizing=\"medium\" background=\"aurora\" cardStyle=\"glass-elevated\" primaryButtonStyle=\"gradient\" secondaryButtonStyle=\"glass\">\n  <TagAbout \n    tag=\"Why us\" \n    description=\"At DialedWeb, we embody the startup mindset \u2014 dynamic, innovative, and hungry to make a difference. We don't just create amazing works; we partner with our clients to revolutionize their industries through groundbreaking digital experiences.\" \n    useInvertedBackground={\"noInvert\"}\n  />\n</ThemeProvider>"
+      },
+      {
+        "import": "import AboutPhoneTimeline from '@/components/sections/about/AboutPhoneTimeline';",
+        "name": "AboutPhoneTimeline",
+        "path": "@/components/sections/about/AboutPhoneTimeline",
+        "description": "About section with dual phone mockups featuring scroll-triggered animations and centered content.",
+        "details": "Use for showcasing mobile app features or product previews in about sections. Features dual phone frames (left and right) that animate on scroll using GSAP ScrollTrigger, with centered content area containing tag, animated title, description, and optional buttons. On desktop, phones are sticky while content scrolls, creating an immersive parallax effect. On mobile, layout stacks vertically with content above phone mockups. Content uses theme's default text animations with trigger variant for scroll-based reveals. Perfect for 'About us', 'Our mission', or 'What we do' sections highlighting mobile-first products or apps.",
+        "constraints": {
+          "textRules": {
+            "title": {
+              "required": true,
+              "example": "Our Mission",
+              "minChars": 2,
+              "maxChars": 50
+            },
+            "description": {
+              "required": true,
+              "example": "We believe in creating experiences that inspire, empower, and transform.",
+              "minChars": 10,
+              "maxChars": 300
+            },
+            "tag": {
+              "required": true,
+              "example": "About Us",
+              "minChars": 2,
+              "maxChars": 30,
+              "note": "Tag is required for this component"
+            }
+          },
+          "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."
+          },
+          "phoneMediaRules": {
+            "phoneOne": {
+              "required": true,
+              "structure": "({ imageSrc: string, imageAlt?: string } | { videoSrc: string, videoAriaLabel?: string })",
+              "note": "Each phone requires either imageSrc OR videoSrc (discriminated union). Use imageSrc for static mockups, videoSrc for animated demos."
+            },
+            "phoneTwo": {
+              "required": true,
+              "structure": "({ imageSrc: string, imageAlt?: string } | { videoSrc: string, videoAriaLabel?: string })",
+              "note": "Each phone requires either imageSrc OR videoSrc (discriminated union). Use imageSrc for static mockups, videoSrc for animated demos."
+            },
+            "imageAlt": {
+              "required": false,
+              "example": "App screenshot showing dashboard",
+              "note": "Defaults to '{title} - Image 1/2' if not provided"
+            },
+            "videoAriaLabel": {
+              "required": false,
+              "example": "App demo video showing onboarding flow",
+              "note": "Defaults to '{title} - Video 1/2' if not provided"
+            }
+          }
+        },
+        "propsSchema": {
+          "title": "string",
+          "titleSegments?": "TitleSegment[] - Array for inline images in title",
+          "description": "string",
+          "tag": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required)",
+          "phoneOne": "({ imageSrc: string, imageAlt?: string } | { videoSrc: string, videoAriaLabel?: string })",
+          "phoneTwo": "({ imageSrc: string, imageAlt?: string } | { videoSrc: string, videoAriaLabel?: string })",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "ariaLabel?": "string (default: 'About section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "desktopContainerClassName?": "string",
+          "mobileContainerClassName?": "string",
+          "desktopContentClassName?": "string",
+          "desktopWrapperClassName?": "string",
+          "mobileWrapperClassName?": "string",
+          "phoneFrameClassName?": "string",
+          "mobilePhoneFrameClassName?": "string",
+          "contentClassName?": "string",
+          "tagClassName?": "string",
+          "titleClassName?": "string",
+          "titleImageWrapperClassName?": "string",
+          "titleImageClassName?": "string",
+          "descriptionClassName?": "string",
+          "buttonContainerClassName?": "string",
+          "buttonClassName?": "string",
+          "buttonTextClassName?": "string"
+        },
+        "usage": "// Wrap in ThemeProvider with smooth scrolling (ReactLenis)\n<ThemeProvider defaultButtonVariant=\"icon-arrow\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"pill\" contentWidth=\"medium\" sizing=\"medium\" background=\"aurora\" cardStyle=\"layered-gradient\" primaryButtonStyle=\"gradient\" secondaryButtonStyle=\"glass\">\n  <ReactLenis root>\n    <AboutPhoneTimeline \n      tag=\"About Us\" \n      title=\"Our Mission\" \n      description=\"We believe in creating experiences that inspire, empower, and transform. Our team is dedicated to building solutions that make a real difference in people's lives.\" \n      phoneOne={{ imageSrc: '/app-screenshot-1.jpg', imageAlt: 'Dashboard view' }} \n      phoneTwo={{ videoSrc: '/app-demo.mp4', videoAriaLabel: 'Product demo video' }} \n      textboxLayout=\"default\" \n      buttons={[{ text: 'Learn More', href: '/about' }, { text: 'Get Started', href: '/signup' }]} \n      useInvertedBackground={\"noInvert\"} \n    />\n  </ReactLenis>\n</ThemeProvider>"
+      },
+      {
+        "import": "import MediaAbout from '@/components/sections/about/MediaAbout';",
+        "name": "MediaAbout",
+        "path": "@/components/sections/about/MediaAbout",
+        "description": "Full-width media about section with centered CTA button(s) overlaid on image or video.",
+        "details": "Use for impactful visual-first about sections where the media is the primary focus with minimal text. Features full-width media (image or video) in aspect-video ratio with content-width constraint, rounded corners (theme-capped), and 1-2 centered CTA buttons overlaid using absolute positioning. Buttons follow primary/secondary styling based on index (first button = primary, second = secondary) via getButtonProps utility. 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 (not affecting overlay buttons).",
+        "constraints": {
+          "textRules": {},
+          "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,
+            "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 are centered and overlaid on media. First button is primary, second is secondary. Button variant controlled by ThemeProvider's defaultButtonVariant."
+          }
+        },
+        "propsSchema": {
+          "imageSrc?": "string",
+          "videoSrc?": "string",
+          "imageAlt?": "string",
+          "videoAriaLabel?": "string",
+          "buttons?": "ButtonConfig[]",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "ariaLabel?": "string (default: 'About section')",
+          "className?": "string",
+          "mediaWrapperClassName?": "string",
+          "mediaClassName?": "string",
+          "buttonContainerClassName?": "string",
+          "buttonClassName?": "string",
+          "buttonTextClassName?": "string"
+        },
+        "usage": "<MediaAbout imageSrc=\"/about-hero.jpg\" imageAlt=\"Our team\" buttons={[{ text: 'Shop Now', href: '/shop' }]} useInvertedBackground={\"noInvert\"} />"
+      },
+      {
+        "import": "import ParallaxAbout from '@/components/sections/about/ParallaxAbout';",
+        "name": "ParallaxAbout",
+        "path": "@/components/sections/about/ParallaxAbout",
+        "description": "Full-width parallax about section with fixed media background and centered CTA button(s) using clip-path reveal effect.",
+        "details": "Use for immersive, full-bleed parallax experiences where the media stays fixed while content scrolls over it. Features fixed positioning with clip-path polygon to contain the parallax effect within the section bounds. Media (image or video) is fixed to viewport and stays in place during scroll, creating a dramatic parallax effect. Section height is h-svh (screen viewport height). Buttons are positioned relatively with z-10, centered vertically and horizontally. Supports 1-2 CTA buttons following primary/secondary styling pattern via getButtonProps. Perfect for impactful hero-like about sections, brand showcases, or immersive storytelling moments. The clip-path technique ensures the fixed background only appears within the section boundaries, not bleeding into other content. Media has rounded-none! to override theme border radius for full-bleed effect.",
+        "constraints": {
+          "textRules": {},
+          "mediaRules": {
+            "imageSrc": {
+              "required": false,
+              "example": "/parallax-hero.jpg",
+              "note": "Either imageSrc or videoSrc should be provided. Image recommended for static parallax backgrounds."
+            },
+            "videoSrc": {
+              "required": false,
+              "example": "/background-video.mp4",
+              "note": "Either imageSrc or videoSrc should be provided. Video creates dynamic parallax motion."
+            },
+            "imageAlt": {
+              "required": false,
+              "example": "Brand background",
+              "note": "Alt text for image. Defaults to empty string (decorative background)."
+            },
+            "videoAriaLabel": {
+              "required": false,
+              "example": "Brand background video",
+              "note": "ARIA label for video accessibility."
+            }
+          },
+          "buttonRules": {
+            "maxButtons": 2,
+            "minButtons": 0,
+            "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 are centered with z-10 positioning over parallax background. First button is primary, second is secondary. Button variant controlled by ThemeProvider's defaultButtonVariant."
+          },
+          "technicalNotes": {
+            "parallaxTechnique": "Uses fixed positioning with clip-path: polygon(0% 0, 100% 0%, 100% 100%, 0 100%) to create contained parallax effect",
+            "height": "Section is h-svh (100svh) for full screen viewport height",
+            "zIndex": "Section is z-0, buttons are z-10 to appear above fixed background",
+            "scrollBehavior": "Fixed media stays in place while page scrolls, buttons scroll normally"
+          }
+        },
+        "propsSchema": {
+          "imageSrc?": "string",
+          "videoSrc?": "string",
+          "imageAlt?": "string",
+          "videoAriaLabel?": "string",
+          "buttons?": "ButtonConfig[]",
+          "ariaLabel?": "string (default: 'About section')",
+          "className?": "string",
+          "mediaClassName?": "string",
+          "buttonContainerClassName?": "string",
+          "buttonClassName?": "string",
+          "buttonTextClassName?": "string"
+        },
+        "usage": "<ParallaxAbout imageSrc=\"/parallax-hero.jpg\" imageAlt=\"Brand background\" buttons={[{ text: 'Discover More', href: '/about' }]} />"
+      },
+      {
+        "import": "import MediaSplitAbout from '@/components/sections/about/MediaSplitAbout';",
+        "name": "MediaSplitAbout",
+        "path": "@/components/sections/about/MediaSplitAbout",
+        "description": "Split-layout about section with text card on one side and media card on the other in 50/50 grid.",
+        "details": "Use for about sections where text content and visual media deserve equal emphasis. Features responsive 50/50 grid layout (stacked on mobile). Content card contains title (4xl-5xl), description (base-lg), and optional CTA buttons at bottom using flex justify-between. Media card contains image or video with card styling and rounded corners. Image position is configurable (left or right, default: right). Both cards have card styling with theme border radius. Text colors adapt based on useInvertedBackground and cardStyle using shouldUseInvertedText utility. Supports 1-2 CTA buttons following primary/secondary pattern. Perfect for 'About us', 'Our story', 'Team intro' sections where you want balanced text and visual content with clear call-to-action. Grid uses gap-6 between cards and w-content-width constraint.",
+        "constraints": {
+          "textRules": {
+            "title": {
+              "required": true,
+              "example": "Worldwide Team",
+              "minChars": 2,
+              "maxChars": 50
+            },
+            "description": {
+              "required": true,
+              "example": "We're a global team of designers and craftspeople dedicated to creating timeless pieces that blend style with functionality.",
+              "minChars": 10,
+              "maxChars": 500
+            }
+          },
+          "mediaRules": {
+            "imageSrc": {
+              "required": false,
+              "example": "/team-photo.jpg",
+              "note": "Either imageSrc or videoSrc should be provided for optimal display."
+            },
+            "videoSrc": {
+              "required": false,
+              "example": "/team-video.mp4",
+              "note": "Either imageSrc or videoSrc should be provided for optimal display."
+            },
+            "imageAlt": {
+              "required": false,
+              "example": "Team collaboration",
+              "note": "Alt text for image."
+            },
+            "videoAriaLabel": {
+              "required": false,
+              "example": "Team introduction video",
+              "note": "ARIA label for video accessibility."
+            },
+            "imagePosition": {
+              "required": false,
+              "default": "right",
+              "options": [
+                "left",
+                "right"
+              ],
+              "note": "Position of media card relative to content card."
+            }
+          },
+          "buttonRules": {
+            "maxButtons": 2,
+            "minButtons": 0,
+            "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 appear at bottom of content card. First button is primary, second is secondary. Button variant controlled by ThemeProvider's defaultButtonVariant."
+          }
+        },
+        "propsSchema": {
+          "title": "string",
+          "description": "string",
+          "imageSrc?": "string",
+          "videoSrc?": "string",
+          "imageAlt?": "string",
+          "videoAriaLabel?": "string",
+          "buttons?": "ButtonConfig[]",
+          "imagePosition?": "'left' | 'right' (default: 'right')",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "ariaLabel?": "string (default: 'About section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "contentCardClassName?": "string",
+          "titleClassName?": "string",
+          "descriptionClassName?": "string",
+          "buttonContainerClassName?": "string",
+          "buttonClassName?": "string",
+          "buttonTextClassName?": "string",
+          "mediaCardClassName?": "string",
+          "mediaClassName?": "string"
+        },
+        "usage": "<MediaSplitAbout title=\"Worldwide Team\" description=\"We're a global team of designers and craftspeople dedicated to creating timeless pieces.\" imageSrc=\"/team-photo.jpg\" imageAlt=\"Our team\" buttons={[{ text: 'Shop Now', href: '/shop' }]} imagePosition=\"right\" useInvertedBackground={\"noInvert\"} />"
+      },
+      {
+        "import": "import MediaGridAbout from '@/components/sections/about/MediaGridAbout';",
+        "name": "MediaGridAbout",
+        "path": "@/components/sections/about/MediaGridAbout",
+        "description": "Split-layout about section with text card on one side and media grid card on the other in 50/50 grid.",
+        "details": "Use for showcasing multiple images/videos alongside descriptive content. Layout: 50/50 grid with content card (title + description) and media grid card. Media grid supports 1-6 items with responsive layouts: 1-2 items use single column, 3-6 items use 2-column grid. For 3 or 5 items, the last item spans full width (col-span-2). Media position is configurable (left or right, default: right). Both cards use card styling with rounded-theme-capped. Content card has p-6 md:p-10 padding with flex column layout. Media card has p-6 padding with gap-6 grid. Text colors adapt using shouldUseInvertedText based on useInvertedBackground and cardStyle. Recommended to use 6 media items for best visual balance. Perfect for team showcases, portfolio grids, product galleries, or visual storytelling sections.",
+        "constraints": {
+          "textRules": {
+            "title": {
+              "required": true,
+              "example": "We're a global team of designers and craftspeople",
+              "minChars": 10,
+              "maxChars": 150
+            },
+            "description": {
+              "required": true,
+              "example": "Our approach combines traditional techniques with modern aesthetics to deliver products that stand the test of time.",
+              "minChars": 50,
+              "maxChars": 500
+            }
+          },
+          "mediaRules": {
+            "minItems": 1,
+            "maxItems": 6,
+            "recommendedItems": 6,
+            "structure": {
+              "imageSrc": "string - Image source path (optional if videoSrc provided)",
+              "videoSrc": "string - Video source path (optional if imageSrc provided)",
+              "imageAlt": "string - Alt text for image (optional)",
+              "videoAriaLabel": "string - Aria label for video (optional)"
+            },
+            "layoutBehavior": {
+              "1-2 items": "Single column (grid-cols-1)",
+              "3-6 items": "Two columns (grid-cols-2)",
+              "3 or 5 items": "Last item spans full width (col-span-2)"
+            },
+            "note": "Use 6 items for optimal visual balance. Each media item is contained with overflow-hidden and absolute positioning for proper aspect ratio handling."
+          }
+        },
+        "propsSchema": {
+          "title": "string",
+          "description": "string",
+          "mediaItems": "MediaItem[] (1-6 items, 6 recommended)",
+          "imagePosition?": "'left' | 'right' (default: 'right')",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "ariaLabel?": "string (default: 'About section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "contentCardClassName?": "string",
+          "titleClassName?": "string",
+          "descriptionClassName?": "string",
+          "mediaCardClassName?": "string",
+          "mediaGridClassName?": "string",
+          "mediaClassName?": "string"
+        },
+        "usage": "<MediaGridAbout title=\"We're a global team of designers and craftspeople\" description=\"Our approach combines traditional techniques with modern aesthetics to deliver products that stand the test of time. We're dedicated to creating timeless pieces that blend style with functionality.\" mediaItems={[{ imageSrc: '/team1.jpg', imageAlt: 'Team collaboration' }, { imageSrc: '/team2.jpg', imageAlt: 'Design process' }, { imageSrc: '/team3.jpg', imageAlt: 'Product showcase' }, { imageSrc: '/team4.jpg', imageAlt: 'Workshop' }, { imageSrc: '/team5.jpg', imageAlt: 'Materials' }, { imageSrc: '/team6.jpg', imageAlt: 'Final product' }]} imagePosition=\"right\" useInvertedBackground=\"noInvert\" />"
+      },
+      {
+        "import": "import SplitAboutCards from '@/components/sections/about/SplitAboutCards';",
+        "name": "SplitAboutCards",
+        "path": "@/components/sections/about/SplitAboutCards",
+        "description": "Split-layout about section with TextBox on left (1/3) and exactly 2 feature cards in grid on right (2/3).",
+        "details": "Use for highlighting key offerings, pricing, or features with prominent labels. Layout: TextBox on left (w-1/3, default layout with optional tag, title, description, buttons) → Fixed 2-card Grid on right (w-2/3, md:grid-cols-2, gap-6). Each card displays title, description, and prominent label text at bottom (e.g., pricing, metric, or key value). Cards use card styling with rounded-theme-capped, p-6 padding, gap-10 between sections. Text colors adapt using shouldUseInvertedText logic. Component enforces exactly 2 feature cards via tuple type. Perfect for service tiers, pricing comparisons, dual feature highlights, or two-option showcases.",
+        "constraints": {
+          "textRules": {
+            "title": {
+              "required": true,
+              "example": "Pricing for tools",
+              "minChars": 2,
+              "maxChars": 100
+            },
+            "description": {
+              "required": true,
+              "example": "Get even more out of Claude with advanced features and capabilities.",
+              "minChars": 10,
+              "maxChars": 300
+            },
+            "tag": {
+              "required": false,
+              "example": "Features",
+              "minChars": 2,
+              "maxChars": 30
+            }
+          },
+          "featureRules": {
+            "count": 2,
+            "structure": {
+              "id": "string - Unique identifier (required)",
+              "title": "string - Feature/card title (required)",
+              "description": "string - Feature description (required)",
+              "label": "string - Prominent bottom label, e.g., pricing or metric (required)"
+            },
+            "note": "Exactly 2 feature cards required. Uses tuple type [FeatureCard, FeatureCard] to enforce this at TypeScript level."
+          },
+          "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",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "features": "[FeatureCard, FeatureCard] (tuple - exactly 2 required)",
+          "buttons?": "ButtonConfig[] (max 2)",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "ariaLabel?": "string (default: 'About section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "textBoxClassName?": "string",
+          "titleClassName?": "string",
+          "descriptionClassName?": "string",
+          "tagClassName?": "string",
+          "buttonContainerClassName?": "string",
+          "buttonClassName?": "string",
+          "buttonTextClassName?": "string",
+          "featuresContainerClassName?": "string",
+          "featureCardClassName?": "string",
+          "featureTitleClassName?": "string",
+          "featureDescriptionClassName?": "string",
+          "featureLabelClassName?": "string"
+        },
+        "usage": "<SplitAboutCards title=\"Pricing for tools\" description=\"Get even more out of Claude with advanced features and capabilities.\" features={[{ id: 'web-search', title: 'Web search', description: 'Give Claude access to the latest information from the web. Doesn\\'t include input and output tokens required to process requests.', label: '$10 / 1K searches' }, { id: 'code-execution', title: 'Code execution', description: 'Run Python code in a sandboxed environment for advanced data analysis. 50 free hours of usage daily per organization.', label: '$0.05 per hour per container' }]} buttons={[{ text: 'Learn more', href: '#' }]} useInvertedBackground={\"noInvert\"} />"
+      },
+      {
+        "import": "import TagMediaSplitAbout from '@/components/sections/about/TagMediaSplitAbout';",
+        "name": "TagMediaSplitAbout",
+        "path": "@/components/sections/about/TagMediaSplitAbout",
+        "description": "Split-layout about section with CardStackTextBox header, Tag component, and card/border variants for content and media.",
+        "details": "Use for about sections with optional header and split content featuring prominent category tags. Layout: CardStackTextBox (optional header with title, description, tag, buttons) → 2-column grid with content card (left/right) and media card. Content card includes Tag component with icon, title (4xl), description (base-lg), and optional CTA buttons. Supports two variants: 'card' (content has card styling with padding) and 'border' (removes card styling, adds vertical/horizontal divider lines). Text colors adapt based on variant: card uses shouldUseLightText, border uses useInvertedBackground directly. Border variant includes responsive dividers (horizontal on mobile, vertical on desktop with 3-column grid). Media position is configurable (left or right, default: right). Perfect for 'About us' sections with categorized content, team introductions with department labels, or service descriptions with visual context. Grid uses gap-6 on mobile, gap-10 on desktop for border variant.",
+        "constraints": {
+          "textRules": {
+            "title": {
+              "required": true,
+              "example": "Our Story",
+              "minChars": 2,
+              "maxChars": 50,
+              "note": "CardStackTextBox header title"
+            },
+            "description": {
+              "required": true,
+              "example": "Building the future of creative excellence",
+              "minChars": 10,
+              "maxChars": 500,
+              "note": "CardStackTextBox header description"
+            },
+            "tag": {
+              "required": false,
+              "example": "About",
+              "minChars": 2,
+              "maxChars": 30,
+              "note": "CardStackTextBox header tag"
+            },
+            "contentTag": {
+              "required": true,
+              "example": "OUR TEAM",
+              "minChars": 2,
+              "maxChars": 30,
+              "note": "Tag component label in content card"
+            },
+            "contentTitle": {
+              "required": true,
+              "example": "Creative experts proven results",
+              "minChars": 5,
+              "maxChars": 100,
+              "note": "Content card main heading"
+            },
+            "contentDescription": {
+              "required": true,
+              "example": "Our team of creative experts is dedicated to delivering innovative solutions that drive measurable results.",
+              "minChars": 10,
+              "maxChars": 500,
+              "note": "Content card description text"
+            }
+          },
+          "variantRules": {
+            "variant": {
+              "required": true,
+              "options": ["card", "border"],
+              "note": "Card: content has card styling. Border: removes card styling, adds divider lines between content and media"
+            }
+          },
+          "mediaRules": {
+            "imageSrc": {
+              "required": false,
+              "example": "/team-photo.jpg",
+              "note": "Either imageSrc or videoSrc should be provided for optimal display."
+            },
+            "videoSrc": {
+              "required": false,
+              "example": "/team-video.mp4",
+              "note": "Either imageSrc or videoSrc should be provided for optimal display."
+            },
+            "imageAlt": {
+              "required": false,
+              "example": "Team collaboration",
+              "note": "Alt text for image."
+            },
+            "videoAriaLabel": {
+              "required": false,
+              "example": "Team introduction video",
+              "note": "ARIA label for video accessibility."
+            },
+            "imagePosition": {
+              "required": false,
+              "default": "right",
+              "options": ["left", "right"],
+              "note": "Position of media card relative to content card."
+            }
+          },
+          "buttonRules": {
+            "maxButtons": 2,
+            "minButtons": 0,
+            "structure": {
+              "text": "string - Button label (required)",
+              "href": "string - Link destination (optional)",
+              "onClick": "() => void - Click handler (optional)",
+              "props": "Partial<ButtonPropsForVariant> - Additional button props (optional)"
+            },
+            "note": "Header buttons appear in CardStackTextBox. Content buttons appear at bottom of content card. Button variant controlled by ThemeProvider's defaultButtonVariant."
+          }
+        },
+        "propsSchema": {
+          "variant": "'card' | 'border' (required) - Card shows content with card styling, border removes card and adds divider lines",
+          "title": "string - CardStackTextBox header title",
+          "titleSegments?": "TitleSegment[] - Array of { type: 'text', content: string } | { type: 'image', src: string, alt?: string } for inline images in title",
+          "description": "string - CardStackTextBox header description",
+          "tag?": "string - CardStackTextBox header tag",
+          "tagIcon?": "LucideIcon - CardStackTextBox header tag icon",
+          "buttons?": "ButtonConfig[] - CardStackTextBox header buttons",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required)",
+          "contentTag": "string - Tag component label in content card",
+          "contentTagIcon?": "LucideIcon - Tag component icon",
+          "contentTitle": "string - Content card main heading",
+          "contentDescription": "string - Content card description",
+          "contentButtons?": "ButtonConfig[] - Content card CTA buttons",
+          "imageSrc?": "string",
+          "videoSrc?": "string",
+          "imageAlt?": "string",
+          "videoAriaLabel?": "string",
+          "imagePosition?": "'left' | 'right' (default: 'right')",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "ariaLabel?": "string (default: 'About section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "textBoxTitleClassName?": "string",
+          "textBoxDescriptionClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string",
+          "titleImageWrapperClassName?": "string",
+          "titleImageClassName?": "string",
+          "contentClassName?": "string",
+          "contentCardClassName?": "string",
+          "contentTagClassName?": "string - For styling the Tag component",
+          "contentTitleClassName?": "string",
+          "contentDescriptionClassName?": "string",
+          "contentButtonContainerClassName?": "string",
+          "contentButtonClassName?": "string",
+          "contentButtonTextClassName?": "string",
+          "mediaCardClassName?": "string",
+          "mediaClassName?": "string"
+        },
+        "usage": "<TagMediaSplitAbout variant=\"card\" title=\"Our Story\" description=\"Building the future of creative excellence\" textboxLayout=\"default\" contentTag=\"OUR TEAM\" contentTagIcon={Sparkles} contentTitle=\"Creative experts proven results\" contentDescription=\"Our team of creative experts is dedicated to delivering innovative solutions.\" contentButtons={[{ text: 'Learn more', href: '#' }]} imageSrc=\"/team-photo.jpg\" imageAlt=\"Team collaboration\" imagePosition=\"right\" useInvertedBackground=\"noInvert\" />"
+      },
+      {
+        "import": "import AboutShowcase from '@/components/sections/about/AboutShowcase';",
+        "name": "AboutShowcase",
+        "path": "@/components/sections/about/AboutShowcase",
+        "description": "3-column showcase about section with side items and large center media.",
+        "details": "Use for visually striking about sections with asymmetric layout. Features 3 columns: left (media top, text card bottom), center (large showcase image/video), right (text card top, media bottom). Includes CardStackTextBox header with all standard layout options. Supports scroll-triggered animations on all elements. Media blocks use theme border radius (capped or uncapped via useCappedBorderRadius prop). Supports three background modes: noInvert (standard), invertDefault (full-width inverted), invertCard (card-style with expanded width and rounded corners).",
+        "constraints": {
+          "textRules": {
+            "title": {
+              "required": true,
+              "example": "Discover Our Story",
+              "minChars": 5,
+              "maxChars": 60
+            },
+            "description": {
+              "required": true,
+              "example": "Building innovative solutions for modern challenges",
+              "minChars": 10,
+              "maxChars": 200
+            },
+            "tag": {
+              "required": false,
+              "example": "About Us",
+              "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."
+          },
+          "showcaseItemRules": {
+            "structure": {
+              "title": "string - Item heading displayed in text card (required)",
+              "imageSrc": "string - Image URL (optional)",
+              "videoSrc": "string - Video URL (optional, takes precedence over imageSrc)",
+              "imageAlt": "string - Alt text for image (optional)",
+              "videoAriaLabel": "string - Aria label for video (optional)"
+            },
+            "note": "Left item: media on top, text on bottom. Right item: text on top, media on bottom."
+          },
+          "mediaRules": {
+            "centerImageSrc": {
+              "required": false,
+              "example": "/showcase-main.jpg",
+              "note": "Large center showcase image"
+            },
+            "centerVideoSrc": {
+              "required": false,
+              "example": "/showcase-video.mp4",
+              "note": "Takes precedence over centerImageSrc if both provided"
+            }
+          }
+        },
+        "propsSchema": {
+          "title": "string",
+          "titleSegments?": "TitleSegment[] - Array of { type: 'text', content: string } | { type: 'image', src: string, alt?: string } for inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "leftItem": "{ title: string, imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }",
+          "rightItem": "{ title: string, imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }",
+          "centerImageSrc?": "string",
+          "centerVideoSrc?": "string",
+          "centerImageAlt?": "string (default: '')",
+          "centerVideoAriaLabel?": "string (default: 'Showcase video')",
+          "ariaLabel?": "string (default: 'About section')",
+          "useCappedBorderRadius": "boolean - true for rounded-theme-capped, false for rounded-theme",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal'",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image'",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "className?": "string",
+          "containerClassName?": "string",
+          "textBoxClassName?": "string",
+          "titleClassName?": "string",
+          "titleImageWrapperClassName?": "string",
+          "titleImageClassName?": "string",
+          "descriptionClassName?": "string",
+          "tagClassName?": "string",
+          "buttonContainerClassName?": "string",
+          "buttonClassName?": "string",
+          "buttonTextClassName?": "string",
+          "contentClassName?": "string",
+          "leftColumnClassName?": "string",
+          "rightColumnClassName?": "string",
+          "centerColumnClassName?": "string",
+          "itemTitleClassName?": "string",
+          "itemMediaWrapperClassName?": "string",
+          "itemImageClassName?": "string",
+          "centerMediaWrapperClassName?": "string",
+          "centerImageClassName?": "string"
+        },
+        "usage": "<AboutShowcase title=\"Discover Our Story\" description=\"Building innovative solutions\" useCappedBorderRadius={true} animationType=\"slide-up\" textboxLayout=\"default\" useInvertedBackground=\"noInvert\" leftItem={{ title: 'Innovation at the core of everything we do', imageSrc: '/left-image.jpg' }} rightItem={{ title: 'Excellence in every detail we deliver', imageSrc: '/right-image.jpg' }} centerImageSrc=\"/showcase-main.jpg\" />"
+      },
+      {
+        "import": "import MediaSplitTabsAbout from '@/components/sections/about/MediaSplitTabsAbout';",
+        "name": "MediaSplitTabsAbout",
+        "path": "@/components/sections/about/MediaSplitTabsAbout",
+        "description": "Split-layout about section with interactive tabs, animated descriptions, and 60/40 grid with media.",
+        "details": "Use for about sections with multiple content areas selectable via tabs. Features 60/40 grid (6/10 content, 4/10 media). Content card displays title, optional description, interactive tab buttons with animated indicator dot, accent divider, and tab-specific description that animates on change using AnimationContainer. Tabs have active state with accent-colored dot indicator that smoothly animates in/out. Fixed height on desktop (h-160 2xl:h-180) ensures consistent layout. Media card shows image or video. Image position configurable (left/right). Perfect for 'Why choose us', 'Our approach', 'Services overview' sections with multiple talking points.",
+        "constraints": {
+          "textRules": {
+            "title": {
+              "required": true,
+              "example": "Why Choose Us",
+              "minChars": 2,
+              "maxChars": 50
+            },
+            "description": {
+              "required": false,
+              "example": "We deliver excellence across every aspect of our work",
+              "minChars": 10,
+              "maxChars": 200
+            }
+          },
+          "tabRules": {
+            "minTabs": 2,
+            "maxTabs": 5,
+            "structure": {
+              "id": "string - Unique identifier (required)",
+              "label": "string - Tab button text (required)",
+              "description": "string - Description shown when tab is active (required)"
+            },
+            "note": "First tab is selected by default. Tab indicator dot animates smoothly between tabs."
+          },
+          "mediaRules": {
+            "imageSrc": {
+              "required": false,
+              "example": "/team-photo.jpg",
+              "note": "Either imageSrc or videoSrc should be provided."
+            },
+            "videoSrc": {
+              "required": false,
+              "example": "/intro-video.mp4",
+              "note": "Either imageSrc or videoSrc should be provided."
+            },
+            "imageAlt": {
+              "required": false,
+              "example": "Team collaboration",
+              "note": "Alt text for image."
+            },
+            "videoAriaLabel": {
+              "required": false,
+              "example": "Introduction video",
+              "note": "ARIA label for video accessibility."
+            },
+            "imagePosition": {
+              "required": false,
+              "default": "right",
+              "options": ["left", "right"],
+              "note": "Position of media card relative to content card."
+            }
+          }
+        },
+        "propsSchema": {
+          "title": "string",
+          "description?": "string",
+          "tabs": "TabOption[]",
+          "imageSrc?": "string",
+          "videoSrc?": "string",
+          "imageAlt?": "string",
+          "videoAriaLabel?": "string",
+          "imagePosition?": "'left' | 'right' (default: 'right')",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "ariaLabel?": "string (default: 'About section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "contentCardClassName?": "string",
+          "titleClassName?": "string",
+          "titleDescriptionClassName?": "string",
+          "tabsContainerClassName?": "string",
+          "tabClassName?": "string",
+          "activeTabClassName?": "string",
+          "tabIndicatorClassName?": "string",
+          "descriptionClassName?": "string",
+          "mediaCardClassName?": "string",
+          "mediaClassName?": "string"
+        },
+        "usage": "<MediaSplitTabsAbout title=\"Why Choose Us\" tabs={[{ id: 'collaboration', label: 'Deep Collaboration', description: 'We work side by side with your team, fostering open communication and shared accountability.' }, { id: 'expertise', label: 'Expertise', description: 'Our team brings decades of combined experience across industries.' }, { id: 'solutions', label: 'Tailored Solutions', description: 'Every challenge is unique. We craft custom strategies that align with your specific goals.' }]} imageSrc=\"/team-photo.jpg\" imageAlt=\"Team collaboration\" imagePosition=\"right\" useInvertedBackground=\"noInvert\" />"
+      },
+      {
+        "import": "import TagAboutCard from '@/components/sections/about/TagAboutCard';",
+        "name": "TagAboutCard",
+        "path": "@/components/sections/about/TagAboutCard",
+        "description": "Card-based about section with tag, animated title, paragraphs, and icon box extending outside.",
+        "details": "Use for mission statements or about content in a contained card layout. Layout: Card with Tag (top-left) → Animated Title → Multiple Paragraphs. Features a primary-button icon box positioned half outside the card on the top-right corner. Uses TextAnimation with words-trigger variant for the title. Best for concise about sections, mission statements, or company values.",
+        "constraints": {
+          "textRules": {
+            "tag": {
+              "required": true,
+              "example": "Our mission",
+              "minChars": 2,
+              "maxChars": 30
+            },
+            "title": {
+              "required": true,
+              "example": "Turning content chaos into consistent growth",
+              "minChars": 5,
+              "maxChars": 100
+            }
+          },
+          "paragraphRules": {
+            "paragraphs": {
+              "required": true,
+              "example": ["We work with brands who are ready to grow.", "Our approach combines strategy and execution."],
+              "minItems": 1,
+              "maxItems": 10,
+              "note": "Array of paragraph strings displayed sequentially"
+            }
+          }
+        },
+        "propsSchema": {
+          "tag": "string (required)",
+          "tagIcon?": "LucideIcon",
+          "title": "string (required)",
+          "paragraphs": "string[] (required)",
+          "icon": "LucideIcon (required - displayed in the icon box)",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "ariaLabel?": "string (default: 'About section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "cardClassName?": "string",
+          "tagClassName?": "string",
+          "titleClassName?": "string",
+          "paragraphsContainerClassName?": "string",
+          "paragraphClassName?": "string",
+          "iconBoxClassName?": "string",
+          "iconClassName?": "string"
+        },
+        "usage": "<TagAboutCard tag=\"Our mission\" title=\"Turning content chaos into consistent growth\" paragraphs={['We work with brands who are ready to grow.', 'Our approach combines strategy and execution.']} icon={Asterisk} useInvertedBackground=\"noInvert\" />"
+      },
+      {
+        "import": "import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';",
+        "name": "TestimonialAboutCard",
+        "path": "@/components/sections/about/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"
+            },
+            "videoSrc": {
+              "required": "conditional - required if no imageSrc",
+              "example": "/videos/testimonial.mp4"
+            }
+          }
+        },
+        "propsSchema": {
+          "tag": "string (required)",
+          "tagIcon?": "LucideIcon",
+          "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')",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "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"
+        },
+        "usage": "<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=\"noInvert\" />"
+      },
+      {
+        "import": "import BannerGridAbout from '@/components/sections/about/BannerGridAbout';",
+        "name": "BannerGridAbout",
+        "path": "@/components/sections/about/BannerGridAbout",
+        "description": "About section with banner media on top and adaptive grid of text cards and media below.",
+        "details": "Use for about sections needing prominent banner media with supporting content cards. Layout: Banner media with centered title overlay (mix-blend-difference) on top, adaptive grid below. Supports 1-3 text cards with title/description. Grid adapts: 1 card = 2-col (card + media), 2 cards = 3-col (card | media | card), 3 cards = 3-col row + full-width media below. Text cards have title on top, description on bottom. Mobile: single column with aspect-square for media, aspect-video for cards.",
+        "constraints": {
+          "textRules": {
+            "bannerTitle": {
+              "required": true,
+              "example": "We're building the future of autonomous robotics",
+              "minChars": 10,
+              "maxChars": 100
+            },
+            "cardTitle": {
+              "required": true,
+              "example": "Our Mission",
+              "minChars": 2,
+              "maxChars": 50
+            },
+            "cardDescription": {
+              "required": true,
+              "example": "Creating intelligent systems that seamlessly integrate into everyday life.",
+              "minChars": 10,
+              "maxChars": 200
+            }
+          },
+          "bannerMediaRules": {
+            "note": "Either imageSrc or videoSrc is required (discriminated union)",
+            "imageSrc": {
+              "required": "conditional - required if no videoSrc",
+              "example": "/images/banner.jpg"
+            },
+            "videoSrc": {
+              "required": "conditional - required if no imageSrc",
+              "example": "/videos/banner.mp4"
+            }
+          },
+          "cardRules": {
+            "minItems": 1,
+            "maxItems": 3,
+            "recommendedItems": "1-3",
+            "note": "Each card has title (top) and description (bottom). Grid layout adapts based on card count."
+          },
+          "bottomMediaRules": {
+            "note": "Either imageSrc or videoSrc is required (discriminated union)",
+            "imageSrc": {
+              "required": "conditional - required if no videoSrc",
+              "example": "/images/about-media.jpg"
+            },
+            "videoSrc": {
+              "required": "conditional - required if no imageSrc",
+              "example": "/videos/about-media.mp4"
+            }
+          }
+        },
+        "propsSchema": {
+          "bannerMedia": "{ title: string; imageSrc?: string; imageAlt?: string; videoSrc?: string; videoAriaLabel?: string } (required - either imageSrc or videoSrc)",
+          "cards": "Array<{ title: string; description: string }> (required - 1-3 cards)",
+          "bottomMedia": "{ imageSrc?: string; imageAlt?: string; videoSrc?: string; videoAriaLabel?: string } (required - either imageSrc or videoSrc)",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard' (required)",
+          "ariaLabel?": "string (default: 'About section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "bannerCardClassName?": "string",
+          "bannerMediaClassName?": "string",
+          "bannerTitleClassName?": "string",
+          "gridClassName?": "string",
+          "cardClassName?": "string",
+          "cardTitleClassName?": "string",
+          "cardDescriptionClassName?": "string",
+          "bottomMediaCardClassName?": "string",
+          "bottomMediaClassName?": "string"
+        },
+        "usage": "<BannerGridAbout bannerMedia={{ title: 'We're building the future', imageSrc: '/images/banner.jpg' }} cards={[{ title: 'Our Mission', description: 'Creating intelligent systems for everyday life.' }, { title: 'Our Vision', description: 'A world where technology works for humanity.' }]} bottomMedia={{ imageSrc: '/images/about.jpg' }} animationType=\"slide-up\" useInvertedBackground=\"noInvert\" />"
+      }
+    ],
+    "feature": [
+      {
+        "import": "import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';",
+        "name": "FeatureCardOne",
+        "path": "@/components/sections/feature/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?: ButtonConfig } & ({ imageSrc: string, imageAlt?: string } | { videoSrc: string, videoAriaLabel?: string })>",
+          "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+          "gridVariant": "'uniform-all-items-equal' | 'uniform-staggered-items' | 'uniform-alternating-sizes' | 'uniform-alternating-sizes-inverted' | 'two-items-tall-short' | 'two-items-short-tall' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'four-items-2x2-alternating-heights' | 'four-items-2x2-alternating-heights-inverted' | 'four-items-2x2-staggered-grid' | 'four-items-2x2-staggered-grid-inverted' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right' | 'timeline' | 'timeline-three-columns' (required)",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
+          "containerStyle": "'default' | 'card' (required - 'default': individual items have card styling with gaps, 'card': entire grid wrapped in primary-button container)",
+          "uniformGridCustomHeightClasses?": "string",
+          "title": "string",
+          "titleSegments?": "TitleSegment[] - Array of { type: 'text', content: string } | { type: 'image', src: string, alt?: string } for inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "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": "'noInvert' | 'invertDefault' | 'invertCard'"
+        },
+        "usage": "<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={\"noInvert\"} />"
+      },
+      {
+        "import": "import FeatureCardTwo from '@/components/sections/feature/FeatureCardTwo';",
+        "name": "FeatureCardTwo",
+        "path": "@/components/sections/feature/FeatureCardTwo",
+        "description": "Adaptive feature section with icon-based cards for text-focused features.",
+        "details": "Use when you don't need images but want visual appeal with icons. Each card displays an icon box, title, description, and optional button. 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 default 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
+            }
+          }
+        },
+        "propsSchema": {
+          "features": "Array<{ title: string, description: string, icon: LucideIcon, button?: ButtonConfig }>",
+          "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+          "gridVariant": "'uniform-all-items-equal' | 'uniform-staggered-items' | 'uniform-alternating-heights' | 'uniform-alternating-heights-inverted' | 'uniform-alternating-sizes' | 'uniform-alternating-sizes-inverted' | 'two-items-tall-short' | 'two-items-short-tall' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'four-items-2x2-alternating-heights' | 'four-items-2x2-alternating-heights-inverted' | 'four-items-2x2-staggered-grid' | 'four-items-2x2-staggered-grid-inverted' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' (required)",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
+          "containerStyle": "'default' | 'card' (required - 'default': individual items have card styling with gaps, 'card': entire grid wrapped in primary-button container)",
+          "uniformGridCustomHeightClasses?": "string",
+          "title": "string",
+          "titleSegments?": "TitleSegment[] - Array of { type: 'text', content: string } | { type: 'image', src: string, alt?: string } for inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "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",
+          "iconClassName?": "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": "'noInvert' | 'invertDefault' | 'invertCard'"
+        },
+        "usage": "<FeatureCardTwo features={[{ title: 'Analytics', description: 'Track performance', icon: Zap, button: { text: 'Learn More', href: '#' } }]} title=\"Our Features\" description=\"Discover what makes us different\" textboxLayout=\"default\" animationType=\"slide-up\" useInvertedBackground={\"noInvert\"} />"
+      },
+      {
+        "import": "import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';",
+        "name": "FeatureCardThree",
+        "path": "@/components/sections/feature/featureCardThree/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": {
+            "id": {
+              "required": true,
+              "example": "01",
+              "minChars": 1,
+              "maxChars": 3,
+              "note": "Displayed in the flip badge"
+            },
+            "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<{ id: string, title: string, description: string, imageSrc: string, imageAlt?: string }>",
+          "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+          "gridVariant": "'uniform-all-items-equal' | 'uniform-staggered-items' | 'uniform-alternating-heights' | 'uniform-alternating-heights-inverted' | 'uniform-alternating-sizes' | 'uniform-alternating-sizes-inverted' | 'two-items-tall-short' | 'two-items-short-tall' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'four-items-2x2-alternating-heights' | 'four-items-2x2-alternating-heights-inverted' | 'four-items-2x2-staggered-grid' | 'four-items-2x2-staggered-grid-inverted' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right' | 'timeline' | 'timeline-three-columns' (required)",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
+          "containerStyle": "'default' | 'card' (required - 'default': individual items have card styling with gaps, 'card': entire grid wrapped in primary-button container)",
+          "uniformGridCustomHeightClasses?": "string",
+          "title": "string",
+          "titleSegments?": "TitleSegment[] - Array of { type: 'text', content: string } | { type: 'image', src: string, alt?: string } for inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "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 - 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",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'"
+        },
+        "usage": "<FeatureCardThree features={[{ id: '01', 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={\"noInvert\"} />"
+      },
+      {
+        "import": "import FeatureCardFour from '@/components/sections/feature/FeatureCardFour';",
+        "name": "FeatureCardFour",
+        "path": "@/components/sections/feature/FeatureCardFour",
+        "description": "Compact feature section with icon badges and inverted card layout optimized for uniform grids.",
+        "details": "Use for text-focused feature displays with minimal visual hierarchy. Each card has an inverted layout: description on top (large text), then icon badge + title in a row on bottom. Icon appears in a square primary-button badge. Only supports uniform-all-items-equal grid layout with min-h-0 for compact presentation. No per-card buttons. 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 with our powerful analytics tools",
+              "minChars": 10,
+              "maxChars": 250
+            }
+          }
+        },
+        "propsSchema": {
+          "features": "Array<{ title: string, description: string, icon: LucideIcon }>",
+          "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
+          "containerStyle": "'default' | 'card' (required - 'default': individual items have card styling with gaps, 'card': entire grid wrapped in primary-button container)",
+          "title": "string",
+          "titleSegments?": "TitleSegment[] - Array of { type: 'text', content: string } | { type: 'image', src: string, alt?: string } for inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "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",
+          "iconClassName?": "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",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'"
+        },
+        "usage": "<FeatureCardFour features={[{ title: 'Analytics', description: 'Get detailed insights into your business performance', icon: Zap }]} title=\"Our Features\" description=\"Discover what makes us different\" textboxLayout=\"default\" animationType=\"slide-up\" useInvertedBackground={\"noInvert\"} />"
+      },
+      {
+        "import": "import FeatureCardFive from '@/components/sections/feature/FeatureCardFive';",
+        "name": "FeatureCardFive",
+        "path": "@/components/sections/feature/FeatureCardFive",
+        "description": "Minimalist feature section with large centered icons and bottom-aligned titles.",
+        "details": "Use for simple, icon-focused feature displays with minimal text. Each card shows a large centered icon (optionally in a primary-button square badge) with the title at the bottom left. No descriptions or buttons per card. The showIconBoxBackground prop (default: true) controls whether icons appear in a colored square badge or plain. 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
+            }
+          }
+        },
+        "propsSchema": {
+          "features": "Array<{ title: string, icon: LucideIcon }>",
+          "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
+          "containerStyle": "'default' | 'card' (required - 'default': individual items have card styling with gaps, 'card': entire grid wrapped in primary-button container)",
+          "uniformGridCustomHeightClasses?": "string",
+          "title": "string",
+          "titleSegments?": "TitleSegment[] - Array of { type: 'text', content: string } | { type: 'image', src: string, alt?: string } for inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "showIconBoxBackground?": "boolean (default: true)",
+          "ariaLabel?": "string (default: 'Feature section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "cardClassName?": "string",
+          "iconClassName?": "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",
+          "gridClassName?": "string",
+          "carouselClassName?": "string",
+          "controlsClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'"
+        },
+        "usage": "<FeatureCardFive features={[{ title: 'Analytics', icon: Zap }]} title=\"Our Features\" description=\"Discover what makes us different\" textboxLayout=\"default\" animationType=\"slide-up\" useInvertedBackground={\"noInvert\"} />"
+      },
+      {
+        "import": "import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';",
+        "name": "FeatureCardSix",
+        "path": "@/components/sections/feature/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": {
+            "id": {
+              "required": true,
+              "example": "1",
+              "minChars": 1,
+              "maxChars": 3,
+              "note": "Step number displayed in circular badge"
+            },
+            "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"
+            },
+            "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<{ id: number, title: string, description: string } & ({ imageSrc: string, imageAlt?: string } | { videoSrc: string, videoAriaLabel?: string })>",
+          "title": "string",
+          "titleSegments?": "TitleSegment[] - Array of { type: 'text', content: string } | { type: 'image', src: string, alt?: string } for inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "ariaLabel?": "string (default: 'Feature 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",
+          "cardContentClassName?": "string",
+          "stepNumberClassName?": "string",
+          "cardTitleClassName?": "string",
+          "cardDescriptionClassName?": "string",
+          "imageContainerClassName?": "string",
+          "imageClassName?": "string"
+        },
+        "usage": "<FeatureCardSix features={[{ id: 1, 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={\"noInvert\"} />"
+      },
+      {
+        "import": "import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';",
+        "name": "FeatureCardSeven",
+        "path": "@/components/sections/feature/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": {
+            "id": {
+              "required": true,
+              "example": "1",
+              "minChars": 1,
+              "maxChars": 3,
+              "note": "Step number displayed in circular badge"
+            },
+            "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"
+            },
+            "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<{ id: number, 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?": "TitleSegment[] - Array of { type: 'text', content: string } | { type: 'image', src: string, alt?: string } for inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "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",
+          "textBoxClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string",
+          "cardContentClassName?": "string",
+          "stepNumberClassName?": "string",
+          "cardTitleClassName?": "string",
+          "cardDescriptionClassName?": "string",
+          "imageContainerClassName?": "string",
+          "imageClassName?": "string"
+        },
+        "usage": "<FeatureCardSeven features={[{ id: 1, 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={\"noInvert\"} />"
+      },
+      {
+        "import": "import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';",
+        "name": "FeatureCardEight",
+        "path": "@/components/sections/feature/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": {
+            "id": {
+              "required": true,
+              "example": "1",
+              "minChars": 1,
+              "maxChars": 3,
+              "note": "Step number displayed in circular badge"
+            },
+            "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)"
+            },
+            "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<{ id: number, title: string, description: string } & ({ imageSrc: string, imageAlt?: string } | { videoSrc: string, videoAriaLabel?: string })>",
+          "title": "string",
+          "titleSegments?": "TitleSegment[] - Array of { type: 'text', content: string } | { type: 'image', src: string, alt?: string } for inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "ariaLabel?": "string (default: 'Feature 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",
+          "cardClassName?": "string",
+          "progressBarClassName?": "string",
+          "cardContentClassName?": "string",
+          "stepNumberClassName?": "string",
+          "cardTitleClassName?": "string",
+          "cardDescriptionClassName?": "string",
+          "mediaContainerClassName?": "string",
+          "mediaClassName?": "string"
+        },
+        "usage": "<FeatureCardEight features={[{ id: 1, 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={\"noInvert\"} />"
+      },
+      {
+        "import": "import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';",
+        "name": "FeatureCardNine",
+        "path": "@/components/sections/feature/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": {
+            "id": {
+              "required": true,
+              "example": "1",
+              "minChars": 1,
+              "maxChars": 3,
+              "note": "Feature identifier"
+            },
+            "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)"
+              },
+              "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)"
+              },
+              "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<{ id: number, 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?": "TitleSegment[] - Array of { type: 'text', content: string } | { type: 'image', src: string, alt?: string } for inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "ariaLabel?": "string (default: 'Feature 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",
+          "desktopContainerClassName?": "string",
+          "mobileContainerClassName?": "string",
+          "desktopContentClassName?": "string",
+          "desktopWrapperClassName?": "string",
+          "mobileWrapperClassName?": "string",
+          "phoneFrameClassName?": "string",
+          "mobilePhoneFrameClassName?": "string",
+          "featureContentClassName?": "string",
+          "stepNumberClassName?": "string",
+          "featureTitleClassName?": "string",
+          "featureDescriptionClassName?": "string"
+        },
+        "usage": "<FeatureCardNine features={[{ id: 1, 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={\"noInvert\"} />"
+      },
+      {
+        "import": "import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';",
+        "name": "FeatureCardTen",
+        "path": "@/components/sections/feature/FeatureCardTen",
+        "description": "Timeline-based feature section with alternating media/content layout and icon-based bullet points.",
+        "details": "Use for process-oriented features, step-by-step workflows, or feature showcases with supporting details. Built on TimelineProcessFlow with vertical scroll-animated line. Each feature shows media (image/video in card with rounded-theme-capped p-4) on one side, and content (title + description + icon list) on opposite side. Layout alternates based on reverse prop. Desktop: Split 50/50 with media and content side-by-side. Mobile: Stacked vertical with timeline on right edge. Features numbered badge in center (desktop) or right edge (mobile) using primary-button styling. Icon list items have card-styled containers with bg-background. Supports all TimelineProcessFlow features including GSAP scroll-triggered line animation. Best for 3-5 features showcasing capabilities with supporting points.",
+        "constraints": {
+          "textRules": {
+            "title": {
+              "required": true,
+              "example": "Powerful Features",
+              "minChars": 2,
+              "maxChars": 50
+            },
+            "description": {
+              "required": true,
+              "example": "Everything you need to build amazing products",
+              "minChars": 5,
+              "maxChars": 300
+            },
+            "tag": {
+              "required": false,
+              "example": "Features",
+              "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."
+          },
+          "featureCardRules": {
+            "id": {
+              "required": true,
+              "example": "1",
+              "minChars": 1,
+              "maxChars": 3,
+              "note": "Feature identifier displayed in numbered badge"
+            },
+            "title": {
+              "required": true,
+              "example": "Seamless Integration",
+              "minChars": 2,
+              "maxChars": 50
+            },
+            "description": {
+              "required": true,
+              "example": "Connect your tools and workflows effortlessly with our platform.",
+              "minChars": 10,
+              "maxChars": 300
+            },
+            "reverse": {
+              "required": true,
+              "type": "boolean",
+              "note": "When true, swaps media/content positions on desktop. Alternating pattern recommended."
+            }
+          },
+          "mediaRules": {
+            "imageSrc": {
+              "required": false,
+              "example": "/feature1.jpg",
+              "note": "Either imageSrc or videoSrc required (discriminated union)"
+            },
+            "videoSrc": {
+              "required": false,
+              "example": "/feature1.mp4",
+              "note": "Either imageSrc or videoSrc required (discriminated union)"
+            },
+            "imageAlt": {
+              "required": false,
+              "example": "Feature screenshot",
+              "note": "Falls back to feature title if not provided"
+            },
+            "videoAriaLabel": {
+              "required": false,
+              "example": "Feature demo video",
+              "note": "Falls back to '[title] video' if not provided"
+            }
+          },
+          "itemRules": {
+            "structure": {
+              "icon": "LucideIcon - Icon component (required)",
+              "text": "string - Bullet point text (required)"
+            },
+            "minItems": 2,
+            "maxItems": 5,
+            "recommendedItems": "3-4",
+            "note": "Icon list items displayed with card-styled containers. Each item shows icon (left) + text (right)."
+          }
+        },
+        "propsSchema": {
+          "features": "FeatureCard[] - Array of feature items",
+          "title": "string",
+          "titleSegments?": "TitleSegment[] - Array of { type: 'text', content: string } | { type: 'image', src: string, alt?: string } for inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "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": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "ariaLabel?": "string (default: 'Feature 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",
+          "mediaCardClassName?": "string",
+          "numberClassName?": "string",
+          "contentWrapperClassName?": "string",
+          "featureTitleClassName?": "string",
+          "featureDescriptionClassName?": "string",
+          "listItemClassName?": "string",
+          "iconContainerClassName?": "string",
+          "iconClassName?": "string",
+          "gapClassName?": "string"
+        },
+        "usage": "// 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    <FeatureCardTen \n      features={[\n        { id: '1', title: 'Seamless Integration', description: 'Connect your tools and workflows effortlessly', media: { imageSrc: '/feature1.jpg' }, items: [{ icon: Check, text: 'One-click integrations' }, { icon: Zap, text: 'Lightning-fast sync' }], reverse: false },\n        { id: '2', title: 'Real-time Collaboration', description: 'Work together in real-time with your team', media: { videoSrc: '/feature2.mp4' }, items: [{ icon: Check, text: 'Instant updates' }, { icon: Shield, text: 'Secure sharing' }], reverse: true }\n      ]} \n      title=\"Powerful Features\" \n      description=\"Everything you need to build amazing products\" \n      tag=\"Features\" \n      textboxLayout=\"default\" \n      animationType=\"slide-up\" \n      useInvertedBackground={\"noInvert\"} \n    />\n  </ReactLenis>\n</ThemeProvider>"
+      },
+      {
+        "import": "import FeatureCardEleven from '@/components/sections/feature/FeatureCardEleven';",
+        "name": "FeatureCardEleven",
+        "path": "@/components/sections/feature/FeatureCardEleven",
+        "description": "Timeline-based feature section with alternating layout showing separate text and image cards with numbered steps.",
+        "details": "Use for process-oriented feature displays or step-by-step showcases. Layout: Optional TextBox Header \u2192 Vertical List of Alternating Features (text card + image card in separate boxes). Each feature has numbered badge, title, description in one card (aspect-square, w-1/2, card class, p-6 md:p-15), and media content in separate card (aspect-square, w-1/2). Image card styling controlled by usePrimaryButtonImage prop: false (default) = card class, true = primary-button class with p-15 padding. Alternates between left-right and right-left layout per item. Uses CardList with disableCardWrapper=true so each feature item's text and image boxes have their own card styling. Both cards are aspect-square on all breakpoints. Best for showcasing multi-step processes, workflows, or sequential features with strong visual emphasis on each step.",
+        "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
+            }
+          },
+          "featureRules": {
+            "id": {
+              "required": true,
+              "example": 1,
+              "note": "Numeric step number displayed in circular badge"
+            },
+            "title": {
+              "required": true,
+              "example": "Research & Planning",
+              "minChars": 5,
+              "maxChars": 60,
+              "note": "Feature heading shown at 4xl (mobile) / 5xl (desktop)"
+            },
+            "description": {
+              "required": true,
+              "example": "Understanding user needs, market trends, and project requirements. Defining goals and creating a strategic roadmap for success.",
+              "minChars": 20,
+              "maxChars": 300,
+              "note": "Feature description shown at base size"
+            },
+            "imageSrc": {
+              "required": false,
+              "example": "/feature1.jpg",
+              "note": "Either imageSrc or videoSrc should be provided"
+            },
+            "videoSrc": {
+              "required": false,
+              "example": "/feature1.mp4",
+              "note": "Either imageSrc or videoSrc should be provided"
+            },
+            "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": 8,
+            "recommendedItems": "3-5",
+            "note": "Works best with 3-5 features for clear process visualization. Layout alternates between left-right and right-left per item."
+          }
+        },
+        "propsSchema": {
+          "features": "Array<{ id: number, title: string, description: string, imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }>",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)",
+          "title": "string",
+          "titleSegments?": "TitleSegment[] - Array of { 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": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "usePrimaryButtonImage": "boolean (required - true: primary-button with p-15, false: card)",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "ariaLabel?": "string (default: 'Feature 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",
+          "cardContentClassName?": "string",
+          "textCardClassName?": "string",
+          "imageCardClassName?": "string",
+          "stepNumberClassName?": "string",
+          "cardTitleClassName?": "string",
+          "cardDescriptionClassName?": "string",
+          "imageClassName?": "string"
+        },
+        "usage": "<FeatureCardEleven features={[{ id: 1, title: 'Research & Planning', description: 'Understanding user needs, market trends, and project requirements. Defining goals and creating a strategic roadmap for success.', imageSrc: '/feature1.jpg' }, { id: 2, title: 'Design & Prototyping', description: 'Creating wireframes, mockups, and interactive prototypes. User testing and feedback integration to refine the design approach.', imageSrc: '/feature2.jpg' }]} animationType=\"opacity\" title=\"Our Process\" description=\"Discover how we bring ideas to life\" textboxLayout=\"default\" useInvertedBackground={\"noInvert\"} usePrimaryButtonImage={false} />"
+      },
+      {
+        "import": "import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';",
+        "name": "FeatureCardTwelve",
+        "path": "@/components/sections/feature/FeatureCardTwelve",
+        "description": "List-based feature section with large label on left and content with bullet points on right.",
+        "details": "Use for feature comparisons, model/tier showcases, or product version displays (e.g., 'Opus 4.1', 'GPT-4', 'Claude 3'). 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, product versions, 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": "opus-4-1",
+              "note": "Unique identifier for the feature"
+            },
+            "label": {
+              "required": true,
+              "example": "Opus 4.1",
+              "minChars": 2,
+              "maxChars": 30,
+              "note": "Large display label shown on left side (5xl mobile, 6xl desktop)"
+            },
+            "title": {
+              "required": true,
+              "example": "Maximum reasoning power for your most complex challenges",
+              "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": "ButtonConfig[]",
+              "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?: ButtonConfig[] }>",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)",
+          "variant": "'card' | 'border' (required - 'card': items wrapped in card styling, 'border': items separated by accent-colored divider lines)",
+          "title": "string",
+          "titleSegments?": "TitleSegment[] - Array of { 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": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "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"
+        },
+        "usage": "<FeatureCardTwelve features={[{ id: 'opus-4-1', label: 'Opus 4.1', title: 'Maximum reasoning power for your most complex challenges and strategic decisions', items: ['Deep research', 'Complex reasoning', 'System architecture'], buttons: [{ text: 'Model details', href: '#' }, { text: 'Try now', onClick: () => console.log('clicked') }] }]} animationType=\"opacity\" variant=\"border\" title=\"Choose Your Plan\" description=\"Find the perfect fit for your needs\" textboxLayout=\"default\" useInvertedBackground={\"noInvert\"} />"
+      },
+      {
+        "import": "import FeatureCardThirteen from '@/components/sections/feature/FeatureCardThirteen';",
+        "name": "FeatureCardThirteen",
+        "path": "@/components/sections/feature/FeatureCardThirteen",
+        "description": "Adaptive feature section with numbered process cards featuring step ID, title, description, and decorative dots.",
+        "details": "Use for process flows, methodology showcases, or step-by-step features. Each card displays a step ID (e.g., '/ 01'), large title, description, and decorative dots 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 (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": "A streamlined approach to bring your ideas to life",
+              "minChars": 5,
+              "maxChars": 250
+            },
+            "tag": {
+              "required": false,
+              "example": "Process",
+              "minChars": 2,
+              "maxChars": 30
+            }
+          },
+          "featureCardRules": {
+            "id": {
+              "required": true,
+              "example": "01",
+              "minChars": 1,
+              "maxChars": 5,
+              "note": "Step number displayed as '/ 01' format"
+            },
+            "title": {
+              "required": true,
+              "example": "Discover",
+              "minChars": 2,
+              "maxChars": 25
+            },
+            "description": {
+              "required": true,
+              "example": "Understanding your vision, goals, and target audience to create a solid foundation for success.",
+              "minChars": 10,
+              "maxChars": 200
+            }
+          }
+        },
+        "propsSchema": {
+          "features": "Array<{ id: string, title: string, description: string }>",
+          "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+          "gridVariant": "'uniform-all-items-equal' | 'uniform-staggered-items' | 'uniform-alternating-heights' | 'uniform-alternating-heights-inverted' | 'uniform-alternating-sizes' | 'uniform-alternating-sizes-inverted' | 'two-items-tall-short' | 'two-items-short-tall' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'four-items-2x2-alternating-heights' | 'four-items-2x2-alternating-heights-inverted' | 'four-items-2x2-staggered-grid' | 'four-items-2x2-staggered-grid-inverted' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' (required)",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
+          "containerStyle": "'default' | 'card' (required - 'default': individual items have card styling with gaps, 'card': entire grid wrapped in primary-button container)",
+          "uniformGridCustomHeightClasses?": "string",
+          "title": "string",
+          "titleSegments?": "TitleSegment[] - Array of { type: 'text', content: string } | { type: 'image', src: string, alt?: string } for inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "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 - For styling image wrapper in inline-image layout",
+          "textBoxTitleImageClassName?": "string - For styling images in inline-image layout",
+          "textBoxDescriptionClassName?": "string",
+          "cardIdClassName?": "string",
+          "cardTitleClassName?": "string",
+          "cardDescriptionClassName?": "string",
+          "cardDotsClassName?": "string",
+          "gridClassName?": "string",
+          "carouselClassName?": "string",
+          "controlsClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'"
+        },
+        "usage": "<FeatureCardThirteen features={[{ id: '01', title: 'Discover', description: 'Understanding your vision and goals' }, { id: '02', title: 'Design', description: 'Crafting intuitive user experiences' }]} gridVariant=\"uniform-all-items-equal\" title=\"Our Process\" description=\"A streamlined approach to bring your ideas to life\" textboxLayout=\"default\" animationType=\"slide-up\" containerStyle=\"default\" useInvertedBackground=\"noInvert\" />"
+      },
+      {
+        "import": "import FeatureCardFourteen from '@/components/sections/feature/FeatureCardFourteen';",
+        "name": "FeatureCardFourteen",
+        "path": "@/components/sections/feature/FeatureCardFourteen",
+        "description": "Full-width carousel with media cards featuring title and description overlays.",
+        "details": "Use for showcasing visual content with text overlays in a full-width carousel format. Layout: Optional TextBox Header → Full-Width Carousel with dot navigation. Each card displays media (image or video) with a frosted glass card overlay containing title and description positioned at the bottom-left. Uses FullWidthCarousel component with embla-carousel. Cards have rounded corners and aspect-[10/16] on mobile, aspect-video on desktop. Best for feature showcases, project portfolios, or content where both imagery and descriptions are important. Supports inverted text colors based on theme.",
+        "constraints": {
+          "textRules": {
+            "title": {
+              "required": true,
+              "example": "Our Features",
+              "minChars": 2,
+              "maxChars": 50
+            },
+            "description": {
+              "required": true,
+              "example": "Discover what makes us unique",
+              "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"
+            },
+            "title": {
+              "required": true,
+              "example": "Lightning Fast",
+              "minChars": 2,
+              "maxChars": 40
+            },
+            "description": {
+              "required": true,
+              "example": "Optimized for speed and performance",
+              "minChars": 5,
+              "maxChars": 150
+            },
+            "imageSrc": {
+              "required": false,
+              "example": "/images/feature1.webp",
+              "note": "Image source URL (either imageSrc or videoSrc required)"
+            },
+            "videoSrc": {
+              "required": false,
+              "example": "/videos/feature.mp4",
+              "note": "Video source URL (either imageSrc or videoSrc required)"
+            },
+            "imageAlt": {
+              "required": false,
+              "example": "Feature screenshot",
+              "note": "Alt text for images (empty string for decorative)"
+            },
+            "videoAriaLabel": {
+              "required": false,
+              "example": "Feature demo video",
+              "note": "Aria label for videos"
+            }
+          }
+        },
+        "propsSchema": {
+          "features": "Array<{ id: string, title: string, description: string, imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }>",
+          "title": "string",
+          "titleSegments?": "TitleSegment[] - Array of { 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": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "ariaLabel?": "string (default: 'Features section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "cardClassName?": "string",
+          "textBoxTitleClassName?": "string",
+          "textBoxTitleImageWrapperClassName?": "string",
+          "textBoxTitleImageClassName?": "string",
+          "textBoxDescriptionClassName?": "string",
+          "cardImageClassName?": "string",
+          "cardTitleClassName?": "string",
+          "cardDescriptionClassName?": "string",
+          "cardContentClassName?": "string",
+          "carouselClassName?": "string",
+          "dotsClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string"
+        },
+        "usage": "<FeatureCardFourteen features={[{ id: '1', title: 'Lightning Fast', description: 'Optimized for speed and performance', imageSrc: '/images/feature1.webp', imageAlt: 'Feature one' }]} title=\"Our Features\" description=\"Discover what makes us unique\" textboxLayout=\"default\" useInvertedBackground=\"noInvert\" />"
+      },
+      {
+        "import": "import FeatureCardFifteen from '@/components/sections/feature/FeatureCardFifteen';",
+        "name": "FeatureCardFifteen",
+        "path": "@/components/sections/feature/FeatureCardFifteen",
+        "description": "Dual marquee auto-carousel with feature cards showing media, title, and description.",
+        "details": "Use for showcasing multiple features in an engaging dual-row auto-scrolling carousel. Layout: TextBox Header → Top Marquee (scrolling one direction) → Bottom Marquee (scrolling opposite direction, reversed order). Each card displays media (image or video) with aspect-square format, followed by title and truncated description below. Uses AutoCarousel with dualMarquee enabled. Top and bottom rows scroll in opposite directions for visual interest. Best for feature showcases, product highlights, or content where continuous animation creates engagement. Supports customizable scroll speed and direction.",
+        "constraints": {
+          "textRules": {
+            "title": {
+              "required": true,
+              "example": "Powerful Features",
+              "minChars": 2,
+              "maxChars": 50
+            },
+            "description": {
+              "required": true,
+              "example": "Everything you need to build amazing products",
+              "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"
+            },
+            "title": {
+              "required": true,
+              "example": "AI-Powered Insights",
+              "minChars": 2,
+              "maxChars": 40
+            },
+            "description": {
+              "required": true,
+              "example": "Leverage advanced algorithms to gain actionable insights",
+              "minChars": 5,
+              "maxChars": 100,
+              "note": "Truncated with ellipsis if too long"
+            },
+            "imageSrc": {
+              "required": false,
+              "example": "/images/feature1.webp",
+              "note": "Image source URL (either imageSrc or videoSrc required)"
+            },
+            "videoSrc": {
+              "required": false,
+              "example": "/videos/feature.mp4",
+              "note": "Video source URL (either imageSrc or videoSrc required)"
+            },
+            "imageAlt": {
+              "required": false,
+              "example": "Feature screenshot",
+              "note": "Alt text for images (empty string for decorative)"
+            },
+            "videoAriaLabel": {
+              "required": false,
+              "example": "Feature demo video",
+              "note": "Aria label for videos"
+            }
+          }
+        },
+        "propsSchema": {
+          "features": "Array<{ id: string, title: string, description: string, imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }>",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations)",
+          "title": "string",
+          "titleSegments?": "TitleSegment[] - Array of { 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": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "speed?": "number (default: 40)",
+          "topMarqueeDirection?": "'left' | 'right' (default: 'left')",
+          "ariaLabel?": "string (default: 'Features section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "carouselClassName?": "string",
+          "bottomCarouselClassName?": "string",
+          "cardClassName?": "string",
+          "mediaClassName?": "string",
+          "featureTitleClassName?": "string",
+          "featureDescriptionClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTitleClassName?": "string",
+          "textBoxTitleImageWrapperClassName?": "string",
+          "textBoxTitleImageClassName?": "string",
+          "textBoxDescriptionClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string"
+        },
+        "usage": "<FeatureCardFifteen features={[{ id: '1', title: 'AI-Powered Insights', description: 'Leverage advanced algorithms', imageSrc: '/images/feature1.webp', imageAlt: 'Feature one' }]} animationType=\"slide-up\" title=\"Powerful Features\" description=\"Everything you need to build amazing products\" textboxLayout=\"default\" useInvertedBackground=\"noInvert\" />"
+      },
+      {
+        "import": "import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';",
+        "name": "FeatureCardSixteen",
+        "path": "@/components/sections/feature/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": {
+            "title": {
+              "required": true,
+              "example": "Manual Work",
+              "minChars": 2,
+              "maxChars": 40
+            },
+            "items": {
+              "required": true,
+              "example": ["Prone to Errors", "Limited Hours", "High Costs"],
+              "minItems": 2,
+              "maxItems": 10,
+              "note": "List of negative aspects displayed with X icons"
+            }
+          },
+          "positiveCardRules": {
+            "title": {
+              "required": true,
+              "example": "Our Solution",
+              "minChars": 2,
+              "maxChars": 40
+            },
+            "items": {
+              "required": true,
+              "example": ["Smart Automation", "24/7 Availability", "Cost Effective"],
+              "minItems": 2,
+              "maxItems": 10,
+              "note": "List of positive aspects displayed with Check icons"
+            }
+          }
+        },
+        "propsSchema": {
+          "negativeCard": "{ title: string, items: string[] } (required)",
+          "positiveCard": "{ title: string, items: string[] } (required)",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)",
+          "title": "string",
+          "titleSegments?": "TitleSegment[]",
+          "description": "string",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required)",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "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",
+          "cardTitleClassName?": "string",
+          "itemsListClassName?": "string",
+          "itemClassName?": "string",
+          "itemIconClassName?": "string",
+          "itemTextClassName?": "string"
+        },
+        "usage": "<FeatureCardSixteen negativeCard={{ title: 'Manual Work', items: ['Prone to Errors', 'Limited Hours'] }} positiveCard={{ title: 'Our Solution', items: ['Smart Automation', '24/7 Availability'] }} animationType=\"slide-up\" title=\"What makes us stand out\" description=\"See how we compare\" textboxLayout=\"default\" useInvertedBackground=\"noInvert\" />"
+      },
+      {
+        "import": "import FeatureCardSeventeen from '@/components/sections/feature/FeatureCardSeventeen';",
+        "name": "FeatureCardSeventeen",
+        "path": "@/components/sections/feature/FeatureCardSeventeen",
+        "description": "Large text with icon display cards in a stacked list layout with border or card variants.",
+        "details": "Use for showcasing key words, values, or single statements with accompanying icons in a bold typographic style. Layout: TextBox Header → Stacked cards with icon box and large text (text-6xl on mobile, text-9xl on desktop). Each card displays a LucideIcon in a primary-button styled square container alongside prominent text. Supports card variant (with card styling) or border variant (with horizontal dividers). useSplitLayout: true creates 50/50 split with icon on left and text on right; false centers both inline. Border variant includes bottom border on last item. Best for displaying core values, key terms, or impactful single words with visual icons.",
+        "constraints": {
+          "textRules": {
+            "title": {
+              "required": true,
+              "example": "Our Core Values",
+              "minChars": 2,
+              "maxChars": 50
+            },
+            "description": {
+              "required": true,
+              "example": "The principles that guide everything we do",
+              "minChars": 5,
+              "maxChars": 300
+            },
+            "tag": {
+              "required": false,
+              "example": "Values",
+              "minChars": 2,
+              "maxChars": 30
+            }
+          },
+          "featureRules": {
+            "id": {
+              "required": true,
+              "example": "1",
+              "note": "Unique identifier for the feature"
+            },
+            "icon": {
+              "required": true,
+              "example": "Lightbulb",
+              "note": "LucideIcon component to display in the icon box"
+            },
+            "text": {
+              "required": true,
+              "example": "Innovation",
+              "minChars": 1,
+              "maxChars": 30,
+              "note": "Single word or short phrase displayed in large text"
+            }
+          }
+        },
+        "propsSchema": {
+          "features": "Array<{ id: string, icon: LucideIcon, text: string }>",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations)",
+          "variant": "'card' | 'border' (required - 'card' uses card styling, 'border' uses horizontal dividers)",
+          "useUncappedRounding": "boolean (required - true uses rounded-theme, false uses rounded-theme-capped)",
+          "useSplitLayout": "boolean (required - true uses 50/50 split layout, false centers icon and text inline)",
+          "title": "string",
+          "titleSegments?": "TitleSegment[] - Array of { 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": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "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",
+          "featureContainerClassName?": "string",
+          "featureTextClassName?": "string"
+        },
+        "usage": "<FeatureCardSeventeen features={[{ id: '1', icon: Lightbulb, text: 'Innovation' }, { id: '2', icon: Palette, text: 'Design' }, { id: '3', icon: Award, text: 'Quality' }]} animationType=\"slide-up\" variant=\"card\" useUncappedRounding={false} useSplitLayout={true} title=\"Our Core Values\" description=\"The principles that guide everything we do\" textboxLayout=\"default\" useInvertedBackground=\"noInvert\" />"
+      },
+      {
+        "import": "import FeatureCardEighteen from '@/components/sections/feature/FeatureCardEighteen';",
+        "name": "FeatureCardEighteen",
+        "path": "@/components/sections/feature/FeatureCardEighteen",
+        "description": "Comparison section with media, negative and positive cards showing contrasting features.",
+        "details": "Use for before/after comparisons with visual media. Layout: TextBox Header → Two side-by-side cards with media at top, title, and feature lists. Negative card has X icons at 50% opacity, positive card has Check icons. Each card supports image or video media. Best for comparison marketing with visual demonstrations.",
+        "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": {
+            "title": {
+              "required": true,
+              "example": "Manual Work",
+              "minChars": 2,
+              "maxChars": 40
+            },
+            "items": {
+              "required": true,
+              "example": ["Prone to Errors", "Limited Hours", "High Costs"],
+              "minItems": 2,
+              "maxItems": 10,
+              "note": "List of negative aspects displayed with X icons"
+            },
+            "imageSrc": {
+              "required": false,
+              "example": "/images/manual-work.webp",
+              "note": "Image source URL (either imageSrc or videoSrc)"
+            },
+            "videoSrc": {
+              "required": false,
+              "example": "/videos/manual-work.mp4",
+              "note": "Video source URL (either imageSrc or videoSrc)"
+            }
+          },
+          "positiveCardRules": {
+            "title": {
+              "required": true,
+              "example": "Our Solution",
+              "minChars": 2,
+              "maxChars": 40
+            },
+            "items": {
+              "required": true,
+              "example": ["Smart Automation", "24/7 Availability", "Cost Effective"],
+              "minItems": 2,
+              "maxItems": 10,
+              "note": "List of positive aspects displayed with Check icons"
+            },
+            "imageSrc": {
+              "required": false,
+              "example": "/images/automation.webp",
+              "note": "Image source URL (either imageSrc or videoSrc)"
+            },
+            "videoSrc": {
+              "required": false,
+              "example": "/videos/automation.mp4",
+              "note": "Video source URL (either imageSrc or videoSrc)"
+            }
+          }
+        },
+        "propsSchema": {
+          "negativeCard": "{ title: string, items: string[], imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string } (required)",
+          "positiveCard": "{ title: string, items: string[], imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string } (required)",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)",
+          "title": "string",
+          "titleSegments?": "TitleSegment[]",
+          "description": "string",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required)",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "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",
+          "cardMediaWrapperClassName?": "string",
+          "cardMediaClassName?": "string",
+          "cardTitleClassName?": "string",
+          "itemsListClassName?": "string",
+          "itemClassName?": "string",
+          "itemIconClassName?": "string",
+          "itemTextClassName?": "string"
+        },
+        "usage": "<FeatureCardEighteen negativeCard={{ title: 'Manual Work', imageSrc: '/images/manual.webp', items: ['Prone to Errors', 'Limited Hours'] }} positiveCard={{ title: 'Our Solution', imageSrc: '/images/automation.webp', items: ['Smart Automation', '24/7 Availability'] }} animationType=\"slide-up\" title=\"What makes us stand out\" description=\"See how we compare\" textboxLayout=\"default\" useInvertedBackground=\"noInvert\" />"
+      },
+      {
+        "import": "import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';",
+        "name": "FeatureCardNineteen",
+        "path": "@/components/sections/feature/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": {
+            "id": {
+              "required": true,
+              "example": 1,
+              "note": "Numeric ID used to generate step number (01, 02, etc.)"
+            },
+            "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": 10,
+              "maxChars": 250
+            },
+            "imageSrc": {
+              "required": false,
+              "example": "/images/strategy.webp",
+              "note": "Image source URL (either imageSrc or 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<{ id: number, tag: string, title: string, subtitle: string, description: string, imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string, buttons?: ButtonConfig[] }> (required)",
+          "title": "string",
+          "titleSegments?": "TitleSegment[]",
+          "description": "string",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required)",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "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"
+        },
+        "usage": "<FeatureCardNineteen features={[{ id: 1, 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=\"noInvert\" />"
+      },
+      {
+        "import": "import FeatureCardTwenty from '@/components/sections/feature/FeatureCardTwenty';",
+        "name": "FeatureCardTwenty",
+        "path": "@/components/sections/feature/FeatureCardTwenty",
+        "description": "Split layout feature section with stacked images on left and fixed sticky text content on right.",
+        "details": "Use for product showcases or feature presentations with multiple large images. Layout: Desktop - Stacked full-height images (left 50%) with fixed/sticky TextBox (right 50%) that stays centered while scrolling. Mobile - Auto-scrolling image carousel followed by centered text content. Best for 2-6 high-quality product or feature images with accompanying marketing copy.",
+        "constraints": {
+          "textRules": {
+            "title": {
+              "required": true,
+              "example": "Join the Founding Family",
+              "minChars": 2,
+              "maxChars": 60
+            },
+            "description": {
+              "required": true,
+              "example": "Be one of the first to welcome Memo into your home. Guide what Memo learns and help shape the future.",
+              "minChars": 10,
+              "maxChars": 300
+            },
+            "tag": {
+              "required": false,
+              "example": "Early Access",
+              "minChars": 2,
+              "maxChars": 30
+            }
+          },
+          "imagesRules": {
+            "minItems": 2,
+            "maxItems": 6,
+            "recommendedItems": 4,
+            "id": {
+              "required": true,
+              "example": 1,
+              "note": "Unique numeric identifier for each image"
+            },
+            "imageSrc": {
+              "required": false,
+              "example": "/images/product-front.webp",
+              "note": "Image source URL (either imageSrc or videoSrc)"
+            },
+            "videoSrc": {
+              "required": false,
+              "example": "/videos/product-demo.mp4",
+              "note": "Video source URL (either imageSrc or videoSrc)"
+            }
+          }
+        },
+        "propsSchema": {
+          "images": "Array<{ id: number, imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }> (required, 2-6 items recommended)",
+          "title": "string",
+          "titleSegments?": "TitleSegment[]",
+          "description": "string",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required)",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "ariaLabel?": "string (default: 'Feature section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "textBoxClassName?": "string",
+          "titleClassName?": "string",
+          "descriptionClassName?": "string",
+          "tagClassName?": "string",
+          "buttonContainerClassName?": "string",
+          "buttonClassName?": "string",
+          "buttonTextClassName?": "string",
+          "titleImageWrapperClassName?": "string",
+          "titleImageClassName?": "string",
+          "imagesContainerClassName?": "string",
+          "imageWrapperClassName?": "string",
+          "imageClassName?": "string"
+        },
+        "usage": "<FeatureCardTwenty images={[{ id: 1, imageSrc: '/images/product1.webp' }, { id: 2, imageSrc: '/images/product2.webp' }, { id: 3, imageSrc: '/images/product3.webp' }, { id: 4, imageSrc: '/images/product4.webp' }]} title=\"Join the Founding Family\" description=\"Be one of the first to experience our product.\" buttons={[{ text: 'Apply Now' }]} textboxLayout=\"default\" useInvertedBackground=\"noInvert\" />"
+      },
+      {
+        "import": "import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';",
+        "name": "FeatureCardTwentyOne",
+        "path": "@/components/sections/feature/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?": "TitleSegment[]",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "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": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "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"
+        },
+        "usage": "<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=\"noInvert\" mediaPosition=\"left\" />"
+      }
+    ],
+    "product": [
+      {
+        "import": "import ProductCardOne from '@/components/sections/product/ProductCardOne';",
+        "name": "ProductCardOne",
+        "path": "@/components/sections/product/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) \u2192 Name (small text) \u2192 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' | 'uniform-staggered-items' | 'uniform-alternating-heights' | 'uniform-alternating-heights-inverted' | 'uniform-alternating-sizes' | 'uniform-alternating-sizes-inverted' | 'two-items-tall-short' | 'two-items-short-tall' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'four-items-2x2-alternating-heights' | 'four-items-2x2-alternating-heights-inverted' | 'four-items-2x2-staggered-grid' | 'four-items-2x2-staggered-grid-inverted' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right' | 'timeline' | 'timeline-three-columns' (required)",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
+          "containerStyle": "'default' | 'card' (required - 'default': individual items have card styling with gaps, 'card': entire grid wrapped in primary-button container)",
+          "uniformGridCustomHeightClasses?": "string (default: 'min-h-95 2xl:min-h-105')",
+          "title": "string",
+          "titleSegments?": "TitleSegment[] - Array of { type: 'text', content: string } | { type: 'image', src: string, alt?: string } for inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "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"
+        },
+        "usage": "<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={\"noInvert\"} />"
+      },
+      {
+        "import": "import ProductCardTwo from '@/components/sections/product/ProductCardTwo';",
+        "name": "ProductCardTwo",
+        "path": "@/components/sections/product/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) \u2192 Brand Name (small, muted) \u2192 Product Name (medium) \u2192 Star Rating + Review Count \u2192 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' | 'uniform-staggered-items' | 'uniform-alternating-heights' | 'uniform-alternating-heights-inverted' | 'uniform-alternating-sizes' | 'uniform-alternating-sizes-inverted' | 'two-items-tall-short' | 'two-items-short-tall' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'four-items-2x2-alternating-heights' | 'four-items-2x2-alternating-heights-inverted' | 'four-items-2x2-staggered-grid' | 'four-items-2x2-staggered-grid-inverted' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right' | 'timeline' | 'timeline-three-columns' (required)",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
+          "containerStyle": "'default' | 'card' (required - 'default': individual items have card styling with gaps, 'card': entire grid wrapped in primary-button container)",
+          "uniformGridCustomHeightClasses?": "string (default: 'min-h-95 2xl:min-h-105')",
+          "title": "string",
+          "titleSegments?": "TitleSegment[] - Array of { type: 'text', content: string } | { type: 'image', src: string, alt?: string } for inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "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",
+          "gridClassName?": "string",
+          "carouselClassName?": "string",
+          "controlsClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string"
+        },
+        "usage": "<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={\"noInvert\"} />"
+      },
+      {
+        "import": "import ProductCardThree from '@/components/sections/product/ProductCardThree';",
+        "name": "ProductCardThree",
+        "path": "@/components/sections/product/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) \u2192 Product Name \u2192 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' | 'uniform-staggered-items' | 'uniform-alternating-heights' | 'uniform-alternating-heights-inverted' | 'uniform-alternating-sizes' | 'uniform-alternating-sizes-inverted' | 'two-items-tall-short' | 'two-items-short-tall' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'four-items-2x2-alternating-heights' | 'four-items-2x2-alternating-heights-inverted' | 'four-items-2x2-staggered-grid' | 'four-items-2x2-staggered-grid-inverted' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right' | 'timeline' | 'timeline-three-columns' (required)",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
+          "containerStyle": "'default' | 'card' (required - 'default': individual items have card styling with gaps, 'card': entire grid wrapped in primary-button container)",
+          "uniformGridCustomHeightClasses?": "string (default: 'min-h-95 2xl:min-h-105')",
+          "title": "string",
+          "titleSegments?": "TitleSegment[] - Array of { type: 'text', content: string } | { type: 'image', src: string, alt?: string } for inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "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"
+        },
+        "usage": "<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={\"noInvert\"} />"
+      },
+      {
+        "import": "import ProductCardFour from '@/components/sections/product/ProductCardFour';",
+        "name": "ProductCardFour",
+        "path": "@/components/sections/product/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": "ProductCard[] - Array of { id: string, name: string, price: string, variant: string, imageSrc: string, imageAlt?: string, onFavorite?: () => void, onProductClick?: () => void, isFavorited?: boolean }",
+          "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+          "gridVariant": "'uniform-all-items-equal' | 'uniform-staggered-items' | 'uniform-alternating-heights' | 'uniform-alternating-heights-inverted' | 'uniform-alternating-sizes' | 'uniform-alternating-sizes-inverted' | 'two-items-tall-short' | 'two-items-short-tall' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'four-items-2x2-alternating-heights' | 'four-items-2x2-alternating-heights-inverted' | 'four-items-2x2-staggered-grid' | 'four-items-2x2-staggered-grid-inverted' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right' | 'timeline' | 'timeline-three-columns' (required)",
+          "uniformGridCustomHeightClasses?": "string (default: 'min-h-95 2xl:min-h-105')",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)",
+          "containerStyle": "'default' | 'card' (required - 'default': individual items have card styling with gaps, 'card': entire grid wrapped in primary-button container)",
+          "title": "string",
+          "titleSegments?": "TitleSegment[] - Array of { type: 'text', content: string } | { type: 'image', src: string, alt?: string } for inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard' (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",
+          "gridClassName?": "string",
+          "carouselClassName?": "string",
+          "controlsClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string"
+        },
+        "usage": "<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={\"noInvert\"} />"
+      },
+      {
+        "import": "import ProductCardFive from '@/components/sections/product/ProductCardFive';",
+        "name": "ProductCardFive",
+        "path": "@/components/sections/product/ProductCardFive",
+        "description": "Minimal product card with image, favorite toggle, and full-width action button.",
+        "details": "Use for simple product displays focused on quick actions. Card displays product image with favorite toggle at top, followed by a full-width button below. No product name or price text shown - ideal for visual-first, action-oriented product grids or when product details are shown elsewhere. Button uses theme-aware styling with special handling for hover-bubble (bgClassName: w-full) and icon-arrow (className: justify-between) variants. 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.",
+        "constraints": {
+          "textRules": {
+            "title": {
+              "required": true,
+              "example": "Shop Our Collection",
+              "minChars": 2,
+              "maxChars": 50
+            },
+            "description": {
+              "required": true,
+              "example": "Discover premium products with one-click shopping",
+              "minChars": 5,
+              "maxChars": 200
+            },
+            "tag": {
+              "required": false,
+              "example": "Best Sellers",
+              "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": {
+            "button": {
+              "required": true,
+              "structure": "ButtonConfig - { text: string, id: string, href?: string, onClick?: () => void, props?: Partial<ButtonPropsForVariant> }",
+              "note": "Each product must have a button config. Button text typically: 'Add to Cart', 'Buy Now', 'Shop Now', etc."
+            },
+            "imageSrc": {
+              "required": true,
+              "example": "/product.jpg",
+              "note": "Product image URL"
+            }
+          }
+        },
+        "propsSchema": {
+          "products": "ProductCard[] - Array of { id: string, button: ButtonConfig, imageSrc: string, imageAlt?: string, onFavorite?: () => void, isFavorited?: boolean }",
+          "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+          "gridVariant": "'uniform-all-items-equal' | 'uniform-staggered-items' | 'uniform-alternating-heights' | 'uniform-alternating-heights-inverted' | 'uniform-alternating-sizes' | 'uniform-alternating-sizes-inverted' | 'two-items-tall-short' | 'two-items-short-tall' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'four-items-2x2-alternating-heights' | 'four-items-2x2-alternating-heights-inverted' | 'four-items-2x2-staggered-grid' | 'four-items-2x2-staggered-grid-inverted' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right' | 'timeline' | 'timeline-three-columns' (required)",
+          "uniformGridCustomHeightClasses?": "string (default: 'min-h-95 2xl:min-h-105')",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)",
+          "containerStyle": "'default' | 'card' (required - 'default': individual items have card styling with gaps, 'card': entire grid wrapped in primary-button container)",
+          "title": "string",
+          "titleSegments?": "TitleSegment[] - Array of { type: 'text', content: string } | { type: 'image', src: string, alt?: string } for inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard' (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",
+          "cardButtonClassName?": "string",
+          "gridClassName?": "string",
+          "carouselClassName?": "string",
+          "controlsClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string"
+        },
+        "usage": "<ProductCardFive products={[{ id: '1', button: { text: 'Add to Cart', id: 'add-1' }, imageSrc: '/product.jpg', imageAlt: 'Product image', isFavorited: false, onFavorite: () => console.log('favorited') }]} title=\"Shop Our Collection\" description=\"Discover premium products with one-click shopping\" tag=\"Best Sellers\" tagIcon={Package} textboxLayout=\"default\" gridVariant=\"uniform-all-items-equal\" animationType=\"slide-up\" useInvertedBackground={\"noInvert\"} />"
+      },
+      {
+        "import": "import ProductCardSix from '@/components/sections/product/ProductCardSix';",
+        "name": "ProductCardSix",
+        "path": "@/components/sections/product/ProductCardSix",
+        "description": "Full-bleed product card with image background, overlay title, and action button.",
+        "details": "Use for hero-style product displays with prominent imagery and minimal text. Layout: Full product image as background with overlaid content. Title positioned at top-left in white text. Arrow button positioned at bottom-right for 'view details' action. The entire card is clickable. Best for fashion, lifestyle, or visual-focused product catalogs where imagery drives engagement. Image fills entire card with rounded corners, product name overlays at top, and primary button at bottom-right. Each card has favorite button overlay on image. Does NOT show: price, ratings, brand name, 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": "Winter Collections",
+              "minChars": 2,
+              "maxChars": 50,
+              "note": "Displayed as large overlay text on image"
+            },
+            "price": {
+              "required": true,
+              "example": "$150",
+              "minChars": 1,
+              "maxChars": 20,
+              "note": "Included in type but not displayed in this variant"
+            }
+          },
+          "mediaRules": {
+            "imageSrc": {
+              "required": true,
+              "example": "/product.jpg",
+              "note": "Image fills entire card as background. Use high-quality, visually striking images."
+            },
+            "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' | 'uniform-staggered-items' | 'uniform-alternating-heights' | 'uniform-alternating-heights-inverted' | 'uniform-alternating-sizes' | 'uniform-alternating-sizes-inverted' | 'two-items-tall-short' | 'two-items-short-tall' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'four-items-2x2-alternating-heights' | 'four-items-2x2-alternating-heights-inverted' | 'four-items-2x2-staggered-grid' | 'four-items-2x2-staggered-grid-inverted' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right' | 'timeline' | 'timeline-three-columns' (required)",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
+          "containerStyle": "'default' | 'card' (required - 'default': individual items have card styling with gaps, 'card': entire grid wrapped in primary-button container)",
+          "uniformGridCustomHeightClasses?": "string (default: 'min-h-95 2xl:min-h-105')",
+          "title": "string",
+          "titleSegments?": "TitleSegment[] - Array of { type: 'text', content: string } | { type: 'image', src: string, alt?: string } for inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "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 - For styling product name overlay text",
+          "gridClassName?": "string",
+          "carouselClassName?": "string",
+          "controlsClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string"
+        },
+        "usage": "<ProductCardSix products={[{ id: '1', name: 'Winter Collections', price: '$150', imageSrc: '/product.jpg', onProductClick: () => window.open('https://example.com', '_blank') }]} title=\"Featured Collections\" description=\"Explore our curated seasonal collections\" gridVariant=\"uniform-all-items-equal\" textboxLayout=\"default\" animationType=\"slide-up\" containerStyle=\"default\" useInvertedBackground=\"noInvert\" />"
+      },
+      {
+        "import": "import ProductCardSeven from '@/components/sections/product/ProductCardSeven';",
+        "name": "ProductCardSeven",
+        "path": "@/components/sections/product/ProductCardSeven",
+        "description": "Minimal product card with image, action button overlay, and name/price row.",
+        "details": "Use for clean product displays with action button on image. Layout: Image with favorite button (bottom-left) and arrow action button (top-right) → Name and Price in single row below. Simple horizontal layout for product info. Best for product galleries where quick viewing action is prominent. Each card has image scales 105% on hover, arrow rotates 45deg on hover.",
+        "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' | 'uniform-staggered-items' | ... (required)",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)",
+          "containerStyle": "'default' | 'card' (required)",
+          "uniformGridCustomHeightClasses?": "string (default: 'min-h-95 2xl:min-h-105')",
+          "title": "string",
+          "titleSegments?": "TitleSegment[]",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required)",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "ariaLabel?": "string (default: 'Product section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "cardClassName?": "string",
+          "imageClassName?": "string",
+          "imageWrapperClassName?": "string",
+          "actionButtonClassName?": "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"
+        },
+        "usage": "<ProductCardSeven 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 collection\" gridVariant=\"uniform-all-items-equal\" textboxLayout=\"default\" animationType=\"slide-up\" containerStyle=\"default\" useInvertedBackground=\"noInvert\" />"
+      }
+    ],
+    "pricing": [
+      {
+        "import": "import PricingCardOne from '@/components/sections/pricing/PricingCardOne';",
+        "name": "PricingCardOne",
+        "path": "@/components/sections/pricing/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) \u2192 Price (large, bold) \u2192 Subtitle (plan description) \u2192 Divider \u2192 Feature List (with check icons). All cards must have badge, subtitle, and features for visual consistency. Best for SaaS 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' (required - controls GSAP scroll animations with stagger effect)",
+          "containerStyle": "'default' | 'card' (required - 'default': individual items have card styling with gaps, 'card': entire grid wrapped in primary-button container)",
+          "title": "string",
+          "titleSegments?": "TitleSegment[] - Array of { type: 'text', content: string } | { type: 'image', src: string, alt?: string } for inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "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"
+        },
+        "usage": "<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={\"noInvert\"} />"
+      },
+      {
+        "import": "import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';",
+        "name": "PricingCardTwo",
+        "path": "@/components/sections/pricing/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) \u2192 Price (large, bold, centered) \u2192 Subtitle (plan description, centered) \u2192 Two CTA Buttons (full-width, primary/secondary styling) \u2192 Divider \u2192 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 SaaS 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: ButtonConfig[], 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)",
+          "containerStyle": "'default' | 'card' (required - 'default': individual items have card styling with gaps, 'card': entire grid wrapped in primary-button container)",
+          "title": "string",
+          "titleSegments?": "TitleSegment[] - Array of { type: 'text', content: string } | { type: 'image', src: string, alt?: string } for inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "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"
+        },
+        "usage": "<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={\"noInvert\"} />"
+      },
+      {
+        "import": "import PricingCardThree from '@/components/sections/pricing/PricingCardThree';",
+        "name": "PricingCardThree",
+        "path": "@/components/sections/pricing/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) \u2192 Price (large, bold, centered) \u2192 Plan Name (centered) \u2192 Divider \u2192 Feature List (with check icons) \u2192 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: ButtonConfig[], 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)",
+          "containerStyle": "'default' | 'card' (required - 'default': individual items have card styling with gaps, 'card': entire grid wrapped in primary-button container)",
+          "title": "string",
+          "titleSegments?": "TitleSegment[] - Array of { type: 'text', content: string } | { type: 'image', src: string, alt?: string } for inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "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"
+        },
+        "usage": "<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={\"noInvert\"} />"
+      },
+      {
+        "import": "import PricingCardFour from '@/components/sections/pricing/PricingCardFour';",
+        "name": "PricingCardFour",
+        "path": "@/components/sections/pricing/PricingCardFour",
+        "description": "Split-panel pricing card with CTA cards on left and plan selector with features on right.",
+        "details": "Use for showcasing pricing with prominent call-to-action buttons alongside plan details. Layout: Left Panel (5 cols) - Tag → Title → Two CTA Cards with arrows. Right Panel (7 cols) - Plan Selector Tabs → Price → Subtitle → Divider → Features Grid. CTA cards use primary-button styling. Plan selector uses SelectorButton component. Features displayed in 2-column grid with bullet points. Best for services requiring both contact options and plan comparison. Grid-based layout (12-column system) for responsive behavior.",
+        "constraints": {
+          "textRules": {
+            "title": {
+              "required": true,
+              "example": "Peak Creations",
+              "minChars": 2,
+              "maxChars": 50
+            },
+            "tag": {
+              "required": true,
+              "example": "Available Now",
+              "minChars": 2,
+              "maxChars": 30
+            }
+          },
+          "ctaCardRules": {
+            "title": {
+              "required": true,
+              "example": "Book a call",
+              "minChars": 2,
+              "maxChars": 50
+            },
+            "description": {
+              "required": true,
+              "example": "A video call where we introduce ourselves and our services.",
+              "minChars": 5,
+              "maxChars": 100
+            },
+            "href": {
+              "required": false,
+              "example": "#contact"
+            },
+            "onClick": {
+              "required": false,
+              "note": "Optional click handler function"
+            }
+          },
+          "pricingPlanRules": {
+            "id": {
+              "required": true,
+              "example": "starter",
+              "minChars": 1,
+              "maxChars": 30
+            },
+            "name": {
+              "required": true,
+              "example": "Starter",
+              "minChars": 2,
+              "maxChars": 30
+            },
+            "price": {
+              "required": true,
+              "example": "$29/month",
+              "minChars": 1,
+              "maxChars": 20
+            },
+            "subtitle": {
+              "required": true,
+              "example": "Perfect for small teams and startups getting started",
+              "minChars": 5,
+              "maxChars": 100
+            },
+            "features": {
+              "required": true,
+              "example": ["Up to 5 team members", "10GB storage", "Email support"],
+              "note": "Array of feature strings displayed in 2-column grid"
+            }
+          }
+        },
+        "propsSchema": {
+          "title": "string",
+          "tag": "string",
+          "tagIcon?": "LucideIcon",
+          "ctaCards": "[CtaCard, CtaCard] - Exactly two CTA cards with title, description, href?, onClick?",
+          "plans": "Array<{ id: string, name: string, price: string, subtitle: string, features: string[] }>",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect on panels)",
+          "featuresTitle?": "string (default: \"What's included\")",
+          "ariaLabel?": "string (default: 'Pricing section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "leftPanelClassName?": "string",
+          "rightPanelClassName?": "string",
+          "tagClassName?": "string",
+          "titleClassName?": "string",
+          "ctaCardClassName?": "string",
+          "ctaCardTitleClassName?": "string",
+          "ctaCardDescriptionClassName?": "string",
+          "planSelectorClassName?": "string",
+          "priceClassName?": "string",
+          "subtitleClassName?": "string",
+          "featuresTitleClassName?": "string",
+          "featuresGridClassName?": "string",
+          "featureItemClassName?": "string"
+        },
+        "usage": "<PricingCardFour tag=\"Available Now\" tagIcon={Sparkles} title=\"Peak Creations\" useInvertedBackground=\"noInvert\" animationType=\"slide-up\" ctaCards={[{ title: 'Book a call', description: 'A video call where we introduce ourselves.', href: '#contact' }, { title: \"Didn't find what you need?\", description: \"We'll create a custom package for you.\", href: '#custom' }]} plans={[{ id: 'starter', name: 'Starter', price: '$29/month', subtitle: 'Perfect for small teams', features: ['Up to 5 team members', '10GB storage', 'Email support'] }]} />"
+      },
+      {
+        "import": "import PricingCardFive from '@/components/sections/pricing/PricingCardFive';",
+        "name": "PricingCardFive",
+        "path": "@/components/sections/pricing/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: ButtonConfig, featuresTitle: string, features: string[] }>",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)",
+          "variant": "'card' | 'border' (required)",
+          "title": "string",
+          "titleSegments?": "TitleSegment[] - Array of { 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": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "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"
+        },
+        "usage": "<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\" variant=\"card\" title=\"Simple Pricing\" description=\"Choose the plan that fits your needs\" textboxLayout=\"default\" useInvertedBackground=\"noInvert\" />"
+      },
+      {
+        "import": "import PricingCardSix from '@/components/sections/pricing/PricingCardSix';",
+        "name": "PricingCardSix",
+        "path": "@/components/sections/pricing/PricingCardSix",
+        "description": "Clean pricing card with large price, subtitle description, feature checklist, full-width buttons, and optional bottom notes.",
+        "details": "Use for straightforward pricing displays with emphasis on the price point and clear feature lists. Layout: Large Price (4xl-5xl, e.g., '$25/month') → Subtitle/Description (base text, 2-line clamp) → Feature List (checkmarks via PricingFeatureList) → Full-width Buttons (max 2, stacked) → Bottom Notes (optional, inline with bullet points). Cards use justify-between for even spacing. Each plan can have up to 2 buttons and optional bottom notes for additional info like 'Cancel anytime'. Uses CardStack with uniform-all-items-equal grid. Perfect for SaaS pricing, 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)",
+              "price": "string - Price display text, e.g., '$25/month' (required)",
+              "subtitle": "string - Plan description (required)",
+              "features": "string[] - List of features with checkmarks (required)",
+              "buttons": "ButtonConfig[] - Full-width action buttons, max 2 (required)",
+              "bottomNotes": "string[] - Optional notes displayed with bullet points"
+            },
+            "note": "Each plan must have at least one button. Bottom notes are optional and display inline with bullet separators."
+          },
+          "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. First button uses primary style, second uses secondary. Button variant controlled by ThemeProvider."
+          }
+        },
+        "propsSchema": {
+          "plans": "PricingPlan[]",
+          "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+          "uniformGridCustomHeightClasses?": "string",
+          "animationType": "'none' | 'slide-up' | 'scale-in'",
+          "containerStyle": "'default' | 'card'",
+          "title": "string",
+          "titleSegments?": "TitleSegment[]",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "textboxLayout": "'default' | 'centered' | 'left'",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "ariaLabel?": "string (default: 'Pricing section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "cardClassName?": "string",
+          "textBoxTitleClassName?": "string",
+          "textBoxTitleImageWrapperClassName?": "string",
+          "textBoxTitleImageClassName?": "string",
+          "textBoxDescriptionClassName?": "string",
+          "priceClassName?": "string",
+          "subtitleClassName?": "string",
+          "featuresClassName?": "string",
+          "featureItemClassName?": "string",
+          "planButtonContainerClassName?": "string",
+          "planButtonClassName?": "string",
+          "bottomNotesContainerClassName?": "string",
+          "bottomNoteClassName?": "string",
+          "gridClassName?": "string",
+          "carouselClassName?": "string",
+          "controlsClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string"
+        },
+        "usage": "<PricingCardSix plans={[{ id: 'starter', price: '$25/month', subtitle: 'The entry-level pricing is affordable, making it accessible for small businesses', features: ['Up to 50 Sites Included', 'Ecommerce/Event Tracking', 'Easy Integration', 'API Access'], buttons: [{ text: 'Start your 30-days free trial', href: '#' }], bottomNotes: ['Change your tier anytime', 'Cancel anytime'] }]} animationType=\"slide-up\" containerStyle=\"default\" title=\"Choose Your Plan\" description=\"Select the perfect plan for your needs\" textboxLayout=\"default\" useInvertedBackground=\"noInvert\" />"
+      },
+      {
+        "import": "import PricingCardSeven from '@/components/sections/pricing/PricingCardSeven';",
+        "name": "PricingCardSeven",
+        "path": "@/components/sections/pricing/PricingCardSeven",
+        "description": "Interactive pricing card with Tag, dynamic price selector (SelectorButton), and full-width buttons.",
+        "details": "Use for pricing with multiple billing options (monthly/yearly, quarterly/annually). Layout: Tag (top, centered) → Dynamic Price (5xl-6xl, changes based on selector) → Subtitle (changes with price) → SelectorButton (toggle between pricing options) → Selector Note (optional, e.g., 'Save on annual plan') → Description → Full-width Buttons (max 2). Each card maintains its own state for the selected pricing option. Uses CardStack with uniform-all-items-equal grid. Perfect for SaaS with billing toggles, subscription comparisons, or tiered pricing with period options.",
+        "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)",
+              "tag": "string - Tag text displayed at top of card (required)",
+              "tagIcon": "LucideIcon - Optional icon for tag",
+              "pricingOptions": "PricingOption[] - Array of pricing options for selector (required, min 2)",
+              "defaultOption": "string - Value of default selected option (optional)",
+              "selectorNote": "string - Note below selector, e.g., 'Save 33%' (optional)",
+              "description": "string - Plan description (required)",
+              "buttons": "ButtonConfig[] - Action buttons, max 2 (required)"
+            },
+            "pricingOptionStructure": {
+              "value": "string - Unique value for option (required)",
+              "label": "string - Display label in selector (required)",
+              "price": "string - Price to display when selected (required)",
+              "subtitle": "string - Subtitle below price when selected (required)"
+            },
+            "note": "Each plan must have at least 2 pricing options for the selector to be useful. Price and subtitle change dynamically based on selection."
+          },
+          "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. Button variant controlled by ThemeProvider."
+          }
+        },
+        "propsSchema": {
+          "plans": "PricingPlan[]",
+          "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+          "uniformGridCustomHeightClasses?": "string",
+          "animationType": "'none' | 'slide-up' | 'scale-in'",
+          "containerStyle": "'default' | 'card'",
+          "title": "string",
+          "titleSegments?": "TitleSegment[]",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "textboxLayout": "'default' | 'centered' | 'left'",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "ariaLabel?": "string (default: 'Pricing section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "cardClassName?": "string",
+          "textBoxTitleClassName?": "string",
+          "textBoxTitleImageWrapperClassName?": "string",
+          "textBoxTitleImageClassName?": "string",
+          "textBoxDescriptionClassName?": "string",
+          "planTagClassName?": "string",
+          "priceClassName?": "string",
+          "subtitleClassName?": "string",
+          "selectorClassName?": "string",
+          "selectorNoteClassName?": "string",
+          "planDescriptionClassName?": "string",
+          "planButtonContainerClassName?": "string",
+          "planButtonClassName?": "string",
+          "gridClassName?": "string",
+          "carouselClassName?": "string",
+          "controlsClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string"
+        },
+        "usage": "<PricingCardSeven plans={[{ id: 'pro', tag: 'MOST POPULAR', pricingOptions: [{ value: 'monthly', label: 'Monthly', price: '$99', subtitle: 'Per Month' }, { value: 'yearly', label: 'Yearly', price: '$799', subtitle: 'Per Year' }], defaultOption: 'yearly', selectorNote: 'Save 33% with yearly', description: 'Full access to all features with priority support.', buttons: [{ text: 'Get Started', href: '#' }] }]} animationType=\"slide-up\" containerStyle=\"default\" title=\"Choose Your Plan\" description=\"Select the perfect plan for your needs\" textboxLayout=\"default\" useInvertedBackground=\"noInvert\" />"
+      },
+      {
+        "import": "import PricingCardEight from '@/components/sections/pricing/PricingCardEight';",
+        "name": "PricingCardEight",
+        "path": "@/components/sections/pricing/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 SaaS pricing, 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": "ButtonConfig[] - 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": "PricingPlan[]",
+          "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+          "uniformGridCustomHeightClasses?": "string",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal'",
+          "containerStyle": "'default' | 'card'",
+          "title": "string",
+          "titleSegments?": "TitleSegment[]",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description'",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "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"
+        },
+        "usage": "<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\" containerStyle=\"default\" title=\"Choose Your Plan\" description=\"Select the perfect plan for your needs\" textboxLayout=\"default\" useInvertedBackground=\"noInvert\" />"
+      },
+      {
+        "import": "import PricingCardNine from '@/components/sections/pricing/PricingCardNine';",
+        "name": "PricingCardNine",
+        "path": "@/components/sections/pricing/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": true,
+              "example": "/images/coaching-basic.jpg",
+              "note": "Image for the plan card"
+            },
+            "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: ButtonConfig, imageSrc: string, imageAlt?: string }>",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)",
+          "variant": "'card' | 'border' (required)",
+          "title": "string",
+          "titleSegments?": "TitleSegment[] - Array of { 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": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "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"
+        },
+        "usage": "<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\" variant=\"card\" title=\"Coaching Plans\" description=\"Choose the plan that fits your goals\" textboxLayout=\"default\" useInvertedBackground=\"noInvert\" />"
+      }
+    ],
+    "metric": [
+      {
+        "import": "import MetricCardOne from '@/components/sections/metrics/MetricCardOne';",
+        "name": "MetricCardOne",
+        "path": "@/components/sections/metrics/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) \u2192 Title (4xl, overlaps value with negative margin) \u2192 Description (base text, centered) \u2192 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": 10,
+              "note": "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' | 'uniform-staggered-items' | 'uniform-alternating-heights' | 'uniform-alternating-heights-inverted' | 'uniform-alternating-sizes' | 'uniform-alternating-sizes-inverted' | 'two-items-tall-short' | 'two-items-short-tall' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'four-items-2x2-alternating-heights' | 'four-items-2x2-alternating-heights-inverted' | 'four-items-2x2-staggered-grid' | 'four-items-2x2-staggered-grid-inverted' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right' | 'timeline' | 'timeline-three-columns' (required)",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
+          "containerStyle": "'default' | 'card' (required - 'default': individual items have card styling with gaps, 'card': entire grid wrapped in primary-button container)",
+          "uniformGridCustomHeightClasses?": "string",
+          "title": "string",
+          "titleSegments?": "TitleSegment[] - Array of { type: 'text', content: string } | { type: 'image', src: string, alt?: string } for inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "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"
+        },
+        "usage": "<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={\"noInvert\"} />"
+      },
+      {
+        "import": "import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';",
+        "name": "MetricCardTwo",
+        "path": "@/components/sections/metrics/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) \u2192 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' | 'uniform-staggered-items' | 'uniform-alternating-heights' | 'uniform-alternating-heights-inverted' | 'uniform-alternating-sizes' | 'uniform-alternating-sizes-inverted' | 'two-items-tall-short' | 'two-items-short-tall' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'four-items-2x2-alternating-heights' | 'four-items-2x2-alternating-heights-inverted' | 'four-items-2x2-staggered-grid' | 'four-items-2x2-staggered-grid-inverted' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right' | 'timeline' | 'timeline-three-columns' (required)",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
+          "containerStyle": "'default' | 'card' (required - 'default': individual items have card styling with gaps, 'card': entire grid wrapped in primary-button container)",
+          "uniformGridCustomHeightClasses?": "string",
+          "title": "string",
+          "titleSegments?": "TitleSegment[] - Array of { type: 'text', content: string } | { type: 'image', src: string, alt?: string } for inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "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"
+        },
+        "usage": "<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={\"noInvert\"} />"
+      },
+      {
+        "import": "import MetricCardThree from '@/components/sections/metrics/MetricCardThree';",
+        "name": "MetricCardThree",
+        "path": "@/components/sections/metrics/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) \u2192 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')",
+          "gridVariant": "'uniform-all-items-equal' | 'uniform-staggered-items' | 'uniform-alternating-heights' | 'uniform-alternating-heights-inverted' | 'uniform-alternating-sizes' | 'uniform-alternating-sizes-inverted' | 'two-items-tall-short' | 'two-items-short-tall' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'four-items-2x2-alternating-heights' | 'four-items-2x2-alternating-heights-inverted' | 'four-items-2x2-staggered-grid' | 'four-items-2x2-staggered-grid-inverted' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right' | 'timeline' | 'timeline-three-columns' (required)",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
+          "containerStyle": "'default' | 'card' (required - 'default': individual items have card styling with gaps, 'card': entire grid wrapped in primary-button container)",
+          "uniformGridCustomHeightClasses?": "string",
+          "title": "string",
+          "titleSegments?": "TitleSegment[] - Array of { type: 'text', content: string } | { type: 'image', src: string, alt?: string } for inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "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"
+        },
+        "usage": "<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\" gridVariant=\"uniform-all-items-equal\" textboxLayout=\"default\" animationType=\"slide-up\" useInvertedBackground={\"noInvert\"} />"
+      },
+      {
+        "import": "import MetricCardFour from '@/components/sections/metrics/MetricCardFour';",
+        "name": "MetricCardFour",
+        "path": "@/components/sections/metrics/MetricCardFour",
+        "description": "Horizontal timeline metric section with auto-advancing progress bars, icon badges, and shared media display.",
+        "details": "Use for icon-led metric displays with visual media context in a horizontal timeline layout. Displays 2-4 metric 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 an icon badge (primary-button, rounded-theme), title, and large value (7xl). 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 metric. Grid adapts: 2 items = 2 columns, 3 items = 3 columns, 4+ items = 4 columns. Automatically loops back to first card. Best for categorized statistics or KPIs that need visual identification with supporting media. 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 showcasing our growth and success",
+              "minChars": 5,
+              "maxChars": 250
+            },
+            "tag": {
+              "required": false,
+              "example": "Performance",
+              "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 badge"
+            },
+            "title": {
+              "required": true,
+              "example": "Growth Rate",
+              "minChars": 2,
+              "maxChars": 30,
+              "note": "Metric category/label displayed next to icon"
+            },
+            "value": {
+              "required": true,
+              "example": "250%",
+              "minChars": 1,
+              "maxChars": 15,
+              "note": "Large metric value displayed below icon and title"
+            }
+          },
+          "mediaRules": {
+            "imageSrc": {
+              "required": true,
+              "example": "/metric1.jpg",
+              "note": "Either imageSrc or videoSrc required per metric (discriminated union)"
+            },
+            "videoSrc": {
+              "required": true,
+              "example": "/metric1.mp4",
+              "note": "Either imageSrc or videoSrc required per metric (discriminated union)"
+            },
+            "imageAlt": {
+              "required": false,
+              "example": "Growth rate visualization",
+              "note": "Falls back to metric title if not provided"
+            },
+            "videoAriaLabel": {
+              "required": false,
+              "example": "Growth rate video",
+              "note": "Falls back to metric title if not provided"
+            }
+          },
+          "itemRules": {
+            "minItems": 2,
+            "maxItems": 4,
+            "recommendedItems": "2-4",
+            "note": "Works best with 2-4 metrics. Grid layout adapts based on item count."
+          }
+        },
+        "propsSchema": {
+          "metrics": "Array<{ id: string, icon: LucideIcon, title: string, value: string, imageAlt?: string, videoAriaLabel?: string } & ({ imageSrc: string, videoSrc?: never } | { videoSrc: string, imageSrc?: never })>",
+          "title": "string",
+          "titleSegments?": "TitleSegment[] - Array of { type: 'text', content: string } | { type: 'image', src: string, alt?: string } for inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "ariaLabel?": "string (default: 'Metrics 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",
+          "cardClassName?": "string",
+          "progressBarClassName?": "string",
+          "cardContentClassName?": "string",
+          "iconContainerClassName?": "string",
+          "iconClassName?": "string",
+          "metricTitleClassName?": "string",
+          "valueClassName?": "string",
+          "mediaContainerClassName?": "string",
+          "mediaClassName?": "string"
+        },
+        "usage": "<MetricCardFour metrics={[{ id: '1', icon: TrendingUp, title: 'Growth Rate', value: '250%', imageSrc: '/metric1.jpg' }, { id: '2', icon: Users, title: 'Active Users', value: '50K+', imageSrc: '/metric2.jpg' }]} title=\"Our Impact\" description=\"Key metrics showcasing our growth and success\" textboxLayout=\"default\" useInvertedBackground={\"noInvert\"} />"
+      },
+      {
+        "import": "import MetricCardFive from '@/components/sections/metrics/MetricCardFive';",
+        "name": "MetricCardFive",
+        "path": "@/components/sections/metrics/MetricCardFive",
+        "description": "Vertical stack metric cards with split layout showing large value and description.",
+        "details": "Use for displaying key metrics with simple value-description pairs. Uses CardList with variant system for card or border layouts. Layout: Optional TextBox Header → Vertical Stack of Metric Cards. Each card has horizontal split (md breakpoint): Left side (50%): Large metric value (9xl on desktop). Right side (50%): Description text. 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 simple statistics, impact metrics, or KPIs where clean presentation is important.",
+        "constraints": {
+          "textRules": {
+            "title": {
+              "required": true,
+              "example": "Our Impact in Numbers",
+              "minChars": 2,
+              "maxChars": 50
+            },
+            "description": {
+              "required": true,
+              "example": "See how we're making a difference",
+              "minChars": 0,
+              "maxChars": 300
+            },
+            "tag": {
+              "required": false,
+              "example": "Metrics",
+              "minChars": 2,
+              "maxChars": 30
+            }
+          },
+          "metricRules": {
+            "id": {
+              "required": true,
+              "example": "1",
+              "minChars": 1,
+              "maxChars": 20
+            },
+            "value": {
+              "required": true,
+              "example": "6.5M+",
+              "minChars": 1,
+              "maxChars": 20
+            },
+            "description": {
+              "required": true,
+              "example": "People have turned to our platform for support",
+              "minChars": 5,
+              "maxChars": 150
+            }
+          }
+        },
+        "propsSchema": {
+          "metrics": "Array<{ id: string, value: string, description: string }>",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)",
+          "variant": "'card' | 'border' (required)",
+          "title": "string",
+          "titleSegments?": "TitleSegment[] - Array of { 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": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "ariaLabel?": "string (default: 'Metrics 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",
+          "metricValueClassName?": "string",
+          "metricDescriptionClassName?": "string"
+        },
+        "usage": "<MetricCardFive metrics={[{ id: '1', value: '6.5M+', description: 'People have turned to our platform for support' }, { id: '2', value: '96%', description: 'Users report improved outcomes' }]} animationType=\"slide-up\" variant=\"border\" title=\"Our Impact\" description=\"\" textboxLayout=\"default\" useInvertedBackground=\"noInvert\" />"
+      },
+      {
+        "import": "import MetricCardSix from '@/components/sections/metrics/MetricCardSix';",
+        "name": "MetricCardSix",
+        "path": "@/components/sections/metrics/MetricCardSix",
+        "description": "Metric card with tag badge, title, and large value at bottom.",
+        "details": "Use for categorized metric displays with prominent visual hierarchy. Layout: Tag Component (with icon) → Title (3xl text) → Large Value (9xl on mobile, 7xl on lg, bold, at bottom). Card uses space-between flex layout for visual separation between top content (tag/title) and bottom value. Tag component includes icon and label in card styling. All fields are required for visual consistency. Best for metrics that benefit from categorization, contextual labels, or when you need to group related statistics. 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": "98%",
+              "minChars": 1,
+              "maxChars": 15,
+              "note": "Large metric value displayed at bottom of card"
+            },
+            "tag": {
+              "required": true,
+              "example": "Satisfaction",
+              "minChars": 2,
+              "maxChars": 30,
+              "note": "Tag label displayed at top of card in Tag component"
+            },
+            "tagIcon": {
+              "required": false,
+              "example": "TrendingUp",
+              "note": "Optional Lucide icon displayed in Tag component"
+            },
+            "title": {
+              "required": true,
+              "example": "Customer Satisfaction Rate",
+              "minChars": 5,
+              "maxChars": 100,
+              "note": "Metric description/title displayed below tag"
+            }
+          }
+        },
+        "propsSchema": {
+          "metrics": "Array<{ id: string, value: string, tag: string, tagIcon?: LucideIcon, title: string }>",
+          "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+          "gridVariant": "'uniform-all-items-equal' | 'uniform-staggered-items' | 'uniform-alternating-heights' | 'uniform-alternating-heights-inverted' | 'uniform-alternating-sizes' | 'uniform-alternating-sizes-inverted' | 'two-items-tall-short' | 'two-items-short-tall' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'four-items-2x2-alternating-heights' | 'four-items-2x2-alternating-heights-inverted' | 'four-items-2x2-staggered-grid' | 'four-items-2x2-staggered-grid-inverted' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right' | 'timeline' | 'timeline-three-columns' (required)",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
+          "containerStyle": "'default' | 'card' (required - 'default': individual items have card styling with gaps, 'card': entire grid wrapped in primary-button container)",
+          "uniformGridCustomHeightClasses?": "string",
+          "title": "string",
+          "titleSegments?": "TitleSegment[] - Array of { type: 'text', content: string } | { type: 'image', src: string, alt?: string } for inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "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 at bottom",
+          "metricTagClassName?": "string - For styling the Tag component",
+          "metricTitleClassName?": "string - For styling the metric title/description text",
+          "gridClassName?": "string",
+          "carouselClassName?": "string",
+          "controlsClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string"
+        },
+        "usage": "<MetricCardSix metrics={[{ id: '1', value: '98%', tag: 'Satisfaction', tagIcon: TrendingUp, title: 'Customer Satisfaction Rate' }, { id: '2', value: '50K+', tag: 'Users', tagIcon: Users, title: 'Active Users Worldwide' }]} title=\"Our Impact\" description=\"Key metrics that showcase our growth\" gridVariant=\"uniform-all-items-equal\" textboxLayout=\"default\" animationType=\"slide-up\" containerStyle=\"default\" useInvertedBackground=\"noInvert\" />"
+      },
+      {
+        "import": "import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';",
+        "name": "MetricCardSeven",
+        "path": "@/components/sections/metrics/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')",
+          "gridVariant": "'uniform-all-items-equal' | 'uniform-staggered-items' | 'uniform-alternating-heights' | 'uniform-alternating-heights-inverted' | 'uniform-alternating-sizes' | 'uniform-alternating-sizes-inverted' | 'two-items-tall-short' | 'two-items-short-tall' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'four-items-2x2-alternating-heights' | 'four-items-2x2-alternating-heights-inverted' | 'four-items-2x2-staggered-grid' | 'four-items-2x2-staggered-grid-inverted' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right' | 'timeline' | 'timeline-three-columns' (required)",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
+          "containerStyle": "'default' | 'card' (required - 'default': individual items have card styling with gaps, 'card': entire grid wrapped in primary-button container)",
+          "uniformGridCustomHeightClasses?": "string",
+          "title": "string",
+          "titleSegments?": "TitleSegment[] - Array of { type: 'text', content: string } | { type: 'image', src: string, alt?: string } for inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "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"
+        },
+        "usage": "<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\" gridVariant=\"uniform-all-items-equal\" textboxLayout=\"default\" animationType=\"slide-up\" containerStyle=\"default\" useInvertedBackground=\"noInvert\" />"
+      },
+      {
+        "import": "import MetricCardEight from '@/components/sections/metrics/MetricCardEight';",
+        "name": "MetricCardEight",
+        "path": "@/components/sections/metrics/MetricCardEight",
+        "description": "Metrics section with animated title, media, and horizontal metric items with card or border variant.",
+        "details": "Use for metrics sections with a prominent title and supporting image/video. Layout: Top Section (TextAnimation title on left, media on right) → Bottom Section (2-4 column grid of metrics). Each metric displays: Large value (h3) → Title text. Two variants available: 'border' shows accent top border on each metric, 'card' wraps each metric in card styling with rounded corners. Grid adapts based on item count (2 cols for 2 items, 3 cols for 3, 4 cols for 4+). Does not use CardStack - standalone section component.",
+        "constraints": {
+          "textRules": {
+            "title": {
+              "required": true,
+              "example": "From beginners to seasoned pros, I create custom plans tailored to help you succeed.",
+              "minChars": 20,
+              "maxChars": 200
+            }
+          },
+          "metricRules": {
+            "id": {
+              "required": true,
+              "example": "1",
+              "minChars": 1,
+              "maxChars": 20
+            },
+            "value": {
+              "required": true,
+              "example": "15+",
+              "minChars": 1,
+              "maxChars": 15,
+              "note": "Large metric value displayed prominently"
+            },
+            "title": {
+              "required": true,
+              "example": "Years of experience",
+              "minChars": 2,
+              "maxChars": 50,
+              "note": "Short description below the value"
+            }
+          },
+          "itemRules": {
+            "minItems": 2,
+            "maxItems": 4,
+            "recommendedItems": "4"
+          }
+        },
+        "propsSchema": {
+          "title": "string",
+          "imageSrc?": "string",
+          "imageAlt?": "string",
+          "videoSrc?": "string",
+          "videoAriaLabel?": "string",
+          "metrics": "Array<{ id: string, value: string, title: string }>",
+          "metricVariant": "'card' | 'border' (required - 'card': each metric wrapped in card styling, 'border': accent border at top of each metric)",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "ariaLabel?": "string (default: 'Metrics section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "topSectionClassName?": "string",
+          "textWrapperClassName?": "string",
+          "titleClassName?": "string",
+          "mediaWrapperClassName?": "string",
+          "mediaClassName?": "string",
+          "metricsContainerClassName?": "string",
+          "metricClassName?": "string",
+          "metricBorderClassName?": "string",
+          "valueClassName?": "string",
+          "metricTitleClassName?": "string"
+        },
+        "usage": "<MetricCardEight title=\"From beginners to seasoned pros, I create custom plans tailored to help you succeed.\" imageSrc=\"/hero/hero-1.webp\" imageAlt=\"Coach with athlete\" metrics={[{ id: '1', value: '15+', title: 'Years of experience' }, { id: '2', value: '200+', title: 'Athletes coached' }, { id: '3', value: '500+', title: 'Race strategies' }, { id: '4', value: '10,000+', title: 'Training hours' }]} metricVariant=\"border\" useInvertedBackground=\"noInvert\" />"
+      },
+      {
+        "import": "import MetricCardTen from '@/components/sections/metrics/MetricCardTen';",
+        "name": "MetricCardTen",
+        "path": "@/components/sections/metrics/MetricCardTen",
+        "description": "Job listing style metric cards with title, subtitle, category indicator, value, and optional footer buttons.",
+        "details": "Use for job listings, pricing tiers, or any metric 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
+            }
+          },
+          "metricRules": {
+            "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": {
+          "metrics": "Array<{ id: string, title: string, subtitle: string, category: string, value: string, buttons?: ButtonConfig[] }>",
+          "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+          "uniformGridCustomHeightClasses?": "string",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal'",
+          "containerStyle": "'default' | 'card'",
+          "title": "string",
+          "titleSegments?": "TitleSegment[]",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "textboxLayout": "'default' | 'centered' | 'left' | 'right' | 'spread'",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "ariaLabel?": "string (default: 'Metrics 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"
+        },
+        "usage": "<MetricCardTen metrics={[{ 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=\"noInvert\" animationType=\"slide-up\" containerStyle=\"default\" />"
+      },
+      {
+        "import": "import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';",
+        "name": "MetricCardEleven",
+        "path": "@/components/sections/metrics/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?": "TitleSegment[]",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image'",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "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"
+        },
+        "usage": "<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=\"noInvert\" animationType=\"slide-up\" />"
+      },
+      {
+        "import": "import MetricCardTwelve from '@/components/sections/metrics/MetricCardTwelve';",
+        "name": "MetricCardTwelve",
+        "path": "@/components/sections/metrics/MetricCardTwelve",
+        "description": "Hero media with title overlay and flexible metric cards grid below. Supports 1-3 KPI metrics with adaptive layouts.",
+        "details": "Use for showcasing a hero image/video with centered title (mix-blend-difference effect) and metric KPIs below. Layout adapts based on metric count: 1 metric = 2-col (metric + media), 2 metrics = 3-col (metric | media | metric), 3 metrics = 3-col metrics row + full-width media below (16/3 aspect). Each metric card has icon, title, and large value. On mobile, items stack vertically with aspect-video. Supports GSAP scroll-triggered animations.",
+        "constraints": {
+          "heroMediaRules": {
+            "title": {
+              "required": true,
+              "example": "Memo works autonomously in your kitchen every day",
+              "minChars": 5,
+              "maxChars": 80,
+              "note": "Centered title with mix-blend-difference effect"
+            },
+            "media": {
+              "required": true,
+              "note": "Either imageSrc or videoSrc must be provided"
+            }
+          },
+          "metricRules": {
+            "icon": {
+              "required": true,
+              "example": "Zap from lucide-react",
+              "note": "LucideIcon displayed in primary button styled container"
+            },
+            "title": {
+              "required": true,
+              "example": "Active Users",
+              "minChars": 2,
+              "maxChars": 30,
+              "note": "Metric label next to icon"
+            },
+            "value": {
+              "required": true,
+              "example": "50,000",
+              "minChars": 1,
+              "maxChars": 15,
+              "note": "Large metric value displayed below"
+            }
+          },
+          "bottomMediaRules": {
+            "media": {
+              "required": true,
+              "note": "Either imageSrc or videoSrc must be provided"
+            }
+          },
+          "itemRules": {
+            "minItems": 1,
+            "maxItems": 3,
+            "recommendedItems": "2-3"
+          }
+        },
+        "propsSchema": {
+          "heroMedia": "{ title: string, imageSrc?: string, imageAlt?: string, videoSrc?: string, videoAriaLabel?: string }",
+          "metrics": "Array<{ icon: LucideIcon, title: string, value: string }>",
+          "bottomMedia": "{ imageSrc?: string, imageAlt?: string, videoSrc?: string, videoAriaLabel?: string }",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal'",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "ariaLabel?": "string (default: 'Metrics section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "heroCardClassName?": "string",
+          "heroMediaClassName?": "string",
+          "heroTitleClassName?": "string",
+          "gridClassName?": "string",
+          "metricCardClassName?": "string",
+          "iconContainerClassName?": "string",
+          "iconClassName?": "string",
+          "metricTitleClassName?": "string",
+          "valueClassName?": "string",
+          "bottomMediaCardClassName?": "string",
+          "bottomMediaClassName?": "string"
+        },
+        "usage": "<MetricCardTwelve heroMedia={{ title: 'Memo works autonomously in your kitchen every day', imageSrc: '/hero/hero-1.webp', imageAlt: 'Robot working' }} metrics={[{ icon: Zap, title: 'Active Users', value: '50,000' }, { icon: Star, title: 'Tasks Completed', value: '1.2M' }]} bottomMedia={{ imageSrc: '/hero/hero-2.webp', imageAlt: 'Robot in action' }} useInvertedBackground=\"noInvert\" animationType=\"slide-up\" />"
+      },
+      {
+        "import": "import MetricCardThirteen from '@/components/sections/metrics/MetricCardThirteen';",
+        "name": "MetricCardThirteen",
+        "path": "@/components/sections/metrics/MetricCardThirteen",
+        "description": "Full-height metrics section with 3D globe background and TextBox header.",
+        "details": "Use for global presence or worldwide metrics display. Features a decorative 3D rotating globe (COBE) positioned behind content with fade mask. TextBox at top with title, description, tag, and buttons. Metrics cards grid at bottom (2-col mobile, 4-col desktop). Globe stays within content width bounds. Supports inverted backgrounds.",
+        "constraints": {
+          "textRules": {
+            "title": {
+              "required": true,
+              "example": "Innovating worldwide",
+              "minChars": 5,
+              "maxChars": 60
+            },
+            "description": {
+              "required": true,
+              "example": "Our global presence spans across continents",
+              "minChars": 10,
+              "maxChars": 200
+            },
+            "tag": {
+              "required": false,
+              "example": "Global Impact",
+              "minChars": 2,
+              "maxChars": 30
+            }
+          },
+          "metricRules": {
+            "id": {
+              "required": true,
+              "example": "1",
+              "note": "Unique identifier for each metric"
+            },
+            "label": {
+              "required": true,
+              "example": "Presence in",
+              "minChars": 2,
+              "maxChars": 30,
+              "note": "Short label above the value"
+            },
+            "value": {
+              "required": true,
+              "example": "4 continents",
+              "minChars": 1,
+              "maxChars": 25,
+              "note": "Metric value displayed prominently"
+            }
+          },
+          "itemRules": {
+            "minItems": 2,
+            "maxItems": 8,
+            "recommendedItems": 4
+          }
+        },
+        "propsSchema": {
+          "title": "string",
+          "titleSegments?": "TitleSegment[]",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "metrics": "Array<{ id: string, label: string, value: string }>",
+          "globeConfig?": "COBEOptions",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "ariaLabel?": "string (default: 'Metrics section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "textBoxClassName?": "string",
+          "titleClassName?": "string",
+          "descriptionClassName?": "string",
+          "tagClassName?": "string",
+          "buttonContainerClassName?": "string",
+          "buttonClassName?": "string",
+          "buttonTextClassName?": "string",
+          "titleImageWrapperClassName?": "string",
+          "titleImageClassName?": "string",
+          "globeWrapperClassName?": "string",
+          "globeClassName?": "string",
+          "metricsContainerClassName?": "string",
+          "metricCardClassName?": "string",
+          "metricLabelClassName?": "string",
+          "metricValueClassName?": "string"
+        },
+        "usage": "<MetricCardThirteen title=\"Innovating worldwide\" description=\"Our global presence spans across continents\" tag=\"Global Impact\" metrics={[{ id: '1', label: 'Presence in', value: '4 continents' }, { id: '2', label: 'Clients in', value: '55 countries' }, { id: '3', label: 'Manufacturing in', value: '5 plants' }, { id: '4', label: 'Employing', value: '1200+ people' }]} useInvertedBackground=\"noInvert\" />"
+      },
+      {
+        "import": "import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';",
+        "name": "MetricCardFourteen",
+        "path": "@/components/sections/metrics/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",
+          "metrics": "Array<{ id: string, value: string, description: string }>",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "ariaLabel?": "string (default: 'Metrics section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "titleClassName?": "string",
+          "tagClassName?": "string",
+          "metricsContainerClassName?": "string",
+          "metricClassName?": "string",
+          "valueClassName?": "string",
+          "descriptionClassName?": "string"
+        },
+        "usage": "<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=\"noInvert\" />"
+      }
+    ],
+    "team": [
+      {
+        "import": "import TeamCardOne from '@/components/sections/team/TeamCardOne';",
+        "name": "TeamCardOne",
+        "path": "@/components/sections/team/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) \u2192 Full Square Image \u2192 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": true,
+              "example": "/team/sophie.jpg",
+              "note": "Image path for team member photo (displays as square with rounded-theme)"
+            },
+            "imageAlt": {
+              "required": false,
+              "example": "Portrait of Sophie P.",
+              "note": "Alt text for image (defaults to member name if not provided)"
+            }
+          }
+        },
+        "propsSchema": {
+          "members": "Array<{ id: string, name: string, role: string, imageSrc: string, imageAlt?: string }>",
+          "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+          "gridVariant": "'uniform-all-items-equal' | 'uniform-staggered-items' | 'uniform-alternating-heights' | 'uniform-alternating-heights-inverted' | 'uniform-alternating-sizes' | 'uniform-alternating-sizes-inverted' | 'two-items-tall-short' | 'two-items-short-tall' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'four-items-2x2-alternating-heights' | 'four-items-2x2-alternating-heights-inverted' | 'four-items-2x2-staggered-grid' | 'four-items-2x2-staggered-grid-inverted' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right' | 'timeline' | 'timeline-three-columns' (required)",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
+          "containerStyle": "'default' | 'card' (required - 'default': individual items have card styling with gaps, 'card': entire grid wrapped in primary-button container)",
+          "uniformGridCustomHeightClasses?": "string (default: 'min-h-95 2xl:min-h-105')",
+          "title": "string",
+          "titleSegments?": "TitleSegment[] - Array of { type: 'text', content: string } | { type: 'image', src: string, alt?: string } for inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "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"
+        },
+        "usage": "<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={\"noInvert\"} />"
+      },
+      {
+        "import": "import TeamCardTwo from '@/components/sections/team/TeamCardTwo';",
+        "name": "TeamCardTwo",
+        "path": "@/components/sections/team/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 \u2192 Bottom Overlay Card (Name + Role Badge in header row \u2192 Description \u2192 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": true,
+              "example": "/team/member-1.jpg",
+              "note": "Image path for team member photo"
+            },
+            "imageAlt": {
+              "required": false,
+              "example": "Portrait of Alisa Hester",
+              "note": "Alt text for image (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, imageAlt?: string, socialLinks?: Array<{ icon: LucideIcon, url: string }> }>",
+          "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+          "gridVariant": "'uniform-all-items-equal' | 'uniform-staggered-items' | 'uniform-alternating-heights' | 'uniform-alternating-heights-inverted' | 'uniform-alternating-sizes' | 'uniform-alternating-sizes-inverted' | 'two-items-tall-short' | 'two-items-short-tall' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'four-items-2x2-alternating-heights' | 'four-items-2x2-alternating-heights-inverted' | 'four-items-2x2-staggered-grid' | 'four-items-2x2-staggered-grid-inverted' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right' | 'timeline' | 'timeline-three-columns' (required)",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
+          "containerStyle": "'default' | 'card' (required - 'default': individual items have card styling with gaps, 'card': entire grid wrapped in primary-button container)",
+          "uniformGridCustomHeightClasses?": "string (default: 'min-h-95 2xl:min-h-105')",
+          "title": "string",
+          "titleSegments?": "TitleSegment[] - Array of { type: 'text', content: string } | { type: 'image', src: string, alt?: string } for inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "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",
+          "arrowIconClassName?": "string",
+          "gridClassName?": "string",
+          "carouselClassName?": "string",
+          "controlsClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string"
+        },
+        "usage": "<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={\"noInvert\"} />"
+      },
+      {
+        "import": "import TeamCardThree from '@/components/sections/team/TeamCardThree';",
+        "name": "TeamCardThree",
+        "path": "@/components/sections/team/TeamCardThree",
+        "description": "Team member card with circular profile image, name, role, and social links.",
+        "details": "Use for clean, centered team member profiles. Layout: Circular Profile Image \u2192 Name \u2192 Role \u2192 Social Link Icons. Card has square aspect ratio image with rounded-theme styling. Name and role use tight line-height (1.15) for compact spacing. Social links are flexible - pass any Lucide icon with url. Icons use primary-button styling with text-background for contrast. All core fields required for visual consistency. Best for team grids, about pages, or staff directories. 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 Team",
+              "minChars": 2,
+              "maxChars": 35
+            },
+            "description": {
+              "required": true,
+              "example": "Meet the people who make it all possible",
+              "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": "Am\u00e9lie Laurent",
+              "minChars": 2,
+              "maxChars": 50,
+              "note": "Team member name displayed below image"
+            },
+            "role": {
+              "required": true,
+              "example": "Founder & CEO",
+              "minChars": 2,
+              "maxChars": 40,
+              "note": "Role/title displayed below name"
+            },
+            "imageSrc": {
+              "required": true,
+              "example": "/team/amelie.jpg",
+              "note": "Image path for team member photo (displays as square with rounded-theme)"
+            },
+            "imageAlt": {
+              "required": false,
+              "example": "Portrait of Am\u00e9lie Laurent",
+              "note": "Alt text for image (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, imageSrc: string, imageAlt?: string, socialLinks?: Array<{ icon: LucideIcon, url: string }> }>",
+          "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+          "uniformGridCustomHeightClasses?": "string (default: 'min-h-95 2xl:min-h-105')",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
+          "containerStyle": "'default' | 'card' (required - 'default': individual items have card styling with gaps, 'card': entire grid wrapped in primary-button container)",
+          "title": "string",
+          "titleSegments?": "TitleSegment[] - Array of { type: 'text', content: string } | { type: 'image', src: string, alt?: string } for inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "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",
+          "nameClassName?": "string",
+          "roleClassName?": "string",
+          "socialLinksClassName?": "string",
+          "socialIconClassName?": "string",
+          "gridClassName?": "string",
+          "carouselClassName?": "string",
+          "controlsClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string"
+        },
+        "usage": "<TeamCardThree members={[{ id: '1', name: 'Am\u00e9lie Laurent', role: 'Founder & CEO', imageSrc: '/team/amelie.jpg', socialLinks: [{ icon: Twitter, url: 'https://twitter.com/amelie' }, { icon: Linkedin, url: 'https://linkedin.com/in/amelie' }] }]} title=\"Our Team\" description=\"Get to know the people behind our success\" textboxLayout=\"default\" animationType=\"slide-up\" useInvertedBackground={\"noInvert\"} />"
+      },
+      {
+        "import": "import TeamCardFour from '@/components/sections/team/TeamCardFour';",
+        "name": "TeamCardFour",
+        "path": "@/components/sections/team/TeamCardFour",
+        "description": "Dual auto-scrolling marquee team section with horizontal team member cards moving in opposite directions.",
+        "details": "Use for dynamic team displays with continuous scrolling. Layout: Optional CardStackTextBox Header \u2192 Dual Auto-Scrolling Marquees (Top & Bottom). Each team card shows h-60 aspect-square media on left with name (3xl font-medium) and role (xl) on right in horizontal flex layout. Top marquee moves in one direction (default: left), bottom marquee automatically moves opposite direction (right). Both marquees use same speed and display same team members in reversed order to avoid perfect alignment. Uses AutoCarousel with dualMarquee support for smooth infinite scrolling. Speed is customizable (default: 40px/s). Supports both image and video media. Best for team showcases, staff galleries, or company culture sections. 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 3xl font-medium"
+            },
+            "role": {
+              "required": true,
+              "example": "CEO & Founder",
+              "minChars": 2,
+              "maxChars": 50,
+              "note": "Role/title displayed at xl size with 75% opacity"
+            },
+            "imageSrc": {
+              "required": false,
+              "example": "/team/sarah.jpg",
+              "note": "Image path for team member photo (h-60 aspect-square with rounded-theme)"
+            },
+            "videoSrc": {
+              "required": false,
+              "example": "/team/sarah.mp4",
+              "note": "Video path for team member (h-60 aspect-square with 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": 6,
+            "maxItems": 20,
+            "recommendedItems": "8-12",
+            "note": "Works best with 8-12 team members. Continuously scrolls with top and bottom marquees in opposite directions."
+          }
+        },
+        "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?": "TitleSegment[] - Array of { 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": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "speed?": "number (default: 40)",
+          "topMarqueeDirection?": "'left' | 'right' (default: 'left')",
+          "ariaLabel?": "string (default: 'Team section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "carouselClassName?": "string",
+          "bottomCarouselClassName?": "string",
+          "cardClassName?": "string",
+          "mediaWrapperClassName?": "string",
+          "mediaClassName?": "string",
+          "nameClassName?": "string",
+          "roleClassName?": "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"
+        },
+        "usage": "<TeamCardFour team={[{ id: '1', name: 'Sarah Johnson', role: 'CEO & Founder', imageSrc: '/team/sarah.jpg' }, { id: '2', name: 'Michael Chen', role: 'CTO', imageSrc: '/team/michael.jpg' }]} animationType=\"slide-up\" title=\"Meet Our Team\" description=\"The talented people behind our success\" textboxLayout=\"default\" useInvertedBackground={\"noInvert\"} tag=\"Team\" tagIcon={Users} speed={30} />"
+      },
+      {
+        "import": "import TeamCardFive from '@/components/sections/team/TeamCardFive';",
+        "name": "TeamCardFive",
+        "path": "@/components/sections/team/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 \u2192 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)"
+            },
+            "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?": "TitleSegment[] - Array of { 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": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "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"
+        },
+        "usage": "<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={\"noInvert\"} tag=\"Team\" tagIcon={Users} />"
+      },
+      {
+        "import": "import TeamCardSix from '@/components/sections/team/TeamCardSix';",
+        "name": "TeamCardSix",
+        "path": "@/components/sections/team/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": true,
+              "example": "/team/sarah.jpg",
+              "note": "Image path for team member photo (full-bleed with rounded-theme-capped)"
+            },
+            "imageAlt": {
+              "required": false,
+              "example": "Portrait of Sarah Johnson",
+              "note": "Alt text for image (defaults to member name if not provided)"
+            }
+          }
+        },
+        "propsSchema": {
+          "members": "Array<{ id: string, name: string, role: string, imageSrc: string, imageAlt?: string }>",
+          "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+          "gridVariant": "'uniform-all-items-equal' | 'uniform-staggered-items' | 'uniform-alternating-heights' | 'uniform-alternating-heights-inverted' | 'uniform-alternating-sizes' | 'uniform-alternating-sizes-inverted' | 'two-items-tall-short' | 'two-items-short-tall' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'four-items-2x2-alternating-heights' | 'four-items-2x2-alternating-heights-inverted' | 'four-items-2x2-staggered-grid' | 'four-items-2x2-staggered-grid-inverted' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right' | 'timeline' | 'timeline-three-columns' (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' (required)",
+          "containerStyle": "'default' | 'card' (required - 'default': individual items have card styling with gaps, 'card': entire grid wrapped in primary-button container)",
+          "title": "string",
+          "titleSegments?": "TitleSegment[] - Array of { type: 'text', content: string } | { type: 'image', src: string, alt?: string } for inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "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"
+        },
+        "usage": "<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={\"noInvert\"} tag=\"Team\" tagIcon={Users} />"
+      },
+      {
+        "import": "import TeamCardSeven from '@/components/sections/team/TeamCardSeven';",
+        "name": "TeamCardSeven",
+        "path": "@/components/sections/team/TeamCardSeven",
+        "description": "Responsive team showcase with circular avatars, progressive center-based sizing, and decorative background circles.",
+        "details": "Use for team showcases or social proof ('Trusted by 2M+ users'). Features horizontal row of circular avatars with progressive sizing from center outward (center largest, edges smallest). For even item counts, both middle avatars are largest. Responsive display: shows center 3 items on mobile (below 768px), up to 7 items on desktop. Mobile intelligently displays the center 3 from the full set. Decorative concentric circles in background with card styling, mask-fade-bottom effect, and opacity variations (25%, 50%, 75%). Title below avatars uses TextAnimation. Images wrapped in card styling with p-1 and rounded-theme. Uses resize detection for responsive behavior. Best for team galleries, user testimonials, or social proof sections. No grid/carousel - simple centered horizontal flex row.",
+        "constraints": {
+          "textRules": {
+            "title": {
+              "required": true,
+              "example": "Trusted by 2M+ users",
+              "minChars": 5,
+              "maxChars": 60
+            }
+          },
+          "teamMemberRules": {
+            "id": {
+              "required": true,
+              "example": "1",
+              "minChars": 1,
+              "maxChars": 20
+            },
+            "imageSrc": {
+              "required": true,
+              "example": "/team/sarah.jpg",
+              "note": "Image path for team member photo (displays as circular with progressive sizing)"
+            },
+            "imageAlt": {
+              "required": true,
+              "example": "Sarah Johnson",
+              "minChars": 2,
+              "maxChars": 50,
+              "note": "Alt text for accessibility"
+            }
+          },
+          "itemRules": {
+            "minItems": 3,
+            "maxItems": 12,
+            "recommendedItems": "5-7",
+            "note": "Shows center 3 items on mobile (below 768px), up to 7 items on desktop. Mobile displays center 3 from the full desktop set for visual consistency. Works best with 5-7 team members for balanced composition."
+          }
+        },
+        "propsSchema": {
+          "team": "Array<{ id: string, imageSrc: string, imageAlt: string }>",
+          "title": "string",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "ariaLabel?": "string (default: 'Team section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "circlesClassName?": "string",
+          "imagesContainerClassName?": "string",
+          "imageClassName?": "string",
+          "titleClassName?": "string"
+        },
+        "usage": "<TeamCardSeven team={[{ id: '1', imageSrc: '/team/sarah.jpg', imageAlt: 'Sarah Johnson' }, { id: '2', imageSrc: '/team/michael.jpg', imageAlt: 'Michael Chen' }, { id: '3', imageSrc: '/team/emma.jpg', imageAlt: 'Emma Davis' }, { id: '4', imageSrc: '/team/james.jpg', imageAlt: 'James Wilson' }, { id: '5', imageSrc: '/team/lisa.jpg', imageAlt: 'Lisa Anderson' }]} title=\"Trusted by 2M+ users\" useInvertedBackground={\"noInvert\"} />"
+      },
+      {
+        "import": "import TeamCardEight from '@/components/sections/team/TeamCardEight';",
+        "name": "TeamCardEight",
+        "path": "@/components/sections/team/TeamCardEight",
+        "description": "Minimal team card with avatar group, title, and tag in a single centered card layout.",
+        "details": "Use for compact team showcases or social proof sections. Features a single centered card containing: Tag at top, large centered title, and AvatarGroup showing team member photos. Responsive avatar display: shows 3 avatars on mobile (below 768px), 4 on desktop. Avatar images use progressive sizing with overlap effect. Best for 'Meet our team' callouts, social proof ('50+ professionals'), or team overview sections. Uses shouldUseInvertedText for proper text colors inside cards.",
+        "constraints": {
+          "textRules": {
+            "cardTitle": {
+              "required": true,
+              "example": "We have over 50 professionals ready to help you achieve your goals",
+              "minChars": 10,
+              "maxChars": 120
+            },
+            "cardTag": {
+              "required": true,
+              "example": "Join our growing team",
+              "minChars": 5,
+              "maxChars": 40
+            }
+          },
+          "teamMemberRules": {
+            "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": "/team/sarah.jpg",
+              "note": "Image path for team member 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 team members."
+          }
+        },
+        "propsSchema": {
+          "team": "Array<{ id: string, name: string, imageSrc: string, imageAlt?: string }>",
+          "cardTitle": "string",
+          "cardTag": "string",
+          "cardTagIcon?": "LucideIcon",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "ariaLabel?": "string (default: 'Team section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "cardClassName?": "string",
+          "avatarGroupClassName?": "string",
+          "avatarClassName?": "string",
+          "cardTitleClassName?": "string",
+          "cardTagClassName?": "string"
+        },
+        "usage": "<TeamCardEight team={[{ id: '1', name: 'Sarah Johnson', imageSrc: '/team/sarah.jpg' }, { id: '2', name: 'Michael Chen', imageSrc: '/team/michael.jpg' }, { id: '3', name: 'Emma Davis', imageSrc: '/team/emma.jpg' }, { id: '4', name: 'James Wilson', imageSrc: '/team/james.jpg' }]} cardTitle=\"We have over 50 professionals ready to help you\" cardTag=\"Join our growing team\" useInvertedBackground=\"noInvert\" />"
+      },
+      {
+        "import": "import TeamCardNine from '@/components/sections/team/TeamCardNine';",
+        "name": "TeamCardNine",
+        "path": "@/components/sections/team/TeamCardNine",
+        "description": "Team member card with split layout - text/social links on left, square image on right.",
+        "details": "Use for team member profiles with horizontal split layout. Layout: Card (p-4) → 2-column grid (50/50) → Left: Name + Role + Social Links (vertically centered) → Right: Square Image with rounded-theme. Social links use SocialLinks component with card styling. Name uses text-3xl, role uses text-lg with text-foreground. Image maintains aspect-square ratio. Hardcoded to uniform-all-items-equal grid with min-h-none for content-driven height. Best for team sections with social media presence or leadership pages. 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": "Ikta Sollork",
+              "minChars": 2,
+              "maxChars": 50,
+              "note": "Team member name displayed on left side"
+            },
+            "role": {
+              "required": true,
+              "example": "Founder / Data Analyst",
+              "minChars": 2,
+              "maxChars": 50,
+              "note": "Role/title displayed below name"
+            },
+            "imageSrc": {
+              "required": true,
+              "example": "/team/ikta.jpg",
+              "note": "Image path for team member photo (displays as square with rounded-theme)"
+            },
+            "imageAlt": {
+              "required": false,
+              "example": "Portrait of Ikta Sollork",
+              "note": "Alt text for image (defaults to member name if not provided)"
+            },
+            "socialLinks": {
+              "required": false,
+              "example": "[{ icon: Twitter, href: 'https://twitter.com/user', ariaLabel: 'Twitter' }]",
+              "note": "Array of social links with LucideIcon, href, and ariaLabel"
+            }
+          }
+        },
+        "propsSchema": {
+          "members": "Array<{ id: string, name: string, role: string, imageSrc: string, imageAlt?: string, socialLinks?: Array<{ icon: LucideIcon, href: string, ariaLabel: string }> }>",
+          "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
+          "containerStyle": "'default' | 'card' (required - 'default': individual items have card styling with gaps, 'card': entire grid wrapped in primary-button container)",
+          "title": "string",
+          "titleSegments?": "TitleSegment[] - Array of { type: 'text', content: string } | { type: 'image', src: string, alt?: string } for inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "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",
+          "contentClassName?": "string",
+          "nameClassName?": "string",
+          "roleClassName?": "string",
+          "socialLinksClassName?": "string",
+          "socialIconClassName?": "string",
+          "gridClassName?": "string",
+          "carouselClassName?": "string",
+          "controlsClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string"
+        },
+        "usage": "<TeamCardNine members={[{ id: '1', name: 'Ikta Sollork', role: 'Founder / Data Analyst', imageSrc: '/team/ikta.jpg', socialLinks: [{ icon: Twitter, href: 'https://twitter.com', ariaLabel: 'Twitter' }] }]} title=\"Meet Our Team\" description=\"Get to know the people behind our success\" textboxLayout=\"default\" animationType=\"slide-up\" containerStyle=\"default\" useInvertedBackground=\"noInvert\" />"
+      },
+      {
+        "import": "import TeamCardTen from '@/components/sections/team/TeamCardTen';",
+        "name": "TeamCardTen",
+        "path": "@/components/sections/team/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)"
+            },
+            "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",
+          "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": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "ariaLabel?": "string (default: 'Team section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "titleClassName?": "string",
+          "tagClassName?": "string",
+          "membersContainerClassName?": "string",
+          "memberClassName?": "string",
+          "mediaWrapperClassName?": "string",
+          "mediaClassName?": "string",
+          "nameClassName?": "string"
+        },
+        "usage": "<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=\"noInvert\" />"
+      },
+      {
+        "import": "import TeamCardEleven from '@/components/sections/team/TeamCardEleven';",
+        "name": "TeamCardEleven",
+        "path": "@/components/sections/team/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 → Group cards, each containing: Group title → Member rows with divider lines. Each member row shows: Circular avatar (left) → Title + Subtitle stacked (center) → Detail text (right). Uses CardList wrapper with 'card' variant 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 (displayed as circle)"
+            },
+            "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?": "TitleSegment[]",
+          "description": "string",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required)",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "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"
+        },
+        "usage": "<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=\"noInvert\" />"
+      }
+    ],
+    "testimonial": [
+      {
+        "import": "import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';",
+        "name": "TestimonialCardOne",
+        "path": "@/components/sections/testimonial/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 \u2192 Bottom Overlay Card (Star Rating \u2192 Name \u2192 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": true,
+              "example": "/testimonials/alisa.jpg",
+              "note": "Image path for customer photo"
+            },
+            "imageAlt": {
+              "required": false,
+              "example": "Portrait of Alisa Hester",
+              "note": "Alt text for image (defaults to customer name if not provided)"
+            }
+          }
+        },
+        "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' | 'uniform-staggered-items' | 'uniform-alternating-heights' | 'uniform-alternating-heights-inverted' | 'uniform-alternating-sizes' | 'uniform-alternating-sizes-inverted' | 'two-items-tall-short' | 'two-items-short-tall' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'four-items-2x2-alternating-heights' | 'four-items-2x2-alternating-heights-inverted' | 'four-items-2x2-staggered-grid' | 'four-items-2x2-staggered-grid-inverted' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right' | 'timeline' | 'timeline-three-columns' (required)",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
+          "containerStyle": "'default' | 'card' (required - 'default': individual items have card styling with gaps, 'card': entire grid wrapped in primary-button container)",
+          "title": "string",
+          "titleSegments?": "TitleSegment[] - Array of { type: 'text', content: string } | { type: 'image', src: string, alt?: string } for inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "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"
+        },
+        "usage": "<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={\"noInvert\"} />"
+      },
+      {
+        "import": "import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';",
+        "name": "TestimonialCardTwo",
+        "path": "@/components/sections/testimonial/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 \u2192 Name + Role \u2192 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' (required - controls GSAP scroll animations with stagger effect)",
+          "containerStyle": "'default' | 'card' (required - 'default': individual items have card styling with gaps, 'card': entire grid wrapped in primary-button container)",
+          "title": "string",
+          "titleSegments?": "TitleSegment[] - Array of { type: 'text', content: string } | { type: 'image', src: string, alt?: string } for inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "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"
+        },
+        "usage": "<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={\"noInvert\"} />"
+      },
+      {
+        "import": "import TestimonialCardThree from '@/components/sections/testimonial/TestimonialCardThree';",
+        "name": "TestimonialCardThree",
+        "path": "@/components/sections/testimonial/TestimonialCardThree",
+        "description": "Testimonial card with horizontal layout - circular image or icon next to name and handle, with testimonial text below.",
+        "details": "Use for displaying social media style testimonials. Layout: Row (Circular Image/Icon + Name + Handle) \u2192 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. Compact header with name and handle side by side. All text with consistent spacing. All core fields required for visual consistency. Best for social proof sections, review grids, 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": "What People Are Saying",
+              "minChars": 2,
+              "maxChars": 50
+            },
+            "description": {
+              "required": true,
+              "example": "Real feedback from real users",
+              "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": "Jack",
+              "minChars": 2,
+              "maxChars": 50,
+              "note": "Customer name"
+            },
+            "handle": {
+              "required": true,
+              "example": "@jack",
+              "minChars": 2,
+              "maxChars": 50,
+              "note": "Customer handle or username"
+            },
+            "testimonial": {
+              "required": true,
+              "example": "I've never seen anything like this before. It's amazing. I love it.",
+              "minChars": 10,
+              "maxChars": 500,
+              "note": "Testimonial text content"
+            },
+            "imageSrc": {
+              "required": false,
+              "example": "/testimonials/jack.jpg",
+              "note": "Optional image path for customer photo. If not provided, icon will be displayed instead."
+            },
+            "imageAlt": {
+              "required": false,
+              "example": "Portrait of Jack",
+              "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, handle: 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)",
+          "containerStyle": "'default' | 'card' (required - 'default': individual items have card styling with gaps, 'card': entire grid wrapped in primary-button container)",
+          "title": "string",
+          "titleSegments?": "TitleSegment[] - Array of { type: 'text', content: string } | { type: 'image', src: string, alt?: string } for inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "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",
+          "handleClassName?": "string",
+          "testimonialClassName?": "string",
+          "gridClassName?": "string",
+          "carouselClassName?": "string",
+          "controlsClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string"
+        },
+        "usage": "<TestimonialCardThree testimonials={[{ id: '1', name: 'Jack', handle: '@jack', testimonial: 'I\\'ve never seen anything like this before. It\\'s amazing. I love it.', icon: Package }]} title=\"What People Are Saying\" textboxLayout=\"default\" animationType=\"slide-up\" useInvertedBackground={\"noInvert\"} />"
+      },
+      {
+        "import": "import TestimonialCardFour from '@/components/sections/testimonial/TestimonialCardFour';",
+        "name": "TestimonialCardFour",
+        "path": "@/components/sections/testimonial/TestimonialCardFour",
+        "description": "Horizontal timeline testimonial section with auto-advancing progress bars, rating stars, and shared media display.",
+        "details": "Use for customer testimonials with visual media context in a horizontal timeline layout. Displays 2-4 testimonial 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 rating stars (filled with accent color), client name (2xl), role, and company. 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 testimonial. Grid adapts: 2 items = 2 columns, 3 items = 3 columns, 4+ items = 4 columns. Automatically loops back to first card. Best for photo-heavy testimonials or client showcases that need visual context. Optional header with title, description, tag, and buttons.",
+        "constraints": {
+          "textRules": {
+            "title": {
+              "required": true,
+              "example": "What Our Clients Say",
+              "minChars": 2,
+              "maxChars": 35
+            },
+            "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",
+              "minChars": 2,
+              "maxChars": 50,
+              "note": "Client name displayed as main heading"
+            },
+            "role": {
+              "required": true,
+              "example": "PM, Hourglass",
+              "minChars": 2,
+              "maxChars": 50,
+              "note": "Job title or role"
+            },
+            "company": {
+              "required": true,
+              "example": "Web Design Agency",
+              "minChars": 2,
+              "maxChars": 50,
+              "note": "Company or organization name"
+            },
+            "rating": {
+              "required": true,
+              "example": "5",
+              "note": "Number of stars (1-5), displayed as filled accent-colored stars"
+            }
+          },
+          "mediaRules": {
+            "imageSrc": {
+              "required": true,
+              "example": "/client1.jpg",
+              "note": "Either imageSrc or videoSrc required per testimonial (discriminated union)"
+            },
+            "videoSrc": {
+              "required": true,
+              "example": "/client1.mp4",
+              "note": "Either imageSrc or videoSrc required per testimonial (discriminated union)"
+            },
+            "imageAlt": {
+              "required": false,
+              "example": "Alisa Hester",
+              "note": "Falls back to client name if not provided"
+            },
+            "videoAriaLabel": {
+              "required": false,
+              "example": "Alisa Hester video testimonial",
+              "note": "Falls back to client name if not provided"
+            }
+          },
+          "itemRules": {
+            "minItems": 2,
+            "maxItems": 4,
+            "recommendedItems": "2-4",
+            "note": "Works best with 2-4 testimonials. Grid layout adapts based on item count."
+          }
+        },
+        "propsSchema": {
+          "testimonials": "Array<{ id: string, name: string, role: string, company: string, rating: number, imageAlt?: string, videoAriaLabel?: string } & ({ imageSrc: string, videoSrc?: never } | { videoSrc: string, imageSrc?: never })>",
+          "title": "string",
+          "titleSegments?": "TitleSegment[] - Array of { type: 'text', content: string } | { type: 'image', src: string, alt?: string } for inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "ariaLabel?": "string (default: 'Testimonials 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",
+          "cardClassName?": "string",
+          "progressBarClassName?": "string",
+          "cardContentClassName?": "string",
+          "ratingClassName?": "string",
+          "nameClassName?": "string",
+          "roleClassName?": "string",
+          "companyClassName?": "string",
+          "mediaContainerClassName?": "string",
+          "mediaClassName?": "string"
+        },
+        "usage": "<TestimonialCardFour testimonials={[{ id: '1', name: 'Alisa Hester', role: 'PM, Hourglass', company: 'Web Design Agency', rating: 5, imageSrc: '/client1.jpg' }, { id: '2', name: 'John Smith', role: 'CTO', company: 'Tech Solutions', rating: 5, imageSrc: '/client2.jpg' }]} title=\"What Our Clients Say\" description=\"Hear from those who've experienced our work\" textboxLayout=\"default\" useInvertedBackground={\"noInvert\"} />"
+      },
+      {
+        "import": "import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';",
+        "name": "TestimonialCardFive",
+        "path": "@/components/sections/testimonial/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 \u2192 Title (4xl, line-clamp-3) \u2192 Quote (lg, line-clamp-10) \u2192 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"
+            },
+            "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?": "TitleSegment[] - Array of { type: 'text', content: string } | { type: 'image', src: string, alt?: string } for inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "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"
+        },
+        "usage": "<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={\"noInvert\"} />"
+      },
+      {
+        "import": "import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';",
+        "name": "TestimonialCardSix",
+        "path": "@/components/sections/testimonial/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 \u2192 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: 30px/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?": "TitleSegment[] - Array of { 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": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "speed?": "number (default: 30)",
+          "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"
+        },
+        "usage": "<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={\"noInvert\"} />"
+      },
+      {
+        "import": "import TestimonialCardSeven from '@/components/sections/testimonial/TestimonialCardSeven';",
+        "name": "TestimonialCardSeven",
+        "path": "@/components/sections/testimonial/TestimonialCardSeven",
+        "description": "Vertical stack testimonial section with split card layout showing company branding and testimonial content side-by-side.",
+        "details": "Use for company testimonials with emphasis on brand identity. Uses CardList with variant system for card or border layouts. Layout: Optional TextBox Header → Vertical Stack of Testimonials. Each testimonial card has horizontal split (md breakpoint): Left side (50%): Company logo (image) OR company name (large text). Right side (50%): Quote text, author name, and 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-8 md:pb-10), no mobile divider. Text colors conditional on variant: border uses useInvertedBackground directly, card uses shouldUseLightText. Company name required, logo optional. Supports 0-2 buttons per testimonial with automatic primary/secondary styling via getButtonProps. Best for B2B testimonials, case studies, or client success stories where brand association is important.",
+        "constraints": {
+          "textRules": {
+            "title": {
+              "required": true,
+              "example": "What developers are saying",
+              "minChars": 2,
+              "maxChars": 50
+            },
+            "description": {
+              "required": true,
+              "example": "Hear from teams using our platform to accelerate their development",
+              "minChars": 5,
+              "maxChars": 250
+            },
+            "tag": {
+              "required": false,
+              "example": "Testimonials",
+              "minChars": 2,
+              "maxChars": 30
+            }
+          },
+          "testimonialRules": {
+            "id": {
+              "required": true,
+              "example": "ramp",
+              "minChars": 1,
+              "maxChars": 20
+            },
+            "companyName": {
+              "required": true,
+              "example": "Ramp",
+              "minChars": 2,
+              "maxChars": 50,
+              "note": "Always required. Displayed as large text when no logo provided."
+            },
+            "companyLogo": {
+              "required": false,
+              "example": "/logos/ramp.svg",
+              "note": "Optional company logo image. When provided, displays instead of company name text."
+            },
+            "companyLogoAlt": {
+              "required": false,
+              "example": "Ramp logo",
+              "note": "Alt text for company logo. Falls back to companyName if not provided."
+            },
+            "quote": {
+              "required": true,
+              "example": "Claude Code has dramatically accelerated our team's coding efficiency.",
+              "minChars": 20,
+              "maxChars": 500
+            },
+            "author": {
+              "required": true,
+              "example": "Anton Biryukov, Staff Software Engineer",
+              "minChars": 5,
+              "maxChars": 100,
+              "note": "Combined name and role/title in single field"
+            },
+            "buttons": {
+              "required": false,
+              "maxItems": 2,
+              "note": "Optional ButtonConfig array. Supports 0-2 buttons with automatic primary/secondary styling."
+            }
+          },
+          "itemRules": {
+            "minItems": 1,
+            "maxItems": 10,
+            "recommendedItems": "3-5",
+            "note": "Works best with 3-5 testimonials for focused impact."
+          }
+        },
+        "propsSchema": {
+          "testimonials": "Array<{ id: string, companyName: string, companyLogo?: string, companyLogoAlt?: string, quote: string, author: string, buttons?: ButtonConfig[] }>",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)",
+          "variant": "'card' | 'border' (required)",
+          "title": "string",
+          "titleSegments?": "TitleSegment[] - Array of { 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": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "ariaLabel?": "string (default: 'Testimonial 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",
+          "companyLogoClassName?": "string",
+          "companyNameClassName?": "string",
+          "quoteClassName?": "string",
+          "authorClassName?": "string",
+          "testimonialButtonClassName?": "string",
+          "testimonialButtonTextClassName?": "string"
+        },
+        "usage": "<TestimonialCardSeven testimonials={[{ id: 'ramp', companyName: 'Ramp', companyLogo: '/logos/ramp.svg', companyLogoAlt: 'Ramp logo', quote: 'Claude Code has dramatically accelerated our team\\'s coding efficiency. I can now write EDA code in a notebook and ask Claude to convert that into a Metaflow pipeline.', author: 'Anton Biryukov, Staff Software Engineer', buttons: [{ text: 'Read story', href: '#' }] }]} animationType=\"slide-up\" variant=\"card\" title=\"What developers are saying\" description=\"Hear from teams using our platform\" textboxLayout=\"default\" useInvertedBackground={\"noInvert\"} />"
+      },
+      {
+        "import": "import TestimonialCardEight from '@/components/sections/testimonial/TestimonialCardEight';",
+        "name": "TestimonialCardEight",
+        "path": "@/components/sections/testimonial/TestimonialCardEight",
+        "description": "Full-width carousel with media cards featuring star ratings, name, role, and company overlays.",
+        "details": "Use for showcasing testimonials with visual backgrounds in a full-width carousel format. Layout: Optional TextBox Header → Full-Width Carousel with dot navigation. Each card displays media (image or video) with a frosted glass card overlay containing star rating, name, role, and company positioned at the bottom-left. Uses FullWidthCarousel component with embla-carousel. Cards have rounded corners and aspect-[10/16] on mobile, aspect-video on desktop. Best for customer testimonials, team spotlights, or any content where personal imagery with testimonial info is important. Supports inverted text colors based on theme.",
+        "constraints": {
+          "textRules": {
+            "title": {
+              "required": true,
+              "example": "What Our Clients Say",
+              "minChars": 2,
+              "maxChars": 50
+            },
+            "description": {
+              "required": true,
+              "example": "Hear from the people who have transformed their businesses",
+              "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
+            },
+            "role": {
+              "required": true,
+              "example": "Product Manager",
+              "minChars": 2,
+              "maxChars": 50
+            },
+            "company": {
+              "required": true,
+              "example": "TechCorp Inc.",
+              "minChars": 2,
+              "maxChars": 50
+            },
+            "rating": {
+              "required": true,
+              "example": 5,
+              "min": 1,
+              "max": 5,
+              "note": "Number of stars to display (1-5)"
+            },
+            "imageSrc": {
+              "required": false,
+              "example": "/images/testimonial1.webp",
+              "note": "Image source URL (either imageSrc or videoSrc required)"
+            },
+            "videoSrc": {
+              "required": false,
+              "example": "/videos/testimonial.mp4",
+              "note": "Video source URL (either imageSrc or videoSrc required)"
+            },
+            "imageAlt": {
+              "required": false,
+              "example": "Sarah Johnson headshot",
+              "note": "Alt text for images (empty string for decorative)"
+            },
+            "videoAriaLabel": {
+              "required": false,
+              "example": "Testimonial video",
+              "note": "Aria label for videos"
+            }
+          }
+        },
+        "propsSchema": {
+          "testimonials": "Array<{ id: string, name: string, role: string, company: string, rating: number, imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }>",
+          "title": "string",
+          "titleSegments?": "TitleSegment[] - Array of { 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": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "ariaLabel?": "string (default: 'Testimonials section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "cardClassName?": "string",
+          "textBoxTitleClassName?": "string",
+          "textBoxTitleImageWrapperClassName?": "string",
+          "textBoxTitleImageClassName?": "string",
+          "textBoxDescriptionClassName?": "string",
+          "cardImageClassName?": "string",
+          "cardContentClassName?": "string",
+          "ratingClassName?": "string",
+          "nameClassName?": "string",
+          "roleClassName?": "string",
+          "companyClassName?": "string",
+          "carouselClassName?": "string",
+          "dotsClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string"
+        },
+        "usage": "<TestimonialCardEight testimonials={[{ id: '1', name: 'Sarah Johnson', role: 'Product Manager', company: 'TechCorp Inc.', rating: 5, imageSrc: '/images/testimonial1.webp', imageAlt: 'Sarah Johnson' }]} title=\"What Our Clients Say\" description=\"Hear from the people who have transformed their businesses\" textboxLayout=\"default\" useInvertedBackground=\"noInvert\" />"
+      },
+      {
+        "import": "import TestimonialCardNine from '@/components/sections/testimonial/TestimonialCardNine';",
+        "name": "TestimonialCardNine",
+        "path": "@/components/sections/testimonial/TestimonialCardNine",
+        "description": "Split layout testimonial section with quote card, navigation arrows, and media display. Supports card and border variants.",
+        "details": "Use for showcasing featured testimonials with prominent quotes in a split layout. Layout: CardStackTextBox header → 2-column grid with quote card (left) and media (right). Quote card contains quote text, author name, role, and navigation buttons. Uses AnimationContainer for smooth fade transitions when navigating between testimonials. Navigation uses primary-button styled arrow buttons. 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 highlighting individual testimonials with author imagery or video.",
+        "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"
+            },
+            "quote": {
+              "required": true,
+              "example": "This platform has completely transformed how we approach customer engagement.",
+              "minChars": 20,
+              "maxChars": 500
+            },
+            "name": {
+              "required": true,
+              "example": "Sarah Johnson",
+              "minChars": 2,
+              "maxChars": 50
+            },
+            "role": {
+              "required": true,
+              "example": "Chief Marketing Officer at TechCorp",
+              "minChars": 2,
+              "maxChars": 100
+            },
+            "imageSrc": {
+              "required": false,
+              "example": "/images/testimonial1.webp",
+              "note": "Image source URL (either imageSrc or videoSrc required)"
+            },
+            "videoSrc": {
+              "required": false,
+              "example": "/videos/testimonial.mp4",
+              "note": "Video source URL (either imageSrc or videoSrc required)"
+            },
+            "imageAlt": {
+              "required": false,
+              "example": "Sarah Johnson headshot",
+              "note": "Alt text for images"
+            },
+            "videoAriaLabel": {
+              "required": false,
+              "example": "Testimonial video",
+              "note": "Aria label for videos"
+            }
+          }
+        },
+        "propsSchema": {
+          "testimonials": "Array<{ id: string, quote: string, name: string, role: string, imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }>",
+          "variant": "'card' | 'border' (required) - Card shows quote in card styling, border removes card and adds divider lines",
+          "title": "string",
+          "titleSegments?": "TitleSegment[] - Array of { 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": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "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",
+          "quoteClassName?": "string",
+          "nameClassName?": "string",
+          "roleClassName?": "string",
+          "navigationClassName?": "string",
+          "navigationButtonClassName?": "string",
+          "mediaCardClassName?": "string",
+          "mediaClassName?": "string"
+        },
+        "usage": "<TestimonialCardNine testimonials={[{ id: '1', quote: 'This platform has completely transformed how we approach customer engagement.', name: 'Sarah Johnson', role: 'Chief Marketing Officer at TechCorp', imageSrc: '/images/testimonial1.webp', imageAlt: 'Sarah Johnson' }]} variant=\"card\" title=\"Trusted by industry leaders\" description=\"See what our customers have to say\" textboxLayout=\"default\" useInvertedBackground=\"noInvert\" />"
+      },
+      {
+        "import": "import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';",
+        "name": "TestimonialCardTen",
+        "path": "@/components/sections/testimonial/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)"
+            },
+            "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 }>",
+          "variant": "'card' | 'border' (required) - Card shows quote in card styling, border removes card and adds divider lines",
+          "title": "string",
+          "titleSegments?": "TitleSegment[] - Array of { 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": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "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"
+        },
+        "usage": "<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' }]} variant=\"card\" title=\"Trusted by industry leaders\" description=\"See what our customers have to say\" textboxLayout=\"default\" useInvertedBackground=\"noInvert\" />"
+      },
+      {
+        "import": "import TestimonialCardEleven from '@/components/sections/testimonial/TestimonialCardEleven';",
+        "name": "TestimonialCardEleven",
+        "path": "@/components/sections/testimonial/TestimonialCardEleven",
+        "description": "Full-width carousel testimonial section with media cards, blur overlay, and quote display.",
+        "details": "Use for showcasing testimonials with prominent media backgrounds. Layout: CardStackTextBox header → Full-width auto-scrolling carousel. Each card features aspect-video media with backdrop blur overlay, gradient mask at bottom for readability, and quote text overlaid on the blur. Author name and title displayed below the card. Inactive cards have a light blur overlay that fades out when active (smooth transition). Uses FullWidthCarousel with embla-carousel for auto-scrolling every 5 seconds with navigation dots. Best for visual-heavy testimonials where client photos or videos are the main focus.",
+        "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"
+            },
+            "nameTitle": {
+              "required": true,
+              "example": "Alisa Hester, CEO of Ecomflow",
+              "minChars": 5,
+              "maxChars": 80,
+              "note": "Combined name and title/role of the testimonial author"
+            },
+            "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": 300
+            },
+            "imageSrc": {
+              "required": false,
+              "example": "/images/testimonial1.webp",
+              "note": "Image source URL (either imageSrc or videoSrc required)"
+            },
+            "videoSrc": {
+              "required": false,
+              "example": "/videos/testimonial.mp4",
+              "note": "Video source URL (either imageSrc or videoSrc required)"
+            },
+            "imageAlt": {
+              "required": false,
+              "example": "Alisa Hester portrait",
+              "note": "Alt text for images"
+            },
+            "videoAriaLabel": {
+              "required": false,
+              "example": "Testimonial video",
+              "note": "Aria label for videos"
+            }
+          }
+        },
+        "propsSchema": {
+          "testimonials": "Array<{ id: string, nameTitle: string, quote: string, imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }>",
+          "title": "string",
+          "titleSegments?": "TitleSegment[] - Array of { 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": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "ariaLabel?": "string (default: 'Testimonials section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "cardClassName?": "string",
+          "cardTitleClassName?": "string",
+          "cardQuoteClassName?": "string",
+          "cardImageClassName?": "string",
+          "carouselClassName?": "string",
+          "dotsClassName?": "string",
+          "textBoxClassName?": "string",
+          "textBoxTitleClassName?": "string",
+          "textBoxTitleImageWrapperClassName?": "string",
+          "textBoxTitleImageClassName?": "string",
+          "textBoxDescriptionClassName?": "string",
+          "textBoxTagClassName?": "string",
+          "textBoxButtonContainerClassName?": "string",
+          "textBoxButtonClassName?": "string",
+          "textBoxButtonTextClassName?": "string"
+        },
+        "usage": "<TestimonialCardEleven testimonials={[{ id: '1', nameTitle: 'Alisa Hester, CEO of Ecomflow', quote: 'We have been working with them for over 6 months now, and have been able to scale our business to new heights.', imageSrc: '/images/testimonial1.webp', imageAlt: 'Alisa Hester' }]} title=\"What Our Clients Say\" description=\"Hear from those who've experienced our work\" textboxLayout=\"default\" useInvertedBackground=\"noInvert\" />"
+      },
+      {
+        "import": "import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';",
+        "name": "TestimonialCardTwelve",
+        "path": "@/components/sections/testimonial/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",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "ariaLabel?": "string (default: 'Testimonials section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "cardClassName?": "string",
+          "avatarGroupClassName?": "string",
+          "avatarClassName?": "string",
+          "cardTitleClassName?": "string",
+          "cardTagClassName?": "string"
+        },
+        "usage": "<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=\"noInvert\" />"
+      },
+      {
+        "import": "import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';",
+        "name": "TestimonialCardThirteen",
+        "path": "@/components/sections/testimonial/TestimonialCardThirteen",
+        "description": "Testimonial cards with star ratings, quote text, and author details.",
+        "details": "Use for displaying customer reviews with star ratings. Layout: Star Rating (5 stars, filled based on rating value) → Testimonial Text → Author Info (image/icon, name, handle). Each card shows 5 stars with filled stars for the rating value and unfilled stars for the remainder. Cards are displayed in a grid or carousel layout. Best for customer reviews, product feedback, or service testimonials where ratings are important.",
+        "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 }>",
+          "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+          "uniformGridCustomHeightClasses?": "string (default: 'min-h-none')",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)",
+          "containerStyle": "'default' | 'card' (required)",
+          "title": "string",
+          "titleSegments?": "TitleSegment[] - Array of { 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": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "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"
+        },
+        "usage": "<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' }]} title=\"What Our Clients Say\" description=\"Hear from those who've experienced our work\" textboxLayout=\"default\" animationType=\"slide-up\" containerStyle=\"default\" useInvertedBackground=\"noInvert\" />"
+      },
+      {
+        "import": "import TestimonialCardFourteen from '@/components/sections/testimonial/TestimonialCardFourteen';",
+        "name": "TestimonialCardFourteen",
+        "path": "@/components/sections/testimonial/TestimonialCardFourteen",
+        "description": "Testimonial cards with quote icon, testimonial text, and author details.",
+        "details": "Use for displaying customer testimonials with a quote icon. Layout: Quote Icon (accent colored) → Testimonial Text → Author Info (image/icon, name, handle). Cards are displayed in a grid or carousel layout. Best for customer testimonials, client feedback, or service reviews where a clean quote-style presentation is preferred over star ratings.",
+        "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
+            },
+            "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, 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)",
+          "containerStyle": "'default' | 'card' (required)",
+          "title": "string",
+          "titleSegments?": "TitleSegment[] - Array of { 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": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "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",
+          "contentWrapperClassName?": "string",
+          "gridClassName?": "string",
+          "carouselClassName?": "string",
+          "controlsClassName?": "string"
+        },
+        "usage": "<TestimonialCardFourteen testimonials={[{ id: '1', name: 'Jack', handle: '@jack', testimonial: 'Amazing experience!' }, { id: '2', name: 'Sarah', handle: '@sarah', testimonial: 'Highly recommended!', imageSrc: '/testimonials/sarah.jpg' }]} title=\"What Our Clients Say\" description=\"Hear from those who've experienced our work\" textboxLayout=\"default\" animationType=\"slide-up\" containerStyle=\"default\" useInvertedBackground=\"noInvert\" />"
+      },
+      {
+        "import": "import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';",
+        "name": "TestimonialCardFifteen",
+        "path": "@/components/sections/testimonial/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 }>",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "ariaLabel?": "string (default: 'Testimonial section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "ratingClassName?": "string",
+          "starClassName?": "string",
+          "testimonialClassName?": "string",
+          "avatarGroupClassName?": "string",
+          "avatarClassName?": "string",
+          "avatarImageClassName?": "string"
+        },
+        "usage": "<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=\"noInvert\" />"
+      }
+    ],
+    "socialProof": [
+      {
+        "import": "import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';",
+        "name": "SocialProofOne",
+        "path": "@/components/sections/socialProof/SocialProofOne",
+        "description": "Scrolling marquee logo showcase with optional card backgrounds.",
+        "details": "Use for displaying partner logos, client lists, or brand showcases. Layout: Optional TextBox Header \u2192 Scrolling Marquee with Logos. Logos scroll horizontally in an infinite loop (duplicated 4x for smooth scrolling). Optional card backgrounds with padding around each logo (default: enabled). When cards are shown: h-7 logos with mx-4 spacing and card styling. Without cards: h-8 logos with mx-8 spacing. Speed is customizable (default: 40px/s). Uses mask-padding-x for edge fade effect. All core fields required for visual consistency. Best for social proof sections, partner showcases, or brand displays. Optional header with title, description, tag, and buttons via CardStackTextBox.",
+        "constraints": {
+          "textRules": {
+            "title": {
+              "required": true,
+              "example": "Trusted by Industry Leaders",
+              "minChars": 2,
+              "maxChars": 50
+            },
+            "description": {
+              "required": true,
+              "example": "Join thousands of companies that trust our platform",
+              "minChars": 5,
+              "maxChars": 250
+            },
+            "tag": {
+              "required": false,
+              "example": "Partners",
+              "minChars": 2,
+              "maxChars": 30
+            }
+          },
+          "logoRules": {
+            "logos": {
+              "required": true,
+              "minItems": 6,
+              "example": "['/logos/company1.svg', '/logos/company2.svg', '/logos/company3.svg', '/logos/company4.svg', '/logos/company5.svg', '/logos/company6.svg']",
+              "note": "Array of logo image paths. Minimum 6 logos required. Will be duplicated 4x for smooth scrolling."
+            },
+            "speed": {
+              "required": false,
+              "default": 40,
+              "min": 10,
+              "max": 200,
+              "note": "Marquee scroll speed in pixels per second"
+            },
+            "showCard": {
+              "required": false,
+              "default": true,
+              "note": "Show card background around each logo with padding"
+            }
+          }
+        },
+        "propsSchema": {
+          "logos": "string[]",
+          "title": "string",
+          "titleSegments?": "TitleSegment[] - Array of { type: 'text', content: string } | { type: 'image', src: string, alt?: string } for inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "speed?": "number (default: 40)",
+          "showCard?": "boolean (default: true)",
+          "ariaLabel?": "string (default: 'Social proof 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",
+          "contentClassName?": "string",
+          "logoItemClassName?": "string",
+          "logoCardClassName?": "string",
+          "logoImageClassName?": "string"
+        },
+        "usage": "<SocialProofOne logos={['/logos/company1.svg', '/logos/company2.svg', '/logos/company3.svg', '/logos/company4.svg', '/logos/company5.svg', '/logos/company6.svg']} title=\"Trusted by Industry Leaders\" description=\"Join thousands of satisfied customers\" textboxLayout=\"default\" useInvertedBackground={\"noInvert\"} />"
+      },
+      {
+        "import": "import SocialProofTwo from '@/components/sections/socialProof/SocialProofTwo';",
+        "name": "SocialProofTwo",
+        "path": "@/components/sections/socialProof/SocialProofTwo",
+        "description": "Grid logo showcase with card backgrounds.",
+        "details": "Use for displaying 2-5 partner logos in a clean grid layout with card backgrounds. Layout: Optional TextBox Header \u2192 Responsive Grid with Logo Cards. Mobile: vertical column layout with full-width logo cards. Desktop (md+): horizontal row layout with logos distributed evenly (flex-basis based on count: 1/2, 1/3, 1/4, or 1/5). Each logo displayed in a card with padding and gap-4 spacing between cards. Logo sizing: Mobile w-1/2, Desktop h-8 w-auto, 2xl h-10. Best for partner showcases, client lists with 2-5 logos where fixed grid layout with visual separation is preferred over scrolling marquee.",
+        "constraints": {
+          "textRules": {
+            "title": {
+              "required": true,
+              "example": "Trusted by Industry Leaders",
+              "minChars": 2,
+              "maxChars": 50
+            },
+            "description": {
+              "required": true,
+              "example": "Join thousands of companies that trust our platform",
+              "minChars": 5,
+              "maxChars": 250
+            },
+            "tag": {
+              "required": false,
+              "example": "Partners",
+              "minChars": 2,
+              "maxChars": 30
+            }
+          },
+          "logoRules": {
+            "logos": {
+              "required": true,
+              "minItems": 2,
+              "maxItems": 5,
+              "example": "['/logos/company1.svg', '/logos/company2.svg', '/logos/company3.svg', '/logos/company4.svg', '/logos/company5.svg']",
+              "note": "Array of logo image paths. Minimum 2, maximum 5 logos for optimal grid layout. Each logo is displayed in a card with padding."
+            }
+          }
+        },
+        "propsSchema": {
+          "logos": "string[]",
+          "title": "string",
+          "titleSegments?": "TitleSegment[] - Array of { type: 'text', content: string } | { type: 'image', src: string, alt?: string } for inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "ariaLabel?": "string (default: 'Social proof 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",
+          "contentClassName?": "string",
+          "logoRowClassName?": "string",
+          "logoItemClassName?": "string",
+          "logoCardClassName?": "string",
+          "logoImageClassName?": "string"
+        },
+        "usage": "<SocialProofTwo logos={['/logos/company1.svg', '/logos/company2.svg', '/logos/company3.svg', '/logos/company4.svg', '/logos/company5.svg']} title=\"Trusted By\" description=\"Join thousands of satisfied customers\" textboxLayout=\"default\" useInvertedBackground={\"noInvert\"} />"
+      },
+      {
+        "import": "import SocialProofThree from '@/components/sections/socialProof/SocialProofThree';",
+        "name": "SocialProofThree",
+        "path": "@/components/sections/socialProof/SocialProofThree",
+        "description": "Dual marquee logo showcase with card backgrounds scrolling in opposite directions.",
+        "details": "Use for displaying partner logos with visual impact using dual auto-scrolling marquees. Features two horizontal marquees scrolling in opposite directions (top and bottom) with logo cards. Uses AutoCarousel with dualMarquee mode. Each logo displayed in a card with h-full, rounded-theme styling, centered content. Logo images sized at h-1/2 w-1/2 within cards. Item width responsive: w-30 on mobile, w-carousel-item-3 on desktop, w-carousel-item-4 on xl screens, all with aspect-square. Top marquee direction configurable (left or right, default: left). Speed customizable (default: 40px/s). Includes full TextBox integration with all layout options (default, split, split-actions, split-description). Best for social proof sections, partner showcases with high logo count where dual scrolling creates dynamic visual interest. Automatically handles animationType for scroll-triggered effects.",
+        "constraints": {
+          "textRules": {
+            "title": {
+              "required": true,
+              "example": "Trusted by industry leaders",
+              "minChars": 2,
+              "maxChars": 60
+            },
+            "description": {
+              "required": true,
+              "example": "Join thousands of companies that rely on our platform",
+              "minChars": 5,
+              "maxChars": 250
+            },
+            "tag": {
+              "required": false,
+              "example": "Partners",
+              "minChars": 2,
+              "maxChars": 30
+            }
+          },
+          "logoRules": {
+            "logos": {
+              "required": true,
+              "minItems": 8,
+              "recommendedItems": "12-18",
+              "example": "['/logos/company1.svg', '/logos/company2.svg', ...]",
+              "note": "Array of logo image paths. Minimum 8 logos recommended for dual marquee effect. More logos create better visual flow."
+            },
+            "speed": {
+              "required": false,
+              "default": 40,
+              "min": 10,
+              "max": 200,
+              "note": "Marquee scroll speed in pixels per second"
+            },
+            "topMarqueeDirection": {
+              "required": false,
+              "default": "left",
+              "options": [
+                "left",
+                "right"
+              ],
+              "note": "Direction of top marquee. Bottom marquee automatically scrolls in opposite direction."
+            }
+          }
+        },
+        "propsSchema": {
+          "logos": "string[]",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)",
+          "title": "string",
+          "titleSegments?": "TitleSegment[] - Array of { 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": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "speed?": "number (default: 40)",
+          "topMarqueeDirection?": "'left' | 'right' (default: 'left')",
+          "ariaLabel?": "string (default: 'Social proof section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "carouselClassName?": "string",
+          "bottomCarouselClassName?": "string",
+          "logoCardClassName?": "string",
+          "logoImageClassName?": "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"
+        },
+        "usage": "<SocialProofThree logos={['/logos/company1.svg', '/logos/company2.svg', '/logos/company3.svg', '/logos/company4.svg', '/logos/company5.svg', '/logos/company6.svg', '/logos/company7.svg', '/logos/company8.svg', '/logos/company9.svg', '/logos/company10.svg']} animationType=\"slide-up\" title=\"Trusted by industry leaders\" description=\"Join thousands of companies that rely on our platform\" textboxLayout=\"default\" useInvertedBackground={\"noInvert\"} />"
+      }
+    ],
+    "faq": [
+      {
+        "import": "import FaqBase from '@/components/sections/faq/FaqBase';",
+        "name": "FaqBase",
+        "path": "@/components/sections/faq/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 \u2192 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": "FaqItem[] (FaqItem: {id: string, title: string, content: string})",
+          "title": "string",
+          "titleSegments?": "TitleSegment[] - Array of { type: 'text', content: string } | { type: 'image', src: string, alt?: string } for inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "animationType?": "'smooth' | 'instant' (default: 'smooth')",
+          "showCard?": "boolean (default: true)",
+          "ariaLabel?": "string (default: 'FAQ 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",
+          "faqsContainerClassName?": "string",
+          "accordionClassName?": "string",
+          "accordionTitleClassName?": "string",
+          "accordionIconContainerClassName?": "string",
+          "accordionIconClassName?": "string",
+          "accordionContentClassName?": "string",
+          "separatorClassName?": "string"
+        },
+        "usage": "<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={\"noInvert\"} />"
+      },
+      {
+        "import": "import FaqDouble from '@/components/sections/faq/FaqDouble';",
+        "name": "FaqDouble",
+        "path": "@/components/sections/faq/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 \u2192 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": "FaqItem[] (FaqItem: {id: string, title: string, content: string})",
+          "title": "string",
+          "titleSegments?": "TitleSegment[] - Array of { type: 'text', content: string } | { type: 'image', src: string, alt?: string } for inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "animationType?": "'smooth' | 'instant' (default: 'smooth')",
+          "ariaLabel?": "string (default: 'FAQ 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",
+          "faqsContainerClassName?": "string",
+          "columnClassName?": "string",
+          "accordionClassName?": "string",
+          "accordionTitleClassName?": "string",
+          "accordionIconContainerClassName?": "string",
+          "accordionIconClassName?": "string",
+          "accordionContentClassName?": "string"
+        },
+        "usage": "<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={\"noInvert\"} />"
+      },
+      {
+        "import": "import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';",
+        "name": "FaqSplitMedia",
+        "path": "@/components/sections/faq/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 \u2192 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."
+            },
+            "videoSrc": {
+              "required": false,
+              "note": "Path to video file. Either imageSrc or videoSrc should be provided."
+            }
+          }
+        },
+        "propsSchema": {
+          "faqs": "FaqItem[] (FaqItem: {id: string, title: string, content: string})",
+          "imageSrc?": "string",
+          "videoSrc?": "string",
+          "imageAlt?": "string (default: '')",
+          "videoAriaLabel?": "string (default: 'FAQ section video')",
+          "mediaPosition?": "'left' | 'right' (default: 'left')",
+          "title": "string",
+          "titleSegments?": "TitleSegment[] - Array of { type: 'text', content: string } | { type: 'image', src: string, alt?: string } for inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "animationType?": "'smooth' | 'instant' (default: 'smooth')",
+          "showCard?": "boolean (default: true)",
+          "ariaLabel?": "string (default: 'FAQ 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",
+          "contentClassName?": "string",
+          "mediaWrapperClassName?": "string",
+          "mediaClassName?": "string",
+          "faqsContainerClassName?": "string",
+          "accordionClassName?": "string",
+          "accordionTitleClassName?": "string",
+          "accordionIconContainerClassName?": "string",
+          "accordionIconClassName?": "string",
+          "accordionContentClassName?": "string",
+          "separatorClassName?": "string"
+        },
+        "usage": "<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={\"noInvert\"} mediaPosition=\"left\" />"
+      },
+      {
+        "import": "import FaqSplitText from '@/components/sections/faq/FaqSplitText';",
+        "name": "FaqSplitText",
+        "path": "@/components/sections/faq/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": "FaqItem[] (FaqItem: {id: string, title: string, content: string})",
+          "sideTitle": "string",
+          "sideDescription?": "string",
+          "buttons?": "ButtonConfig[]",
+          "textPosition?": "'left' | 'right' (default: 'left')",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "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"
+        },
+        "usage": "<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={\"noInvert\"} />"
+      }
+    ],
+    "blog": [
+      {
+        "import": "import BlogCardOne from '@/components/sections/blog/BlogCardOne';",
+        "name": "BlogCardOne",
+        "path": "@/components/sections/blog/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 \u2192 Category badge \u2192 Title \u2192 Excerpt \u2192 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": "BlogCard[] (BlogCard: {id: string, category: string, title: string, excerpt: string, imageSrc: string, imageAlt?: string, authorName: string, authorAvatar: string, date: string, onBlogClick?: () => void})",
+          "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+          "uniformGridCustomHeightClasses?": "string",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
+          "containerStyle": "'default' | 'card' (required - 'default': individual items have card styling with gaps, 'card': entire grid wrapped in primary-button container)",
+          "title": "string",
+          "titleSegments?": "TitleSegment[] - Array of { type: 'text', content: string } | { type: 'image', src: string, alt?: string } for inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "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"
+        },
+        "usage": "<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={\"noInvert\"} animationType=\"slide-up\" carouselMode=\"buttons\" />"
+      },
+      {
+        "import": "import BlogCardTwo from '@/components/sections/blog/BlogCardTwo';",
+        "name": "BlogCardTwo",
+        "path": "@/components/sections/blog/BlogCardTwo",
+        "description": "Blog section with card grid/carousel layout featuring image, author/date, title, excerpt, and multiple tags.",
+        "details": "Use for displaying blog posts with tag categorization. Uses CardStack for adaptive layout (grid for 1-4 items, carousel for 5+). Card structure: Image with overlay arrow button \u2192 Author & Date \u2192 Title \u2192 Excerpt \u2192 Tags (multiple primary buttons). Image has zoom effect on hover. Tags displayed as primary-button badges at bottom. Optional header with title, description, tag, and buttons via CardStack. Best for blog pages with multiple categories or topic 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\", \"tags\": [\"Design\", \"Research\"], \"title\": \"UX review presentations\", \"excerpt\": \"How to create compelling presentations\", \"imageSrc\": \"/blog-1.jpg\", \"authorName\": \"Olivia Rhye\", \"date\": \"20 Jan 2025\"}]",
+              "note": "Array of blog items. Each item requires id, tags (array), title, excerpt, imageSrc, authorName, and date."
+            }
+          }
+        },
+        "propsSchema": {
+          "blogs": "BlogCard[] (BlogCard: {id: string, tags: string[], title: string, excerpt: string, imageSrc: string, imageAlt?: string, authorName: string, date: string, onBlogClick?: () => void})",
+          "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+          "uniformGridCustomHeightClasses?": "string",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
+          "containerStyle": "'default' | 'card' (required - 'default': individual items have card styling with gaps, 'card': entire grid wrapped in primary-button container)",
+          "title": "string",
+          "titleSegments?": "TitleSegment[] - Array of { type: 'text', content: string } | { type: 'image', src: string, alt?: string } for inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "ariaLabel?": "string (default: 'Blog section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "cardClassName?": "string",
+          "imageWrapperClassName?": "string",
+          "imageClassName?": "string",
+          "authorDateClassName?": "string",
+          "cardTitleClassName?": "string",
+          "excerptClassName?": "string",
+          "tagsContainerClassName?": "string",
+          "tagClassName?": "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"
+        },
+        "usage": "<BlogCardTwo blogs={[{id: '1', tags: ['Design', 'Research', 'Presentation'], title: 'UX review presentations', excerpt: 'How to create compelling presentations that wow your audience', imageSrc: '/blog-1.jpg', authorName: 'Olivia Rhye', date: '20 Jan 2025', onBlogClick: () => console.log('clicked')}]} title=\"Latest Articles\" description=\"Stay updated with our latest insights\" textboxLayout=\"default\" useInvertedBackground={\"noInvert\"} animationType=\"slide-up\" carouselMode=\"buttons\" />"
+      },
+      {
+        "import": "import BlogCardThree from '@/components/sections/blog/BlogCardThree';",
+        "name": "BlogCardThree",
+        "path": "@/components/sections/blog/BlogCardThree",
+        "description": "Blog section with vertical card layout featuring tag, title, description, 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 with optional icon \u2192 Title \u2192 Description \u2192 Media content with overlay arrow button. 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\", \"description\": \"Optimizing speed and scalability\", \"imageSrc\": \"/blog-1.jpg\"}]",
+              "note": "Array of blog items. Each item requires id, category, title, description, and either imageSrc or videoSrc."
+            }
+          }
+        },
+        "propsSchema": {
+          "blogs": "BlogCard[] (BlogCard: {id: string, category: string, categoryIcon?: LucideIcon, title: string, description: string, imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string, onBlogClick?: () => void})",
+          "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)",
+          "containerStyle": "'default' | 'card' (required - 'default': individual items have card styling with gaps, 'card': entire grid wrapped in primary-button container)",
+          "title": "string",
+          "titleSegments?": "TitleSegment[] - Array of { type: 'text', content: string } | { type: 'image', src: string, alt?: string } for inline images in title",
+          "description": "string",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "ariaLabel?": "string (default: 'Blog section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "cardClassName?": "string",
+          "cardContentClassName?": "string",
+          "categoryTagClassName?": "string",
+          "cardTitleClassName?": "string",
+          "cardDescriptionClassName?": "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"
+        },
+        "usage": "<BlogCardThree blogs={[{id: '1', category: 'Software Development', categoryIcon: Code, title: 'Redefining Digital Performance at Scale', description: 'Optimizing speed, scalability, and user experience.', imageSrc: '/blog-1.jpg', onBlogClick: () => console.log('clicked')}]} title=\"Featured Articles\" description=\"Explore our latest insights\" textboxLayout=\"default\" useInvertedBackground={\"noInvert\"} animationType=\"slide-up\" />"
+      },
+      {
+        "import": "import BlogCardFour from '@/components/sections/blog/BlogCardFour';",
+        "name": "BlogCardFour",
+        "path": "@/components/sections/blog/BlogCardFour",
+        "description": "Blog section with TextBox header and responsive grid of compact horizontal blog cards.",
+        "details": "Use for blog listings with compact card layout. Layout: CardStackTextBox header \u2192 Responsive grid of blog cards. Each card has horizontal layout: small square media (h-15, aspect-square, rounded-theme-capped) on left, title and description on right. Grid adapts: 1 col mobile, 2 cols for 2 items desktop, 3 cols for 3+ items desktop. Cards use card styling with p-4 padding, gap-4 between media and content. Title is text-base, description is text-sm with line-clamp-2. Uses useCardAnimation for scroll animations. Best for blog indexes, article listings, or news sections with multiple posts.",
+        "constraints": {
+          "textRules": {
+            "title": {
+              "required": true,
+              "example": "Latest Articles",
+              "minChars": 2,
+              "maxChars": 50
+            },
+            "description": {
+              "required": true,
+              "example": "Discover our latest insights and stories",
+              "minChars": 5,
+              "maxChars": 250
+            },
+            "tag": {
+              "required": false,
+              "example": "Blog",
+              "minChars": 2,
+              "maxChars": 30
+            }
+          },
+          "blogRules": {
+            "id": {
+              "required": true,
+              "example": "1",
+              "minChars": 1,
+              "maxChars": 20
+            },
+            "title": {
+              "required": true,
+              "example": "The Future of Web Development",
+              "minChars": 5,
+              "maxChars": 100,
+              "note": "Blog post title shown at text-base size"
+            },
+            "description": {
+              "required": true,
+              "example": "Exploring the latest trends and technologies shaping the future of web development in 2025 and beyond.",
+              "minChars": 20,
+              "maxChars": 300,
+              "note": "Blog post description shown at text-sm size with line-clamp-2"
+            },
+            "imageSrc": {
+              "required": false,
+              "example": "/blog-1.jpg",
+              "note": "Either imageSrc or videoSrc should be provided"
+            },
+            "videoSrc": {
+              "required": false,
+              "example": "/blog-1.mp4",
+              "note": "Either imageSrc or videoSrc should be provided"
+            },
+            "imageAlt": {
+              "required": false,
+              "example": "Future of web development illustration",
+              "note": "Falls back to blog title if not provided"
+            },
+            "videoAriaLabel": {
+              "required": false,
+              "example": "Future of web development video",
+              "note": "Falls back to blog title if not provided"
+            }
+          },
+          "itemRules": {
+            "minItems": 1,
+            "maxItems": 20,
+            "recommendedItems": "3-9",
+            "note": "Grid layout: 1 item = 1 col, 2 items = 2 cols desktop, 3+ items = 3 cols desktop. All layouts are 1 col on mobile."
+          }
+        },
+        "propsSchema": {
+          "blogs": "Array<{ id: string, title: string, description: string, imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }>",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)",
+          "title": "string",
+          "titleSegments?": "TitleSegment[] - Array of { 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": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "ariaLabel?": "string (default: 'Blog 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",
+          "cardContentClassName?": "string",
+          "cardTitleClassName?": "string",
+          "cardDescriptionClassName?": "string",
+          "mediaWrapperClassName?": "string",
+          "mediaClassName?": "string"
+        },
+        "usage": "<BlogCardFour blogs={[{ id: '1', title: 'The Future of Web Development', description: 'Exploring the latest trends and technologies shaping the future of web development in 2025 and beyond.', imageSrc: '/blog1.jpg' }, { id: '2', title: 'Mastering TypeScript', description: 'A comprehensive guide to becoming proficient in TypeScript for modern application development.', imageSrc: '/blog2.jpg' }]} animationType=\"slide-up\" title=\"Latest Articles\" description=\"Discover our latest insights and stories\" textboxLayout=\"default\" useInvertedBackground={\"noInvert\"} />"
+      },
+      {
+        "import": "import BlogCardFive from '@/components/sections/blog/BlogCardFive';",
+        "name": "BlogCardFive",
+        "path": "@/components/sections/blog/BlogCardFive",
+        "description": "Blog section with TextBox header and fixed 2-column grid layout with horizontal blog cards and metadata items.",
+        "details": "Use for featured blog listings with prominent display and metadata. Uses CardList variant system with two display modes: card (entire grid wrapped in card background) or plain (individual cards without background). Layout: CardStackTextBox header → Fixed 2-column grid (desktop only, 1 col mobile). Each blog card has horizontal layout on desktop (media left, content right), vertical on mobile. Media is h-50 aspect-square with rounded corners. Content shows large title (text-3xl) and inline metadata items separated by accent-colored bullets (•). Card variant: Grid wrapped with card styling (rounded-theme-capped, p-5 md:p-8), text colors use shouldUseLightText logic. Plain variant: No grid background, text colors based on useInvertedBackground directly. Items array is flexible for category, date, read time, author, etc. Best for featured articles, blog highlights, or article showcases with 2-6 posts.",
+        "constraints": {
+          "textRules": {
+            "title": {
+              "required": true,
+              "example": "Latest Articles",
+              "minChars": 2,
+              "maxChars": 50
+            },
+            "description": {
+              "required": true,
+              "example": "Discover our latest insights and stories",
+              "minChars": 5,
+              "maxChars": 250
+            },
+            "tag": {
+              "required": false,
+              "example": "Blog",
+              "minChars": 2,
+              "maxChars": 30
+            }
+          },
+          "blogRules": {
+            "id": {
+              "required": true,
+              "example": "1",
+              "minChars": 1,
+              "maxChars": 20
+            },
+            "title": {
+              "required": true,
+              "example": "The Future of Web Development: Exploring New Technologies and Trends",
+              "minChars": 10,
+              "maxChars": 150,
+              "note": "Blog post title shown at text-3xl size, supports longer titles"
+            },
+            "items": {
+              "required": true,
+              "minItems": 1,
+              "maxItems": 5,
+              "structure": "string[]",
+              "example": "['Technology', 'Jan 15, 2025', '5 min read']",
+              "note": "Flexible metadata items (category, date, author, read time, etc.) displayed inline with bullet separators"
+            },
+            "imageSrc": {
+              "required": false,
+              "example": "/blog-1.jpg",
+              "note": "Either imageSrc or videoSrc should be provided"
+            },
+            "videoSrc": {
+              "required": false,
+              "example": "/blog-1.mp4",
+              "note": "Either imageSrc or videoSrc should be provided"
+            },
+            "imageAlt": {
+              "required": false,
+              "example": "Future of web development illustration",
+              "note": "Falls back to blog title if not provided"
+            },
+            "videoAriaLabel": {
+              "required": false,
+              "example": "Future of web development video",
+              "note": "Falls back to blog title if not provided"
+            }
+          },
+          "itemRules": {
+            "minItems": 1,
+            "maxItems": 10,
+            "recommendedItems": "2-6",
+            "note": "Always displays as 2-column grid on desktop, 1 column on mobile. Works best with even number of posts (2, 4, 6)."
+          }
+        },
+        "propsSchema": {
+          "blogs": "Array<{ id: string, title: string, items: string[], imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }>",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)",
+          "variant": "'card' | 'plain' (required - 'card': grid wrapped in card background, 'plain': no grid background)",
+          "title": "string",
+          "titleSegments?": "TitleSegment[] - Array of { 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": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "ariaLabel?": "string (default: 'Blog 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",
+          "gridClassName?": "string",
+          "cardClassName?": "string",
+          "cardContentClassName?": "string",
+          "cardTitleClassName?": "string",
+          "itemsContainerClassName?": "string",
+          "itemTextClassName?": "string",
+          "mediaWrapperClassName?": "string",
+          "mediaClassName?": "string"
+        },
+        "usage": "<BlogCardFive blogs={[{ id: '1', title: 'The Future of Web Development: Exploring New Technologies and Trends', items: ['Technology', 'Jan 15, 2025', '5 min read'], imageSrc: '/blog1.jpg' }, { id: '2', title: 'Mastering TypeScript for Modern Application Development', items: ['Development', 'Jan 12, 2025', '8 min read'], imageSrc: '/blog2.jpg' }]} animationType=\"slide-up\" variant=\"card\" title=\"Latest Articles\" description=\"Discover our latest insights and stories\" textboxLayout=\"default\" useInvertedBackground={\"invertCard\"} tag=\"Blog\" />"
+      },
+      {
+        "import": "import BlogCardSix from '@/components/sections/blog/BlogCardSix';",
+        "name": "BlogCardSix",
+        "path": "@/components/sections/blog/BlogCardSix",
+        "description": "Blog section with separate media and card layout, featuring tags and arrow navigation.",
+        "details": "Use for blog listings with prominent imagery. Layout: CardStackTextBox header → Grid of blog 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 blog listings with clean separation between imagery and content.",
+        "constraints": {
+          "textRules": {
+            "title": {
+              "required": true,
+              "example": "Recent articles",
+              "minChars": 2,
+              "maxChars": 50
+            },
+            "description": {
+              "required": true,
+              "example": "Stay updated with the latest trends and insights",
+              "minChars": 5,
+              "maxChars": 300
+            },
+            "tag": {
+              "required": false,
+              "example": "Blog",
+              "minChars": 2,
+              "maxChars": 30
+            }
+          },
+          "blogRules": {
+            "id": {
+              "required": true,
+              "example": "1",
+              "note": "Unique identifier for the blog post"
+            },
+            "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": "/blog-1.jpg",
+              "note": "Either imageSrc or videoSrc should be provided"
+            },
+            "videoSrc": {
+              "required": false,
+              "example": "/blog-1.mp4",
+              "note": "Either imageSrc or videoSrc should be provided"
+            },
+            "imageAlt": {
+              "required": false,
+              "example": "Blog post preview image",
+              "note": "Falls back to blog title if not provided"
+            },
+            "videoAriaLabel": {
+              "required": false,
+              "example": "Blog post video",
+              "note": "Falls back to blog title if not provided"
+            }
+          }
+        },
+        "propsSchema": {
+          "blogs": "Array<{ id: string, title: string, tags: string[], imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string, onBlogClick?: () => void }>",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)",
+          "containerStyle": "'default' | 'card' (required)",
+          "title": "string",
+          "titleSegments?": "TitleSegment[] - Array of { 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": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+          "uniformGridCustomHeightClasses?": "string",
+          "ariaLabel?": "string (default: 'Blog 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"
+        },
+        "usage": "<BlogCardSix blogs={[{ id: '1', title: 'Discover the essential features of our app', tags: ['Features', 'Jan 29, 2025'], imageSrc: '/blog1.jpg' }, { id: '2', title: 'How to organize your tasks effectively', tags: ['Guides', 'Feb 03, 2025'], imageSrc: '/blog2.jpg' }]} animationType=\"slide-up\" containerStyle=\"default\" title=\"Recent articles\" description=\"Stay updated with the latest trends and insights\" textboxLayout=\"default\" useInvertedBackground=\"noInvert\" />"
+      },
+      {
+        "import": "import BlogCardSeven from '@/components/sections/blog/BlogCardSeven';",
+        "name": "BlogCardSeven",
+        "path": "@/components/sections/blog/BlogCardSeven",
+        "description": "Minimal blog card with two-column layout featuring date, title, read link, and image.",
+        "details": "Use for clean, minimal blog listings. Layout: CardStackTextBox header → Grid of blog items. Each card has a two-column grid with text on left (date, title, 'Read blog →' link) and image on right. Hover effect animates the arrow gap and scales the image. Text colors adapt based on containerStyle and useInvertedBackground settings. Best for professional, content-focused blog sections with a minimalist aesthetic.",
+        "constraints": {
+          "textRules": {
+            "title": {
+              "required": true,
+              "example": "Latest Articles",
+              "minChars": 2,
+              "maxChars": 50
+            },
+            "description": {
+              "required": true,
+              "example": "Stay updated with our latest insights",
+              "minChars": 5,
+              "maxChars": 300
+            },
+            "tag": {
+              "required": false,
+              "example": "Blog",
+              "minChars": 2,
+              "maxChars": 30
+            }
+          },
+          "blogRules": {
+            "id": {
+              "required": true,
+              "example": "1",
+              "note": "Unique identifier for the blog post"
+            },
+            "title": {
+              "required": true,
+              "example": "2025 State of Venture: Resilience in early-stage capital",
+              "minChars": 10,
+              "maxChars": 100
+            },
+            "date": {
+              "required": true,
+              "example": "28 July 2025",
+              "minChars": 5,
+              "maxChars": 30
+            },
+            "imageSrc": {
+              "required": true,
+              "example": "/blog-1.jpg",
+              "note": "Image source URL for the blog thumbnail"
+            },
+            "imageAlt": {
+              "required": false,
+              "example": "Blog post preview image",
+              "note": "Falls back to blog title if not provided"
+            }
+          }
+        },
+        "propsSchema": {
+          "blogs": "Array<{ id: string, title: string, date: string, imageSrc: string, imageAlt?: string, onBlogClick?: () => void }>",
+          "gridVariant": "'uniform-all-items-equal' | 'uniform-staggered-items' | 'uniform-alternating-heights' | 'uniform-alternating-heights-inverted' | 'uniform-alternating-sizes' | 'uniform-alternating-sizes-inverted' | 'two-items-tall-short' | 'two-items-short-tall' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'four-items-2x2-alternating-heights' | 'four-items-2x2-alternating-heights-inverted' | 'four-items-2x2-staggered-grid' | 'four-items-2x2-staggered-grid-inverted' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right' | 'timeline' | 'timeline-three-columns' (required)",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)",
+          "containerStyle": "'default' | 'card' (required)",
+          "title": "string",
+          "titleSegments?": "TitleSegment[] - Array of { 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": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+          "uniformGridCustomHeightClasses?": "string",
+          "ariaLabel?": "string (default: 'Blog section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "cardClassName?": "string",
+          "cardTitleClassName?": "string",
+          "cardDateClassName?": "string",
+          "cardLinkClassName?": "string",
+          "imageWrapperClassName?": "string",
+          "imageClassName?": "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"
+        },
+        "usage": "<BlogCardSeven blogs={[{ id: '1', title: '2025 State of Venture: Resilience in early-stage capital', date: '28 July 2025', imageSrc: '/blog1.jpg' }, { id: '2', title: 'Building scalable applications for the modern web', date: '18 Jan 2025', imageSrc: '/blog2.jpg' }]} gridVariant=\"uniform-all-items-equal\" animationType=\"slide-up\" containerStyle=\"default\" title=\"Latest Articles\" description=\"Stay updated with our latest insights\" textboxLayout=\"default\" useInvertedBackground=\"noInvert\" />"
+      },
+      {
+        "import": "import BlogCardEight from '@/components/sections/blog/BlogCardEight';",
+        "name": "BlogCardEight",
+        "path": "@/components/sections/blog/BlogCardEight",
+        "description": "Blog card with category label, portrait media, title, and tag-based footer.",
+        "details": "Use for blog listings with visual emphasis on portrait imagery. Layout: CardStackTextBox header → Grid/carousel of blog cards. Each card features primary-button styled container with category label, portrait aspect ratio media (square on mobile, 3:4 on desktop) using MediaContent component, title with line-clamp, and footer with Tag components in flex-wrap layout. Best for author/team spotlights, interviews, or content with strong visual identity.",
+        "constraints": {
+          "textRules": {
+            "title": {
+              "required": true,
+              "example": "Latest Articles",
+              "minChars": 2,
+              "maxChars": 50
+            },
+            "description": {
+              "required": true,
+              "example": "Stay updated with our latest insights",
+              "minChars": 5,
+              "maxChars": 300
+            },
+            "tag": {
+              "required": false,
+              "example": "Blog",
+              "minChars": 2,
+              "maxChars": 30
+            }
+          },
+          "itemRules": {
+            "minItems": 1,
+            "maxItems": 12,
+            "recommendedItems": "3-6",
+            "note": "Each blog requires id, category, title, tags array. Media uses discriminated union: either imageSrc (with optional imageAlt) OR videoSrc (with optional videoAriaLabel)."
+          }
+        },
+        "propsSchema": {
+          "blogs": "BlogCard[] - Array of { id: string, category: string, title: string, tags: string[], onBlogClick?: () => void } & (imageSrc + imageAlt OR videoSrc + videoAriaLabel)",
+          "carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
+          "uniformGridCustomHeightClasses?": "string",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)",
+          "containerStyle": "'default' | 'card' (required)",
+          "title": "string (required)",
+          "titleSegments?": "TitleSegment[]",
+          "description": "string (required)",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required)",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard' (required)",
+          "ariaLabel?": "string (default: 'Blog section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "cardClassName?": "string",
+          "mediaWrapperClassName?": "string",
+          "mediaClassName?": "string",
+          "cardTitleClassName?": "string",
+          "footerClassName?": "string",
+          "tagClassName?": "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"
+        },
+        "usage": "<BlogCardEight blogs={[{ id: '1', category: 'A day in the life', title: 'On overcoming adversity and finding your niche', tags: ['team', 'multimodal-ai', '7 min read'], imageSrc: '/blog1.jpg' }, { id: '2', category: 'Engineering', title: 'Building scalable ML infrastructure', tags: ['team', 'infrastructure', '5 min read'], imageSrc: '/blog2.jpg' }]} animationType=\"slide-up\" containerStyle=\"default\" title=\"Latest Articles\" description=\"Stay updated with our latest insights\" textboxLayout=\"default\" useInvertedBackground=\"noInvert\" />"
+      },
+      {
+        "import": "import BlogCardNine from '@/components/sections/blog/BlogCardNine';",
+        "name": "BlogCardNine",
+        "path": "@/components/sections/blog/BlogCardNine",
+        "description": "Blog card list with horizontal layout featuring media, category, title, tags, and optional buttons.",
+        "details": "Use for blog listings with horizontal card layout. Uses CardList component with card or border variants. Layout: CardStackTextBox header → Vertical list of blog items. Each card features media on left (40% width on desktop), category label, title with text-balance, tags using Tag components, and optional per-card buttons. Supports both card and border styling variants. Text colors adapt based on variant and useInvertedBackground settings. Best for detailed blog listings with call-to-action buttons.",
+        "constraints": {
+          "textRules": {
+            "title": {
+              "required": true,
+              "example": "Latest Articles",
+              "minChars": 2,
+              "maxChars": 50
+            },
+            "description": {
+              "required": true,
+              "example": "Stay updated with our latest insights",
+              "minChars": 5,
+              "maxChars": 300
+            },
+            "tag": {
+              "required": false,
+              "example": "Blog",
+              "minChars": 2,
+              "maxChars": 30
+            }
+          },
+          "itemRules": {
+            "minItems": 1,
+            "maxItems": 10,
+            "recommendedItems": "3-5",
+            "note": "Each blog requires id, category, title, tags array. Media uses discriminated union: either imageSrc (with optional imageAlt) OR videoSrc (with optional videoAriaLabel). Optional buttons array for per-card CTAs."
+          }
+        },
+        "propsSchema": {
+          "blogs": "BlogCard[] - Array of { id: string, category: string, title: string, tags: string[], buttons?: ButtonConfig[], onBlogClick?: () => void } & (imageSrc + imageAlt OR videoSrc + videoAriaLabel)",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)",
+          "variant": "'card' | 'border' (required)",
+          "title": "string (required)",
+          "titleSegments?": "TitleSegment[]",
+          "description": "string (required)",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required)",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard' (required)",
+          "ariaLabel?": "string (default: 'Blog 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",
+          "mediaWrapperClassName?": "string",
+          "mediaClassName?": "string",
+          "categoryClassName?": "string",
+          "cardTitleClassName?": "string",
+          "tagsContainerClassName?": "string",
+          "tagClassName?": "string",
+          "cardButtonClassName?": "string",
+          "cardButtonTextClassName?": "string"
+        },
+        "usage": "<BlogCardNine blogs={[{ id: '1', category: 'Engineering', title: 'Building scalable ML infrastructure for modern applications', tags: ['team', 'infrastructure', '5 min read'], imageSrc: '/blog1.jpg', buttons: [{ text: 'Read more', href: '#' }] }]} animationType=\"slide-up\" variant=\"card\" title=\"Latest Articles\" description=\"Stay updated with our latest insights\" textboxLayout=\"default\" useInvertedBackground=\"noInvert\" />"
+      },
+      {
+        "import": "import BlogCardTen from '@/components/sections/blog/BlogCardTen';",
+        "name": "BlogCardTen",
+        "path": "@/components/sections/blog/BlogCardTen",
+        "description": "Text-focused blog card list with title, subtitle, tags, and arrow indicator.",
+        "details": "Use for job listings, announcements, or text-focused content listings. Uses CardList component with card or border variants. Layout: CardStackTextBox header → Vertical list of items. Each card features large title with text-balance and line-clamp, subtitle below, tags at bottom left using Tag components, and arrow icon at bottom right with hover rotation animation. No media - purely text-focused layout. Text colors adapt based on variant and useInvertedBackground settings. Best for career pages, announcements, or minimal blog listings.",
+        "constraints": {
+          "textRules": {
+            "title": {
+              "required": true,
+              "example": "Open Positions",
+              "minChars": 2,
+              "maxChars": 50
+            },
+            "description": {
+              "required": true,
+              "example": "Join our team and help shape the future",
+              "minChars": 5,
+              "maxChars": 300
+            },
+            "tag": {
+              "required": false,
+              "example": "Careers",
+              "minChars": 2,
+              "maxChars": 30
+            }
+          },
+          "itemRules": {
+            "minItems": 1,
+            "maxItems": 10,
+            "recommendedItems": "3-6",
+            "note": "Each blog requires id, title, subtitle, tags array. No media props - text-focused layout."
+          }
+        },
+        "propsSchema": {
+          "blogs": "BlogCard[] - Array of { id: string, title: string, subtitle: string, tags: string[], onBlogClick?: () => void }",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)",
+          "variant": "'card' | 'border' (required)",
+          "title": "string (required)",
+          "titleSegments?": "TitleSegment[]",
+          "description": "string (required)",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required)",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard' (required)",
+          "ariaLabel?": "string (default: 'Blog 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",
+          "subtitleClassName?": "string",
+          "tagsContainerClassName?": "string",
+          "tagClassName?": "string",
+          "arrowClassName?": "string"
+        },
+        "usage": "<BlogCardTen blogs={[{ id: '1', title: 'Member of Technical Staff, Data Scientist', subtitle: 'Seattle, US · Full-time · Remote eligible', tags: ['Data Science', 'Copilot'] }]} animationType=\"slide-up\" variant=\"card\" title=\"Open Positions\" description=\"Join our team and help shape the future\" textboxLayout=\"default\" useInvertedBackground=\"noInvert\" />"
+      },
+      {
+        "import": "import BlogCardEleven from '@/components/sections/blog/BlogCardEleven';",
+        "name": "BlogCardEleven",
+        "path": "@/components/sections/blog/BlogCardEleven",
+        "description": "Two-column blog 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 blog posts, case studies, or news articles.",
+        "constraints": {
+          "textRules": {
+            "title": {
+              "required": true,
+              "example": "Latest News",
+              "minChars": 2,
+              "maxChars": 50
+            },
+            "description": {
+              "required": true,
+              "example": "Stay updated with our latest announcements",
+              "minChars": 5,
+              "maxChars": 300
+            },
+            "tag": {
+              "required": false,
+              "example": "News",
+              "minChars": 2,
+              "maxChars": 30
+            }
+          },
+          "itemRules": {
+            "minItems": 1,
+            "maxItems": 10,
+            "recommendedItems": "2-4",
+            "note": "Each blog requires id, title, author, description, tags array. Media uses discriminated union: either imageSrc (with optional imageAlt) OR videoSrc (with optional videoAriaLabel)."
+          }
+        },
+        "propsSchema": {
+          "blogs": "BlogCard[] - Array of { id: string, title: string, author: string, description: string, tags: string[], onBlogClick?: () => void } & (imageSrc + imageAlt OR videoSrc + videoAriaLabel)",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)",
+          "variant": "'card' | 'border' (required)",
+          "title": "string (required)",
+          "titleSegments?": "TitleSegment[]",
+          "description": "string (required)",
+          "tag?": "string",
+          "tagIcon?": "LucideIcon",
+          "buttons?": "ButtonConfig[]",
+          "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required)",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard' (required)",
+          "ariaLabel?": "string (default: 'Blog 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"
+        },
+        "usage": "<BlogCardEleven blogs={[{ 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: '/blog1.jpg' }]} animationType=\"slide-up\" variant=\"card\" title=\"Latest News\" description=\"Stay updated with our latest announcements\" textboxLayout=\"default\" useInvertedBackground=\"noInvert\" />"
+      }
+    ],
+    "contact": [
+      {
+        "import": "import ContactCenter from '@/components/sections/contact/ContactCenter';",
+        "name": "ContactCenter",
+        "path": "@/components/sections/contact/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",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "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",
+          "formClassName?": "string",
+          "inputClassName?": "string",
+          "buttonClassName?": "string",
+          "buttonTextClassName?": "string",
+          "termsClassName?": "string"
+        },
+        "usage": "// Wrap in ThemeProvider\n<ThemeProvider defaultButtonVariant=\"text-stagger\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"rounded\" background=\"aurora\" cardStyle=\"glass-elevated\" primaryButtonStyle=\"gradient\" secondaryButtonStyle=\"glass\">\n  <ContactCenter tag=\"Newsletter\" title=\"Stay updated with our latest news\" description=\"Subscribe to our newsletter for weekly updates and exclusive content.\" useInvertedBackground={\"noInvert\"} onSubmit={(email) => console.log(email)} />\n</ThemeProvider>"
+      },
+      {
+        "import": "import ContactSplit from '@/components/sections/contact/ContactSplit';",
+        "name": "ContactSplit",
+        "path": "@/components/sections/contact/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",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "imageSrc?": "string",
+          "videoSrc?": "string",
+          "imageAlt?": "string (default: '')",
+          "videoAriaLabel?": "string (default: 'Contact section video')",
+          "mediaPosition?": "'left' | 'right' (default: 'right')",
+          "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",
+          "ariaLabel?": "string (default: 'Contact section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "contentClassName?": "string",
+          "cardClassName?": "string",
+          "contactFormClassName?": "string",
+          "tagClassName?": "string",
+          "titleClassName?": "string",
+          "descriptionClassName?": "string",
+          "formClassName?": "string",
+          "formWrapperClassName?": "string",
+          "inputClassName?": "string",
+          "buttonClassName?": "string",
+          "buttonTextClassName?": "string",
+          "termsClassName?": "string",
+          "mediaWrapperClassName?": "string",
+          "mediaClassName?": "string"
+        },
+        "usage": "// Wrap in ThemeProvider\n<ThemeProvider defaultButtonVariant=\"text-stagger\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"rounded\" background=\"aurora\" cardStyle=\"glass-elevated\" primaryButtonStyle=\"gradient\" secondaryButtonStyle=\"glass\">\n  <ContactSplit tag=\"Newsletter\" title=\"Stay updated\" description=\"Subscribe to our newsletter for weekly updates and exclusive content.\" useInvertedBackground={\"noInvert\"} imageSrc=\"/placeholders/placeholder-16-9.svg\" onSubmit={(email) => console.log(email)} />\n</ThemeProvider>"
+      },
+      {
+        "import": "import ContactCenterForm from '@/components/sections/contact/ContactCenterForm';",
+        "name": "ContactCenterForm",
+        "path": "@/components/sections/contact/ContactCenterForm",
+        "description": "Centered contact form section with animated title and description, dynamic input fields, optional textarea, and submit button.",
+        "details": "Use for full contact forms with custom fields (name, email, message, etc.). Features centered layout with animated title and description using ThemeProvider's defaultTextAnimation, dynamic input fields array (minimum 2 required), optional textarea, and submit button. All form inputs use secondary-button styling with rounded-theme borders. Form is placed in a large card container. Returns Record<string, string> with all field values on submit. Ideal for contact pages requiring multiple user inputs beyond just email.",
+        "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": "InputField[] (min 2 required)",
+          "textarea?": "TextareaField",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "buttonText?": "string (default: 'Submit')",
+          "onSubmit?": "(data: Record<string, string>) => void",
+          "ariaLabel?": "string (default: 'Contact section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "contentClassName?": "string",
+          "titleClassName?": "string",
+          "descriptionClassName?": "string",
+          "buttonClassName?": "string",
+          "buttonTextClassName?": "string"
+        },
+        "usage": "// Wrap in ThemeProvider\n<ThemeProvider defaultButtonVariant=\"text-stagger\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"rounded\" background=\"aurora\" cardStyle=\"glass-elevated\" primaryButtonStyle=\"gradient\" secondaryButtonStyle=\"glass\">\n  <ContactCenterForm title=\"Contact us\" description=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\" 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={\"noInvert\"} onSubmit={(data) => console.log(data)} />\n</ThemeProvider>"
+      },
+      {
+        "import": "import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';",
+        "name": "ContactSplitForm",
+        "path": "@/components/sections/contact/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": "InputField[] (min 2 required)",
+          "textarea?": "TextareaField",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "imageSrc?": "string",
+          "videoSrc?": "string",
+          "imageAlt?": "string (default: '')",
+          "videoAriaLabel?": "string (default: 'Contact section video')",
+          "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"
+        },
+        "usage": "// 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={\"noInvert\"} imageSrc=\"/placeholders/placeholder-16-9.svg\" onSubmit={(data) => console.log(data)} />\n</ThemeProvider>"
+      },
+      {
+        "import": "import ContactMedia from '@/components/sections/contact/ContactMedia';",
+        "name": "ContactMedia",
+        "path": "@/components/sections/contact/ContactMedia",
+        "description": "Full-width media contact section with centered overlay buttons on aspect-ratio media.",
+        "details": "Use for visual contact sections with prominent media and call-to-action buttons. Layout: Full-width section \u2192 Centered media container (w-content-width, aspect-square on mobile, aspect-video on md+, rounded-theme-capped) \u2192 MediaContent with optional overlay buttons. Buttons are centered and overlaid on the media using absolute positioning (top-1/2, left-1/2, translate). Supports up to 2 buttons with px-8 spacing. Media uses object-cover to fill container. Optional inverted background for section. All core fields required for visual consistency. Best for contact pages, inquiry sections, or call-to-action displays with strong visual emphasis.",
+        "constraints": {
+          "mediaRules": {
+            "imageSrc": {
+              "required": false,
+              "example": "/contact-image.jpg",
+              "note": "Either imageSrc or videoSrc should be provided"
+            },
+            "videoSrc": {
+              "required": false,
+              "example": "/contact-video.mp4",
+              "note": "Either imageSrc or videoSrc should be provided"
+            },
+            "imageAlt": {
+              "required": false,
+              "example": "Contact us",
+              "note": "Alt text for contact image"
+            },
+            "videoAriaLabel": {
+              "required": false,
+              "example": "Contact video",
+              "note": "ARIA label for contact video"
+            }
+          },
+          "buttonRules": {
+            "maxButtons": 2,
+            "note": "Supports up to 2 buttons overlaid on media. Buttons are centered and use px-8 spacing."
+          }
+        },
+        "propsSchema": {
+          "imageSrc?": "string",
+          "videoSrc?": "string",
+          "imageAlt?": "string",
+          "videoAriaLabel?": "string",
+          "buttons?": "ButtonConfig[]",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "ariaLabel?": "string (default: 'Contact section')",
+          "className?": "string",
+          "mediaWrapperClassName?": "string",
+          "mediaClassName?": "string",
+          "buttonContainerClassName?": "string",
+          "buttonClassName?": "string",
+          "buttonTextClassName?": "string"
+        },
+        "usage": "<ContactMedia imageSrc=\"/contact.jpg\" imageAlt=\"Contact us\" buttons={[{ text: 'Get in Touch', href: '/contact' }]} useInvertedBackground={\"noInvert\"} />"
+      },
+      {
+        "import": "import ContactText from '@/components/sections/contact/ContactText';",
+        "name": "ContactText",
+        "path": "@/components/sections/contact/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 \u2192 Card container (w-content-width, card class, rounded-theme-capped, py-20 px-10) \u2192 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": 200
+            },
+            "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?": "ButtonConfig[]",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "ariaLabel?": "string (default: 'Contact section')",
+          "className?": "string",
+          "containerClassName?": "string - Card wrapper styling",
+          "textClassName?": "string - TextAnimation heading styling",
+          "buttonContainerClassName?": "string",
+          "buttonClassName?": "string",
+          "buttonTextClassName?": "string"
+        },
+        "usage": "<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' }]} useInvertedBackground=\"noInvert\" />"
+      },
+      {
+        "import": "import ContactParallax from '@/components/sections/contact/ContactParallax';",
+        "name": "ContactParallax",
+        "path": "@/components/sections/contact/ContactParallax",
+        "description": "Full-screen parallax contact section with fixed background media and centered overlay buttons.",
+        "details": "Use for immersive contact sections with parallax scrolling effect. Layout: Full-screen section (h-svh) with clip-path \u2192 Fixed background media (position: fixed, inset-0) \u2192 Centered overlay buttons (z-10, flexbox centered). The fixed positioning creates a parallax effect as the user scrolls. Media uses object-cover with rounded-none to fill entire viewport. Supports up to 2 buttons with px-8 spacing, centered both horizontally and vertically. Best for hero-style contact sections, dramatic call-to-action displays, or immersive inquiry pages. Requires surrounding content sections for parallax effect to be visible.",
+        "constraints": {
+          "mediaRules": {
+            "imageSrc": {
+              "required": false,
+              "example": "/contact-image.jpg",
+              "note": "Either imageSrc or videoSrc should be provided"
+            },
+            "videoSrc": {
+              "required": false,
+              "example": "/contact-video.mp4",
+              "note": "Either imageSrc or videoSrc should be provided"
+            },
+            "imageAlt": {
+              "required": false,
+              "example": "Contact us",
+              "note": "Alt text for contact image"
+            },
+            "videoAriaLabel": {
+              "required": false,
+              "example": "Contact video",
+              "note": "ARIA label for contact video"
+            }
+          },
+          "buttonRules": {
+            "maxButtons": 2,
+            "note": "Supports up to 2 buttons overlaid on media. Buttons are centered in viewport and use px-8 spacing."
+          },
+          "layoutRules": {
+            "note": "Component uses h-svh and should be surrounded by other content sections for parallax effect to be visible during scroll."
+          }
+        },
+        "propsSchema": {
+          "imageSrc?": "string",
+          "videoSrc?": "string",
+          "imageAlt?": "string",
+          "videoAriaLabel?": "string",
+          "buttons?": "ButtonConfig[]",
+          "ariaLabel?": "string (default: 'Contact section')",
+          "className?": "string",
+          "mediaClassName?": "string",
+          "buttonContainerClassName?": "string",
+          "buttonClassName?": "string",
+          "buttonTextClassName?": "string"
+        },
+        "usage": "<ContactParallax imageSrc=\"/contact.jpg\" imageAlt=\"Contact us\" buttons={[{ text: 'Get in Touch', href: '/contact' }]} />"
+      },
+      {
+        "import": "import ContactInline from '@/components/sections/contact/ContactInline';",
+        "name": "ContactInline",
+        "path": "@/components/sections/contact/ContactInline",
+        "description": "Inline contact section with animated heading on left and email signup form on right.",
+        "details": "Use for simple, inline contact/CTA sections. Layout: Animated heading (left, 50%) + EmailSignupForm (right, 50%). Mobile: vertical stack. Desktop: horizontal 50/50 split. Heading uses TextAnimation with words-trigger variant. Form includes email input and button in a single card (EmailSignupForm component). Best for newsletter signups, waitlist forms, or simple contact inquiries. Clean, minimal layout focuses attention on the call-to-action.",
+        "constraints": {
+          "textRules": {
+            "text": {
+              "required": true,
+              "example": "What problem are you up against?",
+              "minChars": 5,
+              "maxChars": 100,
+              "note": "Animated heading text shown on left"
+            },
+            "inputPlaceholder": {
+              "required": false,
+              "default": "Enter your message",
+              "example": "How can I help you today?",
+              "minChars": 5,
+              "maxChars": 50
+            },
+            "buttonText": {
+              "required": false,
+              "default": "Submit",
+              "example": "Ask Claude",
+              "minChars": 2,
+              "maxChars": 15
+            }
+          },
+          "animationRules": {
+            "animationType": {
+              "required": false,
+              "default": "entrance-slide",
+              "options": ["entrance-slide", "reveal-blur", "background-highlight"],
+              "note": "Animation type for heading text (TextAnimation component)"
+            }
+          }
+        },
+        "propsSchema": {
+          "text": "string",
+          "animationType?": "'entrance-slide' | 'reveal-blur' | 'background-highlight' (default: 'entrance-slide')",
+          "inputPlaceholder?": "string (default: 'Enter your message')",
+          "buttonText?": "string (default: 'Submit')",
+          "onSubmit?": "(email: string) => void",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "ariaLabel?": "string (default: 'Contact section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "textClassName?": "string",
+          "formClassName?": "string",
+          "inputClassName?": "string",
+          "buttonClassName?": "string",
+          "buttonTextClassName?": "string"
+        },
+        "usage": "<ContactInline text=\"What problem are you up against?\" inputPlaceholder=\"How can I help you today?\" buttonText=\"Ask Claude\" onSubmit={(email) => console.log(email)} useInvertedBackground={\"noInvert\"} />"
+      },
+      {
+        "import": "import ContactFaq from '@/components/sections/contact/ContactFaq';",
+        "name": "ContactFaq",
+        "path": "@/components/sections/contact/ContactFaq",
+        "description": "Split-panel contact section with CTA card on left and FAQ accordions on right.",
+        "details": "Use for combining contact CTA with frequently asked questions. Layout: Left Panel (4 cols) - Icon → Title → Description → CTA Button. Right Panel (8 cols) - FAQ Accordions. CTA panel uses card styling with centered content and primary-button icon container. FAQ accordions support both smooth and instant animation types. Best for sales/support pages requiring both contact options and common questions. Grid-based layout (12-column system) for responsive behavior.",
+        "constraints": {
+          "textRules": {
+            "ctaTitle": {
+              "required": true,
+              "example": "Book an intro call",
+              "minChars": 2,
+              "maxChars": 50
+            },
+            "ctaDescription": {
+              "required": true,
+              "example": "Let's get started with a brief intro call.",
+              "minChars": 5,
+              "maxChars": 100
+            }
+          },
+          "faqRules": {
+            "id": {
+              "required": true,
+              "example": "1",
+              "minChars": 1,
+              "maxChars": 20
+            },
+            "title": {
+              "required": true,
+              "example": "What's included in the subscription?",
+              "minChars": 5,
+              "maxChars": 100
+            },
+            "content": {
+              "required": true,
+              "example": "Your subscription covers end-to-end digital design services...",
+              "minChars": 10,
+              "maxChars": 500,
+              "note": "Supports HTML content"
+            }
+          }
+        },
+        "propsSchema": {
+          "faqs": "Array<{ id: string, title: string, content: string }>",
+          "ctaTitle": "string",
+          "ctaDescription": "string",
+          "ctaButton": "ButtonConfig - { text: string, href?: string, onClick?: () => void }",
+          "ctaIcon": "LucideIcon (required)",
+          "useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
+          "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect on panels)",
+          "accordionAnimationType?": "'smooth' | 'instant' (default: 'smooth')",
+          "showCard?": "boolean (default: true - controls accordion card styling)",
+          "ariaLabel?": "string (default: 'Contact and FAQ section')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "ctaPanelClassName?": "string",
+          "ctaIconClassName?": "string",
+          "ctaTitleClassName?": "string",
+          "ctaDescriptionClassName?": "string",
+          "ctaButtonClassName?": "string",
+          "ctaButtonTextClassName?": "string",
+          "faqsPanelClassName?": "string",
+          "faqsContainerClassName?": "string",
+          "accordionClassName?": "string",
+          "accordionTitleClassName?": "string",
+          "accordionIconContainerClassName?": "string",
+          "accordionIconClassName?": "string",
+          "accordionContentClassName?": "string",
+          "separatorClassName?": "string"
+        },
+        "usage": "<ContactFaq faqs={[{ id: '1', title: \"What's included?\", content: 'Your subscription covers...' }]} ctaTitle=\"Book an intro call\" ctaDescription=\"Let's get started with a brief intro call.\" ctaButton={{ text: 'Book a Free Call', href: '#contact' }} ctaIcon={Phone} useInvertedBackground=\"noInvert\" animationType=\"slide-up\" />"
+      }
+    ],
+    "footer": [
+      {
+        "import": "import FooterBase from '@/components/sections/footer/FooterBase';",
+        "name": "FooterBase",
+        "path": "@/components/sections/footer/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 logo (image or text fallback) on left, flexible column layout for navigation links, copyright text, and privacy policy button. If logoSrc is not provided, displays logoText as h2 heading. All links use ButtonTextUnderline component. Footer uses primary-button background with text-background color scheme.",
+        "constraints": {
+          "textRules": {
+            "logoText": {
+              "required": false,
+              "default": "Webild",
+              "example": "Company Name",
+              "minChars": 2,
+              "maxChars": 30
+            },
+            "copyrightText": {
+              "required": false,
+              "default": "\u00a9 2025 | Webild",
+              "example": "\u00a9 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": "FooterColumn[] (required)",
+          "logoSrc?": "string (default: '/brand/logowhite.svg')",
+          "logoText?": "string (default: 'Webild')",
+          "logoWidth?": "number (default: 120)",
+          "logoHeight?": "number (default: 40)",
+          "copyrightText?": "string (default: '\u00a9 2025 | Webild')",
+          "onPrivacyClick?": "() => void",
+          "ariaLabel?": "string (default: 'Site footer')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "logoClassName?": "string",
+          "logoTextClassName?": "string",
+          "columnsClassName?": "string",
+          "columnClassName?": "string",
+          "columnTitleClassName?": "string",
+          "columnItemClassName?": "string",
+          "copyrightContainerClassName?": "string",
+          "copyrightTextClassName?": "string",
+          "privacyButtonClassName?": "string"
+        },
+        "usage": "<FooterBase columns={[{ title: 'Product', items: [{ label: 'Features', href: 'features' }, { label: 'Pricing', href: 'pricing' }] }]} copyrightText=\"\u00a9 2025 | Company\" onPrivacyClick={() => console.log('Privacy clicked')} />"
+      },
+      {
+        "import": "import FooterMedia from '@/components/sections/footer/FooterMedia';",
+        "name": "FooterMedia",
+        "path": "@/components/sections/footer/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: logo, multi-column navigation, copyright, and privacy policy. Media is required (either imageSrc or videoSrc). Same navigation structure as FooterBase.",
+        "constraints": {
+          "textRules": {
+            "logoText": {
+              "required": false,
+              "default": "Webild",
+              "example": "Company Name",
+              "minChars": 2,
+              "maxChars": 30
+            },
+            "copyrightText": {
+              "required": false,
+              "default": "\u00a9 2025 | Webild",
+              "example": "\u00a9 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"
+            },
+            "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')",
+          "columns": "FooterColumn[] (required)",
+          "logoSrc?": "string (default: '/brand/logowhite.svg')",
+          "logoText?": "string (default: 'Webild')",
+          "logoWidth?": "number (default: 120)",
+          "logoHeight?": "number (default: 40)",
+          "copyrightText?": "string (default: '\u00a9 2025 | Webild')",
+          "onPrivacyClick?": "() => void",
+          "ariaLabel?": "string (default: 'Site footer')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "mediaWrapperClassName?": "string",
+          "mediaClassName?": "string",
+          "logoClassName?": "string",
+          "logoTextClassName?": "string",
+          "columnsClassName?": "string",
+          "columnClassName?": "string",
+          "columnTitleClassName?": "string",
+          "columnItemClassName?": "string",
+          "copyrightContainerClassName?": "string",
+          "copyrightTextClassName?": "string",
+          "privacyButtonClassName?": "string"
+        },
+        "usage": "<FooterMedia imageSrc=\"https://images.unsplash.com/photo-1497215728101-856f4ea42174?w=1920\" columns={[{ title: 'Product', items: [{ label: 'Features', href: 'features' }, { label: 'Pricing', href: 'pricing' }] }]} copyrightText=\"\u00a9 2025 | Company\" />"
+      },
+      {
+        "import": "import FooterSocial from '@/components/sections/footer/FooterSocial';",
+        "name": "FooterSocial",
+        "path": "@/components/sections/footer/FooterSocial",
+        "description": "Modern footer component with prominent social media icons and multi-column navigation.",
+        "details": "Use when you want to emphasize social media presence. Features logo (image or text fallback), copyright text, social media icon links in card containers, and responsive multi-column navigation. Social icons display in circular card containers. Columns display 2 per row on mobile, expanding to horizontal layout on desktop.",
+        "constraints": {
+          "textRules": {
+            "logoText": {
+              "required": false,
+              "default": "Webild",
+              "example": "Company Name",
+              "minChars": 2,
+              "maxChars": 30
+            },
+            "copyrightText": {
+              "required": false,
+              "default": "\u00a9 Finerpoint, Inc. 2025",
+              "example": "\u00a9 Company, Inc. 2025",
+              "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": 6,
+              "note": "Each column must have title and items array. Displays 2 per row on mobile."
+            },
+            "socialLinks": {
+              "required": false,
+              "maxLinks": 8,
+              "note": "Each social link must have icon (LucideIcon), href (string), and ariaLabel (string). Links open in new tab."
+            }
+          }
+        },
+        "propsSchema": {
+          "logoSrc?": "string",
+          "logoText?": "string (default: 'Webild')",
+          "logoWidth?": "number (default: 120)",
+          "logoHeight?": "number (default: 40)",
+          "columns": "FooterColumn[]",
+          "socialLinks?": "SocialLink[]",
+          "copyrightText?": "string (default: '\u00a9 Finerpoint, Inc. 2025')",
+          "ariaLabel?": "string (default: 'Site footer')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "logoContainerClassName?": "string",
+          "logoClassName?": "string",
+          "logoTextClassName?": "string",
+          "copyrightTextClassName?": "string",
+          "socialContainerClassName?": "string",
+          "socialIconClassName?": "string",
+          "columnsClassName?": "string",
+          "columnClassName?": "string",
+          "columnTitleClassName?": "string",
+          "columnItemClassName?": "string"
+        },
+        "usage": "<FooterSocial logoText=\"Bevel\" columns={[{ title: 'Company', items: [{ label: 'About us', href: 'about' }] }, { title: 'Product', items: [{ label: 'Features', href: 'features' }] }]} socialLinks={[{ icon: Instagram, href: 'https://instagram.com', ariaLabel: 'Instagram' }]} copyrightText=\"\u00a9 Finerpoint, Inc. 2025\" />"
+      },
+      {
+        "import": "import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';",
+        "name": "FooterBaseReveal",
+        "path": "@/components/sections/footer/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": "\u00a9 2025 | Webild",
+              "example": "\u00a9 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": {
+          "columns": "FooterColumn[] (required)",
+          "logoSrc?": "string",
+          "logoWidth?": "number",
+          "logoHeight?": "number",
+          "copyrightText?": "string",
+          "onPrivacyClick?": "() => void",
+          "ariaLabel?": "string",
+          "className?": "string",
+          "wrapperClassName?": "string",
+          "containerClassName?": "string",
+          "footerClassName?": "string",
+          "footerContainerClassName?": "string",
+          "logoClassName?": "string",
+          "columnsClassName?": "string",
+          "columnClassName?": "string",
+          "columnTitleClassName?": "string",
+          "columnItemClassName?": "string",
+          "copyrightContainerClassName?": "string",
+          "copyrightTextClassName?": "string",
+          "privacyButtonClassName?": "string"
+        },
+        "usage": "<FooterBaseReveal columns={[{ title: 'Product', items: [{ label: 'Features', href: 'features' }, { label: 'Pricing', href: 'pricing' }] }]} copyrightText=\"\u00a9 2025 | Company\" />"
+      },
+      {
+        "import": "import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';",
+        "name": "FooterLogoEmphasis",
+        "path": "@/components/sections/footer/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": "Either logoSrc (image) or logoText (SVG) can be used. If logoSrc provided, it takes precedence"
+            }
+          }
+        },
+        "propsSchema": {
+          "columns": "FooterColumn[] (required, max 5)",
+          "logoSrc?": "string",
+          "logoAlt?": "string (default: 'Logo')",
+          "logoText?": "string (default: 'Webild')",
+          "ariaLabel?": "string (default: 'Site footer')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "logoClassName?": "string",
+          "columnsClassName?": "string",
+          "columnClassName?": "string",
+          "itemClassName?": "string",
+          "iconClassName?": "string",
+          "buttonClassName?": "string"
+        },
+        "usage": "<FooterLogoEmphasis columns={[{ items: [{ label: 'Features', href: 'features' }] }, { items: [{ label: 'About', href: 'about' }] }]} logoText=\"Company\" />"
+      },
+      {
+        "import": "import FooterCard from '@/components/sections/footer/FooterCard';",
+        "name": "FooterCard",
+        "path": "@/components/sections/footer/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) \u2192 Card container (w-content-width, rounded-theme-capped, px-10) \u2192 FooterLogo \u2192 Divider line (h-px, bg-accent/20) \u2192 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": "\u00a9 2025 | Webild",
+              "minChars": 5,
+              "maxChars": 100,
+              "note": "Copyright text displayed at bottom left"
+            },
+            "logoText": {
+              "required": false,
+              "example": "Webild",
+              "minChars": 2,
+              "maxChars": 30,
+              "note": "Text used for SVG logo when logoSrc not provided"
+            },
+            "logoAlt": {
+              "required": false,
+              "example": "Company Logo",
+              "minChars": 2,
+              "maxChars": 50,
+              "note": "Alt text for logo image"
+            }
+          },
+          "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": "Either logoSrc (image) or logoText (SVG) can be used. If logoSrc provided, it takes precedence in FooterLogo component."
+          }
+        },
+        "propsSchema": {
+          "logoSrc?": "string",
+          "logoAlt?": "string (default: 'Logo')",
+          "logoText?": "string (default: 'Webild')",
+          "copyrightText?": "string (default: '\u00a9 2025 | Webild')",
+          "socialLinks?": "SocialLink[]",
+          "ariaLabel?": "string (default: 'Site footer')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "cardClassName?": "string",
+          "logoClassName?": "string",
+          "svgClassName?": "string",
+          "dividerClassName?": "string",
+          "copyrightContainerClassName?": "string",
+          "copyrightTextClassName?": "string",
+          "socialContainerClassName?": "string",
+          "socialIconClassName?": "string"
+        },
+        "usage": "<FooterCard logoText=\"Webild\" copyrightText=\"\u00a9 2025 | Webild\" socialLinks={[{ icon: Twitter, href: 'https://twitter.com/webild', ariaLabel: 'Twitter' }, { icon: Linkedin, href: 'https://linkedin.com/company/webild', ariaLabel: 'LinkedIn' }]} />"
+      },
+      {
+        "import": "import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';",
+        "name": "FooterBaseCard",
+        "path": "@/components/sections/footer/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) \u2192 Card container (w-content-width, rounded-theme-capped, p-10) \u2192 Top section (logo + FooterColumns in flex-row) \u2192 Border divider (border-t, border-foreground/20) \u2192 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": "\u00a9 2025 | Webild",
+              "minChars": 5,
+              "maxChars": 100,
+              "note": "Copyright text displayed at bottom left"
+            },
+            "logoText": {
+              "required": false,
+              "example": "Webild",
+              "minChars": 2,
+              "maxChars": 30,
+              "note": "Text used for heading when logoSrc not provided"
+            }
+          },
+          "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": "Either logoSrc (image) or logoText (heading) can be used. If logoSrc provided, it takes precedence over logoText."
+          }
+        },
+        "propsSchema": {
+          "logoSrc?": "string",
+          "logoText?": "string (default: 'Webild')",
+          "logoWidth?": "number (default: 120)",
+          "logoHeight?": "number (default: 40)",
+          "columns": "FooterColumn[] (required)",
+          "copyrightText?": "string (default: '\u00a9 2025 | Webild')",
+          "onPrivacyClick?": "() => void",
+          "ariaLabel?": "string (default: 'Site footer')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "cardClassName?": "string",
+          "logoClassName?": "string",
+          "logoTextClassName?": "string",
+          "columnsClassName?": "string",
+          "columnClassName?": "string",
+          "columnTitleClassName?": "string",
+          "columnItemClassName?": "string",
+          "copyrightContainerClassName?": "string",
+          "copyrightTextClassName?": "string",
+          "privacyButtonClassName?": "string"
+        },
+        "usage": "<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=\"\u00a9 2025 | Webild\" onPrivacyClick={() => console.log('Privacy clicked')} />"
+      },
+      {
+        "import": "import FooterSplit from '@/components/sections/footer/FooterSplit';",
+        "name": "FooterSplit",
+        "path": "@/components/sections/footer/FooterSplit",
+        "description": "Card-wrapped footer with navigation columns, prominent title with optional avatars, logo, and contact information.",
+        "details": "Use for footers that highlight a key message or value proposition alongside navigation. Layout: Card container with two main sections - Top: Navigation columns (left) + Large title with optional avatar group (right). Bottom: Logo (image or text) + Contact items with icons. Title is required and prominently displayed. Contact items use icon-text pairs for phone, email, address, etc. Best for modern, marketing-focused footers that emphasize brand messaging. Uses semantic footer tag with contentinfo role.",
+        "constraints": {
+          "textRules": {
+            "title": {
+              "required": true,
+              "example": "Complete protection for every stage of your practice",
+              "minChars": 10,
+              "maxChars": 120,
+              "note": "Prominent title displayed on right side of footer"
+            },
+            "logoText": {
+              "required": false,
+              "example": "Webild",
+              "minChars": 2,
+              "maxChars": 30,
+              "note": "Text used for logo when logoSrc not provided"
+            },
+            "logoAlt": {
+              "required": false,
+              "example": "Company Logo",
+              "minChars": 2,
+              "maxChars": 50,
+              "note": "Alt text for logo image"
+            }
+          },
+          "columnsRules": {
+            "required": true,
+            "structure": {
+              "title": "string - Column heading (required)",
+              "items": "Array<{ label: string, href: string }> - Navigation links (required)"
+            },
+            "minColumns": 1,
+            "maxColumns": 5,
+            "note": "Navigation columns displayed on left side. Each column must have title and items array."
+          },
+          "contactItemsRules": {
+            "required": true,
+            "structure": {
+              "icon": "LucideIcon - Icon component (required)",
+              "text": "string - Contact information text (required)"
+            },
+            "note": "Array of contact items displayed at bottom right with icons. Common icons: Phone, Mail, MapPin."
+          },
+          "avatarsRules": {
+            "required": false,
+            "structure": {
+              "src": "string - Image URL (required)",
+              "alt": "string - Alt text (required)"
+            },
+            "note": "Optional array of team member avatars displayed below title using AvatarGroup component."
+          },
+          "logoRules": {
+            "note": "Either logoSrc (image) or logoText (heading) can be used. If logoSrc provided, displays as image with specified width/height."
+          }
+        },
+        "propsSchema": {
+          "logoSrc?": "string",
+          "logoAlt?": "string (default: 'Logo')",
+          "logoText?": "string (default: 'Webild')",
+          "logoWidth?": "number (default: 120)",
+          "logoHeight?": "number (default: 40)",
+          "columns": "FooterColumn[] (required)",
+          "title": "string (required)",
+          "avatars?": "Avatar[]",
+          "contactItems": "ContactItem[] (required)",
+          "ariaLabel?": "string (default: 'Site footer')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "cardClassName?": "string",
+          "contentClassName?": "string",
+          "columnsClassName?": "string",
+          "columnClassName?": "string",
+          "columnTitleClassName?": "string",
+          "columnItemClassName?": "string",
+          "titleClassName?": "string",
+          "avatarGroupClassName?": "string",
+          "logoClassName?": "string",
+          "logoTextClassName?": "string",
+          "contactClassName?": "string",
+          "contactItemClassName?": "string",
+          "contactIconClassName?": "string"
+        },
+        "usage": "<FooterSplit columns={[{ title: 'Product', items: [{ label: 'Features', href: '/features' }] }]} title=\"Complete protection for every stage of your practice\" contactItems={[{ icon: Phone, text: '(914) 820-5734' }, { icon: Mail, text: 'contact@webild.com' }]} avatars={[{ src: '/team1.jpg', alt: 'Team member' }]} logoText=\"Webild\" />"
+      },
+      {
+        "import": "import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';",
+        "name": "FooterLogoReveal",
+        "path": "@/components/sections/footer/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": false,
+              "example": "Webild",
+              "minChars": 2,
+              "maxChars": 30,
+              "note": "Text used for SVG logo when logoSrc not provided"
+            },
+            "logoAlt": {
+              "required": false,
+              "example": "Company Logo",
+              "minChars": 2,
+              "maxChars": 50,
+              "note": "Alt text for logo image"
+            }
+          },
+          "logoRules": {
+            "note": "Either logoSrc (image) or logoText (SVG) can be used. If logoSrc provided, displays as image with full width. If not provided, uses SvgTextLogo with logoText."
+          },
+          "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 (default: 'Logo')",
+          "logoText?": "string (default: 'Webild')",
+          "ariaLabel?": "string (default: 'Site footer')",
+          "className?": "string",
+          "wrapperClassName?": "string",
+          "containerClassName?": "string",
+          "logoClassName?": "string",
+          "svgClassName?": "string"
+        },
+        "usage": "<FooterLogoReveal logoText=\"Webild\" />"
+      },
+      {
+        "import": "import FooterBaseSocial from '@/components/sections/footer/FooterBaseSocial';",
+        "name": "FooterBaseSocial",
+        "path": "@/components/sections/footer/FooterBaseSocial",
+        "description": "Footer with logo, description, social links, and multi-column navigation.",
+        "details": "Use for footers that need both description text and social media links alongside navigation. Features logo (image or text fallback), description below logo, social media icons at the bottom of the left column, and flexible column layout for navigation links. Social icons and description fill the left column height to match navigation columns. Footer uses primary-button background with text-background color scheme.",
+        "constraints": {
+          "textRules": {
+            "description": {
+              "required": true,
+              "example": "Learn the skill that turns everyday AI into extraordinary results.",
+              "minChars": 10,
+              "maxChars": 150
+            },
+            "logoText": {
+              "required": false,
+              "default": "Webild",
+              "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": "Links",
+              "minChars": 2,
+              "maxChars": 20
+            },
+            "itemLabel": {
+              "required": true,
+              "example": "Curriculum",
+              "minChars": 2,
+              "maxChars": 30
+            }
+          },
+          "structureRules": {
+            "columns": {
+              "required": true,
+              "minColumns": 1,
+              "maxColumns": 4,
+              "note": "Each column must have title and items array"
+            },
+            "socialLinks": {
+              "required": true,
+              "minLinks": 1,
+              "maxLinks": 8,
+              "note": "Each social link must have icon (LucideIcon), href (string), and ariaLabel (string). Links open in new tab."
+            },
+            "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": "FooterColumn[] (required)",
+          "description": "string (required)",
+          "socialLinks": "SocialLink[] (required)",
+          "logoSrc?": "string (default: '/brand/logowhite.svg')",
+          "logoText?": "string (default: 'Webild')",
+          "logoWidth?": "number (default: 120)",
+          "logoHeight?": "number (default: 40)",
+          "copyrightText?": "string (default: '© 2025 | Webild')",
+          "onPrivacyClick?": "() => void",
+          "ariaLabel?": "string (default: 'Site footer')",
+          "className?": "string",
+          "containerClassName?": "string",
+          "logoClassName?": "string",
+          "logoTextClassName?": "string",
+          "descriptionClassName?": "string",
+          "columnsClassName?": "string",
+          "columnClassName?": "string",
+          "columnTitleClassName?": "string",
+          "columnItemClassName?": "string",
+          "socialLinksClassName?": "string",
+          "socialIconClassName?": "string",
+          "copyrightContainerClassName?": "string",
+          "copyrightTextClassName?": "string",
+          "privacyButtonClassName?": "string"
+        },
+        "usage": "<FooterBaseSocial columns={[{ title: 'Links', items: [{ label: 'Curriculum', href: 'curriculum' }, { label: 'Pricing', href: 'pricing' }] }, { title: 'Others', items: [{ label: 'Terms of Service', href: 'terms' }, { label: 'Privacy Policy', href: 'privacy' }] }]} description=\"Learn the skill that turns everyday AI into extraordinary results.\" socialLinks={[{ icon: Youtube, href: 'https://youtube.com', ariaLabel: 'YouTube' }, { icon: Twitter, href: 'https://twitter.com', ariaLabel: 'Twitter' }]} />"
+      }
+    ]
+  }
+}
\ No newline at end of file
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/globals.css b/src/app/globals.css
new file mode 100644
index 0000000..6a039d2
--- /dev/null
+++ b/src/app/globals.css
@@ -0,0 +1,510 @@
+@import "tailwindcss";
+
+:root {
+  /* Base units */
+  /* --vw is set by ThemeProvider */
+
+  --background: #f3f7f1;;
+  --card: #edf2eb;;
+  --foreground: #43483f;;
+  --primary-cta: #a8c4a0;;
+  --secondary-cta: #ffffff;;
+  --accent: #cbd8c8;;
+  --background-accent: #93b08b;;
+
+  /* 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-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: 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-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;
+  }
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-card: var(--card);
+  --color-foreground: var(--foreground);
+  --color-primary-cta: var(--primary-cta);
+  --color-secondary-cta: var(--secondary-cta);
+  --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-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: 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);
+}
+
+@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;
+  }
+
+  .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-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 */
+
+  .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%;
+    }
+  }
+
+}
+
+* {
+  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-open-sans), sans-serif;
+  position: relative;
+  min-height: 100vh;
+  overscroll-behavior: none;
+  overscroll-behavior-y: none;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: var(--font-open-sans), sans-serif;
+}
\ No newline at end of file
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
new file mode 100644
index 0000000..2b9501e
--- /dev/null
+++ b/src/app/layout.tsx
@@ -0,0 +1,1277 @@
+import type { Metadata } from "next";
+import { Open_Sans } from "next/font/google";
+import "./globals.css";
+import { PostHogWrapper } from "@/components/PostHogWrapper";
+import Tag from "@/tag/Tag";
+
+const openSans = Open_Sans({
+  variable: "--font-open-sans",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Brew Haven - Premium Specialty Coffee Shop",
+  description: "Discover exceptional single-origin coffee, expert baristas, and cozy ambiance at Brew Haven. Your daily coffee destination.",
+  keywords: "specialty coffee, coffee shop, barista, latte, cappuccino, espresso, coffee house",
+  metadataBase: new URL("https://brewhaven.com"),
+  alternates: {
+    canonical: "https://brewhaven.com"
+  },
+  openGraph: {
+    title: "Brew Haven - Premium Specialty Coffee Shop",
+    description: "Discover exceptional single-origin coffee, expert baristas, and cozy ambiance at Brew Haven.",
+    siteName: "Brew Haven",
+    type: "website",
+    images: [{
+      url: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/uploaded-1765792318547-wj3phwbs.jpg",
+      alt: "Specialty coffee at Brew Haven"
+    }]
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "Brew Haven - Premium Specialty Coffee Shop",
+    description: "Discover exceptional single-origin coffee at Brew Haven. Open daily 7AM-7PM.",
+    images: ["https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/uploaded-1765792318547-wj3phwbs.jpg"]
+  },
+  robots: {
+    index: true,
+    follow: true
+  }
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <PostHogWrapper>
+        <body
+          className={openSans.variable}
+        >
+          <Tag />
+          {children}
+        
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+(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 {' +
+    '  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';
+  }
+
+  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('.webildsbx.cc/')) {
+      try {
+        const urlObj = new URL(url);
+        return urlObj.pathname;
+      } catch (e) {
+        return url;
+      }
+    }
+
+    return url;
+  };
+
+  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
+      };
+    }
+    
+    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';
+    if (isImage) 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' || computedStyle.backgroundImage !== 'none' || element.querySelector('img');
+      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';
+    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.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 (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 isBackground = element.tagName.toLowerCase() !== 'img';
+                if (isBackground) {
+                  element.style.backgroundImage = change.oldValue ? 'url(' + change.oldValue + ')' : '';
+                } 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 } = 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;
+          element.src = newSrc;
+          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);
+  
+  window.webildCleanup = () => {
+    isActive = false;
+    
+    if (selectedElement) {
+      makeUneditable(selectedElement, false);
+    }
+    
+    removeHoverOverlay();
+    removeElementTypeLabel();
+    
+    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' }, '*');
+})();
+`
+          }}
+        />
+      </body>
+      </PostHogWrapper>
+    </html>
+  );
+}
\ No newline at end of file
diff --git a/src/app/page.tsx b/src/app/page.tsx
new file mode 100644
index 0000000..ccb12c1
--- /dev/null
+++ b/src/app/page.tsx
@@ -0,0 +1,336 @@
+"use client"
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import HeroWaitlist from '@/components/sections/hero/HeroWaitlist';
+import AboutShowcase from '@/components/sections/about/AboutShowcase';
+import ProductCardFive from '@/components/sections/product/ProductCardFive';
+import TeamCardNine from '@/components/sections/team/TeamCardNine';
+import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
+import ContactCenterForm from '@/components/sections/contact/ContactCenterForm';
+import FooterSocial from '@/components/sections/footer/FooterSocial';
+import { Coffee, Leaf, Sparkles, Users, Star, Instagram, Facebook, Twitter } from "lucide-react";
+
+export default function LandingPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-bubble"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="largeSizeExtraLargeSpacing"
+      background="animatedGrid"
+      cardStyle="glass-flat"
+      primaryButtonStyle="shadow"
+      secondaryButtonStyle="glass"
+      headingFontWeight="normal"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingOverlay
+          brandName="Brew Haven"
+          navItems={[
+            { name: "Home", id: "hero" },
+            { name: "About", id: "about" },
+            { name: "Menu", id: "menu" },
+            { name: "Team", id: "team" },
+            { name: "Reviews", id: "testimonials" }
+          ]}
+          button={{
+            text: "Visit Us",
+            href: "#contact"
+          }}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroWaitlist
+          title="Welcome to Brew Haven"
+          description="Discover exceptional coffee crafted with passion. Join our community of coffee lovers and get updates on new blends and special offers."
+          tag="Premium Coffee Experience"
+          tagIcon={Coffee}
+          fields={[
+            {
+              name: "email",
+              type: "email",
+              placeholder: "Your email",
+              ariaLabel: "Email address",
+              required: true
+            },
+            {
+              name: "name",
+              type: "text",
+              placeholder: "Your name",
+              ariaLabel: "Your name",
+              required: true
+            }
+          ]}
+          buttonText="Subscribe"
+          onSubmit={(data) => console.log('Newsletter signup:', data)}
+        />
+      </div>
+
+      <div id="about" data-section="about">
+        <AboutShowcase
+          title="Our Coffee Story"
+          description="Since 2015, Brew Haven has been sourcing the finest single-origin coffees from sustainable farms around the world. We believe in direct trade relationships, environmental responsibility, and creating the perfect cup every single time."
+          tag="About Us"
+          tagIcon={Leaf}
+          leftItem={{
+            title: "Ethical Sourcing",
+            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/uploaded-1765792319761-0ja9a7kg.jpg",
+            imageAlt: "Cozy modern coffee shop interior"
+          }}
+          rightItem={{
+            title: "Expert Craftsmanship",
+            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/uploaded-1765792320998-57mf7dij.jpg",
+            imageAlt: "Professional barista making coffee"
+          }}
+          centerImageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/uploaded-1765792319761-0ja9a7kg.jpg"
+          centerImageAlt="Brew Haven coffee shop interior"
+          useCappedBorderRadius={true}
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground="noInvert"
+          buttons={[
+            {
+              text: "Learn Our Process",
+              href: "#"
+            }
+          ]}
+        />
+      </div>
+
+      <div id="menu" data-section="menu">
+        <ProductCardFive
+          title="Featured Menu"
+          description="Explore our signature drinks and seasonal specials, each crafted to perfection by our expert baristas."
+          tag="What We Serve"
+          tagIcon={Sparkles}
+          products={[
+            {
+              id: "espresso",
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/uploaded-1765792322185-w3lgbhvc.jpg",
+              imageAlt: "Double shot espresso",
+              button: {
+                text: "Order Now",
+                id: "order-espresso"
+              }
+            },
+            {
+              id: "latte",
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/uploaded-1765792324070-6n6dljg7.jpg",
+              imageAlt: "Latte with latte art",
+              button: {
+                text: "Order Now",
+                id: "order-latte"
+              }
+            },
+            {
+              id: "cappuccino",
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/uploaded-1765792325147-9osxkgp2.jpg",
+              imageAlt: "Cappuccino",
+              button: {
+                text: "Order Now",
+                id: "order-cappuccino"
+              }
+            }
+          ]}
+          gridVariant="three-columns-all-equal-width"
+          animationType="slide-up"
+          containerStyle="default"
+          textboxLayout="default"
+          useInvertedBackground="noInvert"
+        />
+      </div>
+
+      <div id="team" data-section="team">
+        <TeamCardNine
+          title="Meet Our Baristas"
+          description="Passionate coffee experts dedicated to creating your perfect cup every visit."
+          tag="Our Team"
+          tagIcon={Users}
+          members={[
+            {
+              id: "1",
+              name: "Marco",
+              role: "Head Barista & Founder",
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/uploaded-1765792327013-olqkgnbv.jpg",
+              imageAlt: "Marco, Head Barista",
+              socialLinks: [
+                {
+                  icon: Instagram,
+                  href: "https://instagram.com",
+                  ariaLabel: "Instagram"
+                }
+              ]
+            },
+            {
+              id: "2",
+              name: "Sofia",
+              role: "Master Barista",
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/uploaded-1765792328068-fchzicys.jpg",
+              imageAlt: "Sofia, Master Barista",
+              socialLinks: [
+                {
+                  icon: Instagram,
+                  href: "https://instagram.com",
+                  ariaLabel: "Instagram"
+                }
+              ]
+            },
+            {
+              id: "3",
+              name: "James",
+              role: "Coffee Specialist",
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/uploaded-1765792329590-2nzegqo5.jpg",
+              imageAlt: "James, Coffee Specialist",
+              socialLinks: [
+                {
+                  icon: Instagram,
+                  href: "https://instagram.com",
+                  ariaLabel: "Instagram"
+                }
+              ]
+            }
+          ]}
+          animationType="slide-up"
+          containerStyle="default"
+          textboxLayout="default"
+          useInvertedBackground="noInvert"
+        />
+      </div>
+
+      <div id="testimonials" data-section="testimonials">
+        <TestimonialCardOne
+          title="What Customers Say"
+          description="Join thousands of coffee lovers who have made Brew Haven their daily stop."
+          tag="Customer Reviews"
+          tagIcon={Star}
+          testimonials={[
+            {
+              id: "1",
+              name: "Sarah M.",
+              role: "Coffee Enthusiast",
+              company: "Downtown Regular",
+              rating: 5,
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/uploaded-1765792331016-bjdd71t2.jpg",
+              imageAlt: "Sarah enjoying coffee"
+            },
+            {
+              id: "2",
+              name: "David L.",
+              role: "Business Owner",
+              company: "Local Startup",
+              rating: 5,
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/uploaded-1765792332654-3ss6esqc.jpg",
+              imageAlt: "David with coffee"
+            },
+            {
+              id: "3",
+              name: "Emma R.",
+              role: "Marketing Manager",
+              company: "Tech Company",
+              rating: 5,
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/uploaded-1765792334192-pa7xw2zr.jpg",
+              imageAlt: "Emma enjoying coffee"
+            },
+            {
+              id: "4",
+              name: "Michael T.",
+              role: "Student",
+              company: "University",
+              rating: 5,
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/uploaded-1765792335833-ajwgagqq.jpg",
+              imageAlt: "Michael with coffee"
+            }
+          ]}
+          gridVariant="uniform-all-items-equal"
+          animationType="slide-up"
+          containerStyle="default"
+          textboxLayout="default"
+          useInvertedBackground="noInvert"
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactCenterForm
+          title="Visit Us Today"
+          description="Located in the heart of the city. Open daily from 7 AM to 7 PM. We look forward to brewing your perfect cup."
+          inputs={[
+            {
+              name: "name",
+              type: "text",
+              placeholder: "Your name",
+              required: true
+            },
+            {
+              name: "email",
+              type: "email",
+              placeholder: "Your email",
+              required: true
+            }
+          ]}
+          textarea={{
+            name: "message",
+            placeholder: "Tell us about your visit or special request...",
+            rows: 4,
+            required: false
+          }}
+          buttonText="Send Message"
+          useInvertedBackground="noInvert"
+          onSubmit={(data) => console.log('Contact form:', data)}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterSocial
+          logoText="Brew Haven"
+          columns={[
+            {
+              title: "Company",
+              items: [
+                { label: "About Us", href: "#about" },
+                { label: "Our Story", href: "#" },
+                { label: "Careers", href: "#" }
+              ]
+            },
+            {
+              title: "Menu",
+              items: [
+                { label: "Coffee Selection", href: "#menu" },
+                { label: "Pastries", href: "#" },
+                { label: "Seasonal Drinks", href: "#" }
+              ]
+            },
+            {
+              title: "Connect",
+              items: [
+                { label: "Contact", href: "#contact" },
+                { label: "Find Us", href: "#" },
+                { label: "Newsletter", href: "#hero" }
+              ]
+            }
+          ]}
+          socialLinks={[
+            {
+              icon: Instagram,
+              href: "https://instagram.com/brewhaven",
+              ariaLabel: "Instagram"
+            },
+            {
+              icon: Facebook,
+              href: "https://facebook.com/brewhaven",
+              ariaLabel: "Facebook"
+            },
+            {
+              icon: Twitter,
+              href: "https://twitter.com/brewhaven",
+              ariaLabel: "Twitter"
+            }
+          ]}
+          copyrightText="© Brew Haven, Inc. 2025"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}
\ No newline at end of file
diff --git a/src/components/Accordion.tsx b/src/components/Accordion.tsx
new file mode 100644
index 0000000..1fd1839
--- /dev/null
+++ b/src/components/Accordion.tsx
@@ -0,0 +1,146 @@
+"use client";
+
+import { useEffect, useRef, useState, useCallback, memo } 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?: "noInvert" | "invertDefault" | "invertCard";
+  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-background",
+            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>
+  );
+};
+
+Accordion.displayName = "Accordion";
+
+export default memo(Accordion);
diff --git a/src/components/PostHogWrapper.tsx b/src/components/PostHogWrapper.tsx
new file mode 100644
index 0000000..e4d9cb5
--- /dev/null
+++ b/src/components/PostHogWrapper.tsx
@@ -0,0 +1,25 @@
+"use client";
+
+import { ReactNode } from "react";
+
+interface PostHogWrapperProps {
+  children: ReactNode;
+}
+
+/**
+ * PostHog analytics wrapper component.
+ * Currently a passthrough - configure with PostHog SDK when ready.
+ */
+export function PostHogWrapper({ children }: PostHogWrapperProps) {
+  // TODO: Add PostHog initialization here when needed
+  // Example:
+  // useEffect(() => {
+  //   if (typeof window !== 'undefined') {
+  //     posthog.init('YOUR_API_KEY', {
+  //       api_host: 'https://app.posthog.com'
+  //     });
+  //   }
+  // }, []);
+
+  return <>{children}</>;
+}
diff --git a/src/components/Textbox.tsx b/src/components/Textbox.tsx
new file mode 100644
index 0000000..e09905b
--- /dev/null
+++ b/src/components/Textbox.tsx
@@ -0,0 +1,290 @@
+"use client";
+
+import { memo, 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 } from "@/types/button";
+import type { Avatar } from "./shared/AvatarGroup";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+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;
+  buttons?: ButtonConfig[];
+  buttonContainerClassName?: string;
+  buttonClassName?: string;
+  buttonTextClassName?: string;
+  avatars?: Avatar[];
+  avatarText?: string;
+  avatarGroupClassName?: string;
+}
+
+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 = "",
+  buttons,
+  buttonContainerClassName = "",
+  buttonClassName = "",
+  buttonTextClassName = "",
+  avatars,
+  avatarText,
+  avatarGroupClassName = "",
+}: TextBoxProps) => {
+  const theme = useTheme();
+
+  // Shared tag component
+  const tagElement = useMemo(() => tag && (
+    <Tag
+      text={tag}
+      icon={TagIcon}
+      useInvertedBackground={useInvertedBackground}
+      className={cls(textboxLayout === "default" && "mb-3", tagClassName)}
+    />
+  ), [tag, TagIcon, useInvertedBackground, textboxLayout, tagClassName]);
+
+  // 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 === "invertDefault" || useInvertedBackground === "invertCard") && "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 === "invertDefault" || useInvertedBackground === "invertCard") && "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 === "invertDefault" || useInvertedBackground === "invertCard") && "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" && "mt-3",
+        center && textboxLayout === "default" && "justify-center",
+        avatarGroupClassName
+      )}
+    />
+  ) : null, [avatars, avatarText, textboxLayout, center, avatarGroupClassName]);
+
+  // Shared buttons/children component
+  const actionsElement = useMemo(() => buttons && buttons.length > 0 ? (
+    <div className={cls(
+      "flex gap-4",
+      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
+  ), [buttons, textboxLayout, center, buttonContainerClassName, theme.defaultButtonVariant, buttonClassName, buttonTextClassName, 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)}>
+        {inlineImageTitleElement}
+        {actionsElement}
+      </div>
+    );
+  }
+
+  // Default layout
+  return (
+    <div className={cls("flex flex-col gap-3 md:gap-1", center && "items-center text-center", className)}>
+      {tagElement}
+      {titleElement}
+      {descriptionElement}
+      {actionsElement}
+      {avatarsElement}
+    </div>
+  );
+};
+
+TextBox.displayName = "TextBox";
+
+export default memo(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..4cba2a9
--- /dev/null
+++ b/src/components/background/AnimatedAuroraBackground.tsx
@@ -0,0 +1,44 @@
+"use client";
+import React, { memo } from "react";
+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>
+  );
+};
+
+AnimatedAuroraBackground.displayName = "AnimatedAuroraBackground";
+
+export default memo(AnimatedAuroraBackground);
diff --git a/src/components/background/AnimatedGridBackground.tsx b/src/components/background/AnimatedGridBackground.tsx
new file mode 100644
index 0000000..4127bbd
--- /dev/null
+++ b/src/components/background/AnimatedGridBackground.tsx
@@ -0,0 +1,111 @@
+"use client";
+
+import { memo, 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;
+  perspectiveThreeD?: boolean;
+}
+
+const AnimatedGridBackground = ({
+  className = "",
+  squareSize = 100,
+  numSquares = 50,
+  maxOpacity = 0.15,
+  perspectiveThreeD = true,
+}: 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(
+        "fixed inset-0 -z-10 overflow-hidden [mask-image:radial-gradient(circle_at_center,white_0%,transparent_90%)]",
+        perspectiveThreeD && "inset-x-0 inset-y-[-30%] h-[200%] skew-y-12",
+        className
+      )}
+      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-accent/20"
+            />
+          </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>
+  );
+};
+
+AnimatedGridBackground.displayName = "AnimatedGridBackground";
+
+export default memo(AnimatedGridBackground);
diff --git a/src/components/background/AuroraBackground.tsx b/src/components/background/AuroraBackground.tsx
new file mode 100644
index 0000000..de03c3b
--- /dev/null
+++ b/src/components/background/AuroraBackground.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import { memo } from "react";
+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/10   -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/10   -rotate-[60deg] rounded-[100%]" />
+      {/* center left */}
+      <div className="absolute top-[-20vh] left-[2vw] -translate-x-[0%] w-[15vw] h-[150vh] bg-background-accent/10   -rotate-[45deg] rounded-[100%]" />
+      {/* top left */}
+      <div className="absolute top-[-30vh] left-0 -translate-x-[0%] w-[10vw] h-[70vh] bg-background-accent/10   -rotate-[45deg] rounded-[100%]" />
+      {/* bottom center */}
+      <div className="absolute bottom-[-40vh] left-0 -translate-x-[0%] w-[120vw] h-[50vh] bg-background-accent/5   -rotate-[20deg] rounded-[100%]" />
+    </div>
+  );
+};
+
+AuroraBackground.displayName = "AuroraBackground";
+
+export default memo(AuroraBackground);
diff --git a/src/components/background/BlurBottomBackground.tsx b/src/components/background/BlurBottomBackground.tsx
new file mode 100644
index 0000000..8c95f54
--- /dev/null
+++ b/src/components/background/BlurBottomBackground.tsx
@@ -0,0 +1,58 @@
+"use client";
+
+import { memo, 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-50 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"
+    />
+  );
+};
+
+BlurBottomBackground.displayName = "BlurBottomBackground";
+
+export default memo(BlurBottomBackground);
diff --git a/src/components/background/CircleGradientBackground.tsx b/src/components/background/CircleGradientBackground.tsx
new file mode 100644
index 0000000..4915d55
--- /dev/null
+++ b/src/components/background/CircleGradientBackground.tsx
@@ -0,0 +1,48 @@
+"use client";
+
+import { memo } from "react";
+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) 0%, 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) 0%, transparent 70%)`,
+        }}
+      />
+    </div>
+  );
+};
+
+CircleGradientBackground.displayName = "CircleGradientBackground";
+
+export default memo(CircleGradientBackground);
diff --git a/src/components/background/DotGridBackground.tsx b/src/components/background/DotGridBackground.tsx
new file mode 100644
index 0000000..c6bb813
--- /dev/null
+++ b/src/components/background/DotGridBackground.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import { memo } from "react";
+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"
+    />
+  );
+};
+
+DotGridBackground.displayName = "DotGridBackground";
+
+export default memo(DotGridBackground);
diff --git a/src/components/background/FluidBackground.tsx b/src/components/background/FluidBackground.tsx
new file mode 100644
index 0000000..42125d6
--- /dev/null
+++ b/src/components/background/FluidBackground.tsx
@@ -0,0 +1,277 @@
+'use client';
+
+import React, { useRef, useMemo, memo, 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 = memo(({ 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>
+  );
+});
+
+ShaderPlane.displayName = 'ShaderPlane';
+
+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-primary-cta'),
+        accent: getComputedColor('--color-accent'),
+        secondaryCta: getComputedColor('--color-secondary-cta'),
+      });
+    };
+
+    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>
+  );
+};
+
+FluidBackground.displayName = 'FluidBackground';
+
+export default memo(FluidBackground);
+
+declare module '@react-three/fiber' {
+  interface ThreeElements {
+    cPPNShaderMaterial: unknown;
+  }
+}
diff --git a/src/components/background/GradientBarsBackground.tsx b/src/components/background/GradientBarsBackground.tsx
new file mode 100644
index 0000000..4589b62
--- /dev/null
+++ b/src/components/background/GradientBarsBackground.tsx
@@ -0,0 +1,67 @@
+'use client';
+
+import React, { memo } from 'react';
+import { cls } from '@/lib/utils';
+
+interface GradientBarsBackgroundProps {
+  className?: string;
+  numBars?: number;
+  gradientFrom?: string;
+  gradientTo?: string;
+  opacity?: number;
+}
+
+const GradientBarsBackground = ({
+  className = "",
+  numBars = 15,
+  gradientFrom = "var(--color-primary-cta)",
+  gradientTo = "transparent",
+  opacity = 0.5,
+}: GradientBarsBackgroundProps) => {
+  const calculateHeight = (index: number, total: number): number => {
+    const position = index / (total - 1);
+    const maxHeight = 100;
+    const minHeight = 30;
+
+    const center = 0.5;
+    const distanceFromCenter = Math.abs(position - center);
+    const heightPercentage = Math.pow(distanceFromCenter * 2, 1.2);
+
+    return minHeight + (maxHeight - minHeight) * heightPercentage;
+  };
+
+  return (
+    <div
+      className={cls("fixed inset-0 -z-10 overflow-hidden", className)}
+      aria-hidden="true"
+    >
+      <div
+        className="flex h-full w-full backface-hidden antialiased"
+        style={{
+          transform: 'translateZ(0)',
+        }}
+      >
+        {Array.from({ length: numBars }).map((_, index) => {
+          const height = calculateHeight(index, numBars);
+          return (
+            <div
+              key={index}
+              className="h-full origin-bottom box-border"
+              style={{
+                flex: `1 0 calc(100% / ${numBars})`,
+                maxWidth: `calc(100% / ${numBars})`,
+                background: `linear-gradient(to top, ${gradientFrom}, ${gradientTo})`,
+                transform: `scaleY(${height / 100})`,
+                opacity: opacity,
+              }}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+GradientBarsBackground.displayName = 'GradientBarsBackground';
+
+export default memo(GradientBarsBackground);
diff --git a/src/components/background/GridBackround.tsx b/src/components/background/GridBackround.tsx
new file mode 100644
index 0000000..12441b7
--- /dev/null
+++ b/src/components/background/GridBackround.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import { memo } from "react";
+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"
+    />
+  );
+};
+
+GridBackround.displayName = "GridBackround";
+
+export default memo(GridBackround);
diff --git a/src/components/background/NoiseBackground.tsx b/src/components/background/NoiseBackground.tsx
new file mode 100644
index 0000000..bc5cfe3
--- /dev/null
+++ b/src/components/background/NoiseBackground.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import React, { memo } from "react";
+import { cls } from "@/lib/utils";
+
+interface NoiseBackgroundProps {
+    className?: string;
+}
+
+const NoiseBackground = ({ className = "" }: NoiseBackgroundProps) => {
+    return (
+        <div
+            className={cls("fixed inset-0 -z-10 bg-accent/10",
+                className
+            )}
+        >
+            <div
+                className="absolute inset-0 bg-repeat mix-blend-overlay opacity-12"
+                style={{
+                    backgroundImage: "url(/images/noise.webp)",
+                    backgroundSize: "512px"
+                }}
+                aria-hidden="true"
+            />
+        </div>
+    );
+};
+
+NoiseBackground.displayName = "NoiseBackground";
+
+export default memo(NoiseBackground);
diff --git a/src/components/background/NoiseDiagonalGradientBackground.tsx b/src/components/background/NoiseDiagonalGradientBackground.tsx
new file mode 100644
index 0000000..c678810
--- /dev/null
+++ b/src/components/background/NoiseDiagonalGradientBackground.tsx
@@ -0,0 +1,35 @@
+"use client";
+
+import React, { memo } from "react";
+import { cls } from "@/lib/utils";
+
+interface NoiseDiagonalGradientBackgroundProps {
+    className?: string;
+}
+
+const NoiseDiagonalGradientBackground = ({ className = "" }: NoiseDiagonalGradientBackgroundProps) => {
+    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-br 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(/images/noise.webp)",
+                    backgroundSize: "512px"
+                }}
+                aria-hidden="true"
+            />
+        </div>
+    );
+};
+
+NoiseDiagonalGradientBackground.displayName = "NoiseDiagonalGradientBackground";
+
+export default memo(NoiseDiagonalGradientBackground);
diff --git a/src/components/background/NoiseGradientBackground.tsx b/src/components/background/NoiseGradientBackground.tsx
new file mode 100644
index 0000000..49d8ea2
--- /dev/null
+++ b/src/components/background/NoiseGradientBackground.tsx
@@ -0,0 +1,35 @@
+"use client";
+
+import React, { memo } from "react";
+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(/images/noise.webp)",
+                    backgroundSize: "512px"
+                }}
+                aria-hidden="true"
+            />
+        </div>
+    );
+};
+
+NoiseGradientBackground.displayName = "NoiseGradientBackground";
+
+export default memo(NoiseGradientBackground);
diff --git a/src/components/background/PlainBackground.tsx b/src/components/background/PlainBackground.tsx
new file mode 100644
index 0000000..2319bf1
--- /dev/null
+++ b/src/components/background/PlainBackground.tsx
@@ -0,0 +1,21 @@
+"use client";
+
+import { memo } from "react";
+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"
+    />
+  );
+};
+
+PlainBackground.displayName = "PlainBackground";
+
+export default memo(PlainBackground);
diff --git a/src/components/background/RadialGradientBackground.tsx b/src/components/background/RadialGradientBackground.tsx
new file mode 100644
index 0000000..703b616
--- /dev/null
+++ b/src/components/background/RadialGradientBackground.tsx
@@ -0,0 +1,34 @@
+'use client';
+
+import React, { memo } from 'react';
+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("fixed top-0 left-0 right-0 bottom-0 h-screen w-full -z-10", className)}
+      style={{
+        background: `radial-gradient(${size} at ${position}, ${centerColor} 40%, ${edgeColor} 100%)`,
+      }}
+      aria-hidden="true"
+    />
+  );
+};
+
+RadialGradientBackground.displayName = 'RadialGradientBackground';
+
+export default memo(RadialGradientBackground);
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..bbd165d
--- /dev/null
+++ b/src/components/background/floatingGradientBackground/FloatingGradientBackground.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+import { memo } from "react";
+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>
+  );
+};
+
+FloatingGradientBackground.displayName = "FloatingGradientBackground";
+
+export default memo(FloatingGradientBackground);
diff --git a/src/components/button/Button.tsx b/src/components/button/Button.tsx
new file mode 100644
index 0000000..f467e94
--- /dev/null
+++ b/src/components/button/Button.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import { memo } from "react";
+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 type { ButtonVariantProps } from "./types";
+
+export type { ButtonVariant, ButtonVariantProps, ButtonPropsForVariant } from "./types";
+
+const buttonComponents = {
+  "hover-magnetic": ButtonHoverMagnetic,
+  "hover-bubble": ButtonHoverBubble,
+  "expand-hover": ButtonExpandHover,
+  "icon-arrow": ButtonIconArrow,
+  "shift-hover": ButtonShiftHover,
+  "text-stagger": ButtonTextStagger,
+  "text-underline": ButtonTextUnderline,
+} as const;
+
+const Button = (props: ButtonVariantProps) => {
+  const { variant = "hover-magnetic", ...restProps } = props;
+  const ButtonComponent = buttonComponents[variant];
+  return <ButtonComponent {...restProps} />;
+};
+
+Button.displayName = "Button";
+
+export default memo(Button);
\ No newline at end of file
diff --git a/src/components/button/ButtonExpandHover.tsx b/src/components/button/ButtonExpandHover.tsx
new file mode 100644
index 0000000..9fafe97
--- /dev/null
+++ b/src/components/button/ButtonExpandHover.tsx
@@ -0,0 +1,89 @@
+"use client";
+
+import { memo } from "react";
+import { ArrowUpRight } from "lucide-react";
+import { useButtonClick } from "./useButtonClick";
+import { cls } from "@/lib/utils";
+
+interface ButtonExpandHoverProps {
+  text: string;
+  onClick?: () => void;
+  href?: string;
+  className?: string;
+  textClassName?: string;
+  iconClassName?: string;
+  iconBgClassName?: string;
+  disabled?: boolean;
+  ariaLabel?: string;
+  type?: "button" | "submit" | "reset";
+}
+
+const ButtonExpandHover = ({
+  text,
+  onClick,
+  href,
+  className = "",
+  textClassName = "",
+  iconClassName = "",
+  iconBgClassName = "",
+  disabled = false,
+  ariaLabel,
+  type = "button",
+}: ButtonExpandHoverProps) => {
+  const handleClick = useButtonClick(href, onClick);
+
+  return (
+    <button
+      type={type}
+      onClick={handleClick}
+      disabled={disabled}
+      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
+            )}
+          >
+            <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>
+  );
+};
+
+ButtonExpandHover.displayName = "ButtonExpandHover";
+
+export default memo(ButtonExpandHover);
diff --git a/src/components/button/ButtonHoverBubble.tsx b/src/components/button/ButtonHoverBubble.tsx
new file mode 100644
index 0000000..0304550
--- /dev/null
+++ b/src/components/button/ButtonHoverBubble.tsx
@@ -0,0 +1,80 @@
+"use client";
+
+import { memo } from "react";
+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";
+}
+
+const ButtonHoverBubble = ({
+  text,
+  onClick,
+  href,
+  className = "",
+  bgClassName = "",
+  textClassName = "",
+  iconClassName = "",
+  disabled = false,
+  ariaLabel,
+  type = "button",
+}: ButtonHoverBubbleProps) => {
+  const handleClick = useButtonClick(href, onClick);
+
+  return (
+    <button
+      type={type}
+      onClick={handleClick}
+      disabled={disabled}
+      aria-label={ariaLabel || text}
+      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>
+  );
+};
+
+ButtonHoverBubble.displayName = "ButtonHoverBubble";
+
+export default memo(ButtonHoverBubble);
diff --git a/src/components/button/ButtonHoverMagnetic/ButtonHoverMagnetic.tsx b/src/components/button/ButtonHoverMagnetic/ButtonHoverMagnetic.tsx
new file mode 100644
index 0000000..df7cccd
--- /dev/null
+++ b/src/components/button/ButtonHoverMagnetic/ButtonHoverMagnetic.tsx
@@ -0,0 +1,54 @@
+"use client";
+
+import { memo } from "react";
+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";
+}
+
+const ButtonHoverMagnetic = ({
+  text,
+  onClick,
+  href,
+  className = "",
+  textClassName = "",
+  strengthFactor = 20,
+  disabled = false,
+  ariaLabel,
+  type = "button",
+}: ButtonHoverMagneticProps) => {
+  const magneticRef = useMagneticEffect(strengthFactor);
+  const handleClick = useButtonClick(href, onClick);
+
+  return (
+    <button
+      ref={magneticRef as React.RefObject<HTMLButtonElement>}
+      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 primary-button rounded-theme text-background",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+    >
+      <span className={cls("text-sm block overflow-hidden truncate whitespace-nowrap", textClassName)}>{text}</span>
+    </button>
+  );
+};
+
+ButtonHoverMagnetic.displayName = "ButtonHoverMagnetic";
+
+export default memo(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..9465a2f
--- /dev/null
+++ b/src/components/button/ButtonIconArrow.tsx
@@ -0,0 +1,63 @@
+"use client";
+
+import { ArrowRight } from "lucide-react";
+import { memo } from "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";
+}
+
+const ButtonIconArrow = ({
+    text,
+    onClick,
+    href,
+    className = "",
+    textClassName = "",
+    iconClassName = "",
+    disabled = false,
+    ariaLabel,
+    type = "button",
+}: ButtonIconArrowProps) => {
+    const handleClick = useButtonClick(href, onClick);
+
+    return (
+        <button
+            type={type}
+            onClick={handleClick}
+            disabled={disabled}
+            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-background 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-foreground"
+            )}>
+                <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>
+    );
+};
+
+ButtonIconArrow.displayName = "ButtonIconArrow";
+
+export default memo(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..c95fd76
--- /dev/null
+++ b/src/components/button/ButtonShiftHover/ButtonShiftHover.tsx
@@ -0,0 +1,70 @@
+"use client";
+
+import { useRef, memo } from "react";
+import { useShiftAnimation } from "./useShiftAnimation";
+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";
+}
+
+const ButtonShiftHover = ({
+  text,
+  onClick,
+  href,
+  className = "",
+  bgClassName = "",
+  textClassName = "",
+  disabled = false,
+  ariaLabel,
+  type = "button",
+}: ButtonShiftHoverProps) => {
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const handleClick = useButtonClick(href, onClick);
+
+  useShiftAnimation(buttonRef, text);
+
+  return (
+    <button
+      ref={buttonRef}
+      type={type}
+      onClick={handleClick}
+      disabled={disabled}
+      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-background 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>
+  );
+};
+
+ButtonShiftHover.displayName = "ButtonShiftHover";
+
+export default memo(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/ButtonShiftHover/useShiftAnimation.ts b/src/components/button/ButtonShiftHover/useShiftAnimation.ts
new file mode 100644
index 0000000..4dae39c
--- /dev/null
+++ b/src/components/button/ButtonShiftHover/useShiftAnimation.ts
@@ -0,0 +1,26 @@
+import { useEffect, RefObject } from "react";
+
+export const useShiftAnimation = (
+    buttonRef: RefObject<HTMLButtonElement | null>,
+    text: string | undefined,
+    selector: string = "[data-button-animate-chars]"
+) => {
+    useEffect(() => {
+        const buttonElement = buttonRef.current?.querySelector(selector);
+        if (!buttonElement) return;
+
+        const textContent = text || buttonElement.textContent || "";
+        buttonElement.innerHTML = "";
+
+        [...textContent].forEach((char) => {
+            const span = document.createElement("span");
+            span.textContent = char;
+
+            if (char === " ") {
+                span.style.whiteSpace = "pre";
+            }
+
+            buttonElement.appendChild(span);
+        });
+    }, [buttonRef, text, selector]);
+};
\ No newline at end of file
diff --git a/src/components/button/ButtonTextStagger/ButtonTextStagger.tsx b/src/components/button/ButtonTextStagger/ButtonTextStagger.tsx
new file mode 100644
index 0000000..2414a13
--- /dev/null
+++ b/src/components/button/ButtonTextStagger/ButtonTextStagger.tsx
@@ -0,0 +1,71 @@
+"use client";
+
+import { useRef, memo } from "react";
+import { useStaggerAnimation } from "./useStaggerAnimation";
+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";
+}
+
+const ButtonTextStagger = ({
+  text,
+  onClick,
+  href,
+  className = "",
+  bgClassName = "",
+  textClassName = "",
+  disabled = false,
+  ariaLabel,
+  type = "button",
+}: ButtonTextStaggerProps) => {
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const handleClick = useButtonClick(href, onClick);
+
+  useStaggerAnimation(buttonRef, text);
+
+  return (
+    <button
+      ref={buttonRef}
+      type={type}
+      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-background",
+        "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>
+  );
+};
+
+ButtonTextStagger.displayName = "ButtonTextStagger";
+
+export default memo(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/ButtonTextStagger/useStaggerAnimation.ts b/src/components/button/ButtonTextStagger/useStaggerAnimation.ts
new file mode 100644
index 0000000..86c3dcb
--- /dev/null
+++ b/src/components/button/ButtonTextStagger/useStaggerAnimation.ts
@@ -0,0 +1,28 @@
+import { useEffect, RefObject } from "react";
+
+export const useStaggerAnimation = (
+    buttonRef: RefObject<HTMLButtonElement | null>,
+    text: string | undefined,
+    selector: string = "[data-button-animate-chars]",
+    offsetIncrement: number = 0.01
+) => {
+    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;
+            span.style.transitionDelay = `${index * offsetIncrement}s`;
+
+            if (char === " ") {
+                span.style.whiteSpace = "pre";
+            }
+
+            buttonElement.appendChild(span);
+        });
+    }, [buttonRef, text, selector, offsetIncrement]);
+};
\ 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..be30580
--- /dev/null
+++ b/src/components/button/ButtonTextUnderline.tsx
@@ -0,0 +1,50 @@
+"use client";
+
+import { memo } from "react";
+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";
+}
+
+const ButtonTextUnderline = ({
+  text,
+  onClick,
+  href,
+  className = "",
+  disabled = false,
+  ariaLabel,
+  type = "button",
+}: ButtonTextUnderlineProps) => {
+  const handleClick = useButtonClick(href, onClick);
+
+  return (
+    <button
+      type={type}
+      onClick={handleClick}
+      disabled={disabled}
+      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>
+  );
+};
+
+ButtonTextUnderline.displayName = "ButtonTextUnderline";
+
+export default memo(ButtonTextUnderline);
diff --git a/src/components/button/SelectorButton.tsx b/src/components/button/SelectorButton.tsx
new file mode 100644
index 0000000..891b156
--- /dev/null
+++ b/src/components/button/SelectorButton.tsx
@@ -0,0 +1,125 @@
+"use client";
+
+import { useRef, useEffect, memo, 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 = memo<SelectorButtonProps>(({
+  options,
+  activeValue,
+  onValueChange,
+  className = "",
+  buttonClassName = "",
+  wrapperClassName = "",
+  labelClassName = "",
+}) => {
+  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-background" : "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>
+  );
+});
+
+SelectorButton.displayName = "SelectorButton";
+
+export default SelectorButton;
diff --git a/src/components/button/types.ts b/src/components/button/types.ts
new file mode 100644
index 0000000..f9f96e9
--- /dev/null
+++ b/src/components/button/types.ts
@@ -0,0 +1,65 @@
+export type ButtonVariant =
+  | "hover-magnetic"
+  | "hover-bubble"
+  | "expand-hover"
+  | "icon-arrow"
+  | "shift-hover"
+  | "text-stagger"
+  | "text-underline";
+
+export type CTAButtonVariant = Exclude<ButtonVariant, "text-underline">;
+
+export type ButtonWithBgClassName = "text-stagger" | "shift-hover";
+
+export const hasBgClassName = (variant?: string): variant is ButtonWithBgClassName => {
+  return variant === "text-stagger" || variant === "shift-hover";
+};
+
+export type BaseButtonProps = {
+  text: string;
+  onClick?: () => void;
+  href?: string;
+  className?: string;
+};
+
+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: "icon-arrow";
+      textClassName?: string;
+      iconClassName?: string;
+    } & BaseButtonProps)
+  | ({
+      variant: "shift-hover";
+      bgClassName?: string;
+      textClassName?: string;
+    } & BaseButtonProps)
+  | ({
+      variant: "text-stagger";
+      bgClassName?: string;
+    } & BaseButtonProps)
+  | ({
+      variant: "text-underline";
+      disabled?: boolean;
+    } & 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..4a9f36e
--- /dev/null
+++ b/src/components/button/useButtonClick.ts
@@ -0,0 +1,31 @@
+import { useLenis } from "lenis/react";
+
+export const useButtonClick = (href?: string, onClick?: () => void) => {
+  const lenis = useLenis();
+
+  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 (lenis) {
+          lenis.scrollTo(`#${href}`);
+        } else {
+          const element = document.getElementById(href);
+          if (element) {
+            element.scrollIntoView({ behavior: "smooth" });
+          }
+        }
+      }
+    }
+    onClick?.();
+  };
+
+  return handleClick;
+};
diff --git a/src/components/cardStack/CardList.tsx b/src/components/cardStack/CardList.tsx
new file mode 100644
index 0000000..6f8b749
--- /dev/null
+++ b/src/components/cardStack/CardList.tsx
@@ -0,0 +1,129 @@
+"use client";
+
+import { memo, Children, Fragment } 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, CardAnimationType, TitleSegment } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+interface CardListProps {
+  children: React.ReactNode;
+  animationType: CardAnimationType;
+  variant?: "card" | "border";
+  useUncappedRounding?: boolean;
+  title?: string;
+  titleSegments?: TitleSegment[];
+  description?: string;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  buttons?: ButtonConfig[];
+  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,
+  variant = "card",
+  useUncappedRounding = false,
+  title,
+  titleSegments,
+  description,
+  tag,
+  tagIcon,
+  buttons,
+  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 });
+
+  return (
+    <section
+      aria-label={ariaLabel}
+      className={cls(
+        "relative py-20",
+        useInvertedBackground === "invertCard"
+          ? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground"
+          : "w-full",
+        useInvertedBackground === "invertDefault" && "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}
+          buttons={buttons}
+          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) => (
+            <Fragment key={index}>
+              {variant === "border" && index === 0 && (
+                <div className="h-px bg-accent/75" />
+              )}
+              <div
+                ref={(el) => { itemRefs.current[index] = el; }}
+                className={cls(!disableCardWrapper && variant === "card" && "card", !disableCardWrapper && variant === "card" && (useUncappedRounding ? "rounded-theme" : "rounded-theme-capped"), cardClassName)}
+              >
+                {child}
+              </div>
+              {variant === "border" && index < childrenArray.length - 1 && (
+                <div className="h-px bg-accent/75" />
+              )}
+            </Fragment>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+CardList.displayName = "CardList";
+
+export default memo(CardList);
diff --git a/src/components/cardStack/CardStack.tsx b/src/components/cardStack/CardStack.tsx
new file mode 100644
index 0000000..d9c8086
--- /dev/null
+++ b/src/components/cardStack/CardStack.tsx
@@ -0,0 +1,195 @@
+"use client";
+
+import { memo, 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 TimelineBase from "./layouts/timelines/TimelineBase";
+
+const CardStack = ({
+    children,
+    mode = "buttons",
+    gridVariant = "uniform-all-items-equal",
+    uniformGridCustomHeightClasses,
+    gridRowsClassName,
+    itemHeightClassesOverride,
+    animationType,
+    containerStyle = "default",
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    buttons,
+    textboxLayout = "default",
+    useInvertedBackground,
+    carouselThreshold = 5,
+    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;
+
+    // Timeline layout for zigzag pattern (works best with 3-6 items)
+    if ((gridVariant === "timeline" || gridVariant === "timeline-three-columns") && itemCount >= 3 && itemCount <= 6) {
+        return (
+            <TimelineBase
+                variant={gridVariant}
+                uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+                animationType={animationType}
+                containerStyle={containerStyle}
+                title={title}
+                titleSegments={titleSegments}
+                description={description}
+                tag={tag}
+                tagIcon={tagIcon}
+                buttons={buttons}
+                textboxLayout={textboxLayout}
+                useInvertedBackground={useInvertedBackground}
+                className={className}
+                containerClassName={containerClassName}
+                textBoxClassName={textBoxClassName}
+                titleClassName={titleClassName}
+                titleImageWrapperClassName={titleImageWrapperClassName}
+                titleImageClassName={titleImageClassName}
+                descriptionClassName={descriptionClassName}
+                tagClassName={tagClassName}
+                buttonContainerClassName={buttonContainerClassName}
+                buttonClassName={buttonClassName}
+                buttonTextClassName={buttonTextClassName}
+                ariaLabel={ariaLabel}
+            >
+                {childrenArray}
+            </TimelineBase>
+        );
+    }
+
+    // Use grid for items below threshold, carousel for items at or above threshold
+    // Timeline with 7+ items will also use carousel
+    const useCarousel = itemCount >= carouselThreshold || ((gridVariant === "timeline" || gridVariant === "timeline-three-columns") && itemCount > 6);
+
+    // Grid layout for 1-4 items
+    if (!useCarousel) {
+        return (
+            <GridLayout
+                itemCount={itemCount}
+                gridVariant={gridVariant}
+                uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+                gridRowsClassName={gridRowsClassName}
+                itemHeightClassesOverride={itemHeightClassesOverride}
+                animationType={animationType}
+                containerStyle={containerStyle}
+                title={title}
+                titleSegments={titleSegments}
+                description={description}
+                tag={tag}
+                tagIcon={tagIcon}
+                buttons={buttons}
+                textboxLayout={textboxLayout}
+                useInvertedBackground={useInvertedBackground}
+                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") {
+        return (
+            <AutoCarousel
+                uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+                animationType={animationType}
+                containerStyle={containerStyle}
+                title={title}
+                titleSegments={titleSegments}
+                description={description}
+                tag={tag}
+                tagIcon={tagIcon}
+                buttons={buttons}
+                textboxLayout={textboxLayout}
+                useInvertedBackground={useInvertedBackground}
+                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
+    return (
+        <ButtonCarousel
+            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+            animationType={animationType}
+            containerStyle={containerStyle}
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            buttons={buttons}
+            textboxLayout={textboxLayout}
+            useInvertedBackground={useInvertedBackground}
+            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>
+    );
+};
+
+CardStack.displayName = "CardStack";
+
+export default memo(CardStack);
diff --git a/src/components/cardStack/CardStackTextBox.tsx b/src/components/cardStack/CardStackTextBox.tsx
new file mode 100644
index 0000000..121dd50
--- /dev/null
+++ b/src/components/cardStack/CardStackTextBox.tsx
@@ -0,0 +1,88 @@
+"use client";
+
+import { memo, 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,
+    buttons,
+    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-1", textBoxClassName),
+                titleClassName: cls("text-6xl font-medium text-center", titleClassName),
+                descriptionClassName: cls("text-lg leading-[1.2] 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-1 md:mb-3 mx-auto", tagClassName),
+                buttonContainerClassName: cls("flex gap-4 mt-1 md:mt-3 justify-center", buttonContainerClassName),
+                center: true,
+            };
+        }
+
+        if (textboxLayout === "inline-image") {
+            return {
+                className: cls("flex flex-col gap-3 md:gap-1", textBoxClassName),
+                titleClassName: cls("text-4xl md:text-5xl font-medium text-center", titleClassName),
+                descriptionClassName: cls("text-lg leading-[1.2] 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-1 md:mb-3 mx-auto", tagClassName),
+                buttonContainerClassName: cls("flex gap-4 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-[1.2]", descriptionClassName),
+            tagClassName: cls("px-3 py-1 text-sm rounded-theme card text-foreground inline-flex items-center gap-2", tagClassName),
+            buttonContainerClassName: cls("flex gap-4", 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}
+            buttons={buttons}
+            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}
+        />
+    );
+};
+
+CardStackTextBox.displayName = "CardStackTextBox";
+
+export default memo(CardStackTextBox);
diff --git a/src/components/cardStack/hooks/useCardAnimation.ts b/src/components/cardStack/hooks/useCardAnimation.ts
new file mode 100644
index 0000000..a58b180
--- /dev/null
+++ b/src/components/cardStack/hooks/useCardAnimation.ts
@@ -0,0 +1,95 @@
+import { useRef } from "react";
+import { useGSAP } from "@gsap/react";
+import gsap from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+import type { CardAnimationType } from "../types";
+
+gsap.registerPlugin(ScrollTrigger);
+
+interface UseCardAnimationProps {
+  animationType: CardAnimationType;
+  itemCount: number;
+}
+
+export const useCardAnimation = ({ animationType, itemCount }: UseCardAnimationProps) => {
+  const itemRefs = useRef<(HTMLElement | null)[]>([]);
+
+  useGSAP(() => {
+    if (animationType === "none" || itemRefs.current.length === 0) return;
+
+    const items = itemRefs.current.filter((el) => el !== null);
+
+    if (animationType === "opacity") {
+      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 (animationType === "slide-up") {
+      items.forEach((item, index) => {
+        gsap.fromTo(
+          item,
+          { opacity: 0, yPercent: 15 },
+          {
+            opacity: 1,
+            yPercent: 0,
+            duration: 1,
+            delay: index * 0.15,
+            ease: "sine",
+            scrollTrigger: {
+              trigger: items[0],
+              start: "top 80%",
+              toggleActions: "play none none none",
+            },
+          }
+        );
+      });
+    } else if (animationType === "scale-rotate") {
+      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 (animationType === "blur-reveal") {
+      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",
+          },
+        }
+      );
+    }
+  }, [animationType, itemCount]);
+
+  return { itemRefs };
+};
diff --git a/src/components/cardStack/hooks/usePhoneAnimations.ts b/src/components/cardStack/hooks/usePhoneAnimations.ts
new file mode 100644
index 0000000..0887e79
--- /dev/null
+++ b/src/components/cardStack/hooks/usePhoneAnimations.ts
@@ -0,0 +1,108 @@
+import { useEffect, 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)[]>([]);
+
+  useEffect(() => {
+    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..71e944b
--- /dev/null
+++ b/src/components/cardStack/layouts/carousels/AngledCarousel.tsx
@@ -0,0 +1,144 @@
+"use client";
+
+import { memo, useState, useEffect, useRef, useCallback } 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 = useCallback(() => {
+    if (autoPlayRef.current) {
+      clearInterval(autoPlayRef.current);
+    }
+    if (autoPlay) {
+      autoPlayRef.current = setInterval(() => {
+        setActiveIndex((prev) => (prev + 1) % n);
+      }, autoPlayInterval);
+    }
+  }, [autoPlay, autoPlayInterval, n]);
+
+  useEffect(() => {
+    resetAutoPlay();
+    return () => {
+      if (autoPlayRef.current) {
+        clearInterval(autoPlayRef.current);
+      }
+    };
+  }, [resetAutoPlay]);
+
+  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-[16/10] opacity-0 pointer-events-none" />
+      {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-[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]"
+              initial={{ opacity: isCenter ? 0 : 1 }}
+              animate={{ opacity: isCenter ? 0 : 1 }}
+              transition={{
+                duration: 0.5,
+                ease: "easeInOut",
+              }}
+            />
+          </motion.div>
+        );
+      })}
+    </div>
+  );
+};
+
+AngledCarousel.displayName = "AngledCarousel";
+
+export default memo(AngledCarousel);
diff --git a/src/components/cardStack/layouts/carousels/AutoCarousel.tsx b/src/components/cardStack/layouts/carousels/AutoCarousel.tsx
new file mode 100644
index 0000000..7d23ff1
--- /dev/null
+++ b/src/components/cardStack/layouts/carousels/AutoCarousel.tsx
@@ -0,0 +1,140 @@
+"use client";
+
+import { memo, 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,
+    containerStyle = "default",
+    speed = 50,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    buttons,
+    textboxLayout = "default",
+    useInvertedBackground,
+    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 } = useCardAnimation({ animationType, itemCount: childrenArray.length });
+
+    // 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",
+                useInvertedBackground === "invertCard"
+                    ? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground"
+                    : "w-full",
+                useInvertedBackground === "invertDefault" && "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}
+                                buttons={buttons}
+                                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",
+                                containerStyle === "default" && (marqueeGapClassName || "gap-6"),
+                                containerStyle === "card" && "primary-button p-6 rounded-theme-capped",
+                                containerStyle === "card" && (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("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("flex-none w-carousel-item-3 xl:w-carousel-item-4 mb-1 mr-6", heightClasses, itemClassName)}
+                                            >
+                                                {child}
+                                            </div>
+                                        ))}
+                                    </Marquee>
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+AutoCarousel.displayName = "AutoCarousel";
+
+export default memo(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..53d68fa
--- /dev/null
+++ b/src/components/cardStack/layouts/carousels/ButtonCarousel.tsx
@@ -0,0 +1,174 @@
+"use client";
+
+import { memo, 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,
+    containerStyle = "default",
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    buttons,
+    textboxLayout = "default",
+    useInvertedBackground,
+    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 } = useCardAnimation({ animationType, itemCount: childrenArray.length });
+
+    return (
+        <section
+            className={cls(
+                "relative px-[var(--width-0)] py-20",
+                useInvertedBackground === "invertCard"
+                    ? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground"
+                    : "w-full",
+                useInvertedBackground === "invertDefault" && "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}
+                                    buttons={buttons}
+                                    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",
+                                containerStyle === "default" && "gap-6",
+                                containerStyle === "card" && "primary-button p-6 rounded-theme-capped 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("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-full 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-full"
+                                            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-foreground" />
+                                        </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-foreground" />
+                                        </button>
+                                    </div>
+                                </div>
+                                <div className="flex-shrink-0 w-carousel-padding-controls" />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+ButtonCarousel.displayName = "ButtonCarousel";
+
+export default memo(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..93fdbec
--- /dev/null
+++ b/src/components/cardStack/layouts/carousels/FullWidthCarousel.tsx
@@ -0,0 +1,154 @@
+"use client";
+
+import { memo, 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,
+    buttons,
+    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",
+                useInvertedBackground === "invertCard"
+                    ? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground"
+                    : "w-full",
+                useInvertedBackground === "invertDefault" && "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}
+                        buttons={buttons}
+                        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-full 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>
+    );
+};
+
+FullWidthCarousel.displayName = "FullWidthCarousel";
+
+export default memo(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..542f070
--- /dev/null
+++ b/src/components/cardStack/layouts/grid/GridLayout.tsx
@@ -0,0 +1,137 @@
+"use client";
+
+import { memo, 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,
+    containerStyle = "default",
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    buttons,
+    textboxLayout = "default",
+    useInvertedBackground,
+    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 } = useCardAnimation({ animationType, itemCount: childrenArray.length });
+
+    return (
+        <section
+            className={cls(
+                "relative py-20",
+                useInvertedBackground === "invertCard"
+                    ? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground"
+                    : "w-full",
+                useInvertedBackground === "invertDefault" && "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}
+                        buttons={buttons}
+                        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(
+                        "grid grid-cols-1",
+                        containerStyle === "default" && "gap-6",
+                        containerStyle === "card" && "primary-button p-6 rounded-theme-capped 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={combinedClass}
+                                ref={(el) => { itemRefs.current[index] = el; }}
+                            >
+                                {child}
+                            </div>
+                        ) : (
+                            <div
+                                key={index}
+                                ref={(el) => { itemRefs.current[index] = el; }}
+                            >
+                                {child}
+                            </div>
+                        );
+                    })}
+                </div>
+            </div>
+        </section>
+    );
+};
+
+GridLayout.displayName = "GridLayout";
+
+export default memo(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..f982af6
--- /dev/null
+++ b/src/components/cardStack/layouts/grid/gridConfigs.ts
@@ -0,0 +1,464 @@
+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-80 2xl:min-h-90" },
+        4: { gridCols: "md:grid-cols-4", itemClasses: [], heightClasses: "min-h-80 2xl:min-h-90" },
+    },
+    "uniform-staggered-items": {
+        1: null,
+        2: null,
+        3: {
+            gridCols: "md:grid-cols-3",
+            itemClasses: [
+                "",
+                "md:translate-y-20",
+                "",
+            ],
+            heightClasses: "min-h-80 2xl:min-h-90"
+        },
+        4: {
+            gridCols: "md:grid-cols-4",
+            itemClasses: [
+                "",
+                "md:translate-y-20",
+                "",
+                "md:translate-y-20",
+            ],
+            heightClasses: "min-h-80 2xl:min-h-90"
+        },
+    },
+    "uniform-alternating-heights": {
+        1: null,
+        2: null,
+        3: {
+            gridCols: "md:grid-cols-3 md:items-start",
+            itemClasses: [
+                "min-h-80 md:min-h-70 2xl:min-h-80",
+                "min-h-80 md:min-h-100 2xl:min-h-110",
+                "min-h-80 md:min-h-70 2xl:min-h-80",
+            ],
+            heightClasses: "md:!h-fit",
+            itemWrapperClass: "grid md:items-start"
+        },
+        4: {
+            gridCols: "md:grid-cols-4 md:items-start",
+            itemClasses: [
+                "min-h-80 md:min-h-100 2xl:min-h-110",
+                "min-h-80 md:min-h-70 2xl:min-h-80",
+                "min-h-80 md:min-h-100 2xl:min-h-110",
+                "min-h-80 md:min-h-70 2xl:min-h-80",
+            ],
+            heightClasses: "md:!h-fit",
+            itemWrapperClass: "grid md:items-start"
+        },
+    },
+    "uniform-alternating-heights-inverted": {
+        1: null,
+        2: null,
+        3: {
+            gridCols: "md:grid-cols-3 md:items-start",
+            itemClasses: [
+                "min-h-80 md:min-h-100 2xl:min-h-110",
+                "min-h-80 md:min-h-70 2xl:min-h-80",
+                "min-h-80 md:min-h-100 2xl:min-h-110",
+            ],
+            heightClasses: "md:!h-fit",
+            itemWrapperClass: "grid md:items-start"
+        },
+        4: {
+            gridCols: "md:grid-cols-4 md:items-start",
+            itemClasses: [
+                "min-h-80 md:min-h-70 2xl:min-h-80",
+                "min-h-80 md:min-h-100 2xl:min-h-110",
+                "min-h-80 md:min-h-70 2xl:min-h-80",
+                "min-h-80 md:min-h-100 2xl:min-h-110",
+            ],
+            heightClasses: "md:!h-fit",
+            itemWrapperClass: "grid md:items-start"
+        },
+    },
+    "uniform-alternating-sizes": {
+        1: null,
+        2: null,
+        3: {
+            gridCols: "md:grid-cols-10 md:items-start",
+            itemClasses: [
+                "md:col-span-3 min-h-80 md:min-h-70 2xl:min-h-80",
+                "md:col-span-4 min-h-80 md:min-h-100 2xl:min-h-110",
+                "md:col-span-3 min-h-80 md:min-h-70 2xl:min-h-80",
+            ],
+            heightClasses: "md:!h-fit",
+            itemWrapperClass: "grid md:items-start"
+        },
+        4: {
+            gridCols: "md:grid-cols-14 md:items-start",
+            itemClasses: [
+                "md:col-span-4 min-h-80 md:min-h-100 2xl:min-h-110",
+                "md:col-span-3 min-h-80 md:min-h-70 2xl:min-h-80",
+                "md:col-span-4 min-h-80 md:min-h-100 2xl:min-h-110",
+                "md:col-span-3 min-h-80 md:min-h-70 2xl:min-h-80",
+            ],
+            heightClasses: "md:!h-fit",
+            itemWrapperClass: "grid md:items-start"
+        },
+    },
+    "uniform-alternating-sizes-inverted": {
+        1: null,
+        2: null,
+        3: {
+            gridCols: "md:grid-cols-10 md:items-start",
+            itemClasses: [
+                "md:col-span-4 min-h-80 md:min-h-100 2xl:min-h-110",
+                "md:col-span-2 min-h-80 md:min-h-70 2xl:min-h-80",
+                "md:col-span-4 min-h-80 md:min-h-100 2xl:min-h-110",
+            ],
+            heightClasses: "md:!h-fit",
+            itemWrapperClass: "grid md:items-start"
+        },
+        4: {
+            gridCols: "md:grid-cols-14 md:items-start",
+            itemClasses: [
+                "md:col-span-3 min-h-80 md:min-h-70 2xl:min-h-80",
+                "md:col-span-4 min-h-80 md:min-h-100 2xl:min-h-110",
+                "md:col-span-3 min-h-80 md:min-h-70 2xl:min-h-80",
+                "md:col-span-4 min-h-80 md:min-h-100 2xl:min-h-110",
+            ],
+            heightClasses: "md:!h-fit",
+            itemWrapperClass: "grid md:items-start"
+        },
+    },
+    "two-items-tall-short": {
+        1: null,
+        2: {
+            gridCols: "md:grid-cols-2 md:items-start",
+            itemClasses: [
+                "min-h-80 md:min-h-100 2xl:min-h-120",
+                "min-h-80 md:min-h-70 2xl:min-h-80",
+            ],
+            heightClasses: "md:!h-fit",
+            itemWrapperClass: "grid"
+        },
+        3: { gridCols: "md:grid-cols-3", itemClasses: [], heightClasses: "min-h-80 2xl:min-h-90" },
+        4: { gridCols: "md:grid-cols-4", itemClasses: [], heightClasses: "min-h-80 2xl:min-h-90" },
+    },
+    "two-items-short-tall": {
+        1: null,
+        2: {
+            gridCols: "md:grid-cols-2 md:items-start",
+            itemClasses: [
+                "min-h-80 md:min-h-70 2xl:min-h-80",
+                "min-h-80 md:min-h-100 2xl:min-h-120",
+            ],
+            heightClasses: "md:!h-fit",
+            itemWrapperClass: "grid"
+        },
+        3: { gridCols: "md:grid-cols-3", itemClasses: [], heightClasses: "min-h-80 2xl:min-h-90" },
+        4: { gridCols: "md:grid-cols-4", itemClasses: [], heightClasses: "min-h-80 2xl:min-h-90" },
+    },
+    "bento-grid": {
+        1: null,
+        2: null,
+        3: {
+            gridCols: "md:grid-cols-4",
+            gridRows: "md:grid-rows-[14rem_14rem] 2xl:grid-rows-[17rem_17rem]",
+            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-[14rem_14rem] 2xl:grid-rows-[17rem_17rem]",
+            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-[14rem_14rem] 2xl:grid-rows-[17rem_17rem]",
+            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-[14rem_14rem] 2xl:grid-rows-[17rem_17rem]",
+            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",
+            ]
+        },
+    },
+    "four-items-2x2-alternating-heights": {
+        1: null,
+        2: null,
+        3: { gridCols: "md:grid-cols-3", itemClasses: [], heightClasses: "min-h-80 2xl:min-h-90" },
+        4: {
+            gridCols: "md:grid-cols-2 md:grid-rows-2 md:items-start",
+            itemClasses: [
+                "md:col-start-1 md:row-start-1",
+                "md:col-start-2 md:row-start-1",
+                "md:col-start-1 md:row-start-2",
+                "md:col-start-2 md:row-start-2",
+            ],
+            itemHeightClasses: [
+                "min-h-80 md:min-h-140 2xl:min-h-160",
+                "min-h-80 md:min-h-70 2xl:min-h-80",
+                "min-h-80 md:min-h-140 2xl:min-h-160",
+                "min-h-80 md:min-h-70 2xl:min-h-80",
+            ],
+            heightClasses: "md:!h-fit",
+            itemWrapperClass: "grid"
+        },
+    },
+    "four-items-2x2-alternating-heights-inverted": {
+        1: null,
+        2: null,
+        3: { gridCols: "md:grid-cols-3", itemClasses: [], heightClasses: "min-h-80 2xl:min-h-90" },
+        4: {
+            gridCols: "md:grid-cols-2 md:grid-rows-2 md:items-start",
+            itemClasses: [
+                "md:col-start-1 md:row-start-1",
+                "md:col-start-2 md:row-start-1",
+                "md:col-start-1 md:row-start-2",
+                "md:col-start-2 md:row-start-2",
+            ],
+            itemHeightClasses: [
+                "min-h-80 md:min-h-70 2xl:min-h-80",
+                "min-h-80 md:min-h-140 2xl:min-h-160",
+                "min-h-80 md:min-h-70 2xl:min-h-80",
+                "min-h-80 md:min-h-140 2xl:min-h-160",
+            ],
+            heightClasses: "md:!h-fit",
+            itemWrapperClass: "grid"
+        },
+    },
+    "four-items-2x2-staggered-grid": {
+        1: null,
+        2: null,
+        3: { gridCols: "md:grid-cols-3", itemClasses: [] },
+        4: {
+            gridCols: "md:grid-cols-2",
+            itemClasses: [
+                "",
+                "md:translate-y-20",
+                "",
+                "md:translate-y-20",
+            ],
+            heightClasses: "min-h-80 2xl:min-h-90"
+        },
+    },
+    "four-items-2x2-staggered-grid-inverted": {
+        1: null,
+        2: null,
+        3: { gridCols: "md:grid-cols-3", itemClasses: [] },
+        4: {
+            gridCols: "md:grid-cols-2",
+            itemClasses: [
+                "md:translate-y-20",
+                "",
+                "md:translate-y-20",
+                "",
+            ],
+            heightClasses: "min-h-80 2xl:min-h-90"
+        },
+    },
+    "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",
+            ]
+        },
+    },
+};
diff --git a/src/components/cardStack/layouts/timelines/TimelineBase.tsx b/src/components/cardStack/layouts/timelines/TimelineBase.tsx
new file mode 100644
index 0000000..3adedfb
--- /dev/null
+++ b/src/components/cardStack/layouts/timelines/TimelineBase.tsx
@@ -0,0 +1,158 @@
+"use client";
+
+import React, { Children, useCallback } from "react";
+import { cls } from "@/lib/utils";
+import CardStackTextBox from "../../CardStackTextBox";
+import { useCardAnimation } from "../../hooks/useCardAnimation";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, CardAnimationType, ContainerStyle, TitleSegment } from "../../types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type TimelineVariant = "timeline" | "timeline-three-columns";
+
+interface TimelineBaseProps {
+  children: React.ReactNode;
+  variant?: TimelineVariant;
+  uniformGridCustomHeightClasses?: string;
+  animationType: CardAnimationType;
+  containerStyle?: ContainerStyle;
+  title?: string;
+  titleSegments?: TitleSegment[];
+  description?: string;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  buttons?: ButtonConfig[];
+  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 TimelineBase = ({
+  children,
+  variant = "timeline",
+  uniformGridCustomHeightClasses = "min-h-80 2xl:min-h-90",
+  animationType,
+  containerStyle = "default",
+  title,
+  titleSegments,
+  description,
+  tag,
+  tagIcon,
+  buttons,
+  textboxLayout = "default",
+  useInvertedBackground,
+  className = "",
+  containerClassName = "",
+  textBoxClassName = "",
+  titleClassName = "",
+  titleImageWrapperClassName = "",
+  titleImageClassName = "",
+  descriptionClassName = "",
+  tagClassName = "",
+  buttonContainerClassName = "",
+  buttonClassName = "",
+  buttonTextClassName = "",
+  ariaLabel = "Timeline section",
+}: TimelineBaseProps) => {
+  const childrenArray = Children.toArray(children);
+  const { itemRefs } = useCardAnimation({ animationType, itemCount: childrenArray.length });
+
+  const getItemClasses = useCallback((index: number) => {
+    if (variant === "timeline-three-columns") {
+      // Pattern: start (0) → center (1) → end (2) → center (3) → start (4) → center (5) ...
+      const position = index % 4;
+      const alignmentClasses = cls(
+        position === 0 && "self-start md:self-start",
+        position === 1 && "self-end md:self-center",
+        position === 2 && "self-start md:self-end",
+        position === 3 && "self-end md:self-center"
+      );
+      return alignmentClasses;
+    }
+
+    // Default timeline variant - scattered/organic pattern
+    const alignmentClass =
+      index % 2 === 0 ? "self-start ml-0" : "self-end mr-0";
+
+    const marginClasses = cls(
+      index % 4 === 0 && "md:ml-0",
+      index % 4 === 1 && "md:mr-20",
+      index % 4 === 2 && "md:ml-15",
+      index % 4 === 3 && "md:mr-30"
+    );
+
+    return cls(alignmentClass, marginClasses);
+  }, [variant]);
+
+  return (
+    <section
+      className={cls(
+        "relative py-20",
+        useInvertedBackground === "invertCard"
+          ? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground"
+          : "w-full",
+        useInvertedBackground === "invertDefault" && "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}
+            buttons={buttons}
+            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(
+            "relative z-10 flex flex-col",
+            containerStyle === "default" && "gap-6 md:gap-15",
+            containerStyle === "card" && "primary-button p-6 rounded-theme-capped gap-6 md:gap-15"
+          )}
+        >
+          {Children.map(childrenArray, (child, index) => (
+            <div
+              key={index}
+              className={cls("w-65 md:w-25", uniformGridCustomHeightClasses, getItemClasses(index))}
+              ref={(el) => { itemRefs.current[index] = el; }}
+            >
+              {child}
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+TimelineBase.displayName = "TimelineBase";
+
+export default React.memo(TimelineBase);
diff --git a/src/components/cardStack/layouts/timelines/TimelineCardStack.tsx b/src/components/cardStack/layouts/timelines/TimelineCardStack.tsx
new file mode 100644
index 0000000..073b41a
--- /dev/null
+++ b/src/components/cardStack/layouts/timelines/TimelineCardStack.tsx
@@ -0,0 +1,144 @@
+"use client";
+
+import React, { useEffect, useRef, memo, 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, 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;
+    buttons?: ButtonConfig[];
+    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,
+    buttons,
+    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",
+                useInvertedBackground === "invertCard"
+                    ? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground"
+                    : "w-full",
+                useInvertedBackground === "invertDefault" && "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}
+                    buttons={buttons}
+                    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 rounded-theme-capped h-[140vw] md:h-[75vh] top-[25vw] md:top-[12.5vh]"
+                        >
+                            {child}
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </section>
+    );
+};
+
+TimelineCardStack.displayName = "TimelineCardStack";
+
+export default memo(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..ed98c8f
--- /dev/null
+++ b/src/components/cardStack/layouts/timelines/TimelineHorizontalCardStack.tsx
@@ -0,0 +1,172 @@
+"use client";
+
+import React, { 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, TitleSegment, TextboxLayout, InvertedBackground } from "../../types";
+
+interface TimelineHorizontalCardStackProps {
+  children: React.ReactNode;
+  title: string;
+  titleSegments?: TitleSegment[];
+  description: string;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  buttons?: ButtonConfig[];
+  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,
+  buttons,
+  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",
+        useInvertedBackground === "invertCard"
+          ? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground"
+          : "w-full",
+        useInvertedBackground === "invertDefault" && "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}
+          buttons={buttons}
+          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("card rounded-theme-capped p-6 overflow-hidden aspect-square md:aspect-[17/9]", mediaContainerClassName)}>
+            <div
+              className="relative z-1 transition-opacity duration-300 w-full h-full"
+              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>
+  );
+};
+
+TimelineHorizontalCardStack.displayName = "TimelineHorizontalCardStack";
+
+export default React.memo(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..5a5815f
--- /dev/null
+++ b/src/components/cardStack/layouts/timelines/TimelinePhoneView.tsx
@@ -0,0 +1,260 @@
+"use client";
+
+import React, { memo } from "react";
+import MediaContent from "@/components/shared/MediaContent";
+import CardStackTextBox from "../../CardStackTextBox";
+import { usePhoneAnimations, type TimelinePhoneViewItem } from "../../hooks/usePhoneAnimations";
+import { cls } from "@/lib/utils";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig } from "../../types";
+import type { TitleSegment } 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 = memo(({
+  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>
+));
+
+PhoneFrame.displayName = "PhoneFrame";
+
+interface TimelinePhoneViewProps {
+  items: TimelinePhoneViewItem[];
+  showTextBox?: boolean;
+  showDivider?: boolean;
+  title: string;
+  titleSegments?: TitleSegment[];
+  description: string;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  buttons?: ButtonConfig[];
+  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,
+  buttons,
+  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 sectionHeightStyle = { height: `${items.length * 100}vh` };
+
+  return (
+    <section
+      className={cls(
+        "relative py-20 overflow-hidden md:overflow-visible",
+        useInvertedBackground === "invertCard"
+          ? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground"
+          : "w-full",
+        useInvertedBackground === "invertDefault" && "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}
+              buttons={buttons}
+              textboxLayout={textboxLayout}
+              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-full z-0",
+              desktopContainerClassName
+            )}
+            style={sectionHeightStyle}
+          >
+            {items.map((item, index) => (
+              <div
+                key={`content-${index}`}
+                className={cls(
+                  item.trigger,
+                  "w-content-width mx-auto h-screen flex justify-center items-center px-[var(--width-20)] 2xl:px-[var(--width-25)]",
+                  desktopContentClassName
+                )}
+              >
+                <div 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-45 h-100", 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-45 h-100", mobilePhoneFrameClassName)}
+                />
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+TimelinePhoneView.displayName = "TimelinePhoneView";
+
+export default memo(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..f618774
--- /dev/null
+++ b/src/components/cardStack/layouts/timelines/TimelineProcessFlow.tsx
@@ -0,0 +1,187 @@
+"use client";
+
+import React, { useEffect, useRef, memo } from "react";
+import { gsap } from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+import CardStackTextBox from "../../CardStackTextBox";
+import { useCardAnimation } from "../../hooks/useCardAnimation";
+import { cls } from "@/lib/utils";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig } from "../../types";
+import type { CardAnimationType } from "../../types";
+import type { TitleSegment } from "../../types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+gsap.registerPlugin(ScrollTrigger);
+
+interface TimelineProcessFlowItem {
+  id: string;
+  content: React.ReactNode;
+  media: React.ReactNode;
+  reverse: boolean;
+}
+
+interface TimelineProcessFlowProps {
+  items: TimelineProcessFlowItem[];
+  title: string;
+  titleSegments?: TitleSegment[];
+  description: string;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  buttons?: ButtonConfig[];
+  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,
+  buttons,
+  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 processLineRef = useRef<HTMLDivElement>(null);
+  const { itemRefs } = useCardAnimation({ animationType, itemCount: items.length });
+
+  useEffect(() => {
+    if (!processLineRef.current) return;
+
+    gsap.fromTo(
+      processLineRef.current,
+      { yPercent: -100 },
+      {
+        yPercent: 0,
+        ease: "none",
+        scrollTrigger: {
+          trigger: ".timeline-line",
+          start: "top center",
+          end: "bottom center",
+          scrub: true,
+        },
+      }
+    );
+
+    return () => {
+      ScrollTrigger.getAll().forEach((trigger) => trigger.kill());
+    };
+  }, []);
+
+  return (
+    <section
+      className={cls(
+        "relative py-20",
+        useInvertedBackground === "invertCard"
+          ? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground"
+          : "w-full",
+        useInvertedBackground === "invertDefault" && "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}
+            buttons={buttons}
+            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="relative w-full">
+          <div className="timeline-line pointer-events-none absolute top-0 right-[var(--width-10)] md:right-auto md:left-1/2 md:-translate-x-1/2 w-px h-full z-0 overflow-hidden bg-foreground">
+            <div className="w-full h-full bg-accent" ref={processLineRef} />
+          </div>
+          <ol className={cls("relative flex flex-col gap-10 md:gap-20 w-content-width mx-auto", gapClassName)}>
+            {items.map((item, index) => (
+              <li
+                key={item.id}
+                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-30", 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-full flex items-center justify-center z-10 primary-button",
+                    numberClassName
+                  )}
+                >
+                  <p className="text-sm text-background">{item.id}</p>
+                </div>
+                <div className={cls("relative w-70 md:w-30", contentWrapperClassName)}>
+                  {item.content}
+                </div>
+              </li>
+            ))}
+          </ol>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+TimelineProcessFlow.displayName = "TimelineProcessFlow";
+
+export default memo(TimelineProcessFlow);
diff --git a/src/components/cardStack/types.ts b/src/components/cardStack/types.ts
new file mode 100644
index 0000000..44ce3dd
--- /dev/null
+++ b/src/components/cardStack/types.ts
@@ -0,0 +1,147 @@
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig } from "@/types/button";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+export type { ButtonConfig, 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"
+    | "uniform-staggered-items"
+    | "uniform-alternating-heights"
+    | "uniform-alternating-heights-inverted"
+    | "uniform-alternating-sizes"
+    | "uniform-alternating-sizes-inverted"
+    | "two-items-tall-short"
+    | "two-items-short-tall"
+    | "bento-grid"
+    | "bento-grid-inverted"
+    | "two-columns-alternating-heights"
+    | "asymmetric-60-wide-40-narrow"
+    | "three-columns-all-equal-width"
+    | "four-items-2x2-equal-grid"
+    | "four-items-2x2-alternating-heights"
+    | "four-items-2x2-alternating-heights-inverted"
+    | "four-items-2x2-staggered-grid"
+    | "four-items-2x2-staggered-grid-inverted"
+    | "one-large-right-three-stacked-left"
+    | "items-top-row-full-width-bottom"
+    | "full-width-top-items-bottom-row"
+    | "one-large-left-three-stacked-right"
+    | "timeline"
+    | "timeline-three-columns";
+
+export type CardAnimationType =
+    | "none"
+    | "opacity"
+    | "slide-up"
+    | "scale-rotate"
+    | "blur-reveal";
+
+export type ContainerStyle = "default" | "card";
+
+export interface TextBoxProps {
+    title?: string;
+    titleSegments?: TitleSegment[];
+    description?: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    buttons?: ButtonConfig[];
+    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;
+    containerStyle?: ContainerStyle;
+    carouselThreshold?: number;
+    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;
+    containerStyle?: ContainerStyle;
+    className?: string;
+    containerClassName?: string;
+    gridClassName?: string;
+    ariaLabel: string;
+}
+
+export interface AutoCarouselProps extends TextBoxProps {
+    children: React.ReactNode;
+    uniformGridCustomHeightClasses?: string;
+    animationType: CardAnimationType;
+    containerStyle?: ContainerStyle;
+    speed?: number;
+    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;
+    containerStyle?: ContainerStyle;
+    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;
+}
diff --git a/src/components/form/ContactForm.tsx b/src/components/form/ContactForm.tsx
new file mode 100644
index 0000000..e3a6478
--- /dev/null
+++ b/src/components/form/ContactForm.tsx
@@ -0,0 +1,101 @@
+"use client";
+
+import { memo } from "react";
+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 type { AnimationType } from "@/components/text/types";
+import { LucideIcon } from "lucide-react";
+
+interface ContactFormProps {
+    title: string;
+    description: string;
+    tag: string;
+    tagIcon?: LucideIcon;
+    useInvertedBackground: "noInvert" | "invertDefault" | "invertCard";
+    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,
+    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);
+
+    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")}>
+                <Tag text={tag} icon={tagIcon} useInvertedBackground={useInvertedBackground} className={tagClassName} />
+
+                <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>
+    );
+};
+
+ContactForm.displayName = "ContactForm";
+
+export default memo(ContactForm);
diff --git a/src/components/form/EmailSignupForm.tsx b/src/components/form/EmailSignupForm.tsx
new file mode 100644
index 0000000..03f7a4d
--- /dev/null
+++ b/src/components/form/EmailSignupForm.tsx
@@ -0,0 +1,77 @@
+"use client";
+
+import { memo, 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 = memo(({
+    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);
+        }
+    };
+
+    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
+                )}
+            />
+        </form>
+    );
+});
+
+EmailSignupForm.displayName = "EmailSignupForm";
+
+export default EmailSignupForm;
diff --git a/src/components/form/Input.tsx b/src/components/form/Input.tsx
new file mode 100644
index 0000000..4a4c060
--- /dev/null
+++ b/src/components/form/Input.tsx
@@ -0,0 +1,47 @@
+"use client";
+
+import { memo } from "react";
+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;
+}
+
+const Input = ({
+    type = "text",
+    placeholder = "",
+    value,
+    onChange,
+    required = false,
+    disabled = false,
+    ariaLabel,
+    className = "",
+}: InputProps) => {
+    return (
+        <input
+            type={type}
+            placeholder={placeholder}
+            value={value}
+            onChange={(e) => onChange(e.target.value)}
+            required={required}
+            disabled={disabled}
+            aria-label={ariaLabel || placeholder}
+            className={cls(
+                "relative z-1 px-4 py-3 secondary-button rounded-theme text-base text-foreground placeholder:text-foreground/75 focus:outline-none",
+                disabled && "opacity-50 cursor-not-allowed",
+                className
+            )}
+        />
+    );
+};
+
+Input.displayName = "Input";
+
+export default memo(Input);
diff --git a/src/components/form/Textarea.tsx b/src/components/form/Textarea.tsx
new file mode 100644
index 0000000..5719244
--- /dev/null
+++ b/src/components/form/Textarea.tsx
@@ -0,0 +1,47 @@
+"use client";
+
+import { memo } from "react";
+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;
+}
+
+const Textarea = ({
+    placeholder = "",
+    value,
+    onChange,
+    rows = 5,
+    required = false,
+    disabled = false,
+    ariaLabel,
+    className = "",
+}: TextareaProps) => {
+    return (
+        <textarea
+            placeholder={placeholder}
+            value={value}
+            onChange={(e) => onChange(e.target.value)}
+            rows={rows}
+            required={required}
+            disabled={disabled}
+            aria-label={ariaLabel || placeholder}
+            className={cls(
+                "relative z-1 px-4 py-3 secondary-button rounded-theme-capped text-base text-foreground placeholder:text-foreground/75 focus:outline-none resize-none",
+                disabled && "opacity-50 cursor-not-allowed",
+                className
+            )}
+        />
+    );
+};
+
+Textarea.displayName = "Textarea";
+
+export default memo(Textarea);
diff --git a/src/components/form/WaitlistForm.tsx b/src/components/form/WaitlistForm.tsx
new file mode 100644
index 0000000..2ae8bc3
--- /dev/null
+++ b/src/components/form/WaitlistForm.tsx
@@ -0,0 +1,99 @@
+"use client";
+
+import React, { memo, 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>
+    );
+};
+
+WaitlistForm.displayName = "WaitlistForm";
+
+export default memo(WaitlistForm);
diff --git a/src/components/navbar/Logo.tsx b/src/components/navbar/Logo.tsx
new file mode 100644
index 0000000..aae9f5b
--- /dev/null
+++ b/src/components/navbar/Logo.tsx
@@ -0,0 +1,48 @@
+"use client";
+
+import { memo } from "react";
+import Image from "next/image";
+import { cls } from "@/lib/utils";
+
+interface LogoProps {
+  logoSrc?: string;
+  logoAlt?: string;
+  brandName?: string;
+  className?: string;
+  imageClassName?: string;
+  textClassName?: string;
+}
+
+const Logo = memo<LogoProps>(function Logo({
+  logoSrc,
+  logoAlt = "",
+  brandName = "Webild",
+  className = "",
+  imageClassName = "",
+  textClassName = ""
+}) {
+  if (logoSrc) {
+    return (
+      <div className={cls("relative h-[var(--text-xl)] 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>
+    );
+  }
+
+  return (
+    <h2 className={cls("text-xl font-medium text-foreground", textClassName)}>
+      {brandName}
+    </h2>
+  );
+});
+
+Logo.displayName = "Logo";
+
+export default Logo;
\ No newline at end of file
diff --git a/src/components/navbar/NavbarLayoutFloatingInline.tsx b/src/components/navbar/NavbarLayoutFloatingInline.tsx
new file mode 100644
index 0000000..20ed1e4
--- /dev/null
+++ b/src/components/navbar/NavbarLayoutFloatingInline.tsx
@@ -0,0 +1,82 @@
+"use client";
+import { memo } 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;
+  className?: string;
+  navItemClassName?: string;
+  buttonClassName?: string;
+  buttonTextClassName?: string;
+}
+
+const NavbarLayoutFloatingInline = memo<NavbarLayoutFloatingInlineProps>(
+  function NavbarLayoutFloatingInline({
+    navItems,
+    logoSrc,
+    logoAlt = "",
+    brandName = "Webild",
+    button,
+    className = "",
+    navItemClassName = "",
+    buttonClassName = "",
+    buttonTextClassName = "",
+  }) {
+    const theme = useTheme();
+
+    return (
+      <nav
+        role="navigation"
+        aria-label="Main navigation"
+        className={cls(
+          "fixed z-[100] top-6 w-full",
+          "transition-all duration-500 ease-in-out",
+          className
+        )}
+      >
+        <div className={cls(
+          "w-content-width mx-auto",
+          "flex items-center justify-between",
+          "card rounded-theme",
+          "p-3 pl-6 h-fit relative"
+        )}>
+          <Logo logoSrc={logoSrc} logoAlt={logoAlt} brandName={brandName} />
+
+          <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) => (
+              <ButtonTextUnderline
+                key={index}
+                text={item.name}
+                href={item.id}
+                className={cls("!text-base", navItemClassName)}
+              />
+            ))}
+          </div>
+
+          <Button
+            {...getButtonProps(
+              button,
+              0,
+              theme.defaultButtonVariant,
+              buttonClassName,
+              buttonTextClassName
+            )}
+          />
+        </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..f82825e
--- /dev/null
+++ b/src/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay.tsx
@@ -0,0 +1,92 @@
+"use client";
+import { memo } from "react";
+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;
+  brandName?: string;
+  button: ButtonConfig;
+  buttonClassName?: string;
+  buttonTextClassName?: string;
+}
+
+const NavbarLayoutFloatingOverlay = memo<NavbarLayoutFloatingOverlayProps>(
+  function NavbarLayoutFloatingOverlay({
+    navItems,
+    logoSrc,
+    logoAlt = "",
+    brandName = "Webild",
+    button,
+    buttonClassName = "",
+    buttonTextClassName = "",
+  }) {
+    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={cls(
+          "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"
+          )}
+          style={{
+            height: "calc(var(--vw-0_75) + var(--vw-0_75) + var(--height-9))",
+          }}
+        >
+          <Logo logoSrc={logoSrc} logoAlt={logoAlt} brandName={brandName} />
+          <div
+            className="flex items-center transition-all duration-500 ease-in-out"
+            style={{ paddingRight: "calc(var(--height-9) + var(--vw-0_75))" }}
+          >
+            {!isMobile && (
+              <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..080888a
--- /dev/null
+++ b/src/components/navbar/NavbarStyleApple/NavbarStyleApple.tsx
@@ -0,0 +1,86 @@
+"use client";
+import { useState, memo, useCallback } from "react";
+import MobileMenu from "../mobileMenu/MobileMenu";
+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";
+
+const SCROLL_THRESHOLD = 50;
+
+const NavbarStyleApple = ({
+  navItems,
+  logoSrc,
+  logoAlt = "",
+  brandName = "Webild",
+}: NavbarProps) => {
+  const isScrolled = useScrollState(SCROLL_THRESHOLD);
+  const [menuOpen, setMenuOpen] = useState(false);
+
+  const handleMenuToggle = useCallback(() => {
+    setMenuOpen((prev) => !prev);
+  }, []);
+
+  const handleMobileNavClick = useCallback(() => {
+    setMenuOpen(false);
+  }, []);
+
+  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="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 logoSrc={logoSrc} logoAlt={logoAlt} brandName={brandName} />
+        </div>
+
+        <div
+          className="hidden md:flex items-center gap-6 transition-all duration-500 ease-in-out"
+          role="navigation"
+        >
+          {navItems.map((item, index) => (
+            <ButtonTextUnderline
+              key={index}
+              text={item.name}
+              href={item.id}
+              className="!text-base"
+            />
+          ))}
+        </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}
+      />
+    </nav>
+  );
+};
+
+export default memo(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/NavbarStyleMinimal.tsx b/src/components/navbar/NavbarStyleMinimal.tsx
new file mode 100644
index 0000000..4da692a
--- /dev/null
+++ b/src/components/navbar/NavbarStyleMinimal.tsx
@@ -0,0 +1,63 @@
+"use client";
+import { memo } from "react";
+import Button from "../button/Button";
+import Logo from "./Logo";
+import { cls } from "@/lib/utils";
+import { getButtonProps } from "@/lib/buttonUtils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { ButtonConfig } from "@/types/button";
+
+interface NavbarStyleMinimalProps {
+  logoSrc?: string;
+  logoAlt?: string;
+  brandName?: string;
+  button: ButtonConfig;
+  className?: string;
+  buttonClassName?: string;
+  buttonTextClassName?: string;
+}
+
+const NavbarStyleMinimal = memo<NavbarStyleMinimalProps>(
+  function NavbarStyleMinimal({
+    logoSrc,
+    logoAlt = "",
+    brandName = "Webild",
+    button,
+    className = "",
+    buttonClassName = "",
+    buttonTextClassName = "",
+  }) {
+    const theme = useTheme();
+
+    return (
+      <nav
+        role="navigation"
+        aria-label="Main navigation"
+        className={cls(
+          "fixed z-[100] top-6 w-full",
+          "transition-all duration-500 ease-in-out",
+          className
+        )}
+      >
+        <div className={cls(
+          "w-content-width mx-auto",
+          "flex items-center justify-between"
+        )}>
+          <Logo logoSrc={logoSrc} logoAlt={logoAlt} brandName={brandName} />
+
+          <Button
+            {...getButtonProps(
+              button,
+              0,
+              theme.defaultButtonVariant,
+              buttonClassName,
+              buttonTextClassName
+            )}
+          />
+        </div>
+      </nav>
+    );
+  }
+);
+
+export default NavbarStyleMinimal;
diff --git a/src/components/navbar/expandingMenu/ExpandingMenu.tsx b/src/components/navbar/expandingMenu/ExpandingMenu.tsx
new file mode 100644
index 0000000..9f76988
--- /dev/null
+++ b/src/components/navbar/expandingMenu/ExpandingMenu.tsx
@@ -0,0 +1,147 @@
+"use client";
+import { useCallback, memo } 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 = memo<ExpandingMenuProps>(function ExpandingMenu({
+    isOpen,
+    onToggle,
+    navItems,
+    isScrolled = false
+}) {
+    const { isMounted, menuWidth } = useResponsiveMenuWidth();
+
+    const handleNavClick = useCallback(() => {
+        onToggle();
+    }, [onToggle]);
+
+    return (
+        <div 
+            className={`
+            rounded-theme-capped absolute top-3 right-3
+            transition-[top] duration-500 ease-in-out
+            ${isScrolled ? '' : ''}
+        `}>
+            <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)]
+                pointer-events-auto origin-[100%_0]
+                ${isOpen
+                    ? 'scale-100 opacity-100 visible'
+                    : 'scale-[0.15] opacity-0 invisible'
+                }
+            `}
+                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-background" 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-background 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..67b36b0
--- /dev/null
+++ b/src/components/navbar/mobileMenu/MobileMenu.tsx
@@ -0,0 +1,79 @@
+"use client";
+
+import { memo, 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-1/2 -translate-x-1/2 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 memo(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/AboutFeature.tsx b/src/components/sections/about/AboutFeature.tsx
new file mode 100644
index 0000000..18306a3
--- /dev/null
+++ b/src/components/sections/about/AboutFeature.tsx
@@ -0,0 +1,102 @@
+"use client";
+
+import React, { memo } from "react";
+import TextAnimation from "@/components/text/TextAnimation";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { LucideIcon } from "lucide-react";
+
+interface Feature {
+  icon: LucideIcon;
+  title: string;
+  description: string;
+}
+
+interface AboutFeatureProps {
+  title: string;
+  features: Feature[];
+  useInvertedBackground: "noInvert" | "invertDefault" | "invertCard";
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  titleClassName?: string;
+  featuresContainerClassName?: string;
+  featureCardClassName?: string;
+  featureIconContainerClassName?: string;
+  featureIconClassName?: string;
+  featureTitleClassName?: string;
+  featureDescriptionClassName?: string;
+}
+
+const AboutFeature = ({
+  title,
+  features,
+  useInvertedBackground,
+  ariaLabel = "About features section",
+  className = "",
+  containerClassName = "",
+  titleClassName = "",
+  featuresContainerClassName = "",
+  featureCardClassName = "",
+  featureIconContainerClassName = "",
+  featureIconClassName = "",
+  featureTitleClassName = "",
+  featureDescriptionClassName = "",
+}: AboutFeatureProps) => {
+  const theme = useTheme();
+  const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+  const gridColsMap = {
+    2: "md:grid-cols-2",
+    3: "md:grid-cols-3",
+    4: "md:grid-cols-4",
+  };
+  const gridCols = gridColsMap[features.length as keyof typeof gridColsMap] || "md:grid-cols-4";
+
+  return (
+    <section
+      aria-label={ariaLabel}
+      className={cls("relative py-20", useInvertedBackground === "invertCard" ? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground" : "w-full", useInvertedBackground === "invertDefault" && "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 === "invertDefault" || useInvertedBackground === "invertCard") && "text-background", titleClassName)}
+        />
+
+        <div className={cls("grid grid-cols-1 gap-6", gridCols, featuresContainerClassName)}>
+          {features.map((feature, index) => {
+            const Icon = feature.icon;
+            return (
+              <div
+                key={index}
+                className={cls(
+                  "card flex flex-col justify-between gap-4 p-6 rounded-theme-capped h-50 md:h-60 2xl:h-70",
+                  featureCardClassName
+                )}
+              >
+                <div className={cls("relative z-1 primary-button h-12 w-fit aspect-square flex items-center justify-center rounded-theme", featureIconContainerClassName)} aria-hidden="true">
+                  <Icon className={cls("h-4/10 w-auto text-background", featureIconClassName)} strokeWidth={1.5} />
+                </div>
+                <div className="relative z-1 flex flex-col gap-1">
+                  <h3 className={cls("text-2xl font-medium", shouldUseLightText && "text-background", featureTitleClassName)}>
+                    {feature.title}
+                  </h3>
+                  <p className={cls("text-sm leading-[1.1]", shouldUseLightText ? "text-background" : "text-foreground", featureDescriptionClassName)}>
+                    {feature.description}
+                  </p>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+AboutFeature.displayName = "AboutFeature";
+
+export default memo(AboutFeature);
diff --git a/src/components/sections/about/AboutMetric.tsx b/src/components/sections/about/AboutMetric.tsx
new file mode 100644
index 0000000..2e733ea
--- /dev/null
+++ b/src/components/sections/about/AboutMetric.tsx
@@ -0,0 +1,102 @@
+"use client";
+
+import React, { memo } from "react";
+import TextAnimation from "@/components/text/TextAnimation";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { LucideIcon } from "lucide-react";
+
+interface Metric {
+  icon: LucideIcon;
+  label: string;
+  value: string;
+}
+
+interface AboutMetricProps {
+  title: string;
+  metrics: Metric[];
+  useInvertedBackground: "noInvert" | "invertDefault" | "invertCard";
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  titleClassName?: string;
+  metricsContainerClassName?: string;
+  metricCardClassName?: string;
+  metricIconClassName?: string;
+  metricLabelClassName?: string;
+  metricValueClassName?: string;
+}
+
+const AboutMetric = ({
+  title,
+  metrics,
+  useInvertedBackground,
+  ariaLabel = "About metrics section",
+  className = "",
+  containerClassName = "",
+  titleClassName = "",
+  metricsContainerClassName = "",
+  metricCardClassName = "",
+  metricIconClassName = "",
+  metricLabelClassName = "",
+  metricValueClassName = "",
+}: AboutMetricProps) => {
+  const theme = useTheme();
+  const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+  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", useInvertedBackground === "invertCard" ? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground" : "w-full", useInvertedBackground === "invertDefault" && "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 === "invertDefault" || useInvertedBackground === "invertCard") && "text-background", titleClassName)}
+        />
+
+        <div 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-background" 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>
+  );
+};
+
+AboutMetric.displayName = "AboutMetric";
+
+export default memo(AboutMetric);
diff --git a/src/components/sections/about/AboutPhoneTimeline.tsx b/src/components/sections/about/AboutPhoneTimeline.tsx
new file mode 100644
index 0000000..12b587c
--- /dev/null
+++ b/src/components/sections/about/AboutPhoneTimeline.tsx
@@ -0,0 +1,214 @@
+"use client";
+
+import React, { memo, useMemo } from "react";
+import TimelinePhoneView from "@/components/cardStack/layouts/timelines/TimelinePhoneView";
+import TextAnimation from "@/components/text/TextAnimation";
+import Button from "@/components/button/Button";
+import Tag from "@/components/shared/Tag";
+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, TitleSegment } from "@/components/cardStack/types";
+import type { TimelinePhoneViewItem } from "@/components/cardStack/hooks/usePhoneAnimations";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type AboutPhone = {
+    imageAlt?: string;
+    videoAriaLabel?: string;
+} & (
+        | { imageSrc: string; videoSrc?: never }
+        | { videoSrc: string; imageSrc?: never }
+    );
+
+interface AboutPhoneTimelineProps {
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag: string;
+    tagIcon?: LucideIcon;
+    buttons?: ButtonConfig[];
+    phoneOne: AboutPhone;
+    phoneTwo: AboutPhone;
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    desktopContainerClassName?: string;
+    mobileContainerClassName?: string;
+    desktopContentClassName?: string;
+    desktopWrapperClassName?: string;
+    mobileWrapperClassName?: string;
+    phoneFrameClassName?: string;
+    mobilePhoneFrameClassName?: string;
+    titleImageWrapperClassName?: string;
+    titleImageClassName?: string;
+    contentClassName?: string;
+    tagClassName?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
+    buttonContainerClassName?: string;
+    buttonClassName?: string;
+    buttonTextClassName?: string;
+}
+
+interface AboutContentProps {
+    title: string;
+    description: string;
+    tag: string;
+    tagIcon?: LucideIcon;
+    buttons?: ButtonConfig[];
+    useInvertedBackground: "noInvert" | "invertDefault" | "invertCard";
+    contentClassName: string;
+    tagClassName: string;
+    titleClassName: string;
+    descriptionClassName: string;
+    buttonContainerClassName: string;
+    buttonClassName: string;
+    buttonTextClassName: string;
+}
+
+const AboutContent = ({
+    title,
+    description,
+    tag,
+    tagIcon: TagIcon,
+    buttons,
+    useInvertedBackground,
+    contentClassName,
+    tagClassName,
+    titleClassName,
+    descriptionClassName,
+    buttonContainerClassName,
+    buttonClassName,
+    buttonTextClassName,
+}: AboutContentProps) => {
+    const theme = useTheme();
+
+    return (
+        <div className={cls("h-full w-full flex items-center justify-center px-10", contentClassName)}>
+            <div className="flex flex-col gap-3 md:gap-1 items-center mb-0 md:mb-[12.5vh] 2xl:mb-[14vh]">
+                <Tag
+                    text={tag}
+                    icon={TagIcon}
+                    useInvertedBackground={useInvertedBackground}
+                    className={cls("mb-1 md:mb-3", tagClassName)}
+                />
+
+                <TextAnimation
+                    type={theme.defaultTextAnimation}
+                    text={title}
+                    variant="trigger"
+                    as="h2"
+                    className={cls("text-6xl font-medium text-center", (useInvertedBackground === "invertDefault" || useInvertedBackground === "invertCard") && "text-background", titleClassName)}
+                />
+
+                <TextAnimation
+                    type={theme.defaultTextAnimation}
+                    text={description}
+                    variant="trigger"
+                    as="p"
+                    className={cls("text-lg leading-[1.2] text-center", (useInvertedBackground === "invertDefault" || useInvertedBackground === "invertCard") ? "text-background/75" : "text-foreground/75", descriptionClassName)}
+                />
+
+                {buttons && buttons.length > 0 && (
+                    <div className={cls("flex gap-4 mt-1 md:mt-3 justify-center", buttonContainerClassName)}>
+                        {buttons.map((button, index) => (
+                            <Button key={`${button.text}-${index}`} {...getButtonProps(button, index, theme.defaultButtonVariant, buttonClassName, buttonTextClassName)} />
+                        ))}
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};
+
+const AboutPhoneTimeline = ({
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    buttons,
+    phoneOne,
+    phoneTwo,
+    textboxLayout,
+    useInvertedBackground,
+    ariaLabel = "About section",
+    className = "",
+    containerClassName = "",
+    desktopContainerClassName = "",
+    mobileContainerClassName = "",
+    desktopContentClassName = "",
+    desktopWrapperClassName = "",
+    mobileWrapperClassName = "",
+    phoneFrameClassName = "",
+    mobilePhoneFrameClassName = "",
+    titleImageWrapperClassName = "",
+    titleImageClassName = "",
+    contentClassName = "",
+    tagClassName = "",
+    titleClassName = "",
+    descriptionClassName = "",
+    buttonContainerClassName = "",
+    buttonClassName = "",
+    buttonTextClassName = "",
+}: AboutPhoneTimelineProps) => {
+    const timelineItems: TimelinePhoneViewItem[] = useMemo(() => [{
+        trigger: 'about-trigger',
+        content: (
+            <AboutContent
+                title={title}
+                description={description}
+                tag={tag}
+                tagIcon={tagIcon}
+                buttons={buttons}
+                useInvertedBackground={useInvertedBackground}
+                contentClassName={contentClassName}
+                tagClassName={tagClassName}
+                titleClassName={titleClassName}
+                descriptionClassName={descriptionClassName}
+                buttonContainerClassName={buttonContainerClassName}
+                buttonClassName={buttonClassName}
+                buttonTextClassName={buttonTextClassName}
+            />
+        ),
+        imageOne: phoneOne.imageSrc,
+        videoOne: phoneOne.videoSrc,
+        imageAltOne: phoneOne.imageAlt || `${title} - Image 1`,
+        videoAriaLabelOne: phoneOne.videoAriaLabel || `${title} - Video 1`,
+        imageTwo: phoneTwo.imageSrc,
+        videoTwo: phoneTwo.videoSrc,
+        imageAltTwo: phoneTwo.imageAlt || `${title} - Image 2`,
+        videoAriaLabelTwo: phoneTwo.videoAriaLabel || `${title} - Video 2`,
+    }], [title, description, tag, tagIcon, buttons, phoneOne, phoneTwo, useInvertedBackground, contentClassName, tagClassName, titleClassName, descriptionClassName, buttonContainerClassName, buttonClassName, buttonTextClassName]);
+
+    return (
+        <TimelinePhoneView
+            items={timelineItems}
+            showTextBox={false}
+            title=""
+            titleSegments={titleSegments}
+            description=""
+            textboxLayout={textboxLayout}
+            useInvertedBackground={useInvertedBackground}
+            className={className}
+            containerClassName={containerClassName}
+            desktopContainerClassName={desktopContainerClassName}
+            mobileContainerClassName={mobileContainerClassName}
+            desktopContentClassName={desktopContentClassName}
+            desktopWrapperClassName={desktopWrapperClassName}
+            mobileWrapperClassName={mobileWrapperClassName}
+            phoneFrameClassName={phoneFrameClassName}
+            mobilePhoneFrameClassName={mobilePhoneFrameClassName}
+            titleImageWrapperClassName={titleImageWrapperClassName}
+            titleImageClassName={titleImageClassName}
+            ariaLabel={ariaLabel}
+        />
+    );
+};
+
+AboutPhoneTimeline.displayName = "AboutPhoneTimeline";
+
+export default memo(AboutPhoneTimeline);
diff --git a/src/components/sections/about/AboutShowcase.tsx b/src/components/sections/about/AboutShowcase.tsx
new file mode 100644
index 0000000..d6ced5b
--- /dev/null
+++ b/src/components/sections/about/AboutShowcase.tsx
@@ -0,0 +1,245 @@
+"use client";
+
+import { memo } from "react";
+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 } from "@/types/button";
+import type { CardAnimationType, TitleSegment } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+interface ShowcaseItem {
+  title: string;
+  imageSrc?: string;
+  videoSrc?: string;
+  imageAlt?: string;
+  videoAriaLabel?: string;
+}
+
+interface ColumnItemProps {
+  item: ShowcaseItem;
+  position: "left" | "right";
+  shouldUseLightText: boolean;
+  useCappedBorderRadius: boolean;
+  itemMediaWrapperClassName: string;
+  itemImageClassName: string;
+  itemTitleClassName: string;
+  mediaRef?: (el: HTMLDivElement | null) => void;
+  textRef?: (el: HTMLDivElement | null) => void;
+}
+
+const ColumnItem = ({
+  item,
+  position,
+  shouldUseLightText,
+  useCappedBorderRadius,
+  itemMediaWrapperClassName,
+  itemImageClassName,
+  itemTitleClassName,
+  mediaRef,
+  textRef,
+}: ColumnItemProps) => {
+  const mediaBlock = (
+    <div ref={mediaRef} className={cls("w-full h-auto md:h-1/2 aspect-square md:aspect-auto overflow-hidden", useCappedBorderRadius ? "rounded-theme-capped" : "rounded-theme", itemMediaWrapperClassName)}>
+      <MediaContent
+        imageSrc={item.imageSrc}
+        videoSrc={item.videoSrc}
+        imageAlt={item.imageAlt || ""}
+        videoAriaLabel={item.videoAriaLabel || "Item video"}
+        imageClassName={cls("w-full h-full object-cover", itemImageClassName)}
+      />
+    </div>
+  );
+
+  const textBlock = (
+    <div ref={textRef} className={cls("relative card rounded-theme-capped md:h-1/2 flex flex-col p-6", position === "left" ? "justify-end text-left" : "md:justify-start md:text-right")}>
+      <h3 className={cls("text-3xl font-medium leading-tight line-clamp-6", shouldUseLightText ? "text-background" : "text-foreground", itemTitleClassName)}>
+        {item.title}
+      </h3>
+    </div>
+  );
+
+  return position === "left" ? (
+    <div className="flex flex-col gap-6 h-full">
+      {mediaBlock}
+      {textBlock}
+    </div>
+  ) : (
+    <div className="flex flex-col gap-6 h-full">
+      {textBlock}
+      {mediaBlock}
+    </div>
+  );
+};
+
+interface AboutShowcaseProps {
+  title: string;
+  titleSegments?: TitleSegment[];
+  description: string;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  buttons?: ButtonConfig[];
+  leftItem: ShowcaseItem;
+  rightItem: ShowcaseItem;
+  centerImageSrc?: string;
+  centerVideoSrc?: string;
+  centerImageAlt?: string;
+  centerVideoAriaLabel?: string;
+  ariaLabel?: string;
+  useCappedBorderRadius: boolean;
+  animationType: CardAnimationType;
+  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;
+  leftColumnClassName?: string;
+  rightColumnClassName?: string;
+  centerColumnClassName?: string;
+  itemTitleClassName?: string;
+  itemMediaWrapperClassName?: string;
+  itemImageClassName?: string;
+  centerMediaWrapperClassName?: string;
+  centerImageClassName?: string;
+}
+
+const AboutShowcase = ({
+  title,
+  titleSegments,
+  description,
+  tag,
+  tagIcon,
+  buttons,
+  leftItem,
+  rightItem,
+  centerImageSrc,
+  centerVideoSrc,
+  centerImageAlt = "",
+  centerVideoAriaLabel = "Showcase video",
+  ariaLabel = "About section",
+  useCappedBorderRadius,
+  animationType,
+  textboxLayout,
+  useInvertedBackground,
+  className = "",
+  containerClassName = "",
+  textBoxClassName = "",
+  titleClassName = "",
+  titleImageWrapperClassName = "",
+  titleImageClassName = "",
+  descriptionClassName = "",
+  tagClassName = "",
+  buttonContainerClassName = "",
+  buttonClassName = "",
+  buttonTextClassName = "",
+  contentClassName = "",
+  leftColumnClassName = "",
+  rightColumnClassName = "",
+  centerColumnClassName = "",
+  itemTitleClassName = "",
+  itemMediaWrapperClassName = "",
+  itemImageClassName = "",
+  centerMediaWrapperClassName = "",
+  centerImageClassName = "",
+}: AboutShowcaseProps) => {
+  const theme = useTheme();
+  const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+  const { itemRefs } = useCardAnimation({ animationType, itemCount: 5 });
+
+  return (
+    <section
+      aria-label={ariaLabel}
+      className={cls(
+        "relative py-20",
+        useInvertedBackground === "invertCard"
+          ? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground"
+          : "w-full",
+        useInvertedBackground === "invertDefault" && "bg-foreground",
+        className
+      )}
+    >
+      <div className={cls("w-content-width mx-auto flex flex-col gap-10 md:gap-15", containerClassName)}>
+        <CardStackTextBox
+          title={title}
+          titleSegments={titleSegments}
+          description={description}
+          tag={tag}
+          tagIcon={tagIcon}
+          buttons={buttons}
+          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("relative grid grid-cols-1 md:grid-cols-3 gap-6", contentClassName)}>
+          <div className={cls("flex flex-col", leftColumnClassName)}>
+            <ColumnItem
+              item={leftItem}
+              position="left"
+              shouldUseLightText={shouldUseLightText}
+              useCappedBorderRadius={useCappedBorderRadius}
+              itemMediaWrapperClassName={itemMediaWrapperClassName}
+              itemImageClassName={itemImageClassName}
+              itemTitleClassName={itemTitleClassName}
+              mediaRef={(el) => { itemRefs.current[0] = el; }}
+              textRef={(el) => { itemRefs.current[1] = el; }}
+            />
+          </div>
+
+          <div className={cls("flex flex-col aspect-[9/16] md:aspect-auto", centerColumnClassName)}>
+            <div
+              ref={(el) => { itemRefs.current[2] = el; }}
+              className={cls("w-full h-full overflow-hidden", useCappedBorderRadius ? "rounded-theme-capped" : "rounded-theme", centerMediaWrapperClassName)}
+            >
+              <MediaContent
+                imageSrc={centerImageSrc}
+                videoSrc={centerVideoSrc}
+                imageAlt={centerImageAlt}
+                videoAriaLabel={centerVideoAriaLabel}
+                imageClassName={cls("w-full h-full object-cover", centerImageClassName)}
+              />
+            </div>
+          </div>
+
+          <div className={cls("flex flex-col", rightColumnClassName)}>
+            <ColumnItem
+              item={rightItem}
+              position="right"
+              shouldUseLightText={shouldUseLightText}
+              useCappedBorderRadius={useCappedBorderRadius}
+              itemMediaWrapperClassName={itemMediaWrapperClassName}
+              itemImageClassName={itemImageClassName}
+              itemTitleClassName={itemTitleClassName}
+              mediaRef={(el) => { itemRefs.current[4] = el; }}
+              textRef={(el) => { itemRefs.current[3] = el; }}
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+AboutShowcase.displayName = "AboutShowcase";
+
+export default memo(AboutShowcase);
diff --git a/src/components/sections/about/BannerGridAbout.tsx b/src/components/sections/about/BannerGridAbout.tsx
new file mode 100644
index 0000000..a12f683
--- /dev/null
+++ b/src/components/sections/about/BannerGridAbout.tsx
@@ -0,0 +1,279 @@
+"use client";
+
+import React, { memo } from "react";
+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 { CardAnimationType } 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 BannerMedia = MediaProps & {
+    title: string;
+};
+
+type GridCard = {
+    title: string;
+    description: string;
+};
+
+type BottomMedia = MediaProps;
+
+interface BannerGridAboutProps {
+    bannerMedia: BannerMedia;
+    cards: GridCard[];
+    bottomMedia: BottomMedia;
+    animationType: CardAnimationType;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    bannerCardClassName?: string;
+    bannerMediaClassName?: string;
+    bannerTitleClassName?: string;
+    gridClassName?: string;
+    cardClassName?: string;
+    cardTitleClassName?: string;
+    cardDescriptionClassName?: string;
+    bottomMediaCardClassName?: string;
+    bottomMediaClassName?: string;
+}
+
+interface GridCardItemProps {
+    card: GridCard;
+    shouldUseLightText: boolean;
+    cardClassName?: string;
+    cardTitleClassName?: string;
+    cardDescriptionClassName?: string;
+}
+
+const GridCardItem = memo(({
+    card,
+    shouldUseLightText,
+    cardClassName = "",
+    cardTitleClassName = "",
+    cardDescriptionClassName = "",
+}: GridCardItemProps) => {
+    return (
+        <div
+            className={cls(
+                "card rounded-theme-capped p-6 md:p-8 flex flex-col justify-between gap-4 aspect-video",
+                cardClassName
+            )}
+        >
+            <h3 className={cls(
+                "relative z-1 text-xl text-balance md:text-3xl font-medium truncate",
+                shouldUseLightText ? "text-background" : "text-foreground",
+                cardTitleClassName
+            )}>
+                {card.title}
+            </h3>
+            <p className={cls(
+                "relative z-1 text-base text-balance md:text-lg leading-tight line-clamp-3",
+                shouldUseLightText ? "text-background/75" : "text-foreground/75",
+                cardDescriptionClassName
+            )}>
+                {card.description}
+            </p>
+        </div>
+    );
+});
+
+GridCardItem.displayName = "GridCardItem";
+
+const BannerGridAbout = ({
+    bannerMedia,
+    cards,
+    bottomMedia,
+    animationType,
+    useInvertedBackground,
+    ariaLabel = "About section",
+    className = "",
+    containerClassName = "",
+    bannerCardClassName = "",
+    bannerMediaClassName = "",
+    bannerTitleClassName = "",
+    gridClassName = "",
+    cardClassName = "",
+    cardTitleClassName = "",
+    cardDescriptionClassName = "",
+    bottomMediaCardClassName = "",
+    bottomMediaClassName = "",
+}: BannerGridAboutProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    const cardCount = cards.length;
+    // 1 card: 3 items (hero, card, media)
+    // 2 cards: 4 items (hero, card1, media, card2)
+    // 3 cards: 5 items (hero, card1, card2, card3, media)
+    const itemCount = cardCount + 2;
+    const { itemRefs } = useCardAnimation({ animationType, itemCount });
+
+    return (
+        <section
+            aria-label={ariaLabel}
+            className={cls(
+                "relative w-full py-20",
+                useInvertedBackground === "invertCard" && "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground",
+                useInvertedBackground === "invertDefault" && "bg-foreground",
+                className
+            )}
+        >
+            <div className={cls("w-content-width mx-auto", containerClassName)}>
+                <div className="flex flex-col gap-4">
+                    {/* Banner Media Card */}
+                    <div
+                        ref={(el) => { itemRefs.current[0] = el; }}
+                        className={cls(
+                            "relative w-full aspect-video rounded-theme-capped overflow-hidden",
+                            bannerCardClassName
+                        )}
+                    >
+                        <MediaContent
+                            imageSrc={bannerMedia.imageSrc}
+                            videoSrc={bannerMedia.videoSrc}
+                            imageAlt={bannerMedia.imageAlt}
+                            videoAriaLabel={bannerMedia.videoAriaLabel}
+                            imageClassName={cls("w-full h-full object-cover", bannerMediaClassName)}
+                        />
+                        <div className="absolute inset-0 flex items-center justify-center">
+                            <h2 className={cls(
+                                "max-w-8/10 md:max-w-1/2 text-4xl md:text-6xl font-medium text-center text-balance text-background mix-blend-difference",
+                                bannerTitleClassName
+                            )}>
+                                {bannerMedia.title}
+                            </h2>
+                        </div>
+                    </div>
+
+                    {/* Bottom Grid */}
+                    <div className={cls(
+                        "grid gap-4",
+                        cardCount === 1 && "grid-cols-1 md:grid-cols-2",
+                        cardCount === 2 && "grid-cols-1 md:grid-cols-3",
+                        cardCount === 3 && "grid-cols-1 md:grid-cols-3",
+                        gridClassName
+                    )}>
+                        {/* First Card */}
+                        <div ref={(el) => { itemRefs.current[1] = el; }}>
+                            <GridCardItem
+                                card={cards[0]}
+                                shouldUseLightText={shouldUseLightText}
+                                cardClassName={cardClassName}
+                                cardTitleClassName={cardTitleClassName}
+                                cardDescriptionClassName={cardDescriptionClassName}
+                            />
+                        </div>
+
+                        {/* 1 card: Media on right */}
+                        {cardCount === 1 && (
+                            <div
+                                ref={(el) => { itemRefs.current[2] = el; }}
+                                className={cls(
+                                    "relative rounded-theme-capped overflow-hidden aspect-square md:aspect-video",
+                                    bottomMediaCardClassName
+                                )}
+                            >
+                                <MediaContent
+                                    imageSrc={bottomMedia.imageSrc}
+                                    videoSrc={bottomMedia.videoSrc}
+                                    imageAlt={bottomMedia.imageAlt}
+                                    videoAriaLabel={bottomMedia.videoAriaLabel}
+                                    imageClassName={cls("w-full h-full object-cover", bottomMediaClassName)}
+                                />
+                            </div>
+                        )}
+
+                        {/* 2 cards: Media in middle */}
+                        {cardCount === 2 && (
+                            <>
+                                <div
+                                    ref={(el) => { itemRefs.current[2] = el; }}
+                                    className={cls(
+                                        "relative rounded-theme-capped overflow-hidden aspect-square md:aspect-video order-last md:order-none",
+                                        bottomMediaCardClassName
+                                    )}
+                                >
+                                    <MediaContent
+                                        imageSrc={bottomMedia.imageSrc}
+                                        videoSrc={bottomMedia.videoSrc}
+                                        imageAlt={bottomMedia.imageAlt}
+                                        videoAriaLabel={bottomMedia.videoAriaLabel}
+                                        imageClassName={cls("w-full h-full object-cover", bottomMediaClassName)}
+                                    />
+                                </div>
+                                <div ref={(el) => { itemRefs.current[3] = el; }}>
+                                    <GridCardItem
+                                        card={cards[1]}
+                                        shouldUseLightText={shouldUseLightText}
+                                        cardClassName={cardClassName}
+                                        cardTitleClassName={cardTitleClassName}
+                                        cardDescriptionClassName={cardDescriptionClassName}
+                                    />
+                                </div>
+                            </>
+                        )}
+
+                        {/* 3 cards: Card 2, Card 3, then Media full width */}
+                        {cardCount === 3 && (
+                            <>
+                                <div ref={(el) => { itemRefs.current[2] = el; }}>
+                                    <GridCardItem
+                                        card={cards[1]}
+                                        shouldUseLightText={shouldUseLightText}
+                                        cardClassName={cardClassName}
+                                        cardTitleClassName={cardTitleClassName}
+                                        cardDescriptionClassName={cardDescriptionClassName}
+                                    />
+                                </div>
+                                <div ref={(el) => { itemRefs.current[3] = el; }}>
+                                    <GridCardItem
+                                        card={cards[2]}
+                                        shouldUseLightText={shouldUseLightText}
+                                        cardClassName={cardClassName}
+                                        cardTitleClassName={cardTitleClassName}
+                                        cardDescriptionClassName={cardDescriptionClassName}
+                                    />
+                                </div>
+                                <div
+                                    ref={(el) => { itemRefs.current[4] = el; }}
+                                    className={cls(
+                                        "relative rounded-theme-capped overflow-hidden aspect-video md:aspect-[16/3] col-span-2 md:col-span-3",
+                                        bottomMediaCardClassName
+                                    )}
+                                >
+                                    <MediaContent
+                                        imageSrc={bottomMedia.imageSrc}
+                                        videoSrc={bottomMedia.videoSrc}
+                                        imageAlt={bottomMedia.imageAlt}
+                                        videoAriaLabel={bottomMedia.videoAriaLabel}
+                                        imageClassName={cls("w-full h-full object-cover", bottomMediaClassName)}
+                                    />
+                                </div>
+                            </>
+                        )}
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+BannerGridAbout.displayName = "BannerGridAbout";
+
+export default memo(BannerGridAbout);
diff --git a/src/components/sections/about/InlineImageSplitTextAbout.tsx b/src/components/sections/about/InlineImageSplitTextAbout.tsx
new file mode 100644
index 0000000..e3a3dc5
--- /dev/null
+++ b/src/components/sections/about/InlineImageSplitTextAbout.tsx
@@ -0,0 +1,130 @@
+"use client";
+
+import React, { memo } 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 type { ButtonConfig } 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[];
+  useInvertedBackground: InvertedBackground;
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  headingClassName?: string;
+  imageWrapperClassName?: string;
+  imageClassName?: string;
+  buttonContainerClassName?: string;
+  buttonClassName?: string;
+  buttonTextClassName?: string;
+}
+
+const InlineImageSplitTextAbout = ({
+  heading,
+  buttons,
+  useInvertedBackground,
+  ariaLabel = "About section",
+  className = "",
+  containerClassName = "",
+  headingClassName = "",
+  imageWrapperClassName = "",
+  imageClassName = "",
+  buttonContainerClassName = "",
+  buttonClassName = "",
+  buttonTextClassName = "",
+}: InlineImageSplitTextAboutProps) => {
+  const theme = useTheme();
+
+  return (
+    <section
+      aria-label={ariaLabel}
+      className={cls(
+        "relative py-20",
+        useInvertedBackground === "invertCard"
+          ? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground"
+          : "w-full",
+        useInvertedBackground === "invertDefault" && "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 === "invertDefault" ||
+              useInvertedBackground === "invertCard") &&
+            "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 (
+              <React.Fragment key={index}>
+                {index > 0 && " "}
+                {element}
+              </React.Fragment>
+            );
+          })}
+        </h2>
+
+        {buttons && buttons.length > 0 && (
+          <div className={cls("flex gap-4", 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>
+    </section>
+  );
+};
+
+InlineImageSplitTextAbout.displayName = "InlineImageSplitTextAbout";
+
+export default memo(InlineImageSplitTextAbout);
diff --git a/src/components/sections/about/MediaAbout.tsx b/src/components/sections/about/MediaAbout.tsx
new file mode 100644
index 0000000..a563281
--- /dev/null
+++ b/src/components/sections/about/MediaAbout.tsx
@@ -0,0 +1,81 @@
+"use client";
+
+import { memo } from "react";
+import MediaContent from "@/components/shared/MediaContent";
+import Button from "@/components/button/Button";
+import { cls } from "@/lib/utils";
+import { getButtonProps } from "@/lib/buttonUtils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { ButtonConfig } from "@/types/button";
+
+interface MediaAboutProps {
+    imageSrc?: string;
+    videoSrc?: string;
+    imageAlt?: string;
+    videoAriaLabel?: string;
+    buttons?: ButtonConfig[];
+    useInvertedBackground: "noInvert" | "invertDefault" | "invertCard";
+    ariaLabel?: string;
+    className?: string;
+    mediaWrapperClassName?: string;
+    mediaClassName?: string;
+    buttonContainerClassName?: string;
+    buttonClassName?: string;
+    buttonTextClassName?: string;
+}
+
+const MediaAbout = ({
+    imageSrc,
+    videoSrc,
+    imageAlt,
+    videoAriaLabel,
+    buttons,
+    useInvertedBackground,
+    ariaLabel = "About section",
+    className = "",
+    mediaWrapperClassName = "",
+    mediaClassName = "",
+    buttonContainerClassName = "",
+    buttonClassName = "",
+    buttonTextClassName = "",
+}: MediaAboutProps) => {
+    const theme = useTheme();
+
+    return (
+        <section
+            aria-label={ariaLabel}
+            className={cls("relative py-20", useInvertedBackground === "invertCard" ? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground" : "w-full", useInvertedBackground === "invertDefault" && "bg-foreground", className)}
+        >
+            <div className={cls("relative w-content-width mx-auto aspect-square md:aspect-video rounded-theme-capped overflow-hidden", mediaWrapperClassName)}>
+                <MediaContent
+                    imageSrc={imageSrc}
+                    videoSrc={videoSrc}
+                    imageAlt={imageAlt}
+                    videoAriaLabel={videoAriaLabel}
+                    imageClassName={cls("w-full h-full object-cover", mediaClassName)}
+                />
+
+                {buttons && buttons.length > 0 && (
+                    <div className={cls("absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex gap-4", 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>
+        </section>
+    );
+};
+
+MediaAbout.displayName = "MediaAbout";
+
+export default memo(MediaAbout);
diff --git a/src/components/sections/about/MediaGridAbout.tsx b/src/components/sections/about/MediaGridAbout.tsx
new file mode 100644
index 0000000..ab01124
--- /dev/null
+++ b/src/components/sections/about/MediaGridAbout.tsx
@@ -0,0 +1,132 @@
+"use client";
+
+import { memo } from "react";
+import MediaContent from "@/components/shared/MediaContent";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+
+type MediaItem = {
+    imageSrc?: string;
+    videoSrc?: string;
+    imageAlt?: string;
+    videoAriaLabel?: string;
+};
+
+interface MediaGridAboutProps {
+    title: string;
+    description: string;
+    mediaItems: MediaItem[];
+    imagePosition?: "left" | "right";
+    useInvertedBackground: "noInvert" | "invertDefault" | "invertCard";
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    contentCardClassName?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
+    mediaCardClassName?: string;
+    mediaGridClassName?: string;
+    mediaClassName?: string;
+}
+
+const MediaGridAbout = ({
+    title,
+    description,
+    mediaItems,
+    imagePosition = "right",
+    useInvertedBackground,
+    ariaLabel = "About section",
+    className = "",
+    containerClassName = "",
+    contentCardClassName = "",
+    titleClassName = "",
+    descriptionClassName = "",
+    mediaCardClassName = "",
+    mediaGridClassName = "",
+    mediaClassName = "",
+}: MediaGridAboutProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    const contentCard = (
+        <div className={cls("card rounded-theme-capped p-6 md:p-10 flex flex-col justify-between gap-6", contentCardClassName)}>
+            <h2 className={cls("text-4xl md:text-5xl font-medium leading-tight text-balance", shouldUseLightText ? "text-background" : "text-foreground", titleClassName)}>
+                {title}
+            </h2>
+            <p className={cls("text-base md:text-lg leading-tight text-balance", shouldUseLightText ? "text-background/75" : "text-foreground/75", descriptionClassName)}>
+                {description}
+            </p>
+        </div>
+    );
+
+    const items = mediaItems.slice(0, 6);
+    const itemCount = items.length;
+
+    const getGridLayout = () => {
+        switch (itemCount) {
+            case 1:
+                return "grid-cols-1";
+            case 2:
+                return "grid-cols-1";
+            case 3:
+                return "grid-cols-2";
+            case 4:
+                return "grid-cols-2";
+            case 5:
+                return "grid-cols-2";
+            case 6:
+                return "grid-cols-2";
+            default:
+                return "grid-cols-1";
+        }
+    };
+
+    const getItemClassName = (index: number) => {
+        if (itemCount === 3 && index === 2) return "col-span-2";
+        if (itemCount === 5 && index === 4) return "col-span-2";
+        return "";
+    };
+
+    const mediaCard = (
+        <div className={cls("card aspect-square rounded-theme-capped overflow-hidden p-6", mediaCardClassName)}>
+            <div className={cls("relative z-1 grid h-full gap-6", getGridLayout(), mediaGridClassName)}>
+                {items.map((item, index) => (
+                    <div key={index} className={cls("relative overflow-hidden", getItemClassName(index))}>
+                        <MediaContent
+                            imageSrc={item.imageSrc}
+                            videoSrc={item.videoSrc}
+                            imageAlt={item.imageAlt}
+                            videoAriaLabel={item.videoAriaLabel}
+                            imageClassName={cls("absolute inset-0 w-full h-full object-cover", mediaClassName)}
+                        />
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+
+    return (
+        <section
+            aria-label={ariaLabel}
+            className={cls("relative py-20", useInvertedBackground === "invertCard" ? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground" : "w-full", useInvertedBackground === "invertDefault" && "bg-foreground", className)}
+        >
+            <div className={cls("w-content-width mx-auto grid grid-cols-1 md:grid-cols-2 gap-6", containerClassName)}>
+                {imagePosition === "left" ? (
+                    <>
+                        {mediaCard}
+                        {contentCard}
+                    </>
+                ) : (
+                    <>
+                        {contentCard}
+                        {mediaCard}
+                    </>
+                )}
+            </div>
+        </section>
+    );
+};
+
+MediaGridAbout.displayName = "MediaGridAbout";
+
+export default memo(MediaGridAbout);
diff --git a/src/components/sections/about/MediaSplitAbout.tsx b/src/components/sections/about/MediaSplitAbout.tsx
new file mode 100644
index 0000000..6c369bb
--- /dev/null
+++ b/src/components/sections/about/MediaSplitAbout.tsx
@@ -0,0 +1,125 @@
+"use client";
+
+import { memo } from "react";
+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 { ButtonConfig } from "@/types/button";
+
+interface MediaSplitAboutProps {
+    title: string;
+    description: string;
+    imageSrc?: string;
+    videoSrc?: string;
+    imageAlt?: string;
+    videoAriaLabel?: string;
+    buttons?: ButtonConfig[];
+    imagePosition?: "left" | "right";
+    useInvertedBackground: "noInvert" | "invertDefault" | "invertCard";
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    contentCardClassName?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
+    buttonContainerClassName?: string;
+    buttonClassName?: string;
+    buttonTextClassName?: string;
+    mediaCardClassName?: string;
+    mediaClassName?: string;
+}
+
+const MediaSplitAbout = ({
+    title,
+    description,
+    imageSrc,
+    videoSrc,
+    imageAlt,
+    videoAriaLabel,
+    buttons,
+    imagePosition = "right",
+    useInvertedBackground,
+    ariaLabel = "About section",
+    className = "",
+    containerClassName = "",
+    contentCardClassName = "",
+    titleClassName = "",
+    descriptionClassName = "",
+    buttonContainerClassName = "",
+    buttonClassName = "",
+    buttonTextClassName = "",
+    mediaCardClassName = "",
+    mediaClassName = "",
+}: MediaSplitAboutProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    const contentCard = (
+        <div className={cls("card rounded-theme-capped p-6 md:p-10 flex flex-col justify-between gap-10", contentCardClassName)}>
+            <div className="relative z-1 flex flex-col gap-4">
+                <h2 className={cls("text-4xl font-medium leading-tight", shouldUseLightText ? "text-background" : "text-foreground", titleClassName)}>
+                    {title}
+                </h2>
+                <p className={cls("text-base md:text-lg leading-tight", shouldUseLightText ? "text-background/75" : "text-foreground/75", descriptionClassName)}>
+                    {description}
+                </p>
+            </div>
+
+            {buttons && buttons.length > 0 && (
+                <div className={cls("relative z-1 flex gap-4", 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>
+    );
+
+    const mediaCard = (
+        <div className={cls("card md:aspect-square rounded-theme-capped overflow-hidden", mediaCardClassName)}>
+            <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", useInvertedBackground === "invertCard" ? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground" : "w-full", useInvertedBackground === "invertDefault" && "bg-foreground", className)}
+        >
+            <div className={cls("w-content-width mx-auto grid grid-cols-1 md:grid-cols-2 gap-6", containerClassName)}>
+                {imagePosition === "left" ? (
+                    <>
+                        {mediaCard}
+                        {contentCard}
+                    </>
+                ) : (
+                    <>
+                        {contentCard}
+                        {mediaCard}
+                    </>
+                )}
+            </div>
+        </section>
+    );
+};
+
+MediaSplitAbout.displayName = "MediaSplitAbout";
+
+export default memo(MediaSplitAbout);
diff --git a/src/components/sections/about/MediaSplitTabsAbout.tsx b/src/components/sections/about/MediaSplitTabsAbout.tsx
new file mode 100644
index 0000000..35a4248
--- /dev/null
+++ b/src/components/sections/about/MediaSplitTabsAbout.tsx
@@ -0,0 +1,163 @@
+"use client";
+
+import { memo, useState } from "react";
+import MediaContent from "@/components/shared/MediaContent";
+import AnimationContainer from "@/components/sections/AnimationContainer";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+
+interface TabOption {
+    id: string;
+    label: string;
+    description: string;
+}
+
+interface MediaSplitTabsAboutProps {
+    title: string;
+    description?: string;
+    tabs: TabOption[];
+    imageSrc?: string;
+    videoSrc?: string;
+    imageAlt?: string;
+    videoAriaLabel?: string;
+    imagePosition?: "left" | "right";
+    useInvertedBackground: "noInvert" | "invertDefault" | "invertCard";
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    contentCardClassName?: string;
+    titleClassName?: string;
+    titleDescriptionClassName?: string;
+    tabsContainerClassName?: string;
+    tabClassName?: string;
+    activeTabClassName?: string;
+    tabIndicatorClassName?: string;
+    descriptionClassName?: string;
+    mediaCardClassName?: string;
+    mediaClassName?: string;
+}
+
+const MediaSplitTabsAbout = ({
+    title,
+    description,
+    tabs,
+    imageSrc,
+    videoSrc,
+    imageAlt,
+    videoAriaLabel,
+    imagePosition = "right",
+    useInvertedBackground,
+    ariaLabel = "About section",
+    className = "",
+    containerClassName = "",
+    contentCardClassName = "",
+    titleClassName = "",
+    titleDescriptionClassName = "",
+    tabsContainerClassName = "",
+    tabClassName = "",
+    activeTabClassName = "",
+    tabIndicatorClassName = "",
+    descriptionClassName = "",
+    mediaCardClassName = "",
+    mediaClassName = "",
+}: MediaSplitTabsAboutProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+    const [activeTab, setActiveTab] = useState(tabs[0]?.id || "");
+
+    const activeTabData = tabs.find((tab) => tab.id === activeTab);
+
+    const contentCard = (
+        <div className={cls("card rounded-theme-capped p-6 md:p-10 md:h-160 2xl:h-180 flex flex-col justify-between gap-3 md:gap-6", contentCardClassName)}>
+            <div className="relative z-1 flex flex-col gap-2">
+                <h2 className={cls("text-4xl font-medium leading-tight", shouldUseLightText ? "text-background" : "text-foreground", titleClassName)}>
+                    {title}
+                </h2>
+                {description && (
+                    <p className={cls("text-base md:text-lg leading-tight", shouldUseLightText ? "text-background" : "text-foreground", titleDescriptionClassName)}>
+                        {description}
+                    </p>
+                )}
+            </div>
+
+            <div className="relative z-1 flex flex-col gap-6">
+                <div className={cls("flex flex-wrap gap-x-6 gap-y-1 md:gap-6", tabsContainerClassName)}>
+                    {tabs.map((tab) => (
+                        <button
+                            key={tab.id}
+                            type="button"
+                            onClick={() => setActiveTab(tab.id)}
+                            className={cls(
+                                "flex items-center gap-2 text-lg md:text-xl transition-colors cursor-pointer",
+                                activeTab === tab.id
+                                    ? (shouldUseLightText ? "text-background" : "text-foreground")
+                                    : (shouldUseLightText ? "text-background/50" : "text-foreground/50"),
+                                activeTab === tab.id && activeTabClassName,
+                                tabClassName
+                            )}
+                            aria-pressed={activeTab === tab.id}
+                        >
+                            <span
+                                className={cls(
+                                    "rounded-full bg-accent transition-all duration-300",
+                                    activeTab === tab.id ? "w-2 h-2" : "w-0 h-0",
+                                    tabIndicatorClassName
+                                )}
+                                aria-hidden="true"
+                            />
+                            {tab.label}
+                        </button>
+                    ))}
+                </div>
+
+                <div className="w-full h-px bg-accent" />
+
+                <AnimationContainer
+                    key={activeTab}
+                    className="w-full"
+                >
+                    <p className={cls("text-base md:text-lg leading-tight", shouldUseLightText ? "text-background" : "text-foreground", descriptionClassName)}>
+                        {activeTabData?.description}
+                    </p>
+                </AnimationContainer>
+            </div>
+        </div>
+    );
+
+    const mediaCard = (
+        <div className={cls("card aspect-square md:aspect-auto md:h-160 2xl:h-180 rounded-theme-capped overflow-hidden", mediaCardClassName)}>
+            <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", useInvertedBackground === "invertCard" ? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground" : "w-full", useInvertedBackground === "invertDefault" && "bg-foreground", className)}
+        >
+            <div className={cls("w-content-width mx-auto grid grid-cols-1 md:grid-cols-10 gap-6", containerClassName)}>
+                {imagePosition === "left" ? (
+                    <>
+                        <div className="md:col-span-4">{mediaCard}</div>
+                        <div className="md:col-span-6">{contentCard}</div>
+                    </>
+                ) : (
+                    <>
+                        <div className="md:col-span-6">{contentCard}</div>
+                        <div className="md:col-span-4">{mediaCard}</div>
+                    </>
+                )}
+            </div>
+        </section>
+    );
+};
+
+MediaSplitTabsAbout.displayName = "MediaSplitTabsAbout";
+
+export default memo(MediaSplitTabsAbout);
diff --git a/src/components/sections/about/ParallaxAbout.tsx b/src/components/sections/about/ParallaxAbout.tsx
new file mode 100644
index 0000000..3f800ef
--- /dev/null
+++ b/src/components/sections/about/ParallaxAbout.tsx
@@ -0,0 +1,82 @@
+"use client";
+
+import { memo } from "react";
+import MediaContent from "@/components/shared/MediaContent";
+import Button from "@/components/button/Button";
+import { cls } from "@/lib/utils";
+import { getButtonProps } from "@/lib/buttonUtils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { ButtonConfig } from "@/types/button";
+
+interface ParallaxAboutProps {
+    imageSrc?: string;
+    videoSrc?: string;
+    imageAlt?: string;
+    videoAriaLabel?: string;
+    buttons?: ButtonConfig[];
+    ariaLabel?: string;
+    className?: string;
+    mediaClassName?: string;
+    buttonContainerClassName?: string;
+    buttonClassName?: string;
+    buttonTextClassName?: string;
+}
+
+const ParallaxAbout = ({
+    imageSrc,
+    videoSrc,
+    imageAlt,
+    videoAriaLabel,
+    buttons,
+    ariaLabel = "About section",
+    className = "",
+    mediaClassName = "",
+    buttonContainerClassName = "",
+    buttonClassName = "",
+    buttonTextClassName = "",
+}: ParallaxAboutProps) => {
+    const theme = useTheme();
+
+    return (
+        <section
+            aria-label={ariaLabel}
+            className={cls("relative z-0 w-full h-svh", className)}
+            style={{
+                clipPath: "polygon(0% 0, 100% 0%, 100% 100%, 0 100%)",
+            }}
+        >
+            <div className="fixed inset-0 w-full h-full">
+                <MediaContent
+                    imageSrc={imageSrc}
+                    videoSrc={videoSrc}
+                    imageAlt={imageAlt}
+                    videoAriaLabel={videoAriaLabel}
+                    imageClassName={cls("w-full h-full object-cover rounded-none!", mediaClassName)}
+                />
+            </div>
+
+            {buttons && buttons.length > 0 && (
+                <div className={cls("relative z-10 flex items-center justify-center h-full", buttonContainerClassName)}>
+                    <div className="flex gap-4">
+                        {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>
+            )}
+        </section>
+    );
+};
+
+ParallaxAbout.displayName = "ParallaxAbout";
+
+export default memo(ParallaxAbout);
diff --git a/src/components/sections/about/SplitAbout.tsx b/src/components/sections/about/SplitAbout.tsx
new file mode 100644
index 0000000..c0e391b
--- /dev/null
+++ b/src/components/sections/about/SplitAbout.tsx
@@ -0,0 +1,178 @@
+"use client";
+
+import { memo, Fragment } from "react";
+import CardStackTextBox from "@/components/cardStack/CardStackTextBox";
+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 } from "@/types/button";
+import type { TitleSegment } 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;
+  buttons?: ButtonConfig[];
+  bulletPoints: BulletPoint[];
+  imageSrc?: string;
+  videoSrc?: string;
+  imageAlt?: string;
+  videoAriaLabel?: string;
+  ariaLabel?: string;
+  imagePosition?: "left" | "right";
+  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,
+  buttons,
+  bulletPoints,
+  imageSrc,
+  videoSrc,
+  imageAlt = "",
+  videoAriaLabel = "About section video",
+  ariaLabel = "About section",
+  imagePosition = "right",
+  textboxLayout,
+  useInvertedBackground,
+  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 mediaContent = (
+    <div className={cls("w-full md:w-6/10 2xl:w-7/10 overflow-hidden rounded-theme-capped card md:relative p-4", mediaWrapperClassName)}>
+      <div 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>
+    </div>
+  );
+
+  return (
+    <section
+      aria-label={ariaLabel}
+      className={cls(
+        "relative py-20",
+        useInvertedBackground === "invertCard"
+          ? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground"
+          : "w-full",
+        useInvertedBackground === "invertDefault" && "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}
+          buttons={buttons}
+          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 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-background" 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/10" />
+                  )}
+                </Fragment>
+              );
+            })}
+          </div>
+
+          {imagePosition === "right" && mediaContent}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+SplitAbout.displayName = "SplitAbout";
+
+export default memo(SplitAbout);
diff --git a/src/components/sections/about/SplitAboutCards.tsx b/src/components/sections/about/SplitAboutCards.tsx
new file mode 100644
index 0000000..e95c2ed
--- /dev/null
+++ b/src/components/sections/about/SplitAboutCards.tsx
@@ -0,0 +1,129 @@
+"use client";
+
+import React, { memo } from "react";
+import TextBox from "@/components/Textbox";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig } from "@/components/cardStack/types";
+import type { InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+interface FeatureCard {
+  id: string;
+  title: string;
+  description: string;
+  label: string;
+}
+
+interface SplitAboutCardsProps {
+  title: string;
+  description: string;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  features: FeatureCard[];
+  buttons?: ButtonConfig[];
+  useInvertedBackground: InvertedBackground;
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  textBoxClassName?: string;
+  titleClassName?: string;
+  descriptionClassName?: string;
+  tagClassName?: string;
+  buttonContainerClassName?: string;
+  buttonClassName?: string;
+  buttonTextClassName?: string;
+  featuresContainerClassName?: string;
+  featureCardClassName?: string;
+  featureTitleClassName?: string;
+  featureDescriptionClassName?: string;
+  featureLabelClassName?: string;
+}
+
+const SplitAboutCards = ({
+  title,
+  description,
+  tag,
+  tagIcon,
+  features,
+  buttons,
+  useInvertedBackground,
+  ariaLabel = "About section",
+  className = "",
+  containerClassName = "",
+  textBoxClassName = "",
+  titleClassName = "",
+  descriptionClassName = "",
+  tagClassName = "",
+  buttonContainerClassName = "",
+  buttonClassName = "",
+  buttonTextClassName = "",
+  featuresContainerClassName = "",
+  featureCardClassName = "",
+  featureTitleClassName = "",
+  featureDescriptionClassName = "",
+  featureLabelClassName = "",
+}: SplitAboutCardsProps) => {
+  const theme = useTheme();
+  const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+  const isOddCount = features.length % 2 !== 0;
+
+  return (
+    <section
+      aria-label={ariaLabel}
+      className={cls("relative py-20", useInvertedBackground === "invertCard" ? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground" : "w-full", useInvertedBackground === "invertDefault" && "bg-foreground", className)}
+    >
+      <div className={cls("w-content-width mx-auto flex flex-col gap-30", containerClassName)}>
+        <div className="flex flex-col lg:flex-row gap-6 lg:gap-15">
+          <div className="w-full lg:w-1/3">
+            <TextBox
+              title={title}
+              description={description}
+              tag={tag}
+              tagIcon={tagIcon}
+              buttons={buttons}
+              textboxLayout="default"
+              useInvertedBackground={useInvertedBackground}
+              className={cls("gap-2! md:gap-3!", textBoxClassName)}
+              titleClassName={cls("text-5xl", titleClassName)}
+              descriptionClassName={descriptionClassName}
+              tagClassName={tagClassName}
+              buttonContainerClassName={buttonContainerClassName}
+              buttonClassName={buttonClassName}
+              buttonTextClassName={buttonTextClassName}
+            />
+          </div>
+
+          <div className={cls("w-full lg:w-2/3 grid grid-cols-1 md:grid-cols-2 gap-6", featuresContainerClassName)}>
+            {features.map((feature, index) => {
+              const isLastItemOdd = isOddCount && index === features.length - 1;
+              return (
+                <div
+                  key={feature.id}
+                  className={cls("card rounded-theme-capped p-6 flex flex-col gap-10", isLastItemOdd && "md:col-span-2", featureCardClassName)}
+                >
+                <div className="relative z-1 flex flex-col gap-1">
+                  <h3 className={cls("text-2xl md:text-3xl font-medium", shouldUseLightText ? "text-background" : "text-foreground", featureTitleClassName)}>
+                    {feature.title}
+                  </h3>
+                  <p className={cls("text-base leading-tight", shouldUseLightText ? "text-background/75" : "text-foreground/75", featureDescriptionClassName)}>
+                    {feature.description}
+                  </p>
+                </div>
+
+                <p className={cls("relative z-1 text-xl md:text-2xl font-medium", shouldUseLightText ? "text-background" : "text-foreground", featureLabelClassName)}>
+                  {feature.label}
+                </p>
+              </div>
+            );
+            })}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+SplitAboutCards.displayName = "SplitAboutCards";
+
+export default memo(SplitAboutCards);
diff --git a/src/components/sections/about/SplitAboutFeatures.tsx b/src/components/sections/about/SplitAboutFeatures.tsx
new file mode 100644
index 0000000..0f8dd7b
--- /dev/null
+++ b/src/components/sections/about/SplitAboutFeatures.tsx
@@ -0,0 +1,94 @@
+"use client";
+
+import React, { memo } from "react";
+import TextAnimation from "@/components/text/TextAnimation";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { LucideIcon } from "lucide-react";
+
+interface FeatureItem {
+  text: string;
+  icon: LucideIcon;
+}
+
+interface SplitAboutFeaturesProps {
+  title: string;
+  features: FeatureItem[];
+  showBorder?: boolean;
+  useInvertedBackground: "noInvert" | "invertDefault" | "invertCard";
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  titleClassName?: string;
+  featuresContainerClassName?: string;
+  featureClassName?: string;
+  featureIconClassName?: string;
+  featureTextClassName?: string;
+}
+
+const SplitAboutFeatures = ({
+  title,
+  features,
+  showBorder = false,
+  useInvertedBackground,
+  ariaLabel = "About features section",
+  className = "",
+  containerClassName = "",
+  titleClassName = "",
+  featuresContainerClassName = "",
+  featureClassName = "",
+  featureIconClassName = "",
+  featureTextClassName = "",
+}: SplitAboutFeaturesProps) => {
+  const theme = useTheme();
+  const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+  const isOddCount = features.length % 2 !== 0;
+
+  return (
+    <section
+      aria-label={ariaLabel}
+      className={cls("relative py-20", useInvertedBackground === "invertCard" ? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground" : "w-full", useInvertedBackground === "invertDefault" && "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 === "invertDefault" || useInvertedBackground === "invertCard") && "text-background", titleClassName)}
+            />
+          </div>
+
+          <div className={cls("relative w-full md:w-1/2 grid grid-cols-2 gap-6", featuresContainerClassName)}>
+            {features.map((feature, index) => {
+              const Icon = feature.icon;
+              const isLastItemOdd = isOddCount && index === features.length - 1;
+              return (
+                <div
+                  key={index}
+                  className={cls("relative card rounded-theme-capped w-full flex items-center gap-3 p-8", isLastItemOdd && "col-span-2", featureClassName)}
+                >
+                  <div className="relative z-1 h-8 w-auto aspect-square rounded-theme primary-button flex items-center justify-center" >
+                    <Icon
+                      className={cls("h-45/100 w-45/100 text-background", featureIconClassName)}
+                      aria-hidden="true"
+                    />
+                  </div>
+                  <p className={cls("relative z-1 text-base leading-tight", shouldUseLightText ? "text-background/75" : "text-foreground/75", featureTextClassName)}>
+                    {feature.text}
+                  </p>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+        {showBorder && <div className="w-full border-b border-foreground/10" />}
+      </div>
+    </section>
+  );
+};
+
+SplitAboutFeatures.displayName = "SplitAboutFeatures";
+
+export default memo(SplitAboutFeatures);
diff --git a/src/components/sections/about/SplitAboutMetric.tsx b/src/components/sections/about/SplitAboutMetric.tsx
new file mode 100644
index 0000000..fe7502d
--- /dev/null
+++ b/src/components/sections/about/SplitAboutMetric.tsx
@@ -0,0 +1,102 @@
+"use client";
+
+import React, { memo } from "react";
+import TextAnimation from "@/components/text/TextAnimation";
+import { cls } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+
+interface Metric {
+  label: string;
+  value: string;
+}
+
+interface SplitAboutMetricProps {
+  title: string;
+  description: string[];
+  metrics: [Metric, Metric];
+  showBorder?: boolean;
+  useInvertedBackground: "noInvert" | "invertDefault" | "invertCard";
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  titleClassName?: string;
+  descriptionClassName?: string;
+  metricsContainerClassName?: string;
+  metricClassName?: string;
+  metricValueClassName?: string;
+  metricLabelClassName?: string;
+}
+
+const SplitAboutMetric = ({
+  title,
+  description,
+  metrics,
+  showBorder = false,
+  useInvertedBackground,
+  ariaLabel = "About metrics section",
+  className = "",
+  containerClassName = "",
+  titleClassName = "",
+  descriptionClassName = "",
+  metricsContainerClassName = "",
+  metricClassName = "",
+  metricValueClassName = "",
+  metricLabelClassName = "",
+}: SplitAboutMetricProps) => {
+  const theme = useTheme();
+
+  return (
+    <section
+      aria-label={ariaLabel}
+      className={cls("relative py-20", useInvertedBackground === "invertCard" ? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground" : "w-full", useInvertedBackground === "invertDefault" && "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 === "invertDefault" || useInvertedBackground === "invertCard") && "text-background", titleClassName)}
+            />
+          </div>
+
+          <div className="w-full md:w-1/2 flex flex-col gap-12">
+            {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 === "invertDefault" || useInvertedBackground === "invertCard") ? "text-background/75" : "text-foreground/75", descriptionClassName)}
+              />
+            ))}
+
+            <div className="relative w-full border-b border-accent/50" />
+
+            <div className={cls("relative grid grid-cols-2 gap-8 md:gap-12", metricsContainerClassName)}>
+              {metrics.map((metric, index) => (
+                <div
+                  key={index}
+                  className={cls("w-full flex flex-col items-center text-center gap-0", metricClassName)}
+                >
+                  <h3 className={cls("w-full text-9xl font-medium leading-[1.0] truncate", (useInvertedBackground === "invertDefault" || useInvertedBackground === "invertCard") && "text-background", metricValueClassName)}>
+                    {metric.value}
+                  </h3>
+                  <p className={cls("text-sm truncate", (useInvertedBackground === "invertDefault" || useInvertedBackground === "invertCard") ? "text-background/80" : "text-foreground/80", metricLabelClassName)}>
+                    {metric.label}
+                  </p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+        {showBorder && <div className="w-full border-b border-foreground/10" />}
+      </div>
+    </section>
+  );
+};
+
+SplitAboutMetric.displayName = "SplitAboutMetric";
+
+export default memo(SplitAboutMetric);
diff --git a/src/components/sections/about/TagAbout.tsx b/src/components/sections/about/TagAbout.tsx
new file mode 100644
index 0000000..8419d22
--- /dev/null
+++ b/src/components/sections/about/TagAbout.tsx
@@ -0,0 +1,54 @@
+"use client";
+
+import React, { memo } from "react";
+import TextAnimation from "@/components/text/TextAnimation";
+import { cls } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+
+interface TagAboutProps {
+  tag: string;
+  description: string;
+  useInvertedBackground: "noInvert" | "invertDefault" | "invertCard";
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  tagClassName?: string;
+  descriptionClassName?: string;
+}
+
+const TagAbout = ({
+  tag,
+  description,
+  useInvertedBackground,
+  ariaLabel = "About section",
+  className = "",
+  containerClassName = "",
+  tagClassName = "",
+  descriptionClassName = "",
+}: TagAboutProps) => {
+  const theme = useTheme();
+
+  return (
+    <section
+      aria-label={ariaLabel}
+      className={cls("relative py-20", useInvertedBackground === "invertCard" ? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground" : "w-full", useInvertedBackground === "invertDefault" && "bg-foreground", className)}
+    >
+      <div className={cls("w-content-width mx-auto relative overflow-hidden", containerClassName)}>
+        <p className={cls("inline-block mr-15 text-base md:text-xl text-accent", tagClassName)}>
+          {tag}
+        </p>
+        <TextAnimation
+          type={theme.defaultTextAnimation}
+          text={description}
+          variant="words-trigger"
+          as="span"
+          className={cls(" !inline text-2xl md:text-5xl font-medium leading-[1.15]", (useInvertedBackground === "invertDefault" || useInvertedBackground === "invertCard") && "text-background", descriptionClassName)}
+        />
+      </div>
+    </section>
+  );
+};
+
+TagAbout.displayName = "TagAbout";
+
+export default memo(TagAbout);
diff --git a/src/components/sections/about/TagAboutCard.tsx b/src/components/sections/about/TagAboutCard.tsx
new file mode 100644
index 0000000..a6f720e
--- /dev/null
+++ b/src/components/sections/about/TagAboutCard.tsx
@@ -0,0 +1,105 @@
+"use client";
+
+import React, { memo } from "react";
+import Tag from "@/components/shared/Tag";
+import TextAnimation from "@/components/text/TextAnimation";
+import { cls } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { LucideIcon } from "lucide-react";
+import type { InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+interface TagAboutCardProps {
+    tag: string;
+    tagIcon?: LucideIcon;
+    title: string;
+    paragraphs: string[];
+    icon: LucideIcon;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    cardClassName?: string;
+    tagClassName?: string;
+    titleClassName?: string;
+    paragraphsContainerClassName?: string;
+    paragraphClassName?: string;
+    iconBoxClassName?: string;
+    iconClassName?: string;
+}
+
+const TagAboutCard = ({
+    tag,
+    tagIcon,
+    title,
+    paragraphs,
+    icon: Icon,
+    useInvertedBackground,
+    ariaLabel = "About section",
+    className = "",
+    containerClassName = "",
+    cardClassName = "",
+    tagClassName = "",
+    titleClassName = "",
+    paragraphsContainerClassName = "",
+    paragraphClassName = "",
+    iconBoxClassName = "",
+    iconClassName = "",
+}: TagAboutCardProps) => {
+    const theme = useTheme();
+
+    return (
+        <section
+            aria-label={ariaLabel}
+            className={cls(
+                "relative py-20",
+                useInvertedBackground === "invertCard"
+                    ? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground"
+                    : "w-full",
+                useInvertedBackground === "invertDefault" && "bg-foreground",
+                className
+            )}
+        >
+            <div className={cls("w-content-width md:w-40 mx-auto", containerClassName)}>
+                <div className={cls("relative card rounded-theme-capped p-8 md:p-12", cardClassName)}>
+                    <div className={cls(
+                        "absolute! -top-7 -right-7 md:-top-8 md:-right-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-background", iconClassName)} strokeWidth={1.5} />
+                    </div>
+
+                    <div className="flex flex-col gap-6">
+                        <Tag
+                            text={tag}
+                            icon={tagIcon}
+                            className={tagClassName}
+                        />
+
+                        <TextAnimation
+                            text={title}
+                            type={theme.defaultTextAnimation}
+                            variant="words-trigger"
+                            as="h2"
+                            className={cls("text-4xl md:text-5xl font-medium text-balance text-foreground", titleClassName)}
+                        />
+
+                        <div className={cls("flex flex-col gap-3", paragraphsContainerClassName)}>
+                            {paragraphs.map((paragraph, index) => (
+                                <p
+                                    key={index}
+                                    className={cls("text-base text-foreground/75 leading-tight", paragraphClassName)}
+                                >
+                                    {paragraph}
+                                </p>
+                            ))}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+TagAboutCard.displayName = "TagAboutCard";
+
+export default memo(TagAboutCard);
diff --git a/src/components/sections/about/TagMediaSplitAbout.tsx b/src/components/sections/about/TagMediaSplitAbout.tsx
new file mode 100644
index 0000000..1443042
--- /dev/null
+++ b/src/components/sections/about/TagMediaSplitAbout.tsx
@@ -0,0 +1,238 @@
+"use client";
+
+import { memo } from "react";
+import MediaContent from "@/components/shared/MediaContent";
+import Tag from "@/components/shared/Tag";
+import Button from "@/components/button/Button";
+import CardStackTextBox from "@/components/cardStack/CardStackTextBox";
+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, TitleSegment } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+interface TagMediaSplitAboutProps {
+    variant: "card" | "border";
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    buttons?: ButtonConfig[];
+    textboxLayout: TextboxLayout;
+    contentTag: string;
+    contentTagIcon?: LucideIcon;
+    contentTitle: string;
+    contentDescription: string;
+    contentButtons?: ButtonConfig[];
+    imageSrc?: string;
+    videoSrc?: string;
+    imageAlt?: string;
+    videoAriaLabel?: string;
+    imagePosition?: "left" | "right";
+    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;
+    contentCardClassName?: string;
+    contentTagClassName?: string;
+    contentTitleClassName?: string;
+    contentDescriptionClassName?: string;
+    contentButtonContainerClassName?: string;
+    contentButtonClassName?: string;
+    contentButtonTextClassName?: string;
+    mediaCardClassName?: string;
+    mediaClassName?: string;
+}
+
+const TagMediaSplitAbout = ({
+    variant,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    buttons,
+    textboxLayout,
+    contentTag,
+    contentTagIcon,
+    contentTitle,
+    contentDescription,
+    contentButtons,
+    imageSrc,
+    videoSrc,
+    imageAlt,
+    videoAriaLabel,
+    imagePosition = "right",
+    useInvertedBackground,
+    ariaLabel = "About section",
+    className = "",
+    containerClassName = "",
+    textBoxTitleClassName = "",
+    textBoxDescriptionClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+    titleImageWrapperClassName = "",
+    titleImageClassName = "",
+    contentClassName = "",
+    contentCardClassName = "",
+    contentTagClassName = "",
+    contentTitleClassName = "",
+    contentDescriptionClassName = "",
+    contentButtonContainerClassName = "",
+    contentButtonClassName = "",
+    contentButtonTextClassName = "",
+    mediaCardClassName = "",
+    mediaClassName = "",
+}: TagMediaSplitAboutProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    const contentCard = (
+        <div className={cls(
+            "flex flex-col justify-between gap-6",
+            variant === "card" && "card rounded-theme-capped p-6 md:p-10",
+            contentCardClassName
+        )}>
+            <Tag
+                text={contentTag}
+                icon={contentTagIcon}
+                useInvertedBackground={variant === "card" ? useInvertedBackground : undefined}
+                className={contentTagClassName}
+            />
+            <div className="relative z-1 flex flex-col gap-4">
+                <h2 className={cls(
+                    "text-4xl font-medium leading-tight",
+                    variant === "card"
+                        ? (shouldUseLightText ? "text-background" : "text-foreground")
+                        : (useInvertedBackground !== "noInvert" ? "text-background" : "text-foreground"),
+                    contentTitleClassName
+                )}>
+                    {contentTitle}
+                </h2>
+                <p className={cls(
+                    "text-base md:text-lg leading-tight",
+                    variant === "card"
+                        ? (shouldUseLightText ? "text-background/75" : "text-foreground/75")
+                        : (useInvertedBackground !== "noInvert" ? "text-background/75" : "text-foreground/75"),
+                    contentDescriptionClassName
+                )}>
+                    {contentDescription}
+                </p>
+                {contentButtons && contentButtons.length > 0 && (
+                    <div className={cls("relative z-1 flex gap-4", contentButtonContainerClassName)}>
+                        {contentButtons.slice(0, 2).map((button, index) => (
+                            <Button
+                                key={`${button.text}-${index}`}
+                                {...getButtonProps(button, index, theme.defaultButtonVariant, contentButtonClassName, contentButtonTextClassName)}
+                            />
+                        ))}
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+
+    const mediaCard = (
+        <div className={cls("card rounded-theme-capped overflow-hidden", mediaCardClassName)}>
+            <MediaContent
+                imageSrc={imageSrc}
+                videoSrc={videoSrc}
+                imageAlt={imageAlt}
+                videoAriaLabel={videoAriaLabel}
+                imageClassName={cls("relative z-1 w-full h-full md:aspect-square object-cover", mediaClassName)}
+            />
+        </div>
+    );
+
+    return (
+        <section
+            aria-label={ariaLabel}
+            className={cls(
+                "relative py-20",
+                useInvertedBackground === "invertCard"
+                    ? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground"
+                    : "w-full",
+                useInvertedBackground === "invertDefault" && "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}
+                    buttons={buttons}
+                    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",
+                    variant === "border" ? "md:grid-cols-[1fr_1px_1fr] md:gap-10" : "md:grid-cols-2",
+                    contentClassName
+                )}>
+                    {variant === "border" && (
+                        <div className={cls(
+                            "w-full h-px md:hidden",
+                            useInvertedBackground !== "noInvert" ? "bg-background/20" : "bg-foreground/20"
+                        )} />
+                    )}
+
+                    {imagePosition === "left" ? (
+                        <>
+                            {mediaCard}
+                            {variant === "border" && (
+                                <div className={cls(
+                                    "w-full h-px md:w-px md:h-auto md:self-stretch",
+                                    useInvertedBackground !== "noInvert" ? "bg-background/20" : "bg-foreground/20"
+                                )} />
+                            )}
+                            {contentCard}
+                        </>
+                    ) : (
+                        <>
+                            {contentCard}
+                            {variant === "border" && (
+                                <div className={cls(
+                                    "w-full h-px md:w-px md:h-auto md:self-stretch",
+                                    useInvertedBackground !== "noInvert" ? "bg-background/20" : "bg-foreground/20"
+                                )} />
+                            )}
+                            {mediaCard}
+                        </>
+                    )}
+                </div>
+            </div>
+        </section>
+    );
+};
+
+TagMediaSplitAbout.displayName = "TagMediaSplitAbout";
+
+export default memo(TagMediaSplitAbout);
diff --git a/src/components/sections/about/TestimonialAboutCard.tsx b/src/components/sections/about/TestimonialAboutCard.tsx
new file mode 100644
index 0000000..d39e0d7
--- /dev/null
+++ b/src/components/sections/about/TestimonialAboutCard.tsx
@@ -0,0 +1,135 @@
+"use client";
+
+import React, { memo } from "react";
+import MediaContent from "@/components/shared/MediaContent";
+import Tag from "@/components/shared/Tag";
+import { cls } from "@/lib/utils";
+import type { LucideIcon } from "lucide-react";
+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 TestimonialAboutCardProps = MediaProps & {
+    tag: string;
+    tagIcon?: LucideIcon;
+    title: string;
+    description: string;
+    subdescription: string;
+    icon: LucideIcon;
+    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,
+    title,
+    description,
+    subdescription,
+    icon: Icon,
+    imageSrc,
+    videoSrc,
+    imageAlt = "",
+    videoAriaLabel = "Testimonial video",
+    useInvertedBackground,
+    ariaLabel = "Testimonial section",
+    className = "",
+    containerClassName = "",
+    cardClassName = "",
+    contentClassName = "",
+    tagClassName = "",
+    titleClassName = "",
+    descriptionClassName = "",
+    subdescriptionClassName = "",
+    footerClassName = "",
+    iconBoxClassName = "",
+    iconClassName = "",
+    mediaWrapperClassName = "",
+    mediaClassName = "",
+}: TestimonialAboutCardProps) => {
+    return (
+        <section
+            aria-label={ariaLabel}
+            className={cls(
+                "relative py-20",
+                useInvertedBackground === "invertCard"
+                    ? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground"
+                    : "w-full",
+                useInvertedBackground === "invertDefault" && "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:p-12", 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-background", 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)}>
+                        <Tag
+                            text={tag}
+                            icon={tagIcon}
+                            className={cls("mb-1", tagClassName)}
+                        />
+
+                        <h2 className={cls("text-3xl md:text-4xl font-medium text-foreground leading-tight", titleClassName)}>
+                            {title}
+                        </h2>
+
+                        <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 className={cls("md:col-span-2 card aspect-square 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>
+    );
+};
+
+TestimonialAboutCard.displayName = "TestimonialAboutCard";
+
+export default memo(TestimonialAboutCard);
diff --git a/src/components/sections/about/TextAbout.tsx b/src/components/sections/about/TextAbout.tsx
new file mode 100644
index 0000000..07b7b2d
--- /dev/null
+++ b/src/components/sections/about/TextAbout.tsx
@@ -0,0 +1,65 @@
+"use client";
+
+import React, { memo } from "react";
+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 type { ButtonConfig } from "@/types/button";
+
+interface TextAboutProps {
+  title: string;
+  buttons?: ButtonConfig[];
+  useInvertedBackground: "noInvert" | "invertDefault" | "invertCard";
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  titleClassName?: string;
+  buttonContainerClassName?: string;
+  buttonClassName?: string;
+  buttonTextClassName?: string;
+}
+
+const TextAbout = ({
+  title,
+  buttons,
+  useInvertedBackground,
+  ariaLabel = "About section",
+  className = "",
+  containerClassName = "",
+  titleClassName = "",
+  buttonContainerClassName = "",
+  buttonClassName = "",
+  buttonTextClassName = "",
+}: TextAboutProps) => {
+  const theme = useTheme();
+
+  return (
+    <section
+      aria-label={ariaLabel}
+      className={cls("relative py-20", useInvertedBackground === "invertCard" ? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground" : "w-full", useInvertedBackground === "invertDefault" && "bg-foreground", className)}
+    >
+      <div className={cls("w-content-width mx-auto flex flex-col gap-6 items-center", containerClassName)}>
+        <TextAnimation
+          type={theme.defaultTextAnimation}
+          text={title}
+          variant="words-trigger"
+          className={cls("text-2xl md:text-5xl font-medium text-center leading-[1.175]", (useInvertedBackground === "invertDefault" || useInvertedBackground === "invertCard") && "text-background", titleClassName)}
+        />
+
+        {buttons && buttons.length > 0 && (
+          <div className={cls("flex gap-4", 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>
+    </section>
+  );
+};
+
+TextAbout.displayName = "TextAbout";
+
+export default memo(TextAbout);
diff --git a/src/components/sections/about/TextSplitAbout.tsx b/src/components/sections/about/TextSplitAbout.tsx
new file mode 100644
index 0000000..87505c7
--- /dev/null
+++ b/src/components/sections/about/TextSplitAbout.tsx
@@ -0,0 +1,88 @@
+"use client";
+
+import React, { memo } from "react";
+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 type { ButtonConfig } from "@/types/button";
+
+interface TextSplitAboutProps {
+  title: string;
+  description: string[];
+  buttons?: ButtonConfig[];
+  showBorder?: boolean;
+  useInvertedBackground: "noInvert" | "invertDefault" | "invertCard";
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  titleClassName?: string;
+  descriptionClassName?: string;
+  buttonContainerClassName?: string;
+  buttonClassName?: string;
+  buttonTextClassName?: string;
+}
+
+const TextSplitAbout = ({
+  title,
+  description,
+  buttons,
+  showBorder = false,
+  useInvertedBackground,
+  ariaLabel = "About section",
+  className = "",
+  containerClassName = "",
+  titleClassName = "",
+  descriptionClassName = "",
+  buttonContainerClassName = "",
+  buttonClassName = "",
+  buttonTextClassName = "",
+}: TextSplitAboutProps) => {
+  const theme = useTheme();
+
+  return (
+    <section
+      aria-label={ariaLabel}
+      className={cls("relative py-20", useInvertedBackground === "invertCard" ? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground" : "w-full", useInvertedBackground === "invertDefault" && "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 === "invertDefault" || useInvertedBackground === "invertCard") && "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 === "invertDefault" || useInvertedBackground === "invertCard") ? "text-background/75" : "text-foreground/75", descriptionClassName)}
+              />
+            ))}
+
+            {buttons && buttons.length > 0 && (
+              <div className={cls("flex gap-4", 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>
+  );
+};
+
+TextSplitAbout.displayName = "TextSplitAbout";
+
+export default memo(TextSplitAbout);
diff --git a/src/components/sections/blog/BlogCardEight.tsx b/src/components/sections/blog/BlogCardEight.tsx
new file mode 100644
index 0000000..3d7e0ac
--- /dev/null
+++ b/src/components/sections/blog/BlogCardEight.tsx
@@ -0,0 +1,213 @@
+"use client";
+
+import React, { memo } from "react";
+import CardStack from "@/components/cardStack/CardStack";
+import Tag from "@/components/shared/Tag";
+import MediaContent from "@/components/shared/MediaContent";
+import { cls } from "@/lib/utils";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, CardAnimationType, ContainerStyle, 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 BlogCard = MediaProps & {
+    id: string;
+    category: string;
+    title: string;
+    tags: string[];
+    onBlogClick?: () => void;
+};
+
+interface BlogCardEightProps {
+    blogs: BlogCard[];
+    carouselMode?: "auto" | "buttons";
+    uniformGridCustomHeightClasses?: string;
+    animationType: CardAnimationType;
+    containerStyle: ContainerStyle;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    buttons?: ButtonConfig[];
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    cardClassName?: string;
+    mediaWrapperClassName?: string;
+    mediaClassName?: string;
+    cardTitleClassName?: string;
+    footerClassName?: string;
+    tagClassName?: 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;
+    cardClassName?: string;
+    mediaWrapperClassName?: string;
+    mediaClassName?: string;
+    cardTitleClassName?: string;
+    footerClassName?: string;
+    tagClassName?: string;
+}
+
+const BlogCardItem = memo(({
+    blog,
+    cardClassName = "",
+    mediaWrapperClassName = "",
+    mediaClassName = "",
+    cardTitleClassName = "",
+    footerClassName = "",
+    tagClassName = "",
+}: 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}
+        >
+
+            <div className="relative h-full primary-button flex flex-col gap-4 p-4 rounded-theme-capped">
+                <span className="text-base text-background/75 leading-tight truncate">
+                    {blog.category}
+                </span>
+                <div className={cls("relative z-1 w-full aspect-square md:aspect-[3/4] overflow-hidden rounded-theme-capped", mediaWrapperClassName)}>
+                    <MediaContent
+                        imageSrc={blog.imageSrc}
+                        videoSrc={blog.videoSrc}
+                        imageAlt={blog.imageAlt}
+                        videoAriaLabel={blog.videoAriaLabel}
+                        imageClassName={cls("w-full h-full object-cover", mediaClassName)}
+                    />
+                </div>
+
+                <h3 className={cls("text-2xl font-medium leading-tight text-background line-clamp-2", cardTitleClassName)}>
+                    {blog.title}
+                </h3>
+            </div>
+
+            <div className={cls("flex flex-wrap gap-2 mt-auto", footerClassName)}>
+                {blog.tags.map((tag, index) => (
+                    <Tag key={index} text={tag} className={tagClassName} />
+                ))}
+            </div>
+        </article>
+    );
+});
+
+BlogCardItem.displayName = "BlogCardItem";
+
+const BlogCardEight = ({
+    blogs,
+    carouselMode = "buttons",
+    uniformGridCustomHeightClasses,
+    animationType,
+    containerStyle,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    buttons,
+    textboxLayout,
+    useInvertedBackground,
+    ariaLabel = "Blog section",
+    className = "",
+    containerClassName = "",
+    cardClassName = "",
+    mediaWrapperClassName = "",
+    mediaClassName = "",
+    cardTitleClassName = "",
+    footerClassName = "",
+    tagClassName = "",
+    textBoxTitleClassName = "",
+    textBoxTitleImageWrapperClassName = "",
+    textBoxTitleImageClassName = "",
+    textBoxDescriptionClassName = "",
+    gridClassName = "",
+    carouselClassName = "",
+    controlsClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+}: BlogCardEightProps) => {
+    return (
+        <CardStack
+            mode={carouselMode}
+            gridVariant="uniform-all-items-equal"
+            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+            animationType={animationType}
+            containerStyle={containerStyle}
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            buttons={buttons}
+            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}
+                    cardClassName={cardClassName}
+                    mediaWrapperClassName={mediaWrapperClassName}
+                    mediaClassName={mediaClassName}
+                    cardTitleClassName={cardTitleClassName}
+                    footerClassName={footerClassName}
+                    tagClassName={tagClassName}
+                />
+            ))}
+        </CardStack>
+    );
+};
+
+BlogCardEight.displayName = "BlogCardEight";
+
+export default memo(BlogCardEight);
diff --git a/src/components/sections/blog/BlogCardEleven.tsx b/src/components/sections/blog/BlogCardEleven.tsx
new file mode 100644
index 0000000..c8f068c
--- /dev/null
+++ b/src/components/sections/blog/BlogCardEleven.tsx
@@ -0,0 +1,204 @@
+"use client";
+
+import React, { memo } from "react";
+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, 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 BlogCard = MediaProps & {
+    id: string;
+    title: string;
+    author: string;
+    description: string;
+    tags: string[];
+    onBlogClick?: () => void;
+};
+
+interface BlogCardElevenProps {
+    blogs: BlogCard[];
+    animationType: CardAnimationType;
+    variant: "card" | "border";
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    buttons?: ButtonConfig[];
+    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 BlogCardEleven = ({
+    blogs,
+    animationType,
+    variant,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    buttons,
+    textboxLayout,
+    useInvertedBackground,
+    ariaLabel = "Blog section",
+    className = "",
+    containerClassName = "",
+    cardClassName = "",
+    textBoxTitleClassName = "",
+    textBoxDescriptionClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+    titleImageWrapperClassName = "",
+    titleImageClassName = "",
+    cardContentClassName = "",
+    cardTitleClassName = "",
+    authorClassName = "",
+    cardDescriptionClassName = "",
+    tagsContainerClassName = "",
+    tagClassName = "",
+    mediaWrapperClassName = "",
+    mediaClassName = "",
+}: BlogCardElevenProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    return (
+        <CardList
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            buttons={buttons}
+            textboxLayout={textboxLayout}
+            animationType={animationType}
+            variant={variant}
+            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}
+        >
+            {blogs.map((blog) => (
+                <article
+                    key={blog.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",
+                        variant === "card" ? "p-6 md:p-10" : "py-6 md:py-10",
+                        cardContentClassName
+                    )}
+                    onClick={blog.onBlogClick}
+                    role="article"
+                    aria-label={blog.title}
+                >
+                    <div className="relative z-1 w-full md:col-span-6 flex flex-col gap-8 md:gap-12">
+                        <h3 className={cls(
+                            "text-3xl md:text-5xl text-balance font-medium leading-tight line-clamp-3",
+                            variant === "border"
+                                ? (useInvertedBackground !== "noInvert" ? "text-background" : "text-foreground")
+                                : (shouldUseLightText ? "text-background" : "text-foreground"),
+                            cardTitleClassName
+                        )}>
+                            {blog.title}{" "}
+                            <span className={cls(
+                                variant === "border"
+                                    ? (useInvertedBackground !== "noInvert" ? "text-background/50" : "text-foreground/50")
+                                    : (shouldUseLightText ? "text-background/50" : "text-foreground/50"),
+                                authorClassName
+                            )}>
+                                by {blog.author}
+                            </span>
+                        </h3>
+
+                        <div className="mt-auto flex flex-col gap-4">
+                            <div className={cls("flex flex-wrap gap-2", tagsContainerClassName)}>
+                                {blog.tags.map((tagText, index) => (
+                                    <Tag key={index} text={tagText} className={tagClassName} />
+                                ))}
+                            </div>
+
+                            <p className={cls(
+                                "text-base md:text-2xl text-balance leading-tight line-clamp-2",
+                                variant === "border"
+                                    ? (useInvertedBackground !== "noInvert" ? "text-background" : "text-foreground")
+                                    : (shouldUseLightText ? "text-background" : "text-foreground"),
+                                cardDescriptionClassName
+                            )}>
+                                {blog.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={blog.imageSrc}
+                            videoSrc={blog.videoSrc}
+                            imageAlt={blog.imageAlt}
+                            videoAriaLabel={blog.videoAriaLabel}
+                            imageClassName={cls("w-full h-full object-cover", mediaClassName)}
+                        />
+                    </div>
+                </article>
+            ))}
+        </CardList>
+    );
+};
+
+BlogCardEleven.displayName = "BlogCardEleven";
+
+export default memo(BlogCardEleven);
diff --git a/src/components/sections/blog/BlogCardFive.tsx b/src/components/sections/blog/BlogCardFive.tsx
new file mode 100644
index 0000000..b1425d0
--- /dev/null
+++ b/src/components/sections/blog/BlogCardFive.tsx
@@ -0,0 +1,175 @@
+"use client";
+
+import React, { memo } from "react";
+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 } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type BlogPost = {
+  id: string;
+  title: string;
+  items: string[];
+  imageSrc?: string;
+  videoSrc?: string;
+  imageAlt?: string;
+  videoAriaLabel?: string;
+};
+
+interface BlogCardFiveProps {
+  blogs: BlogPost[];
+  animationType: CardAnimationType;
+  variant: "card" | "plain";
+  title: string;
+  titleSegments?: TitleSegment[];
+  description: string;
+  textboxLayout: TextboxLayout;
+  useInvertedBackground: InvertedBackground;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  buttons?: ButtonConfig[];
+  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;
+  cardContentClassName?: string;
+  cardTitleClassName?: string;
+  itemsContainerClassName?: string;
+  itemTextClassName?: string;
+  mediaWrapperClassName?: string;
+  mediaClassName?: string;
+}
+
+const BlogCardFive = ({
+  blogs,
+  animationType,
+  variant,
+  title,
+  titleSegments,
+  description,
+  textboxLayout,
+  useInvertedBackground,
+  tag,
+  tagIcon,
+  buttons,
+  ariaLabel = "Blog section",
+  className = "",
+  containerClassName = "",
+  textBoxTitleClassName = "",
+  titleImageWrapperClassName = "",
+  titleImageClassName = "",
+  textBoxDescriptionClassName = "",
+  textBoxClassName = "",
+  textBoxTagClassName = "",
+  textBoxButtonContainerClassName = "",
+  textBoxButtonClassName = "",
+  textBoxButtonTextClassName = "",
+  gridClassName = "",
+  cardClassName = "",
+  cardContentClassName = "",
+  cardTitleClassName = "",
+  itemsContainerClassName = "",
+  itemTextClassName = "",
+  mediaWrapperClassName = "",
+  mediaClassName = "",
+}: BlogCardFiveProps) => {
+  const theme = useTheme();
+  const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+  const { itemRefs } = useCardAnimation({ animationType, itemCount: blogs.length });
+
+  return (
+    <section
+      aria-label={ariaLabel}
+      className={cls("relative py-20", useInvertedBackground === "invertCard" ? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground" : "w-full", useInvertedBackground === "invertDefault" && "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}
+          buttons={buttons}
+          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-2 gap-8", variant === "card" && "card rounded-theme-capped p-5 md:p-8", gridClassName)}>
+          {blogs.map((blog, index) => (
+            <article
+              key={blog.id}
+              ref={(el) => { itemRefs.current[index] = el; }}
+              className={cls("relative h-full flex flex-col md:flex-row md:items-center gap-4 md:gap-8 cursor-pointer", cardClassName)}
+            >
+              <div className={cls("relative z-1 w-full md:h-50 md:w-auto aspect-square rounded-theme-capped overflow-hidden shrink-0", mediaWrapperClassName)}>
+                <MediaContent
+                  imageSrc={blog.imageSrc}
+                  videoSrc={blog.videoSrc}
+                  imageAlt={blog.imageAlt || blog.title}
+                  videoAriaLabel={blog.videoAriaLabel || blog.title}
+                  imageClassName={cls("w-full h-full object-cover", mediaClassName)}
+                />
+              </div>
+              <div className={cls("relative z-1 flex flex-col gap-2 min-w-0 flex-1", cardContentClassName)}>
+                <h3 className={cls(
+                  "text-3xl font-medium leading-tight line-clamp-2",
+                  variant === "card"
+                    ? (shouldUseLightText ? "text-background" : "text-foreground")
+                    : (useInvertedBackground !== "noInvert" ? "text-background" : "text-foreground"),
+                  cardTitleClassName
+                )}>
+                  {blog.title}
+                </h3>
+                <div className={cls("flex flex-wrap items-center gap-2", itemsContainerClassName)}>
+                  {blog.items.map((item, index) => (
+                    <React.Fragment key={index}>
+                      <span className={cls(
+                        "text-sm",
+                        variant === "card"
+                          ? (shouldUseLightText ? "text-background/75" : "text-foreground/75")
+                          : (useInvertedBackground !== "noInvert" ? "text-background/75" : "text-foreground/75"),
+                        itemTextClassName
+                      )}>
+                        {item}
+                      </span>
+                      {index < blog.items.length - 1 && (
+                        <span className="text-sm text-accent">•</span>
+                      )}
+                    </React.Fragment>
+                  ))}
+                </div>
+              </div>
+            </article>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+BlogCardFive.displayName = "BlogCardFive";
+
+export default memo(BlogCardFive);
diff --git a/src/components/sections/blog/BlogCardFour.tsx b/src/components/sections/blog/BlogCardFour.tsx
new file mode 100644
index 0000000..d126b4a
--- /dev/null
+++ b/src/components/sections/blog/BlogCardFour.tsx
@@ -0,0 +1,156 @@
+"use client";
+
+import React, { memo } from "react";
+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 } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type BlogPost = {
+  id: string;
+  title: string;
+  description: string;
+  imageSrc?: string;
+  videoSrc?: string;
+  imageAlt?: string;
+  videoAriaLabel?: string;
+};
+
+interface BlogCardFourProps {
+  blogs: BlogPost[];
+  animationType: CardAnimationType;
+  title: string;
+  titleSegments?: TitleSegment[];
+  description: string;
+  textboxLayout: TextboxLayout;
+  useInvertedBackground: InvertedBackground;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  buttons?: ButtonConfig[];
+  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;
+  cardContentClassName?: string;
+  cardTitleClassName?: string;
+  cardDescriptionClassName?: string;
+  mediaWrapperClassName?: string;
+  mediaClassName?: string;
+}
+
+const BlogCardFour = ({
+  blogs,
+  animationType,
+  title,
+  titleSegments,
+  description,
+  textboxLayout,
+  useInvertedBackground,
+  tag,
+  tagIcon,
+  buttons,
+  ariaLabel = "Blog section",
+  className = "",
+  containerClassName = "",
+  textBoxTitleClassName = "",
+  titleImageWrapperClassName = "",
+  titleImageClassName = "",
+  textBoxDescriptionClassName = "",
+  textBoxClassName = "",
+  textBoxTagClassName = "",
+  textBoxButtonContainerClassName = "",
+  textBoxButtonClassName = "",
+  textBoxButtonTextClassName = "",
+  gridClassName = "",
+  cardClassName = "",
+  cardContentClassName = "",
+  cardTitleClassName = "",
+  cardDescriptionClassName = "",
+  mediaWrapperClassName = "",
+  mediaClassName = "",
+}: BlogCardFourProps) => {
+  const theme = useTheme();
+  const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+  const { itemRefs } = useCardAnimation({ animationType, itemCount: blogs.length });
+
+  const getGridCols = () => {
+    if (blogs.length >= 3) return "md:grid-cols-3";
+    if (blogs.length === 2) return "md:grid-cols-2";
+    return "md:grid-cols-1";
+  };
+
+  return (
+    <section
+      aria-label={ariaLabel}
+      className={cls("relative py-20", useInvertedBackground === "invertCard" ? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground" : "w-full", useInvertedBackground === "invertDefault" && "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}
+          buttons={buttons}
+          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", getGridCols(), gridClassName)}>
+          {blogs.map((blog, index) => (
+            <article
+              key={blog.id}
+              ref={(el) => { itemRefs.current[index] = el; }}
+              className={cls("relative h-full card group flex items-center gap-4 cursor-pointer rounded-theme-capped p-4", cardClassName)}
+            >
+              <div className={cls("relative z-1 h-15 w-auto aspect-square rounded-theme-capped overflow-hidden flex-shrink-0", mediaWrapperClassName)}>
+                <MediaContent
+                  imageSrc={blog.imageSrc}
+                  videoSrc={blog.videoSrc}
+                  imageAlt={blog.imageAlt || blog.title}
+                  videoAriaLabel={blog.videoAriaLabel || blog.title}
+                  imageClassName={cls("w-full h-full object-cover", mediaClassName)}
+                />
+              </div>
+              <div className={cls("relative z-1 flex flex-col gap-1 min-w-0 flex-1", cardContentClassName)}>
+                <h3 className={cls("text-base font-medium leading-tight", shouldUseLightText ? "text-background" : "text-foreground", cardTitleClassName)}>
+                  {blog.title}
+                </h3>
+                <p className={cls("text-sm leading-tight line-clamp-2", shouldUseLightText ? "text-background/75" : "text-foreground/75", cardDescriptionClassName)}>
+                  {blog.description}
+                </p>
+              </div>
+            </article>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+BlogCardFour.displayName = "BlogCardFour";
+
+export default memo(BlogCardFour);
diff --git a/src/components/sections/blog/BlogCardNine.tsx b/src/components/sections/blog/BlogCardNine.tsx
new file mode 100644
index 0000000..cdbeb18
--- /dev/null
+++ b/src/components/sections/blog/BlogCardNine.tsx
@@ -0,0 +1,208 @@
+"use client";
+
+import React, { memo } from "react";
+import CardList from "@/components/cardStack/CardList";
+import Tag from "@/components/shared/Tag";
+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, 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 BlogCard = MediaProps & {
+    id: string;
+    category: string;
+    title: string;
+    tags: string[];
+    buttons?: ButtonConfig[];
+    onBlogClick?: () => void;
+};
+
+interface BlogCardNineProps {
+    blogs: BlogCard[];
+    animationType: CardAnimationType;
+    variant: "card" | "border";
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    buttons?: ButtonConfig[];
+    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;
+    mediaWrapperClassName?: string;
+    mediaClassName?: string;
+    categoryClassName?: string;
+    cardTitleClassName?: string;
+    tagsContainerClassName?: string;
+    tagClassName?: string;
+    cardButtonClassName?: string;
+    cardButtonTextClassName?: string;
+}
+
+const BlogCardNine = ({
+    blogs,
+    animationType,
+    variant,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    buttons,
+    textboxLayout,
+    useInvertedBackground,
+    ariaLabel = "Blog section",
+    className = "",
+    containerClassName = "",
+    cardClassName = "",
+    textBoxTitleClassName = "",
+    textBoxDescriptionClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+    titleImageWrapperClassName = "",
+    titleImageClassName = "",
+    cardContentClassName = "",
+    mediaWrapperClassName = "",
+    mediaClassName = "",
+    categoryClassName = "",
+    cardTitleClassName = "",
+    tagsContainerClassName = "",
+    tagClassName = "",
+    cardButtonClassName = "",
+    cardButtonTextClassName = "",
+}: BlogCardNineProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    return (
+        <CardList
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            buttons={buttons}
+            textboxLayout={textboxLayout}
+            animationType={animationType}
+            variant={variant}
+            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}
+        >
+            {blogs.map((blog) => (
+                <article
+                    key={blog.id}
+                    className={cls(
+                        "relative z-1 w-full min-h-0 h-full flex flex-col md:flex-row gap-6 cursor-pointer",
+                        variant === "card" ? "p-6 md:p-10" : "pb-6 md:pb-10",
+                        cardContentClassName
+                    )}
+                    onClick={blog.onBlogClick}
+                    role="article"
+                    aria-label={blog.title}
+                >
+                    <div className={cls(
+                        "relative z-1 w-full md:w-2/5 aspect-square md:aspect-[4/3] overflow-hidden rounded-theme-capped",
+                        mediaWrapperClassName
+                    )}>
+                        <MediaContent
+                            imageSrc={blog.imageSrc}
+                            videoSrc={blog.videoSrc}
+                            imageAlt={blog.imageAlt}
+                            videoAriaLabel={blog.videoAriaLabel}
+                            imageClassName={cls("w-full h-full object-cover", mediaClassName)}
+                        />
+                    </div>
+
+                    {variant === "card" && <div className="relative z-1 w-full h-px bg-foreground/20 md:hidden" />}
+
+                    <div className="relative z-1 w-full md:w-3/5 flex flex-col gap-2">
+                        <span className={cls(
+                            "text-lg leading-tight",
+                            variant === "border"
+                                ? (useInvertedBackground !== "noInvert" ? "text-background/75" : "text-foreground/75")
+                                : (shouldUseLightText ? "text-background/75" : "text-foreground/75"),
+                            categoryClassName
+                        )}>
+                            {blog.category}
+                        </span>
+
+                        <h3 className={cls(
+                            "text-2xl md:text-4xl font-medium text-balance leading-tight",
+                            variant === "border"
+                                ? (useInvertedBackground !== "noInvert" ? "text-background" : "text-foreground")
+                                : (shouldUseLightText ? "text-background" : "text-foreground"),
+                            cardTitleClassName
+                        )}>
+                            {blog.title}
+                        </h3>
+
+                        <div className={cls("relative mt-1 flex flex-wrap gap-2", tagsContainerClassName)}>
+                            {blog.tags.map((tagText, index) => (
+                                <Tag key={index} text={tagText} className={tagClassName} />
+                            ))}
+                        </div>
+
+                        {blog.buttons && blog.buttons.length > 0 && (
+                            <div className="mt-6 md:mt-auto flex gap-4">
+                                {blog.buttons.slice(0, 2).map((button, index) => (
+                                    <Button key={`${button.text}-${index}`} {...getButtonProps(button, index, theme.defaultButtonVariant, cardButtonClassName, cardButtonTextClassName)} />
+                                ))}
+                            </div>
+                        )}
+                    </div>
+                </article>
+            ))}
+        </CardList>
+    );
+};
+
+BlogCardNine.displayName = "BlogCardNine";
+
+export default memo(BlogCardNine);
diff --git a/src/components/sections/blog/BlogCardOne.tsx b/src/components/sections/blog/BlogCardOne.tsx
new file mode 100644
index 0000000..cb7d9c1
--- /dev/null
+++ b/src/components/sections/blog/BlogCardOne.tsx
@@ -0,0 +1,252 @@
+"use client";
+
+import React, { memo } from "react";
+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 { LucideIcon } from "lucide-react";
+import type { ButtonConfig, CardAnimationType, ContainerStyle, TitleSegment } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type BlogCard = {
+    id: string;
+    category: string;
+    title: string;
+    excerpt: string;
+    imageSrc: string;
+    imageAlt?: string;
+    authorName: string;
+    authorAvatar: string;
+    date: string;
+    onBlogClick?: () => void;
+};
+
+interface BlogCardOneProps {
+    blogs: BlogCard[];
+    carouselMode?: "auto" | "buttons";
+    uniformGridCustomHeightClasses?: string;
+    animationType: CardAnimationType;
+    containerStyle: ContainerStyle;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    buttons?: ButtonConfig[];
+    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 = memo(({
+    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("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>
+    );
+});
+
+BlogCardItem.displayName = "BlogCardItem";
+
+const BlogCardOne = ({
+    blogs,
+    carouselMode = "buttons",
+    uniformGridCustomHeightClasses,
+    animationType,
+    containerStyle,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    buttons,
+    textboxLayout,
+    useInvertedBackground,
+    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 =
+        containerStyle === "card"
+            ? shouldUseInvertedText("invertDefault", theme.cardStyle) || shouldUseInvertedText("invertCard", theme.cardStyle)
+            : shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+    return (
+        <CardStack
+            mode={carouselMode}
+            gridVariant="uniform-all-items-equal"
+            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+            animationType={animationType}
+            containerStyle={containerStyle}
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            buttons={buttons}
+            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>
+    );
+};
+
+BlogCardOne.displayName = "BlogCardOne";
+
+export default memo(BlogCardOne);
diff --git a/src/components/sections/blog/BlogCardSeven.tsx b/src/components/sections/blog/BlogCardSeven.tsx
new file mode 100644
index 0000000..b45b667
--- /dev/null
+++ b/src/components/sections/blog/BlogCardSeven.tsx
@@ -0,0 +1,210 @@
+"use client";
+
+import React, { memo } from "react";
+import Image from "next/image";
+import CardStack from "@/components/cardStack/CardStack";
+import { ArrowRight } from "lucide-react";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, CardAnimationType, ContainerStyle, GridVariant, TitleSegment } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type BlogCard = {
+    id: string;
+    title: string;
+    date: string;
+    imageSrc: string;
+    imageAlt?: string;
+    onBlogClick?: () => void;
+};
+
+interface BlogCardSevenProps {
+    blogs: BlogCard[];
+    carouselMode?: "auto" | "buttons";
+    gridVariant: GridVariant;
+    uniformGridCustomHeightClasses?: string;
+    animationType: CardAnimationType;
+    containerStyle: ContainerStyle;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    buttons?: ButtonConfig[];
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    cardClassName?: string;
+    cardTitleClassName?: string;
+    cardDateClassName?: string;
+    cardLinkClassName?: string;
+    imageWrapperClassName?: string;
+    imageClassName?: 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;
+    titleClassName?: string;
+    dateClassName?: string;
+    linkClassName?: string;
+    imageWrapperClassName?: string;
+    imageClassName?: string;
+}
+
+const BlogCardItem = memo(({
+    blog,
+    shouldUseLightText,
+    cardClassName = "",
+    titleClassName = "",
+    dateClassName = "",
+    linkClassName = "",
+    imageWrapperClassName = "",
+    imageClassName = "",
+}: BlogCardItemProps) => {
+    return (
+        <article
+            className={cls("relative h-full card group grid grid-cols-2 gap-6 cursor-pointer p-6 rounded-theme-capped", cardClassName)}
+            onClick={blog.onBlogClick}
+            role="article"
+            aria-label={blog.title}
+        >
+            <div className="col-span-1 flex flex-col gap-6 justify-between">
+                <div className="flex flex-col gap-2">
+                    <p className={cls("text-sm", shouldUseLightText ? "text-background/75" : "text-foreground/75", dateClassName)}>
+                        {blog.date}
+                    </p>
+                    <h3 className={cls("text-2xl font-medium leading-tight line-clamp-3", shouldUseLightText ? "text-background" : "text-foreground", titleClassName)}>
+                        {blog.title}
+                    </h3>
+                </div>
+                <div className={cls("flex items-center gap-2 text-sm group-hover:gap-3 transition-all duration-300", shouldUseLightText ? "text-background" : "text-foreground", linkClassName)}>
+                    <span>Read blog</span>
+                    <ArrowRight className="h-[1em] w-auto" />
+                </div>
+            </div>
+            <div className={cls("col-span-1 relative overflow-hidden rounded-theme-capped", imageWrapperClassName)}>
+                <Image
+                    src={blog.imageSrc}
+                    alt={blog.imageAlt || blog.title}
+                    fill
+                    className={cls("object-cover transition-transform duration-500 ease-in-out group-hover:scale-105", imageClassName)}
+                    unoptimized={blog.imageSrc.startsWith('http') || blog.imageSrc.startsWith('//')}
+                />
+            </div>
+        </article>
+    );
+});
+
+BlogCardItem.displayName = "BlogCardItem";
+
+const BlogCardSeven = ({
+    blogs,
+    carouselMode = "buttons",
+    gridVariant,
+    uniformGridCustomHeightClasses,
+    animationType,
+    containerStyle,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    buttons,
+    textboxLayout,
+    useInvertedBackground,
+    ariaLabel = "Blog section",
+    className = "",
+    containerClassName = "",
+    cardClassName = "",
+    cardTitleClassName = "",
+    cardDateClassName = "",
+    cardLinkClassName = "",
+    imageWrapperClassName = "",
+    imageClassName = "",
+    textBoxTitleClassName = "",
+    textBoxTitleImageWrapperClassName = "",
+    textBoxTitleImageClassName = "",
+    textBoxDescriptionClassName = "",
+    gridClassName = "",
+    carouselClassName = "",
+    controlsClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+}: BlogCardSevenProps) => {
+    const theme = useTheme();
+    const shouldUseLightText =
+        containerStyle === "card"
+            ? shouldUseInvertedText("invertDefault", theme.cardStyle) || shouldUseInvertedText("invertCard", theme.cardStyle)
+            : shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+    return (
+        <CardStack
+            mode={carouselMode}
+            gridVariant={gridVariant}
+            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+            animationType={animationType}
+            containerStyle={containerStyle}
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            buttons={buttons}
+            textboxLayout={textboxLayout}
+            useInvertedBackground={useInvertedBackground}
+            ariaLabel={ariaLabel}
+            className={className}
+            containerClassName={containerClassName}
+            gridClassName={gridClassName}
+            carouselClassName={carouselClassName}
+            carouselItemClassName="!w-carousel-item-3"
+            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}
+                    titleClassName={cardTitleClassName}
+                    dateClassName={cardDateClassName}
+                    linkClassName={cardLinkClassName}
+                    imageWrapperClassName={imageWrapperClassName}
+                    imageClassName={imageClassName}
+                />
+            ))}
+        </CardStack>
+    );
+};
+
+BlogCardSeven.displayName = "BlogCardSeven";
+
+export default memo(BlogCardSeven);
diff --git a/src/components/sections/blog/BlogCardSix.tsx b/src/components/sections/blog/BlogCardSix.tsx
new file mode 100644
index 0000000..fe6f1b3
--- /dev/null
+++ b/src/components/sections/blog/BlogCardSix.tsx
@@ -0,0 +1,240 @@
+"use client";
+
+import React, { memo } from "react";
+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, ContainerStyle, TitleSegment } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type BlogCard = {
+    id: string;
+    title: string;
+    tags: string[];
+    imageSrc?: string;
+    videoSrc?: string;
+    imageAlt?: string;
+    videoAriaLabel?: string;
+    onBlogClick?: () => void;
+};
+
+interface BlogCardSixProps {
+    blogs: BlogCard[];
+    carouselMode?: "auto" | "buttons";
+    uniformGridCustomHeightClasses?: string;
+    animationType: CardAnimationType;
+    containerStyle: ContainerStyle;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    buttons?: ButtonConfig[];
+    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 BlogCardItemProps {
+    blog: BlogCard;
+    shouldUseLightText: boolean;
+    useInvertedBackground: InvertedBackground;
+    itemClassName?: string;
+    mediaWrapperClassName?: string;
+    mediaClassName?: string;
+    cardClassName?: string;
+    cardTitleClassName?: string;
+    tagsContainerClassName?: string;
+    tagClassName?: string;
+    arrowClassName?: string;
+}
+
+const BlogCardItem = memo(({
+    blog,
+    shouldUseLightText,
+    useInvertedBackground,
+    itemClassName = "",
+    mediaWrapperClassName = "",
+    mediaClassName = "",
+    cardClassName = "",
+    cardTitleClassName = "",
+    tagsContainerClassName = "",
+    tagClassName = "",
+    arrowClassName = "",
+}: BlogCardItemProps) => {
+    return (
+        <article
+            className={cls("relative h-full flex flex-col gap-6 cursor-pointer group", itemClassName)}
+            onClick={blog.onBlogClick}
+            role="article"
+            aria-label={blog.title}
+        >
+            <div className={cls("relative w-full aspect-square overflow-hidden rounded-theme-capped", mediaWrapperClassName)}>
+                <MediaContent
+                    imageSrc={blog.imageSrc}
+                    videoSrc={blog.videoSrc}
+                    imageAlt={blog.imageAlt || blog.title}
+                    videoAriaLabel={blog.videoAriaLabel || blog.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 flex-col gap-4", cardClassName)}>
+                <h3 className={cls(
+                    "text-xl md:text-2xl font-medium leading-tight",
+                    shouldUseLightText ? "text-background" : "text-foreground",
+                    cardTitleClassName
+                )}>
+                    {blog.title}
+                </h3>
+
+                <div className="flex items-center justify-between gap-4">
+                    <div className={cls("flex items-center gap-2 flex-wrap", tagsContainerClassName)}>
+                        {blog.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>
+    );
+});
+
+BlogCardItem.displayName = "BlogCardItem";
+
+const BlogCardSix = ({
+    blogs,
+    carouselMode = "buttons",
+    uniformGridCustomHeightClasses,
+    animationType,
+    containerStyle,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    buttons,
+    textboxLayout,
+    useInvertedBackground,
+    ariaLabel = "Blog section",
+    className = "",
+    containerClassName = "",
+    itemClassName = "",
+    mediaWrapperClassName = "",
+    mediaClassName = "",
+    cardClassName = "",
+    cardTitleClassName = "",
+    tagsContainerClassName = "",
+    tagClassName = "",
+    arrowClassName = "",
+    textBoxTitleClassName = "",
+    textBoxTitleImageWrapperClassName = "",
+    textBoxTitleImageClassName = "",
+    textBoxDescriptionClassName = "",
+    gridClassName = "",
+    carouselClassName = "",
+    controlsClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+}: BlogCardSixProps) => {
+    const theme = useTheme();
+    const shouldUseLightText =
+        containerStyle === "card"
+            ? shouldUseInvertedText("invertDefault", theme.cardStyle) || shouldUseInvertedText("invertCard", theme.cardStyle)
+            : shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+    return (
+        <CardStack
+            mode={carouselMode}
+            gridVariant="uniform-all-items-equal"
+            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+            animationType={animationType}
+            containerStyle={containerStyle}
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            buttons={buttons}
+            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}
+                    useInvertedBackground={useInvertedBackground}
+                    itemClassName={itemClassName}
+                    mediaWrapperClassName={mediaWrapperClassName}
+                    mediaClassName={mediaClassName}
+                    cardClassName={cardClassName}
+                    cardTitleClassName={cardTitleClassName}
+                    tagsContainerClassName={tagsContainerClassName}
+                    tagClassName={tagClassName}
+                    arrowClassName={arrowClassName}
+                />
+            ))}
+        </CardStack>
+    );
+};
+
+BlogCardSix.displayName = "BlogCardSix";
+
+export default memo(BlogCardSix);
diff --git a/src/components/sections/blog/BlogCardTen.tsx b/src/components/sections/blog/BlogCardTen.tsx
new file mode 100644
index 0000000..8720aff
--- /dev/null
+++ b/src/components/sections/blog/BlogCardTen.tsx
@@ -0,0 +1,175 @@
+"use client";
+
+import React, { memo } from "react";
+import CardList from "@/components/cardStack/CardList";
+import Tag from "@/components/shared/Tag";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import { ArrowRight } from "lucide-react";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, CardAnimationType, TitleSegment } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type BlogCard = {
+    id: string;
+    title: string;
+    subtitle: string;
+    tags: string[];
+    onBlogClick?: () => void;
+};
+
+interface BlogCardTenProps {
+    blogs: BlogCard[];
+    animationType: CardAnimationType;
+    variant: "card" | "border";
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    buttons?: ButtonConfig[];
+    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;
+    subtitleClassName?: string;
+    tagsContainerClassName?: string;
+    tagClassName?: string;
+    arrowClassName?: string;
+}
+
+const BlogCardTen = ({
+    blogs,
+    animationType,
+    variant,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    buttons,
+    textboxLayout,
+    useInvertedBackground,
+    ariaLabel = "Blog section",
+    className = "",
+    containerClassName = "",
+    cardClassName = "",
+    textBoxTitleClassName = "",
+    textBoxDescriptionClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+    titleImageWrapperClassName = "",
+    titleImageClassName = "",
+    cardContentClassName = "",
+    cardTitleClassName = "",
+    subtitleClassName = "",
+    tagsContainerClassName = "",
+    tagClassName = "",
+    arrowClassName = "",
+}: BlogCardTenProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    return (
+        <CardList
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            buttons={buttons}
+            textboxLayout={textboxLayout}
+            animationType={animationType}
+            variant={variant}
+            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}
+        >
+            {blogs.map((blog) => (
+                <article
+                    key={blog.id}
+                    className={cls(
+                        "relative z-1 w-full min-h-0 h-full flex flex-col gap-6 cursor-pointer group",
+                        variant === "card" ? "p-6 md:p-10" : "py-6 md:py-10",
+                        cardContentClassName
+                    )}
+                    onClick={blog.onBlogClick}
+                    role="article"
+                    aria-label={blog.title}
+                >
+                    <div className="flex flex-col">
+                        <h3 className={cls(
+                            "text-3xl md:text-5xl font-medium text-balance leading-tight line-clamp-2",
+                            variant === "border"
+                                ? (useInvertedBackground !== "noInvert" ? "text-background" : "text-foreground")
+                                : (shouldUseLightText ? "text-background" : "text-foreground"),
+                            cardTitleClassName
+                        )}>
+                            {blog.title}
+                        </h3>
+
+                        <span className={cls(
+                            "text-base md:text-lg leading-tight",
+                            variant === "border"
+                                ? (useInvertedBackground !== "noInvert" ? "text-background/75" : "text-foreground/75")
+                                : (shouldUseLightText ? "text-background/75" : "text-foreground/75"),
+                            subtitleClassName
+                        )}>
+                            {blog.subtitle}
+                        </span>
+                    </div>
+
+                    <div className="flex items-end justify-between mt-auto">
+                        <div className={cls("flex flex-wrap gap-2", tagsContainerClassName)}>
+                            {blog.tags.map((tagText, index) => (
+                                <Tag key={index} text={tagText} className={tagClassName} />
+                            ))}
+                        </div>
+
+                        <ArrowRight
+                            className={cls(
+                                "h-[var(--text-base)] w-auto transition-transform duration-300 group-hover:-rotate-45",
+                                variant === "border"
+                                    ? (useInvertedBackground !== "noInvert" ? "text-background" : "text-foreground")
+                                    : (shouldUseLightText ? "text-background" : "text-foreground"),
+                                arrowClassName
+                            )}
+                            strokeWidth={1.5}
+                        />
+                    </div>
+                </article>
+            ))}
+        </CardList>
+    );
+};
+
+BlogCardTen.displayName = "BlogCardTen";
+
+export default memo(BlogCardTen);
diff --git a/src/components/sections/blog/BlogCardThree.tsx b/src/components/sections/blog/BlogCardThree.tsx
new file mode 100644
index 0000000..4d5f789
--- /dev/null
+++ b/src/components/sections/blog/BlogCardThree.tsx
@@ -0,0 +1,230 @@
+"use client";
+
+import React, { memo } from "react";
+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 { LucideIcon } from "lucide-react";
+import type { ButtonConfig, CardAnimationType, ContainerStyle, TitleSegment } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type BlogCard = {
+    id: string;
+    category: string;
+    categoryIcon?: LucideIcon;
+    title: string;
+    description: string;
+    imageSrc?: string;
+    videoSrc?: string;
+    imageAlt?: string;
+    videoAriaLabel?: string;
+    onBlogClick?: () => void;
+};
+
+interface BlogCardThreeProps {
+    blogs: BlogCard[];
+    carouselMode?: "auto" | "buttons";
+    uniformGridCustomHeightClasses?: string;
+    animationType: CardAnimationType;
+    containerStyle: ContainerStyle;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    buttons?: ButtonConfig[];
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    cardClassName?: string;
+    cardContentClassName?: string;
+    categoryTagClassName?: string;
+    cardTitleClassName?: string;
+    cardDescriptionClassName?: 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: "noInvert" | "invertDefault" | "invertCard";
+    cardClassName?: string;
+    cardContentClassName?: string;
+    categoryTagClassName?: string;
+    cardTitleClassName?: string;
+    cardDescriptionClassName?: string;
+    mediaWrapperClassName?: string;
+    mediaClassName?: string;
+}
+
+const BlogCardItem = memo(({
+    blog,
+    useInvertedBackground,
+    cardClassName = "",
+    cardContentClassName = "",
+    categoryTagClassName = "",
+    cardTitleClassName = "",
+    cardDescriptionClassName = "",
+    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}
+                    icon={blog.categoryIcon}
+                    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",
+                    cardDescriptionClassName
+                )}>
+                    {blog.description}
+                </p>
+            </div>
+
+            <div className={cls("relative z-1 w-full aspect-square", mediaWrapperClassName)}>
+                <MediaContent
+                    imageSrc={blog.imageSrc}
+                    videoSrc={blog.videoSrc}
+                    imageAlt={blog.imageAlt || blog.title}
+                    videoAriaLabel={blog.videoAriaLabel}
+                    imageClassName={cls("absolute inset-0 w-full h-full object-cover", mediaClassName)}
+                />
+                <OverlayArrowButton ariaLabel={`Read ${blog.title}`} />
+            </div>
+        </article>
+    );
+});
+
+BlogCardItem.displayName = "BlogCardItem";
+
+const BlogCardThree = ({
+    blogs,
+    carouselMode = "buttons",
+    uniformGridCustomHeightClasses = "min-h-none",
+    animationType,
+    containerStyle,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    buttons,
+    textboxLayout,
+    useInvertedBackground,
+    ariaLabel = "Blog section",
+    className = "",
+    containerClassName = "",
+    cardClassName = "",
+    cardContentClassName = "",
+    categoryTagClassName = "",
+    cardTitleClassName = "",
+    cardDescriptionClassName = "",
+    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}
+            containerStyle={containerStyle}
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            buttons={buttons}
+            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}
+                    cardDescriptionClassName={cardDescriptionClassName}
+                    mediaWrapperClassName={mediaWrapperClassName}
+                    mediaClassName={mediaClassName}
+                />
+            ))}
+        </CardStack>
+    );
+};
+
+BlogCardThree.displayName = "BlogCardThree";
+
+export default memo(BlogCardThree);
diff --git a/src/components/sections/blog/BlogCardTwo.tsx b/src/components/sections/blog/BlogCardTwo.tsx
new file mode 100644
index 0000000..9bc5d20
--- /dev/null
+++ b/src/components/sections/blog/BlogCardTwo.tsx
@@ -0,0 +1,230 @@
+"use client";
+
+import React, { memo } from "react";
+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 { LucideIcon } from "lucide-react";
+import type { ButtonConfig, CardAnimationType, ContainerStyle, TitleSegment } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type BlogCard = {
+    id: string;
+    tags: string[];
+    title: string;
+    excerpt: string;
+    imageSrc: string;
+    imageAlt?: string;
+    authorName: string;
+    date: string;
+    onBlogClick?: () => void;
+};
+
+interface BlogCardTwoProps {
+    blogs: BlogCard[];
+    carouselMode?: "auto" | "buttons";
+    uniformGridCustomHeightClasses?: string;
+    animationType: CardAnimationType;
+    containerStyle: ContainerStyle;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    buttons?: ButtonConfig[];
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    cardClassName?: string;
+    imageWrapperClassName?: string;
+    imageClassName?: string;
+    authorDateClassName?: string;
+    cardTitleClassName?: string;
+    excerptClassName?: string;
+    tagsContainerClassName?: string;
+    tagClassName?: 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;
+    authorDateClassName?: string;
+    cardTitleClassName?: string;
+    excerptClassName?: string;
+    tagsContainerClassName?: string;
+    tagClassName?: string;
+}
+
+const BlogCardItem = memo(({
+    blog,
+    shouldUseLightText,
+    cardClassName = "",
+    imageWrapperClassName = "",
+    imageClassName = "",
+    authorDateClassName = "",
+    cardTitleClassName = "",
+    excerptClassName = "",
+    tagsContainerClassName = "",
+    tagClassName = "",
+}: 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("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">
+                    <p className={cls("text-xs", shouldUseLightText ? "text-background" : "text-foreground", authorDateClassName)}>
+                        {blog.authorName} " {blog.date}
+                    </p>
+
+                    <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={cls("flex flex-wrap gap-2", tagsContainerClassName)}>
+                    {blog.tags.map((tag, index) => (
+                        <Badge key={`${tag}-${index}`} text={tag} variant="primary" className={tagClassName} />
+                    ))}
+                </div>
+            </div>
+        </article>
+    );
+});
+
+BlogCardItem.displayName = "BlogCardItem";
+
+const BlogCardTwo = ({
+    blogs,
+    carouselMode = "buttons",
+    uniformGridCustomHeightClasses,
+    animationType,
+    containerStyle,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    buttons,
+    textboxLayout,
+    useInvertedBackground,
+    ariaLabel = "Blog section",
+    className = "",
+    containerClassName = "",
+    cardClassName = "",
+    imageWrapperClassName = "",
+    imageClassName = "",
+    authorDateClassName = "",
+    cardTitleClassName = "",
+    excerptClassName = "",
+    tagsContainerClassName = "",
+    tagClassName = "",
+    textBoxTitleClassName = "",
+    textBoxTitleImageWrapperClassName = "",
+    textBoxTitleImageClassName = "",
+    textBoxDescriptionClassName = "",
+    gridClassName = "",
+    carouselClassName = "",
+    controlsClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+}: BlogCardTwoProps) => {
+    const theme = useTheme();
+    const shouldUseLightText =
+        containerStyle === "card"
+            ? shouldUseInvertedText("invertDefault", theme.cardStyle) || shouldUseInvertedText("invertCard", theme.cardStyle)
+            : shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+    return (
+        <CardStack
+            mode={carouselMode}
+            gridVariant="uniform-all-items-equal"
+            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+            animationType={animationType}
+            containerStyle={containerStyle}
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            buttons={buttons}
+            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}
+                    authorDateClassName={authorDateClassName}
+                    cardTitleClassName={cardTitleClassName}
+                    excerptClassName={excerptClassName}
+                    tagsContainerClassName={tagsContainerClassName}
+                    tagClassName={tagClassName}
+                />
+            ))}
+        </CardStack>
+    );
+};
+
+BlogCardTwo.displayName = "BlogCardTwo";
+
+export default memo(BlogCardTwo);
diff --git a/src/components/sections/contact/ContactCenter.tsx b/src/components/sections/contact/ContactCenter.tsx
new file mode 100644
index 0000000..4de731d
--- /dev/null
+++ b/src/components/sections/contact/ContactCenter.tsx
@@ -0,0 +1,92 @@
+"use client";
+
+import React, { memo } from "react";
+import ContactForm from "@/components/form/ContactForm";
+import { cls } from "@/lib/utils";
+import { LucideIcon } from "lucide-react";
+
+interface ContactCenterProps {
+    title: string;
+    description: string;
+    tag: string;
+    tagIcon?: LucideIcon;
+    useInvertedBackground: "noInvert" | "invertDefault" | "invertCard";
+    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,
+    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) => {
+    return (
+        <section aria-label={ariaLabel} className={cls("relative py-20", useInvertedBackground === "invertCard" ? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground" : "w-full", useInvertedBackground === "invertDefault" && "bg-foreground", className)}>
+            <div className={cls("w-content-width mx-auto", containerClassName)}>
+                <div className={cls("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-1 w-full md:w-1/2">
+                        <ContactForm
+                            tag={tag}
+                            tagIcon={tagIcon}
+                            title={title}
+                            description={description}
+                            useInvertedBackground={useInvertedBackground}
+                            inputPlaceholder={inputPlaceholder}
+                            buttonText={buttonText}
+                            termsText={termsText}
+                            onSubmit={onSubmit}
+                            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>
+            </div>
+        </section>
+    );
+};
+
+ContactCenter.displayName = "ContactCenter";
+
+export default memo(ContactCenter);
diff --git a/src/components/sections/contact/ContactCenterForm.tsx b/src/components/sections/contact/ContactCenterForm.tsx
new file mode 100644
index 0000000..b04ea72
--- /dev/null
+++ b/src/components/sections/contact/ContactCenterForm.tsx
@@ -0,0 +1,158 @@
+"use client";
+
+import React, { memo, 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 { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import { getButtonProps } from "@/lib/buttonUtils";
+import type { AnimationType } from "@/components/text/types";
+
+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;
+}
+
+interface ContactCenterFormProps {
+    title: string;
+    description: string;
+    inputs: InputField[];
+    textarea?: TextareaField;
+    useInvertedBackground: "noInvert" | "invertDefault" | "invertCard";
+    buttonText?: string;
+    onSubmit?: (data: Record<string, string>) => void;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    contentClassName?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
+    buttonClassName?: string;
+    buttonTextClassName?: string;
+}
+
+const ContactCenterForm = ({
+    title,
+    description,
+    inputs,
+    textarea,
+    useInvertedBackground,
+    buttonText = "Submit",
+    onSubmit,
+    ariaLabel = "Contact section",
+    className = "",
+    containerClassName = "",
+    contentClassName = "",
+    titleClassName = "",
+    descriptionClassName = "",
+    buttonClassName = "",
+    buttonTextClassName = "",
+}: ContactCenterFormProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    // Validate minimum inputs requirement
+    if (inputs.length < 2) {
+        throw new Error("ContactCenterForm 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 handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        if (onSubmit) {
+            onSubmit(formData);
+        }
+    };
+
+    return (
+        <section aria-label={ariaLabel} className={cls("relative py-20", useInvertedBackground === "invertCard" ? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground" : "w-full", useInvertedBackground === "invertDefault" && "bg-foreground", className)}>
+            <div className={cls("w-content-width mx-auto", containerClassName)}>
+                <div className={cls("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-1 w-full md:w-1/2">
+                        <form onSubmit={handleSubmit} className="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}
+                                    />
+                                ))}
+
+                                {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 },
+                                        0,
+                                        theme.defaultButtonVariant,
+                                        cls("w-full", buttonClassName),
+                                        cls("text-base", buttonTextClassName)
+                                    )}
+                                />
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+ContactCenterForm.displayName = "ContactCenterForm";
+
+export default memo(ContactCenterForm);
diff --git a/src/components/sections/contact/ContactFaq.tsx b/src/components/sections/contact/ContactFaq.tsx
new file mode 100644
index 0000000..27a9c3a
--- /dev/null
+++ b/src/components/sections/contact/ContactFaq.tsx
@@ -0,0 +1,195 @@
+"use client";
+
+import React, { memo, useState, Fragment } from "react";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { getButtonProps } from "@/lib/buttonUtils";
+import Accordion from "@/components/Accordion";
+import Button from "@/components/button/Button";
+import { useCardAnimation } from "@/components/cardStack/hooks/useCardAnimation";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { LucideIcon } from "lucide-react";
+import type { InvertedBackground } from "@/providers/themeProvider/config/constants";
+import type { CardAnimationType } from "@/components/cardStack/types";
+import type { ButtonConfig } from "@/types/button";
+
+interface FaqItem {
+  id: string;
+  title: string;
+  content: string;
+}
+
+interface ContactFaqProps {
+  faqs: FaqItem[];
+  ctaTitle: string;
+  ctaDescription: string;
+  ctaButton: ButtonConfig;
+  ctaIcon: LucideIcon;
+  useInvertedBackground: InvertedBackground;
+  animationType: CardAnimationType;
+  accordionAnimationType?: "smooth" | "instant";
+  showCard?: boolean;
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  ctaPanelClassName?: string;
+  ctaIconClassName?: string;
+  ctaTitleClassName?: string;
+  ctaDescriptionClassName?: string;
+  ctaButtonClassName?: string;
+  ctaButtonTextClassName?: string;
+  faqsPanelClassName?: string;
+  faqsContainerClassName?: string;
+  accordionClassName?: string;
+  accordionTitleClassName?: string;
+  accordionIconContainerClassName?: string;
+  accordionIconClassName?: string;
+  accordionContentClassName?: string;
+  separatorClassName?: string;
+}
+
+const ContactFaq = ({
+  faqs,
+  ctaTitle,
+  ctaDescription,
+  ctaButton,
+  ctaIcon: CtaIcon,
+  useInvertedBackground,
+  animationType,
+  accordionAnimationType = "smooth",
+  showCard = true,
+  ariaLabel = "Contact and FAQ section",
+  className = "",
+  containerClassName = "",
+  ctaPanelClassName = "",
+  ctaIconClassName = "",
+  ctaTitleClassName = "",
+  ctaDescriptionClassName = "",
+  ctaButtonClassName = "",
+  ctaButtonTextClassName = "",
+  faqsPanelClassName = "",
+  faqsContainerClassName = "",
+  accordionClassName = "",
+  accordionTitleClassName = "",
+  accordionIconContainerClassName = "",
+  accordionIconClassName = "",
+  accordionContentClassName = "",
+  separatorClassName = "",
+}: ContactFaqProps) => {
+  const [activeIndex, setActiveIndex] = useState<number | null>(null);
+  const theme = useTheme();
+  const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+  const { itemRefs } = useCardAnimation({ animationType, itemCount: 2 });
+
+  const handleToggle = (index: number) => {
+    setActiveIndex(activeIndex === index ? null : index);
+  };
+
+  const getButtonConfigProps = () => {
+    if (theme.defaultButtonVariant === "hover-bubble") {
+      return { bgClassName: "w-full" };
+    }
+    if (theme.defaultButtonVariant === "icon-arrow") {
+      return { className: "justify-between" };
+    }
+    return {};
+  };
+
+  return (
+    <section
+      aria-label={ariaLabel}
+      className={cls(
+        "relative py-20",
+        useInvertedBackground === "invertCard"
+          ? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground"
+          : "w-full",
+        useInvertedBackground === "invertDefault" && "bg-foreground",
+        className
+      )}
+    >
+      <div className={cls("w-content-width mx-auto", containerClassName)}>
+        <div className="grid grid-cols-1 md:grid-cols-12 gap-6 md:gap-8">
+          <div
+            ref={(el) => { itemRefs.current[0] = el; }}
+            className={cls(
+              "md:col-span-4 card rounded-theme-capped p-6 md:p-8 flex flex-col items-center justify-center gap-6 text-center",
+              ctaPanelClassName
+            )}
+          >
+            <div className={cls("h-16 w-auto aspect-square rounded-full primary-button flex items-center justify-center", ctaIconClassName)}>
+              <CtaIcon className="h-4/10 w-4/10 text-background" strokeWidth={1.5} />
+            </div>
+
+            <div className="flex flex-col" >
+              <h2 className={cls(
+                "text-2xl md:text-3xl font-medium",
+                shouldUseLightText ? "text-background" : "text-foreground",
+                ctaTitleClassName
+              )}>
+                {ctaTitle}
+              </h2>
+
+              <p className={cls(
+                "text-base",
+                shouldUseLightText ? "text-background/70" : "text-foreground/70",
+                ctaDescriptionClassName
+              )}>
+                {ctaDescription}
+              </p>
+            </div>
+
+            <Button
+              {...getButtonProps(
+                { ...ctaButton, props: { ...ctaButton.props, ...getButtonConfigProps() } },
+                0,
+                theme.defaultButtonVariant,
+                cls("w-full", ctaButtonClassName),
+                ctaButtonTextClassName
+              )}
+            />
+          </div>
+
+          <div
+            ref={(el) => { itemRefs.current[1] = el; }}
+            className={cls(
+              "md:col-span-8 flex flex-col gap-4",
+              faqsPanelClassName
+            )}
+          >
+            <div className={cls("flex flex-col gap-4", faqsContainerClassName)}>
+              {faqs.map((faq, index) => (
+                <Fragment key={faq.id}>
+                  <Accordion
+                    index={index}
+                    isActive={activeIndex === index}
+                    onToggle={handleToggle}
+                    title={faq.title}
+                    content={faq.content}
+                    animationType={accordionAnimationType}
+                    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",
+                      shouldUseLightText ? "border-background/10" : "border-foreground/10",
+                      separatorClassName
+                    )} />
+                  )}
+                </Fragment>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+ContactFaq.displayName = "ContactFaq";
+
+export default memo(ContactFaq);
diff --git a/src/components/sections/contact/ContactInline.tsx b/src/components/sections/contact/ContactInline.tsx
new file mode 100644
index 0000000..dae7890
--- /dev/null
+++ b/src/components/sections/contact/ContactInline.tsx
@@ -0,0 +1,97 @@
+"use client";
+
+import React, { memo } from "react";
+import TextAnimation from "@/components/text/TextAnimation";
+import EmailSignupForm from "@/components/form/EmailSignupForm";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type AnimationType = "entrance-slide" | "reveal-blur" | "background-highlight";
+
+interface ContactInlineProps {
+  text: string;
+  animationType?: AnimationType;
+  inputPlaceholder?: string;
+  buttonText?: string;
+  onSubmit?: (email: string) => void;
+  useInvertedBackground: InvertedBackground;
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  textClassName?: string;
+  formClassName?: string;
+  inputClassName?: string;
+  buttonClassName?: string;
+  buttonTextClassName?: string;
+}
+
+const ContactInline = ({
+  text,
+  animationType = "entrance-slide",
+  inputPlaceholder = "Enter your message",
+  buttonText = "Submit",
+  onSubmit,
+  useInvertedBackground,
+  ariaLabel = "Contact section",
+  className = "",
+  containerClassName = "",
+  textClassName = "",
+  formClassName = "",
+  inputClassName = "",
+  buttonClassName = "",
+  buttonTextClassName = "",
+}: ContactInlineProps) => {
+  const theme = useTheme();
+  const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+  return (
+    <section
+      aria-label={ariaLabel}
+      className={cls(
+        "relative py-20",
+        useInvertedBackground === "invertCard"
+          ? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground"
+          : "w-full",
+        useInvertedBackground === "invertDefault" && "bg-foreground",
+        className
+      )}
+    >
+      <div className={cls("w-content-width mx-auto", containerClassName)}>
+        <div className="card rounded-theme-capped p-6 md:p-15">
+          <div className="relative z-1 w-full flex flex-col md:flex-row gap-6 md:gap-15 md:items-center">
+            <div className="w-full md:w-1/2">
+              <TextAnimation
+                type={animationType}
+                text={text}
+                variant="words-trigger"
+                as="h2"
+                className={cls(
+                  "text-3xl md:text-5xl font-medium leading-[1.15]",
+                  shouldUseLightText && "text-background",
+                  textClassName
+                )}
+              />
+            </div>
+
+            <div className="w-full md:w-1/2">
+              <EmailSignupForm
+                inputPlaceholder={inputPlaceholder}
+                buttonText={buttonText}
+                onSubmit={onSubmit}
+                className={formClassName}
+                inputClassName={inputClassName}
+                buttonClassName={buttonClassName}
+                buttonTextClassName={buttonTextClassName}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+ContactInline.displayName = "ContactInline";
+
+export default memo(ContactInline);
diff --git a/src/components/sections/contact/ContactMedia.tsx b/src/components/sections/contact/ContactMedia.tsx
new file mode 100644
index 0000000..785b2b9
--- /dev/null
+++ b/src/components/sections/contact/ContactMedia.tsx
@@ -0,0 +1,81 @@
+"use client";
+
+import { memo } from "react";
+import MediaContent from "@/components/shared/MediaContent";
+import Button from "@/components/button/Button";
+import { cls } from "@/lib/utils";
+import { getButtonProps } from "@/lib/buttonUtils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { ButtonConfig } from "@/types/button";
+
+interface ContactMediaProps {
+    imageSrc?: string;
+    videoSrc?: string;
+    imageAlt?: string;
+    videoAriaLabel?: string;
+    buttons?: ButtonConfig[];
+    useInvertedBackground: "noInvert" | "invertDefault" | "invertCard";
+    ariaLabel?: string;
+    className?: string;
+    mediaWrapperClassName?: string;
+    mediaClassName?: string;
+    buttonContainerClassName?: string;
+    buttonClassName?: string;
+    buttonTextClassName?: string;
+}
+
+const ContactMedia = ({
+    imageSrc,
+    videoSrc,
+    imageAlt,
+    videoAriaLabel,
+    buttons,
+    useInvertedBackground,
+    ariaLabel = "Contact section",
+    className = "",
+    mediaWrapperClassName = "",
+    mediaClassName = "",
+    buttonContainerClassName = "",
+    buttonClassName = "",
+    buttonTextClassName = "",
+}: ContactMediaProps) => {
+    const theme = useTheme();
+
+    return (
+        <section
+            aria-label={ariaLabel}
+            className={cls("relative py-20", useInvertedBackground === "invertCard" ? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground" : "w-full", useInvertedBackground === "invertDefault" && "bg-foreground", className)}
+        >
+            <div className={cls("relative z-1 w-content-width mx-auto aspect-square md:aspect-video rounded-theme-capped overflow-hidden", mediaWrapperClassName)}>
+                <MediaContent
+                    imageSrc={imageSrc}
+                    videoSrc={videoSrc}
+                    imageAlt={imageAlt}
+                    videoAriaLabel={videoAriaLabel}
+                    imageClassName={cls("z-1 w-full h-full object-cover", mediaClassName)}
+                />
+
+                {buttons && buttons.length > 0 && (
+                    <div className={cls("absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex gap-4", 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>
+        </section>
+    );
+};
+
+ContactMedia.displayName = "ContactMedia";
+
+export default memo(ContactMedia);
diff --git a/src/components/sections/contact/ContactParallax.tsx b/src/components/sections/contact/ContactParallax.tsx
new file mode 100644
index 0000000..8615768
--- /dev/null
+++ b/src/components/sections/contact/ContactParallax.tsx
@@ -0,0 +1,82 @@
+"use client";
+
+import { memo } from "react";
+import MediaContent from "@/components/shared/MediaContent";
+import Button from "@/components/button/Button";
+import { cls } from "@/lib/utils";
+import { getButtonProps } from "@/lib/buttonUtils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { ButtonConfig } from "@/types/button";
+
+interface ContactParallaxProps {
+    imageSrc?: string;
+    videoSrc?: string;
+    imageAlt?: string;
+    videoAriaLabel?: string;
+    buttons?: ButtonConfig[];
+    ariaLabel?: string;
+    className?: string;
+    mediaClassName?: string;
+    buttonContainerClassName?: string;
+    buttonClassName?: string;
+    buttonTextClassName?: string;
+}
+
+const ContactParallax = ({
+    imageSrc,
+    videoSrc,
+    imageAlt,
+    videoAriaLabel,
+    buttons,
+    ariaLabel = "Contact section",
+    className = "",
+    mediaClassName = "",
+    buttonContainerClassName = "",
+    buttonClassName = "",
+    buttonTextClassName = "",
+}: ContactParallaxProps) => {
+    const theme = useTheme();
+
+    return (
+        <section
+            aria-label={ariaLabel}
+            className={cls("relative z-0 w-full h-svh", className)}
+            style={{
+                clipPath: "polygon(0% 0, 100% 0%, 100% 100%, 0 100%)",
+            }}
+        >
+            <div className="fixed inset-0 w-full h-full">
+                <MediaContent
+                    imageSrc={imageSrc}
+                    videoSrc={videoSrc}
+                    imageAlt={imageAlt}
+                    videoAriaLabel={videoAriaLabel}
+                    imageClassName={cls("w-full h-full object-cover rounded-none!", mediaClassName)}
+                />
+            </div>
+
+            {buttons && buttons.length > 0 && (
+                <div className={cls("relative z-10 flex items-center justify-center h-full", buttonContainerClassName)}>
+                    <div className="flex gap-4">
+                        {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>
+            )}
+        </section>
+    );
+};
+
+ContactParallax.displayName = "ContactParallax";
+
+export default memo(ContactParallax);
diff --git a/src/components/sections/contact/ContactSplit.tsx b/src/components/sections/contact/ContactSplit.tsx
new file mode 100644
index 0000000..caf71f3
--- /dev/null
+++ b/src/components/sections/contact/ContactSplit.tsx
@@ -0,0 +1,128 @@
+"use client";
+
+import React, { memo } from "react";
+import ContactForm from "@/components/form/ContactForm";
+import MediaContent from "@/components/shared/MediaContent";
+import { cls } from "@/lib/utils";
+import { LucideIcon } from "lucide-react";
+
+interface ContactSplitProps {
+    title: string;
+    description: string;
+    tag: string;
+    tagIcon?: LucideIcon;
+    useInvertedBackground: "noInvert" | "invertDefault" | "invertCard";
+    imageSrc?: string;
+    videoSrc?: string;
+    imageAlt?: string;
+    videoAriaLabel?: string;
+    mediaPosition?: "left" | "right";
+    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,
+    useInvertedBackground,
+    imageSrc,
+    videoSrc,
+    imageAlt = "",
+    videoAriaLabel = "Contact section video",
+    mediaPosition = "right",
+    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 contactContent = (
+        <div className="card rounded-theme-capped p-6 py-15 md:py-6 flex items-center justify-center">
+            <ContactForm
+                tag={tag}
+                tagIcon={tagIcon}
+                title={title}
+                description={description}
+                useInvertedBackground={useInvertedBackground}
+                inputPlaceholder={inputPlaceholder}
+                buttonText={buttonText}
+                termsText={termsText}
+                onSubmit={onSubmit}
+                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>
+    );
+
+    const mediaContent = (
+        <div 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", useInvertedBackground === "invertCard" ? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground" : "w-full", useInvertedBackground === "invertDefault" && "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}
+                    {contactContent}
+                    {mediaPosition === "right" && mediaContent}
+                </div>
+            </div>
+        </section>
+    );
+};
+
+ContactSplit.displayName = "ContactSplit";
+
+export default memo(ContactSplit);
diff --git a/src/components/sections/contact/ContactSplitForm.tsx b/src/components/sections/contact/ContactSplitForm.tsx
new file mode 100644
index 0000000..1d51d93
--- /dev/null
+++ b/src/components/sections/contact/ContactSplitForm.tsx
@@ -0,0 +1,203 @@
+"use client";
+
+import React, { memo, 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 MediaContent from "@/components/shared/MediaContent";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import { getButtonProps } from "@/lib/buttonUtils";
+import type { AnimationType } from "@/components/text/types";
+
+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;
+}
+
+interface ContactSplitFormProps {
+    title: string;
+    description: string;
+    inputs: InputField[];
+    textarea?: TextareaField;
+    useInvertedBackground: "noInvert" | "invertDefault" | "invertCard";
+    imageSrc?: string;
+    videoSrc?: string;
+    imageAlt?: string;
+    videoAriaLabel?: string;
+    mediaPosition?: "left" | "right";
+    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,
+    textarea,
+    useInvertedBackground,
+    imageSrc,
+    videoSrc,
+    imageAlt = "",
+    videoAriaLabel = "Contact section video",
+    mediaPosition = "right",
+    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);
+
+    // 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 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 {};
+    };
+
+    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}
+                        />
+                    ))}
+
+                    {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)
+                        )}
+                    />
+                </div>
+            </form>
+        </div>
+    );
+
+    const mediaContent = (
+        <div 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", useInvertedBackground === "invertCard" ? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground" : "w-full", useInvertedBackground === "invertDefault" && "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>
+    );
+};
+
+ContactSplitForm.displayName = "ContactSplitForm";
+
+export default memo(ContactSplitForm);
diff --git a/src/components/sections/contact/ContactText.tsx b/src/components/sections/contact/ContactText.tsx
new file mode 100644
index 0000000..676a741
--- /dev/null
+++ b/src/components/sections/contact/ContactText.tsx
@@ -0,0 +1,94 @@
+"use client";
+
+import React, { memo } from "react";
+import TextAnimation from "@/components/text/TextAnimation";
+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 { ButtonConfig } from "@/types/button";
+import type { InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type AnimationType = "entrance-slide" | "reveal-blur" | "background-highlight";
+
+interface ContactTextProps {
+    text: string;
+    animationType?: AnimationType;
+    buttons?: ButtonConfig[];
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    textClassName?: string;
+    buttonContainerClassName?: string;
+    buttonClassName?: string;
+    buttonTextClassName?: string;
+}
+
+const ContactText = ({
+    text,
+    animationType = "entrance-slide",
+    buttons,
+    useInvertedBackground,
+    ariaLabel = "Contact section",
+    className = "",
+    containerClassName = "",
+    textClassName = "",
+    buttonContainerClassName = "",
+    buttonClassName = "",
+    buttonTextClassName = "",
+}: ContactTextProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    return (
+        <section
+            aria-label={ariaLabel}
+            className={cls(
+                "relative py-20",
+                useInvertedBackground === "invertCard"
+                    ? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground"
+                    : "w-full",
+                useInvertedBackground === "invertDefault" && "bg-foreground",
+                className
+            )}
+        >
+            <div className={cls("relative w-content-width mx-auto card rounded-theme-capped py-20 px-10", containerClassName)}>
+                <div className="relative z-1 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 gap-4", 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>
+        </section>
+    );
+};
+
+ContactText.displayName = "ContactText";
+
+export default memo(ContactText);
diff --git a/src/components/sections/faq/FaqBase.tsx b/src/components/sections/faq/FaqBase.tsx
new file mode 100644
index 0000000..a634951
--- /dev/null
+++ b/src/components/sections/faq/FaqBase.tsx
@@ -0,0 +1,144 @@
+"use client";
+
+import { memo, useState, Fragment } from "react";
+import CardStackTextBox from "@/components/cardStack/CardStackTextBox";
+import Accordion from "@/components/Accordion";
+import { cls } from "@/lib/utils";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, TitleSegment } 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;
+    buttons?: ButtonConfig[];
+    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,
+    buttons,
+    textboxLayout,
+    useInvertedBackground,
+    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 handleToggle = (index: number) => {
+        setActiveIndex(activeIndex === index ? null : index);
+    };
+
+    return (
+        <section aria-label={ariaLabel} className={cls("relative py-20", useInvertedBackground === "invertCard" ? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground" : "w-full", useInvertedBackground === "invertDefault" && "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}
+                        buttons={buttons}
+                        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("flex flex-col gap-4", faqsContainerClassName)}>
+                    {faqs.map((faq, index) => (
+                        <Fragment 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", separatorClassName)} />
+                            )}
+                        </Fragment>
+                    ))}
+                </div>
+            </div>
+        </section>
+    );
+};
+
+FaqBase.displayName = "FaqBase";
+
+export default memo(FaqBase);
diff --git a/src/components/sections/faq/FaqDouble.tsx b/src/components/sections/faq/FaqDouble.tsx
new file mode 100644
index 0000000..0aa50e4
--- /dev/null
+++ b/src/components/sections/faq/FaqDouble.tsx
@@ -0,0 +1,169 @@
+"use client";
+
+import React, { memo, useState, useCallback } from "react";
+import CardStackTextBox from "@/components/cardStack/CardStackTextBox";
+import Accordion from "@/components/Accordion";
+import { cls } from "@/lib/utils";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, TitleSegment } 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;
+    buttons?: ButtonConfig[];
+    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,
+    buttons,
+    textboxLayout,
+    useInvertedBackground,
+    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 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", useInvertedBackground === "invertCard" ? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground" : "w-full", useInvertedBackground === "invertDefault" && "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}
+                        buttons={buttons}
+                        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("card p-4 rounded-theme-capped flex flex-col md:flex-row gap-4", 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>
+    );
+};
+
+FaqDouble.displayName = "FaqDouble";
+
+export default memo(FaqDouble);
diff --git a/src/components/sections/faq/FaqSplitMedia.tsx b/src/components/sections/faq/FaqSplitMedia.tsx
new file mode 100644
index 0000000..e3f146f
--- /dev/null
+++ b/src/components/sections/faq/FaqSplitMedia.tsx
@@ -0,0 +1,187 @@
+"use client";
+
+import { memo, useState, useCallback, Fragment } 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 type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, TitleSegment } 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;
+    buttons?: ButtonConfig[];
+    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,
+    buttons,
+    textboxLayout,
+    useInvertedBackground,
+    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 handleToggle = useCallback((index: number) => {
+        setActiveIndex((prevActiveIndex) =>
+            prevActiveIndex === index ? null : index
+        );
+    }, []);
+
+    return (
+        <section aria-label={ariaLabel} className={cls("relative py-20", useInvertedBackground === "invertCard" ? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground" : "w-full", useInvertedBackground === "invertDefault" && "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}
+                        buttons={buttons}
+                        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 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 className={cls("relative z-1 col-span-1 md:col-span-3 flex flex-col gap-4", faqsContainerClassName)}>
+                        {faqs.map((faq, index) => (
+                            <Fragment 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", separatorClassName)} />
+                                )}
+                            </Fragment>
+                        ))}
+                    </div>
+                    {mediaPosition === "right" && (
+                        <div 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>
+    );
+};
+
+FaqSplitMedia.displayName = "FaqSplitMedia";
+
+export default memo(FaqSplitMedia);
diff --git a/src/components/sections/faq/FaqSplitText.tsx b/src/components/sections/faq/FaqSplitText.tsx
new file mode 100644
index 0000000..b5746ef
--- /dev/null
+++ b/src/components/sections/faq/FaqSplitText.tsx
@@ -0,0 +1,152 @@
+"use client";
+
+import { memo, useState, useCallback, Fragment } 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 type { AnimationType } from "@/components/text/types";
+import type { ButtonConfig } from "@/components/cardStack/types";
+
+interface FaqItem {
+    id: string;
+    title: string;
+    content: string;
+}
+
+interface FaqSplitTextProps {
+    faqs: FaqItem[];
+    sideTitle: string;
+    sideDescription?: string;
+    buttons?: ButtonConfig[];
+    textPosition?: "left" | "right";
+    useInvertedBackground: "noInvert" | "invertDefault" | "invertCard";
+    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,
+    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 shouldUseLightText = useInvertedBackground === "invertDefault" || useInvertedBackground === "invertCard";
+
+    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", shouldUseLightText ? "text-background" : "text-foreground", sideTitleClassName)}
+            />
+            {sideDescription && (
+                <TextAnimation
+                    type={theme.defaultTextAnimation as AnimationType}
+                    text={sideDescription}
+                    variant="words-trigger"
+                    className={cls("text-lg leading-[1.2]", shouldUseLightText ? "text-background" : "text-foreground", sideDescriptionClassName)}
+                />
+            )}
+            {buttons && buttons.length > 0 && (
+                <div className={cls("flex gap-4", 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 className={cls("w-full md:w-3/5 flex flex-col gap-4", faqsContainerClassName)}>
+            {faqs.map((faq, index) => (
+                <Fragment 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", separatorClassName)} />
+                    )}
+                </Fragment>
+            ))}
+        </div>
+    );
+
+    return (
+        <section aria-label={ariaLabel} className={cls("relative py-20", useInvertedBackground === "invertCard" ? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground" : "w-full", useInvertedBackground === "invertDefault" && "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>
+    );
+};
+
+FaqSplitText.displayName = "FaqSplitText";
+
+export default memo(FaqSplitText);
diff --git a/src/components/sections/feature/FeatureCardEight.tsx b/src/components/sections/feature/FeatureCardEight.tsx
new file mode 100644
index 0000000..0a6a6bc
--- /dev/null
+++ b/src/components/sections/feature/FeatureCardEight.tsx
@@ -0,0 +1,152 @@
+"use client";
+
+import React, { memo } from "react";
+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, TitleSegment } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type FeatureCard = {
+    id: number;
+    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;
+    buttons?: ButtonConfig[];
+    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,
+    buttons,
+    textboxLayout,
+    useInvertedBackground,
+    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}
+            buttons={buttons}
+            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) => (
+                <div
+                    key={feature.id}
+                    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-background rounded-full flex items-center justify-center",
+                            stepNumberClassName
+                        )}
+                    >
+                        <p className="text-sm truncate">
+                            {feature.id}
+                        </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>
+    );
+};
+
+FeatureCardEight.displayName = "FeatureCardEight";
+
+export default memo(FeatureCardEight);
diff --git a/src/components/sections/feature/FeatureCardEighteen.tsx b/src/components/sections/feature/FeatureCardEighteen.tsx
new file mode 100644
index 0000000..16ef37e
--- /dev/null
+++ b/src/components/sections/feature/FeatureCardEighteen.tsx
@@ -0,0 +1,187 @@
+"use client";
+
+import React, { memo } from "react";
+import CardStackTextBox from "@/components/cardStack/CardStackTextBox";
+import PricingFeatureList from "@/components/shared/PricingFeatureList";
+import MediaContent from "@/components/shared/MediaContent";
+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, CardAnimationType, TitleSegment } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type ComparisonItem = {
+    title: string;
+    items: string[];
+    imageSrc?: string;
+    videoSrc?: string;
+    imageAlt?: string;
+    videoAriaLabel?: string;
+};
+
+interface FeatureCardEighteenProps {
+    negativeCard: ComparisonItem;
+    positiveCard: ComparisonItem;
+    animationType: CardAnimationType;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    buttons?: ButtonConfig[];
+    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;
+    cardMediaWrapperClassName?: string;
+    cardMediaClassName?: string;
+    cardTitleClassName?: string;
+    itemsListClassName?: string;
+    itemClassName?: string;
+    itemIconClassName?: string;
+    itemTextClassName?: string;
+}
+
+const FeatureCardEighteen = ({
+    negativeCard,
+    positiveCard,
+    animationType,
+    title,
+    titleSegments,
+    description,
+    textboxLayout,
+    useInvertedBackground,
+    tag,
+    tagIcon,
+    buttons,
+    ariaLabel = "Feature comparison section",
+    className = "",
+    containerClassName = "",
+    textBoxTitleClassName = "",
+    titleImageWrapperClassName = "",
+    titleImageClassName = "",
+    textBoxDescriptionClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+    gridClassName = "",
+    cardClassName = "",
+    cardMediaWrapperClassName = "",
+    cardMediaClassName = "",
+    cardTitleClassName = "",
+    itemsListClassName = "",
+    itemClassName = "",
+    itemIconClassName = "",
+    itemTextClassName = "",
+}: FeatureCardEighteenProps) => {
+    const theme = useTheme();
+    const shouldCardUseLightText = shouldUseInvertedText("invertDefault", theme.cardStyle) || shouldUseInvertedText("invertCard", theme.cardStyle);
+    const { itemRefs } = useCardAnimation({ animationType, itemCount: 2 });
+
+    const cards = [
+        { ...negativeCard, variant: "negative" as const },
+        { ...positiveCard, variant: "positive" as const },
+    ];
+
+    return (
+        <section
+            aria-label={ariaLabel}
+            className={cls(
+                "relative py-20",
+                useInvertedBackground === "invertCard"
+                    ? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground"
+                    : "w-full",
+                useInvertedBackground === "invertDefault" && "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}
+                    buttons={buttons}
+                    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(
+                    "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")}>
+                                <div className={cls("relative w-full aspect-[4/3] rounded-theme-capped overflow-hidden", cardMediaWrapperClassName)}>
+                                    <MediaContent
+                                        imageSrc={card.imageSrc}
+                                        videoSrc={card.videoSrc}
+                                        imageAlt={card.imageAlt || card.title}
+                                        videoAriaLabel={card.videoAriaLabel || card.title}
+                                        imageClassName={cls("w-full h-full object-cover", cardMediaClassName)}
+                                    />
+                                </div>
+                                <h3 className={cls(
+                                    "text-3xl font-medium",
+                                    shouldCardUseLightText ? "text-background" : "text-foreground",
+                                    cardTitleClassName
+                                )}>
+                                    {card.title}
+                                </h3>
+                                <PricingFeatureList
+                                    features={card.items}
+                                    icon={card.variant === "positive" ? Check : X}
+                                    shouldUseLightText={shouldCardUseLightText}
+                                    className={itemsListClassName}
+                                    featureItemClassName={itemClassName}
+                                    featureIconWrapperClassName=""
+                                    featureIconClassName={itemIconClassName}
+                                    featureTextClassName={cls("truncate", itemTextClassName)}
+                                />
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </section>
+    );
+};
+
+FeatureCardEighteen.displayName = "FeatureCardEighteen";
+
+export default memo(FeatureCardEighteen);
diff --git a/src/components/sections/feature/FeatureCardEleven.tsx b/src/components/sections/feature/FeatureCardEleven.tsx
new file mode 100644
index 0000000..8e5f7d8
--- /dev/null
+++ b/src/components/sections/feature/FeatureCardEleven.tsx
@@ -0,0 +1,164 @@
+"use client";
+
+import React, { memo } from "react";
+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 } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type FeatureCard = {
+    id: number;
+    title: string;
+    description: string;
+    imageSrc?: string;
+    videoSrc?: string;
+    imageAlt?: string;
+    videoAriaLabel?: string;
+};
+
+interface FeatureCardElevenProps {
+    features: FeatureCard[];
+    animationType: CardAnimationType;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    usePrimaryButtonImage: boolean;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    buttons?: ButtonConfig[];
+    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;
+    textCardClassName?: string;
+    imageCardClassName?: string;
+    stepNumberClassName?: string;
+    cardTitleClassName?: string;
+    cardDescriptionClassName?: string;
+    imageClassName?: string;
+}
+
+const FeatureCardEleven = ({
+    features,
+    animationType,
+    title,
+    titleSegments,
+    description,
+    textboxLayout,
+    useInvertedBackground,
+    usePrimaryButtonImage,
+    tag,
+    tagIcon,
+    buttons,
+    ariaLabel = "Feature section",
+    className = "",
+    containerClassName = "",
+    textBoxTitleClassName = "",
+    textBoxDescriptionClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+    titleImageWrapperClassName = "",
+    titleImageClassName = "",
+    cardContentClassName = "",
+    textCardClassName = "",
+    imageCardClassName = "",
+    stepNumberClassName = "",
+    cardTitleClassName = "",
+    cardDescriptionClassName = "",
+    imageClassName = "",
+}: FeatureCardElevenProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    return (
+        <CardList
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            buttons={buttons}
+            textboxLayout={textboxLayout}
+            animationType={animationType}
+            useInvertedBackground={useInvertedBackground}
+            disableCardWrapper={true}
+            className={className}
+            containerClassName={containerClassName}
+            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={feature.id}
+                    className={cls("w-full min-h-0 h-full flex flex-col justify-between items-center gap-6", index % 2 === 0 ? "md:flex-row" : "md:flex-row-reverse", cardContentClassName)}
+                >
+                    <div className={cls("w-full md:w-1/2 min-w-0 h-fit md:h-full md:aspect-square card rounded-theme-capped p-6 md:p-15 flex flex-col justify-center", textCardClassName)}>
+                        <div className="relative z-1 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-background rounded-full flex items-center justify-center",
+                                    stepNumberClassName
+                                )}
+                            >
+                                <p className="text-sm truncate">
+                                    {feature.id}
+                                </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>
+                        </div>
+                    </div>
+                    <div
+                        className={cls(
+                            "relative w-full md:w-1/2 aspect-square overflow-hidden rounded-theme-capped",
+                            usePrimaryButtonImage ? "primary-button p-10 md:p-20" : "card",
+                            imageCardClassName
+                        )}
+                    >
+                        <MediaContent
+                            imageSrc={feature.imageSrc}
+                            videoSrc={feature.videoSrc}
+                            imageAlt={feature.imageAlt || feature.title}
+                            videoAriaLabel={feature.videoAriaLabel || feature.title}
+                            imageClassName={cls("relative z-1 w-full h-full object-cover", imageClassName)}
+                        />
+                    </div>
+                </div>
+            ))}
+        </CardList>
+    );
+};
+
+FeatureCardEleven.displayName = "FeatureCardEleven";
+
+export default memo(FeatureCardEleven);
diff --git a/src/components/sections/feature/FeatureCardFifteen.tsx b/src/components/sections/feature/FeatureCardFifteen.tsx
new file mode 100644
index 0000000..9c2cb8d
--- /dev/null
+++ b/src/components/sections/feature/FeatureCardFifteen.tsx
@@ -0,0 +1,179 @@
+"use client";
+
+import React, { memo } from "react";
+import AutoCarousel from "@/components/cardStack/layouts/carousels/AutoCarousel";
+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 { CardAnimationType, ButtonConfig, TitleSegment, TextboxLayout, InvertedBackground } from "@/components/cardStack/types";
+
+type Feature = {
+    id: string;
+    title: string;
+    description: string;
+    imageSrc?: string;
+    videoSrc?: string;
+    imageAlt?: string;
+    videoAriaLabel?: string;
+};
+
+interface FeatureCardFifteenProps {
+    features: Feature[];
+    animationType: CardAnimationType;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    buttons?: ButtonConfig[];
+    speed?: number;
+    topMarqueeDirection?: "left" | "right";
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    carouselClassName?: string;
+    bottomCarouselClassName?: string;
+    cardClassName?: string;
+    mediaClassName?: string;
+    featureTitleClassName?: string;
+    featureDescriptionClassName?: string;
+    textBoxClassName?: string;
+    textBoxTitleClassName?: string;
+    textBoxTitleImageWrapperClassName?: string;
+    textBoxTitleImageClassName?: string;
+    textBoxDescriptionClassName?: string;
+    textBoxTagClassName?: string;
+    textBoxButtonContainerClassName?: string;
+    textBoxButtonClassName?: string;
+    textBoxButtonTextClassName?: string;
+}
+
+interface FeatureCardProps {
+    feature: Feature;
+    useInvertedBackground: "noInvert" | "invertDefault" | "invertCard";
+    cardClassName?: string;
+    mediaClassName?: string;
+    featureTitleClassName?: string;
+    featureDescriptionClassName?: string;
+}
+
+const FeatureCard = memo(({
+    feature,
+    useInvertedBackground,
+    cardClassName = "",
+    mediaClassName = "",
+    featureTitleClassName = "",
+    featureDescriptionClassName = "",
+}: FeatureCardProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    return (
+        <div className={cls("relative h-full min-h-0 flex flex-col gap-4", cardClassName)}>
+            <MediaContent
+                imageSrc={feature.imageSrc}
+                videoSrc={feature.videoSrc}
+                imageAlt={feature.imageAlt || feature.title}
+                videoAriaLabel={feature.videoAriaLabel || feature.title}
+                imageClassName={cls("w-full aspect-square object-cover rounded-theme", mediaClassName)}
+            />
+            <div className="flex flex-col gap-1">
+                <h3 className={cls("relative z-1 text-lg font-medium leading-tight", shouldUseLightText ? "text-background" : "text-foreground", featureTitleClassName)}>
+                    {feature.title}
+                </h3>
+                <p className={cls("relative z-1 text-base leading-tight truncate", shouldUseLightText ? "text-background/75" : "text-foreground/75", featureDescriptionClassName)}>
+                    {feature.description}
+                </p>
+            </div>
+        </div>
+    );
+});
+
+FeatureCard.displayName = "FeatureCard";
+
+const FeatureCardFifteen = ({
+    features,
+    animationType,
+    title,
+    titleSegments,
+    description,
+    textboxLayout,
+    useInvertedBackground,
+    tag,
+    tagIcon,
+    buttons,
+    speed = 40,
+    topMarqueeDirection = "left",
+    ariaLabel = "Features section",
+    className = "",
+    containerClassName = "",
+    carouselClassName = "",
+    bottomCarouselClassName = "",
+    cardClassName = "",
+    mediaClassName = "",
+    featureTitleClassName = "",
+    featureDescriptionClassName = "",
+    textBoxClassName = "",
+    textBoxTitleClassName = "",
+    textBoxTitleImageWrapperClassName = "",
+    textBoxTitleImageClassName = "",
+    textBoxDescriptionClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+}: FeatureCardFifteenProps) => {
+    return (
+        <AutoCarousel
+            speed={speed}
+            uniformGridCustomHeightClasses="min-h-none"
+            animationType={animationType}
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            buttons={buttons}
+            textboxLayout={textboxLayout}
+            useInvertedBackground={useInvertedBackground}
+            showTextBox={true}
+            dualMarquee={true}
+            topMarqueeDirection={topMarqueeDirection}
+            carouselClassName={carouselClassName}
+            bottomCarouselClassName={bottomCarouselClassName}
+            marqueeGapClassName="gap-8"
+            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!"
+        >
+            {features.map((feature, index) => (
+                <FeatureCard
+                    key={`${feature.id}-${index}`}
+                    feature={feature}
+                    useInvertedBackground={useInvertedBackground}
+                    cardClassName={cardClassName}
+                    mediaClassName={mediaClassName}
+                    featureTitleClassName={featureTitleClassName}
+                    featureDescriptionClassName={featureDescriptionClassName}
+                />
+            ))}
+        </AutoCarousel>
+    );
+};
+
+FeatureCardFifteen.displayName = "FeatureCardFifteen";
+
+export default memo(FeatureCardFifteen);
diff --git a/src/components/sections/feature/FeatureCardFive.tsx b/src/components/sections/feature/FeatureCardFive.tsx
new file mode 100644
index 0000000..f1615d7
--- /dev/null
+++ b/src/components/sections/feature/FeatureCardFive.tsx
@@ -0,0 +1,146 @@
+"use client";
+
+import React, { memo } from "react";
+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, CardAnimationType, ContainerStyle, TitleSegment } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type FeatureCard = {
+    title: string;
+    icon: LucideIcon;
+};
+
+interface FeatureCardFiveProps {
+    features: FeatureCard[];
+    carouselMode?: "auto" | "buttons";
+    uniformGridCustomHeightClasses?: string;
+    animationType: CardAnimationType;
+    containerStyle: ContainerStyle;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    buttons?: ButtonConfig[];
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    showIconBoxBackground?: boolean;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    cardClassName?: string;
+    iconClassName?: string;
+    textBoxTitleClassName?: string;
+    textBoxTitleImageWrapperClassName?: string;
+    textBoxTitleImageClassName?: string;
+    textBoxDescriptionClassName?: string;
+    cardTitleClassName?: string;
+    gridClassName?: string;
+    carouselClassName?: string;
+    controlsClassName?: string;
+    textBoxClassName?: string;
+    textBoxTagClassName?: string;
+    textBoxButtonContainerClassName?: string;
+    textBoxButtonClassName?: string;
+    textBoxButtonTextClassName?: string;
+}
+
+const FeatureCardFive = ({
+    features,
+    carouselMode = "buttons",
+    uniformGridCustomHeightClasses,
+    animationType,
+    containerStyle,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    buttons,
+    textboxLayout,
+    useInvertedBackground,
+    showIconBoxBackground = true,
+    ariaLabel = "Feature section",
+    className = "",
+    containerClassName = "",
+    cardClassName = "",
+    iconClassName = "",
+    textBoxTitleClassName = "",
+    textBoxTitleImageWrapperClassName = "",
+    textBoxTitleImageClassName = "",
+    textBoxDescriptionClassName = "",
+    cardTitleClassName = "",
+    gridClassName = "",
+    carouselClassName = "",
+    controlsClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+}: FeatureCardFiveProps) => {
+    const theme = useTheme();
+    const shouldUseLightText =
+        containerStyle === "card"
+            ? shouldUseInvertedText("invertDefault", theme.cardStyle) || shouldUseInvertedText("invertCard", theme.cardStyle)
+            : shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    return (
+        <CardStack
+            mode={carouselMode}
+            gridVariant="uniform-all-items-equal"
+            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+            animationType={animationType}
+            containerStyle={containerStyle}
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            buttons={buttons}
+            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 Icon = feature.icon;
+                return (
+                    <div
+                        key={`${feature.title}-${index}`}
+                        className={cls("relative card flex flex-col justify-between items-center p-6 rounded-theme-capped h-full min-h-0", cardClassName)}
+                    >
+                        <div className={cls("relative z-1 flex-1 flex items-center justify-center", iconClassName)} aria-hidden="true">
+                            <div className={cls("h-20 w-auto aspect-square flex items-center justify-center rounded-theme", showIconBoxBackground && "primary-button")}>
+                                <Icon className={cls(showIconBoxBackground ? "h-1/2 w-1/2 text-background" : "h-full w-full text-foreground")} strokeWidth={1} />
+                            </div>
+                        </div>
+                        <h3 className={cls("relative z-1 text-xl font-medium self-start", shouldUseLightText && "text-background", cardTitleClassName)}>
+                            {feature.title}
+                        </h3>
+                    </div>
+                );
+            })}
+        </CardStack>
+    );
+};
+
+FeatureCardFive.displayName = "FeatureCardFive";
+
+export default memo(FeatureCardFive);
diff --git a/src/components/sections/feature/FeatureCardFour.tsx b/src/components/sections/feature/FeatureCardFour.tsx
new file mode 100644
index 0000000..f459abf
--- /dev/null
+++ b/src/components/sections/feature/FeatureCardFour.tsx
@@ -0,0 +1,148 @@
+"use client";
+
+import React, { memo } from "react";
+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, CardAnimationType, ContainerStyle, TitleSegment } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type FeatureCard = {
+    title: string;
+    description: string;
+    icon: LucideIcon;
+};
+
+interface FeatureCardFourProps {
+    features: FeatureCard[];
+    carouselMode?: "auto" | "buttons";
+    animationType: CardAnimationType;
+    containerStyle: ContainerStyle;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    buttons?: ButtonConfig[];
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    cardClassName?: 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 FeatureCardFour = ({
+    features,
+    carouselMode = "buttons",
+    animationType,
+    containerStyle,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    buttons,
+    textboxLayout,
+    useInvertedBackground,
+    ariaLabel = "Feature section",
+    className = "",
+    containerClassName = "",
+    cardClassName = "",
+    iconClassName = "",
+    textBoxTitleClassName = "",
+    textBoxTitleImageWrapperClassName = "",
+    textBoxTitleImageClassName = "",
+    textBoxDescriptionClassName = "",
+    cardTitleClassName = "",
+    cardDescriptionClassName = "",
+    gridClassName = "",
+    carouselClassName = "",
+    controlsClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+}: FeatureCardFourProps) => {
+    const theme = useTheme();
+    const shouldUseLightText =
+        containerStyle === "card"
+            ? shouldUseInvertedText("invertDefault", theme.cardStyle) || shouldUseInvertedText("invertCard", theme.cardStyle)
+            : shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    return (
+        <CardStack
+            mode={carouselMode}
+            gridVariant="uniform-all-items-equal"
+            uniformGridCustomHeightClasses="min-h-0"
+            animationType={animationType}
+            containerStyle={containerStyle}
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            buttons={buttons}
+            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 Icon = feature.icon;
+                return (
+                    <div
+                        key={`${feature.title}-${index}`}
+                        className={cls("relative h-full min-h-0 card flex flex-col justify-between gap-10 p-6 rounded-theme-capped", cardClassName)}
+                    >
+                        <p className={cls("relative z-1 text-xl leading-[1.1]", shouldUseLightText ? "text-background" : "text-foreground", cardDescriptionClassName)}>
+                            {feature.description}
+                        </p>
+                        <div className="relative z-1 flex items-center gap-3">
+                            <div className={cls("primary-button h-10 aspect-square w-auto flex items-center justify-center rounded-theme flex-shrink-0", iconClassName)} aria-hidden="true">
+                                <Icon className="h-1/2 w-auto text-background" strokeWidth={1.5} />
+                            </div>
+                            <h3 className={cls("text-xl font-medium leading-[1.1]", shouldUseLightText && "text-background", cardTitleClassName)}>
+                                {feature.title}
+                            </h3>
+                        </div>
+                    </div>
+                );
+            })}
+        </CardStack>
+    );
+};
+
+FeatureCardFour.displayName = "FeatureCardFour";
+
+export default memo(FeatureCardFour);
diff --git a/src/components/sections/feature/FeatureCardFourteen.tsx b/src/components/sections/feature/FeatureCardFourteen.tsx
new file mode 100644
index 0000000..f454ab5
--- /dev/null
+++ b/src/components/sections/feature/FeatureCardFourteen.tsx
@@ -0,0 +1,172 @@
+"use client";
+
+import { memo } from "react";
+import FullWidthCarousel from "@/components/cardStack/layouts/carousels/FullWidthCarousel";
+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, TitleSegment, TextboxLayout, InvertedBackground } from "@/components/cardStack/types";
+
+type Feature = {
+    id: string;
+    title: string;
+    description: string;
+    imageSrc?: string;
+    videoSrc?: string;
+    imageAlt?: string;
+    videoAriaLabel?: string;
+};
+
+interface FeatureCardFourteenProps {
+    features: Feature[];
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    buttons?: ButtonConfig[];
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    cardClassName?: string;
+    textBoxTitleClassName?: string;
+    textBoxTitleImageWrapperClassName?: string;
+    textBoxTitleImageClassName?: string;
+    textBoxDescriptionClassName?: string;
+    cardImageClassName?: string;
+    cardTitleClassName?: string;
+    cardDescriptionClassName?: string;
+    cardContentClassName?: string;
+    carouselClassName?: string;
+    dotsClassName?: string;
+    textBoxClassName?: string;
+    textBoxTagClassName?: string;
+    textBoxButtonContainerClassName?: string;
+    textBoxButtonClassName?: string;
+    textBoxButtonTextClassName?: string;
+}
+
+interface FeatureCardProps {
+    feature: Feature;
+    shouldUseLightText: boolean;
+    cardClassName?: string;
+    imageClassName?: string;
+    cardTitleClassName?: string;
+    cardDescriptionClassName?: string;
+    cardContentClassName?: string;
+}
+
+const FeatureCard = memo(({
+    feature,
+    shouldUseLightText,
+    cardClassName = "",
+    imageClassName = "",
+    cardTitleClassName = "",
+    cardDescriptionClassName = "",
+    cardContentClassName = "",
+}: FeatureCardProps) => {
+    return (
+        <div className={cls("relative h-full w-full rounded-theme-capped overflow-hidden", cardClassName)}>
+            <MediaContent
+                imageSrc={feature.imageSrc}
+                videoSrc={feature.videoSrc}
+                imageAlt={feature.imageAlt}
+                videoAriaLabel={feature.videoAriaLabel}
+                imageClassName={cls("relative w-full h-full aspect-[10/16] md:aspect-video object-cover !rounded-none", imageClassName)}
+            />
+            <div className={cls("absolute! md:max-w-[var(--width-30)] card backdrop-blur-xs rounded-theme-capped bottom-8 left-8 right-8 md:right-auto p-6", cardContentClassName)}>
+                <div className="w-full min-w-0 flex flex-col gap-1">
+                    <h2 className={cls("text-3xl md:text-4xl 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>
+                </div>
+            </div>
+        </div>
+    );
+});
+
+FeatureCard.displayName = "FeatureCard";
+
+const FeatureCardFourteen = ({
+    features,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    buttons,
+    textboxLayout,
+    useInvertedBackground,
+    ariaLabel = "Features section",
+    className = "",
+    containerClassName = "",
+    cardClassName = "",
+    textBoxTitleClassName = "",
+    textBoxTitleImageWrapperClassName = "",
+    textBoxTitleImageClassName = "",
+    textBoxDescriptionClassName = "",
+    cardImageClassName = "",
+    cardTitleClassName = "",
+    cardDescriptionClassName = "",
+    cardContentClassName = "",
+    carouselClassName = "",
+    dotsClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+}: FeatureCardFourteenProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    return (
+        <FullWidthCarousel
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            buttons={buttons}
+            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}
+        >
+            {features.map((feature, index) => (
+                <FeatureCard
+                    key={`${feature.id}-${index}`}
+                    feature={feature}
+                    shouldUseLightText={shouldUseLightText}
+                    cardClassName={cardClassName}
+                    imageClassName={cardImageClassName}
+                    cardTitleClassName={cardTitleClassName}
+                    cardDescriptionClassName={cardDescriptionClassName}
+                    cardContentClassName={cardContentClassName}
+                />
+            ))}
+        </FullWidthCarousel>
+    );
+};
+
+FeatureCardFourteen.displayName = "FeatureCardFourteen";
+
+export default memo(FeatureCardFourteen);
diff --git a/src/components/sections/feature/FeatureCardNine.tsx b/src/components/sections/feature/FeatureCardNine.tsx
new file mode 100644
index 0000000..d02ae47
--- /dev/null
+++ b/src/components/sections/feature/FeatureCardNine.tsx
@@ -0,0 +1,200 @@
+"use client";
+
+import React, { memo, useMemo } from "react";
+import TimelinePhoneView from "@/components/cardStack/layouts/timelines/TimelinePhoneView";
+import { cls } from "@/lib/utils";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, TitleSegment } from "@/components/cardStack/types";
+import type { TimelinePhoneViewItem } from "@/components/cardStack/hooks/usePhoneAnimations";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type FeaturePhone = {
+    imageAlt?: string;
+    videoAriaLabel?: string;
+} & (
+        | { imageSrc: string; videoSrc?: never }
+        | { videoSrc: string; imageSrc?: never }
+    );
+
+type FeatureCard = {
+    id: number;
+    title: string;
+    description: string;
+    phoneOne: FeaturePhone;
+    phoneTwo: FeaturePhone;
+};
+
+interface FeatureCardNineProps {
+    features: FeatureCard[];
+    showStepNumbers: boolean;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    buttons?: ButtonConfig[];
+    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;
+    desktopContainerClassName?: string;
+    mobileContainerClassName?: string;
+    desktopContentClassName?: string;
+    desktopWrapperClassName?: string;
+    mobileWrapperClassName?: string;
+    phoneFrameClassName?: string;
+    mobilePhoneFrameClassName?: string;
+    featureContentClassName?: string;
+    stepNumberClassName?: string;
+    featureTitleClassName?: string;
+    featureDescriptionClassName?: string;
+}
+
+interface FeatureContentProps {
+    feature: FeatureCard;
+    showStepNumbers: boolean;
+    useInvertedBackground: InvertedBackground;
+    featureContentClassName: string;
+    stepNumberClassName: string;
+    featureTitleClassName: string;
+    featureDescriptionClassName: string;
+}
+
+const FeatureContent = ({
+    feature,
+    showStepNumbers,
+    useInvertedBackground,
+    featureContentClassName,
+    stepNumberClassName,
+    featureTitleClassName,
+    featureDescriptionClassName,
+}: FeatureContentProps) => (
+    <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-background rounded-full flex items-center justify-center",
+                    stepNumberClassName
+                )}
+            >
+                <p className="text-sm truncate">
+                    {feature.id}
+                </p>
+            </div>
+        )}
+        <h2 className={cls("text-5xl font-medium leading-[1.15] text-balance", (useInvertedBackground === "invertDefault" || useInvertedBackground === "invertCard") && "text-background", featureTitleClassName)}>
+            {feature.title}
+        </h2>
+        <p className={cls("text-base leading-[1.2] text-balance", (useInvertedBackground === "invertDefault" || useInvertedBackground === "invertCard") ? "text-background/75" : "text-foreground/75", featureDescriptionClassName)}>
+            {feature.description}
+        </p>
+    </div>
+);
+
+const FeatureCardNine = ({
+    features,
+    showStepNumbers,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    buttons,
+    textboxLayout,
+    useInvertedBackground,
+    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 = "",
+}: FeatureCardNineProps) => {
+    const items: TimelinePhoneViewItem[] = useMemo(() => features.map((feature, index) => ({
+        trigger: `trigger-${index}`,
+        content: (
+            <FeatureContent
+                feature={feature}
+                showStepNumbers={showStepNumbers}
+                useInvertedBackground={useInvertedBackground}
+                featureContentClassName={featureContentClassName}
+                stepNumberClassName={stepNumberClassName}
+                featureTitleClassName={featureTitleClassName}
+                featureDescriptionClassName={featureDescriptionClassName}
+            />
+        ),
+        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`,
+    })), [features, showStepNumbers, useInvertedBackground, featureContentClassName, stepNumberClassName, featureTitleClassName, featureDescriptionClassName]);
+
+    return (
+        <TimelinePhoneView
+            items={items}
+            showTextBox={true}
+            showDivider={true}
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            buttons={buttons}
+            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}
+        />
+    );
+};
+
+FeatureCardNine.displayName = "FeatureCardNine";
+
+export default memo(FeatureCardNine);
diff --git a/src/components/sections/feature/FeatureCardNineteen.tsx b/src/components/sections/feature/FeatureCardNineteen.tsx
new file mode 100644
index 0000000..a54419f
--- /dev/null
+++ b/src/components/sections/feature/FeatureCardNineteen.tsx
@@ -0,0 +1,194 @@
+"use client";
+
+import React, { memo } from "react";
+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, TitleSegment } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type FeatureCard = {
+    id: number;
+    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;
+    buttons?: ButtonConfig[];
+    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,
+    buttons,
+    textboxLayout,
+    useInvertedBackground,
+    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}
+            buttons={buttons}
+            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) => {
+                const stepNumber = String(feature.id).padStart(2, "0");
+                return (
+                    <div
+                        key={feature.id}
+                        className={cls("relative z-1 w-full min-h-0 h-full flex flex-col md:flex-row justify-between", 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-2xl 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 gap-4 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 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>
+    );
+};
+
+FeatureCardNineteen.displayName = "FeatureCardNineteen";
+
+export default memo(FeatureCardNineteen);
diff --git a/src/components/sections/feature/FeatureCardOne.tsx b/src/components/sections/feature/FeatureCardOne.tsx
new file mode 100644
index 0000000..b78f2c4
--- /dev/null
+++ b/src/components/sections/feature/FeatureCardOne.tsx
@@ -0,0 +1,178 @@
+"use client";
+
+import React, { memo } from "react";
+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, CardAnimationType, ContainerStyle, TitleSegment } from "@/components/cardStack/types";
+
+type FeatureCardOneGridVariant = Exclude<GridVariant, "uniform-alternating-heights" | "uniform-alternating-heights-inverted">;
+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";
+  gridVariant: FeatureCardOneGridVariant;
+  uniformGridCustomHeightClasses?: string;
+  animationType: CardAnimationType;
+  containerStyle: ContainerStyle;
+  title: string;
+  titleSegments?: TitleSegment[];
+  description: string;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  buttons?: ButtonConfig[];
+  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",
+  gridVariant,
+  uniformGridCustomHeightClasses,
+  animationType,
+  containerStyle,
+  title,
+  titleSegments,
+  description,
+  tag,
+  tagIcon,
+  buttons,
+  textboxLayout,
+  useInvertedBackground,
+  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 =
+    containerStyle === "card"
+      ? shouldUseInvertedText("invertDefault", theme.cardStyle) || shouldUseInvertedText("invertCard", theme.cardStyle)
+      : shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+  return (
+    <CardStack
+      mode={carouselMode}
+      gridVariant={gridVariant}
+      uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+      animationType={animationType}
+      containerStyle={containerStyle}
+      title={title}
+      titleSegments={titleSegments}
+      description={description}
+      tag={tag}
+      tagIcon={tagIcon}
+      buttons={buttons}
+      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", shouldUseLightText && "text-background", cardTitleClassName)}>
+              {feature.title}
+            </h3>
+            <p className={cls("text-sm leading-[1.1]", 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>
+  );
+};
+
+FeatureCardOne.displayName = "FeatureCardOne";
+
+export default memo(FeatureCardOne);
diff --git a/src/components/sections/feature/FeatureCardSeven.tsx b/src/components/sections/feature/FeatureCardSeven.tsx
new file mode 100644
index 0000000..8b944cc
--- /dev/null
+++ b/src/components/sections/feature/FeatureCardSeven.tsx
@@ -0,0 +1,160 @@
+"use client";
+
+import React, { memo } from "react";
+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 } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type FeatureCard = {
+    id: number;
+    title: string;
+    description: string;
+    imageSrc?: string;
+    videoSrc?: string;
+    imageAlt?: string;
+    videoAriaLabel?: string;
+};
+
+interface FeatureCardSevenProps {
+    features: FeatureCard[];
+    animationType: CardAnimationType;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    buttons?: ButtonConfig[];
+    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;
+}
+
+const FeatureCardSeven = ({
+    features,
+    animationType,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    buttons,
+    textboxLayout,
+    useInvertedBackground,
+    ariaLabel = "Feature section",
+    className = "",
+    containerClassName = "",
+    cardClassName = "",
+    textBoxTitleClassName = "",
+    textBoxDescriptionClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+    titleImageWrapperClassName = "",
+    titleImageClassName = "",
+    cardContentClassName = "",
+    stepNumberClassName = "",
+    cardTitleClassName = "",
+    cardDescriptionClassName = "",
+    imageContainerClassName = "",
+    imageClassName = "",
+}: FeatureCardSevenProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    return (
+        <CardList
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            buttons={buttons}
+            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={feature.id}
+                    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-background rounded-full flex items-center justify-center",
+                                    stepNumberClassName
+                                )}
+                            >
+                                <p className="text-sm truncate">
+                                    {feature.id}
+                                </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>
+                        </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>
+    );
+};
+
+FeatureCardSeven.displayName = "FeatureCardSeven";
+
+export default memo(FeatureCardSeven);
diff --git a/src/components/sections/feature/FeatureCardSeventeen.tsx b/src/components/sections/feature/FeatureCardSeventeen.tsx
new file mode 100644
index 0000000..5fa2f11
--- /dev/null
+++ b/src/components/sections/feature/FeatureCardSeventeen.tsx
@@ -0,0 +1,163 @@
+"use client";
+
+import { Fragment, memo } from "react";
+import CardList from "@/components/cardStack/CardList";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, CardAnimationType, TitleSegment } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+interface FeatureCard {
+  id: string;
+  icon: LucideIcon;
+  text: string;
+}
+
+interface FeatureCardSeventeenProps {
+  features: FeatureCard[];
+  animationType: CardAnimationType;
+  variant: "card" | "border";
+  useUncappedRounding: boolean;
+  useSplitLayout: boolean;
+  title: string;
+  titleSegments?: TitleSegment[];
+  description: string;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  buttons?: ButtonConfig[];
+  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;
+  featureContainerClassName?: string;
+  featureTextClassName?: string;
+}
+
+const FeatureCardSeventeen = ({
+  features,
+  animationType,
+  variant,
+  useUncappedRounding,
+  useSplitLayout,
+  title,
+  titleSegments,
+  description,
+  tag,
+  tagIcon,
+  buttons,
+  textboxLayout,
+  useInvertedBackground,
+  ariaLabel = "Feature section",
+  className = "",
+  containerClassName = "",
+  cardClassName = "",
+  textBoxTitleClassName = "",
+  textBoxDescriptionClassName = "",
+  textBoxClassName = "",
+  textBoxTagClassName = "",
+  textBoxButtonContainerClassName = "",
+  textBoxButtonClassName = "",
+  textBoxButtonTextClassName = "",
+  titleImageWrapperClassName = "",
+  titleImageClassName = "",
+  featureContainerClassName = "",
+  featureTextClassName = "",
+}: FeatureCardSeventeenProps) => {
+  const theme = useTheme();
+  const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+  return (
+    <CardList
+      title={title}
+      titleSegments={titleSegments}
+      description={description}
+      tag={tag}
+      tagIcon={tagIcon}
+      buttons={buttons}
+      textboxLayout={textboxLayout}
+      animationType={animationType}
+      variant={variant}
+      useUncappedRounding={useUncappedRounding}
+      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) => {
+        const IconBox = (
+          <div className="h-(--text-6xl) md:h-(--text-9xl) w-auto aspect-square primary-button flex items-center justify-center rounded-theme-capped">
+            <feature.icon className="w-1/2 h-1/2" aria-hidden="true" />
+          </div>
+        );
+
+        const TextContent = (
+          <p
+            className={cls(
+              "min-w-0 max-w-full text-6xl md:text-9xl font-medium leading-[1.175] truncate",
+              !useSplitLayout && "text-center",
+              variant === "border"
+                ? (useInvertedBackground !== "noInvert" ? "text-background" : "text-foreground")
+                : (shouldUseLightText ? "text-background" : "text-foreground"),
+              featureTextClassName
+            )}
+          >
+            {feature.text}
+          </p>
+        );
+
+        return (
+          <Fragment key={feature.id}>
+            <div
+              className={cls(
+                "w-full flex items-center justify-center gap-6",
+                variant === "card" ? "p-6 md:p-15" : "pb-6 md:pb-10",
+                featureContainerClassName
+              )}
+            >
+              {useSplitLayout ? (
+                <>
+                  <div className="md:w-1/2">{IconBox}</div>
+                  <div className="w-full min-w-0 md:w-1/2">{TextContent}</div>
+                </>
+              ) : (
+                <>
+                  {IconBox}
+                  {TextContent}
+                </>
+              )}
+            </div>
+            {variant === "border" && index === features.length - 1 && (
+              <div className="h-px bg-accent/75" />
+            )}
+          </Fragment>
+        );
+      })}
+    </CardList>
+  );
+};
+
+FeatureCardSeventeen.displayName = "FeatureCardSeventeen";
+
+export default memo(FeatureCardSeventeen);
diff --git a/src/components/sections/feature/FeatureCardSix.tsx b/src/components/sections/feature/FeatureCardSix.tsx
new file mode 100644
index 0000000..ddbf49d
--- /dev/null
+++ b/src/components/sections/feature/FeatureCardSix.tsx
@@ -0,0 +1,154 @@
+"use client";
+
+import React, { memo } from "react";
+import TimelineCardStack from "@/components/cardStack/layouts/timelines/TimelineCardStack";
+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, TitleSegment } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type FeatureCard = {
+    id: number;
+    title: string;
+    description: string;
+    imageSrc?: string;
+    videoSrc?: string;
+    imageAlt?: string;
+    videoAriaLabel?: string;
+};
+
+interface FeatureCardSixProps {
+    features: FeatureCard[];
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    buttons?: ButtonConfig[];
+    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;
+}
+
+const FeatureCardSix = ({
+    features,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    buttons,
+    textboxLayout,
+    useInvertedBackground,
+    ariaLabel = "Feature section",
+    className = "",
+    containerClassName = "",
+    textBoxTitleClassName = "",
+    textBoxDescriptionClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+    titleImageWrapperClassName = "",
+    titleImageClassName = "",
+    cardContentClassName = "",
+    stepNumberClassName = "",
+    cardTitleClassName = "",
+    cardDescriptionClassName = "",
+    imageContainerClassName = "",
+    imageClassName = "",
+}: FeatureCardSixProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    return (
+        <TimelineCardStack
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            buttons={buttons}
+            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) => (
+                <div
+                    key={feature.id}
+                    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-background rounded-full flex items-center justify-center",
+                                    stepNumberClassName
+                                )}
+                            >
+                                <p className="text-sm truncate">
+                                    {feature.id}
+                                </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>
+                        </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>
+    );
+};
+
+FeatureCardSix.displayName = "FeatureCardSix";
+
+export default memo(FeatureCardSix);
diff --git a/src/components/sections/feature/FeatureCardSixteen.tsx b/src/components/sections/feature/FeatureCardSixteen.tsx
new file mode 100644
index 0000000..b4dbc10
--- /dev/null
+++ b/src/components/sections/feature/FeatureCardSixteen.tsx
@@ -0,0 +1,169 @@
+"use client";
+
+import React, { memo } from "react";
+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, CardAnimationType, TitleSegment } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type ComparisonItem = {
+    title: string;
+    items: string[];
+};
+
+interface FeatureCardSixteenProps {
+    negativeCard: ComparisonItem;
+    positiveCard: ComparisonItem;
+    animationType: CardAnimationType;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    buttons?: ButtonConfig[];
+    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;
+    cardTitleClassName?: string;
+    itemsListClassName?: string;
+    itemClassName?: string;
+    itemIconClassName?: string;
+    itemTextClassName?: string;
+}
+
+const FeatureCardSixteen = ({
+    negativeCard,
+    positiveCard,
+    animationType,
+    title,
+    titleSegments,
+    description,
+    textboxLayout,
+    useInvertedBackground,
+    tag,
+    tagIcon,
+    buttons,
+    ariaLabel = "Feature comparison section",
+    className = "",
+    containerClassName = "",
+    textBoxTitleClassName = "",
+    titleImageWrapperClassName = "",
+    titleImageClassName = "",
+    textBoxDescriptionClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+    gridClassName = "",
+    cardClassName = "",
+    cardTitleClassName = "",
+    itemsListClassName = "",
+    itemClassName = "",
+    itemIconClassName = "",
+    itemTextClassName = "",
+}: FeatureCardSixteenProps) => {
+    const theme = useTheme();
+    const shouldCardUseLightText = shouldUseInvertedText("invertDefault", theme.cardStyle) || shouldUseInvertedText("invertCard", theme.cardStyle);
+    const { itemRefs } = useCardAnimation({ animationType, itemCount: 2 });
+
+    const cards = [
+        { ...negativeCard, variant: "negative" as const },
+        { ...positiveCard, variant: "positive" as const },
+    ];
+
+    return (
+        <section
+            aria-label={ariaLabel}
+            className={cls(
+                "relative py-20",
+                useInvertedBackground === "invertCard"
+                    ? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground"
+                    : "w-full",
+                useInvertedBackground === "invertDefault" && "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}
+                    buttons={buttons}
+                    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(
+                    "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")}>
+                                <h3 className={cls(
+                                    "text-3xl text-center font-medium",
+                                    shouldCardUseLightText ? "text-background" : "text-foreground",
+                                    cardTitleClassName
+                                )}>
+                                    {card.title}
+                                </h3>
+                                <PricingFeatureList
+                                    features={card.items}
+                                    icon={card.variant === "positive" ? Check : X}
+                                    shouldUseLightText={shouldCardUseLightText}
+                                    className={itemsListClassName}
+                                    featureItemClassName={itemClassName}
+                                    featureIconWrapperClassName=""
+                                    featureIconClassName={itemIconClassName}
+                                    featureTextClassName={cls("truncate", itemTextClassName)}
+                                />
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </section>
+    );
+};
+
+FeatureCardSixteen.displayName = "FeatureCardSixteen";
+
+export default memo(FeatureCardSixteen);
diff --git a/src/components/sections/feature/FeatureCardTen.tsx b/src/components/sections/feature/FeatureCardTen.tsx
new file mode 100644
index 0000000..4468da1
--- /dev/null
+++ b/src/components/sections/feature/FeatureCardTen.tsx
@@ -0,0 +1,257 @@
+"use client";
+
+import React, { memo, 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, 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 {
+  id: string;
+  title: string;
+  description: string;
+  media: FeatureMedia;
+  items: FeatureListItem[];
+  reverse: boolean;
+}
+
+interface FeatureCardTenProps {
+  features: FeatureCard[];
+  title: string;
+  titleSegments?: TitleSegment[];
+  description: string;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  buttons?: ButtonConfig[];
+  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", 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 === "invertDefault" || useInvertedBackground === "invertCard") && "text-background", featureTitleClassName)}>
+      {feature.title}
+    </h3>
+    <p className={cls("text-base leading-[1.2]", (useInvertedBackground === "invertDefault" || useInvertedBackground === "invertCard") ? "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 === "invertDefault" || useInvertedBackground === "invertCard") ? "text-background/75" : "text-foreground/75", listItemClassName)}>
+              {listItem.text}
+            </p>
+          </li>
+        );
+      })}
+    </ul>
+  </div>
+);
+
+const FeatureCardTen = ({
+  features,
+  title,
+  titleSegments,
+  description,
+  tag,
+  tagIcon,
+  buttons,
+  textboxLayout,
+  animationType,
+  useInvertedBackground,
+  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) => ({
+        id: feature.id,
+        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}
+      buttons={buttons}
+      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}
+    />
+  );
+};
+
+FeatureCardTen.displayName = "FeatureCardTen";
+
+export default memo(FeatureCardTen);
diff --git a/src/components/sections/feature/FeatureCardThirteen.tsx b/src/components/sections/feature/FeatureCardThirteen.tsx
new file mode 100644
index 0000000..990ee93
--- /dev/null
+++ b/src/components/sections/feature/FeatureCardThirteen.tsx
@@ -0,0 +1,237 @@
+"use client";
+
+import React, { memo } from "react";
+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, CardAnimationType, ContainerStyle, TitleSegment } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type FeatureCardThirteenGridVariant = Exclude<GridVariant, "one-large-right-three-stacked-left" | "one-large-left-three-stacked-right" | "timeline" | "timeline-three-columns">;
+
+type FeatureCard = {
+  id: string;
+  title: string;
+  description: string;
+};
+
+interface FeatureCardThirteenProps {
+  features: FeatureCard[];
+  carouselMode?: "auto" | "buttons";
+  gridVariant: FeatureCardThirteenGridVariant;
+  uniformGridCustomHeightClasses?: string;
+  animationType: CardAnimationType;
+  containerStyle: ContainerStyle;
+  title: string;
+  titleSegments?: TitleSegment[];
+  description: string;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  buttons?: ButtonConfig[];
+  textboxLayout: TextboxLayout;
+  useInvertedBackground: InvertedBackground;
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  cardClassName?: string;
+  textBoxTitleClassName?: string;
+  textBoxTitleImageWrapperClassName?: string;
+  textBoxTitleImageClassName?: string;
+  textBoxDescriptionClassName?: string;
+  cardIdClassName?: string;
+  cardTitleClassName?: string;
+  cardDescriptionClassName?: string;
+  cardDotsClassName?: string;
+  gridClassName?: string;
+  carouselClassName?: string;
+  controlsClassName?: string;
+  textBoxClassName?: string;
+  textBoxTagClassName?: string;
+  textBoxButtonContainerClassName?: string;
+  textBoxButtonClassName?: string;
+  textBoxButtonTextClassName?: string;
+}
+
+const FeatureCardThirteen = ({
+  features,
+  carouselMode = "buttons",
+  gridVariant,
+  uniformGridCustomHeightClasses,
+  animationType,
+  containerStyle,
+  title,
+  titleSegments,
+  description,
+  tag,
+  tagIcon,
+  buttons,
+  textboxLayout,
+  useInvertedBackground,
+  ariaLabel = "Feature section",
+  className = "",
+  containerClassName = "",
+  cardClassName = "",
+  textBoxTitleClassName = "",
+  textBoxTitleImageWrapperClassName = "",
+  textBoxTitleImageClassName = "",
+  textBoxDescriptionClassName = "",
+  cardIdClassName = "",
+  cardTitleClassName = "",
+  cardDescriptionClassName = "",
+  cardDotsClassName = "",
+  gridClassName = "",
+  carouselClassName = "",
+  controlsClassName = "",
+  textBoxClassName = "",
+  textBoxTagClassName = "",
+  textBoxButtonContainerClassName = "",
+  textBoxButtonClassName = "",
+  textBoxButtonTextClassName = "",
+}: FeatureCardThirteenProps) => {
+  const theme = useTheme();
+  const shouldUseLightText =
+    containerStyle === "card"
+      ? shouldUseInvertedText("invertDefault", theme.cardStyle) || shouldUseInvertedText("invertCard", theme.cardStyle)
+      : shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+  // Override gridRows for certain variants to use smaller heights
+  const getGridRowsOverride = () => {
+    if (gridVariant === "two-columns-alternating-heights") {
+      return "md:grid-rows-[9rem_9rem_0.5rem_0.5rem_9rem_9rem] 2xl:grid-rows-[12rem_12rem_0.5rem_0.5rem_12rem_12rem]";
+    }
+    if (gridVariant === "asymmetric-60-wide-40-narrow") {
+      return "md:grid-rows-[18rem_18rem] 2xl:grid-rows-[21rem_21rem]";
+    }
+    if (gridVariant === "three-columns-all-equal-width") {
+      return "md:grid-rows-[15rem_15rem] 2xl:grid-rows-[18rem_18rem]";
+    }
+    if (gridVariant === "four-items-2x2-equal-grid") {
+      return "md:grid-rows-[20rem_20rem] 2xl:grid-rows-[26rem_26rem]";
+    }
+    if (gridVariant === "items-top-row-full-width-bottom" || gridVariant === "full-width-top-items-bottom-row") {
+      return "md:grid-rows-[18rem_18rem] 2xl:grid-rows-[21rem_21rem]";
+    }
+    return undefined;
+  };
+  const gridRowsOverride = getGridRowsOverride();
+
+  // Override heightClasses for certain variants to use smaller heights
+  const getHeightClassesOverride = () => {
+    if (gridVariant === "four-items-2x2-staggered-grid" || gridVariant === "four-items-2x2-staggered-grid-inverted") {
+      return "min-h-60 2xl:min-h-70";
+    }
+    return uniformGridCustomHeightClasses;
+  };
+  const heightClassesOverride = getHeightClassesOverride();
+
+  // Override itemHeightClasses for alternating height variants to use smaller heights
+  const getItemHeightClassesOverride = () => {
+    if (gridVariant === "four-items-2x2-alternating-heights") {
+      return [
+        "min-h-80 md:min-h-80 2xl:min-h-100",
+        "min-h-80 md:min-h-50 2xl:min-h-60",
+        "min-h-80 md:min-h-80 2xl:min-h-100",
+        "min-h-80 md:min-h-50 2xl:min-h-60",
+      ];
+    }
+    if (gridVariant === "four-items-2x2-alternating-heights-inverted") {
+      return [
+        "min-h-80 md:min-h-50 2xl:min-h-60",
+        "min-h-80 md:min-h-80 2xl:min-h-100",
+        "min-h-80 md:min-h-50 2xl:min-h-60",
+        "min-h-80 md:min-h-80 2xl:min-h-100",
+      ];
+    }
+    return undefined;
+  };
+  const itemHeightClassesOverride = getItemHeightClassesOverride();
+
+  return (
+    <CardStack
+      mode={carouselMode}
+      gridVariant={gridVariant}
+      uniformGridCustomHeightClasses={heightClassesOverride}
+      gridRowsClassName={gridRowsOverride}
+      itemHeightClassesOverride={itemHeightClassesOverride}
+      animationType={animationType}
+      containerStyle={containerStyle}
+      title={title}
+      titleSegments={titleSegments}
+      description={description}
+      tag={tag}
+      tagIcon={tagIcon}
+      buttons={buttons}
+      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.id}-${index}`}
+          className={cls(
+            "card relative flex flex-col justify-between p-6 rounded-theme-capped min-h-0 h-full overflow-hidden",
+            cardClassName
+          )}
+        >
+          <div className="relative z-10 flex flex-col gap-2" >
+            <div className="relative z-10 flex justify-between items-center">
+              <span
+                className={cls(
+                  "text-sm font-medium text-foreground",
+                  cardIdClassName
+                )}
+              >
+                / {feature.id}
+              </span>
+              <div className={cls("flex gap-1", cardDotsClassName)}>
+                <span className="h-2 w-auto aspect-square rounded-theme bg-accent" />
+                <span className="h-2 w-auto aspect-square rounded-theme bg-accent" />
+                <span className="h-2 w-auto aspect-square rounded-theme bg-accent" />
+              </div>
+            </div>
+            <h3
+              className={cls(
+                "text-4xl font-medium leading-tight",
+                shouldUseLightText ? "text-background" : "text-foreground",
+                cardTitleClassName
+              )}
+            >
+              {feature.title}
+            </h3>
+          </div>
+
+          <div className="relative z-10 flex flex-col gap-1">
+            <p
+              className={cls(
+                "text-sm leading-tight text-balance line-clamp-3",
+                shouldUseLightText ? "text-background" : "text-foreground",
+                cardDescriptionClassName
+              )}
+            >
+              {feature.description}
+            </p>
+          </div>
+        </div>
+      ))}
+    </CardStack>
+  );
+};
+
+FeatureCardThirteen.displayName = "FeatureCardThirteen";
+
+export default memo(FeatureCardThirteen);
diff --git a/src/components/sections/feature/FeatureCardTwelve.tsx b/src/components/sections/feature/FeatureCardTwelve.tsx
new file mode 100644
index 0000000..3ed8f97
--- /dev/null
+++ b/src/components/sections/feature/FeatureCardTwelve.tsx
@@ -0,0 +1,186 @@
+"use client";
+
+import React, { memo } 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, 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;
+  variant: "card" | "border";
+  title: string;
+  titleSegments?: TitleSegment[];
+  description: string;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  buttons?: ButtonConfig[];
+  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,
+  variant,
+  title,
+  titleSegments,
+  description,
+  tag,
+  tagIcon,
+  buttons,
+  textboxLayout,
+  useInvertedBackground,
+  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}
+      buttons={buttons}
+      textboxLayout={textboxLayout}
+      animationType={animationType}
+      variant={variant}
+      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",
+            variant === "card" ? "p-6 md:p-15" : "pb-6 md:pb-10",
+            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]",
+              variant === "border"
+                ? (useInvertedBackground !== "noInvert" && "text-background")
+                : (shouldUseLightText && "text-background"),
+              labelClassName
+            )}>
+              {feature.label}
+            </h2>
+          </div>
+
+          {variant === "card" && <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",
+              variant === "border"
+                ? (useInvertedBackground !== "noInvert" ? "text-background" : "text-foreground")
+                : (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) => (
+                <React.Fragment key={index}>
+                  <span className={cls(
+                    "text-base",
+                    variant === "border"
+                      ? (useInvertedBackground !== "noInvert" ? "text-background" : "text-foreground")
+                      : (shouldUseLightText ? "text-background" : "text-foreground"),
+                    itemTextClassName
+                  )}>
+                    {item}
+                  </span>
+                  {index < feature.items.length - 1 && (
+                    <span className="text-base text-accent">•</span>
+                  )}
+                </React.Fragment>
+              ))}
+            </div>
+
+            {feature.buttons && feature.buttons.length > 0 && (
+              <div className="mt-3 flex gap-4">
+                {feature.buttons.slice(0, 2).map((button, index) => (
+                  <Button key={`${button.text}-${index}`} {...getButtonProps(button, index, theme.defaultButtonVariant, cardButtonClassName, cardButtonTextClassName)} />
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      ))}
+    </CardList>
+  );
+};
+
+FeatureCardTwelve.displayName = "FeatureCardTwelve";
+
+export default memo(FeatureCardTwelve);
diff --git a/src/components/sections/feature/FeatureCardTwenty.tsx b/src/components/sections/feature/FeatureCardTwenty.tsx
new file mode 100644
index 0000000..f39b796
--- /dev/null
+++ b/src/components/sections/feature/FeatureCardTwenty.tsx
@@ -0,0 +1,183 @@
+"use client";
+
+import React, { memo, useState, useEffect } from "react";
+import TextBox from "@/components/Textbox";
+import MediaContent from "@/components/shared/MediaContent";
+import AutoCarousel from "@/components/cardStack/layouts/carousels/AutoCarousel";
+import { cls } from "@/lib/utils";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, TitleSegment } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type FeatureImage = {
+    id: number;
+    imageSrc?: string;
+    videoSrc?: string;
+    imageAlt?: string;
+    videoAriaLabel?: string;
+};
+
+interface FeatureCardTwentyProps {
+    images: FeatureImage[];
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    buttons?: ButtonConfig[];
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    textBoxClassName?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
+    tagClassName?: string;
+    buttonContainerClassName?: string;
+    buttonClassName?: string;
+    buttonTextClassName?: string;
+    titleImageWrapperClassName?: string;
+    titleImageClassName?: string;
+    imagesContainerClassName?: string;
+    imageWrapperClassName?: string;
+    imageClassName?: string;
+}
+
+const FeatureCardTwenty = ({
+    images,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    buttons,
+    textboxLayout,
+    useInvertedBackground,
+    ariaLabel = "Feature section",
+    className = "",
+    containerClassName = "",
+    textBoxClassName = "",
+    titleClassName = "",
+    descriptionClassName = "",
+    tagClassName = "",
+    buttonContainerClassName = "",
+    buttonClassName = "",
+    buttonTextClassName = "",
+    titleImageWrapperClassName = "",
+    titleImageClassName = "",
+    imagesContainerClassName = "",
+    imageWrapperClassName = "",
+    imageClassName = "",
+}: FeatureCardTwentyProps) => {
+    const [isCentered, setIsCentered] = useState(false);
+
+    useEffect(() => {
+        const handleResize = () => {
+            setIsCentered(window.innerWidth < 768);
+        };
+
+        handleResize();
+        window.addEventListener("resize", handleResize);
+        return () => window.removeEventListener("resize", handleResize);
+    }, []);
+
+    const renderImageCard = (image: FeatureImage, heightClass: string) => (
+        <div
+            key={image.id}
+            className={cls(
+                "w-full overflow-hidden rounded-theme-capped",
+                heightClass,
+                imageWrapperClassName
+            )}
+        >
+            <MediaContent
+                imageSrc={image.imageSrc}
+                videoSrc={image.videoSrc}
+                imageAlt={image.imageAlt || `Feature image ${image.id}`}
+                videoAriaLabel={image.videoAriaLabel || `Feature video ${image.id}`}
+                imageClassName={cls("w-full h-full object-cover", imageClassName)}
+            />
+        </div>
+    );
+
+    const textBoxElement = (
+        <TextBox
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            buttons={buttons}
+            textboxLayout={textboxLayout}
+            useInvertedBackground={useInvertedBackground}
+            center={isCentered}
+            className={cls("flex flex-col gap-3 md:gap-3", textBoxClassName)}
+            titleClassName={cls("text-7xl 2xl:text-8xl font-medium text-center md:text-left text-balance", titleClassName)}
+            titleImageWrapperClassName={titleImageWrapperClassName}
+            titleImageClassName={titleImageClassName}
+            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 gap-4 mt-4", buttonContainerClassName)}
+            buttonClassName={cls("", buttonClassName)}
+            buttonTextClassName={cls("text-base", buttonTextClassName)}
+        />
+    );
+
+    return (
+        <section
+            aria-label={ariaLabel}
+            className={cls(
+                "relative py-20",
+                useInvertedBackground === "invertCard"
+                    ? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground"
+                    : "w-full",
+                useInvertedBackground === "invertDefault" && "bg-foreground",
+                className
+            )}
+        >
+            <div className={cls("hidden md:flex w-content-width mx-auto gap-10", containerClassName)}>
+                <div className={cls("w-1/2 flex flex-col gap-10", imagesContainerClassName)}>
+                    {images.map((image) => renderImageCard(image, "h-[90svh]"))}
+                </div>
+                <div className="w-1/2" />
+            </div>
+
+            <div className="md:hidden">
+                <AutoCarousel
+                    title=""
+                    description=""
+                    textboxLayout="default"
+                    animationType="none"
+                    className="py-0"
+                    carouselClassName="py-0"
+                    containerClassName="!w-full"
+                    itemClassName="!w-55"
+                    ariaLabel="Feature images carousel"
+                    showTextBox={false}
+                >
+                    {images.map((image) => renderImageCard(image, "aspect-[4/5]"))}
+                </AutoCarousel>
+            </div>
+
+            <div className="hidden md:block fixed top-0 left-0 w-full h-svh pointer-events-none">
+                <div className="w-content-width mx-auto h-full flex items-center gap-10">
+                    <div className="w-1/2" />
+                    <div className={cls("w-1/2 pointer-events-auto flex flex-col gap-6", textBoxClassName)}>
+                        {textBoxElement}
+                    </div>
+                </div>
+            </div>
+
+            <div className="md:hidden w-content-width mx-auto">
+                <div className={cls("flex flex-col gap-6 mt-8", textBoxClassName)}>
+                    {textBoxElement}
+                </div>
+            </div>
+        </section>
+    );
+};
+
+FeatureCardTwenty.displayName = "FeatureCardTwenty";
+
+export default memo(FeatureCardTwenty);
diff --git a/src/components/sections/feature/FeatureCardTwentyOne.tsx b/src/components/sections/feature/FeatureCardTwentyOne.tsx
new file mode 100644
index 0000000..882d62e
--- /dev/null
+++ b/src/components/sections/feature/FeatureCardTwentyOne.tsx
@@ -0,0 +1,215 @@
+"use client";
+
+import React, { memo, useState, useEffect } from "react";
+import TextBox from "@/components/Textbox";
+import Accordion from "@/components/Accordion";
+import MediaContent from "@/components/shared/MediaContent";
+import { cls } from "@/lib/utils";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, 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;
+    buttons?: ButtonConfig[];
+    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,
+    buttons,
+    accordionItems,
+    imageSrc,
+    imageAlt,
+    videoSrc,
+    videoAriaLabel,
+    useInvertedBackground,
+    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 [isCentered, setIsCentered] = useState(false);
+    const [activeAccordion, setActiveAccordion] = useState<number>(0);
+
+    useEffect(() => {
+        const handleResize = () => {
+            setIsCentered(window.innerWidth < 768);
+        };
+
+        handleResize();
+        window.addEventListener("resize", handleResize);
+        return () => window.removeEventListener("resize", handleResize);
+    }, []);
+
+    const handleAccordionToggle = (index: number) => {
+        setActiveAccordion(activeAccordion === index ? -1 : index);
+    };
+
+    const mediaElement = (
+        <div className={cls(
+            "w-full md:w-1/2 h-[50svh] md:h-auto 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
+        )}>
+            <TextBox
+                title={title}
+                titleSegments={titleSegments}
+                description={description}
+                tag={tag}
+                tagIcon={tagIcon}
+                buttons={buttons}
+                useInvertedBackground={useInvertedBackground}
+                className={cls("flex flex-col gap-3", 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-3", tagClassName)}
+                buttonContainerClassName={cls("flex gap-4 mt-4", buttonContainerClassName)}
+                buttonClassName={buttonClassName}
+                buttonTextClassName={cls("text-base", buttonTextClassName)}
+                titleImageWrapperClassName={titleImageWrapperClassName}
+                titleImageClassName={titleImageClassName}
+                center={isCentered}
+            />
+
+            <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 === "noInvert" ? 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 === "invertCard" && "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground",
+                useInvertedBackground === "invertDefault" && "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>
+    );
+};
+
+FeatureCardTwentyOne.displayName = "FeatureCardTwentyOne";
+
+export default memo(FeatureCardTwentyOne);
diff --git a/src/components/sections/feature/FeatureCardTwo.tsx b/src/components/sections/feature/FeatureCardTwo.tsx
new file mode 100644
index 0000000..9c74e7d
--- /dev/null
+++ b/src/components/sections/feature/FeatureCardTwo.tsx
@@ -0,0 +1,220 @@
+"use client";
+
+import React, { memo } from "react";
+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, GridVariant, CardAnimationType, ContainerStyle, TitleSegment } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type FeatureCardTwoGridVariant = Exclude<GridVariant, "one-large-right-three-stacked-left" | "one-large-left-three-stacked-right" | "timeline" | "timeline-three-columns">;
+
+type FeatureCard = {
+    title: string;
+    description: string;
+    icon: LucideIcon;
+    button?: ButtonConfig;
+};
+
+interface FeatureCardTwoProps {
+    features: FeatureCard[];
+    carouselMode?: "auto" | "buttons";
+    gridVariant: FeatureCardTwoGridVariant;
+    uniformGridCustomHeightClasses?: string;
+    animationType: CardAnimationType;
+    containerStyle: ContainerStyle;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    buttons?: ButtonConfig[];
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    cardClassName?: string;
+    iconClassName?: 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 FeatureCardTwo = ({
+    features,
+    carouselMode = "buttons",
+    gridVariant,
+    uniformGridCustomHeightClasses,
+    animationType,
+    containerStyle,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    buttons,
+    textboxLayout,
+    useInvertedBackground,
+    ariaLabel = "Feature section",
+    className = "",
+    containerClassName = "",
+    cardClassName = "",
+    iconClassName = "",
+    textBoxTitleClassName = "",
+    textBoxTitleImageWrapperClassName = "",
+    textBoxTitleImageClassName = "",
+    textBoxDescriptionClassName = "",
+    cardTitleClassName = "",
+    cardDescriptionClassName = "",
+    cardButtonClassName = "",
+    cardButtonTextClassName = "",
+    gridClassName = "",
+    carouselClassName = "",
+    controlsClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+}: FeatureCardTwoProps) => {
+    const theme = useTheme();
+    const shouldUseLightText =
+        containerStyle === "card"
+            ? shouldUseInvertedText("invertDefault", theme.cardStyle) || shouldUseInvertedText("invertCard", theme.cardStyle)
+            : shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    // Override gridRows for certain variants to use smaller heights
+    const getGridRowsOverride = () => {
+        if (gridVariant === "two-columns-alternating-heights") {
+            return "md:grid-rows-[9rem_9rem_0.5rem_0.5rem_9rem_9rem] 2xl:grid-rows-[12rem_12rem_0.5rem_0.5rem_12rem_12rem]";
+        }
+        if (gridVariant === "asymmetric-60-wide-40-narrow") {
+            return "md:grid-rows-[18rem_18rem] 2xl:grid-rows-[21rem_21rem]";
+        }
+        if (gridVariant === "three-columns-all-equal-width") {
+            return "md:grid-rows-[15rem_15rem] 2xl:grid-rows-[18rem_18rem]";
+        }
+        if (gridVariant === "four-items-2x2-equal-grid") {
+            return "md:grid-rows-[20rem_20rem] 2xl:grid-rows-[26rem_26rem]";
+        }
+        if (gridVariant === "items-top-row-full-width-bottom" || gridVariant === "full-width-top-items-bottom-row") {
+            return "md:grid-rows-[18rem_18rem] 2xl:grid-rows-[21rem_21rem]";
+        }
+        return undefined;
+    };
+    const gridRowsOverride = getGridRowsOverride();
+
+    // Override heightClasses for certain variants to use smaller heights
+    const getHeightClassesOverride = () => {
+        if (gridVariant === "four-items-2x2-staggered-grid" || gridVariant === "four-items-2x2-staggered-grid-inverted") {
+            return "min-h-60 2xl:min-h-70";
+        }
+        return uniformGridCustomHeightClasses;
+    };
+    const heightClassesOverride = getHeightClassesOverride();
+
+    // Override itemHeightClasses for alternating height variants to use smaller heights
+    const getItemHeightClassesOverride = () => {
+        if (gridVariant === "four-items-2x2-alternating-heights") {
+            return [
+                "min-h-80 md:min-h-80 2xl:min-h-100",
+                "min-h-80 md:min-h-50 2xl:min-h-60",
+                "min-h-80 md:min-h-80 2xl:min-h-100",
+                "min-h-80 md:min-h-50 2xl:min-h-60",
+            ];
+        }
+        if (gridVariant === "four-items-2x2-alternating-heights-inverted") {
+            return [
+                "min-h-80 md:min-h-50 2xl:min-h-60",
+                "min-h-80 md:min-h-80 2xl:min-h-100",
+                "min-h-80 md:min-h-50 2xl:min-h-60",
+                "min-h-80 md:min-h-80 2xl:min-h-100",
+            ];
+        }
+        return undefined;
+    };
+    const itemHeightClassesOverride = getItemHeightClassesOverride();
+
+    return (
+        <CardStack
+            mode={carouselMode}
+            gridVariant={gridVariant}
+            uniformGridCustomHeightClasses={heightClassesOverride}
+            gridRowsClassName={gridRowsOverride}
+            itemHeightClassesOverride={itemHeightClassesOverride}
+            animationType={animationType}
+            containerStyle={containerStyle}
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            buttons={buttons}
+            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 Icon = feature.icon;
+                return (
+                    <div
+                        key={`${feature.title}-${index}`}
+                        className={cls("card flex flex-col justify-between gap-4 p-6 rounded-theme-capped h-full", cardClassName)}
+                    >
+                        <div className={cls("relative z-1 primary-button h-15 w-fit aspect-square flex items-center justify-center rounded-theme", iconClassName)} aria-hidden="true">
+                            <Icon className="h-[40%] w-auto text-background" strokeWidth={1.5} />
+                        </div>
+                        <div className="relative z-1 flex flex-col gap-1">
+                            <h3 className={cls("text-2xl font-medium", shouldUseLightText && "text-background", cardTitleClassName)}>
+                                {feature.title}
+                            </h3>
+                            <p className={cls("text-sm leading-[1.1]", shouldUseLightText ? "text-background" : "text-foreground", cardDescriptionClassName)}>
+                                {feature.description}
+                            </p>
+                            {feature.button && (
+                                <div className="mt-2" >
+                                    <Button {...getButtonProps(feature.button, 0, theme.defaultButtonVariant, cls("", cardButtonClassName), cardButtonTextClassName)} />
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                );
+            })}
+        </CardStack>
+    );
+};
+
+FeatureCardTwo.displayName = "FeatureCardTwo";
+
+export default memo(FeatureCardTwo);
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..d5d02e5
--- /dev/null
+++ b/src/components/sections/feature/featureCardThree/FeatureCardThree.tsx
@@ -0,0 +1,183 @@
+"use client";
+
+import "./FeatureCardThree.css";
+import React, { memo, 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, ContainerStyle, TitleSegment } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type FeatureCard = {
+  id: string;
+  title: string;
+  description: string;
+  imageSrc: string;
+  imageAlt?: string;
+};
+
+interface FeatureCardThreeProps {
+  features: FeatureCard[];
+  carouselMode?: "auto" | "buttons";
+  gridVariant: GridVariant;
+  uniformGridCustomHeightClasses?: string;
+  animationType: CardAnimationType;
+  containerStyle: ContainerStyle;
+  title: string;
+  titleSegments?: TitleSegment[];
+  description: string;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  buttons?: ButtonConfig[];
+  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,
+  containerStyle,
+  title,
+  titleSegments,
+  description,
+  tag,
+  tagIcon,
+  buttons,
+  textboxLayout,
+  useInvertedBackground,
+  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);
+
+  // Override heightClasses for staggered variants to use smaller heights
+  const heightClassesOverride =
+    gridVariant === "four-items-2x2-staggered-grid" || gridVariant === "four-items-2x2-staggered-grid-inverted"
+      ? "h-110 2xl:h-120"
+      : uniformGridCustomHeightClasses;
+
+  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={heightClassesOverride}
+        animationType={animationType}
+        containerStyle={containerStyle}
+        title={title}
+        titleSegments={titleSegments}
+        description={description}
+        tag={tag}
+        tagIcon={tagIcon}
+        buttons={buttons}
+        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.id}-${index}`}
+            ref={setRef(index)}
+            item={feature}
+            isActive={activeIndex === index}
+            onItemClick={() => handleItemClick(index)}
+            className={cardClassName}
+            itemContentClassName={itemContentClassName}
+            itemTitleClassName={cardTitleClassName}
+            itemDescriptionClassName={cardDescriptionClassName}
+          />
+        ))}
+      </CardStack>
+    </div>
+  );
+};
+
+FeatureCardThree.displayName = "FeatureCardThree";
+
+export default memo(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..e1d3498
--- /dev/null
+++ b/src/components/sections/feature/featureCardThree/FeatureCardThreeItem.tsx
@@ -0,0 +1,144 @@
+"use client";
+
+import { forwardRef, memo } from "react";
+import Image from "next/image";
+import { Info } from "lucide-react";
+import { cls } from "@/lib/utils";
+
+interface FeatureCardThreeItemData {
+  id: string;
+  title: string;
+  description: string;
+  imageSrc: string;
+  imageAlt?: string;
+}
+
+interface FeatureCardThreeItemProps {
+  item: FeatureCardThreeItemData;
+  isActive?: boolean;
+  onItemClick?: () => void;
+  className?: string;
+  itemContentClassName?: string;
+  itemTitleClassName?: string;
+  itemDescriptionClassName?: string;
+}
+
+const MASK_GRADIENT = "linear-gradient(to bottom, transparent, black 60%)";
+
+const FeatureCardThreeItem = memo(
+  forwardRef<HTMLDivElement, FeatureCardThreeItemProps>(
+    (
+      {
+        item,
+        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 ${item.id}`}
+          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"
+                >
+                  {item.id}
+                </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 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/footer/FooterBase.tsx b/src/components/sections/footer/FooterBase.tsx
new file mode 100644
index 0000000..b799f35
--- /dev/null
+++ b/src/components/sections/footer/FooterBase.tsx
@@ -0,0 +1,109 @@
+"use client";
+
+import { memo } from "react";
+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;
+  logoText?: string;
+  logoWidth?: number;
+  logoHeight?: number;
+  columns: FooterColumn[];
+  copyrightText?: string;
+  onPrivacyClick?: () => void;
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  logoClassName?: string;
+  logoTextClassName?: string;
+  columnsClassName?: string;
+  columnClassName?: string;
+  columnTitleClassName?: string;
+  columnItemClassName?: string;
+  copyrightContainerClassName?: string;
+  copyrightTextClassName?: string;
+  privacyButtonClassName?: string;
+}
+
+const FooterBase = memo<FooterBaseProps>(function FooterBase({
+  logoSrc = "/brand/logowhite.svg",
+  logoText = "Webild",
+  logoWidth = 120,
+  logoHeight = 40,
+  columns,
+  copyrightText = `© 2025 | Webild`,
+  onPrivacyClick,
+  ariaLabel = "Site footer",
+  className = "",
+  containerClassName = "",
+  logoClassName = "",
+  logoTextClassName = "",
+  columnsClassName = "",
+  columnClassName = "",
+  columnTitleClassName = "",
+  columnItemClassName = "",
+  copyrightContainerClassName = "",
+  copyrightTextClassName = "",
+  privacyButtonClassName = "",
+}) {
+  return (
+    <footer
+      role="contentinfo"
+      aria-label={ariaLabel}
+      className={cls("relative overflow-hidden w-full primary-button text-background py-15", 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="flex-shrink-0">
+              <Image
+                src={logoSrc}
+                alt="Logo"
+                width={logoWidth}
+                height={logoHeight}
+                className={cls("object-contain", logoClassName)}
+                unoptimized={logoSrc.startsWith('http') || logoSrc.startsWith('//')}
+                aria-hidden={true}
+              />
+            </div>
+          ) : (
+            <h2 className={cls("text-4xl font-medium text-background", logoTextClassName)}>
+              {logoText}
+            </h2>
+          )}
+
+          <FooterColumns
+            columns={columns}
+            className={columnsClassName}
+            columnClassName={columnClassName}
+            columnTitleClassName={cls("text-background/50", columnTitleClassName)}
+            columnItemClassName={cls("text-background", columnItemClassName)}
+          />
+        </div>
+
+        <div
+          className={cls("w-full flex items-center justify-between pt-9 border-t border-background/20", copyrightContainerClassName)}
+        >
+          <span className={cls("text-background/50 text-sm", copyrightTextClassName)}>
+            {copyrightText}
+          </span>
+          <ButtonTextUnderline
+            text="Privacy Policy"
+            onClick={onPrivacyClick}
+            className={cls("text-background/50", privacyButtonClassName)}
+          />
+        </div>
+      </div>
+    </footer>
+  );
+});
+
+FooterBase.displayName = "FooterBase";
+
+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..c0cfbb1
--- /dev/null
+++ b/src/components/sections/footer/FooterBaseCard.tsx
@@ -0,0 +1,109 @@
+"use client";
+
+import { memo } from "react";
+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;
+  logoText?: string;
+  logoWidth?: number;
+  logoHeight?: number;
+  columns: FooterColumn[];
+  copyrightText?: string;
+  onPrivacyClick?: () => void;
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  cardClassName?: string;
+  logoClassName?: string;
+  logoTextClassName?: string;
+  columnsClassName?: string;
+  columnClassName?: string;
+  columnTitleClassName?: string;
+  columnItemClassName?: string;
+  copyrightContainerClassName?: string;
+  copyrightTextClassName?: string;
+  privacyButtonClassName?: string;
+}
+
+const FooterBaseCard = memo<FooterBaseCardProps>(function FooterBaseCard({
+  logoSrc = "/brand/logowhite.svg",
+  logoText = "Webild",
+  logoWidth = 120,
+  logoHeight = 40,
+  columns,
+  copyrightText = `© 2025 | Webild`,
+  onPrivacyClick,
+  ariaLabel = "Site footer",
+  className = "",
+  containerClassName = "",
+  cardClassName = "",
+  logoClassName = "",
+  logoTextClassName = "",
+  columnsClassName = "",
+  columnClassName = "",
+  columnTitleClassName = "",
+  columnItemClassName = "",
+  copyrightContainerClassName = "",
+  copyrightTextClassName = "",
+  privacyButtonClassName = "",
+}) {
+  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="flex-shrink-0">
+              <Image
+                src={logoSrc}
+                alt="Logo"
+                width={logoWidth}
+                height={logoHeight}
+                className={cls("object-contain", logoClassName)}
+                unoptimized={logoSrc.startsWith('http') || logoSrc.startsWith('//')}
+                aria-hidden={true}
+              />
+            </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>
+  );
+});
+
+FooterBaseCard.displayName = "FooterBaseCard";
+
+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..696443a
--- /dev/null
+++ b/src/components/sections/footer/FooterBaseReveal.tsx
@@ -0,0 +1,126 @@
+"use client";
+
+import { memo, 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;
+  logoWidth?: number;
+  logoHeight?: number;
+  columns: FooterColumn[];
+  copyrightText?: string;
+  onPrivacyClick?: () => void;
+  ariaLabel?: string;
+  className?: string;
+  wrapperClassName?: string;
+  containerClassName?: string;
+  footerClassName?: string;
+  footerContainerClassName?: string;
+  logoClassName?: string;
+  columnsClassName?: string;
+  columnClassName?: string;
+  columnTitleClassName?: string;
+  columnItemClassName?: string;
+  copyrightContainerClassName?: string;
+  copyrightTextClassName?: string;
+  privacyButtonClassName?: string;
+}
+
+const FooterBaseReveal = memo<FooterBaseRevealProps>(function FooterBaseReveal({
+  logoSrc,
+  logoWidth,
+  logoHeight,
+  columns,
+  copyrightText,
+  onPrivacyClick,
+  ariaLabel,
+  className = "",
+  wrapperClassName = "",
+  containerClassName = "",
+  footerClassName,
+  footerContainerClassName,
+  logoClassName,
+  columnsClassName,
+  columnClassName,
+  columnTitleClassName,
+  columnItemClassName,
+  copyrightContainerClassName,
+  copyrightTextClassName,
+  privacyButtonClassName,
+}) {
+  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", 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}
+            logoWidth={logoWidth}
+            logoHeight={logoHeight}
+            columns={columns}
+            copyrightText={copyrightText}
+            onPrivacyClick={onPrivacyClick}
+            ariaLabel={ariaLabel}
+            className={footerClassName}
+            containerClassName={footerContainerClassName}
+            logoClassName={logoClassName}
+            columnsClassName={columnsClassName}
+            columnClassName={columnClassName}
+            columnTitleClassName={columnTitleClassName}
+            columnItemClassName={columnItemClassName}
+            copyrightContainerClassName={copyrightContainerClassName}
+            copyrightTextClassName={copyrightTextClassName}
+            privacyButtonClassName={privacyButtonClassName}
+          />
+        </div>
+      </div>
+    </section>
+  );
+});
+
+FooterBaseReveal.displayName = "FooterBaseReveal";
+
+export default FooterBaseReveal;
diff --git a/src/components/sections/footer/FooterBaseSocial.tsx b/src/components/sections/footer/FooterBaseSocial.tsx
new file mode 100644
index 0000000..bbe5e5f
--- /dev/null
+++ b/src/components/sections/footer/FooterBaseSocial.tsx
@@ -0,0 +1,133 @@
+"use client";
+
+import { memo } from "react";
+import Image from "next/image";
+import ButtonTextUnderline from "@/components/button/ButtonTextUnderline";
+import FooterColumns from "@/components/shared/FooterColumns";
+import SocialLinks from "@/components/shared/SocialLinks";
+import { cls } from "@/lib/utils";
+import type { FooterColumn } from "@/components/shared/FooterColumns";
+import type { SocialLink } from "@/components/shared/SocialLinks";
+
+interface FooterBaseSocialProps {
+  logoSrc?: string;
+  logoText?: string;
+  logoWidth?: number;
+  logoHeight?: number;
+  description: string;
+  columns: FooterColumn[];
+  socialLinks: SocialLink[];
+  copyrightText?: string;
+  onPrivacyClick?: () => void;
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  logoClassName?: string;
+  logoTextClassName?: string;
+  descriptionClassName?: string;
+  columnsClassName?: string;
+  columnClassName?: string;
+  columnTitleClassName?: string;
+  columnItemClassName?: string;
+  socialLinksClassName?: string;
+  socialIconClassName?: string;
+  copyrightContainerClassName?: string;
+  copyrightTextClassName?: string;
+  privacyButtonClassName?: string;
+}
+
+const FooterBaseSocial = memo<FooterBaseSocialProps>(function FooterBaseSocial({
+  logoSrc = "/brand/logowhite.svg",
+  logoText = "Webild",
+  logoWidth = 120,
+  logoHeight = 40,
+  description,
+  columns,
+  socialLinks,
+  copyrightText = `© 2025 | Webild`,
+  onPrivacyClick,
+  ariaLabel = "Site footer",
+  className = "",
+  containerClassName = "",
+  logoClassName = "",
+  logoTextClassName = "",
+  descriptionClassName = "",
+  columnsClassName = "",
+  columnClassName = "",
+  columnTitleClassName = "",
+  columnItemClassName = "",
+  socialLinksClassName = "",
+  socialIconClassName = "",
+  copyrightContainerClassName = "",
+  copyrightTextClassName = "",
+  privacyButtonClassName = "",
+}) {
+  return (
+    <footer
+      role="contentinfo"
+      aria-label={ariaLabel}
+      className={cls("relative overflow-hidden w-full primary-button text-background py-15", 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 mb-10">
+          <div className="relative flex flex-col justify-between gap-4">
+            {logoSrc ? (
+              <div className="flex-shrink-0">
+                <Image
+                  src={logoSrc}
+                  alt="Logo"
+                  width={logoWidth}
+                  height={logoHeight}
+                  className={cls("object-contain", logoClassName)}
+                  unoptimized={logoSrc.startsWith('http') || logoSrc.startsWith('//')}
+                  aria-hidden={true}
+                />
+              </div>
+            ) : (
+              <h2 className={cls("text-4xl font-medium text-background", logoTextClassName)}>
+                {logoText}
+              </h2>
+            )}
+
+            <p className={cls("text-background/50 text-base leading-tight text-balance md:max-w-[var(--width-20)]", descriptionClassName)}>
+              {description}
+            </p>
+
+            <SocialLinks
+              socialLinks={socialLinks}
+              className={cls("mt-auto", socialLinksClassName)}
+              iconClassName={socialIconClassName}
+            />
+          </div>
+
+          <FooterColumns
+            columns={columns}
+            className={columnsClassName}
+            columnClassName={columnClassName}
+            columnTitleClassName={cls("text-background/50", columnTitleClassName)}
+            columnItemClassName={cls("text-background", columnItemClassName)}
+          />
+        </div>
+
+        <div
+          className={cls("w-full flex items-center justify-between pt-9 border-t border-background/20", copyrightContainerClassName)}
+        >
+          <span className={cls("text-background/50 text-sm", copyrightTextClassName)}>
+            {copyrightText}
+          </span>
+          <ButtonTextUnderline
+            text="Privacy Policy"
+            onClick={onPrivacyClick}
+            className={cls("text-background/50", privacyButtonClassName)}
+          />
+        </div>
+      </div>
+    </footer>
+  );
+});
+
+FooterBaseSocial.displayName = "FooterBaseSocial";
+
+export default FooterBaseSocial;
diff --git a/src/components/sections/footer/FooterCard.tsx b/src/components/sections/footer/FooterCard.tsx
new file mode 100644
index 0000000..4ea3162
--- /dev/null
+++ b/src/components/sections/footer/FooterCard.tsx
@@ -0,0 +1,84 @@
+"use client";
+
+import { memo } from "react";
+import FooterLogo from "@/components/sections/footer/FooterLogo";
+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;
+  svgClassName?: string;
+  dividerClassName?: string;
+  copyrightContainerClassName?: string;
+  copyrightTextClassName?: string;
+  socialContainerClassName?: string;
+  socialIconClassName?: string;
+}
+
+const FooterCard = memo<FooterCardProps>(function FooterCard({
+  logoSrc,
+  logoAlt = "Logo",
+  logoText = "Webild",
+  copyrightText = `© 2025 | Webild`,
+  socialLinks,
+  ariaLabel = "Site footer",
+  className = "",
+  containerClassName = "",
+  cardClassName = "",
+  logoClassName = "",
+  svgClassName = "",
+  dividerClassName = "",
+  copyrightContainerClassName = "",
+  copyrightTextClassName = "",
+  socialContainerClassName = "",
+  socialIconClassName = "",
+}) {
+  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 px-10", containerClassName, cardClassName)}>
+        <FooterLogo
+          logoSrc={logoSrc}
+          logoAlt={logoAlt}
+          logoText={logoText}
+          className={logoClassName}
+          svgClassName={svgClassName}
+        />
+
+        <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 mb-6", 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>
+  );
+});
+
+FooterCard.displayName = "FooterCard";
+
+export default FooterCard;
diff --git a/src/components/sections/footer/FooterLogo.tsx b/src/components/sections/footer/FooterLogo.tsx
new file mode 100644
index 0000000..f5227ed
--- /dev/null
+++ b/src/components/sections/footer/FooterLogo.tsx
@@ -0,0 +1,44 @@
+"use client";
+
+import { memo } from "react";
+import Image from "next/image";
+import SvgTextLogo from "@/components/shared/SvgTextLogo/SvgTextLogo";
+import { cls } from "@/lib/utils";
+
+interface FooterLogoProps {
+    logoSrc?: string;
+    logoAlt?: string;
+    logoText?: string;
+    className?: string;
+    svgClassName?: string;
+}
+
+const FooterLogo = memo<FooterLogoProps>(function FooterLogo({
+    logoSrc,
+    logoAlt = "Logo",
+    logoText = "Webild",
+    className = "",
+    svgClassName = ""
+}) {
+    return (
+        <div className={cls("relative z-1 w-full", className)}>
+            {logoSrc ? (
+                <Image
+                    src={logoSrc}
+                    alt={logoAlt}
+                    width={1000}
+                    height={1000}
+                    className="w-full h-auto object-contain"
+                    unoptimized={logoSrc.startsWith('http') || logoSrc.startsWith('//')}
+                    aria-hidden={logoAlt === ""}
+                />
+            ) : (
+                <SvgTextLogo logoText={logoText} className={svgClassName} />
+            )}
+        </div>
+    );
+});
+
+FooterLogo.displayName = "FooterLogo";
+
+export default FooterLogo;
\ No newline at end of file
diff --git a/src/components/sections/footer/FooterLogoEmphasis.tsx b/src/components/sections/footer/FooterLogoEmphasis.tsx
new file mode 100644
index 0000000..dddbab9
--- /dev/null
+++ b/src/components/sections/footer/FooterLogoEmphasis.tsx
@@ -0,0 +1,125 @@
+"use client";
+
+import { memo } from "react";
+import ButtonTextUnderline from "@/components/button/ButtonTextUnderline";
+import { ChevronRight } from "lucide-react";
+import FooterLogo from "./FooterLogo";
+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;
+  columnsClassName?: string;
+  columnClassName?: string;
+  itemClassName?: string;
+  iconClassName?: string;
+  buttonClassName?: string;
+}
+
+const FooterLogoEmphasis = memo<FooterLogoEmphasisProps>(
+  function FooterLogoEmphasis({
+    logoSrc,
+    logoAlt = "Logo",
+    columns,
+    logoText = "Webild",
+    ariaLabel = "Site footer",
+    className = "",
+    containerClassName = "",
+    logoClassName = "",
+    columnsClassName = "",
+    columnClassName = "",
+    itemClassName = "",
+    iconClassName = "",
+    buttonClassName = "",
+  }) {
+    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 flex justify-center relative z-1 overflow-hidden primary-button text-background rounded-t-theme-capped",
+          logoSrc ? "py-15" : "pt-0 pb-15",
+          className
+        )}
+        role="contentinfo"
+        aria-label={ariaLabel}
+      >
+        <div
+          className={cls(
+            "w-content-width mx-auto flex flex-col relative z-10",
+            logoSrc ? "gap-10 md:gap-20" : "gap-0",
+            containerClassName
+          )}
+        >
+          <FooterLogo
+            logoSrc={logoSrc}
+            logoAlt={logoAlt}
+            logoText={logoText}
+            className={logoClassName}
+          />
+
+          <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>
+    );
+  }
+);
+
+FooterLogoEmphasis.displayName = "FooterLogoEmphasis";
+
+export default FooterLogoEmphasis;
diff --git a/src/components/sections/footer/FooterLogoReveal.tsx b/src/components/sections/footer/FooterLogoReveal.tsx
new file mode 100644
index 0000000..282d92d
--- /dev/null
+++ b/src/components/sections/footer/FooterLogoReveal.tsx
@@ -0,0 +1,91 @@
+"use client";
+
+import { memo, useRef, useEffect, useState } from "react";
+import FooterLogo from "./FooterLogo";
+import { cls } from "@/lib/utils";
+
+interface FooterLogoRevealProps {
+  logoSrc?: string;
+  logoAlt?: string;
+  logoText?: string;
+  ariaLabel?: string;
+  className?: string;
+  wrapperClassName?: string;
+  containerClassName?: string;
+  logoClassName?: string;
+  svgClassName?: string;
+}
+
+const FooterLogoReveal = memo<FooterLogoRevealProps>(function FooterLogoReveal({
+  logoSrc,
+  logoAlt = "Logo",
+  logoText = "Webild",
+  ariaLabel = "Site footer",
+  className = "",
+  wrapperClassName = "",
+  containerClassName = "",
+  logoClassName = "",
+  svgClassName = "",
+}) {
+  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", 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">
+              <FooterLogo
+                logoSrc={logoSrc}
+                logoAlt={logoAlt}
+                logoText={logoText}
+                className={logoClassName}
+                svgClassName={svgClassName}
+              />
+            </div>
+          </footer>
+        </div>
+      </div>
+    </section>
+  );
+});
+
+FooterLogoReveal.displayName = "FooterLogoReveal";
+
+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..67856a7
--- /dev/null
+++ b/src/components/sections/footer/FooterMedia.tsx
@@ -0,0 +1,144 @@
+"use client";
+
+import { memo } from "react";
+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;
+    logoText?: string;
+    logoWidth?: number;
+    logoHeight?: number;
+    columns: FooterColumn[];
+    copyrightText?: string;
+    onPrivacyClick?: () => void;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    mediaWrapperClassName?: string;
+    mediaClassName?: string;
+    logoClassName?: string;
+    logoTextClassName?: string;
+    columnsClassName?: string;
+    columnClassName?: string;
+    columnTitleClassName?: string;
+    columnItemClassName?: string;
+    copyrightContainerClassName?: string;
+    copyrightTextClassName?: string;
+    privacyButtonClassName?: string;
+};
+
+const FooterMedia = memo<FooterMediaProps>(function FooterMedia({
+    imageSrc,
+    videoSrc,
+    imageAlt = "",
+    videoAriaLabel = "Footer video",
+    logoSrc = "/brand/logowhite.svg",
+    logoText = "Webild",
+    logoWidth = 120,
+    logoHeight = 40,
+    columns,
+    copyrightText = `© 2025 | Webild`,
+    onPrivacyClick,
+    ariaLabel = "Site footer",
+    className = "",
+    containerClassName = "",
+    mediaWrapperClassName = "",
+    mediaClassName = "",
+    logoClassName = "",
+    logoTextClassName = "",
+    columnsClassName = "",
+    columnClassName = "",
+    columnTitleClassName = "",
+    columnItemClassName = "",
+    copyrightContainerClassName = "",
+    copyrightTextClassName = "",
+    privacyButtonClassName = "",
+}) {
+    return (
+        <footer
+            role="contentinfo"
+            aria-label={ariaLabel}
+            className={cls("relative overflow-hidden w-full", 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-background 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="flex-shrink-0">
+                                <Image
+                                    src={logoSrc}
+                                    alt="Logo"
+                                    width={logoWidth}
+                                    height={logoHeight}
+                                    className={cls("object-contain", logoClassName)}
+                                    unoptimized={logoSrc.startsWith('http') || logoSrc.startsWith('//')}
+                                    aria-hidden={true}
+                                />
+                            </div>
+                        ) : (
+                            <h2 className={cls("text-4xl font-medium text-background", logoTextClassName)}>
+                                {logoText}
+                            </h2>
+                        )}
+
+                        <FooterColumns
+                            columns={columns}
+                            className={columnsClassName}
+                            columnClassName={columnClassName}
+                            columnTitleClassName={cls("text-background/50", columnTitleClassName)}
+                            columnItemClassName={cls("text-background", columnItemClassName)}
+                        />
+                    </div>
+
+                    <div
+                        className={cls("w-full flex items-center justify-between pt-9 border-t border-background/20", copyrightContainerClassName)}
+                    >
+                        <span className={cls("text-background/50 text-sm", copyrightTextClassName)}>
+                            {copyrightText}
+                        </span>
+                        <ButtonTextUnderline
+                            text="Privacy Policy"
+                            onClick={onPrivacyClick}
+                            className={cls("text-background/50", privacyButtonClassName)}
+                        />
+                    </div>
+                </div>
+            </div>
+        </footer>
+    );
+});
+
+FooterMedia.displayName = "FooterMedia";
+
+export default FooterMedia;
diff --git a/src/components/sections/footer/FooterSocial.tsx b/src/components/sections/footer/FooterSocial.tsx
new file mode 100644
index 0000000..8a0c9a7
--- /dev/null
+++ b/src/components/sections/footer/FooterSocial.tsx
@@ -0,0 +1,114 @@
+"use client";
+
+import { memo } from "react";
+import Image from "next/image";
+import SocialLinks from "@/components/shared/SocialLinks";
+import FooterColumns from "@/components/shared/FooterColumns";
+import { cls } from "@/lib/utils";
+import type { SocialLink } from "@/components/shared/SocialLinks";
+import type { FooterColumn } from "@/components/shared/FooterColumns";
+
+interface FooterSocialProps {
+  logoSrc?: string;
+  logoText?: string;
+  logoWidth?: number;
+  logoHeight?: number;
+  columns: FooterColumn[];
+  socialLinks?: SocialLink[];
+  copyrightText?: string;
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  logoContainerClassName?: string;
+  logoClassName?: string;
+  logoTextClassName?: string;
+  copyrightTextClassName?: string;
+  socialContainerClassName?: string;
+  socialIconClassName?: string;
+  columnsClassName?: string;
+  columnClassName?: string;
+  columnTitleClassName?: string;
+  columnItemClassName?: string;
+}
+
+const FooterSocial = memo<FooterSocialProps>(function FooterSocial({
+  logoSrc,
+  logoText = "Webild",
+  logoWidth = 120,
+  logoHeight = 40,
+  columns,
+  socialLinks,
+  copyrightText = "© Finerpoint, Inc. 2025",
+  ariaLabel = "Site footer",
+  className = "",
+  containerClassName = "",
+  logoContainerClassName = "",
+  logoClassName = "",
+  logoTextClassName = "",
+  copyrightTextClassName = "",
+  socialContainerClassName = "",
+  socialIconClassName = "",
+  columnsClassName = "",
+  columnClassName = "",
+  columnTitleClassName = "",
+  columnItemClassName = "",
+}) {
+  return (
+    <footer
+      role="contentinfo"
+      aria-label={ariaLabel}
+      className={cls("relative overflow-hidden w-full text-foreground py-15", className)}
+    >
+      <div
+        className={cls("relative w-content-width mx-auto", containerClassName)}
+      >
+        <div className="flex flex-col md:flex-row gap-14 md:gap-20 justify-between">
+          <div className={cls("flex flex-col gap-15", logoContainerClassName)}>
+            <div className="flex flex-col gap-0">
+              {logoSrc ? (
+                <div className="flex-shrink-0">
+                  <Image
+                    src={logoSrc}
+                    alt="Logo"
+                    width={logoWidth}
+                    height={logoHeight}
+                    className={cls("object-contain", logoClassName)}
+                    unoptimized={logoSrc.startsWith('http') || logoSrc.startsWith('//')}
+                    aria-hidden={true}
+                  />
+                </div>
+              ) : (
+                <h2 className={cls("text-4xl font-medium", logoTextClassName)}>
+                  {logoText}
+                </h2>
+              )}
+              <p className={cls("text-sm text-accent/75", copyrightTextClassName)}>
+                {copyrightText}
+              </p>
+            </div>
+
+            {socialLinks && socialLinks.length > 0 && (
+              <SocialLinks
+                socialLinks={socialLinks}
+                className={socialContainerClassName}
+                iconClassName={socialIconClassName}
+              />
+            )}
+          </div>
+
+          <FooterColumns
+            columns={columns}
+            className={columnsClassName}
+            columnClassName={columnClassName}
+            columnTitleClassName={columnTitleClassName}
+            columnItemClassName={columnItemClassName}
+          />
+        </div>
+      </div>
+    </footer>
+  );
+});
+
+FooterSocial.displayName = "FooterSocial";
+
+export default FooterSocial;
diff --git a/src/components/sections/footer/FooterSplit.tsx b/src/components/sections/footer/FooterSplit.tsx
new file mode 100644
index 0000000..d2633b6
--- /dev/null
+++ b/src/components/sections/footer/FooterSplit.tsx
@@ -0,0 +1,139 @@
+"use client";
+
+import { memo } from "react";
+import Image from "next/image";
+import FooterColumns from "@/components/shared/FooterColumns";
+import AvatarGroup from "@/components/shared/AvatarGroup";
+import { cls } from "@/lib/utils";
+import type { FooterColumn } from "@/components/shared/FooterColumns";
+import type { Avatar } from "@/components/shared/AvatarGroup";
+import type { LucideIcon } from "lucide-react";
+
+interface ContactItem {
+  icon: LucideIcon;
+  text: string;
+}
+
+interface FooterSplitProps {
+  logoSrc?: string;
+  logoAlt?: string;
+  logoText?: string;
+  logoWidth?: number;
+  logoHeight?: number;
+  columns: FooterColumn[];
+  title: string;
+  avatars?: Avatar[];
+  contactItems: ContactItem[];
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  cardClassName?: string;
+  contentClassName?: string;
+  columnsClassName?: string;
+  columnClassName?: string;
+  columnTitleClassName?: string;
+  columnItemClassName?: string;
+  titleClassName?: string;
+  avatarGroupClassName?: string;
+  logoClassName?: string;
+  logoTextClassName?: string;
+  contactClassName?: string;
+  contactItemClassName?: string;
+  contactIconClassName?: string;
+}
+
+const FooterSplit = memo<FooterSplitProps>(function FooterSplit({
+  logoSrc,
+  logoAlt = "Logo",
+  logoText = "Webild",
+  logoWidth = 120,
+  logoHeight = 40,
+  columns,
+  title,
+  avatars,
+  contactItems,
+  ariaLabel = "Site footer",
+  className = "",
+  containerClassName = "",
+  cardClassName = "",
+  contentClassName = "",
+  columnsClassName = "",
+  columnClassName = "",
+  columnTitleClassName = "",
+  columnItemClassName = "",
+  titleClassName = "",
+  avatarGroupClassName = "",
+  logoClassName = "",
+  logoTextClassName = "",
+  contactClassName = "",
+  contactItemClassName = "",
+  contactIconClassName = "",
+}) {
+  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 flex flex-col gap-40 p-10", containerClassName, cardClassName)}>
+        <div className={cls("relative z-1 flex flex-col md:flex-row gap-10", contentClassName)}>
+          <FooterColumns
+            columns={columns}
+            className={columnsClassName}
+            columnClassName={columnClassName}
+            columnTitleClassName={columnTitleClassName}
+            columnItemClassName={columnItemClassName}
+          />
+
+          <div className="flex-1 flex flex-col items-start md:items-end text-left md:text-right gap-4">
+            <h2 className={cls("text-4xl font-medium w-full md:w-1/2 text-balance", titleClassName)}>
+              {title}
+            </h2>
+            {avatars && avatars.length > 0 && (
+              <AvatarGroup
+                avatars={avatars}
+                className={avatarGroupClassName}
+              />
+            )}
+          </div>
+        </div>
+
+        <div className="relative z-1 flex flex-col-reverse md:flex-row items-start md:items-end justify-between gap-6">
+          {logoSrc ? (
+            <div className="w-full flex-shrink-0">
+              <Image
+                src={logoSrc}
+                alt={logoAlt}
+                width={logoWidth}
+                height={logoHeight}
+                className={cls("object-contain w-full md:w-20", logoClassName)}
+                unoptimized={logoSrc.startsWith('http') || logoSrc.startsWith('//')}
+                aria-hidden={true}
+              />
+            </div>
+          ) : (
+            <h2 className={cls("w-full text-9xl font-medium truncate", logoTextClassName)}>
+              {logoText}
+            </h2>
+          )}
+
+          <div className={cls("w-full md:w-auto flex flex-col gap-2 text-accent text-base", contactClassName)}>
+            {contactItems.map((item, index) => {
+              const Icon = item.icon;
+              return (
+                <div key={index} className={cls("w-full md:w-auto flex items-center gap-2", contactItemClassName)}>
+                  <Icon className={cls("h-[1em] w-auto", contactIconClassName)} />
+                  <span className="whitespace-nowrap truncate" >{item.text}</span>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+});
+
+FooterSplit.displayName = "FooterSplit";
+
+export default FooterSplit;
diff --git a/src/components/sections/hero/HeroBillboard.tsx b/src/components/sections/hero/HeroBillboard.tsx
new file mode 100644
index 0000000..ac8df70
--- /dev/null
+++ b/src/components/sections/hero/HeroBillboard.tsx
@@ -0,0 +1,128 @@
+"use client";
+
+import React, { memo } from "react";
+import TextBox from "@/components/Textbox";
+import MediaContent from "@/components/shared/MediaContent";
+import { cls } from "@/lib/utils";
+import { Plus } from "lucide-react";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig } from "@/types/button";
+
+interface HeroBillboardProps {
+  title: string;
+  description: string;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  buttons?: ButtonConfig[];
+  imageSrc?: string;
+  videoSrc?: string;
+  imageAlt?: string;
+  videoAriaLabel?: string;
+  frameStyle?: "card" | "browser";
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  textBoxClassName?: string;
+  titleClassName?: string;
+  descriptionClassName?: string;
+  tagClassName?: string;
+  buttonContainerClassName?: string;
+  buttonClassName?: string;
+  buttonTextClassName?: string;
+  mediaWrapperClassName?: string;
+  imageClassName?: string;
+  browserBarClassName?: string;
+  addressBarClassName?: string;
+}
+
+const HeroBillboard = ({
+  title,
+  description,
+  tag,
+  tagIcon,
+  buttons,
+  imageSrc,
+  videoSrc,
+  imageAlt = "",
+  videoAriaLabel = "Hero video",
+  frameStyle = "card",
+  ariaLabel = "Hero section",
+  className = "",
+  containerClassName = "",
+  textBoxClassName = "",
+  titleClassName = "",
+  descriptionClassName = "",
+  tagClassName = "",
+  buttonContainerClassName = "",
+  buttonClassName = "",
+  buttonTextClassName = "",
+  mediaWrapperClassName = "",
+  imageClassName = "",
+  browserBarClassName = "",
+  addressBarClassName = "",
+}: HeroBillboardProps) => {
+  return (
+    <section
+      aria-label={ariaLabel}
+      className={cls("w-full py-hero-page-padding", className)}
+    >
+      <div className={cls("w-content-width mx-auto flex flex-col gap-14 md:gap-15", containerClassName)}>
+        <TextBox
+          title={title}
+          description={description}
+          tag={tag}
+          tagIcon={tagIcon}
+          buttons={buttons}
+          className={cls("flex flex-col gap-3 md:gap-1", textBoxClassName)}
+          titleClassName={cls("text-6xl font-medium text-balance", titleClassName)}
+          descriptionClassName={cls("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 gap-4 mt-3", buttonContainerClassName)}
+          buttonClassName={buttonClassName}
+          buttonTextClassName={buttonTextClassName}
+          center={true}
+        />
+        {frameStyle === "browser" ? (
+          <div 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("rounded-none!", imageClassName)}
+              />
+            </div>
+          </div>
+        ) : (
+          <div 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", imageClassName)}
+            />
+          </div>
+        )}
+      </div>
+    </section>
+  );
+};
+
+HeroBillboard.displayName = "HeroBillboard";
+
+export default memo(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..aa789e6
--- /dev/null
+++ b/src/components/sections/hero/HeroBillboardCarousel.tsx
@@ -0,0 +1,127 @@
+"use client";
+
+import React, { memo } from "react";
+import TextBox from "@/components/Textbox";
+import MediaContent from "@/components/shared/MediaContent";
+import AutoCarousel from "@/components/cardStack/layouts/carousels/AutoCarousel";
+import { cls } from "@/lib/utils";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig } from "@/types/button";
+
+export interface MediaItem {
+  imageSrc?: string;
+  videoSrc?: string;
+  imageAlt?: string;
+  videoAriaLabel?: string;
+}
+
+interface HeroBillboardCarouselProps {
+  title: string;
+  description: string;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  buttons?: ButtonConfig[];
+  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,
+  tag,
+  tagIcon,
+  buttons,
+  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(
+        "w-full py-hero-page-padding md:h-svh md:py-0",
+        className
+      )}
+    >
+      <div className={cls(
+        "mx-auto flex flex-col gap-14 md:gap-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}
+          buttons={buttons}
+          className={cls(
+            "flex flex-col gap-3 md:gap-1 w-content-width mx-auto",
+            textBoxClassName
+          )}
+          titleClassName={cls("text-6xl font-medium text-balance", titleClassName)}
+          descriptionClassName={cls("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 gap-4 mt-3", 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>
+  );
+};
+
+HeroBillboardCarousel.displayName = "HeroBillboardCarousel";
+
+export default memo(HeroBillboardCarousel);
diff --git a/src/components/sections/hero/HeroBillboardCarouselSplit.tsx b/src/components/sections/hero/HeroBillboardCarouselSplit.tsx
new file mode 100644
index 0000000..6d0edb4
--- /dev/null
+++ b/src/components/sections/hero/HeroBillboardCarouselSplit.tsx
@@ -0,0 +1,113 @@
+"use client";
+
+import React, { memo } from "react";
+import TextBox from "@/components/Textbox";
+import MediaContent from "@/components/shared/MediaContent";
+import AutoCarousel from "@/components/cardStack/layouts/carousels/AutoCarousel";
+import { cls } from "@/lib/utils";
+import type { ButtonConfig } from "@/types/button";
+
+export interface MediaItem {
+  imageSrc?: string;
+  videoSrc?: string;
+  imageAlt?: string;
+  videoAriaLabel?: string;
+}
+
+interface HeroBillboardCarouselSplitProps {
+  title: string;
+  buttons?: ButtonConfig[];
+  mediaItems: MediaItem[];
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  textBoxClassName?: string;
+  titleClassName?: string;
+  buttonContainerClassName?: string;
+  buttonClassName?: string;
+  buttonTextClassName?: string;
+  mediaWrapperClassName?: string;
+}
+
+const HeroBillboardCarouselSplit = ({
+  title,
+  buttons,
+  mediaItems,
+  ariaLabel = "Hero section",
+  className = "",
+  containerClassName = "",
+  textBoxClassName = "",
+  titleClassName = "",
+  buttonContainerClassName = "",
+  buttonClassName = "",
+  buttonTextClassName = "",
+  mediaWrapperClassName = "",
+}: HeroBillboardCarouselSplitProps) => {
+  const renderCarouselItem = (item: MediaItem, index: number) => (
+    <div
+      key={index}
+      className="w-full aspect-square overflow-hidden rounded-theme-capped card p-2"
+    >
+      <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(
+        "w-full py-hero-page-padding md:h-svh md:py-0",
+        className
+      )}
+    >
+      <div className={cls(
+        "mx-auto flex flex-col gap-14 md:gap-10",
+        "w-full md:w-content-width md:h-full md:items-center md:justify-center",
+        containerClassName
+      )}>
+        <TextBox
+          title={title}
+          description=""
+          buttons={buttons}
+          textboxLayout="split-actions"
+          className={cls(
+            "flex flex-col gap-3 md:gap-1 w-content-width mx-auto",
+            textBoxClassName
+          )}
+          titleClassName={cls("text-6xl font-medium text-balance", titleClassName)}
+          buttonContainerClassName={cls("flex gap-4 mt-3", 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>
+  );
+};
+
+HeroBillboardCarouselSplit.displayName = "HeroBillboardCarouselSplit";
+
+export default memo(HeroBillboardCarouselSplit);
diff --git a/src/components/sections/hero/HeroBillboardGallery.tsx b/src/components/sections/hero/HeroBillboardGallery.tsx
new file mode 100644
index 0000000..9acddc5
--- /dev/null
+++ b/src/components/sections/hero/HeroBillboardGallery.tsx
@@ -0,0 +1,167 @@
+"use client";
+
+import React, { memo } from "react";
+import TextBox from "@/components/Textbox";
+import MediaContent from "@/components/shared/MediaContent";
+import AutoCarousel from "@/components/cardStack/layouts/carousels/AutoCarousel";
+import { cls } from "@/lib/utils";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig } from "@/types/button";
+
+export interface MediaItem {
+  imageSrc?: string;
+  videoSrc?: string;
+  imageAlt?: string;
+  videoAriaLabel?: string;
+}
+
+interface HeroBillboardGalleryProps {
+  title: string;
+  description: string;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  buttons?: ButtonConfig[];
+  mediaItems: MediaItem[];
+  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,
+  tag,
+  tagIcon,
+  buttons,
+  mediaItems,
+  ariaLabel = "Hero section",
+  className = "",
+  containerClassName = "",
+  textBoxClassName = "",
+  titleClassName = "",
+  descriptionClassName = "",
+  tagClassName = "",
+  buttonContainerClassName = "",
+  buttonClassName = "",
+  buttonTextClassName = "",
+  mediaWrapperClassName = "",
+  imageClassName = "",
+}: HeroBillboardGalleryProps) => {
+  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(
+        "w-full py-hero-page-padding md:h-svh md:py-0",
+        className
+      )}
+    >
+      <div className={cls(
+        "mx-auto flex flex-col gap-14",
+        "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}
+          buttons={buttons}
+          className={cls(
+            "flex flex-col gap-3 md:gap-1 w-content-width mx-auto",
+            textBoxClassName
+          )}
+          titleClassName={cls("text-6xl font-medium text-balance", titleClassName)}
+          descriptionClassName={cls("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 gap-4 mt-3", 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 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>
+  );
+};
+
+HeroBillboardGallery.displayName = "HeroBillboardGallery";
+
+export default memo(HeroBillboardGallery);
diff --git a/src/components/sections/hero/HeroBillboardMetrics.tsx b/src/components/sections/hero/HeroBillboardMetrics.tsx
new file mode 100644
index 0000000..c8062c7
--- /dev/null
+++ b/src/components/sections/hero/HeroBillboardMetrics.tsx
@@ -0,0 +1,195 @@
+"use client";
+
+import React, { memo } from "react";
+import TextBox from "@/components/Textbox";
+import MediaContent from "@/components/shared/MediaContent";
+import { cls } from "@/lib/utils";
+import { Plus } from "lucide-react";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig } from "@/types/button";
+
+interface Metric {
+  id: string;
+  value: string;
+  label: string;
+}
+
+interface HeroBillboardMetricsProps {
+  title: string;
+  description: string;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  buttons?: ButtonConfig[];
+  imageSrc?: string;
+  videoSrc?: string;
+  imageAlt?: string;
+  videoAriaLabel?: string;
+  frameStyle?: "card" | "browser";
+  metricsLabel: string;
+  metrics: Metric[];
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  textBoxClassName?: string;
+  titleClassName?: string;
+  descriptionClassName?: string;
+  tagClassName?: string;
+  buttonContainerClassName?: string;
+  buttonClassName?: string;
+  buttonTextClassName?: string;
+  mediaWrapperClassName?: string;
+  imageClassName?: string;
+  browserBarClassName?: string;
+  addressBarClassName?: string;
+  metricsContainerClassName?: string;
+  metricsLabelClassName?: string;
+  metricsGridClassName?: string;
+  metricClassName?: string;
+  metricValueClassName?: string;
+  metricLabelClassName?: string;
+}
+
+const HeroBillboardMetrics = ({
+  title,
+  description,
+  tag,
+  tagIcon,
+  buttons,
+  imageSrc,
+  videoSrc,
+  imageAlt = "",
+  videoAriaLabel = "Hero video",
+  frameStyle = "card",
+  metricsLabel,
+  metrics,
+  ariaLabel = "Hero section",
+  className = "",
+  containerClassName = "",
+  textBoxClassName = "",
+  titleClassName = "",
+  descriptionClassName = "",
+  tagClassName = "",
+  buttonContainerClassName = "",
+  buttonClassName = "",
+  buttonTextClassName = "",
+  mediaWrapperClassName = "",
+  imageClassName = "",
+  browserBarClassName = "",
+  addressBarClassName = "",
+  metricsContainerClassName = "",
+  metricsLabelClassName = "",
+  metricsGridClassName = "",
+  metricClassName = "",
+  metricValueClassName = "",
+  metricLabelClassName = "",
+}: HeroBillboardMetricsProps) => {
+  return (
+    <section
+      aria-label={ariaLabel}
+      className={cls("w-full py-hero-page-padding", className)}
+    >
+      <div className={cls("w-content-width mx-auto flex flex-col gap-14 md:gap-15", containerClassName)}>
+        <TextBox
+          title={title}
+          description={description}
+          tag={tag}
+          tagIcon={tagIcon}
+          buttons={buttons}
+          className={cls("flex flex-col gap-3 md:gap-1", textBoxClassName)}
+          titleClassName={cls("text-6xl font-medium text-balance", titleClassName)}
+          descriptionClassName={cls("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 gap-4 mt-3", buttonContainerClassName)}
+          buttonClassName={buttonClassName}
+          buttonTextClassName={buttonTextClassName}
+          center={true}
+        />
+        {frameStyle === "browser" ? (
+          <div 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("rounded-none!", imageClassName)}
+              />
+            </div>
+          </div>
+        ) : (
+          <div 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", imageClassName)}
+            />
+          </div>
+        )}
+
+        <div className={cls(
+          "relative w-full flex flex-col md:flex-row md:items-center justify-between gap-4 md:gap-10 border-t border-accent pt-10 mt-10 md:mt-0",
+          metricsContainerClassName
+        )}>
+          <div className="relative w-full md:w-1/3" >
+            <p className={cls(
+              "text-base text-foreground/75 leading-tight text-balance",
+              metricsLabelClassName
+            )}>
+              {metricsLabel}
+            </p>
+          </div>
+
+          <div className={cls(
+            "w-full md:w-1/2 grid grid-cols-2 gap-4 md:gap-6",
+            metrics.length === 2 && "md:grid-cols-2",
+            metrics.length === 3 && "md:grid-cols-3",
+            metricsGridClassName
+          )}>
+            {metrics.map((metric, index) => (
+              <div
+                key={metric.id}
+                className={cls(
+                  "relative card rounded-theme-capped flex flex-col gap-0 p-4",
+                  metrics.length === 3 && index === 2 && "col-span-2 md:col-span-1",
+                  metricClassName
+                )}
+              >
+                <h3 className={cls(
+                  "relative w-full min-w-0 text-4xl font-medium text-foreground truncate",
+                  metricValueClassName
+                )}>
+                  {metric.value}
+                </h3>
+                <p className={cls(
+                  "relative w-full min-w-0 text-sm text-foreground/70 truncate",
+                  metricLabelClassName
+                )}>
+                  {metric.label}
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+HeroBillboardMetrics.displayName = "HeroBillboardMetrics";
+
+export default memo(HeroBillboardMetrics);
diff --git a/src/components/sections/hero/HeroBillboardRotatedCarousel.tsx b/src/components/sections/hero/HeroBillboardRotatedCarousel.tsx
new file mode 100644
index 0000000..1ec4538
--- /dev/null
+++ b/src/components/sections/hero/HeroBillboardRotatedCarousel.tsx
@@ -0,0 +1,98 @@
+"use client";
+
+import { memo } from "react";
+import TextBox from "@/components/Textbox";
+import AngledCarousel from "@/components/cardStack/layouts/carousels/AngledCarousel";
+import { cls } from "@/lib/utils";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig } from "@/types/button";
+
+interface CarouselItem {
+  id: string;
+  imageSrc?: string;
+  videoSrc?: string;
+  imageAlt?: string;
+  videoAriaLabel?: string;
+}
+
+interface HeroBillboardRotatedCarouselProps {
+  title: string;
+  description: string;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  buttons?: ButtonConfig[];
+  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,
+  tag,
+  tagIcon,
+  buttons,
+  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("w-full h-svh flex items-center justify-center pt-10", className)}
+    >
+      <div className={cls("w-full flex flex-col gap-14 md:gap-15", containerClassName)}>
+        <div className="w-content-width mx-auto" >
+          <TextBox
+            title={title}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            buttons={buttons}
+            className={cls("flex flex-col gap-3 md:gap-1", textBoxClassName)}
+            titleClassName={cls("text-6xl font-medium text-balance", titleClassName)}
+            descriptionClassName={cls("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 gap-4 mt-3", buttonContainerClassName)}
+            buttonClassName={buttonClassName}
+            buttonTextClassName={buttonTextClassName}
+            center={true}
+          />
+        </div>
+
+        <AngledCarousel
+          items={carouselItems}
+          autoPlay={autoPlay}
+          autoPlayInterval={autoPlayInterval}
+          className={carouselClassName}
+        />
+      </div>
+    </section>
+  );
+};
+
+HeroBillboardRotatedCarousel.displayName = "HeroBillboardRotatedCarousel";
+
+export default memo(HeroBillboardRotatedCarousel);
diff --git a/src/components/sections/hero/HeroBillboardScroll.tsx b/src/components/sections/hero/HeroBillboardScroll.tsx
new file mode 100644
index 0000000..dc39859
--- /dev/null
+++ b/src/components/sections/hero/HeroBillboardScroll.tsx
@@ -0,0 +1,139 @@
+"use client";
+
+import React, { memo, useRef } from "react";
+import { useScroll, useTransform, motion } from "motion/react";
+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 } from "@/types/button";
+
+interface HeroBillboardScrollProps {
+  title: string;
+  description: string;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  buttons?: ButtonConfig[];
+  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,
+  tag,
+  tagIcon,
+  buttons,
+  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)}
+    >
+      <div
+        className={cls("py-hero-page-padding w-full relative", containerClassName)}
+        style={{
+          perspective: "1000px",
+        }}
+      >
+        <div className="w-content-width mx-auto">
+          <TextBox
+            title={title}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            buttons={buttons}
+            className={cls("flex flex-col gap-3 md:gap-1", textBoxClassName)}
+            titleClassName={cls("text-6xl font-medium text-balance", titleClassName)}
+            descriptionClassName={cls("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 gap-4 mt-3", 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", 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>
+  );
+};
+
+HeroBillboardScroll.displayName = "HeroBillboardScroll";
+
+export default memo(HeroBillboardScroll);
diff --git a/src/components/sections/hero/HeroBillboardSplit.tsx b/src/components/sections/hero/HeroBillboardSplit.tsx
new file mode 100644
index 0000000..6ce4c0b
--- /dev/null
+++ b/src/components/sections/hero/HeroBillboardSplit.tsx
@@ -0,0 +1,137 @@
+"use client";
+
+import React, { memo } from "react";
+import TextBox from "@/components/Textbox";
+import MediaContent from "@/components/shared/MediaContent";
+import { cls } from "@/lib/utils";
+import { Plus, LucideIcon } from "lucide-react";
+import type { ButtonConfig } from "@/types/button";
+
+interface HeroBillboardSplitProps {
+  title: string;
+  description: string;
+  tag: string;
+  tagIcon?: LucideIcon;
+  buttons: ButtonConfig[];
+  imageSrc?: string;
+  videoSrc?: string;
+  imageAlt?: string;
+  videoAriaLabel?: string;
+  frameStyle?: "browser" | "card";
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  textBoxClassName?: string;
+  titleClassName?: string;
+  descriptionClassName?: string;
+  tagClassName?: string;
+  buttonContainerClassName?: string;
+  buttonClassName?: string;
+  buttonTextClassName?: string;
+  mediaWrapperClassName?: string;
+  browserBarClassName?: string;
+  addressBarClassName?: string;
+  imageClassName?: string;
+}
+
+const HeroBillboardSplit = ({
+  title,
+  description,
+  tag,
+  tagIcon,
+  buttons,
+  imageSrc,
+  videoSrc,
+  imageAlt = "",
+  videoAriaLabel = "Hero media",
+  frameStyle = "browser",
+  ariaLabel = "Hero section",
+  className = "",
+  containerClassName = "",
+  textBoxClassName = "",
+  titleClassName = "",
+  descriptionClassName = "",
+  tagClassName = "",
+  buttonContainerClassName = "",
+  buttonClassName = "",
+  buttonTextClassName = "",
+  mediaWrapperClassName = "",
+  browserBarClassName = "",
+  addressBarClassName = "",
+  imageClassName = "",
+}: HeroBillboardSplitProps) => {
+  return (
+    <section
+      aria-label={ariaLabel}
+      className={cls(
+        "w-full h-fit py-hero-page-padding",
+        className
+      )}
+    >
+      <div className={cls(
+        "relative w-content-width mx-auto flex flex-col gap-14 md:gap-10",
+        containerClassName
+      )}>
+        <TextBox
+          title={title}
+          description={description}
+          tag={tag}
+          tagIcon={tagIcon}
+          buttons={buttons}
+          textboxLayout="split"
+          className={cls(
+            "w-content-width mx-auto",
+            textBoxClassName
+          )}
+          titleClassName={titleClassName}
+          descriptionClassName={descriptionClassName}
+          tagClassName={tagClassName}
+          buttonContainerClassName={buttonContainerClassName}
+          buttonClassName={buttonClassName}
+          buttonTextClassName={buttonTextClassName}
+        />
+
+        {frameStyle === "browser" ? (
+          <div 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("rounded-none!", imageClassName)}
+              />
+            </div>
+          </div>
+        ) : (
+          <div 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", imageClassName)}
+            />
+          </div>
+        )}
+      </div>
+    </section>
+  );
+};
+
+HeroBillboardSplit.displayName = "HeroBillboardSplit";
+
+export default memo(HeroBillboardSplit);
diff --git a/src/components/sections/hero/HeroChatPrompt.tsx b/src/components/sections/hero/HeroChatPrompt.tsx
new file mode 100644
index 0000000..a7b3116
--- /dev/null
+++ b/src/components/sections/hero/HeroChatPrompt.tsx
@@ -0,0 +1,124 @@
+"use client";
+
+import React, { memo } from "react";
+import TextBox from "@/components/Textbox";
+import { cls } from "@/lib/utils";
+import { ArrowUp } from "lucide-react";
+import type { LucideIcon } from "lucide-react";
+
+interface FeatureTag {
+  id: string;
+  label: string;
+  icon: LucideIcon;
+}
+
+interface HeroChatPromptProps {
+  title: string;
+  description: string;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  promptText?: string;
+  featureTags: FeatureTag[];
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  textBoxClassName?: string;
+  titleClassName?: string;
+  descriptionClassName?: string;
+  tagClassName?: string;
+  promptContainerClassName?: string;
+  promptTextClassName?: string;
+  promptButtonClassName?: string;
+  featureTagsClassName?: string;
+  featureTagClassName?: string;
+}
+
+const HeroChatPrompt = ({
+  title,
+  description,
+  tag,
+  tagIcon,
+  promptText = "Ask me anything...",
+  featureTags,
+  ariaLabel = "Hero section",
+  className = "",
+  containerClassName = "",
+  textBoxClassName = "",
+  titleClassName = "",
+  descriptionClassName = "",
+  tagClassName = "",
+  promptContainerClassName = "",
+  promptTextClassName = "",
+  promptButtonClassName = "",
+  featureTagsClassName = "",
+  featureTagClassName = "",
+}: HeroChatPromptProps) => {
+
+  return (
+    <section
+      aria-label={ariaLabel}
+      className={cls("relative w-full h-svh flex items-center justify-center", className)}
+    >
+      <div className={cls("w-content-width mx-auto flex flex-col gap-8", containerClassName)}>
+        <TextBox
+          title={title}
+          description={description}
+          tag={tag}
+          tagIcon={tagIcon}
+          className={cls("flex flex-col gap-3 md:gap-1", textBoxClassName)}
+          titleClassName={cls("text-6xl font-medium text-balance", titleClassName)}
+          descriptionClassName={cls("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)}
+          center={true}
+        />
+
+        <div className={cls(
+          "w-full md:w-50 mx-auto card p-6 rounded-theme-capped flex flex-col gap-10",
+          promptContainerClassName
+        )}>
+          <p className={cls(
+            "relative z-1 flex-1 text-lg text-foreground truncate",
+            promptTextClassName
+          )}>
+            {promptText}
+          </p>
+          <div className="relative z-1 w-full flex justify-end" >
+            <div
+              className={cls(
+                "h-8 w-[var(--height-8)] rounded-theme primary-button flex items-center justify-center",
+                promptButtonClassName
+              )}
+            >
+              <ArrowUp className="w-1/2 h-1/2 text-background" strokeWidth={1.5} />
+            </div>
+          </div>
+        </div>
+
+        <div className={cls(
+          "w-full md:w-50 mx-auto flex flex-wrap items-center justify-center gap-3",
+          featureTagsClassName
+        )}>
+          {featureTags.map((featureTag) => {
+            const FeatureIcon = featureTag.icon;
+            return (
+              <div
+                key={featureTag.id}
+                className={cls(
+                  "px-4 py-2 text-sm card rounded-theme flex items-center gap-2",
+                  featureTagClassName
+                )}
+              >
+                <FeatureIcon className="relative z-1 h-[1em] w-auto" />
+                <span className="relative z-1" >{featureTag.label}</span>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+HeroChatPrompt.displayName = "HeroChatPrompt";
+
+export default memo(HeroChatPrompt);
diff --git a/src/components/sections/hero/HeroChatPromptFeatures.tsx b/src/components/sections/hero/HeroChatPromptFeatures.tsx
new file mode 100644
index 0000000..3552489
--- /dev/null
+++ b/src/components/sections/hero/HeroChatPromptFeatures.tsx
@@ -0,0 +1,186 @@
+"use client";
+
+import React, { memo } from "react";
+import TextBox from "@/components/Textbox";
+import { cls } from "@/lib/utils";
+import { ArrowUp } from "lucide-react";
+import type { LucideIcon } from "lucide-react";
+
+interface FeatureTag {
+  id: string;
+  label: string;
+  icon: LucideIcon;
+}
+
+interface FeatureHighlight {
+  id: string;
+  icon: LucideIcon;
+  title: string;
+  subtitle: string;
+}
+
+interface HeroChatPromptFeaturesProps {
+  title: string;
+  description: string;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  promptText?: string;
+  featureTags: FeatureTag[];
+  featureHighlights: FeatureHighlight[];
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  textBoxClassName?: string;
+  titleClassName?: string;
+  descriptionClassName?: string;
+  tagClassName?: string;
+  promptContainerClassName?: string;
+  promptTextClassName?: string;
+  promptButtonClassName?: string;
+  featureTagsClassName?: string;
+  featureTagClassName?: string;
+  featureHighlightsClassName?: string;
+  featureHighlightClassName?: string;
+  featureHighlightIconClassName?: string;
+  featureHighlightTitleClassName?: string;
+  featureHighlightSubtitleClassName?: string;
+}
+
+const HeroChatPromptFeatures = ({
+  title,
+  description,
+  tag,
+  tagIcon,
+  promptText = "Ask me anything...",
+  featureTags,
+  featureHighlights,
+  ariaLabel = "Hero section",
+  className = "",
+  containerClassName = "",
+  textBoxClassName = "",
+  titleClassName = "",
+  descriptionClassName = "",
+  tagClassName = "",
+  promptContainerClassName = "",
+  promptTextClassName = "",
+  promptButtonClassName = "",
+  featureTagsClassName = "",
+  featureTagClassName = "",
+  featureHighlightsClassName = "",
+  featureHighlightClassName = "",
+  featureHighlightIconClassName = "",
+  featureHighlightTitleClassName = "",
+  featureHighlightSubtitleClassName = "",
+}: HeroChatPromptFeaturesProps) => {
+
+  return (
+    <section
+      aria-label={ariaLabel}
+      className={cls("relative pt-hero-page-padding md:pt-0 w-full h-fit md:h-svh flex items-center justify-center", className)}
+    >
+      <div className={cls("w-content-width mx-auto flex flex-col gap-8", containerClassName)}>
+        <TextBox
+          title={title}
+          description={description}
+          tag={tag}
+          tagIcon={tagIcon}
+          className={cls("flex flex-col gap-3 md:gap-1", textBoxClassName)}
+          titleClassName={cls("text-6xl font-medium text-balance", titleClassName)}
+          descriptionClassName={cls("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)}
+          center={true}
+        />
+
+        <div className={cls(
+          "w-full md:w-50 mx-auto flex flex-wrap items-center justify-center gap-3",
+          featureTagsClassName
+        )}>
+          {featureTags.map((featureTag) => {
+            const FeatureIcon = featureTag.icon;
+            return (
+              <div
+                key={featureTag.id}
+                className={cls(
+                  "px-4 py-2 text-sm card rounded-theme flex items-center gap-2",
+                  featureTagClassName
+                )}
+              >
+                <FeatureIcon className="relative z-1 h-[1em] w-auto" />
+                <span className="relative z-1" >{featureTag.label}</span>
+              </div>
+            );
+          })}
+        </div>
+
+        <div className={cls(
+          "w-full md:w-50 mx-auto card p-6 rounded-theme-capped flex flex-col gap-10",
+          promptContainerClassName
+        )}>
+          <p className={cls(
+            "relative z-1 flex-1 text-lg text-foreground truncate",
+            promptTextClassName
+          )}>
+            {promptText}
+          </p>
+          <div className="relative z-1 w-full flex justify-end" >
+            <div
+              className={cls(
+                "h-8 w-[var(--height-8)] rounded-theme primary-button flex items-center justify-center",
+                promptButtonClassName
+              )}
+            >
+              <ArrowUp className="w-1/2 h-1/2 text-background" strokeWidth={1.5} />
+            </div>
+          </div>
+        </div>
+        <div className="relative h-px w-full md:w-50 mx-auto bg-accent" />
+
+        <div className={cls(
+          "w-full md:w-50 mx-auto grid grid-cols-1 gap-6",
+          featureHighlights.length === 2 && "md:grid-cols-2",
+          featureHighlights.length === 3 && "md:grid-cols-3",
+          featureHighlights.length === 4 && "md:grid-cols-2",
+          featureHighlightsClassName
+        )}>
+          {featureHighlights.map((highlight) => {
+            const HighlightIcon = highlight.icon;
+            return (
+              <div
+                key={highlight.id}
+                className={cls(
+                  "relative w-full min-w-0 flex items-center gap-4 p-3 card rounded-theme-capped",
+                  featureHighlightClassName
+                )}
+              >
+                <div className={cls(
+                  "relative shrink-0 h-10 w-auto aspect-square rounded-theme card flex items-center justify-center",
+                  featureHighlightIconClassName
+                )}>
+                  <HighlightIcon className="relative z-1 h-45/100 w-45/100 text-foreground" strokeWidth={1.5} />
+                </div>
+                <div className="relative w-full min-w-0 flex flex-col">
+                  <h3 className={cls(
+                    "relative w-full z-1 text-base font-medium text-foreground leading-tight truncate",
+                    featureHighlightTitleClassName
+                  )}>
+                    {highlight.title}
+                  </h3>
+                  <p className={cls(
+                    "relative w-full z-1 text-sm text-foreground/70 leading-tight truncate",
+                    featureHighlightSubtitleClassName
+                  )}>
+                    {highlight.subtitle}
+                  </p>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+HeroChatPromptFeatures.displayName = "HeroChatPromptFeatures";
+
+export default memo(HeroChatPromptFeatures);
diff --git a/src/components/sections/hero/HeroEmailSignup.tsx b/src/components/sections/hero/HeroEmailSignup.tsx
new file mode 100644
index 0000000..997ed7c
--- /dev/null
+++ b/src/components/sections/hero/HeroEmailSignup.tsx
@@ -0,0 +1,87 @@
+"use client";
+
+import React, { memo } from "react";
+import TextBox from "@/components/Textbox";
+import EmailSignupForm from "@/components/form/EmailSignupForm";
+import { cls } from "@/lib/utils";
+import type { LucideIcon } from "lucide-react";
+
+interface HeroEmailSignupProps {
+  title: string;
+  description: string;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  inputPlaceholder?: string;
+  buttonText?: string;
+  onSubmit?: (email: string) => void;
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  textBoxClassName?: string;
+  titleClassName?: string;
+  descriptionClassName?: string;
+  tagClassName?: string;
+  formClassName?: string;
+  inputClassName?: string;
+  buttonClassName?: string;
+  buttonTextClassName?: string;
+}
+
+const HeroEmailSignup = ({
+  title,
+  description,
+  tag,
+  tagIcon,
+  inputPlaceholder = "Enter your email",
+  buttonText = "Sign Up",
+  onSubmit,
+  ariaLabel = "Hero section",
+  className = "",
+  containerClassName = "",
+  textBoxClassName = "",
+  titleClassName = "",
+  descriptionClassName = "",
+  tagClassName = "",
+  formClassName = "",
+  inputClassName = "",
+  buttonClassName = "",
+  buttonTextClassName = "",
+}: HeroEmailSignupProps) => {
+
+  return (
+    <section
+      aria-label={ariaLabel}
+      className={cls("relative w-full h-svh flex items-center justify-center", className)}
+    >
+      <div className={cls("w-content-width mx-auto flex flex-col gap-8", containerClassName)}>
+        <TextBox
+          title={title}
+          description={description}
+          tag={tag}
+          tagIcon={tagIcon}
+          className={cls("flex flex-col gap-3 md:gap-1", textBoxClassName)}
+          titleClassName={cls("text-6xl font-medium text-balance", titleClassName)}
+          descriptionClassName={cls("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)}
+          center={true}
+        />
+
+        <div className="w-full md:w-30 mx-auto">
+          <EmailSignupForm
+            inputPlaceholder={inputPlaceholder}
+            buttonText={buttonText}
+            onSubmit={onSubmit}
+            className={formClassName}
+            inputClassName={inputClassName}
+            buttonClassName={buttonClassName}
+            buttonTextClassName={buttonTextClassName}
+          />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+HeroEmailSignup.displayName = "HeroEmailSignup";
+
+export default memo(HeroEmailSignup);
diff --git a/src/components/sections/hero/HeroGlobe.tsx b/src/components/sections/hero/HeroGlobe.tsx
new file mode 100644
index 0000000..bc78613
--- /dev/null
+++ b/src/components/sections/hero/HeroGlobe.tsx
@@ -0,0 +1,87 @@
+"use client";
+
+import React, { memo } from "react";
+import TextBox from "@/components/Textbox";
+import { Globe } from "@/components/shared/Globe";
+import { cls } from "@/lib/utils";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig } from "@/types/button";
+import type { COBEOptions } from "cobe";
+
+interface HeroGlobeProps {
+  title: string;
+  description: string;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  buttons?: ButtonConfig[];
+  globeConfig?: COBEOptions;
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  textBoxClassName?: string;
+  titleClassName?: string;
+  descriptionClassName?: string;
+  tagClassName?: string;
+  buttonContainerClassName?: string;
+  buttonClassName?: string;
+  buttonTextClassName?: string;
+  globeWrapperClassName?: string;
+  globeClassName?: string;
+}
+
+const HeroGlobe = ({
+  title,
+  description,
+  tag,
+  tagIcon,
+  buttons,
+  globeConfig,
+  ariaLabel = "Hero section",
+  className = "",
+  containerClassName = "",
+  textBoxClassName = "",
+  titleClassName = "",
+  descriptionClassName = "",
+  tagClassName = "",
+  buttonContainerClassName = "",
+  buttonClassName = "",
+  buttonTextClassName = "",
+  globeWrapperClassName = "",
+  globeClassName = "",
+}: HeroGlobeProps) => {
+  return (
+    <section
+      aria-label={ariaLabel}
+      className={cls("w-full py-[var(--width-10)]", className)}
+    >
+      <div className={cls("w-content-width mx-auto flex flex-col gap-10 md:gap-15", containerClassName)}>
+        <TextBox
+          title={title}
+          description={description}
+          tag={tag}
+          tagIcon={tagIcon}
+          buttons={buttons}
+          className={cls("flex flex-col gap-3 md:gap-5", textBoxClassName)}
+          titleClassName={cls("text-6xl md:text-7xl 2xl:text-8xl font-medium text-center text-balance", titleClassName)}
+          descriptionClassName={cls("text-base md:text-lg text-center text-balance text-foreground/75", descriptionClassName)}
+          tagClassName={cls("w-fit 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 justify-center", buttonContainerClassName)}
+          buttonClassName={cls("", buttonClassName)}
+          buttonTextClassName={cls("text-base", buttonTextClassName)}
+          center={true}
+        />
+
+        <div className={cls(
+          "relative w-full aspect-[4/3] md:aspect-video overflow-hidden rounded-theme-capped card p-4 md:p-6",
+          globeWrapperClassName
+        )}>
+          <Globe config={globeConfig} className={globeClassName} />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+HeroGlobe.displayName = "HeroGlobe";
+
+export default memo(HeroGlobe);
diff --git a/src/components/sections/hero/HeroGlobeOverlay.tsx b/src/components/sections/hero/HeroGlobeOverlay.tsx
new file mode 100644
index 0000000..51183c1
--- /dev/null
+++ b/src/components/sections/hero/HeroGlobeOverlay.tsx
@@ -0,0 +1,92 @@
+"use client";
+
+import React, { memo } from "react";
+import TextBox from "@/components/Textbox";
+import { Globe } from "@/components/shared/Globe";
+import { cls } from "@/lib/utils";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig } from "@/types/button";
+import type { COBEOptions } from "cobe";
+
+interface HeroGlobeOverlayProps {
+  title: string;
+  description: string;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  buttons?: ButtonConfig[];
+  globeConfig?: COBEOptions;
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  textBoxClassName?: string;
+  titleClassName?: string;
+  descriptionClassName?: string;
+  tagClassName?: string;
+  buttonContainerClassName?: string;
+  buttonClassName?: string;
+  buttonTextClassName?: string;
+  globeWrapperClassName?: string;
+  globeClassName?: string;
+}
+
+const HeroGlobeOverlay = ({
+  title,
+  description,
+  tag,
+  tagIcon,
+  buttons,
+  globeConfig,
+  ariaLabel = "Hero section",
+  className = "",
+  containerClassName = "",
+  textBoxClassName = "",
+  titleClassName = "",
+  descriptionClassName = "",
+  tagClassName = "",
+  buttonContainerClassName = "",
+  buttonClassName = "",
+  buttonTextClassName = "",
+  globeWrapperClassName = "",
+  globeClassName = "",
+}: HeroGlobeOverlayProps) => {
+  return (
+    <section
+      aria-label={ariaLabel}
+      className={cls("w-full h-svh relative overflow-hidden flex items-center justify-center", className)}
+    >
+      <div className={cls("w-content-width mx-auto flex flex-col items-center", containerClassName)}>
+        <div className={cls(
+          "relative w-full aspect-[16/12] md:w-[70%] md:aspect-video mask-fade-bottom-large",
+          globeWrapperClassName
+        )}>
+          <Globe config={globeConfig} className={cls("w-full -mt-[6%] md:-mt-[var(--width-5)]", globeClassName)} />
+        </div>
+
+        <div className="relative -mt-[15%] md:-mt-[10%] z-10 w-full">
+          <TextBox
+            title={title}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            buttons={buttons}
+            className={cls(
+              "flex flex-col gap-3 md:gap-1 w-content-width mx-auto",
+              textBoxClassName
+            )}
+            titleClassName={cls("text-6xl font-medium text-balance", titleClassName)}
+            descriptionClassName={cls("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 gap-4 mt-3", buttonContainerClassName)}
+            buttonClassName={buttonClassName}
+            buttonTextClassName={buttonTextClassName}
+            center={true}
+          />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+HeroGlobeOverlay.displayName = "HeroGlobeOverlay";
+
+export default memo(HeroGlobeOverlay);
diff --git a/src/components/sections/hero/HeroLogo.tsx b/src/components/sections/hero/HeroLogo.tsx
new file mode 100644
index 0000000..52fd6cc
--- /dev/null
+++ b/src/components/sections/hero/HeroLogo.tsx
@@ -0,0 +1,132 @@
+"use client";
+
+import React, { memo } from "react";
+import MediaContent from "@/components/shared/MediaContent";
+import SvgTextLogo from "@/components/shared/SvgTextLogo/SvgTextLogo";
+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 type { ButtonConfig } from "@/types/button";
+
+const MASK_GRADIENT = "linear-gradient(to bottom, transparent, black 60%)";
+
+interface HeroLogoProps {
+  logoText: string;
+  description: string;
+  buttons: ButtonConfig[];
+  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,
+  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 [isMobile, setIsMobile] = React.useState(false);
+
+  React.useEffect(() => {
+    const checkMobile = () => setIsMobile(window.innerWidth < 768);
+    checkMobile();
+    window.addEventListener('resize', checkMobile);
+    return () => window.removeEventListener('resize', checkMobile);
+  }, []);
+
+  const adjustHeightFactor = isMobile ? 1.1 : 0.8;
+  return (
+    <section
+      aria-label={ariaLabel}
+      className={cls("relative w-full h-svh overflow-hidden", 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", 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",
+          blurClassName
+        )}
+        style={{ maskImage: MASK_GRADIENT }}
+        aria-hidden="true"
+      />
+
+      <div className={cls("relative z-20 w-content-width mx-auto h-full 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 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" >
+            <SvgTextLogo logoText={logoText} adjustHeightFactor={adjustHeightFactor} className={cls("text-background", logoClassName)} />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+HeroLogo.displayName = "HeroLogo";
+
+export default memo(HeroLogo);
diff --git a/src/components/sections/hero/HeroLogoBillboard.tsx b/src/components/sections/hero/HeroLogoBillboard.tsx
new file mode 100644
index 0000000..d0211d5
--- /dev/null
+++ b/src/components/sections/hero/HeroLogoBillboard.tsx
@@ -0,0 +1,129 @@
+"use client";
+
+import React, { memo } from "react";
+import MediaContent from "@/components/shared/MediaContent";
+import SvgTextLogo from "@/components/shared/SvgTextLogo/SvgTextLogo";
+import TextAnimation from "@/components/text/TextAnimation";
+import { cls } from "@/lib/utils";
+import { Plus } from "lucide-react";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+
+interface HeroLogoBillboardProps {
+  logoText: string;
+  description: string;
+  imageSrc?: string;
+  videoSrc?: string;
+  imageAlt?: string;
+  videoAriaLabel?: string;
+  frameStyle?: "card" | "browser";
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  logoContainerClassName?: string;
+  logoClassName?: string;
+  descriptionClassName?: string;
+  mediaWrapperClassName?: string;
+  imageClassName?: string;
+  browserBarClassName?: string;
+  addressBarClassName?: string;
+}
+
+const HeroLogoBillboard = ({
+  logoText,
+  description,
+  imageSrc,
+  videoSrc,
+  imageAlt = "",
+  videoAriaLabel = "Hero video",
+  frameStyle = "card",
+  ariaLabel = "Hero section",
+  className = "",
+  containerClassName = "",
+  logoContainerClassName = "",
+  logoClassName = "",
+  descriptionClassName = "",
+  mediaWrapperClassName = "",
+  imageClassName = "",
+  browserBarClassName = "",
+  addressBarClassName = "",
+}: HeroLogoBillboardProps) => {
+  const theme = useTheme();
+  const [isMobile, setIsMobile] = React.useState(false);
+
+  React.useEffect(() => {
+    const checkMobile = () => setIsMobile(window.innerWidth < 768);
+    checkMobile();
+    window.addEventListener('resize', checkMobile);
+    return () => window.removeEventListener('resize', checkMobile);
+  }, []);
+
+  const adjustHeightFactor = isMobile ? 1.1 : 0.8;
+
+  return (
+    <section
+      aria-label={ariaLabel}
+      className={cls("w-full py-hero-page-padding", className)}
+    >
+      <div className={cls("w-content-width mx-auto flex flex-col gap-14 md:gap-15", containerClassName)}>
+        <div className={cls("w-full flex flex-col items-end gap-6 md:gap-8", logoContainerClassName)}>
+          <div className="relative w-full flex" >
+            <SvgTextLogo
+              logoText={logoText}
+              adjustHeightFactor={adjustHeightFactor}
+              className={cls("text-foreground", logoClassName)}
+            />
+          </div>
+          <div className="relative w-full md:w-1/2" >
+            <TextAnimation
+              type={theme.defaultTextAnimation}
+              text={description}
+              variant="words-trigger"
+              className={cls("text-lg md:text-3xl text-foreground/75 text-balance text-end leading-[1.2]", descriptionClassName)}
+            />
+          </div>
+        </div>
+
+        {frameStyle === "browser" ? (
+          <div 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("rounded-none!", imageClassName)}
+              />
+            </div>
+          </div>
+        ) : (
+          <div 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", imageClassName)}
+            />
+          </div>
+        )}
+      </div>
+    </section>
+  );
+};
+
+HeroLogoBillboard.displayName = "HeroLogoBillboard";
+
+export default memo(HeroLogoBillboard);
diff --git a/src/components/sections/hero/HeroLogoBillboardSplit.tsx b/src/components/sections/hero/HeroLogoBillboardSplit.tsx
new file mode 100644
index 0000000..7938c04
--- /dev/null
+++ b/src/components/sections/hero/HeroLogoBillboardSplit.tsx
@@ -0,0 +1,153 @@
+"use client";
+
+import React, { memo } from "react";
+import MediaContent from "@/components/shared/MediaContent";
+import SvgTextLogo from "@/components/shared/SvgTextLogo/SvgTextLogo";
+import TextAnimation from "@/components/text/TextAnimation";
+import Button from "@/components/button/Button";
+import { cls } from "@/lib/utils";
+import { getButtonProps } from "@/lib/buttonUtils";
+import { Plus } from "lucide-react";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { ButtonConfig } from "@/types/button";
+
+interface HeroLogoBillboardSplitProps {
+  logoText: string;
+  description: string;
+  buttons: ButtonConfig[];
+  layoutOrder: "default" | "reverse";
+  imageSrc?: string;
+  videoSrc?: string;
+  imageAlt?: string;
+  videoAriaLabel?: string;
+  frameStyle?: "card" | "browser";
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  logoContainerClassName?: string;
+  descriptionClassName?: string;
+  buttonContainerClassName?: string;
+  buttonClassName?: string;
+  buttonTextClassName?: string;
+  logoClassName?: string;
+  mediaWrapperClassName?: string;
+  imageClassName?: string;
+  browserBarClassName?: string;
+  addressBarClassName?: string;
+}
+
+const HeroLogoBillboardSplit = ({
+  logoText,
+  description,
+  buttons,
+  layoutOrder,
+  imageSrc,
+  videoSrc,
+  imageAlt = "",
+  videoAriaLabel = "Hero video",
+  frameStyle = "card",
+  ariaLabel = "Hero section",
+  className = "",
+  containerClassName = "",
+  logoContainerClassName = "",
+  descriptionClassName = "",
+  buttonContainerClassName = "",
+  buttonClassName = "",
+  buttonTextClassName = "",
+  logoClassName = "",
+  mediaWrapperClassName = "",
+  imageClassName = "",
+  browserBarClassName = "",
+  addressBarClassName = "",
+}: HeroLogoBillboardSplitProps) => {
+  const theme = useTheme();
+  const [isMobile, setIsMobile] = React.useState(false);
+
+  React.useEffect(() => {
+    const checkMobile = () => setIsMobile(window.innerWidth < 768);
+    checkMobile();
+    window.addEventListener('resize', checkMobile);
+    return () => window.removeEventListener('resize', checkMobile);
+  }, []);
+
+  const adjustHeightFactor = isMobile ? 1.0 : 0.8;
+
+  return (
+    <section
+      aria-label={ariaLabel}
+      className={cls("w-full py-hero-page-padding", className)}
+    >
+      <div className={cls("w-content-width mx-auto flex flex-col gap-6 md:gap-15", containerClassName)}>
+        <div className={cls(
+          "w-full flex gap-6 md:gap-8",
+          layoutOrder === "default" ? "flex-col" : "flex-col-reverse",
+          logoContainerClassName
+        )}>
+          <div className="relative flex flex-col gap-3 md:flex-row justify-between md:items-end w-full" >
+            <div className="relative flex flex-col gap-4 w-full md:w-1/2" >
+              <TextAnimation
+                type={theme.defaultTextAnimation}
+                text={description}
+                variant="words-trigger"
+                className={cls("text-lg md:text-3xl text-foreground/75 text-balance text-start leading-[1.2]", descriptionClassName)}
+              />
+            </div>
+            <div className={cls("flex gap-4", buttonContainerClassName)}>
+              {buttons.slice(0, 2).map((button, index) => (
+                <Button key={`${button.text}-${index}`} {...getButtonProps(button, index, theme.defaultButtonVariant, buttonClassName, buttonTextClassName)} />
+              ))}
+            </div>
+          </div>
+          <div className="relative w-full flex" >
+            <SvgTextLogo
+              logoText={logoText}
+              adjustHeightFactor={adjustHeightFactor}
+              className={cls("text-foreground", logoClassName)}
+            />
+          </div>
+        </div>
+
+        {frameStyle === "browser" ? (
+          <div 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("rounded-none!", imageClassName)}
+              />
+            </div>
+          </div>
+        ) : (
+          <div 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", imageClassName)}
+            />
+          </div>
+        )}
+      </div>
+    </section>
+  );
+};
+
+HeroLogoBillboardSplit.displayName = "HeroLogoBillboardSplit";
+
+export default memo(HeroLogoBillboardSplit);
diff --git a/src/components/sections/hero/HeroLogoBillboardSplitImage.tsx b/src/components/sections/hero/HeroLogoBillboardSplitImage.tsx
new file mode 100644
index 0000000..f673b50
--- /dev/null
+++ b/src/components/sections/hero/HeroLogoBillboardSplitImage.tsx
@@ -0,0 +1,174 @@
+"use client";
+
+import React, { memo } from "react";
+import MediaContent from "@/components/shared/MediaContent";
+import SvgTextLogo from "@/components/shared/SvgTextLogo/SvgTextLogo";
+import TextAnimation from "@/components/text/TextAnimation";
+import Button from "@/components/button/Button";
+import { cls } from "@/lib/utils";
+import { getButtonProps } from "@/lib/buttonUtils";
+import { Plus } from "lucide-react";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { ButtonConfig } from "@/types/button";
+
+interface HeroLogoBillboardSplitImageProps {
+  logoText: string;
+  description: string;
+  buttons: ButtonConfig[];
+  layoutOrder: "default" | "reverse";
+  splitImageSrc?: string;
+  splitVideoSrc?: string;
+  splitImageAlt?: string;
+  splitVideoAriaLabel?: string;
+  imageSrc?: string;
+  videoSrc?: string;
+  imageAlt?: string;
+  videoAriaLabel?: string;
+  frameStyle?: "card" | "browser";
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  logoContainerClassName?: string;
+  descriptionClassName?: string;
+  buttonContainerClassName?: string;
+  buttonClassName?: string;
+  buttonTextClassName?: string;
+  logoClassName?: string;
+  splitMediaWrapperClassName?: string;
+  splitImageClassName?: string;
+  mediaWrapperClassName?: string;
+  imageClassName?: string;
+  browserBarClassName?: string;
+  addressBarClassName?: string;
+}
+
+const HeroLogoBillboardSplitImage = ({
+  logoText,
+  description,
+  buttons,
+  layoutOrder,
+  splitImageSrc,
+  splitVideoSrc,
+  splitImageAlt = "",
+  splitVideoAriaLabel = "Split section video",
+  imageSrc,
+  videoSrc,
+  imageAlt = "",
+  videoAriaLabel = "Hero video",
+  frameStyle = "card",
+  ariaLabel = "Hero section",
+  className = "",
+  containerClassName = "",
+  logoContainerClassName = "",
+  descriptionClassName = "",
+  buttonContainerClassName = "",
+  buttonClassName = "",
+  buttonTextClassName = "",
+  logoClassName = "",
+  splitMediaWrapperClassName = "",
+  splitImageClassName = "",
+  mediaWrapperClassName = "",
+  imageClassName = "",
+  browserBarClassName = "",
+  addressBarClassName = "",
+}: HeroLogoBillboardSplitImageProps) => {
+  const theme = useTheme();
+  const [isMobile, setIsMobile] = React.useState(false);
+
+  React.useEffect(() => {
+    const checkMobile = () => setIsMobile(window.innerWidth < 768);
+    checkMobile();
+    window.addEventListener('resize', checkMobile);
+    return () => window.removeEventListener('resize', checkMobile);
+  }, []);
+
+  const adjustHeightFactor = isMobile ? 1.0 : 0.8;
+
+  return (
+    <section
+      aria-label={ariaLabel}
+      className={cls("w-full py-hero-page-padding", className)}
+    >
+      <div className={cls("w-content-width mx-auto flex flex-col gap-6 md:gap-12", containerClassName)}>
+        <div className={cls(
+          "w-full flex gap-6 md:gap-12",
+          layoutOrder === "default" ? "flex-col" : "flex-col-reverse",
+          logoContainerClassName
+        )}>
+          <div className="relative grid grid-cols-[1fr_auto] items-end gap-6 md:gap-10 w-full md:flex md:flex-row md:items-end md:justify-between">
+            <div className="relative flex flex-col gap-6 md:w-2/5">
+              <TextAnimation
+                type={theme.defaultTextAnimation}
+                text={description}
+                variant="words-trigger"
+                className={cls("text-lg md:text-3xl text-foreground/75 text-balance text-start leading-[1.2]", descriptionClassName)}
+              />
+              <div className={cls("flex gap-4", buttonContainerClassName)}>
+                {buttons.slice(0, 2).map((button, index) => (
+                  <Button key={`${button.text}-${index}`} {...getButtonProps(button, index, theme.defaultButtonVariant, buttonClassName, buttonTextClassName)} />
+                ))}
+              </div>
+            </div>
+            <div className={cls("relative h-full md:h-auto md:w-1/3 md:aspect-video overflow-hidden rounded-theme-capped card p-1 md:p-4", splitMediaWrapperClassName)}>
+              <MediaContent
+                imageSrc={splitImageSrc}
+                videoSrc={splitVideoSrc}
+                imageAlt={splitImageAlt}
+                videoAriaLabel={splitVideoAriaLabel}
+                imageClassName={cls("h-full w-full object-cover z-1", splitImageClassName)}
+              />
+            </div>
+          </div>
+          <div className="relative w-full flex">
+            <SvgTextLogo
+              logoText={logoText}
+              adjustHeightFactor={adjustHeightFactor}
+              className={cls("text-foreground", logoClassName)}
+            />
+          </div>
+        </div>
+
+        {frameStyle === "browser" ? (
+          <div 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("rounded-none!", imageClassName)}
+              />
+            </div>
+          </div>
+        ) : (
+          <div 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", imageClassName)}
+            />
+          </div>
+        )}
+      </div>
+    </section>
+  );
+};
+
+HeroLogoBillboardSplitImage.displayName = "HeroLogoBillboardSplitImage";
+
+export default memo(HeroLogoBillboardSplitImage);
diff --git a/src/components/sections/hero/HeroLogoCarousel.tsx b/src/components/sections/hero/HeroLogoCarousel.tsx
new file mode 100644
index 0000000..2657cfa
--- /dev/null
+++ b/src/components/sections/hero/HeroLogoCarousel.tsx
@@ -0,0 +1,117 @@
+"use client";
+
+import React, { memo } from "react";
+import MediaContent from "@/components/shared/MediaContent";
+import SvgTextLogo from "@/components/shared/SvgTextLogo/SvgTextLogo";
+import TextAnimation from "@/components/text/TextAnimation";
+import AutoCarousel from "@/components/cardStack/layouts/carousels/AutoCarousel";
+import { cls } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+
+export interface MediaItem {
+  imageSrc?: string;
+  videoSrc?: string;
+  imageAlt?: string;
+  videoAriaLabel?: string;
+}
+
+interface HeroLogoCarouselProps {
+  logoText: string;
+  description: string;
+  mediaItems: MediaItem[];
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  logoContainerClassName?: string;
+  logoClassName?: string;
+  descriptionClassName?: string;
+  carouselWrapperClassName?: string;
+}
+
+const HeroLogoCarousel = ({
+  logoText,
+  description,
+  mediaItems,
+  ariaLabel = "Hero section",
+  className = "",
+  containerClassName = "",
+  logoContainerClassName = "",
+  logoClassName = "",
+  descriptionClassName = "",
+  carouselWrapperClassName = "",
+}: HeroLogoCarouselProps) => {
+  const theme = useTheme();
+  const [isMobile, setIsMobile] = React.useState(false);
+
+  React.useEffect(() => {
+    const checkMobile = () => setIsMobile(window.innerWidth < 768);
+    checkMobile();
+    window.addEventListener('resize', checkMobile);
+    return () => window.removeEventListener('resize', checkMobile);
+  }, []);
+
+  const adjustHeightFactor = isMobile ? 1.1 : 0.8;
+
+  const renderCarouselItem = (item: MediaItem, index: number) => (
+    <div
+      key={index}
+      className="w-full aspect-[3/5] overflow-hidden rounded-theme-capped card p-2"
+    >
+      <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("w-full py-hero-page-padding", className)}
+    >
+      <div className={cls("w-content-width mx-auto flex flex-col gap-14 md:gap-10", containerClassName)}>
+        <div className={cls("w-full flex flex-col items-end gap-6 md:gap-8", logoContainerClassName)}>
+          <div className="relative w-full flex" >
+            <SvgTextLogo
+              logoText={logoText}
+              adjustHeightFactor={adjustHeightFactor}
+              className={cls("text-foreground", logoClassName)}
+            />
+          </div>
+          <div className="relative w-full md:w-1/2" >
+            <TextAnimation
+              type={theme.defaultTextAnimation}
+              text={description}
+              variant="words-trigger"
+              className={cls("text-lg md:text-3xl text-foreground/75 text-balance text-end leading-[1.2]", descriptionClassName)}
+            />
+          </div>
+        </div>
+
+        <div className={cls("w-full -mx-[var(--content-padding)]", carouselWrapperClassName)}>
+          <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>
+  );
+};
+
+HeroLogoCarousel.displayName = "HeroLogoCarousel";
+
+export default memo(HeroLogoCarousel);
diff --git a/src/components/sections/hero/HeroMetrics.tsx b/src/components/sections/hero/HeroMetrics.tsx
new file mode 100644
index 0000000..25c7bce
--- /dev/null
+++ b/src/components/sections/hero/HeroMetrics.tsx
@@ -0,0 +1,144 @@
+"use client";
+
+import React, { memo } from "react";
+import TextBox from "@/components/Textbox";
+import { cls } from "@/lib/utils";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig } from "@/types/button";
+
+interface Metric {
+  id: string;
+  value: string;
+  label: string;
+}
+
+interface HeroMetricsProps {
+  title: string;
+  description: string;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  buttons?: ButtonConfig[];
+  metricsLabel: string;
+  metrics: Metric[];
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  textBoxClassName?: string;
+  titleClassName?: string;
+  descriptionClassName?: string;
+  tagClassName?: string;
+  buttonContainerClassName?: string;
+  buttonClassName?: string;
+  buttonTextClassName?: string;
+  metricsContainerClassName?: string;
+  metricsLabelClassName?: string;
+  metricsGridClassName?: string;
+  metricClassName?: string;
+  metricValueClassName?: string;
+  metricLabelClassName?: string;
+}
+
+const HeroMetrics = ({
+  title,
+  description,
+  tag,
+  tagIcon,
+  buttons,
+  metricsLabel,
+  metrics,
+  ariaLabel = "Hero section",
+  className = "",
+  containerClassName = "",
+  textBoxClassName = "",
+  titleClassName = "",
+  descriptionClassName = "",
+  tagClassName = "",
+  buttonContainerClassName = "",
+  buttonClassName = "",
+  buttonTextClassName = "",
+  metricsContainerClassName = "",
+  metricsLabelClassName = "",
+  metricsGridClassName = "",
+  metricClassName = "",
+  metricValueClassName = "",
+  metricLabelClassName = "",
+}: HeroMetricsProps) => {
+  return (
+    <section
+      aria-label={ariaLabel}
+      className={cls("w-full h-fit md:h-svh", className)}
+    >
+      <div className={cls("w-content-width h-full mx-auto flex flex-col justify-between pt-hero-page-padding pb-10", containerClassName)}>
+        <div className="flex-1" />
+
+        <TextBox
+          title={title}
+          description={description}
+          tag={tag}
+          tagIcon={tagIcon}
+          buttons={buttons}
+          className={cls("flex flex-col gap-3 md:gap-1", textBoxClassName)}
+          titleClassName={cls("text-6xl font-medium text-balance", titleClassName)}
+          descriptionClassName={cls("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 gap-4 mt-3", buttonContainerClassName)}
+          buttonClassName={buttonClassName}
+          buttonTextClassName={buttonTextClassName}
+          center={true}
+        />
+
+        <div className="flex-1" />
+
+        <div className={cls(
+          "relative w-full flex flex-col md:flex-row md:items-center justify-between gap-4 md:gap-10 border-t border-accent pt-10 mt-10 md:mt-0",
+          metricsContainerClassName
+        )}>
+          <div className="relative w-full md:w-1/3" >
+            <p className={cls(
+              "text-base text-foreground/75 leading-tight text-balance",
+              metricsLabelClassName
+            )}>
+              {metricsLabel}
+            </p>
+          </div>
+
+          <div className={cls(
+            "w-full md:w-1/2 grid grid-cols-2 gap-4 md:gap-6",
+            metrics.length === 2 && "md:grid-cols-2",
+            metrics.length === 3 && "md:grid-cols-3",
+            metrics.length === 4 && "md:grid-cols-4",
+            metricsGridClassName
+          )}>
+            {metrics.map((metric, index) => (
+              <div
+                key={metric.id}
+                className={cls(
+                  "relative card rounded-theme-capped flex flex-col gap-0 p-4",
+                  metrics.length === 3 && index === 2 && "col-span-2 md:col-span-1",
+                  metricClassName
+                )}
+              >
+                <h3 className={cls(
+                  "relative w-full min-w-0 text-4xl font-medium text-foreground truncate",
+                  metricValueClassName
+                )}>
+                  {metric.value}
+                </h3>
+                <p className={cls(
+                  "relative w-full min-w-0 text-sm text-foreground/70 truncate",
+                  metricLabelClassName
+                )}>
+                  {metric.label}
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+HeroMetrics.displayName = "HeroMetrics";
+
+export default memo(HeroMetrics);
diff --git a/src/components/sections/hero/HeroOverlay.tsx b/src/components/sections/hero/HeroOverlay.tsx
new file mode 100644
index 0000000..a6424ad
--- /dev/null
+++ b/src/components/sections/hero/HeroOverlay.tsx
@@ -0,0 +1,143 @@
+"use client";
+
+import React, { memo } from "react";
+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 } from "@/types/button";
+
+const RADIAL_MASK_GRADIENT = "radial-gradient(circle, black 20%, transparent 70%)";
+
+interface HeroOverlayProps {
+  title: string;
+  description: string;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  buttons?: ButtonConfig[];
+  imageSrc?: string;
+  videoSrc?: string;
+  imageAlt?: string;
+  videoAriaLabel?: string;
+  textPosition?: "center" | "bottom-left";
+  showDimOverlay?: boolean;
+  showBlur?: boolean;
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  textBoxClassName?: string;
+  titleClassName?: string;
+  descriptionClassName?: string;
+  tagClassName?: string;
+  buttonContainerClassName?: string;
+  buttonClassName?: string;
+  buttonTextClassName?: string;
+  mediaWrapperClassName?: string;
+  imageClassName?: string;
+  blurClassName?: string;
+  dimOverlayClassName?: string;
+}
+
+const HeroOverlay = ({
+  title,
+  description,
+  tag,
+  tagIcon,
+  buttons,
+  imageSrc,
+  videoSrc,
+  imageAlt = "",
+  videoAriaLabel = "Hero video",
+  textPosition = "bottom-left",
+  showDimOverlay = false,
+  showBlur = true,
+  ariaLabel = "Hero section",
+  className = "",
+  containerClassName = "",
+  textBoxClassName = "",
+  titleClassName = "",
+  descriptionClassName = "",
+  tagClassName = "",
+  buttonContainerClassName = "",
+  buttonClassName = "",
+  buttonTextClassName = "",
+  mediaWrapperClassName = "",
+  imageClassName = "",
+  blurClassName = "",
+  dimOverlayClassName = "",
+}: HeroOverlayProps) => {
+  return (
+    <section
+      aria-label={ariaLabel}
+      className={cls("relative w-full h-svh overflow-hidden", 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", 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",
+            textPosition === "center"
+              ? "w-[100vw] h-[80vw] left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
+              : "w-[150vw] h-[150vw] left-0 bottom-0 -translate-x-1/2 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-full flex",
+        textPosition === "center" ? "items-center justify-center" : "items-end pb-[var(--width-10)] md:pb-hero-page-padding",
+        containerClassName
+      )}>
+        <TextBox
+          title={title}
+          description={description}
+          tag={tag}
+          tagIcon={tagIcon}
+          buttons={buttons}
+          className={cls(
+            "flex flex-col gap-3 md:gap-3 text-background",
+            textPosition === "center" ? "w-full" : "w-full md:w-1/2",
+            textBoxClassName
+          )}
+          titleClassName={cls(
+            "text-7xl 2xl:text-8xl font-medium text-balance",
+            textPosition === "center" ? "text-center" : "text-left",
+            titleClassName
+          )}
+          descriptionClassName={cls(
+            "text-lg md:text-xl leading-[1.2]",
+            textPosition === "center" ? "text-center" : "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 gap-4 mt-4", buttonContainerClassName)}
+          buttonClassName={cls("", buttonClassName)}
+          buttonTextClassName={cls("text-base", buttonTextClassName)}
+          center={textPosition === "center"}
+        />
+      </div>
+    </section>
+  );
+};
+
+HeroOverlay.displayName = "HeroOverlay";
+
+export default memo(HeroOverlay);
diff --git a/src/components/sections/hero/HeroOverlayBottomSplit.tsx b/src/components/sections/hero/HeroOverlayBottomSplit.tsx
new file mode 100644
index 0000000..20cce47
--- /dev/null
+++ b/src/components/sections/hero/HeroOverlayBottomSplit.tsx
@@ -0,0 +1,119 @@
+"use client";
+
+import React, { memo } from "react";
+import MediaContent from "@/components/shared/MediaContent";
+import TextAnimation from "@/components/text/TextAnimation";
+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 { ButtonConfig } from "@/types/button";
+
+interface HeroOverlayBottomSplitProps {
+  title: string;
+  description: string;
+  buttons: ButtonConfig[];
+  imageSrc?: string;
+  videoSrc?: string;
+  imageAlt?: string;
+  videoAriaLabel?: string;
+  showDimOverlay?: boolean;
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  titleClassName?: string;
+  descriptionClassName?: string;
+  cardClassName?: string;
+  buttonContainerClassName?: string;
+  buttonClassName?: string;
+  buttonTextClassName?: string;
+  mediaWrapperClassName?: string;
+  imageClassName?: string;
+  dimOverlayClassName?: string;
+}
+
+const HeroOverlayBottomSplit = ({
+  title,
+  description,
+  buttons,
+  imageSrc,
+  videoSrc,
+  imageAlt = "",
+  videoAriaLabel = "Hero video",
+  showDimOverlay = false,
+  ariaLabel = "Hero section",
+  className = "",
+  containerClassName = "",
+  titleClassName = "",
+  descriptionClassName = "",
+  cardClassName = "",
+  buttonContainerClassName = "",
+  buttonClassName = "",
+  buttonTextClassName = "",
+  mediaWrapperClassName = "",
+  imageClassName = "",
+  dimOverlayClassName = "",
+}: HeroOverlayBottomSplitProps) => {
+  const theme = useTheme();
+  const useInvertedText = shouldUseInvertedText("invertCard", theme.cardStyle);
+
+  return (
+    <section
+      aria-label={ariaLabel}
+      className={cls("relative w-full h-svh overflow-hidden", className)}
+    >
+      <div className={cls("absolute inset-0 w-full h-full", mediaWrapperClassName)}>
+        {showDimOverlay && (
+          <div className={cls("absolute inset-0 z-[1] bg-background/20", 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(
+        "relative z-10 w-content-width mx-auto h-full flex flex-col justify-end pt-hero-page-padding pb-20",
+        containerClassName
+      )}>
+        <div className="relative w-full flex flex-col md:flex-row gap-6 md:gap-10 items-end justify-between">
+          <div className="relative w-full md:w-1/2">
+            <TextAnimation
+              type={theme.defaultTextAnimation}
+              text={title}
+              variant="words-trigger"
+              className={cls("text-6xl md:text-8xl font-medium text-background text-balance text-start leading-[1]", titleClassName)}
+            />
+          </div>
+
+          <div className={cls("card rounded-theme-capped p-6 md:p-8 w-full md:w-1/3", cardClassName)}>
+            <div className="flex flex-col gap-6">
+              <TextAnimation
+                type={theme.defaultTextAnimation}
+                text={description}
+                variant="words-trigger"
+                className={cls(
+                  "text-base md:text-lg text-balance text-start leading-tight",
+                  useInvertedText ? "text-background/75" : "text-foreground/75",
+                  descriptionClassName
+                )}
+              />
+              <div className={cls("flex gap-4", buttonContainerClassName)}>
+                {buttons.slice(0, 2).map((button, index) => (
+                  <Button key={`${button.text}-${index}`} {...getButtonProps(button, index, theme.defaultButtonVariant, buttonClassName, buttonTextClassName)} />
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+HeroOverlayBottomSplit.displayName = "HeroOverlayBottomSplit";
+
+export default memo(HeroOverlayBottomSplit);
diff --git a/src/components/sections/hero/HeroOverlaySplit.tsx b/src/components/sections/hero/HeroOverlaySplit.tsx
new file mode 100644
index 0000000..0770c03
--- /dev/null
+++ b/src/components/sections/hero/HeroOverlaySplit.tsx
@@ -0,0 +1,110 @@
+"use client";
+
+import React, { memo } from "react";
+import MediaContent from "@/components/shared/MediaContent";
+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 type { ButtonConfig } from "@/types/button";
+
+interface HeroOverlaySplitProps {
+  title: string;
+  description: string;
+  buttons: ButtonConfig[];
+  imageSrc?: string;
+  videoSrc?: string;
+  imageAlt?: string;
+  videoAriaLabel?: string;
+  showDimOverlay?: boolean;
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  titleClassName?: string;
+  descriptionClassName?: string;
+  buttonContainerClassName?: string;
+  buttonClassName?: string;
+  buttonTextClassName?: string;
+  mediaWrapperClassName?: string;
+  imageClassName?: string;
+  dimOverlayClassName?: string;
+}
+
+const HeroOverlaySplit = ({
+  title,
+  description,
+  buttons,
+  imageSrc,
+  videoSrc,
+  imageAlt = "",
+  videoAriaLabel = "Hero video",
+  showDimOverlay = false,
+  ariaLabel = "Hero section",
+  className = "",
+  containerClassName = "",
+  titleClassName = "",
+  descriptionClassName = "",
+  buttonContainerClassName = "",
+  buttonClassName = "",
+  buttonTextClassName = "",
+  mediaWrapperClassName = "",
+  imageClassName = "",
+  dimOverlayClassName = "",
+}: HeroOverlaySplitProps) => {
+  const theme = useTheme();
+
+  return (
+    <section
+      aria-label={ariaLabel}
+      className={cls("relative w-full h-svh overflow-hidden", 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", 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(
+        "relative z-10 w-content-width mx-auto h-full flex flex-col justify-between pt-hero-page-padding pb-10",
+        containerClassName
+      )}>
+        <div className="relative w-full md:w-2/3">
+          <TextAnimation
+            type={theme.defaultTextAnimation}
+            text={title}
+            variant="words-trigger"
+            className={cls("text-8xl md:text-9xl font-medium text-background text-balance text-start leading-[1]", titleClassName)}
+          />
+        </div>
+
+        <div className="relative w-full flex">
+          <div className="relative flex flex-col gap-6 w-full md:w-1/3">
+            <TextAnimation
+              type={theme.defaultTextAnimation}
+              text={description}
+              variant="words-trigger"
+              className={cls("text-lg md:text-xl text-background/90 text-balance text-start leading-[1.2]", descriptionClassName)}
+            />
+            <div className={cls("flex gap-4", buttonContainerClassName)}>
+              {buttons.slice(0, 2).map((button, index) => (
+                <Button key={`${button.text}-${index}`} {...getButtonProps(button, index, theme.defaultButtonVariant, buttonClassName, buttonTextClassName)} />
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+HeroOverlaySplit.displayName = "HeroOverlaySplit";
+
+export default memo(HeroOverlaySplit);
diff --git a/src/components/sections/hero/HeroShowcaseSplit.tsx b/src/components/sections/hero/HeroShowcaseSplit.tsx
new file mode 100644
index 0000000..a10068d
--- /dev/null
+++ b/src/components/sections/hero/HeroShowcaseSplit.tsx
@@ -0,0 +1,183 @@
+"use client";
+
+import React, { memo } from "react";
+import MediaContent from "@/components/shared/MediaContent";
+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 type { ButtonConfig } from "@/types/button";
+
+interface HeroShowcaseSplitProps {
+  title: string;
+  description: string;
+  tags: string[];
+  buttons: ButtonConfig[];
+  showcaseImageSrc?: string;
+  showcaseVideoSrc?: string;
+  showcaseImageAlt?: string;
+  showcaseVideoAriaLabel?: string;
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  titleClassName?: string;
+  descriptionClassName?: string;
+  tagsContainerClassName?: string;
+  tagClassName?: string;
+  buttonContainerClassName?: string;
+  buttonClassName?: string;
+  buttonTextClassName?: string;
+  showcaseWrapperClassName?: string;
+  showcaseImageClassName?: string;
+}
+
+const HeroShowcaseSplit = ({
+  title,
+  description,
+  tags,
+  buttons,
+  showcaseImageSrc,
+  showcaseVideoSrc,
+  showcaseImageAlt = "",
+  showcaseVideoAriaLabel = "Showcase video",
+  ariaLabel = "Hero section",
+  className = "",
+  containerClassName = "",
+  titleClassName = "",
+  descriptionClassName = "",
+  tagsContainerClassName = "",
+  tagClassName = "",
+  buttonContainerClassName = "",
+  buttonClassName = "",
+  buttonTextClassName = "",
+  showcaseWrapperClassName = "",
+  showcaseImageClassName = "",
+}: HeroShowcaseSplitProps) => {
+  const theme = useTheme();
+
+  return (
+    <section
+      aria-label={ariaLabel}
+      className={cls("relative w-full h-fit md:h-svh overflow-hidden", className)}
+    >
+      {/* Mobile Layout */}
+      <div className={cls(
+        "relative z-10 w-content-width mx-auto h-full flex md:hidden flex-col gap-10 justify-between pt-hero-page-padding-1_5 pb-hero-page-padding",
+        containerClassName
+      )}>
+        <div className="relative flex flex-col gap-6 w-full">
+          <TextAnimation
+            type={theme.defaultTextAnimation}
+            text={title}
+            variant="words-trigger"
+            className={cls("text-5xl font-medium text-foreground text-balance text-start leading-[1]", titleClassName)}
+          />
+          <div className={cls("flex gap-4", buttonContainerClassName)}>
+            {buttons.slice(0, 2).map((button, index) => (
+              <Button key={`${button.text}-${index}`} {...getButtonProps(button, index, theme.defaultButtonVariant, buttonClassName, buttonTextClassName)} />
+            ))}
+          </div>
+        </div>
+
+        <div className="relative w-full">
+          <TextAnimation
+            type={theme.defaultTextAnimation}
+            text={description}
+            variant="words-trigger"
+            className={cls("text-base text-foreground/75 text-balance text-start leading-tight", descriptionClassName)}
+          />
+        </div>
+
+        <div className="flex flex-col gap-6" >
+          <div className={cls(
+            "relative w-full aspect-square overflow-hidden rounded-theme-capped card p-4",
+            showcaseWrapperClassName
+          )}>
+            <MediaContent
+              imageSrc={showcaseImageSrc}
+              videoSrc={showcaseVideoSrc}
+              imageAlt={showcaseImageAlt}
+              videoAriaLabel={showcaseVideoAriaLabel}
+              imageClassName={cls("h-full w-full object-cover z-1", showcaseImageClassName)}
+            />
+          </div>
+
+          <div className={cls("w-full card rounded-theme-capped flex flex-row items-center justify-between gap-2 px-6 py-3", tagsContainerClassName)}>
+            {tags.slice(0, 4).map((tag, index) => (
+              <React.Fragment key={`${tag}-${index}`}>
+                <span className={cls("text-sm text-foreground truncate", tagClassName)}>
+                  {tag}
+                </span>
+                {index < Math.min(tags.length, 4) - 1 && (
+                  <span className="text-accent">·</span>
+                )}
+              </React.Fragment>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Desktop Layout */}
+      <div className={cls(
+        "relative z-10 w-content-width mx-auto h-full hidden md:flex flex-col justify-between pt-hero-page-padding-1_5 pb-hero-page-padding",
+        containerClassName
+      )}>
+        <div className="relative w-full flex flex-row gap-[var(--width-10)] 2xl:gap-[var(--width-15)] items-center">
+          <div className={cls(
+            "relative w-2/5 aspect-video overflow-hidden rounded-theme-capped card p-4",
+            showcaseWrapperClassName
+          )}>
+            <MediaContent
+              imageSrc={showcaseImageSrc}
+              videoSrc={showcaseVideoSrc}
+              imageAlt={showcaseImageAlt}
+              videoAriaLabel={showcaseVideoAriaLabel}
+              imageClassName={cls("h-full w-full object-cover z-1", showcaseImageClassName)}
+            />
+          </div>
+
+          <div className="relative flex flex-col gap-6 w-3/5">
+            <TextAnimation
+              type={theme.defaultTextAnimation}
+              text={title}
+              variant="words-trigger"
+              className={cls("text-7xl font-medium text-foreground text-balance text-start leading-[1]", titleClassName)}
+            />
+            <div className={cls("flex gap-4", buttonContainerClassName)}>
+              {buttons.slice(0, 2).map((button, index) => (
+                <Button key={`${button.text}-${index}`} {...getButtonProps(button, index, theme.defaultButtonVariant, buttonClassName, buttonTextClassName)} />
+              ))}
+            </div>
+          </div>
+        </div>
+
+        <div className="relative w-full flex flex-row gap-10 items-end justify-between">
+          <div className={cls("flex flex-col gap-2", tagsContainerClassName)}>
+            {tags.slice(0, 6).map((tag, index) => (
+              <span
+                key={`${tag}-${index}`}
+                className={cls("text-base text-foreground", tagClassName)}
+              >
+                {tag}
+              </span>
+            ))}
+          </div>
+
+          <div className="relative w-1/2">
+            <TextAnimation
+              type={theme.defaultTextAnimation}
+              text={description}
+              variant="words-trigger"
+              className={cls("text-lg text-foreground/75 text-balance text-start leading-[1.4]", descriptionClassName)}
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+HeroShowcaseSplit.displayName = "HeroShowcaseSplit";
+
+export default memo(HeroShowcaseSplit);
diff --git a/src/components/sections/hero/HeroShowcaseSplitOverlay.tsx b/src/components/sections/hero/HeroShowcaseSplitOverlay.tsx
new file mode 100644
index 0000000..40b2ef6
--- /dev/null
+++ b/src/components/sections/hero/HeroShowcaseSplitOverlay.tsx
@@ -0,0 +1,213 @@
+"use client";
+
+import React, { memo } from "react";
+import MediaContent from "@/components/shared/MediaContent";
+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 type { ButtonConfig } from "@/types/button";
+
+interface HeroShowcaseSplitOverlayProps {
+  title: string;
+  description: string;
+  tags: string[];
+  buttons: ButtonConfig[];
+  showcaseImageSrc?: string;
+  showcaseVideoSrc?: string;
+  showcaseImageAlt?: string;
+  showcaseVideoAriaLabel?: string;
+  imageSrc?: string;
+  videoSrc?: string;
+  imageAlt?: string;
+  videoAriaLabel?: string;
+  showDimOverlay?: boolean;
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  titleClassName?: string;
+  descriptionClassName?: string;
+  tagsContainerClassName?: string;
+  tagClassName?: string;
+  buttonContainerClassName?: string;
+  buttonClassName?: string;
+  buttonTextClassName?: string;
+  showcaseWrapperClassName?: string;
+  showcaseImageClassName?: string;
+  mediaWrapperClassName?: string;
+  imageClassName?: string;
+  dimOverlayClassName?: string;
+}
+
+const HeroShowcaseSplitOverlay = ({
+  title,
+  description,
+  tags,
+  buttons,
+  showcaseImageSrc,
+  showcaseVideoSrc,
+  showcaseImageAlt = "",
+  showcaseVideoAriaLabel = "Showcase video",
+  imageSrc,
+  videoSrc,
+  imageAlt = "",
+  videoAriaLabel = "Hero video",
+  showDimOverlay = false,
+  ariaLabel = "Hero section",
+  className = "",
+  containerClassName = "",
+  titleClassName = "",
+  descriptionClassName = "",
+  tagsContainerClassName = "",
+  tagClassName = "",
+  buttonContainerClassName = "",
+  buttonClassName = "",
+  buttonTextClassName = "",
+  showcaseWrapperClassName = "",
+  showcaseImageClassName = "",
+  mediaWrapperClassName = "",
+  imageClassName = "",
+  dimOverlayClassName = "",
+}: HeroShowcaseSplitOverlayProps) => {
+  const theme = useTheme();
+
+  return (
+    <section
+      aria-label={ariaLabel}
+      className={cls("relative w-full h-fit md:h-svh overflow-hidden", className)}
+    >
+      {/* Background Media with mask fade */}
+      <div className={cls("absolute inset-0 w-full h-full mask-fade-bottom-long", mediaWrapperClassName)}>
+        {showDimOverlay && (
+          <div className={cls("absolute inset-0 z-[1] bg-background/20", dimOverlayClassName)} />
+        )}
+        <MediaContent
+          imageSrc={imageSrc}
+          videoSrc={videoSrc}
+          imageAlt={imageAlt}
+          videoAriaLabel={videoAriaLabel}
+          imageClassName={cls("w-full h-full object-cover !rounded-none", imageClassName)}
+        />
+      </div>
+
+      {/* Mobile Layout */}
+      <div className={cls(
+        "relative z-10 w-content-width mx-auto h-full flex md:hidden flex-col gap-10 justify-between pt-hero-page-padding-1_5 pb-hero-page-padding",
+        containerClassName
+      )}>
+        <div className="relative flex flex-col gap-6 w-full">
+          <TextAnimation
+            type={theme.defaultTextAnimation}
+            text={title}
+            variant="words-trigger"
+            className={cls("text-5xl font-medium text-foreground text-balance text-start leading-[1]", titleClassName)}
+          />
+          <div className={cls("flex gap-4", buttonContainerClassName)}>
+            {buttons.slice(0, 2).map((button, index) => (
+              <Button key={`${button.text}-${index}`} {...getButtonProps(button, index, theme.defaultButtonVariant, buttonClassName, buttonTextClassName)} />
+            ))}
+          </div>
+        </div>
+
+        <div className="relative w-full">
+          <TextAnimation
+            type={theme.defaultTextAnimation}
+            text={description}
+            variant="words-trigger"
+            className={cls("text-base text-foreground/75 text-balance text-start leading-tight", descriptionClassName)}
+          />
+        </div>
+
+        <div className="flex flex-col gap-6">
+          <div className={cls(
+            "relative w-full aspect-square overflow-hidden rounded-theme-capped card p-4",
+            showcaseWrapperClassName
+          )}>
+            <MediaContent
+              imageSrc={showcaseImageSrc}
+              videoSrc={showcaseVideoSrc}
+              imageAlt={showcaseImageAlt}
+              videoAriaLabel={showcaseVideoAriaLabel}
+              imageClassName={cls("h-full w-full object-cover z-1", showcaseImageClassName)}
+            />
+          </div>
+
+          <div className={cls("w-full card rounded-theme-capped flex flex-row items-center justify-between gap-2 px-6 py-3", tagsContainerClassName)}>
+            {tags.slice(0, 4).map((tag, index) => (
+              <React.Fragment key={`${tag}-${index}`}>
+                <span className={cls("text-sm text-foreground truncate", tagClassName)}>
+                  {tag}
+                </span>
+                {index < Math.min(tags.length, 4) - 1 && (
+                  <span className="text-accent">·</span>
+                )}
+              </React.Fragment>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Desktop Layout */}
+      <div className={cls(
+        "relative z-10 w-content-width mx-auto h-full hidden md:flex flex-col justify-between pt-hero-page-padding-1_5 pb-hero-page-padding",
+        containerClassName
+      )}>
+        <div className="relative w-full flex flex-row gap-[var(--width-10)] 2xl:gap-[var(--width-15)] items-center">
+          <div className={cls(
+            "relative w-2/5 aspect-video overflow-hidden rounded-theme-capped card p-4",
+            showcaseWrapperClassName
+          )}>
+            <MediaContent
+              imageSrc={showcaseImageSrc}
+              videoSrc={showcaseVideoSrc}
+              imageAlt={showcaseImageAlt}
+              videoAriaLabel={showcaseVideoAriaLabel}
+              imageClassName={cls("h-full w-full object-cover z-1", showcaseImageClassName)}
+            />
+          </div>
+
+          <div className="relative flex flex-col gap-6 w-3/5">
+            <TextAnimation
+              type={theme.defaultTextAnimation}
+              text={title}
+              variant="words-trigger"
+              className={cls("text-7xl font-medium text-foreground text-balance text-start leading-[1]", titleClassName)}
+            />
+            <div className={cls("flex gap-4", buttonContainerClassName)}>
+              {buttons.slice(0, 2).map((button, index) => (
+                <Button key={`${button.text}-${index}`} {...getButtonProps(button, index, theme.defaultButtonVariant, buttonClassName, buttonTextClassName)} />
+              ))}
+            </div>
+          </div>
+        </div>
+
+        <div className="relative w-full flex flex-row gap-10 items-end justify-between">
+          <div className={cls("flex flex-col gap-2", tagsContainerClassName)}>
+            {tags.slice(0, 6).map((tag, index) => (
+              <span
+                key={`${tag}-${index}`}
+                className={cls("text-base text-foreground", tagClassName)}
+              >
+                {tag}
+              </span>
+            ))}
+          </div>
+
+          <div className="relative w-1/2">
+            <TextAnimation
+              type={theme.defaultTextAnimation}
+              text={description}
+              variant="words-trigger"
+              className={cls("text-lg text-foreground/75 text-balance text-start leading-[1.4]", descriptionClassName)}
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+HeroShowcaseSplitOverlay.displayName = "HeroShowcaseSplitOverlay";
+
+export default memo(HeroShowcaseSplitOverlay);
diff --git a/src/components/sections/hero/HeroSplit.tsx b/src/components/sections/hero/HeroSplit.tsx
new file mode 100644
index 0000000..ae7cb81
--- /dev/null
+++ b/src/components/sections/hero/HeroSplit.tsx
@@ -0,0 +1,123 @@
+"use client";
+
+import React, { memo, useState, useEffect } from "react";
+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 } from "@/types/button";
+
+interface HeroSplitProps {
+  title: string;
+  description: string;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  buttons?: ButtonConfig[];
+  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;
+}
+
+const HeroSplit = ({
+  title,
+  description,
+  tag,
+  tagIcon,
+  buttons,
+  imageSrc,
+  videoSrc,
+  imageAlt = "",
+  videoAriaLabel = "Hero video",
+  ariaLabel = "Hero section",
+  imagePosition = "right",
+  fixedMediaHeight = true,
+  className = "",
+  containerClassName = "",
+  textBoxClassName = "",
+  titleClassName = "",
+  descriptionClassName = "",
+  tagClassName = "",
+  buttonContainerClassName = "",
+  buttonClassName = "",
+  buttonTextClassName = "",
+  mediaWrapperClassName = "",
+  imageClassName = "",
+}: HeroSplitProps) => {
+  const [isCentered, setIsCentered] = useState(false);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsCentered(window.innerWidth < 768);
+    };
+
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  const mediaContent = (
+    <div 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("w-full h-fit py-hero-page-padding md:py-0 md:h-svh flex items-center", className)}
+    >
+      <div className={cls("w-content-width mx-auto flex flex-col md:flex-row gap-13 md:gap-15 items-center", containerClassName)}>
+        {imagePosition === "left" && mediaContent}
+
+        <div className={cls("w-full md:w-1/2")}>
+          <TextBox
+            title={title}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            buttons={buttons}
+            className={cls("flex flex-col gap-3 md:gap-3", 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 gap-4 mt-4", buttonContainerClassName)}
+            buttonClassName={cls("", buttonClassName)}
+            buttonTextClassName={cls("text-base", buttonTextClassName)}
+            center={isCentered}
+          />
+        </div>
+
+        {imagePosition === "right" && mediaContent}
+      </div>
+    </section>
+  );
+};
+
+HeroSplit.displayName = "HeroSplit";
+
+export default memo(HeroSplit);
diff --git a/src/components/sections/hero/HeroSplitAvatars.tsx b/src/components/sections/hero/HeroSplitAvatars.tsx
new file mode 100644
index 0000000..686597a
--- /dev/null
+++ b/src/components/sections/hero/HeroSplitAvatars.tsx
@@ -0,0 +1,133 @@
+"use client";
+
+import React, { memo, useState, useEffect } from "react";
+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 } from "@/types/button";
+import type { Avatar } from "@/components/shared/AvatarGroup";
+
+interface HeroSplitAvatarsProps {
+  title: string;
+  description: string;
+  avatars: Avatar[];
+  avatarText: string;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  buttons?: ButtonConfig[];
+  imageSrc?: string;
+  videoSrc?: string;
+  imageAlt?: string;
+  videoAriaLabel?: string;
+  ariaLabel?: string;
+  imagePosition?: "left" | "right";
+  fixedMediaHeight?: boolean;
+  avatarGroupClassName?: string;
+  className?: string;
+  containerClassName?: string;
+  textBoxClassName?: string;
+  titleClassName?: string;
+  descriptionClassName?: string;
+  tagClassName?: string;
+  buttonContainerClassName?: string;
+  buttonClassName?: string;
+  buttonTextClassName?: string;
+  mediaWrapperClassName?: string;
+  imageClassName?: string;
+}
+
+const HeroSplitAvatars = ({
+  title,
+  description,
+  avatars,
+  avatarText,
+  tag,
+  tagIcon,
+  buttons,
+  imageSrc,
+  videoSrc,
+  imageAlt = "",
+  videoAriaLabel = "Hero video",
+  ariaLabel = "Hero section",
+  imagePosition = "right",
+  fixedMediaHeight = true,
+  avatarGroupClassName = "",
+  className = "",
+  containerClassName = "",
+  textBoxClassName = "",
+  titleClassName = "",
+  descriptionClassName = "",
+  tagClassName = "",
+  buttonContainerClassName = "",
+  buttonClassName = "",
+  buttonTextClassName = "",
+  mediaWrapperClassName = "",
+  imageClassName = "",
+}: HeroSplitAvatarsProps) => {
+  const [isCentered, setIsCentered] = useState(false);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsCentered(window.innerWidth < 768);
+    };
+
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  const mediaContent = (
+    <div 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("w-full h-fit py-hero-page-padding md:py-0 md:h-svh flex items-center", className)}
+    >
+      <div className={cls("w-content-width mx-auto flex flex-col md:flex-row gap-13 md:gap-15 items-center", containerClassName)}>
+        {imagePosition === "left" && mediaContent}
+
+        <div className={cls("w-full md:w-1/2")}>
+          <TextBox
+            title={title}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            buttons={buttons}
+            avatars={avatars}
+            avatarText={avatarText}
+            avatarGroupClassName={cls("!mt-5", avatarGroupClassName)}
+            className={cls("flex flex-col gap-3 md:gap-3", 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 gap-4 mt-4", buttonContainerClassName)}
+            buttonClassName={cls("", buttonClassName)}
+            buttonTextClassName={cls("text-base", buttonTextClassName)}
+            center={isCentered}
+          />
+        </div>
+
+        {imagePosition === "right" && mediaContent}
+      </div>
+    </section>
+  );
+};
+
+HeroSplitAvatars.displayName = "HeroSplitAvatars";
+
+export default memo(HeroSplitAvatars);
diff --git a/src/components/sections/hero/HeroSplitGlobe.tsx b/src/components/sections/hero/HeroSplitGlobe.tsx
new file mode 100644
index 0000000..88108d7
--- /dev/null
+++ b/src/components/sections/hero/HeroSplitGlobe.tsx
@@ -0,0 +1,111 @@
+"use client";
+
+import React, { memo, useState, useEffect } from "react";
+import TextBox from "@/components/Textbox";
+import { Globe } from "@/components/shared/Globe";
+import { cls } from "@/lib/utils";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig } from "@/types/button";
+import type { COBEOptions } from "cobe";
+
+interface HeroSplitGlobeProps {
+  title: string;
+  description: string;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  buttons?: ButtonConfig[];
+  globeConfig?: COBEOptions;
+  ariaLabel?: string;
+  imagePosition?: "left" | "right";
+  className?: string;
+  containerClassName?: string;
+  textBoxClassName?: string;
+  titleClassName?: string;
+  descriptionClassName?: string;
+  tagClassName?: string;
+  buttonContainerClassName?: string;
+  buttonClassName?: string;
+  buttonTextClassName?: string;
+  globeWrapperClassName?: string;
+  globeClassName?: string;
+}
+
+const HeroSplitGlobe = ({
+  title,
+  description,
+  tag,
+  tagIcon,
+  buttons,
+  globeConfig,
+  ariaLabel = "Hero section",
+  imagePosition = "right",
+  className = "",
+  containerClassName = "",
+  textBoxClassName = "",
+  titleClassName = "",
+  descriptionClassName = "",
+  tagClassName = "",
+  buttonContainerClassName = "",
+  buttonClassName = "",
+  buttonTextClassName = "",
+  globeWrapperClassName = "",
+  globeClassName = "",
+}: HeroSplitGlobeProps) => {
+  const [isCentered, setIsCentered] = useState(false);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsCentered(window.innerWidth < 768);
+    };
+
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  const globeContent = (
+    <div className={cls(
+      "relative w-full h-fit aspect-square md:aspect-auto md:w-1/2 overflow-hidden rounded-theme-capped card p-4 md:h-[65vh]",
+      globeWrapperClassName
+    )}>
+      <div className="relative h-full aspect-square max-w-full max-h-full mx-auto flex items-center justify-center">
+        <Globe config={globeConfig} className={cls("absolute top-1/2 left-1/2 -translate-1/2", globeClassName)} />
+      </div>
+    </div>
+  );
+
+  return (
+    <section
+      aria-label={ariaLabel}
+      className={cls("w-full h-fit py-hero-page-padding md:py-0 md:h-svh flex items-center", className)}
+    >
+      <div className={cls("w-content-width mx-auto flex flex-col md:flex-row gap-13 md:gap-15 items-center", containerClassName)}>
+        {imagePosition === "left" && globeContent}
+
+        <div className={cls("w-full md:w-1/2")}>
+          <TextBox
+            title={title}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            buttons={buttons}
+            className={cls("flex flex-col gap-3 md:gap-3", 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 gap-4 mt-4", buttonContainerClassName)}
+            buttonClassName={cls("", buttonClassName)}
+            buttonTextClassName={cls("text-base", buttonTextClassName)}
+            center={isCentered}
+          />
+        </div>
+
+        {imagePosition === "right" && globeContent}
+      </div>
+    </section>
+  );
+};
+
+HeroSplitGlobe.displayName = "HeroSplitGlobe";
+
+export default memo(HeroSplitGlobe);
diff --git a/src/components/sections/hero/HeroSplitGlobeKpi.tsx b/src/components/sections/hero/HeroSplitGlobeKpi.tsx
new file mode 100644
index 0000000..abd22ea
--- /dev/null
+++ b/src/components/sections/hero/HeroSplitGlobeKpi.tsx
@@ -0,0 +1,144 @@
+"use client";
+
+import React, { memo, useState, useEffect } from "react";
+import TextBox from "@/components/Textbox";
+import { Globe } from "@/components/shared/Globe";
+import { cls } from "@/lib/utils";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig } from "@/types/button";
+import type { COBEOptions } from "cobe";
+
+interface KpiItem {
+  value: string;
+  label: string;
+}
+
+interface HeroSplitGlobeKpiProps {
+  title: string;
+  description: string;
+  kpis: [KpiItem, KpiItem, KpiItem];
+  tag?: string;
+  tagIcon?: LucideIcon;
+  buttons?: ButtonConfig[];
+  globeConfig?: COBEOptions;
+  ariaLabel?: string;
+  globePosition?: "left" | "right";
+  className?: string;
+  containerClassName?: string;
+  textBoxClassName?: string;
+  titleClassName?: string;
+  descriptionClassName?: string;
+  tagClassName?: string;
+  buttonContainerClassName?: string;
+  buttonClassName?: string;
+  buttonTextClassName?: string;
+  globeWrapperClassName?: string;
+  globeClassName?: string;
+  kpiClassName?: string;
+  kpiValueClassName?: string;
+  kpiLabelClassName?: string;
+}
+
+const HeroSplitGlobeKpi = ({
+  title,
+  description,
+  kpis,
+  tag,
+  tagIcon,
+  buttons,
+  globeConfig,
+  ariaLabel = "Hero section",
+  globePosition = "right",
+  className = "",
+  containerClassName = "",
+  textBoxClassName = "",
+  titleClassName = "",
+  descriptionClassName = "",
+  tagClassName = "",
+  buttonContainerClassName = "",
+  buttonClassName = "",
+  buttonTextClassName = "",
+  globeWrapperClassName = "",
+  globeClassName = "",
+  kpiClassName = "",
+  kpiValueClassName = "",
+  kpiLabelClassName = "",
+}: HeroSplitGlobeKpiProps) => {
+  const [isCentered, setIsCentered] = useState(false);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsCentered(window.innerWidth < 768);
+    };
+
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  const globeContent = (
+    <div className={cls(
+      "relative w-full h-fit aspect-square md:aspect-auto md:w-1/2 md:h-[65vh]",
+      globeWrapperClassName
+    )}>
+      <div className="relative h-full aspect-square max-w-full max-h-full mx-auto flex items-center justify-center" >
+        <Globe config={globeConfig} className={cls("absolute top-1/2 left-1/2 -translate-1/2", globeClassName)} />
+
+        {kpis.map((kpi, index) => (
+          <div
+            key={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-[10%] md:left-[5%]",
+              index === 1 && "top-[35%] right-[2.5%] md:top-[35%]",
+              index === 2 && "bottom-[7.5%] left-[10%] md:left-[20%] 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>
+    </div>
+  );
+
+  return (
+    <section
+      aria-label={ariaLabel}
+      className={cls("w-full h-fit py-hero-page-padding md:py-0 md:h-svh flex items-center", className)}
+    >
+      <div className={cls("w-content-width mx-auto flex flex-col md:flex-row gap-13 md:gap-15 items-center", containerClassName)}>
+        {globePosition === "left" && globeContent}
+
+        <div className={cls("w-full md:w-1/2")}>
+          <TextBox
+            title={title}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            buttons={buttons}
+            className={cls("flex flex-col gap-3 md:gap-3", 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 gap-4 mt-4", buttonContainerClassName)}
+            buttonClassName={cls("", buttonClassName)}
+            buttonTextClassName={cls("text-base", buttonTextClassName)}
+            center={isCentered}
+          />
+        </div>
+
+        {globePosition === "right" && globeContent}
+      </div>
+    </section>
+  );
+};
+
+HeroSplitGlobeKpi.displayName = "HeroSplitGlobeKpi";
+
+export default memo(HeroSplitGlobeKpi);
diff --git a/src/components/sections/hero/HeroSplitKpi.tsx b/src/components/sections/hero/HeroSplitKpi.tsx
new file mode 100644
index 0000000..7ce57e8
--- /dev/null
+++ b/src/components/sections/hero/HeroSplitKpi.tsx
@@ -0,0 +1,155 @@
+"use client";
+
+import React, { memo, useState, useEffect } from "react";
+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 } from "@/types/button";
+
+interface KpiItem {
+  value: string;
+  label: string;
+}
+
+interface HeroSplitKpiProps {
+  title: string;
+  description: string;
+  kpis: [KpiItem, KpiItem, KpiItem];
+  tag?: string;
+  tagIcon?: LucideIcon;
+  buttons?: ButtonConfig[];
+  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;
+  kpiClassName?: string;
+  kpiValueClassName?: string;
+  kpiLabelClassName?: string;
+}
+
+const HeroSplitKpi = ({
+  title,
+  description,
+  kpis,
+  tag,
+  tagIcon,
+  buttons,
+  imageSrc,
+  videoSrc,
+  imageAlt = "",
+  videoAriaLabel = "Hero video",
+  ariaLabel = "Hero section",
+  imagePosition = "right",
+  className = "",
+  containerClassName = "",
+  textBoxClassName = "",
+  titleClassName = "",
+  descriptionClassName = "",
+  tagClassName = "",
+  buttonContainerClassName = "",
+  buttonClassName = "",
+  buttonTextClassName = "",
+  mediaWrapperClassName = "",
+  imageClassName = "",
+  kpiClassName = "",
+  kpiValueClassName = "",
+  kpiLabelClassName = "",
+}: HeroSplitKpiProps) => {
+  const [isCentered, setIsCentered] = useState(false);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsCentered(window.innerWidth < 768);
+    };
+
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  const mediaContent = (
+    <div className={cls(
+      "relative w-full h-fit md:w-1/2 aspect-square md:aspect-auto md:h-[65vh]",
+      mediaWrapperClassName
+    )}>
+      <div 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}
+          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
+      aria-label={ariaLabel}
+      className={cls("w-full h-fit py-hero-page-padding md:py-0 md:h-svh flex items-center", className)}
+    >
+      <div className={cls("w-content-width mx-auto flex flex-col md:flex-row gap-13 md:gap-15 items-center", containerClassName)}>
+        {imagePosition === "left" && mediaContent}
+
+        <div className={cls("w-full md:w-1/2")}>
+          <TextBox
+            title={title}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            buttons={buttons}
+            className={cls("flex flex-col gap-3 md:gap-3", 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 gap-4 mt-4", buttonContainerClassName)}
+            buttonClassName={cls("", buttonClassName)}
+            buttonTextClassName={cls("text-base", buttonTextClassName)}
+            center={isCentered}
+          />
+        </div>
+
+        {imagePosition === "right" && mediaContent}
+      </div>
+    </section>
+  );
+};
+
+HeroSplitKpi.displayName = "HeroSplitKpi";
+
+export default memo(HeroSplitKpi);
diff --git a/src/components/sections/hero/HeroSplitLarge.tsx b/src/components/sections/hero/HeroSplitLarge.tsx
new file mode 100644
index 0000000..aae9e07
--- /dev/null
+++ b/src/components/sections/hero/HeroSplitLarge.tsx
@@ -0,0 +1,111 @@
+"use client";
+
+import React, { memo, useState, useEffect } from "react";
+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 } from "@/types/button";
+
+interface HeroSplitLargeProps {
+  title: string;
+  description: string;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  buttons?: ButtonConfig[];
+  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;
+  mediaWrapperClassName?: string;
+  imageClassName?: string;
+}
+
+const HeroSplitLarge = ({
+  title,
+  description,
+  tag,
+  tagIcon,
+  buttons,
+  imageSrc,
+  videoSrc,
+  imageAlt = "",
+  videoAriaLabel = "Hero video",
+  ariaLabel = "Hero section",
+  className = "",
+  containerClassName = "",
+  textBoxClassName = "",
+  titleClassName = "",
+  descriptionClassName = "",
+  tagClassName = "",
+  buttonContainerClassName = "",
+  buttonClassName = "",
+  buttonTextClassName = "",
+  mediaWrapperClassName = "",
+  imageClassName = "",
+}: HeroSplitLargeProps) => {
+  const [isCentered, setIsCentered] = useState(false);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsCentered(window.innerWidth < 768);
+    };
+
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  return (
+    <section
+      aria-label={ariaLabel}
+      className={cls("w-full h-svh pt-hero-page-padding md:pt-0 flex flex-col gap-15 md:flex-row md:gap-0 items-center", className)}
+    >
+      <div className={cls("w-content-width mx-auto flex flex-col md:flex-row gap-13 md:gap-15 items-center", containerClassName)}>
+        <div className={cls("w-full md:w-1/2")}>
+          <TextBox
+            title={title}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            buttons={buttons}
+            className={cls("flex flex-col gap-3 md:gap-3", 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 gap-4 mt-4", buttonContainerClassName)}
+            buttonClassName={cls("", buttonClassName)}
+            buttonTextClassName={cls("text-base", buttonTextClassName)}
+            center={isCentered}
+          />
+        </div>
+      </div>
+      <div className={cls(
+        "relative md:absolute md:top-0 md:right-0 w-full md:w-1/2 h-full overflow-hidden",
+        mediaWrapperClassName
+      )}>
+        <MediaContent
+          imageSrc={imageSrc}
+          videoSrc={videoSrc}
+          imageAlt={imageAlt}
+          videoAriaLabel={videoAriaLabel}
+          imageClassName={cls("h-full min-h-0 rounded-none!", imageClassName)}
+        />
+      </div>
+    </section>
+  );
+};
+
+HeroSplitLarge.displayName = "HeroSplitLarge";
+
+export default memo(HeroSplitLarge);
diff --git a/src/components/sections/hero/HeroSplitStacked.tsx b/src/components/sections/hero/HeroSplitStacked.tsx
new file mode 100644
index 0000000..a2d3c9a
--- /dev/null
+++ b/src/components/sections/hero/HeroSplitStacked.tsx
@@ -0,0 +1,166 @@
+"use client";
+
+import React, { memo, useState, useEffect } from "react";
+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 } from "@/types/button";
+import type { Avatar } from "@/components/shared/AvatarGroup";
+
+export interface MediaItem {
+  imageSrc?: string;
+  videoSrc?: string;
+  imageAlt?: string;
+  videoAriaLabel?: string;
+}
+
+interface HeroSplitStackedProps {
+  title: string;
+  description: string;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  buttons?: ButtonConfig[];
+  mediaItems: MediaItem[];
+  stackedVariant?: "default" | "card";
+  ariaLabel?: string;
+  imagePosition?: "left" | "right";
+  avatars?: Avatar[];
+  avatarText?: string;
+  avatarGroupClassName?: string;
+  className?: string;
+  containerClassName?: string;
+  textBoxClassName?: string;
+  titleClassName?: string;
+  descriptionClassName?: string;
+  tagClassName?: string;
+  buttonContainerClassName?: string;
+  buttonClassName?: string;
+  buttonTextClassName?: string;
+  mediaWrapperClassName?: string;
+  imageClassName?: string;
+}
+
+const HeroSplitStacked = ({
+  title,
+  description,
+  tag,
+  tagIcon,
+  buttons,
+  mediaItems,
+  stackedVariant = "default",
+  ariaLabel = "Hero section",
+  imagePosition = "right",
+  avatars,
+  avatarText,
+  avatarGroupClassName = "",
+  className = "",
+  containerClassName = "",
+  textBoxClassName = "",
+  titleClassName = "",
+  descriptionClassName = "",
+  tagClassName = "",
+  buttonContainerClassName = "",
+  buttonClassName = "",
+  buttonTextClassName = "",
+  mediaWrapperClassName = "",
+  imageClassName = "",
+}: HeroSplitStackedProps) => {
+  const [isCentered, setIsCentered] = useState(false);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsCentered(window.innerWidth < 768);
+    };
+
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  const stackedLayout = (
+    <div className={cls(
+      "w-full h-fit md:w-1/2 relative",
+      stackedVariant === "card" && "card rounded-theme-capped p-3",
+      mediaWrapperClassName
+    )}>
+      <div className={cls(
+        "relative w-full aspect-[4/3] md:aspect-auto md:h-[65vh] flex items-center justify-center",
+        stackedVariant === "card" && "bg-background rounded-theme-capped p-3"
+      )}>
+        <div className="relative z-1 w-full h-full flex items-center justify-center" >
+          {mediaItems?.slice(0, 4).map((item, index) => {
+            const itemCount = mediaItems?.length || 0;
+
+            const rotations = ["rotate-10 md:rotate-14", "-rotate-5 md:-rotate-6", "rotate-3 md:rotate-4", "rotate-6 md:rotate-8"];
+            const zIndexes = ["z-10", "z-20", "z-30", "z-40"];
+            const translates = [
+              "translate-x-9 -translate-y-6 md:translate-x-12 md:-translate-y-10",
+              "-translate-x-9 -translate-y-6 md:-translate-x-14 md:-translate-y-10",
+              itemCount === 3 ? "translate-y-10" : "translate-x-2 translate-y-8 md:translate-x-2 md:translate-y-10",
+              ""
+            ];
+
+            return (
+              <div
+                key={index}
+                className={cls(
+                  "!absolute w-[70%] aspect-[4/3] overflow-hidden rounded-theme-capped transition-transform duration-500 ease-out hover:scale-105 hover:z-50",
+                  rotations[index],
+                  zIndexes[index],
+                  translates[index]
+                )}
+              >
+                <MediaContent
+                  imageSrc={item.imageSrc}
+                  videoSrc={item.videoSrc}
+                  imageAlt={item.imageAlt || ""}
+                  videoAriaLabel={item.videoAriaLabel || "Hero media"}
+                  imageClassName={cls("h-full", imageClassName)}
+                />
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+
+  return (
+    <section
+      aria-label={ariaLabel}
+      className={cls("w-full h-fit py-hero-page-padding md:py-0 md:h-svh flex items-center", className)}
+    >
+      <div className={cls("w-content-width mx-auto flex flex-col md:flex-row gap-13 md:gap-15 items-center", containerClassName)}>
+        {imagePosition === "left" && stackedLayout}
+
+        <div className={cls("w-full md:w-1/2")}>
+          <TextBox
+            title={title}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            buttons={buttons}
+            avatars={avatars}
+            avatarText={avatarText}
+            avatarGroupClassName={cls("!mt-5", avatarGroupClassName)}
+            className={cls("flex flex-col gap-3 md:gap-3", 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 gap-4 mt-4", buttonContainerClassName)}
+            buttonClassName={cls("", buttonClassName)}
+            buttonTextClassName={cls("text-base", buttonTextClassName)}
+            center={isCentered}
+          />
+        </div>
+
+        {imagePosition === "right" && stackedLayout}
+      </div>
+    </section>
+  );
+};
+
+HeroSplitStacked.displayName = "HeroSplitStacked";
+
+export default memo(HeroSplitStacked);
diff --git a/src/components/sections/hero/HeroWaitlist.tsx b/src/components/sections/hero/HeroWaitlist.tsx
new file mode 100644
index 0000000..2d58f8e
--- /dev/null
+++ b/src/components/sections/hero/HeroWaitlist.tsx
@@ -0,0 +1,98 @@
+"use client";
+
+import React, { memo } from "react";
+import TextBox from "@/components/Textbox";
+import WaitlistForm from "@/components/form/WaitlistForm";
+import { cls } from "@/lib/utils";
+import type { LucideIcon } from "lucide-react";
+
+interface FormField {
+    name: string;
+    type?: string;
+    placeholder?: string;
+    ariaLabel?: string;
+    required?: boolean;
+}
+
+interface HeroWaitlistProps {
+    title: string;
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    fields?: FormField[];
+    buttonText?: string;
+    onSubmit?: (data: Record<string, string>) => void;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    textBoxClassName?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
+    tagClassName?: string;
+    formClassName?: string;
+    inputsContainerClassName?: string;
+    inputClassName?: string;
+    buttonClassName?: string;
+    buttonTextClassName?: string;
+}
+
+const HeroWaitlist = ({
+    title,
+    description,
+    tag,
+    tagIcon,
+    fields,
+    buttonText = "Join waitlist",
+    onSubmit,
+    ariaLabel = "Hero section",
+    className = "",
+    containerClassName = "",
+    textBoxClassName = "",
+    titleClassName = "",
+    descriptionClassName = "",
+    tagClassName = "",
+    formClassName = "",
+    inputsContainerClassName = "",
+    inputClassName = "",
+    buttonClassName = "",
+    buttonTextClassName = "",
+}: HeroWaitlistProps) => {
+
+    return (
+        <section
+            aria-label={ariaLabel}
+            className={cls("relative w-full h-svh flex items-center justify-center", className)}
+        >
+            <div className={cls("w-content-width mx-auto flex flex-col gap-8", containerClassName)}>
+                <TextBox
+                    title={title}
+                    description={description}
+                    tag={tag}
+                    tagIcon={tagIcon}
+                    className={cls("flex flex-col gap-3 md:gap-1", textBoxClassName)}
+                    titleClassName={cls("text-6xl font-medium text-balance", titleClassName)}
+                    descriptionClassName={cls("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)}
+                    center={true}
+                />
+
+                <div className="w-full md:w-40 mx-auto">
+                    <WaitlistForm
+                        fields={fields}
+                        buttonText={buttonText}
+                        onSubmit={onSubmit}
+                        className={formClassName}
+                        inputsContainerClassName={inputsContainerClassName}
+                        inputClassName={inputClassName}
+                        buttonClassName={buttonClassName}
+                        buttonTextClassName={buttonTextClassName}
+                    />
+                </div>
+            </div>
+        </section>
+    );
+};
+
+HeroWaitlist.displayName = "HeroWaitlist";
+
+export default memo(HeroWaitlist);
diff --git a/src/components/sections/hero/heroCarouselLogo/HeroCarouselLogo.tsx b/src/components/sections/hero/heroCarouselLogo/HeroCarouselLogo.tsx
new file mode 100644
index 0000000..e1f5b78
--- /dev/null
+++ b/src/components/sections/hero/heroCarouselLogo/HeroCarouselLogo.tsx
@@ -0,0 +1,179 @@
+"use client";
+
+import React, { memo, useCallback } from "react";
+import MediaContent from "@/components/shared/MediaContent";
+import SvgTextLogo from "@/components/shared/SvgTextLogo/SvgTextLogo";
+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 [isMobile, setIsMobile] = React.useState(false);
+
+  const { currentSlide, progressRefs, goToSlide } = useCarouselFullscreen({
+    totalSlides: slides.length,
+    autoplayDelay,
+  });
+
+  const setProgressRef = useCallback(
+    (el: HTMLDivElement | null, index: number) => {
+      progressRefs.current[index] = el;
+    },
+    [progressRefs]
+  );
+
+  React.useEffect(() => {
+    const checkMobile = () => setIsMobile(window.innerWidth < 768);
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+    return () => window.removeEventListener("resize", checkMobile);
+  }, []);
+
+  const adjustHeightFactor = isMobile ? 1.1 : 0.8;
+
+  return (
+    <section
+      aria-label={ariaLabel}
+      className={cls("relative w-full h-svh overflow-hidden", 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", dimOverlayClassName)} />
+        )}
+        {slides.map((slide, index) => (
+          <div
+            key={index}
+            className={cls(
+              "absolute inset-0 transition-opacity duration-600",
+              currentSlide === index ? "opacity-100" : "opacity-0"
+            )}
+            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",
+          blurClassName
+        )}
+        style={{ maskImage: MASK_GRADIENT }}
+        aria-hidden="true"
+      />
+
+      <div className={cls("relative z-20 w-content-width mx-auto h-full 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 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">
+            <SvgTextLogo logoText={logoText} adjustHeightFactor={adjustHeightFactor} className={cls("text-background", logoClassName)} />
+          </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-full 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-full"
+                  style={{ transform: "translateX(-100%)" }}
+                />
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+HeroCarouselLogo.displayName = "HeroCarouselLogo";
+
+export default memo(HeroCarouselLogo);
diff --git a/src/components/sections/hero/heroCarouselLogo/useCarouselFullscreen.ts b/src/components/sections/hero/heroCarouselLogo/useCarouselFullscreen.ts
new file mode 100644
index 0000000..312de8d
--- /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,
+  };
+};
diff --git a/src/components/sections/metrics/MetricCardEight.tsx b/src/components/sections/metrics/MetricCardEight.tsx
new file mode 100644
index 0000000..6820439
--- /dev/null
+++ b/src/components/sections/metrics/MetricCardEight.tsx
@@ -0,0 +1,151 @@
+"use client";
+
+import React, { memo } from "react";
+import TextAnimation from "@/components/text/TextAnimation";
+import MediaContent from "@/components/shared/MediaContent";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type Metric = {
+    id: string;
+    value: string;
+    title: string;
+};
+
+interface MetricCardEightProps {
+    title: string;
+    imageSrc?: string;
+    imageAlt?: string;
+    videoSrc?: string;
+    videoAriaLabel?: string;
+    metrics: Metric[];
+    metricVariant: "card" | "border";
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    topSectionClassName?: string;
+    textWrapperClassName?: string;
+    titleClassName?: string;
+    mediaWrapperClassName?: string;
+    mediaClassName?: string;
+    metricsContainerClassName?: string;
+    metricClassName?: string;
+    metricBorderClassName?: string;
+    valueClassName?: string;
+    metricTitleClassName?: string;
+}
+
+const MetricCardEight = ({
+    title,
+    imageSrc,
+    imageAlt,
+    videoSrc,
+    videoAriaLabel,
+    metrics,
+    metricVariant,
+    useInvertedBackground,
+    ariaLabel = "Metrics section",
+    className = "",
+    containerClassName = "",
+    topSectionClassName = "",
+    textWrapperClassName = "",
+    titleClassName = "",
+    mediaWrapperClassName = "",
+    mediaClassName = "",
+    metricsContainerClassName = "",
+    metricClassName = "",
+    metricBorderClassName = "",
+    valueClassName = "",
+    metricTitleClassName = "",
+}: MetricCardEightProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = useInvertedBackground === "invertDefault" || useInvertedBackground === "invertCard";
+    const shouldMetricUseLightText = metricVariant === "card"
+        ? shouldUseInvertedText("invertDefault", theme.cardStyle) || shouldUseInvertedText("invertCard", theme.cardStyle)
+        : shouldUseLightText;
+
+    return (
+        <section
+            aria-label={ariaLabel}
+            className={cls(
+                "relative py-20",
+                useInvertedBackground === "invertCard"
+                    ? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground"
+                    : "w-full",
+                useInvertedBackground === "invertDefault" && "bg-foreground",
+                className
+            )}
+        >
+            <div className={cls("w-content-width mx-auto flex flex-col gap-10", containerClassName)}>
+                <div className={cls("flex flex-col md:flex-row md:items-center md:justify-between gap-8", topSectionClassName)}>
+                    <div className={cls("flex-1", textWrapperClassName)}>
+                        <TextAnimation
+                            type={theme.defaultTextAnimation}
+                            text={title}
+                            variant="words-trigger"
+                            className={cls(
+                                "text-3xl md:text-5xl font-medium leading-tight",
+                                shouldUseLightText ? "text-background" : "text-foreground",
+                                titleClassName
+                            )}
+                        />
+                    </div>
+                    <div className={cls("relative w-full md:w-20 aspect-square rounded-theme-capped overflow-hidden flex-shrink-0", mediaWrapperClassName)}>
+                        <MediaContent
+                            imageSrc={imageSrc}
+                            imageAlt={imageAlt}
+                            videoSrc={videoSrc}
+                            videoAriaLabel={videoAriaLabel}
+                            imageClassName={cls("w-full h-full object-cover", mediaClassName)}
+                        />
+                    </div>
+                </div>
+
+                <div className={cls(
+                    "grid gap-8",
+                    metrics.length === 2 && "grid-cols-2",
+                    metrics.length === 3 && "grid-cols-2 md:grid-cols-3",
+                    metrics.length >= 4 && "grid-cols-2 md:grid-cols-4",
+                    metricsContainerClassName
+                )}>
+                    {metrics.map((metric) => (
+                        <div
+                            key={metric.id}
+                            className={cls(
+                                "flex flex-col gap-6",
+                                metricVariant === "card" && "card rounded-theme-capped p-6",
+                                metricClassName
+                            )}
+                        >
+                            {metricVariant === "border" && (
+                                <div className={cls("w-full h-px bg-accent", metricBorderClassName)} />
+                            )}
+                            <div className="flex flex-col">
+                                <h3 className={cls(
+                                    "text-5xl md:text-6xl font-medium leading-tight truncate",
+                                    shouldMetricUseLightText ? "text-background" : "text-foreground",
+                                    valueClassName
+                                )}>
+                                    {metric.value}
+                                </h3>
+                                <p className={cls(
+                                    "text-base leading-tight truncate",
+                                    shouldMetricUseLightText ? "text-background/70" : "text-foreground/70",
+                                    metricTitleClassName
+                                )}>
+                                    {metric.title}
+                                </p>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </section>
+    );
+};
+
+MetricCardEight.displayName = "MetricCardEight";
+
+export default memo(MetricCardEight);
diff --git a/src/components/sections/metrics/MetricCardEleven.tsx b/src/components/sections/metrics/MetricCardEleven.tsx
new file mode 100644
index 0000000..5106159
--- /dev/null
+++ b/src/components/sections/metrics/MetricCardEleven.tsx
@@ -0,0 +1,273 @@
+"use client";
+
+import React, { memo } from "react";
+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 } 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;
+    buttons?: ButtonConfig[];
+    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 = memo(({
+    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",
+                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>
+    );
+});
+
+MetricTextCard.displayName = "MetricTextCard";
+
+const MetricMediaCard = memo(({
+    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>
+    );
+});
+
+MetricMediaCard.displayName = "MetricMediaCard";
+
+const MetricCardEleven = ({
+    metrics,
+    animationType,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    buttons,
+    textboxLayout,
+    useInvertedBackground,
+    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 w-full py-20",
+                useInvertedBackground === "invertCard" && "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground",
+                useInvertedBackground === "invertDefault" && "bg-foreground",
+                className
+            )}
+        >
+            <div className={cls("w-content-width mx-auto", containerClassName)}>
+                <CardStackTextBox
+                    title={title}
+                    titleSegments={titleSegments}
+                    description={description}
+                    tag={tag}
+                    tagIcon={tagIcon}
+                    buttons={buttons}
+                    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>
+    );
+};
+
+MetricCardEleven.displayName = "MetricCardEleven";
+
+export default memo(MetricCardEleven);
diff --git a/src/components/sections/metrics/MetricCardFive.tsx b/src/components/sections/metrics/MetricCardFive.tsx
new file mode 100644
index 0000000..d4e57cf
--- /dev/null
+++ b/src/components/sections/metrics/MetricCardFive.tsx
@@ -0,0 +1,147 @@
+"use client";
+
+import React, { memo } from "react";
+import CardList from "@/components/cardStack/CardList";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, CardAnimationType, TitleSegment } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+interface Metric {
+    id: string;
+    value: string;
+    description: string;
+}
+
+interface MetricCardFiveProps {
+    metrics: Metric[];
+    animationType: CardAnimationType;
+    variant: "card" | "border";
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    buttons?: ButtonConfig[];
+    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;
+    metricValueClassName?: string;
+    metricDescriptionClassName?: string;
+}
+
+const MetricCardFive = ({
+    metrics,
+    animationType,
+    variant,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    buttons,
+    textboxLayout,
+    useInvertedBackground,
+    ariaLabel = "Metrics section",
+    className = "",
+    containerClassName = "",
+    cardClassName = "",
+    textBoxTitleClassName = "",
+    textBoxDescriptionClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+    titleImageWrapperClassName = "",
+    titleImageClassName = "",
+    cardContentClassName = "",
+    metricValueClassName = "",
+    metricDescriptionClassName = "",
+}: MetricCardFiveProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    return (
+        <CardList
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            buttons={buttons}
+            textboxLayout={textboxLayout}
+            animationType={animationType}
+            variant={variant}
+            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}
+        >
+            {metrics.map((metric) => (
+                <div
+                    key={metric.id}
+                    className={cls(
+                        "relative z-1 w-full min-h-0 h-full flex flex-col md:flex-row gap-3 md:gap-6",
+                        variant === "card" ? "p-6 md:p-15" : "pb-6 md:pb-10",
+                        cardContentClassName
+                    )}
+                >
+                    <div className="relative z-1 w-full md:w-1/2 flex md:justify-start">
+                        <h2 className={cls(
+                            "text-5xl md:text-9xl font-medium leading-[1.1]",
+                            variant === "border"
+                                ? (useInvertedBackground !== "noInvert" ? "text-background" : "text-foreground")
+                                : (shouldUseLightText ? "text-background" : "text-foreground"),
+                            metricValueClassName
+                        )}>
+                            {metric.value}
+                        </h2>
+                    </div>
+
+                    {variant === "card" && <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">
+                        <p className={cls(
+                            "text-xl md:text-2xl leading-tight text-balance",
+                            variant === "border"
+                                ? (useInvertedBackground !== "noInvert" ? "text-background" : "text-foreground")
+                                : (shouldUseLightText ? "text-background" : "text-foreground"),
+                            metricDescriptionClassName
+                        )}>
+                            {metric.description}
+                        </p>
+                    </div>
+                </div>
+            ))}
+        </CardList>
+    );
+};
+
+MetricCardFive.displayName = "MetricCardFive";
+
+export default memo(MetricCardFive);
diff --git a/src/components/sections/metrics/MetricCardFour.tsx b/src/components/sections/metrics/MetricCardFour.tsx
new file mode 100644
index 0000000..6a2e601
--- /dev/null
+++ b/src/components/sections/metrics/MetricCardFour.tsx
@@ -0,0 +1,151 @@
+"use client";
+
+import React, { memo } from "react";
+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, TitleSegment } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type Metric = {
+    id: string;
+    icon: LucideIcon;
+    title: string;
+    value: string;
+    imageAlt?: string;
+    videoAriaLabel?: string;
+} & (
+        | { imageSrc: string; videoSrc?: never }
+        | { videoSrc: string; imageSrc?: never }
+    );
+
+interface MetricCardFourProps {
+    metrics: Metric[];
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    buttons?: ButtonConfig[];
+    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;
+    iconContainerClassName?: string;
+    iconClassName?: string;
+    metricTitleClassName?: string;
+    valueClassName?: string;
+    mediaContainerClassName?: string;
+    mediaClassName?: string;
+}
+
+const MetricCardFour = ({
+    metrics,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    buttons,
+    textboxLayout,
+    useInvertedBackground,
+    ariaLabel = "Metrics section",
+    className = "",
+    containerClassName = "",
+    textBoxTitleClassName = "",
+    textBoxDescriptionClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+    titleImageWrapperClassName = "",
+    titleImageClassName = "",
+    cardClassName = "",
+    progressBarClassName = "",
+    cardContentClassName = "",
+    iconContainerClassName = "",
+    iconClassName = "",
+    metricTitleClassName = "",
+    valueClassName = "",
+    mediaContainerClassName = "",
+    mediaClassName = "",
+}: MetricCardFourProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+    const mediaItems = metrics.map((metric) => ({
+        imageSrc: metric.imageSrc,
+        videoSrc: metric.videoSrc,
+        imageAlt: metric.imageAlt || metric.title,
+        videoAriaLabel: metric.videoAriaLabel || metric.title,
+    }));
+
+    return (
+        <TimelineHorizontalCardStack
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            buttons={buttons}
+            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}
+        >
+            {metrics.map((metric, index) => (
+                <div
+                    key={`${metric.id}-${index}`}
+                    className={cls("w-full min-h-0 h-fit flex flex-col items-center justify-center gap-3 py-10", cardContentClassName)}
+                >
+                    <div className="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-background", iconClassName)} strokeWidth={1.5} />
+                        </div>
+                        <h3 className={cls("text-xl truncate", shouldUseLightText ? "text-background" : "text-foreground", metricTitleClassName)}>
+                            {metric.title}
+                        </h3>
+                    </div>
+                    <div className="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>
+            ))}
+        </TimelineHorizontalCardStack>
+    );
+};
+
+MetricCardFour.displayName = "MetricCardFour";
+
+export default memo(MetricCardFour);
diff --git a/src/components/sections/metrics/MetricCardFourteen.tsx b/src/components/sections/metrics/MetricCardFourteen.tsx
new file mode 100644
index 0000000..ac1c0fd
--- /dev/null
+++ b/src/components/sections/metrics/MetricCardFourteen.tsx
@@ -0,0 +1,129 @@
+"use client";
+
+import React, { memo } from "react";
+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 type { InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type MetricItem = {
+    id: string;
+    value: string;
+    description: string;
+};
+
+interface MetricCardFourteenProps {
+    title: string;
+    tag: string;
+    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,
+    metrics,
+    useInvertedBackground,
+    ariaLabel = "Metrics section",
+    className = "",
+    containerClassName = "",
+    titleClassName = "",
+    tagClassName = "",
+    metricsContainerClassName = "",
+    metricClassName = "",
+    valueClassName = "",
+    descriptionClassName = "",
+}: MetricCardFourteenProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = useInvertedBackground === "invertDefault" || useInvertedBackground === "invertCard";
+    const shouldMetricUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    return (
+        <section
+            aria-label={ariaLabel}
+            className={cls(
+                "relative py-20",
+                useInvertedBackground === "invertCard"
+                    ? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground"
+                    : "w-full",
+                useInvertedBackground === "invertDefault" && "bg-foreground",
+                className
+            )}
+        >
+            <div className={cls("w-content-width mx-auto flex flex-col gap-10", containerClassName)}>
+                <TextAnimation
+                    type={theme.defaultTextAnimation}
+                    text={title}
+                    variant="words-trigger"
+                    className={cls(
+                        "text-3xl md:text-5xl font-medium leading-tight",
+                        shouldUseLightText ? "text-background" : "text-foreground",
+                        titleClassName
+                    )}
+                />
+
+                <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="w-fit md:w-15">
+                        <Tag
+                            text={tag}
+                            useInvertedBackground={useInvertedBackground}
+                            className={cls("min-w-0 max-w-full text-xl px-6", tagClassName)}
+                            textClassName="truncate"
+                        />
+                    </div>
+
+                    <div className={cls(
+                        "w-full grid gap-4 flex-1",
+                        metrics.length === 1 && "grid-cols-1",
+                        metrics.length >= 2 && "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",
+                                    shouldMetricUseLightText ? "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",
+                                        shouldMetricUseLightText ? "text-background" : "text-foreground",
+                                        descriptionClassName
+                                    )}>
+                                        {metric.description}
+                                    </p>
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+MetricCardFourteen.displayName = "MetricCardFourteen";
+
+export default memo(MetricCardFourteen);
diff --git a/src/components/sections/metrics/MetricCardOne.tsx b/src/components/sections/metrics/MetricCardOne.tsx
new file mode 100644
index 0000000..532ab96
--- /dev/null
+++ b/src/components/sections/metrics/MetricCardOne.tsx
@@ -0,0 +1,202 @@
+"use client";
+
+import React, { memo } from "react";
+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, CardAnimationType, ContainerStyle, TitleSegment } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type Metric = {
+    id: string;
+    value: string;
+    title: string;
+    description: string;
+    icon: LucideIcon;
+};
+
+interface MetricCardOneProps {
+    metrics: Metric[];
+    carouselMode?: "auto" | "buttons";
+    gridVariant: GridVariant;
+    uniformGridCustomHeightClasses?: string;
+    animationType: CardAnimationType;
+    containerStyle: ContainerStyle;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    buttons?: ButtonConfig[];
+    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 = memo(({
+    metric,
+    shouldUseLightText,
+    cardClassName = "",
+    valueClassName = "",
+    titleClassName = "",
+    descriptionClassName = "",
+    iconContainerClassName = "",
+    iconClassName = "",
+}: MetricCardItemProps) => {
+    return (
+        <div className={cls("relative h-full card text-foreground rounded-theme-capped p-6 flex flex-col items-center justify-center gap-0", cardClassName)}>
+            <div
+                className={cls("relative z-1 text-9xl font-foreground font-medium leading-[1.1]", 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}
+            </div>
+            <p className={cls("relative z-1 mt-[calc(var(--text-4xl)*-0.75)] md:mt-[calc(var(--text-4xl)*-1.15)] text-4xl font-medium text-center", shouldUseLightText ? "text-background" : "text-foreground", titleClassName)}>
+                {metric.title}
+            </p>
+            <p className={cls("relative 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-background", iconClassName)} />
+            </div>
+        </div>
+    );
+});
+
+MetricCardItem.displayName = "MetricCardItem";
+
+const MetricCardOne = ({
+    metrics,
+    carouselMode = "buttons",
+    gridVariant,
+    uniformGridCustomHeightClasses,
+    animationType,
+    containerStyle,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    buttons,
+    textboxLayout,
+    useInvertedBackground,
+    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 =
+        containerStyle === "card"
+            ? shouldUseInvertedText("invertDefault", theme.cardStyle) || shouldUseInvertedText("invertCard", theme.cardStyle)
+            : shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    return (
+        <CardStack
+            useInvertedBackground={useInvertedBackground}
+            mode={carouselMode}
+            gridVariant={gridVariant}
+            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+            animationType={animationType}
+            containerStyle={containerStyle}
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            buttons={buttons}
+            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>
+    );
+};
+
+MetricCardOne.displayName = "MetricCardOne";
+
+export default memo(MetricCardOne);
diff --git a/src/components/sections/metrics/MetricCardSeven.tsx b/src/components/sections/metrics/MetricCardSeven.tsx
new file mode 100644
index 0000000..3202758
--- /dev/null
+++ b/src/components/sections/metrics/MetricCardSeven.tsx
@@ -0,0 +1,192 @@
+"use client";
+
+import React, { memo } from "react";
+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, GridVariant, CardAnimationType, ContainerStyle, TitleSegment } 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";
+    gridVariant: GridVariant;
+    uniformGridCustomHeightClasses?: string;
+    animationType: CardAnimationType;
+    containerStyle: ContainerStyle;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    buttons?: ButtonConfig[];
+    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 = memo(({
+    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 text-accent truncate", 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>
+    );
+});
+
+MetricCardItem.displayName = "MetricCardItem";
+
+const MetricCardSeven = ({
+    metrics,
+    carouselMode = "buttons",
+    gridVariant,
+    uniformGridCustomHeightClasses,
+    animationType,
+    containerStyle,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    buttons,
+    textboxLayout,
+    useInvertedBackground,
+    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 =
+        containerStyle === "card"
+            ? shouldUseInvertedText("invertDefault", theme.cardStyle) || shouldUseInvertedText("invertCard", theme.cardStyle)
+            : shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    return (
+        <CardStack
+            useInvertedBackground={useInvertedBackground}
+            mode={carouselMode}
+            gridVariant={gridVariant}
+            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+            animationType={animationType}
+            containerStyle={containerStyle}
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            buttons={buttons}
+            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>
+    );
+};
+
+MetricCardSeven.displayName = "MetricCardSeven";
+
+export default memo(MetricCardSeven);
diff --git a/src/components/sections/metrics/MetricCardSix.tsx b/src/components/sections/metrics/MetricCardSix.tsx
new file mode 100644
index 0000000..b0f076a
--- /dev/null
+++ b/src/components/sections/metrics/MetricCardSix.tsx
@@ -0,0 +1,187 @@
+"use client";
+
+import React, { memo } from "react";
+import CardStack from "@/components/cardStack/CardStack";
+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, GridVariant, CardAnimationType, ContainerStyle, TitleSegment } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type Metric = {
+    id: string;
+    value: string;
+    tag: string;
+    tagIcon?: LucideIcon;
+    title: string;
+};
+
+interface MetricCardSixProps {
+    metrics: Metric[];
+    carouselMode?: "auto" | "buttons";
+    gridVariant: GridVariant;
+    uniformGridCustomHeightClasses?: string;
+    animationType: CardAnimationType;
+    containerStyle: ContainerStyle;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    buttons?: ButtonConfig[];
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    cardClassName?: string;
+    textBoxTitleClassName?: string;
+    textBoxTitleImageWrapperClassName?: string;
+    textBoxTitleImageClassName?: string;
+    textBoxDescriptionClassName?: string;
+    valueClassName?: string;
+    metricTagClassName?: string;
+    metricTitleClassName?: string;
+    gridClassName?: string;
+    carouselClassName?: string;
+    controlsClassName?: string;
+    textBoxClassName?: string;
+    textBoxTagClassName?: string;
+    textBoxButtonContainerClassName?: string;
+    textBoxButtonClassName?: string;
+    textBoxButtonTextClassName?: string;
+}
+
+interface MetricCardItemProps {
+    metric: Metric;
+    shouldUseLightText: boolean;
+    useInvertedBackground: InvertedBackground;
+    cardClassName?: string;
+    valueClassName?: string;
+    metricTagClassName?: string;
+    metricTitleClassName?: string;
+}
+
+const MetricCardItem = memo(({
+    metric,
+    shouldUseLightText,
+    useInvertedBackground,
+    cardClassName = "",
+    valueClassName = "",
+    metricTagClassName = "",
+    metricTitleClassName = "",
+}: 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-3">
+                <Tag
+                    text={metric.tag}
+                    icon={metric.tagIcon}
+                    useInvertedBackground={useInvertedBackground}
+                    className={metricTagClassName}
+                />
+                <p className={cls("relative z-1 text-3xl", shouldUseLightText ? "text-background" : "text-foreground", metricTitleClassName)}>
+                    {metric.title}
+                </p>
+            </div>
+            <div className={cls("relative z-1 text-9xl md:text-7xl font-medium", shouldUseLightText ? "text-background" : "text-foreground", valueClassName)}>
+                {metric.value}
+            </div>
+        </div>
+    );
+});
+
+MetricCardItem.displayName = "MetricCardItem";
+
+const MetricCardSix = ({
+    metrics,
+    carouselMode = "buttons",
+    gridVariant,
+    uniformGridCustomHeightClasses,
+    animationType,
+    containerStyle,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    buttons,
+    textboxLayout,
+    useInvertedBackground,
+    ariaLabel = "Metrics section",
+    className = "",
+    containerClassName = "",
+    cardClassName = "",
+    textBoxTitleClassName = "",
+    textBoxTitleImageWrapperClassName = "",
+    textBoxTitleImageClassName = "",
+    textBoxDescriptionClassName = "",
+    valueClassName = "",
+    metricTagClassName = "",
+    metricTitleClassName = "",
+    gridClassName = "",
+    carouselClassName = "",
+    controlsClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+}: MetricCardSixProps) => {
+    const theme = useTheme();
+    const shouldUseLightText =
+        containerStyle === "card"
+            ? shouldUseInvertedText("invertDefault", theme.cardStyle) || shouldUseInvertedText("invertCard", theme.cardStyle)
+            : shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    return (
+        <CardStack
+            useInvertedBackground={useInvertedBackground}
+            mode={carouselMode}
+            gridVariant={gridVariant}
+            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+            animationType={animationType}
+            containerStyle={containerStyle}
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            buttons={buttons}
+            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}
+                    useInvertedBackground={useInvertedBackground}
+                    cardClassName={cardClassName}
+                    valueClassName={valueClassName}
+                    metricTagClassName={metricTagClassName}
+                    metricTitleClassName={metricTitleClassName}
+                />
+            ))}
+        </CardStack>
+    );
+};
+
+MetricCardSix.displayName = "MetricCardSix";
+
+export default memo(MetricCardSix);
diff --git a/src/components/sections/metrics/MetricCardTen.tsx b/src/components/sections/metrics/MetricCardTen.tsx
new file mode 100644
index 0000000..e7d12cb
--- /dev/null
+++ b/src/components/sections/metrics/MetricCardTen.tsx
@@ -0,0 +1,244 @@
+"use client";
+
+import React, { memo } from "react";
+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, ContainerStyle, TitleSegment } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+import type { CTAButtonVariant } from "@/components/button/types";
+
+type Metric = {
+    id: string;
+    title: string;
+    subtitle: string;
+    category: string;
+    value: string;
+    buttons?: ButtonConfig[];
+};
+
+interface MetricCardTenProps {
+    metrics: Metric[];
+    carouselMode?: "auto" | "buttons";
+    uniformGridCustomHeightClasses?: string;
+    animationType: CardAnimationType;
+    containerStyle: ContainerStyle;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    buttons?: ButtonConfig[];
+    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 MetricCardItemProps {
+    metric: Metric;
+    shouldUseLightText: boolean;
+    defaultButtonVariant: CTAButtonVariant;
+    cardClassName?: string;
+    cardTitleClassName?: string;
+    subtitleClassName?: string;
+    categoryClassName?: string;
+    valueClassName?: string;
+    footerClassName?: string;
+    cardButtonClassName?: string;
+    cardButtonTextClassName?: string;
+}
+
+const MetricCardItem = memo(({
+    metric,
+    shouldUseLightText,
+    defaultButtonVariant,
+    cardClassName = "",
+    cardTitleClassName = "",
+    subtitleClassName = "",
+    categoryClassName = "",
+    valueClassName = "",
+    footerClassName = "",
+    cardButtonClassName = "",
+    cardButtonTextClassName = "",
+}: MetricCardItemProps) => {
+    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
+                    )}>
+                        {metric.title}
+                    </h3>
+                    <p className={cls(
+                        "text-base md:text-lg",
+                        shouldUseLightText ? "text-background/75" : "text-foreground/75",
+                        subtitleClassName
+                    )}>
+                        {metric.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
+                        )}>
+                            {metric.category}
+                        </span>
+                    </div>
+                    <span className={cls(
+                        "text-xl md:text-2xl font-medium",
+                        shouldUseLightText ? "text-background" : "text-foreground",
+                        valueClassName
+                    )}>
+                        {metric.value}
+                    </span>
+                </div>
+            </div>
+
+            {metric.buttons && metric.buttons.length > 0 && (
+                <div className={cls("bg-accent/10 p-4 rounded-b-theme-capped", footerClassName)}>
+                    <div className="flex gap-4">
+                        {metric.buttons.slice(0, 2).map((button, index) => (
+                            <Button key={`${button.text}-${index}`} {...getButtonProps(button, index, defaultButtonVariant, cardButtonClassName, cardButtonTextClassName)} />
+                        ))}
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+});
+
+MetricCardItem.displayName = "MetricCardItem";
+
+const MetricCardTen = ({
+    metrics,
+    carouselMode = "buttons",
+    uniformGridCustomHeightClasses,
+    animationType,
+    containerStyle,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    buttons,
+    textboxLayout,
+    useInvertedBackground,
+    ariaLabel = "Metrics section",
+    className = "",
+    containerClassName = "",
+    cardClassName = "",
+    textBoxTitleClassName = "",
+    textBoxTitleImageWrapperClassName = "",
+    textBoxTitleImageClassName = "",
+    textBoxDescriptionClassName = "",
+    cardTitleClassName = "",
+    subtitleClassName = "",
+    categoryClassName = "",
+    valueClassName = "",
+    footerClassName = "",
+    cardButtonClassName = "",
+    cardButtonTextClassName = "",
+    gridClassName = "",
+    carouselClassName = "",
+    controlsClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+}: MetricCardTenProps) => {
+    const theme = useTheme();
+    const shouldUseLightText =
+        containerStyle === "card"
+            ? shouldUseInvertedText("invertDefault", theme.cardStyle) || shouldUseInvertedText("invertCard", theme.cardStyle)
+            : shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    return (
+        <CardStack
+            useInvertedBackground={useInvertedBackground}
+            mode={carouselMode}
+            gridVariant="uniform-all-items-equal"
+            carouselThreshold={4}
+            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+            animationType={animationType}
+            containerStyle={containerStyle}
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            buttons={buttons}
+            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"
+        >
+            {metrics.map((metric, index) => (
+                <MetricCardItem
+                    key={`${metric.id}-${index}`}
+                    metric={metric}
+                    shouldUseLightText={shouldUseLightText}
+                    defaultButtonVariant={theme.defaultButtonVariant}
+                    cardClassName={cardClassName}
+                    cardTitleClassName={cardTitleClassName}
+                    subtitleClassName={subtitleClassName}
+                    categoryClassName={categoryClassName}
+                    valueClassName={valueClassName}
+                    footerClassName={footerClassName}
+                    cardButtonClassName={cardButtonClassName}
+                    cardButtonTextClassName={cardButtonTextClassName}
+                />
+            ))}
+        </CardStack>
+    );
+};
+
+MetricCardTen.displayName = "MetricCardTen";
+
+export default memo(MetricCardTen);
diff --git a/src/components/sections/metrics/MetricCardThirteen.tsx b/src/components/sections/metrics/MetricCardThirteen.tsx
new file mode 100644
index 0000000..6ea218d
--- /dev/null
+++ b/src/components/sections/metrics/MetricCardThirteen.tsx
@@ -0,0 +1,167 @@
+"use client";
+
+import React, { memo, useState, useEffect } from "react";
+import TextBox from "@/components/Textbox";
+import { Globe } from "@/components/shared/Globe";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, TitleSegment } from "@/components/cardStack/types";
+import type { InvertedBackground } from "@/providers/themeProvider/config/constants";
+import type { COBEOptions } from "cobe";
+
+type MetricCard = {
+    id: string;
+    label: string;
+    value: string;
+};
+
+interface MetricCardThirteenProps {
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    buttons?: ButtonConfig[];
+    metrics: MetricCard[];
+    globeConfig?: COBEOptions;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    textBoxClassName?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
+    tagClassName?: string;
+    buttonContainerClassName?: string;
+    buttonClassName?: string;
+    buttonTextClassName?: string;
+    titleImageWrapperClassName?: string;
+    titleImageClassName?: string;
+    globeWrapperClassName?: string;
+    globeClassName?: string;
+    metricsContainerClassName?: string;
+    metricCardClassName?: string;
+    metricLabelClassName?: string;
+    metricValueClassName?: string;
+}
+
+const MetricCardThirteen = ({
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    buttons,
+    metrics,
+    globeConfig,
+    useInvertedBackground,
+    ariaLabel = "Metrics section",
+    className = "",
+    containerClassName = "",
+    textBoxClassName = "",
+    titleClassName = "",
+    descriptionClassName = "",
+    tagClassName = "",
+    buttonContainerClassName = "",
+    buttonClassName = "",
+    buttonTextClassName = "",
+    titleImageWrapperClassName = "",
+    titleImageClassName = "",
+    globeWrapperClassName = "",
+    globeClassName = "",
+    metricsContainerClassName = "",
+    metricCardClassName = "",
+    metricLabelClassName = "",
+    metricValueClassName = "",
+}: MetricCardThirteenProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+    const [isCentered, setIsCentered] = useState(false);
+
+    useEffect(() => {
+        const handleResize = () => {
+            setIsCentered(window.innerWidth < 768);
+        };
+
+        handleResize();
+        window.addEventListener("resize", handleResize);
+        return () => window.removeEventListener("resize", handleResize);
+    }, []);
+
+    return (
+        <section
+            aria-label={ariaLabel}
+            className={cls(
+                "relative w-full min-h-svh py-20 overflow-hidden",
+                useInvertedBackground === "invertCard" && "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground",
+                useInvertedBackground === "invertDefault" && "bg-foreground",
+                className
+            )}
+        >
+            <div className={cls("relative w-content-width mx-auto flex flex-col justify-between min-h-[67.5svh] md:min-h-[calc(100svh-10rem)]", containerClassName)}>
+                <div className={cls(
+                    "absolute bottom-0 right-0 w-full md:w-3/5 h-3/4 md:h-full pointer-events-none overflow-hidden",
+                    globeWrapperClassName
+                )}>
+                    <div className="relative h-full aspect-square max-w-full max-h-full ml-auto flex items-center justify-center mask-fade-xy">
+                        <Globe config={globeConfig} className={cls("absolute scale-125 top-1/2 left-1/2 -translate-1/2", globeClassName)} />
+                    </div>
+                </div>
+                <TextBox
+                    title={title}
+                    titleSegments={titleSegments}
+                    description={description}
+                    tag={tag}
+                    tagIcon={tagIcon}
+                    buttons={buttons}
+                    useInvertedBackground={useInvertedBackground}
+                    className={cls("w-full md:w-1/2 flex flex-col gap-3 md:gap-3", 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 gap-4 mt-4", buttonContainerClassName)}
+                    buttonClassName={cls("", buttonClassName)}
+                    buttonTextClassName={cls("text-base", buttonTextClassName)}
+                    titleImageWrapperClassName={titleImageWrapperClassName}
+                    titleImageClassName={titleImageClassName}
+                    center={isCentered}
+                />
+
+                <div className={cls(
+                    "relative w-full md:w-7/10 grid grid-cols-2 md:grid-cols-4 gap-4 mt-auto",
+                    metricsContainerClassName
+                )}>
+                    {metrics.map((metric) => (
+                        <div
+                            key={metric.id}
+                            className={cls(
+                                "card rounded-theme-capped p-4 md:p-6 flex flex-col gap-6 md:gap-10",
+                                metricCardClassName
+                            )}
+                        >
+                            <p className={cls(
+                                "text-sm md:text-base truncate",
+                                shouldUseLightText ? "text-background/75" : "text-foreground/75",
+                                metricLabelClassName
+                            )}>
+                                {metric.label}
+                            </p>
+                            <p className={cls(
+                                "text-2xl md:text-3xl font-medium leading-tight truncate",
+                                shouldUseLightText ? "text-background" : "text-foreground",
+                                metricValueClassName
+                            )}>
+                                {metric.value}
+                            </p>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </section>
+    );
+};
+
+MetricCardThirteen.displayName = "MetricCardThirteen";
+
+export default memo(MetricCardThirteen);
diff --git a/src/components/sections/metrics/MetricCardThree.tsx b/src/components/sections/metrics/MetricCardThree.tsx
new file mode 100644
index 0000000..8d5e586
--- /dev/null
+++ b/src/components/sections/metrics/MetricCardThree.tsx
@@ -0,0 +1,186 @@
+"use client";
+
+import React, { memo } from "react";
+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, CardAnimationType, ContainerStyle, TitleSegment } 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";
+    gridVariant: GridVariant;
+    uniformGridCustomHeightClasses?: string;
+    animationType: CardAnimationType;
+    containerStyle: ContainerStyle;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    buttons?: ButtonConfig[];
+    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 = memo(({
+    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-background", 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>
+    );
+});
+
+MetricCardItem.displayName = "MetricCardItem";
+
+const MetricCardThree = ({
+    metrics,
+    carouselMode = "buttons",
+    gridVariant,
+    uniformGridCustomHeightClasses,
+    animationType,
+    containerStyle,
+    title,
+  titleSegments,
+    description,
+    tag,
+    tagIcon,
+    buttons,
+    textboxLayout,
+    useInvertedBackground,
+    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 =
+        containerStyle === "card"
+            ? shouldUseInvertedText("invertDefault", theme.cardStyle) || shouldUseInvertedText("invertCard", theme.cardStyle)
+            : shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    return (
+        <CardStack
+            useInvertedBackground={useInvertedBackground}
+            mode={carouselMode}
+            gridVariant={gridVariant}
+            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+            animationType={animationType}
+            containerStyle={containerStyle}
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            buttons={buttons}
+            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>
+    );
+};
+
+MetricCardThree.displayName = "MetricCardThree";
+
+export default memo(MetricCardThree);
diff --git a/src/components/sections/metrics/MetricCardTwelve.tsx b/src/components/sections/metrics/MetricCardTwelve.tsx
new file mode 100644
index 0000000..8fa7eb2
--- /dev/null
+++ b/src/components/sections/metrics/MetricCardTwelve.tsx
@@ -0,0 +1,307 @@
+"use client";
+
+import React, { memo } from "react";
+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 { CardAnimationType } 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 HeroMedia = MediaProps & {
+    title: string;
+};
+
+type MetricCard = {
+    icon: LucideIcon;
+    title: string;
+    value: string;
+};
+
+type BottomMedia = MediaProps;
+
+interface MetricCardTwelveProps {
+    heroMedia: HeroMedia;
+    metrics: MetricCard[];
+    bottomMedia: BottomMedia;
+    animationType: CardAnimationType;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    heroCardClassName?: string;
+    heroMediaClassName?: string;
+    heroTitleClassName?: string;
+    gridClassName?: string;
+    metricCardClassName?: string;
+    iconContainerClassName?: string;
+    iconClassName?: string;
+    metricTitleClassName?: string;
+    valueClassName?: string;
+    bottomMediaCardClassName?: string;
+    bottomMediaClassName?: string;
+}
+
+interface MetricCardItemProps {
+    metric: MetricCard;
+    shouldUseLightText: boolean;
+    metricCardClassName?: string;
+    iconContainerClassName?: string;
+    iconClassName?: string;
+    metricTitleClassName?: string;
+    valueClassName?: string;
+}
+
+const MetricCardItem = memo(({
+    metric,
+    shouldUseLightText,
+    metricCardClassName = "",
+    iconContainerClassName = "",
+    iconClassName = "",
+    metricTitleClassName = "",
+    valueClassName = "",
+}: MetricCardItemProps) => {
+    return (
+        <div
+            className={cls(
+                "card rounded-theme-capped p-6 md:p-8 flex flex-col items-center justify-center gap-4 aspect-video",
+                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",
+                    iconContainerClassName
+                )}>
+                    <metric.icon className={cls("h-4/10 text-background", 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>
+    );
+});
+
+MetricCardItem.displayName = "MetricCardItem";
+
+const MetricCardTwelve = ({
+    heroMedia,
+    metrics,
+    bottomMedia,
+    animationType,
+    useInvertedBackground,
+    ariaLabel = "Metrics section",
+    className = "",
+    containerClassName = "",
+    heroCardClassName = "",
+    heroMediaClassName = "",
+    heroTitleClassName = "",
+    gridClassName = "",
+    metricCardClassName = "",
+    iconContainerClassName = "",
+    iconClassName = "",
+    metricTitleClassName = "",
+    valueClassName = "",
+    bottomMediaCardClassName = "",
+    bottomMediaClassName = "",
+}: MetricCardTwelveProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    const metricCount = metrics.length;
+    // 1 metric: 3 items (hero, metric, media)
+    // 2 metrics: 4 items (hero, metric1, media, metric2)
+    // 3 metrics: 5 items (hero, metric1, metric2, metric3, media)
+    const itemCount = metricCount + 2;
+    const { itemRefs } = useCardAnimation({ animationType, itemCount });
+
+    return (
+        <section
+            aria-label={ariaLabel}
+            className={cls(
+                "relative w-full py-20",
+                useInvertedBackground === "invertCard" && "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground",
+                useInvertedBackground === "invertDefault" && "bg-foreground",
+                className
+            )}
+        >
+            <div className={cls("w-content-width mx-auto", containerClassName)}>
+                <div className="flex flex-col gap-4">
+                    {/* Hero Media Card */}
+                    <div
+                        ref={(el) => { itemRefs.current[0] = el; }}
+                        className={cls(
+                            "relative w-full aspect-video rounded-theme-capped overflow-hidden",
+                            heroCardClassName
+                        )}
+                    >
+                        <MediaContent
+                            imageSrc={heroMedia.imageSrc}
+                            videoSrc={heroMedia.videoSrc}
+                            imageAlt={heroMedia.imageAlt}
+                            videoAriaLabel={heroMedia.videoAriaLabel}
+                            imageClassName={cls("w-full h-full object-cover", heroMediaClassName)}
+                        />
+                        <div className="absolute inset-0 flex items-center justify-center">
+                            <h2 className={cls(
+                                "max-w-8/10 md:max-w-1/2 text-4xl md:text-6xl font-medium text-center text-balance text-background mix-blend-difference",
+                                heroTitleClassName
+                            )}>
+                                {heroMedia.title}
+                            </h2>
+                        </div>
+                    </div>
+
+                    {/* Bottom Grid */}
+                    <div className={cls(
+                        "grid gap-4",
+                        metricCount === 1 && "grid-cols-1 md:grid-cols-2",
+                        metricCount === 2 && "grid-cols-1 md:grid-cols-3",
+                        metricCount === 3 && "grid-cols-1 md:grid-cols-3",
+                        gridClassName
+                    )}>
+                        {/* First Metric Card */}
+                        <div ref={(el) => { itemRefs.current[1] = el; }}>
+                            <MetricCardItem
+                                metric={metrics[0]}
+                                shouldUseLightText={shouldUseLightText}
+                                metricCardClassName={metricCardClassName}
+                                iconContainerClassName={iconContainerClassName}
+                                iconClassName={iconClassName}
+                                metricTitleClassName={metricTitleClassName}
+                                valueClassName={valueClassName}
+                            />
+                        </div>
+
+                        {/* 1 metric: Media on right */}
+                        {metricCount === 1 && (
+                            <div
+                                ref={(el) => { itemRefs.current[2] = el; }}
+                                className={cls(
+                                    "relative rounded-theme-capped overflow-hidden aspect-square md:aspect-video",
+                                    bottomMediaCardClassName
+                                )}
+                            >
+                                <MediaContent
+                                    imageSrc={bottomMedia.imageSrc}
+                                    videoSrc={bottomMedia.videoSrc}
+                                    imageAlt={bottomMedia.imageAlt}
+                                    videoAriaLabel={bottomMedia.videoAriaLabel}
+                                    imageClassName={cls("w-full h-full object-cover", bottomMediaClassName)}
+                                />
+                            </div>
+                        )}
+
+                        {/* 2 metrics: Media in middle */}
+                        {metricCount === 2 && (
+                            <>
+                                <div
+                                    ref={(el) => { itemRefs.current[2] = el; }}
+                                    className={cls(
+                                        "relative rounded-theme-capped overflow-hidden aspect-square md:aspect-video order-last md:order-none",
+                                        bottomMediaCardClassName
+                                    )}
+                                >
+                                    <MediaContent
+                                        imageSrc={bottomMedia.imageSrc}
+                                        videoSrc={bottomMedia.videoSrc}
+                                        imageAlt={bottomMedia.imageAlt}
+                                        videoAriaLabel={bottomMedia.videoAriaLabel}
+                                        imageClassName={cls("w-full h-full object-cover", bottomMediaClassName)}
+                                    />
+                                </div>
+                                <div ref={(el) => { itemRefs.current[3] = el; }}>
+                                    <MetricCardItem
+                                        metric={metrics[1]}
+                                        shouldUseLightText={shouldUseLightText}
+                                        metricCardClassName={metricCardClassName}
+                                        iconContainerClassName={iconContainerClassName}
+                                        iconClassName={iconClassName}
+                                        metricTitleClassName={metricTitleClassName}
+                                        valueClassName={valueClassName}
+                                    />
+                                </div>
+                            </>
+                        )}
+
+                        {/* 3 metrics: Metric 2, Metric 3, then Media full width */}
+                        {metricCount === 3 && (
+                            <>
+                                <div ref={(el) => { itemRefs.current[2] = el; }}>
+                                    <MetricCardItem
+                                        metric={metrics[1]}
+                                        shouldUseLightText={shouldUseLightText}
+                                        metricCardClassName={metricCardClassName}
+                                        iconContainerClassName={iconContainerClassName}
+                                        iconClassName={iconClassName}
+                                        metricTitleClassName={metricTitleClassName}
+                                        valueClassName={valueClassName}
+                                    />
+                                </div>
+                                <div ref={(el) => { itemRefs.current[3] = el; }}>
+                                    <MetricCardItem
+                                        metric={metrics[2]}
+                                        shouldUseLightText={shouldUseLightText}
+                                        metricCardClassName={metricCardClassName}
+                                        iconContainerClassName={iconContainerClassName}
+                                        iconClassName={iconClassName}
+                                        metricTitleClassName={metricTitleClassName}
+                                        valueClassName={valueClassName}
+                                    />
+                                </div>
+                                <div
+                                    ref={(el) => { itemRefs.current[4] = el; }}
+                                    className={cls(
+                                        "relative rounded-theme-capped overflow-hidden aspect-video md:aspect-[16/3] col-span-2 md:col-span-3",
+                                        bottomMediaCardClassName
+                                    )}
+                                >
+                                    <MediaContent
+                                        imageSrc={bottomMedia.imageSrc}
+                                        videoSrc={bottomMedia.videoSrc}
+                                        imageAlt={bottomMedia.imageAlt}
+                                        videoAriaLabel={bottomMedia.videoAriaLabel}
+                                        imageClassName={cls("w-full h-full object-cover", bottomMediaClassName)}
+                                    />
+                                </div>
+                            </>
+                        )}
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+MetricCardTwelve.displayName = "MetricCardTwelve";
+
+export default memo(MetricCardTwelve);
diff --git a/src/components/sections/metrics/MetricCardTwo.tsx b/src/components/sections/metrics/MetricCardTwo.tsx
new file mode 100644
index 0000000..b34efb5
--- /dev/null
+++ b/src/components/sections/metrics/MetricCardTwo.tsx
@@ -0,0 +1,168 @@
+"use client";
+
+import React, { memo } from "react";
+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, CardAnimationType, ContainerStyle, TitleSegment } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type Metric = {
+    id: string;
+    value: string;
+    description: string;
+};
+
+interface MetricCardTwoProps {
+    metrics: Metric[];
+    carouselMode?: "auto" | "buttons";
+    gridVariant: GridVariant;
+    uniformGridCustomHeightClasses?: string;
+    animationType: CardAnimationType;
+    containerStyle: ContainerStyle;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    buttons?: ButtonConfig[];
+    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 = memo(({
+    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)}>
+            <div className={cls("relative z-1 text-9xl md:text-7xl font-medium", shouldUseLightText ? "text-background" : "text-foreground", valueClassName)}>
+                {metric.value}
+            </div>
+            <p className={cls("relative z-1 text-xl", shouldUseLightText ? "text-background" : "text-foreground", metricDescriptionClassName)}>
+                {metric.description}
+            </p>
+        </div>
+    );
+});
+
+MetricCardItem.displayName = "MetricCardItem";
+
+const MetricCardTwo = ({
+    metrics,
+    carouselMode = "buttons",
+    gridVariant,
+    uniformGridCustomHeightClasses,
+    animationType,
+    containerStyle,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    buttons,
+    textboxLayout,
+    useInvertedBackground,
+    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 =
+        containerStyle === "card"
+            ? shouldUseInvertedText("invertDefault", theme.cardStyle) || shouldUseInvertedText("invertCard", theme.cardStyle)
+            : shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    return (
+        <CardStack
+            useInvertedBackground={useInvertedBackground}
+            mode={carouselMode}
+            gridVariant={gridVariant}
+            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+            animationType={animationType}
+            containerStyle={containerStyle}
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            buttons={buttons}
+            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}
+                    metricDescriptionClassName={metricDescriptionClassName}
+                />
+            ))}
+        </CardStack>
+    );
+};
+
+MetricCardTwo.displayName = "MetricCardTwo";
+
+export default memo(MetricCardTwo);
diff --git a/src/components/sections/pricing/PricingCardEight.tsx b/src/components/sections/pricing/PricingCardEight.tsx
new file mode 100644
index 0000000..460f1d8
--- /dev/null
+++ b/src/components/sections/pricing/PricingCardEight.tsx
@@ -0,0 +1,247 @@
+"use client";
+
+import React, { memo } from "react";
+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, ContainerStyle, TitleSegment } 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;
+    containerStyle: ContainerStyle;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    buttons?: ButtonConfig[];
+    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 = memo(({
+    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={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>
+
+            <div className="p-3 pt-0" >
+                <PricingFeatureList
+                    features={plan.features}
+                    shouldUseLightText={shouldUseLightText}
+                    className={cls("mt-1", featuresClassName)}
+                    featureItemClassName={featureItemClassName}
+                />
+            </div>
+        </div>
+    );
+});
+
+PricingCardItem.displayName = "PricingCardItem";
+
+const PricingCardEight = ({
+    plans,
+    carouselMode = "buttons",
+    uniformGridCustomHeightClasses,
+    animationType,
+    containerStyle,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    buttons,
+    textboxLayout,
+    useInvertedBackground,
+    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 =
+        containerStyle === "card"
+            ? shouldUseInvertedText("invertDefault", theme.cardStyle) || shouldUseInvertedText("invertCard", theme.cardStyle)
+            : shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    return (
+        <CardStack
+            useInvertedBackground={useInvertedBackground}
+            mode={carouselMode}
+            gridVariant="uniform-all-items-equal"
+            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+            animationType={animationType}
+            containerStyle={containerStyle}
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            buttons={buttons}
+            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>
+    );
+};
+
+PricingCardEight.displayName = "PricingCardEight";
+
+export default memo(PricingCardEight);
diff --git a/src/components/sections/pricing/PricingCardFive.tsx b/src/components/sections/pricing/PricingCardFive.tsx
new file mode 100644
index 0000000..fa1aa2a
--- /dev/null
+++ b/src/components/sections/pricing/PricingCardFive.tsx
@@ -0,0 +1,239 @@
+"use client";
+
+import React, { memo } from "react";
+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, 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;
+    variant: "card" | "border";
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    buttons?: ButtonConfig[];
+    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,
+    variant,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    buttons,
+    textboxLayout,
+    useInvertedBackground,
+    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}
+            buttons={buttons}
+            textboxLayout={textboxLayout}
+            animationType={animationType}
+            variant={variant}
+            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",
+                        variant === "card" ? "p-6 md:p-15" : "pb-6 md:pb-10",
+                        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",
+                                    variant === "border"
+                                        ? (useInvertedBackground !== "noInvert" ? "text-background" : "text-foreground")
+                                        : (shouldUseLightText ? "text-background" : "text-foreground"),
+                                    planPriceClassName
+                                )}>
+                                    {plan.price}
+                                </span>
+                                <span className={cls(
+                                    "text-xl",
+                                    variant === "border"
+                                        ? (useInvertedBackground !== "noInvert" ? "text-background" : "text-foreground")
+                                        : (shouldUseLightText ? "text-background" : "text-foreground"),
+                                    planPeriodClassName
+                                )}>
+                                    {plan.period}
+                                </span>
+                            </div>
+                            <p className={cls(
+                                "text-2xl leading-tight text-balance",
+                                variant === "border"
+                                    ? (useInvertedBackground !== "noInvert" ? "text-background" : "text-foreground")
+                                    : (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>
+
+                    {variant === "card" && <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",
+                            variant === "border"
+                                ? (useInvertedBackground !== "noInvert" ? "text-background" : "text-foreground")
+                                : (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-full primary-button flex items-center justify-center", featureIconClassName)}>
+                                        <Check className="h-4/10 w-4/10 text-background" strokeWidth={2.5} />
+                                    </div>
+                                    <span className={cls(
+                                        "text-sm leading-[1.4]",
+                                        variant === "border"
+                                            ? (useInvertedBackground !== "noInvert" ? "text-background/80" : "text-foreground/80")
+                                            : (shouldUseLightText ? "text-background/80" : "text-foreground/80"),
+                                        featureTextClassName
+                                    )}>
+                                        {feature}
+                                    </span>
+                                </li>
+                            ))}
+                        </ul>
+                    </div>
+                </div>
+            ))}
+        </CardList>
+    );
+};
+
+PricingCardFive.displayName = "PricingCardFive";
+
+export default memo(PricingCardFive);
diff --git a/src/components/sections/pricing/PricingCardFour.tsx b/src/components/sections/pricing/PricingCardFour.tsx
new file mode 100644
index 0000000..635acad
--- /dev/null
+++ b/src/components/sections/pricing/PricingCardFour.tsx
@@ -0,0 +1,239 @@
+"use client";
+
+import React, { memo, useState } from "react";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { ArrowRight } from "lucide-react";
+import Tag from "@/components/shared/Tag";
+import SelectorButton from "@/components/button/SelectorButton";
+import AnimationContainer from "@/components/sections/AnimationContainer";
+import { useCardAnimation } from "@/components/cardStack/hooks/useCardAnimation";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { LucideIcon } from "lucide-react";
+import type { InvertedBackground } from "@/providers/themeProvider/config/constants";
+import type { CardAnimationType } from "@/components/cardStack/types";
+
+interface CtaCard {
+  title: string;
+  description: string;
+  href?: string;
+  onClick?: () => void;
+}
+
+interface PricingPlan {
+  id: string;
+  name: string;
+  price: string;
+  subtitle: string;
+  features: string[];
+}
+
+interface PricingCardFourProps {
+  title: string;
+  tag: string;
+  tagIcon?: LucideIcon;
+  ctaCards: [CtaCard, CtaCard];
+  plans: PricingPlan[];
+  useInvertedBackground: InvertedBackground;
+  animationType: CardAnimationType;
+  featuresTitle?: string;
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  leftPanelClassName?: string;
+  rightPanelClassName?: string;
+  tagClassName?: string;
+  titleClassName?: string;
+  ctaCardClassName?: string;
+  ctaCardTitleClassName?: string;
+  ctaCardDescriptionClassName?: string;
+  planSelectorClassName?: string;
+  priceClassName?: string;
+  subtitleClassName?: string;
+  featuresTitleClassName?: string;
+  featuresGridClassName?: string;
+  featureItemClassName?: string;
+}
+
+const PricingCardFour = ({
+  title,
+  tag,
+  tagIcon: TagIcon,
+  ctaCards,
+  plans,
+  useInvertedBackground,
+  animationType,
+  featuresTitle = "What's included",
+  ariaLabel = "Pricing section",
+  className = "",
+  containerClassName = "",
+  leftPanelClassName = "",
+  rightPanelClassName = "",
+  tagClassName = "",
+  titleClassName = "",
+  ctaCardClassName = "",
+  ctaCardTitleClassName = "",
+  ctaCardDescriptionClassName = "",
+  planSelectorClassName = "",
+  priceClassName = "",
+  subtitleClassName = "",
+  featuresTitleClassName = "",
+  featuresGridClassName = "",
+  featureItemClassName = "",
+}: PricingCardFourProps) => {
+  const [activePlanIndex, setActivePlanIndex] = useState(0);
+  const activePlan = plans[activePlanIndex];
+  const theme = useTheme();
+  const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+  const { itemRefs } = useCardAnimation({ animationType, itemCount: 2 });
+
+  const handleCtaClick = (ctaCard: CtaCard) => {
+    if (ctaCard.onClick) {
+      ctaCard.onClick();
+    }
+    if (ctaCard.href) {
+      window.location.href = ctaCard.href;
+    }
+  };
+
+  return (
+    <section
+      aria-label={ariaLabel}
+      className={cls(
+        "relative py-20",
+        useInvertedBackground === "invertCard"
+          ? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground"
+          : "w-full",
+        useInvertedBackground === "invertDefault" && "bg-foreground",
+        className
+      )}
+    >
+      <div className={cls("w-content-width mx-auto", containerClassName)}>
+        <div className="grid grid-cols-1 md:grid-cols-12 gap-6 md:gap-8">
+          <div
+            ref={(el) => { itemRefs.current[0] = el; }}
+            className={cls(
+              "md:col-span-5 card rounded-theme-capped p-6 md:p-8 flex flex-col gap-4",
+              leftPanelClassName
+            )}
+          >
+            <Tag
+              text={tag}
+              icon={TagIcon}
+              useInvertedBackground={useInvertedBackground}
+              className={tagClassName}
+            />
+
+            <h2 className={cls(
+              "text-4xl md:text-5xl font-medium",
+              shouldUseLightText ? "text-background" : "text-foreground",
+              titleClassName
+            )}>
+              {title}
+            </h2>
+
+            <div className="flex flex-col gap-4">
+              {ctaCards.map((ctaCard, index) => (
+                <button
+                  key={index}
+                  onClick={() => handleCtaClick(ctaCard)}
+                  className={cls(
+                    "w-full p-4 md:p-5 primary-button rounded-theme text-left flex items-center justify-between gap-4",
+                    ctaCardClassName
+                  )}
+                >
+                  <div className="flex flex-col gap-0">
+                    <span className={cls("text-base md:text-xl font-medium text-background line-clamp-1", ctaCardTitleClassName)}>
+                      {ctaCard.title}
+                    </span>
+                    <span className={cls("text-sm text-background/60 line-clamp-1", ctaCardDescriptionClassName)}>
+                      {ctaCard.description}
+                    </span>
+                  </div>
+                  <ArrowRight className="h-[var(--text-base)] w-auto shrink-0 text-background/60" />
+                </button>
+              ))}
+            </div>
+          </div>
+
+          <div
+            ref={(el) => { itemRefs.current[1] = el; }}
+            className={cls(
+              "md:col-span-7 card rounded-theme-capped p-6 md:p-8 flex flex-col gap-4",
+              rightPanelClassName
+            )}
+          >
+            <SelectorButton
+              options={plans.map((plan) => ({
+                value: plan.id,
+                label: plan.name,
+              }))}
+              activeValue={activePlan.id}
+              onValueChange={(value) => {
+                const index = plans.findIndex((p) => p.id === value);
+                if (index !== -1) setActivePlanIndex(index);
+              }}
+              wrapperClassName={planSelectorClassName}
+            />
+
+            <AnimationContainer
+              key={activePlan.id}
+              className="flex flex-col gap-4"
+              animationType="fade"
+            >
+              <div className="flex flex-col gap-2">
+                <h3 className={cls(
+                  "text-4xl md:text-5xl font-medium",
+                  shouldUseLightText ? "text-background" : "text-foreground",
+                  priceClassName
+                )}>
+                  {activePlan.price}
+                </h3>
+                <p className={cls(
+                  "text-base",
+                  shouldUseLightText ? "text-background/70" : "text-foreground/70",
+                  subtitleClassName
+                )}>
+                  {activePlan.subtitle}
+                </p>
+              </div>
+
+              <div className={cls("w-full h-px", shouldUseLightText ? "bg-background/10" : "bg-foreground/10")} />
+
+              <div className="flex flex-col gap-4">
+                <h4 className={cls(
+                  "text-lg font-medium",
+                  shouldUseLightText ? "text-background" : "text-foreground",
+                  featuresTitleClassName
+                )}>
+                  {featuresTitle}
+                </h4>
+
+                <div className={cls(
+                  "grid grid-cols-1 md:grid-cols-2 gap-3",
+                  featuresGridClassName
+                )}>
+                  {activePlan.features.map((feature, index) => (
+                    <div
+                      key={index}
+                      className={cls(
+                        "flex items-start gap-2",
+                        featureItemClassName
+                      )}
+                    >
+                      <span className={cls("h-1.5 w-1.5 rounded-full mt-2 shrink-0", shouldUseLightText ? "bg-background" : "bg-foreground")} />
+                      <span className={cls("text-base", shouldUseLightText ? "text-background" : "text-foreground")}>{feature}</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </AnimationContainer>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+PricingCardFour.displayName = "PricingCardFour";
+
+export default memo(PricingCardFour);
diff --git a/src/components/sections/pricing/PricingCardNine.tsx b/src/components/sections/pricing/PricingCardNine.tsx
new file mode 100644
index 0000000..cb4f7e7
--- /dev/null
+++ b/src/components/sections/pricing/PricingCardNine.tsx
@@ -0,0 +1,214 @@
+"use client";
+
+import React, { memo } from "react";
+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 } 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;
+    imageAlt?: string;
+};
+
+interface PricingCardNineProps {
+    plans: PricingPlan[];
+    animationType: CardAnimationType;
+    variant: "card" | "border";
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    buttons?: ButtonConfig[];
+    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,
+    variant,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    buttons,
+    textboxLayout,
+    useInvertedBackground,
+    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}
+            buttons={buttons}
+            textboxLayout={textboxLayout}
+            animationType={animationType}
+            variant={variant}
+            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",
+                        variant === "card" ? "p-4 md:p-6" : "pb-0",
+                        cardContentClassName
+                    )}
+                >
+                    <div className={cls("w-full md:w-1/2 min-w-0 aspect-square md:aspect-[4/3]", planImageWrapperClassName)}>
+                        <MediaContent
+                            imageSrc={plan.imageSrc}
+                            imageAlt={plan.imageAlt || 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",
+                                variant === "border"
+                                    ? (useInvertedBackground !== "noInvert" ? "text-background" : "text-foreground")
+                                    : (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-full primary-button flex items-center justify-center", featureIconClassName)}>
+                                            <Check className="h-4/10 w-4/10 text-background" strokeWidth={2.5} />
+                                        </div>
+                                        <span className={cls(
+                                            "text-sm leading-[1.4]",
+                                            variant === "border"
+                                                ? (useInvertedBackground !== "noInvert" ? "text-background/80" : "text-foreground/80")
+                                                : (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>
+    );
+};
+
+PricingCardNine.displayName = "PricingCardNine";
+
+export default memo(PricingCardNine);
diff --git a/src/components/sections/pricing/PricingCardOne.tsx b/src/components/sections/pricing/PricingCardOne.tsx
new file mode 100644
index 0000000..4899411
--- /dev/null
+++ b/src/components/sections/pricing/PricingCardOne.tsx
@@ -0,0 +1,204 @@
+"use client";
+
+import React, { memo } from "react";
+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, CardAnimationType, ContainerStyle, TitleSegment } 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: CardAnimationType;
+    containerStyle: ContainerStyle;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    buttons?: ButtonConfig[];
+    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 = memo(({
+    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>
+    );
+});
+
+PricingCardItem.displayName = "PricingCardItem";
+
+const PricingCardOne = ({
+    plans,
+    carouselMode = "buttons",
+    uniformGridCustomHeightClasses,
+    animationType,
+    containerStyle,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    buttons,
+    textboxLayout,
+    useInvertedBackground,
+    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 =
+        containerStyle === "card"
+            ? shouldUseInvertedText("invertDefault", theme.cardStyle) || shouldUseInvertedText("invertCard", theme.cardStyle)
+            : shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    return (
+        <CardStack
+            useInvertedBackground={useInvertedBackground}
+            mode={carouselMode}
+            gridVariant="uniform-all-items-equal"
+            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+            animationType={animationType}
+            containerStyle={containerStyle}
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            buttons={buttons}
+            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>
+    );
+};
+
+PricingCardOne.displayName = "PricingCardOne";
+
+export default memo(PricingCardOne);
diff --git a/src/components/sections/pricing/PricingCardSeven.tsx b/src/components/sections/pricing/PricingCardSeven.tsx
new file mode 100644
index 0000000..48c3c25
--- /dev/null
+++ b/src/components/sections/pricing/PricingCardSeven.tsx
@@ -0,0 +1,280 @@
+"use client";
+
+import React, { memo, useState } from "react";
+import CardStack from "@/components/cardStack/CardStack";
+import Tag from "@/components/shared/Tag";
+import SelectorButton from "@/components/button/SelectorButton";
+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, ContainerStyle, TitleSegment } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type PricingOption = {
+    value: string;
+    label: string;
+    price: string;
+    subtitle: string;
+};
+
+type PricingPlan = {
+    id: string;
+    tag: string;
+    tagIcon?: LucideIcon;
+    pricingOptions: PricingOption[];
+    defaultOption?: string;
+    selectorNote?: string;
+    description: string;
+    buttons: ButtonConfig[];
+};
+
+interface PricingCardSevenProps {
+    plans: PricingPlan[];
+    carouselMode?: "auto" | "buttons";
+    uniformGridCustomHeightClasses?: string;
+    animationType: CardAnimationType;
+    containerStyle: ContainerStyle;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    buttons?: ButtonConfig[];
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    cardClassName?: string;
+    textBoxTitleClassName?: string;
+    textBoxTitleImageWrapperClassName?: string;
+    textBoxTitleImageClassName?: string;
+    textBoxDescriptionClassName?: string;
+    planTagClassName?: string;
+    priceClassName?: string;
+    subtitleClassName?: string;
+    selectorClassName?: string;
+    selectorNoteClassName?: string;
+    planDescriptionClassName?: string;
+    planButtonContainerClassName?: string;
+    planButtonClassName?: string;
+    gridClassName?: string;
+    carouselClassName?: string;
+    controlsClassName?: string;
+    textBoxClassName?: string;
+    textBoxTagClassName?: string;
+    textBoxButtonContainerClassName?: string;
+    textBoxButtonClassName?: string;
+    textBoxButtonTextClassName?: string;
+}
+
+interface PricingCardItemProps {
+    plan: PricingPlan;
+    shouldUseLightText: boolean;
+    useInvertedBackground: InvertedBackground;
+    cardClassName?: string;
+    planTagClassName?: string;
+    priceClassName?: string;
+    subtitleClassName?: string;
+    selectorClassName?: string;
+    selectorNoteClassName?: string;
+    planDescriptionClassName?: string;
+    planButtonContainerClassName?: string;
+    planButtonClassName?: string;
+}
+
+const PricingCardItem = memo(({
+    plan,
+    shouldUseLightText,
+    useInvertedBackground,
+    cardClassName = "",
+    planTagClassName = "",
+    priceClassName = "",
+    subtitleClassName = "",
+    selectorClassName = "",
+    selectorNoteClassName = "",
+    planDescriptionClassName = "",
+    planButtonContainerClassName = "",
+    planButtonClassName = "",
+}: PricingCardItemProps) => {
+    const theme = useTheme();
+    const [activeOption, setActiveOption] = useState(plan.defaultOption || plan.pricingOptions[0]?.value || "");
+
+    const currentPricing = plan.pricingOptions.find(opt => opt.value === activeOption) || plan.pricingOptions[0];
+
+    const getButtonConfigProps = () => {
+        if (theme.defaultButtonVariant === "hover-bubble") {
+            return { bgClassName: "w-full" };
+        }
+        if (theme.defaultButtonVariant === "icon-arrow") {
+            return { className: "justify-between" };
+        }
+        return {};
+    };
+
+    const selectorOptions = plan.pricingOptions.map(opt => ({
+        value: opt.value,
+        label: opt.label,
+    }));
+
+    return (
+        <div className={cls("relative h-full card text-foreground rounded-theme-capped p-6 flex flex-col items-center gap-8 text-center", cardClassName)}>
+            <Tag
+                text={plan.tag}
+                icon={plan.tagIcon}
+                useInvertedBackground={useInvertedBackground}
+                className={planTagClassName}
+            />
+
+            <div className="relative z-1 flex flex-col items-center gap-0">
+                <div className={cls("text-5xl md:text-6xl font-medium", shouldUseLightText ? "text-background" : "text-foreground", priceClassName)}>
+                    {currentPricing?.price}
+                </div>
+
+                <p className={cls("text-sm leading-tight", shouldUseLightText ? "text-background/75" : "text-foreground/75", subtitleClassName)}>
+                    {currentPricing?.subtitle}
+                </p>
+            </div>
+
+            <div className="relative z-1 flex flex-col items-center gap-2">
+                <SelectorButton
+                    options={selectorOptions}
+                    activeValue={activeOption}
+                    onValueChange={setActiveOption}
+                    className={selectorClassName}
+                />
+
+                {plan.selectorNote && (
+                    <p className={cls("text-sm", shouldUseLightText ? "text-background/75" : "text-foreground/75", selectorNoteClassName)}>
+                        {plan.selectorNote}
+                    </p>
+                )}
+            </div>
+
+            <p className={cls("relative z-1 text-sm text-balance leading-tight", shouldUseLightText ? "text-background/75" : "text-foreground/75", planDescriptionClassName)}>
+                {plan.description}
+            </p>
+
+            {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>
+    );
+});
+
+PricingCardItem.displayName = "PricingCardItem";
+
+const PricingCardSeven = ({
+    plans,
+    carouselMode = "buttons",
+    uniformGridCustomHeightClasses,
+    animationType,
+    containerStyle,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    buttons,
+    textboxLayout,
+    useInvertedBackground,
+    ariaLabel = "Pricing section",
+    className = "",
+    containerClassName = "",
+    cardClassName = "",
+    textBoxTitleClassName = "",
+    textBoxTitleImageWrapperClassName = "",
+    textBoxTitleImageClassName = "",
+    textBoxDescriptionClassName = "",
+    planTagClassName = "",
+    priceClassName = "",
+    subtitleClassName = "",
+    selectorClassName = "",
+    selectorNoteClassName = "",
+    planDescriptionClassName = "",
+    planButtonContainerClassName = "",
+    planButtonClassName = "",
+    gridClassName = "",
+    carouselClassName = "",
+    controlsClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+}: PricingCardSevenProps) => {
+    const theme = useTheme();
+    const shouldUseLightText =
+        containerStyle === "card"
+            ? shouldUseInvertedText("invertDefault", theme.cardStyle) || shouldUseInvertedText("invertCard", theme.cardStyle)
+            : shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    return (
+        <CardStack
+            useInvertedBackground={useInvertedBackground}
+            mode={carouselMode}
+            gridVariant="uniform-all-items-equal"
+            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+            animationType={animationType}
+            containerStyle={containerStyle}
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            buttons={buttons}
+            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}
+                    useInvertedBackground={useInvertedBackground}
+                    cardClassName={cardClassName}
+                    planTagClassName={planTagClassName}
+                    priceClassName={priceClassName}
+                    subtitleClassName={subtitleClassName}
+                    selectorClassName={selectorClassName}
+                    selectorNoteClassName={selectorNoteClassName}
+                    planDescriptionClassName={planDescriptionClassName}
+                    planButtonContainerClassName={planButtonContainerClassName}
+                    planButtonClassName={planButtonClassName}
+                />
+            ))}
+        </CardStack>
+    );
+};
+
+PricingCardSeven.displayName = "PricingCardSeven";
+
+export default memo(PricingCardSeven);
diff --git a/src/components/sections/pricing/PricingCardSix.tsx b/src/components/sections/pricing/PricingCardSix.tsx
new file mode 100644
index 0000000..d5beb80
--- /dev/null
+++ b/src/components/sections/pricing/PricingCardSix.tsx
@@ -0,0 +1,256 @@
+"use client";
+
+import React, { memo } from "react";
+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, ContainerStyle, TitleSegment } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type PricingPlan = {
+    id: string;
+    price: string;
+    subtitle: string;
+    features: string[];
+    buttons: ButtonConfig[];
+    bottomNotes?: string[];
+};
+
+interface PricingCardSixProps {
+    plans: PricingPlan[];
+    carouselMode?: "auto" | "buttons";
+    uniformGridCustomHeightClasses?: string;
+    animationType: CardAnimationType;
+    containerStyle: ContainerStyle;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    buttons?: ButtonConfig[];
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    cardClassName?: string;
+    textBoxTitleClassName?: string;
+    textBoxTitleImageWrapperClassName?: string;
+    textBoxTitleImageClassName?: string;
+    textBoxDescriptionClassName?: string;
+    priceClassName?: string;
+    subtitleClassName?: string;
+    featuresClassName?: string;
+    featureItemClassName?: string;
+    planButtonContainerClassName?: string;
+    planButtonClassName?: string;
+    bottomNotesContainerClassName?: string;
+    bottomNoteClassName?: 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;
+    priceClassName?: string;
+    subtitleClassName?: string;
+    featuresClassName?: string;
+    featureItemClassName?: string;
+    planButtonContainerClassName?: string;
+    planButtonClassName?: string;
+    bottomNotesContainerClassName?: string;
+    bottomNoteClassName?: string;
+}
+
+const PricingCardItem = memo(({
+    plan,
+    shouldUseLightText,
+    cardClassName = "",
+    priceClassName = "",
+    subtitleClassName = "",
+    featuresClassName = "",
+    featureItemClassName = "",
+    planButtonContainerClassName = "",
+    planButtonClassName = "",
+    bottomNotesContainerClassName = "",
+    bottomNoteClassName = "",
+}: 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 gap-10 justify-between", cardClassName)}>
+            <div className="relative z-1 flex flex-col gap-2">
+                <div className={cls("text-4xl md:text-5xl font-medium", shouldUseLightText ? "text-background" : "text-foreground", priceClassName)}>
+                    {plan.price}
+                </div>
+
+                <p className={cls("text-base leading-tight line-clamp-2", shouldUseLightText ? "text-background/75" : "text-foreground/75", subtitleClassName)}>
+                    {plan.subtitle}
+                </p>
+            </div>
+
+            <PricingFeatureList
+                features={plan.features}
+                shouldUseLightText={shouldUseLightText}
+                className={featuresClassName}
+                featureItemClassName={featureItemClassName}
+            />
+
+            <div className="flex flex-col gap-3">
+                {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>
+                )}
+
+                {plan.bottomNotes && plan.bottomNotes.length > 0 && (
+                    <div className={cls("relative z-1 flex flex-wrap items-center gap-x-4 gap-y-2", bottomNotesContainerClassName)}>
+                        {plan.bottomNotes.map((note, index) => (
+                            <div
+                                key={index}
+                                className={cls("flex items-center gap-2 text-sm", shouldUseLightText ? "text-background/75" : "text-foreground/75", bottomNoteClassName)}
+                            >
+                                <span>•</span>
+                                <span>{note}</span>
+                            </div>
+                        ))}
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+});
+
+PricingCardItem.displayName = "PricingCardItem";
+
+const PricingCardSix = ({
+    plans,
+    carouselMode = "buttons",
+    uniformGridCustomHeightClasses,
+    animationType,
+    containerStyle,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    buttons,
+    textboxLayout,
+    useInvertedBackground,
+    ariaLabel = "Pricing section",
+    className = "",
+    containerClassName = "",
+    cardClassName = "",
+    textBoxTitleClassName = "",
+    textBoxTitleImageWrapperClassName = "",
+    textBoxTitleImageClassName = "",
+    textBoxDescriptionClassName = "",
+    priceClassName = "",
+    subtitleClassName = "",
+    featuresClassName = "",
+    featureItemClassName = "",
+    planButtonContainerClassName = "",
+    planButtonClassName = "",
+    bottomNotesContainerClassName = "",
+    bottomNoteClassName = "",
+    gridClassName = "",
+    carouselClassName = "",
+    controlsClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+}: PricingCardSixProps) => {
+    const theme = useTheme();
+    const shouldUseLightText =
+        containerStyle === "card"
+            ? shouldUseInvertedText("invertDefault", theme.cardStyle) || shouldUseInvertedText("invertCard", theme.cardStyle)
+            : shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    return (
+        <CardStack
+            useInvertedBackground={useInvertedBackground}
+            mode={carouselMode}
+            gridVariant="uniform-all-items-equal"
+            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+            animationType={animationType}
+            containerStyle={containerStyle}
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            buttons={buttons}
+            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}
+                    priceClassName={priceClassName}
+                    subtitleClassName={subtitleClassName}
+                    featuresClassName={featuresClassName}
+                    featureItemClassName={featureItemClassName}
+                    planButtonContainerClassName={planButtonContainerClassName}
+                    planButtonClassName={planButtonClassName}
+                    bottomNotesContainerClassName={bottomNotesContainerClassName}
+                    bottomNoteClassName={bottomNoteClassName}
+                />
+            ))}
+        </CardStack>
+    );
+};
+
+PricingCardSix.displayName = "PricingCardSix";
+
+export default memo(PricingCardSix);
diff --git a/src/components/sections/pricing/PricingCardThree.tsx b/src/components/sections/pricing/PricingCardThree.tsx
new file mode 100644
index 0000000..6c0090d
--- /dev/null
+++ b/src/components/sections/pricing/PricingCardThree.tsx
@@ -0,0 +1,245 @@
+"use client";
+
+import React, { memo } from "react";
+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, ContainerStyle, TitleSegment } 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;
+    containerStyle: ContainerStyle;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    buttons?: ButtonConfig[];
+    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 = memo(({
+    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-background 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 items-center gap-6 md:gap-8", plan.badge ? "rounded-t-none rounded-b-theme-capped" : "rounded-theme-capped", cardClassName)}>
+
+                <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}
+                />
+
+                {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>
+    );
+});
+
+PricingCardItem.displayName = "PricingCardItem";
+
+const PricingCardThree = ({
+    plans,
+    carouselMode = "buttons",
+    uniformGridCustomHeightClasses,
+    animationType,
+    containerStyle,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    buttons,
+    textboxLayout,
+    useInvertedBackground,
+    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 =
+        containerStyle === "card"
+            ? shouldUseInvertedText("invertDefault", theme.cardStyle) || shouldUseInvertedText("invertCard", theme.cardStyle)
+            : shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    return (
+        <CardStack
+            useInvertedBackground={useInvertedBackground}
+            mode={carouselMode}
+            gridVariant="uniform-all-items-equal"
+            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+            animationType={animationType}
+            containerStyle={containerStyle}
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            buttons={buttons}
+            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>
+    );
+};
+
+PricingCardThree.displayName = "PricingCardThree";
+
+export default memo(PricingCardThree);
diff --git a/src/components/sections/pricing/PricingCardTwo.tsx b/src/components/sections/pricing/PricingCardTwo.tsx
new file mode 100644
index 0000000..d49e0f3
--- /dev/null
+++ b/src/components/sections/pricing/PricingCardTwo.tsx
@@ -0,0 +1,245 @@
+"use client";
+
+import React, { memo } from "react";
+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, ContainerStyle, TitleSegment } 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;
+    containerStyle: ContainerStyle;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    buttons?: ButtonConfig[];
+    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 = memo(({
+    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>
+    );
+});
+
+PricingCardItem.displayName = "PricingCardItem";
+
+const PricingCardTwo = ({
+    plans,
+    carouselMode = "buttons",
+    uniformGridCustomHeightClasses,
+    animationType,
+    containerStyle,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    buttons,
+    textboxLayout,
+    useInvertedBackground,
+    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 =
+        containerStyle === "card"
+            ? shouldUseInvertedText("invertDefault", theme.cardStyle) || shouldUseInvertedText("invertCard", theme.cardStyle)
+            : shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    return (
+        <CardStack
+            useInvertedBackground={useInvertedBackground}
+            mode={carouselMode}
+            gridVariant="uniform-all-items-equal"
+            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+            animationType={animationType}
+            containerStyle={containerStyle}
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            buttons={buttons}
+            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>
+    );
+};
+
+PricingCardTwo.displayName = "PricingCardTwo";
+
+export default memo(PricingCardTwo);
diff --git a/src/components/sections/product/ProductCardFive.tsx b/src/components/sections/product/ProductCardFive.tsx
new file mode 100644
index 0000000..9296adf
--- /dev/null
+++ b/src/components/sections/product/ProductCardFive.tsx
@@ -0,0 +1,194 @@
+"use client";
+
+import { memo } from "react";
+import CardStack from "@/components/cardStack/CardStack";
+import ProductImage from "@/components/shared/ProductImage";
+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, GridVariant, CardAnimationType, ContainerStyle, TitleSegment } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type ProductCard = {
+    id: string;
+    button: ButtonConfig;
+    imageSrc: string;
+    imageAlt?: string;
+    onFavorite?: () => void;
+    isFavorited?: boolean;
+};
+
+interface ProductCardFiveProps {
+    products: ProductCard[];
+    carouselMode?: "auto" | "buttons";
+    gridVariant: GridVariant;
+    uniformGridCustomHeightClasses?: string;
+    animationType: CardAnimationType;
+    containerStyle: ContainerStyle;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    buttons?: ButtonConfig[];
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    cardClassName?: string;
+    imageClassName?: string;
+    textBoxTitleClassName?: string;
+    textBoxTitleImageWrapperClassName?: string;
+    textBoxTitleImageClassName?: string;
+    textBoxDescriptionClassName?: string;
+    cardButtonClassName?: string;
+    gridClassName?: string;
+    carouselClassName?: string;
+    controlsClassName?: string;
+    textBoxClassName?: string;
+    textBoxTagClassName?: string;
+    textBoxButtonContainerClassName?: string;
+    textBoxButtonClassName?: string;
+    textBoxButtonTextClassName?: string;
+}
+
+interface ProductCardItemProps {
+    product: ProductCard;
+    cardClassName?: string;
+    imageClassName?: string;
+    cardButtonClassName?: string;
+    index: number;
+}
+
+const ProductCardItem = memo(({
+    product,
+    cardClassName = "",
+    imageClassName = "",
+    cardButtonClassName = "",
+    index,
+}: ProductCardItemProps) => {
+    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("group relative h-full flex flex-col", cardClassName)}
+            role="article"
+            aria-label={product.button.text}
+        >
+            <ProductImage
+                imageSrc={product.imageSrc}
+                imageAlt={product.imageAlt || product.button.text}
+                isFavorited={product.isFavorited}
+                onFavoriteToggle={product.onFavorite}
+                imageClassName={imageClassName}
+            />
+
+            <Button
+                {...getButtonProps(
+                    { ...product.button, props: { ...product.button.props, ...getButtonConfigProps() } },
+                    index,
+                    theme.defaultButtonVariant,
+                    cls("w-full", cardButtonClassName)
+                )}
+            />
+        </article>
+    );
+});
+
+ProductCardItem.displayName = "ProductCardItem";
+
+const ProductCardFive = ({
+    products,
+    carouselMode = "buttons",
+    gridVariant,
+    uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",
+    animationType,
+    containerStyle,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    buttons,
+    textboxLayout,
+    useInvertedBackground,
+    ariaLabel = "Product section",
+    className = "",
+    containerClassName = "",
+    cardClassName = "",
+    imageClassName = "",
+    textBoxTitleClassName = "",
+    textBoxTitleImageWrapperClassName = "",
+    textBoxTitleImageClassName = "",
+    textBoxDescriptionClassName = "",
+    cardButtonClassName = "",
+    gridClassName = "",
+    carouselClassName = "",
+    controlsClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+}: ProductCardFiveProps) => {
+    return (
+        <CardStack
+            mode={carouselMode}
+            gridVariant={gridVariant}
+            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+            animationType={animationType}
+            containerStyle={containerStyle}
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            buttons={buttons}
+            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}
+                    cardClassName={cardClassName}
+                    imageClassName={imageClassName}
+                    cardButtonClassName={cardButtonClassName}
+                    index={index}
+                />
+            ))}
+        </CardStack>
+    );
+};
+
+ProductCardFive.displayName = "ProductCardFive";
+
+export default memo(ProductCardFive);
diff --git a/src/components/sections/product/ProductCardFour.tsx b/src/components/sections/product/ProductCardFour.tsx
new file mode 100644
index 0000000..3114f94
--- /dev/null
+++ b/src/components/sections/product/ProductCardFour.tsx
@@ -0,0 +1,207 @@
+"use client";
+
+import { memo } from "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 type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, GridVariant, CardAnimationType, ContainerStyle, TitleSegment } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type ProductCard = {
+  id: string;
+  name: string;
+  price: string;
+  variant: string;
+  imageSrc: string;
+  imageAlt?: string;
+  onFavorite?: () => void;
+  onProductClick?: () => void;
+  isFavorited?: boolean;
+};
+
+interface ProductCardFourProps {
+  products: ProductCard[];
+  carouselMode?: "auto" | "buttons";
+  gridVariant: GridVariant;
+  uniformGridCustomHeightClasses?: string;
+  animationType: CardAnimationType;
+  containerStyle: ContainerStyle;
+  title: string;
+  titleSegments?: TitleSegment[];
+  description: string;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  buttons?: ButtonConfig[];
+  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;
+  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;
+}
+
+const ProductCardItem = memo(({
+  product,
+  shouldUseLightText,
+  cardClassName = "",
+  imageClassName = "",
+  cardNameClassName = "",
+  cardPriceClassName = "",
+  cardVariantClassName = "",
+}: 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="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>
+  );
+});
+
+ProductCardItem.displayName = "ProductCardItem";
+
+const ProductCardFour = ({
+  products,
+  carouselMode = "buttons",
+  gridVariant,
+  uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",
+  animationType,
+  containerStyle,
+  title,
+  titleSegments,
+  description,
+  tag,
+  tagIcon,
+  buttons,
+  textboxLayout,
+  useInvertedBackground,
+  ariaLabel = "Product section",
+  className = "",
+  containerClassName = "",
+  cardClassName = "",
+  imageClassName = "",
+  textBoxTitleClassName = "",
+  textBoxTitleImageWrapperClassName = "",
+  textBoxTitleImageClassName = "",
+  textBoxDescriptionClassName = "",
+  cardNameClassName = "",
+  cardPriceClassName = "",
+  cardVariantClassName = "",
+  gridClassName = "",
+  carouselClassName = "",
+  controlsClassName = "",
+  textBoxClassName = "",
+  textBoxTagClassName = "",
+  textBoxButtonContainerClassName = "",
+  textBoxButtonClassName = "",
+  textBoxButtonTextClassName = "",
+}: ProductCardFourProps) => {
+  const theme = useTheme();
+  const shouldUseLightText =
+    containerStyle === "card"
+      ? shouldUseInvertedText("invertDefault", theme.cardStyle) || shouldUseInvertedText("invertCard", theme.cardStyle)
+      : shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+  return (
+    <CardStack
+      mode={carouselMode}
+      gridVariant={gridVariant}
+      uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+      animationType={animationType}
+      containerStyle={containerStyle}
+      title={title}
+      titleSegments={titleSegments}
+      description={description}
+      tag={tag}
+      tagIcon={tagIcon}
+      buttons={buttons}
+      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}
+          shouldUseLightText={shouldUseLightText}
+          cardClassName={cardClassName}
+          imageClassName={imageClassName}
+          cardNameClassName={cardNameClassName}
+          cardPriceClassName={cardPriceClassName}
+          cardVariantClassName={cardVariantClassName}
+        />
+      ))}
+    </CardStack>
+  );
+};
+
+ProductCardFour.displayName = "ProductCardFour";
+
+export default memo(ProductCardFour);
diff --git a/src/components/sections/product/ProductCardOne.tsx b/src/components/sections/product/ProductCardOne.tsx
new file mode 100644
index 0000000..74cd4b1
--- /dev/null
+++ b/src/components/sections/product/ProductCardOne.tsx
@@ -0,0 +1,205 @@
+"use client";
+
+import React, { memo } from "react";
+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 type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, GridVariant, CardAnimationType, ContainerStyle, TitleSegment } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type ProductCard = {
+    id: string;
+    name: string;
+    price: string;
+    imageSrc: string;
+    imageAlt?: string;
+    onFavorite?: () => void;
+    onProductClick?: () => void;
+    isFavorited?: boolean;
+};
+
+interface ProductCardOneProps {
+    products: ProductCard[];
+    carouselMode?: "auto" | "buttons";
+    gridVariant: GridVariant;
+    uniformGridCustomHeightClasses?: string;
+    animationType: CardAnimationType;
+    containerStyle: ContainerStyle;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    buttons?: ButtonConfig[];
+    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 = memo(({
+    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-background transition-transform duration-300 group-hover:rotate-45" strokeWidth={1.5} />
+                </button>
+            </div>
+        </article>
+    );
+});
+
+ProductCardItem.displayName = "ProductCardItem";
+
+const ProductCardOne = ({
+    products,
+    carouselMode = "buttons",
+    gridVariant,
+    uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",
+    animationType,
+    containerStyle,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    buttons,
+    textboxLayout,
+    useInvertedBackground,
+    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 shouldUseLightText =
+        containerStyle === "card"
+            ? shouldUseInvertedText("invertDefault", theme.cardStyle) || shouldUseInvertedText("invertCard", theme.cardStyle)
+            : shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    return (
+        <CardStack
+            mode={carouselMode}
+            gridVariant={gridVariant}
+            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+            animationType={animationType}
+            containerStyle={containerStyle}
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            buttons={buttons}
+            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}
+                    shouldUseLightText={shouldUseLightText}
+                    cardClassName={cardClassName}
+                    imageClassName={imageClassName}
+                    cardNameClassName={cardNameClassName}
+                    cardPriceClassName={cardPriceClassName}
+                />
+            ))}
+        </CardStack>
+    );
+};
+
+ProductCardOne.displayName = "ProductCardOne";
+
+export default memo(ProductCardOne);
diff --git a/src/components/sections/product/ProductCardSeven.tsx b/src/components/sections/product/ProductCardSeven.tsx
new file mode 100644
index 0000000..cbd2233
--- /dev/null
+++ b/src/components/sections/product/ProductCardSeven.tsx
@@ -0,0 +1,208 @@
+"use client";
+
+import React, { memo } from "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 type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, GridVariant, CardAnimationType, ContainerStyle, TitleSegment } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type ProductCard = {
+    id: string;
+    name: string;
+    price: string;
+    imageSrc: string;
+    imageAlt?: string;
+    onFavorite?: () => void;
+    onProductClick?: () => void;
+    isFavorited?: boolean;
+};
+
+interface ProductCardSevenProps {
+    products: ProductCard[];
+    carouselMode?: "auto" | "buttons";
+    gridVariant: GridVariant;
+    uniformGridCustomHeightClasses?: string;
+    animationType: CardAnimationType;
+    containerStyle: ContainerStyle;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    buttons?: ButtonConfig[];
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    cardClassName?: string;
+    imageClassName?: string;
+    imageWrapperClassName?: string;
+    actionButtonClassName?: 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;
+    imageWrapperClassName?: string;
+    actionButtonClassName?: string;
+    cardNameClassName?: string;
+    cardPriceClassName?: string;
+}
+
+const ProductCardItem = memo(({
+    product,
+    shouldUseLightText,
+    cardClassName = "",
+    imageClassName = "",
+    imageWrapperClassName = "",
+    actionButtonClassName = "",
+    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}
+                showActionButton={true}
+                actionButtonAriaLabel={`View ${product.name} details`}
+                className={imageWrapperClassName}
+                imageClassName={imageClassName}
+                actionButtonClassName={actionButtonClassName}
+            />
+
+            <div className="relative z-1 flex items-center justify-between gap-4">
+                <h3 className={cls("text-xl font-medium truncate leading-tight", shouldUseLightText ? "text-background" : "text-foreground", cardNameClassName)}>
+                    {product.name}
+                </h3>
+                <p className={cls("text-xl leading-tight", shouldUseLightText ? "text-background" : "text-foreground", cardPriceClassName)}>
+                    {product.price}
+                </p>
+            </div>
+        </article>
+    );
+});
+
+ProductCardItem.displayName = "ProductCardItem";
+
+const ProductCardSeven = ({
+    products,
+    carouselMode = "buttons",
+    gridVariant,
+    uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",
+    animationType,
+    containerStyle,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    buttons,
+    textboxLayout,
+    useInvertedBackground,
+    ariaLabel = "Product section",
+    className = "",
+    containerClassName = "",
+    cardClassName = "",
+    imageClassName = "",
+    imageWrapperClassName = "",
+    actionButtonClassName = "",
+    textBoxTitleClassName = "",
+    textBoxTitleImageWrapperClassName = "",
+    textBoxTitleImageClassName = "",
+    textBoxDescriptionClassName = "",
+    cardNameClassName = "",
+    cardPriceClassName = "",
+    gridClassName = "",
+    carouselClassName = "",
+    controlsClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+}: ProductCardSevenProps) => {
+    const theme = useTheme();
+    const shouldUseLightText =
+        containerStyle === "card"
+            ? shouldUseInvertedText("invertDefault", theme.cardStyle) || shouldUseInvertedText("invertCard", theme.cardStyle)
+            : shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    return (
+        <CardStack
+            mode={carouselMode}
+            gridVariant={gridVariant}
+            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+            animationType={animationType}
+            containerStyle={containerStyle}
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            buttons={buttons}
+            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}
+                    shouldUseLightText={shouldUseLightText}
+                    cardClassName={cardClassName}
+                    imageClassName={imageClassName}
+                    imageWrapperClassName={imageWrapperClassName}
+                    actionButtonClassName={actionButtonClassName}
+                    cardNameClassName={cardNameClassName}
+                    cardPriceClassName={cardPriceClassName}
+                />
+            ))}
+        </CardStack>
+    );
+};
+
+ProductCardSeven.displayName = "ProductCardSeven";
+
+export default memo(ProductCardSeven);
diff --git a/src/components/sections/product/ProductCardSix.tsx b/src/components/sections/product/ProductCardSix.tsx
new file mode 100644
index 0000000..05a2d36
--- /dev/null
+++ b/src/components/sections/product/ProductCardSix.tsx
@@ -0,0 +1,197 @@
+"use client";
+
+import React, { memo } from "react";
+import { ArrowUpRight } from "lucide-react";
+import CardStack from "@/components/cardStack/CardStack";
+import ProductImage from "@/components/shared/ProductImage";
+import { cls } from "@/lib/utils";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, GridVariant, CardAnimationType, ContainerStyle, TitleSegment } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+const MASK_GRADIENT = "linear-gradient(to top, transparent, black 60%)";
+
+type ProductCard = {
+    id: string;
+    name: string;
+    price: string;
+    imageSrc: string;
+    imageAlt?: string;
+    onFavorite?: () => void;
+    onProductClick?: () => void;
+    isFavorited?: boolean;
+};
+
+interface ProductCardSixProps {
+    products: ProductCard[];
+    carouselMode?: "auto" | "buttons";
+    gridVariant: GridVariant;
+    uniformGridCustomHeightClasses?: string;
+    animationType: CardAnimationType;
+    containerStyle: ContainerStyle;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    buttons?: ButtonConfig[];
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    cardClassName?: string;
+    imageClassName?: string;
+    textBoxTitleClassName?: string;
+    textBoxTitleImageWrapperClassName?: string;
+    textBoxTitleImageClassName?: string;
+    textBoxDescriptionClassName?: string;
+    cardNameClassName?: string;
+    gridClassName?: string;
+    carouselClassName?: string;
+    controlsClassName?: string;
+    textBoxClassName?: string;
+    textBoxTagClassName?: string;
+    textBoxButtonContainerClassName?: string;
+    textBoxButtonClassName?: string;
+    textBoxButtonTextClassName?: string;
+}
+
+interface ProductCardItemProps {
+    product: ProductCard;
+    cardClassName?: string;
+    imageClassName?: string;
+    cardNameClassName?: string;
+}
+
+const ProductCardItem = memo(({
+    product,
+    cardClassName = "",
+    imageClassName = "",
+    cardNameClassName = "",
+}: ProductCardItemProps) => {
+    return (
+        <article
+            className={cls("group relative h-full cursor-pointer overflow-hidden 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={cls("w-full h-full object-cover", imageClassName)}
+            />
+
+            <div
+                className="absolute z-0 top-0 left-0 right-0 h-30 backdrop-blur-xl opacity-100"
+                style={{ maskImage: MASK_GRADIENT }}
+                aria-hidden="true"
+            />
+
+            <div className="absolute inset-0 flex flex-col justify-between p-6">
+                <div className="relative z-1">
+                    <h3 className={cls("text-2xl md:text-3xl font-medium leading-tight text-background", cardNameClassName)}>
+                        {product.name}
+                    </h3>
+                </div>
+
+                <div className="relative z-1 flex items-end justify-end">
+                    <button
+                        className="relative cursor-pointer primary-button h-10 w-auto aspect-square rounded-theme flex items-center justify-center"
+                        aria-label={`View ${product.name} details`}
+                        type="button"
+                    >
+                        <ArrowUpRight className="h-4/10 text-background transition-transform duration-300 group-hover:rotate-45" strokeWidth={1.5} />
+                    </button>
+                </div>
+            </div>
+        </article>
+    );
+});
+
+ProductCardItem.displayName = "ProductCardItem";
+
+const ProductCardSix = ({
+    products,
+    carouselMode = "buttons",
+    gridVariant,
+    uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",
+    animationType,
+    containerStyle,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    buttons,
+    textboxLayout,
+    useInvertedBackground,
+    ariaLabel = "Product section",
+    className = "",
+    containerClassName = "",
+    cardClassName = "",
+    imageClassName = "",
+    textBoxTitleClassName = "",
+    textBoxTitleImageWrapperClassName = "",
+    textBoxTitleImageClassName = "",
+    textBoxDescriptionClassName = "",
+    cardNameClassName = "",
+    gridClassName = "",
+    carouselClassName = "",
+    controlsClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+}: ProductCardSixProps) => {
+    return (
+        <CardStack
+            mode={carouselMode}
+            gridVariant={gridVariant}
+            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+            animationType={animationType}
+            containerStyle={containerStyle}
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            buttons={buttons}
+            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}
+                    cardClassName={cardClassName}
+                    imageClassName={imageClassName}
+                    cardNameClassName={cardNameClassName}
+                />
+            ))}
+        </CardStack>
+    );
+};
+
+ProductCardSix.displayName = "ProductCardSix";
+
+export default memo(ProductCardSix);
diff --git a/src/components/sections/product/ProductCardThree.tsx b/src/components/sections/product/ProductCardThree.tsx
new file mode 100644
index 0000000..1c43ddd
--- /dev/null
+++ b/src/components/sections/product/ProductCardThree.tsx
@@ -0,0 +1,248 @@
+"use client";
+
+import React, { memo, useState, useCallback } from "react";
+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 { getButtonProps } from "@/lib/buttonUtils";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, GridVariant, CardAnimationType, ContainerStyle, TitleSegment } from "@/components/cardStack/types";
+import type { CTAButtonVariant, ButtonPropsForVariant } from "@/components/button/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type ProductCard = {
+    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>>;
+};
+
+interface ProductCardThreeProps {
+    products: ProductCard[];
+    carouselMode?: "auto" | "buttons";
+    gridVariant: GridVariant;
+    uniformGridCustomHeightClasses?: string;
+    animationType: CardAnimationType;
+    containerStyle: ContainerStyle;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    buttons?: ButtonConfig[];
+    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;
+    cardClassName?: string;
+    imageClassName?: string;
+    cardNameClassName?: string;
+    quantityControlsClassName?: string;
+}
+
+const ProductCardItem = memo(({
+    product,
+    shouldUseLightText,
+    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]);
+
+    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 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>
+    );
+});
+
+ProductCardItem.displayName = "ProductCardItem";
+
+const ProductCardThree = ({
+    products,
+    carouselMode = "buttons",
+    gridVariant,
+    uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",
+    animationType,
+    containerStyle,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    buttons,
+    textboxLayout,
+    useInvertedBackground,
+    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 shouldUseLightText =
+        containerStyle === "card"
+            ? shouldUseInvertedText("invertDefault", theme.cardStyle) || shouldUseInvertedText("invertCard", theme.cardStyle)
+            : shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    return (
+        <CardStack
+            useInvertedBackground={useInvertedBackground}
+            mode={carouselMode}
+            gridVariant={gridVariant}
+            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+            animationType={animationType}
+            containerStyle={containerStyle}
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            buttons={buttons}
+            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}
+                    shouldUseLightText={shouldUseLightText}
+                    cardClassName={cardClassName}
+                    imageClassName={imageClassName}
+                    cardNameClassName={cardNameClassName}
+                    quantityControlsClassName={quantityControlsClassName}
+                />
+            ))}
+        </CardStack>
+    );
+};
+
+ProductCardThree.displayName = "ProductCardThree";
+
+export default memo(ProductCardThree);
diff --git a/src/components/sections/product/ProductCardTwo.tsx b/src/components/sections/product/ProductCardTwo.tsx
new file mode 100644
index 0000000..2e9a8ed
--- /dev/null
+++ b/src/components/sections/product/ProductCardTwo.tsx
@@ -0,0 +1,232 @@
+"use client";
+
+import React, { memo } from "react";
+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 type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, GridVariant, CardAnimationType, ContainerStyle, TitleSegment } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type ProductCard = {
+    id: string;
+    brand: string;
+    name: string;
+    price: string;
+    rating: number;
+    reviewCount: string;
+    imageSrc: string;
+    imageAlt?: string;
+    onFavorite?: () => void;
+    onProductClick?: () => void;
+    isFavorited?: boolean;
+};
+
+interface ProductCardTwoProps {
+    products: ProductCard[];
+    carouselMode?: "auto" | "buttons";
+    gridVariant: GridVariant;
+    uniformGridCustomHeightClasses?: string;
+    animationType: CardAnimationType;
+    containerStyle: ContainerStyle;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    buttons?: ButtonConfig[];
+    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;
+    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;
+}
+
+const ProductCardItem = memo(({
+    product,
+    shouldUseLightText,
+    cardClassName = "",
+    imageClassName = "",
+    cardBrandClassName = "",
+    cardNameClassName = "",
+    cardPriceClassName = "",
+    cardRatingClassName = "",
+}: 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}
+                imageClassName={imageClassName}
+            />
+
+            <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>
+    );
+});
+
+ProductCardItem.displayName = "ProductCardItem";
+
+const ProductCardTwo = ({
+    products,
+    carouselMode = "buttons",
+    gridVariant,
+    uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",
+    animationType,
+    containerStyle,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    buttons,
+    textboxLayout,
+    useInvertedBackground,
+    ariaLabel = "Product section",
+    className = "",
+    containerClassName = "",
+    cardClassName = "",
+    imageClassName = "",
+    textBoxTitleClassName = "",
+    textBoxTitleImageWrapperClassName = "",
+    textBoxTitleImageClassName = "",
+    textBoxDescriptionClassName = "",
+    cardBrandClassName = "",
+    cardNameClassName = "",
+    cardPriceClassName = "",
+    cardRatingClassName = "",
+    gridClassName = "",
+    carouselClassName = "",
+    controlsClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+}: ProductCardTwoProps) => {
+    const theme = useTheme();
+    const shouldUseLightText =
+        containerStyle === "card"
+            ? shouldUseInvertedText("invertDefault", theme.cardStyle) || shouldUseInvertedText("invertCard", theme.cardStyle)
+            : shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    return (
+        <CardStack
+            useInvertedBackground={useInvertedBackground}
+            mode={carouselMode}
+            gridVariant={gridVariant}
+            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+            animationType={animationType}
+            containerStyle={containerStyle}
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            buttons={buttons}
+            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}
+                    shouldUseLightText={shouldUseLightText}
+                    cardClassName={cardClassName}
+                    imageClassName={imageClassName}
+                    cardBrandClassName={cardBrandClassName}
+                    cardNameClassName={cardNameClassName}
+                    cardPriceClassName={cardPriceClassName}
+                    cardRatingClassName={cardRatingClassName}
+                />
+            ))}
+        </CardStack>
+    );
+};
+
+ProductCardTwo.displayName = "ProductCardTwo";
+
+export default memo(ProductCardTwo);
diff --git a/src/components/sections/socialProof/SocialProofOne.tsx b/src/components/sections/socialProof/SocialProofOne.tsx
new file mode 100644
index 0000000..b50f7e7
--- /dev/null
+++ b/src/components/sections/socialProof/SocialProofOne.tsx
@@ -0,0 +1,123 @@
+"use client";
+
+import React, { memo } from "react";
+import Image from "next/image";
+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 } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+interface SocialProofOneProps {
+    logos: string[];
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    buttons?: ButtonConfig[];
+    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;
+    logoImageClassName?: string;
+}
+
+const SocialProofOne = ({
+    logos,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    buttons,
+    textboxLayout,
+    useInvertedBackground,
+    speed = 40,
+    showCard = true,
+    ariaLabel = "Social proof section",
+    className = "",
+    containerClassName = "",
+    textBoxTitleClassName = "",
+    titleImageWrapperClassName = "",
+    titleImageClassName = "",
+    textBoxDescriptionClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+    contentClassName = "",
+    logoItemClassName = "",
+    logoCardClassName = "",
+    logoImageClassName = "",
+}: SocialProofOneProps) => {
+    const repeatedLogos = [...logos, ...logos, ...logos];
+
+    return (
+        <section aria-label={ariaLabel} className={cls("relative py-20", useInvertedBackground === "invertCard" ? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground" : "w-full", useInvertedBackground === "invertDefault" && "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}
+                        buttons={buttons}
+                        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}>
+                        {repeatedLogos.map((src, 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)}>
+                                    <Image
+                                        width={500}
+                                        height={500}
+                                        src={src}
+                                        alt={`Partner ${i + 1}`}
+                                        className={cls("relative z-1", showCard ? "h-7 w-auto" : "h-8 w-auto", logoImageClassName)}
+                                        unoptimized={src.startsWith('http') || src.startsWith('//')}
+                                    />
+                                </div>
+                            </div>
+                        ))}
+                    </Marquee>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+SocialProofOne.displayName = "SocialProofOne";
+
+export default memo(SocialProofOne);
diff --git a/src/components/sections/socialProof/SocialProofThree.tsx b/src/components/sections/socialProof/SocialProofThree.tsx
new file mode 100644
index 0000000..f50426b
--- /dev/null
+++ b/src/components/sections/socialProof/SocialProofThree.tsx
@@ -0,0 +1,148 @@
+"use client";
+
+import React, { memo } from "react";
+import Image from "next/image";
+import AutoCarousel from "@/components/cardStack/layouts/carousels/AutoCarousel";
+import { cls } from "@/lib/utils";
+import type { LucideIcon } from "lucide-react";
+import type { CardAnimationType, ButtonConfig, TitleSegment } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+interface SocialProofThreeProps {
+    logos: string[];
+    animationType: CardAnimationType;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    buttons?: ButtonConfig[];
+    speed?: number;
+    topMarqueeDirection?: "left" | "right";
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    carouselClassName?: string;
+    bottomCarouselClassName?: string;
+    logoCardClassName?: string;
+    logoImageClassName?: string;
+    textBoxClassName?: string;
+    textBoxTitleClassName?: string;
+    textBoxDescriptionClassName?: string;
+    textBoxTagClassName?: string;
+    textBoxButtonContainerClassName?: string;
+    textBoxButtonClassName?: string;
+    textBoxButtonTextClassName?: string;
+    titleImageWrapperClassName?: string;
+    titleImageClassName?: string;
+}
+
+interface LogoCardProps {
+    src: string;
+    index: number;
+    logoCardClassName?: string;
+    logoImageClassName?: string;
+}
+
+const LogoCard = memo(({
+    src,
+    index,
+    logoCardClassName = "",
+    logoImageClassName = "",
+}: LogoCardProps) => {
+    return (
+        <div className={cls("h-full card rounded-theme flex items-center justify-center", logoCardClassName)}>
+            <Image
+                width={500}
+                height={500}
+                src={src}
+                alt={`Partner ${index + 1}`}
+                className={cls("relative z-1 h-1/2 w-1/2", logoImageClassName)}
+                unoptimized={src.startsWith('http') || src.startsWith('//')}
+            />
+        </div>
+    );
+});
+
+LogoCard.displayName = "LogoCard";
+
+const SocialProofThree = ({
+    logos,
+    animationType,
+    title,
+    titleSegments,
+    description,
+    textboxLayout,
+    useInvertedBackground,
+    tag,
+    tagIcon,
+    buttons,
+    speed = 40,
+    topMarqueeDirection = "left",
+    ariaLabel = "Social proof section",
+    className = "",
+    containerClassName = "",
+    carouselClassName = "",
+    bottomCarouselClassName = "",
+    logoCardClassName = "",
+    logoImageClassName = "",
+    textBoxClassName = "",
+    textBoxTitleClassName = "",
+    textBoxDescriptionClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+    titleImageWrapperClassName = "",
+    titleImageClassName = "",
+}: SocialProofThreeProps) => {
+    return (
+        <AutoCarousel
+            speed={speed}
+            uniformGridCustomHeightClasses="min-h-none"
+            animationType={animationType}
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            buttons={buttons}
+            textboxLayout={textboxLayout}
+            useInvertedBackground={useInvertedBackground}
+            showTextBox={true}
+            dualMarquee={true}
+            topMarqueeDirection={topMarqueeDirection}
+            carouselClassName={carouselClassName}
+            bottomCarouselClassName={bottomCarouselClassName}
+            containerClassName={containerClassName}
+            className={className}
+            textBoxClassName={textBoxClassName}
+            titleClassName={textBoxTitleClassName}
+            descriptionClassName={textBoxDescriptionClassName}
+            tagClassName={textBoxTagClassName}
+            buttonContainerClassName={textBoxButtonContainerClassName}
+            buttonClassName={textBoxButtonClassName}
+            buttonTextClassName={textBoxButtonTextClassName}
+            titleImageWrapperClassName={titleImageWrapperClassName}
+            titleImageClassName={titleImageClassName}
+            ariaLabel={ariaLabel}
+            itemClassName="w-30! md:w-carousel-item-3! xl:w-carousel-item-4! aspect-square"
+        >
+            {logos.map((src, index) => (
+                <LogoCard
+                    key={`${src}-${index}`}
+                    src={src}
+                    index={index}
+                    logoCardClassName={logoCardClassName}
+                    logoImageClassName={logoImageClassName}
+                />
+            ))}
+        </AutoCarousel>
+    );
+};
+
+SocialProofThree.displayName = "SocialProofThree";
+
+export default memo(SocialProofThree);
diff --git a/src/components/sections/socialProof/SocialProofTwo.tsx b/src/components/sections/socialProof/SocialProofTwo.tsx
new file mode 100644
index 0000000..5f240f2
--- /dev/null
+++ b/src/components/sections/socialProof/SocialProofTwo.tsx
@@ -0,0 +1,134 @@
+"use client";
+
+import { memo } from "react";
+import Image from "next/image";
+import CardStackTextBox from "@/components/cardStack/CardStackTextBox";
+import { cls } from "@/lib/utils";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, TitleSegment } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+interface SocialProofTwoProps {
+    logos: string[];
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    buttons?: ButtonConfig[];
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    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;
+    logoRowClassName?: string;
+    logoItemClassName?: string;
+    logoCardClassName?: string;
+    logoImageClassName?: string;
+}
+
+const SocialProofTwo = ({
+    logos,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    buttons,
+    textboxLayout,
+    useInvertedBackground,
+    ariaLabel = "Social proof section",
+    className = "",
+    containerClassName = "",
+    textBoxTitleClassName = "",
+    titleImageWrapperClassName = "",
+    titleImageClassName = "",
+    textBoxDescriptionClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+    contentClassName = "",
+    logoRowClassName = "",
+    logoItemClassName = "",
+    logoCardClassName = "",
+    logoImageClassName = "",
+}: SocialProofTwoProps) => {
+    // Calculate flex basis based on number of logos
+    const getFlexBasis = () => {
+        const count = logos.length;
+        if (count === 2) return "md:basis-1/2";
+        if (count === 3) return "md:basis-1/3";
+        if (count === 4) return "md:basis-1/4";
+        if (count === 5) return "md:basis-1/5";
+        return "md:flex-1";
+    };
+    return (
+        <section aria-label={ariaLabel} className={cls("relative py-20", useInvertedBackground === "invertCard" ? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground" : "w-full", useInvertedBackground === "invertDefault" && "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}
+                        buttons={buttons}
+                        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("", contentClassName)}>
+                    <div className={cls("flex flex-col md:flex-row items-stretch gap-4", logoRowClassName)}>
+                        {logos.map((src, i) => (
+                            <div
+                                key={i}
+                                className={cls(
+                                    "flex items-center justify-center w-full",
+                                    getFlexBasis(),
+                                    logoItemClassName
+                                )}
+                            >
+                                <div className={cls("card p-6 rounded-theme w-full h-full flex items-center justify-center", logoCardClassName)}>
+                                    <Image
+                                        width={500}
+                                        height={500}
+                                        src={src}
+                                        alt={`Partner ${i + 1}`}
+                                        className={cls("relative z-1 w-1/2 md:w-auto md:h-8 2xl:h-10 h-auto object-contain", logoImageClassName)}
+                                        unoptimized={src.startsWith('http') || src.startsWith('//')}
+                                    />
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+SocialProofTwo.displayName = "SocialProofTwo";
+
+export default memo(SocialProofTwo);
diff --git a/src/components/sections/team/TeamCardEight.tsx b/src/components/sections/team/TeamCardEight.tsx
new file mode 100644
index 0000000..af03a32
--- /dev/null
+++ b/src/components/sections/team/TeamCardEight.tsx
@@ -0,0 +1,104 @@
+"use client";
+
+import React, { memo, useMemo, useState, useEffect } from "react";
+import AvatarGroup from "@/components/shared/AvatarGroup";
+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 { InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type TeamMember = {
+  id: string;
+  name: string;
+  imageSrc: string;
+  imageAlt?: string;
+};
+
+interface TeamCardEightProps {
+  team: TeamMember[];
+  cardTitle: string;
+  cardTag: string;
+  cardTagIcon?: LucideIcon;
+  useInvertedBackground: InvertedBackground;
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  cardClassName?: string;
+  avatarGroupClassName?: string;
+  avatarClassName?: string;
+  cardTitleClassName?: string;
+  cardTagClassName?: string;
+}
+
+const TeamCardEight = ({
+  team,
+  cardTitle,
+  cardTag,
+  cardTagIcon,
+  useInvertedBackground,
+  ariaLabel = "Team section",
+  className = "",
+  containerClassName = "",
+  cardClassName = "",
+  avatarGroupClassName = "",
+  avatarClassName = "",
+  cardTitleClassName = "",
+  cardTagClassName = "",
+}: TeamCardEightProps) => {
+  const theme = useTheme();
+  const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const checkMobile = () => setIsMobile(window.innerWidth < 768);
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+    return () => window.removeEventListener("resize", checkMobile);
+  }, []);
+
+  const avatars = useMemo(() =>
+    team.map((member) => ({
+      src: member.imageSrc,
+      alt: member.imageAlt || member.name,
+    })),
+    [team]
+  );
+
+  return (
+    <section
+      aria-label={ariaLabel}
+      className={cls("relative py-20", useInvertedBackground === "invertCard" ? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground" : "w-full", useInvertedBackground === "invertDefault" && "bg-foreground", className)}
+    >
+      <div 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>
+          </div>
+          <AvatarGroup
+            avatars={avatars}
+            className={avatarGroupClassName}
+            avatarClassName={avatarClassName}
+            maxVisible={isMobile ? 3 : 4}
+            ariaLabel="Team members"
+            avatarImageClassName="h-[var(--width-17_5)] md:h-[var(--width-12_5)]"
+            avatarOverlapClassName="-ml-8"
+          />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+TeamCardEight.displayName = "TeamCardEight";
+
+export default memo(TeamCardEight);
diff --git a/src/components/sections/team/TeamCardEleven.tsx b/src/components/sections/team/TeamCardEleven.tsx
new file mode 100644
index 0000000..4dae9e2
--- /dev/null
+++ b/src/components/sections/team/TeamCardEleven.tsx
@@ -0,0 +1,192 @@
+"use client";
+
+import React, { memo } from "react";
+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 } 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;
+    buttons?: ButtonConfig[];
+    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,
+    buttons,
+    textboxLayout,
+    useInvertedBackground,
+    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}
+            buttons={buttons}
+            textboxLayout={textboxLayout}
+            animationType={animationType}
+            variant="card"
+            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/20 border-y border-accent/20">
+                        {group.members.map(renderMemberRow)}
+                    </div>
+                </div>
+            ))}
+        </CardList>
+    );
+};
+
+TeamCardEleven.displayName = "TeamCardEleven";
+
+export default memo(TeamCardEleven);
diff --git a/src/components/sections/team/TeamCardFive.tsx b/src/components/sections/team/TeamCardFive.tsx
new file mode 100644
index 0000000..4088147
--- /dev/null
+++ b/src/components/sections/team/TeamCardFive.tsx
@@ -0,0 +1,143 @@
+"use client";
+
+import React, { memo } from "react";
+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 } from "@/components/cardStack/types";
+import type { TextboxLayout, 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: TextboxLayout;
+  useInvertedBackground: InvertedBackground;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  buttons?: ButtonConfig[];
+  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,
+  tag,
+  tagIcon,
+  buttons,
+  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", useInvertedBackground === "invertCard" ? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground" : "w-full", useInvertedBackground === "invertDefault" && "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}
+          buttons={buttons}
+          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 === "invertDefault" || useInvertedBackground === "invertCard") ? "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 === "invertDefault" || useInvertedBackground === "invertCard") ? "text-background/75" : "text-foreground/75", roleClassName)}>
+                {member.role}
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+TeamCardFive.displayName = "TeamCardFive";
+
+export default memo(TeamCardFive);
diff --git a/src/components/sections/team/TeamCardFour.tsx b/src/components/sections/team/TeamCardFour.tsx
new file mode 100644
index 0000000..9eec0b6
--- /dev/null
+++ b/src/components/sections/team/TeamCardFour.tsx
@@ -0,0 +1,186 @@
+"use client";
+
+import React, { memo } from "react";
+import AutoCarousel from "@/components/cardStack/layouts/carousels/AutoCarousel";
+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 { CardAnimationType, ButtonConfig, TitleSegment } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type TeamMember = {
+    id: string;
+    name: string;
+    role: string;
+    imageSrc?: string;
+    videoSrc?: string;
+    imageAlt?: string;
+    videoAriaLabel?: string;
+};
+
+interface TeamCardFourProps {
+    team: TeamMember[];
+    animationType: CardAnimationType;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    buttons?: ButtonConfig[];
+    speed?: number;
+    topMarqueeDirection?: "left" | "right";
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    carouselClassName?: string;
+    bottomCarouselClassName?: string;
+    cardClassName?: string;
+    mediaWrapperClassName?: string;
+    mediaClassName?: string;
+    nameClassName?: string;
+    roleClassName?: string;
+    textBoxClassName?: string;
+    textBoxTitleClassName?: string;
+    textBoxTitleImageWrapperClassName?: string;
+    textBoxTitleImageClassName?: string;
+    textBoxDescriptionClassName?: string;
+    textBoxTagClassName?: string;
+    textBoxButtonContainerClassName?: string;
+    textBoxButtonClassName?: string;
+    textBoxButtonTextClassName?: string;
+}
+
+interface TeamCardProps {
+    member: TeamMember;
+    shouldUseLightText: boolean;
+    cardClassName?: string;
+    mediaWrapperClassName?: string;
+    mediaClassName?: string;
+    nameClassName?: string;
+    roleClassName?: string;
+}
+
+const TeamCard = memo(({
+    member,
+    shouldUseLightText,
+    cardClassName = "",
+    mediaWrapperClassName = "",
+    mediaClassName = "",
+    nameClassName = "",
+    roleClassName = "",
+}: TeamCardProps) => {
+    return (
+        <div className={cls("relative h-full card rounded-theme overflow-hidden min-h-0 flex items-center gap-8 p-4 pr-10 md:pr-16", cardClassName)}>
+            <div className={cls("relative h-40 md:h-60 w-auto aspect-square rounded-theme overflow-hidden flex-shrink-0", mediaWrapperClassName)}>
+                <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", mediaClassName)}
+                />
+            </div>
+            <div className="relative z-1 flex flex-col gap-1 min-w-0 flex-1">
+                <h3 className={cls("text-3xl font-medium leading-tight", shouldUseLightText ? "text-background" : "text-foreground", nameClassName)}>
+                    {member.name}
+                </h3>
+                <p className={cls("text-xl leading-tight", shouldUseLightText ? "text-background/75" : "text-foreground/75", roleClassName)}>
+                    {member.role}
+                </p>
+            </div>
+        </div>
+    );
+});
+
+TeamCard.displayName = "TeamCard";
+
+const TeamCardFour = ({
+    team,
+    animationType,
+    title,
+    titleSegments,
+    description,
+    textboxLayout,
+    useInvertedBackground,
+    tag,
+    tagIcon,
+    buttons,
+    speed = 40,
+    topMarqueeDirection = "left",
+    ariaLabel = "Team section",
+    className = "",
+    containerClassName = "",
+    carouselClassName = "",
+    bottomCarouselClassName = "",
+    cardClassName = "",
+    mediaWrapperClassName = "",
+    mediaClassName = "",
+    nameClassName = "",
+    roleClassName = "",
+    textBoxClassName = "",
+    textBoxTitleClassName = "",
+    textBoxTitleImageWrapperClassName = "",
+    textBoxTitleImageClassName = "",
+    textBoxDescriptionClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+}: TeamCardFourProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    return (
+        <AutoCarousel
+            speed={speed}
+            uniformGridCustomHeightClasses="min-h-none"
+            animationType={animationType}
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            buttons={buttons}
+            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-fit!"
+        >
+            {team.map((member, index) => (
+                <TeamCard
+                    key={`${member.id}-${index}`}
+                    member={member}
+                    shouldUseLightText={shouldUseLightText}
+                    cardClassName={cardClassName}
+                    mediaWrapperClassName={mediaWrapperClassName}
+                    mediaClassName={mediaClassName}
+                    nameClassName={nameClassName}
+                    roleClassName={roleClassName}
+                />
+            ))}
+        </AutoCarousel>
+    );
+};
+
+TeamCardFour.displayName = "TeamCardFour";
+
+export default memo(TeamCardFour);
diff --git a/src/components/sections/team/TeamCardNine.tsx b/src/components/sections/team/TeamCardNine.tsx
new file mode 100644
index 0000000..de391b9
--- /dev/null
+++ b/src/components/sections/team/TeamCardNine.tsx
@@ -0,0 +1,201 @@
+"use client";
+
+import React, { memo } from "react";
+import Image from "next/image";
+import CardStack from "@/components/cardStack/CardStack";
+import SocialLinks, { type SocialLink } from "@/components/shared/SocialLinks";
+import { cls } from "@/lib/utils";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, CardAnimationType, ContainerStyle, TitleSegment } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type TeamMember = {
+    id: string;
+    name: string;
+    role: string;
+    imageSrc: string;
+    imageAlt?: string;
+    socialLinks?: SocialLink[];
+};
+
+interface TeamCardNineProps {
+    members: TeamMember[];
+    carouselMode?: "auto" | "buttons";
+    animationType: CardAnimationType;
+    containerStyle: ContainerStyle;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    buttons?: ButtonConfig[];
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    cardClassName?: string;
+    textBoxTitleClassName?: string;
+    textBoxTitleImageWrapperClassName?: string;
+    textBoxTitleImageClassName?: string;
+    textBoxDescriptionClassName?: string;
+    imageClassName?: string;
+    contentClassName?: string;
+    nameClassName?: string;
+    roleClassName?: 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;
+    contentClassName?: string;
+    nameClassName?: string;
+    roleClassName?: string;
+    socialLinksClassName?: string;
+    socialIconClassName?: string;
+}
+
+const TeamMemberCard = memo(({
+    member,
+    cardClassName = "",
+    imageClassName = "",
+    contentClassName = "",
+    nameClassName = "",
+    roleClassName = "",
+    socialLinksClassName = "",
+    socialIconClassName = "",
+}: TeamMemberCardProps) => {
+    return (
+        <div className={cls("relative h-full card rounded-theme-capped p-6 grid grid-cols-2 gap-4", cardClassName)}>
+            <div className={cls("relative z-1 flex flex-col justify-center gap-4", contentClassName)}>
+                <div className="flex flex-col gap-2">
+                    <h3 className={cls("relative z-1 text-3xl font-medium text-foreground leading-tight truncate", nameClassName)}>
+                        {member.name}
+                    </h3>
+                    <p className={cls("text-lg text-foreground leading-tight truncate", roleClassName)}>
+                        {member.role}
+                    </p>
+                </div>
+                {member.socialLinks && member.socialLinks.length > 0 && (
+                    <SocialLinks
+                        socialLinks={member.socialLinks}
+                        className={socialLinksClassName}
+                        iconClassName={socialIconClassName}
+                    />
+                )}
+            </div>
+            <div className="relative z-1 w-full aspect-square rounded-theme-capped overflow-hidden">
+                <Image
+                    src={member.imageSrc}
+                    alt={member.imageAlt || member.name}
+                    width={800}
+                    height={800}
+                    className={cls("w-full h-full object-cover", imageClassName)}
+                    unoptimized={member.imageSrc.startsWith('http') || member.imageSrc.startsWith('//')}
+                    aria-hidden={member.imageAlt === ""}
+                />
+            </div>
+        </div>
+    );
+});
+
+TeamMemberCard.displayName = "TeamMemberCard";
+
+const TeamCardNine = ({
+    members,
+    carouselMode = "buttons",
+    animationType,
+    containerStyle,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    buttons,
+    textboxLayout,
+    useInvertedBackground,
+    ariaLabel = "Team section",
+    className = "",
+    containerClassName = "",
+    cardClassName = "",
+    textBoxTitleClassName = "",
+    textBoxTitleImageWrapperClassName = "",
+    textBoxTitleImageClassName = "",
+    textBoxDescriptionClassName = "",
+    imageClassName = "",
+    contentClassName = "",
+    nameClassName = "",
+    roleClassName = "",
+    socialLinksClassName = "",
+    socialIconClassName = "",
+    gridClassName = "",
+    carouselClassName = "",
+    controlsClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+}: TeamCardNineProps) => {
+    return (
+        <CardStack
+            mode={carouselMode}
+            gridVariant="uniform-all-items-equal"
+            uniformGridCustomHeightClasses="min-h-none"
+            animationType={animationType}
+            containerStyle={containerStyle}
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            buttons={buttons}
+            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}
+                    contentClassName={contentClassName}
+                    nameClassName={nameClassName}
+                    roleClassName={roleClassName}
+                    socialLinksClassName={socialLinksClassName}
+                    socialIconClassName={socialIconClassName}
+                />
+            ))}
+        </CardStack>
+    );
+};
+
+TeamCardNine.displayName = "TeamCardNine";
+
+export default memo(TeamCardNine);
diff --git a/src/components/sections/team/TeamCardOne.tsx b/src/components/sections/team/TeamCardOne.tsx
new file mode 100644
index 0000000..e5a6165
--- /dev/null
+++ b/src/components/sections/team/TeamCardOne.tsx
@@ -0,0 +1,187 @@
+"use client";
+
+import React, { memo } from "react";
+import Image from "next/image";
+import CardStack from "@/components/cardStack/CardStack";
+import { cls } from "@/lib/utils";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, GridVariant, CardAnimationType, ContainerStyle, TitleSegment } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type TeamMember = {
+    id: string;
+    name: string;
+    role: string;
+    imageSrc: string;
+    imageAlt?: string;
+};
+
+interface TeamCardOneProps {
+    members: TeamMember[];
+    carouselMode?: "auto" | "buttons";
+    gridVariant: GridVariant;
+    uniformGridCustomHeightClasses?: string;
+    animationType: CardAnimationType;
+    containerStyle: ContainerStyle;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    buttons?: ButtonConfig[];
+    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 = memo(({
+    member,
+    cardClassName = "",
+    imageClassName = "",
+    overlayClassName = "",
+    nameClassName = "",
+    roleClassName = "",
+}: TeamMemberCardProps) => {
+    return (
+        <div className={cls("relative h-full card rounded-theme-capped p-4", cardClassName)}>
+            <div className="relative z-1 w-full h-full rounded-theme-capped overflow-hidden">
+                <Image
+                    src={member.imageSrc}
+                    alt={member.imageAlt || member.name}
+                    width={800}
+                    height={800}
+                    className={cls("w-full h-full object-cover  ", imageClassName)}
+                    unoptimized={member.imageSrc.startsWith('http') || member.imageSrc.startsWith('//')}
+                    aria-hidden={member.imageAlt === ""}
+                />
+
+                <div className={cls("!absolute z-1 bottom-4 left-4 right-4 card 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-background leading-[1.1] truncate", roleClassName)}>
+                            {member.role}
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+});
+
+TeamMemberCard.displayName = "TeamMemberCard";
+
+const TeamCardOne = ({
+    members,
+    carouselMode = "buttons",
+    gridVariant,
+    uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",
+    animationType,
+    containerStyle,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    buttons,
+    textboxLayout,
+    useInvertedBackground,
+    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}
+            containerStyle={containerStyle}
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            buttons={buttons}
+            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>
+    );
+};
+
+TeamCardOne.displayName = "TeamCardOne";
+
+export default memo(TeamCardOne);
diff --git a/src/components/sections/team/TeamCardSeven.tsx b/src/components/sections/team/TeamCardSeven.tsx
new file mode 100644
index 0000000..03e3832
--- /dev/null
+++ b/src/components/sections/team/TeamCardSeven.tsx
@@ -0,0 +1,150 @@
+"use client";
+
+import React, { memo, useState, useEffect } from "react";
+import Image from "next/image";
+import TextAnimation from "@/components/text/TextAnimation";
+import { cls } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type TeamMember = {
+  id: string;
+  imageSrc: string;
+  imageAlt: string;
+};
+
+interface TeamCardSevenProps {
+  team: TeamMember[];
+  title: string;
+  useInvertedBackground: InvertedBackground;
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  circlesClassName?: string;
+  imagesContainerClassName?: string;
+  imageClassName?: string;
+  titleClassName?: string;
+}
+
+const TeamCardSeven = ({
+  team,
+  title,
+  useInvertedBackground,
+  ariaLabel = "Team section",
+  className = "",
+  containerClassName = "",
+  circlesClassName = "",
+  imagesContainerClassName = "",
+  imageClassName = "",
+  titleClassName = "",
+}: TeamCardSevenProps) => {
+  const theme = useTheme();
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth < 768);
+    };
+
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+    return () => window.removeEventListener("resize", checkMobile);
+  }, []);
+
+  const getImageSize = (index: number, total: number): string => {
+    const isEven = total % 2 === 0;
+    const centerIndex = Math.floor(total / 2);
+
+    let distanceFromCenter: number;
+    if (isEven) {
+      const leftCenter = centerIndex - 1;
+      const rightCenter = centerIndex;
+      distanceFromCenter = Math.min(
+        Math.abs(index - leftCenter),
+        Math.abs(index - rightCenter)
+      );
+    } else {
+      distanceFromCenter = Math.abs(index - centerIndex);
+    }
+
+    if (distanceFromCenter === 0) return "w-35 h-auto md:w-17_5 aspect-square";
+    if (distanceFromCenter === 1) return "w-25 h-auto md:w-12_5 aspect-square";
+    if (distanceFromCenter === 2) return "w-10 h-auto md:w-7_5 aspect-square";
+    return "w-5 h-auto md:h-20 md:w-auto aspect-square";
+  };
+
+  const maxItems = isMobile ? 3 : 7;
+  const actualTeam = team.slice(0, 7);
+
+  const visibleTeam: TeamMember[] = isMobile && actualTeam.length > 3
+    ? actualTeam.slice(
+      Math.floor((actualTeam.length - 3) / 2),
+      Math.floor((actualTeam.length - 3) / 2) + 3
+    )
+    : actualTeam.slice(0, maxItems);
+
+  return (
+    <section
+      className={cls(
+        "relative py-20 overflow-hidden",
+        useInvertedBackground === "invertCard"
+          ? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground"
+          : "w-full",
+        useInvertedBackground === "invertDefault" && "bg-foreground",
+        className
+      )}
+      aria-label={ariaLabel}
+    >
+      <div className={cls("w-content-width mx-auto flex flex-col items-center gap-10 h-[37.5rem] md:h-180", containerClassName)}>
+        <div className="relative w-full h-full flex flex-col items-center justify-center gap-8 md:gap-10" >
+          <div className="relative w-full flex justify-center items-center">
+            <div className={cls("absolute inset-0 flex justify-center items-center pointer-events-none", circlesClassName)}>
+              <div className="absolute! w-150 h-auto md:h-180 md:w-auto aspect-square rounded-theme card opacity-25 mask-fade-bottom" />
+              <div className="absolute! w-110 h-auto md:h-140 md:w-auto aspect-square rounded-theme card opacity-50 mask-fade-bottom" />
+              <div className="absolute! w-70 h-auto md:h-100 md:w-auto aspect-square rounded-theme card opacity-75 mask-fade-bottom" />
+            </div>
+
+            <div className={cls("relative flex items-center justify-center gap-3 md:gap-4", imagesContainerClassName)}>
+              {visibleTeam.map((member, index) => (
+                <div
+                  key={member.id}
+                  className={cls(
+                    "relative card p-1 rounded-theme overflow-hidden shrink-0",
+                    getImageSize(index, visibleTeam.length),
+                    imageClassName
+                  )}
+                >
+                  <div className="relative z-1 w-full h-full rounded-theme overflow-hidden" >
+                    <Image
+                      src={member.imageSrc}
+                      alt={member.imageAlt}
+                      fill
+                      className="object-cover"
+                      unoptimized={member.imageSrc.startsWith('http') || member.imageSrc.startsWith('//')}
+                    />
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <TextAnimation
+            type={theme.defaultTextAnimation}
+            text={title}
+            variant="trigger"
+            as="h2"
+            className={cls(
+              "text-5xl font-medium text-center",
+              (useInvertedBackground === "invertDefault" || useInvertedBackground === "invertCard") && "text-background",
+              titleClassName
+            )}
+          />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+TeamCardSeven.displayName = "TeamCardSeven";
+
+export default memo(TeamCardSeven);
diff --git a/src/components/sections/team/TeamCardSix.tsx b/src/components/sections/team/TeamCardSix.tsx
new file mode 100644
index 0000000..ab51b49
--- /dev/null
+++ b/src/components/sections/team/TeamCardSix.tsx
@@ -0,0 +1,193 @@
+"use client";
+
+import React, { memo } from "react";
+import Image from "next/image";
+import CardStack from "@/components/cardStack/CardStack";
+import { cls } from "@/lib/utils";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, GridVariant, CardAnimationType, ContainerStyle, TitleSegment } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+const MASK_GRADIENT = "linear-gradient(to bottom, transparent, black 60%)";
+
+type TeamMember = {
+    id: string;
+    name: string;
+    role: string;
+    imageSrc: string;
+    imageAlt?: string;
+};
+
+interface TeamCardSixProps {
+    members: TeamMember[];
+    carouselMode?: "auto" | "buttons";
+    gridVariant: GridVariant;
+    uniformGridCustomHeightClasses?: string;
+    animationType: CardAnimationType;
+    containerStyle: ContainerStyle;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    buttons?: ButtonConfig[];
+    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 = memo(({
+    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">
+                <Image
+                    src={member.imageSrc}
+                    alt={member.imageAlt || member.name}
+                    width={800}
+                    height={800}
+                    className={cls("w-full h-full object-cover", imageClassName)}
+                    unoptimized={member.imageSrc.startsWith('http') || member.imageSrc.startsWith('//')}
+                    aria-hidden={member.imageAlt === ""}
+                />
+
+                <div className={cls("absolute z-10 bottom-4 left-4 right-4 p-4 flex flex-col gap-0 text-foreground", 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>
+    );
+});
+
+TeamMemberCard.displayName = "TeamMemberCard";
+
+const TeamCardSix = ({
+    members,
+    carouselMode = "buttons",
+    gridVariant,
+    uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",
+    animationType,
+    containerStyle,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    buttons,
+    textboxLayout,
+    useInvertedBackground,
+    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}
+            containerStyle={containerStyle}
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            buttons={buttons}
+            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>
+    );
+};
+
+TeamCardSix.displayName = "TeamCardSix";
+
+export default memo(TeamCardSix);
diff --git a/src/components/sections/team/TeamCardTen.tsx b/src/components/sections/team/TeamCardTen.tsx
new file mode 100644
index 0000000..2c38e13
--- /dev/null
+++ b/src/components/sections/team/TeamCardTen.tsx
@@ -0,0 +1,139 @@
+"use client";
+
+import React, { memo } from "react";
+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 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;
+    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,
+    members,
+    memberVariant,
+    useInvertedBackground,
+    ariaLabel = "Team section",
+    className = "",
+    containerClassName = "",
+    titleClassName = "",
+    tagClassName = "",
+    membersContainerClassName = "",
+    memberClassName = "",
+    mediaWrapperClassName = "",
+    mediaClassName = "",
+    nameClassName = "",
+}: TeamCardTenProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = useInvertedBackground === "invertDefault" || useInvertedBackground === "invertCard";
+    const shouldMemberUseLightText = memberVariant === "card"
+        ? shouldUseInvertedText("invertDefault", theme.cardStyle) || shouldUseInvertedText("invertCard", theme.cardStyle)
+        : shouldUseLightText;
+
+    return (
+        <section
+            aria-label={ariaLabel}
+            className={cls(
+                "relative py-20",
+                useInvertedBackground === "invertCard"
+                    ? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground"
+                    : "w-full",
+                useInvertedBackground === "invertDefault" && "bg-foreground",
+                className
+            )}
+        >
+            <div className={cls("w-content-width mx-auto flex flex-col gap-10", containerClassName)}>
+                <TextAnimation
+                    type={theme.defaultTextAnimation}
+                    text={title}
+                    variant="words-trigger"
+                    className={cls(
+                        "text-3xl md:text-5xl font-medium leading-tight",
+                        shouldUseLightText ? "text-background" : "text-foreground",
+                        titleClassName
+                    )}
+                />
+
+                <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="w-fit md:w-15" >
+                        <Tag
+                            text={tag}
+                            useInvertedBackground={useInvertedBackground}
+                            className={cls("min-w-0 max-w-full text-xl px-6", tagClassName)}
+                            textClassName="truncate"
+                        />
+                    </div>
+
+                    <div className={cls(
+                        "w-full grid gap-8 flex-1",
+                        members.length === 1 && "grid-cols-1",
+                        members.length >= 2 && "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-[3/3.5] 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",
+                                    shouldMemberUseLightText ? "text-background" : "text-foreground",
+                                    nameClassName
+                                )}>
+                                    {member.name}
+                                </p>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+TeamCardTen.displayName = "TeamCardTen";
+
+export default memo(TeamCardTen);
diff --git a/src/components/sections/team/TeamCardThree.tsx b/src/components/sections/team/TeamCardThree.tsx
new file mode 100644
index 0000000..8f5d96d
--- /dev/null
+++ b/src/components/sections/team/TeamCardThree.tsx
@@ -0,0 +1,220 @@
+"use client";
+
+import React, { memo } from "react";
+import Image from "next/image";
+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, CardAnimationType, ContainerStyle, TitleSegment } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type SocialLink = {
+    icon: LucideIcon;
+    url: string;
+};
+
+type TeamMember = {
+    id: string;
+    name: string;
+    role: string;
+    imageSrc: string;
+    imageAlt?: string;
+    socialLinks?: SocialLink[];
+};
+
+interface TeamCardThreeProps {
+    members: TeamMember[];
+    carouselMode?: "auto" | "buttons";
+    uniformGridCustomHeightClasses?: string;
+    animationType: CardAnimationType;
+    containerStyle: ContainerStyle;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    buttons?: ButtonConfig[];
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    cardClassName?: string;
+    textBoxTitleClassName?: string;
+    textBoxTitleImageWrapperClassName?: string;
+    textBoxTitleImageClassName?: string;
+    textBoxDescriptionClassName?: string;
+    imageClassName?: string;
+    nameClassName?: string;
+    roleClassName?: 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;
+    shouldUseLightText: boolean;
+    cardClassName?: string;
+    imageClassName?: string;
+    nameClassName?: string;
+    roleClassName?: string;
+    socialLinksClassName?: string;
+    socialIconClassName?: string;
+}
+
+const TeamMemberCard = memo(({
+    member,
+    shouldUseLightText,
+    cardClassName = "",
+    imageClassName = "",
+    nameClassName = "",
+    roleClassName = "",
+    socialLinksClassName = "",
+    socialIconClassName = "",
+}: TeamMemberCardProps) => {
+    return (
+        <div className={cls("card text-foreground rounded-theme-capped p-6 flex flex-col items-center text-center gap-4", cardClassName)}>
+            <div className="relative z-1 w-full aspect-square rounded-theme-capped overflow-hidden">
+                <Image
+                    src={member.imageSrc}
+                    alt={member.imageAlt || member.name}
+                    width={800}
+                    height={800}
+                    className={cls("w-full h-full object-cover  ", imageClassName)}
+                    unoptimized={member.imageSrc.startsWith('http') || member.imageSrc.startsWith('//')}
+                    aria-hidden={member.imageAlt === ""}
+                />
+            </div>
+
+            <div className="relative z-1 flex flex-col gap-0">
+                <h3 className={cls("text-3xl font-medium leading-[1.15]", shouldUseLightText ? "text-background" : "text-foreground", nameClassName)}>
+                    {member.name}
+                </h3>
+                <p className={cls("text-base leading-[1.15]", shouldUseLightText ? "text-background" : "text-foreground", roleClassName)}>
+                    {member.role}
+                </p>
+            </div>
+
+
+            {member.socialLinks && member.socialLinks.length > 0 && (
+                <div className={cls("relative z-1 flex gap-3", 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-background" strokeWidth={1.5} />
+                        </a>
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+});
+
+TeamMemberCard.displayName = "TeamMemberCard";
+
+const TeamCardThree = ({
+    members,
+    carouselMode = "buttons",
+    uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",
+    animationType,
+    containerStyle,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    buttons,
+    textboxLayout,
+    useInvertedBackground,
+    ariaLabel = "Team section",
+    className = "",
+    containerClassName = "",
+    cardClassName = "",
+    textBoxTitleClassName = "",
+    textBoxTitleImageWrapperClassName = "",
+    textBoxTitleImageClassName = "",
+    textBoxDescriptionClassName = "",
+    imageClassName = "",
+    nameClassName = "",
+    roleClassName = "",
+    socialLinksClassName = "",
+    socialIconClassName = "",
+    gridClassName = "",
+    carouselClassName = "",
+    controlsClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+}: TeamCardThreeProps) => {
+    const theme = useTheme();
+    const shouldUseLightText =
+        containerStyle === "card"
+            ? shouldUseInvertedText("invertDefault", theme.cardStyle) || shouldUseInvertedText("invertCard", theme.cardStyle)
+            : shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+    return (
+        <CardStack
+            mode={carouselMode}
+            gridVariant="uniform-all-items-equal"
+            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+            animationType={animationType}
+            containerStyle={containerStyle}
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            buttons={buttons}
+            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}
+                    shouldUseLightText={shouldUseLightText}
+                    cardClassName={cardClassName}
+                    imageClassName={imageClassName}
+                    nameClassName={nameClassName}
+                    roleClassName={roleClassName}
+                    socialLinksClassName={socialLinksClassName}
+                    socialIconClassName={socialIconClassName}
+                />
+            ))}
+        </CardStack>
+    );
+};
+
+TeamCardThree.displayName = "TeamCardThree";
+
+export default memo(TeamCardThree);
diff --git a/src/components/sections/team/TeamCardTwo.tsx b/src/components/sections/team/TeamCardTwo.tsx
new file mode 100644
index 0000000..487e523
--- /dev/null
+++ b/src/components/sections/team/TeamCardTwo.tsx
@@ -0,0 +1,229 @@
+"use client";
+
+import React, { memo } from "react";
+import Image from "next/image";
+import CardStack from "@/components/cardStack/CardStack";
+import { cls } from "@/lib/utils";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, GridVariant, CardAnimationType, ContainerStyle, TitleSegment } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type SocialLink = {
+    icon: LucideIcon;
+    url: string;
+};
+
+type TeamMember = {
+    id: string;
+    name: string;
+    role: string;
+    description: string;
+    imageSrc: string;
+    imageAlt?: string;
+    socialLinks?: SocialLink[];
+};
+
+interface TeamCardTwoProps {
+    members: TeamMember[];
+    carouselMode?: "auto" | "buttons";
+    gridVariant: GridVariant;
+    uniformGridCustomHeightClasses?: string;
+    animationType: CardAnimationType;
+    containerStyle: ContainerStyle;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    buttons?: ButtonConfig[];
+    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 = memo(({
+    member,
+    cardClassName = "",
+    imageClassName = "",
+    overlayClassName = "",
+    nameClassName = "",
+    roleClassName = "",
+    memberDescriptionClassName = "",
+    socialLinksClassName = "",
+    socialIconClassName = "",
+}: TeamMemberCardProps) => {
+    return (
+        <div className={cls("relative h-full rounded-theme-capped overflow-hidden group", cardClassName)}>
+            <Image
+                src={member.imageSrc}
+                alt={member.imageAlt || member.name}
+                width={800}
+                height={800}
+                className={cls("relative z-1 w-full h-full object-cover", imageClassName)}
+                unoptimized={member.imageSrc.startsWith('http') || member.imageSrc.startsWith('//')}
+                aria-hidden={member.imageAlt === ""}
+            />
+
+            <div className={cls("!absolute z-10 bottom-6 left-6 right-6 card 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-foreground 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-background" strokeWidth={1.5} />
+                            </a>
+                        ))}
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+});
+
+TeamMemberCard.displayName = "TeamMemberCard";
+
+const TeamCardTwo = ({
+    members,
+    carouselMode = "buttons",
+    gridVariant,
+    uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",
+    animationType,
+    containerStyle,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    buttons,
+    textboxLayout,
+    useInvertedBackground,
+    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) => {
+    return (
+        <CardStack
+            mode={carouselMode}
+            gridVariant={gridVariant}
+            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+            animationType={animationType}
+            containerStyle={containerStyle}
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            buttons={buttons}
+            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>
+    );
+};
+
+TeamCardTwo.displayName = "TeamCardTwo";
+
+export default memo(TeamCardTwo);
diff --git a/src/components/sections/testimonial/TestimonialCardEight.tsx b/src/components/sections/testimonial/TestimonialCardEight.tsx
new file mode 100644
index 0000000..fe44e19
--- /dev/null
+++ b/src/components/sections/testimonial/TestimonialCardEight.tsx
@@ -0,0 +1,204 @@
+"use client";
+
+import { memo } from "react";
+import { Star } from "lucide-react";
+import FullWidthCarousel from "@/components/cardStack/layouts/carousels/FullWidthCarousel";
+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, 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 TestimonialCardEightProps {
+    testimonials: Testimonial[];
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    buttons?: ButtonConfig[];
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    cardClassName?: string;
+    textBoxTitleClassName?: string;
+    textBoxTitleImageWrapperClassName?: string;
+    textBoxTitleImageClassName?: string;
+    textBoxDescriptionClassName?: string;
+    cardImageClassName?: string;
+    cardContentClassName?: string;
+    ratingClassName?: string;
+    nameClassName?: string;
+    roleClassName?: string;
+    companyClassName?: string;
+    carouselClassName?: string;
+    dotsClassName?: string;
+    textBoxClassName?: string;
+    textBoxTagClassName?: string;
+    textBoxButtonContainerClassName?: string;
+    textBoxButtonClassName?: string;
+    textBoxButtonTextClassName?: string;
+}
+
+interface TestimonialCardProps {
+    testimonial: Testimonial;
+    shouldUseLightText: boolean;
+    cardClassName?: string;
+    imageClassName?: string;
+    cardContentClassName?: string;
+    ratingClassName?: string;
+    nameClassName?: string;
+    roleClassName?: string;
+    companyClassName?: string;
+}
+
+const TestimonialCard = memo(({
+    testimonial,
+    shouldUseLightText,
+    cardClassName = "",
+    imageClassName = "",
+    cardContentClassName = "",
+    ratingClassName = "",
+    nameClassName = "",
+    roleClassName = "",
+    companyClassName = "",
+}: TestimonialCardProps) => {
+    return (
+        <div className={cls("relative h-full w-full rounded-theme-capped overflow-hidden", cardClassName)}>
+            <MediaContent
+                imageSrc={testimonial.imageSrc}
+                videoSrc={testimonial.videoSrc}
+                imageAlt={testimonial.imageAlt}
+                videoAriaLabel={testimonial.videoAriaLabel}
+                imageClassName={cls("relative w-full h-full aspect-[10/16] md:aspect-video object-cover !rounded-none", imageClassName)}
+            />
+            <div className={cls("absolute! md:w-20 card backdrop-blur-xs rounded-theme-capped bottom-8 left-8 right-8 md:right-auto p-6", cardContentClassName)}>
+                <div className="w-full min-w-0 flex flex-col gap-1">
+                    <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 leading-[1.1] mt-1", shouldUseLightText ? "text-background" : "text-foreground", nameClassName)}>
+                        {testimonial.name}
+                    </h3>
+
+                    <div className="relative z-1 flex flex-col gap-1">
+                        <p className={cls("text-base leading-[1.1]", shouldUseLightText ? "text-background" : "text-foreground", roleClassName)}>
+                            {testimonial.role}
+                        </p>
+                        <p className={cls("text-base leading-[1.1]", shouldUseLightText ? "text-background" : "text-foreground", companyClassName)}>
+                            {testimonial.company}
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+});
+
+TestimonialCard.displayName = "TestimonialCard";
+
+const TestimonialCardEight = ({
+    testimonials,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    buttons,
+    textboxLayout,
+    useInvertedBackground,
+    ariaLabel = "Testimonials section",
+    className = "",
+    containerClassName = "",
+    cardClassName = "",
+    textBoxTitleClassName = "",
+    textBoxTitleImageWrapperClassName = "",
+    textBoxTitleImageClassName = "",
+    textBoxDescriptionClassName = "",
+    cardImageClassName = "",
+    cardContentClassName = "",
+    ratingClassName = "",
+    nameClassName = "",
+    roleClassName = "",
+    companyClassName = "",
+    carouselClassName = "",
+    dotsClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+}: TestimonialCardEightProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    return (
+        <FullWidthCarousel
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            buttons={buttons}
+            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}
+                    shouldUseLightText={shouldUseLightText}
+                    cardClassName={cardClassName}
+                    imageClassName={cardImageClassName}
+                    cardContentClassName={cardContentClassName}
+                    ratingClassName={ratingClassName}
+                    nameClassName={nameClassName}
+                    roleClassName={roleClassName}
+                    companyClassName={companyClassName}
+                />
+            ))}
+        </FullWidthCarousel>
+    );
+};
+
+TestimonialCardEight.displayName = "TestimonialCardEight";
+
+export default memo(TestimonialCardEight);
diff --git a/src/components/sections/testimonial/TestimonialCardEleven.tsx b/src/components/sections/testimonial/TestimonialCardEleven.tsx
new file mode 100644
index 0000000..8dfb666
--- /dev/null
+++ b/src/components/sections/testimonial/TestimonialCardEleven.tsx
@@ -0,0 +1,175 @@
+"use client";
+
+import { memo } from "react";
+import FullWidthCarousel from "@/components/cardStack/layouts/carousels/FullWidthCarousel";
+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, TitleSegment, TextboxLayout, InvertedBackground } from "@/components/cardStack/types";
+
+const MASK_GRADIENT = "linear-gradient(to bottom, transparent, black 60%)";
+
+type Testimonial = {
+    id: string;
+    nameTitle: string;
+    quote: string;
+    imageSrc?: string;
+    videoSrc?: string;
+    imageAlt?: string;
+    videoAriaLabel?: string;
+};
+
+interface TestimonialCardElevenProps {
+    testimonials: Testimonial[];
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    buttons?: ButtonConfig[];
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    cardClassName?: string;
+    cardTitleClassName?: string;
+    cardQuoteClassName?: string;
+    cardImageClassName?: string;
+    carouselClassName?: string;
+    dotsClassName?: string;
+    textBoxClassName?: string;
+    textBoxTitleClassName?: string;
+    textBoxTitleImageWrapperClassName?: string;
+    textBoxTitleImageClassName?: string;
+    textBoxDescriptionClassName?: string;
+    textBoxTagClassName?: string;
+    textBoxButtonContainerClassName?: string;
+    textBoxButtonClassName?: string;
+    textBoxButtonTextClassName?: string;
+}
+
+interface TestimonialCardProps {
+    testimonial: Testimonial;
+    useInvertedBackground: "noInvert" | "invertDefault" | "invertCard";
+    isActive?: boolean;
+    cardClassName?: string;
+    titleClassName?: string;
+    quoteClassName?: string;
+    imageClassName?: string;
+}
+
+const TestimonialCard = memo(({
+    testimonial,
+    useInvertedBackground,
+    isActive = false,
+    cardClassName = "",
+    titleClassName = "",
+    quoteClassName = "",
+    imageClassName = "",
+}: TestimonialCardProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    return (
+        <div className="flex flex-col">
+            <div className={cls("card aspect-square md:aspect-video rounded-theme-capped overflow-hidden relative flex items-end p-6 md:p-8", cardClassName)}>
+                <div className={cls("absolute inset-0 z-10 backdrop-blur-xs bg-background/10 transition-opacity duration-500", isActive ? "opacity-0" : "opacity-100")} />
+                <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
+                    className="absolute left-0 right-0 bottom-0 h-1/2 backdrop-blur-xl opacity-100"
+                    style={{ maskImage: MASK_GRADIENT }}
+                    aria-hidden="true"
+                />
+                <blockquote className={cls("relative z-0 text-lg md:text-2xl text-balance font-medium leading-tight line-clamp-2 text-background", quoteClassName)}>
+                    {testimonial.quote}
+                </blockquote>
+            </div>
+            <h3 className={cls("text-base md:text-xl text-balance font-medium leading-tight mt-4", shouldUseLightText ? "text-background" : "text-foreground", titleClassName)}>
+                {testimonial.nameTitle}
+            </h3>
+        </div>
+    );
+});
+
+TestimonialCard.displayName = "TestimonialCard";
+
+const TestimonialCardEleven = ({
+    testimonials,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    buttons,
+    textboxLayout,
+    useInvertedBackground,
+    ariaLabel = "Testimonials section",
+    className = "",
+    containerClassName = "",
+    cardClassName = "",
+    cardTitleClassName = "",
+    cardQuoteClassName = "",
+    cardImageClassName = "",
+    carouselClassName = "",
+    dotsClassName = "",
+    textBoxClassName = "",
+    textBoxTitleClassName = "",
+    textBoxTitleImageWrapperClassName = "",
+    textBoxTitleImageClassName = "",
+    textBoxDescriptionClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+}: TestimonialCardElevenProps) => {
+    return (
+        <FullWidthCarousel
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            buttons={buttons}
+            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}
+                    titleClassName={cardTitleClassName}
+                    quoteClassName={cardQuoteClassName}
+                    imageClassName={cardImageClassName}
+                />
+            ))}
+        </FullWidthCarousel>
+    );
+};
+
+TestimonialCardEleven.displayName = "TestimonialCardEleven";
+
+export default memo(TestimonialCardEleven);
diff --git a/src/components/sections/testimonial/TestimonialCardFifteen.tsx b/src/components/sections/testimonial/TestimonialCardFifteen.tsx
new file mode 100644
index 0000000..8350938
--- /dev/null
+++ b/src/components/sections/testimonial/TestimonialCardFifteen.tsx
@@ -0,0 +1,117 @@
+"use client";
+
+import React, { memo, 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 type { InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+interface TestimonialCardFifteenProps {
+    testimonial: string;
+    rating: number;
+    author: string;
+    avatars: Avatar[];
+    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,
+    useInvertedBackground,
+    ariaLabel = "Testimonial section",
+    className = "",
+    containerClassName = "",
+    ratingClassName = "",
+    starClassName = "",
+    testimonialClassName = "",
+    avatarGroupClassName = "",
+    avatarClassName = "",
+    avatarImageClassName = "",
+}: TestimonialCardFifteenProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = useInvertedBackground === "invertDefault" || useInvertedBackground === "invertCard";
+    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",
+                useInvertedBackground === "invertCard"
+                    ? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground"
+                    : "w-full",
+                useInvertedBackground === "invertDefault" && "bg-foreground",
+                className
+            )}
+        >
+            <div className={cls("w-content-width mx-auto flex flex-col items-center gap-6", containerClassName)}>
+                <div 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",
+                        shouldUseLightText ? "text-background" : "text-foreground",
+                        testimonialClassName
+                    )}
+                />
+
+                <p className={cls(
+                    "text-xl text-center mb-1",
+                    shouldUseLightText ? "text-background" : "text-foreground"
+                )}>
+                    {author}
+                </p>
+
+                <AvatarGroup
+                    avatars={avatars}
+                    maxVisible={isMobile ? 3 : 6}
+                    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>
+    );
+};
+
+TestimonialCardFifteen.displayName = "TestimonialCardFifteen";
+
+export default memo(TestimonialCardFifteen);
diff --git a/src/components/sections/testimonial/TestimonialCardFive.tsx b/src/components/sections/testimonial/TestimonialCardFive.tsx
new file mode 100644
index 0000000..5c07ded
--- /dev/null
+++ b/src/components/sections/testimonial/TestimonialCardFive.tsx
@@ -0,0 +1,228 @@
+"use client";
+
+import { memo } from "react";
+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, 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;
+    buttons?: ButtonConfig[];
+    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: "noInvert" | "invertDefault" | "invertCard";
+    cardClassName?: string;
+    tagClassName?: string;
+    titleClassName?: string;
+    quoteClassName?: string;
+    authorClassName?: string;
+    avatarWrapperClassName?: string;
+    avatarClassName?: string;
+    nameClassName?: string;
+    dateClassName?: string;
+    imageClassName?: string;
+}
+
+const TestimonialCard = memo(({
+    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-fit md: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">
+                <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>
+    );
+});
+
+TestimonialCard.displayName = "TestimonialCard";
+
+const TestimonialCardFive = ({
+    testimonials,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    buttons,
+    textboxLayout,
+    useInvertedBackground,
+    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}
+            buttons={buttons}
+            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>
+    );
+};
+
+TestimonialCardFive.displayName = "TestimonialCardFive";
+
+export default memo(TestimonialCardFive);
diff --git a/src/components/sections/testimonial/TestimonialCardFour.tsx b/src/components/sections/testimonial/TestimonialCardFour.tsx
new file mode 100644
index 0000000..afe4359
--- /dev/null
+++ b/src/components/sections/testimonial/TestimonialCardFour.tsx
@@ -0,0 +1,164 @@
+"use client";
+
+import React, { memo } from "react";
+import TimelineHorizontalCardStack from "@/components/cardStack/layouts/timelines/TimelineHorizontalCardStack";
+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, TitleSegment, TextboxLayout, InvertedBackground } from "@/components/cardStack/types";
+
+type Testimonial = {
+    id: string;
+    name: string;
+    role: string;
+    company: string;
+    rating: number;
+    imageAlt?: string;
+    videoAriaLabel?: string;
+} & (
+    | { imageSrc: string; videoSrc?: never }
+    | { videoSrc: string; imageSrc?: never }
+);
+
+interface TestimonialCardFourProps {
+    testimonials: Testimonial[];
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    buttons?: ButtonConfig[];
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    textBoxTitleClassName?: string;
+    textBoxTitleImageWrapperClassName?: string;
+    textBoxTitleImageClassName?: string;
+    textBoxDescriptionClassName?: string;
+    textBoxClassName?: string;
+    textBoxTagClassName?: string;
+    textBoxButtonContainerClassName?: string;
+    textBoxButtonClassName?: string;
+    textBoxButtonTextClassName?: string;
+    cardClassName?: string;
+    progressBarClassName?: string;
+    cardContentClassName?: string;
+    ratingClassName?: string;
+    nameClassName?: string;
+    roleClassName?: string;
+    companyClassName?: string;
+    mediaContainerClassName?: string;
+    mediaClassName?: string;
+}
+
+const TestimonialCardFour = ({
+    testimonials,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    buttons,
+    textboxLayout,
+    useInvertedBackground,
+    ariaLabel = "Testimonials section",
+    className = "",
+    containerClassName = "",
+    textBoxTitleClassName = "",
+    textBoxTitleImageWrapperClassName = "",
+    textBoxTitleImageClassName = "",
+    textBoxDescriptionClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+    cardClassName = "",
+    progressBarClassName = "",
+    cardContentClassName = "",
+    ratingClassName = "",
+    nameClassName = "",
+    roleClassName = "",
+    companyClassName = "",
+    mediaContainerClassName = "",
+    mediaClassName = "",
+}: TestimonialCardFourProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+    const mediaItems = testimonials.map((testimonial) => ({
+        imageSrc: testimonial.imageSrc,
+        videoSrc: testimonial.videoSrc,
+        imageAlt: testimonial.imageAlt || testimonial.name,
+        videoAriaLabel: testimonial.videoAriaLabel || testimonial.name,
+    }));
+
+    return (
+        <TimelineHorizontalCardStack
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            buttons={buttons}
+            textboxLayout={textboxLayout}
+            useInvertedBackground={useInvertedBackground}
+            mediaItems={mediaItems}
+            className={className}
+            containerClassName={containerClassName}
+            titleClassName={textBoxTitleClassName}
+            titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
+            titleImageClassName={textBoxTitleImageClassName}
+            descriptionClassName={textBoxDescriptionClassName}
+            textBoxClassName={textBoxClassName}
+            tagClassName={textBoxTagClassName}
+            buttonContainerClassName={textBoxButtonContainerClassName}
+            buttonClassName={textBoxButtonClassName}
+            buttonTextClassName={textBoxButtonTextClassName}
+            cardClassName={cardClassName}
+            progressBarClassName={progressBarClassName}
+            mediaContainerClassName={mediaContainerClassName}
+            mediaClassName={mediaClassName}
+            ariaLabel={ariaLabel}
+        >
+            {testimonials.map((testimonial, index) => (
+                <div
+                    key={`${testimonial.id}-${index}`}
+                    className={cls("w-full min-h-0 h-fit flex flex-col gap-3", cardContentClassName)}
+                >
+                    <div className={cls("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("text-2xl font-medium leading-[1.1] mt-1", shouldUseLightText ? "text-background" : "text-foreground", nameClassName)}>
+                        {testimonial.name}
+                    </h3>
+
+                    <div className="flex flex-col gap-1">
+                        <p className={cls("text-base leading-[1.1]", shouldUseLightText ? "text-background" : "text-foreground", roleClassName)}>
+                            {testimonial.role}
+                        </p>
+                        <p className={cls("text-base leading-[1.1]", shouldUseLightText ? "text-background" : "text-foreground", companyClassName)}>
+                            {testimonial.company}
+                        </p>
+                    </div>
+                </div>
+            ))}
+        </TimelineHorizontalCardStack>
+    );
+};
+
+TestimonialCardFour.displayName = "TestimonialCardFour";
+
+export default memo(TestimonialCardFour);
diff --git a/src/components/sections/testimonial/TestimonialCardFourteen.tsx b/src/components/sections/testimonial/TestimonialCardFourteen.tsx
new file mode 100644
index 0000000..3f85bf9
--- /dev/null
+++ b/src/components/sections/testimonial/TestimonialCardFourteen.tsx
@@ -0,0 +1,210 @@
+"use client";
+
+import React, { memo } from "react";
+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 } from "lucide-react";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, CardAnimationType, ContainerStyle, 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 TestimonialCardFourteenProps {
+    testimonials: Testimonial[];
+    carouselMode?: "auto" | "buttons";
+    uniformGridCustomHeightClasses?: string;
+    animationType: CardAnimationType;
+    containerStyle: ContainerStyle;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    buttons?: ButtonConfig[];
+    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;
+    contentWrapperClassName?: string;
+    gridClassName?: string;
+    carouselClassName?: string;
+    controlsClassName?: string;
+    textBoxClassName?: string;
+    textBoxTagClassName?: string;
+    textBoxButtonContainerClassName?: string;
+    textBoxButtonClassName?: string;
+    textBoxButtonTextClassName?: string;
+}
+
+interface TestimonialCardProps {
+    testimonial: Testimonial;
+    useInvertedBackground: "noInvert" | "invertDefault" | "invertCard";
+    cardClassName?: string;
+    imageWrapperClassName?: string;
+    imageClassName?: string;
+    iconClassName?: string;
+    nameClassName?: string;
+    handleClassName?: string;
+    testimonialClassName?: string;
+    contentWrapperClassName?: string;
+}
+
+const TestimonialCard = memo(({
+    testimonial,
+    useInvertedBackground,
+    cardClassName = "",
+    imageWrapperClassName = "",
+    imageClassName = "",
+    iconClassName = "",
+    nameClassName = "",
+    handleClassName = "",
+    testimonialClassName = "",
+    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 gap-16", cardClassName)}>
+            <div className={cls("flex flex-col gap-5 items-start", contentWrapperClassName)}>
+                <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>
+    );
+});
+
+TestimonialCard.displayName = "TestimonialCard";
+
+const TestimonialCardFourteen = ({
+    testimonials,
+    carouselMode = "buttons",
+    uniformGridCustomHeightClasses = "min-h-none",
+    animationType,
+    containerStyle,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    buttons,
+    textboxLayout,
+    useInvertedBackground,
+    ariaLabel = "Testimonials section",
+    className = "",
+    containerClassName = "",
+    cardClassName = "",
+    textBoxTitleClassName = "",
+    textBoxTitleImageWrapperClassName = "",
+    textBoxTitleImageClassName = "",
+    textBoxDescriptionClassName = "",
+    imageWrapperClassName = "",
+    imageClassName = "",
+    iconClassName = "",
+    nameClassName = "",
+    handleClassName = "",
+    testimonialClassName = "",
+    contentWrapperClassName = "",
+    gridClassName = "",
+    carouselClassName = "",
+    controlsClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+}: TestimonialCardFourteenProps) => {
+    return (
+        <CardStack
+            mode={carouselMode}
+            gridVariant="uniform-all-items-equal"
+            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+            animationType={animationType}
+            containerStyle={containerStyle}
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            buttons={buttons}
+            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}
+                    useInvertedBackground={useInvertedBackground}
+                    cardClassName={cardClassName}
+                    imageWrapperClassName={imageWrapperClassName}
+                    imageClassName={imageClassName}
+                    iconClassName={iconClassName}
+                    nameClassName={nameClassName}
+                    handleClassName={handleClassName}
+                    testimonialClassName={testimonialClassName}
+                    contentWrapperClassName={contentWrapperClassName}
+                />
+            ))}
+        </CardStack>
+    );
+};
+
+TestimonialCardFourteen.displayName = "TestimonialCardFourteen";
+
+export default memo(TestimonialCardFourteen);
diff --git a/src/components/sections/testimonial/TestimonialCardNine.tsx b/src/components/sections/testimonial/TestimonialCardNine.tsx
new file mode 100644
index 0000000..d59e033
--- /dev/null
+++ b/src/components/sections/testimonial/TestimonialCardNine.tsx
@@ -0,0 +1,242 @@
+"use client";
+
+import React, { memo, 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, TitleSegment } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+interface Testimonial {
+    id: string;
+    quote: string;
+    name: string;
+    role: string;
+    imageSrc?: string;
+    videoSrc?: string;
+    imageAlt?: string;
+    videoAriaLabel?: string;
+}
+
+interface TestimonialCardNineProps {
+    testimonials: Testimonial[];
+    variant: "card" | "border";
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    buttons?: ButtonConfig[];
+    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;
+    quoteClassName?: string;
+    nameClassName?: string;
+    roleClassName?: string;
+    navigationClassName?: string;
+    navigationButtonClassName?: string;
+    mediaCardClassName?: string;
+    mediaClassName?: string;
+}
+
+const TestimonialCardNine = ({
+    testimonials,
+    variant,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    buttons,
+    textboxLayout,
+    useInvertedBackground,
+    ariaLabel = "Testimonials section",
+    className = "",
+    containerClassName = "",
+    textBoxTitleClassName = "",
+    textBoxDescriptionClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+    titleImageWrapperClassName = "",
+    titleImageClassName = "",
+    contentClassName = "",
+    quoteCardClassName = "",
+    quoteClassName = "",
+    nameClassName = "",
+    roleClassName = "",
+    navigationClassName = "",
+    navigationButtonClassName = "",
+    mediaCardClassName = "",
+    mediaClassName = "",
+}: TestimonialCardNineProps) => {
+    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",
+                useInvertedBackground === "invertCard"
+                    ? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground"
+                    : "w-full",
+                useInvertedBackground === "invertDefault" && "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}
+                    buttons={buttons}
+                    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",
+                    variant === "border" ? "md:grid-cols-[1fr_1px_1fr] md:gap-10" : "md:grid-cols-2",
+                    contentClassName
+                )}>
+                    {variant === "border" && (
+                        <div className={cls(
+                            "w-full h-px md:hidden",
+                            useInvertedBackground !== "noInvert" ? "bg-background/20" : "bg-foreground/20"
+                        )} />
+                    )}
+
+                    <div className={cls(
+                        "flex flex-col justify-between gap-6",
+                        variant === "card" && "card rounded-theme-capped p-6 md:p-10",
+                        quoteCardClassName
+                    )}>
+                        <AnimationContainer key={activeIndex} animationType="fade" className="relative z-1 flex flex-col gap-6">
+                            <blockquote className={cls(
+                                "text-2xl md:text-3xl font-medium leading-tight",
+                                variant === "card"
+                                    ? (shouldUseLightText ? "text-background" : "text-foreground")
+                                    : (useInvertedBackground !== "noInvert" ? "text-background" : "text-foreground"),
+                                quoteClassName
+                            )}>
+                                {activeTestimonial.quote}
+                            </blockquote>
+
+                            <div className="flex flex-col">
+                                <p className={cls(
+                                    "text-lg leading-tight font-medium",
+                                    variant === "card"
+                                        ? (shouldUseLightText ? "text-background" : "text-foreground")
+                                        : (useInvertedBackground !== "noInvert" ? "text-background" : "text-foreground"),
+                                    nameClassName
+                                )}>
+                                    {activeTestimonial.name}
+                                </p>
+                                <p className={cls(
+                                    "text-base leading-tight",
+                                    variant === "card"
+                                        ? (shouldUseLightText ? "text-background/75" : "text-foreground/75")
+                                        : (useInvertedBackground !== "noInvert" ? "text-background/75" : "text-foreground/75"),
+                                    roleClassName
+                                )}>
+                                    {activeTestimonial.role}
+                                </p>
+                            </div>
+                        </AnimationContainer>
+
+                        <div className={cls("relative z-1 flex gap-4 mt-1 md:mt-0", navigationClassName)}>
+                            <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-background" 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-background" strokeWidth={1.5} />
+                            </button>
+                        </div>
+                    </div>
+
+                    {variant === "border" && (
+                        <div className={cls(
+                            "w-full h-px md:w-px md:h-auto md:self-stretch",
+                            useInvertedBackground !== "noInvert" ? "bg-background/20" : "bg-foreground/20"
+                        )} />
+                    )}
+
+                    <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>
+    );
+};
+
+TestimonialCardNine.displayName = "TestimonialCardNine";
+
+export default memo(TestimonialCardNine);
diff --git a/src/components/sections/testimonial/TestimonialCardOne.tsx b/src/components/sections/testimonial/TestimonialCardOne.tsx
new file mode 100644
index 0000000..1f8b505
--- /dev/null
+++ b/src/components/sections/testimonial/TestimonialCardOne.tsx
@@ -0,0 +1,214 @@
+"use client";
+
+import React, { memo } from "react";
+import Image from "next/image";
+import CardStack from "@/components/cardStack/CardStack";
+import { cls } from "@/lib/utils";
+import { Star } from "lucide-react";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, CardAnimationType, GridVariant, ContainerStyle, TitleSegment, TextboxLayout, InvertedBackground } from "@/components/cardStack/types";
+
+type Testimonial = {
+    id: string;
+    name: string;
+    role: string;
+    company: string;
+    rating: number;
+    imageSrc: string;
+    imageAlt?: string;
+};
+
+interface TestimonialCardOneProps {
+    testimonials: Testimonial[];
+    carouselMode?: "auto" | "buttons";
+    uniformGridCustomHeightClasses?: string;
+    gridVariant: GridVariant;
+    animationType: CardAnimationType;
+    containerStyle: ContainerStyle;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    buttons?: ButtonConfig[];
+    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 = memo(({
+    testimonial,
+    cardClassName = "",
+    imageClassName = "",
+    overlayClassName = "",
+    ratingClassName = "",
+    nameClassName = "",
+    roleClassName = "",
+    companyClassName = "",
+}: TestimonialCardProps) => {
+    return (
+        <div className={cls("relative h-full rounded-theme-capped overflow-hidden group", cardClassName)}>
+            <Image
+                src={testimonial.imageSrc}
+                alt={testimonial.imageAlt || testimonial.name}
+                width={800}
+                height={800}
+                className={cls("relative z-1 w-full h-full object-cover!", imageClassName)}
+                unoptimized={testimonial.imageSrc.startsWith('http') || testimonial.imageSrc.startsWith('//')}
+                aria-hidden={testimonial.imageAlt === ""}
+            />
+
+            <div className={cls("!absolute z-1 bottom-6 left-6 right-6 card 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>
+    );
+});
+
+TestimonialCard.displayName = "TestimonialCard";
+
+const TestimonialCardOne = ({
+    testimonials,
+    carouselMode = "buttons",
+    uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",
+    gridVariant,
+    animationType,
+    containerStyle,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    buttons,
+    textboxLayout,
+    useInvertedBackground,
+    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}
+            containerStyle={containerStyle}
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            buttons={buttons}
+            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>
+    );
+};
+
+TestimonialCardOne.displayName = "TestimonialCardOne";
+
+export default memo(TestimonialCardOne);
diff --git a/src/components/sections/testimonial/TestimonialCardSeven.tsx b/src/components/sections/testimonial/TestimonialCardSeven.tsx
new file mode 100644
index 0000000..afc656a
--- /dev/null
+++ b/src/components/sections/testimonial/TestimonialCardSeven.tsx
@@ -0,0 +1,191 @@
+"use client";
+
+import React, { memo } from "react";
+import Image from "next/image";
+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, CardAnimationType, TitleSegment } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+interface TestimonialCard {
+  id: string;
+  companyName: string;
+  companyLogo?: string;
+  companyLogoAlt?: string;
+  quote: string;
+  author: string;
+  buttons?: ButtonConfig[];
+}
+
+interface TestimonialCardSevenProps {
+  testimonials: TestimonialCard[];
+  animationType: CardAnimationType;
+  variant: "card" | "border";
+  title: string;
+  titleSegments?: TitleSegment[];
+  description: string;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  buttons?: ButtonConfig[];
+  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;
+  companyLogoClassName?: string;
+  companyNameClassName?: string;
+  quoteClassName?: string;
+  authorClassName?: string;
+  testimonialButtonClassName?: string;
+  testimonialButtonTextClassName?: string;
+}
+
+const TestimonialCardSeven = ({
+  testimonials,
+  animationType,
+  variant,
+  title,
+  titleSegments,
+  description,
+  tag,
+  tagIcon,
+  buttons,
+  textboxLayout,
+  useInvertedBackground,
+  ariaLabel = "Testimonial section",
+  className = "",
+  containerClassName = "",
+  cardClassName = "",
+  textBoxTitleClassName = "",
+  textBoxDescriptionClassName = "",
+  textBoxClassName = "",
+  textBoxTagClassName = "",
+  textBoxButtonContainerClassName = "",
+  textBoxButtonClassName = "",
+  textBoxButtonTextClassName = "",
+  titleImageWrapperClassName = "",
+  titleImageClassName = "",
+  cardContentClassName = "",
+  companyLogoClassName = "",
+  companyNameClassName = "",
+  quoteClassName = "",
+  authorClassName = "",
+  testimonialButtonClassName = "",
+  testimonialButtonTextClassName = "",
+}: TestimonialCardSevenProps) => {
+  const theme = useTheme();
+  const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+  return (
+    <CardList
+      title={title}
+      titleSegments={titleSegments}
+      description={description}
+      tag={tag}
+      tagIcon={tagIcon}
+      buttons={buttons}
+      textboxLayout={textboxLayout}
+      animationType={animationType}
+      variant={variant}
+      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}
+    >
+      {testimonials.map((testimonial) => (
+        <div
+          key={testimonial.id}
+          className={cls(
+            "relative z-1 w-full min-h-0 h-full flex flex-col md:flex-row gap-6",
+            variant === "card" ? "p-6 md:p-15" : "pb-8 md:pb-10",
+            cardContentClassName
+          )}
+        >
+          <div className="relative z-1 w-full md:w-1/2">
+            {testimonial.companyLogo ? (
+              <Image
+                src={testimonial.companyLogo}
+                alt={testimonial.companyLogoAlt || testimonial.companyName}
+                width={120}
+                height={40}
+                className={cls("h-15 w-auto object-contain", companyLogoClassName)}
+                unoptimized={testimonial.companyLogo.startsWith('http') || testimonial.companyLogo.startsWith('//')}
+              />
+            ) : (
+              <h2 className={cls(
+                "text-6xl font-medium leading-[1.1]",
+                variant === "border"
+                  ? (useInvertedBackground !== "noInvert" && "text-background")
+                  : (shouldUseLightText && "text-background"),
+                companyNameClassName
+              )}>
+                {testimonial.companyName}
+              </h2>
+            )}
+          </div>
+
+          {variant === "card" && <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">
+            <blockquote className={cls(
+              "text-lg md:text-xl leading-[1.4]",
+              variant === "border"
+                ? (useInvertedBackground !== "noInvert" ? "text-background" : "text-foreground")
+                : (shouldUseLightText ? "text-background" : "text-foreground"),
+              quoteClassName
+            )}>
+              {testimonial.quote}
+            </blockquote>
+
+            <p className={cls(
+              "text-sm",
+              variant === "border"
+                ? (useInvertedBackground !== "noInvert" ? "text-background/75" : "text-foreground/75")
+                : (shouldUseLightText ? "text-background/75" : "text-foreground/75"),
+              authorClassName
+            )}>
+              {testimonial.author}
+            </p>
+
+            {testimonial.buttons && testimonial.buttons.length > 0 && (
+              <div className="mt-3 flex gap-4">
+                {testimonial.buttons.slice(0, 2).map((button, index) => (
+                  <Button key={`${button.text}-${index}`} {...getButtonProps(button, index, theme.defaultButtonVariant, testimonialButtonClassName, testimonialButtonTextClassName)} />
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      ))}
+    </CardList>
+  );
+};
+
+TestimonialCardSeven.displayName = "TestimonialCardSeven";
+
+export default memo(TestimonialCardSeven);
diff --git a/src/components/sections/testimonial/TestimonialCardSix.tsx b/src/components/sections/testimonial/TestimonialCardSix.tsx
new file mode 100644
index 0000000..e71e6a8
--- /dev/null
+++ b/src/components/sections/testimonial/TestimonialCardSix.tsx
@@ -0,0 +1,197 @@
+"use client";
+
+import React, { memo } from "react";
+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, 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;
+    buttons?: ButtonConfig[];
+    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: "noInvert" | "invertDefault" | "invertCard";
+    cardClassName?: string;
+    testimonialClassName?: string;
+    imageWrapperClassName?: string;
+    imageClassName?: string;
+    iconClassName?: string;
+    nameClassName?: string;
+    handleClassName?: string;
+}
+
+const TestimonialCard = memo(({
+    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>
+    );
+});
+
+TestimonialCard.displayName = "TestimonialCard";
+
+const TestimonialCardSix = ({
+    testimonials,
+    animationType,
+    title,
+    titleSegments,
+    description,
+    textboxLayout,
+    useInvertedBackground,
+    tag,
+    tagIcon,
+    buttons,
+    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}
+            buttons={buttons}
+            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>
+    );
+};
+
+TestimonialCardSix.displayName = "TestimonialCardSix";
+
+export default memo(TestimonialCardSix);
diff --git a/src/components/sections/testimonial/TestimonialCardTen.tsx b/src/components/sections/testimonial/TestimonialCardTen.tsx
new file mode 100644
index 0000000..9320e67
--- /dev/null
+++ b/src/components/sections/testimonial/TestimonialCardTen.tsx
@@ -0,0 +1,263 @@
+"use client";
+
+import React, { memo, 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, 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[];
+    variant: "card" | "border";
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    buttons?: ButtonConfig[];
+    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,
+    variant,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    buttons,
+    textboxLayout,
+    useInvertedBackground,
+    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",
+                useInvertedBackground === "invertCard"
+                    ? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground"
+                    : "w-full",
+                useInvertedBackground === "invertDefault" && "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}
+                    buttons={buttons}
+                    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",
+                    variant === "border" ? "md:grid-cols-[1fr_1px_1fr] md:gap-10" : "md:grid-cols-2",
+                    contentClassName
+                )}>
+                    {variant === "border" && (
+                        <div className={cls(
+                            "w-full h-px md:hidden",
+                            useInvertedBackground !== "noInvert" ? "bg-background/20" : "bg-foreground/20"
+                        )} />
+                    )}
+
+                    <div className={cls(
+                        "flex flex-col justify-between gap-6",
+                        variant === "card" && "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",
+                                    variant === "card"
+                                        ? (shouldUseLightText ? "text-background" : "text-foreground")
+                                        : (useInvertedBackground !== "noInvert" ? "text-background" : "text-foreground"),
+                                    testimonialTitleClassName
+                                )}>
+                                    {activeTestimonial.title}
+                                </h3>
+
+                                <blockquote className={cls(
+                                    "text-base md:text-lg leading-tight",
+                                    variant === "card"
+                                        ? (shouldUseLightText ? "text-background/75" : "text-foreground/75")
+                                        : (useInvertedBackground !== "noInvert" ? "text-background/75" : "text-foreground/75"),
+                                    quoteClassName
+                                )}>
+                                    &ldquo;{activeTestimonial.quote}&rdquo;
+                                </blockquote>
+                            </div>
+
+                            <div className={cls(
+                                "w-full h-px md:hidden",
+                                variant === "card"
+                                    ? (shouldUseLightText ? "bg-background/20" : "bg-foreground/20")
+                                    : (useInvertedBackground !== "noInvert" ? "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",
+                                        variant === "card"
+                                            ? (shouldUseLightText ? "text-background" : "text-foreground")
+                                            : (useInvertedBackground !== "noInvert" ? "text-background" : "text-foreground"),
+                                        nameClassName
+                                    )}>
+                                        {activeTestimonial.name}
+                                    </p>
+                                    <p className={cls(
+                                        "text-sm leading-tight",
+                                        variant === "card"
+                                            ? (shouldUseLightText ? "text-background/75" : "text-foreground/75")
+                                            : (useInvertedBackground !== "noInvert" ? "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-background" 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-background" strokeWidth={1.5} />
+                                    </button>
+                                </div>
+                            </div>
+                        </AnimationContainer>
+                    </div>
+
+                    {variant === "border" && (
+                        <div className={cls(
+                            "w-full h-px md:w-px md:h-auto md:self-stretch",
+                            useInvertedBackground !== "noInvert" ? "bg-background/20" : "bg-foreground/20"
+                        )} />
+                    )}
+
+                    <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>
+    );
+};
+
+TestimonialCardTen.displayName = "TestimonialCardTen";
+
+export default memo(TestimonialCardTen);
diff --git a/src/components/sections/testimonial/TestimonialCardThirteen.tsx b/src/components/sections/testimonial/TestimonialCardThirteen.tsx
new file mode 100644
index 0000000..cbece6f
--- /dev/null
+++ b/src/components/sections/testimonial/TestimonialCardThirteen.tsx
@@ -0,0 +1,226 @@
+"use client";
+
+import React, { memo } from "react";
+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, CardAnimationType, ContainerStyle, 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[];
+    carouselMode?: "auto" | "buttons";
+    uniformGridCustomHeightClasses?: string;
+    animationType: CardAnimationType;
+    containerStyle: ContainerStyle;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    buttons?: ButtonConfig[];
+    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;
+    useInvertedBackground: "noInvert" | "invertDefault" | "invertCard";
+    cardClassName?: string;
+    imageWrapperClassName?: string;
+    imageClassName?: string;
+    iconClassName?: string;
+    nameClassName?: string;
+    handleClassName?: string;
+    testimonialClassName?: string;
+    ratingClassName?: string;
+    contentWrapperClassName?: string;
+}
+
+const TestimonialCard = memo(({
+    testimonial,
+    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 gap-5", cardClassName)}>
+            <div className={cls("flex flex-col gap-5", contentWrapperClassName)}>
+                <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>
+
+                <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>
+    );
+});
+
+TestimonialCard.displayName = "TestimonialCard";
+
+const TestimonialCardThirteen = ({
+    testimonials,
+    carouselMode = "buttons",
+    uniformGridCustomHeightClasses = "min-h-none",
+    animationType,
+    containerStyle,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    buttons,
+    textboxLayout,
+    useInvertedBackground,
+    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}
+            containerStyle={containerStyle}
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            buttons={buttons}
+            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}
+                    useInvertedBackground={useInvertedBackground}
+                    cardClassName={cardClassName}
+                    imageWrapperClassName={imageWrapperClassName}
+                    imageClassName={imageClassName}
+                    iconClassName={iconClassName}
+                    nameClassName={nameClassName}
+                    handleClassName={handleClassName}
+                    testimonialClassName={testimonialClassName}
+                    ratingClassName={ratingClassName}
+                    contentWrapperClassName={contentWrapperClassName}
+                />
+            ))}
+        </CardStack>
+    );
+};
+
+TestimonialCardThirteen.displayName = "TestimonialCardThirteen";
+
+export default memo(TestimonialCardThirteen);
diff --git a/src/components/sections/testimonial/TestimonialCardThree.tsx b/src/components/sections/testimonial/TestimonialCardThree.tsx
new file mode 100644
index 0000000..424e722
--- /dev/null
+++ b/src/components/sections/testimonial/TestimonialCardThree.tsx
@@ -0,0 +1,200 @@
+"use client";
+
+import React, { memo } from "react";
+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 } from "lucide-react";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, CardAnimationType, ContainerStyle, TitleSegment, TextboxLayout, InvertedBackground } from "@/components/cardStack/types";
+
+type Testimonial = {
+    id: string;
+    name: string;
+    handle: string;
+    testimonial: string;
+    imageSrc?: string;
+    imageAlt?: string;
+    icon?: LucideIcon;
+};
+
+interface TestimonialCardThreeProps {
+    testimonials: Testimonial[];
+    carouselMode?: "auto" | "buttons";
+    uniformGridCustomHeightClasses?: string;
+    animationType: CardAnimationType;
+    containerStyle: ContainerStyle;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    buttons?: ButtonConfig[];
+    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;
+    gridClassName?: string;
+    carouselClassName?: string;
+    controlsClassName?: string;
+    textBoxClassName?: string;
+    textBoxTagClassName?: string;
+    textBoxButtonContainerClassName?: string;
+    textBoxButtonClassName?: string;
+    textBoxButtonTextClassName?: string;
+}
+
+interface TestimonialCardProps {
+    testimonial: Testimonial;
+    useInvertedBackground: "noInvert" | "invertDefault" | "invertCard";
+    cardClassName?: string;
+    imageWrapperClassName?: string;
+    imageClassName?: string;
+    iconClassName?: string;
+    nameClassName?: string;
+    handleClassName?: string;
+    testimonialClassName?: string;
+}
+
+const TestimonialCard = memo(({
+    testimonial,
+    useInvertedBackground,
+    cardClassName = "",
+    imageWrapperClassName = "",
+    imageClassName = "",
+    iconClassName = "",
+    nameClassName = "",
+    handleClassName = "",
+    testimonialClassName = "",
+}: 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 gap-5", cardClassName)}>
+            <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}
+            />
+
+            <p className={cls("relative z-1 text-lg leading-[1.2]", shouldUseLightText ? "text-background" : "text-foreground", testimonialClassName)}>
+                {testimonial.testimonial}
+            </p>
+        </div>
+    );
+});
+
+TestimonialCard.displayName = "TestimonialCard";
+
+const TestimonialCardThree = ({
+    testimonials,
+    carouselMode = "buttons",
+    uniformGridCustomHeightClasses = "min-h-none",
+    animationType,
+    containerStyle,
+    title,
+  titleSegments,
+    description,
+    tag,
+    tagIcon,
+    buttons,
+    textboxLayout,
+    useInvertedBackground,
+    ariaLabel = "Testimonials section",
+    className = "",
+    containerClassName = "",
+    cardClassName = "",
+    textBoxTitleClassName = "",
+  textBoxTitleImageWrapperClassName = "",
+  textBoxTitleImageClassName = "",
+    textBoxDescriptionClassName = "",
+    imageWrapperClassName = "",
+    imageClassName = "",
+    iconClassName = "",
+    nameClassName = "",
+    handleClassName = "",
+    testimonialClassName = "",
+    gridClassName = "",
+    carouselClassName = "",
+    controlsClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+}: TestimonialCardThreeProps) => {
+    return (
+        <CardStack
+            mode={carouselMode}
+            gridVariant="uniform-all-items-equal"
+            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+            animationType={animationType}
+            containerStyle={containerStyle}
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            buttons={buttons}
+            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}
+                    useInvertedBackground={useInvertedBackground}
+                    cardClassName={cardClassName}
+                    imageWrapperClassName={imageWrapperClassName}
+                    imageClassName={imageClassName}
+                    iconClassName={iconClassName}
+                    nameClassName={nameClassName}
+                    handleClassName={handleClassName}
+                    testimonialClassName={testimonialClassName}
+                />
+            ))}
+        </CardStack>
+    );
+};
+
+TestimonialCardThree.displayName = "TestimonialCardThree";
+
+export default memo(TestimonialCardThree);
diff --git a/src/components/sections/testimonial/TestimonialCardTwelve.tsx b/src/components/sections/testimonial/TestimonialCardTwelve.tsx
new file mode 100644
index 0000000..c46288d
--- /dev/null
+++ b/src/components/sections/testimonial/TestimonialCardTwelve.tsx
@@ -0,0 +1,104 @@
+"use client";
+
+import React, { memo, useMemo, useState, useEffect } from "react";
+import AvatarGroup from "@/components/shared/AvatarGroup";
+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 { 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;
+  useInvertedBackground: InvertedBackground;
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  cardClassName?: string;
+  avatarGroupClassName?: string;
+  avatarClassName?: string;
+  cardTitleClassName?: string;
+  cardTagClassName?: string;
+}
+
+const TestimonialCardTwelve = ({
+  testimonials,
+  cardTitle,
+  cardTag,
+  cardTagIcon,
+  useInvertedBackground,
+  ariaLabel = "Testimonials section",
+  className = "",
+  containerClassName = "",
+  cardClassName = "",
+  avatarGroupClassName = "",
+  avatarClassName = "",
+  cardTitleClassName = "",
+  cardTagClassName = "",
+}: TestimonialCardTwelveProps) => {
+  const theme = useTheme();
+  const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const checkMobile = () => setIsMobile(window.innerWidth < 768);
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+    return () => window.removeEventListener("resize", checkMobile);
+  }, []);
+
+  const avatars = useMemo(() =>
+    testimonials.map((testimonial) => ({
+      src: testimonial.imageSrc,
+      alt: testimonial.imageAlt || testimonial.name,
+    })),
+    [testimonials]
+  );
+
+  return (
+    <section
+      aria-label={ariaLabel}
+      className={cls("relative py-20", useInvertedBackground === "invertCard" ? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground" : "w-full", useInvertedBackground === "invertDefault" && "bg-foreground", className)}
+    >
+      <div 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>
+          </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>
+  );
+};
+
+TestimonialCardTwelve.displayName = "TestimonialCardTwelve";
+
+export default memo(TestimonialCardTwelve);
diff --git a/src/components/sections/testimonial/TestimonialCardTwo.tsx b/src/components/sections/testimonial/TestimonialCardTwo.tsx
new file mode 100644
index 0000000..d1fe722
--- /dev/null
+++ b/src/components/sections/testimonial/TestimonialCardTwo.tsx
@@ -0,0 +1,214 @@
+"use client";
+
+import React, { memo } from "react";
+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, CardAnimationType, ContainerStyle, 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: CardAnimationType;
+    containerStyle: ContainerStyle;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    buttons?: ButtonConfig[];
+    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 = memo(({
+    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("w-full h-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-background", 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>
+    );
+});
+
+TestimonialCard.displayName = "TestimonialCard";
+
+const TestimonialCardTwo = ({
+    testimonials,
+    carouselMode = "buttons",
+    uniformGridCustomHeightClasses = "min-h-none",
+    animationType,
+    containerStyle,
+    title,
+  titleSegments,
+    description,
+    tag,
+    tagIcon,
+    buttons,
+    textboxLayout,
+    useInvertedBackground,
+    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 =
+        containerStyle === "card"
+            ? shouldUseInvertedText("invertDefault", theme.cardStyle) || shouldUseInvertedText("invertCard", theme.cardStyle)
+            : shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+    return (
+        <CardStack
+            mode={carouselMode}
+            gridVariant="uniform-all-items-equal"
+            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+            animationType={animationType}
+            containerStyle={containerStyle}
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            buttons={buttons}
+            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>
+    );
+};
+
+TestimonialCardTwo.displayName = "TestimonialCardTwo";
+
+export default memo(TestimonialCardTwo);
diff --git a/src/components/shared/AvatarGroup.tsx b/src/components/shared/AvatarGroup.tsx
new file mode 100644
index 0000000..6b9f989
--- /dev/null
+++ b/src/components/shared/AvatarGroup.tsx
@@ -0,0 +1,89 @@
+"use client";
+
+import { memo } from "react";
+import { cls } from "@/lib/utils";
+import Image from "next/image";
+
+export interface Avatar {
+  src: string;
+  alt: string;
+}
+
+interface AvatarGroupProps {
+  avatars: Avatar[];
+  text?: string;
+  maxVisible?: number;
+  className?: string;
+  avatarClassName?: string;
+  avatarImageClassName?: string;
+  avatarOverlapClassName?: string;
+  textClassName?: string;
+  ariaLabel?: string;
+}
+
+const AvatarGroup = ({
+  avatars,
+  text,
+  maxVisible = 5,
+  className = "",
+  avatarClassName = "",
+  avatarImageClassName = "",
+  avatarOverlapClassName = "-ml-3",
+  textClassName = "",
+  ariaLabel = "User avatars",
+}: AvatarGroupProps) => {
+  const visibleAvatars = avatars.slice(0, maxVisible);
+  const remainingCount = Math.max(0, avatars.length - maxVisible);
+
+  return (
+    <div
+      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-full",
+              index !== 0 && avatarOverlapClassName,
+              `z-[${visibleAvatars.length - index}]`,
+              avatarClassName
+            )}
+          >
+            <div className={cls("relative z-1 h-12 w-auto aspect-square rounded-full overflow-hidden", avatarImageClassName)}>
+              <Image
+                src={avatar.src}
+                alt={avatar.alt}
+                fill
+                className="object-cover"
+              />
+            </div>
+          </div>
+        ))}
+        {remainingCount > 0 && (
+          <div
+            className={cls(
+              `card p-0.5 rounded-full ${avatarOverlapClassName} z-0`,
+              avatarClassName
+            )}
+          >
+            <div className={cls("relative z-1 h-12 w-auto aspect-square rounded-full 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>
+  );
+};
+
+AvatarGroup.displayName = "AvatarGroup";
+
+export default memo(AvatarGroup);
diff --git a/src/components/shared/Badge.tsx b/src/components/shared/Badge.tsx
new file mode 100644
index 0000000..4503393
--- /dev/null
+++ b/src/components/shared/Badge.tsx
@@ -0,0 +1,35 @@
+"use client";
+
+import { memo } from "react";
+import { cls } from "@/lib/utils";
+
+interface BadgeProps {
+    text: string;
+    variant?: "primary" | "card";
+    className?: string;
+}
+
+const Badge = memo(({
+    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-background" : "text-foreground"
+            )}>
+                {text}
+            </p>
+        </div>
+    );
+});
+
+Badge.displayName = "Badge";
+
+export default Badge;
diff --git a/src/components/shared/FavoriteButton.tsx b/src/components/shared/FavoriteButton.tsx
new file mode 100644
index 0000000..90d8aed
--- /dev/null
+++ b/src/components/shared/FavoriteButton.tsx
@@ -0,0 +1,60 @@
+"use client";
+
+import { memo, useState, useCallback } from "react";
+import { Heart } from "lucide-react";
+import { cls } from "@/lib/utils";
+
+interface FavoriteButtonProps {
+    initialFavorited?: boolean;
+    onToggle?: () => void;
+    className?: string;
+}
+
+const FavoriteButton = memo(({
+    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-full 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>
+    );
+});
+
+FavoriteButton.displayName = "FavoriteButton";
+
+export default FavoriteButton;
diff --git a/src/components/shared/FooterColumns.tsx b/src/components/shared/FooterColumns.tsx
new file mode 100644
index 0000000..b69a3ba
--- /dev/null
+++ b/src/components/shared/FooterColumns.tsx
@@ -0,0 +1,62 @@
+"use client";
+
+import { memo } from "react";
+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 = memo<FooterColumnsProps>(function FooterColumns({
+  columns,
+  className = "",
+  columnClassName = "",
+  columnTitleClassName = "",
+  columnItemClassName = "",
+}) {
+  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>
+  );
+});
+
+FooterColumns.displayName = "FooterColumns";
+
+export default FooterColumns;
diff --git a/src/components/shared/Globe.tsx b/src/components/shared/Globe.tsx
new file mode 100644
index 0000000..e5b2d62
--- /dev/null
+++ b/src/components/shared/Globe.tsx
@@ -0,0 +1,201 @@
+"use client";
+
+import React, { 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("--card"),
+  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({ 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>
+  );
+};
+
+GlobeComponent.displayName = "Globe";
+
+export const Globe = React.memo(GlobeComponent);
diff --git a/src/components/shared/MediaContent.tsx b/src/components/shared/MediaContent.tsx
new file mode 100644
index 0000000..c674aeb
--- /dev/null
+++ b/src/components/shared/MediaContent.tsx
@@ -0,0 +1,53 @@
+"use client";
+
+import { memo } from "react";
+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 === ""}
+          />
+        )
+      )}
+    </>
+  );
+};
+
+MediaContent.displayName = "MediaContent";
+
+export default memo(MediaContent);
diff --git a/src/components/shared/OverlayArrowButton.tsx b/src/components/shared/OverlayArrowButton.tsx
new file mode 100644
index 0000000..edd72b5
--- /dev/null
+++ b/src/components/shared/OverlayArrowButton.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import { memo } from "react";
+import { ArrowUpRight } from "lucide-react";
+import { cls } from "@/lib/utils";
+
+interface OverlayArrowButtonProps {
+    ariaLabel?: string;
+    className?: string;
+}
+
+const OverlayArrowButton = memo(({
+    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>
+    );
+});
+
+OverlayArrowButton.displayName = "OverlayArrowButton";
+
+export default OverlayArrowButton;
diff --git a/src/components/shared/PricingBadge.tsx b/src/components/shared/PricingBadge.tsx
new file mode 100644
index 0000000..8af7bf7
--- /dev/null
+++ b/src/components/shared/PricingBadge.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+import { memo } from "react";
+import { cls } from "@/lib/utils";
+import type { LucideIcon } from "lucide-react";
+
+interface PricingBadgeProps {
+    badge: string;
+    badgeIcon?: LucideIcon;
+    className?: string;
+}
+
+const PricingBadge = memo(({
+    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>
+    );
+});
+
+PricingBadge.displayName = "PricingBadge";
+
+export default PricingBadge;
diff --git a/src/components/shared/PricingFeatureList.tsx b/src/components/shared/PricingFeatureList.tsx
new file mode 100644
index 0000000..a6475c9
--- /dev/null
+++ b/src/components/shared/PricingFeatureList.tsx
@@ -0,0 +1,44 @@
+"use client";
+
+import { memo } from "react";
+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 = memo(({
+    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-background", featureIconClassName)} strokeWidth={1.5} />
+                    </div>
+                    <span className={cls("text-base", shouldUseLightText ? "text-background" : "text-foreground", featureTextClassName)}>{feature}</span>
+                </div>
+            ))}
+        </div>
+    );
+});
+
+PricingFeatureList.displayName = "PricingFeatureList";
+
+export default PricingFeatureList;
diff --git a/src/components/shared/ProductImage.tsx b/src/components/shared/ProductImage.tsx
new file mode 100644
index 0000000..765cffd
--- /dev/null
+++ b/src/components/shared/ProductImage.tsx
@@ -0,0 +1,68 @@
+"use client";
+
+import { memo } from "react";
+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 = memo(({
+    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">
+                <Image
+                    src={imageSrc}
+                    alt={imageAlt}
+                    fill
+                    className={cls("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>
+    );
+});
+
+ProductImage.displayName = "ProductImage";
+
+export default ProductImage;
diff --git a/src/components/shared/QuantityButton.tsx b/src/components/shared/QuantityButton.tsx
new file mode 100644
index 0000000..aa99908
--- /dev/null
+++ b/src/components/shared/QuantityButton.tsx
@@ -0,0 +1,25 @@
+"use client";
+
+import { memo } from "react";
+import type { LucideIcon } from "lucide-react";
+
+interface QuantityButtonProps {
+    onClick: (e: React.MouseEvent) => void;
+    ariaLabel: string;
+    Icon: LucideIcon;
+}
+
+const QuantityButton = memo(({ onClick, ariaLabel, Icon }: QuantityButtonProps) => (
+    <button
+        onClick={onClick}
+        className="card h-8 aspect-square rounded-full flex items-center justify-center cursor-pointer"
+        aria-label={ariaLabel}
+        type="button"
+    >
+        <Icon className="relative z-1 h-4/10 text-foreground" strokeWidth={1.5} />
+    </button>
+));
+
+QuantityButton.displayName = "QuantityButton";
+
+export default QuantityButton;
diff --git a/src/components/shared/SocialLinks.tsx b/src/components/shared/SocialLinks.tsx
new file mode 100644
index 0000000..78257fb
--- /dev/null
+++ b/src/components/shared/SocialLinks.tsx
@@ -0,0 +1,50 @@
+"use client";
+
+import { memo } from "react";
+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 = memo<SocialLinksProps>(function SocialLinks({
+  socialLinks,
+  className = "",
+  iconClassName = "",
+}) {
+  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>
+  );
+});
+
+SocialLinks.displayName = "SocialLinks";
+
+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..f214190
--- /dev/null
+++ b/src/components/shared/SvgTextLogo/SvgTextLogo.tsx
@@ -0,0 +1,51 @@
+"use client";
+
+import { memo } from "react";
+import useSvgTextLogo from "./useSvgTextLogo";
+import { cls } from "@/lib/utils";
+
+interface SvgTextLogoProps {
+  logoText: string;
+  adjustHeightFactor?: number;
+  verticalAlign?: "top" | "center";
+  className?: string;
+}
+
+const SvgTextLogo = memo<SvgTextLogoProps>(function SvgTextLogo({
+  logoText,
+  adjustHeightFactor,
+  verticalAlign = "top",
+  className = "",
+}) {
+  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" : "text-before-edge"
+        }}
+      >
+        {logoText}
+      </text>
+    </svg>
+  );
+});
+
+SvgTextLogo.displayName = "SvgTextLogo";
+
+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..2fdf57f
--- /dev/null
+++ b/src/components/shared/Tag.tsx
@@ -0,0 +1,39 @@
+"use client";
+
+import { memo } from "react";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import { LucideIcon } from "lucide-react";
+
+interface TagProps {
+    text: string;
+    icon?: LucideIcon;
+    useInvertedBackground?: "noInvert" | "invertDefault" | "invertCard";
+    className?: string;
+    textClassName?: string;
+}
+
+const Tag = memo(({
+    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>
+    );
+});
+
+Tag.displayName = "Tag";
+
+export default Tag;
diff --git a/src/components/shared/TestimonialAuthor.tsx b/src/components/shared/TestimonialAuthor.tsx
new file mode 100644
index 0000000..ea06626
--- /dev/null
+++ b/src/components/shared/TestimonialAuthor.tsx
@@ -0,0 +1,73 @@
+"use client";
+
+import { memo } from "react";
+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?: "noInvert" | "invertDefault" | "invertCard";
+    className?: string;
+    imageWrapperClassName?: string;
+    imageClassName?: string;
+    iconClassName?: string;
+    nameClassName?: string;
+    subtitleClassName?: string;
+}
+
+const TestimonialAuthor = memo(({
+    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("w-full h-full object-cover  ", imageClassName)}
+                        unoptimized={imageSrc.startsWith('http') || imageSrc.startsWith('//')}
+                        aria-hidden={imageAlt === ""}
+                    />
+                ) : (
+                    <Icon className={cls("h-1/2 w-1/2 text-background", iconClassName)} strokeWidth={1} />
+                )}
+            </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>
+    );
+});
+
+TestimonialAuthor.displayName = "TestimonialAuthor";
+
+export default TestimonialAuthor;
diff --git a/src/components/text/TextAnimation.tsx b/src/components/text/TextAnimation.tsx
new file mode 100644
index 0000000..cffe119
--- /dev/null
+++ b/src/components/text/TextAnimation.tsx
@@ -0,0 +1,286 @@
+"use client";
+
+import { useRef, useEffect, memo } from "react";
+import { gsap } from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+import { SplitText } from "gsap/SplitText";
+import { cls } from "@/lib/utils";
+
+gsap.registerPlugin(ScrollTrigger, SplitText);
+
+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}
+    </Component>
+  );
+};
+
+TextAnimation.displayName = "TextAnimation";
+
+export default memo(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..d413d74
--- /dev/null
+++ b/src/components/text/TextNumberCount.tsx
@@ -0,0 +1,106 @@
+"use client";
+
+import { memo, 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;
+};
+
+TextNumberCount.displayName = "TextNumberCount";
+
+export default memo(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/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/lib/buttonUtils.ts b/src/lib/buttonUtils.ts
new file mode 100644
index 0000000..75fcc7e
--- /dev/null
+++ b/src/lib/buttonUtils.ts
@@ -0,0 +1,88 @@
+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-foreground";
+
+  // Base props shared by all variants
+  const baseProps = {
+    text: button.text,
+    variant,
+    href: button.href,
+    onClick: button.onClick,
+  };
+
+  // Variants with bgClassName (text-stagger, shift-hover)
+  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-foreground" : "primary-button text-background";
+    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-foreground" : "text-background";
+    const hoverTextClass = isPrimary ? "md:group-hover:text-foreground" : "md:group-hover:text-background";
+    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-foreground" : "primary-button text-background";
+    const baseTextClass = isPrimary ? "text-background" : "text-foreground";
+    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/utils.ts b/src/lib/utils.ts
new file mode 100644
index 0000000..f152d0c
--- /dev/null
+++ b/src/lib/utils.ts
@@ -0,0 +1,31 @@
+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: "noInvert" | "invertDefault" | "invertCard" | undefined, cardStyle: CardStyleVariant): boolean {
+  if (!useInvertedBackground || useInvertedBackground === "noInvert") return false;
+
+  const lightCardStyles: CardStyleVariant[] = [
+    "solid-accent-light",
+    "outline",
+    "outline-light",
+    "glass-outline",
+    "glass-outline-light",
+    "elevated-accent-light",
+    "frosted-heavy",
+    "accent-corner-border",
+    "glass-flat",
+    "glass-depth"
+  ];
+
+  return lightCardStyles.includes(cardStyle);
+}
diff --git a/src/providers/themeProvider/ThemeProvider.tsx b/src/providers/themeProvider/ThemeProvider.tsx
new file mode 100644
index 0000000..0a1788b
--- /dev/null
+++ b/src/providers/themeProvider/ThemeProvider.tsx
@@ -0,0 +1,138 @@
+"use client";
+
+import React, { createContext, useContext } from "react";
+import type { ThemeConfig, ThemeProviderProps } from "./config/types";
+import { borderRadiusMap, borderRadiusCappedMap, contentWidthMap, expandedContentWidthMap, baseVwMap, textSizingMap, backgroundComponents, headingFontWeightMap } from "./config/constants";
+import { cardStyleMap, getGradientBorderedPseudo, getNoisePseudo } from "./styles/cardStyles";
+import { primaryButtonStyleMap } from "./styles/primaryButtonStyles";
+import { secondaryButtonStyleMap } from "./styles/secondaryButtonStyles";
+import { detectLightBackground } from "./utils/detectLightBackground";
+
+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: ThemeConfig = {
+    defaultButtonVariant,
+    defaultTextAnimation,
+    borderRadius,
+    contentWidth,
+    sizing,
+    background,
+    cardStyle,
+    primaryButtonStyle,
+    secondaryButtonStyle,
+    headingFontWeight,
+  };
+
+  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 BackgroundComponent = backgroundComponents[background];
+  const headingFontWeightValue = headingFontWeightMap[headingFontWeight];
+
+  const cardStyles = cardStyleMap[cardStyle];
+  const primaryButtonStyles = primaryButtonStyleMap[primaryButtonStyle];
+  const secondaryButtonStyles = secondaryButtonStyleMap[secondaryButtonStyle];
+
+  const gradientBorderedPseudo = getGradientBorderedPseudo(cardStyle);
+  const noisePseudo = getNoisePseudo(cardStyle);
+
+  const styleString = `
+    :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 {
+      ${cardStyles}
+    }
+    ${gradientBorderedPseudo}
+    ${noisePseudo}
+    .primary-button {
+      ${primaryButtonStyles}
+    }
+    .secondary-button {
+      ${secondaryButtonStyles}
+    }
+  `;
+
+  // Determine if background is light or dark for AnimatedAuroraBackground
+  const isLightBackground = React.useMemo(() => detectLightBackground(), []);
+
+  return (
+    <ThemeContext.Provider value={themeConfig}>
+      <style>{styleString}</style>
+      {BackgroundComponent && (
+        background === 'animatedAurora' ? (
+          <BackgroundComponent invertColors={isLightBackground} />
+        ) : (
+          <BackgroundComponent />
+        )
+      )}
+      {children}
+    </ThemeContext.Provider>
+  );
+};
diff --git a/src/providers/themeProvider/config/constants.ts b/src/providers/themeProvider/config/constants.ts
new file mode 100644
index 0000000..52ab2ee
--- /dev/null
+++ b/src/providers/themeProvider/config/constants.ts
@@ -0,0 +1,505 @@
+import PlainBackground from "@/components/background/PlainBackground";
+import GridBackround from "@/components/background/GridBackround";
+import DotGridBackground from "@/components/background/DotGridBackground";
+import CircleGradientBackground from "@/components/background/CircleGradientBackground";
+import AuroraBackground from "@/components/background/AuroraBackground";
+import FloatingGradientBackground from "@/components/background/floatingGradientBackground/FloatingGradientBackground";
+import AnimatedGridBackground from "@/components/background/AnimatedGridBackground";
+import AnimatedAuroraBackground from "@/components/background/AnimatedAuroraBackground";
+import FluidBackground from "@/components/background/FluidBackground";
+import RadialGradientBackground from "@/components/background/RadialGradientBackground";
+import NoiseBackground from "@/components/background/NoiseBackground";
+import NoiseGradientBackground from "@/components/background/NoiseGradientBackground";
+import NoiseDiagonalGradientBackground from "@/components/background/NoiseDiagonalGradientBackground";
+import type { BorderRadiusPreset, ContentWidthPreset, SizingPreset, BackgroundType, HeadingFontWeight } from "./types";
+
+/**
+ * Shared component layout and styling type definitions
+ */
+export type TextboxLayout = "default" | "split" | "split-actions" | "split-description" | "inline-image";
+export type InvertedBackground = "noInvert" | "invertDefault" | "invertCard";
+
+export const borderRadiusMap: Record<BorderRadiusPreset, string> = {
+  sharp: "0",
+  rounded: "var(--radius)",
+  soft: "var(--radius-lg)",
+  pill: "var(--radius-full)",
+};
+
+export const borderRadiusCappedMap: Record<BorderRadiusPreset, string> = {
+  sharp: "0",
+  rounded: "var(--radius)",
+  soft: "var(--radius-lg)",
+  pill: "var(--radius-xl)", // Capped at xl instead of full
+};
+
+export const headingFontWeightMap: Record<HeadingFontWeight, string> = {
+  light: "300",
+  normal: "400",
+  medium: "500",
+  semibold: "600",
+  bold: "700",
+  extrabold: "800",
+};
+
+export const contentWidthMap: Record<ContentWidthPreset, { desktop: string; mobile: string }> = {
+  small: {
+    desktop: "clamp(40rem, 70vw, 100rem)",
+    mobile: "80vw",
+  },
+  medium: {
+    desktop: "clamp(40rem, 80vw, 100rem)",
+    mobile: "80vw",
+  },
+  large: {
+    desktop: "clamp(40rem, 90vw, 100rem)",
+    mobile: "90vw",
+  },
+};
+
+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),
+  },
+  medium: {
+    desktop: calculateExpandedWidth(contentWidthMap.medium.desktop),
+    mobile: calculateExpandedWidth(contentWidthMap.medium.mobile),
+  },
+  large: {
+    desktop: calculateExpandedWidth(contentWidthMap.large.desktop),
+    mobile: calculateExpandedWidth(contentWidthMap.large.mobile),
+  },
+};
+
+export const baseVwMap: Record<SizingPreset, { desktop: string; mobile: string }> = {
+  small: {
+    desktop: "clamp(0.5rem, 0.68vw, 1rem)",
+    mobile: "2.55vw",
+  },
+  medium: {
+    desktop: "clamp(0.5rem, 0.8vw, 1rem)",
+    mobile: "3vw",
+  },
+  large: {
+    desktop: "clamp(0.5rem, 0.92vw, 1rem)",
+    mobile: "3.45vw",
+  },
+  mediumSizeExtraLargeTitles: {
+    desktop: "clamp(0.5rem, 0.8vw, 1rem)",
+    mobile: "3vw",
+  },
+  smallSizeLargeTitles: {
+    desktop: "clamp(0.5rem, 0.68vw, 1rem)",
+    mobile: "2.55vw",
+  },
+  largeSizeMediumTitles: {
+    desktop: "clamp(0.5rem, 0.92vw, 1rem)",
+    mobile: "3.45vw",
+  },
+  mediumSizeExtraLargeSpacing: {
+    desktop: "clamp(0.5rem, 1.1vw, 1.2rem)",
+    mobile: "4vw",
+  },
+  mediumSizeExtraSmallSpacing: {
+    desktop: "clamp(0.5rem, 0.6vw, 1rem)",
+    mobile: "2.2vw",
+  },
+  largeSizeExtraLargeSpacing: {
+    desktop: "clamp(0.5rem, 1.1vw, 1.2rem)",
+    mobile: "4vw",
+  },
+};
+
+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 }> = {
+  small: {
+    desktop: {
+      text2xs: "clamp(0.465rem, 0.527vw, 0.62rem)",
+      textXs: "clamp(0.54rem, 0.612vw, 0.72rem)",
+      textSm: "clamp(0.615rem, 0.697vw, 0.82rem)",
+      textBase: "clamp(0.69rem, 0.782vw, 0.92rem)",
+      textLg: "clamp(0.75rem, 0.85vw, 1rem)",
+      textXl: "clamp(0.825rem, 0.935vw, 1.1rem)",
+      text2xl: "clamp(0.975rem, 1.105vw, 1.3rem)",
+      text3xl: "clamp(1.2rem, 1.36vw, 1.6rem)",
+      text4xl: "clamp(1.5rem, 1.7vw, 2rem)",
+      text5xl: "clamp(2.025rem, 2.3375vw, 2.75rem)",
+      text6xl: "clamp(2.475rem, 2.805vw, 3.3rem)",
+      text7xl: "clamp(3rem, 3.4vw, 4rem)",
+      text8xl: "clamp(3.5rem, 3.825vw, 4.5rem)",
+      text9xl: "clamp(5.25rem, 5.95vw, 7rem)",
+    },
+    mobile: {
+      text2xs: "2.125vw",
+      textXs: "2.3375vw",
+      textSm: "2.55vw",
+      textBase: "2.7625vw",
+      textLg: "2.975vw",
+      textXl: "3.6125vw",
+      text2xl: "4.25vw",
+      text3xl: "5.1vw",
+      text4xl: "5.95vw",
+      text5xl: "6.375vw",
+      text6xl: "7.225vw",
+      text7xl: "8.5vw",
+      text8xl: "10.2vw",
+      text9xl: "11.9vw",
+    },
+  },
+  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",
+    },
+  },
+  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",
+    },
+  },
+  mediumSizeExtraLargeTitles: {
+    desktop: {
+      // Small-medium 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: significantly bigger than large preset
+      text5xl: "clamp(2.5rem, 3.5vw, 3.5rem)",
+      text6xl: "clamp(3rem, 4.5vw, 4.5rem)",
+      text7xl: "clamp(4rem, 5.5vw, 5.5rem)",
+      text8xl: "clamp(5rem, 6.5vw, 6.5rem)",
+      text9xl: "clamp(7rem, 9vw, 9rem)",
+    },
+    mobile: {
+      // Small-medium 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: significantly bigger
+      text5xl: "10vw",
+      text6xl: "12vw",
+      text7xl: "14vw",
+      text8xl: "16vw",
+      text9xl: "20vw",
+    },
+  },
+  smallSizeLargeTitles: {
+    desktop: {
+      // Small body text sizes: use small values
+      text2xs: "clamp(0.465rem, 0.527vw, 0.62rem)",
+      textXs: "clamp(0.54rem, 0.612vw, 0.72rem)",
+      textSm: "clamp(0.615rem, 0.697vw, 0.82rem)",
+      textBase: "clamp(0.69rem, 0.782vw, 0.92rem)",
+      textLg: "clamp(0.75rem, 0.85vw, 1rem)",
+      textXl: "clamp(0.825rem, 0.935vw, 1.1rem)",
+      text2xl: "clamp(0.975rem, 1.105vw, 1.3rem)",
+      text3xl: "clamp(1.2rem, 1.36vw, 1.6rem)",
+      text4xl: "clamp(1.5rem, 1.7vw, 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: {
+      // Small body text sizes: use small values
+      text2xs: "2.125vw",
+      textXs: "2.3375vw",
+      textSm: "2.55vw",
+      textBase: "2.7625vw",
+      textLg: "2.975vw",
+      textXl: "3.6125vw",
+      text2xl: "4.25vw",
+      text3xl: "5.1vw",
+      text4xl: "5.95vw",
+      // 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",
+    },
+  },
+  mediumSizeExtraLargeSpacing: {
+    desktop: {
+      // Medium text sizes for all
+      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: {
+      // Medium text sizes for all
+      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",
+    },
+  },
+  mediumSizeExtraSmallSpacing: {
+    desktop: {
+      // Medium text sizes for all
+      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: {
+      // Medium text sizes for all
+      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",
+    },
+  },
+  largeSizeExtraLargeSpacing: {
+    desktop: {
+      // Large text sizes for all
+      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: {
+      // Large text sizes for all
+      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",
+    },
+  },
+};
+
+interface BackgroundComponentProps {
+  className?: string;
+  invertColors?: boolean; // For AnimatedAuroraBackground
+}
+
+export const backgroundComponents: Record<BackgroundType, React.ComponentType<BackgroundComponentProps> | null> = {
+  none: null,
+  plain: PlainBackground,
+  grid: GridBackround,
+  dotGrid: DotGridBackground,
+  circleGradient: CircleGradientBackground,
+  aurora: AuroraBackground,
+  floatingGradient: FloatingGradientBackground,
+  animatedGrid: AnimatedGridBackground,
+  animatedAurora: AnimatedAuroraBackground,
+  fluid: FluidBackground,
+  radialGradient: RadialGradientBackground,
+  noise: NoiseBackground,
+  noiseGradient: NoiseGradientBackground,
+  noiseDiagonalGradient: NoiseDiagonalGradientBackground,
+};
diff --git a/src/providers/themeProvider/config/types.ts b/src/providers/themeProvider/config/types.ts
new file mode 100644
index 0000000..670591a
--- /dev/null
+++ b/src/providers/themeProvider/config/types.ts
@@ -0,0 +1,53 @@
+import type { CTAButtonVariant } from "@/components/button/types";
+import type { AnimationType } from "@/components/text/types";
+
+export type BorderRadiusPreset = "sharp" | "rounded" | "soft" | "pill";
+export type ContentWidthPreset = "small" | "medium" | "large";
+export type SizingPreset = "small" | "medium" | "large" | "mediumSizeExtraLargeTitles" | "smallSizeLargeTitles" | "largeSizeMediumTitles" | "mediumSizeExtraLargeSpacing" | "mediumSizeExtraSmallSpacing" | "largeSizeExtraLargeSpacing";
+export type HeadingFontWeight = "light" | "normal" | "medium" | "semibold" | "bold" | "extrabold";
+export type BackgroundType =
+  | "none"
+  | "plain"
+  | "grid"
+  | "dotGrid"
+  | "circleGradient"
+  | "aurora"
+  | "floatingGradient"
+  | "animatedGrid"
+  | "animatedAurora"
+  | "fluid"
+  | "radialGradient"
+  | "noise"
+  | "noiseGradient"
+  | "noiseDiagonalGradient";
+
+export type CardStyleVariant = "solid" | "solid-accent" | "solid-accent-light" | "outline" | "outline-light" | "glass-outline" | "glass-outline-light" | "elevated" | "elevated-accent" | "elevated-accent-light" | "floating" | "gradient-subtle" | "gradient-mesh" | "gradient-radial" | "frosted-heavy" | "neon-glow" | "accent-corner-border" | "inset" | "spotlight" | "shadow-colored" | "glass-elevated" | "glass-flat" | "glass-depth" | "gradient-bordered" | "solid-bordered" | "layered-gradient" | "noise" | "noise-gradient";
+export type PrimaryButtonStyleVariant = "gradient" | "shadow" | "flat" | "layered-depth" | "radial-glow" | "diagonal-gradient" | "neon-glow-border" | "outline";
+export type SecondaryButtonStyleVariant = "glass" | "outline" | "solid" | "minimal" | "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..59b8400
--- /dev/null
+++ b/src/providers/themeProvider/styles/cardStyles.ts
@@ -0,0 +1,209 @@
+import type { CardStyleVariant } from "../config/types";
+
+export const cardStyleMap: Record<CardStyleVariant, string> = {
+  "solid": `
+    position: relative;
+    background: var(--color-card);
+  `,
+  "solid-accent": `
+    position: relative;
+    background: var(--color-accent);
+  `,
+  "solid-accent-light": `
+    position: relative;
+    background: color-mix(in srgb, var(--color-accent) 25%, transparent);
+  `,
+  "outline": `
+    position: relative;
+    border: 1px solid var(--color-accent);
+  `,
+  "outline-light": `
+    position: relative;
+    border: 1px solid color-mix(in srgb, var(--color-accent) 15%, transparent);
+  `,
+  "glass-outline": `
+    position: relative;
+    backdrop-filter: blur(8px);
+    border: 1px solid var(--color-accent);
+  `,
+  "glass-outline-light": `
+    position: relative;
+    backdrop-filter: blur(8px);
+    border: 1px solid color-mix(in srgb, var(--color-accent) 15%, transparent);
+  `,
+  "elevated": `
+    position: relative;
+    background: var(--color-card);
+    box-shadow: 0 4px 6px -1px color-mix(in srgb, var(--color-foreground) 10%, transparent), 0 2px 4px -2px color-mix(in srgb, var(--color-foreground) 10%, transparent);
+  `,
+  "elevated-accent": `
+    position: relative;
+    background: var(--color-accent);
+    box-shadow: 0 4px 6px -1px color-mix(in srgb, var(--color-foreground) 10%, transparent), 0 2px 4px -2px color-mix(in srgb, var(--color-foreground) 10%, transparent);
+  `,
+  "elevated-accent-light": `
+    position: relative;
+    background: color-mix(in srgb, var(--color-accent) 25%, transparent);
+    box-shadow: 0 4px 6px -1px color-mix(in srgb, var(--color-foreground) 10%, transparent), 0 2px 4px -2px color-mix(in srgb, var(--color-foreground) 10%, transparent);
+  `,
+  "floating": `
+    position: relative;
+    background: var(--color-card);
+    box-shadow: 0 20px 25px -5px color-mix(in srgb, var(--color-foreground) 10%, transparent), 0 8px 10px -6px color-mix(in srgb, var(--color-foreground) 10%, transparent);
+  `,
+  "gradient-subtle": `
+    position: relative;
+    background: linear-gradient(135deg, var(--color-card) 0%, color-mix(in srgb, var(--color-card) 95%, var(--color-accent) 5%) 100%);
+  `,
+  "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) 8%) 0%, var(--color-card) 70%);
+  `,
+  "frosted-heavy": `
+    position: relative;
+    backdrop-filter: blur(20px);
+    background: color-mix(in srgb, var(--color-card) 40%, transparent);
+    border: 1px solid color-mix(in srgb, var(--color-card) 30%, transparent);
+  `,
+  "neon-glow": `
+    position: relative;
+    background: var(--color-card);
+    box-shadow:
+      0 0 20px color-mix(in srgb, var(--color-accent) 15%, transparent),
+      0 0 40px color-mix(in srgb, var(--color-accent) 10%, transparent),
+      0 0 60px color-mix(in srgb, var(--color-accent) 5%, transparent);
+    border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
+  `,
+  "accent-corner-border": `
+    position: relative;
+    backdrop-filter: blur(8px);
+    background: color-mix(in srgb, var(--color-accent) 7.5%, transparent);
+    border-left: 3px solid var(--color-accent);
+    border-bottom: 3px solid var(--color-accent);
+    box-shadow: 0 4px 6px -1px color-mix(in srgb, var(--color-foreground) 10%, transparent), 0 2px 4px -2px color-mix(in srgb, var(--color-foreground) 10%, transparent);
+  `,
+  "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-accent) 15%, transparent),
+      inset -2px -2px 4px color-mix(in srgb, var(--color-background) 20%, transparent);
+  `,
+  "spotlight": `
+    position: relative;
+    background: radial-gradient(ellipse at top, color-mix(in srgb, var(--color-card) 100%, var(--color-accent) 12%) 0%, var(--color-card) 60%);
+  `,
+  "shadow-colored": `
+    position: relative;
+    background: var(--color-card);
+    box-shadow: 0 4px 6px -1px color-mix(in srgb, var(--color-accent) 20%, transparent), 0 2px 4px -2px color-mix(in srgb, var(--color-accent) 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-flat": `
+    position: relative;
+    background: color-mix(in srgb, var(--color-accent) 5%, transparent);
+    backdrop-filter: blur(8px);
+    box-shadow: none;
+    border: 0;
+  `,
+  "glass-depth": `
+    position: relative;
+    background: color-mix(in srgb, var(--color-card) 15%, 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);
+  `,
+  "solid-bordered": `
+    position: relative;
+    background: var(--color-card);
+    border: 1px solid color-mix(in srgb, var(--color-accent) 10%, transparent);
+    box-shadow: none;
+  `,
+  "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);
+  `,
+  "noise": `
+    position: relative;
+    background: var(--color-card);
+  `,
+  "noise-gradient": `
+    position: relative;
+    background: linear-gradient(180deg, color-mix(in srgb, var(--color-card) 100%, var(--color-accent) 20%) -35%, var(--color-card) 65%);
+  `,
+};
+
+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;
+    }
+  `;
+};
+
+export const getNoisePseudo = (cardStyle: CardStyleVariant): string => {
+  if (cardStyle !== "noise" && cardStyle !== "noise-gradient") return '';
+
+  return `
+    .card::after {
+      content: "";
+      position: absolute;
+      pointer-events: none;
+      inset: 0;
+      border-radius: inherit;
+      background-image: url(/images/noise.webp);
+      background-size: 512px;
+      background-repeat: repeat;
+      mix-blend-mode: overlay;
+      opacity: 0.5;
+      z-index: 0;
+    }
+  `;
+};
diff --git a/src/providers/themeProvider/styles/primaryButtonStyles.ts b/src/providers/themeProvider/styles/primaryButtonStyles.ts
new file mode 100644
index 0000000..0374dc1
--- /dev/null
+++ b/src/providers/themeProvider/styles/primaryButtonStyles.ts
@@ -0,0 +1,48 @@
+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) 83%, 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-accent) 40%, transparent);
+  `,
+  flat: `
+    background: var(--color-primary-cta);
+    box-shadow: none;
+  `,
+  "layered-depth": `
+    background: linear-gradient(to bottom, color-mix(in srgb, var(--color-primary-cta) 100%, #ffffff 20%), color-mix(in srgb, var(--color-primary-cta) 100%, #000000 40%));
+    box-shadow:
+      2.10837px 3.16256px 9.48767px color-mix(in srgb, var(--color-accent) 40%, transparent),
+      inset 0 0 1.05419px 3.16256px color-mix(in srgb, var(--color-secondary-cta) 0%, transparent),
+      inset 0 6.32511px 5.27093px color-mix(in srgb, var(--color-accent) 50%, transparent);
+    border: 1px solid color-mix(in srgb, var(--color-primary-cta) 100%, #000000 60%);
+  `,
+  "radial-glow": `
+    background:
+      radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--color-accent) 40%, transparent) 0%, transparent 45%),
+      radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--color-accent) 40%, transparent) 0%, transparent 45%),
+      var(--color-foreground);
+    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) 65%, transparent), var(--color-accent));
+    box-shadow: 2.10837px 3.16256px 9.48767px color-mix(in srgb, var(--color-accent) 30%, transparent);
+  `,
+  "neon-glow-border": `
+    background: var(--color-primary-cta);
+    border: 2px solid var(--color-accent);
+    box-shadow:
+      0 0 10px color-mix(in srgb, var(--color-accent) 40%, transparent),
+      0 0 20px color-mix(in srgb, var(--color-accent) 20%, transparent),
+      inset 0 0 10px color-mix(in srgb, var(--color-accent) 15%, transparent);
+  `,
+  "outline": `
+    background: var(--color-foreground);
+    border: 2px solid var(--color-accent);
+    box-shadow: none;
+  `,
+};
diff --git a/src/providers/themeProvider/styles/secondaryButtonStyles.ts b/src/providers/themeProvider/styles/secondaryButtonStyles.ts
new file mode 100644
index 0000000..c5d1e05
--- /dev/null
+++ b/src/providers/themeProvider/styles/secondaryButtonStyles.ts
@@ -0,0 +1,43 @@
+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);
+  `,
+  outline: `
+    background: var(--color-secondary-cta);
+    box-shadow: none;
+    border: 1px solid color-mix(in srgb, var(--color-accent) 15%, transparent);
+  `,
+  solid: `
+    background: var(--color-secondary-cta);
+    box-shadow: none;
+  `,
+  minimal: `
+    background: color-mix(in srgb, var(--color-secondary-cta) 50%, transparent);
+    box-shadow: none;
+    border: 0;
+  `,
+  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..5c142de
--- /dev/null
+++ b/src/tag/Tag.tsx
@@ -0,0 +1,80 @@
+"use client";
+
+import { memo } from "react";
+import { useTagEffects } from "./useTagEffects";
+
+const Tag = () => {
+    const { shouldShow, handleMouseEnter, handleClick, buttonClassName } = useTagEffects();
+
+    const handleTagClick = () => {
+        window.open('https://webild.io', '_blank');
+    };
+
+    if (!shouldShow) {
+        return null;
+    }
+
+    return (
+        <button
+            className={`fixed z-[99999] bottom-6 right-6 w-fit tag-card h-8 px-3 flex items-center justify-center gap-1 rounded-[6px] text-xs cursor-pointer ${buttonClassName}`}
+            onClick={(e) => handleClick(e, handleTagClick)}
+            onMouseEnter={handleMouseEnter}
+        >
+            <p className="text-foreground font-medium">Made With</p>
+            <svg className="h-[1.25em] w-auto mt-[-2.5%]" version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 67 21" width="67" height="21">
+                <defs>
+                    <clipPath clipPathUnits="userSpaceOnUse" id="cp1">
+                        <path d="m26.44 7.16c1.75 0 3.18 0.62 4.17 1.72 0.99 1.11 1.53 2.68 1.53 4.59v0.98h-8.77v0.04c0 1.06 0.32 1.93 0.88 2.53 0.56 0.6 1.36 0.95 2.35 0.95 1.42 0 2.44-0.71 2.76-1.74l0.03-0.08h2.63l-0.02 0.13c-0.37 2.33-2.58 3.97-5.46 3.97-1.85 0-3.34-0.62-4.37-1.76-1.03-1.13-1.59-2.75-1.59-4.73 0-1.97 0.57-3.62 1.59-4.78 1.02-1.16 2.49-1.82 4.27-1.82zm9.66 2.13c0.8-1.32 2.18-2.1 3.87-2.1 1.59 0 2.92 0.63 3.84 1.77 0.92 1.13 1.43 2.76 1.43 4.74 0 1.99-0.51 3.62-1.43 4.76-0.92 1.13-2.25 1.77-3.85 1.77-1.74 0-3.12-0.8-3.93-2.11v1.9h-2.7v-17.25h2.77zm30.9 10.73h-2.7v-1.89c-0.78 1.29-2.16 2.1-3.89 2.1-1.6 0-2.93-0.64-3.87-1.78-0.93-1.14-1.45-2.77-1.45-4.75 0-1.97 0.52-3.6 1.45-4.74 0.93-1.14 2.26-1.77 3.85-1.77 1.69 0 3.07 0.79 3.83 2.04v-6.45h2.78zm-64-17.16l3.09 13.09 3.54-13.09 0.02-0.09h2.62l0.02 0.09 3.55 13.09 3.09-13.09 0.02-0.09h2.98l-0.03 0.14-4.61 17.03-0.02 0.08h-2.65l-0.03-0.08-3.63-12.67-3.62 12.67-0.02 0.08h-2.67l-0.02-0.08-4.59-17.03-0.04-0.14h2.98zm50.91 17.16h-2.77v-17.24h2.77zm-4.87-0.03h-2.77v-12.63h2.77zm11.87-2.03q0.09 0 0.18 0zm-21.64-8.4c-0.93 0-1.72 0.41-2.29 1.13-0.56 0.72-0.89 1.76-0.89 3.02 0 1.27 0.33 2.31 0.89 3.03 0.57 0.71 1.36 1.12 2.29 1.12 0.97 0 1.75-0.4 2.28-1.1 0.55-0.71 0.85-1.75 0.85-3.05 0-1.29-0.3-2.33-0.85-3.04-0.53-0.71-1.31-1.11-2.28-1.11zm21.81 0c-0.97 0-1.76 0.4-2.31 1.11-0.54 0.71-0.86 1.75-0.86 3.04 0 1.29 0.32 2.33 0.86 3.04 0.55 0.71 1.34 1.11 2.31 1.11 0.95 0 1.73-0.4 2.28-1.12 0.56-0.71 0.88-1.75 0.88-3.03 0-1.27-0.32-2.31-0.88-3.03-0.55-0.71-1.33-1.12-2.28-1.12zm-19.79 7.65q-0.01 0.01-0.03 0.03 0.02-0.02 0.03-0.03zm0.13-0.13h0.01q-0.07 0.07-0.14 0.13 0.07-0.06 0.13-0.13zm16.38-3.37q0 0.45 0.05 0.87-0.02-0.19-0.03-0.39l-0.02-0.48q0.01-0.06 0.01-0.12-0.01 0.06-0.01 0.12zm-12.67 0q0 0.04 0 0.09v-0.09q0-0.23-0.01-0.45zm0 0.36v-0.15q0 0.11-0.01 0.21 0.01-0.03 0.01-0.06zm0-0.15q0-0.06 0-0.12zm-18.69-4.47c-1.68 0-2.87 1.24-3.04 3.01h5.96c-0.05-0.88-0.35-1.62-0.84-2.15-0.5-0.54-1.22-0.86-2.08-0.86zm32.25 1.15l0.11-0.13q0.08-0.09 0.16-0.17-0.14 0.14-0.27 0.3zm0.89-0.77q-0.31 0.17-0.56 0.41 0.07-0.07 0.14-0.13 0.13-0.1 0.27-0.19 0.07-0.05 0.15-0.09zm-0.56 0.41q-0.02 0.02-0.03 0.03 0.01-0.01 0.03-0.03zm-32.75-0.9q0 0 0 0 0 0 0 0zm0.17 0h0.09q-0.05 0-0.09-0.01-0.09 0.01-0.17 0.01 0.08 0 0.17 0zm34.25 8.61q0.09 0.01 0.18 0.01-0.09 0-0.18-0.01zm-0.25-0.04q0.11 0.02 0.21 0.03-0.1-0.01-0.21-0.03zm-2.58-3.28q0.02 0.16 0.05 0.31-0.03-0.15-0.05-0.31zm-12.76-0.11q0.02-0.17 0.02-0.35 0 0.18-0.02 0.35zm12.72-1.3q0 0.07 0 0.14 0-0.07 0-0.14zm0.04-0.36q-0.01 0.05-0.02 0.1 0.01-0.05 0.02-0.1zm0.07-0.49q-0.01 0.09-0.03 0.19 0.02-0.1 0.03-0.19zm0.07-0.29q-0.02 0.08-0.04 0.15 0.02-0.07 0.04-0.15zm0.14-0.44q-0.05 0.12-0.09 0.25 0.04-0.13 0.09-0.25zm0.08-0.21q-0.02 0.05-0.05 0.11 0.03-0.06 0.05-0.11zm0.14-0.31q-0.02 0.04-0.04 0.09 0.02-0.05 0.04-0.09z"/>
+                    </clipPath>
+                    <filter x="-50%" y="-50%" width="200%" height="200%" id="f1"> <feGaussianBlur stdDeviation=".7"/> </filter>
+                    <filter x="-50%" y="-50%" width="200%" height="200%" id="f2"> <feGaussianBlur stdDeviation="2.7"/> </filter>
+                    <linearGradient id="g1" x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.62,1.977,-1.976,.62,47.533,3.611)">
+                        <stop offset="0" stopColor="#0f3da6" stopOpacity="1"/>
+                        <stop offset=".952" stopColor="#3a9aff" stopOpacity="0"/>
+                    </linearGradient>
+                    <linearGradient id="g2" x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.495,2.092,-2.092,.495,46.707,3.06)">
+                        <stop offset=".01" stopColor="#0d50e8" stopOpacity="1"/>
+                        <stop offset=".952" stopColor="#3a9aff" stopOpacity="0"/>
+                    </linearGradient>
+                    <filter x="-50%" y="-50%" width="200%" height="200%" id="f3"> <feGaussianBlur stdDeviation="0"/> </filter>
+                    <linearGradient id="g3" x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1.982,3.688,-3.688,1.982,46.267,2.069)">
+                        <stop offset="0" stopColor="#0f3da6" stopOpacity="0"/>
+                        <stop offset="1" stopColor="#59abff" stopOpacity="1"/>
+                    </linearGradient>
+                    <linearGradient id="g4" x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.606,2.752,-2.752,.606,46.32,2.122)">
+                        <stop offset="0" stopColor="#0f3da6" stopOpacity="0"/>
+                        <stop offset="1" stopColor="#59abff" stopOpacity="1"/>
+                    </linearGradient>
+                </defs>
+                <style>{`.s0 { fill: var(--foreground) } .s1 { filter: url(#f1);fill: #0597ff } .s2 { filter: url(#f2);fill: #0597ff } .s3 { fill: url(#g1) } .s4 { fill: url(#g2) } .s5 { filter: url(#f3);fill: url(#g3) } .s6 { filter: url(#f1);fill: url(#g4) }`}</style>
+                <path className="s0" d="m26.44 7.16c1.75 0 3.18 0.62 4.17 1.72 0.99 1.11 1.53 2.68 1.53 4.59v0.98h-8.77v0.04c0 1.06 0.32 1.93 0.88 2.53 0.56 0.6 1.36 0.95 2.35 0.95 1.42 0 2.44-0.71 2.76-1.74l0.03-0.08h2.63l-0.02 0.13c-0.37 2.33-2.58 3.97-5.46 3.97-1.85 0-3.34-0.62-4.37-1.76-1.03-1.13-1.59-2.75-1.59-4.73 0-1.97 0.57-3.62 1.59-4.78 1.02-1.16 2.49-1.82 4.27-1.82zm9.66 2.13c0.8-1.32 2.18-2.1 3.87-2.1 1.59 0 2.92 0.63 3.84 1.77 0.92 1.13 1.43 2.76 1.43 4.74 0 1.99-0.51 3.62-1.43 4.76-0.92 1.13-2.25 1.77-3.85 1.77-1.74 0-3.12-0.8-3.93-2.11v1.9h-2.7v-17.25h2.77zm30.9 10.73h-2.7v-1.89c-0.78 1.29-2.16 2.1-3.89 2.1-1.6 0-2.93-0.64-3.87-1.78-0.93-1.14-1.45-2.77-1.45-4.75 0-1.97 0.52-3.6 1.45-4.74 0.93-1.14 2.26-1.77 3.85-1.77 1.69 0 3.07 0.79 3.83 2.04v-6.45h2.78zm-64-17.16l3.09 13.09 3.54-13.09 0.02-0.09h2.62l0.02 0.09 3.55 13.09 3.09-13.09 0.02-0.09h2.98l-0.03 0.14-4.61 17.03-0.02 0.08h-2.65l-0.03-0.08-3.63-12.67-3.62 12.67-0.02 0.08h-2.67l-0.02-0.08-4.59-17.03-0.04-0.14h2.98zm50.91 17.16h-2.77v-17.24h2.77zm-4.87-0.03h-2.77v-12.63h2.77zm11.87-2.03q0.09 0 0.18 0zm-0.22-0.02q0.09 0.01 0.18 0.02-0.09-0.01-0.18-0.02zm-0.25-0.03q0.1 0.02 0.21 0.03-0.11-0.01-0.21-0.03zm-21.17-8.35c-0.93 0-1.72 0.41-2.29 1.13-0.56 0.72-0.89 1.76-0.89 3.02 0 1.27 0.33 2.31 0.89 3.03 0.57 0.71 1.36 1.12 2.29 1.12 0.97 0 1.75-0.4 2.28-1.1 0.55-0.71 0.85-1.75 0.85-3.05 0-1.29-0.3-2.33-0.85-3.04-0.53-0.71-1.31-1.11-2.28-1.11zm21.81 0c-0.97 0-1.76 0.4-2.31 1.11-0.54 0.71-0.86 1.75-0.86 3.04 0 1.29 0.32 2.33 0.86 3.04 0.55 0.71 1.34 1.11 2.31 1.11 0.95 0 1.73-0.4 2.28-1.12 0.56-0.71 0.88-1.75 0.88-3.03 0-1.27-0.32-2.31-0.88-3.03-0.55-0.71-1.33-1.12-2.28-1.12zm-19.82 7.68q0.09-0.08 0.16-0.16h0.01q-0.08 0.08-0.17 0.16zm16.6-2.61q0.02 0.16 0.05 0.3-0.03-0.14-0.05-0.3zm-0.06-0.92q0 0.45 0.05 0.87-0.02-0.19-0.03-0.39l-0.02-0.48q0.01-0.06 0.01-0.12-0.01 0.06-0.01 0.12zm-12.7 0.8q0.01-0.17 0.02-0.34-0.01 0.17-0.02 0.34zm0.03-0.8q0 0.21-0.01 0.42 0-0.03 0.01-0.06v-0.36q0-0.23-0.01-0.45zm12.69-0.49q0 0.07-0.01 0.13 0.01-0.06 0.01-0.13zm0.03-0.36q0 0.05-0.01 0.1 0.01-0.05 0.01-0.1zm0.08-0.49q-0.02 0.09-0.03 0.19 0.01-0.1 0.03-0.19zm-31.49-2.93c-1.68 0-2.87 1.25-3.04 3.02h5.96c-0.05-0.88-0.35-1.62-0.84-2.15-0.51-0.54-1.22-0.87-2.08-0.87zm31.56 2.64q-0.02 0.07-0.04 0.15 0.02-0.08 0.04-0.15zm0.14-0.44q-0.05 0.12-0.09 0.25 0.04-0.13 0.09-0.25zm0.08-0.22q-0.03 0.06-0.05 0.12 0.02-0.06 0.05-0.12zm0.14-0.3q-0.02 0.04-0.04 0.09 0.02-0.05 0.04-0.09zm0.6-0.83q-0.14 0.15-0.27 0.31l0.11-0.13q0.08-0.09 0.16-0.18zm0.61-0.46q-0.32 0.18-0.59 0.44 0.09-0.08 0.18-0.16 0.13-0.11 0.27-0.2 0.07-0.04 0.14-0.08zm-33.3-0.49q0.08-0.01 0.17-0.01l0.09 0.01q-0.05-0.01-0.09-0.01-0.09 0-0.17 0.01z"/>
+                <g id="Clip-Path" clipPath="url(#cp1)">
+                    <g>
+                        <g style={{opacity: .17}}>
+                            <path className="s1" d="m36.14 2.62h-3.58l9.91-9.03 12.33 1.32 8.09 3.75-7.32 4.73c-1.1-0.2-3.42-0.48-3.91 0-0.6 0.61-0.6 2.26-0.77 3.52-0.13 1.02-1.08 0.94-1.54 0.77l-2.92 0.44-0.88 4.3c-0.24-0.17-0.87-0.85-1.49-2.26-0.77-1.76-1.76-2.31-3.35-2.48-1.28-0.13-3.93 0.79-4.57 1.11z"/>
+                        </g>
+                        <g>
+                            <path className="s2" d="m36.14 2.62h-3.58l9.91-9.03 12.33 1.32 8.09 3.75-7.32 4.73c-1.1-0.2-3.42-0.48-3.91 0-0.6 0.61-0.6 2.26-0.77 3.52-0.13 1.02-1.08 0.94-1.54 0.77l-2.92 0.44-0.88 4.3c-0.24-0.17-0.87-0.85-1.49-2.26-0.77-1.76-1.76-2.31-3.35-2.48-1.28-0.13-3.93 0.79-4.57 1.11z"/>
+                        </g>
+                    </g>
+                </g>
+                <g>
+                    <path fillRule="evenodd" className="s3" d="m46.78 5c-0.95-0.45-1.34-1.58-0.89-2.53 0.45-0.95 1.58-1.36 2.52-0.91 0.94 0.44 1.34 1.58 0.89 2.53-0.46 0.95-1.58 1.36-2.52 0.91z"/>
+                </g>
+                <g>
+                    <path fillRule="evenodd" className="s4" d="m46.99 5.1c-0.83-0.39-1.18-1.37-0.79-2.2 0.4-0.82 1.38-1.17 2.2-0.78 0.83 0.39 1.18 1.37 0.79 2.2-0.39 0.82-1.38 1.17-2.2 0.78z"/>
+                </g>
+                <g>
+                    <path fillRule="evenodd" className="s5" d="m47.99 1.98c0.9 0.17 1.5 1.03 1.33 1.93-0.16 0.9-1.02 1.49-1.92 1.32-0.9-0.16-1.49-1.02-1.33-1.92 0.17-0.9 1.03-1.49 1.92-1.33z"/>
+                </g>
+                <g>
+                    <path fillRule="evenodd" className="s6" d="m48.05 2.04c0.9 0.16 1.49 1.02 1.32 1.92-0.16 0.9-1.02 1.49-1.92 1.33-0.9-0.17-1.49-1.03-1.33-1.93 0.17-0.89 1.03-1.49 1.93-1.32z"/>
+                </g>
+            </svg>
+        </button>
+    );
+};
+
+Tag.displayName = "Tag";
+
+export default memo(Tag);
\ No newline at end of file
diff --git a/src/tag/useTagEffects.ts b/src/tag/useTagEffects.ts
new file mode 100644
index 0000000..7f6f8f2
--- /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("/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..55f8b75
--- /dev/null
+++ b/src/types/button.ts
@@ -0,0 +1,28 @@
+import type { CTAButtonVariant, ButtonPropsForVariant } from "@/components/button/types";
+
+/**
+ * Configuration for button components used across sections.
+ *
+ * @property text - Button label text (required, 2-15 characters recommended)
+ * @property onClick - Optional click handler
+ * @property href - Optional link destination (converted to Next.js Link)
+ * @property props - Additional variant-specific props (e.g., iconClassName for icon-arrow)
+ *
+ * @example
+ * ```tsx
+ * const buttons: ButtonConfig[] = [
+ *   { text: "Get Started", href: "/signup" },
+ *   { text: "Learn More", onClick: () => console.log("clicked") }
+ * ];
+ * ```
+ *
+ * @remarks
+ * Button variant (text-stagger, icon-arrow, etc.) is controlled by ThemeProvider.
+ * Do not specify variant in ButtonConfig - it's applied automatically.
+ */
+export interface ButtonConfig {
+  text: string;
+  onClick?: () => void;
+  href?: string;
+  props?: Partial<ButtonPropsForVariant<CTAButtonVariant>>;
+}
diff --git a/src/types/navigation.ts b/src/types/navigation.ts
new file mode 100644
index 0000000..921a1be
--- /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/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/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..af285b2
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,28 @@
+{
+  "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": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}
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