Footer 1

1"use client";
2 
3import { motion, useReducedMotion } from "motion/react";
4 
5const ANIMATION_DURATION = 0.6;
6const DELAY_INCREMENT = 0.1;
7const HOVER_SCALE = 1.1;
8const TAP_SCALE = 0.9;
9const DELAY_PRODUCT = DELAY_INCREMENT * 2;
10const DELAY_COMPANY = DELAY_INCREMENT * 3;
11const DELAY_SUPPORT = DELAY_INCREMENT * 4;
12const DELAY_COPYRIGHT = DELAY_INCREMENT * 5;
13 
14interface FooterSimpleProps {
15  companyName?: string;
16  copyright?: string;
17  description?: string;
18  links?: {
19    product?: Array<{ name: string; url: string }>;
20    company?: Array<{ name: string; url: string }>;
21    support?: Array<{ name: string; url: string }>;
22  };
23  social?: {
24    twitter?: string;
25    linkedin?: string;
26    github?: string;
27    discord?: string;
28  };
29}
30 
31export function FooterSimple({
32  companyName = "Smoothui",
33  description = "Build beautiful UIs, effortlessly.",
34  links = {
35    company: [
36      { name: "About", url: "#about" },
37      { name: "Blog", url: "#blog" },
38      { name: "Careers", url: "#careers" },
39      { name: "Contact", url: "#contact" },
40    ],
41    product: [
42      { name: "Features", url: "#features" },
43      { name: "Pricing", url: "#pricing" },
44      { name: "Documentation", url: "#docs" },
45      { name: "API", url: "#api" },
46    ],
47    support: [
48      { name: "Help Center", url: "#help" },
49      { name: "Community", url: "#community" },
50      { name: "Status", url: "#status" },
51      { name: "Security", url: "#security" },
52    ],
53  },
54  social = {
55    discord: "https://discord.com",
56    github: "https://github.com",
57    linkedin: "https://linkedin.com",
58    twitter: "https://twitter.com",
59  },
60  copyright = "© 2024 Smoothui. All rights reserved.",
61}: FooterSimpleProps) {
62  const shouldReduceMotion = useReducedMotion();
63  return (
64    <footer className="border-border border-t bg-background">
65      <div className="mx-auto max-w-7xl px-6 py-12">
66        <motion.div
67          animate={shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }}
68          className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-5"
69          initial={shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: 20 }}
70          transition={
71            shouldReduceMotion
72              ? { duration: 0 }
73              : { duration: ANIMATION_DURATION }
74          }
75          viewport={{ once: true }}
76          whileInView={
77            shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
78          }
79        >
80          {/* Company Info */}
81          <div className="lg:col-span-2">
82// … truncated