{"success":true,"data":{"category":{"slug":"link-page","name":"Link Page","description":"Collection of link page components"},"blocks":[{"id":"link-tree-block","name":"Link Tree Block","title":"Link Tree Block","category":"Link Page","categorySlug":"link-page","description":"A customizable link-in-bio style page component with three theme variations (light, dark, glass). Features brand header with avatar and verified badge, customizable link list with icons, descriptions, badges and featured states, media gallery for images and videos, social media links, and background pattern customization. Ideal for creators, influencers, and businesses needing a comprehensive link page.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/306295/an5cx8unhvpjs0mzy927rhe6mcxj/link-tree-block-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/306296/9q68brz8mc8bl62ist21jicdwcvn/link-tree-block-mobile.jpg"},"componentPath":"blocks/link-page/link-tree-block.tsx","code":"import { LinkTreeBlock } from \"@opensite/ui/blocks/link-page/link-tree-block\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <LinkTreeBlock\n      brandName=\"Creative Studio\"\n      brandTagline=\"Award-winning design & branding agency\"\n      brandAvatar={{\n        src: \"https://cdn.ing/assets/i/r/287634/e4cmvu8nbwoqy2qer90t4gpap0ed/logo-light.png\",\n        alt: \"Creative Studio\",\n      }}\n      logo={{\n        src: \"https://cdn.ing/assets/i/r/287634/e4cmvu8nbwoqy2qer90t4gpap0ed/logo-light.png\",\n        alt: \"Creative Studio\",\n      }}\n      brandVerified={false}\n      socialLinks={[\n        {\n          href: \"https://instagram.com/@client-username\",\n        },\n        {\n          href: \"https://x.com/client-username\",\n        },\n        {\n          href: \"https://linkedin.com/:client-linkedin\",\n        },\n        {\n          href: \"https://youtube.com/@client-channel\",\n        },\n      ]}\n      links={[\n        {\n          id: \"1\",\n          label: \"Featured Project\",\n          description: \"New Brand Identity Launch\",\n          href: \"#\",\n          iconName: \"lucide/star\",\n          featured: true,\n          badge: \"New\",\n        },\n        {\n          id: \"2\",\n          label: \"Our Portfolio\",\n          description: \"View our latest work\",\n          href: \"#\",\n          iconName: \"lucide/briefcase\",\n        },\n        {\n          id: \"3\",\n          label: \"Services & Pricing\",\n          description: \"Discover what we offer\",\n          href: \"#\",\n          iconName: \"lucide/package\",\n        },\n        {\n          id: \"4\",\n          label: \"Client Testimonials\",\n          description: \"Hear from our clients\",\n          href: \"#\",\n          iconName: \"lucide/message-circle\",\n        },\n        {\n          id: \"5\",\n          label: \"Free Consultation\",\n          description: \"Book a 30-minute call\",\n          href: \"#\",\n          iconName: \"lucide/calendar\",\n          badge: \"Limited\",\n        },\n        {\n          id: \"6\",\n          label: \"Contact Us\",\n          description: \"Get in touch\",\n          href: \"#\",\n          iconName: \"lucide/mail\",\n        },\n      ]}\n      mediaGalleryTitle=\"Recent Work\"\n      mediaGallery={[\n        {\n          id: \"1\",\n          type: \"image\",\n          src: \"https://toastability-production.s3.amazonaws.com/yw5f7iwyypf4kctpr5ye5e495swt\",\n          alt: \"Project showcase 1\",\n          href: \"https://example.com/project1\",\n        },\n        {\n          id: \"2\",\n          type: \"image\",\n          src: \"https://toastability-production.s3.amazonaws.com/z37cidvud212bzqhhalrhvk7ipaa\",\n          alt: \"Project showcase 2\",\n          href: \"https://example.com/project2\",\n        },\n        {\n          id: \"3\",\n          type: \"image\",\n          src: \"https://toastability-production.s3.amazonaws.com/pfllskt7q7144l288lrnpc6gx606\",\n          alt: \"Project showcase 3\",\n          href: \"https://example.com/project3\",\n        },\n        {\n          id: \"4\",\n          type: \"image\",\n          src: \"https://toastability-production.s3.amazonaws.com/fokd3hxzvdtsomagbfhqooyvndyv\",\n          alt: \"Project showcase 4\",\n          href: \"https://example.com/project4\",\n        },\n        {\n          id: \"5\",\n          type: \"image\",\n          src: \"https://toastability-production.s3.amazonaws.com/6fffnb4phovtqkjhtzifs4rhb84u\",\n          alt: \"Project showcase 5\",\n          href: \"#\",\n        },\n        {\n          id: \"6\",\n          type: \"image\",\n          src: \"https://toastability-production.s3.amazonaws.com/mt87xjr79wxdhjy7496v3r6m2m9t\",\n          alt: \"Project showcase 6\",\n          href: \"#\",\n        },\n      ]}\n      footerAction={{\n        label: \"Powered by OpenSite\",\n        href: \"https://opensite.ai\",\n        iconAfter: <DynamicIcon name=\"lucide/arrow-up-right\" size={16} />,\n      }}\n      spacing=\"xl\"\n      patternOpacity={0.33}\n      pattern=\"diagonalCrossFadeCenter\"\n      background=\"dark\"\n    />\n  );\n}","propsSchema":{"brandName":{"type":"object","description":"Brand/profile name displayed at the top","typeLabel":"React.ReactNode","required":true,"maxLength":60},"brandTagline":{"type":"object","description":"Optional tagline or bio displayed below the name","typeLabel":"React.ReactNode","required":false,"maxLength":120},"brandLogo":{"type":"object","description":"Optional logo image (used if no avatar is provided)","typeLabel":"ImageItem | string","required":false},"brandAvatar":{"type":"object","description":"Optional avatar image (takes precedence over logo)","typeLabel":"ImageItem | string","required":false,"mediaHints":{"path":"brandAvatar.src","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Brand avatar or profile logo displayed in the header. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"brandVerified":{"type":"boolean","description":"Whether to show a verified badge next to the name","required":false},"verifiedIcon":{"type":"object","description":"Custom verified icon","typeLabel":"React.ReactNode","required":false},"brandSlot":{"type":"object","description":"Custom slot for rendering brand header","typeLabel":"React.ReactNode","required":false},"logo":{"type":"object","description":"Optional LogoConfig for BrandLogo rendering (takes priority over avatar)","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false},"logoSlot":{"type":"object","description":"Custom slot for the logo/avatar (takes priority over logo and avatar)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo image","required":false},"links":{"type":"array","description":"Array of links to display","items":{"type":"object","description":"","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},"id":{"type":"string","description":"","required":false},"description":{"type":"object","description":"","typeLabel":"React.ReactNode","required":false},"featured":{"type":"boolean","description":"","required":false},"badge":{"type":"object","description":"","typeLabel":"React.ReactNode","required":false},"badgeVariant":{"type":"string","description":"","typeLabel":"\"default\" | \"secondary\" | \"destructive\" | \"outline\"","required":false},"iconName":{"type":"string","description":"","required":false}},"typeLabel":"LinkTreeLink"},"typeLabel":"LinkTreeLink[]","required":false},"linksSlot":{"type":"object","description":"Custom slot for rendering links (overrides links array)","typeLabel":"React.ReactNode","required":false},"socialLinks":{"type":"array","description":"Array of social media links","items":{"type":"object","description":"","fields":{"platformName":{"type":"object","description":"Social platform name - determines which icon to display.\nIf not provided, the platform is auto-detected from the href URL.","typeLabel":"SocialPlatformName","required":false},"platform":{"type":"object","description":"","typeLabel":"SocialPlatformName","required":false},"href":{"type":"string","description":"Link URL (required). Platform is auto-detected from this URL if platformName is not set.","required":true},"label":{"type":"string","description":"Display label for the link (used for aria-label if not specified)","required":false},"icon":{"type":"object","description":"Platform icon (ReactNode) - overrides automatic icon selection","typeLabel":"ReactNode","required":false},"iconNameOverride":{"type":"string","description":"Icon name override for DynamicIcon (e.g., \"lucide/twitter\")","required":false},"iconSize":{"type":"number","description":"Icon size in pixels","required":false},"iconColor":{"type":"string","description":"Icon color - accepts any valid CSS color","required":false},"iconClassName":{"type":"string","description":"Additional CSS classes for the icon","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"className":{"type":"string","description":"Additional CSS classes for the link wrapper","required":false},"id":{"type":"string","description":"","required":false},"iconName":{"type":"string","description":"","required":false}},"typeLabel":"SocialLink"},"typeLabel":"SocialLink[]","required":false},"socialLinksSlot":{"type":"object","description":"Custom slot for rendering social links (overrides socialLinks array)","typeLabel":"React.ReactNode","required":false},"mediaGallery":{"type":"array","description":"Array of media items for the gallery section","items":{"type":"object","description":"","fields":{"id":{"type":"string","description":"","required":false},"type":{"type":"string","description":"","typeLabel":"\"image\" | \"video\"","required":true},"src":{"type":"string","description":"","required":true},"alt":{"type":"string","description":"","required":false},"href":{"type":"string","description":"","required":false},"poster":{"type":"string","description":"","required":false},"className":{"type":"string","description":"","required":false},"mediaClassName":{"type":"string","description":"","required":false}},"typeLabel":"MediaGalleryItem"},"typeLabel":"MediaGalleryItem[]","required":false,"mediaHints":{"path":"mediaGallery[].src","roles":["feature","gallery"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":false,"preferredAspect":"1:1","note":"Gallery thumbnail image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"mediaGallerySlot":{"type":"object","description":"Custom slot for rendering media gallery (overrides mediaGallery array)","typeLabel":"React.ReactNode","required":false},"mediaGalleryTitle":{"type":"object","description":"Title for the media gallery section","typeLabel":"React.ReactNode","required":false},"mediaGalleryLimit":{"type":"number","description":"Maximum number of media items to show","required":false},"footerAction":{"type":"object","description":"Footer action 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},"footerSlot":{"type":"object","description":"Custom slot for rendering footer content","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the outer wrapper","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the inner content container","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the brand header","required":false},"avatarClassName":{"type":"string","description":"Additional CSS classes for the avatar wrapper","required":false},"nameClassName":{"type":"string","description":"Additional CSS classes for the brand name","required":false},"taglineClassName":{"type":"string","description":"Additional CSS classes for the brand tagline","required":false},"verifiedBadgeClassName":{"type":"string","description":"Additional CSS classes for the verified badge container","required":false},"verifiedIconClassName":{"type":"string","description":"Additional CSS classes for the verified icon","required":false},"linksClassName":{"type":"string","description":"Additional CSS classes for the links container","required":false},"linkClassName":{"type":"string","description":"Additional CSS classes for link items","required":false},"featuredLinkClassName":{"type":"string","description":"Additional CSS classes for featured link items","required":false},"linkIconClassName":{"type":"string","description":"Additional CSS classes for link icons","required":false},"linkLabelClassName":{"type":"string","description":"Additional CSS classes for link labels","required":false},"linkDescriptionClassName":{"type":"string","description":"Additional CSS classes for link descriptions","required":false},"linkBadgeClassName":{"type":"string","description":"Additional CSS classes for link badges","required":false},"linkChevronClassName":{"type":"string","description":"Additional CSS classes for link chevron icon","required":false},"mediaGalleryClassName":{"type":"string","description":"Additional CSS classes for the media gallery section","required":false},"mediaGalleryTitleClassName":{"type":"string","description":"Additional CSS classes for the media gallery title","required":false},"mediaGalleryGridClassName":{"type":"string","description":"Additional CSS classes for the media gallery grid","required":false},"mediaGalleryItemClassName":{"type":"string","description":"Additional CSS classes for media gallery items","required":false},"mediaGalleryMediaClassName":{"type":"string","description":"Additional CSS classes for media elements","required":false},"mediaGalleryOverlayClassName":{"type":"string","description":"Additional CSS classes for media overlay","required":false},"mediaGalleryPlayIconClassName":{"type":"string","description":"Additional CSS classes for media play icon","required":false},"socialLinksClassName":{"type":"string","description":"Additional CSS classes for the social links container","required":false},"socialLinkClassName":{"type":"string","description":"Additional CSS classes for each social link","required":false},"socialIconClassName":{"type":"string","description":"Additional CSS classes for social icons","required":false},"footerClassName":{"type":"string","description":"Additional CSS classes for the footer","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","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},"backgroundPattern":{"type":"object","description":"Background pattern URL (legacy)","fields":{},"typeLabel":"PatternName","required":false},"optixFlowConfig":{"type":"object","description":"OptixFlow image optimization configuration","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},"links[]":{"type":"object","description":"","required":false,"minItems":1,"maxItems":12},"links[].label":{"type":"object","description":"","required":true,"maxLength":50},"links[].description":{"type":"object","description":"","required":false,"maxLength":80},"links[].href":{"type":"object","description":"","required":true},"links[].iconName":{"type":"object","description":"","required":false},"links[].featured":{"type":"object","description":"","required":false},"links[].badge":{"type":"object","description":"","required":false,"maxLength":20},"mediaGallery[]":{"type":"object","description":"","required":false,"minItems":3,"maxItems":6},"mediaGallery[].src":{"type":"object","description":"","required":true},"mediaGallery[].type":{"type":"object","description":"","required":true},"socialLinks[]":{"type":"object","description":"","required":false,"minItems":1,"maxItems":8},"socialLinks[].href":{"type":"object","description":"","required":true}},"exampleProps":{"brandName":"Creative Studio","brandTagline":"Award-winning design & branding agency","brandAvatar":{"src":"https://cdn.ing/assets/i/r/287634/e4cmvu8nbwoqy2qer90t4gpap0ed/logo-light.png","alt":"Creative Studio"},"brandVerified":false,"socialLinks":[{"href":"https://instagram.com/@handle"},{"href":"https://x.com/handle"},{"href":"https://linkedin.com/company/handle"}],"links":[{"id":"1","label":"Featured Project","description":"New Brand Identity Launch","href":"https://example.com/project","iconName":"lucide/star","featured":true,"badge":"New"},{"id":"2","label":"Our Portfolio","description":"View our latest work","href":"https://example.com/portfolio","iconName":"lucide/briefcase"},{"id":"3","label":"Services & Pricing","description":"Discover what we offer","href":"https://example.com/services","iconName":"lucide/package"},{"id":"4","label":"Free Consultation","description":"Book a 30-minute call","href":"https://example.com/consult","iconName":"lucide/calendar","badge":"Limited"}],"mediaGalleryTitle":"Recent Work","mediaGallery":[{"id":"1","type":"image","src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Project showcase 1"},{"id":"2","type":"image","src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Project showcase 2"},{"id":"3","type":"image","src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Project showcase 3"}],"footerAction":{"label":"Powered by OpenSite","href":"https://opensite.ai"},"background":"dark","pattern":"diagonalCrossFadeCenter","patternOpacity":0.33},"dependencies":["@opensite/ui"],"tags":["link-page","link-tree","bio-link","linktree","profile","creator","influencer","social","media-gallery","links"],"performance":{},"importantUsageNotes":"Full-featured link-in-bio page. The brandAvatar/brandLogo prop accepts an ImageItem object with an absolute src URL — it is typically a logo or profile image. links[] items support featured highlighting, badges, icons, and descriptions. mediaGallery[] renders a 3-column grid of images or videos. socialLinks[] are resolved automatically from the href domain. Provide at least 3 links for a useful layout; gallery is optional.","usageRequirements":{"requiredProps":["brandName"],"propConstraints":{"brandName":{"required":true,"maxLength":60},"brandTagline":{"required":false,"maxLength":120},"links[]":{"required":false,"minItems":1,"maxItems":12},"links[].label":{"required":true,"maxLength":50},"links[].description":{"required":false,"maxLength":80},"links[].href":{"required":true},"links[].iconName":{"required":false,"note":"Iconify icon name, e.g. lucide/globe"},"links[].featured":{"required":false,"note":"Highlights the link with primary styling"},"links[].badge":{"required":false,"maxLength":20},"mediaGallery[]":{"required":false,"minItems":3,"maxItems":6},"mediaGallery[].src":{"required":true},"mediaGallery[].type":{"required":true,"note":"Must be 'image' or 'video'"},"socialLinks[]":{"required":false,"minItems":1,"maxItems":8},"socialLinks[].href":{"required":true,"note":"Platform inferred from URL"}},"mediaSlots":{"brandAvatar":{"path":"brandAvatar.src","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Brand avatar or profile logo displayed in the header. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."},"mediaGallery[].src":{"path":"mediaGallery[].src","roles":["feature","gallery"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":false,"preferredAspect":"1:1","note":"Gallery thumbnail image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["media_library"],"notes":["All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","brandAvatar and brandLogo accept ImageItem ({ src, alt }) or a plain string URL.","mediaGallery items with type 'video' should provide a poster URL for the thumbnail."]}},{"id":"link-page-minimal-profile","name":"Link Page Minimal Profile","title":"Link Page Minimal Profile","category":"Link Page","categorySlug":"link-page","description":"A clean, minimal link page focused on simplicity. Features a streamlined avatar and name display, optional bio text, simple link list with subtle hover effects, and social icons at the bottom. Supports light and dark themes. Ideal for professionals, developers, and anyone who prefers a minimalist aesthetic for their link page.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/306298/rdaope6f7663kkct4eiznvq2otlc/link-page-minimal-profile-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/306297/u0o3cx1ms82t6fub6p7u123frxwi/link-page-minimal-profile-mobile.jpg"},"componentPath":"blocks/link-page/link-page-minimal-profile.tsx","code":"import { LinkPageMinimalProfile } from \"@opensite/ui/blocks/link-page/link-page-minimal-profile\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <LinkPageMinimalProfile\n      name=\"Alex Rivera\"\n      bio=\"Software Engineer & Open Source Contributor\"\n      avatar={{\n        src: \"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png\",\n        alt: \"Alex Rivera\",\n      }}\n      logo={{\n        src: \"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png\",\n        alt: \"Alex Rivera\",\n      }}\n      links={[\n        {\n          id: \"1\",\n          label: \"Personal Website\",\n          href: \"https://example.com\",\n          iconName: \"lucide/globe\",\n        },\n        {\n          id: \"2\",\n          label: \"GitHub Projects\",\n          href: \"https://github.com\",\n          iconName: \"simple-icons/github\",\n        },\n        {\n          id: \"3\",\n          label: \"Technical Blog\",\n          href: \"https://example.com/blog\",\n          iconName: \"lucide/pen-line\",\n        },\n        {\n          id: \"4\",\n          label: \"npm Packages\",\n          href: \"https://npmjs.com\",\n          iconName: \"simple-icons/npm\",\n        },\n        {\n          id: \"5\",\n          label: \"Resume / CV\",\n          href: \"https://example.com/resume\",\n          iconName: \"lucide/file-user\",\n        },\n        {\n          id: \"6\",\n          label: \"Email Me\",\n          href: \"mailto:alex@example.com\",\n          iconName: \"lucide/mail\",\n        },\n      ]}\n      socialLinks={[\n        {\n          href: \"https://github.com\",\n        },\n        {\n          href: \"https://linkedin.com\",\n        },\n        {\n          href: \"https://twitter.com\",\n        },\n        {\n          href: \"https://dev.to\",\n        },\n      ]}\n      footerAction={{\n        label: \"Powered by OpenSite\",\n        href: \"https://opensite.ai\",\n        iconAfter: <DynamicIcon name=\"lucide/link\" size={16} />,\n      }}\n      spacing=\"xl\"\n      pattern=\"architect\"\n      patternOpacity={0.08}\n      background=\"gray\"\n    />\n  );\n}","propsSchema":{"name":{"type":"object","description":"Profile name displayed at the top","typeLabel":"React.ReactNode","required":true,"maxLength":60},"bio":{"type":"object","description":"Optional bio or description","typeLabel":"React.ReactNode","required":false,"maxLength":140},"avatar":{"type":"object","description":"Avatar image configuration","fields":{"src":{"type":"string","description":"Image source URL","required":true},"alt":{"type":"string","description":"Alt text for accessibility","required":true},"href":{"type":"string","description":"Optional link URL","required":false},"className":{"type":"string","description":"Additional CSS classes for the image","required":false}},"typeLabel":"ImageItem","required":false,"mediaHints":{"path":"avatar.src","roles":["profile","avatar"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Profile avatar or logo shown at the top of the page. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"avatarUrl":{"type":"string","description":"Avatar image URL (legacy)","required":false},"logo":{"type":"object","description":"Optional LogoConfig for BrandLogo rendering (takes priority over avatar)","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false},"logoSlot":{"type":"object","description":"Custom slot for the logo/avatar (takes priority over logo and avatar)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo image","required":false},"profileSlot":{"type":"object","description":"Custom slot for profile header content","typeLabel":"React.ReactNode","required":false},"links":{"type":"array","description":"Array of links to display","items":{"type":"object","description":"","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},"id":{"type":"string","description":"","required":false},"iconName":{"type":"string","description":"","required":false}},"typeLabel":"MinimalProfileLink"},"typeLabel":"MinimalProfileLink[]","required":false},"linksSlot":{"type":"object","description":"Custom slot for rendering links (overrides links array)","typeLabel":"React.ReactNode","required":false},"socialLinks":{"type":"array","description":"Array of social media links","items":{"type":"object","description":"","fields":{"platformName":{"type":"object","description":"Social platform name - determines which icon to display.\nIf not provided, the platform is auto-detected from the href URL.","typeLabel":"SocialPlatformName","required":false},"platform":{"type":"object","description":"","typeLabel":"SocialPlatformName","required":false},"href":{"type":"string","description":"Link URL (required). Platform is auto-detected from this URL if platformName is not set.","required":true},"label":{"type":"string","description":"Display label for the link (used for aria-label if not specified)","required":false},"icon":{"type":"object","description":"Platform icon (ReactNode) - overrides automatic icon selection","typeLabel":"ReactNode","required":false},"iconNameOverride":{"type":"string","description":"Icon name override for DynamicIcon (e.g., \"lucide/twitter\")","required":false},"iconSize":{"type":"number","description":"Icon size in pixels","required":false},"iconColor":{"type":"string","description":"Icon color - accepts any valid CSS color","required":false},"iconClassName":{"type":"string","description":"Additional CSS classes for the icon","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"className":{"type":"string","description":"Additional CSS classes for the link wrapper","required":false}},"typeLabel":"SocialLinkItem"},"typeLabel":"SocialLinkItem[]","required":false},"socialLinksSlot":{"type":"object","description":"Custom slot for rendering social links (overrides socialLinks array)","typeLabel":"React.ReactNode","required":false},"footerAction":{"type":"object","description":"Footer action 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},"footerSlot":{"type":"object","description":"Custom slot for rendering footer content","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the outer wrapper","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the inner content container","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the profile header","required":false},"avatarClassName":{"type":"string","description":"Additional CSS classes for the avatar wrapper","required":false},"nameClassName":{"type":"string","description":"Additional CSS classes for the name","required":false},"bioClassName":{"type":"string","description":"Additional CSS classes for the bio","required":false},"linksClassName":{"type":"string","description":"Additional CSS classes for the links container","required":false},"linkClassName":{"type":"string","description":"Additional CSS classes for each link","required":false},"linkIconClassName":{"type":"string","description":"Additional CSS classes for link icons","required":false},"linkLabelClassName":{"type":"string","description":"Additional CSS classes for link labels","required":false},"socialLinksClassName":{"type":"string","description":"Additional CSS classes for the social links container","required":false},"socialLinkClassName":{"type":"string","description":"Additional CSS classes for each social link","required":false},"socialIconClassName":{"type":"string","description":"Additional CSS classes for social icons","required":false},"footerClassName":{"type":"string","description":"Additional CSS classes for the footer","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","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},"optixFlowConfig":{"type":"object","description":"OptixFlow image optimization configuration","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},"links[]":{"type":"object","description":"","required":false,"minItems":1,"maxItems":10},"links[].label":{"type":"object","description":"","required":true,"maxLength":50},"links[].href":{"type":"object","description":"","required":true},"links[].iconName":{"type":"object","description":"","required":false},"socialLinks[]":{"type":"object","description":"","required":false,"minItems":1,"maxItems":8},"socialLinks[].href":{"type":"object","description":"","required":true}},"exampleProps":{"name":"Alex Rivera","bio":"Software Engineer & Open Source Contributor","avatar":{"src":"https://cdn.ing/assets/i/r/287634/e4cmvu8nbwoqy2qer90t4gpap0ed/logo-light.png","alt":"Alex Rivera"},"links":[{"id":"1","label":"Personal Website","href":"https://example.com","iconName":"lucide/globe"},{"id":"2","label":"GitHub Projects","href":"https://github.com/alexrivera","iconName":"simple-icons/github"},{"id":"3","label":"Technical Blog","href":"https://example.com/blog","iconName":"lucide/pen-line"},{"id":"4","label":"Resume / CV","href":"https://example.com/resume","iconName":"lucide/file-user"}],"socialLinks":[{"href":"https://github.com/alexrivera"},{"href":"https://linkedin.com/in/alexrivera"},{"href":"https://twitter.com/alexrivera"}],"footerAction":{"label":"Powered by OpenSite","href":"https://opensite.ai"},"background":"gray","pattern":"architect","patternOpacity":0.08},"dependencies":["@opensite/ui"],"tags":["link-page","minimal","profile","simple","clean","professional","developer","portfolio","links"],"performance":{},"importantUsageNotes":"Clean, minimalist link-in-bio page with no media gallery. The avatar accepts an ImageItem with an absolute src; it is typically a profile photo or logo. Each link renders with an optional Iconify icon on the left. Social links auto-detect platform from href. Best for professionals or developers who want a simple, text-focused link page.","usageRequirements":{"requiredProps":["name"],"propConstraints":{"name":{"required":true,"maxLength":60},"bio":{"required":false,"maxLength":140},"links[]":{"required":false,"minItems":1,"maxItems":10},"links[].label":{"required":true,"maxLength":50},"links[].href":{"required":true},"links[].iconName":{"required":false,"note":"Iconify icon name, e.g. lucide/globe"},"socialLinks[]":{"required":false,"minItems":1,"maxItems":8},"socialLinks[].href":{"required":true,"note":"Platform inferred from URL"}},"mediaSlots":{"avatar":{"path":"avatar.src","roles":["profile","avatar"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Profile avatar or logo shown at the top of the page. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["media_library"],"notes":["All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","avatar prop accepts ImageItem ({ src, alt }); avatarUrl (string) is the legacy fallback.","No media gallery in this variant — use link-tree-block if a gallery is needed."]}},{"id":"link-page-newsletter-social","name":"Link Page Newsletter Social","title":"Link Page Newsletter Social","category":"Link Page","categorySlug":"link-page","description":"A link page with integrated newsletter signup form powered by FormEngine. Features profile section with avatar, newsletter signup form with email validation via @page-speed/forms/integration, social media links, and additional links section. Supports universal REST API integration via formEngineSetup. Ideal for content creators, bloggers, and marketers who want to grow their email list.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/306299/zn56kyieakiz6mjs98miedwwjptd/link-page-newsletter-social-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/306300/qjwaaz6acrwqn72ir3kdwer4h0w1/link-page-newsletter-social-mobile.jpg"},"componentPath":"blocks/link-page/link-page-newsletter-social.tsx","code":"import { LinkPageNewsletterSocial } from \"@opensite/ui/blocks/link-page/link-page-newsletter-social\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\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    <LinkPageNewsletterSocial\n      name=\"Jamie Taylor\"\n      bio=\"Marketing Expert & Growth Strategist\"\n      avatar={{\n        src: \"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png\",\n        alt: \"Jamie Taylor\",\n      }}\n      logo={{\n        src: \"https://cdn.ing/assets/i/r/287635/1tmeh86afyxszfz7hbmvcc0oct8w/logo-dark.png\",\n        alt: \"Jamie Taylor\",\n      }}\n      socialLinks={[\n        {\n          id: \"1\",\n          href: \"https://instagram.com\",\n        },\n        {\n          id: \"2\",\n          href: \"https://twitter.com\",\n        },\n        {\n          id: \"3\",\n          href: \"https://linkedin.com\",\n        },\n        {\n          id: \"4\",\n          href: \"https://youtube.com\",\n        },\n      ]}\n      newsletterHeading=\"Join 10,000+ Marketers\"\n      newsletterDescription=\"Get weekly tips on growth marketing and audience building delivered to your inbox every Friday.\"\n      formEngineSetup={{\n        api: demoFormEngineApi,\n        fields: formFields,\n        successMessage:\n          \"Thank you for subscribing! Check your inbox for a confirmation email.\",\n      }}\n      links={[\n        {\n          id: \"1\",\n          label: \"Free Marketing Course\",\n          href: \"https://example.com/course\",\n          iconName: \"lucide/graduation-cap\",\n        },\n        {\n          id: \"2\",\n          label: \"Growth Templates\",\n          href: \"https://example.com/templates\",\n          iconName: \"lucide/file-spreadsheet\",\n        },\n        {\n          id: \"3\",\n          label: \"1-on-1 Coaching\",\n          href: \"https://example.com/coaching\",\n          iconName: \"lucide/user-plus\",\n        },\n        {\n          id: \"4\",\n          label: \"Podcast Episodes\",\n          href: \"https://example.com/podcast\",\n          iconName: \"lucide/mic\",\n        },\n        {\n          id: \"5\",\n          label: \"Community Forum\",\n          href: \"https://example.com/community\",\n          iconName: \"lucide/users\",\n        },\n      ]}\n      footerAction={{\n        label: \"Built with OpenSite\",\n        href: \"https://opensite.ai\",\n        iconAfter: <DynamicIcon name=\"lucide/sparkles\" size={16} />,\n      }}\n      pattern=\"dashedGridBasic\"\n      patternOpacity={0.08}\n      background=\"secondary\"\n    />\n  );\n}","propsSchema":{"name":{"type":"object","description":"Profile name displayed at the top","typeLabel":"React.ReactNode","required":true,"maxLength":60},"bio":{"type":"object","description":"Optional bio or description","typeLabel":"React.ReactNode","required":false,"maxLength":140},"avatar":{"type":"object","description":"Avatar image configuration","fields":{"src":{"type":"string","description":"Image source URL","required":true},"alt":{"type":"string","description":"Alt text for accessibility","required":true},"href":{"type":"string","description":"Optional link URL","required":false},"className":{"type":"string","description":"Additional CSS classes for the image","required":false}},"typeLabel":"ImageItem","required":false,"mediaHints":{"path":"avatar.src","roles":["profile","avatar"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Profile avatar or logo shown at the top of the page. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"avatarUrl":{"type":"string","description":"Avatar image URL (legacy)","required":false},"logo":{"type":"object","description":"Optional LogoConfig for BrandLogo rendering (takes priority over avatar)","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false},"logoSlot":{"type":"object","description":"Custom slot for the logo/avatar (takes priority over logo and avatar)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo image","required":false},"profileSlot":{"type":"object","description":"Custom slot for profile header content","typeLabel":"React.ReactNode","required":false},"newsletterHeading":{"type":"object","description":"Newsletter section heading","typeLabel":"React.ReactNode","required":false,"maxLength":80},"newsletterDescription":{"type":"object","description":"Newsletter section description","typeLabel":"React.ReactNode","required":false,"maxLength":180},"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},"helperText":{"type":"object","description":"Helper text below form","typeLabel":"React.ReactNode","required":false},"newsletterSlot":{"type":"object","description":"Custom slot for rendering the newsletter card","typeLabel":"React.ReactNode","required":false},"formSlot":{"type":"object","description":"Custom slot for rendering form fields inside the newsletter card","typeLabel":"React.ReactNode","required":false},"links":{"type":"array","description":"Array of links to display below the newsletter","items":{"type":"object","description":"","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},"id":{"type":"string","description":"","required":false},"iconName":{"type":"string","description":"","required":false}},"typeLabel":"NewsletterSocialLink"},"typeLabel":"NewsletterSocialLink[]","required":false},"linksSlot":{"type":"object","description":"Custom slot for rendering links (overrides links array)","typeLabel":"React.ReactNode","required":false},"linkChevronIcon":{"type":"object","description":"Chevron icon displayed on link items","typeLabel":"React.ReactNode","required":false},"socialLinks":{"type":"array","description":"Array of social media links","items":{"type":"object","description":"","fields":{"platformName":{"type":"object","description":"Social platform name - determines which icon to display.\nIf not provided, the platform is auto-detected from the href URL.","typeLabel":"SocialPlatformName","required":false},"platform":{"type":"object","description":"","typeLabel":"SocialPlatformName","required":false},"href":{"type":"string","description":"Link URL (required). Platform is auto-detected from this URL if platformName is not set.","required":true},"label":{"type":"string","description":"Display label for the link (used for aria-label if not specified)","required":false},"icon":{"type":"object","description":"Platform icon (ReactNode) - overrides automatic icon selection","typeLabel":"ReactNode","required":false},"iconNameOverride":{"type":"string","description":"Icon name override for DynamicIcon (e.g., \"lucide/twitter\")","required":false},"iconSize":{"type":"number","description":"Icon size in pixels","required":false},"iconColor":{"type":"string","description":"Icon color - accepts any valid CSS color","required":false},"iconClassName":{"type":"string","description":"Additional CSS classes for the icon","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"className":{"type":"string","description":"Additional CSS classes for the link wrapper","required":false},"id":{"type":"string","description":"","required":false},"iconName":{"type":"string","description":"","required":false}},"typeLabel":"NewsletterSocialSocialLink"},"typeLabel":"NewsletterSocialSocialLink[]","required":false},"socialLinksSlot":{"type":"object","description":"Custom slot for rendering social links (overrides socialLinks array)","typeLabel":"React.ReactNode","required":false},"footerAction":{"type":"object","description":"Footer action 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},"footerSlot":{"type":"object","description":"Custom slot for rendering footer content","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the outer wrapper","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the inner content container","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the profile header","required":false},"avatarClassName":{"type":"string","description":"Additional CSS classes for the avatar wrapper","required":false},"nameClassName":{"type":"string","description":"Additional CSS classes for the name","required":false},"bioClassName":{"type":"string","description":"Additional CSS classes for the bio","required":false},"socialLinksClassName":{"type":"string","description":"Additional CSS classes for the social links container","required":false},"socialLinkClassName":{"type":"string","description":"Additional CSS classes for each social link","required":false},"socialIconClassName":{"type":"string","description":"Additional CSS classes for social icons","required":false},"newsletterCardClassName":{"type":"string","description":"Additional CSS classes for the newsletter card","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},"linksClassName":{"type":"string","description":"Additional CSS classes for the links container","required":false},"linkClassName":{"type":"string","description":"Additional CSS classes for each link item","required":false},"linkIconClassName":{"type":"string","description":"Additional CSS classes for link icons","required":false},"linkLabelClassName":{"type":"string","description":"Additional CSS classes for link labels","required":false},"linkChevronClassName":{"type":"string","description":"Additional CSS classes for the link chevron","required":false},"footerClassName":{"type":"string","description":"Additional CSS classes for the footer","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","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},"optixFlowConfig":{"type":"object","description":"OptixFlow image optimization configuration","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},"formEngineSetup.api.endpoint":{"type":"object","description":"","required":false},"links[]":{"type":"object","description":"","required":false,"minItems":1,"maxItems":8},"links[].label":{"type":"object","description":"","required":true,"maxLength":50},"links[].href":{"type":"object","description":"","required":true},"socialLinks[]":{"type":"object","description":"","required":false,"minItems":1,"maxItems":8}},"exampleProps":{"name":"Jamie Taylor","bio":"Marketing Expert & Growth Strategist","avatar":{"src":"https://cdn.ing/assets/i/r/287634/e4cmvu8nbwoqy2qer90t4gpap0ed/logo-light.png","alt":"Jamie Taylor"},"socialLinks":[{"id":"1","href":"https://instagram.com/jamietaylor"},{"id":"2","href":"https://twitter.com/jamietaylor"},{"id":"3","href":"https://linkedin.com/in/jamietaylor"}],"newsletterHeading":"Join 10,000+ Marketers","newsletterDescription":"Weekly tips on growth marketing delivered every Friday.","formEngineSetup":{"api":{"endpoint":"https://example.com/api/subscribe","method":"POST"},"fields":[{"name":"email","type":"email","placeholder":"Enter your email","required":true,"columnSpan":12}],"successMessage":"Thank you for subscribing!"},"buttonAction":{"label":"Subscribe Now","variant":"default"},"links":[{"id":"1","label":"Free Marketing Course","href":"https://example.com/course","iconName":"lucide/graduation-cap"},{"id":"2","label":"Growth Templates","href":"https://example.com/templates","iconName":"lucide/file-spreadsheet"},{"id":"3","label":"1-on-1 Coaching","href":"https://example.com/coaching","iconName":"lucide/user-plus"}],"footerAction":{"label":"Built with OpenSite","href":"https://opensite.ai"},"background":"secondary","pattern":"dashedGridBasic","patternOpacity":0.08},"dependencies":["@opensite/ui"],"tags":["link-page","newsletter","email","subscribe","form","social","creator","marketing","lead-generation","links"],"performance":{},"importantUsageNotes":"Link page with an integrated email newsletter signup form powered by FormEngine. The form is rendered inside a card above the links list. formEngineSetup.api.endpoint must point to a real API; use the site's form submission endpoint. Links below the newsletter card support icons and chevron indicators. Social icons appear above the newsletter card. Avatar is displayed in the profile header.","usageRequirements":{"requiredProps":["name"],"propConstraints":{"name":{"required":true,"maxLength":60},"bio":{"required":false,"maxLength":140},"newsletterHeading":{"required":false,"maxLength":80},"newsletterDescription":{"required":false,"maxLength":180},"formEngineSetup.api.endpoint":{"required":false,"note":"Must be a real API endpoint when form is used"},"links[]":{"required":false,"minItems":1,"maxItems":8},"links[].label":{"required":true,"maxLength":50},"links[].href":{"required":true},"socialLinks[]":{"required":false,"minItems":1,"maxItems":8}},"mediaSlots":{"avatar":{"path":"avatar.src","roles":["profile","avatar"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Profile avatar or logo shown at the top of the page. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["media_library","contact_form"],"notes":["All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","formEngineSetup is optional; omit it to render the newsletter card without a form (use newsletterSlot instead).","buttonAction.variant controls the submit button style (default, outline, secondary)."]}},{"id":"link-page-grid-cards","name":"Link Page Grid Cards","title":"Link Page Grid Cards","category":"Link Page","categorySlug":"link-page","description":"A visually rich link page displaying links as a responsive grid of cards. Features profile header with avatar, links as cards with icons, labels and optional descriptions, hover effects with scale and shadow transitions, configurable 2 or 3 column layout, and social media links. Ideal for creators, businesses, and anyone who wants a more visual link page.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/306302/i0804qdw0ei2xc6248ueejiobc5q/link-page-grid-cards-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/306301/1d7yggc1mwxv5zimmkz5ql1vu39a/link-page-grid-cards-mobile.jpg"},"componentPath":"blocks/link-page/link-page-grid-cards.tsx","code":"import { LinkPageGridCards } from \"@opensite/ui/blocks/link-page/link-page-grid-cards\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <LinkPageGridCards\n      name=\"Marcus Chen\"\n      bio=\"Product Designer & Digital Artist\"\n      logo={{\n        src: \"https://cdn.ing/assets/i/r/308446/g4ykz8o4phw84yo9ly1lxhv0hqsd/logo-light.webp\",\n        alt: \"Marcus Chen\",\n      }}\n      socialLinks={[\n        {\n          id: \"1\",\n          href: \"https://instagram.com\",\n        },\n        {\n          id: \"2\",\n          href: \"https://twitter.com\",\n        },\n        {\n          id: \"3\",\n          href: \"https://linkedin.com\",\n        },\n        {\n          id: \"4\",\n          href: \"https://youtube.com\",\n        },\n      ]}\n      links={[\n        {\n          id: \"1\",\n          label: \"Design Work\",\n          description: \"View my portfolio\",\n          href: \"https://example.com/portfolio\",\n          iconName: \"lucide/palette\",\n        },\n        {\n          id: \"2\",\n          label: \"Case Studies\",\n          description: \"Deep dives into projects\",\n          href: \"https://example.com/case-studies\",\n          iconName: \"lucide/file-text\",\n        },\n        {\n          id: \"3\",\n          label: \"NFT Collection\",\n          description: \"Digital art drops\",\n          href: \"https://example.com/nft\",\n          iconName: \"lucide/sparkles\",\n        },\n        {\n          id: \"4\",\n          label: \"Design System\",\n          description: \"Open source toolkit\",\n          href: \"https://example.com/design-system\",\n          iconName: \"lucide/layers\",\n        },\n        {\n          id: \"5\",\n          label: \"Figma Templates\",\n          description: \"UI kits & resources\",\n          href: \"https://example.com/templates\",\n          iconName: \"lucide/layout-template\",\n        },\n        {\n          id: \"6\",\n          label: \"Contact\",\n          description: \"Let's collaborate\",\n          href: \"https://example.com/contact\",\n          iconName: \"lucide/send\",\n        },\n      ]}\n      columns={3}\n      footerAction={{\n        label: \"Built with OpenSite\",\n        href: \"https://opensite.ai\",\n        iconAfter: <DynamicIcon name=\"lucide/code-2\" size={16} />,\n      }}\n      spacing=\"xl\"\n      pattern=\"diagonalCrossFadeTop\"\n      patternOpacity={0.08}\n      background=\"dark\"\n    />\n  );\n}","propsSchema":{"name":{"type":"object","description":"Profile name displayed at the top","typeLabel":"React.ReactNode","required":true,"maxLength":60},"bio":{"type":"object","description":"Optional bio or description","typeLabel":"React.ReactNode","required":false,"maxLength":140},"avatar":{"type":"object","description":"Avatar image configuration","fields":{"src":{"type":"string","description":"Image source URL","required":true},"alt":{"type":"string","description":"Alt text for accessibility","required":true},"href":{"type":"string","description":"Optional link URL","required":false},"className":{"type":"string","description":"Additional CSS classes for the image","required":false}},"typeLabel":"ImageItem","required":false,"mediaHints":{"path":"avatar.src","roles":["profile","avatar"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Profile avatar or logo shown at the top of the page. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"avatarUrl":{"type":"string","description":"Avatar image URL (legacy)","required":false},"logo":{"type":"object","description":"Optional LogoConfig for BrandLogo rendering (takes priority over avatar)","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false},"logoSlot":{"type":"object","description":"Custom slot for the logo/avatar (takes priority over logo and avatar)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo image","required":false},"profileSlot":{"type":"object","description":"Custom slot for profile header content","typeLabel":"React.ReactNode","required":false},"links":{"type":"array","description":"Array of links to display as cards","items":{"type":"object","description":"","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},"id":{"type":"string","description":"","required":false},"description":{"type":"object","description":"","typeLabel":"React.ReactNode","required":false},"iconName":{"type":"string","description":"","required":false}},"typeLabel":"GridCardLink"},"typeLabel":"GridCardLink[]","required":false},"linksSlot":{"type":"object","description":"Custom slot for rendering links (overrides links array)","typeLabel":"React.ReactNode","required":false},"socialLinks":{"type":"array","description":"Array of social media links","items":{"type":"object","description":"","fields":{"platformName":{"type":"object","description":"Social platform name - determines which icon to display.\nIf not provided, the platform is auto-detected from the href URL.","typeLabel":"SocialPlatformName","required":false},"platform":{"type":"object","description":"","typeLabel":"SocialPlatformName","required":false},"href":{"type":"string","description":"Link URL (required). Platform is auto-detected from this URL if platformName is not set.","required":true},"label":{"type":"string","description":"Display label for the link (used for aria-label if not specified)","required":false},"icon":{"type":"object","description":"Platform icon (ReactNode) - overrides automatic icon selection","typeLabel":"ReactNode","required":false},"iconNameOverride":{"type":"string","description":"Icon name override for DynamicIcon (e.g., \"lucide/twitter\")","required":false},"iconSize":{"type":"number","description":"Icon size in pixels","required":false},"iconColor":{"type":"string","description":"Icon color - accepts any valid CSS color","required":false},"iconClassName":{"type":"string","description":"Additional CSS classes for the icon","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"className":{"type":"string","description":"Additional CSS classes for the link wrapper","required":false},"id":{"type":"string","description":"","required":false},"iconName":{"type":"string","description":"","required":false}},"typeLabel":"GridCardSocialLink"},"typeLabel":"GridCardSocialLink[]","required":false},"socialLinksSlot":{"type":"object","description":"Custom slot for rendering social links (overrides socialLinks array)","typeLabel":"React.ReactNode","required":false},"columns":{"type":"string","description":"Number of columns in the grid (2 or 3)","typeLabel":"2 | 3","required":false},"footerAction":{"type":"object","description":"Footer action 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},"footerSlot":{"type":"object","description":"Custom slot for rendering footer content","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the outer wrapper","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the inner content container","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the profile header","required":false},"avatarClassName":{"type":"string","description":"Additional CSS classes for the avatar wrapper","required":false},"nameClassName":{"type":"string","description":"Additional CSS classes for the name","required":false},"bioClassName":{"type":"string","description":"Additional CSS classes for the bio","required":false},"socialLinksClassName":{"type":"string","description":"Additional CSS classes for the social links container","required":false},"socialLinkClassName":{"type":"string","description":"Additional CSS classes for each social link","required":false},"socialIconClassName":{"type":"string","description":"Additional CSS classes for social icons","required":false},"gridClassName":{"type":"string","description":"Additional CSS classes for the links grid","required":false},"cardClassName":{"type":"string","description":"Additional CSS classes for each card","required":false},"cardIconWrapperClassName":{"type":"string","description":"Additional CSS classes for card icon wrapper","required":false},"cardIconClassName":{"type":"string","description":"Additional CSS classes for card icons","required":false},"cardLabelClassName":{"type":"string","description":"Additional CSS classes for card labels","required":false},"cardDescriptionClassName":{"type":"string","description":"Additional CSS classes for card descriptions","required":false},"footerClassName":{"type":"string","description":"Additional CSS classes for the footer","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","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},"optixFlowConfig":{"type":"object","description":"OptixFlow image optimization configuration","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},"links[]":{"type":"object","description":"","required":false,"minItems":2,"maxItems":9},"links[].label":{"type":"object","description":"","required":true,"maxLength":30},"links[].description":{"type":"object","description":"","required":false,"maxLength":50},"links[].href":{"type":"object","description":"","required":true},"links[].iconName":{"type":"object","description":"","required":false},"socialLinks[]":{"type":"object","description":"","required":false,"minItems":1,"maxItems":8}},"exampleProps":{"name":"Marcus Chen","bio":"Product Designer & Digital Artist","avatar":{"src":"https://cdn.ing/assets/i/r/287634/e4cmvu8nbwoqy2qer90t4gpap0ed/logo-light.png","alt":"Marcus Chen"},"socialLinks":[{"id":"1","href":"https://instagram.com/marcuschen"},{"id":"2","href":"https://twitter.com/marcuschen"},{"id":"3","href":"https://linkedin.com/in/marcuschen"}],"columns":3,"links":[{"id":"1","label":"Design Work","description":"View my portfolio","href":"https://example.com/portfolio","iconName":"lucide/palette"},{"id":"2","label":"Case Studies","description":"Deep dives into projects","href":"https://example.com/case-studies","iconName":"lucide/file-text"},{"id":"3","label":"Design System","description":"Open source toolkit","href":"https://example.com/design-system","iconName":"lucide/layers"},{"id":"4","label":"Figma Templates","description":"UI kits & resources","href":"https://example.com/templates","iconName":"lucide/layout-template"},{"id":"5","label":"Blog","description":"Thoughts & tutorials","href":"https://example.com/blog","iconName":"lucide/pen-line"},{"id":"6","label":"Contact","description":"Let's collaborate","href":"https://example.com/contact","iconName":"lucide/send"}],"footerAction":{"label":"Built with OpenSite","href":"https://opensite.ai"},"background":"dark","pattern":"diagonalCrossFadeTop","patternOpacity":0.08},"dependencies":["@opensite/ui"],"tags":["link-page","grid","cards","visual","creative","business","portfolio","showcase","links"],"performance":{},"importantUsageNotes":"Displays links as a 2- or 3-column grid of cards, each with an icon, label, and optional description. Best for creators or businesses with 4–9 distinct destinations. columns=2 works well on mobile; columns=3 adds a third column on sm} ${screens. Each card has hover scale and shadow transitions. Social links appear above the grid. Profile avatar is typically a logo or portrait.","usageRequirements":{"requiredProps":["name"],"propConstraints":{"name":{"required":true,"maxLength":60},"bio":{"required":false,"maxLength":140},"columns":{"required":false,"note":"2 or 3; defaults to 2"},"links[]":{"required":false,"minItems":2,"maxItems":9},"links[].label":{"required":true,"maxLength":30},"links[].description":{"required":false,"maxLength":50},"links[].href":{"required":true},"links[].iconName":{"required":false,"note":"Iconify icon name displayed in a 48px square icon wrapper"},"socialLinks[]":{"required":false,"minItems":1,"maxItems":8}},"mediaSlots":{"avatar":{"path":"avatar.src","roles":["profile","avatar"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Profile avatar or logo shown at the top of the page. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["media_library"],"notes":["All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","Card labels are short (≤30 chars) because they render in centered small text inside each card.","No featured link concept in this block; use link-tree-block if featured highlighting is needed."]}},{"id":"link-page-bento-layout","name":"Link Page Bento Layout","title":"Link Page Bento Layout","category":"Link Page","categorySlug":"link-page","description":"A modern bento grid style link page with visual hierarchy. Features profile header with avatar, bento grid layout with featured links in larger cells with optional background images, regular links in smaller cells, and social media links. Creates visual hierarchy by making featured links more prominent. Ideal for digital creators, entrepreneurs, and anyone wanting a trendy, modern link page design.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/306303/zl5j4j1jiot8c5bko9jtn7fipiys/link-page-bento-layout-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/306304/rzwk5bwuejcatcts867h6no5rdcn/link-page-bento-layout-mobile.jpg"},"componentPath":"blocks/link-page/link-page-bento-layout.tsx","code":"import { LinkPageBentoLayout } from \"@opensite/ui/blocks/link-page/link-page-bento-layout\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <LinkPageBentoLayout\n      name=\"Sarah Mitchell\"\n      bio=\"Helping brands tell their story\"\n      avatar={{\n        src: \"https://cdn.ing/assets/i/r/287634/e4cmvu8nbwoqy2qer90t4gpap0ed/logo-light.png\",\n        alt: \"Sarah Mitchell\",\n      }}\n      logo={{\n        src: \"https://cdn.ing/assets/i/r/287634/e4cmvu8nbwoqy2qer90t4gpap0ed/logo-light.png\",\n        alt: \"Sarah Mitchell\",\n      }}\n      socialLinks={[\n        {\n          id: \"1\",\n          href: \"https://instagram.com\",\n        },\n        {\n          id: \"2\",\n          href: \"https://twitter.com\",\n        },\n        {\n          id: \"3\",\n          href: \"https://linkedin.com\",\n        },\n        {\n          id: \"4\",\n          href: \"https://youtube.com\",\n        },\n      ]}\n      links={[\n        {\n          id: \"1\",\n          label: \"Latest Video Series\",\n          description: \"5 Days of Brand Strategy\",\n          href: \"#\",\n          iconName: \"simple-icons/youtube\",\n          featured: true,\n          image: {\n            src: \"https://toastability-production.s3.amazonaws.com/9797jh6slgbf9oq6lzlimcdiuziv\",\n            alt: \"Latest Video Series\",\n          },\n        },\n        {\n          id: \"2\",\n          label: \"Download Free Guide\",\n          description: \"The Ultimate Brand Playbook\",\n          href: \"#\",\n          iconName: \"lucide/download\",\n          featured: true,\n          image: {\n            src: \"https://toastability-production.s3.amazonaws.com/0x7ktdk01jfaoysst0emzvqevu19\",\n            alt: \"Brand Playbook\",\n          },\n        },\n        {\n          id: \"3\",\n          label: \"Start Free Trial\",\n          description: \"Experience our platform with a 14-day free trial.\",\n          href: \"#\",\n          iconName: \"lucide/rocket\",\n          featured: true,\n          image: {\n            src: \"https://toastability-production.s3.amazonaws.com/e83zsyvl0an0owzdmpwjnnty641x\",\n            alt: \"Free Trial\",\n          },\n        },\n        {\n          id: \"4\",\n          label: \"Portfolio\",\n          href: \"#\",\n          iconName: \"lucide/briefcase\",\n        },\n        {\n          id: \"5\",\n          label: \"Shop Presets\",\n          href: \"#\",\n          iconName: \"lucide/shopping-bag\",\n        },\n        {\n          id: \"6\",\n          label: \"Book a Call\",\n          href: \"#\",\n          iconName: \"lucide/calendar\",\n        },\n        {\n          id: \"7\",\n          label: \"Newsletter\",\n          href: \"#\",\n          iconName: \"lucide/mail\",\n        },\n      ]}\n      footerAction={{\n        label: \"Made with OpenSite\",\n        href: \"https://opensite.ai\",\n        iconAfter: <DynamicIcon name=\"lucide/sparkles\" size={16} />,\n      }}\n      spacing=\"xl\"\n      pattern=\"gridFadeTop\"\n      patternOpacity={0.05}\n      background=\"dark\"\n    />\n  );\n}","propsSchema":{"name":{"type":"object","description":"Profile name displayed at the top","typeLabel":"React.ReactNode","required":true,"maxLength":60},"bio":{"type":"object","description":"Optional bio or description","typeLabel":"React.ReactNode","required":false,"maxLength":140},"avatar":{"type":"object","description":"Avatar image configuration","fields":{"src":{"type":"string","description":"Image source URL","required":true},"alt":{"type":"string","description":"Alt text for accessibility","required":true},"href":{"type":"string","description":"Optional link URL","required":false},"className":{"type":"string","description":"Additional CSS classes for the image","required":false}},"typeLabel":"ImageItem","required":false,"mediaHints":{"path":"avatar.src","roles":["profile","avatar"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Profile avatar or logo shown in the header. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"avatarUrl":{"type":"string","description":"Avatar image URL (legacy)","required":false},"logo":{"type":"object","description":"Optional LogoConfig for BrandLogo rendering (takes priority over avatar)","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false},"logoSlot":{"type":"object","description":"Custom slot for the logo/avatar (takes priority over logo and avatar)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo image","required":false},"profileSlot":{"type":"object","description":"Custom slot for profile header content","typeLabel":"React.ReactNode","required":false},"links":{"type":"array","description":"Array of links to display in bento grid","items":{"type":"object","description":"","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},"id":{"type":"string","description":"","required":false},"description":{"type":"object","description":"","typeLabel":"React.ReactNode","required":false},"featured":{"type":"boolean","description":"","required":false},"image":{"type":"object","description":"","fields":{"src":{"type":"string","description":"Image source URL","required":true},"alt":{"type":"string","description":"Alt text for accessibility","required":true},"href":{"type":"string","description":"Optional link URL","required":false},"className":{"type":"string","description":"Additional CSS classes for the image","required":false}},"typeLabel":"ImageItem","required":false},"imageUrl":{"type":"string","description":"","required":false},"iconName":{"type":"string","description":"","required":false}},"typeLabel":"BentoLink"},"typeLabel":"BentoLink[]","required":false,"mediaHints":{"path":"links[].image.src","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":false,"preferredAspect":"4/3","note":"Background image for featured bento card. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"linksSlot":{"type":"object","description":"Custom slot for rendering all links (overrides links array)","typeLabel":"React.ReactNode","required":false},"featuredLinksSlot":{"type":"object","description":"Custom slot for rendering featured links (overrides featured links array)","typeLabel":"React.ReactNode","required":false},"regularLinksSlot":{"type":"object","description":"Custom slot for rendering regular links (overrides regular links array)","typeLabel":"React.ReactNode","required":false},"socialLinks":{"type":"array","description":"Array of social media links","items":{"type":"object","description":"","fields":{"platformName":{"type":"object","description":"Social platform name - determines which icon to display.\nIf not provided, the platform is auto-detected from the href URL.","typeLabel":"SocialPlatformName","required":false},"platform":{"type":"object","description":"","typeLabel":"SocialPlatformName","required":false},"href":{"type":"string","description":"Link URL (required). Platform is auto-detected from this URL if platformName is not set.","required":true},"label":{"type":"string","description":"Display label for the link (used for aria-label if not specified)","required":false},"icon":{"type":"object","description":"Platform icon (ReactNode) - overrides automatic icon selection","typeLabel":"ReactNode","required":false},"iconNameOverride":{"type":"string","description":"Icon name override for DynamicIcon (e.g., \"lucide/twitter\")","required":false},"iconSize":{"type":"number","description":"Icon size in pixels","required":false},"iconColor":{"type":"string","description":"Icon color - accepts any valid CSS color","required":false},"iconClassName":{"type":"string","description":"Additional CSS classes for the icon","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"className":{"type":"string","description":"Additional CSS classes for the link wrapper","required":false},"id":{"type":"string","description":"","required":false},"iconName":{"type":"string","description":"","required":false}},"typeLabel":"BentoSocialLink"},"typeLabel":"BentoSocialLink[]","required":false},"socialLinksSlot":{"type":"object","description":"Custom slot for rendering social links (overrides socialLinks array)","typeLabel":"React.ReactNode","required":false},"footerAction":{"type":"object","description":"Footer action 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},"footerSlot":{"type":"object","description":"Custom slot for rendering footer content","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the outer wrapper","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the inner content container","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the profile header","required":false},"avatarClassName":{"type":"string","description":"Additional CSS classes for the avatar wrapper","required":false},"nameClassName":{"type":"string","description":"Additional CSS classes for the name","required":false},"bioClassName":{"type":"string","description":"Additional CSS classes for the bio","required":false},"socialLinksClassName":{"type":"string","description":"Additional CSS classes for the social links container","required":false},"socialLinkClassName":{"type":"string","description":"Additional CSS classes for each social link","required":false},"socialIconClassName":{"type":"string","description":"Additional CSS classes for social link icons","required":false},"linksClassName":{"type":"string","description":"Additional CSS classes for the links container","required":false},"featuredLinksClassName":{"type":"string","description":"Additional CSS classes for the featured links grid","required":false},"featuredLinkClassName":{"type":"string","description":"Additional CSS classes for a featured link item","required":false},"featuredLinkOverlayClassName":{"type":"string","description":"Additional CSS classes for the featured link overlay","required":false},"featuredLinkImageClassName":{"type":"string","description":"Additional CSS classes for the featured link image","required":false},"featuredLinkIconClassName":{"type":"string","description":"Additional CSS classes for featured link icons","required":false},"featuredLinkLabelClassName":{"type":"string","description":"Additional CSS classes for featured link labels","required":false},"featuredLinkDescriptionClassName":{"type":"string","description":"Additional CSS classes for featured link descriptions","required":false},"regularLinksClassName":{"type":"string","description":"Additional CSS classes for the regular links grid","required":false},"regularLinkClassName":{"type":"string","description":"Additional CSS classes for a regular link item","required":false},"regularLinkIconWrapperClassName":{"type":"string","description":"Additional CSS classes for the regular link icon wrapper","required":false},"regularLinkIconClassName":{"type":"string","description":"Additional CSS classes for the regular link icon","required":false},"regularLinkLabelClassName":{"type":"string","description":"Additional CSS classes for the regular link label","required":false},"footerClassName":{"type":"string","description":"Additional CSS classes for the footer","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","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},"optixFlowConfig":{"type":"object","description":"OptixFlow image optimization configuration","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},"links[]":{"type":"object","description":"","required":false,"minItems":2,"maxItems":12},"links[].label":{"type":"object","description":"","required":true,"maxLength":50},"links[].description":{"type":"object","description":"","required":false,"maxLength":80},"links[].href":{"type":"object","description":"","required":true},"links[].featured":{"type":"object","description":"","required":false},"links[].image.src":{"type":"object","description":"","required":false},"links[].iconName":{"type":"object","description":"","required":false},"socialLinks[]":{"type":"object","description":"","required":false,"minItems":1,"maxItems":8}},"exampleProps":{"name":"Sarah Mitchell","bio":"Helping brands tell their story","avatar":{"src":"https://cdn.ing/assets/i/r/287634/e4cmvu8nbwoqy2qer90t4gpap0ed/logo-light.png","alt":"Sarah Mitchell"},"socialLinks":[{"id":"1","href":"https://instagram.com/sarahmitchell"},{"id":"2","href":"https://twitter.com/sarahmitchell"},{"id":"3","href":"https://linkedin.com/in/sarahmitchell"}],"links":[{"id":"1","label":"Latest Video Series","description":"5 Days of Brand Strategy","href":"https://youtube.com/watch?v=example","iconName":"simple-icons/youtube","featured":true,"image":{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Latest Video Series"}},{"id":"2","label":"Download Free Guide","description":"The Ultimate Brand Playbook","href":"https://example.com/guide","iconName":"lucide/download","featured":true,"image":{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Brand Playbook"}},{"id":"3","label":"Portfolio","href":"https://example.com/portfolio","iconName":"lucide/briefcase"},{"id":"4","label":"Book a Call","href":"https://example.com/call","iconName":"lucide/calendar"},{"id":"5","label":"Newsletter","href":"https://example.com/newsletter","iconName":"lucide/mail"},{"id":"6","label":"Shop","href":"https://example.com/shop","iconName":"lucide/shopping-bag"}],"footerAction":{"label":"Made with OpenSite","href":"https://opensite.ai"},"background":"dark","pattern":"gridFadeTop","patternOpacity":0.05},"dependencies":["@opensite/ui"],"tags":["link-page","bento","grid","modern","trendy","visual","featured","creator","entrepreneur","links"],"performance":{},"importantUsageNotes":"Bento-grid style link page that separates links into two tiers: featured (links with featured:true) and regular (all others). Featured links render as large aspect-4/3 cards with optional background images and an overlay gradient. Regular links render as compact icon-and-label rows in a 2-4 column grid. Provide 1–3 featured links and 2–6 regular links for best visual balance. Featured link images MUST use absolute CDN URLs.","usageRequirements":{"requiredProps":["name"],"propConstraints":{"name":{"required":true,"maxLength":60},"bio":{"required":false,"maxLength":140},"links[]":{"required":false,"minItems":2,"maxItems":12},"links[].label":{"required":true,"maxLength":50},"links[].description":{"required":false,"maxLength":80,"note":"Only visible on featured cards"},"links[].href":{"required":true},"links[].featured":{"required":false,"note":"true → large bento card with optional image; false → compact row"},"links[].image.src":{"required":false,"note":"Absolute URL; used as background image for featured cards only"},"links[].iconName":{"required":false,"note":"Iconify icon name; shown on featured cards and regular rows"},"socialLinks[]":{"required":false,"minItems":1,"maxItems":8}},"mediaSlots":{"avatar":{"path":"avatar.src","roles":["profile","avatar"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Profile avatar or logo shown in the header. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."},"links[featured].image.src":{"path":"links[].image.src","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":false,"preferredAspect":"4/3","note":"Background image for featured bento card. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["media_library"],"notes":["All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","Featured cards without an image use the primary brand color as the background.","Regular links (featured:false or omitted) render as compact rows with an icon and label only.","Recommended: 1–3 featured links, 2–6 regular links."]}}]},"timestamp":"2026-06-27T18:48:11.148Z"}