footer-5

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 { LogoIcon } from "@/components/logo";
11import { Button } from "@/components/ui/button";
12 
13type FooterLink = {
14  title: string;
15  href: string;
16  icon?: React.ComponentType<{ className?: string }>;
17};
18type FooterLinkGroup = {
19  label: string;
20  links: FooterLink[];
21};
22 
23export function StickyFooter() {
24  return (
25    <footer
26      className="relative h-[560px] w-full border-t"
27      style={{ clipPath: "polygon(0% 0, 100% 0%, 100% 100%, 0 100%)" }}
28    >
29      <div className="fixed bottom-0 h-[560px] w-full">
30        <div className="sticky top-[calc(100vh-560px)] h-full overflow-y-auto">
31          <div className="relative flex size-full flex-col justify-between gap-5 px-4">
32            <div
33              aria-hidden
34              className="absolute inset-0 isolate z-0 opacity-50 contain-strict dark:opacity-100"
35            >
36              <div className="-translate-y-87.5 -rotate-45 absolute top-0 left-0 h-320 w-140 rounded-full bg-[radial-gradient(68.54%_68.72%_at_55.02%_31.46%,theme(colors.foreground/6%)_0,hsla(0,0%,55%,.02)_50%,theme(colors.foreground/1%)_80%)]" />
37              <div className="-rotate-45 absolute top-0 left-0 h-320 w-60 rounded-full bg-[radial-gradient(50%_50%_at_50%_50%,theme(colors.foreground/4%)_0,theme(colors.foreground/1%)_80%,transparent_100%)] [translate:5%_-50%]" />
38              <div className="-translate-y-87.5 -rotate-45 absolute top-0 left-0 h-320 w-60 rounded-full bg-[radial-gradient(50%_50%_at_50%_50%,theme(colors.foreground/4%)_0,theme(colors.foreground/1%)_80%,transparent_100%)]" />
39            </div>
40            <div className="flex flex-col gap-8 pt-12 md:flex-row">
41              <AnimatedContainer className="w-full min-w-2xs max-w-sm space-y-4">
42                <LogoIcon className="size-6" />
43                <p className="mt-8 text-muted-foreground text-sm md:mt-0">
44                  Innovative fintech empowering businesses with seamless
45                  payments, lending, and financial infrastructure worldwide.
46                </p>
47                <div className="flex gap-2">
48                  {socialLinks.map((link, index) => (
49                    <Button
50                      key={`social-${link.href}-${index}`}
51                      size="icon-sm"
52                      variant="outline"
53                    >
54// … truncated