Aurora Ambient Glow Newsletter Footer

footers

Ambient aurora Northern Lights halo glow with integrated email subscription newsletter bar.

#footer#aurora#newsletter#glow#ambient

Live Interactive Preview

Component Source Code

Select language in the dropdown

AuroraGlowFooter.tsx

1'use client';
2
3import React from 'react';
4import { Sparkles, Send } from 'lucide-react';
5
6export default function AuroraGlowFooter() {
7  return (
8    <footer className="relative w-full max-w-5xl mx-auto overflow-hidden rounded-3xl border border-slate-200 dark:border-slate-800 bg-slate-950 p-8 sm:p-12 text-white shadow-2xl select-none">
9      <div className="pointer-events-none absolute -bottom-24 -left-24 h-64 w-64 rounded-full bg-teal-500/20 blur-3xl" />
10      <div className="pointer-events-none absolute -top-24 -right-24 h-64 w-64 rounded-full bg-indigo-500/25 blur-3xl" />
11
12      <div className="relative z-10 grid grid-cols-1 md:grid-cols-2 gap-8 pb-10 border-b border-slate-800">
13        <div className="space-y-3">
14          <div className="inline-flex items-center gap-2 rounded-full bg-teal-500/10 border border-teal-500/30 px-3 py-1 text-xs font-bold text-teal-400">
15            <Sparkles className="h-3.5 w-3.5" /> Aurora Ambient Edition
16          </div>
17          <h2 className="text-xl sm:text-2xl font-black tracking-tight">Stay updated with AurenzaUI</h2>
18          <p className="text-xs text-slate-400 leading-relaxed max-w-md">
19            Receive monthly component drops, design tokens, and physics animation tips straight to your inbox.
20          </p>
21        </div>
22
23        <div className="flex flex-col justify-center">
24          <form onSubmit={(e) => e.preventDefault()} className="flex items-center gap-2 bg-slate-900 border border-slate-800 p-1.5 rounded-2xl">
25            <input
26              type="email"
27              placeholder="Enter your developer email..."
28              className="flex-1 bg-transparent px-3 py-2 text-xs text-white placeholder:text-slate-500 outline-none"
29            />
30            <button className="rounded-xl bg-gradient-to-r from-teal-500 to-indigo-600 px-4 py-2 text-xs font-bold text-white shadow-md hover:from-teal-400 hover:to-indigo-500 transition flex items-center gap-1 cursor-pointer">
31              <span>Subscribe</span>
32              <Send className="h-3 w-3" />
33            </button>
34          </form>
35        </div>
36      </div>
37
38      <div className="relative z-10 flex flex-col sm:flex-row items-center justify-between gap-4 pt-6 text-xs text-slate-500">
39        <p>© 2026 AurenzaUI. Built for high-end digital experiences.</p>
40        <div className="flex gap-6">
41          <a href="#" className="hover:text-teal-400 transition">Terms</a>
42          <a href="#" className="hover:text-teal-400 transition">Privacy</a>
43          <a href="#" className="hover:text-teal-400 transition">License</a>
44        </div>
45      </div>
46    </footer>
47  );
48}

Installation & Integration Guide

Step 1: Tailwind CSS v4 Setup

Tailwind Docs

If you do not have Tailwind installed yet, run this installation command:

Terminal

npm install tailwindcss @tailwindcss/postcss postcss

Then add the Tailwind directive to your main stylesheet (globals.css):

@import "tailwindcss";

Step 2: Install Icon Dependencies

npm install lucide-react react-icons

Step 3: Add Component File

Create a new file in your project at src/components/footers/AuroraGlowFooter.tsx and paste the copied code from the source viewer above.

Step 4: Usage Example

ExamplePage.tsx

1import AuroraAmbientGlowNewsletterFooter from '@/components/footers/AuroraGlowFooter';
2
3export default function ExamplePage() {
4  return (
5    <main className="p-8 flex items-center justify-center min-h-screen">
6      <AuroraAmbientGlowNewsletterFooter />
7    </main>
8  );
9}