footer-2

1"use client";
2import {
3  FacebookIcon,
4  InstagramIcon,
5  LinkedinIcon,
6  YoutubeIcon,
7} from "lucide-react";
8import { motion, useReducedMotion } from "motion/react";
9import type React from "react";
10import type { ComponentProps, ReactNode } from "react";
11import { Logo } from "@/components/logo";
12 
13type FooterLink = {
14  title: string;
15  href: string;
16  icon?: React.ComponentType<{ className?: string }>;
17};
18 
19type FooterSection = {
20  label: string;
21  links: FooterLink[];
22};
23 
24const footerLinks: FooterSection[] = [
25  {
26    label: "Product",
27    links: [
28      { title: "Features", href: "#" },
29      { title: "Pricing", href: "#" },
30      { title: "Testimonials", href: "#" },
31      { title: "Integration", href: "#" },
32    ],
33  },
34  {
35    label: "Company",
36    links: [
37      { title: "FAQs", href: "#" },
38      { title: "About Us", href: "#" },
39      { title: "Privacy Policy", href: "#" },
40      { title: "Terms of Services", href: "#" },
41    ],
42  },
43  {
44    label: "Resources",
45    links: [
46      { title: "Blog", href: "#" },
47      { title: "Changelog", href: "#" },
48      { title: "Brand", href: "#" },
49      { title: "Help", href: "#" },
50    ],
51  },
52  {
53    label: "Social Links",
54    links: [
55      { title: "Facebook", href: "#", icon: FacebookIcon },
56      { title: "Instagram", href: "#", icon: InstagramIcon },
57      { title: "Youtube", href: "#", icon: YoutubeIcon },
58      { title: "LinkedIn", href: "#", icon: LinkedinIcon },
59    ],
60  },
61];
62 
63export function Footer() {
64  return (
65    <footer className="relative mx-auto flex w-full max-w-5xl flex-col items-center justify-center rounded-t-4xl border-t bg-[radial-gradient(35%_128px_at_50%_0%,theme(backgroundColor.white/8%),transparent)] px-4 py-6 md:rounded-t-6xl md:px-6">
66      <div className="-translate-x-1/2 -translate-y-1/2 absolute top-0 right-1/2 left-1/2 h-px w-1/3 rounded-full bg-foreground/20 blur" />
67 
68      <div className="grid w-full gap-8 xl:grid-cols-3 xl:gap-8">
69        <AnimatedContainer className="space-y-4">
70          <Logo className="h-4" />
71          <p className="mt-8 text-muted-foreground text-sm md:mt-0">
72            &copy; {new Date().getFullYear()} efferd, All rights reserved
73          </p>
74        </AnimatedContainer>
75 
76        <div className="mt-10 grid grid-cols-2 gap-8 md:grid-cols-4 xl:col-span-2 xl:mt-0">
77          {footerLinks.map((section, index) => (
78            <AnimatedContainer delay={0.1 + index * 0.1} key={section.label}>
79              <div className="mb-10 md:mb-0">
80// … truncated