{"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    <FooterLinksGrid\n      logo={{\n        url: \"/\",\n        src: brandLogoPlaceholders.white[0],\n        alt: \"TechSolutions Logo\",\n        title: \"TechSolutions\",\n      }}\n      tagline=\"Building the future of digital innovation, one solution at a time.\"\n      menuItems={[\n        {\n          title: \"Products\",\n          links: [\n            { text: \"Analytics Platform\", url: \"/products/analytics\" },\n            { text: \"Data Warehouse\", url: \"/products/warehouse\" },\n            { text: \"API Gateway\", url: \"/products/api\" },\n            { text: \"Security Suite\", url: \"/products/security\" },\n            { text: \"Enterprise Solutions\", url: \"/products/enterprise\" },\n          ],\n        },\n        {\n          title: \"Company\",\n          links: [\n            { text: \"About Us\", url: \"/about\" },\n            { text: \"Careers\", url: \"/careers\" },\n            { text: \"Press & Media\", url: \"/press\" },\n            { text: \"Investor Relations\", url: \"/investors\" },\n            { text: \"Contact Sales\", url: \"/contact\" },\n          ],\n        },\n        {\n          title: \"Resources\",\n          links: [\n            { text: \"Documentation\", url: \"/docs\" },\n            { text: \"API Reference\", url: \"/api-docs\" },\n            { text: \"Developer Blog\", url: \"/blog\" },\n            { text: \"Community Forum\", url: \"/community\" },\n            { text: \"Status Dashboard\", url: \"/status\" },\n          ],\n        },\n        {\n          title: \"Support\",\n          links: [\n            { text: \"Help Center\", url: \"/help\" },\n            { text: \"System Status\", url: \"/status\" },\n            { text: \"Contact Support\", url: \"/support\" },\n            { text: \"Training & Tutorials\", url: \"/training\" },\n            { text: \"Service Level Agreement\", url: \"/sla\" },\n          ],\n        },\n      ]}\n      copyright=\"TechSolutions Inc.\"\n      bottomLinks={[\n        { text: \"Privacy Policy\", url: \"/privacy\" },\n        { text: \"Terms of Service\", url: \"/terms\" },\n        { text: \"Cookie Settings\", url: \"/cookies\" },\n        { text: \"Accessibility\", url: \"/accessibility\" },\n      ]}\n      background=\"dark\"\n      spacing=\"lg\"\n      pattern=\"gridFadeTop\"\n      patternOpacity={0.1}\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,"mediaHints":{"path":"logo.src","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Brand logo displayed in the footer brand column. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"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}},"exampleProps":{"logo":{"url":"/","src":"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png","alt":"Company Logo","title":"Company"},"tagline":"Building the future, one pixel at a time.","menuItems":[{"title":"Product","links":[{"text":"Features","url":"#"},{"text":"Pricing","url":"#"}]},{"title":"Company","links":[{"text":"About","url":"#"},{"text":"Blog","url":"#"}]}],"copyright":"Acme Inc.","bottomLinks":[{"text":"Privacy Policy","url":"#"},{"text":"Terms of Service","url":"#"}]},"dependencies":["@opensite/ui"],"tags":["footer","navigation","links","multi-column","grid","corporate","legal","sitemap","branding"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. menuItems is an array of sections; each section has a title and a links array of { text, url }. bottomLinks use { text, url } (not href).","usageRequirements":{"requiredProps":[],"propConstraints":{},"mediaSlots":{"logo":{"path":"logo.src","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Brand logo displayed in the footer brand column. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}}}},{"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    <FooterSocialNewsletter\n      logo={{\n        url: \"/\",\n        src: logoPlaceholders.darkHorizontalLogo,\n        alt: \"CloudSync Logo\",\n      }}\n      sections={[\n        {\n          title: \"Product\",\n          links: [\n            { name: \"Features\", href: \"#features\" },\n            { name: \"Pricing\", href: \"#pricing\" },\n            { name: \"Enterprise\", href: \"#enterprise\" },\n            { name: \"Security\", href: \"#security\" },\n            { name: \"Integrations\", href: \"#integrations\" },\n          ],\n        },\n        {\n          title: \"Resources\",\n          links: [\n            { name: \"Documentation\", href: \"#docs\" },\n            { name: \"API Reference\", href: \"#api\" },\n            { name: \"Guides & Tutorials\", href: \"#guides\" },\n            { name: \"Changelog\", href: \"#changelog\" },\n            { name: \"System Status\", href: \"#status\" },\n          ],\n        },\n        {\n          title: \"Community\",\n          links: [\n            { name: \"Blog\", href: \"#blog\" },\n            { name: \"Events\", href: \"#events\" },\n            { name: \"Developer Forum\", href: \"#forum\" },\n            { name: \"Customer Stories\", href: \"#stories\" },\n            { name: \"Open Source\", href: \"#opensource\" },\n          ],\n        },\n        {\n          title: \"Company\",\n          links: [\n            { name: \"About Us\", href: \"#about\" },\n            { name: \"Careers\", href: \"#careers\" },\n            { name: \"Press\", href: \"#press\" },\n            { name: \"Partners\", href: \"#partners\" },\n            { name: \"Contact\", href: \"#contact\" },\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      formEngineSetup={{\n        api: demoFormEngineApi,\n        fields: formFields,\n        successMessage:\n          \"Thank you for subscribing! Check your inbox for a confirmation email.\",\n      }}\n      copyright=\"CloudSync LLC\"\n      pattern=\"gridFadeTop\"\n      patternOpacity={1}\n      background=\"white\"\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,"mediaHints":{"path":"logo.src","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Brand logo shown above social icons. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"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}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png","url":"/","alt":"Company Logo"},"sections":[{"title":"Product","links":[{"name":"Features","href":"#"},{"name":"Pricing","href":"#"}]},{"title":"Company","links":[{"name":"About","href":"#"},{"name":"Careers","href":"#"}]}],"socialLinks":[{"href":"https://twitter.com/company","label":"Follow us on Twitter"},{"href":"https://instagram.com/company","label":"Follow us on Instagram"}],"copyright":"Acme Inc."},"dependencies":["@opensite/ui"],"tags":["footer","social","newsletter","subscription","email","community","icons","navigation"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. socialLinks use { href, label, iconNameOverride? } — platform icon is auto-detected from the URL. sections use { title, links: [{ name, href }] }. Newsletter form requires formEngineSetup with a valid formConfig endpoint.","usageRequirements":{"requiredProps":[],"propConstraints":{},"requiresSiteCapabilities":["contact_form"],"mediaSlots":{"logo":{"path":"logo.src","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Brand logo shown above social icons. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}}}},{"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    <FooterSocialApps\n      logo={{\n        url: \"/\",\n        src: brandLogoPlaceholders.white[2],\n        alt: \"AppFlow Logo\",\n        title: \"AppFlow\",\n      }}\n      sections={[\n        {\n          title: \"Platform\",\n          links: [\n            { name: \"Mobile Apps\", href: \"#\" },\n            { name: \"Web Apps\", href: \"#\" },\n            { name: \"Desktop Apps\", href: \"#\" },\n            { name: \"Extensions\", href: \"#\" },\n            { name: \"Marketplace\", href: \"#\" },\n          ],\n        },\n        {\n          title: \"Developers\",\n          links: [\n            { name: \"API Documentation\", href: \"#\" },\n            { name: \"SDK Downloads\", href: \"#\" },\n            { name: \"Code Examples\", href: \"#\" },\n            { name: \"Developer Forum\", href: \"#\" },\n            { name: \"GitHub Repos\", href: \"#\" },\n          ],\n        },\n        {\n          title: \"Company\",\n          links: [\n            { name: \"About\", href: \"#\" },\n            { name: \"Careers\", href: \"#\" },\n            { name: \"News\", href: \"#\" },\n            { name: \"Brand Assets\", href: \"#\" },\n            { name: \"Contact\", href: \"#\" },\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      appLinks={[\n        {\n          icon: \"simple-icons/apple\",\n          href: \"https://apps.apple.com/app/appflow\",\n          label: \"Download on the App Store\",\n        },\n        {\n          icon: \"simple-icons/googleplay\",\n          href: \"https://play.google.com/store/apps/details?id=com.appflow\",\n          label: \"Get it on Google Play\",\n        },\n      ]}\n      socialLabel=\"Connect With Us\"\n      appLabel=\"Download Our App\"\n      copyright=\"AppFlow Technologies\"\n      background=\"dark\"\n      pattern=\"diagonalCrossFadeTopLeft\"\n      patternOpacity={0.2}\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,"mediaHints":{"path":"logo.src","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Brand logo for the footer. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"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}},"exampleProps":{"logo":{"url":"/","src":"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png","alt":"Company Logo","title":"Company"},"sections":[{"title":"Product","links":[{"name":"Features","href":"#"},{"name":"Pricing","href":"#"}]}],"socialLinks":[{"href":"https://twitter.com/company","label":"Twitter"},{"href":"https://instagram.com/company","label":"Instagram"}],"appLinks":[{"icon":"simple-icons/apple","href":"https://apps.apple.com","label":"Download on App Store"},{"icon":"simple-icons/android","href":"https://play.google.com","label":"Get it on Google Play"}],"socialLabel":"Follow Us","appLabel":"Download Our App","copyright":"Acme Inc."},"dependencies":["@opensite/ui"],"tags":["footer","social","mobile","apps","download","android","ios","app-store","navigation"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. appLinks require { icon, href, label } where icon is a DynamicIcon name like 'simple-icons/android'. socialLinks use { href, label, iconNameOverride? }. sections use { title, links: [{ name, href }] }.","usageRequirements":{"requiredProps":[],"propConstraints":{},"mediaSlots":{"logo":{"path":"logo.src","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Brand logo for the footer. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}}}},{"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    <FooterSimpleCentered\n      logo={{\n        url: \"/\",\n        src: brandLogoPlaceholders.black[0],\n        alt: \"Company Logo\",\n        title: \"TechVision\",\n      }}\n      tagline=\"Building the future of digital experiences with innovative solutions that empower businesses worldwide.\"\n      sitemap={[\n        {\n          title: \"Product\",\n          links: [\n            { label: \"Features\", href: \"#features\" },\n            { label: \"Pricing\", href: \"#pricing\" },\n            { label: \"Documentation\", href: \"#docs\" },\n            { label: \"Integrations\", href: \"#integrations\" },\n            { label: \"API Reference\", href: \"#api\" },\n            { label: \"Release Notes\", href: \"#releases\" },\n          ],\n        },\n        {\n          title: \"Company\",\n          links: [\n            { label: \"About Us\", href: \"#about\" },\n            { label: \"Careers\", href: \"#careers\" },\n            { label: \"Blog\", href: \"#blog\" },\n            { label: \"Press Kit\", href: \"#press\" },\n            { label: \"Partners\", href: \"#partners\" },\n          ],\n        },\n        {\n          title: \"Resources\",\n          links: [\n            { label: \"Help Center\", href: \"#help\" },\n            { label: \"Community\", href: \"#community\" },\n            { label: \"Tutorials\", href: \"#tutorials\" },\n            { label: \"Webinars\", href: \"#webinars\" },\n            { label: \"Case Studies\", href: \"#cases\" },\n          ],\n        },\n        {\n          title: \"Support\",\n          links: [\n            { label: \"Contact Us\", href: \"#contact\" },\n            { label: \"System Status\", href: \"#status\" },\n            { label: \"Security\", href: \"#security\" },\n            { label: \"Developer Portal\", href: \"#developers\" },\n          ],\n        },\n      ]}\n      copyright=\"TechVision Inc.\"\n      bottomLinks={[\n        { text: \"Terms of Service\", href: \"#terms\" },\n        { text: \"Privacy Policy\", href: \"#privacy\" },\n        { text: \"Cookie Policy\", href: \"#cookies\" },\n        { text: \"Accessibility\", href: \"#accessibility\" },\n      ]}\n      background=\"gray\"\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,"mediaHints":{"path":"logo.src","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Brand logo for the footer. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"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}},"exampleProps":{"logo":{"url":"/","src":"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png","alt":"Company Logo","title":"Acme"},"tagline":"Making the world a better place through constructive innovation.","sitemap":[{"title":"Product","links":[{"label":"Features","href":"#"},{"label":"Pricing","href":"#"}]},{"title":"Support","links":[{"label":"Help Center","href":"#"},{"label":"Contact","href":"#"}]}],"copyright":"Acme Inc.","bottomLinks":[{"text":"Privacy Policy","href":"#"},{"text":"Terms of Service","href":"#"}]},"dependencies":["@opensite/ui"],"tags":["footer","minimal","simple","clean","sitemap","corporate","legal","centered"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. sitemap uses { title, links: [{ label, href }] } (NavLinkItem uses 'label' not 'name'). bottomLinks use { text, href }.","usageRequirements":{"requiredProps":[],"propConstraints":{},"mediaSlots":{"logo":{"path":"logo.src","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Brand logo for the footer. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}}}},{"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    <FooterBrandDescription\n      logo={{\n        url: \"/\",\n        src: brandLogoPlaceholders.white[3],\n        alt: \"TechStart Logo\",\n        title: \"TechStart\",\n      }}\n      description=\"Building the future of cloud infrastructure with intelligent automation, security-first design, and enterprise-grade reliability. Trusted by over 10,000 companies worldwide to scale their digital operations.\"\n      socialLinks={[\n        {\n          href: \"https://github.com\",\n          label: \"View our GitHub repositories\",\n        },\n        {\n          href: \"https://linkedin.com\",\n          label: \"Connect on LinkedIn\",\n        },\n        {\n          href: \"https://twitter.com\",\n          label: \"Follow us on Twitter\",\n        },\n        {\n          href: \"https://youtube.com\",\n          label: \"Watch our tutorials\",\n        },\n        {\n          href: \"https://discord.com\",\n          label: \"Join our Discord community\",\n        },\n      ]}\n      sections={[\n        {\n          title: \"Platform\",\n          links: [\n            { name: \"Infrastructure\", href: \"#\" },\n            { name: \"Serverless\", href: \"#\" },\n            { name: \"Databases\", href: \"#\" },\n            { name: \"Analytics\", href: \"#\" },\n            { name: \"Security\", href: \"#\" },\n            { name: \"Monitoring\", href: \"#\" },\n          ],\n        },\n        {\n          title: \"Developers\",\n          links: [\n            { name: \"Documentation\", href: \"#\" },\n            { name: \"API Reference\", href: \"#\" },\n            { name: \"SDKs\", href: \"#\" },\n            { name: \"CLI Tools\", href: \"#\" },\n            { name: \"Changelog\", href: \"#\" },\n            { name: \"Status\", href: \"#\" },\n          ],\n        },\n        {\n          title: \"Company\",\n          links: [\n            { name: \"About Us\", href: \"#\" },\n            { name: \"Careers\", href: \"#\" },\n            { name: \"Blog\", href: \"#\" },\n            { name: \"Press Kit\", href: \"#\" },\n            { name: \"Partners\", href: \"#\" },\n            { name: \"Contact\", href: \"#\" },\n          ],\n        },\n      ]}\n      copyright=\"TechStart Inc\"\n      legalLinks={[\n        { name: \"Privacy Policy\", href: \"#\" },\n        { name: \"Terms of Service\", href: \"#\" },\n        { name: \"Cookie Policy\", href: \"#\" },\n        { name: \"Acceptable Use\", href: \"#\" },\n      ]}\n      background=\"dark\"\n      spacing=\"lg\"\n      pattern=\"grid1\"\n      patternOpacity={0.05}\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,"mediaHints":{"path":"logo.src","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Brand logo shown in the brand column. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"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}},"exampleProps":{"logo":{"url":"/","src":"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png","alt":"Brand Logo","title":"Acme"},"description":"We help businesses grow with modern tools and thoughtful design.","sections":[{"title":"Product","links":[{"name":"Features","href":"#"},{"name":"Pricing","href":"#"}]},{"title":"Company","links":[{"name":"About","href":"#"},{"name":"Blog","href":"#"}]}],"socialLinks":[{"href":"https://twitter.com/acme","label":"Twitter"},{"href":"https://linkedin.com/company/acme","label":"LinkedIn"}],"copyright":"Acme Inc.","legalLinks":[{"name":"Privacy Policy","href":"#"},{"name":"Terms of Service","href":"#"}]},"dependencies":["@opensite/ui"],"tags":["footer","brand","description","social","identity","startup","navigation","about"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. sections use { title, links: [{ name, href }] }. legalLinks use { name, href }. socialLinks use { href, label, iconNameOverride? }.","usageRequirements":{"requiredProps":[],"propConstraints":{},"mediaSlots":{"logo":{"path":"logo.src","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Brand logo shown in the brand column. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}}}},{"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    <FooterBrandLinksContact\n      logoSrc={brandLogoPlaceholders.black[4]}\n      logoAlt=\"Modern Commerce Logo\"\n      tagline=\"Empowering businesses worldwide\"\n      description=\"Modern Commerce is a leading e-commerce platform helping thousands of businesses build, manage, and scale their online stores with cutting-edge technology and unparalleled support.\"\n      linkGroups={[\n        {\n          title: \"Products\",\n          links: [\n            { label: \"Online Store\", href: \"#\" },\n            { label: \"Point of Sale\", href: \"#\" },\n            { label: \"Mobile Commerce\", href: \"#\" },\n            { label: \"Marketing Tools\", href: \"#\" },\n            { label: \"Analytics\", href: \"#\" },\n            { label: \"Integrations\", href: \"#\" },\n          ],\n        },\n        {\n          title: \"Resources\",\n          links: [\n            { label: \"Help Center\", href: \"#\" },\n            { label: \"Video Tutorials\", href: \"#\" },\n            { label: \"API Documentation\", href: \"#\" },\n            { label: \"Developer Guides\", href: \"#\" },\n            { label: \"Community Forum\", href: \"#\" },\n            { label: \"Webinars\", href: \"#\" },\n          ],\n        },\n        {\n          title: \"Company\",\n          links: [\n            { label: \"About Us\", href: \"#\" },\n            { label: \"Careers\", href: \"#\" },\n            { label: \"Press & Media\", href: \"#\" },\n            { label: \"Partnerships\", href: \"#\" },\n            { label: \"Affiliates\", href: \"#\" },\n            { label: \"Sustainability\", href: \"#\" },\n          ],\n        },\n      ]}\n      contactTitle=\"Contact Us\"\n      contactItems={[\n        {\n          icon: \"lucide/mail\",\n          label: \"support@moderncommerce.com\",\n          href: \"mailto:support@moderncommerce.com\",\n        },\n        {\n          icon: \"lucide/phone\",\n          label: \"+1 (888) 555-7890\",\n          href: \"tel:+18885557890\",\n        },\n        {\n          icon: \"lucide/map-pin\",\n          label: \"123 Commerce Street, New York, NY 10001\",\n          href: \"https://maps.google.com\",\n        },\n      ]}\n      socialTitle=\"Follow Us\"\n      socialLinks={[\n        { href: \"https://facebook.com\", label: \"Facebook\" },\n        { href: \"https://twitter.com\", label: \"Twitter\" },\n        { href: \"https://linkedin.com\", label: \"LinkedIn\" },\n        { href: \"https://instagram.com\", label: \"Instagram\" },\n      ]}\n      copyright=\"© 2026 Modern Commerce Inc. All rights reserved.\"\n      legalLinks={[\n        { label: \"Privacy Policy\", href: \"#\" },\n        { label: \"Terms of Service\", href: \"#\" },\n        { label: \"Cookie Settings\", href: \"#\" },\n      ]}\n      background=\"gray\"\n      spacing=\"xl\"\n    />\n  );\n}","propsSchema":{"logoSrc":{"type":"string","description":"Logo source URL","required":false,"mediaHints":{"path":"logoSrc","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Brand logo shown centered above the grid. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"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}},"exampleProps":{"logoSrc":"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png","logoAlt":"Company Logo","tagline":"Crafting digital experiences that matter.","description":"We partner with ambitious teams to build products people love.","linkGroups":[{"title":"Services","links":[{"label":"Web Design","href":"#"},{"label":"SEO","href":"#"}]},{"title":"Company","links":[{"label":"About","href":"#"},{"label":"Careers","href":"#"}]}],"contactTitle":"Get In Touch","contactItems":[{"icon":"lucide/mail","label":"hello@company.com","href":"mailto:hello@company.com"},{"icon":"lucide/phone","label":"+1 (555) 000-0000","href":"tel:+15550000000"}],"socialTitle":"Follow Us","socialLinks":[{"href":"https://twitter.com/company","label":"Twitter"},{"href":"https://instagram.com/company","label":"Instagram"}],"copyright":"Acme Inc.","legalLinks":[{"label":"Privacy Policy","href":"#"},{"label":"Terms","href":"#"}]},"dependencies":["@opensite/ui"],"tags":["footer","brand","links","contact","social","legal","multi-column","navigation"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. linkGroups use { title, links: [{ label, href }] } (NavLinkItem shape). contactItems use { icon, label, href } where icon is a DynamicIcon name. socialLinks use { href, label, iconNameOverride? }. legalLinks use { label, href }.","usageRequirements":{"requiredProps":[],"propConstraints":{},"requiresSiteCapabilities":["contact_info"],"mediaSlots":{"logo":{"path":"logoSrc","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Brand logo shown centered above the grid. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}}}},{"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    <FooterComprehensiveLinks\n      logoSrc={brandLogoPlaceholders.black[0]}\n      logoAlt=\"TechVenture Solutions Logo\"\n      logoHref=\"/\"\n      tagline=\"Innovative Technology Solutions\"\n      summary=\"We deliver cutting-edge software solutions that transform businesses through automation, AI integration, and cloud infrastructure. Trusted by over 500 companies worldwide since 2015.\"\n      linkColumns={[\n        {\n          title: \"Products\",\n          links: [\n            { label: \"Cloud Platform\", href: \"/products/cloud\" },\n            { label: \"API Gateway\", href: \"/products/api\" },\n            { label: \"Data Analytics\", href: \"/products/analytics\" },\n            { label: \"Security Suite\", href: \"/products/security\" },\n            { label: \"Developer Tools\", href: \"/products/dev-tools\" },\n            { label: \"Enterprise Solutions\", href: \"/products/enterprise\" },\n          ],\n        },\n        {\n          title: \"Solutions\",\n          links: [\n            { label: \"For Startups\", href: \"/solutions/startups\" },\n            { label: \"For Enterprise\", href: \"/solutions/enterprise\" },\n            { label: \"E-commerce\", href: \"/solutions/ecommerce\" },\n            { label: \"Healthcare\", href: \"/solutions/healthcare\" },\n            { label: \"Financial Services\", href: \"/solutions/finance\" },\n            { label: \"Education\", href: \"/solutions/education\" },\n          ],\n        },\n        {\n          title: \"Resources\",\n          links: [\n            { label: \"Documentation\", href: \"/docs\" },\n            { label: \"API Reference\", href: \"/api\" },\n            { label: \"Tutorials\", href: \"/tutorials\" },\n            { label: \"Case Studies\", href: \"/case-studies\" },\n            { label: \"Webinars\", href: \"/webinars\" },\n            { label: \"Community Forum\", href: \"/community\" },\n          ],\n        },\n        {\n          title: \"Company\",\n          links: [\n            { label: \"About Us\", href: \"/about\" },\n            { label: \"Careers\", href: \"/careers\" },\n            { label: \"Press Kit\", href: \"/press\" },\n            { label: \"Partners\", href: \"/partners\" },\n            { label: \"Investors\", href: \"/investors\" },\n            { label: \"Contact Sales\", href: \"/contact-sales\" },\n          ],\n        },\n      ]}\n      articleLinks={[\n        {\n          label: \"Getting Started with Cloud Migration: A Complete Guide\",\n          href: \"/blog/cloud-migration-guide\",\n        },\n        {\n          label: \"10 Best Practices for API Security in 2026\",\n          href: \"/blog/api-security-practices\",\n        },\n        {\n          label: \"How AI is Transforming Modern Software Development\",\n          href: \"/blog/ai-software-development\",\n        },\n        {\n          label: \"The Future of Microservices Architecture\",\n          href: \"/blog/microservices-future\",\n        },\n        {\n          label: \"Building Scalable Applications with Kubernetes\",\n          href: \"/blog/kubernetes-scalability\",\n        },\n        {\n          label: \"Data Privacy Compliance: GDPR and Beyond\",\n          href: \"/blog/data-privacy-compliance\",\n        },\n        {\n          label: \"Optimizing Database Performance at Scale\",\n          href: \"/blog/database-optimization\",\n        },\n        {\n          label: \"Serverless Architecture: Pros and Cons\",\n          href: \"/blog/serverless-architecture\",\n        },\n        {\n          label: \"DevOps Best Practices for 2026\",\n          href: \"/blog/devops-best-practices\",\n        },\n        {\n          label: \"Machine Learning Model Deployment Strategies\",\n          href: \"/blog/ml-deployment\",\n        },\n        {\n          label: \"Understanding Zero Trust Security\",\n          href: \"/blog/zero-trust-security\",\n        },\n        {\n          label: \"Building Real-Time Analytics Dashboards\",\n          href: \"/blog/realtime-analytics\",\n        },\n      ]}\n      articleSectionTitle=\"Latest Articles & Resources\"\n      contact={{\n        email: \"support@techventure.com\",\n        phone: \"+1 (555) 123-4567\",\n        address: \"1234 Innovation Drive, Silicon Valley, CA 94025\",\n      }}\n      socialLinks={[\n        {\n          href: \"https://linkedin.com/company/techventure\",\n          label: \"Follow us on LinkedIn\",\n        },\n        { href: \"https://x.com/techventure\", label: \"Follow us on X\" },\n        {\n          href: \"https://facebook.com/techventure\",\n          label: \"Follow us on Facebook\",\n        },\n        {\n          href: \"https://youtube.com/@techventure\",\n          label: \"Subscribe on YouTube\",\n        },\n        {\n          href: \"https://instagram.com/techventure\",\n          label: \"Follow us on Instagram\",\n        },\n      ]}\n      copyright=\"© 2026 TechVenture Solutions. All rights reserved.\"\n      bottomLinks={[\n        { label: \"Privacy Policy\", href: \"/privacy\" },\n        { label: \"Terms of Service\", href: \"/terms\" },\n        { label: \"Cookie Policy\", href: \"/cookies\" },\n        { label: \"Accessibility\", href: \"/accessibility\" },\n        { label: \"Sitemap\", href: \"/sitemap\" },\n      ]}\n      background=\"gray\"\n      pattern=\"dots\"\n      patternOpacity={0.3}\n    />\n  );\n}","propsSchema":{"logoSrc":{"type":"string","description":"Logo source URL","required":false,"mediaHints":{"path":"logoSrc","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Brand logo shown centered above the link grid. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"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}},"exampleProps":{"logoSrc":"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png","tagline":"The platform for modern businesses.","summary":"Helping teams work smarter with powerful tools.","linkColumns":[{"title":"Product","links":[{"label":"Features","href":"#"},{"label":"Pricing","href":"#"}]},{"title":"Company","links":[{"label":"About","href":"#"},{"label":"Blog","href":"#"}]}],"contact":{"email":"hello@company.com","phone":"+1 (555) 000-0000","address":"123 Main St, San Francisco, CA"},"socialLinks":[{"href":"https://twitter.com/company","label":"Twitter"},{"href":"https://linkedin.com/company/acme","label":"LinkedIn"}],"copyright":"Acme Inc.","bottomLinks":[{"label":"Privacy Policy","href":"#"},{"label":"Terms","href":"#"}]},"dependencies":["@opensite/ui"],"tags":["footer","comprehensive","links","contact","social","articles","navigation","legal"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. logoSrc is a direct URL string. linkColumns use { title, links: [{ label, href }] }. articleLinks use { label, href } and appear in a separate section. bottomLinks use { label, href }.","usageRequirements":{"requiredProps":[],"propConstraints":{},"requiresSiteCapabilities":["contact_info"],"mediaSlots":{"logo":{"path":"logoSrc","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Brand logo shown centered above the link grid. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}}}},{"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    <FooterNewsletterGrid\n      logo={{\n        url: \"#\",\n        src: brandLogoPlaceholders.black[3],\n        alt: \"DataFlow Analytics\",\n        title: \"DataFlow\",\n      }}\n      description=\"Empowering businesses with real-time data analytics, predictive insights, and intelligent automation to drive growth and innovation.\"\n      sections={[\n        {\n          title: \"Products\",\n          links: [\n            { name: \"Business Intelligence\", href: \"/products/bi\" },\n            { name: \"Predictive Analytics\", href: \"/products/predictive\" },\n            { name: \"Data Visualization\", href: \"/products/visualization\" },\n            { name: \"Machine Learning\", href: \"/products/ml\" },\n            { name: \"Real-time Dashboards\", href: \"/products/dashboards\" },\n          ],\n        },\n        {\n          title: \"Industries\",\n          links: [\n            { name: \"Financial Services\", href: \"/industries/finance\" },\n            { name: \"Healthcare\", href: \"/industries/healthcare\" },\n            { name: \"Retail & E-commerce\", href: \"/industries/retail\" },\n            { name: \"Manufacturing\", href: \"/industries/manufacturing\" },\n            { name: \"Telecommunications\", href: \"/industries/telecom\" },\n          ],\n        },\n        {\n          title: \"Resources\",\n          links: [\n            { name: \"Documentation\", href: \"/docs\" },\n            { name: \"Case Studies\", href: \"/case-studies\" },\n            { name: \"White Papers\", href: \"/whitepapers\" },\n            { name: \"Webinars\", href: \"/webinars\" },\n            { name: \"Research Reports\", href: \"/research\" },\n          ],\n        },\n      ]}\n      socialLinks={[\n        { href: \"https://instagram.com/fashionstore\", label: \"Instagram\" },\n        { href: \"https://facebook.com/fashionstore\", label: \"Facebook\" },\n        { href: \"https://pinterest.com/fashionstore\", label: \"Pinterest\" },\n        { href: \"https://tiktok.com/@fashionstore\", label: \"TikTok\" },\n      ]}\n      newsletterTitle=\"Subscribe to Insights\"\n      newsletterPlaceholder=\"Enter your business email\"\n      newsletterButtonText=\"Get Updates\"\n      privacyText=\"By subscribing, you agree to our\"\n      privacyLinkText=\"Privacy Policy\"\n      privacyLinkUrl=\"#\"\n      copyright=\"DataFlow Analytics Inc.\"\n      background=\"gray\"\n      pattern=\"gridFadeTop\"\n      patternOpacity={0.9}\n      spacing=\"lg\"\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,"mediaHints":{"path":"logo.src","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Brand logo in the footer. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"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}},"exampleProps":{"logo":{"url":"/","src":"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png","alt":"Company Logo","title":"Company"},"description":"Empowering teams to build faster, ship better.","sections":[{"title":"Product","links":[{"name":"Features","href":"#"},{"name":"Pricing","href":"#"}]}],"socialLinks":[{"href":"https://twitter.com/company","label":"Twitter"},{"href":"https://github.com/company","label":"GitHub"}],"newsletterTitle":"Stay in the loop","newsletterPlaceholder":"Enter your email","newsletterButtonText":"Subscribe","privacyText":"We care about your privacy.","privacyLinkText":"Read our policy","privacyLinkUrl":"/privacy","copyright":"Acme Inc."},"dependencies":["@opensite/ui"],"tags":["footer","newsletter","grid","social","comprehensive","email","marketing","subscription"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. sections use { title, links: [{ name, href }] }. Newsletter is a plain HTML input/button — no FormEngine required. socialLinks use { href, label, iconNameOverride? }.","usageRequirements":{"requiredProps":[],"propConstraints":{},"requiresSiteCapabilities":["contact_form"],"mediaSlots":{"logo":{"path":"logo.src","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Brand logo in the footer. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}}}},{"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    <FooterCtaBanner\n      logo={{\n        url: \"/\",\n        src: brandLogoPlaceholders.white[2],\n        alt: \"GrowthHub Logo\",\n        title: \"GrowthHub\",\n      }}\n      ctaHeading=\"Ready to accelerate your business growth?\"\n      ctaDescription=\"Join over 10,000 companies using GrowthHub to streamline operations, increase revenue, and scale faster than ever before. Start your free 14-day trial today.\"\n      ctaButtonText=\"Start Free Trial\"\n      ctaButtonUrl=\"/signup\"\n      sections={[\n        {\n          title: \"Platform\",\n          links: [\n            { name: \"Features\", href: \"/features\" },\n            { name: \"Integrations\", href: \"/integrations\" },\n            { name: \"Pricing\", href: \"/pricing\" },\n            { name: \"Security\", href: \"/security\" },\n            { name: \"Enterprise\", href: \"/enterprise\" },\n            { name: \"Changelog\", href: \"/changelog\" },\n          ],\n        },\n        {\n          title: \"Resources\",\n          links: [\n            { name: \"Blog\", href: \"/blog\" },\n            { name: \"Help Center\", href: \"/help\" },\n            { name: \"Documentation\", href: \"/docs\" },\n            { name: \"API Reference\", href: \"/api\" },\n            { name: \"Templates\", href: \"/templates\" },\n            { name: \"Webinars\", href: \"/webinars\" },\n          ],\n        },\n        {\n          title: \"Company\",\n          links: [\n            { name: \"About\", href: \"/about\" },\n            { name: \"Careers\", href: \"/careers\" },\n            { name: \"Press\", href: \"/press\" },\n            { name: \"Partners\", href: \"/partners\" },\n            { name: \"Contact\", href: \"/contact\" },\n            { name: \"Support\", href: \"/support\" },\n          ],\n        },\n      ]}\n      socialLinks={[\n        {\n          href: \"https://twitter.com/growthhub\",\n          label: \"Follow GrowthHub on Twitter\",\n        },\n        {\n          href: \"https://linkedin.com/company/growthhub\",\n          label: \"Connect with GrowthHub on LinkedIn\",\n        },\n        {\n          href: \"https://github.com/growthhub\",\n          label: \"View GrowthHub on GitHub\",\n        },\n        {\n          href: \"https://youtube.com/@growthhub\",\n          label: \"Subscribe to GrowthHub on YouTube\",\n        },\n      ]}\n      newsletterLabel=\"Subscribe to our newsletter\"\n      newsletterPlaceholder=\"Enter your email\"\n      newsletterButtonText=\"Subscribe\"\n      copyright=\"GrowthHub Inc.\"\n      legalLinks={[\n        { name: \"Privacy Policy\", href: \"/privacy\" },\n        { name: \"Terms of Service\", href: \"/terms\" },\n        { name: \"Cookie Policy\", href: \"/cookies\" },\n      ]}\n      background=\"dark\"\n      pattern=\"gridFadeCenter\"\n      patternOpacity={0.15}\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,"mediaHints":{"path":"logo.src","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Brand logo in the footer grid. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"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}},"exampleProps":{"logo":{"url":"/","src":"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png","alt":"Company Logo","title":"Company"},"ctaHeading":"Ready to Get Started?","ctaDescription":"Join thousands of teams already using our platform to ship faster.","ctaButtonText":"Start Free Trial","ctaButtonUrl":"#","sections":[{"title":"Product","links":[{"name":"Features","href":"#"},{"name":"Pricing","href":"#"}]}],"socialLinks":[{"href":"https://twitter.com/company","label":"Twitter"},{"href":"https://linkedin.com/company/acme","label":"LinkedIn"}],"copyright":"Acme Inc.","legalLinks":[{"name":"Privacy","href":"#"},{"name":"Terms","href":"#"}]},"dependencies":["@opensite/ui"],"tags":["footer","cta","banner","dark","conversion","marketing","newsletter","call-to-action"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. sections use { title, links: [{ name, href }] }. legalLinks use { name, href }. Newsletter is a plain HTML input — newsletterClassName must be non-empty to render the newsletter section. socialLinks use { href, label, iconNameOverride? }.","usageRequirements":{"requiredProps":[],"propConstraints":{},"mediaSlots":{"logo":{"path":"logo.src","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Brand logo in the footer grid. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}}}},{"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    <FooterContactCard\n      logo={{\n        url: \"#\",\n        src: brandLogoPlaceholders.black[1],\n        alt: \"Stellar Design Agency Logo\",\n        title: \"Stellar Design\",\n      }}\n      heading=\"Let's create something amazing together\"\n      email=\"hello@stellardesign.co\"\n      phone=\"(555) 987-6543\"\n      address=\"567 Creative Boulevard, Suite 300, New York, NY 10001\"\n      socialLinks={[\n        {\n          href: \"https://instagram.com/stellardesign\",\n          label: \"Follow Stellar Design on Instagram\",\n        },\n        {\n          href: \"https://dribbble.com/stellardesign\",\n          label: \"View our work on Dribbble\",\n        },\n        {\n          href: \"https://behance.net/stellardesign\",\n          label: \"View our portfolio on Behance\",\n        },\n        {\n          href: \"https://linkedin.com/company/stellardesign\",\n          label: \"Connect with us on LinkedIn\",\n        },\n        {\n          href: \"https://twitter.com/stellardesign\",\n          label: \"Follow us on Twitter\",\n        },\n      ]}\n      navLinks={[\n        { name: \"Services\", href: \"#\" },\n        { name: \"Portfolio\", href: \"#\" },\n        { name: \"About\", href: \"#\" },\n        { name: \"Case Studies\", href: \"#\" },\n        { name: \"Blog\", href: \"#\" },\n        { name: \"Careers\", href: \"#\" },\n        { name: \"Contact\", href: \"#\" },\n      ]}\n      socialTitle=\"Follow our creative journey\"\n      location=\"New York, NY\"\n      locationLabel=\"Proudly based in\"\n      copyright=\"Stellar Design Agency\"\n      background=\"white\"\n      pattern=\"gridFadeTop\"\n      patternOpacity={1}\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,"mediaHints":{"path":"logo.src","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Brand logo shown above the heading. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"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}},"exampleProps":{"logo":{"url":"/","src":"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png","alt":"Agency Logo","title":"Agency"},"heading":"Let's work together","email":"hello@agency.com","phone":"+1 (555) 000-0000","address":"123 Creative St, San Francisco, CA 94107","socialTitle":"Follow our journey","socialLinks":[{"href":"https://twitter.com/agency","label":"Twitter"},{"href":"https://instagram.com/agency","label":"Instagram"},{"href":"https://linkedin.com/company/agency","label":"LinkedIn"}],"navLinks":[{"name":"Services","href":"#"},{"name":"Work","href":"#"},{"name":"About","href":"#"},{"name":"Contact","href":"#"}],"copyright":"Agency LLC","locationLabel":"Based in","location":"San Francisco, CA"},"dependencies":["@opensite/ui"],"tags":["footer","contact","card","email","phone","address","social","professional","agency"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. navLinks use { name, href }. socialLinks use { href, label, iconNameOverride? }. email and phone are plain strings (not mailto/tel prefixed).","usageRequirements":{"requiredProps":[],"propConstraints":{},"requiresSiteCapabilities":["contact_info"],"mediaSlots":{"logo":{"path":"logo.src","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Brand logo shown above the heading. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}}}},{"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 { brandLogoPlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <FooterBackgroundCard\n      logo={{\n        url: \"/\",\n        src: brandLogoPlaceholders.black[2],\n        alt: \"Company Logo\",\n        title: \"Your Agency\",\n      }}\n      backgroundImage=\"https://toastability-production.s3.amazonaws.com/9ughnl9wnko2vdboib8n3wl3cxsy\"\n      profileImage=\"https://toastability-production.s3.amazonaws.com/krnuu3wc960ltazr5cu120xpzmj5\"\n      tagline=\"Sarah Mitchell\"\n      personalMessage=\"With over 15 years of experience in digital strategy and creative direction, I'm dedicated to helping brands tell their story and connect with audiences in meaningful ways. Every project is an opportunity to create something extraordinary.\"\n      ctaText=\"Let's Work Together\"\n      ctaUrl=\"#\"\n      menuItems={[\n        {\n          title: \"Services\",\n          links: [\n            { text: \"Brand Strategy\", url: \"#\" },\n            { text: \"Digital Marketing\", url: \"#\" },\n            { text: \"Web Design\", url: \"#\" },\n            { text: \"Content Creation\", url: \"#\" },\n            { text: \"SEO Optimization\", url: \"#\" },\n          ],\n        },\n        {\n          title: \"Company\",\n          links: [\n            { text: \"About\", url: \"#\" },\n            { text: \"Portfolio\", url: \"#\" },\n            { text: \"Testimonials\", url: \"#\" },\n            { text: \"Careers\", url: \"#\" },\n            { text: \"Blog\", url: \"#\" },\n          ],\n        },\n        {\n          title: \"Resources\",\n          links: [\n            { text: \"Case Studies\", url: \"#\" },\n            { text: \"White Papers\", url: \"#\" },\n            { text: \"Free Tools\", url: \"#\" },\n            { text: \"Newsletter\", url: \"#\" },\n            { text: \"Events\", url: \"#\" },\n          ],\n        },\n      ]}\n      contactTitle=\"Get In Touch\"\n      contact={{\n        phone: \"(555) 123-4567\",\n        email: \"hello@agency.com\",\n        location: \"San Francisco, CA\",\n        timezone: \"PST\",\n      }}\n      copyright=\"Your Agency\"\n      bottomLinks={[\n        { text: \"Privacy Policy\", url: \"#\" },\n        { text: \"Terms of Service\", url: \"#\" },\n        { text: \"Cookies\", url: \"#\" },\n      ]}\n      background=\"transparent\"\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,"mediaHints":{"path":"logo.src","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Brand logo inside the card. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"backgroundImage":{"type":"string","description":"Background image URL","required":false,"mediaHints":{"path":"backgroundImage","roles":["feature","background"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":false,"note":"Full-bleed background behind the card. Must be an absolute URL to a real landscape or atmospheric image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"profileImage":{"type":"string","description":"Profile image URL","required":false,"mediaHints":{"path":"profileImage","roles":["profile","avatar"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Round profile or avatar image inside the card. Must be an absolute URL to a real person or brand image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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}},"exampleProps":{"logo":{"url":"/","src":"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png","alt":"Agency Logo","title":"Agency"},"backgroundImage":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","profileImage":"https://cdn.ing/assets/i/r/289144/9thob27iku9i72elwvz5j03z6482/glamorous-nightlife-portrait-woman-burgundy-dress-upscale-bar.jpg","tagline":"Sarah Mitchell","personalMessage":"15 years of digital strategy experience, dedicated to helping brands connect with audiences.","ctaText":"Let's Work Together","ctaUrl":"#","menuItems":[{"title":"Services","links":[{"text":"Brand Strategy","url":"#"},{"text":"Web Design","url":"#"}]},{"title":"Company","links":[{"text":"About","url":"#"},{"text":"Portfolio","url":"#"}]}],"contactTitle":"Get In Touch","contact":{"email":"hello@agency.com","phone":"(555) 123-4567","location":"San Francisco, CA","timezone":"PST"},"copyright":"Agency LLC","bottomLinks":[{"text":"Privacy Policy","url":"#"},{"text":"Terms","url":"#"}]},"dependencies":["@opensite/ui"],"tags":["footer","background","image","card","creative","portfolio","agency","personal","visual"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. backgroundImage must be an absolute URL to a real background image. profileImage must be an absolute URL to a real profile/portrait image. menuItems use { title, links: [{ text, url }] }. bottomLinks use { text, url }. contact.phone/email/location are plain strings.","usageRequirements":{"requiredProps":[],"propConstraints":{},"mediaSlots":{"backgroundImage":{"path":"backgroundImage","roles":["feature","background"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":false,"note":"Full-bleed background behind the card. Must be an absolute URL to a real landscape or atmospheric image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."},"profileImage":{"path":"profileImage","roles":["profile","avatar"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Round profile or avatar image inside the card. Must be an absolute URL to a real person or brand image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."},"logo":{"path":"logo.src","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Brand logo inside the card. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}}}},{"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    <FooterAnimatedSocial\n      heading=\"Let's Create Something Amazing Together\"\n      description=\"We're passionate about building innovative solutions that make a difference. Partner with us to bring your vision to life and transform the way people interact with technology.\"\n      ctaText=\"Start Your Project\"\n      ctaUrl=\"#\"\n      socialLinks={[\n        { label: \"LinkedIn\", href: \"https://linkedin.com\" },\n        { label: \"Twitter\", href: \"https://twitter.com\" },\n        { label: \"GitHub\", href: \"https://github.com\" },\n        { label: \"Dribbble\", href: \"https://dribbble.com\" },\n        { label: \"Behance\", href: \"https://behance.net\" },\n      ]}\n      copyright=\"Creative Studio\"\n      background=\"dark\"\n      spacing=\"xl\"\n      pattern=\"gridDotsFadeCenter\"\n      patternOpacity={0.3}\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}},"exampleProps":{"heading":"Let's build something great together.","description":"We're always open to new projects, collaborations, and conversations.","ctaText":"Get In Touch","ctaUrl":"#contact","socialLinks":[{"href":"https://twitter.com/company","label":"Twitter"},{"href":"https://instagram.com/company","label":"Instagram"},{"href":"https://linkedin.com/company/acme","label":"LinkedIn"},{"href":"https://github.com/company","label":"GitHub"}],"copyright":"Acme Inc."},"dependencies":["@opensite/ui"],"tags":["footer","animated","motion","social","modern","interactive","creative","portfolio"],"performance":{},"importantUsageNotes":"socialLinks use { href, label, iconNameOverride? }. Framer Motion animations run on scroll-into-view.","usageRequirements":{"requiredProps":[],"propConstraints":{},"mediaSlots":{}}},{"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    <FooterNewsletterMinimal\n      heading=\"Let's build something extraordinary together\"\n      supportLabel=\"Need help with your project?\"\n      supportEmail=\"hello@designstudio.co\"\n      navLinks={[\n        { label: \"Work\", href: \"#\" },\n        { label: \"Services\", href: \"#\" },\n        { label: \"About\", href: \"#\" },\n        { label: \"Blog\", href: \"#\" },\n        { label: \"Careers\", href: \"#\" },\n        { label: \"Contact\", href: \"#\" },\n      ]}\n      socialLinks={[\n        { label: \"Dribbble\", href: \"https://dribbble.com/designstudio\" },\n        { label: \"Behance\", href: \"https://behance.net/designstudio\" },\n        { label: \"Instagram\", href: \"https://instagram.com/designstudio\" },\n        { label: \"Twitter\", href: \"https://twitter.com/designstudio\" },\n        {\n          label: \"LinkedIn\",\n          href: \"https://linkedin.com/company/designstudio\",\n        },\n      ]}\n      footerLinks={[\n        { label: \"Privacy\", href: \"/privacy\" },\n        { label: \"Terms\", href: \"/terms\" },\n        { label: \"Cookies\", href: \"/cookies\" },\n        { label: \"Accessibility\", href: \"/accessibility\" },\n      ]}\n      newsletterLabel=\"Join our creative community\"\n      formEngineSetup={{\n        api: demoFormEngineApi,\n        fields: formFields,\n        successMessage:\n          \"Thank you for subscribing! Check your inbox for a confirmation email.\",\n      }}\n      brandText=\"INDUSTRY STANDARD\"\n      copyright=\"Design Studio Co.\"\n      location=\"San Francisco, California & Remote Worldwide\"\n      background=\"dark\"\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}},"exampleProps":{"heading":"Let's build the future together.","supportLabel":"Need help? Reach us at","supportEmail":"hello@company.com","navLinks":[{"label":"About","href":"#"},{"label":"Careers","href":"#"},{"label":"Blog","href":"#"}],"socialLinks":[{"href":"https://twitter.com/company","label":"Twitter"},{"href":"https://instagram.com/company","label":"Instagram"}],"newsletterLabel":"Subscribe to our newsletter","brandText":"Acme","copyright":"Acme Inc.","footerLinks":[{"label":"Privacy Policy","href":"#"},{"label":"Terms","href":"#"}]},"dependencies":["@opensite/ui"],"tags":["footer","newsletter","minimal","dark","animated","logo","saas","sophisticated"],"performance":{},"importantUsageNotes":"Newsletter form requires formEngineSetup with a valid formConfig endpoint. brandText renders as a very large animated display text — use the business name. navLinks use NavLinkItem shape: { label, href }. socialLinks use { href, label, iconNameOverride? }. footerLinks use { label, href }.","usageRequirements":{"requiredProps":[],"propConstraints":{},"requiresSiteCapabilities":["contact_form"],"mediaSlots":{}}},{"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    <FooterCtaSocial\n      preHeading=\"Transform Your Business\"\n      heading=\"Let's build the future together\"\n      description=\"Partner with us to unlock unprecedented growth opportunities. Our team of experts is ready to help you achieve your most ambitious goals through innovative solutions and strategic guidance.\"\n      buttonText=\"Schedule a Consultation\"\n      buttonUrl=\"/contact\"\n      email=\"partnerships@innovatetech.io\"\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      copyright=\"© 2026 InnovateTech Solutions. All rights reserved worldwide.\"\n      patternOpacity={0.1}\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}},"exampleProps":{"preHeading":"Join us today","heading":"Start your free trial","description":"No credit card required. Get up and running in under 5 minutes.","buttonText":"Get Started Now","buttonUrl":"#","socialLinks":[{"href":"https://twitter.com/company","label":"Twitter"},{"href":"https://instagram.com/company","label":"Instagram"},{"href":"https://linkedin.com/company/acme","label":"LinkedIn"}],"email":"hello@company.com","copyright":"Acme Inc."},"dependencies":["@opensite/ui"],"tags":["footer","cta","social","centered","conversion","landing","marketing","decorative"],"performance":{},"importantUsageNotes":"socialLinks use { href, label, iconNameOverride? }. email is a plain email string (not mailto: prefixed).","usageRequirements":{"requiredProps":[],"propConstraints":{},"mediaSlots":{}}},{"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    <FooterNavSocial\n      logo={{\n        url: \"/\",\n        src: brandLogoPlaceholders.black[1],\n        alt: \"CloudBase Platform\",\n        title: \"CloudBase\",\n      }}\n      sections={[\n        {\n          title: \"Platform\",\n          links: [\n            { name: \"Cloud Infrastructure\", href: \"/platform/infrastructure\" },\n            { name: \"Serverless Functions\", href: \"/platform/functions\" },\n            { name: \"Database Services\", href: \"/platform/database\" },\n            { name: \"Edge Computing\", href: \"/platform/edge\" },\n            { name: \"Container Registry\", href: \"/platform/registry\" },\n          ],\n        },\n        {\n          title: \"Solutions\",\n          links: [\n            { name: \"E-Commerce\", href: \"/solutions/ecommerce\" },\n            { name: \"SaaS Applications\", href: \"/solutions/saas\" },\n            { name: \"Mobile Backends\", href: \"/solutions/mobile\" },\n            { name: \"Enterprise Apps\", href: \"/solutions/enterprise\" },\n            { name: \"AI & Machine Learning\", href: \"/solutions/ai\" },\n          ],\n        },\n        {\n          title: \"Developers\",\n          links: [\n            { name: \"Getting Started\", href: \"/docs/getting-started\" },\n            { name: \"API Documentation\", href: \"/docs/api\" },\n            { name: \"SDK Libraries\", href: \"/docs/sdks\" },\n            { name: \"Integrations\", href: \"/docs/integrations\" },\n            { name: \"CLI Tools\", href: \"/docs/cli\" },\n          ],\n        },\n      ]}\n      socialLinks={[\n        { href: \"https://github.com/cloudbase\", label: \"GitHub\" },\n        { href: \"https://twitter.com/cloudbase\", label: \"Twitter\" },\n        { href: \"https://linkedin.com/company/cloudbase\", label: \"LinkedIn\" },\n        { href: \"https://youtube.com/@cloudbase\", label: \"YouTube\" },\n        { href: \"https://discord.gg/cloudbase\", label: \"Discord\" },\n      ]}\n      newsletterHeading=\"Stay Updated\"\n      newsletterDescription=\"Get the latest product updates, engineering blog posts, and cloud infrastructure insights delivered to your inbox.\"\n      newsletterPlaceholder=\"your@email.com\"\n      newsletterButtonText=\"Subscribe\"\n      socialTitle=\"Follow Us\"\n      copyright=\"CloudBase Inc.\"\n      legalLinks={[\n        { name: \"Privacy Policy\", href: \"/privacy\" },\n        { name: \"Terms of Service\", href: \"/terms\" },\n        { name: \"GDPR Compliance\", href: \"/gdpr\" },\n        { name: \"Security\", href: \"/security\" },\n      ]}\n      background=\"gray\"\n      spacing=\"xl\"\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,"mediaHints":{"path":"logo.src","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Brand logo above the nav sections. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"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}},"exampleProps":{"logo":{"url":"/","src":"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png","alt":"Company Logo","title":"Company"},"sections":[{"title":"Product","links":[{"name":"Features","href":"#"},{"name":"Pricing","href":"#"}]},{"title":"Company","links":[{"name":"About","href":"#"},{"name":"Blog","href":"#"}]}],"newsletterHeading":"Stay updated","newsletterDescription":"Get the latest news and updates delivered to your inbox.","newsletterPlaceholder":"Enter your email","newsletterButtonText":"Subscribe","socialTitle":"Follow Us","socialLinks":[{"href":"https://twitter.com/company","label":"Twitter"},{"href":"https://linkedin.com/company/acme","label":"LinkedIn"}],"copyright":"Acme Inc.","legalLinks":[{"name":"Privacy Policy","href":"#"},{"name":"Terms","href":"#"}]},"dependencies":["@opensite/ui"],"tags":["footer","navigation","social","newsletter","comprehensive","professional","corporate","complete"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. sections use { title, links: [{ name, href }] }. Newsletter form is a plain HTML input — requires formConfig: { token } to render. legalLinks use { name, href }. socialLinks use { href, label, iconNameOverride? }.","usageRequirements":{"requiredProps":[],"propConstraints":{},"requiresSiteCapabilities":["contact_form"],"mediaSlots":{"logo":{"path":"logo.src","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Brand logo above the nav sections. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}}}},{"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    <FooterNewsletterContact\n      newsletterTitle=\"Newsletter\"\n      newsletterDescription=\"Subscribe to receive exclusive deals, product launches, and insider tips delivered straight to your inbox every week.\"\n      formEngineSetup={{\n        api: demoFormEngineApi,\n        fields: formFields,\n        successMessage:\n          \"Thank you for subscribing! Check your inbox for a confirmation email.\",\n      }}\n      footerLinks={[\n        {\n          title: \"Shop\",\n          items: [\n            { text: \"New Arrivals\", link: \"/shop/new\" },\n            { text: \"Best Sellers\", link: \"/shop/bestsellers\" },\n            { text: \"Sale Items\", link: \"/shop/sale\" },\n            { text: \"Gift Cards\", link: \"/shop/giftcards\" },\n            { text: \"Collections\", link: \"/shop/collections\" },\n          ],\n        },\n        {\n          title: \"About\",\n          items: [\n            { text: \"Our Story\", link: \"/about\" },\n            { text: \"Sustainability\", link: \"/sustainability\" },\n            { text: \"Store Locations\", link: \"/stores\" },\n            { text: \"Careers\", link: \"/careers\" },\n            { text: \"Press\", link: \"/press\" },\n          ],\n        },\n      ]}\n      contactDetails={[\n        {\n          icon: \"lucide/phone\",\n          label: \"(555) 123-4567\",\n          link: \"+15551234567\",\n        },\n        {\n          icon: \"lucide/mail\",\n          label: \"support@fashionstore.com\",\n          link: \"support@fashionstore.com\",\n        },\n        {\n          icon: \"lucide/map-pin\",\n          label: (\n            <div className=\"space-y-0\">\n              <div>123 Fashion Avenue</div>\n              <div>New York, NY 10001</div>\n            </div>\n          ),\n          link: \"https://maps.app.goo.gl/gJrmVDMHcvEFkr4E7\",\n        },\n        {\n          icon: \"lucide/clock\",\n          label: (\n            <div className=\"space-y-0\">\n              <div>Mon-Fri: 9AM-8PM EST</div>\n              <div>Sat-Sun: 10AM-6PM EST</div>\n              <div className=\"flex flex-row gap-1\">\n                <span className=\"font-semibold\">Happy Hour</span>\n                <span>4-6 PM Daily</span>\n              </div>\n            </div>\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,"mediaHints":{"path":"logo.light / logo.dark","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Theme-aware brand logo shown as a separator between content and copyright. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"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}},"exampleProps":{"newsletterTitle":"Newsletter","newsletterDescription":"Subscribe for exclusive deals and the latest updates.","logo":{"light":"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png","dark":"https://cdn.ing/assets/i/r/287634/e4cmvu8nbwoqy2qer90t4gpap0ed/logo-light.png","url":"/"},"footerLinks":[{"title":"Company","items":[{"text":"About","link":"#"},{"text":"Careers","link":"#"}]},{"title":"Support","items":[{"text":"Help Center","link":"#"},{"text":"Contact","link":"#"}]}],"contactDetails":[{"icon":"lucide/mail","label":"support@company.com","type":"email","link":"mailto:support@company.com"},{"icon":"lucide/phone","label":"+1 (555) 000-0000","type":"phone","link":"tel:+15550000000"}],"socialLinks":[{"href":"https://twitter.com/company","label":"Twitter"},{"href":"https://instagram.com/company","label":"Instagram"}],"copyright":"Acme Inc."},"dependencies":["@opensite/ui"],"tags":["footer","newsletter","contact","social","links","ecommerce","business","navigation"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. Newsletter form requires formEngineSetup with a valid formConfig endpoint. contactDetails use { icon, label, type?, link? }. logo has { light, dark, url } for theme-aware logo rendering. socialLinks use { href, label, iconNameOverride? }.","usageRequirements":{"requiredProps":[],"propConstraints":{},"requiresSiteCapabilities":["contact_form","contact_info"],"mediaSlots":{"logo":{"path":"logo.light / logo.dark","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Theme-aware brand logo shown as a separator between content and copyright. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}}}},{"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 { 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    <FooterSplitImageAccordion\n      newsletterTitle=\"Join our community and save 20% on your first order\"\n      formEngineSetup={{\n        api: demoFormEngineApi,\n        fields: formFields,\n        successMessage:\n          \"Thank you for subscribing! Check your inbox for a confirmation email.\",\n      }}\n      footerLinks={[\n        {\n          title: \"Collections\",\n          id: \"collections\",\n          items: [\n            { text: \"New Arrivals\", link: \"#\" },\n            { text: \"Best Sellers\", link: \"#\" },\n            { text: \"Limited Edition\", link: \"#\" },\n            { text: \"Sale Items\", link: \"#\" },\n            { text: \"Gift Cards\", link: \"#\" },\n          ],\n        },\n        {\n          title: \"Customer Care\",\n          id: \"customer-care\",\n          items: [\n            { text: \"Contact Us\", link: \"#\" },\n            { text: \"Shipping Info\", link: \"#\" },\n            { text: \"Returns & Exchanges\", link: \"#\" },\n            { text: \"Size Guide\", link: \"#\" },\n            { text: \"FAQ\", link: \"#\" },\n          ],\n        },\n        {\n          title: \"About Us\",\n          id: \"about\",\n          items: [\n            { text: \"Our Story\", link: \"#\" },\n            { text: \"Sustainability\", link: \"#\" },\n            { text: \"Careers\", link: \"#\" },\n            { text: \"Press\", link: \"#\" },\n            { text: \"Store Locations\", link: \"#\" },\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      paymentPlatforms={[\n        \"contactless\",\n        \"bitcoin\",\n        \"amazon\",\n        \"samsung\",\n        \"afterpay\",\n        \"cashapp\",\n      ]}\n      submenuLinks={[\n        { text: \"Terms of Service\", link: \"#\" },\n        { text: \"Privacy Policy\", link: \"#\" },\n        { text: \"Accessibility\", link: \"#\" },\n      ]}\n      footerData={{\n        image: {\n          src: \"https://toastability-production.s3.amazonaws.com/e13qu3083lkhdg7th64vb628172a\",\n          alt: \"Luxury champagne wall with ambient lighting\",\n        },\n        logo: {\n          src: brandLogoPlaceholders.black[5],\n          url: \"/\",\n          alt: \"Footer Logo\",\n        },\n        heading: \"Elevate Your Style\",\n        description:\n          \"Discover curated collections of premium fashion and lifestyle products. Quality craftsmanship meets timeless design.\",\n      }}\n      copyright=\"Elevate Brand\"\n      background=\"white\"\n      spacing=\"none\"\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,"mediaHints":{"path":"footerData.logo.src","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Brand logo in the right content column. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"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}},"exampleProps":{"newsletterTitle":"Join our community and save 20% on your first order","footerData":{"image":{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Our brand story"},"logo":{"src":"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png","url":"/","alt":"Brand Logo"},"heading":"Elevate Your Style","description":"Discover curated collections of premium products with quality craftsmanship."},"footerLinks":[{"title":"Collections","id":"collections","items":[{"text":"New Arrivals","link":"#"},{"text":"Best Sellers","link":"#"}]},{"title":"Help","id":"help","items":[{"text":"FAQ","link":"#"},{"text":"Returns","link":"#"}]}],"socialLinks":[{"href":"https://instagram.com/brand","label":"Instagram"},{"href":"https://twitter.com/brand","label":"Twitter"}],"paymentPlatforms":["visa","mastercard","paypal","apple"],"submenuLinks":[{"text":"Terms of Service","link":"#"},{"text":"Privacy Policy","link":"#"}],"copyright":"Brand LLC"},"dependencies":["@opensite/ui"],"tags":["footer","split","image","accordion","newsletter","payment","ecommerce","fashion"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. footerData.image.src must be an absolute URL to a real image. footerData.logo.src must be an absolute URL to a real logo image. footerLinks use { title, id, items: [{ text, link? }] }. Newsletter form requires formEngineSetup with a valid formConfig endpoint. paymentPlatforms is an array of PaymentPlatformName strings. submenuLinks use { text, link? }.","usageRequirements":{"requiredProps":[],"propConstraints":{},"requiresSiteCapabilities":["contact_form"],"mediaSlots":{"heroImage":{"path":"footerData.image.src","roles":["feature"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":false,"note":"Large hero image filling the left column. Must be an absolute URL to a real lifestyle or product image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."},"logo":{"path":"footerData.logo.src","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Brand logo in the right content column. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}}}},{"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    <FooterAccordionSocial\n      logo={{\n        src: brandLogoPlaceholders.black[0],\n        alt: \"Your Brand Logo\",\n        url: \"/\",\n      }}\n      newsletterTitle=\"Stay In the Loop\"\n      newsletterDescription=\"Get the latest updates on new collections, exclusive offers, and insider news delivered straight to your inbox.\"\n      formEngineSetup={{\n        api: demoFormEngineApi,\n        fields: formFields,\n        successMessage:\n          \"Thank you for subscribing! Check your inbox for a confirmation email.\",\n      }}\n      footerLinks={[\n        {\n          title: \"Shop\",\n          id: \"shop\",\n          items: [\n            { text: \"New Arrivals\", href: \"#\" },\n            { text: \"Best Sellers\", href: \"#\" },\n            { text: \"Sale Items\", href: \"#\" },\n            { text: \"Gift Cards\", href: \"#\" },\n            { text: \"Collections\", href: \"#\" },\n          ],\n        },\n        {\n          title: \"Company\",\n          id: \"company\",\n          items: [\n            { text: \"About Us\", href: \"#\" },\n            { text: \"Our Story\", href: \"#\" },\n            { text: \"Careers\", href: \"#\" },\n            { text: \"Press\", href: \"#\" },\n            { text: \"Blog\", href: \"#\" },\n          ],\n        },\n        {\n          title: \"Support\",\n          id: \"support\",\n          items: [\n            { text: \"Help Center\", href: \"#\" },\n            { text: \"Shipping Info\", href: \"#\" },\n            { text: \"Returns\", href: \"#\" },\n            { text: \"Size Guide\", href: \"#\" },\n            { text: \"Track Order\", href: \"#\" },\n          ],\n        },\n      ]}\n      socialLinks={[\n        {\n          href: \"https://facebook.com\",\n          label: \"Follow us on Facebook\",\n        },\n        {\n          href: \"https://instagram.com\",\n          label: \"Follow us on Instagram\",\n        },\n        {\n          href: \"https://twitter.com\",\n          label: \"Follow us on Twitter\",\n        },\n        {\n          href: \"https://pinterest.com\",\n          label: \"Follow us on Pinterest\",\n        },\n        {\n          href: \"https://youtube.com\",\n          label: `Subscribe to our YouTube channel: ${platform}`,\n        },\n      ]}\n      copyright=\"Your Brand\"\n      background=\"gray\"\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,"mediaHints":{"path":"logo.src","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Brand logo shown above the newsletter section. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"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}},"exampleProps":{"logo":{"src":"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png","url":"/","alt":"Company Logo"},"newsletterTitle":"Stay in the loop","newsletterDescription":"Get updates on new products and exclusive offers.","footerLinks":[{"title":"Shop","id":"shop","items":[{"text":"New Arrivals","href":"#"},{"text":"Best Sellers","href":"#"}]},{"title":"Support","id":"support","items":[{"text":"FAQ","href":"#"},{"text":"Contact","href":"#"}]}],"socialLinks":[{"href":"https://instagram.com/brand","label":"Instagram"},{"href":"https://twitter.com/brand","label":"Twitter"},{"href":"https://facebook.com/brand","label":"Facebook"}],"copyright":"Brand LLC"},"dependencies":["@opensite/ui"],"tags":["footer","accordion","social","newsletter","responsive","ecommerce","retail","navigation"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. Newsletter form requires formEngineSetup with a valid formConfig endpoint. footerLinks use { title, id, items: [{ text, href }] } — note 'href' not 'link'. logo uses { src, url?, alt? } — a simpler shape than FooterLogo. socialLinks use { href, label, iconNameOverride? }.","usageRequirements":{"requiredProps":[],"propConstraints":{},"requiresSiteCapabilities":["contact_form"],"mediaSlots":{"logo":{"path":"logo.src","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Brand logo shown above the newsletter section. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}}}},{"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 { brandLogoPlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <FooterInfoCardsAccordion\n      newsletterTitle=\"Join our community\"\n      newsletterDescription=\"Get exclusive access to special offers, product launches, and expert tips delivered straight to your inbox every week.\"\n      emailPlaceholder=\"Enter your email address\"\n      subscribeText=\"Subscribe Now\"\n      termsText=\"By subscribing, you agree to our\"\n      termsLinkText=\"Terms of Service\"\n      termsLinkUrl=\"/terms\"\n      privacyLinkText=\"Privacy Policy\"\n      privacyLinkUrl=\"/privacy\"\n      infoItems={[\n        {\n          icon: \"lucide/phone\",\n          title: \"Call Us Anytime\",\n          text: \"+1 (800) 555-0123\",\n          link: \"tel:+18005550123\",\n        },\n        {\n          icon: \"lucide/mail\",\n          title: \"Email Support\",\n          text: \"support@luxemart.com\",\n          link: \"mailto:support@luxemart.com\",\n        },\n        {\n          icon: \"lucide/map-pin\",\n          title: \"Visit Our Showroom\",\n          text: \"789 Luxury Avenue, Beverly Hills, CA 90210\",\n          link: \"https://maps.google.com/?q=789+Luxury+Avenue+Beverly+Hills+CA+90210\",\n        },\n        {\n          icon: \"lucide/clock\",\n          title: \"Business Hours\",\n          text: \"Mon-Sat: 9AM-8PM, Sun: 10AM-6PM\",\n        },\n      ]}\n      footerLinks={[\n        {\n          title: \"Shop\",\n          id: \"shop\",\n          items: [\n            { text: \"New Arrivals\", link: \"/new-arrivals\" },\n            { text: \"Best Sellers\", link: \"/best-sellers\" },\n            { text: \"Sale Items\", link: \"/sale\" },\n            { text: \"Men's Collection\", link: \"/mens\" },\n            { text: \"Women's Collection\", link: \"/womens\" },\n            { text: \"Accessories\", link: \"/accessories\" },\n            { text: \"Gift Cards\", link: \"/gift-cards\" },\n          ],\n        },\n        {\n          title: \"Customer Care\",\n          id: \"customer-care\",\n          items: [\n            { text: \"Track Your Order\", link: \"/track-order\" },\n            { text: \"Shipping Info\", link: \"/shipping\" },\n            { text: \"Returns & Exchanges\", link: \"/returns\" },\n            { text: \"Size Guide\", link: \"/size-guide\" },\n            { text: \"Product Care\", link: \"/product-care\" },\n            { text: \"FAQ\", link: \"/faq\" },\n            { text: \"Contact Us\", link: \"/contact\" },\n          ],\n        },\n        {\n          title: \"About Us\",\n          id: \"about\",\n          items: [\n            { text: \"Our Story\", link: \"/story\" },\n            { text: \"Sustainability\", link: \"/sustainability\" },\n            { text: \"Careers\", link: \"/careers\" },\n            { text: \"Press Room\", link: \"/press\" },\n            { text: \"Store Locator\", link: \"/stores\" },\n            { text: \"Affiliate Program\", link: \"/affiliates\" },\n            { text: \"Partnership Opportunities\", link: \"/partnerships\" },\n          ],\n        },\n      ]}\n      socialLinks={[\n        {\n          href: \"https://instagram.com/luxemart\",\n          label: \"Follow LuxeMart on Instagram\",\n        },\n        {\n          href: \"https://facebook.com/luxemart\",\n          label: \"Like LuxeMart on Facebook\",\n        },\n        {\n          href: \"https://twitter.com/luxemart\",\n          label: \"Follow LuxeMart on Twitter\",\n        },\n        {\n          href: \"https://pinterest.com/luxemart\",\n          label: \"Follow LuxeMart on Pinterest\",\n        },\n        {\n          href: \"https://youtube.com/@luxemart\",\n          label: \"Subscribe to LuxeMart on YouTube\",\n        },\n      ]}\n      paymentPlatforms={[\n        \"visa\",\n        \"mastercard\",\n        \"venmo\",\n        \"apple\",\n        \"google\",\n        \"paypal\",\n      ]}\n      submenuLinks={[\n        { text: \"Accessibility\", link: \"/accessibility\" },\n        { text: \"Security\", link: \"/security\" },\n        { text: \"Cookie Preferences\", link: \"/cookies\" },\n        { text: \"Do Not Sell My Info\", link: \"/privacy-rights\" },\n      ]}\n      footerDetails={{\n        image: {\n          src: \"https://toastability-production.s3.amazonaws.com/uv0g605yf5mz106nrm1uspt9l0rr\",\n          alt: \"LuxeMart luxury shopping experience\",\n        },\n        logo: {\n          light: brandLogoPlaceholders.black[3],\n          dark: brandLogoPlaceholders.white[3],\n        },\n        logoUrl: \"/\",\n        description:\n          \"LuxeMart is your premier destination for curated luxury goods and timeless fashion. We partner with the world's most prestigious brands to bring you exceptional quality, craftsmanship, and style. Every purchase is backed by our 30-day satisfaction guarantee and white-glove customer service.\",\n      }}\n      copyright=\"LuxeMart Corporation\"\n      patternOpacity={0.05}\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,"mediaHints":{"path":"footerDetails.logo.light / footerDetails.logo.dark","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Theme-aware brand logo in the brand column. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"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}},"exampleProps":{"newsletterTitle":"Join our community","newsletterDescription":"Get exclusive access to special offers and expert tips.","emailPlaceholder":"Enter your email address","subscribeText":"Subscribe Now","termsText":"By subscribing, you agree to our","termsLinkText":"Terms of Service","termsLinkUrl":"/terms","privacyLinkText":"Privacy Policy","privacyLinkUrl":"/privacy","infoItems":[{"icon":"lucide/phone","title":"Call Us Anytime","text":"+1 (800) 555-0123","link":"tel:+18005550123"},{"icon":"lucide/mail","title":"Email Support","text":"support@store.com","link":"mailto:support@store.com"}],"footerDetails":{"image":{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Our brand experience"},"logo":{"light":"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png","dark":"https://cdn.ing/assets/i/r/287634/e4cmvu8nbwoqy2qer90t4gpap0ed/logo-light.png"},"logoUrl":"/","description":"Your premier destination for curated products. Every purchase is backed by our 30-day satisfaction guarantee."},"footerLinks":[{"title":"Shop","id":"shop","items":[{"text":"New Arrivals","link":"#"},{"text":"Best Sellers","link":"#"}]},{"title":"Help","id":"help","items":[{"text":"FAQ","link":"#"},{"text":"Returns & Exchanges","link":"#"}]}],"socialLinks":[{"href":"https://instagram.com/store","label":"Instagram"},{"href":"https://twitter.com/store","label":"Twitter"}],"paymentPlatforms":["visa","mastercard","paypal","apple"],"submenuLinks":[{"text":"Accessibility","link":"/accessibility"},{"text":"Cookie Preferences","link":"/cookies"}],"copyright":"Store Corporation"},"dependencies":["@opensite/ui"],"tags":["footer","info","cards","accordion","newsletter","payment","contact","ecommerce","service"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. footerDetails.image.src must be an absolute URL to a real image. footerDetails.logo has { light, dark } and logoUrl for theme-aware rendering. footerLinks use { title, id, items: [{ text, link? }] }. infoItems use { icon, title, text, link? } for contact cards. paymentPlatforms is an array of PaymentPlatformName strings. submenuLinks use { text, link? }.","usageRequirements":{"requiredProps":[],"propConstraints":{},"requiresSiteCapabilities":["contact_form","contact_info"],"mediaSlots":{"newsletterImage":{"path":"footerDetails.image.src","roles":["feature"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":false,"note":"Hero image shown alongside the newsletter section. Must be an absolute URL to a real lifestyle or product image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."},"logo":{"path":"footerDetails.logo.light / footerDetails.logo.dark","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Theme-aware brand logo in the brand column. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}}}}]},"timestamp":"2026-06-27T18:48:09.800Z"}