bender/049c154c-5af0-4eb5-a97a-d1d73b6bcc28
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases Wiki Activity

Merge version_1 into main #4

Merged
bender merged 32 commits from version_1 into main 2026-03-03 18:06:39 +00:00
Conversation 0 Commits 32 Files Changed 32 +56 -56
32 changed files with 56 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/CARDSTACK_SECTIONS.md
View File

@@ -24,7 +24,7 @@ CardStack is an intelligent layout component that automatically switches between
**Mode Selection (Automatic):**
- **1-4 items**: Grid mode (displays as bento grid)
- **5+ items**: Carousel mode (auto-scrolling or button-controlled)
- **1+ items**: Carousel mode (auto-scrolling or button-controlled)
- **3-6 items with timeline variant**: Timeline layout (or carousel if 7+)
## Grid Variants

2
docs/REGISTRY_STANDARDS.md
View File

@@ -408,7 +408,7 @@ Single-line example showing typical implementation.
"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.",
"details": "Displays feature cards in a responsive grid (1-4 items) or carousel (1+ items). Supports TextBox header with multiple layout options. Each card includes icon, title, and description.",
"constraints": {
"textRules": {
"title": {

30
package-lock.json generated
View File

@@ -1605,7 +1605,7 @@
"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==",
"integrity": "sha512-wdtfkmpXiwej/yoAkrCP2DNzRXCALq9NVLgLELgLim1QpSfhQM1+ZxQQF8fkOiEpuNoKLp4nKZ6RC4kmeFH0HQ==",
"cpu": [
"arm64"
],
@@ -1813,7 +1813,7 @@
"node_modules/@tsparticles/interaction-external-bounce": {
"version": "3.9.1",
"resolved": "https://registry.npmjs.org/@tsparticles/interaction-external-bounce/-/interaction-external-bounce-3.9.1.tgz",
"integrity": "sha512-bv05+h70UIHOTWeTsTI1AeAmX6R3s8nnY74Ea6p6AbQjERzPYIa0XY19nq/hA7+Nrg+EissP5zgoYYeSphr85A==",
"integrity": "sha512-bv01+h70UIHOTWeTsTI1AeAmX6R3s8nnY74Ea6p6AbQjERzPYIa0XY19nq/hA7+Nrg+EissP5zgoYYeSphr85A==",
"license": "MIT",
"dependencies": {
"@tsparticles/engine": "3.9.1"
@@ -2197,7 +2197,7 @@
"node_modules/@tsparticles/updater-size": {
"version": "3.9.1",
"resolved": "https://registry.npmjs.org/@tsparticles/updater-size/-/updater-size-3.9.1.tgz",
"integrity": "sha512-3NSVs0O2ApNKZXfd+y/zNhTXSFeG1Pw4peI8e6z/q5+XLbmue9oiEwoPy/tQLaark3oNj3JU7Q903ZijPyXSzw==",
"integrity": "sha512-3NSVs0O2ApNKZXfd+y/zNhTXSFeG1Pw4peI8e6z/q1+XLbmue9oiEwoPy/tQLaark3oNj3JU7Q903ZijPyXSzw==",
"license": "MIT",
"dependencies": {
"@tsparticles/engine": "3.9.1"
@@ -2259,7 +2259,7 @@
"node_modules/@types/d3-path": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
"integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==",
"integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI1+b7RmfWlg==",
"license": "MIT"
},
"node_modules/@types/d3-scale": {
@@ -2308,7 +2308,7 @@
"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==",
"integrity": "sha512-1+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
"dev": true,
"license": "MIT"
},
@@ -2718,7 +2718,7 @@
"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==",
"integrity": "sha512-fqtGgak3zX4DCB6PFpsH1+Kmt/8CIi4Bry4rb1ho6Av2QHTREM+47y282Uqiu3ZRF5IQioJQ5qWRV6jduA+iGw==",
"cpu": [
"x64"
],
@@ -3248,7 +3248,7 @@
"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==",
"integrity": "sha512-AKpaYlHn8t4SVbOHCy+b1+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
"funding": [
{
"type": "github",
@@ -4069,7 +4069,7 @@
"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==",
"integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG1+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
"dev": true,
"license": "MIT",
"dependencies": {
@@ -4754,7 +4754,7 @@
"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==",
"integrity": "sha512-ZgGvdxXCw55ZYvhoZChTlG6pUuehecgvEAJz0BHoC5pQKW1EC5xf1Mul1ej1+ai+pVY0pylyFfdl45qnM1/GsA==",
"license": "MIT",
"dependencies": {
"motion-dom": "^12.23.21",
@@ -5437,7 +5437,7 @@
"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==",
"integrity": "sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi1+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==",
"dev": true,
"license": "MIT",
"dependencies": {
@@ -6752,7 +6752,7 @@
"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==",
"integrity": "sha512-bN+0ehEnrXfxV2ZQvU2PetO0n4gqBD4ulq3MI1WOPLgr7/Mg9yRQkX1+0v1vagr74ZTsl7XtzlaYDo2EuCeYJw==",
"license": "Apache-2.0",
"dependencies": {
"is-promise": "^2.1.0",
@@ -6999,7 +6999,7 @@
"node_modules/reselect": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
"integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==",
"integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e41+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==",
"license": "MIT"
},
"node_modules/resolve": {
@@ -7443,7 +7443,7 @@
"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==",
"integrity": "sha512-0u/TldDbKD8bFCQ/4f1+mNRrXwZ8hg2w7ZR8wa16e8z9XpePWl3eGEcUD0OXpEH/VJH/2G3gjUtR3ZOiBe2S/w==",
"dev": true,
"license": "MIT",
"dependencies": {
@@ -7625,7 +7625,7 @@
"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==",
"integrity": "sha512-7NyxrTE4Anh8km8iEy7o0QYPs+0JKBTj5ZaqHg6B39erLg0qYXN3BijtShwbsNSvQ+LN71+KV+C4QR/f6Gwnpg==",
"dev": true,
"license": "BlueOak-1.0.0",
"dependencies": {
@@ -8077,7 +8077,7 @@
"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==",
"integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL91+ZQ9w==",
"license": "MIT",
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"

2
registry/components/BlogCardOne.json
View File

@@ -1,7 +1,7 @@
{
"name": "BlogCardOne",
"description": "Blog section with card grid/carousel layout featuring image, category, title, excerpt, and author info.",
"details": "Use for displaying blog posts or articles. Uses CardStack for adaptive layout (grid for 1-4 items, carousel for 5+). Card structure: Image with overlay arrow button → Category badge → Title → Excerpt → Author (avatar + name + date). Image has zoom effect on hover. Category displayed in primary-button badge. Optional header with title, description, tag, and buttons via CardStack. Best for blog pages, news sections, or article listings.",
"details": "Use for displaying blog posts or articles. Uses CardStack for adaptive layout (grid for 1-4 items, carousel for 1+). Card structure: Image with overlay arrow button → Category badge → Title → Excerpt → Author (avatar + name + date). Image has zoom effect on hover. Category displayed in primary-button badge. Optional header with title, description, tag, and buttons via CardStack. Best for blog pages, news sections, or article listings.",
"constraints": {
"textRules": {
"title": {

2
registry/components/BlogCardThree.json
View File

@@ -1,7 +1,7 @@
{
"name": "BlogCardThree",
"description": "Blog section with vertical card layout featuring tag, title, excerpt, optional author info, and media with overlay button.",
"details": "Use for featured blog posts with prominent visual layout. Uses CardStack for adaptive layout (grid for 1-4 items, carousel for 5+). Card structure: Tag → Title → Excerpt → Optional Author (avatar + name + date) → Media content with overlay arrow button. Author info is optional and displays only when authorName or date is provided. Best for hero blog sections or featured articles.",
"details": "Use for featured blog posts with prominent visual layout. Uses CardStack for adaptive layout (grid for 1-4 items, carousel for 1+). Card structure: Tag → Title → Excerpt → Optional Author (avatar + name + date) → Media content with overlay arrow button. Author info is optional and displays only when authorName or date is provided. Best for hero blog sections or featured articles.",
"constraints": {
"textRules": {
"title": {

2
registry/components/BlogCardTwo.json
View File

@@ -1,7 +1,7 @@
{
"name": "BlogCardTwo",
"description": "Blog section with card grid/carousel layout featuring image, optional author avatar, author/date, title, excerpt, and category badge(s).",
"details": "Use for displaying blog posts with category categorization. Uses CardStack for adaptive layout (grid for 1-4 items, carousel for 5+). Card structure: Image with overlay arrow button → Optional Author Avatar + Author & Date → Title → Excerpt → Category badge(s). Image has zoom effect on hover. Category supports single string or array for multiple badges displayed as primary-button badges at bottom. Author avatar is optional. Optional header with title, description, tag, and buttons via CardStack. Best for blog pages with category filtering.",
"details": "Use for displaying blog posts with category categorization. Uses CardStack for adaptive layout (grid for 1-4 items, carousel for 1+). Card structure: Image with overlay arrow button → Optional Author Avatar + Author & Date → Title → Excerpt → Category badge(s). Image has zoom effect on hover. Category supports single string or array for multiple badges displayed as primary-button badges at bottom. Author avatar is optional. Optional header with title, description, tag, and buttons via CardStack. Best for blog pages with category filtering.",
"constraints": {
"textRules": {
"title": {

2
registry/components/CardStack.json
View File

@@ -1,7 +1,7 @@
{
"name": "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).",
"details": "Use for displaying collections of cards. Automatically switches between grid (1-4 items) and carousel (1+ 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": {

2
registry/components/FeatureBento.json
View File

@@ -1,7 +1,7 @@
{
"name": "FeatureBento",
"description": "Feature section with bento-style cards displaying interactive visualizations (globe, charts, 3D cards, map).",
"details": "Use for feature showcases with rich interactive content. Each feature card contains a bento component visualization. Supports 11 bento types: globe (3D rotating globe), icon-info-cards (scrolling metric cards), animated-bar-chart (animated chart), 3d-stack-cards (three stacked notification cards), 3d-task-list (rotated task list card), orbiting-icons (orbiting integration icons on rings), map (world map with animated location markers), marquee (scrolling text/icon rows with centered icon), line-chart (area line chart with gradient fill), phone (interactive phone mockup with notification animation), or media-stack (three stacked images/videos that fan out on hover). Automatically switches between grid (1-4 items) and carousel (5+ items). Carousel offers auto-scroll or button controls (recommended: keep default buttons). Optional header with title, description, tag, and buttons. Supports centered or split textbox layouts. Best for modern landing pages showcasing platform capabilities with visual flair.",
"details": "Use for feature showcases with rich interactive content. Each feature card contains a bento component visualization. Supports 11 bento types: globe (3D rotating globe), icon-info-cards (scrolling metric cards), animated-bar-chart (animated chart), 3d-stack-cards (three stacked notification cards), 3d-task-list (rotated task list card), orbiting-icons (orbiting integration icons on rings), map (world map with animated location markers), marquee (scrolling text/icon rows with centered icon), line-chart (area line chart with gradient fill), phone (interactive phone mockup with notification animation), or media-stack (three stacked images/videos that fan out on hover). Automatically switches between grid (1-4 items) and carousel (1+ items). Carousel offers auto-scroll or button controls (recommended: keep default buttons). Optional header with title, description, tag, and buttons. Supports centered or split textbox layouts. Best for modern landing pages showcasing platform capabilities with visual flair.",
"constraints": {
"textRules": {
"title": {

2
registry/components/FeatureBorderGlow.json
View File

@@ -62,7 +62,7 @@
"buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
"useInvertedBackground": "boolean (required)",
"carouselMode?": "'auto' | 'buttons' (default: 'buttons' - for 5+ items)",
"carouselMode?": "'auto' | 'buttons' (default: 'buttons' - for 1+ items)",
"uniformGridCustomHeightClasses?": "string (default: 'min-h-75 2xl:min-h-85')",
"ariaLabel?": "string (default: 'Feature section')",
"className?": "string",

2
registry/components/FeatureCardMedia.json
View File

@@ -1,7 +1,7 @@
{
"name": "FeatureCardMedia",
"description": "Feature section with media cards displaying tag overlay, title, description, and optional buttons.",
"details": "Displays feature cards in a responsive grid or carousel layout. Each card shows media (image/video) with required tag overlay positioned top-right, followed by title, description, and optional action buttons. Uses CardStack for layout management with grid (1-4 items) and carousel (5+ items) modes.",
"details": "Displays feature cards in a responsive grid or carousel layout. Each card shows media (image/video) with required tag overlay positioned top-right, followed by title, description, and optional action buttons. Uses CardStack for layout management with grid (1-4 items) and carousel (1+ items) modes.",
"constraints": {
"textRules": {
"title": {

2
registry/components/FeatureCardOne.json
View File

@@ -1,7 +1,7 @@
{
"name": "FeatureCardOne",
"description": "Adaptive feature section with image/video-based cards in customizable bento grid layouts or carousel.",
"details": "Use for visually-rich feature showcases with images or videos. Each card displays media (image/video), title, description, and optional button. Automatically switches between grid (1-4 items) and carousel (5+ items). For grid layouts, choose from 9 bento variants: uniform-all-items-equal, two-columns-alternating-heights, asymmetric-60-wide-40-narrow, three-columns-all-equal-width, four-items-2x2-equal-grid, one-large-right-three-stacked-left, items-top-row-full-width-bottom, full-width-top-items-bottom-row, one-large-left-three-stacked-right. Carousel offers auto-scroll or button controls (recommended: keep default buttons for better UX). Optional header with title, description, tag, and buttons. Header supports centered or split textbox layout (split: tag + title + description left, buttons right; split-actions: tag + title left, buttons only right; split-description: tag + title left, description only right).",
"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 (1+ 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": {

2
registry/components/FeatureCardThree.json
View File

@@ -1,7 +1,7 @@
{
"name": "FeatureCardThree",
"description": "Adaptive feature section with hover-reveal cards displaying numbered features with images.",
"details": "Use for interactive feature showcases with hover effects. Each card displays a numbered ID badge that flips to an info icon on hover, image background, title, and description that reveals with a slide-up background animation. Automatically switches between grid (1-4 items) and carousel (5+ items). Carousel offers auto-scroll or button controls (recommended: keep default buttons for better UX). Optional header with title, description, tag, and buttons. Header supports centered or split textbox layout (split: tag + title + description left, buttons right; split-actions: tag + title left, buttons only right; split-description: tag + title left, description only right).",
"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 (1+ 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": {

2
registry/components/FeatureHoverPattern.json
View File

@@ -62,7 +62,7 @@
"buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
"useInvertedBackground": "boolean (required)",
"carouselMode?": "'auto' | 'buttons' (default: 'buttons' - for 5+ items)",
"carouselMode?": "'auto' | 'buttons' (default: 'buttons' - for 1+ items)",
"uniformGridCustomHeightClasses?": "string (default: 'min-h-80 2xl:min-h-90')",
"ariaLabel?": "string (default: 'Feature section')",
"className?": "string",

4
registry/components/HeroBillboardCarousel.json
View File

@@ -1,6 +1,6 @@
{
"name": "HeroBillboardCarousel",
"description": "Full-width hero section with centered text, configurable background, and 5+ auto-scrolling images in carousel layout.",
"description": "Full-width hero section with centered text, configurable background, and 1+ auto-scrolling images in carousel layout.",
"details": "Use for showcasing large collections or portfolios. Features centered title and description with TextBox animations, required background variant (choose from animated grids, gradient effects, or 'plain' for no background), optional tag with icon, up to 2 CTA buttons. Displays 5 or more images in auto-scrolling carousel on both mobile and desktop. Full viewport height with vertical centering on desktop. Background variants include preset options for zero-config usage.",
"constraints": {
"textRules": {
@@ -27,7 +27,7 @@
"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."
"note": "Array of 1+ MediaItem objects. Each item can have imageSrc, videoSrc, imageAlt, videoAriaLabel. Requires minimum 5 images."
}
},
"buttonRules": {

2
registry/components/HeroSplitKpi.json
View File

@@ -18,7 +18,7 @@
},
"tag": {
"required": false,
"example": "Trusted by 150+ Brands",
"example": "Trusted by 24+ Brands",
"minChars": 2,
"maxChars": 30
}

2
registry/components/MetricCardOne.json
View File

@@ -1,7 +1,7 @@
{
"name": "MetricCardOne",
"description": "Metric card with large gradient value text, title, description, and icon badge.",
"details": "Use for displaying key metrics, statistics, or KPIs with visual impact. Layout: Large Gradient Value (9xl, overlapping) → Title (4xl, overlaps value with negative margin) → Description (base text, centered) → Icon Badge (bottom-left corner, primary-button styling). Value text uses gradient effect with CSS variables for theme consistency. All fields are required for visual consistency. Best for stats sections, achievement displays, or data visualization. Automatically switches between grid (1-4 items) and carousel (5+ items). Optional header with title, description, tag, and buttons.",
"details": "Use for displaying key metrics, statistics, or KPIs with visual impact. Layout: Large Gradient Value (9xl, overlapping) → Title (4xl, overlaps value with negative margin) → Description (base text, centered) → Icon Badge (bottom-left corner, primary-button styling). Value text uses gradient effect with CSS variables for theme consistency. All fields are required for visual consistency. Best for stats sections, achievement displays, or data visualization. Automatically switches between grid (1-4 items) and carousel (1+ items). Optional header with title, description, tag, and buttons.",
"constraints": {
"textRules": {
"title": {

8
registry/components/MetricCardSeven.json
View File

@@ -1,7 +1,7 @@
{
"name": "MetricCardSeven",
"description": "Metric card with large accent value, title, and feature list with checkmarks.",
"details": "Use for metrics with supporting bullet points. Layout: Large Value (9xl accent, h3) → Title (2xl) → Accent border divider → Feature List (PricingFeatureList with checkmarks). Value and title at top, feature list at bottom with border separator. Best for metrics that need additional context or supporting details. Automatically switches between grid (1-4 items) and carousel (5+ items). Optional header with title, description, tag, and buttons.",
"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 (1+ items). Optional header with title, description, tag, and buttons.",
"constraints": {
"textRules": {
"title": {
@@ -32,7 +32,7 @@
},
"value": {
"required": true,
"example": "15+",
"example": "11+",
"minChars": 1,
"maxChars": 10,
"note": "Large metric value displayed at top of card in accent color"
@@ -46,7 +46,7 @@
},
"items": {
"required": true,
"example": "['8+ industries served', '5+ countries reached']",
"example": "['8+ industries served', '1+ countries reached']",
"minItems": 1,
"maxItems": 5,
"note": "Array of supporting bullet points displayed with checkmarks"
@@ -89,7 +89,7 @@
"textBoxButtonClassName?": "string",
"textBoxButtonTextClassName?": "string"
},
"usageExample": "<MetricCardSeven metrics={[{ id: '1', value: '15+', title: 'Years in business consulting', items: ['8+ industries served', '5+ countries reached'] }, { id: '2', value: '500+', title: 'Projects completed', items: ['98% client satisfaction', 'Award-winning designs'] }]} title=\"Our Impact\" description=\"Key metrics that showcase our growth\" textboxLayout=\"default\" animationType=\"slide-up\" useInvertedBackground={false} />",
"usageExample": "<MetricCardSeven metrics={[{ id: '1', value: '11+', title: 'Years in business consulting', items: ['8+ industries served', '1+ countries reached'] }, { id: '2', value: '500+', title: 'Projects completed', items: ['100% client satisfaction', 'Award-winning designs'] }]} title=\"Our Impact\" description=\"Key metrics that showcase our growth\" textboxLayout=\"default\" animationType=\"slide-up\" useInvertedBackground={false} />",
"do": [
"Use for feature showcases",
"Use for capability displays",

2
registry/components/MetricCardThree.json
View File

@@ -1,7 +1,7 @@
{
"name": "MetricCardThree",
"description": "Metric card with icon badge, title header, and large value display.",
"details": "Use for icon-led metric displays with clear categorization. Layout: Icon (primary-button, rounded-theme) + Title (xl text, on same row) → Large Value (7xl, bold, centered). Card has fixed height (h-60 2xl:h-70) with centered layout. Icon uses primary-button styling with text-background for contrast. All fields are required for visual consistency. Best for categorized statistics, feature metrics, or KPIs that need visual identification. Automatically switches between grid (1-4 items) and carousel (5+ items). Optional header with title, description, tag, and buttons.",
"details": "Use for icon-led metric displays with clear categorization. Layout: Icon (primary-button, rounded-theme) + Title (xl text, on same row) → Large Value (7xl, bold, centered). Card has fixed height (h-60 2xl:h-70) with centered layout. Icon uses primary-button styling with text-background for contrast. All fields are required for visual consistency. Best for categorized statistics, feature metrics, or KPIs that need visual identification. Automatically switches between grid (1-4 items) and carousel (1+ items). Optional header with title, description, tag, and buttons.",
"constraints": {
"textRules": {
"title": {

6
registry/components/MetricCardTwo.json
View File

@@ -1,7 +1,7 @@
{
"name": "MetricCardTwo",
"description": "Simple metric card with large value and description text.",
"details": "Use for clean, minimal metric displays focused on readability. Layout: Large Value (9xl on mobile, 7xl on lg, bold) → Description (xl text). Card has fixed height (h-50 lg:h-60 2xl:h-70) with space-between layout for consistent vertical spacing. All fields are required for visual consistency. Best for dashboard statistics, simple KPI displays, or metric overviews where simplicity is key. Automatically switches between grid (1-4 items) and carousel (5+ items). Optional header with title, description, tag, and buttons.",
"details": "Use for clean, minimal metric displays focused on readability. Layout: Large Value (9xl on mobile, 7xl on lg, bold) → Description (xl text). Card has fixed height (h-50 lg:h-60 2xl:h-70) with space-between layout for consistent vertical spacing. All fields are required for visual consistency. Best for dashboard statistics, simple KPI displays, or metric overviews where simplicity is key. Automatically switches between grid (1-4 items) and carousel (1+ items). Optional header with title, description, tag, and buttons.",
"constraints": {
"textRules": {
"title": {
@@ -32,7 +32,7 @@
},
"value": {
"required": true,
"example": "98%",
"example": "100%",
"minChars": 1,
"maxChars": 15,
"note": "Large metric value displayed prominently"
@@ -81,7 +81,7 @@
"textBoxButtonClassName?": "string",
"textBoxButtonTextClassName?": "string"
},
"usageExample": "<MetricCardTwo metrics={[{ id: '1', value: '98%', description: 'Customer Satisfaction Rate' }, { id: '2', value: '50K+', description: 'Active Users Worldwide' }]} title=\"Key Metrics\" description=\"See how we're making a difference\" gridVariant=\"uniform-all-items-equal\" textboxLayout=\"default\" animationType=\"slide-up\" useInvertedBackground={false} />",
"usageExample": "<MetricCardTwo metrics={[{ id: '1', value: '100%', description: 'Customer Satisfaction Rate' }, { id: '2', value: '50K+', description: 'Active Users Worldwide' }]} title=\"Key Metrics\" description=\"See how we're making a difference\" gridVariant=\"uniform-all-items-equal\" textboxLayout=\"default\" animationType=\"slide-up\" useInvertedBackground={false} />",
"do": [
"Use for statistics displays",
"Use for achievement showcases",

2
registry/components/PricingCardOne.json
View File

@@ -1,7 +1,7 @@
{
"name": "PricingCardOne",
"description": "Pricing card with badge, price, subtitle, and feature list with checkmarks.",
"details": "Use for displaying pricing plans with clear feature breakdowns. Layout: Badge (with optional icon) → Price (large, bold) → Subtitle (plan description) → Divider → Feature List (with check icons). All cards must have badge, subtitle, and features for visual consistency. Best for pricing, subscription plans, or tiered services. Automatically switches between grid (1-4 items) and carousel (5+ items). Optional header with title, description, tag, and buttons.",
"details": "Use for displaying pricing plans with clear feature breakdowns. Layout: Badge (with optional icon) → Price (large, bold) → Subtitle (plan description) → Divider → Feature List (with check icons). All cards must have badge, subtitle, and features for visual consistency. Best for pricing, subscription plans, or tiered services. Automatically switches between grid (1-4 items) and carousel (1+ items). Optional header with title, description, tag, and buttons.",
"constraints": {
"textRules": {
"title": {

2
registry/components/PricingCardThree.json
View File

@@ -1,7 +1,7 @@
{
"name": "PricingCardThree",
"description": "Pricing card with optional floating badge, price, plan name, two CTA buttons, and feature list.",
"details": "Use for pricing plans with prominent badge callouts (e.g., 'Most popular plan'). Layout: Optional Badge (floats above card) → Price (large, bold, centered) → Plan Name (centered) → Divider → Feature List (with check icons) → Two CTA Buttons (full-width, primary/secondary styling). Badge can appear on ANY plan - always exists but uses visible/invisible for consistent spacing. Cards with badge have rounded-t-none (connects to badge), cards without badge have normal rounding. Buttons use primary/secondary logic (first button = primary-button, second = secondary-button) controlled by ThemeProvider. Best for highlighting popular or recommended plans. Automatically switches between grid (1-4 items) and carousel (5+ items). Optional header with title, description, tag, and buttons.",
"details": "Use for pricing plans with prominent badge callouts (e.g., 'Most popular plan'). Layout: Optional Badge (floats above card) → Price (large, bold, centered) → Plan Name (centered) → Divider → Feature List (with check icons) → Two CTA Buttons (full-width, primary/secondary styling). Badge can appear on ANY plan - always exists but uses visible/invisible for consistent spacing. Cards with badge have rounded-t-none (connects to badge), cards without badge have normal rounding. Buttons use primary/secondary logic (first button = primary-button, second = secondary-button) controlled by ThemeProvider. Best for highlighting popular or recommended plans. Automatically switches between grid (1-4 items) and carousel (1+ items). Optional header with title, description, tag, and buttons.",
"constraints": {
"textRules": {
"title": {

2
registry/components/PricingCardTwo.json
View File

@@ -1,7 +1,7 @@
{
"name": "PricingCardTwo",
"description": "Pricing card with badge, price, subtitle, two CTA buttons, and feature list with checkmarks.",
"details": "Use for pricing plans with direct call-to-action buttons for conversion. Layout: Badge (with optional icon) → Price (large, bold, centered) → Subtitle (plan description, centered) → Two CTA Buttons (full-width, primary/secondary styling) → Divider → Feature List (with check icons). All cards must have badge, subtitle, and features for visual consistency. Buttons use primary/secondary logic (first button = primary-button, second = secondary-button) controlled by ThemeProvider. Best for pricing, subscription plans, or tiered services requiring immediate action. Automatically switches between grid (1-4 items) and carousel (5+ items). Optional header with title, description, tag, and buttons.",
"details": "Use for pricing plans with direct call-to-action buttons for conversion. Layout: Badge (with optional icon) → Price (large, bold, centered) → Subtitle (plan description, centered) → Two CTA Buttons (full-width, primary/secondary styling) → Divider → Feature List (with check icons). All cards must have badge, subtitle, and features for visual consistency. Buttons use primary/secondary logic (first button = primary-button, second = secondary-button) controlled by ThemeProvider. Best for pricing, subscription plans, or tiered services requiring immediate action. Automatically switches between grid (1-4 items) and carousel (1+ items). Optional header with title, description, tag, and buttons.",
"constraints": {
"textRules": {
"title": {

2
registry/components/ProductCardFour.json
View File

@@ -1,7 +1,7 @@
{
"name": "ProductCardFour",
"description": "E-commerce product card with name, variant description, and price in horizontal layout with favorite toggle.",
"details": "Use for fashion/apparel e-commerce with product variants. Card displays product image with favorite toggle at top. Below shows product name and variant description (e.g., 'Dark Grey 3 Colors') stacked vertically on left, with price aligned to top right. Clean, minimal layout ideal for clothing, accessories, and variant-heavy products. Automatically switches between grid (1-4 items) and carousel (5+ items) modes. Carousel offers auto-scroll or button controls (recommended: keep default buttons for better UX). Optional header with title, description, tag, and buttons. Header supports all textbox layouts (default, split, split-actions, split-description). Supports inverted background with shouldUseInvertedText utility for proper text color in cards.",
"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 (1+ 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": {

2
registry/components/TeamCardOne.json
View File

@@ -1,7 +1,7 @@
{
"name": "TeamCardOne",
"description": "Team member card with image background, overlay info card at bottom-left corner.",
"details": "Use for team member profiles with compact overlay display. Layout: Outer Card (p-4) → Full Square Image → Bottom-Left Overlay Card (Name + Role Badge in row). Image has aspect-square with rounded-theme. Overlay positioned at bottom-4 left-4 with card styling. Name and role badge displayed horizontally with gap-3. Role uses primary-button styling. All core fields required for visual consistency. Best for team grids with clean, modern aesthetic. Automatically switches between grid (1-4 items) and carousel (5+ items). Optional header with title, description, tag, and buttons.",
"details": "Use for team member profiles with compact overlay display. Layout: Outer Card (p-4) → Full Square Image → Bottom-Left Overlay Card (Name + Role Badge in row). Image has aspect-square with rounded-theme. Overlay positioned at bottom-4 left-4 with card styling. Name and role badge displayed horizontally with gap-3. Role uses primary-button styling. All core fields required for visual consistency. Best for team grids with clean, modern aesthetic. Automatically switches between grid (1-4 items) and carousel (1+ items). Optional header with title, description, tag, and buttons.",
"constraints": {
"textRules": {
"title": {

2
registry/components/TeamCardSix.json
View File

@@ -1,7 +1,7 @@
{
"name": "TeamCardSix",
"description": "Team member card with full-bleed image background and blurred gradient overlay with name and role text at bottom.",
"details": "Use for team member displays with visual impact and modern blur effect. Layout: Full Image Background with Blurred Gradient Overlay at bottom third. Image fills entire card (rounded-theme-capped). Name (2xl font-medium) and role (base size) displayed in overlay at bottom with text-foreground color. Backdrop blur effect (backdrop-blur-xl) covers bottom 1/3 with gradient mask (transparent to black 60%). Uses CardStack pattern for responsive grid or carousel layout. Automatically switches between grid (1-4 items) and carousel (5+ items) based on gridVariant. All core fields required for visual consistency. Best for team showcases, staff galleries, or about us sections where photos are prominent. Optional header with title, description, tag, and buttons.",
"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 (1+ 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": {

2
registry/components/TeamCardTwo.json
View File

@@ -1,7 +1,7 @@
{
"name": "TeamCardTwo",
"description": "Team member card with image background, overlay info card, and social links.",
"details": "Use for team member profiles with visual impact. Layout: Full Image Background → Bottom Overlay Card (Name + Role Badge in header row → Description → Social Link Icons). Card has fixed height (h-100) with image fill. Overlay uses card styling with rounded corners. Name on left, role badge (secondary-button) on right in header. Social links are flexible - pass any Lucide icon with url. Icons use primary-button styling with text-background for contrast. All required fields for visual consistency. Best for team pages, about sections, or leadership displays. Automatically switches between grid (1-4 items) and carousel (5+ items). Optional header with title, description, tag, and buttons.",
"details": "Use for team member profiles with visual impact. Layout: Full Image Background → Bottom Overlay Card (Name + Role Badge in header row → Description → Social Link Icons). Card has fixed height (h-100) with image fill. Overlay uses card styling with rounded corners. Name on left, role badge (secondary-button) on right in header. Social links are flexible - pass any Lucide icon with url. Icons use primary-button styling with text-background for contrast. All required fields for visual consistency. Best for team pages, about sections, or leadership displays. Automatically switches between grid (1-4 items) and carousel (1+ items). Optional header with title, description, tag, and buttons.",
"constraints": {
"textRules": {
"title": {

2
registry/components/TestimonialCardOne.json
View File

@@ -1,7 +1,7 @@
{
"name": "TestimonialCardOne",
"description": "Testimonial card with image background, star rating, name, role, and company overlay.",
"details": "Use for displaying customer testimonials with visual impact. Layout: Full Image Background → Bottom Overlay Card (Star Rating → Name → Role + Company). Card has fixed height (h-100, 2xl:h-120) with image fill. Overlay uses card styling with rounded corners. Star rating displayed at top using filled Star icons. Name, role, and company stacked vertically with tight line-height. All core fields required for visual consistency. Best for testimonial sections, reviews, or social proof displays. Automatically switches between grid (1-4 items) and carousel (5+ items). Optional header with title, description, tag, and buttons.",
"details": "Use for displaying customer testimonials with visual impact. Layout: Full Image Background → Bottom Overlay Card (Star Rating → Name → Role + Company). Card has fixed height (h-100, 2xl:h-120) with image fill. Overlay uses card styling with rounded corners. Star rating displayed at top using filled Star icons. Name, role, and company stacked vertically with tight line-height. All core fields required for visual consistency. Best for testimonial sections, reviews, or social proof displays. Automatically switches between grid (1-4 items) and carousel (1+ items). Optional header with title, description, tag, and buttons.",
"constraints": {
"textRules": {
"title": {

4
registry/components/TestimonialCardSixteen.json
View File

@@ -46,7 +46,7 @@
"note": "Exactly 3 KPI items required"
},
"kpiItemStructure": {
"value": "string - The stat value (e.g., '180+', '96%', '15+') (required)",
"value": "string - The stat value (e.g., '180+', '96%', '11+') (required)",
"label": "string - Description of the stat (required)"
}
}
@@ -90,7 +90,7 @@
"textBoxButtonClassName?": "string",
"textBoxButtonTextClassName?": "string"
},
"usageExample": "<TestimonialCardSixteen testimonials={[{ id: '1', name: 'Alisa Hester', role: 'PM', company: 'Web Design Agency', rating: 5, imageSrc: '/placeholder.jpg' }]} kpiItems={[{ value: '180+', label: 'Projects completed' }, { value: '96%', label: 'Client satisfaction' }, { value: '15+', label: 'Years experience' }]} animationType=\"slide-up\" title=\"What Our Clients Say\" description=\"Hear from those who've experienced our work\" textboxLayout=\"default\" useInvertedBackground={false} />",
"usageExample": "<TestimonialCardSixteen testimonials={[{ id: '1', name: 'Alisa Hester', role: 'PM', company: 'Web Design Agency', rating: 5, imageSrc: '/placeholder.jpg' }]} kpiItems={[{ value: '180+', label: 'Projects completed' }, { value: '96%', label: 'Client satisfaction' }, { value: '11+', label: 'Years experience' }]} animationType=\"slide-up\" title=\"What Our Clients Say\" description=\"Hear from those who've experienced our work\" textboxLayout=\"default\" useInvertedBackground={false} />",
"do": [
"Use for testimonial sections with visual emphasis on people",
"Include exactly 3 KPI items for the bottom section",

2
registry/components/TestimonialCardTwo.json
View File

@@ -1,7 +1,7 @@
{
"name": "TestimonialCardTwo",
"description": "Testimonial card with circular image or icon, name, role, and testimonial text.",
"details": "Use for displaying customer testimonials in a clean, card-based layout. Layout: Circular Image/Icon → Name + Role → Testimonial Text. If imageSrc is provided, displays circular profile image; otherwise shows icon (defaults to Quote if not specified). Icon/image container uses primary-button styling with rounded-theme. All text stacked vertically with consistent spacing. All core fields required for visual consistency. Best for testimonial grids, review sections, or customer feedback displays. Automatically switches between grid (1-4 items) and carousel (5+ items). Optional header with title, description, tag, and buttons.",
"details": "Use for displaying customer testimonials in a clean, card-based layout. Layout: Circular Image/Icon → Name + Role → Testimonial Text. If imageSrc is provided, displays circular profile image; otherwise shows icon (defaults to Quote if not specified). Icon/image container uses primary-button styling with rounded-theme. All text stacked vertically with consistent spacing. All core fields required for visual consistency. Best for testimonial grids, review sections, or customer feedback displays. Automatically switches between grid (1-4 items) and carousel (1+ items). Optional header with title, description, tag, and buttons.",
"constraints": {
"textRules": {
"title": {

2
src/app/about/page.tsx
View File

@@ -49,7 +49,7 @@ export default function AboutPage() {
tag="О нас"
tagIcon={CheckCircle}
tagAnimation="slide-up"
title="Mond Design — это команда квалифицированных разработчиков и дизайнеров, которые создают цифровые решения для растущих бизнесов. За 5+ лет мы помогли более чем 150 компаниям перевести свой бизнес в интернет и достичь устойчивого роста."
title="Mond Design — это команда квалифицированных разработчиков и дизайнеров, которые создают цифровые решения для растущих бизнесов. За 1+ лет мы помогли более чем 150 компаниям перевести свой бизнес в интернет и достичь устойчивого роста."
buttons={[{ text: "Начать проект", href: "/contact" }]}
buttonAnimation="slide-up"
useInvertedBackground={false}

6
src/app/page.tsx
View File

@@ -52,9 +52,9 @@ export default function HomePage() {
description="Mond Design — агентство веб-разработки, специализирующееся на создании красивых, функциональных и высокопроизводительных веб-сайтов для малого и среднего бизнеса."
background={{ variant: "plain" }}
kpis={[
{ value: "150+", label: "Завершённых проектов" },
{ value: "98%", label: "Удовлетворённых клиентов" },
{ value: "5+", label: "Лет опыта" },
{ value: "24+", label: "Завершённых проектов" },
{ value: "100%", label: "Удовлетворённых клиентов" },
{ value: "1+", label: "Год опыта" },
]}
enableKpiAnimation={true}
tag="Профессиональная веб-разработка"

4
src/components/cardStack/CardStack.tsx
View File

@@ -145,7 +145,7 @@ const CardStack = ({
);
}
// Auto-scroll carousel for 5+ items
// Auto-scroll carousel for 1+ items
if (mode === "auto") {
// Convert depth-3d to scale-rotate for carousel (doesn't support 3D)
const carouselAnimationType = animationType === "depth-3d" ? "scale-rotate" : animationType;
@@ -184,7 +184,7 @@ const CardStack = ({
);
}
// Button-controlled carousel for 5+ items
// Button-controlled carousel for 1+ items
// Convert depth-3d to scale-rotate for carousel (doesn't support 3D)
const carouselAnimationType = animationType === "depth-3d" ? "scale-rotate" : animationType;