Footer Configuration

NEXTDEVKIT provides a comprehensive footer configuration system that supports multiple link sections, newsletter signup, social media integration, and internationalization. The footer configuration is located in src/config/footer.ts.

The footer system supports multiple sections with different types of content:

export function getFooterData(): FooterData {
  const t = useTranslations("footer");
  const socialData = getSocialMediaData();

  return {
    newsletter: {
      title: t("newsletter.title"),
      description: t("newsletter.description"),
      inputPlaceholder: t("newsletter.inputPlaceholder"),
      submitAriaLabel: t("newsletter.submitAriaLabel"),
    },
    quickLinks: {
      title: t("quickLinks.title"),
      links: [
        { label: t("quickLinks.home"), href: "/#hero" },
        { label: t("quickLinks.features"), href: "/#feature-tabs" },
        { label: t("quickLinks.pricing"), href: "/pricing" },
        { label: t("quickLinks.testimonials"), href: "/#testimonials" },
        { label: t("quickLinks.faq"), href: "/#faq" },
      ],
    },
    resources: {
      title: t("resources.title"),
      links: [
        { label: t("resources.gettingStarted"), href: "/docs" },
        { label: t("resources.blog"), href: "/blog" },
        { label: t("resources.docs"), href: "/docs" },
        { label: t("resources.contact"), href: "/contact" },
      ],
    },
    social: socialData,
    copyright: t("copyright"),
    legalLinks: [
      { label: t("legal.privacy"), href: "/legal/privacy-policy" },
      { label: t("legal.terms"), href: "/legal/terms-of-service" },
    ],
  };
}

FooterData Structure

Property	Type	Description
`newsletter`	`NewsletterConfig`	Newsletter signup configuration
`quickLinks`	`LinkSection`	Quick navigation links
`resources`	`LinkSection`	Resource and documentation links
`social`	`SocialSection`	Social media integration
`copyright`	`string`	Copyright text
`legalLinks`	`LegalLink[]`	Legal pages links

NewsletterConfig Structure

Property	Type	Description
`title`	`string`	Newsletter section title
`description`	`string`	Newsletter description text
`inputPlaceholder`	`string`	Email input placeholder text
`submitAriaLabel`	`string`	Submit button accessibility label

LinkSection Structure

Property	Type	Description
`title`	`string`	Section title
`links`	`QuickLink[]`	Array of links in this section

QuickLink Structure

Property	Type	Description
`label`	`string`	Link display text
`href`	`string`	Link URL or path

LegalLink Structure

Property	Type	Description
`label`	`string`	Legal link display text
`href`	`string`	Legal page URL or path

Configure the newsletter signup section:

newsletter: {
  title: t("newsletter.title"),
  description: t("newsletter.description"),
  inputPlaceholder: t("newsletter.inputPlaceholder"),
  submitAriaLabel: t("newsletter.submitAriaLabel"),
}

The newsletter section integrates with your email provider:

// Newsletter form submission
const handleNewsletterSubmit = async (email: string) => {
  try {
    await subscribeToNewsletter(email);
    // Success handling
  } catch (error) {
    // Error handling
  }
};

🔗 Link Sections

Quick Links Section

Configure quick navigation links:

quickLinks: {
  title: t("quickLinks.title"),
  links: [
    { label: t("quickLinks.home"), href: "/#hero" },
    { label: t("quickLinks.features"), href: "/#feature-tabs" },
    { label: t("quickLinks.pricing"), href: "/pricing" },
    { label: t("quickLinks.testimonials"), href: "/#testimonials" },
    { label: t("quickLinks.faq"), href: "/#faq" },
  ],
}

Resources Section

Configure resource and documentation links:

resources: {
  title: t("resources.title"),
  links: [
    { label: t("resources.gettingStarted"), href: "/docs" },
    { label: t("resources.blog"), href: "/blog" },
    { label: t("resources.docs"), href: "/docs" },
    { label: t("resources.contact"), href: "/contact" },
  ],
}

The footer integrates with the social media configuration:

// Social media integration
const socialData = getSocialMediaData();

// Used in footer
social: socialData,

This pulls social media links from the src/config/social-media.tsx configuration.

⚖️ Legal Links

Configure legal page links:

legalLinks: [
  { label: t("legal.privacy"), href: "/legal/privacy-policy" },
  { label: t("legal.terms"), href: "/legal/terms-of-service" },
]

🌍 Internationalization Support

All footer content supports internationalization:

// Footer translations in messages/en.json
{
  "footer": {
    "newsletter": {
      "title": "Stay Updated",
      "description": "Get the latest updates and news about NEXTDEVKIT",
      "inputPlaceholder": "Enter your email",
      "submitAriaLabel": "Subscribe to newsletter"
    },
    "quickLinks": {
      "title": "Quick Links",
      "home": "Home",
      "features": "Features",
      "pricing": "Pricing",
      "testimonials": "Testimonials",
      "faq": "FAQ"
    },
    "resources": {
      "title": "Resources",
      "gettingStarted": "Getting Started",
      "blog": "Blog",
      "docs": "Documentation",
      "contact": "Contact"
    },
    "social": {
      "title": "Follow Us"
    },
    "copyright": "© 2024 NEXTDEVKIT. All rights reserved.",
    "legal": {
      "privacy": "Privacy Policy",
      "terms": "Terms of Service"
    }
  }
}

📁 Footer Structure