Description

Create a simple, elegant footer component for GhostPaste with essential links and information.

Design Requirements

Layout Structure

[Logo] GhostPaste                                    [Links] [Social]
© 2025 GhostPaste. Zero-knowledge encrypted.        GitHub | Privacy | Terms

Mobile Layout (Stacked)

[Logo] GhostPaste
© 2025 GhostPaste
Zero-knowledge encrypted

GitHub | Privacy | Terms

Content Elements

Left Section

• GhostPaste logo (ghost emoji 👻 + text)
• Copyright notice: "© 2025 GhostPaste"
• Tagline: "Zero-knowledge encrypted code sharing"

Right Section (Desktop) / Bottom Section (Mobile)

• GitHub link → https://github.com/nullcoder/ghostpaste
• Privacy Policy → /privacy (or modal)
• Terms of Service → /terms (or modal)
• Optional: Version/build info in subtle text

Optional Additions

• Status page link (if implemented)
• API documentation link (future)
• Buy Me a Coffee / Sponsor link

Visual Design

Styling

• Background: Subtle border-top or different background shade
• Text: Muted/secondary color for less emphasis
• Links: Underline on hover, consistent with theme
• Spacing: Generous padding for breathing room
• Height: Approximately 100-120px on desktop

Responsive Behavior

• Desktop (≥768px): Horizontal layout with sections
• Mobile (<768px): Stacked/centered layout
• Tablet: Flexible based on content width

Implementation Example

export function Footer() {
  return (
    <footer className="border-t bg-background/50">
      <Container>
        <div className="py-8 md:py-12">
          <div className="flex flex-col md:flex-row md:justify-between gap-6">
            {/* Left section */}
            <div className="space-y-2">
              <div className="flex items-center gap-2">
                <span className="text-2xl">👻</span>
                <span className="font-semibold">GhostPaste</span>
              </div>
              <p className="text-sm text-muted-foreground">
                © 2025 GhostPaste. Zero-knowledge encrypted code sharing.
              </p>
            </div>
            
            {/* Right section */}
            <nav className="flex gap-6 text-sm">
              <Link href="https://github.com/nullcoder/ghostpaste">
                GitHub
              </Link>
              <Link href="/privacy">Privacy</Link>
              <Link href="/terms">Terms</Link>
            </nav>
          </div>
          
          {/* Optional: Build info */}
          {process.env.NEXT_PUBLIC_BUILD_ID && (
            <div className="mt-6 text-xs text-muted-foreground text-center md:text-left">
              Build {process.env.NEXT_PUBLIC_BUILD_ID}
            </div>
          )}
        </div>
      </Container>
    </footer>
  );
}

Acceptance Criteria

• Footer displays copyright and tagline
• All links navigate correctly
• GitHub link opens in new tab with rel="noopener"
• Responsive layout works on all screen sizes
• Uses Container component for consistent spacing
• Accessible link labels and navigation
• Dark/light theme compatibility
• Sufficient contrast for readability
• Optional build/version info displays if available

Technical Notes

• Use Container component (feat: create container component for consistent spacing #62) for consistent width/padding
• Next.js Link for internal navigation
• External links should include security attributes
• Consider sticky footer if content is short
• Test with screen readers for navigation
• Ensure footer doesn't overlap content

Accessibility

• Semantic <footer> element
• Navigation landmarks with <nav>
• Sufficient color contrast (WCAG AA)
• Focusable links with visible focus states
• Screen reader friendly link text

Related

• Works with Container component (feat: create container component for consistent spacing #62)
• Complements Header component (feat: create header component with navigation #53)
• Part of Phase 4 UI Components
• Uses consistent theme from ThemeProvider