Footer

1"use client";
2import {
3  Facebook,
4  Twitter,
5  Instagram,
6  Linkedin,
7  Mail,
8  Phone,
9  MapPin,
10  ArrowRight,
11  Sparkles,
12  Moon,
13} from "lucide-react";
14import Link from "next/link";
15import { useState } from "react";
16 
17export const Footer = () => {
18  const [email, setEmail] = useState("");
19  const [isSubmitting, setIsSubmitting] = useState(false);
20  const [submitMessage, setSubmitMessage] = useState("");
21 
22  // Quick Links data
23  const quickLinks = [
24    { label: "About Us", href: "/about" },
25    { label: "Services", href: "/services" },
26    { label: "Portfolio", href: "/portfolio" },
27    { label: "Blog", href: "/blog" },
28    { label: "Contact", href: "/contact" },
29  ];
30 
31  // Support Links data
32  const supportLinks = [
33    { label: "Help Center", href: "/help" },
34    { label: "Privacy Policy", href: "/privacy" },
35    { label: "Terms of Service", href: "/terms" },
36    { label: "Cookie Policy", href: "/cookies" },
37    { label: "FAQ", href: "/faq" },
38  ];
39 
40  // Social Media data
41  const socialLinks = [
42    { icon: Facebook, href: "/", label: "Follow us on Facebook" },
43    { icon: Twitter, href: "/", label: "Follow us on Twitter" },
44    { icon: Instagram, href: "/", label: "Follow us on Instagram" },
45    { icon: Linkedin, href: "/", label: "Connect with us on LinkedIn" },
46  ];
47 
48  const handleNewsletterSubmit = async (
49    e: React.FormEvent<HTMLFormElement>,
50  ) => {
51    e.preventDefault();
52    setIsSubmitting(true);
53 
54    // Simulate API call
55    try {
56      await new Promise((resolve) => setTimeout(resolve, 1000));
57      setSubmitMessage("Successfully subscribed to newsletter!");
58      setEmail("");
59    } catch (error) {
60      setSubmitMessage("Failed to subscribe. Please try again.");
61    } finally {
62      setIsSubmitting(false);
63    }
64  };
65 
66  return (
67    <footer
68      className="relative bg-gradient-to-b from-background via-muted/50 to-background text-foreground overflow-hidden border"
69      role="contentinfo"
70      aria-labelledby="footer-heading"
71    >
72      {/* Screen reader only heading */}
73      <h2 id="footer-heading" className="sr-only">
74        Footer
75      </h2>
76 
77      <div className="relative container mx-auto py-16">
78        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 px-6">
79          {/* Company Info */}
80          <section aria-labelledby="company-info">
81            <h3 id="company-info" className="sr-only">
82              Company Information
83            </h3>
84            <div className="space-y-6">
85// … truncated