{"success":true,"data":{"category":{"slug":"footer","name":"Footer","description":"Collection of footer components"},"blocks":[{"id":"footer-links-grid","name":"Footer Links Grid","title":"Footer Links Grid","category":"Footer","categorySlug":"footer","description":"A multi-column footer with logo, navigation links, and legal information. Features a responsive grid layout with customizable navigation sections, company branding, and bottom legal links. Ideal for corporate websites, SaaS products, and marketing sites that need organized footer navigation.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290420/cjutkvt4ts74befzbdh97tzeg9mo/footer-links-grid-desktop.png","mobile":"https://cdn.ing/assets/i/r/290421/v6zexbi4zoh3y6g51974mw2pd7hb/footer-links-grid-mobile.png"},"componentPath":"blocks/footers/footer-links-grid.tsx","code":"import { FooterLinksGrid } from \"@opensite/ui/blocks/footers/footer-links-grid\";\nimport { brandLogoPlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n return (\n \n );\n}","propsSchema":{"logo":{"type":"object","description":"Logo configuration","fields":{"url":{"type":"string","description":"","required":true},"src":{"type":"string","description":"","required":true},"alt":{"type":"string","description":"","required":true},"title":{"type":"string","description":"","required":true}},"typeLabel":"{ url: string; src: string; alt: string; title: string; }","required":false},"className":{"type":"string","description":"Additional CSS classes","required":false},"tagline":{"type":"string","description":"Tagline displayed below the logo","required":false},"menuItems":{"type":"array","description":"Navigation menu sections","items":{"type":"object","description":"","fields":{"title":{"type":"string","description":"Section title","required":true},"links":{"type":"array","description":"Links within the section","items":{"type":"object","description":"","fields":{"text":{"type":"string","description":"","required":true},"url":{"type":"string","description":"","required":true}},"typeLabel":"{ text: string; url: string; }"},"typeLabel":"{ text: string; url: string; }[]","required":true}},"typeLabel":"FooterLinksGridMenuItem"},"typeLabel":"FooterLinksGridMenuItem[]","required":false},"copyright":{"type":"string","description":"Brand/company name for the copyright notice","required":false},"bottomLinks":{"type":"array","description":"Bottom links (terms, privacy, etc.)","items":{"type":"object","description":"","fields":{"text":{"type":"string","description":"","required":true},"url":{"type":"string","description":"","required":true}},"typeLabel":"{ text: string; url: string; }"},"typeLabel":"{ text: string; url: string; }[]","required":false},"background":{"type":"string","description":"Section background variant","typeLabel":"SectionBackground","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"spacing":{"type":"object","description":"Section spacing variant","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern opacity (0-1)","required":false},"optixFlowConfig":{"type":"object","description":"Optional Optix Flow configuration for","fields":{"apiKey":{"type":"string","description":"","required":true},"compression":{"type":"number","description":"","required":false}},"typeLabel":"{ apiKey: string; compression?: number; }","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["footer","navigation","links","multi-column","grid","corporate","legal","sitemap","branding"],"performance":{},"importantUsageNotes":"This footer has a logo/tagline column alongside a 4-column navigation grid and bottom legal links. Provide exactly 4 'menuItems' sections (the demo canonical count), each with 4-6 links. Only set 'logo.src' if a real brand logo is in the media library; otherwise rely on 'logo.title' as text. Only include 'bottomLinks' (privacy, terms, etc.) if those pages actually exist on the site. Follow the example props closely for this block."},{"id":"footer-social-newsletter","name":"Footer Social Newsletter","title":"Footer Social Newsletter","category":"Footer","categorySlug":"footer","description":"A footer with social icons, navigation links, and newsletter signup. Features prominent social media icons in circular buttons, multi-column navigation, and an email newsletter subscription form. Ideal for community-focused products, SaaS platforms, and businesses that prioritize social engagement and email marketing.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290422/tndi6i4iqhasxhycehikb96alm5m/footer-social-newsletter-desktop.png","mobile":"https://cdn.ing/assets/i/r/290423/zrjyjftl8ldgkc9049atxviv2a6z/footer-social-newsletter-mobile.png"},"componentPath":"blocks/footers/footer-social-newsletter.tsx","code":"import { FooterSocialNewsletter } from \"@opensite/ui/blocks/footers/footer-social-newsletter\";\nimport { logoPlaceholders } from \"@/lib/media\";\nimport { demoFormEngineApi } from \"@/lib/form-demo-data\";\nimport type { FormFieldConfig } from \"@opensite/ui\";\n\nconst formFields: FormFieldConfig[] = [\n {\n name: \"email\",\n type: \"email\",\n className: \"w-full\",\n placeholder: \"Enter your email\",\n required: true,\n columnSpan: 12,\n },\n];\n\nexport default function Demo() {\n return (\n \n );\n}","propsSchema":{"logo":{"type":"object","description":"Logo configuration","fields":{"src":{"type":"string","description":"","required":true},"url":{"type":"string","description":"Logo link URL","required":false},"alt":{"type":"string","description":"Brand title","required":false},"className":{"type":"string","description":"img tag class name","required":false}},"typeLabel":"{ src: string; /** Logo link URL */ url?: string; /** Brand title */ alt?: string; /** img tag class name */ className?: string; }","required":false},"sections":{"type":"array","description":"Navigation sections","items":{"type":"object","description":"","fields":{"title":{"type":"string","description":"Section title","required":true},"links":{"type":"array","description":"Links in this section","items":{"type":"object","description":"","fields":{"name":{"type":"string","description":"Link name/label","required":true},"href":{"type":"string","description":"Link URL","required":true}},"typeLabel":"FooterSocialNewsletterLink"},"typeLabel":"FooterSocialNewsletterLink[]","required":true}},"typeLabel":"FooterSocialNewsletterSection"},"typeLabel":"FooterSocialNewsletterSection[]","required":false},"socialLinks":{"type":"array","description":"Social media links","items":{"type":"object","description":"","fields":{"href":{"type":"string","description":"Link URL - required. The platform icon is automatically determined from the URL.","required":true},"label":{"type":"string","description":"Optional accessible label for screen readers.\nIf not provided, the platform name is used.","required":false},"iconNameOverride":{"type":"string","description":"Optional icon name override in format: prefix/name (e.g., \"cib/instagram\")\nUse when you need a specific icon that differs from the auto-detected platform.","required":false}},"typeLabel":"FooterSocialLink"},"typeLabel":"FooterSocialLink[]","required":false},"copyright":{"type":"string","description":"Brand/company name for the copyright notice","required":false},"className":{"type":"string","description":"Additional CSS classes for the section wrapper","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the content wrapper","required":false},"logoWrapperClassName":{"type":"string","description":"Additional CSS classes for the logo wrapper","required":false},"gridClassName":{"type":"string","description":"Additional CSS classes for the main grid","required":false},"navSectionClassName":{"type":"string","description":"Additional CSS classes for navigation sections","required":false},"navTitleClassName":{"type":"string","description":"Additional CSS classes for navigation section titles","required":false},"navLinksClassName":{"type":"string","description":"Additional CSS classes for navigation link lists","required":false},"navLinkClassName":{"type":"string","description":"Additional CSS classes for navigation link items","required":false},"socialColumnClassName":{"type":"string","description":"Additional CSS classes for the social/newsletter column","required":false},"socialLinksClassName":{"type":"string","description":"Additional CSS classes for the social links list","required":false},"socialLinkClassName":{"type":"string","description":"Additional CSS classes for social link items","required":false},"privacyClassName":{"type":"string","description":"Additional CSS classes for the privacy text","required":false},"bottomClassName":{"type":"string","description":"Additional CSS classes for the bottom section","required":false},"copyrightClassName":{"type":"string","description":"Additional CSS classes for the copyright section","required":false},"background":{"type":"string","description":"Section background variant","typeLabel":"SectionBackground","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"spacing":{"type":"object","description":"Section spacing variant","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern opacity (0-1)","required":false},"optixFlowConfig":{"type":"object","description":"Optional Optix Flow configuration for","fields":{"apiKey":{"type":"string","description":"API key for OptixFlow service","required":true},"compression":{"type":"number","description":"Compression level (0-100)","required":false}},"typeLabel":"OptixFlowConfig","required":false},"formEngineSetup":{"type":"object","description":"Full form engine setup and props","typeLabel":"FormEngineProps","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["footer","social","newsletter","subscription","email","community","icons","navigation"],"performance":{},"importantUsageNotes":"This footer has a logo, 4-column navigation, social links, and a newsletter form. Provide exactly 4 'sections', each with 4-6 links. Only include 'socialLinks' the brand actually has — do not invent social profiles. The newsletter uses 'formEngineSetup' — follow the form implementation requirements properly (correct field types, labels, validation, and submit handling). Only set 'logo.src' if a real brand logo is in the media library. Follow the example props closely for this block."},{"id":"footer-social-apps","name":"Footer Social Apps","title":"Footer Social Apps","category":"Footer","categorySlug":"footer","description":"A footer with social icons, navigation links, and mobile app download links. Features prominent social media icons and mobile app store links in circular buttons, along with multi-column navigation. Ideal for products with mobile apps, community-focused platforms, and businesses that want to highlight their cross-platform presence.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290424/4fb98bi74961h1avevtjjk4dy3mi/footer-social-apps-desktop.png","mobile":"https://cdn.ing/assets/i/r/290425/guuxnowa8mk9y9ow1ppqeldgs57a/footer-social-apps-mobile.png"},"componentPath":"blocks/footers/footer-social-apps.tsx","code":"import { FooterSocialApps } from \"@opensite/ui/blocks/footers/footer-social-apps\";\nimport { brandLogoPlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n return (\n \n );\n}","propsSchema":{"logo":{"type":"object","description":"Logo configuration","fields":{"url":{"type":"string","description":"","required":true},"src":{"type":"string","description":"","required":true},"alt":{"type":"string","description":"","required":true},"title":{"type":"string","description":"","required":true}},"typeLabel":"{ url: string; src: string; alt: string; title: string; }","required":false},"className":{"type":"string","description":"Additional CSS classes","required":false},"sections":{"type":"array","description":"Navigation sections","items":{"type":"object","description":"","fields":{"title":{"type":"string","description":"","required":true},"links":{"type":"array","description":"","items":{"type":"object","description":"","fields":{"name":{"type":"string","description":"","required":true},"href":{"type":"string","description":"","required":true}},"typeLabel":"{ name: string; href: string; }"},"typeLabel":"{ name: string; href: string; }[]","required":true}},"typeLabel":"FooterSocialAppsSection"},"typeLabel":"FooterSocialAppsSection[]","required":false},"socialLinks":{"type":"array","description":"Social media links","items":{"type":"object","description":"","fields":{"href":{"type":"string","description":"Link URL - required. The platform icon is automatically determined from the URL.","required":true},"label":{"type":"string","description":"Optional accessible label for screen readers.\nIf not provided, the platform name is used.","required":false},"iconNameOverride":{"type":"string","description":"Optional icon name override in format: prefix/name (e.g., \"cib/instagram\")\nUse when you need a specific icon that differs from the auto-detected platform.","required":false}},"typeLabel":"FooterSocialLink"},"typeLabel":"FooterSocialLink[]","required":false},"appLinks":{"type":"array","description":"Mobile app store links","items":{"type":"object","description":"","fields":{"icon":{"type":"string","description":"Icon name in format: prefix/name (e.g., \"simple-icons/android\")","required":true},"href":{"type":"string","description":"Link URL","required":true},"label":{"type":"string","description":"Accessible label","required":true}},"typeLabel":"FooterSocialAppsAppLink"},"typeLabel":"FooterSocialAppsAppLink[]","required":false},"socialLabel":{"type":"string","description":"Social section label","required":false},"appLabel":{"type":"string","description":"Mobile app section label","required":false},"copyright":{"type":"string","description":"Copyright text","required":false},"background":{"type":"string","description":"Section background variant","typeLabel":"SectionBackground","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"spacing":{"type":"object","description":"Section spacing variant","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern opacity (0-1)","required":false},"optixFlowConfig":{"type":"object","description":"Optional Optix Flow configuration for","fields":{"apiKey":{"type":"string","description":"","required":true},"compression":{"type":"number","description":"","required":false}},"typeLabel":"{ apiKey: string; compression?: number; }","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["footer","social","mobile","apps","download","android","ios","app-store","navigation"],"performance":{},"importantUsageNotes":"This footer has a logo, 3-column navigation, social links, and app store download links. Provide exactly 3 'sections', each with 4-6 links. Only include 'socialLinks' the brand actually has — do not invent social profiles. Only include 'appLinks' if the brand actually has a mobile app with real App Store / Google Play URLs — DO NOT invent app store links. Only set 'logo.src' if a real brand logo is in the media library. Follow the example props closely for this block."},{"id":"footer-simple-centered","name":"Footer Simple Centered","title":"Footer Simple Centered","category":"Footer","categorySlug":"footer","description":"A clean, minimal footer with logo, sitemap, and legal links. Features a simple two-column sitemap layout with company branding and bottom legal links. Ideal for corporate websites, landing pages, and products that prefer a clean, uncluttered footer design without social media or newsletter elements.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290426/jibej0ffj0gy4ibipwxz5yxe987g/footer-simple-centered-desktop.png","mobile":"https://cdn.ing/assets/i/r/290427/5ute92wezl1cf27w7v3oexc9t89v/footer-simple-centered-mobile.png"},"componentPath":"blocks/footers/footer-simple-centered.tsx","code":"import { FooterSimpleCentered } from \"@opensite/ui/blocks/footers/footer-simple-centered\";\nimport { brandLogoPlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n return (\n \n );\n}","propsSchema":{"logo":{"type":"object","description":"Logo configuration","fields":{"url":{"type":"string","description":"Logo link URL","required":false},"src":{"type":"string","description":"Logo image source","required":false},"alt":{"type":"string","description":"Logo alt text","required":false},"title":{"type":"string","description":"Logo title/brand name","required":false}},"typeLabel":"FooterSimpleCenteredLogo","required":false},"tagline":{"type":"object","description":"Tagline displayed below the logo","typeLabel":"React.ReactNode","required":false},"sitemap":{"type":"array","description":"Sitemap sections","items":{"type":"object","description":"","fields":{"title":{"type":"string","description":"Section title","required":true},"links":{"type":"array","description":"Links in this section","items":{"type":"object","description":"","fields":{"label":{"type":"object","description":"Link label","typeLabel":"ReactNode","required":true},"href":{"type":"string","description":"Link URL","required":true},"icon":{"type":"object","description":"Optional icon","typeLabel":"ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes","required":false}},"typeLabel":"NavLinkItem"},"typeLabel":"NavLinkItem[]","required":true}},"typeLabel":"FooterSimpleCenteredSection"},"typeLabel":"FooterSimpleCenteredSection[]","required":false},"copyright":{"type":"string","description":"Brand/company name for the copyright notice","required":false},"bottomLinks":{"type":"array","description":"Bottom links (terms, privacy, etc.)","items":{"type":"object","description":"","fields":{"text":{"type":"string","description":"Link text","required":true},"href":{"type":"string","description":"Link URL","required":true}},"typeLabel":"FooterSimpleCenteredBottomLink"},"typeLabel":"FooterSimpleCenteredBottomLink[]","required":false},"className":{"type":"string","description":"Additional CSS classes for the section wrapper","required":false},"footerClassName":{"type":"string","description":"Additional CSS classes for the footer element","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the main content wrapper","required":false},"brandClassName":{"type":"string","description":"Additional CSS classes for the brand section","required":false},"logoWrapperClassName":{"type":"string","description":"Additional CSS classes for the logo wrapper","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo image","required":false},"taglineClassName":{"type":"string","description":"Additional CSS classes for the tagline","required":false},"sitemapWrapperClassName":{"type":"string","description":"Additional CSS classes for the sitemap wrapper","required":false},"sitemapSectionClassName":{"type":"string","description":"Additional CSS classes for each sitemap section","required":false},"sitemapTitleClassName":{"type":"string","description":"Additional CSS classes for sitemap section titles","required":false},"sitemapLinksClassName":{"type":"string","description":"Additional CSS classes for sitemap link lists","required":false},"sitemapLinkClassName":{"type":"string","description":"Additional CSS classes for sitemap link items","required":false},"bottomBarClassName":{"type":"string","description":"Additional CSS classes for the bottom bar","required":false},"copyrightClassName":{"type":"string","description":"Additional CSS classes for the copyright section","required":false},"bottomLinksClassName":{"type":"string","description":"Additional CSS classes for the bottom links wrapper","required":false},"bottomLinkClassName":{"type":"string","description":"Additional CSS classes for bottom link items","required":false},"background":{"type":"string","description":"Section background variant","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Section spacing variant","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern opacity (0-1)","required":false},"optixFlowConfig":{"type":"object","description":"Optional Optix Flow configuration for","fields":{"apiKey":{"type":"string","description":"API key for OptixFlow service","required":true},"compression":{"type":"number","description":"Compression level (0-100)","required":false}},"typeLabel":"OptixFlowConfig","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["footer","minimal","simple","clean","sitemap","corporate","legal","centered"],"performance":{},"importantUsageNotes":"This footer has a centered logo, tagline, 4-column sitemap grid, and bottom legal links. Provide exactly 4 'sitemap' sections, each with 4-6 links. Only set 'logo.src' if a real brand logo is in the media library; otherwise rely on 'logo.title' as text. Only include 'bottomLinks' (terms, privacy, etc.) if those pages actually exist on the site. Follow the example props closely for this block."},{"id":"footer-brand-description","name":"Footer Brand Description","title":"Footer Brand Description","category":"Footer","categorySlug":"footer","description":"A footer with logo, description, social icons, and navigation. Features a prominent brand section with logo, description, and social links on the left, with multi-column navigation on the right. Ideal for brand-focused websites, startups, and businesses that want to emphasize their identity and social presence in the footer.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290428/rqhsdnwsec12dpln0j7no1g3hioj/footer-brand-description-desktop.png","mobile":"https://cdn.ing/assets/i/r/290429/re4j7vw6669yuewxh2tmor91a66o/footer-brand-description-mobile.png"},"componentPath":"blocks/footers/footer-brand-description.tsx","code":"import { FooterBrandDescription } from \"@opensite/ui/blocks/footers/footer-brand-description\";\nimport { brandLogoPlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n return (\n \n );\n}","propsSchema":{"logo":{"type":"object","description":"Logo configuration","fields":{"url":{"type":"string","description":"Logo link URL","required":true},"src":{"type":"string","description":"Logo image source","required":true},"alt":{"type":"string","description":"Logo alt text","required":true},"title":{"type":"string","description":"Logo title/brand name","required":true}},"typeLabel":"FooterBrandDescriptionLogo","required":false},"sections":{"type":"array","description":"Navigation sections","items":{"type":"object","description":"","fields":{"title":{"type":"string","description":"Section title","required":true},"links":{"type":"array","description":"Links in this section","items":{"type":"object","description":"","fields":{"name":{"type":"string","description":"Link name/label","required":true},"href":{"type":"string","description":"Link URL","required":true}},"typeLabel":"FooterBrandDescriptionLink"},"typeLabel":"FooterBrandDescriptionLink[]","required":true}},"typeLabel":"FooterBrandDescriptionSection"},"typeLabel":"FooterBrandDescriptionSection[]","required":false},"description":{"type":"object","description":"Brand description text","typeLabel":"React.ReactNode","required":false},"socialLinks":{"type":"array","description":"Social media links","items":{"type":"object","description":"","fields":{"href":{"type":"string","description":"Link URL - required. The platform icon is automatically determined from the URL.","required":true},"label":{"type":"string","description":"Optional accessible label for screen readers.\nIf not provided, the platform name is used.","required":false},"iconNameOverride":{"type":"string","description":"Optional icon name override in format: prefix/name (e.g., \"cib/instagram\")\nUse when you need a specific icon that differs from the auto-detected platform.","required":false}},"typeLabel":"FooterSocialLink"},"typeLabel":"FooterSocialLink[]","required":false},"copyright":{"type":"string","description":"Brand/company name for the copyright notice","required":false},"legalLinks":{"type":"array","description":"Legal links (terms, privacy, etc.)","items":{"type":"object","description":"","fields":{"name":{"type":"string","description":"Link name/label","required":true},"href":{"type":"string","description":"Link URL","required":true}},"typeLabel":"FooterBrandDescriptionLink"},"typeLabel":"FooterBrandDescriptionLink[]","required":false},"className":{"type":"string","description":"Additional CSS classes for the section wrapper","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the content wrapper","required":false},"layoutClassName":{"type":"string","description":"Additional CSS classes for the main layout","required":false},"brandColumnClassName":{"type":"string","description":"Additional CSS classes for the brand column","required":false},"logoWrapperClassName":{"type":"string","description":"Additional CSS classes for the logo wrapper","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo image","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"socialLinksClassName":{"type":"string","description":"Additional CSS classes for the social links list","required":false},"socialLinkClassName":{"type":"string","description":"Additional CSS classes for social link items","required":false},"navGridClassName":{"type":"string","description":"Additional CSS classes for the navigation grid","required":false},"navSectionClassName":{"type":"string","description":"Additional CSS classes for navigation sections","required":false},"navTitleClassName":{"type":"string","description":"Additional CSS classes for navigation section titles","required":false},"navLinksClassName":{"type":"string","description":"Additional CSS classes for navigation link lists","required":false},"navLinkClassName":{"type":"string","description":"Additional CSS classes for navigation link items","required":false},"bottomClassName":{"type":"string","description":"Additional CSS classes for the bottom section","required":false},"copyrightClassName":{"type":"string","description":"Additional CSS classes for the copyright section","required":false},"legalLinksClassName":{"type":"string","description":"Additional CSS classes for legal links","required":false},"legalLinkClassName":{"type":"string","description":"Additional CSS classes for legal link items","required":false},"background":{"type":"string","description":"Section background variant","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Section spacing variant","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern opacity (0-1)","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"optixFlowConfig":{"type":"object","description":"Optional Optix Flow configuration for","fields":{"apiKey":{"type":"string","description":"API key for OptixFlow service","required":true},"compression":{"type":"number","description":"Compression level (0-100)","required":false}},"typeLabel":"OptixFlowConfig","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["footer","brand","description","social","identity","startup","navigation","about"],"performance":{},"importantUsageNotes":"This footer has a brand column (logo + description + social links) alongside a 3-column navigation grid. Provide exactly 3 'sections', each with 4-6 'links'. Only include 'socialLinks' the brand actually has — do not invent social profiles. Only set 'logo.src' if a real brand logo is in the media library; otherwise rely on 'logo.title' as text. Only include 'legalLinks' (privacy, terms, etc.) if those pages actually exist on the site. Follow the example props closely for this block."},{"id":"footer-brand-links-contact","name":"Brand Links + Contact Footer","title":"Footer Brand Links Contact","category":"Footer","categorySlug":"footer","description":"A multi-column footer with logo and brand summary, navigation link groups, contact details, social icons, and a legal bar. Great for corporate sites that need both navigation depth and clear contact paths.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290430/l17fqkc0l080er0apkj8mpxg0wcn/footer-brand-links-contact-desktop.png","mobile":"https://cdn.ing/assets/i/r/290431/w1pv8gbp72vde9d0ns0bhduqooda/footer-brand-links-contact-mobile.png"},"componentPath":"blocks/footers/footer-brand-links-contact.tsx","code":"import { FooterBrandLinksContact } from \"@opensite/ui/blocks/footers/footer-brand-links-contact\";\nimport { brandLogoPlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n return (\n \n );\n}","propsSchema":{"logoSrc":{"type":"string","description":"Logo source URL","required":false},"logoAlt":{"type":"string","description":"Logo alt text","required":false},"tagline":{"type":"object","description":"Brand tagline text","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Brand description text","typeLabel":"React.ReactNode","required":false},"linkGroups":{"type":"array","description":"Link groups for the footer columns","items":{"type":"object","description":"","fields":{"title":{"type":"string","description":"Group title","required":true},"links":{"type":"array","description":"Links in this group","items":{"type":"object","description":"","fields":{"label":{"type":"object","description":"Link label","typeLabel":"ReactNode","required":true},"href":{"type":"string","description":"Link URL","required":true},"icon":{"type":"object","description":"Optional icon","typeLabel":"ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes","required":false}},"typeLabel":"NavLinkItem"},"typeLabel":"NavLinkItem[]","required":true}},"typeLabel":"FooterBrandLinksContactGroup"},"typeLabel":"FooterBrandLinksContactGroup[]","required":false},"contactItems":{"type":"array","description":"Contact items for the contact column","items":{"type":"object","description":"","fields":{"icon":{"type":"string","description":"Icon name in format: prefix/name","required":true},"label":{"type":"string","description":"Contact label/text","required":true},"href":{"type":"string","description":"Contact link URL","required":true}},"typeLabel":"FooterBrandLinksContactItem"},"typeLabel":"FooterBrandLinksContactItem[]","required":false},"socialLinks":{"type":"array","description":"Social media links","items":{"type":"object","description":"","fields":{"href":{"type":"string","description":"Link URL - required. The platform icon is automatically determined from the URL.","required":true},"label":{"type":"string","description":"Optional accessible label for screen readers.\nIf not provided, the platform name is used.","required":false},"iconNameOverride":{"type":"string","description":"Optional icon name override in format: prefix/name (e.g., \"cib/instagram\")\nUse when you need a specific icon that differs from the auto-detected platform.","required":false}},"typeLabel":"FooterSocialLink"},"typeLabel":"FooterSocialLink[]","required":false},"legalLinks":{"type":"array","description":"Bottom bar links","items":{"type":"object","description":"","fields":{"label":{"type":"string","description":"Link label","required":true},"href":{"type":"string","description":"Link URL","required":true}},"typeLabel":"FooterBrandLinksContactLegalLink"},"typeLabel":"FooterBrandLinksContactLegalLink[]","required":false},"copyright":{"type":"string","description":"Brand/company name for the copyright notice","required":false},"contactTitle":{"type":"object","description":"Contact section title","typeLabel":"React.ReactNode","required":false},"socialTitle":{"type":"object","description":"Social section title","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section wrapper","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the footer content","required":false},"gridClassName":{"type":"string","description":"Additional CSS classes for the grid layout","required":false},"brandClassName":{"type":"string","description":"Additional CSS classes for the brand column","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo","required":false},"taglineClassName":{"type":"string","description":"Additional CSS classes for the tagline","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"linkGroupClassName":{"type":"string","description":"Additional CSS classes for link group columns","required":false},"linkGroupTitleClassName":{"type":"string","description":"Additional CSS classes for link group titles","required":false},"linkListClassName":{"type":"string","description":"Additional CSS classes for link lists","required":false},"linkItemClassName":{"type":"string","description":"Additional CSS classes for link items","required":false},"contactColumnClassName":{"type":"string","description":"Additional CSS classes for the contact column","required":false},"contactItemClassName":{"type":"string","description":"Additional CSS classes for contact items","required":false},"socialSectionClassName":{"type":"string","description":"Additional CSS classes for the social section","required":false},"socialLinkClassName":{"type":"string","description":"Additional CSS classes for social links","required":false},"bottomBarClassName":{"type":"string","description":"Additional CSS classes for the bottom bar","required":false},"copyrightClassName":{"type":"string","description":"Additional CSS classes for the copyright section","required":false},"legalLinksClassName":{"type":"string","description":"Additional CSS classes for legal links","required":false},"background":{"type":"string","description":"Section background variant","typeLabel":"SectionBackground","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"spacing":{"type":"object","description":"Section spacing variant","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern opacity (0-1)","required":false},"optixFlowConfig":{"type":"object","description":"Optional Optix Flow configuration for image optimization","fields":{"apiKey":{"type":"string","description":"API key for OptixFlow service","required":true},"compression":{"type":"number","description":"Compression level (0-100)","required":false}},"typeLabel":"OptixFlowConfig","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["footer","brand","links","contact","social","legal","multi-column","navigation"],"performance":{},"importantUsageNotes":"This footer has a brand/description column, 3 link group columns, and a contact + social column. Provide exactly 3 'linkGroups', each with 4-6 links. Only supply real 'contactItems' (email, phone, address) — DO NOT invent any contact data; omit fields the brand has not provided. Only include 'socialLinks' the brand actually has — do not invent social profiles. Only set 'logoSrc' if a real brand logo is in the media library. Only include 'legalLinks' (privacy, terms, etc.) if those pages actually exist on the site. Follow the example props closely for this block."},{"id":"footer-comprehensive-links","name":"Comprehensive Links Footer","title":"Footer Comprehensive Links","category":"Footer","categorySlug":"footer","description":"A full-width footer with brand summary, navigation columns, optional article links, contact details, social icons, and a bottom legal bar. Ideal for content-rich sites that need robust navigation and visibility into resources.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290432/3hjpbxi6f5mc2vjvao1grpsz1lky/footer-comprehensive-links-desktop.png","mobile":"https://cdn.ing/assets/i/r/290433/erdxv3f8i8q60txzqb5jmhgz693t/footer-comprehensive-links-mobile.png"},"componentPath":"blocks/footers/footer-comprehensive-links.tsx","code":"import { FooterComprehensiveLinks } from \"@opensite/ui/blocks/footers/footer-comprehensive-links\";\nimport { brandLogoPlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n return (\n \n );\n}","propsSchema":{"logoSrc":{"type":"string","description":"Logo source URL","required":false},"logoAlt":{"type":"string","description":"Logo alt text","required":false},"logoHref":{"type":"string","description":"Optional logo link","required":false},"tagline":{"type":"string","description":"Brand tagline","required":false},"summary":{"type":"string","description":"Brand summary paragraph","required":false},"linkColumns":{"type":"array","description":"Link columns","items":{"type":"object","description":"","fields":{"title":{"type":"string","description":"","required":true},"links":{"type":"array","description":"","items":{"type":"object","description":"","fields":{"label":{"type":"string","description":"","required":true},"href":{"type":"string","description":"","required":true}},"typeLabel":"FooterComprehensiveLinksLink"},"typeLabel":"FooterComprehensiveLinksLink[]","required":true}},"typeLabel":"FooterComprehensiveLinksColumn"},"typeLabel":"FooterComprehensiveLinksColumn[]","required":false},"articleLinks":{"type":"array","description":"Article links list","items":{"type":"object","description":"","fields":{"label":{"type":"string","description":"","required":true},"href":{"type":"string","description":"","required":true}},"typeLabel":"FooterComprehensiveLinksLink"},"typeLabel":"FooterComprehensiveLinksLink[]","required":false},"articleSectionTitle":{"type":"string","description":"Article section title","required":false},"contact":{"type":"object","description":"Contact information","fields":{"email":{"type":"string","description":"","required":false},"phone":{"type":"string","description":"","required":false},"address":{"type":"string","description":"","required":false}},"typeLabel":"FooterComprehensiveLinksContact","required":false},"socialLinks":{"type":"array","description":"Social links","items":{"type":"object","description":"","fields":{"href":{"type":"string","description":"Link URL - required. The platform icon is automatically determined from the URL.","required":true},"label":{"type":"string","description":"Optional accessible label for screen readers.\nIf not provided, the platform name is used.","required":false},"iconNameOverride":{"type":"string","description":"Optional icon name override in format: prefix/name (e.g., \"cib/instagram\")\nUse when you need a specific icon that differs from the auto-detected platform.","required":false}},"typeLabel":"FooterSocialLink"},"typeLabel":"FooterSocialLink[]","required":false},"copyright":{"type":"string","description":"Brand/company name for the copyright notice","required":false},"bottomLinks":{"type":"array","description":"Bottom bar links","items":{"type":"object","description":"","fields":{"label":{"type":"string","description":"","required":true},"href":{"type":"string","description":"","required":true}},"typeLabel":"FooterComprehensiveLinksLink"},"typeLabel":"FooterComprehensiveLinksLink[]","required":false},"pattern":{"type":"object","description":"Pattern background key or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern opacity (0-1)","required":false},"className":{"type":"string","description":"Additional CSS classes for the footer","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"spacing":{"type":"object","description":"Section spacing variant","fields":{},"typeLabel":"SectionSpacing","required":false},"background":{"type":"string","description":"Section background variant","typeLabel":"SectionBackground","required":false},"optixFlowConfig":{"type":"object","description":"Optional Optix Flow configuration for image optimization","fields":{"apiKey":{"type":"string","description":"","required":true},"compression":{"type":"number","description":"","required":false}},"typeLabel":"{ apiKey: string; compression?: number; }","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["footer","comprehensive","links","contact","social","articles","navigation","legal"],"performance":{},"importantUsageNotes":"This is a large, feature-rich footer with a summary column, 4 link columns, an articles section, contact info, and social links. Provide exactly 4 'linkColumns', each with 4-6 links. Provide 8-12 'articleLinks' drawn from real blog/resource pages on the site — DO NOT invent article titles or URLs. Only supply real 'contact' data points (email, phone, address) — DO NOT invent any contact data; omit fields the brand has not provided. Only include 'socialLinks' the brand actually has — do not invent social profiles. Only set 'logoSrc' if a real brand logo is in the media library. Only include 'bottomLinks' (privacy, terms, etc.) if those pages actually exist on the site. Follow the example props closely for this block."},{"id":"footer-newsletter-grid","name":"Footer Newsletter Grid","title":"Footer Newsletter Grid","category":"Footer","categorySlug":"footer","description":"A comprehensive footer with logo, social icons, navigation, and newsletter. Features a full-width grid layout with brand section (logo, description, social icons), multi-column navigation, and a prominent newsletter signup form. Ideal for content-heavy websites, SaaS products, and businesses that prioritize email marketing and social engagement.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290435/mjet8zuupbeahzt086ya1h8o4r4h/footer-newsletter-grid-desktop.png","mobile":"https://cdn.ing/assets/i/r/290434/z6bze6kdt95p54j4hisa0l58olon/cleanshot-2026-02-18-at-18-46-19-2x.png"},"componentPath":"blocks/footers/footer-newsletter-grid.tsx","code":"import { FooterNewsletterGrid } from \"@opensite/ui/blocks/footers/footer-newsletter-grid\";\nimport { brandLogoPlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n return (\n \n );\n}","propsSchema":{"logo":{"type":"object","description":"Logo configuration","fields":{"url":{"type":"string","description":"","required":true},"src":{"type":"string","description":"","required":true},"alt":{"type":"string","description":"","required":true},"title":{"type":"string","description":"","required":true}},"typeLabel":"{ url: string; src: string; alt: string; title: string; }","required":false},"className":{"type":"string","description":"Additional CSS classes","required":false},"description":{"type":"string","description":"Brand description text","required":false},"sections":{"type":"array","description":"Navigation sections","items":{"type":"object","description":"","fields":{"title":{"type":"string","description":"","required":true},"links":{"type":"array","description":"","items":{"type":"object","description":"","fields":{"name":{"type":"string","description":"","required":true},"href":{"type":"string","description":"","required":true}},"typeLabel":"{ name: string; href: string; }"},"typeLabel":"{ name: string; href: string; }[]","required":true}},"typeLabel":"FooterNewsletterGridSection"},"typeLabel":"FooterNewsletterGridSection[]","required":false},"socialLinks":{"type":"array","description":"Social media links","items":{"type":"object","description":"","fields":{"href":{"type":"string","description":"Link URL - required. The platform icon is automatically determined from the URL.","required":true},"label":{"type":"string","description":"Optional accessible label for screen readers.\nIf not provided, the platform name is used.","required":false},"iconNameOverride":{"type":"string","description":"Optional icon name override in format: prefix/name (e.g., \"cib/instagram\")\nUse when you need a specific icon that differs from the auto-detected platform.","required":false}},"typeLabel":"FooterSocialLink"},"typeLabel":"FooterSocialLink[]","required":false},"newsletterTitle":{"type":"string","description":"Newsletter section title","required":false},"newsletterPlaceholder":{"type":"string","description":"Newsletter placeholder text","required":false},"newsletterButtonText":{"type":"string","description":"Newsletter button text","required":false},"privacyText":{"type":"string","description":"Privacy policy text","required":false},"privacyLinkText":{"type":"string","description":"Privacy policy link text","required":false},"privacyLinkUrl":{"type":"string","description":"Privacy policy URL","required":false},"copyright":{"type":"string","description":"Brand/company name for the copyright notice","required":false},"background":{"type":"string","description":"Section background variant","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Section spacing variant","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern opacity (0-1)","required":false},"optixFlowConfig":{"type":"object","description":"Optional Optix Flow configuration for","fields":{"apiKey":{"type":"string","description":"","required":true},"compression":{"type":"number","description":"","required":false}},"typeLabel":"{ apiKey: string; compression?: number; }","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["footer","newsletter","grid","social","comprehensive","email","marketing","subscription"],"performance":{},"importantUsageNotes":"This footer has a logo/description column, 3-column navigation, social links, and an inline newsletter form. Provide exactly 3 'sections', each with 4-6 links. Only include 'socialLinks' the brand actually has — do not invent social profiles. The newsletter is a simple inline form controlled by 'newsletterTitle', 'newsletterPlaceholder', and 'newsletterButtonText' props (not formEngineSetup). Only set 'logo.src' if a real brand logo is in the media library. Only include 'privacyLinkUrl' if a privacy policy page actually exists on the site. Follow the example props closely for this block."},{"id":"footer-cta-banner","name":"Footer CTA Banner","title":"Footer CTA Banner","category":"Footer","categorySlug":"footer","description":"A dark-themed footer with prominent CTA banner, navigation, and newsletter. Features a full-width call-to-action banner at the top with heading, description, and button, followed by multi-column navigation, newsletter signup, and social links. Ideal for SaaS products, marketing sites, and businesses that want to drive conversions directly from the footer.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290436/lz8jhkzb7p3gpfn6m3xgft5ujr3k/footer-cta-banner-desktop.png","mobile":"https://cdn.ing/assets/i/r/290437/gj4ld9ptbkxsrbvol0joczwy4qp8/footer-cta-banner-mobile.png"},"componentPath":"blocks/footers/footer-cta-banner.tsx","code":"import { FooterCtaBanner } from \"@opensite/ui/blocks/footers/footer-cta-banner\";\nimport { brandLogoPlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n return (\n \n );\n}","propsSchema":{"logo":{"type":"object","description":"Logo configuration","fields":{"url":{"type":"string","description":"Logo link URL","required":true},"src":{"type":"string","description":"Logo image source","required":true},"alt":{"type":"string","description":"Logo alt text","required":true},"title":{"type":"string","description":"Logo title/brand name","required":true}},"typeLabel":"FooterCtaBannerLogo","required":false},"ctaHeading":{"type":"object","description":"CTA banner heading","typeLabel":"React.ReactNode","required":false},"ctaDescription":{"type":"object","description":"CTA banner description","typeLabel":"React.ReactNode","required":false},"ctaButtonText":{"type":"object","description":"CTA button text","typeLabel":"React.ReactNode","required":false},"ctaButtonUrl":{"type":"string","description":"CTA button URL","required":false},"sections":{"type":"array","description":"Navigation sections","items":{"type":"object","description":"","fields":{"title":{"type":"string","description":"Section title","required":true},"links":{"type":"array","description":"Links in this section","items":{"type":"object","description":"","fields":{"name":{"type":"string","description":"Link name/label","required":true},"href":{"type":"string","description":"Link URL","required":true}},"typeLabel":"FooterCtaBannerLink"},"typeLabel":"FooterCtaBannerLink[]","required":true}},"typeLabel":"FooterCtaBannerSection"},"typeLabel":"FooterCtaBannerSection[]","required":false},"socialLinks":{"type":"array","description":"Social media links","items":{"type":"object","description":"","fields":{"href":{"type":"string","description":"Link URL - required. The platform icon is automatically determined from the URL.","required":true},"label":{"type":"string","description":"Optional accessible label for screen readers.\nIf not provided, the platform name is used.","required":false},"iconNameOverride":{"type":"string","description":"Optional icon name override in format: prefix/name (e.g., \"cib/instagram\")\nUse when you need a specific icon that differs from the auto-detected platform.","required":false}},"typeLabel":"FooterSocialLink"},"typeLabel":"FooterSocialLink[]","required":false},"newsletterLabel":{"type":"object","description":"Newsletter label","typeLabel":"React.ReactNode","required":false},"newsletterPlaceholder":{"type":"string","description":"Newsletter placeholder","required":false},"newsletterButtonText":{"type":"object","description":"Newsletter button text","typeLabel":"React.ReactNode","required":false},"copyright":{"type":"string","description":"Brand/company name for the copyright notice","required":false},"legalLinks":{"type":"array","description":"Legal links","items":{"type":"object","description":"","fields":{"name":{"type":"string","description":"Link name/label","required":true},"href":{"type":"string","description":"Link URL","required":true}},"typeLabel":"FooterCtaBannerLink"},"typeLabel":"FooterCtaBannerLink[]","required":false},"className":{"type":"string","description":"Additional CSS classes for the section wrapper","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the content wrapper","required":false},"ctaBannerClassName":{"type":"string","description":"Additional CSS classes for the CTA banner","required":false},"ctaHeadingClassName":{"type":"string","description":"Additional CSS classes for the CTA heading","required":false},"ctaDescriptionClassName":{"type":"string","description":"Additional CSS classes for the CTA description","required":false},"ctaButtonClassName":{"type":"string","description":"Additional CSS classes for the CTA button","required":false},"gridClassName":{"type":"string","description":"Additional CSS classes for the main grid","required":false},"brandClassName":{"type":"string","description":"Additional CSS classes for the brand section","required":false},"logoWrapperClassName":{"type":"string","description":"Additional CSS classes for the logo wrapper","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo image","required":false},"newsletterClassName":{"type":"string","description":"Additional CSS classes for the newsletter section","required":false},"newsletterInputClassName":{"type":"string","description":"Additional CSS classes for the newsletter input","required":false},"newsletterButtonClassName":{"type":"string","description":"Additional CSS classes for the newsletter button","required":false},"socialLinksClassName":{"type":"string","description":"Additional CSS classes for the social links","required":false},"socialLinkClassName":{"type":"string","description":"Additional CSS classes for social link items","required":false},"navSectionClassName":{"type":"string","description":"Additional CSS classes for navigation sections","required":false},"navTitleClassName":{"type":"string","description":"Additional CSS classes for navigation section titles","required":false},"navLinksClassName":{"type":"string","description":"Additional CSS classes for navigation link lists","required":false},"navLinkClassName":{"type":"string","description":"Additional CSS classes for navigation link items","required":false},"bottomClassName":{"type":"string","description":"Additional CSS classes for the bottom section","required":false},"copyrightClassName":{"type":"string","description":"Additional CSS classes for the copyright section","required":false},"legalLinksClassName":{"type":"string","description":"Additional CSS classes for legal links","required":false},"legalLinkClassName":{"type":"string","description":"Additional CSS classes for legal link items","required":false},"background":{"type":"string","description":"Section background variant","typeLabel":"SectionBackground","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"spacing":{"type":"object","description":"Section spacing variant","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern opacity (0-1)","required":false},"optixFlowConfig":{"type":"object","description":"Optional Optix Flow configuration for","fields":{"apiKey":{"type":"string","description":"API key for OptixFlow service","required":true},"compression":{"type":"number","description":"Compression level (0-100)","required":false}},"typeLabel":"OptixFlowConfig","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["footer","cta","banner","dark","conversion","marketing","newsletter","call-to-action"],"performance":{},"importantUsageNotes":"This footer opens with a prominent full-width CTA banner (heading, description, single CTA button) above a 3-column navigation grid, an inline newsletter form, and social links. Provide exactly 3 'sections', each with 4-6 links. The CTA is a single button via 'ctaButtonText'/'ctaButtonUrl' — there is no 'actions' array. The newsletter is a simple inline form controlled by 'newsletterLabel', 'newsletterPlaceholder', and 'newsletterButtonText' props (not formEngineSetup). Only include 'socialLinks' the brand actually has — do not invent social profiles. Only set 'logo.src' if a real brand logo is in the media library. Only include 'legalLinks' (privacy, terms, etc.) if those pages actually exist on the site. Follow the example props closely for this block."},{"id":"footer-contact-card","name":"Footer Contact Card","title":"Footer Contact Card","category":"Footer","categorySlug":"footer","description":"A footer with large heading, contact information, and social links. Features a prominent heading, contact details (email, phone, address), social media icons, and horizontal navigation. Ideal for service businesses, agencies, and professional websites that want to emphasize contact information and make it easy for visitors to get in touch.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290438/xuooahpl634i700lrrubw6q40jai/footer-contact-card-desktop.png","mobile":"https://cdn.ing/assets/i/r/290439/lhp5qyezlzbujgnep3mrtmrlcdo7/footer-contact-card-mobile.png"},"componentPath":"blocks/footers/footer-contact-card.tsx","code":"import { FooterContactCard } from \"@opensite/ui/blocks/footers/footer-contact-card\";\nimport { brandLogoPlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n return (\n \n );\n}","propsSchema":{"logo":{"type":"object","description":"Logo configuration","fields":{"url":{"type":"string","description":"Logo link URL","required":true},"src":{"type":"string","description":"Logo image source","required":true},"alt":{"type":"string","description":"Logo alt text","required":true},"title":{"type":"string","description":"Logo title/brand name","required":true}},"typeLabel":"FooterContactCardLogo","required":false},"heading":{"type":"object","description":"Main heading text","typeLabel":"React.ReactNode","required":false},"email":{"type":"string","description":"Contact email","required":false},"phone":{"type":"string","description":"Contact phone","required":false},"address":{"type":"object","description":"Contact address","typeLabel":"React.ReactNode","required":false},"socialLinks":{"type":"array","description":"Social media links","items":{"type":"object","description":"","fields":{"href":{"type":"string","description":"Link URL - required. The platform icon is automatically determined from the URL.","required":true},"label":{"type":"string","description":"Optional accessible label for screen readers.\nIf not provided, the platform name is used.","required":false},"iconNameOverride":{"type":"string","description":"Optional icon name override in format: prefix/name (e.g., \"cib/instagram\")\nUse when you need a specific icon that differs from the auto-detected platform.","required":false}},"typeLabel":"FooterSocialLink"},"typeLabel":"FooterSocialLink[]","required":false},"navLinks":{"type":"array","description":"Navigation links","items":{"type":"object","description":"","fields":{"name":{"type":"string","description":"Link name/label","required":true},"href":{"type":"string","description":"Link URL","required":true}},"typeLabel":"FooterContactCardNavLink"},"typeLabel":"FooterContactCardNavLink[]","required":false},"socialTitle":{"type":"object","description":"Social section title","typeLabel":"React.ReactNode","required":false},"location":{"type":"object","description":"Location text","typeLabel":"React.ReactNode","required":false},"locationLabel":{"type":"object","description":"Location label","typeLabel":"React.ReactNode","required":false},"copyright":{"type":"string","description":"Brand/company name for the copyright notice","required":false},"className":{"type":"string","description":"Additional CSS classes for the section wrapper","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the content wrapper","required":false},"gridClassName":{"type":"string","description":"Additional CSS classes for the main grid","required":false},"leftColumnClassName":{"type":"string","description":"Additional CSS classes for the left column","required":false},"logoWrapperClassName":{"type":"string","description":"Additional CSS classes for the logo wrapper","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo image","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"contactClassName":{"type":"string","description":"Additional CSS classes for the contact section","required":false},"rightColumnClassName":{"type":"string","description":"Additional CSS classes for the right column","required":false},"socialSectionClassName":{"type":"string","description":"Additional CSS classes for the social section","required":false},"socialTitleClassName":{"type":"string","description":"Additional CSS classes for the social title","required":false},"socialLinksClassName":{"type":"string","description":"Additional CSS classes for the social links list","required":false},"socialLinkClassName":{"type":"string","description":"Additional CSS classes for social link items","required":false},"navClassName":{"type":"string","description":"Additional CSS classes for the navigation","required":false},"navLinkClassName":{"type":"string","description":"Additional CSS classes for navigation link items","required":false},"bottomClassName":{"type":"string","description":"Additional CSS classes for the bottom section","required":false},"copyrightClassName":{"type":"string","description":"Additional CSS classes for the copyright section","required":false},"locationClassName":{"type":"string","description":"Additional CSS classes for the location section","required":false},"background":{"type":"string","description":"Section background variant","typeLabel":"SectionBackground","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"spacing":{"type":"object","description":"Section spacing variant","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern opacity (0-1)","required":false},"optixFlowConfig":{"type":"object","description":"Optional Optix Flow configuration for","fields":{"apiKey":{"type":"string","description":"API key for OptixFlow service","required":true},"compression":{"type":"number","description":"Compression level (0-100)","required":false}},"typeLabel":"OptixFlowConfig","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["footer","contact","card","email","phone","address","social","professional","agency"],"performance":{},"importantUsageNotes":"This footer centers on contact info — a heading, email, phone, address, and social links — alongside a flat navigation list. Only supply real contact data (email, phone, address, location) — DO NOT invent any contact data; omit fields the brand has not provided. Only include 'socialLinks' the brand actually has — do not invent social profiles. Supply 5-7 'navLinks' as a flat single-column list. Only set 'logo.src' if a real brand logo is in the media library. Follow the example props closely for this block."},{"id":"footer-background-card","name":"Footer Background Card","title":"Footer Background Card","category":"Footer","categorySlug":"footer","description":"A footer with background image and floating contact card. Features a full-width background image with a floating card containing profile image, personal message, CTA button, navigation links, and contact information. Ideal for creative professionals, agencies, portfolios, and businesses that want a visually striking footer with a personal touch.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290440/803ii0wnc443so1iezix0nhcr78f/footer-background-card-desktop.png","mobile":"https://cdn.ing/assets/i/r/290441/xb6qt4mygsnl5ppcxwtuem321ve5/footer-background-card-mobile.png"},"componentPath":"blocks/footers/footer-background-card.tsx","code":"import { FooterBackgroundCard } from \"@opensite/ui/blocks/footers/footer-background-card\";\nimport { imagePlaceholders, brandLogoPlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n return (\n \n );\n}","propsSchema":{"logo":{"type":"object","description":"Logo configuration","fields":{"url":{"type":"string","description":"Logo link URL","required":true},"src":{"type":"string","description":"Logo image source","required":true},"alt":{"type":"string","description":"Logo alt text","required":true},"title":{"type":"string","description":"Logo title/brand name","required":true}},"typeLabel":"FooterBackgroundCardLogo","required":false},"backgroundImage":{"type":"string","description":"Background image URL","required":false},"profileImage":{"type":"string","description":"Profile image URL","required":false},"tagline":{"type":"object","description":"Tagline text","typeLabel":"React.ReactNode","required":false},"personalMessage":{"type":"object","description":"Personal message text","typeLabel":"React.ReactNode","required":false},"ctaText":{"type":"object","description":"CTA button text","typeLabel":"React.ReactNode","required":false},"ctaUrl":{"type":"string","description":"CTA button URL","required":false},"contactTitle":{"type":"object","description":"Contact section title","typeLabel":"React.ReactNode","required":false},"contact":{"type":"object","description":"Contact information","fields":{"phone":{"type":"string","description":"Phone number","required":false},"email":{"type":"string","description":"Email address","required":false},"location":{"type":"string","description":"Location","required":false},"timezone":{"type":"string","description":"Timezone","required":false}},"typeLabel":"FooterBackgroundCardContact","required":false},"menuItems":{"type":"array","description":"Menu items","items":{"type":"object","description":"","fields":{"title":{"type":"string","description":"Menu section title","required":true},"links":{"type":"array","description":"Links in this section","items":{"type":"object","description":"","fields":{"text":{"type":"string","description":"Link text","required":true},"url":{"type":"string","description":"Link URL","required":true}},"typeLabel":"FooterBackgroundCardLink"},"typeLabel":"FooterBackgroundCardLink[]","required":true}},"typeLabel":"FooterBackgroundCardMenuItem"},"typeLabel":"FooterBackgroundCardMenuItem[]","required":false},"copyright":{"type":"string","description":"Brand/company name for the copyright notice","required":false},"bottomLinks":{"type":"array","description":"Bottom links","items":{"type":"object","description":"","fields":{"text":{"type":"string","description":"Link text","required":true},"url":{"type":"string","description":"Link URL","required":true}},"typeLabel":"FooterBackgroundCardLink"},"typeLabel":"FooterBackgroundCardLink[]","required":false},"logoWrapperClassName":{"type":"string","description":"Additional CSS classes for the logo wrapper","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo image","required":false},"className":{"type":"string","description":"Additional CSS classes for the section wrapper","required":false},"cardClassName":{"type":"string","description":"Additional CSS classes for the card wrapper","required":false},"gridClassName":{"type":"string","description":"Additional CSS classes for the grid layout","required":false},"profileSectionClassName":{"type":"string","description":"Additional CSS classes for the profile section","required":false},"profileImageClassName":{"type":"string","description":"Additional CSS classes for the profile image","required":false},"taglineClassName":{"type":"string","description":"Additional CSS classes for the tagline","required":false},"messageClassName":{"type":"string","description":"Additional CSS classes for the personal message","required":false},"ctaClassName":{"type":"string","description":"Additional CSS classes for the CTA button","required":false},"menuSectionClassName":{"type":"string","description":"Additional CSS classes for menu sections","required":false},"menuTitleClassName":{"type":"string","description":"Additional CSS classes for menu titles","required":false},"menuLinkClassName":{"type":"string","description":"Additional CSS classes for menu links","required":false},"contactSectionClassName":{"type":"string","description":"Additional CSS classes for the contact section","required":false},"contactTitleClassName":{"type":"string","description":"Additional CSS classes for the contact title","required":false},"contactItemClassName":{"type":"string","description":"Additional CSS classes for contact items","required":false},"bottomClassName":{"type":"string","description":"Additional CSS classes for the bottom section","required":false},"copyrightClassName":{"type":"string","description":"Additional CSS classes for the copyright section","required":false},"bottomLinksClassName":{"type":"string","description":"Additional CSS classes for bottom links","required":false},"background":{"type":"string","description":"Section background variant","typeLabel":"SectionBackground","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"spacing":{"type":"object","description":"Section spacing variant","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern opacity (0-1)","required":false},"optixFlowConfig":{"type":"object","description":"Optional Optix Flow configuration for","fields":{"apiKey":{"type":"string","description":"API key for OptixFlow service","required":true},"compression":{"type":"number","description":"Compression level (0-100)","required":false}},"typeLabel":"OptixFlowConfig","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["footer","background","image","card","creative","portfolio","agency","personal","visual"],"performance":{},"importantUsageNotes":"This footer renders as a full-bleed card with a background image, profile image, personal message, 3-column menu navigation, and contact info. Supply exactly 3 'menuItems' sections (the demo canonical count), each with 4-6 links. Only supply real 'contact' data points (email, phone, location, timezone) — DO NOT invent any contact data; omit fields the brand has not provided. Only set 'logo.src' if a real brand logo is in the media library. Only include 'bottomLinks' (privacy, terms, etc.) if those pages actually exist on the site. DO NOT USE this block if you do not have a real background image and a profile/representative image. Follow the example props closely for this block."},{"id":"footer-animated-social","name":"Footer Animated Social","title":"Footer Animated Social","category":"Footer","categorySlug":"footer","description":"An animated footer with Framer Motion effects and social links. Features smooth entrance animations, a prominent heading with CTA button, animated social links with hover effects, and a clean separator. Ideal for modern websites, portfolios, and creative projects that want to add visual polish and interactivity to their footer.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290442/h3ve2efruaehzhxkx4mvxtkgqe9v/footer-animated-social-desktop.png","mobile":"https://cdn.ing/assets/i/r/290443/nw3b24u13k87i3nd2jjlh5bmcb46/footer-animated-social-mobile.png"},"componentPath":"blocks/footers/footer-animated-social.tsx","code":"import { FooterAnimatedSocial } from \"@opensite/ui/blocks/footers/footer-animated-social\";\n\nexport default function Demo() {\n return (\n \n );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading text","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text","typeLabel":"React.ReactNode","required":false},"ctaText":{"type":"object","description":"CTA button text","typeLabel":"React.ReactNode","required":false},"ctaUrl":{"type":"string","description":"CTA button URL","required":false},"socialLinks":{"type":"array","description":"Social media links","items":{"type":"object","description":"","fields":{"href":{"type":"string","description":"Link URL - required. The platform icon is automatically determined from the URL.","required":true},"label":{"type":"string","description":"Optional accessible label for screen readers.\nIf not provided, the platform name is used.","required":false},"iconNameOverride":{"type":"string","description":"Optional icon name override in format: prefix/name (e.g., \"cib/instagram\")\nUse when you need a specific icon that differs from the auto-detected platform.","required":false}},"typeLabel":"FooterSocialLink"},"typeLabel":"FooterSocialLink[]","required":false},"copyright":{"type":"string","description":"Brand/company name for the copyright notice","required":false},"className":{"type":"string","description":"Additional CSS classes for the section wrapper","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the content wrapper","required":false},"layoutClassName":{"type":"string","description":"Additional CSS classes for the main layout","required":false},"leftColumnClassName":{"type":"string","description":"Additional CSS classes for the left column","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"ctaClassName":{"type":"string","description":"Additional CSS classes for the CTA button","required":false},"rightColumnClassName":{"type":"string","description":"Additional CSS classes for the right column","required":false},"socialLinksClassName":{"type":"string","description":"Additional CSS classes for the social links section","required":false},"socialLinkClassName":{"type":"string","description":"Additional CSS classes for social link items","required":false},"bottomClassName":{"type":"string","description":"Additional CSS classes for the bottom section","required":false},"separatorClassName":{"type":"string","description":"Additional CSS classes for the separator","required":false},"copyrightClassName":{"type":"string","description":"Additional CSS classes for the copyright section","required":false},"background":{"type":"string","description":"Section background variant","typeLabel":"SectionBackground","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"spacing":{"type":"object","description":"Section spacing variant","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern opacity (0-1)","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["footer","animated","motion","social","modern","interactive","creative","portfolio"],"performance":{},"importantUsageNotes":"This is a minimal animated footer with a large heading, description, a single CTA button, and social links. Supply only 'socialLinks' the brand actually has — do not invent social profiles. The 'ctaText' and 'ctaUrl' represent a single action (no 'actions' array). Keep 'heading' concise (under 60 characters) and 'description' under 200 characters to avoid layout overflow. Follow the example props closely for this block."},{"id":"footer-newsletter-minimal","name":"Footer Newsletter Minimal","title":"Footer Newsletter Minimal","category":"Footer","categorySlug":"footer","description":"A dark-themed minimal footer with newsletter and animated logo. Features a clean layout with main heading, support email, navigation columns, newsletter signup form, and a large animated brand logo. Ideal for modern SaaS products, creative agencies, and businesses that want a sophisticated, dark-themed footer with strong visual branding.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290444/r4sw0piidu898r4etokgu7fxkxsv/footer-newsletter-minimal-desktop.png","mobile":"https://cdn.ing/assets/i/r/290445/8eea8pmmzqmnof64aaaf4qgbaodb/footer-newsletter-minimal-mobile.png"},"componentPath":"blocks/footers/footer-newsletter-minimal.tsx","code":"import { FooterNewsletterMinimal } from \"@opensite/ui/blocks/footers/footer-newsletter-minimal\";\nimport { demoFormEngineApi } from \"@/lib/form-demo-data\";\nimport type { FormFieldConfig } from \"@opensite/ui\";\n\nconst formFields: FormFieldConfig[] = [\n {\n name: \"email\",\n type: \"email\",\n className: \"w-full\",\n placeholder: \"Enter your email\",\n required: true,\n columnSpan: 12,\n },\n];\n\nexport default function Demo() {\n return (\n \n );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading text","typeLabel":"React.ReactNode","required":false},"supportLabel":{"type":"object","description":"Support label text","typeLabel":"React.ReactNode","required":false},"supportEmail":{"type":"string","description":"Support email","required":false},"navLinks":{"type":"array","description":"Navigation links","items":{"type":"object","description":"","fields":{"label":{"type":"object","description":"Link label","typeLabel":"ReactNode","required":true},"href":{"type":"string","description":"Link URL","required":true},"icon":{"type":"object","description":"Optional icon","typeLabel":"ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes","required":false}},"typeLabel":"NavLinkItem"},"typeLabel":"NavLinkItem[]","required":false},"socialLinks":{"type":"array","description":"Social links","items":{"type":"object","description":"","fields":{"href":{"type":"string","description":"Link URL - required. The platform icon is automatically determined from the URL.","required":true},"label":{"type":"string","description":"Optional accessible label for screen readers.\nIf not provided, the platform name is used.","required":false},"iconNameOverride":{"type":"string","description":"Optional icon name override in format: prefix/name (e.g., \"cib/instagram\")\nUse when you need a specific icon that differs from the auto-detected platform.","required":false}},"typeLabel":"FooterSocialLink"},"typeLabel":"FooterSocialLink[]","required":false},"footerLinks":{"type":"array","description":"Footer links (privacy, terms)","items":{"type":"object","description":"","fields":{"label":{"type":"string","description":"Link label","required":true},"href":{"type":"string","description":"Link URL","required":true}},"typeLabel":"FooterNewsletterMinimalFooterLink"},"typeLabel":"FooterNewsletterMinimalFooterLink[]","required":false},"newsletterLabel":{"type":"object","description":"Newsletter label","typeLabel":"React.ReactNode","required":false},"brandText":{"type":"object","description":"Brand text displayed at the bottom","typeLabel":"React.ReactNode","required":false},"copyright":{"type":"string","description":"Brand/company name for the copyright notice","required":false},"location":{"type":"object","description":"Location text","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section wrapper","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the content wrapper","required":false},"topSectionClassName":{"type":"string","description":"Additional CSS classes for the top section","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"supportClassName":{"type":"string","description":"Additional CSS classes for the support section","required":false},"navGridClassName":{"type":"string","description":"Additional CSS classes for the nav/social grid","required":false},"navLinksClassName":{"type":"string","description":"Additional CSS classes for the nav links list","required":false},"navLinkClassName":{"type":"string","description":"Additional CSS classes for nav link items","required":false},"socialLinksClassName":{"type":"string","description":"Additional CSS classes for the social links list","required":false},"socialLinkClassName":{"type":"string","description":"Additional CSS classes for social link items","required":false},"newsletterSectionClassName":{"type":"string","description":"Additional CSS classes for the newsletter section","required":false},"newsletterLabelClassName":{"type":"string","description":"Additional CSS classes for the newsletter heading styles","required":false},"newsletterFormClassName":{"type":"string","description":"Additional CSS classes for the newsletter form","required":false},"bottomGridClassName":{"type":"string","description":"Additional CSS classes for the location/footer links section","required":false},"locationClassName":{"type":"string","description":"Additional CSS classes for the location text","required":false},"footerLinksClassName":{"type":"string","description":"Additional CSS classes for the footer links list","required":false},"footerLinkClassName":{"type":"string","description":"Additional CSS classes for footer link items","required":false},"brandSectionClassName":{"type":"string","description":"Additional CSS classes for the brand section","required":false},"brandTextClassName":{"type":"string","description":"Additional CSS classes for the brand text","required":false},"copyrightClassName":{"type":"string","description":"Additional CSS classes for the copyright section","required":false},"background":{"type":"string","description":"Section background variant","typeLabel":"SectionBackground","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"spacing":{"type":"object","description":"Section spacing variant","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern opacity (0-1)","required":false},"optixFlowConfig":{"type":"object","description":"Optional Optix Flow configuration for image optimization","fields":{"apiKey":{"type":"string","description":"API key for OptixFlow service","required":true},"compression":{"type":"number","description":"Compression level (0-100)","required":false}},"typeLabel":"OptixFlowConfig","required":false},"formEngineSetup":{"type":"object","description":"Full form engine setup and props","typeLabel":"FormEngineProps","required":false},"buttonAction":{"type":"object","description":"Submit button configuration","fields":{"variant":{"type":"string","description":"","typeLabel":"\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\"","required":false},"size":{"type":"string","description":"","typeLabel":"\"default\" | \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\" | \"icon-lg\"","required":false},"label":{"type":"object","description":"Button/link label text or ReactNode","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Icon to display (typically before label)","typeLabel":"ReactNode","required":false},"iconAfter":{"type":"object","description":"Icon to display after the label","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"URL for link behavior","required":false},"onClick":{"type":"object","description":"Click handler for button behavior","typeLabel":"MouseEventHandler","required":false},"className":{"type":"string","description":"Additional CSS classes for the action","required":false},"children":{"type":"object","description":"Custom children (overrides label + icon rendering)","typeLabel":"ReactNode","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"asButton":{"type":"boolean","description":"Render as a button element instead of an anchor/link","required":false}},"typeLabel":"ActionConfig","required":false},"formSlot":{"type":"object","description":"Custom slot for the form (overrides form props)","typeLabel":"React.ReactNode","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["footer","newsletter","minimal","dark","animated","logo","saas","sophisticated"],"performance":{},"importantUsageNotes":"This is a minimal creative-studio footer with a large heading, support email, flat nav links, social links, a newsletter form, and legal footer links. Supply 4-6 'navLinks' as a single flat list. Only include 'socialLinks' the brand actually has — do not invent social profiles. Only supply real 'supportEmail' contact data — DO NOT invent any contact data. The newsletter uses 'formEngineSetup' — follow the form implementation requirements properly (correct field types, labels, validation, and submit handling). Only include 'footerLinks' (privacy, terms, etc.) if those pages actually exist on the site. Follow the example props closely for this block."},{"id":"footer-cta-social","name":"Footer CTA Social","title":"Footer CTA Social","category":"Footer","categorySlug":"footer","description":"A centered CTA footer with decorative lines and social icons. Features a centered layout with decorative gradient lines, pre-heading text, large heading, description, prominent CTA button, social media icons, and contact email. Ideal for landing pages, marketing sites, and businesses that want a conversion-focused footer with strong visual appeal.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290468/j7nhm7jpjycot4wyrqwgs5ruxjbm/footer-cta-social-desktop.png","mobile":"https://cdn.ing/assets/i/r/290469/ohjtl534cg41bgbeoxpnr10stw0s/footer-cta-social-mobile.png"},"componentPath":"blocks/footers/footer-cta-social.tsx","code":"import { FooterCtaSocial } from \"@opensite/ui/blocks/footers/footer-cta-social\";\n\nexport default function Demo() {\n return (\n \n );\n}","propsSchema":{"preHeading":{"type":"object","description":"Pre-heading text","typeLabel":"React.ReactNode","required":false},"heading":{"type":"object","description":"Main heading text","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text","typeLabel":"React.ReactNode","required":false},"buttonText":{"type":"object","description":"CTA button text","typeLabel":"React.ReactNode","required":false},"buttonUrl":{"type":"string","description":"CTA button URL","required":false},"email":{"type":"string","description":"Contact email","required":false},"socialLinks":{"type":"array","description":"Social links","items":{"type":"object","description":"","fields":{"href":{"type":"string","description":"Link URL - required. The platform icon is automatically determined from the URL.","required":true},"label":{"type":"string","description":"Optional accessible label for screen readers.\nIf not provided, the platform name is used.","required":false},"iconNameOverride":{"type":"string","description":"Optional icon name override in format: prefix/name (e.g., \"cib/instagram\")\nUse when you need a specific icon that differs from the auto-detected platform.","required":false}},"typeLabel":"FooterSocialLink"},"typeLabel":"FooterSocialLink[]","required":false},"copyright":{"type":"string","description":"Brand/company name for the copyright notice","required":false},"className":{"type":"string","description":"Additional CSS classes for the section wrapper","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the content wrapper","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the main content container","required":false},"preHeadingWrapperClassName":{"type":"string","description":"Additional CSS classes for the pre-heading wrapper","required":false},"decorativeLineClassName":{"type":"string","description":"Additional CSS classes for the decorative lines","required":false},"preHeadingClassName":{"type":"string","description":"Additional CSS classes for the pre-heading text","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"buttonClassName":{"type":"string","description":"Additional CSS classes for the CTA button","required":false},"socialLinksClassName":{"type":"string","description":"Additional CSS classes for the social links section","required":false},"socialLinkClassName":{"type":"string","description":"Additional CSS classes for social link items","required":false},"emailClassName":{"type":"string","description":"Additional CSS classes for the email section","required":false},"bottomClassName":{"type":"string","description":"Additional CSS classes for the bottom section","required":false},"copyrightClassName":{"type":"string","description":"Additional CSS classes for the copyright","required":false},"background":{"type":"string","description":"Section background variant","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Section spacing variant","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern opacity (0-1)","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["footer","cta","social","centered","conversion","landing","marketing","decorative"],"performance":{},"importantUsageNotes":"This is a minimal CTA footer with a pre-heading, heading, description, a single CTA button, a contact email, and social links. Only supply real contact data (email) — DO NOT invent any contact data. Only include 'socialLinks' the brand actually has — do not invent social profiles. There is no logo prop or link columns in this block — use it for simple brand closing statements. Follow the example props closely for this block."},{"id":"footer-nav-social","name":"Footer Nav Social","title":"Footer Nav Social","category":"Footer","categorySlug":"footer","description":"A comprehensive footer with logo, navigation, newsletter, and social links. Features a logo with navigation sections, a newsletter signup form with heading and description, social media icons, and legal links. Ideal for SaaS products, corporate websites, and businesses that want a complete footer with all essential elements organized in a clean, professional layout.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290470/l9kx50ohh2pfdigy8pkx5wd5cxuj/footer-nav-social-desktop.png","mobile":"https://cdn.ing/assets/i/r/290471/mb2xbgcsvteqlqt4nf984gzy1dam/footer-nav-social-mobile.png"},"componentPath":"blocks/footers/footer-nav-social.tsx","code":"import { FooterNavSocial } from \"@opensite/ui/blocks/footers/footer-nav-social\";\nimport { brandLogoPlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n return (\n \n );\n}","propsSchema":{"logo":{"type":"object","description":"Logo configuration","fields":{"url":{"type":"string","description":"Logo link URL","required":true},"src":{"type":"string","description":"Logo image source","required":true},"alt":{"type":"string","description":"Logo alt text","required":true},"title":{"type":"string","description":"Logo title/brand name","required":true}},"typeLabel":"FooterNavSocialLogo","required":false},"sections":{"type":"array","description":"Navigation sections","items":{"type":"object","description":"","fields":{"title":{"type":"string","description":"Section title","required":true},"links":{"type":"array","description":"Links in this section","items":{"type":"object","description":"","fields":{"name":{"type":"string","description":"Link name/label","required":true},"href":{"type":"string","description":"Link URL","required":true}},"typeLabel":"FooterNavSocialNavLink"},"typeLabel":"FooterNavSocialNavLink[]","required":true}},"typeLabel":"FooterNavSocialSection"},"typeLabel":"FooterNavSocialSection[]","required":false},"socialLinks":{"type":"array","description":"Social media links","items":{"type":"object","description":"","fields":{"href":{"type":"string","description":"Link URL - required. The platform icon is automatically determined from the URL.","required":true},"label":{"type":"string","description":"Optional accessible label for screen readers.\nIf not provided, the platform name is used.","required":false},"iconNameOverride":{"type":"string","description":"Optional icon name override in format: prefix/name (e.g., \"cib/instagram\")\nUse when you need a specific icon that differs from the auto-detected platform.","required":false}},"typeLabel":"FooterSocialLink"},"typeLabel":"FooterSocialLink[]","required":false},"newsletterHeading":{"type":"object","description":"Newsletter heading","typeLabel":"React.ReactNode","required":false},"newsletterDescription":{"type":"object","description":"Newsletter description","typeLabel":"React.ReactNode","required":false},"newsletterPlaceholder":{"type":"string","description":"Newsletter placeholder","required":false},"newsletterButtonText":{"type":"object","description":"Newsletter button text","typeLabel":"React.ReactNode","required":false},"socialTitle":{"type":"object","description":"Social section title","typeLabel":"React.ReactNode","required":false},"copyright":{"type":"string","description":"Brand/company name for the copyright notice","required":false},"legalLinks":{"type":"array","description":"Legal links","items":{"type":"object","description":"","fields":{"name":{"type":"string","description":"Link name/label","required":true},"href":{"type":"string","description":"Link URL","required":true}},"typeLabel":"FooterNavSocialNavLink"},"typeLabel":"FooterNavSocialNavLink[]","required":false},"className":{"type":"string","description":"Additional CSS classes for the section wrapper","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the content wrapper","required":false},"gridClassName":{"type":"string","description":"Additional CSS classes for the main grid","required":false},"leftColumnClassName":{"type":"string","description":"Additional CSS classes for the left column","required":false},"logoWrapperClassName":{"type":"string","description":"Additional CSS classes for the logo wrapper","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo image","required":false},"navGridClassName":{"type":"string","description":"Additional CSS classes for the navigation grid","required":false},"navSectionClassName":{"type":"string","description":"Additional CSS classes for navigation sections","required":false},"navTitleClassName":{"type":"string","description":"Additional CSS classes for navigation section titles","required":false},"navLinksClassName":{"type":"string","description":"Additional CSS classes for navigation link lists","required":false},"navLinkClassName":{"type":"string","description":"Additional CSS classes for navigation link items","required":false},"rightColumnClassName":{"type":"string","description":"Additional CSS classes for the right column","required":false},"formConfig":{"type":"object","description":"Config for submitting forms to server","fields":{"token":{"type":"string","description":"","required":true}},"typeLabel":"{ token: string }","required":false},"newsletterClassName":{"type":"string","description":"Additional CSS classes for the newsletter section","required":false},"newsletterHeadingClassName":{"type":"string","description":"Additional CSS classes for the newsletter heading","required":false},"newsletterDescriptionClassName":{"type":"string","description":"Additional CSS classes for the newsletter description","required":false},"newsletterFormClassName":{"type":"string","description":"Additional CSS classes for the newsletter form","required":false},"socialSectionClassName":{"type":"string","description":"Additional CSS classes for the social section","required":false},"socialTitleClassName":{"type":"string","description":"Additional CSS classes for the social title","required":false},"socialLinksClassName":{"type":"string","description":"Additional CSS classes for the social links list","required":false},"socialLinkClassName":{"type":"string","description":"Additional CSS classes for social link items","required":false},"bottomClassName":{"type":"string","description":"Additional CSS classes for the bottom section","required":false},"copyrightClassName":{"type":"string","description":"Additional CSS classes for the copyright section","required":false},"legalLinksClassName":{"type":"string","description":"Additional CSS classes for legal links","required":false},"legalLinkClassName":{"type":"string","description":"Additional CSS classes for legal link items","required":false},"background":{"type":"string","description":"Section background variant","typeLabel":"SectionBackground","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"spacing":{"type":"object","description":"Section spacing variant","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern opacity (0-1)","required":false},"optixFlowConfig":{"type":"object","description":"Optional Optix Flow configuration for","fields":{"apiKey":{"type":"string","description":"API key for OptixFlow service","required":true},"compression":{"type":"number","description":"Compression level (0-100)","required":false}},"typeLabel":"OptixFlowConfig","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["footer","navigation","social","newsletter","comprehensive","professional","corporate","complete"],"performance":{},"importantUsageNotes":"This footer has a logo, 3-column navigation, social links, and an inline newsletter form. Provide exactly 3 'sections', each with 4-6 links. Only include 'socialLinks' the brand actually has — do not invent social profiles. The newsletter is a simple inline form controlled by 'newsletterHeading', 'newsletterDescription', 'newsletterPlaceholder', and 'newsletterButtonText' props (not formEngineSetup). Only set 'logo.src' if a real brand logo is in the media library. Only include 'legalLinks' (privacy, terms, etc.) if those pages actually exist on the site. Follow the example props closely for this block."},{"id":"footer-newsletter-contact","name":"Footer Newsletter Contact","title":"Footer Newsletter Contact","category":"Footer","categorySlug":"footer","description":"A comprehensive footer with newsletter signup, navigation links, contact details, and social media icons. Features a four-column grid layout with newsletter form, link sections, and contact info with icons. Best for e-commerce sites, business websites, and service-based companies.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290472/fzxskcx1nd55yfkf667u2wux2qcp/footer-newsletter-contact-desktop.png","mobile":"https://cdn.ing/assets/i/r/290473/cqj4ii000z1lp3k0kds8ah1fhsk6/footer-newsletter-contact-mobile.png"},"componentPath":"blocks/footers/footer-newsletter-contact.tsx","code":"import { FooterNewsletterContact } from \"@opensite/ui/blocks/footers/footer-newsletter-contact\";\nimport { brandLogoPlaceholders } from \"@/lib/media\";\nimport { demoFormEngineApi } from \"@/lib/form-demo-data\";\nimport type { FormFieldConfig } from \"@opensite/ui\";\n\nconst formFields: FormFieldConfig[] = [\n {\n name: \"email\",\n type: \"email\",\n className: \"w-full\",\n placeholder: \"Enter your email\",\n required: true,\n columnSpan: 12,\n },\n];\n\nexport default function Demo() {\n return (\n \n
123 Fashion Avenue
\n
New York, NY 10001
\n \n ),\n link: \"https://maps.app.goo.gl/gJrmVDMHcvEFkr4E7\",\n },\n {\n icon: \"lucide/clock\",\n label: (\n
\n
Mon-Fri: 9AM-8PM EST
\n
Sat-Sun: 10AM-6PM EST
\n
\n Happy Hour\n 4-6 PM Daily\n
\n
\n ),\n },\n ]}\n socialLinks={[\n {\n href: \"https://linkedin.com/company/innovatetech\",\n label: \"Connect with InnovateTech on LinkedIn\",\n },\n {\n href: \"https://twitter.com/innovatetech\",\n label: \"Follow InnovateTech on Twitter\",\n },\n {\n href: \"https://facebook.com/innovatetech\",\n label: \"Like InnovateTech on Facebook\",\n },\n {\n href: \"https://instagram.com/innovatetech\",\n label: \"Follow InnovateTech on Instagram\",\n },\n {\n href: \"https://youtube.com/@innovatetech\",\n label: \"Subscribe to InnovateTech on YouTube\",\n },\n ]}\n logo={{\n light: brandLogoPlaceholders.black[2],\n dark: brandLogoPlaceholders.white[2],\n url: \"/\",\n }}\n copyright=\"Fashion Store.\"\n background=\"muted\"\n spacing=\"lg\"\n />\n );\n}","propsSchema":{"newsletterTitle":{"type":"string","description":"Newsletter section title","required":false},"newsletterDescription":{"type":"string","description":"Newsletter description","required":false},"footerLinks":{"type":"array","description":"Footer link sections","items":{"type":"object","description":"","fields":{"title":{"type":"string","description":"Section title","required":true},"items":{"type":"array","description":"Array of links in this section","items":{"type":"object","description":"","fields":{"text":{"type":"string","description":"Link text","required":true},"link":{"type":"string","description":"Link URL","required":true}},"typeLabel":"FooterNewsletterContactLink"},"typeLabel":"FooterNewsletterContactLink[]","required":true}},"typeLabel":"FooterNewsletterContactSection"},"typeLabel":"FooterNewsletterContactSection[]","required":false},"contactDetails":{"type":"array","description":"Contact details","items":{"type":"object","description":"","fields":{"icon":{"type":"string","description":"Icon name in format: prefix/name","required":true},"label":{"type":"object","description":"Display text","typeLabel":"React.ReactNode","required":true},"type":{"type":"string","description":"Link type: \"none\" | \"email\" | \"phone\"","typeLabel":"\"none\" | \"email\" | \"phone\"","required":false},"link":{"type":"string","description":"Link value (email address or phone number)","required":false}},"typeLabel":"FooterNewsletterContactDetail"},"typeLabel":"FooterNewsletterContactDetail[]","required":false},"socialLinks":{"type":"array","description":"Social media links","items":{"type":"object","description":"","fields":{"href":{"type":"string","description":"Link URL - required. The platform icon is automatically determined from the URL.","required":true},"label":{"type":"string","description":"Optional accessible label for screen readers.\nIf not provided, the platform name is used.","required":false},"iconNameOverride":{"type":"string","description":"Optional icon name override in format: prefix/name (e.g., \"cib/instagram\")\nUse when you need a specific icon that differs from the auto-detected platform.","required":false}},"typeLabel":"FooterSocialLink"},"typeLabel":"FooterSocialLink[]","required":false},"logo":{"type":"object","description":"Logo configuration","fields":{"light":{"type":"string","description":"","required":true},"dark":{"type":"string","description":"","required":true},"url":{"type":"string","description":"","required":true}},"typeLabel":"{ light: string; dark: string; url: string; }","required":false},"copyright":{"type":"string","description":"Copyright text","required":false},"className":{"type":"string","description":"Additional CSS classes","required":false},"background":{"type":"string","description":"Section background variant","typeLabel":"SectionBackground","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"spacing":{"type":"object","description":"Section spacing variant","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern opacity (0-1)","required":false},"optixFlowConfig":{"type":"object","description":"Optional Optix Flow configuration for image optimization","fields":{"apiKey":{"type":"string","description":"","required":true},"compression":{"type":"number","description":"","required":false}},"typeLabel":"{ apiKey: string; compression?: number; }","required":false},"formEngineSetup":{"type":"object","description":"Full form engine setup and props","typeLabel":"FormEngineProps","required":false},"buttonAction":{"type":"object","description":"Submit button configuration","fields":{"variant":{"type":"string","description":"","typeLabel":"\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\"","required":false},"size":{"type":"string","description":"","typeLabel":"\"default\" | \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\" | \"icon-lg\"","required":false},"label":{"type":"object","description":"Button/link label text or ReactNode","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Icon to display (typically before label)","typeLabel":"ReactNode","required":false},"iconAfter":{"type":"object","description":"Icon to display after the label","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"URL for link behavior","required":false},"onClick":{"type":"object","description":"Click handler for button behavior","typeLabel":"MouseEventHandler","required":false},"className":{"type":"string","description":"Additional CSS classes for the action","required":false},"children":{"type":"object","description":"Custom children (overrides label + icon rendering)","typeLabel":"ReactNode","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"asButton":{"type":"boolean","description":"Render as a button element instead of an anchor/link","required":false}},"typeLabel":"ActionConfig","required":false},"formSlot":{"type":"object","description":"Custom slot for the form (overrides form props)","typeLabel":"React.ReactNode","required":false},"newsletterFormClassName":{"type":"string","description":"Additional CSS classes for the newsletter form","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["footer","newsletter","contact","social","links","ecommerce","business","navigation"],"performance":{},"importantUsageNotes":"This footer combines a newsletter form, 2-column navigation, a contact details panel, and social links. Provide exactly 2 'footerLinks' sections, each with 4-6 links. Provide 3-4 'contactDetails' items using real contact data (phone, email, address, hours) — DO NOT invent any contact data; omit fields the brand has not provided. Only include 'socialLinks' the brand actually has — do not invent social profiles. The newsletter uses 'formEngineSetup' — follow the form implementation requirements properly (correct field types, labels, validation, and submit handling). Only set 'logo.light'/'logo.dark' if a real brand logo is in the media library. Follow the example props closely for this block."},{"id":"footer-split-image-accordion","name":"Footer Split Image Accordion","title":"Footer Split Image Accordion","category":"Footer","categorySlug":"footer","description":"A split-layout footer with large image, newsletter signup powered by FormEngine, accordion navigation, and payment methods. Features a two-column split with image on left, content on right, and responsive accordion links for mobile. Uses @page-speed/forms/integration for form handling. Best for e-commerce sites, fashion brands, and lifestyle businesses.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290857/h8mkddenw26oqvy0luqdx8ebdvzs/cleanshot-2026-02-25-at-09-32-12.png","mobile":"https://cdn.ing/assets/i/r/290856/9tay8ecufqlkkrodysn5ebszvddq/cleanshot-2026-02-25-at-09-32-43.png"},"componentPath":"blocks/footers/footer-split-image-accordion.tsx","code":"import { FooterSplitImageAccordion } from \"@opensite/ui/blocks/footers/footer-split-image-accordion\";\nimport { imagePlaceholders, brandLogoPlaceholders } from \"@/lib/media\";\nimport { demoFormEngineApi } from \"@/lib/form-demo-data\";\nimport type { FormFieldConfig } from \"@opensite/ui\";\n\nconst formFields: FormFieldConfig[] = [\n {\n name: \"email\",\n type: \"email\",\n className: \"w-full\",\n placeholder: \"Enter your email\",\n required: true,\n columnSpan: 12,\n },\n];\n\nexport default function Demo() {\n return (\n \n );\n}","propsSchema":{"newsletterTitle":{"type":"object","description":"Newsletter title","typeLabel":"React.ReactNode","required":false},"footerLinks":{"type":"array","description":"Footer link sections","items":{"type":"object","description":"","fields":{"title":{"type":"string","description":"Section title","required":true},"id":{"type":"string","description":"Unique identifier","required":true},"items":{"type":"array","description":"Array of links in this section","items":{"type":"object","description":"","fields":{"text":{"type":"string","description":"Link text","required":true},"link":{"type":"string","description":"Link URL","required":false}},"typeLabel":"FooterSplitImageAccordionLink"},"typeLabel":"FooterSplitImageAccordionLink[]","required":true}},"typeLabel":"FooterSplitImageAccordionSection"},"typeLabel":"FooterSplitImageAccordionSection[]","required":false},"socialLinks":{"type":"array","description":"Social media links","items":{"type":"object","description":"","fields":{"href":{"type":"string","description":"Link URL - required. The platform icon is automatically determined from the URL.","required":true},"label":{"type":"string","description":"Optional accessible label for screen readers.\nIf not provided, the platform name is used.","required":false},"iconNameOverride":{"type":"string","description":"Optional icon name override in format: prefix/name (e.g., \"cib/instagram\")\nUse when you need a specific icon that differs from the auto-detected platform.","required":false}},"typeLabel":"FooterSocialLink"},"typeLabel":"FooterSocialLink[]","required":false},"paymentPlatforms":{"type":"array","description":"Payment platform names to display icons for","items":{"type":"string","description":"","typeLabel":"PaymentPlatformName"},"typeLabel":"PaymentPlatformName[]","required":false},"submenuLinks":{"type":"array","description":"Submenu links","items":{"type":"object","description":"","fields":{"text":{"type":"string","description":"Link text","required":true},"link":{"type":"string","description":"Link URL","required":false}},"typeLabel":"FooterSplitImageAccordionLink"},"typeLabel":"FooterSplitImageAccordionLink[]","required":false},"footerData":{"type":"object","description":"Footer data configuration","fields":{"image":{"type":"object","description":"Hero image configuration","fields":{"src":{"type":"string","description":"","required":true},"alt":{"type":"string","description":"","required":false}},"typeLabel":"{ src: string; alt?: string; }","required":true},"logo":{"type":"object","description":"Logo configuration with light/dark variants","fields":{"src":{"type":"string","description":"","required":true},"url":{"type":"string","description":"Logo link URL","required":false},"alt":{"type":"string","description":"Brand title","required":false}},"typeLabel":"{ src: string; /** Logo link URL */ url?: string; /** Brand title */ alt?: string; }","required":false},"heading":{"type":"string","description":"Footer heading","required":false},"description":{"type":"string","description":"Brand description","required":false}},"typeLabel":"FooterSplitImageAccordionData","required":false},"copyright":{"type":"string","description":"Brand/company name for the copyright notice","required":false},"background":{"type":"string","description":"Section background variant","typeLabel":"SectionBackground","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"spacing":{"type":"object","description":"Section spacing variant","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern opacity (0-1)","required":false},"className":{"type":"string","description":"Additional CSS classes for the footer wrapper","required":false},"gridClassName":{"type":"string","description":"Additional CSS classes for the grid layout","required":false},"imageColumnClassName":{"type":"string","description":"Additional CSS classes for the image column","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for the hero image","required":false},"contentColumnClassName":{"type":"string","description":"Additional CSS classes for the content column","required":false},"newsletterSectionClassName":{"type":"string","description":"Additional CSS classes for the newsletter section","required":false},"newsletterTitleClassName":{"type":"string","description":"Additional CSS classes for the newsletter title","required":false},"newsletterFormClassName":{"type":"string","description":"Additional CSS classes for the newsletter form","required":false},"socialLinksClassName":{"type":"string","description":"Additional CSS classes for the social links","required":false},"brandSectionClassName":{"type":"string","description":"Additional CSS classes for the brand section","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo","required":false},"brandTitleClassName":{"type":"string","description":"Additional CSS classes for the brand title","required":false},"brandDescriptionClassName":{"type":"string","description":"Additional CSS classes for the brand description","required":false},"linksGridClassName":{"type":"string","description":"Additional CSS classes for the links grid section","required":false},"paymentMethodsClassName":{"type":"string","description":"Additional CSS classes for payment methods","required":false},"bottomClassName":{"type":"string","description":"Additional CSS classes for the bottom section","required":false},"copyrightClassName":{"type":"string","description":"Additional CSS classes for the copyright","required":false},"submenuLinksClassName":{"type":"string","description":"Additional CSS classes for submenu links","required":false},"optixFlowConfig":{"type":"object","description":"Optional Optix Flow configuration for image optimization","fields":{"apiKey":{"type":"string","description":"API key for OptixFlow service","required":true},"compression":{"type":"number","description":"Compression level (0-100)","required":false}},"typeLabel":"OptixFlowConfig","required":false},"formEngineSetup":{"type":"object","description":"Full form engine setup and props","typeLabel":"FormEngineProps","required":false},"buttonAction":{"type":"object","description":"Submit button configuration","fields":{"variant":{"type":"string","description":"","typeLabel":"\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\"","required":false},"size":{"type":"string","description":"","typeLabel":"\"default\" | \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\" | \"icon-lg\"","required":false},"label":{"type":"object","description":"Button/link label text or ReactNode","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Icon to display (typically before label)","typeLabel":"ReactNode","required":false},"iconAfter":{"type":"object","description":"Icon to display after the label","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"URL for link behavior","required":false},"onClick":{"type":"object","description":"Click handler for button behavior","typeLabel":"MouseEventHandler","required":false},"className":{"type":"string","description":"Additional CSS classes for the action","required":false},"children":{"type":"object","description":"Custom children (overrides label + icon rendering)","typeLabel":"ReactNode","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"asButton":{"type":"boolean","description":"Render as a button element instead of an anchor/link","required":false}},"typeLabel":"ActionConfig","required":false},"formSlot":{"type":"object","description":"Custom slot for the form (overrides form props)","typeLabel":"React.ReactNode","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["footer","split","image","accordion","newsletter","payment","ecommerce","fashion"],"performance":{},"importantUsageNotes":"This footer has a split layout with a brand image/logo panel on one side and 3 accordion link sections + social links on the other, plus a newsletter form and payment icons. Provide exactly 3 'footerLinks' accordion sections, each with 4-6 links. Only include 'socialLinks' the brand actually has — do not invent social profiles. The newsletter uses 'formEngineSetup' — follow the form implementation requirements properly (correct field types, labels, validation, and submit handling). Only set 'footerData.logo.src' if a real brand logo is in the media library. DO NOT USE this block if you do not have a real image for 'footerData.image.src'. Only include 'submenuLinks' (privacy, terms, etc.) if those pages actually exist on the site. Follow the example props closely for this block."},{"id":"footer-accordion-social","name":"Footer Accordion Social","title":"Footer Accordion Social","category":"Footer","categorySlug":"footer","description":"A footer with newsletter, accordion navigation links, and social media icons with responsive accordion behavior. Features newsletter section at top, accordion links in grid, and social icons. Accordion is collapsed on mobile and expanded on desktop. Best for e-commerce sites, retail brands, and content-heavy websites.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290476/0g83pjjvugnp2ygwvaj7r0j5tldf/footer-accordion-social-desktop.png","mobile":"https://cdn.ing/assets/i/r/290477/3x1po3d4yh32stkpj9yab18mxhri/footer-accordion-social-mobile.png"},"componentPath":"blocks/footers/footer-accordion-social.tsx","code":"import { FooterAccordionSocial } from \"@opensite/ui/blocks/footers/footer-accordion-social\";\nimport { brandLogoPlaceholders } from \"@/lib/media\";\nimport { usePlatformFromUrl } from \"@opensite/hooks/usePlatformFromUrl\";\nimport { demoFormEngineApi } from \"@/lib/form-demo-data\";\nimport type { FormFieldConfig } from \"@opensite/ui\";\n\nconst formFields: FormFieldConfig[] = [\n {\n name: \"email\",\n type: \"email\",\n className: \"w-full\",\n placeholder: \"Enter your email\",\n required: true,\n columnSpan: 12,\n },\n];\n\nexport default function Demo() {\n const platform = usePlatformFromUrl(\"https://www.youtube.com/@iamthedelo\");\n\n return (\n \n );\n}","propsSchema":{"newsletterTitle":{"type":"string","description":"Newsletter title","required":false},"newsletterDescription":{"type":"string","description":"Newsletter description","required":false},"footerLinks":{"type":"array","description":"Footer link sections","items":{"type":"object","description":"","fields":{"title":{"type":"string","description":"Section title","required":true},"id":{"type":"string","description":"Unique identifier","required":true},"items":{"type":"array","description":"Array of links in this section","items":{"type":"object","description":"","fields":{"text":{"type":"string","description":"Link text","required":true},"href":{"type":"string","description":"Link URL","required":true}},"typeLabel":"FooterAccordionSocialNavLink"},"typeLabel":"FooterAccordionSocialNavLink[]","required":true}},"typeLabel":"FooterAccordionSocialSection"},"typeLabel":"FooterAccordionSocialSection[]","required":false},"socialLinks":{"type":"array","description":"Social media links - only href is required, platform icon is auto-detected","items":{"type":"object","description":"","fields":{"href":{"type":"string","description":"Link URL - required. The platform icon is automatically determined from the URL.","required":true},"label":{"type":"string","description":"Optional accessible label for screen readers.\nIf not provided, the platform name is used.","required":false},"iconNameOverride":{"type":"string","description":"Optional icon name override in format: prefix/name (e.g., \"cib/instagram\")\nUse when you need a specific icon that differs from the auto-detected platform.","required":false}},"typeLabel":"FooterSocialLink"},"typeLabel":"FooterSocialLink[]","required":false},"logo":{"type":"object","description":"Logo configuration","fields":{"src":{"type":"string","description":"","required":true},"url":{"type":"string","description":"Logo link URL","required":false},"alt":{"type":"string","description":"Brand title","required":false}},"typeLabel":"{ src: string; /** Logo link URL */ url?: string; /** Brand title */ alt?: string; }","required":false},"copyright":{"type":"string","description":"Brand/company name for the copyright notice","required":false},"className":{"type":"string","description":"Additional CSS classes","required":false},"optixFlowConfig":{"type":"object","description":"Optional Optix Flow configuration for image optimization","fields":{"apiKey":{"type":"string","description":"","required":true},"compression":{"type":"number","description":"","required":false}},"typeLabel":"{ apiKey: string; compression?: number; }","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"patternClassName":{"type":"string","description":"Additional CSS classes for the pattern overlay","required":false},"formEngineSetup":{"type":"object","description":"Full form engine setup and props","typeLabel":"FormEngineProps","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["footer","accordion","social","newsletter","responsive","ecommerce","retail","navigation"],"performance":{},"importantUsageNotes":"This footer features a newsletter form and collapsible accordion link sections. Provide exactly 3 'footerLinks' sections (the demo canonical count), each with 4-6 links per section. Only include 'socialLinks' the brand actually has — do not invent social profiles. The newsletter form uses 'formEngineSetup' — follow the form implementation requirements properly (correct field types, labels, validation, and submit handling). Only set 'logo.src' if a real brand logo is in the media library; otherwise rely on the brand text/alt. Follow the example props closely for this block."},{"id":"footer-info-cards-accordion","name":"Footer Info Cards Accordion","title":"Footer Info Cards Accordion","category":"Footer","categorySlug":"footer","description":"A comprehensive footer with info cards, newsletter, accordion navigation, payment methods, and social links. Features hero image with newsletter, contact info cards grid, accordion links, and language selector. Best for e-commerce sites, service businesses, and customer-focused brands.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290478/40h639xj8aez6xh97ezrg6f1glxi/footer-info-cards-accordion-desktop.png","mobile":"https://cdn.ing/assets/i/r/290479/bbg7ijdl4pcam8fybob759irdb4t/footer-info-cards-accordion-mobile.png"},"componentPath":"blocks/footers/footer-info-cards-accordion.tsx","code":"import { FooterInfoCardsAccordion } from \"@opensite/ui/blocks/footers/footer-info-cards-accordion\";\nimport { imagePlaceholders, brandLogoPlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n return (\n \n );\n}","propsSchema":{"newsletterTitle":{"type":"object","description":"Newsletter title","typeLabel":"React.ReactNode","required":false},"newsletterDescription":{"type":"object","description":"Newsletter description","typeLabel":"React.ReactNode","required":false},"emailPlaceholder":{"type":"string","description":"Email input placeholder text","required":false},"subscribeText":{"type":"object","description":"Subscribe button text","typeLabel":"React.ReactNode","required":false},"termsText":{"type":"object","description":"Terms text before links","typeLabel":"React.ReactNode","required":false},"termsLinkText":{"type":"object","description":"Terms of Use link text","typeLabel":"React.ReactNode","required":false},"termsLinkUrl":{"type":"string","description":"Terms of Use link URL","required":false},"privacyLinkText":{"type":"object","description":"Privacy Policy link text","typeLabel":"React.ReactNode","required":false},"privacyLinkUrl":{"type":"string","description":"Privacy Policy link URL","required":false},"infoItems":{"type":"array","description":"Info section items (contact cards)","items":{"type":"object","description":"","fields":{"icon":{"type":"string","description":"Icon name in format: prefix/name","required":true},"title":{"type":"string","description":"Info item title","required":true},"text":{"type":"string","description":"Info item text","required":true},"link":{"type":"string","description":"Optional link URL","required":false}},"typeLabel":"FooterInfoCardsAccordionInfoItem"},"typeLabel":"FooterInfoCardsAccordionInfoItem[]","required":false},"footerLinks":{"type":"array","description":"Footer link sections","items":{"type":"object","description":"","fields":{"title":{"type":"string","description":"Section title","required":true},"id":{"type":"string","description":"Unique identifier","required":true},"items":{"type":"array","description":"Array of links in this section","items":{"type":"object","description":"","fields":{"text":{"type":"string","description":"Link text","required":true},"link":{"type":"string","description":"Link URL","required":false}},"typeLabel":"FooterInfoCardsAccordionLink"},"typeLabel":"FooterInfoCardsAccordionLink[]","required":true}},"typeLabel":"FooterInfoCardsAccordionSection"},"typeLabel":"FooterInfoCardsAccordionSection[]","required":false},"socialLinks":{"type":"array","description":"Social media links","items":{"type":"object","description":"","fields":{"href":{"type":"string","description":"Link URL - required. The platform icon is automatically determined from the URL.","required":true},"label":{"type":"string","description":"Optional accessible label for screen readers.\nIf not provided, the platform name is used.","required":false},"iconNameOverride":{"type":"string","description":"Optional icon name override in format: prefix/name (e.g., \"cib/instagram\")\nUse when you need a specific icon that differs from the auto-detected platform.","required":false}},"typeLabel":"FooterSocialLink"},"typeLabel":"FooterSocialLink[]","required":false},"paymentPlatforms":{"type":"array","description":"Payment platform names to display icons for","items":{"type":"string","description":"","typeLabel":"PaymentPlatformName"},"typeLabel":"PaymentPlatformName[]","required":false},"submenuLinks":{"type":"array","description":"Submenu links","items":{"type":"object","description":"","fields":{"text":{"type":"string","description":"Link text","required":true},"link":{"type":"string","description":"Link URL","required":false}},"typeLabel":"FooterInfoCardsAccordionLink"},"typeLabel":"FooterInfoCardsAccordionLink[]","required":false},"footerDetails":{"type":"object","description":"Footer details configuration","fields":{"image":{"type":"object","description":"Hero image configuration","fields":{"src":{"type":"string","description":"","required":true},"alt":{"type":"string","description":"","required":true}},"typeLabel":"{ src: string; alt: string; }","required":true},"logo":{"type":"object","description":"Logo configuration with light/dark variants","fields":{"light":{"type":"string","description":"","required":true},"dark":{"type":"string","description":"","required":true}},"typeLabel":"{ light: string; dark: string; }","required":true},"logoUrl":{"type":"string","description":"Logo link URL","required":true},"description":{"type":"string","description":"Brand description text","required":true}},"typeLabel":"FooterInfoCardsAccordionDetails","required":false},"copyright":{"type":"string","description":"Brand/company name for the copyright notice","required":false},"className":{"type":"string","description":"Additional CSS classes for the section wrapper","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the content wrapper","required":false},"newsletterGridClassName":{"type":"string","description":"Additional CSS classes for the newsletter grid","required":false},"newsletterImageClassName":{"type":"string","description":"Additional CSS classes for the newsletter image wrapper","required":false},"newsletterContentClassName":{"type":"string","description":"Additional CSS classes for the newsletter content","required":false},"newsletterTitleClassName":{"type":"string","description":"Additional CSS classes for the newsletter title","required":false},"newsletterDescriptionClassName":{"type":"string","description":"Additional CSS classes for the newsletter description","required":false},"newsletterFormClassName":{"type":"string","description":"Additional CSS classes for the newsletter form","required":false},"infoCardsGridClassName":{"type":"string","description":"Additional CSS classes for the info cards grid","required":false},"infoCardClassName":{"type":"string","description":"Additional CSS classes for info cards","required":false},"brandGridClassName":{"type":"string","description":"Additional CSS classes for the brand/accordion grid","required":false},"brandColumnClassName":{"type":"string","description":"Additional CSS classes for the brand column","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo","required":false},"brandDescriptionClassName":{"type":"string","description":"Additional CSS classes for the brand description","required":false},"accordionColumnClassName":{"type":"string","description":"Additional CSS classes for the accordion column","required":false},"paymentSocialRowClassName":{"type":"string","description":"Additional CSS classes for the payment/social row","required":false},"paymentMethodsClassName":{"type":"string","description":"Additional CSS classes for payment methods","required":false},"socialLinksClassName":{"type":"string","description":"Additional CSS classes for social links","required":false},"bottomClassName":{"type":"string","description":"Additional CSS classes for the bottom section","required":false},"copyrightClassName":{"type":"string","description":"Additional CSS classes for the copyright","required":false},"submenuLinksClassName":{"type":"string","description":"Additional CSS classes for submenu links","required":false},"background":{"type":"string","description":"Section background variant","typeLabel":"SectionBackground","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"spacing":{"type":"object","description":"Section spacing variant","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern opacity (0-1)","required":false},"optixFlowConfig":{"type":"object","description":"Optional Optix Flow configuration for image optimization","fields":{"apiKey":{"type":"string","description":"API key for OptixFlow service","required":true},"compression":{"type":"number","description":"Compression level (0-100)","required":false}},"typeLabel":"OptixFlowConfig","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["footer","info","cards","accordion","newsletter","payment","contact","ecommerce","service"],"performance":{},"importantUsageNotes":"This is a comprehensive e-commerce footer with info cards (phone, email, address, hours), 3 accordion link sections, social links, a newsletter form, payment platform icons, and a side image + logo panel. Provide exactly 4 'infoItems' (the canonical count matching the 4-card grid). Provide exactly 3 'footerLinks' accordion sections, each with 4-7 links. Only supply real 'infoItems' contact data — DO NOT invent any contact data; omit fields the brand has not provided. Only include 'socialLinks' the brand actually has — do not invent social profiles. The newsletter uses 'emailPlaceholder'/'subscribeText' props (simple inline form, not formEngineSetup). Only set 'footerDetails.logo.light'/'dark' if a real brand logo is in the media library. Only set 'footerDetails.image.src' if a real image is available. Only include 'submenuLinks' and 'termsLinkUrl'/'privacyLinkUrl' if those pages actually exist on the site. Follow the example props closely for this block."}]},"timestamp":"2026-05-13T10:12:26.923Z"}