development/3cf31903-89dc-417c-a299-c73a0ab278be
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
55e71e05cb29fce01a8b640cce401bbb2c94d047
3cf31903-89dc-417c-a299-c73…/registry.json
dk 55e71e05cb Initial commit
2025-12-20 00:28:40 +02:00

13397 lines
726 KiB
JSON
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
{
"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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
"useInvertedBackground?": "'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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
"mediaItems?": "Array<{ imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }>",
"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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
"ariaLabel?": "string (default: 'Timeline 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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
"ariaLabel?": "string (default: 'Timeline phone view section')",
"className?": "string",
"containerClassName?": "string",
"textBoxClassName?": "string",
"titleClassName?": "string",
"titleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
"titleImageClassName?": "string - For styling images in inline-image layout",
"descriptionClassName?": "string",
"tagClassName?": "string",
"buttonContainerClassName?": "string",
"buttonClassName?": "string",
"buttonTextClassName?": "string",
"desktopContainerClassName?": "string",
"mobileContainerClassName?": "string",
"desktopContentClassName?": "string",
"desktopWrapperClassName?": "string",
"mobileWrapperClassName?": "string",
"phoneFrameClassName?": "string",
"mobilePhoneFrameClassName?": "string"
},
"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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
"animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
"ariaLabel?": "string (default: 'Timeline process flow section')",
"className?": "string",
"containerClassName?": "string",
"textBoxClassName?": "string",
"textBoxTitleClassName?": "string",
"textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout",
"textBoxTitleImageClassName?": "string - For styling images in inline-image layout",
"textBoxDescriptionClassName?": "string",
"textBoxTagClassName?": "string",
"textBoxButtonContainerClassName?": "string",
"textBoxButtonClassName?": "string",
"textBoxButtonTextClassName?": "string",
"itemClassName?": "string",
"mediaWrapperClassName?": "string",
"numberClassName?": "string",
"contentWrapperClassName?": "string",
"gapClassName?": "string"
},
"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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"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\" />"
},
{
"import": "import ButtonBounceEffect from '@/components/button/ButtonBounceEffect/ButtonBounceEffect';",
"name": "ButtonBounceEffect",
"path": "@/components/button/ButtonBounceEffect/ButtonBounceEffect",
"description": "CTA button with bouncing character animation on hover.",
"details": "Use for primary or secondary CTAs where playful motion adds personality. On hover, each character bounces with a slight delay creating a wave effect. Includes background styling with bgClassName.",
"constraints": {
"textRules": {
"text": {
"required": true,
"example": "Get Started",
"minChars": 2,
"maxChars": 25
}
}
},
"propsSchema": {
"text": "string",
"onClick?": "() => void",
"href?": "string - External URLs open in new tab, internal values scroll to section",
"className?": "string",
"bgClassName?": "string",
"textClassName?": "string",
"disabled?": "boolean (default: false)",
"ariaLabel?": "string",
"type?": "'button' | 'submit' | 'reset' (default: 'button')"
},
"usage": "<ButtonBounceEffect text=\"Get Started\" href=\"contact\" />"
},
{
"import": "import ButtonDirectionalHover from '@/components/button/ButtonDirectionalHover/ButtonDirectionalHover';",
"name": "ButtonDirectionalHover",
"path": "@/components/button/ButtonDirectionalHover/ButtonDirectionalHover",
"description": "CTA button with a circle that expands from the mouse entry point on hover.",
"details": "Use for CTAs where directional awareness adds visual interest. On hover, a circle expands from where the cursor entered the button, creating a fluid reveal effect. The circleClassName controls the expanding circle color (bg-accent for primary, bg-accent/10 for secondary).",
"constraints": {
"textRules": {
"text": {
"required": true,
"example": "Get Started",
"minChars": 2,
"maxChars": 25
}
}
},
"propsSchema": {
"text": "string",
"onClick?": "() => void",
"href?": "string - External URLs open in new tab, internal values scroll to section",
"className?": "string",
"bgClassName?": "string",
"textClassName?": "string",
"circleClassName?": "string - Controls the expanding circle color",
"disabled?": "boolean (default: false)",
"ariaLabel?": "string",
"type?": "'button' | 'submit' | 'reset' (default: 'button')"
},
"usage": "<ButtonDirectionalHover text=\"Get Started\" href=\"contact\" />"
},
{
"import": "import ButtonElasticEffect from '@/components/button/ButtonElasticEffect/ButtonElasticEffect';",
"name": "ButtonElasticEffect",
"path": "@/components/button/ButtonElasticEffect/ButtonElasticEffect",
"description": "CTA button with elastic scale animation on hover.",
"details": "Use for CTAs where a springy, elastic feel adds playfulness. On hover, the button scales with an elastic easing that overshoots and settles, creating a bouncy tactile response.",
"constraints": {
"textRules": {
"text": {
"required": true,
"example": "Get Started",
"minChars": 2,
"maxChars": 25
}
}
},
"propsSchema": {
"text": "string",
"onClick?": "() => void",
"href?": "string - External URLs open in new tab, internal values scroll to section",
"className?": "string",
"textClassName?": "string",
"disabled?": "boolean (default: false)",
"ariaLabel?": "string",
"type?": "'button' | 'submit' | 'reset' (default: 'button')"
},
"usage": "<ButtonElasticEffect text=\"Get Started\" href=\"contact\" />"
},
{
"import": "import ButtonTextShift from '@/components/button/ButtonTextShift/ButtonTextShift';",
"name": "ButtonTextShift",
"path": "@/components/button/ButtonTextShift/ButtonTextShift",
"description": "CTA button with synchronized character shift animation on hover.",
"details": "Use for primary or secondary CTAs where uniform text motion adds emphasis. Similar to ButtonTextStagger but all characters shift together simultaneously instead of in sequence. Includes background styling with bgClassName.",
"constraints": {
"textRules": {
"text": {
"required": true,
"example": "Get Started",
"minChars": 2,
"maxChars": 25
}
}
},
"propsSchema": {
"text": "string",
"onClick?": "() => void",
"href?": "string - External URLs open in new tab, internal values scroll to section",
"className?": "string",
"bgClassName?": "string",
"textClassName?": "string",
"disabled?": "boolean (default: false)",
"ariaLabel?": "string",
"type?": "'button' | 'submit' | 'reset' (default: 'button')"
},
"usage": "<ButtonTextShift 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": "{text: string, onClick?: () => void, href?: string}",
"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": "{text: string, onClick?: () => void, href?: string}",
"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": "{text: string, onClick?: () => void, href?: string}",
"className?": "string (default: '')",
"buttonClassName?": "string (default: '')",
"buttonTextClassName?": "string (default: '')"
}
},
{
"import": "import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';",
"name": "NavbarStyleFullscreen",
"path": "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen",
"description": "Fullscreen overlay navigation with animated menu reveal and staggered link animations.",
"details": "Use for immersive, design-focused websites where the navigation takes over the entire screen. Features a hamburger button that transforms into an X, clip-path reveal animation for the menu panel, staggered link entrance animations, and a hover effect that dims sibling links. Supports Lenis smooth scrolling.",
"constraints": {
"minLinks": 3,
"maxLinks": 5,
"preferredCount": 5,
"brandRules": {
"required": false,
"minChars": 2,
"maxChars": 20,
"example": "Webild",
"fallbackBehavior": "Shows brandName text 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"
}
},
"bottomTextRules": {
"bottomLeftText": {
"required": false,
"minChars": 2,
"maxChars": 30,
"example": "Global Community"
},
"bottomRightText": {
"required": false,
"minChars": 2,
"maxChars": 30,
"example": "hello@example.com"
}
}
},
"propsSchema": {
"navItems": "Array<{name: string, id: string}>",
"logoSrc?": "string",
"logoAlt?": "string (default: '')",
"brandName?": "string (default: 'Webild')",
"bottomLeftText?": "string (default: 'Global Community')",
"bottomRightText?": "string (default: 'hello@example.com')",
"className?": "string (default: '')",
"topBarClassName?": "string (default: '')"
},
"usage": "<NavbarStyleFullscreen navItems={[{name: 'Home', id: 'home'}, {name: 'About', id: 'about'}, {name: 'Services', id: 'services'}, {name: 'Blog', id: 'blog'}, {name: 'Contact', id: 'contact'}]} bottomLeftText=\"Global Community\" bottomRightText=\"hello@example.com\" />"
},
{
"import": "import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';",
"name": "NavbarStyleCentered",
"path": "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered",
"description": "Centered dropdown navigation with animated expand/collapse and staggered link reveals.",
"details": "Use for compact, elegant navigation that stays out of the way until needed. Features a centered floating card with hamburger toggle, grid-based expand animation for the dropdown, staggered slide-up animations for links with arrow icons, animated separators, and a full-width CTA button at the bottom. Supports Lenis smooth scrolling.",
"constraints": {
"minLinks": 3,
"maxLinks": 6,
"preferredCount": 5,
"brandRules": {
"required": false,
"minChars": 2,
"maxChars": 20,
"example": "Webild",
"fallbackBehavior": "Shows brandName text when logoSrc is not provided"
},
"buttonRules": {
"text": {
"required": true,
"minChars": 2,
"maxChars": 15,
"example": "Get Started"
},
"href": {
"required": false,
"format": "url | section-id",
"example": "contact"
},
"onClick": {
"required": false,
"note": "Optional click handler"
}
},
"linkRules": {
"name": {
"required": true,
"minChars": 2,
"maxChars": 15,
"example": "About"
},
"id": {
"required": true,
"format": "section-id | url",
"examples": [
"about",
"services",
"https://github.com",
"www.example.com"
],
"behavior": "Internal IDs scroll to section, URLs open in new tab"
}
}
},
"propsSchema": {
"navItems": "Array<{name: string, id: string}>",
"button": "{text: string, onClick?: () => void, href?: string}",
"logoSrc?": "string",
"logoAlt?": "string (default: '')",
"brandName?": "string (default: 'Webild')",
"className?": "string (default: '')"
},
"usage": "<NavbarStyleCentered navItems={[{name: 'Home', id: 'home'}, {name: 'About', id: 'about'}, {name: 'Services', id: 'services'}, {name: 'Blog', id: 'blog'}, {name: 'Contact', id: 'contact'}]} button={{text: 'Get Started', href: 'contact'}} />"
}
],
"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?": "Array<{text: string, onClick?: () => void, href?: 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",
"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/services 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 pages highlighting both product visuals and performance 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 leading companies and organizations worldwide",
"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: '500+', label: 'Clients Served' }",
"{ id: '2', value: '10k+', label: 'Projects Completed' }"
],
"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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"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 leading companies worldwide\" metrics={[{ id: '1', value: '500+', label: 'Clients' }, { id: '2', value: '10k+', label: 'Projects' }]} 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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"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": "Array<{text: string, onClick?: () => void, href?: string}>",
"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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"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 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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"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 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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"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 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": "Array<{text: string, onClick?: () => void, href?: string}>",
"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 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": "Array<{text: string, onClick?: () => void, href?: string}>",
"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": "Array<{text: string, onClick?: () => void, href?: string}>",
"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": "Array<{text: string, onClick?: () => void, href?: string}>",
"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": "Array<{text: string, onClick?: () => void, href?: string}>",
"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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"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": "Array<{text: string, onClick?: () => void, href?: string}>",
"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 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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"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 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 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": "We are driven by innovation and a commitment to excellence \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=\"We are driven by innovation and a commitment to excellence \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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"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 TextBox content overlaid on image or video.",
"details": "Use for impactful visual-first about sections where the media is the primary focus with overlaid text content. Features full-width media (image or video) in aspect-video ratio with content-width constraint, rounded corners (theme-capped), and centered TextBox overlay containing title (text-6xl), description, optional tag, and 1-2 CTA buttons. TextBox is constrained to w-content-width md:w-45 for optimal readability. Perfect for hero-like about sections, product showcases, or call-to-action moments where visual impact is key. Section uses standard py-20 padding with useInvertedBackground support for section background.",
"constraints": {
"textRules": {
"title": {
"required": true,
"example": "Elevate Your Experience",
"minChars": 2,
"maxChars": 100
},
"description": {
"required": true,
"example": "Discover a new way to connect, create, and inspire with our innovative solutions.",
"minChars": 10,
"maxChars": 300
},
"tag": {
"required": false,
"example": "About Us",
"minChars": 2,
"maxChars": 30
}
},
"mediaRules": {
"imageSrc": {
"required": false,
"example": "/about-hero.jpg",
"note": "Either imageSrc or videoSrc should be provided. Image is recommended for static visuals."
},
"videoSrc": {
"required": false,
"example": "/about-video.mp4",
"note": "Either imageSrc or videoSrc should be provided. Video is recommended for motion content."
},
"imageAlt": {
"required": false,
"example": "Our team in action",
"note": "Alt text for image. Defaults to empty string (decorative)."
},
"videoAriaLabel": {
"required": false,
"example": "About us video",
"note": "ARIA label for video accessibility."
}
},
"buttonRules": {
"maxButtons": 2,
"minButtons": 0,
"note": "Buttons are part of TextBox, centered and overlaid on media. First button is primary, second is secondary. Button variant controlled by ThemeProvider's defaultButtonVariant."
}
},
"propsSchema": {
"title": "string",
"description": "string",
"tag?": "string",
"tagIcon?": "LucideIcon",
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
"imageSrc?": "string",
"videoSrc?": "string",
"imageAlt?": "string",
"videoAriaLabel?": "string",
"useInvertedBackground": "'noInvert' | 'invertDefault' | 'invertCard'",
"ariaLabel?": "string (default: 'About section')",
"className?": "string",
"textBoxClassName?": "string",
"titleClassName?": "string",
"descriptionClassName?": "string",
"tagClassName?": "string",
"buttonContainerClassName?": "string",
"buttonClassName?": "string",
"buttonTextClassName?": "string",
"mediaWrapperClassName?": "string",
"mediaClassName?": "string"
},
"usage": "<MediaAbout title=\"Elevate Your Experience\" description=\"Discover a new way to connect, create, and inspire.\" tag=\"About Us\" imageSrc=\"/about-hero.jpg\" imageAlt=\"Our team\" buttons={[{ text: 'Shop Now', href: '/shop' }]} useInvertedBackground={\"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 TextBox content 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). TextBox is centered vertically and horizontally with z-10, displaying title (text-6xl), description, optional tag, and 1-2 CTA buttons. 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. Media has rounded-none! to override theme border radius for full-bleed effect.",
"constraints": {
"textRules": {
"title": {
"required": true,
"example": "Elevate Your Experience",
"minChars": 2,
"maxChars": 100
},
"description": {
"required": true,
"example": "Discover a new way to connect, create, and inspire with our innovative solutions.",
"minChars": 10,
"maxChars": 300
},
"tag": {
"required": false,
"example": "About Us",
"minChars": 2,
"maxChars": 30
}
},
"mediaRules": {
"imageSrc": {
"required": false,
"example": "/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,
"note": "Buttons are part of TextBox, centered with z-10 positioning over parallax background. First button is primary, second is secondary. Button variant controlled by ThemeProvider's defaultButtonVariant."
}
},
"propsSchema": {
"title": "string",
"description": "string",
"tag?": "string",
"tagIcon?": "LucideIcon",
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
"imageSrc?": "string",
"videoSrc?": "string",
"imageAlt?": "string",
"videoAriaLabel?": "string",
"ariaLabel?": "string (default: 'About section')",
"className?": "string",
"textBoxClassName?": "string",
"titleClassName?": "string",
"descriptionClassName?": "string",
"tagClassName?": "string",
"buttonContainerClassName?": "string",
"buttonClassName?": "string",
"buttonTextClassName?": "string",
"mediaClassName?": "string"
},
"usage": "<ParallaxAbout title=\"Elevate Your Experience\" description=\"Discover a new way to connect, create, and inspire.\" tag=\"About Us\" 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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"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 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 value 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?": "Array<{text: string, onClick?: () => void, href?: string}> (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=\"Our Services\" description=\"Get even more value with advanced features and capabilities.\" features={[{ id: 'premium-support', title: 'Premium Support', description: 'Get priority access to our dedicated support team with faster response times and personalized assistance.', label: '$99 / month' }, { id: 'advanced-analytics', title: 'Advanced Analytics', description: 'Unlock detailed insights and reporting to help you make better decisions for your business.', label: '$49 / month' }]} 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?": "Array<{text: string, onClick?: () => void, href?: string}> - 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?": "Array<{text: string, onClick?: () => void, href?: string}> - 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 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 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\" />"
}
],
"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?: {text: string, onClick?: () => void, href?: string} } & ({ 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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
"ariaLabel?": "string (default: '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 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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
"ariaLabel?": "string (default: '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 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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
"useInvertedBackground": "'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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
"useInvertedBackground": "'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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
"useInvertedBackground": "'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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
"useInvertedBackground": "'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 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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"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, tier showcases, or service level displays. Uses CardList with variant system for card or border layouts. Layout: Optional TextBox Header → Vertical Stack of Features. Each feature card has horizontal split (md breakpoint): Left side (50%): Large label text (5xl mobile / 6xl desktop). Right side (50%): Title + inline bullet list with accent-colored dots (•) + optional buttons (0-2). Card variant: Items wrapped in cards with full padding (p-6 md:p-15) and mobile divider line. Border variant: Items separated by accent divider lines with bottom padding (pb-6 md:pb-10), no mobile divider. Text colors conditional on variant: border uses useInvertedBackground directly, card uses shouldUseLightText. Supports 0-2 buttons per feature with automatic primary/secondary styling via getButtonProps. Best for pricing tiers, service levels, or feature breakdowns with clear labeling.",
"constraints": {
"textRules": {
"title": {
"required": true,
"example": "Choose Your Plan",
"minChars": 2,
"maxChars": 50
},
"description": {
"required": true,
"example": "Find the perfect fit for your needs",
"minChars": 5,
"maxChars": 300
},
"tag": {
"required": false,
"example": "Plans",
"minChars": 2,
"maxChars": 30
}
},
"featureRules": {
"id": {
"required": true,
"example": "premium",
"note": "Unique identifier for the feature"
},
"label": {
"required": true,
"example": "Premium",
"minChars": 2,
"maxChars": 30,
"note": "Large display label shown on left side (5xl mobile, 6xl desktop)"
},
"title": {
"required": true,
"example": "Premium features for your most demanding needs",
"minChars": 10,
"maxChars": 120,
"note": "Feature heading shown at xl (mobile) / 3xl (desktop)"
},
"items": {
"required": true,
"minItems": 1,
"maxItems": 8,
"structure": "string[]",
"note": "Inline bullet list with accent-colored dots. Each item should be 5-50 characters."
},
"buttons": {
"required": false,
"maxButtons": 2,
"structure": "Array<{text: string, onClick?: () => void, href?: string}>",
"note": "Optional buttons at bottom of content area. First button is primary, second is secondary."
}
},
"itemRules": {
"minItems": 1,
"maxItems": 8,
"recommendedItems": "2-5",
"note": "Works best with 2-5 features for clear comparison"
}
},
"propsSchema": {
"features": "Array<{ id: string, label: string, title: string, items: string[], buttons?: Array<{text: string, onClick?: () => void, href?: string}> }>",
"animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)",
"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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"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: 'premium', label: 'Premium', title: 'Premium features for your most demanding needs and growth goals', items: ['Priority support', 'Advanced features', 'Custom integrations'], buttons: [{ text: 'Learn more', href: '#' }, { text: 'Get started', onClick: () => console.log('clicked') }] }]} animationType=\"opacity\" variant=\"border\" title=\"Choose Your Plan\" description=\"Find the perfect fit for your needs\" textboxLayout=\"default\" useInvertedBackground={\"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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
"ariaLabel?": "string (default: '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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"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": "Smart Analytics",
"minChars": 2,
"maxChars": 40
},
"description": {
"required": true,
"example": "Gain actionable insights to drive better decisions",
"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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"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: 'Smart Analytics', description: 'Gain actionable insights', 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": "Without Us",
"minChars": 2,
"maxChars": 40
},
"items": {
"required": true,
"example": [
"Time-consuming processes",
"Limited scalability",
"Higher costs"
],
"minItems": 2,
"maxItems": 10,
"note": "List of negative aspects displayed with X icons"
}
},
"positiveCardRules": {
"title": {
"required": true,
"example": "With Us",
"minChars": 2,
"maxChars": 40
},
"items": {
"required": true,
"example": [
"Streamlined workflow",
"Scalable solutions",
"Better value"
],
"minItems": 2,
"maxItems": 10,
"note": "List of positive aspects displayed with Check icons"
}
}
},
"propsSchema": {
"negativeCard": "{ 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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"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: 'Without Us', items: ['Time-consuming processes', 'Limited scalability'] }} positiveCard={{ title: 'With Us', items: ['Streamlined workflow', 'Scalable solutions'] }} animationType=\"slide-up\" title=\"What makes us stand out\" description=\"See how we compare\" 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": "Without Us",
"minChars": 2,
"maxChars": 40
},
"items": {
"required": true,
"example": [
"Time-consuming processes",
"Limited scalability",
"Higher costs"
],
"minItems": 2,
"maxItems": 10,
"note": "List of negative aspects displayed with X icons"
},
"imageSrc": {
"required": false,
"example": "/images/before.webp",
"note": "Image source URL (either imageSrc or videoSrc)"
},
"videoSrc": {
"required": false,
"example": "/videos/before.mp4",
"note": "Video source URL (either imageSrc or videoSrc)"
}
},
"positiveCardRules": {
"title": {
"required": true,
"example": "With Us",
"minChars": 2,
"maxChars": 40
},
"items": {
"required": true,
"example": [
"Streamlined workflow",
"Scalable solutions",
"Better value"
],
"minItems": 2,
"maxItems": 10,
"note": "List of positive aspects displayed with Check icons"
},
"imageSrc": {
"required": false,
"example": "/images/after.webp",
"note": "Image source URL (either imageSrc or videoSrc)"
},
"videoSrc": {
"required": false,
"example": "/videos/after.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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"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: 'Without Us', imageSrc: '/images/before.webp', items: ['Time-consuming processes', 'Limited scalability'] }} positiveCard={{ title: 'With Us', imageSrc: '/images/after.webp', items: ['Streamlined workflow', 'Scalable solutions'] }} 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?: Array<{text: string, onClick?: () => void, href?: string}> }> (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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
"useInvertedBackground": "'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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
"useInvertedBackground": "'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",
"actionButtonClassName?": "string - Styles the action button on product image",
"gridClassName?": "string",
"carouselClassName?": "string",
"controlsClassName?": "string",
"textBoxClassName?": "string",
"textBoxTagClassName?": "string",
"textBoxButtonContainerClassName?": "string",
"textBoxButtonClassName?": "string",
"textBoxButtonTextClassName?": "string"
},
"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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
"useInvertedBackground": "'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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
"useInvertedBackground": "'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",
"actionButtonClassName?": "string - Styles the action button on product image",
"gridClassName?": "string",
"carouselClassName?": "string",
"controlsClassName?": "string",
"textBoxClassName?": "string",
"textBoxTagClassName?": "string",
"textBoxButtonContainerClassName?": "string",
"textBoxButtonClassName?": "string",
"textBoxButtonTextClassName?": "string"
},
"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",
"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: {text: string, onClick?: () => void, href?: string}, 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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
"useInvertedBackground": "'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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
"useInvertedBackground": "'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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"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 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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
"useInvertedBackground": "'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 pricing, subscription plans, or tiered services requiring immediate action. Automatically switches between grid (1-4 items) and carousel (5+ items). Optional header with title, description, tag, and buttons.",
"constraints": {
"textRules": {
"title": {
"required": true,
"example": "Choose Your Plan",
"minChars": 2,
"maxChars": 35
},
"description": {
"required": true,
"example": "Select the perfect plan for your needs",
"minChars": 5,
"maxChars": 250
},
"tag": {
"required": false,
"example": "Pricing",
"minChars": 2,
"maxChars": 30
}
},
"pricingPlanRules": {
"id": {
"required": true,
"example": "1",
"minChars": 1,
"maxChars": 20
},
"badge": {
"required": true,
"example": "Business Plan",
"minChars": 2,
"maxChars": 30,
"note": "Required for visual consistency across all cards"
},
"price": {
"required": true,
"example": "$29/mo",
"minChars": 1,
"maxChars": 20
},
"subtitle": {
"required": true,
"example": "Perfect for small teams",
"minChars": 5,
"maxChars": 100,
"note": "Required for visual consistency across all cards"
},
"buttons": {
"required": true,
"maxButtons": 2,
"structure": {
"text": "string - Button label (required)",
"href": "string - Link destination (optional)",
"onClick": "() => void - Click handler (optional)",
"props": "Partial<ButtonPropsForVariant> - Additional button props (optional)"
},
"note": "First button (index 0) = primary-button, second (index 1) = secondary-button. Button variant controlled by ThemeProvider's defaultButtonVariant. Border radius controlled by ThemeProvider's borderRadius. All sections should be wrapped in a single ThemeProvider at the app/page level."
},
"features": {
"required": true,
"example": [
"Up to 10 team members",
"100GB storage",
"Priority support"
],
"note": "Array of feature strings, required for visual consistency"
},
"badgeIcon": {
"required": false,
"example": "Sparkles",
"note": "Optional Lucide icon to display next to badge"
}
}
},
"propsSchema": {
"plans": "Array<{ id: string, badge: string, badgeIcon?: LucideIcon, price: string, subtitle: string, buttons: Array<{text: string, onClick?: () => void, href?: string}>, features: string[] }>",
"carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
"uniformGridCustomHeightClasses?": "string",
"animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
"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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
"useInvertedBackground": "'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: Array<{text: string, onClick?: () => void, href?: string}>, features: string[] }>",
"carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
"uniformGridCustomHeightClasses?": "string",
"animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)",
"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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
"useInvertedBackground": "'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 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: {text: string, onClick?: () => void, href?: string}, 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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"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 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": "Array<{text: string, onClick?: () => void, href?: string}> - 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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"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 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": "Array<{text: string, onClick?: () => void, href?: string}> - 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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"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 subscription tiers or service packages.",
"constraints": {
"textRules": {
"title": {
"required": true,
"example": "Choose Your Plan",
"minChars": 2,
"maxChars": 50
},
"description": {
"required": true,
"example": "Select the perfect plan for your needs",
"minChars": 10,
"maxChars": 200
},
"tag": {
"required": false,
"example": "Pricing",
"minChars": 2,
"maxChars": 30
}
},
"planRules": {
"minPlans": 1,
"maxPlans": 6,
"structure": {
"id": "string - Unique identifier (required)",
"badge": "string - Badge text, e.g., 'Most Popular' (required)",
"badgeIcon": "LucideIcon - Optional icon for badge",
"price": "string - Price display, e.g., '$29/mo' (required)",
"subtitle": "string - Subtitle below price, e.g., 'Perfect for small teams' (required)",
"buttons": "Array<{text: string, onClick?: () => void, href?: string}> - Action buttons, max 2 (required)",
"features": "string[] - List of features included (required)"
},
"note": "Each plan displays in a nested card layout with secondary-button styling for the top section."
},
"buttonRules": {
"maxButtons": 2,
"structure": {
"text": "string - Button label (required)",
"href": "string - Link destination (optional)",
"onClick": "() => void - Click handler (optional)",
"props": "Partial<ButtonPropsForVariant> - Additional button props (optional)"
},
"note": "Buttons render full-width inside secondary-button container. Button variant controlled by ThemeProvider."
}
},
"propsSchema": {
"plans": "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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"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: {text: string, onClick?: () => void, href?: string}, 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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
"useInvertedBackground": "'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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
"useInvertedBackground": "'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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
"useInvertedBackground": "'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 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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
"useInvertedBackground": "'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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
"useInvertedBackground": "'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?: Array<{text: string, onClick?: () => void, href?: string}> }>",
"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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"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 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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
"useInvertedBackground": "'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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
"useInvertedBackground": "'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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
"useInvertedBackground": "'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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
"useInvertedBackground": "'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 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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"ariaLabel?": "string (default: 'Team section')",
"className?": "string",
"containerClassName?": "string",
"cardClassName?": "string",
"textBoxClassName?": "string",
"textBoxTitleClassName?": "string",
"textBoxDescriptionClassName?": "string",
"textBoxTagClassName?": "string",
"textBoxButtonContainerClassName?": "string",
"textBoxButtonClassName?": "string",
"textBoxButtonTextClassName?": "string",
"titleImageWrapperClassName?": "string",
"titleImageClassName?": "string",
"groupTitleClassName?": "string",
"memberClassName?": "string",
"memberImageClassName?": "string",
"memberTitleClassName?": "string",
"memberSubtitleClassName?": "string",
"memberDetailClassName?": "string"
},
"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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
"useInvertedBackground": "'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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
"useInvertedBackground": "'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 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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
"useInvertedBackground": "'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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"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 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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"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 or quote icon, testimonial text, and author details.",
"details": "Use for displaying customer reviews with either star ratings or a quote icon. Set showRating={true} for star ratings (5 stars, filled based on rating value) or showRating={false} for a single quote icon. Layout: Star Rating/Quote Icon → Testimonial Text → Author Info (image/icon, name, handle). Cards are displayed in a grid or carousel layout. Best for customer reviews, product feedback, or service testimonials.",
"constraints": {
"textRules": {
"title": {
"required": true,
"example": "What Our Clients Say",
"minChars": 2,
"maxChars": 50
},
"description": {
"required": true,
"example": "Hear from those who've experienced our work",
"minChars": 5,
"maxChars": 300
},
"tag": {
"required": false,
"example": "Testimonials",
"minChars": 2,
"maxChars": 30
}
},
"testimonialRules": {
"id": {
"required": true,
"example": "1",
"note": "Unique identifier for the testimonial"
},
"name": {
"required": true,
"example": "Sarah Johnson",
"minChars": 2,
"maxChars": 50
},
"handle": {
"required": true,
"example": "@sarahj",
"minChars": 2,
"maxChars": 30
},
"testimonial": {
"required": true,
"example": "Amazing product that transformed our workflow!",
"minChars": 10,
"maxChars": 500
},
"rating": {
"required": true,
"example": 5,
"note": "Number from 1-5 indicating star rating"
},
"imageSrc": {
"required": false,
"example": "/testimonials/sarah.jpg",
"note": "Author avatar image (either imageSrc or icon required)"
},
"icon": {
"required": false,
"example": "Quote",
"note": "LucideIcon for author avatar (either imageSrc or icon required)"
}
}
},
"propsSchema": {
"testimonials": "Array<{ id: string, name: string, handle: string, testimonial: string, rating: number, imageSrc?: string, imageAlt?: string, icon?: LucideIcon }>",
"showRating": "boolean - true for star ratings, false for quote icon (required)",
"carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
"uniformGridCustomHeightClasses?": "string (default: 'min-h-none')",
"animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"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' }]} showRating={true} 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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
"useInvertedBackground": "'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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
"useInvertedBackground": "'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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
"useInvertedBackground": "'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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
"useInvertedBackground": "'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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
"useInvertedBackground": "'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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
"useInvertedBackground": "'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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
"useInvertedBackground": "'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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)",
"useInvertedBackground": "'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 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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"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": "The Future of Innovation: Trends Shaping Tomorrow",
"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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"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: 'The Future of Innovation: Trends Shaping Tomorrow', 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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"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?: Array<{text: string, onClick?: () => void, href?: 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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"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 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?": "Array<{text: string, onClick?: () => void, href?: string}>",
"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 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": "Send",
"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=\"Send\" 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": "{text: string, onClick?: () => void, href?: string}",
"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' }]} />"
}
]
}
}
Reference in New Issue View Git Blame Copy Permalink