GradientFooter

A modern footer with gradient background, dynamic brand sizing, and glassmorphism effects. Features contact information, social media links, navigation menus, and a call-to-action section. Perfect for tech companies, SaaS platforms, or modern digital agencies.

✨ Features

Gradient Background: Beautiful black-to-indigo gradient with rounded corners
Dynamic Brand Text: SVG text that automatically scales based on brand name length
Glassmorphism CTA: Call-to-action button with backdrop blur effects
Full-Height Design: Takes full viewport height (100svh)
Contact & Social: Organized contact info with social media links
Grid Navigation: Responsive 4-column navigation menu
External Link Icons: Automatic icons for external links
Responsive Layout: Adapts beautifully to mobile and desktop

📋 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 footer component with default content
README.md - This documentation

🎯 Basic Usage

tsx.tsxTypeScript

1import { GradientFooter } from './components/gradient-footer';
2
3export default function Layout() {
4    return (
5        <div>
6            {/* Your page content */}
7            <main>
8                <h1>Welcome to our site</h1>
9            </main>
10
11            {/* Footer */}
12            <GradientFooter />
13        </div>
14    );
15}

The component renders a complete footer with pre-configured content for "NeuroWave" company including contact info, social links, and navigation.

🔧 Props

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

📖 Examples

Basic Implementation

tsx.tsxTypeScript

1import { GradientFooter } from './components/gradient-footer';
2
3export default function HomePage() {
4    return (
5        <div>
6            <header>Your header content</header>
7
8            <main className="min-h-screen">Your main content here</main>
9
10            <GradientFooter />
11        </div>
12    );
13}

Full Page Layout

tsx.tsxTypeScript

1export default function LandingPage() {
2    return (
3        <div className="min-h-screen flex flex-col">
4            {/* Header */}
5            <header className="py-4">
6                <nav>Navigation here</nav>
7            </header>
8
9            {/* Main content grows to fill space */}
10            <main className="flex-1">
11                <section className="hero">Hero section</section>
12                <section className="features">Features</section>
13                <section className="testimonials">Testimonials</section>
14            </main>
15
16            {/* Footer takes full viewport height */}
17            <GradientFooter />
18        </div>
19    );
20}

Multiple Pages

tsx.tsxTypeScript

1// app/layout.tsx
2export default function RootLayout({ children }) {
3    return (
4        <html>
5            <body>
6                <main>{children}</main>
7                <GradientFooter />
8            </body>
9        </html>
10    );
11}

📝 Customizing Content

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

Brand Name

tsx.tsxTypeScript

1const BRAND_NAME = 'YourCompany';

Contact Information

tsx.tsxTypeScript

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

Social Media Links

tsx.tsxTypeScript

1const SOCIAL_MEDIA = [
2    { title: 'LinkedIn', href: 'https://linkedin.com/company/yourcompany' },
3    { title: 'Twitter', href: 'https://twitter.com/yourcompany' },
4    { title: 'Instagram', href: 'https://instagram.com/yourcompany' },
5    { title: 'GitHub', href: 'https://github.com/yourcompany' },
6];

1const MENU: MenuItem[] = [
2    {
3        title: 'Products',
4        links: [
5            { label: 'Your Product 1', href: '/products/product-1' },
6            { label: 'Your Product 2', href: '/products/product-2' },
7            // Add more links...
8        ],
9    },
10    {
11        title: 'Company',
12        links: [
13            { label: 'About Us', href: '/about' },
14            { label: 'Careers', href: '/careers' },
15            // Add more links...
16        ],
17    },
18    // Add more menu sections...
19];

Call-to-Action Section

tsx.tsxTypeScript

1// Edit directly in the component:
2<h3 className='text-pretty'>Your CTA Headline</h3>
3<p className='text-zinc-400 text-xs text-pretty mt-1'>
4  Your compelling description here.
5</p>
6<Link href="/your-cta-link" className='...'>
7  Your CTA Button Text
8</Link>

🎨 Design Structure

Layout Sections

Contact & CTA Area: Contact info on left, call-to-action on right
Navigation Grid: 4-column responsive menu system
Brand Section: Dynamic SVG text with full-width scaling
Legal Footer: Copyright and legal links

Key Visual Elements

Gradient: bg-gradient-to-b from-black to-indigo-900
Border: border border-neutral-800
Rounded Corners: rounded-2xl
Glassmorphism Button: bg-white/90 backdrop-blur-sm

🔧 Dynamic Brand Sizing

The footer automatically adjusts the brand name size based on text length:

tsx.tsxTypeScript

1const getDynamicFontSize = (text: string, baseWidth = 100) => {
2    const baseLength = 18; // Reference length
3    const baseFontSize = 0.575; // Reference font size in rem
4    const scaleFactor = baseLength / text.length;
5    return baseFontSize * scaleFactor;
6};

Short names (5-10 chars): Larger text
Medium names (10-20 chars): Standard size
Long names (20+ chars): Smaller text for perfect fit

💡 Usage Tips

Page Layout Considerations

tsx.tsxTypeScript

1// Option 1: Dedicated footer page section
2<div className="space-y-0">
3  <main>Your content</main>
4  <GradientFooter />  {/* Takes full viewport height */}
5</div>
6
7// Option 2: Part of overall layout
8<div className="min-h-screen">
9  <main className="pb-[100vh]">Content with footer space</main>
10  <GradientFooter />
11</div>

Content Strategy

Navigation: Organize links into logical groups (Products, Company, Resources, etc.)
Social Media: Include only active social platforms
CTA: Make it action-oriented and specific to your business
Contact: Provide multiple contact methods

Brand Customization

tsx.tsxTypeScript

1// For tech companies
2BRAND_NAME = 'TechFlow';
3
4// For agencies
5BRAND_NAME = 'Creative Studio';
6
7// For SaaS platforms
8BRAND_NAME = 'DataSync Pro';

📱 Responsive Behavior

Mobile: Stacked layout, 2-column navigation grid
Desktop: Full 4-column layout with horizontal contact section
Contact Section: Responsive text sizing (xl on mobile, 4xl on desktop)
CTA Button: Maintains glassmorphism effect across devices

🔗 Link Types

Internal Links (Next.js)

tsx.tsxTypeScript

1{ label: "About", href: "/about" }  // Uses Next.js Link

External Links

tsx.tsxTypeScript

1{ label: "Documentation", href: "https://docs.example.com", external: true }

External links automatically get:

target="_blank"
rel="noopener noreferrer"
External link icon

⚡ Default Content Theme

The footer comes pre-configured with a neural tech/AI theme:

Brand: "NeuroWave"
Products: Neural Processing, Wave Analytics, etc.
Solutions: Healthcare, Autonomous Systems, Smart Cities
Location: Bristol, UK
Industry: Tech/AI focused

Perfect starting point for tech companies - just customize to match your brand!

GradientFooter

✨ Features

📋 Prerequisites

🚀 Installation

📁 Files Included

🎯 Basic Usage

🔧 Props

📖 Examples

Basic Implementation

Full Page Layout

Multiple Pages

📝 Customizing Content

Brand Name

Contact Information

Social Media Links

Navigation Menu

Call-to-Action Section

🎨 Design Structure

Layout Sections

Key Visual Elements

🔧 Dynamic Brand Sizing

💡 Usage Tips

Page Layout Considerations

Content Strategy

Brand Customization

📱 Responsive Behavior

🔗 Link Types

Internal Links (Next.js)

External Links

⚡ Default Content Theme