StickyFooter

A professional footer with clip-path sticky scroll effect that smoothly reveals as users scroll. Features large brand typography, organized navigation, and contact information. Perfect for corporate websites, portfolios, or any site needing a premium footer with smooth scroll effects.

✨ Features

• Sticky Clip-Path Effect: Smooth reveal animation as users scroll to bottom
• Large Brand Typography: Automatically splits brand name into stacked words
• Responsive Navigation: 4-column grid navigation (2 columns on mobile)
• Contact Information: Organized contact details with proper alignment
• Fixed Positioning: Uses CSS clip-path for smooth scroll reveal
• Dark Mode Support: Automatically adapts to light and dark themes
• Legal Footer: Copyright and legal links included

📋 Prerequisites

This component requires:

• Next.js (with App Router)
• Tailwind CSS 4

🚀 Installation

# No additional dependencies required beyond Next.js and Tailwind

📁 Files Included

The component bundle includes:

• index.tsx - Main sticky footer component with default content
• README.md - This documentation

🎯 Basic Usage

1import { StickyFooter } from './components/sticky-footer';
2
3export default function Layout() {
4    return (
5        <div className="min-h-screen flex flex-col">
6            {/* Your page content */}
7            <main className="flex-1">
8                <h1>Your content here</h1>
9                <p>Scroll down to see the footer reveal effect...</p>
10            </main>
11
12            {/* Sticky Footer */}
13            <StickyFooter />
14        </div>
15    );
16}

The footer will stick to the bottom and smoothly reveal with a clip-path animation as users scroll.

🔧 Props

The StickyFooter component has no props - it's designed with static content that you customize by editing the constants in the file.

📖 Examples

Basic Implementation

1import { StickyFooter } from './components/sticky-footer';
2
3export default function HomePage() {
4    return (
5        <div className="min-h-screen flex flex-col">
6            <header className="py-4">
7                <nav>Your navigation</nav>
8            </header>
9
10            <main className="flex-1 py-16">
11                <section>Hero section</section>
12                <section>About section</section>
13                <section>Services section</section>
14                {/* Add enough content to enable scrolling */}
15            </main>
16
17            <StickyFooter />
18        </div>
19    );
20}

Portfolio Site

1export default function PortfolioPage() {
2    return (
3        <div className="min-h-screen flex flex-col">
4            <main className="flex-1">
5                <section className="min-h-screen">Hero</section>
6                <section className="min-h-screen">Projects</section>
7                <section className="min-h-screen">About</section>
8                <section className="min-h-screen">Contact</section>
9            </main>
10
11            {/* Footer reveals when scrolling to bottom */}
12            <StickyFooter />
13        </div>
14    );
15}

Corporate Website

1export default function CorporateLayout({
2    children,
3}: {
4    children: React.ReactNode;
5}) {
6    return (
7        <div className="min-h-screen flex flex-col">
8            <header className="sticky top-0 z-50">
9                <nav>Corporate navigation</nav>
10            </header>
11
12            <main className="flex-1">{children}</main>
13
14            <StickyFooter />
15        </div>
16    );
17}

📝 Customizing Content

To customize the footer content, edit these constants in the component file:

Brand Name

1const BRAND_NAME = 'Your Company Name';

The brand name automatically splits on spaces and stacks vertically:

• "Meridian Digital" becomes "Meridian" / "Digital"
• "Your Company" becomes "Your" / "Company"

Contact Information

1const CONTACTS = {
2    address: 'Your City, Your Country',
3    email: 'contact@yourcompany.com',
4    phone: '+1 234 567 8900',
5};

Navigation Menu

1const MENU: MenuItem[] = [
2    {
3        title: 'Products',
4        links: [
5            { label: 'Product 1', href: '/products/product-1' },
6            { label: 'Product 2', href: '/products/product-2' },
7            // Add more links...
8        ],
9    },
10    {
11        title: 'Services',
12        links: [
13            { label: 'Service 1', href: '/services/service-1' },
14            { label: 'Service 2', href: '/services/service-2' },
15            // Add more links...
16        ],
17    },
18    // Add up to 4 menu sections for best layout
19];

🎨 Scroll Effect Details

Clip-Path Animation

The footer uses CSS clip-path for the reveal effect:

clip-path: polygon(0% 0, 100% 0%, 100% 100%, 0 100%);

Fixed Positioning

• Footer container: fixed bottom-0
• Outer wrapper: relative h-[90vh] md:h-[600px]
• Creates space for the sticky effect

Height Behavior

• Mobile: 90vh (90% of viewport height)
• Desktop: 600px fixed height

💡 Usage Tips

Page Structure for Best Effect

1<div className="flex flex-col min-h-screen">
2    <header>Fixed or sticky header</header>
3
4    <main className="flex-1">
5        {/* Ensure enough content to scroll */}
6        <section className="min-h-screen">Section 1</section>
7        <section className="min-h-screen">Section 2</section>
8        <section className="py-20">Final section</section>
9    </main>
10
11    <StickyFooter />
12</div>

Content Guidelines

• Menu Organization: Group related links logically
• Brand Name: Works best with 1-3 words
• Contact Info: Include multiple contact methods
• Link Count: 4-6 links per menu section for best layout

Responsive Considerations

• Navigation collapses to 2 columns on mobile
• Brand text scales from 3rem to 7rem based on screen size
• Contact info moves to top on mobile (column-reverse)

🌙 Dark Mode Support

Automatically adapts styling for dark mode:

• Background: dark:bg-black bg-white
• Text: dark:text-white text-black
• Hover States: dark:hover:text-gray-300 hover:text-gray-600
• Muted Text: dark:text-zinc-600 text-zinc-400

📱 Responsive Behavior

Mobile (< 768px)

• 2-column navigation grid
• Stacked brand/contact layout (column-reverse)
• 3rem base font size for brand
• 90vh footer height

Desktop (≥ 768px)

• 4-column navigation grid
• Side-by-side brand/contact layout
• Up to 7rem font size for brand
• 600px fixed footer height

🔧 Default Content Theme

The footer comes pre-configured with a digital agency theme:

• Brand: "Meridian Digital"
• Products: Cloud Platform, Analytics Suite, AI Assistant
• Solutions: Enterprise, Startups, E-commerce, Healthcare
• Location: London, UK
• Industry: Digital/tech focused

⚠️ Implementation Notes

Required Page Structure

For the sticky effect to work properly:

1. Parent container must have min-h-screen flex flex-col
2. Main content should have flex-1 to push footer down
3. Sufficient content height to enable scrolling
4. Footer should be last element in the flex container

CSS Dependency

The component relies on the clip-path CSS property for the reveal effect. This is well-supported in modern browsers but may not work in very old browsers.

Performance

The fixed positioning and clip-path create a smooth effect without JavaScript, making it performant and SEO-friendly.