Footer 01

1import { cn } from "@/lib/utils";
2import { Github } from "lucide-react";
3 
4interface FooterLink {
5  text: string;
6  href: string;
7}
8 
9interface FooterItem {
10  title: string;
11  links: FooterLink[];
12}
13 
14interface Footer01Props {
15  logo?: React.ReactNode;
16  slogan?: string;
17  items?: FooterItem[];
18  copyright?: string;
19  socialLinks?: { icon: React.ReactNode; href: string }[];
20  className?: string;
21}
22 
23const Footer01 = ({
24  logo = (
25    <div className="flex items-center gap-2">
26      <img src="/logo.svg" alt="Shadcnship" className="size-6 dark:invert" />
27      <span className="font-semibold">Shadcnship</span>
28    </div>
29  ),
30  slogan = "Production-ready Shadcn blocks, connected to Supabase, Stripe, and Resend.",
31  items = [
32    {
33      title: "Product",
34      links: [
35        { text: "Overview", href: "#" },
36        { text: "Features", href: "#" },
37        { text: "Pricing", href: "#" },
38        { text: "Releases", href: "#" },
39      ],
40    },
41    {
42      title: "Company",
43      links: [
44        { text: "About us", href: "#" },
45        { text: "Careers", href: "#" },
46        { text: "News", href: "#" },
47        { text: "Contact", href: "#" },
48      ],
49    },
50    {
51      title: "Resources",
52      links: [
53        { text: "Blog", href: "#" },
54        { text: "Events", href: "#" },
55        { text: "Tutorials", href: "#" },
56        { text: "Support", href: "#" },
57      ],
58    },
59    {
60      title: "Social",
61      links: [
62        { text: "Twitter", href: "#" },
63        { text: "Instagram", href: "#" },
64        { text: "LinkedIn", href: "#" },
65      ],
66    },
67  ],
68  copyright = `© ${new Date().getFullYear()} Shadcnship. All rights reserved.`,
69  socialLinks = [
70    {
71      icon: <Github className="size-5" />,
72      href: "#",
73    },
74    {
75      icon: (
76        <svg className="size-5" fill="currentColor" viewBox="0 0 24 24">
77          <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
78        </svg>
79      ),
80      href: "#",
81    },
82  ],
83  className,
84}: Footer01Props) => {
85  const colsTemplate = `repeat(${items.length}, 1fr)`;
86 
87  return (
88    <footer className={cn("fixed bottom-0 w-full border-t", className)}>
89      <div className="mx-auto px-8 py-12 md:px-16">
90        {/* Top section */}
91        <div className="flex flex-col gap-10 lg:flex-row lg:gap-16">
92          {/* Logo + slogan */}
93          <div className="lg:w-64 lg:shrink-0">
94            {logo}
95// … truncated