FooterClient

Client-side footer component with mobile accordions and desktop grid layout, supporting Live Preview with real-time updates.

Props

Usage

import FooterClient from '@/components/organisms/FooterClient';

// Typically rendered by the server-side Footer component:
<FooterClient initialFooter={footerData} />

Features

• Server-rendered markup: Initial HTML is rendered on the server via the parent Footer component
• Live Preview support: In preview mode, subscribes to onEntryChange and re-fetches footer data on CMS edits
• Mobile accordions: Uses FooterAccordion for collapsible sections on mobile
• Desktop grid: Static auto-fit grid layout on tablet and above
• New-tab link behavior: All footer links open in a new tab using target="_blank" with rel="noopener noreferrer"
• Bottom section: CTA button, legal/terms/privacy links, and copyright with dynamic year

Layout

Mobile

• Accordion sections using FooterAccordion component
• Each section has a toggle button with chevron icon
• Links hidden by default, revealed on toggle

Desktop (tab+)

• CSS Grid with auto-fit columns (min 160px)
• Section titles as h2 headings with link lists below

Bottom Section

• CTA button linking to Contentstack platform
• Legal, Terms, Privacy links
• Dynamic copyright year

Notes

• Client component ('use client')
• The parent Footer component (server) fetches data and passes it as initialFooter
• Footer columns are transformed from CMS data using transformFooterToFooterData
• Bottom section links (Legal, Terms, Privacy, CTA) are hardcoded constants, not CMS-driven
• CSLP attributes are applied per section title and per link for Live Preview editing
• CMS-driven menu links also always open in a new tab