{"success":true,"data":{"block":{"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 { imagePlaceholders, logoPlaceholders } from \"@/lib/media\";\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: logoPlaceholders.lightHorizontalLogo,\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":false},"bio":{"type":"object","description":"Optional bio or description","typeLabel":"React.ReactNode","required":false},"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},"avatarUrl":{"type":"string","description":"Avatar image URL (legacy)","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},"newsletterDescription":{"type":"object","description":"Newsletter section description","typeLabel":"React.ReactNode","required":false},"formEngineSetup":{"type":"object","description":"Full form engine setup and props","typeLabel":"FormEngineProps","required":false},"buttonAction":{"type":"object","description":"Submit button configuration","fields":{"variant":{"type":"string","description":"","typeLabel":"\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\"","required":false},"size":{"type":"string","description":"","typeLabel":"\"default\" | \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\" | \"icon-lg\"","required":false},"label":{"type":"object","description":"Button/link label text or ReactNode","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Icon to display (typically before label)","typeLabel":"ReactNode","required":false},"iconAfter":{"type":"object","description":"Icon to display after the label","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"URL for link behavior","required":false},"onClick":{"type":"object","description":"Click handler for button behavior","typeLabel":"MouseEventHandler","required":false},"className":{"type":"string","description":"Additional CSS classes for the action","required":false},"children":{"type":"object","description":"Custom children (overrides label + icon rendering)","typeLabel":"ReactNode","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"asButton":{"type":"boolean","description":"Render as a button element instead of an anchor/link","required":false}},"typeLabel":"ActionConfig","required":false},"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}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["link-page","newsletter","email","subscribe","form","social","creator","marketing","lead-generation","links"],"performance":{},"importantUsageNotes":"Only supply 'socialLinks' that are the links from the website's valid social accounts. Ensure you only use 'links' with valid href values (use only internal and important external urls). Ensure to find or create the correct contact_category (if the client specifically asked for a specific form list, find or create that contact_category - default behavior is to find or create the newsletter contact_category). Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:43:31.162Z"}