konnosDashboard
site-footer.tsx164 lines · main
1import Image from 'next/image';
2import Link from 'next/link';
3
4const YEAR = new Date().getFullYear();
5
6export function SiteFooter() {
7 return (
8 <footer className="relative z-10 mt-24 border-t border-[var(--color-border-subtle)]">
9 <div className="mx-auto grid w-full max-w-6xl grid-cols-2 gap-10 px-6 py-12 sm:grid-cols-3 md:grid-cols-5">
10 <div className="col-span-2 flex flex-col gap-4 md:col-span-2">
11 <div className="flex items-center gap-2">
12 <Image src="/icon.svg" alt="" width={22} height={22} />
13 <span className="font-mono text-sm text-[var(--color-text)]">briven</span>
14 <span className="font-mono text-xs text-[var(--color-text-subtle)]">· tech</span>
15 </div>
16 <p className="max-w-sm font-mono text-xs leading-relaxed text-[var(--color-text-muted)]">
17 the database anyone can use — no coding required. start from a template, edit like a
18 spreadsheet, and undo any mistake. made in Flanders, independent.
19 </p>
20 <div className="flex flex-wrap items-center gap-3 font-mono text-[10px] text-[var(--color-text-subtle)]">
21 <Link
22 href="https://codeberg.org/flndrn/briven"
23 className="hover:text-[var(--color-text-muted)]"
24 >
25 source
26 </Link>
27 <span aria-hidden>·</span>
28 <Link href="/status" className="hover:text-[var(--color-text-muted)]">
29 status
30 </Link>
31 <span aria-hidden>·</span>
32 <Link
33 href="https://docs.briven.tech/changelog/feed.xml"
34 className="hover:text-[var(--color-text-muted)]"
35 >
36 rss
37 </Link>
38 <span aria-hidden>·</span>
39 <WebDownLink>web down</WebDownLink>
40 <span aria-hidden>·</span>
41 <KatsuroLink>katsuro</KatsuroLink>
42 </div>
43 </div>
44
45 <FooterColumn title="product">
46 <FooterLink href="https://docs.briven.tech/quickstart">quickstart</FooterLink>
47 <FooterLink href="https://docs.briven.tech/cli">cli</FooterLink>
48 <FooterLink href="https://docs.briven.tech/sdks">sdks</FooterLink>
49 <FooterLink href="https://docs.briven.tech/self-host">self-host</FooterLink>
50 <FooterLink href="/dashboard">dashboard</FooterLink>
51 </FooterColumn>
52
53 <FooterColumn title="company">
54 <FooterLink href="/customers">customers</FooterLink>
55 <FooterLink href="/contact">contact</FooterLink>
56 <FooterLink href="/compare">compare</FooterLink>
57 <FooterLink href="/status">status</FooterLink>
58 <FooterLink href="https://docs.briven.tech/changelog">changelog</FooterLink>
59 <FooterLink href="https://docs.briven.tech/roadmap">roadmap</FooterLink>
60 </FooterColumn>
61
62 <FooterColumn title="legal">
63 <FooterLink href="/terms">terms</FooterLink>
64 <FooterLink href="/privacy">privacy</FooterLink>
65 <FooterLink href="/subprocessors">subprocessors</FooterLink>
66 <FooterLink href="/trust">trust</FooterLink>
67 <FooterLink href="https://docs.briven.tech/support">support</FooterLink>
68 </FooterColumn>
69 </div>
70
71 <div className="border-t border-[var(--color-border-subtle)]">
72 <div className="mx-auto flex w-full max-w-6xl flex-col items-center gap-2 px-6 py-6 text-center font-mono text-[10px] leading-relaxed text-[var(--color-text-subtle)] sm:flex-row sm:justify-between sm:gap-4 sm:text-left">
73 {/* left */}
74 <span className="whitespace-nowrap">
75 © {YEAR} briven.tech · an{' '}
76 <Link
77 href="https://flndrn.com"
78 className="text-[#f5d90a]/60 transition-colors hover:text-[#f5d90a]"
79 >
80 flndrn
81 </Link>{' '}
82 company
83 </span>
84 {/* center */}
85 <span className="text-[var(--color-text-muted)]">
86 100% self-funded, sustainable &amp; independent
87 </span>
88 {/* right */}
89 <span className="whitespace-nowrap">flndrn Limited</span>
90 </div>
91 </div>
92 </footer>
93 );
94}
95
96function FooterColumn({ title, children }: { title: string; children: React.ReactNode }) {
97 return (
98 <div className="flex flex-col gap-3">
99 <p className="font-mono text-[10px] uppercase tracking-wider text-[var(--color-text-subtle)]">
100 {title}
101 </p>
102 <ul className="flex flex-col gap-2 font-mono text-xs text-[var(--color-text-muted)]">
103 {children}
104 </ul>
105 </div>
106 );
107}
108
109function FooterLink({ href, children }: { href: string; children: React.ReactNode }) {
110 return (
111 <li>
112 <Link href={href} className="hover:text-[var(--color-text)]">
113 {children}
114 </Link>
115 </li>
116 );
117}
118
119/** Up-right external arrow (lucide arrow-up-right), inherits text color. */
120function ExternalArrow({ className = '' }: { className?: string }) {
121 return (
122 <svg
123 aria-hidden
124 viewBox="0 0 24 24"
125 width="10"
126 height="10"
127 fill="none"
128 stroke="currentColor"
129 strokeWidth="2.5"
130 strokeLinecap="round"
131 strokeLinejoin="round"
132 className={className}
133 >
134 <line x1="7" y1="17" x2="17" y2="7" />
135 <polyline points="7 7 17 7 17 17" />
136 </svg>
137 );
138}
139
140/** web-down.com link in the web-down brand blue, with the up-right arrow. */
141export function WebDownLink({ children }: { children: React.ReactNode }) {
142 return (
143 <Link
144 href="https://web-down.com"
145 className="inline-flex items-center gap-0.5 text-[#09a1d3] transition-colors hover:text-[#5dc0e0]"
146 >
147 {children}
148 <ExternalArrow className="-translate-y-px" />
149 </Link>
150 );
151}
152
153/** katsuro.dev link in the Katsuro brand red, with the up-right arrow. */
154export function KatsuroLink({ children }: { children: React.ReactNode }) {
155 return (
156 <Link
157 href="https://katsuro.dev"
158 className="inline-flex items-center gap-0.5 text-[#ed1b23] transition-colors hover:text-[#f5575d]"
159 >
160 {children}
161 <ExternalArrow className="-translate-y-px" />
162 </Link>
163 );
164}