{"success":true,"data":{"block":{"id":"footer-background-card","name":"Footer Background Card","title":"Footer Background Card","category":"Footer","categorySlug":"footer","description":"A footer with background image and floating contact card. Features a full-width background image with a floating card containing profile image, personal message, CTA button, navigation links, and contact information. Ideal for creative professionals, agencies, portfolios, and businesses that want a visually striking footer with a personal touch.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290440/803ii0wnc443so1iezix0nhcr78f/footer-background-card-desktop.png","mobile":"https://cdn.ing/assets/i/r/290441/xb6qt4mygsnl5ppcxwtuem321ve5/footer-background-card-mobile.png"},"componentPath":"blocks/footers/footer-background-card.tsx","code":"import { FooterBackgroundCard } from \"@opensite/ui/blocks/footers/footer-background-card\";\nimport { imagePlaceholders, brandLogoPlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <FooterBackgroundCard\n      logo={{\n        url: \"/\",\n        src: brandLogoPlaceholders.black[2],\n        alt: \"Company Logo\",\n        title: \"Your Agency\",\n      }}\n      backgroundImage={imagePlaceholders[99]}\n      profileImage={imagePlaceholders[72]}\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},"backgroundImage":{"type":"string","description":"Background image URL","required":false},"profileImage":{"type":"string","description":"Profile image URL","required":false},"tagline":{"type":"object","description":"Tagline text","typeLabel":"React.ReactNode","required":false},"personalMessage":{"type":"object","description":"Personal message text","typeLabel":"React.ReactNode","required":false},"ctaText":{"type":"object","description":"CTA button text","typeLabel":"React.ReactNode","required":false},"ctaUrl":{"type":"string","description":"CTA button URL","required":false},"contactTitle":{"type":"object","description":"Contact section title","typeLabel":"React.ReactNode","required":false},"contact":{"type":"object","description":"Contact information","fields":{"phone":{"type":"string","description":"Phone number","required":false},"email":{"type":"string","description":"Email address","required":false},"location":{"type":"string","description":"Location","required":false},"timezone":{"type":"string","description":"Timezone","required":false}},"typeLabel":"FooterBackgroundCardContact","required":false},"menuItems":{"type":"array","description":"Menu items","items":{"type":"object","description":"","fields":{"title":{"type":"string","description":"Menu section title","required":true},"links":{"type":"array","description":"Links in this section","items":{"type":"object","description":"","fields":{"text":{"type":"string","description":"Link text","required":true},"url":{"type":"string","description":"Link URL","required":true}},"typeLabel":"FooterBackgroundCardLink"},"typeLabel":"FooterBackgroundCardLink[]","required":true}},"typeLabel":"FooterBackgroundCardMenuItem"},"typeLabel":"FooterBackgroundCardMenuItem[]","required":false},"copyright":{"type":"string","description":"Brand/company name for the copyright notice","required":false},"bottomLinks":{"type":"array","description":"Bottom links","items":{"type":"object","description":"","fields":{"text":{"type":"string","description":"Link text","required":true},"url":{"type":"string","description":"Link URL","required":true}},"typeLabel":"FooterBackgroundCardLink"},"typeLabel":"FooterBackgroundCardLink[]","required":false},"logoWrapperClassName":{"type":"string","description":"Additional CSS classes for the logo wrapper","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo image","required":false},"className":{"type":"string","description":"Additional CSS classes for the section wrapper","required":false},"cardClassName":{"type":"string","description":"Additional CSS classes for the card wrapper","required":false},"gridClassName":{"type":"string","description":"Additional CSS classes for the grid layout","required":false},"profileSectionClassName":{"type":"string","description":"Additional CSS classes for the profile section","required":false},"profileImageClassName":{"type":"string","description":"Additional CSS classes for the profile image","required":false},"taglineClassName":{"type":"string","description":"Additional CSS classes for the tagline","required":false},"messageClassName":{"type":"string","description":"Additional CSS classes for the personal message","required":false},"ctaClassName":{"type":"string","description":"Additional CSS classes for the CTA button","required":false},"menuSectionClassName":{"type":"string","description":"Additional CSS classes for menu sections","required":false},"menuTitleClassName":{"type":"string","description":"Additional CSS classes for menu titles","required":false},"menuLinkClassName":{"type":"string","description":"Additional CSS classes for menu links","required":false},"contactSectionClassName":{"type":"string","description":"Additional CSS classes for the contact section","required":false},"contactTitleClassName":{"type":"string","description":"Additional CSS classes for the contact title","required":false},"contactItemClassName":{"type":"string","description":"Additional CSS classes for contact items","required":false},"bottomClassName":{"type":"string","description":"Additional CSS classes for the bottom section","required":false},"copyrightClassName":{"type":"string","description":"Additional CSS classes for the copyright section","required":false},"bottomLinksClassName":{"type":"string","description":"Additional CSS classes for bottom links","required":false},"background":{"type":"string","description":"Section background variant","typeLabel":"SectionBackground","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"spacing":{"type":"object","description":"Section spacing variant","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern opacity (0-1)","required":false},"optixFlowConfig":{"type":"object","description":"Optional Optix Flow configuration for","fields":{"apiKey":{"type":"string","description":"API key for OptixFlow service","required":true},"compression":{"type":"number","description":"Compression level (0-100)","required":false}},"typeLabel":"OptixFlowConfig","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["footer","background","image","card","creative","portfolio","agency","personal","visual"],"performance":{},"importantUsageNotes":"This footer renders as a full-bleed card with a background image, profile image, personal message, 3-column menu navigation, and contact info. Supply exactly 3 'menuItems' sections (the demo canonical count), each with 4-6 links. Only supply real 'contact' data points (email, phone, location, timezone) — DO NOT invent any contact data; omit fields the brand has not provided. Only set 'logo.src' if a real brand logo is in the media library. Only include 'bottomLinks' (privacy, terms, etc.) if those pages actually exist on the site. DO NOT USE this block if you do not have a real background image and a profile/representative image. Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:42:11.615Z"}