Footer Block

1"use client";
2 
3import { Badge } from "@/components/ui/badge";
4import { Button } from "@/components/ui/button";
5import { Card } from "@/components/ui/card";
6import { Input } from "@/components/ui/input";
7import { motion, useReducedMotion } from "framer-motion";
8import {
9  ArrowUp,
10  Facebook,
11  Github,
12  Instagram,
13  Linkedin,
14  Mail,
15  MapPin,
16  Phone,
17  Twitter,
18} from "lucide-react";
19 
20const footerLinks = [
21  {
22    title: "Product",
23    links: ["Features", "Pricing", "Documentation", "API Reference"],
24  },
25  {
26    title: "Company",
27    links: ["About Us", "Careers", "Blog", "Press Kit"],
28  },
29  {
30    title: "Resources",
31    links: ["Community", "Help Center", "Partners", "Status"],
32  },
33  {
34    title: "Legal",
35    links: ["Privacy", "Terms", "Cookie Policy", "Licenses"],
36  },
37];
38 
39const socialLinks = [
40  { icon: Twitter, label: "Twitter", href: "#" },
41  { icon: Facebook, label: "Facebook", href: "#" },
42  { icon: Instagram, label: "Instagram", href: "#" },
43  { icon: Linkedin, label: "LinkedIn", href: "#" },
44  { icon: Github, label: "GitHub", href: "#" },
45];
46 
47export function FooterBlock() {
48  const scrollToTop = () => {
49    window.scrollTo({ top: 0, behavior: "smooth" });
50  };
51 
52  const shouldReduceMotion = useReducedMotion();
53 
54  return (
55    <footer
56      aria-labelledby="footer-heading"
57      className="relative w-full overflow-hidden border-t border-border bg-card/90 backdrop-blur-xl"
58    >
59      <div aria-hidden className="pointer-events-none absolute inset-0 -z-10">
60        <motion.div
61          className="absolute -top-32 left-1/2 h-80 w-80 -translate-x-1/2 rounded-full bg-primary/20 blur-[160px]"
62          animate={
63            shouldReduceMotion
64              ? undefined
65              : { opacity: [0.2, 0.45, 0.2], scale: [0.9, 1.05, 0.95] }
66          }
67          transition={
68            shouldReduceMotion
69              ? undefined
70              : { duration: 12, repeat: Infinity, ease: "easeInOut" }
71          }
72        />
73        <motion.div
74          className="absolute -bottom-36 right-0 h-96 w-96 rounded-full bg-[hsl(var(--primary)_/_0.18)] blur-[200px]"
75          animate={
76            shouldReduceMotion
77              ? undefined
78              : { opacity: [0.18, 0.4, 0.18], rotate: [0, 25, 0] }
79          }
80          transition={
81            shouldReduceMotion
82              ? undefined
83              : { duration: 16, repeat: Infinity, ease: "linear" }
84          }
85        />
86      </div>
87      <h2 id="footer-heading" className="sr-only">
88// … truncated