Footer Block

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