Footer 4

1"use client";
2 
3import { Github, Linkedin, Twitter } from "lucide-react";
4import { motion, useReducedMotion } from "motion/react";
5import type { ReactNode } from "react";
6 
7const ANIMATION_DURATION = 0.25;
8const HOVER_SCALE = 1.08;
9const TAP_SCALE = 0.95;
10 
11export interface FooterMinimalProps {
12  copyright?: string;
13  links?: Array<{ label: string; href: string }>;
14  logo?: ReactNode;
15  socialLinks?: Array<{
16    icon: ReactNode;
17    href: string;
18    label: string;
19  }>;
20}
21 
22const defaultLinks = [
23  { href: "#privacy", label: "Privacy" },
24  { href: "#terms", label: "Terms" },
25  { href: "#contact", label: "Contact" },
26];
27 
28const defaultSocialLinks = [
29  {
30    href: "https://twitter.com",
31    icon: <Twitter className="h-5 w-5" />,
32    label: "Twitter",
33  },
34  {
35    href: "https://github.com",
36    icon: <Github className="h-5 w-5" />,
37    label: "GitHub",
38  },
39  {
40    href: "https://linkedin.com",
41    icon: <Linkedin className="h-5 w-5" />,
42    label: "LinkedIn",
43  },
44];
45 
46export const FooterMinimal = ({
47  logo = <span className="font-bold text-foreground text-xl">SmoothUI</span>,
48  links = defaultLinks,
49  socialLinks = defaultSocialLinks,
50  copyright = "© 2024 SmoothUI",
51}: FooterMinimalProps) => {
52  const shouldReduceMotion = useReducedMotion();
53 
54  const getAnimationProps = () => {
55    if (shouldReduceMotion) {
56      return {
57        animate: { opacity: 1 },
58        initial: { opacity: 1 },
59        transition: { duration: 0 },
60      };
61    }
62 
63    return {
64      initial: { opacity: 0, y: 10 },
65      transition: {
66        bounce: 0.1,
67        duration: ANIMATION_DURATION,
68        type: "spring" as const,
69      },
70      viewport: { once: true },
71      whileInView: { opacity: 1, y: 0 },
72    };
73  };
74 
75  const getHoverProps = () => {
76    if (shouldReduceMotion) {
77      return {};
78    }
79 
80    return {
81      whileHover: { scale: HOVER_SCALE },
82      whileTap: { scale: TAP_SCALE },
83    };
84  };
85 
86  return (
87    <footer className="border-border border-t bg-background">
88      <div className="mx-auto max-w-7xl px-6 py-6">
89        <motion.div
90          {...getAnimationProps()}
91          className="flex flex-col items-center justify-between gap-6 md:flex-row"
92        >
93          {/* Logo and Copyright */}
94          <div className="flex items-center gap-3">
95            <div>{logo}</div>
96            <span className="text-foreground/50">|</span>
97            <span className="text-foreground/60 text-sm">{copyright}</span>
98          </div>
99 
100          {/* Navigation Links */}
101// … truncated