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