[ [LC.07] Components ] Footer

Footer

> Site footer with navigation links, tech stack display, and copyright information.

Preview

[ [0x00] FOOTER ]

1import { Footer } from "@/components/shared/footer";
2
3export default function LandingPage() {
4  return (
5    <main>
6      <HeroSection />
7      <FeaturesSection />
8      <PricingSection />
9      <TestimonialsSection />
10      <FAQSection />
11      <Footer />
12    </main>
13  );
14}

Variants

[ [0x00] SIMPLE FOOTER ]

1<footer className="border-t p-6">
2  <div className="flex justify-between items-center">
3    <p className="text-sm text-muted-foreground">
4      © 2024 Your Company
5    </p>
6    <nav className="flex gap-4">
7      <Link href="/privacy">Privacy</Link>
8      <Link href="/terms">Terms</Link>
9    </nav>
10  </div>
11</footer>

[ [0x00] SOCIAL LINKS ]

X GitHub Discord

1<div className="flex gap-2">
2  <a href="https://x.com" className="border px-4 py-2">
3    <XIcon className="h-4 w-4" />
4    X
5  </a>
6  <a href="https://github.com" className="border px-4 py-2">
7    <GithubIcon className="h-4 w-4" />
8    GitHub
9  </a>
10</div>

API Reference

[ [0x00] API REFERENCE ]

Prop	Type	Default	Description
links	`{ category: string; items: { label: string; href: string }[] }[]`	-	Organized link columns
showTechStack	`boolean`	`true`	Display tech stack badges
socialLinks	`{ platform: string; href: string }[]`	-	Social media links

Accessibility

[ [0x58] A11Y ]

Footer uses semantic footer element
All links are keyboard accessible
Social links open in new tabs with proper rel attributes
Navigation links are grouped logically

Preview

[ [0x00] FOOTER ]

1import { Footer } from "@/components/shared/footer";
2
3export default function LandingPage() {
4  return (
5    <main>
6      <HeroSection />
7      <FeaturesSection />
8      <PricingSection />
9      <TestimonialsSection />
10      <FAQSection />
11      <Footer />
12    </main>
13  );
14}

Variants

[ [0x00] SIMPLE FOOTER ]

1<footer className="border-t p-6">
2  <div className="flex justify-between items-center">
3    <p className="text-sm text-muted-foreground">
4      © 2024 Your Company
5    </p>
6    <nav className="flex gap-4">
7      <Link href="/privacy">Privacy</Link>
8      <Link href="/terms">Terms</Link>
9    </nav>
10  </div>
11</footer>

[ [0x00] SOCIAL LINKS ]

X GitHub Discord

1<div className="flex gap-2">
2  <a href="https://x.com" className="border px-4 py-2">
3    <XIcon className="h-4 w-4" />
4    X
5  </a>
6  <a href="https://github.com" className="border px-4 py-2">
7    <GithubIcon className="h-4 w-4" />
8    GitHub
9  </a>
10</div>

Prop

Type

Default

Description

links

{ category: string; items: { label: string; href: string }[] }[]

Organized link columns

showTechStack

boolean

true

Display tech stack badges

socialLinks

{ platform: string; href: string }[]

Social media links