footer-3

1---
2import { cn } from "@/lib/utils"
3import { Icon } from "@/components/ui/icon"
4import { Logo, LogoText } from "@/components/ui/logo"
5import { Section, SectionContainer } from "@/components/ui/section"
6import { Separator } from "@/components/ui/separator"
7 
8type Props = {
9  class?: string
10  brandName: string
11  brandHref: string
12  description: string
13  socials?: {
14    label: string
15    href: string
16    icon: string
17  }[]
18  columns: {
19    title: string
20    links: {
21      label: string
22      href: string
23    }[]
24  }[]
25  copyright: string
26  bottomLinks?: {
27    label: string
28    href: string
29  }[]
30}
31 
32const {
33  class: className,
34  brandName,
35  brandHref,
36  description,
37  socials,
38  columns,
39  copyright,
40  bottomLinks,
41} = Astro.props
42---
43 
44<footer class={cn("", className)}>
45  <Section class="py-16 lg:py-20">
46    <SectionContainer>
47      <div class="grid gap-10 lg:grid-cols-[1fr_2fr]">
48        <div class="flex flex-col gap-5">
49          <Logo href={brandHref}>
50            <LogoText>{brandName}</LogoText>
51          </Logo>
52          <p class="text-muted-foreground max-w-xs text-sm leading-relaxed">
53            {description}
54          </p>
55          {
56            socials && socials.length > 0 && (
57              <div class="flex items-center gap-3">
58                {socials.map((social) => (
59                  <a
60                    href={social.href}
61                    class="text-muted-foreground hover:text-foreground transition-colors"
62                    aria-label={social.label}
63                    target="_blank"
64                    rel="noreferrer"
65                  >
66                    <Icon name={social.icon} class="size-4" />
67                  </a>
68                ))}
69              </div>
70            )
71          }
72        </div>
73        <div class="grid gap-8 sm:grid-cols-3">
74          {
75            columns.map((column) => (
76              <div class="flex flex-col gap-3">
77                <p class="text-sm font-medium">{column.title}</p>
78                <ul class="flex flex-col gap-2.5">
79                  {column.links.map((link) => (
80                    <li>
81                      <a
82                        href={link.href}
83                        class="text-muted-foreground hover:text-foreground text-sm transition-colors"
84                      >
85                        {link.label}
86                      </a>
87                    </li>
88                  ))}
89                </ul>
90              </div>
91            ))
92          }
93        </div>
94      </div>
95// … truncated