footer-1

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}
27 
28const {
29  class: className,
30  brandName,
31  brandHref,
32  description,
33  socials,
34  columns,
35  copyright,
36} = Astro.props
37---
38 
39<footer class={cn("", className)}>
40  <Section class="py-16 lg:py-20">
41    <SectionContainer>
42      <div class="grid gap-10 lg:grid-cols-[1fr_2fr]">
43        <div class="flex flex-col gap-5">
44          <Logo href={brandHref}>
45            <LogoText>{brandName}</LogoText>
46          </Logo>
47          <p class="text-muted-foreground max-w-xs text-sm leading-relaxed">
48            {description}
49          </p>
50          {
51            socials && socials.length > 0 && (
52              <div class="flex items-center gap-3">
53                {socials.map((social) => (
54                  <a
55                    href={social.href}
56                    class="text-muted-foreground hover:text-foreground transition-colors"
57                    aria-label={social.label}
58                    target="_blank"
59                    rel="noreferrer"
60                  >
61                    <Icon name={social.icon} class="size-4" />
62                  </a>
63                ))}
64              </div>
65            )
66          }
67        </div>
68        <div class="grid gap-8 sm:grid-cols-3">
69          {
70            columns.map((column) => (
71              <div class="flex flex-col gap-3">
72                <p class="text-sm font-medium">{column.title}</p>
73                <ul class="flex flex-col gap-2.5">
74                  {column.links.map((link) => (
75                    <li>
76                      <a
77                        href={link.href}
78                        class="text-muted-foreground hover:text-foreground text-sm transition-colors"
79                      >
80                        {link.label}
81                      </a>
82                    </li>
83                  ))}
84                </ul>
85              </div>
86            ))
87          }
88        </div>
89      </div>
90      <Separator />
91// … truncated