127 lines
4.7 KiB
TypeScript
127 lines
4.7 KiB
TypeScript
'use client'
|
|
|
|
import Link from 'next/link'
|
|
import { motion } from 'framer-motion'
|
|
import { Github, Mail, ArrowUpRight } from 'lucide-react'
|
|
|
|
const footerLinks = [
|
|
{ label: 'Projekte', href: '#projekte' },
|
|
{ label: 'Über', href: '#ueber' },
|
|
{ label: 'Fokus', href: '#fokus' },
|
|
{ label: 'Philosophie', href: '#philosophie' },
|
|
]
|
|
|
|
const legalLinks = [
|
|
{ label: 'Impressum', href: '/impressum' },
|
|
{ label: 'Datenschutz', href: '/datenschutz' },
|
|
]
|
|
|
|
export function Footer({ email }: { email?: string }) {
|
|
const socialLinks = [
|
|
{ label: 'Forgejo', href: 'https://kitux.de/forgejo/dschlueter/jamulix-homepage', icon: Github },
|
|
{ label: 'E-Mail', href: `mailto:${email ?? '[Emailadresse]'}`, icon: Mail },
|
|
]
|
|
const currentYear = new Date().getFullYear()
|
|
|
|
return (
|
|
<footer id="kontakt" className="py-16 lg:py-20 border-t border-border">
|
|
<div className="max-w-6xl mx-auto px-6 lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6 }}
|
|
>
|
|
{/* Main footer content */}
|
|
<div className="grid lg:grid-cols-12 gap-12 lg:gap-8">
|
|
{/* Brand section */}
|
|
<div className="lg:col-span-5">
|
|
<Link
|
|
href="/"
|
|
className="inline-block font-mono text-xl tracking-tight text-foreground hover:text-accent transition-colors"
|
|
>
|
|
Jamulix
|
|
</Link>
|
|
<p className="mt-4 text-muted-foreground max-w-sm leading-relaxed">
|
|
50 Jahre Programmierung. Von Fortran bis KI.
|
|
Linux-Enthusiast seit 1992. Aktuell Python, Rust, C und Vibe-Coding.
|
|
</p>
|
|
|
|
{/* Social links */}
|
|
<div className="flex gap-4 mt-6">
|
|
{socialLinks.map((link) => {
|
|
const Icon = link.icon
|
|
return (
|
|
<Link
|
|
key={link.label}
|
|
href={link.href}
|
|
target={link.href.startsWith('http') ? '_blank' : undefined}
|
|
rel={link.href.startsWith('http') ? 'noopener noreferrer' : undefined}
|
|
className="group flex items-center gap-2 text-muted-foreground hover:text-foreground transition-colors"
|
|
aria-label={link.label}
|
|
>
|
|
<Icon className="size-5" />
|
|
<span className="text-sm">{link.label}</span>
|
|
{link.href.startsWith('http') && (
|
|
<ArrowUpRight className="size-3 opacity-0 group-hover:opacity-100 transition-opacity" />
|
|
)}
|
|
</Link>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Navigation */}
|
|
<div className="lg:col-span-3 lg:col-start-7">
|
|
<h3 className="font-mono text-sm text-accent mb-4">Navigation</h3>
|
|
<ul className="space-y-3">
|
|
{footerLinks.map((link) => (
|
|
<li key={link.href}>
|
|
<Link
|
|
href={link.href}
|
|
className="text-muted-foreground hover:text-foreground transition-colors"
|
|
>
|
|
{link.label}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Legal */}
|
|
<div className="lg:col-span-3">
|
|
<h3 className="font-mono text-sm text-accent mb-4">Rechtliches</h3>
|
|
<ul className="space-y-3">
|
|
{legalLinks.map((link) => (
|
|
<li key={link.href}>
|
|
<Link
|
|
href={link.href}
|
|
className="text-muted-foreground hover:text-foreground transition-colors"
|
|
>
|
|
{link.label}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
<li>
|
|
<span className="text-muted-foreground/60 text-sm">
|
|
Blog (bald)
|
|
</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Bottom bar */}
|
|
<div className="mt-16 pt-8 border-t border-border flex flex-col sm:flex-row justify-between items-center gap-4">
|
|
<p className="text-sm text-muted-foreground">
|
|
© {currentYear} Jamulix. Alle Rechte vorbehalten.
|
|
</p>
|
|
<p className="font-mono text-xs text-muted-foreground/60">
|
|
Gebaut mit Next.js, Tailwind, und viel Kaffee.
|
|
</p>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</footer>
|
|
)
|
|
}
|