```jsx import Link from "next/link"; import * as React from "react"; import { Input } from "@/components/ui/input"; import { Button } from "@/components/ui/button"; const FOOTER_SECTIONS = [ { title: "Features", links: [ { href: "#analytics", label: "Analytics" }, { href: "#dashboards", label: "Dashboards" }, { href: "#reports", label: "Reports" }, { href: "#management", label: "Management" }, ], }, { title: "Support", links: [ { href: "#help", label: "Help Center" }, { href: "#contact", label: "Contact Us" }, { href: "#docs", label: "API" }, ], }, { title: "Legal", links: [ { href: "#privacy", label: "Privacy Policy" }, { href: "#terms", label: "Terms of Service" }, { href: "#cookie", label: "Cookie Policy" }, ], }, { title: "About Us", links: [ { href: "#story", label: "Our Story" }, { href: "#careers", label: "Careers" }, { href: "#press", label: "Press" }, ], }, ]; const CURRENT_YEAR = new Date().getFullYear(); export function LinkSection({ title, links }) { return ( ); } const NewsletterForm = () => { return ( ); }; export function Footer() { return ( ); } const Logo = () => { return (

); }; const GithubIcon = () => { return ( ); }; const LinkedInIcon = () => { return ( ); }; const TwitterIcon = () => { return ( ); }; ``` ```tsx import Link from "next/link"; import * as React from "react"; import { Input } from "@/components/ui/input"; import { Button } from "@/components/ui/button"; interface LinkType { href: string; label: string; } interface LinkSectionProps { title: string; links: LinkType[]; } const FOOTER_SECTIONS: { title: string; links: LinkType[] }[] = [ { title: "Features", links: [ { href: "#analytics", label: "Analytics" }, { href: "#dashboards", label: "Dashboards" }, { href: "#reports", label: "Reports" }, { href: "#management", label: "Management" }, ], }, { title: "Support", links: [ { href: "#help", label: "Help Center" }, { href: "#contact", label: "Contact Us" }, { href: "#docs", label: "API" }, ], }, { title: "Legal", links: [ { href: "#privacy", label: "Privacy Policy" }, { href: "#terms", label: "Terms of Service" }, { href: "#cookie", label: "Cookie Policy" }, ], }, { title: "About Us", links: [ { href: "#story", label: "Our Story" }, { href: "#careers", label: "Careers" }, { href: "#press", label: "Press" }, ], }, ]; const CURRENT_YEAR = new Date().getFullYear(); export function LinkSection({ title, links }: LinkSectionProps) { return ( ); } const NewsletterForm = () => { return ( ); }; export function Footer() { return ( ); } const Logo = () => { return (

); }; const GithubIcon = () => { return ( ); }; const LinkedInIcon = () => { return ( ); }; const TwitterIcon = () => { return ( ); }; ``` ## Installation ### Install the Button component

We use the Button from Shadcn UI. Make sure to install it in `@/components/ui`. (You can also use a classic HTML button instead of the Button component.)

### Copy the Newsletter Footer Component Copy the `newsletter-footer` component from the preview and adjust the imports if necessary. ## Credits

This component uses the Button component from Shadcn UI.