e.xyehr.cn
[READ-ONLY] One Calendar is a privacy-first calendar web app built with Next.js. It has modern security features, including e2ee, password-protected sharing, and self-destructing share links 馃搮
calendar.xyehr.cn
nextjs
2.5 kB
66 lines
1'use client'
2
3import { ArrowUpRight } from 'lucide-react'
4import { AnimatedWave } from './animated-wave'
5import { APP_CONFIG } from '@/lib/config'
6
7export function FooterSection() {
8 const currentYear = new Date().getFullYear()
9
10 return (
11 <footer className="relative border-t border-foreground/10">
12 <div className="absolute inset-0 h-64 opacity-20 pointer-events-none overflow-hidden">
13 <AnimatedWave />
14 </div>
15
16 <div className="relative z-10 max-w-[1400px] mx-auto px-6 lg:px-12">
17 <div className="py-16 lg:py-24">
18 <div className="grid grid-cols-1 md:grid-cols-5 gap-12 lg:gap-8">
19 <div className="md:col-span-2">
20 <a href="/" className="inline-flex items-center gap-2 mb-6">
21 <span className="text-2xl font-display">One Calendar</span>
22 </a>
23
24 <p className="text-muted-foreground leading-relaxed mb-8 max-w-xs">
25 A privacy-first, weekly-focused open-source calendar built for
26 clarity and control.
27 </p>
28 </div>
29
30 {APP_CONFIG.landing.footerSections.map((section) => (
31 <div key={section.title}>
32 <h3 className="text-sm font-medium mb-6">{section.title}</h3>
33 <ul className="space-y-4">
34 {section.links.map((link) => (
35 <li key={link.label}>
36 <a
37 href={link.href}
38 className="text-sm text-muted-foreground hover:text-foreground transition-colors inline-flex items-center gap-2 group"
39 >
40 {link.label}
41 <ArrowUpRight className="w-3 h-3 opacity-0 -translate-x-1 group-hover:opacity-100 group-hover:translate-x-0 transition-all" />
42 </a>
43 </li>
44 ))}
45 </ul>
46 </div>
47 ))}
48 </div>
49 </div>
50
51 <div className="py-8 border-t border-foreground/10 flex flex-col md:flex-row items-center justify-between gap-4">
52 <p className="text-sm text-muted-foreground">
53 {currentYear} One Calendar. All rights reserved.
54 </p>
55
56 <a
57 className="text-sm text-muted-foreground hover:text-foreground"
58 href={APP_CONFIG.contact.statusPageUrl}
59 >
60 Status page available
61 </a>
62 </div>
63 </div>
64 </footer>
65 )
66}