{ "componentRegistry": { "layout": [ { "import": "import CardStack from '@/components/cardStack/CardStack';", "name": "CardStack", "path": "@/components/cardStack/CardStack", "propsSchema": { "children": "React.ReactNode", "mode?": "'auto' | 'buttons' (default: 'buttons')", "gridVariant?": "'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right' | 'two-items-per-row' | 'timeline' (default: 'uniform-all-items-equal')", "uniformGridCustomHeightClasses?": "string", "gridRowsClassName?": "string", "itemHeightClassesOverride?": "Array", "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d' (required - controls GSAP scroll animations with stagger effect)", "supports3DAnimation?": "boolean (default: false)", "carouselThreshold?": "number (default: 5)", "bottomContent?": "React.ReactNode", "title?": "string", "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", "description?": "string", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)", "useInvertedBackground?": "boolean", "ariaLabel?": "string (default: 'Card stack')", "className?": "string", "containerClassName?": "string", "gridClassName?": "string", "carouselClassName?": "string", "carouselItemClassName?": "string", "controlsClassName?": "string", "textBoxClassName?": "string", "titleClassName?": "string", "titleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout", "titleImageClassName?": "string - For styling images in inline-image layout", "descriptionClassName?": "string", "tagClassName?": "string", "buttonContainerClassName?": "string", "buttonClassName?": "string", "buttonTextClassName?": "string" } }, { "import": "import TimelineHorizontalCardStack from '@/components/cardStack/layouts/timelines/TimelineHorizontalCardStack';", "name": "TimelineHorizontalCardStack", "path": "@/components/cardStack/layouts/timelines/TimelineHorizontalCardStack", "propsSchema": { "children": "React.ReactNode", "title": "string", "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", "description": "string", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)", "useInvertedBackground?": "boolean", "mediaItems?": "Array<{ imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }>", "ariaLabel?": "string (default: 'Timeline section')", "className?": "string", "containerClassName?": "string", "textBoxClassName?": "string", "titleClassName?": "string", "titleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout", "titleImageClassName?": "string - For styling images in inline-image layout", "descriptionClassName?": "string", "tagClassName?": "string", "buttonContainerClassName?": "string", "buttonClassName?": "string", "buttonTextClassName?": "string", "cardClassName?": "string", "progressBarClassName?": "string", "mediaContainerClassName?": "string", "mediaClassName?": "string" } }, { "import": "import TimelineCardStack from '@/components/cardStack/layouts/timelines/TimelineCardStack';", "name": "TimelineCardStack", "path": "@/components/cardStack/layouts/timelines/TimelineCardStack", "propsSchema": { "children": "React.ReactNode", "title": "string", "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", "description": "string", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)", "useInvertedBackground?": "boolean", "ariaLabel?": "string (default: 'Timeline section')", "className?": "string", "containerClassName?": "string", "textBoxClassName?": "string", "titleClassName?": "string", "titleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout", "titleImageClassName?": "string - For styling images in inline-image layout", "descriptionClassName?": "string", "tagClassName?": "string", "buttonContainerClassName?": "string", "buttonClassName?": "string", "buttonTextClassName?": "string" } }, { "import": "import TimelinePhoneView from '@/components/cardStack/layouts/timelines/TimelinePhoneView';", "name": "TimelinePhoneView", "path": "@/components/cardStack/layouts/timelines/TimelinePhoneView", "propsSchema": { "items": "Array<{ trigger: string, content: React.ReactNode, imageOne?: string, videoOne?: string, imageAltOne?: string, videoAriaLabelOne?: string, imageTwo?: string, videoTwo?: string, imageAltTwo?: string, videoAriaLabelTwo?: string }> - Timeline items with triggers and dual phone media (required)", "showTextBox?": "boolean (default: true - controls whether CardStackTextBox renders)", "title": "string", "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", "description": "string", "tag?": "string", "tagIcon?": "LucideIcon", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)", "ariaLabel?": "string (default: 'Timeline phone view section')", "className?": "string", "containerClassName?": "string", "textBoxClassName?": "string", "titleClassName?": "string", "titleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout", "titleImageClassName?": "string - For styling images in inline-image layout", "descriptionClassName?": "string", "tagClassName?": "string", "buttonContainerClassName?": "string", "buttonClassName?": "string", "buttonTextClassName?": "string", "desktopContainerClassName?": "string", "mobileContainerClassName?": "string", "desktopContentClassName?": "string", "desktopWrapperClassName?": "string", "mobileWrapperClassName?": "string", "phoneFrameClassName?": "string", "mobilePhoneFrameClassName?": "string" } }, { "import": "import TimelineProcessFlow from '@/components/cardStack/layouts/timelines/TimelineProcessFlow';", "name": "TimelineProcessFlow", "path": "@/components/cardStack/layouts/timelines/TimelineProcessFlow", "propsSchema": { "items": "Array<{ id: string, content: React.ReactNode, media: React.ReactNode, reverse: boolean }> - Timeline items with content and media", "title": "string", "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", "description": "string", "tag?": "string", "tagIcon?": "LucideIcon", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)", "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)", "ariaLabel?": "string (default: 'Timeline process flow section')", "className?": "string", "containerClassName?": "string", "textBoxClassName?": "string", "textBoxTitleClassName?": "string", "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout", "textBoxTitleImageClassName?": "string - For styling images in inline-image layout", "textBoxDescriptionClassName?": "string", "textBoxTagClassName?": "string", "textBoxButtonContainerClassName?": "string", "textBoxButtonClassName?": "string", "textBoxButtonTextClassName?": "string", "itemClassName?": "string", "mediaWrapperClassName?": "string", "numberClassName?": "string", "contentWrapperClassName?": "string", "gapClassName?": "string" } }, { "import": "import TextBox from '@/components/Textbox';", "name": "TextBox", "path": "@/components/Textbox", "propsSchema": { "title": "string", "description": "string", "type?": "'entrance-slide' | 'reveal-blur' | 'background-highlight'", "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' (required)", "center?": "boolean (default: false)", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "duration?": "number (default: 1)", "start?": "string (default: 'top 80%')", "end?": "string (default: 'top 20%')", "gradientColors?": "{ from: string, to: string }", "children?": "React.ReactNode", "className?": "string", "titleClassName?": "string", "descriptionClassName?": "string", "tagClassName?": "string", "buttonContainerClassName?": "string", "buttonClassName?": "string", "buttonTextClassName?": "string", "avatars?": "Array<{ src: string, alt?: string }> - User avatar images", "avatarText?": "string", "avatarGroupClassName?": "string" } }, { "import": "import AvatarGroup from '@/components/shared/AvatarGroup';", "name": "AvatarGroup", "path": "@/components/shared/AvatarGroup", "propsSchema": { "avatars": "Array<{ src: string, alt?: string }> - User avatar images", "text?": "string", "maxVisible?": "number (default: 5)", "className?": "string", "avatarClassName?": "string", "textClassName?": "string", "ariaLabel?": "string (default: 'User avatars')" } }, { "import": "import { BentoGlobe } from '@/components/bento/BentoGlobe';", "name": "BentoGlobe", "path": "@/components/bento/BentoGlobe", "propsSchema": { "className?": "string", "config?": "COBEOptions - Custom globe configuration (see COBE docs)" } } ], "title": [ { "import": "import TextAnimation from '@/components/text/TextAnimation';", "name": "TextAnimation", "path": "@/components/text/TextAnimation", "propsSchema": { "type?": "'entrance-slide' | 'reveal-blur' | 'background-highlight'", "title": "string", "children?": "React.ReactNode", "variant?": "'trigger' | 'words-trigger'", "className?": "string", "duration?": "number", "stagger?": "number", "start?": "string", "end?": "string", "ariaLabel?": "string", "gradientColors?": "{ from: string, to: string }" } }, { "import": "import TextNumberCount from '@/components/text/TextNumberCount';", "name": "TextNumberCount", "path": "@/components/text/TextNumberCount", "propsSchema": { "value": "number", "startFrom?": "number", "duration?": "number", "format?": "Intl.NumberFormatOptions", "locales?": "string", "prefix?": "string", "suffix?": "string", "animateOnScroll?": "boolean", "threshold?": "number", "className?": "string" } } ], "button": [ { "import": "import ButtonTextUnderline from '@/components/button/ButtonTextUnderline';", "name": "ButtonTextUnderline", "path": "@/components/button/ButtonTextUnderline", "propsSchema": { "text": "string", "onClick?": "() => void", "href?": "string - External URLs open in new tab, internal values scroll to section", "className?": "string", "disabled?": "boolean (default: false)", "ariaLabel?": "string", "type?": "'button' | 'submit' | 'reset' (default: 'button')" } }, { "import": "import ButtonIconArrow from '@/components/button/ButtonIconArrow';", "name": "ButtonIconArrow", "path": "@/components/button/ButtonIconArrow", "propsSchema": { "text": "string", "onClick?": "() => void", "href?": "string - External URLs open in new tab, internal values scroll to section", "className?": "string", "textClassName?": "string", "iconClassName?": "string", "disabled?": "boolean (default: false)", "ariaLabel?": "string", "type?": "'button' | 'submit' | 'reset' (default: 'button')" } }, { "import": "import ButtonTextStagger from '@/components/button/ButtonTextStagger/ButtonTextStagger';", "name": "ButtonTextStagger", "path": "@/components/button/ButtonTextStagger/ButtonTextStagger", "propsSchema": { "text": "string", "onClick?": "() => void", "href?": "string - External URLs open in new tab, internal values scroll to section", "className?": "string", "bgClassName?": "string", "textClassName?": "string", "disabled?": "boolean (default: false)", "ariaLabel?": "string", "type?": "'button' | 'submit' | 'reset' (default: 'button')", "scrollToSection?": "boolean" } }, { "import": "import ButtonShiftHover from '@/components/button/ButtonShiftHover/ButtonShiftHover';", "name": "ButtonShiftHover", "path": "@/components/button/ButtonShiftHover/ButtonShiftHover", "propsSchema": { "text": "string", "onClick?": "() => void", "href?": "string - External URLs open in new tab, internal values scroll to section", "className?": "string", "bgClassName?": "string", "textClassName?": "string", "disabled?": "boolean (default: false)", "ariaLabel?": "string", "type?": "'button' | 'submit' | 'reset' (default: 'button')" } }, { "import": "import ButtonHoverMagnetic from '@/components/button/ButtonHoverMagnetic/ButtonHoverMagnetic';", "name": "ButtonHoverMagnetic", "path": "@/components/button/ButtonHoverMagnetic/ButtonHoverMagnetic", "propsSchema": { "text": "string", "onClick?": "() => void", "href?": "string - External URLs open in new tab, internal values scroll to section", "className?": "string", "textClassName?": "string", "strengthFactor?": "number (default: 20)", "disabled?": "boolean (default: false)", "ariaLabel?": "string", "type?": "'button' | 'submit' | 'reset' (default: 'button')" } }, { "import": "import ButtonHoverBubble from '@/components/button/ButtonHoverBubble';", "name": "ButtonHoverBubble", "path": "@/components/button/ButtonHoverBubble", "propsSchema": { "text": "string", "onClick?": "() => void", "href?": "string - External URLs open in new tab, internal values scroll to section", "className?": "string", "bgClassName?": "string - Applied to the text container (automatically set in sections)", "textClassName?": "string - Applied to the text span", "iconClassName?": "string - Applied to both arrow icon containers (automatically set in sections)", "disabled?": "boolean (default: false)", "ariaLabel?": "string", "type?": "'button' | 'submit' | 'reset' (default: 'button')" } }, { "import": "import ButtonExpandHover from '@/components/button/ButtonExpandHover';", "name": "ButtonExpandHover", "path": "@/components/button/ButtonExpandHover", "propsSchema": { "text": "string", "onClick?": "() => void", "href?": "string - External URLs open in new tab, internal values scroll to section", "className?": "string", "textClassName?": "string - Applied to the text span (automatically includes base and hover colors in sections)", "iconClassName?": "string - Applied to the arrow icon container (automatically set in sections)", "iconBgClassName?": "string - Applied to the expanding background (automatically set in sections)", "disabled?": "boolean (default: false)", "ariaLabel?": "string", "type?": "'button' | 'submit' | 'reset' (default: 'button')" } }, { "import": "import ButtonBounceEffect from '@/components/button/ButtonBounceEffect/ButtonBounceEffect';", "name": "ButtonBounceEffect", "path": "@/components/button/ButtonBounceEffect/ButtonBounceEffect", "propsSchema": { "text": "string", "onClick?": "() => void", "href?": "string - External URLs open in new tab, internal values scroll to section", "className?": "string", "bgClassName?": "string", "textClassName?": "string", "disabled?": "boolean (default: false)", "ariaLabel?": "string", "type?": "'button' | 'submit' | 'reset' (default: 'button')" } }, { "import": "import ButtonDirectionalHover from '@/components/button/ButtonDirectionalHover/ButtonDirectionalHover';", "name": "ButtonDirectionalHover", "path": "@/components/button/ButtonDirectionalHover/ButtonDirectionalHover", "propsSchema": { "text": "string", "onClick?": "() => void", "href?": "string - External URLs open in new tab, internal values scroll to section", "className?": "string", "bgClassName?": "string", "textClassName?": "string", "circleClassName?": "string - Controls the expanding circle color", "disabled?": "boolean (default: false)", "ariaLabel?": "string", "type?": "'button' | 'submit' | 'reset' (default: 'button')" } }, { "import": "import ButtonElasticEffect from '@/components/button/ButtonElasticEffect/ButtonElasticEffect';", "name": "ButtonElasticEffect", "path": "@/components/button/ButtonElasticEffect/ButtonElasticEffect", "propsSchema": { "text": "string", "onClick?": "() => void", "href?": "string - External URLs open in new tab, internal values scroll to section", "className?": "string", "textClassName?": "string", "disabled?": "boolean (default: false)", "ariaLabel?": "string", "type?": "'button' | 'submit' | 'reset' (default: 'button')" } }, { "import": "import ButtonTextShift from '@/components/button/ButtonTextShift/ButtonTextShift';", "name": "ButtonTextShift", "path": "@/components/button/ButtonTextShift/ButtonTextShift", "propsSchema": { "text": "string", "onClick?": "() => void", "href?": "string - External URLs open in new tab, internal values scroll to section", "className?": "string", "bgClassName?": "string", "textClassName?": "string", "disabled?": "boolean (default: false)", "ariaLabel?": "string", "type?": "'button' | 'submit' | 'reset' (default: 'button')" } } ], "form": [ { "import": "import Input from '@/components/form/Input';", "name": "Input", "path": "@/components/form/Input", "propsSchema": { "value": "string (required)", "onChange": "(value: string) => void (required)", "type?": "string (default: 'text')", "placeholder?": "string", "required?": "boolean (default: false)", "disabled?": "boolean (default: false)", "ariaLabel?": "string", "className?": "string" } }, { "import": "import Textarea from '@/components/form/Textarea';", "name": "Textarea", "path": "@/components/form/Textarea", "propsSchema": { "value": "string (required)", "onChange": "(value: string) => void (required)", "placeholder?": "string", "rows?": "number (default: 5)", "required?": "boolean (default: false)", "disabled?": "boolean (default: false)", "ariaLabel?": "string", "className?": "string" } }, { "import": "import EmailSignupForm from '@/components/form/EmailSignupForm';", "name": "EmailSignupForm", "path": "@/components/form/EmailSignupForm", "propsSchema": { "inputPlaceholder?": "string (default: 'Enter your email')", "buttonText?": "string (default: 'Sign Up')", "onSubmit?": "(email: string) => void", "className?": "string", "inputClassName?": "string", "buttonClassName?": "string", "buttonTextClassName?": "string" } }, { "import": "import ContactForm from '@/components/form/ContactForm';", "name": "ContactForm", "path": "@/components/form/ContactForm", "propsSchema": { "title": "string (required)", "description": "string (required)", "tag": "string (required)", "tagIcon?": "LucideIcon", "inputPlaceholder?": "string (default: 'Enter your email')", "buttonText?": "string (default: 'Sign Up')", "termsText?": "string (default: 'By clicking Sign Up you're confirming that you agree with our Terms and Conditions.')", "onSubmit?": "(email: string) => void", "centered?": "boolean (default: false)", "className?": "string", "tagClassName?": "string", "titleClassName?": "string", "descriptionClassName?": "string", "formWrapperClassName?": "string", "formClassName?": "string", "inputClassName?": "string", "buttonClassName?": "string", "buttonTextClassName?": "string", "termsClassName?": "string" } } ], "navbar": [ { "import": "import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';", "name": "NavbarStyleApple", "path": "@/components/navbar/NavbarStyleApple/NavbarStyleApple", "propsSchema": { "navItems": "Array<{name: string, id: string}>", "brandName?": "string (default: 'Webild')" } }, { "import": "import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';", "name": "NavbarLayoutFloatingInline", "path": "@/components/navbar/NavbarLayoutFloatingInline", "propsSchema": { "navItems": "Array<{name: string, id: string}>", "brandName?": "string (default: 'Webild')", "button": "{text: string, onClick?: () => void, href?: string}", "animateOnLoad?": "boolean (default: true)", "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", "propsSchema": { "navItems": "Array<{name: string, id: string}>", "className?": "string", "brandName?": "string (default: 'Webild')", "button": "{text: string, onClick?: () => void, href?: string}", "buttonClassName?": "string (default: '')", "buttonTextClassName?": "string (default: '')" } }, { "import": "import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';", "name": "NavbarStyleFullscreen", "path": "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen", "propsSchema": { "navItems": "Array<{name: string, id: string}>", "brandName?": "string (default: 'Webild')", "bottomLeftText?": "string (default: 'Global Community')", "bottomRightText?": "string (default: 'hello@example.com')", "topBarClassName?": "string (default: '')" } }, { "import": "import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';", "name": "NavbarStyleCentered", "path": "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered", "propsSchema": { "navItems": "Array<{name: string, id: string}>", "button": "{text: string, onClick?: () => void, href?: string}", "brandName?": "string (default: 'Webild')", "className?": "string (default: '')" } } ], "background": [ { "import": "import PlainBackground from '@/components/background/PlainBackground';", "name": "PlainBackground", "path": "@/components/background/PlainBackground", "propsSchema": { "className?": "string" } }, { "import": "import GridBackround from '@/components/background/GridBackround';", "name": "GridBackround", "path": "@/components/background/GridBackround", "propsSchema": { "size?": "'small' | 'medium' | 'large' (default: 'medium')", "perspectiveThreeD?": "boolean (default: false)", "className?": "string" } }, { "import": "import DotGridBackground from '@/components/background/DotGridBackground';", "name": "DotGridBackground", "path": "@/components/background/DotGridBackground", "propsSchema": { "size?": "'small' | 'medium' | 'large' (default: 'medium')", "perspectiveThreeD?": "boolean (default: false)", "className?": "string" } }, { "import": "import CircleGradientBackground from '@/components/background/CircleGradientBackground';", "name": "CircleGradientBackground", "path": "@/components/background/CircleGradientBackground", "propsSchema": { "diagonal?": "'primary' | 'secondary' (default: 'primary')", "className?": "string" } }, { "import": "import AuroraBackground from '@/components/background/AuroraBackground';", "name": "AuroraBackground", "path": "@/components/background/AuroraBackground", "propsSchema": { "className?": "string" } }, { "import": "import FloatingGradientBackground from '@/components/background/floatingGradientBackground/FloatingGradientBackground';", "name": "FloatingGradientBackground", "path": "@/components/background/floatingGradientBackground/FloatingGradientBackground", "propsSchema": { "className?": "string" } }, { "import": "import AnimatedGridBackground from '@/components/background/AnimatedGridBackground';", "name": "AnimatedGridBackground", "path": "@/components/background/AnimatedGridBackground", "propsSchema": { "squareSize?": "number (default: 100)", "numSquares?": "number (default: 50)", "maxOpacity?": "number (default: 0.15)", "className?": "string" } }, { "import": "import AnimatedAuroraBackground from '@/components/background/AnimatedAuroraBackground';", "name": "AnimatedAuroraBackground", "path": "@/components/background/AnimatedAuroraBackground", "propsSchema": { "className?": "string", "showRadialGradient?": "boolean (default: true)", "invertColors": "boolean (REQUIRED - true for light backgrounds, false for dark backgrounds)" } }, { "import": "import FluidBackground from '@/components/background/FluidBackground';", "name": "FluidBackground", "path": "@/components/background/FluidBackground", "propsSchema": { "className?": "string" } }, { "import": "import RadialGradientBackground from '@/components/background/RadialGradientBackground';", "name": "RadialGradientBackground", "path": "@/components/background/RadialGradientBackground", "propsSchema": { "className?": "string", "centerColor?": "string (default: 'var(--background)')", "edgeColor?": "string (default: 'var(--color-background-accent)')", "size?": "string (default: '130% 130%')", "position?": "string (default: '50% 15%')" } }, { "import": "import GradientBarsBackground from '@/components/background/GradientBarsBackground';", "name": "GradientBarsBackground", "path": "@/components/background/GradientBarsBackground", "propsSchema": { "className?": "string", "numBarsPerSide?": "number (default: 8)", "gradientFrom?": "string (default: 'var(--color-primary-cta)')", "gradientTo?": "string (default: 'transparent')", "opacity?": "number (default: 0.075)", "sideWidth?": "string (default: '35%')" } }, { "import": "import CanvasRevealEffect from '@/components/background/CanvasRevealEffect';", "name": "CanvasRevealEffect", "path": "@/components/background/CanvasRevealEffect", "propsSchema": { "animationSpeed?": "number (default: 0.4)", "opacities?": "number[] (default: [0.3, 0.3, 0.3, 0.5, 0.5, 0.5, 0.8, 0.8, 0.8, 1])", "colors?": "number[][] - RGB arrays (default: [[0, 255, 255]])", "containerClassName?": "string", "dotSize?": "number (default: 3)", "showGradient?": "boolean (default: true)" } }, { "import": "import CanvasRevealBackground from '@/components/background/CanvasRevealBackground';", "name": "CanvasRevealBackground", "path": "@/components/background/CanvasRevealBackground", "propsSchema": { "className?": "string", "animationSpeed?": "number (default: 5)", "dotSize?": "number (default: 3)", "height?": "string (default: '30%')", "position?": "'center' | 'left' | 'right' (default: 'center')" } }, { "import": "import CellWaveBackground from '@/components/background/CellWaveBackground';", "name": "CellWaveBackground", "path": "@/components/background/CellWaveBackground", "propsSchema": { "className?": "string", "columns?": "number (default: 5)", "rows?": "number (default: 24)", "cellColor?": "string (default: 'var(--color-background-accent)')", "duration?": "number (default: 0.25)", "delay?": "number (default: 1.25)" } }, { "import": "import GlowingOrbBackground from '@/components/background/GlowingOrbBackground';", "name": "GlowingOrbBackground", "path": "@/components/background/GlowingOrbBackground", "propsSchema": { "className?": "string", "blurAmount?": "string (default: '57px')", "glowColor?": "string (default: 'var(--color-primary-cta)')", "backgroundColor?": "string (default: 'var(--background)')" } }, { "import": "import BlurBottomBackground from '@/components/background/BlurBottomBackground';", "name": "BlurBottomBackground", "path": "@/components/background/BlurBottomBackground", "propsSchema": { "className?": "string" } }, { "import": "import RotatedRaysBackground from '@/components/background/RotatedRaysBackground';", "name": "RotatedRaysBackground", "path": "@/components/background/RotatedRaysBackground", "propsSchema": { "animated": "boolean - Required. When true, rays animate with pulsing opacity. When false, rays display static opacity.", "showGrid": "boolean - Required. When true, displays a grid overlay fading from top center. When false, no grid is shown.", "className?": "string", "containerClassName?": "string" } }, { "import": "import DownwardRaysBackground from '@/components/background/DownwardRaysBackground';", "name": "DownwardRaysBackground", "path": "@/components/background/DownwardRaysBackground", "propsSchema": { "animated": "boolean - Required. When true, rays animate with pulsing opacity. When false, rays display static opacity.", "showGrid": "boolean - Required. When true, displays a grid overlay fading from top center. When false, no grid is shown.", "className?": "string", "containerClassName?": "string" } }, { "import": "import RotatingGradientBackground from '@/components/background/RotatingGradientBackground';", "name": "RotatingGradientBackground", "path": "@/components/background/RotatingGradientBackground", "propsSchema": { "className?": "string", "gradientColorStart?": "string - Gradient start color. Default: 'var(--color-background-accent)'", "gradientColorEnd?": "string - Gradient end color. Default: 'var(--color-background-accent)'", "bigCircleSize?": "string - Size of the larger circle. Default: '28vw'", "smallCircleSize?": "string - Size of the smaller circle. Default: '21vw'", "blurAmount?": "string - Blur amount for gradient circles. Default: '10px'", "opacity?": "number - Overall opacity of gradient effect. Default: 0.6", "showSparkles?": "boolean - Show sparkle ring effect. Default: true" } }, { "import": "import { Sparkles } from '@/components/background/Sparkles';", "name": "Sparkles", "path": "@/components/background/Sparkles", "propsSchema": { "id?": "string", "className?": "string", "background?": "string - Default: 'transparent'", "particleSize?": "number - Deprecated, use minSize/maxSize instead", "minSize?": "number - Minimum particle size. Default: 0.5", "maxSize?": "number - Maximum particle size. Default: 1", "speed?": "number - Animation speed. Default: 4", "particleColor?": "string - Particle color, supports CSS variables. Default: 'var(--color-primary-cta)'", "particleDensity?": "number - Number of particles. Default: 100" } }, { "import": "import SparklesGradientBackground from '@/components/background/SparklesGradientBackground';", "name": "SparklesGradientBackground", "path": "@/components/background/SparklesGradientBackground", "propsSchema": { "className?": "string", "gradientColor?": "string - Main gradient color. Default: 'var(--color-background-accent)'", "accentColor?": "string - Inner accent gradient color. Default: 'var(--color-background-accent)'", "blurAmount?": "string - Blur amount for gradients. Default: '6vw'" } }, { "import": "import HeroBackgrounds from '@/components/background/HeroBackgrounds';", "name": "HeroBackgrounds", "path": "@/components/background/HeroBackgrounds", "propsSchema": { "variant": "'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'glowing-orb' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'rotating-gradient' | 'sparkles-gradient'" } } ] }, "sectionRegistry": { "hero": [ { "import": "import HeroBillboard from '@/components/sections/hero/HeroBillboard';", "name": "HeroBillboard", "path": "@/components/sections/hero/HeroBillboard", "propsSchema": { "title": "string", "description": "string", "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "avatars?": "Array<{src: string, alt: string}>", "avatarText?": "string", "imageSrc?": "string", "videoSrc?": "string", "imageAlt?": "string (default: '')", "videoAriaLabel?": "string (default: 'Hero video')", "mediaAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "marqueeItems?": "Array", "marqueeSpeed?": "number (default: 30)", "showMarqueeCard?": "boolean (default: true)", "ariaLabel?": "string (default: 'Hero section')", "className?": "string", "containerClassName?": "string", "textBoxClassName?": "string", "titleClassName?": "string", "descriptionClassName?": "string", "tagClassName?": "string", "avatarGroupClassName?": "string", "buttonContainerClassName?": "string", "buttonClassName?": "string", "buttonTextClassName?": "string", "mediaWrapperClassName?": "string", "imageClassName?": "string", "marqueeClassName?": "string", "marqueeItemClassName?": "string", "marqueeCardClassName?": "string", "marqueeImageClassName?": "string", "marqueeTextClassName?": "string", "marqueeIconClassName?": "string" } }, { "import": "import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';", "name": "HeroBillboardCarousel", "path": "@/components/sections/hero/HeroBillboardCarousel", "propsSchema": { "title": "string", "description": "string", "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "mediaItems": "Array<{ imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }> - Each item requires either imageSrc or videoSrc", "ariaLabel?": "string (default: 'Hero section')", "className?": "string", "containerClassName?": "string", "textBoxClassName?": "string", "titleClassName?": "string", "descriptionClassName?": "string", "tagClassName?": "string", "buttonContainerClassName?": "string", "buttonClassName?": "string", "buttonTextClassName?": "string", "mediaWrapperClassName?": "string" } }, { "import": "import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';", "name": "HeroBillboardGallery", "path": "@/components/sections/hero/HeroBillboardGallery", "propsSchema": { "title": "string", "description": "string", "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "mediaItems": "Array<{ imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }> - Each item requires either imageSrc or videoSrc", "mediaAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "ariaLabel?": "string (default: 'Hero section')", "className?": "string", "containerClassName?": "string", "textBoxClassName?": "string", "titleClassName?": "string", "descriptionClassName?": "string", "tagClassName?": "string", "buttonContainerClassName?": "string", "buttonClassName?": "string", "buttonTextClassName?": "string", "mediaWrapperClassName?": "string", "imageClassName?": "string" } }, { "import": "import HeroSplit from '@/components/sections/hero/HeroSplit';", "name": "HeroSplit", "path": "@/components/sections/hero/HeroSplit", "propsSchema": { "title": "string", "description": "string", "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'glowing-orb' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "avatars?": "Avatar[] - Array of avatar objects with src and alt properties", "avatarText?": "string - Text displayed next to the avatar group", "imageSrc?": "string", "videoSrc?": "string", "imageAlt?": "string (default: '')", "videoAriaLabel?": "string (default: 'Hero video')", "mediaAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "ariaLabel?": "string (default: 'Hero section')", "imagePosition?": "'left' | 'right' (default: 'right')", "fixedMediaHeight?": "boolean (default: true) - When true, media wrapper is aspect-square on mobile and md:h-[65vh] on desktop", "className?": "string", "containerClassName?": "string", "textBoxClassName?": "string", "titleClassName?": "string", "descriptionClassName?": "string", "tagClassName?": "string", "buttonContainerClassName?": "string", "buttonClassName?": "string", "buttonTextClassName?": "string", "mediaWrapperClassName?": "string", "imageClassName?": "string", "avatarGroupClassName?": "string", "marqueeItems?": "Array<{ type: 'image', src: string, alt?: string } | { type: 'text', text: string } | { type: 'text-icon', text: string, icon: LucideIcon }> - Optional marquee at bottom of hero", "marqueeSpeed?": "number (default: 30)", "showMarqueeCard?": "boolean (default: true) - Card styling for text/text-icon items, images never have cards", "marqueeClassName?": "string", "marqueeItemClassName?": "string", "marqueeCardClassName?": "string", "marqueeImageClassName?": "string", "marqueeTextClassName?": "string", "marqueeIconClassName?": "string" } }, { "import": "import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';", "name": "HeroSplitTestimonial", "path": "@/components/sections/hero/HeroSplitTestimonial", "propsSchema": { "title": "string", "description": "string", "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'glowing-orb' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }", "testimonials": "Array<{ name: string, handle: string, testimonial: string, rating: number, imageSrc?: string, imageAlt?: string }>", "testimonialRotationInterval?": "number (default: 5000)", "useInvertedBackground?": "boolean (default: false)", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "avatars?": "Array<{ src: string, alt: string }>", "avatarText?": "string", "imageSrc?": "string", "videoSrc?": "string", "imageAlt?": "string (default: '')", "videoAriaLabel?": "string (default: 'Hero video')", "mediaAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "ariaLabel?": "string (default: 'Hero section')", "imagePosition?": "'left' | 'right' (default: 'right')", "fixedMediaHeight?": "boolean (default: true)", "className?": "string", "containerClassName?": "string", "textBoxClassName?": "string", "titleClassName?": "string", "descriptionClassName?": "string", "tagClassName?": "string", "buttonContainerClassName?": "string", "buttonClassName?": "string", "buttonTextClassName?": "string", "mediaWrapperClassName?": "string", "imageClassName?": "string", "avatarGroupClassName?": "string", "testimonialCardClassName?": "string", "testimonialContentClassName?": "string", "testimonialTextClassName?": "string", "testimonialRatingClassName?": "string", "testimonialAuthorClassName?": "string", "testimonialAuthorImageClassName?": "string", "testimonialAuthorNameClassName?": "string", "testimonialAuthorHandleClassName?": "string", "marqueeItems?": "Array<{ type: 'image', src: string, alt?: string } | { type: 'text', text: string } | { type: 'text-icon', text: string, icon: LucideIcon }>", "marqueeSpeed?": "number (default: 30)", "showMarqueeCard?": "boolean (default: true)", "marqueeClassName?": "string", "marqueeItemClassName?": "string", "marqueeCardClassName?": "string", "marqueeImageClassName?": "string", "marqueeTextClassName?": "string", "marqueeIconClassName?": "string" } }, { "import": "import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';", "name": "HeroBillboardTestimonial", "path": "@/components/sections/hero/HeroBillboardTestimonial", "propsSchema": { "title": "string", "description": "string", "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'glowing-orb' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }", "testimonials": "Array<{ name: string, handle: string, testimonial: string, rating: number, imageSrc?: string, imageAlt?: string }>", "testimonialRotationInterval?": "number (default: 5000)", "useInvertedBackground?": "boolean (default: false)", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "avatars?": "Array<{ src: string, alt: string }>", "avatarText?": "string", "imageSrc?": "string", "videoSrc?": "string", "imageAlt?": "string (default: '')", "videoAriaLabel?": "string (default: 'Hero video')", "mediaAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal' (default: 'none')", "ariaLabel?": "string (default: 'Hero section')", "className?": "string", "containerClassName?": "string", "textBoxClassName?": "string", "titleClassName?": "string", "descriptionClassName?": "string", "tagClassName?": "string", "avatarGroupClassName?": "string", "buttonContainerClassName?": "string", "buttonClassName?": "string", "buttonTextClassName?": "string", "mediaWrapperClassName?": "string", "imageClassName?": "string", "testimonialCardClassName?": "string", "testimonialContentClassName?": "string", "testimonialTextClassName?": "string", "testimonialRatingClassName?": "string", "testimonialAuthorClassName?": "string", "testimonialAuthorImageClassName?": "string", "testimonialAuthorNameClassName?": "string", "testimonialAuthorHandleClassName?": "string", "marqueeItems?": "Array<{ type: 'image', src: string, alt?: string } | { type: 'text', text: string } | { type: 'text-icon', text: string, icon: LucideIcon }>", "marqueeSpeed?": "number (default: 30)", "showMarqueeCard?": "boolean (default: true)", "marqueeClassName?": "string", "marqueeItemClassName?": "string", "marqueeCardClassName?": "string", "marqueeImageClassName?": "string", "marqueeTextClassName?": "string", "marqueeIconClassName?": "string" } }, { "import": "import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';", "name": "HeroSplitKpi", "path": "@/components/sections/hero/HeroSplitKpi", "propsSchema": { "title": "string", "description": "string", "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'glowing-orb' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }", "kpis": "[KpiItem, KpiItem, KpiItem] - Array of exactly 3 KPI items with value and label", "enableKpiAnimation": "boolean - Enable/disable mouse-following animation on KPI boxes", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "avatars?": "Avatar[] - Array of avatar objects with src and alt properties", "avatarText?": "string - Text displayed next to the avatar group", "imageSrc?": "string", "videoSrc?": "string", "imageAlt?": "string (default: '')", "videoAriaLabel?": "string (default: 'Hero video')", "mediaAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "ariaLabel?": "string (default: 'Hero section')", "imagePosition?": "'left' | 'right' (default: 'right')", "className?": "string", "containerClassName?": "string", "textBoxClassName?": "string", "titleClassName?": "string", "descriptionClassName?": "string", "tagClassName?": "string", "buttonContainerClassName?": "string", "buttonClassName?": "string", "buttonTextClassName?": "string", "mediaWrapperClassName?": "string", "imageClassName?": "string", "avatarGroupClassName?": "string", "kpiClassName?": "string", "kpiValueClassName?": "string", "kpiLabelClassName?": "string", "marqueeItems?": "Array<{ type: 'image', src: string, alt?: string } | { type: 'text', text: string } | { type: 'text-icon', text: string, icon: LucideIcon }> - Optional marquee at bottom of hero", "marqueeSpeed?": "number (default: 30)", "showMarqueeCard?": "boolean (default: true) - Card styling for text/text-icon items, images never have cards", "marqueeClassName?": "string", "marqueeItemClassName?": "string", "marqueeCardClassName?": "string", "marqueeImageClassName?": "string", "marqueeTextClassName?": "string", "marqueeIconClassName?": "string" } }, { "import": "import HeroOverlay from '@/components/sections/hero/HeroOverlay';", "name": "HeroOverlay", "path": "@/components/sections/hero/HeroOverlay", "propsSchema": { "title": "string", "description": "string", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "imageSrc?": "string", "videoSrc?": "string", "imageAlt?": "string (default: '')", "videoAriaLabel?": "string (default: 'Hero video')", "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" } }, { "import": "import HeroLogo from '@/components/sections/hero/HeroLogo';", "name": "HeroLogo", "path": "@/components/sections/hero/HeroLogo", "propsSchema": { "logoText": "string", "description": "string", "buttons": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "imageSrc?": "string", "videoSrc?": "string", "imageAlt?": "string (default: '')", "videoAriaLabel?": "string (default: 'Hero video')", "showDimOverlay?": "boolean (default: false)", "ariaLabel?": "string (default: 'Hero section')", "className?": "string", "containerClassName?": "string", "contentContainerClassName?": "string", "descriptionClassName?": "string", "buttonContainerClassName?": "string", "buttonClassName?": "string", "buttonTextClassName?": "string", "logoContainerClassName?": "string", "logoClassName?": "string", "mediaWrapperClassName?": "string", "imageClassName?": "string", "blurClassName?": "string", "dimOverlayClassName?": "string" } }, { "import": "import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';", "name": "HeroLogoBillboard", "path": "@/components/sections/hero/HeroLogoBillboard", "propsSchema": { "logoText": "string", "description": "string", "buttons": "Array<{ text: string, onClick?: () => void, href?: string }> - Primary and secondary buttons (required, max 2)", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'glowing-orb' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }", "imageSrc?": "string", "videoSrc?": "string", "imageAlt?": "string (default: '')", "videoAriaLabel?": "string (default: 'Hero video')", "mediaAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "frameStyle?": "'card' | 'browser' (default: 'card')", "ariaLabel?": "string (default: 'Hero section')", "className?": "string", "containerClassName?": "string", "logoContainerClassName?": "string", "logoClassName?": "string", "descriptionClassName?": "string", "buttonContainerClassName?": "string", "buttonClassName?": "string", "buttonTextClassName?": "string", "mediaWrapperClassName?": "string", "imageClassName?": "string", "browserBarClassName?": "string", "addressBarClassName?": "string" } }, { "import": "import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboardSplit';", "name": "HeroLogoBillboardSplit", "path": "@/components/sections/hero/HeroLogoBillboardSplit", "propsSchema": { "logoText": "string", "description": "string", "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'glowing-orb' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }", "buttons": "Array<{text: string, onClick?: () => void, href?: string}> (required)", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "layoutOrder": "'default' | 'reverse' (required)", "imageSrc?": "string", "videoSrc?": "string", "imageAlt?": "string (default: '')", "videoAriaLabel?": "string (default: 'Hero video')", "mediaAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "frameStyle?": "'card' | 'browser' (default: 'card')", "ariaLabel?": "string (default: 'Hero section')", "className?": "string", "containerClassName?": "string", "logoContainerClassName?": "string", "descriptionClassName?": "string", "buttonContainerClassName?": "string", "buttonClassName?": "string", "buttonTextClassName?": "string", "logoClassName?": "string", "mediaWrapperClassName?": "string", "imageClassName?": "string", "browserBarClassName?": "string", "addressBarClassName?": "string" } }, { "import": "import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';", "name": "HeroBillboardScroll", "path": "@/components/sections/hero/HeroBillboardScroll", "propsSchema": { "title": "string", "description": "string", "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "imageSrc?": "string", "videoSrc?": "string", "imageAlt?": "string (default: '')", "videoAriaLabel?": "string (default: 'Hero video')", "ariaLabel?": "string (default: 'Hero section')", "className?": "string", "containerClassName?": "string", "textBoxClassName?": "string", "titleClassName?": "string", "descriptionClassName?": "string", "tagClassName?": "string", "buttonContainerClassName?": "string", "buttonClassName?": "string", "buttonTextClassName?": "string", "cardWrapperClassName?": "string", "cardInnerClassName?": "string", "imageClassName?": "string" } }, { "import": "import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';", "name": "HeroBillboardRotatedCarousel", "path": "@/components/sections/hero/HeroBillboardRotatedCarousel", "propsSchema": { "title": "string", "description": "string", "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "carouselItems": "Array<{ id: string, imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }> - Carousel items (minimum 6 items)", "autoPlay?": "boolean (default: true)", "autoPlayInterval?": "number (default: 4000)", "ariaLabel?": "string (default: 'Hero section')", "className?": "string", "containerClassName?": "string", "textBoxClassName?": "string", "titleClassName?": "string", "descriptionClassName?": "string", "tagClassName?": "string", "buttonContainerClassName?": "string", "buttonClassName?": "string", "buttonTextClassName?": "string", "carouselClassName?": "string" } }, { "import": "import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';", "name": "HeroCarouselLogo", "path": "@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo", "propsSchema": { "logoText": "string", "description": "string", "buttons": "Array<{text: string, onClick?: () => void, href?: string}> (required)", "slides": "Array<{ imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }> - Carousel slide items", "autoplayDelay?": "number (default: 3000)", "showDimOverlay?": "boolean (default: false)", "ariaLabel?": "string (default: 'Hero section')", "className?": "string", "containerClassName?": "string", "contentContainerClassName?": "string", "descriptionClassName?": "string", "buttonContainerClassName?": "string", "buttonClassName?": "string", "buttonTextClassName?": "string", "logoContainerClassName?": "string", "logoClassName?": "string", "mediaWrapperClassName?": "string", "imageClassName?": "string", "blurClassName?": "string", "dimOverlayClassName?": "string", "progressBarClassName?": "string" } }, { "import": "import HeroCentered from '@/components/sections/hero/HeroCentered';", "name": "HeroCentered", "path": "@/components/sections/hero/HeroCentered", "propsSchema": { "title": "string", "description": "string", "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }", "avatars": "Array<{ src: string, alt: string }> (required)", "avatarText?": "string", "buttons?": "Array<{ text: string, onClick?: () => void, href?: string }>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "ariaLabel?": "string (default: 'Hero section')", "className?": "string", "containerClassName?": "string", "textBoxClassName?": "string", "titleClassName?": "string", "descriptionClassName?": "string", "avatarGroupClassName?": "string", "buttonContainerClassName?": "string", "buttonClassName?": "string", "buttonTextClassName?": "string", "marqueeItems?": "Array<{ type: 'image', src: string, alt?: string } | { type: 'text', text: string } | { type: 'text-icon', text: string, icon: LucideIcon }> - Optional marquee at bottom of hero", "marqueeSpeed?": "number (default: 30)", "showMarqueeCard?": "boolean (default: true) - Card styling for text/text-icon items, images never have cards", "marqueeClassName?": "string", "marqueeItemClassName?": "string", "marqueeCardClassName?": "string", "marqueeImageClassName?": "string", "marqueeTextClassName?": "string", "marqueeIconClassName?": "string" } }, { "import": "import HeroSignup from '@/components/sections/hero/HeroSignup';", "name": "HeroSignup", "path": "@/components/sections/hero/HeroSignup", "propsSchema": { "title": "string (required)", "description": "string (required)", "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'glowing-orb' | 'glowing-orb-sparkles' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }", "tag": "string (required)", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "inputPlaceholder?": "string (default: 'Enter your email')", "buttonText?": "string (default: 'Get Started')", "onSubmit?": "(email: string) => void", "ariaLabel?": "string (default: 'Hero section')", "className?": "string", "containerClassName?": "string", "textBoxClassName?": "string", "titleClassName?": "string", "descriptionClassName?": "string", "tagClassName?": "string", "formWrapperClassName?": "string", "formClassName?": "string", "inputClassName?": "string", "buttonClassName?": "string", "buttonTextClassName?": "string" } }, { "import": "import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';", "name": "HeroSplitDualMedia", "path": "@/components/sections/hero/HeroSplitDualMedia", "propsSchema": { "title": "string (required)", "description": "string (required)", "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'glowing-orb' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }", "tag": "string (required)", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "mediaItems": "[{imageSrc?: string; videoSrc?: string; imageAlt?: string; videoAriaLabel?: string;}, {imageSrc?: string; videoSrc?: string; imageAlt?: string; videoAriaLabel?: string;}] - Array of exactly 2 media items with imageSrc/videoSrc", "mediaAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "rating": "number (required) - Number of stars to display", "ratingText": "string (required) - Text displayed next to rating stars", "ariaLabel?": "string (default: 'Hero section')", "className?": "string", "containerClassName?": "string", "textBoxClassName?": "string", "titleClassName?": "string", "descriptionClassName?": "string", "tagClassName?": "string", "buttonContainerClassName?": "string", "buttonClassName?": "string", "buttonTextClassName?": "string", "mediaWrapperClassName?": "string", "mediaItemClassName?": "string", "imageClassName?": "string", "ratingClassName?": "string", "ratingTextClassName?": "string" } }, { "import": "import HeroBillboardDashboard from '@/components/sections/hero/HeroBillboardDashboard';", "name": "HeroBillboardDashboard", "path": "@/components/sections/hero/HeroBillboardDashboard", "propsSchema": { "title": "string", "description": "string", "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "dashboard": "{ title: string, stats: [DashboardStat, DashboardStat, DashboardStat], logoIcon: LucideIcon, sidebarItems: DashboardSidebarItem[], buttons: ButtonConfig[], listItems: DashboardListItem[], imageSrc: string, searchPlaceholder?: string, chartTitle?: string, chartData?: ChartDataItem[], listTitle?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string, className?: string, containerClassName?: string, sidebarClassName?: string, statClassName?: string, chartClassName?: string, listClassName?: string } (required - all Dashboard props passed as a single object)", "ariaLabel?": "string (default: 'Hero section')", "className?": "string", "containerClassName?": "string", "textBoxClassName?": "string", "titleClassName?": "string", "descriptionClassName?": "string", "tagClassName?": "string", "buttonContainerClassName?": "string", "buttonClassName?": "string", "buttonTextClassName?": "string", "dashboardClassName?": "string" } }, { "import": "import HeroPersonalLinks from '@/components/sections/hero/HeroPersonalLinks';", "name": "HeroPersonalLinks", "path": "@/components/sections/hero/HeroPersonalLinks", "propsSchema": { "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }", "title": "string", "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", "socialLinks?": "Array<{ icon: LucideIcon, label: string, href: string }> - Social media links", "linkCards": "Array<{ icon?: LucideIcon, imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string, title: string, description: string, button: ButtonConfig }> (required)", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "ariaLabel?": "string (default: 'Personal links section')", "className?": "string", "containerClassName?": "string", "textboxClassName?": "string", "titleClassName?": "string", "titleImageWrapperClassName?": "string", "titleImageClassName?": "string", "socialLinksClassName?": "string", "socialLinkClassName?": "string", "linkCardsClassName?": "string", "linkCardClassName?": "string", "linkCardIconClassName?": "string", "linkCardTitleClassName?": "string", "linkCardDescriptionClassName?": "string", "buttonClassName?": "string", "buttonTextClassName?": "string" } }, { "import": "import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';", "name": "HeroSplitDoubleCarousel", "path": "@/components/sections/hero/HeroSplitDoubleCarousel", "propsSchema": { "title": "string", "description": "string", "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'glowing-orb' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }", "leftCarouselItems": "Array<{ imageSrc?: string; videoSrc?: string; imageAlt?: string; videoAriaLabel?: string }>", "rightCarouselItems": "Array<{ imageSrc?: string; videoSrc?: string; imageAlt?: string; videoAriaLabel?: string }>", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "avatars?": "Avatar[] - Array of avatar objects with src and alt properties", "avatarText?": "string - Text displayed next to the avatar group", "carouselPosition?": "'left' | 'right' (default: 'right')", "ariaLabel?": "string (default: 'Hero section')", "marqueeItems?": "MarqueeItem[] - Optional logo marquee items for bottom of section", "marqueeSpeed?": "number (default: 30)", "showMarqueeCard?": "boolean (default: true)", "className?": "string", "containerClassName?": "string", "textBoxClassName?": "string", "titleClassName?": "string", "descriptionClassName?": "string", "tagClassName?": "string", "buttonContainerClassName?": "string", "buttonClassName?": "string", "buttonTextClassName?": "string", "carouselWrapperClassName?": "string", "carouselColumnClassName?": "string", "carouselItemClassName?": "string", "carouselImageClassName?": "string", "avatarGroupClassName?": "string", "marqueeClassName?": "string", "marqueeItemClassName?": "string", "marqueeCardClassName?": "string", "marqueeImageClassName?": "string", "marqueeTextClassName?": "string", "marqueeIconClassName?": "string" } } ], "about": [ { "import": "import SplitAbout from '@/components/sections/about/SplitAbout';", "name": "SplitAbout", "path": "@/components/sections/about/SplitAbout", "propsSchema": { "title": "string", "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", "description": "string", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "bulletPoints": "Array<{ title: string, description: string, icon?: LucideIcon }>", "imageSrc?": "string", "videoSrc?": "string", "imageAlt?": "string (default: '')", "videoAriaLabel?": "string (default: 'About section video')", "mediaAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "ariaLabel?": "string (default: 'About section')", "imagePosition?": "'left' | 'right' (default: 'right')", "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)", "useInvertedBackground": "boolean", "className?": "string", "containerClassName?": "string", "textBoxClassName?": "string", "titleClassName?": "string", "titleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout", "titleImageClassName?": "string - For styling images in inline-image layout", "descriptionClassName?": "string", "tagClassName?": "string", "buttonContainerClassName?": "string", "buttonClassName?": "string", "buttonTextClassName?": "string", "contentClassName?": "string", "bulletPointClassName?": "string", "bulletTitleClassName?": "string", "bulletDescriptionClassName?": "string", "mediaWrapperClassName?": "string", "imageClassName?": "string" } }, { "import": "import TextSplitAbout from '@/components/sections/about/TextSplitAbout';", "name": "TextSplitAbout", "path": "@/components/sections/about/TextSplitAbout", "propsSchema": { "title": "string", "description": "string[]", "buttons?": "Array<{ text: string, onClick?: () => void, href?: string, props?: Partial> }>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "showBorder?": "boolean (default: false)", "useInvertedBackground": "boolean", "ariaLabel?": "string (default: 'About section')", "className?": "string", "containerClassName?": "string", "titleClassName?": "string", "descriptionClassName?": "string", "buttonContainerClassName?": "string", "buttonClassName?": "string", "buttonTextClassName?": "string" } }, { "import": "import TextAbout from '@/components/sections/about/TextAbout';", "name": "TextAbout", "path": "@/components/sections/about/TextAbout", "propsSchema": { "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "title": "string", "buttons?": "Array<{ text: string, onClick?: () => void, href?: string, props?: Partial> }>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "useInvertedBackground": "boolean", "ariaLabel?": "string (default: 'About section')", "className?": "string", "containerClassName?": "string", "titleClassName?": "string", "buttonContainerClassName?": "string", "buttonClassName?": "string", "buttonTextClassName?": "string" } }, { "import": "import MediaAbout from '@/components/sections/about/MediaAbout';", "name": "MediaAbout", "path": "@/components/sections/about/MediaAbout", "propsSchema": { "title": "string", "description": "string", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "imageSrc?": "string", "videoSrc?": "string", "imageAlt?": "string", "videoAriaLabel?": "string", "useInvertedBackground": "boolean", "ariaLabel?": "string (default: 'About section')", "className?": "string", "textBoxClassName?": "string", "titleClassName?": "string", "descriptionClassName?": "string", "tagClassName?": "string", "buttonContainerClassName?": "string", "buttonClassName?": "string", "buttonTextClassName?": "string", "mediaWrapperClassName?": "string", "mediaClassName?": "string" } }, { "import": "import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';", "name": "TestimonialAboutCard", "path": "@/components/sections/about/TestimonialAboutCard", "propsSchema": { "tag": "string (required)", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "title": "string (required)", "description": "string (required)", "subdescription": "string (required)", "icon": "LucideIcon (required - displayed in the icon box)", "imageSrc": "string (required if no videoSrc)", "imageAlt?": "string (default: '')", "videoSrc": "string (required if no imageSrc)", "videoAriaLabel?": "string (default: 'Testimonial video')", "mediaAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "useInvertedBackground": "boolean", "ariaLabel?": "string (default: 'Testimonial section')", "className?": "string", "containerClassName?": "string", "cardClassName?": "string", "contentClassName?": "string", "tagClassName?": "string", "titleClassName?": "string", "descriptionClassName?": "string", "subdescriptionClassName?": "string", "footerClassName?": "string", "iconBoxClassName?": "string", "iconClassName?": "string", "mediaWrapperClassName?": "string", "mediaClassName?": "string" } }, { "import": "import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';", "name": "InlineImageSplitTextAbout", "path": "@/components/sections/about/InlineImageSplitTextAbout", "propsSchema": { "heading": "Array<{ type: 'text'; content: string } | { type: 'image'; src: string; alt?: string }>", "buttons?": "Array<{ text: string, onClick?: () => void, href?: string, props?: Partial> }>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "useInvertedBackground": "boolean", "ariaLabel?": "string (default: 'About section')", "className?": "string", "containerClassName?": "string", "headingClassName?": "string", "imageWrapperClassName?": "string", "imageClassName?": "string", "buttonContainerClassName?": "string", "buttonClassName?": "string", "buttonTextClassName?": "string" } }, { "import": "import AboutMetric from '@/components/sections/about/AboutMetric';", "name": "AboutMetric", "path": "@/components/sections/about/AboutMetric", "propsSchema": { "title": "string", "metrics": "Array<{ icon: LucideIcon, label: string, value: string }>", "metricsAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "useInvertedBackground": "boolean", "ariaLabel?": "string (default: 'About metrics section')", "className?": "string", "containerClassName?": "string", "titleClassName?": "string", "metricsContainerClassName?": "string", "metricCardClassName?": "string", "metricIconClassName?": "string", "metricLabelClassName?": "string", "metricValueClassName?": "string" } }, { "import": "import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';", "name": "MetricSplitMediaAbout", "path": "@/components/sections/about/MetricSplitMediaAbout", "propsSchema": { "title": "string", "description": "string", "metrics": "Array<{ value: string, title: string }>", "useInvertedBackground": "boolean", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "imageSrc?": "string", "videoSrc?": "string", "imageAlt?": "string", "videoAriaLabel?": "string (default: 'About section video')", "mediaAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "metricsAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "ariaLabel?": "string (default: 'About section')", "className?": "string", "containerClassName?": "string", "gridClassName?": "string", "leftColumnClassName?": "string", "rightColumnClassName?": "string", "textBoxClassName?": "string", "titleClassName?": "string", "descriptionClassName?": "string", "tagClassName?": "string", "metricsContainerClassName?": "string", "metricCardClassName?": "string", "metricValueClassName?": "string", "metricTitleClassName?": "string", "mediaWrapperClassName?": "string", "imageClassName?": "string" } } ], "feature": [ { "import": "import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';", "name": "FeatureCardOne", "path": "@/components/sections/feature/FeatureCardOne", "propsSchema": { "features": "Array<{ title: string, description: string, button?: {text: string, onClick?: () => void, href?: string} } & ({ imageSrc: string, imageAlt?: string } | { videoSrc: string, videoAriaLabel?: string })>", "carouselMode?": "'auto' | 'buttons' (default: 'buttons')", "gridVariant": "'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right' | 'two-items-per-row' | 'timeline'", "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d'", "uniformGridCustomHeightClasses?": "string", "title": "string", "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", "description": "string", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)", "ariaLabel?": "string (default: 'Feature section')", "className?": "string", "containerClassName?": "string", "cardClassName?": "string", "mediaClassName?": "string", "textBoxTitleClassName?": "string", "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout", "textBoxTitleImageClassName?": "string - For styling images in inline-image layout", "textBoxDescriptionClassName?": "string", "cardTitleClassName?": "string", "cardDescriptionClassName?": "string", "cardButtonClassName?": "string", "cardButtonTextClassName?": "string", "gridClassName?": "string", "carouselClassName?": "string", "controlsClassName?": "string", "textBoxClassName?": "string", "textBoxTagClassName?": "string", "textBoxButtonContainerClassName?": "string", "textBoxButtonClassName?": "string", "textBoxButtonTextClassName?": "string", "useInvertedBackground": "boolean" } }, { "import": "import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';", "name": "FeatureCardThree", "path": "@/components/sections/feature/featureCardThree/FeatureCardThree", "propsSchema": { "features": "Array<{ id: string, title: string, description: string, imageSrc: string, imageAlt?: string }>", "carouselMode?": "'auto' | 'buttons' (default: 'buttons')", "gridVariant": "'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right' | 'timeline' (required)", "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)", "uniformGridCustomHeightClasses?": "string", "title": "string", "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", "description": "string", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)", "useInvertedBackground": "boolean", "ariaLabel?": "string (default: 'Feature section')", "className?": "string", "containerClassName?": "string", "cardClassName?": "string", "textBoxTitleClassName?": "string", "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout", "textBoxTitleImageClassName?": "string - For styling images in inline-image layout", "textBoxDescriptionClassName?": "string", "cardTitleClassName?": "string", "cardDescriptionClassName?": "string", "gridClassName?": "string", "carouselClassName?": "string", "controlsClassName?": "string", "textBoxClassName?": "string", "textBoxTagClassName?": "string", "textBoxButtonContainerClassName?": "string", "textBoxButtonClassName?": "string", "textBoxButtonTextClassName?": "string", "itemContentClassName?": "string" } }, { "import": "import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';", "name": "FeatureCardSix", "path": "@/components/sections/feature/FeatureCardSix", "propsSchema": { "features": "Array<{ id: number, title: string, description: string, buttons?: ButtonConfig[] } & ({ imageSrc: string, imageAlt?: string } | { videoSrc: string, videoAriaLabel?: string })>", "title": "string", "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", "description": "string", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)", "useInvertedBackground": "boolean", "ariaLabel?": "string (default: 'Feature section')", "className?": "string", "containerClassName?": "string", "textBoxTitleClassName?": "string", "titleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout", "titleImageClassName?": "string - For styling images in inline-image layout", "textBoxDescriptionClassName?": "string", "textBoxClassName?": "string", "textBoxTagClassName?": "string", "textBoxButtonContainerClassName?": "string", "textBoxButtonClassName?": "string", "textBoxButtonTextClassName?": "string", "cardContentClassName?": "string", "stepNumberClassName?": "string", "cardTitleClassName?": "string", "cardDescriptionClassName?": "string", "imageContainerClassName?": "string", "imageClassName?": "string", "cardButtonClassName?": "string", "cardButtonTextClassName?": "string" } }, { "import": "import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';", "name": "FeatureCardSeven", "path": "@/components/sections/feature/FeatureCardSeven", "propsSchema": { "features": "Array<{ id: number, title: string, description: string, buttons?: ButtonConfig[] } & ({ imageSrc: string, imageAlt?: string } | { videoSrc: string, videoAriaLabel?: string })>", "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)", "title": "string", "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", "description": "string", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)", "useInvertedBackground": "boolean", "ariaLabel?": "string (default: 'Feature section')", "className?": "string", "containerClassName?": "string", "cardClassName?": "string", "textBoxTitleClassName?": "string", "titleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout", "titleImageClassName?": "string - For styling images in inline-image layout", "textBoxDescriptionClassName?": "string", "textBoxClassName?": "string", "textBoxTagClassName?": "string", "textBoxButtonContainerClassName?": "string", "textBoxButtonClassName?": "string", "textBoxButtonTextClassName?": "string", "cardContentClassName?": "string", "stepNumberClassName?": "string", "cardTitleClassName?": "string", "cardDescriptionClassName?": "string", "imageContainerClassName?": "string", "imageClassName?": "string", "cardButtonClassName?": "string", "cardButtonTextClassName?": "string" } }, { "import": "import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';", "name": "FeatureCardEight", "path": "@/components/sections/feature/FeatureCardEight", "propsSchema": { "features": "Array<{ id: number, title: string, description: string } & ({ imageSrc: string, imageAlt?: string } | { videoSrc: string, videoAriaLabel?: string })>", "title": "string", "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", "description": "string", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)", "useInvertedBackground": "boolean", "ariaLabel?": "string (default: 'Feature section')", "className?": "string", "containerClassName?": "string", "textBoxTitleClassName?": "string", "titleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout", "titleImageClassName?": "string - For styling images in inline-image layout", "textBoxDescriptionClassName?": "string", "textBoxClassName?": "string", "textBoxTagClassName?": "string", "textBoxButtonContainerClassName?": "string", "textBoxButtonClassName?": "string", "textBoxButtonTextClassName?": "string", "cardClassName?": "string", "progressBarClassName?": "string", "cardContentClassName?": "string", "stepNumberClassName?": "string", "cardTitleClassName?": "string", "cardDescriptionClassName?": "string", "mediaContainerClassName?": "string", "mediaClassName?": "string" } }, { "import": "import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';", "name": "FeatureCardNine", "path": "@/components/sections/feature/FeatureCardNine", "propsSchema": { "features": "Array<{ id: number, title: string, description: string, buttons?: ButtonConfig[], phoneOne: ({ imageSrc: string, imageAlt?: string } | { videoSrc: string, videoAriaLabel?: string }), phoneTwo: ({ imageSrc: string, imageAlt?: string } | { videoSrc: string, videoAriaLabel?: string }) }>", "showStepNumbers": "boolean (required - controls whether step number badges display)", "title": "string", "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", "description": "string", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)", "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)", "useInvertedBackground": "boolean", "ariaLabel?": "string (default: 'Feature section')", "className?": "string", "containerClassName?": "string", "textBoxTitleClassName?": "string", "titleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout", "titleImageClassName?": "string - For styling images in inline-image layout", "textBoxDescriptionClassName?": "string", "textBoxClassName?": "string", "textBoxTagClassName?": "string", "textBoxButtonContainerClassName?": "string", "textBoxButtonClassName?": "string", "textBoxButtonTextClassName?": "string", "desktopContainerClassName?": "string", "mobileContainerClassName?": "string", "desktopContentClassName?": "string", "desktopWrapperClassName?": "string", "mobileWrapperClassName?": "string", "phoneFrameClassName?": "string", "mobilePhoneFrameClassName?": "string", "featureContentClassName?": "string", "stepNumberClassName?": "string", "featureTitleClassName?": "string", "featureDescriptionClassName?": "string", "cardButtonClassName?": "string", "cardButtonTextClassName?": "string" } }, { "import": "import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';", "name": "FeatureCardTen", "path": "@/components/sections/feature/FeatureCardTen", "propsSchema": { "features": "Array<{ id: string, title: string, description: string, media: ({ imageSrc: string, imageAlt?: string } | { videoSrc: string, videoAriaLabel?: string }), items: Array<{ icon: LucideIcon, text: string }>, reverse: boolean }>", "title": "string", "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", "description": "string", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)", "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)", "useInvertedBackground": "boolean", "ariaLabel?": "string (default: 'Feature section')", "className?": "string", "containerClassName?": "string", "textBoxClassName?": "string", "textBoxTitleClassName?": "string", "textBoxDescriptionClassName?": "string", "textBoxTagClassName?": "string", "textBoxButtonContainerClassName?": "string", "textBoxButtonClassName?": "string", "textBoxButtonTextClassName?": "string", "titleImageWrapperClassName?": "string", "titleImageClassName?": "string", "itemClassName?": "string", "mediaWrapperClassName?": "string", "mediaCardClassName?": "string", "numberClassName?": "string", "contentWrapperClassName?": "string", "featureTitleClassName?": "string", "featureDescriptionClassName?": "string", "listItemClassName?": "string", "iconContainerClassName?": "string", "iconClassName?": "string", "gapClassName?": "string" } }, { "import": "import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';", "name": "FeatureHoverPattern", "path": "@/components/sections/feature/featureHoverPattern/FeatureHoverPattern", "propsSchema": { "features": "Array<{ icon: LucideIcon, title: string, description: string, button?: ButtonConfig }> (required)", "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)", "title": "string (required)", "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", "description": "string (required)", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)", "useInvertedBackground": "boolean (required)", "carouselMode?": "'auto' | 'buttons' (default: 'buttons' - for 5+ items)", "uniformGridCustomHeightClasses?": "string (default: 'min-h-80 2xl:min-h-90')", "ariaLabel?": "string (default: 'Feature section')", "className?": "string", "containerClassName?": "string", "cardClassName?": "string", "iconContainerClassName?": "string", "iconClassName?": "string", "textBoxClassName?": "string", "textBoxTitleClassName?": "string", "textBoxDescriptionClassName?": "string", "textBoxTagClassName?": "string", "textBoxButtonContainerClassName?": "string", "textBoxButtonClassName?": "string", "textBoxButtonTextClassName?": "string", "titleImageWrapperClassName?": "string", "titleImageClassName?": "string", "cardTitleClassName?": "string", "cardDescriptionClassName?": "string", "gradientClassName?": "string - Custom gradient for hover pattern (default: 'bg-gradient-to-r from-accent to-background-accent')", "gridClassName?": "string", "carouselClassName?": "string", "controlsClassName?": "string", "cardButtonClassName?": "string", "cardButtonTextClassName?": "string" } }, { "import": "import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';", "name": "FeatureBorderGlow", "path": "@/components/sections/feature/featureBorderGlow/FeatureBorderGlow", "propsSchema": { "features": "Array<{ icon: LucideIcon, title: string, description: string }> (required)", "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)", "title": "string (required)", "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", "description": "string (required)", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)", "useInvertedBackground": "boolean (required)", "carouselMode?": "'auto' | 'buttons' (default: 'buttons' - for 5+ items)", "uniformGridCustomHeightClasses?": "string (default: 'min-h-75 2xl:min-h-85')", "ariaLabel?": "string (default: 'Feature section')", "className?": "string", "containerClassName?": "string", "cardClassName?": "string", "iconContainerClassName?": "string", "iconClassName?": "string", "textBoxClassName?": "string", "textBoxTitleClassName?": "string", "textBoxTitleImageWrapperClassName?": "string", "textBoxTitleImageClassName?": "string", "textBoxDescriptionClassName?": "string", "textBoxTagClassName?": "string", "textBoxButtonContainerClassName?": "string", "textBoxButtonClassName?": "string", "textBoxButtonTextClassName?": "string", "cardTitleClassName?": "string", "cardDescriptionClassName?": "string", "gridClassName?": "string", "carouselClassName?": "string", "controlsClassName?": "string" } }, { "import": "import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';", "name": "FeatureCardTwelve", "path": "@/components/sections/feature/FeatureCardTwelve", "propsSchema": { "features": "Array<{ id: string, label: string, title: string, items: string[], buttons?: Array<{text: string, onClick?: () => void, href?: string}> }>", "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)", "title": "string", "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", "description": "string", "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)", "useInvertedBackground": "boolean", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "ariaLabel?": "string (default: 'Feature section')", "className?": "string", "containerClassName?": "string", "cardClassName?": "string", "textBoxTitleClassName?": "string", "textBoxDescriptionClassName?": "string", "textBoxClassName?": "string", "textBoxTagClassName?": "string", "textBoxButtonContainerClassName?": "string", "textBoxButtonClassName?": "string", "textBoxButtonTextClassName?": "string", "titleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout", "titleImageClassName?": "string - For styling images in inline-image layout", "cardContentClassName?": "string", "labelClassName?": "string", "cardTitleClassName?": "string", "itemsContainerClassName?": "string", "itemTextClassName?": "string", "cardButtonClassName?": "string", "cardButtonTextClassName?": "string" } }, { "import": "import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';", "name": "FeatureCardSixteen", "path": "@/components/sections/feature/FeatureCardSixteen", "propsSchema": { "negativeCard": "{ items: string[] } (required)", "positiveCard": "{ items: string[] } (required)", "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d'", "title": "string", "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", "description": "string", "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required)", "useInvertedBackground": "boolean", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "ariaLabel?": "string (default: 'Feature comparison section')", "className?": "string", "containerClassName?": "string", "textBoxClassName?": "string", "textBoxTitleClassName?": "string", "titleImageWrapperClassName?": "string", "titleImageClassName?": "string", "textBoxDescriptionClassName?": "string", "textBoxTagClassName?": "string", "textBoxButtonContainerClassName?": "string", "textBoxButtonClassName?": "string", "textBoxButtonTextClassName?": "string", "gridClassName?": "string", "cardClassName?": "string", "itemsListClassName?": "string", "itemClassName?": "string", "itemIconClassName?": "string", "itemTextClassName?": "string" } }, { "import": "import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';", "name": "FeatureCardNineteen", "path": "@/components/sections/feature/FeatureCardNineteen", "propsSchema": { "features": "Array<{ 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?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", "description": "string", "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required)", "useInvertedBackground": "boolean", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "ariaLabel?": "string (default: 'Feature section')", "className?": "string", "containerClassName?": "string", "textBoxClassName?": "string", "textBoxTitleClassName?": "string", "textBoxDescriptionClassName?": "string", "textBoxTagClassName?": "string", "textBoxButtonContainerClassName?": "string", "textBoxButtonClassName?": "string", "textBoxButtonTextClassName?": "string", "titleImageWrapperClassName?": "string", "titleImageClassName?": "string", "cardContentClassName?": "string", "cardTagClassName?": "string", "cardTitleClassName?": "string", "cardDescriptionClassName?": "string", "cardButtonClassName?": "string", "cardButtonTextClassName?": "string", "imageContainerClassName?": "string", "imageClassName?": "string" } }, { "import": "import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';", "name": "FeatureCardTwentyOne", "path": "@/components/sections/feature/FeatureCardTwentyOne", "propsSchema": { "title": "string", "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", "description": "string", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "accordionItems": "Array<{ id: string, title: string, content: string }>", "imageSrc?": "string (either imageSrc or videoSrc required)", "imageAlt?": "string", "videoSrc?": "string (either imageSrc or videoSrc required)", "videoAriaLabel?": "string", "mediaAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "useInvertedBackground": "boolean", "mediaPosition?": "'left' | 'right' (default: 'left')", "ariaLabel?": "string (default: 'Feature section')", "className?": "string", "containerClassName?": "string", "mediaWrapperClassName?": "string", "mediaClassName?": "string", "contentClassName?": "string", "textBoxClassName?": "string", "titleClassName?": "string", "descriptionClassName?": "string", "tagClassName?": "string", "buttonContainerClassName?": "string", "buttonClassName?": "string", "buttonTextClassName?": "string", "titleImageWrapperClassName?": "string", "titleImageClassName?": "string", "accordionContainerClassName?": "string", "accordionClassName?": "string", "accordionTitleClassName?": "string", "accordionContentClassName?": "string", "accordionIconContainerClassName?": "string", "accordionIconClassName?": "string" } }, { "import": "import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';", "name": "FeatureCardMedia", "path": "@/components/sections/feature/FeatureCardMedia", "propsSchema": { "features": "Array<{ id: string, title: string, description: string, tag: string, imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string, buttons?: ButtonConfig[], onCardClick?: () => void }>", "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal'", "title": "string", "description": "string", "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image'", "useInvertedBackground": "boolean", "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }>", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{ text: string, href?: string, onClick?: () => void }>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "carouselMode?": "'auto' | 'buttons' (default: 'buttons')", "uniformGridCustomHeightClasses?": "string", "ariaLabel?": "string (default: 'Features section')", "className?": "string", "containerClassName?": "string", "itemClassName?": "string", "mediaWrapperClassName?": "string", "mediaClassName?": "string", "tagClassName?": "string", "contentClassName?": "string", "cardTitleClassName?": "string", "cardDescriptionClassName?": "string", "cardButtonContainerClassName?": "string", "cardButtonClassName?": "string", "cardButtonTextClassName?": "string", "textBoxTitleClassName?": "string", "textBoxTitleImageWrapperClassName?": "string", "textBoxTitleImageClassName?": "string", "textBoxDescriptionClassName?": "string", "gridClassName?": "string", "carouselClassName?": "string", "controlsClassName?": "string", "textBoxClassName?": "string", "textBoxTagClassName?": "string", "textBoxButtonContainerClassName?": "string", "textBoxButtonClassName?": "string", "textBoxButtonTextClassName?": "string" } }, { "import": "import FeatureBento from '@/components/sections/feature/FeatureBento';", "name": "FeatureBento", "path": "@/components/sections/feature/FeatureBento", "propsSchema": { "features": "Array - Each card has { title: string, description: string, button?: ButtonConfig } and one of: { bentoComponent: 'globe' } | { bentoComponent: 'animated-bar-chart' } | { bentoComponent: 'map' } | { bentoComponent: 'line-chart' } | { bentoComponent: 'phone', statusIcon: LucideIcon, alertIcon: LucideIcon, alertTitle: string, alertMessage: string, apps: Array<{ name: string, icon: LucideIcon }> (exactly 8 items) } | { bentoComponent: 'chat', aiIcon: LucideIcon, userIcon: LucideIcon, exchanges: Array<{ userMessage: string, aiResponse: string }>, placeholder: string } | { bentoComponent: 'icon-info-cards', items: Array<{ icon: LucideIcon, label: string, value: string }> } | { bentoComponent: '3d-stack-cards', items: [{ icon: LucideIcon, title: string, subtitle: string, detail: string }, { icon: LucideIcon, title: string, subtitle: string, detail: string }, { icon: LucideIcon, title: string, subtitle: string, detail: string }] } | { bentoComponent: '3d-task-list', title: string, items: Array<{ icon: LucideIcon, label: string, time: string }> } | { bentoComponent: 'orbiting-icons', centerIcon: LucideIcon, items: Array<{ icon: LucideIcon, ring?: 1 | 2 | 3, duration?: number }> } | { bentoComponent: 'marquee', centerIcon: LucideIcon, variant: 'text', texts: string[] } | { bentoComponent: 'marquee', centerIcon: LucideIcon, variant: 'icon', icons: LucideIcon[] } | { bentoComponent: '3d-card-grid', items: [{ name: string, icon: LucideIcon }, { name: string, icon: LucideIcon }, { name: string, icon: LucideIcon }, { name: string, icon: LucideIcon }], centerIcon: LucideIcon } | { bentoComponent: 'reveal-icon', icon: LucideIcon } | { bentoComponent: 'timeline', heading: string, subheading: string, items: [{ label: string, detail: string }, { label: string, detail: string }, { label: string, detail: string }], completedLabel: string } | { bentoComponent: 'media-stack', items: [{ imageSrc?: string, videoSrc?: string, imageAlt?: string }, { imageSrc?: string, videoSrc?: string, imageAlt?: string }, { imageSrc?: string, videoSrc?: string, imageAlt?: string }] }", "carouselMode?": "'auto' | 'buttons' (default: 'buttons')", "animationType": "'none' | 'opacity' | 'slide-up' | 'blur-reveal' (required)", "title": "string (required)", "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", "description": "string (required)", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)", "useInvertedBackground": "boolean (required)", "ariaLabel?": "string (default: 'Feature section')", "className?": "string", "containerClassName?": "string", "cardClassName?": "string", "textBoxTitleClassName?": "string", "textBoxTitleImageWrapperClassName?": "string", "textBoxTitleImageClassName?": "string", "textBoxDescriptionClassName?": "string", "cardTitleClassName?": "string", "cardDescriptionClassName?": "string", "cardButtonClassName?": "string", "cardButtonTextClassName?": "string", "gridClassName?": "string", "carouselClassName?": "string", "controlsClassName?": "string", "textBoxClassName?": "string", "textBoxTagClassName?": "string", "textBoxButtonContainerClassName?": "string", "textBoxButtonClassName?": "string", "textBoxButtonTextClassName?": "string" } }, { "import": "import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';", "name": "FeatureCardTwentyThree", "path": "@/components/sections/feature/FeatureCardTwentyThree", "propsSchema": { "features": "Array<{ id: string, title: string, tags: string[], imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string, onFeatureClick?: () => void }>", "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)", "title": "string", "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", "description": "string", "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required)", "useInvertedBackground": "boolean", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "carouselMode?": "'auto' | 'buttons' (default: 'buttons')", "uniformGridCustomHeightClasses?": "string", "ariaLabel?": "string (default: 'Features section')", "className?": "string", "containerClassName?": "string", "itemClassName?": "string", "mediaWrapperClassName?": "string", "mediaClassName?": "string", "cardClassName?": "string", "cardTitleClassName?": "string", "tagsContainerClassName?": "string", "tagClassName?": "string", "arrowClassName?": "string", "textBoxTitleClassName?": "string", "textBoxTitleImageWrapperClassName?": "string", "textBoxTitleImageClassName?": "string", "textBoxDescriptionClassName?": "string", "gridClassName?": "string", "carouselClassName?": "string", "controlsClassName?": "string", "textBoxClassName?": "string", "textBoxTagClassName?": "string", "textBoxButtonContainerClassName?": "string", "textBoxButtonClassName?": "string", "textBoxButtonTextClassName?": "string" } }, { "import": "import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';", "name": "FeatureCardTwentyFour", "path": "@/components/sections/feature/FeatureCardTwentyFour", "propsSchema": { "features": "Array<{ id: string, title: string, author: string, description: string, tags: string[], imageSrc?: string, imageAlt?: string, videoSrc?: string, videoAriaLabel?: string, onFeatureClick?: () => void }> - Feature card items (requires imageSrc or videoSrc)", "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)", "title": "string (required)", "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", "description": "string (required)", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required)", "useInvertedBackground": "boolean (required)", "ariaLabel?": "string (default: 'Features section')", "className?": "string", "containerClassName?": "string", "cardClassName?": "string", "textBoxTitleClassName?": "string", "textBoxDescriptionClassName?": "string", "textBoxClassName?": "string", "textBoxTagClassName?": "string", "textBoxButtonContainerClassName?": "string", "textBoxButtonClassName?": "string", "textBoxButtonTextClassName?": "string", "titleImageWrapperClassName?": "string", "titleImageClassName?": "string", "cardContentClassName?": "string", "cardTitleClassName?": "string", "authorClassName?": "string", "cardDescriptionClassName?": "string", "tagsContainerClassName?": "string", "tagClassName?": "string", "mediaWrapperClassName?": "string", "mediaClassName?": "string" } }, { "import": "import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';", "name": "FeatureCardTwentyFive", "path": "@/components/sections/feature/FeatureCardTwentyFive", "propsSchema": { "features": "Array<{ title: string, description: string, icon: LucideIcon, mediaItems: [{imageSrc?: string; videoSrc?: string; imageAlt?: string; videoAriaLabel?: string;}, {imageSrc?: string; videoSrc?: string; imageAlt?: string; videoAriaLabel?: string;}] }> - Feature cards with dual media", "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d' (required)", "title": "string (required)", "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", "description": "string (required)", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required)", "useInvertedBackground": "boolean (required)", "carouselMode?": "'auto' | 'buttons' (default: 'buttons')", "uniformGridCustomHeightClasses?": "string", "ariaLabel?": "string (default: 'Feature section')", "className?": "string", "containerClassName?": "string", "cardClassName?": "string", "mediaClassName?": "string", "textBoxTitleClassName?": "string", "textBoxTitleImageWrapperClassName?": "string", "textBoxTitleImageClassName?": "string", "textBoxDescriptionClassName?": "string", "cardTitleClassName?": "string", "cardDescriptionClassName?": "string", "cardIconClassName?": "string", "cardIconWrapperClassName?": "string", "gridClassName?": "string", "carouselClassName?": "string", "controlsClassName?": "string", "textBoxClassName?": "string", "textBoxTagClassName?": "string", "textBoxButtonContainerClassName?": "string", "textBoxButtonClassName?": "string", "textBoxButtonTextClassName?": "string" } }, { "import": "import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';", "name": "FeatureCardTwentySix", "path": "@/components/sections/feature/FeatureCardTwentySix", "propsSchema": { "features": "Array<{ title: string, description: string, imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string, buttonIcon: LucideIcon, buttonHref?: string, buttonOnClick?: () => void }>", "title": "string (required)", "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", "description": "string (required)", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required)", "useInvertedBackground": "boolean (required)", "ariaLabel?": "string (default: 'Feature section')", "className?": "string", "containerClassName?": "string", "cardClassName?": "string", "carouselClassName?": "string", "controlsClassName?": "string", "textBoxClassName?": "string", "textBoxTitleClassName?": "string", "textBoxTitleImageWrapperClassName?": "string", "textBoxTitleImageClassName?": "string", "textBoxDescriptionClassName?": "string", "textBoxTagClassName?": "string", "textBoxButtonContainerClassName?": "string", "textBoxButtonClassName?": "string", "textBoxButtonTextClassName?": "string", "cardTitleClassName?": "string", "cardDescriptionClassName?": "string", "cardButtonClassName?": "string" } }, { "import": "import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';", "name": "FeatureCardTwentySeven", "path": "@/components/sections/feature/FeatureCardTwentySeven", "propsSchema": { "features": "Array<{ id: string, title: string, descriptions: string[], imageSrc?: string, videoSrc?: string, imageAlt?: string }>", "gridVariant": "'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right' | 'two-items-per-row' | 'timeline' (required)", "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)", "title": "string (required)", "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", "description": "string (required)", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required)", "useInvertedBackground": "boolean", "carouselMode?": "'auto' | 'buttons' (default: 'buttons')", "uniformGridCustomHeightClasses?": "string (default: 'min-h-none')", "ariaLabel?": "string (default: 'Feature section')", "className?": "string", "containerClassName?": "string", "cardClassName?": "string", "gridClassName?": "string", "carouselClassName?": "string", "controlsClassName?": "string", "textBoxClassName?": "string", "textBoxTitleClassName?": "string", "textBoxTitleImageWrapperClassName?": "string", "textBoxTitleImageClassName?": "string", "textBoxDescriptionClassName?": "string", "textBoxTagClassName?": "string", "textBoxButtonContainerClassName?": "string", "textBoxButtonClassName?": "string", "textBoxButtonTextClassName?": "string", "cardTitleClassName?": "string", "cardDescriptionClassName?": "string" } } ], "product": [ { "import": "import ProductCardOne from '@/components/sections/product/ProductCardOne';", "name": "ProductCardOne", "path": "@/components/sections/product/ProductCardOne", "propsSchema": { "products?": "Array<{ id: string, name: string, price: string, imageSrc: string, imageAlt?: string, onFavorite?: () => void, onProductClick?: () => void, isFavorited?: boolean }>", "carouselMode?": "'auto' | 'buttons' (default: 'buttons')", "gridVariant": "'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right' (required)", "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)", "uniformGridCustomHeightClasses?": "string (default: 'min-h-95 2xl:min-h-105')", "title": "string", "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", "description": "string", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)", "useInvertedBackground": "boolean", "ariaLabel?": "string (default: 'Product section')", "className?": "string", "containerClassName?": "string", "cardClassName?": "string", "imageClassName?": "string", "textBoxTitleClassName?": "string", "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout", "textBoxTitleImageClassName?": "string - For styling images in inline-image layout", "textBoxDescriptionClassName?": "string", "cardNameClassName?": "string", "cardPriceClassName?": "string", "gridClassName?": "string", "carouselClassName?": "string", "controlsClassName?": "string", "textBoxClassName?": "string", "textBoxTagClassName?": "string", "textBoxButtonContainerClassName?": "string", "textBoxButtonClassName?": "string", "textBoxButtonTextClassName?": "string" } }, { "import": "import ProductCardTwo from '@/components/sections/product/ProductCardTwo';", "name": "ProductCardTwo", "path": "@/components/sections/product/ProductCardTwo", "propsSchema": { "products?": "Array<{ id: string, brand: string, name: string, price: string, rating: number, reviewCount: string, imageSrc: string, imageAlt?: string, onFavorite?: () => void, onProductClick?: () => void, isFavorited?: boolean }>", "carouselMode?": "'auto' | 'buttons' (default: 'buttons')", "gridVariant": "'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' (required)", "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)", "uniformGridCustomHeightClasses?": "string (default: 'min-h-95 2xl:min-h-105')", "title": "string", "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", "description": "string", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)", "useInvertedBackground": "boolean", "ariaLabel?": "string (default: 'Product section')", "className?": "string", "containerClassName?": "string", "cardClassName?": "string", "imageClassName?": "string", "textBoxTitleClassName?": "string", "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout", "textBoxTitleImageClassName?": "string - For styling images in inline-image layout", "textBoxDescriptionClassName?": "string", "cardBrandClassName?": "string", "cardNameClassName?": "string", "cardPriceClassName?": "string", "cardRatingClassName?": "string", "actionButtonClassName?": "string - Styles the action button on product image", "gridClassName?": "string", "carouselClassName?": "string", "controlsClassName?": "string", "textBoxClassName?": "string", "textBoxTagClassName?": "string", "textBoxButtonContainerClassName?": "string", "textBoxButtonClassName?": "string", "textBoxButtonTextClassName?": "string" } }, { "import": "import ProductCardThree from '@/components/sections/product/ProductCardThree';", "name": "ProductCardThree", "path": "@/components/sections/product/ProductCardThree", "propsSchema": { "products": "Array<{ id: string, name: string, price: string, imageSrc: string, imageAlt?: string, onFavorite?: () => void, onProductClick?: () => void, onQuantityChange?: (quantity: number) => void, isFavorited?: boolean, initialQuantity?: number, priceButtonProps?: Partial> }>", "carouselMode?": "'auto' | 'buttons' (default: 'buttons')", "gridVariant": "'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'one-large-right-three-stacked-left' | 'one-large-left-three-stacked-right' (required)", "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)", "uniformGridCustomHeightClasses?": "string (default: 'min-h-95 2xl:min-h-105')", "title": "string", "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", "description": "string", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)", "useInvertedBackground": "boolean", "ariaLabel?": "string (default: 'Product section')", "className?": "string", "containerClassName?": "string", "cardClassName?": "string", "imageClassName?": "string", "textBoxTitleClassName?": "string", "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout", "textBoxTitleImageClassName?": "string - For styling images in inline-image layout", "textBoxDescriptionClassName?": "string", "cardNameClassName?": "string", "quantityControlsClassName?": "string", "gridClassName?": "string", "carouselClassName?": "string", "controlsClassName?": "string", "textBoxClassName?": "string", "textBoxTagClassName?": "string", "textBoxButtonContainerClassName?": "string", "textBoxButtonClassName?": "string", "textBoxButtonTextClassName?": "string" } }, { "import": "import ProductCardFour from '@/components/sections/product/ProductCardFour';", "name": "ProductCardFour", "path": "@/components/sections/product/ProductCardFour", "propsSchema": { "products?": "Array<{ id: string, name: string, price: string, variant: string, imageSrc: string, imageAlt?: string, onFavorite?: () => void, onProductClick?: () => void, isFavorited?: boolean }> - Product items", "carouselMode?": "'auto' | 'buttons' (default: 'buttons')", "gridVariant": "'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'one-large-right-three-stacked-left' | 'one-large-left-three-stacked-right' (required)", "uniformGridCustomHeightClasses?": "string (default: 'min-h-95 2xl:min-h-105')", "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)", "title": "string", "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", "description": "string", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)", "useInvertedBackground": "boolean (required)", "ariaLabel?": "string (default: 'Product section')", "className?": "string", "containerClassName?": "string", "cardClassName?": "string", "imageClassName?": "string", "textBoxTitleClassName?": "string", "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout", "textBoxTitleImageClassName?": "string - For styling images in inline-image layout", "textBoxDescriptionClassName?": "string", "cardNameClassName?": "string", "cardPriceClassName?": "string", "cardVariantClassName?": "string", "actionButtonClassName?": "string - Styles the action button on product image", "gridClassName?": "string", "carouselClassName?": "string", "controlsClassName?": "string", "textBoxClassName?": "string", "textBoxTagClassName?": "string", "textBoxButtonContainerClassName?": "string", "textBoxButtonClassName?": "string", "textBoxButtonTextClassName?": "string" } } ], "pricing": [ { "import": "import PricingCardOne from '@/components/sections/pricing/PricingCardOne';", "name": "PricingCardOne", "path": "@/components/sections/pricing/PricingCardOne", "propsSchema": { "plans": "Array<{ id: string, badge: string, badgeIcon?: LucideIcon, price: string, subtitle: string, features: string[] }>", "carouselMode?": "'auto' | 'buttons' (default: 'buttons')", "uniformGridCustomHeightClasses?": "string", "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d'", "title": "string", "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", "description": "string", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)", "useInvertedBackground": "boolean", "ariaLabel?": "string (default: 'Pricing section')", "className?": "string", "containerClassName?": "string", "cardClassName?": "string", "textBoxTitleClassName?": "string", "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout", "textBoxTitleImageClassName?": "string - For styling images in inline-image layout", "textBoxDescriptionClassName?": "string", "badgeClassName?": "string", "priceClassName?": "string", "subtitleClassName?": "string", "featuresClassName?": "string", "featureItemClassName?": "string", "gridClassName?": "string", "carouselClassName?": "string", "controlsClassName?": "string", "textBoxClassName?": "string", "textBoxTagClassName?": "string", "textBoxButtonContainerClassName?": "string", "textBoxButtonClassName?": "string", "textBoxButtonTextClassName?": "string" } }, { "import": "import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';", "name": "PricingCardTwo", "path": "@/components/sections/pricing/PricingCardTwo", "propsSchema": { "plans": "Array<{ id: string, badge: string, badgeIcon?: LucideIcon, price: string, subtitle: string, buttons: Array<{text: string, onClick?: () => void, href?: string}>, features: string[] }>", "carouselMode?": "'auto' | 'buttons' (default: 'buttons')", "uniformGridCustomHeightClasses?": "string", "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)", "title": "string", "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", "description": "string", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)", "useInvertedBackground": "boolean", "ariaLabel?": "string (default: 'Pricing section')", "className?": "string", "containerClassName?": "string", "cardClassName?": "string", "textBoxTitleClassName?": "string", "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout", "textBoxTitleImageClassName?": "string - For styling images in inline-image layout", "textBoxDescriptionClassName?": "string", "badgeClassName?": "string", "priceClassName?": "string", "subtitleClassName?": "string", "planButtonContainerClassName?": "string", "planButtonClassName?": "string", "featuresClassName?": "string", "featureItemClassName?": "string", "gridClassName?": "string", "carouselClassName?": "string", "controlsClassName?": "string", "textBoxClassName?": "string", "textBoxTagClassName?": "string", "textBoxButtonContainerClassName?": "string", "textBoxButtonClassName?": "string", "textBoxButtonTextClassName?": "string" } }, { "import": "import PricingCardThree from '@/components/sections/pricing/PricingCardThree';", "name": "PricingCardThree", "path": "@/components/sections/pricing/PricingCardThree", "propsSchema": { "plans": "Array<{ id: string, badge?: string, badgeIcon?: LucideIcon, price: string, name: string, buttons: Array<{text: string, onClick?: () => void, href?: string}>, features: string[] }>", "carouselMode?": "'auto' | 'buttons' (default: 'buttons')", "uniformGridCustomHeightClasses?": "string", "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)", "title": "string", "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", "description": "string", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)", "useInvertedBackground": "boolean", "ariaLabel?": "string (default: 'Pricing section')", "className?": "string", "containerClassName?": "string", "cardClassName?": "string", "textBoxTitleClassName?": "string", "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout", "textBoxTitleImageClassName?": "string - For styling images in inline-image layout", "textBoxDescriptionClassName?": "string", "badgeClassName?": "string", "priceClassName?": "string", "nameClassName?": "string", "planButtonContainerClassName?": "string", "planButtonClassName?": "string", "featuresClassName?": "string", "featureItemClassName?": "string", "gridClassName?": "string", "carouselClassName?": "string", "controlsClassName?": "string", "textBoxClassName?": "string", "textBoxTagClassName?": "string", "textBoxButtonContainerClassName?": "string", "textBoxButtonClassName?": "string", "textBoxButtonTextClassName?": "string" } }, { "import": "import PricingCardFive from '@/components/sections/pricing/PricingCardFive';", "name": "PricingCardFive", "path": "@/components/sections/pricing/PricingCardFive", "propsSchema": { "plans": "Array<{ id: string, tag: string, tagIcon?: LucideIcon, price: string, period: string, description: string, button: {text: string, onClick?: () => void, href?: string}, featuresTitle: string, features: string[] }>", "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)", "title": "string", "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", "description": "string", "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required)", "useInvertedBackground": "boolean", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "ariaLabel?": "string (default: 'Pricing section')", "className?": "string", "containerClassName?": "string", "cardClassName?": "string", "textBoxTitleClassName?": "string", "textBoxDescriptionClassName?": "string", "textBoxClassName?": "string", "textBoxTagClassName?": "string", "textBoxButtonContainerClassName?": "string", "textBoxButtonClassName?": "string", "textBoxButtonTextClassName?": "string", "titleImageWrapperClassName?": "string", "titleImageClassName?": "string", "cardContentClassName?": "string", "planTagClassName?": "string", "planPriceClassName?": "string", "planPeriodClassName?": "string", "planDescriptionClassName?": "string", "planButtonClassName?": "string", "planButtonTextClassName?": "string", "featuresTitleClassName?": "string", "featuresListClassName?": "string", "featureItemClassName?": "string", "featureIconClassName?": "string", "featureTextClassName?": "string" } }, { "import": "import PricingCardEight from '@/components/sections/pricing/PricingCardEight';", "name": "PricingCardEight", "path": "@/components/sections/pricing/PricingCardEight", "propsSchema": { "plans": "Array<{ id: string, badge: string, badgeIcon?: LucideIcon, price: string, subtitle: string, buttons: Array<{text: string, onClick?: () => void, href?: string}>, features: string[] }>", "carouselMode?": "'auto' | 'buttons' (default: 'buttons')", "uniformGridCustomHeightClasses?": "string", "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal'", "title": "string", "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", "description": "string", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image'", "useInvertedBackground": "boolean", "ariaLabel?": "string (default: 'Pricing section')", "className?": "string", "containerClassName?": "string", "cardClassName?": "string", "textBoxTitleClassName?": "string", "textBoxTitleImageWrapperClassName?": "string", "textBoxTitleImageClassName?": "string", "textBoxDescriptionClassName?": "string", "badgeClassName?": "string", "priceClassName?": "string", "subtitleClassName?": "string", "planButtonContainerClassName?": "string", "planButtonClassName?": "string", "featuresClassName?": "string", "featureItemClassName?": "string", "gridClassName?": "string", "carouselClassName?": "string", "controlsClassName?": "string", "textBoxClassName?": "string", "textBoxTagClassName?": "string", "textBoxButtonContainerClassName?": "string", "textBoxButtonClassName?": "string", "textBoxButtonTextClassName?": "string" } }, { "import": "import PricingCardNine from '@/components/sections/pricing/PricingCardNine';", "name": "PricingCardNine", "path": "@/components/sections/pricing/PricingCardNine", "propsSchema": { "plans": "Array<{ id: string, title: string, price: string, period: string, features: string[], button: {text: string, onClick?: () => void, href?: string}, imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }>", "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)", "title": "string", "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", "description": "string", "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required)", "useInvertedBackground": "boolean", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "ariaLabel?": "string (default: 'Pricing section')", "className?": "string", "containerClassName?": "string", "cardClassName?": "string", "textBoxTitleClassName?": "string", "textBoxDescriptionClassName?": "string", "textBoxClassName?": "string", "textBoxTagClassName?": "string", "textBoxButtonContainerClassName?": "string", "textBoxButtonClassName?": "string", "textBoxButtonTextClassName?": "string", "titleImageWrapperClassName?": "string", "titleImageClassName?": "string", "cardContentClassName?": "string", "planImageWrapperClassName?": "string", "planImageClassName?": "string", "planTitleClassName?": "string", "planPriceClassName?": "string", "planButtonClassName?": "string", "planButtonTextClassName?": "string", "featuresListClassName?": "string", "featureItemClassName?": "string", "featureIconClassName?": "string", "featureTextClassName?": "string" } } ], "metric": [ { "import": "import MetricCardOne from '@/components/sections/metrics/MetricCardOne';", "name": "MetricCardOne", "path": "@/components/sections/metrics/MetricCardOne", "propsSchema": { "metrics": "Array<{ id: string, value: string, title: string, description: string, icon: LucideIcon }>", "carouselMode?": "'auto' | 'buttons' (default: 'buttons')", "gridVariant": "'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' (required)", "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d'", "uniformGridCustomHeightClasses?": "string", "title": "string", "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", "description": "string", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)", "useInvertedBackground": "boolean", "ariaLabel?": "string (default: 'Metrics section')", "className?": "string", "containerClassName?": "string", "cardClassName?": "string", "textBoxTitleClassName?": "string", "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout", "textBoxTitleImageClassName?": "string - For styling images in inline-image layout", "textBoxDescriptionClassName?": "string", "valueClassName?": "string", "titleClassName?": "string", "descriptionClassName?": "string", "iconContainerClassName?": "string", "iconClassName?": "string", "gridClassName?": "string", "carouselClassName?": "string", "controlsClassName?": "string", "textBoxClassName?": "string", "textBoxTagClassName?": "string", "textBoxButtonContainerClassName?": "string", "textBoxButtonClassName?": "string", "textBoxButtonTextClassName?": "string" } }, { "import": "import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';", "name": "MetricCardTwo", "path": "@/components/sections/metrics/MetricCardTwo", "propsSchema": { "metrics": "Array<{ id: string, value: string, description: string }>", "carouselMode?": "'auto' | 'buttons' (default: 'buttons')", "gridVariant": "'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' (required)", "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d'", "uniformGridCustomHeightClasses?": "string", "title": "string", "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", "description": "string", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)", "useInvertedBackground": "boolean", "ariaLabel?": "string (default: 'Metrics section')", "className?": "string", "containerClassName?": "string", "cardClassName?": "string", "textBoxTitleClassName?": "string", "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout", "textBoxTitleImageClassName?": "string - For styling images in inline-image layout", "textBoxDescriptionClassName?": "string", "valueClassName?": "string", "metricDescriptionClassName?": "string", "gridClassName?": "string", "carouselClassName?": "string", "controlsClassName?": "string", "textBoxClassName?": "string", "textBoxTagClassName?": "string", "textBoxButtonContainerClassName?": "string", "textBoxButtonClassName?": "string", "textBoxButtonTextClassName?": "string" } }, { "import": "import MetricCardThree from '@/components/sections/metrics/MetricCardThree';", "name": "MetricCardThree", "path": "@/components/sections/metrics/MetricCardThree", "propsSchema": { "metrics": "Array<{ id: string, icon: LucideIcon, title: string, value: string }>", "carouselMode?": "'auto' | 'buttons' (default: 'buttons')", "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d'", "uniformGridCustomHeightClasses?": "string", "title": "string", "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", "description": "string", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)", "useInvertedBackground": "boolean", "ariaLabel?": "string (default: 'Metrics section')", "className?": "string", "containerClassName?": "string", "cardClassName?": "string", "textBoxTitleClassName?": "string", "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout", "textBoxTitleImageClassName?": "string - For styling images in inline-image layout", "textBoxDescriptionClassName?": "string", "iconContainerClassName?": "string", "iconClassName?": "string", "metricTitleClassName?": "string", "valueClassName?": "string", "gridClassName?": "string", "carouselClassName?": "string", "controlsClassName?": "string", "textBoxClassName?": "string", "textBoxTagClassName?": "string", "textBoxButtonContainerClassName?": "string", "textBoxButtonClassName?": "string", "textBoxButtonTextClassName?": "string" } }, { "import": "import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';", "name": "MetricCardSeven", "path": "@/components/sections/metrics/MetricCardSeven", "propsSchema": { "metrics": "Array<{ id: string, value: string, title: string, items: string[] }>", "carouselMode?": "'auto' | 'buttons' (default: 'buttons')", "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d'", "uniformGridCustomHeightClasses?": "string", "title": "string", "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", "description": "string", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)", "useInvertedBackground": "boolean", "ariaLabel?": "string (default: 'Metrics section')", "className?": "string", "containerClassName?": "string", "cardClassName?": "string", "textBoxTitleClassName?": "string", "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout", "textBoxTitleImageClassName?": "string - For styling images in inline-image layout", "textBoxDescriptionClassName?": "string", "valueClassName?": "string - For styling the large metric value", "metricTitleClassName?": "string - For styling the metric title text", "featuresClassName?": "string - For styling the PricingFeatureList container", "featureItemClassName?": "string - For styling individual feature items", "gridClassName?": "string", "carouselClassName?": "string", "controlsClassName?": "string", "textBoxClassName?": "string", "textBoxTagClassName?": "string", "textBoxButtonContainerClassName?": "string", "textBoxButtonClassName?": "string", "textBoxButtonTextClassName?": "string" } }, { "import": "import MetricCardTen from '@/components/sections/metrics/MetricCardTen';", "name": "MetricCardTen", "path": "@/components/sections/metrics/MetricCardTen", "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'", "title": "string", "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", "description": "string", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "textboxLayout": "'default' | 'centered' | 'left' | 'right' | 'spread'", "useInvertedBackground": "boolean", "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" } }, { "import": "import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';", "name": "MetricCardEleven", "path": "@/components/sections/metrics/MetricCardEleven", "propsSchema": { "metrics": "Array<{ id: string, value: string, title: string, description: string, imageSrc?: string, imageAlt?: string, videoSrc?: string, videoAriaLabel?: string }>", "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal'", "title": "string", "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", "description": "string", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image'", "useInvertedBackground": "boolean", "ariaLabel?": "string (default: 'Metrics section')", "className?": "string", "containerClassName?": "string", "textBoxClassName?": "string", "textBoxTitleClassName?": "string", "textBoxTitleImageWrapperClassName?": "string", "textBoxTitleImageClassName?": "string", "textBoxDescriptionClassName?": "string", "textBoxTagClassName?": "string", "textBoxButtonContainerClassName?": "string", "textBoxButtonClassName?": "string", "textBoxButtonTextClassName?": "string", "gridClassName?": "string", "cardClassName?": "string", "valueClassName?": "string", "cardTitleClassName?": "string", "cardDescriptionClassName?": "string", "mediaCardClassName?": "string", "mediaClassName?": "string" } }, { "import": "import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';", "name": "MetricCardFourteen", "path": "@/components/sections/metrics/MetricCardFourteen", "propsSchema": { "title": "string", "tag": "string", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "metrics": "Array<{ id: string, value: string, description: string }>", "metricsAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "useInvertedBackground": "boolean", "ariaLabel?": "string (default: 'Metrics section')", "className?": "string", "containerClassName?": "string", "titleClassName?": "string", "tagClassName?": "string", "metricsContainerClassName?": "string", "metricClassName?": "string", "valueClassName?": "string", "descriptionClassName?": "string" } } ], "team": [ { "import": "import TeamCardOne from '@/components/sections/team/TeamCardOne';", "name": "TeamCardOne", "path": "@/components/sections/team/TeamCardOne", "propsSchema": { "members": "Array<{ id: string, name: string, role: string, imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }>", "carouselMode?": "'auto' | 'buttons' (default: 'buttons')", "gridVariant": "'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right' (required)", "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d'", "uniformGridCustomHeightClasses?": "string (default: 'min-h-95 2xl:min-h-105')", "title": "string", "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", "description": "string", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)", "useInvertedBackground": "boolean", "ariaLabel?": "string (default: 'Team section')", "className?": "string", "containerClassName?": "string", "cardClassName?": "string", "textBoxTitleClassName?": "string", "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout", "textBoxTitleImageClassName?": "string - For styling images in inline-image layout", "textBoxDescriptionClassName?": "string", "imageClassName?": "string", "overlayClassName?": "string", "nameClassName?": "string", "roleClassName?": "string", "gridClassName?": "string", "carouselClassName?": "string", "controlsClassName?": "string", "textBoxClassName?": "string", "textBoxTagClassName?": "string", "textBoxButtonContainerClassName?": "string", "textBoxButtonClassName?": "string", "textBoxButtonTextClassName?": "string" } }, { "import": "import TeamCardTwo from '@/components/sections/team/TeamCardTwo';", "name": "TeamCardTwo", "path": "@/components/sections/team/TeamCardTwo", "propsSchema": { "members": "Array<{ id: string, name: string, role: string, description: string, imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string, socialLinks?: Array<{ icon: LucideIcon, url: string }> }>", "carouselMode?": "'auto' | 'buttons' (default: 'buttons')", "gridVariant": "'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right' (required)", "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)", "uniformGridCustomHeightClasses?": "string (default: 'min-h-95 2xl:min-h-105')", "title": "string", "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", "description": "string", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)", "useInvertedBackground": "boolean", "ariaLabel?": "string (default: 'Team section')", "className?": "string", "containerClassName?": "string", "cardClassName?": "string", "textBoxTitleClassName?": "string", "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout", "textBoxTitleImageClassName?": "string - For styling images in inline-image layout", "textBoxDescriptionClassName?": "string", "imageClassName?": "string", "overlayClassName?": "string", "nameClassName?": "string", "roleClassName?": "string", "memberDescriptionClassName?": "string", "socialLinksClassName?": "string", "socialIconClassName?": "string", "gridClassName?": "string", "carouselClassName?": "string", "controlsClassName?": "string", "textBoxClassName?": "string", "textBoxTagClassName?": "string", "textBoxButtonContainerClassName?": "string", "textBoxButtonClassName?": "string", "textBoxButtonTextClassName?": "string" } }, { "import": "import TeamCardFive from '@/components/sections/team/TeamCardFive';", "name": "TeamCardFive", "path": "@/components/sections/team/TeamCardFive", "propsSchema": { "team": "Array<{ id: string, name: string, role: string, imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }>", "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)", "title": "string", "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", "description": "string", "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)", "useInvertedBackground": "boolean", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "ariaLabel?": "string (default: 'Team section')", "className?": "string", "containerClassName?": "string", "textBoxTitleClassName?": "string", "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout", "textBoxTitleImageClassName?": "string - For styling images in inline-image layout", "textBoxDescriptionClassName?": "string", "textBoxClassName?": "string", "textBoxTagClassName?": "string", "textBoxButtonContainerClassName?": "string", "textBoxButtonClassName?": "string", "textBoxButtonTextClassName?": "string", "gridClassName?": "string", "cardClassName?": "string", "mediaWrapperClassName?": "string", "mediaClassName?": "string", "nameClassName?": "string", "roleClassName?": "string" } }, { "import": "import TeamCardSix from '@/components/sections/team/TeamCardSix';", "name": "TeamCardSix", "path": "@/components/sections/team/TeamCardSix", "propsSchema": { "members": "Array<{ id: string, name: string, role: string, imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }>", "carouselMode?": "'auto' | 'buttons' (default: 'buttons')", "gridVariant": "'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right' (required - determines grid layout or carousel trigger)", "uniformGridCustomHeightClasses?": "string (default: 'min-h-95 2xl:min-h-105')", "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d'", "title": "string", "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", "description": "string", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)", "useInvertedBackground": "boolean", "ariaLabel?": "string (default: 'Team section')", "className?": "string", "containerClassName?": "string", "cardClassName?": "string", "textBoxTitleClassName?": "string", "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout", "textBoxTitleImageClassName?": "string - For styling images in inline-image layout", "textBoxDescriptionClassName?": "string", "imageClassName?": "string", "overlayClassName?": "string", "nameClassName?": "string", "roleClassName?": "string", "gridClassName?": "string", "carouselClassName?": "string", "controlsClassName?": "string", "textBoxClassName?": "string", "textBoxTagClassName?": "string", "textBoxButtonContainerClassName?": "string", "textBoxButtonClassName?": "string", "textBoxButtonTextClassName?": "string" } }, { "import": "import TeamCardTen from '@/components/sections/team/TeamCardTen';", "name": "TeamCardTen", "path": "@/components/sections/team/TeamCardTen", "propsSchema": { "title": "string", "tag": "string", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "membersAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "members": "Array<{ id: string, name: string, imageSrc?: string, imageAlt?: string, videoSrc?: string, videoAriaLabel?: string }>", "memberVariant": "'default' | 'card' (required - 'default': no card styling, 'card': each member wrapped in card with rounded corners)", "useInvertedBackground": "boolean", "ariaLabel?": "string (default: 'Team section')", "className?": "string", "containerClassName?": "string", "titleClassName?": "string", "tagClassName?": "string", "membersContainerClassName?": "string", "memberClassName?": "string", "mediaWrapperClassName?": "string", "mediaClassName?": "string", "nameClassName?": "string" } }, { "import": "import TeamCardEleven from '@/components/sections/team/TeamCardEleven';", "name": "TeamCardEleven", "path": "@/components/sections/team/TeamCardEleven", "propsSchema": { "groups": "Array<{ id: string, groupTitle: string, members: Array<{ id: string, title: string, subtitle: string, detail: string, imageSrc?: string, imageAlt?: string, videoSrc?: string, videoAriaLabel?: string }> }> (required)", "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)", "title": "string", "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", "description": "string", "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required)", "useInvertedBackground": "boolean", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "ariaLabel?": "string (default: 'Team section')", "className?": "string", "containerClassName?": "string", "cardClassName?": "string", "textBoxClassName?": "string", "textBoxTitleClassName?": "string", "textBoxDescriptionClassName?": "string", "textBoxTagClassName?": "string", "textBoxButtonContainerClassName?": "string", "textBoxButtonClassName?": "string", "textBoxButtonTextClassName?": "string", "titleImageWrapperClassName?": "string", "titleImageClassName?": "string", "groupTitleClassName?": "string", "memberClassName?": "string", "memberImageClassName?": "string", "memberTitleClassName?": "string", "memberSubtitleClassName?": "string", "memberDetailClassName?": "string" } } ], "testimonial": [ { "import": "import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';", "name": "TestimonialCardOne", "path": "@/components/sections/testimonial/TestimonialCardOne", "propsSchema": { "testimonials": "Array<{ id: string, name: string, role: string, company: string, rating: number, imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }>", "carouselMode?": "'auto' | 'buttons' (default: 'buttons')", "uniformGridCustomHeightClasses?": "string (default: 'min-h-95 2xl:min-h-105')", "gridVariant": "'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right' | 'timeline' (required)", "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d'", "title": "string", "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", "description": "string", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)", "useInvertedBackground": "boolean", "ariaLabel?": "string (default: 'Testimonials section')", "className?": "string", "containerClassName?": "string", "cardClassName?": "string", "textBoxTitleClassName?": "string", "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout", "textBoxTitleImageClassName?": "string - For styling images in inline-image layout", "textBoxDescriptionClassName?": "string", "imageClassName?": "string", "overlayClassName?": "string", "ratingClassName?": "string", "nameClassName?": "string", "roleClassName?": "string", "companyClassName?": "string", "gridClassName?": "string", "carouselClassName?": "string", "controlsClassName?": "string", "textBoxClassName?": "string", "textBoxTagClassName?": "string", "textBoxButtonContainerClassName?": "string", "textBoxButtonClassName?": "string", "textBoxButtonTextClassName?": "string" } }, { "import": "import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';", "name": "TestimonialCardTwo", "path": "@/components/sections/testimonial/TestimonialCardTwo", "propsSchema": { "testimonials": "Array<{ id: string, name: string, role: string, testimonial: string, imageSrc?: string, imageAlt?: string, icon?: LucideIcon }>", "carouselMode?": "'auto' | 'buttons' (default: 'buttons')", "uniformGridCustomHeightClasses?": "string (default: 'min-h-none')", "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d'", "title": "string", "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", "description": "string", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)", "useInvertedBackground": "boolean", "ariaLabel?": "string (default: 'Testimonials section')", "className?": "string", "containerClassName?": "string", "cardClassName?": "string", "textBoxTitleClassName?": "string", "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout", "textBoxTitleImageClassName?": "string - For styling images in inline-image layout", "textBoxDescriptionClassName?": "string", "imageWrapperClassName?": "string", "imageClassName?": "string", "iconClassName?": "string", "nameClassName?": "string", "roleClassName?": "string", "testimonialClassName?": "string", "gridClassName?": "string", "carouselClassName?": "string", "controlsClassName?": "string", "textBoxClassName?": "string", "textBoxTagClassName?": "string", "textBoxButtonContainerClassName?": "string", "textBoxButtonClassName?": "string", "textBoxButtonTextClassName?": "string" } }, { "import": "import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';", "name": "TestimonialCardFive", "path": "@/components/sections/testimonial/TestimonialCardFive", "propsSchema": { "testimonials": "Array<{ id: string, name: string, date: string, title: string, quote: string, tag: string, avatarSrc: string, avatarAlt?: string, imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }>", "title": "string", "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", "description": "string", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)", "useInvertedBackground": "boolean", "ariaLabel?": "string (default: 'Testimonials section')", "className?": "string", "containerClassName?": "string", "cardClassName?": "string", "textBoxTitleClassName?": "string", "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout", "textBoxTitleImageClassName?": "string - For styling images in inline-image layout", "textBoxDescriptionClassName?": "string", "cardTagClassName?": "string", "cardTitleClassName?": "string", "cardQuoteClassName?": "string", "cardAuthorClassName?": "string", "cardAvatarWrapperClassName?": "string", "cardAvatarClassName?": "string", "cardNameClassName?": "string", "cardDateClassName?": "string", "cardImageClassName?": "string", "carouselClassName?": "string", "dotsClassName?": "string", "textBoxClassName?": "string", "textBoxTagClassName?": "string", "textBoxButtonContainerClassName?": "string", "textBoxButtonClassName?": "string", "textBoxButtonTextClassName?": "string" } }, { "import": "import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';", "name": "TestimonialCardSix", "path": "@/components/sections/testimonial/TestimonialCardSix", "propsSchema": { "testimonials": "Array<{ id: string, name: string, handle: string, testimonial: string, imageSrc?: string, imageAlt?: string, icon?: LucideIcon }>", "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required)", "title": "string", "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", "description": "string", "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)", "useInvertedBackground": "boolean", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "speed?": "number (default: 40)", "topMarqueeDirection?": "'left' | 'right' (default: 'left')", "ariaLabel?": "string (default: 'Testimonials section')", "className?": "string", "containerClassName?": "string", "carouselClassName?": "string", "bottomCarouselClassName?": "string", "cardClassName?": "string", "testimonialClassName?": "string", "imageWrapperClassName?": "string", "imageClassName?": "string", "iconClassName?": "string", "nameClassName?": "string", "handleClassName?": "string", "textBoxClassName?": "string", "textBoxTitleClassName?": "string", "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout", "textBoxTitleImageClassName?": "string - For styling images in inline-image layout", "textBoxDescriptionClassName?": "string", "textBoxTagClassName?": "string", "textBoxButtonContainerClassName?": "string", "textBoxButtonClassName?": "string", "textBoxButtonTextClassName?": "string" } }, { "import": "import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';", "name": "TestimonialCardTen", "path": "@/components/sections/testimonial/TestimonialCardTen", "propsSchema": { "testimonials": "Array<{ id: string, title: string, quote: string, name: string, role: string, imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }>", "title": "string", "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", "description": "string", "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required)", "useInvertedBackground": "boolean", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "ariaLabel?": "string (default: 'Testimonials section')", "className?": "string", "containerClassName?": "string", "textBoxClassName?": "string", "textBoxTitleClassName?": "string", "textBoxDescriptionClassName?": "string", "textBoxTagClassName?": "string", "textBoxButtonContainerClassName?": "string", "textBoxButtonClassName?": "string", "textBoxButtonTextClassName?": "string", "titleImageWrapperClassName?": "string", "titleImageClassName?": "string", "contentClassName?": "string", "quoteCardClassName?": "string", "testimonialTitleClassName?": "string", "quoteClassName?": "string", "nameClassName?": "string", "roleClassName?": "string", "navigationClassName?": "string", "navigationButtonClassName?": "string", "mediaCardClassName?": "string", "mediaClassName?": "string" } }, { "import": "import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';", "name": "TestimonialCardTwelve", "path": "@/components/sections/testimonial/TestimonialCardTwelve", "propsSchema": { "testimonials": "Array<{ id: string, name: string, imageSrc: string, imageAlt?: string }>", "cardTitle": "string", "cardTag": "string", "cardTagIcon?": "LucideIcon", "cardAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal' (required)", "useInvertedBackground": "boolean", "ariaLabel?": "string (default: 'Testimonials section')", "className?": "string", "containerClassName?": "string", "cardClassName?": "string", "avatarGroupClassName?": "string", "avatarClassName?": "string", "cardTitleClassName?": "string", "cardTagClassName?": "string" } }, { "import": "import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';", "name": "TestimonialCardThirteen", "path": "@/components/sections/testimonial/TestimonialCardThirteen", "propsSchema": { "testimonials": "Array<{ id: string, name: string, handle: string, testimonial: string, rating: number, imageSrc?: string, imageAlt?: string, icon?: LucideIcon }>", "showRating": "boolean - true for star ratings, false for quote icon (required)", "carouselMode?": "'auto' | 'buttons' (default: 'buttons')", "uniformGridCustomHeightClasses?": "string (default: 'min-h-none')", "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d'", "title": "string", "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", "description": "string", "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required)", "useInvertedBackground": "boolean", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "ariaLabel?": "string (default: 'Testimonials section')", "className?": "string", "containerClassName?": "string", "cardClassName?": "string", "textBoxClassName?": "string", "textBoxTitleClassName?": "string", "textBoxTitleImageWrapperClassName?": "string", "textBoxTitleImageClassName?": "string", "textBoxDescriptionClassName?": "string", "textBoxTagClassName?": "string", "textBoxButtonContainerClassName?": "string", "textBoxButtonClassName?": "string", "textBoxButtonTextClassName?": "string", "imageWrapperClassName?": "string", "imageClassName?": "string", "iconClassName?": "string", "nameClassName?": "string", "handleClassName?": "string", "testimonialClassName?": "string", "ratingClassName?": "string", "contentWrapperClassName?": "string", "gridClassName?": "string", "carouselClassName?": "string", "controlsClassName?": "string" } }, { "import": "import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';", "name": "TestimonialCardFifteen", "path": "@/components/sections/testimonial/TestimonialCardFifteen", "propsSchema": { "testimonial": "string", "rating": "number (0-5)", "author": "string", "avatars": "Array<{ src: string, alt: string }>", "ratingAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal' (required)", "avatarsAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal' (required)", "useInvertedBackground": "boolean", "ariaLabel?": "string (default: 'Testimonial section')", "className?": "string", "containerClassName?": "string", "ratingClassName?": "string", "starClassName?": "string", "testimonialClassName?": "string", "avatarGroupClassName?": "string", "avatarClassName?": "string", "avatarImageClassName?": "string" } }, { "import": "import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';", "name": "TestimonialCardSixteen", "path": "@/components/sections/testimonial/TestimonialCardSixteen", "propsSchema": { "testimonials": "Array<{ id: string, name: string, role: string, company: string, rating: number, imageSrc?: string, videoSrc?: string, imageAlt?: string, videoAriaLabel?: string }>", "kpiItems": "[KpiItem, KpiItem, KpiItem] - Exactly 3 KPI stats (required)", "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d' (required)", "title": "string (required)", "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", "description": "string (required)", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required)", "useInvertedBackground": "boolean (required)", "carouselMode?": "'auto' | 'buttons' (default: 'buttons')", "uniformGridCustomHeightClasses?": "string (default: 'min-h-95 2xl:min-h-105')", "ariaLabel?": "string (default: 'Testimonials section')", "className?": "string", "containerClassName?": "string", "cardClassName?": "string", "imageClassName?": "string", "overlayClassName?": "string", "ratingClassName?": "string", "nameClassName?": "string", "roleClassName?": "string", "companyClassName?": "string", "gridClassName?": "string", "carouselClassName?": "string", "controlsClassName?": "string", "textBoxClassName?": "string", "textBoxTitleClassName?": "string", "textBoxTitleImageWrapperClassName?": "string", "textBoxTitleImageClassName?": "string", "textBoxDescriptionClassName?": "string", "textBoxTagClassName?": "string", "textBoxButtonContainerClassName?": "string", "textBoxButtonClassName?": "string", "textBoxButtonTextClassName?": "string" } } ], "faq": [ { "import": "import FaqBase from '@/components/sections/faq/FaqBase';", "name": "FaqBase", "path": "@/components/sections/faq/FaqBase", "propsSchema": { "faqs": "Array<{ id: string, title: string, content: string }> - FAQ items", "title": "string", "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", "description": "string", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "faqsAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal' (required)", "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)", "useInvertedBackground": "boolean", "animationType?": "'smooth' | 'instant' (default: 'smooth')", "showCard?": "boolean (default: true)", "ariaLabel?": "string (default: 'FAQ section')", "className?": "string", "containerClassName?": "string", "textBoxTitleClassName?": "string", "titleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout", "titleImageClassName?": "string - For styling images in inline-image layout", "textBoxDescriptionClassName?": "string", "textBoxClassName?": "string", "textBoxTagClassName?": "string", "textBoxButtonContainerClassName?": "string", "textBoxButtonClassName?": "string", "textBoxButtonTextClassName?": "string", "faqsContainerClassName?": "string", "accordionClassName?": "string", "accordionTitleClassName?": "string", "accordionIconContainerClassName?": "string", "accordionIconClassName?": "string", "accordionContentClassName?": "string", "separatorClassName?": "string" } }, { "import": "import FaqDouble from '@/components/sections/faq/FaqDouble';", "name": "FaqDouble", "path": "@/components/sections/faq/FaqDouble", "propsSchema": { "faqs": "Array<{ id: string, title: string, content: string }> - FAQ items", "title": "string", "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", "description": "string", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "faqsAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal' (required)", "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)", "useInvertedBackground": "boolean", "animationType?": "'smooth' | 'instant' (default: 'smooth')", "ariaLabel?": "string (default: 'FAQ section')", "className?": "string", "containerClassName?": "string", "textBoxTitleClassName?": "string", "titleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout", "titleImageClassName?": "string - For styling images in inline-image layout", "textBoxDescriptionClassName?": "string", "textBoxClassName?": "string", "textBoxTagClassName?": "string", "textBoxButtonContainerClassName?": "string", "textBoxButtonClassName?": "string", "textBoxButtonTextClassName?": "string", "faqsContainerClassName?": "string", "columnClassName?": "string", "accordionClassName?": "string", "accordionTitleClassName?": "string", "accordionIconContainerClassName?": "string", "accordionIconClassName?": "string", "accordionContentClassName?": "string" } }, { "import": "import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';", "name": "FaqSplitMedia", "path": "@/components/sections/faq/FaqSplitMedia", "propsSchema": { "faqs": "Array<{ id: string, title: string, content: string }> - FAQ items", "imageSrc?": "string", "videoSrc?": "string", "imageAlt?": "string (default: '')", "videoAriaLabel?": "string (default: 'FAQ section video')", "mediaAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "mediaPosition?": "'left' | 'right' (default: 'left')", "title": "string", "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", "description": "string", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "faqsAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal' (required)", "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)", "useInvertedBackground": "boolean", "animationType?": "'smooth' | 'instant' (default: 'smooth')", "showCard?": "boolean (default: true)", "ariaLabel?": "string (default: 'FAQ section')", "className?": "string", "containerClassName?": "string", "textBoxTitleClassName?": "string", "titleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout", "titleImageClassName?": "string - For styling images in inline-image layout", "textBoxDescriptionClassName?": "string", "textBoxClassName?": "string", "textBoxTagClassName?": "string", "textBoxButtonContainerClassName?": "string", "textBoxButtonClassName?": "string", "textBoxButtonTextClassName?": "string", "contentClassName?": "string", "mediaWrapperClassName?": "string", "mediaClassName?": "string", "faqsContainerClassName?": "string", "accordionClassName?": "string", "accordionTitleClassName?": "string", "accordionIconContainerClassName?": "string", "accordionIconClassName?": "string", "accordionContentClassName?": "string", "separatorClassName?": "string" } }, { "import": "import FaqSplitText from '@/components/sections/faq/FaqSplitText';", "name": "FaqSplitText", "path": "@/components/sections/faq/FaqSplitText", "propsSchema": { "faqs": "Array<{ id: string, title: string, content: string }> - FAQ items", "sideTitle": "string", "sideDescription?": "string", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "faqsAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal' (required)", "textPosition?": "'left' | 'right' (default: 'left')", "useInvertedBackground": "boolean", "animationType?": "'smooth' | 'instant' (default: 'smooth')", "showCard?": "boolean (default: true)", "ariaLabel?": "string (default: 'FAQ section')", "className?": "string", "containerClassName?": "string", "contentClassName?": "string", "textContainerClassName?": "string", "sideTitleClassName?": "string", "sideDescriptionClassName?": "string", "buttonContainerClassName?": "string", "buttonClassName?": "string", "buttonTextClassName?": "string", "faqsContainerClassName?": "string", "accordionClassName?": "string", "accordionTitleClassName?": "string", "accordionIconContainerClassName?": "string", "accordionIconClassName?": "string", "accordionContentClassName?": "string", "separatorClassName?": "string" } } ], "blog": [ { "import": "import BlogCardOne from '@/components/sections/blog/BlogCardOne';", "name": "BlogCardOne", "path": "@/components/sections/blog/BlogCardOne", "propsSchema": { "blogs": "Array<{ id: string, category: string, title: string, excerpt: string, imageSrc: string, imageAlt?: string, authorName: string, authorAvatar: string, date: string, onBlogClick?: () => void }> - Blog card items", "carouselMode?": "'auto' | 'buttons' (default: 'buttons')", "uniformGridCustomHeightClasses?": "string", "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)", "title": "string", "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", "description": "string", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)", "useInvertedBackground": "boolean", "ariaLabel?": "string (default: 'Blog section')", "className?": "string", "containerClassName?": "string", "cardClassName?": "string", "imageWrapperClassName?": "string", "imageClassName?": "string", "categoryClassName?": "string", "cardTitleClassName?": "string", "excerptClassName?": "string", "authorContainerClassName?": "string", "authorAvatarClassName?": "string", "authorNameClassName?": "string", "dateClassName?": "string", "textBoxTitleClassName?": "string", "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout", "textBoxTitleImageClassName?": "string - For styling images in inline-image layout", "textBoxDescriptionClassName?": "string", "gridClassName?": "string", "carouselClassName?": "string", "controlsClassName?": "string", "textBoxClassName?": "string", "textBoxTagClassName?": "string", "textBoxButtonContainerClassName?": "string", "textBoxButtonClassName?": "string", "textBoxButtonTextClassName?": "string" } }, { "import": "import BlogCardTwo from '@/components/sections/blog/BlogCardTwo';", "name": "BlogCardTwo", "path": "@/components/sections/blog/BlogCardTwo", "propsSchema": { "blogs": "Array<{ id: string, category: string | string[], title: string, excerpt: string, imageSrc: string, imageAlt?: string, authorName: string, authorAvatar: string, date: string, onBlogClick?: () => void }> - Blog card items", "carouselMode?": "'auto' | 'buttons' (default: 'buttons')", "uniformGridCustomHeightClasses?": "string", "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)", "title": "string", "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", "description": "string", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)", "useInvertedBackground": "boolean", "ariaLabel?": "string (default: 'Blog section')", "className?": "string", "containerClassName?": "string", "cardClassName?": "string", "imageWrapperClassName?": "string", "imageClassName?": "string", "authorAvatarClassName?": "string", "authorDateClassName?": "string", "cardTitleClassName?": "string", "excerptClassName?": "string", "categoryClassName?": "string", "textBoxTitleClassName?": "string", "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout", "textBoxTitleImageClassName?": "string - For styling images in inline-image layout", "textBoxDescriptionClassName?": "string", "gridClassName?": "string", "carouselClassName?": "string", "controlsClassName?": "string", "textBoxClassName?": "string", "textBoxTagClassName?": "string", "textBoxButtonContainerClassName?": "string", "textBoxButtonClassName?": "string", "textBoxButtonTextClassName?": "string" } }, { "import": "import BlogCardThree from '@/components/sections/blog/BlogCardThree';", "name": "BlogCardThree", "path": "@/components/sections/blog/BlogCardThree", "propsSchema": { "blogs": "Array<{ id: string, category: string, title: string, excerpt: string, imageSrc: string, imageAlt?: string, authorName: string, authorAvatar: string, date: string, onBlogClick?: () => void }> - Blog card items", "carouselMode?": "'auto' | 'buttons' (default: 'buttons')", "uniformGridCustomHeightClasses?": "string (default: 'min-h-[600px]')", "animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' (required - controls GSAP scroll animations with stagger effect)", "title": "string", "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title", "description": "string", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required - 'inline-image' uses titleSegments for rich text with images)", "useInvertedBackground": "boolean", "ariaLabel?": "string (default: 'Blog section')", "className?": "string", "containerClassName?": "string", "cardClassName?": "string", "cardContentClassName?": "string", "categoryTagClassName?": "string", "cardTitleClassName?": "string", "excerptClassName?": "string", "authorContainerClassName?": "string", "authorAvatarClassName?": "string", "authorNameClassName?": "string", "dateClassName?": "string", "mediaWrapperClassName?": "string", "mediaClassName?": "string", "textBoxTitleClassName?": "string", "textBoxTitleImageWrapperClassName?": "string - For styling image wrapper in inline-image layout", "textBoxTitleImageClassName?": "string - For styling images in inline-image layout", "textBoxDescriptionClassName?": "string", "gridClassName?": "string", "carouselClassName?": "string", "controlsClassName?": "string", "textBoxClassName?": "string", "textBoxTagClassName?": "string", "textBoxButtonContainerClassName?": "string", "textBoxButtonClassName?": "string", "textBoxButtonTextClassName?": "string" } } ], "contact": [ { "import": "import ContactCenter from '@/components/sections/contact/ContactCenter';", "name": "ContactCenter", "path": "@/components/sections/contact/ContactCenter", "propsSchema": { "tag": "string", "title": "string", "description": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }", "useInvertedBackground": "boolean", "inputPlaceholder?": "string (default: 'Enter your email')", "buttonText?": "string (default: 'Sign Up')", "termsText?": "string (default: 'By clicking Sign Up you're confirming that you agree with our Terms and Conditions.')", "onSubmit?": "(email: string) => void", "ariaLabel?": "string (default: 'Contact section')", "className?": "string", "containerClassName?": "string", "contentClassName?": "string", "tagClassName?": "string", "titleClassName?": "string", "descriptionClassName?": "string", "formWrapperClassName?": "string", "formClassName?": "string", "inputClassName?": "string", "buttonClassName?": "string", "buttonTextClassName?": "string", "termsClassName?": "string" } }, { "import": "import ContactSplit from '@/components/sections/contact/ContactSplit';", "name": "ContactSplit", "path": "@/components/sections/contact/ContactSplit", "propsSchema": { "tag": "string", "title": "string", "description": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }", "useInvertedBackground": "boolean", "imageSrc?": "string", "videoSrc?": "string", "imageAlt?": "string (default: '')", "videoAriaLabel?": "string (default: 'Contact section video')", "mediaAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "mediaPosition?": "'left' | 'right' (default: 'right')", "inputPlaceholder?": "string (default: 'Enter your email')", "buttonText?": "string (default: 'Sign Up')", "termsText?": "string (default: 'By clicking Sign Up you're confirming that you agree with our Terms and Conditions.')", "onSubmit?": "(email: string) => void", "ariaLabel?": "string (default: 'Contact section')", "className?": "string", "containerClassName?": "string", "contentClassName?": "string", "contactFormClassName?": "string", "tagClassName?": "string", "titleClassName?": "string", "descriptionClassName?": "string", "formWrapperClassName?": "string", "formClassName?": "string", "inputClassName?": "string", "buttonClassName?": "string", "buttonTextClassName?": "string", "termsClassName?": "string", "mediaWrapperClassName?": "string", "mediaClassName?": "string" } }, { "import": "import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';", "name": "ContactSplitForm", "path": "@/components/sections/contact/ContactSplitForm", "propsSchema": { "title": "string", "description": "string", "inputs": "Array<{ name: string, type: string, placeholder: string, required?: boolean, className?: string }> - Form input fields (min 2 required)", "textarea?": "{ name: string, placeholder: string, rows?: number, required?: boolean, className?: string } - Optional textarea field", "useInvertedBackground": "boolean", "imageSrc?": "string", "videoSrc?": "string", "imageAlt?": "string (default: '')", "videoAriaLabel?": "string (default: 'Contact section video')", "mediaAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "mediaPosition?": "'left' | 'right' (default: 'right')", "buttonText?": "string (default: 'Submit')", "onSubmit?": "(data: Record) => void", "ariaLabel?": "string (default: 'Contact section')", "className?": "string", "containerClassName?": "string", "contentClassName?": "string", "formCardClassName?": "string", "titleClassName?": "string", "descriptionClassName?": "string", "buttonClassName?": "string", "buttonTextClassName?": "string", "mediaWrapperClassName?": "string", "mediaClassName?": "string" } }, { "import": "import ContactText from '@/components/sections/contact/ContactText';", "name": "ContactText", "path": "@/components/sections/contact/ContactText", "propsSchema": { "text": "string", "animationType?": "'entrance-slide' | 'reveal-blur' | 'background-highlight' (default: 'entrance-slide')", "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>", "background": "{ variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' } (required)", "useInvertedBackground": "boolean", "ariaLabel?": "string (default: 'Contact section')", "className?": "string", "containerClassName?": "string - Outer wrapper styling", "contentClassName?": "string - Card content wrapper styling", "textClassName?": "string - TextAnimation heading styling", "buttonContainerClassName?": "string", "buttonClassName?": "string", "buttonTextClassName?": "string" } }, { "import": "import ContactFaq from '@/components/sections/contact/ContactFaq';", "name": "ContactFaq", "path": "@/components/sections/contact/ContactFaq", "propsSchema": { "faqs": "Array<{ id: string, title: string, content: string }>", "ctaTitle": "string", "ctaDescription": "string", "ctaButton": "{text: string, onClick?: () => void, href?: string}", "ctaIcon": "LucideIcon - any icon from lucide-react (e.g. Phone, Mail, MessageCircle, Calendar, ArrowRight) (required)", "useInvertedBackground": "boolean", "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" } }, { "import": "import ContactCTA from '@/components/sections/contact/ContactCTA';", "name": "ContactCTA", "path": "@/components/sections/contact/ContactCTA", "propsSchema": { "tag": "string (required)", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "title": "string (required)", "description": "string (required)", "buttons": "Array<{text: string, onClick?: () => void, href?: string}> (required)", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "background": "ContactCTABackgroundProps = { variant: 'plain' | 'animated-grid' | 'canvas-reveal' | 'cell-wave' | 'downward-rays-animated' | 'downward-rays-animated-grid' | 'downward-rays-static' | 'downward-rays-static-grid' | 'gradient-bars' | 'radial-gradient' | 'rotated-rays-animated' | 'rotated-rays-animated-grid' | 'rotated-rays-static' | 'rotated-rays-static-grid' | 'sparkles-gradient' }", "useInvertedBackground": "boolean", "ariaLabel?": "string (default: 'Contact section')", "className?": "string", "containerClassName?": "string", "contentClassName?": "string - Card content wrapper styling", "textBoxClassName?": "string", "titleClassName?": "string", "descriptionClassName?": "string", "tagClassName?": "string", "buttonContainerClassName?": "string", "buttonClassName?": "string", "buttonTextClassName?": "string" } } ], "footer": [ { "import": "import FooterBase from '@/components/sections/footer/FooterBase';", "name": "FooterBase", "path": "@/components/sections/footer/FooterBase", "propsSchema": { "columns": "Array<{ title: string, items: Array<{ label: string, href: string }> }> - Footer navigation columns (required)", "logoText?": "string (default: 'Webild')", "copyrightText?": "string (default: '© 2025 | Webild')", "onPrivacyClick?": "() => void", "ariaLabel?": "string (default: 'Site footer')", "className?": "string", "containerClassName?": "string", "logoTextClassName?": "string", "columnsClassName?": "string", "columnClassName?": "string", "columnTitleClassName?": "string", "columnItemClassName?": "string", "copyrightContainerClassName?": "string", "copyrightTextClassName?": "string", "privacyButtonClassName?": "string" } }, { "import": "import FooterMedia from '@/components/sections/footer/FooterMedia';", "name": "FooterMedia", "path": "@/components/sections/footer/FooterMedia", "propsSchema": { "imageSrc": "string (required if no videoSrc)", "imageAlt?": "string (default: '')", "videoSrc": "string (required if no imageSrc)", "videoAriaLabel?": "string (default: 'Footer video')", "columns": "Array<{ title: string, items: Array<{ label: string, href: string }> }> - Footer navigation columns (required)", "logoText?": "string (default: 'Webild')", "copyrightText?": "string (default: '© 2025 | Webild')", "onPrivacyClick?": "() => void", "ariaLabel?": "string (default: 'Site footer')", "className?": "string", "containerClassName?": "string", "mediaWrapperClassName?": "string", "mediaClassName?": "string", "logoTextClassName?": "string", "columnsClassName?": "string", "columnClassName?": "string", "columnTitleClassName?": "string", "columnItemClassName?": "string", "copyrightContainerClassName?": "string", "copyrightTextClassName?": "string", "privacyButtonClassName?": "string" } }, { "import": "import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';", "name": "FooterBaseReveal", "path": "@/components/sections/footer/FooterBaseReveal", "propsSchema": { "columns": "Array<{ title: string, items: Array<{ label: string, href: string }> }> - Footer navigation columns (required)", "copyrightText?": "string", "onPrivacyClick?": "() => void", "ariaLabel?": "string", "className?": "string", "wrapperClassName?": "string", "containerClassName?": "string", "footerClassName?": "string", "footerContainerClassName?": "string", "columnsClassName?": "string", "columnClassName?": "string", "columnTitleClassName?": "string", "columnItemClassName?": "string", "copyrightContainerClassName?": "string", "copyrightTextClassName?": "string", "privacyButtonClassName?": "string" } }, { "import": "import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';", "name": "FooterLogoEmphasis", "path": "@/components/sections/footer/FooterLogoEmphasis", "propsSchema": { "columns": "Array<{ items: Array<{ label: string, href?: string, onClick?: () => void }> }> - Footer navigation columns (required, max 5)", "logoText": "string (required)", "ariaLabel?": "string (default: 'Site footer')", "className?": "string", "containerClassName?": "string", "logoClassName?": "string", "columnsClassName?": "string", "columnClassName?": "string", "itemClassName?": "string", "iconClassName?": "string", "buttonClassName?": "string" } }, { "import": "import FooterCard from '@/components/sections/footer/FooterCard';", "name": "FooterCard", "path": "@/components/sections/footer/FooterCard", "propsSchema": { "logoText?": "string (default: 'Webild')", "copyrightText?": "string (default: '© 2025 | Webild')", "socialLinks?": "Array<{ icon: LucideIcon, href: string, ariaLabel: string }> - Social media links", "ariaLabel?": "string (default: 'Site footer')", "className?": "string", "containerClassName?": "string", "cardClassName?": "string", "logoClassName?": "string", "dividerClassName?": "string", "copyrightContainerClassName?": "string", "copyrightTextClassName?": "string", "socialContainerClassName?": "string", "socialIconClassName?": "string" } }, { "import": "import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';", "name": "FooterBaseCard", "path": "@/components/sections/footer/FooterBaseCard", "propsSchema": { "logoText?": "string (default: 'Webild')", "columns": "Array<{ title: string, items: Array<{ label: string, href: string }> }> - Footer navigation columns (required)", "copyrightText?": "string (default: '© 2025 | Webild')", "onPrivacyClick?": "() => void", "ariaLabel?": "string (default: 'Site footer')", "className?": "string", "containerClassName?": "string", "cardClassName?": "string", "logoTextClassName?": "string", "columnsClassName?": "string", "columnClassName?": "string", "columnTitleClassName?": "string", "columnItemClassName?": "string", "copyrightContainerClassName?": "string", "copyrightTextClassName?": "string", "privacyButtonClassName?": "string" } }, { "import": "import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';", "name": "FooterLogoReveal", "path": "@/components/sections/footer/FooterLogoReveal", "propsSchema": { "logoText?": "string (default: 'Webild')", "leftLink": "{ text: string, onClick?: () => void, href?: string } (required)", "rightLink": "{ text: string, onClick?: () => void, href?: string } (required)", "ariaLabel?": "string (default: 'Site footer')", "className?": "string", "wrapperClassName?": "string", "containerClassName?": "string", "logoClassName?": "string", "linkClassName?": "string" } }, { "import": "import FooterSimple from '@/components/sections/footer/FooterSimple';", "name": "FooterSimple", "path": "@/components/sections/footer/FooterSimple", "propsSchema": { "columns": "Array<{ title: string, items: Array<{ label: string, href?: string, onClick?: () => void }> }>", "bottomLeftText": "string", "bottomRightText": "string", "ariaLabel?": "string (default: 'Site footer')", "className?": "string", "containerClassName?": "string", "columnsClassName?": "string", "columnClassName?": "string", "columnTitleClassName?": "string", "columnItemClassName?": "string", "dividerClassName?": "string", "bottomContainerClassName?": "string", "bottomLeftTextClassName?": "string", "bottomRightTextClassName?": "string" } } ], "ecommerce": [ { "import": "import ProductDetailCard from '@/components/ecommerce/productDetail/ProductDetailCard';", "name": "ProductDetailCard", "path": "@/components/ecommerce/productDetail/ProductDetailCard", "propsSchema": { "layout": "'page' | 'section'", "name": "string", "price": "string", "showRating?": "boolean (default: true)", "rating?": "number (default: 0)", "ratingIcon?": "LucideIcon (default: Star)", "description?": "string", "images": "Array<{ src: string; alt: string }>", "variants?": "Array<{ label: string; options: string[]; selected: string; onChange: (value: string) => void }>", "quantity?": "{ label: string; options: string[]; selected: string; onChange: (value: string) => void }", "buttons": "Array<{ text: string, href?: string, onClick?: () => void }>", "className?": "string", "imageContainerClassName?": "string", "infoContainerClassName?": "string", "nameClassName?": "string", "priceClassName?": "string", "descriptionClassName?": "string", "variantSelectClassName?": "string", "variantLabelClassName?": "string", "buttonClassName?": "string" } }, { "import": "import ProductCart from '@/components/ecommerce/cart/ProductCart';", "name": "ProductCart", "path": "@/components/ecommerce/cart/ProductCart", "propsSchema": { "isOpen": "boolean", "onClose": "() => void", "items": "Array<{ id: string, name: string, variants?: string[], price: string, quantity: number, imageSrc: string, imageAlt?: string }>", "onQuantityChange?": "(id: string, quantity: number) => void", "onRemove?": "(id: string) => void", "total": "string", "buttons": "Array<{ text: string, href?: string, onClick?: () => void }>", "title?": "string (default: 'Cart')", "totalLabel?": "string (default: 'Total')", "emptyMessage?": "string (default: 'Your cart is empty')", "className?": "string", "panelClassName?": "string", "itemClassName?": "string", "buttonClassName?": "string" } }, { "import": "import ProductCartItem from '@/components/ecommerce/cart/ProductCartItem';", "name": "ProductCartItem", "path": "@/components/ecommerce/cart/ProductCartItem", "propsSchema": { "item": "CartItem - { id: string; name: string; variants?: string[]; price: string; quantity: number; imageSrc: string; imageAlt?: string }", "onQuantityChange?": "(id: string, quantity: number) => void", "onRemove?": "(id: string) => void", "className?": "string" } }, { "import": "import ProductCatalog from '@/components/ecommerce/productCatalog/ProductCatalog';", "name": "ProductCatalog", "path": "@/components/ecommerce/productCatalog/ProductCatalog", "propsSchema": { "layout": "'page' | 'section'", "products": "Array<{ id: string, category?: string, name: string, price: string, rating: number, reviewCount?: string, imageSrc: string, imageAlt?: string, onProductClick?: () => void, onFavorite?: () => void }>", "searchValue?": "string (default: '')", "onSearchChange?": "(value: string) => void", "searchPlaceholder?": "string (default: 'Search products...')", "filters?": "Array<{ label: string; options: string[]; selected: string; onChange: (value: string) => void }>", "emptyMessage?": "string (default: 'No products found')", "className?": "string", "gridClassName?": "string", "cardClassName?": "string", "imageClassName?": "string", "searchClassName?": "string", "filterClassName?": "string", "toolbarClassName?": "string" } }, { "import": "import ProductCatalogItem from '@/components/ecommerce/productCatalog/ProductCatalogItem';", "name": "ProductCatalogItem", "path": "@/components/ecommerce/productCatalog/ProductCatalogItem", "propsSchema": { "product": "CatalogProduct - { id: string; category?: string; name: string; price: string; rating: number; reviewCount?: string; imageSrc: string; imageAlt?: string; onProductClick?: () => void; onFavorite?: () => void; isFavorited?: boolean }", "className?": "string", "imageClassName?": "string", "categoryClassName?": "string", "nameClassName?": "string", "priceClassName?": "string", "ratingClassName?": "string" } } ], "legal": [ { "import": "import LegalSection from '@/components/legal/LegalSection';", "name": "LegalSection", "path": "@/components/legal/LegalSection", "propsSchema": { "layout": "'page' | 'section'", "title": "string", "subtitle?": "string", "sections": "LegalContentSection[] - { heading: string; content: LegalContentItem[] } where LegalContentItem = { type: 'paragraph'; text: string } | { type: 'list'; items: string[] } | { type: 'numbered-list'; items: string[] }", "className?": "string", "titleClassName?": "string", "subtitleClassName?": "string", "sectionClassName?": "string", "headingClassName?": "string", "contentClassName?": "string", "listClassName?": "string" } } ], "socialProof": [ { "import": "import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';", "name": "SocialProofOne", "path": "@/components/sections/socialProof/SocialProofOne", "propsSchema": { "names": "string[] (required) - Array of company/partner names to display as text", "logos?": "string[] - Array of logo image paths. If provided, displays images instead of text names", "title": "string", "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }>", "description": "string", "tag?": "string", "tagIcon?": "LucideIcon", "tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "buttons?": "Array<{ text: string, href?: string, onClick?: () => void }>", "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'", "textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image'", "useInvertedBackground": "boolean", "speed?": "number (default: 40)", "showCard?": "boolean (default: true) - Whether to show card styling around items", "ariaLabel?": "string (default: 'Social proof section')", "className?": "string", "containerClassName?": "string", "textBoxTitleClassName?": "string", "titleImageWrapperClassName?": "string", "titleImageClassName?": "string", "textBoxDescriptionClassName?": "string", "textBoxClassName?": "string", "textBoxTagClassName?": "string", "textBoxButtonContainerClassName?": "string", "textBoxButtonClassName?": "string", "textBoxButtonTextClassName?": "string", "contentClassName?": "string", "logoItemClassName?": "string", "logoCardClassName?": "string", "logoImageClassName?": "string", "logoTextClassName?": "string" } } ] } }