Floating Particle Footer

1"use client";
2 
3import React from "react";
4import { Button } from "@/components/ui/button";
5import { Input } from "@/components/ui/input";
6import { Label } from "@/components/ui/label";
7import { Facebook, Instagram, Linkedin, Twitter } from "lucide-react";
8 
9export default function GradientFooter() {
10  return (
11    <footer className="relative py-12 overflow-hidden border-t bg-background text-foreground">
12      <div
13        aria-hidden
14        className="pointer-events-none absolute top-0 left-1/2 -translate-x-1/2
15          w-[600px] h-[300px] rounded-full blur-3xl
16          bg-linear-to-b from-primary/6 to-transparent"
17      />
18      <div className="container relative z-10 mx-auto px-4 md:px-6">
19        <div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
20          <div className="space-y-4">
21            <h2 className="text-2xl font-bold">Stay Connected</h2>
22            <form className="space-y-2">
23              <div className="space-y-1">
24                <Label htmlFor="email">Email</Label>
25                <Input
26                  id="email"
27                  placeholder="Enter your email"
28                  type="email"
29                />
30              </div>
31              <Button type="submit" className="w-full">
32                Subscribe
33              </Button>
34            </form>
35          </div>
36          <div>
37            <h3 className="mb-4 text-lg font-semibold">Quick Links</h3>
38            <nav className="space-y-2 text-muted-foreground">
39              <a href="#" className="block transition-colors hover:text-foreground">
40                Home
41              </a>
42              <a href="#" className="block transition-colors hover:text-foreground">
43                About Us
44              </a>
45              <a href="#" className="block transition-colors hover:text-foreground">
46                Services
47              </a>
48              <a href="#" className="block transition-colors hover:text-foreground">
49                Products
50              </a>
51              <a href="#" className="block transition-colors hover:text-foreground">
52                Contact
53              </a>
54            </nav>
55          </div>
56          <div>
57            <h3 className="mb-4 text-lg font-semibold">Contact Us</h3>
58            <address className="space-y-2 not-italic text-muted-foreground">
59              <p>123 Innovation Street</p>
60              <p>Tech City, TC 12345</p>
61              <p>Phone: (123) 456-7890</p>
62              <p>Email: hello@example.com</p>
63// … truncated