Building blocks for content-driven sites.

src/components/blocks/footer-01/index.ts

export { default as Footer01 } from "./Footer01.astro";

src/components/blocks/footer-01/Footer01.astro

1
---
2
import { Button } from "@/ui/button";
3
import {
4
  LinkGroup,
5
  LinkGroupItem,
6
  LinkGroupList,
7
  LinkGroupTitle,
8
} from "@/ui/link-group";
9

10
interface FooterLink {
11
  label: string;
12
  href: string;
13
}
14

15
interface FooterColumn {
16
  title: string;
17
  links: FooterLink[];
18
}
19

20
interface Props {
21
  brand?: string;
22
  tagline?: string;
23
  ctaTitle?: string;
24
  ctaLabel?: string;
25
  ctaHref?: string;
26
  columns?: FooterColumn[];
27
  year?: number;
28
  class?: string;
29
}
30

31
const defaultColumns: FooterColumn[] = [
32
  {
33
    title: "Resources",
34
    links: [
35
      { label: "Blog", href: "#blog" },
36
      { label: "Documentation", href: "#docs" },
37
      { label: "Support", href: "#support" },
38
    ],
39
  },
40
  {
41
    title: "Company",
42
    links: [
43
      { label: "About", href: "#about" },
44
      { label: "Careers", href: "#careers" },
45
      { label: "Contact", href: "#contact" },
46
    ],
47
  },
48
  {
49
    title: "Legal",
50
    links: [
51
      { label: "Privacy", href: "#privacy" },
52
      { label: "Terms", href: "#terms" },
53
    ],
54
  },
55
];
56

57
const {
58
  brand = "Acme",
59
  tagline = "Thoughtful tools for teams that care about the details.",
60
  ctaTitle = "Ready to build something clear and useful?",
61
  ctaLabel = "Get started",
62
  ctaHref = "#get-started",
63
  columns = defaultColumns,
64
  year = new Date().getFullYear(),
65
  class: className = "",
66
} = Astro.props as Props;
67
---
68

69
<footer class:list={["w-full border-t bg-muted/30 text-foreground", className]}>
70
  <div class="mx-auto max-w-6xl px-6">
71
    <div class="flex flex-col items-center gap-5 border-b py-16 text-center">
72
      <p
73
        class="text-sm font-medium uppercase tracking-widest text-muted-foreground"
74
      >
75
        Start today
76
      </p>
77
      <h2 class="max-w-2xl text-4xl font-medium tracking-tight sm:text-5xl">
78
        {ctaTitle}
79
      </h2>
80
      <Button as="a" href={ctaHref} size="lg">{ctaLabel}</Button>
81
    </div>
82

83
    <div class="grid gap-10 py-12 sm:grid-cols-2 lg:grid-cols-4">
84
      <div>
85
        <a href="/" class="text-xl font-semibold tracking-tight">{brand}</a>
86
        <p class="mt-3 max-w-xs text-sm text-muted-foreground">{tagline}</p>
87
      </div>
88
      {
89
        columns.map((column) => (
90
          <LinkGroup>
91
            <LinkGroupTitle>{column.title}</LinkGroupTitle>
92
            <LinkGroupList>
93
              {column.links.map((link) => (
94
                <LinkGroupItem>
95
                  <a href={link.href}>{link.label}</a>
96
                </LinkGroupItem>
97
              ))}
98
            </LinkGroupList>
99
          </LinkGroup>
100
        ))
101
      }
102
    </div>
103

104
    <div
105
      class="flex flex-col gap-3 border-t py-6 text-sm text-muted-foreground sm:flex-row sm:items-center sm:justify-between"
106
    >
107
      <span>© {year} {brand}. All rights reserved.</span>
108
      <nav aria-label="Legal" class="flex gap-5">
109
        <a href="#privacy" class="hover:text-foreground">Privacy</a>
110
        <a href="#terms" class="hover:text-foreground">Terms</a>
111
      </nav>
112
    </div>
113
    <div
114
      aria-hidden="true"
115
      class="overflow-hidden pb-4 text-center text-[clamp(5rem,20vw,14rem)] font-bold leading-[0.8] tracking-tighter text-foreground/10"
116
    >
117
      {brand}
118
    </div>
119
  </div>
120
</footer>