69 lines
2.8 KiB
TypeScript
69 lines
2.8 KiB
TypeScript
import Link from 'next/link';
|
|
import { colors } from '@/lib/colors';
|
|
|
|
export default function WebklarFooter() {
|
|
return (
|
|
<footer
|
|
className="hidden md:block relative py-8 sm:py-12 border-t rounded-t-[2rem] sm:rounded-t-[3rem] mx-2 sm:mx-4 backdrop-blur-sm"
|
|
style={{
|
|
backgroundColor: `${colors.primary}F0`,
|
|
borderColor: colors.secondary
|
|
}}
|
|
>
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-8">
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6 sm:gap-8">
|
|
<div className="col-span-1 sm:col-span-2">
|
|
<div
|
|
className="text-2xl sm:text-3xl font-bold mb-4 relative"
|
|
style={{ color: colors.tertiary }}
|
|
>
|
|
<span className="relative z-10">Webklar</span>
|
|
<div
|
|
className="absolute -inset-2 rounded-xl blur-sm opacity-20"
|
|
style={{ backgroundColor: colors.secondary }}
|
|
></div>
|
|
</div>
|
|
<p
|
|
className="mb-6 leading-relaxed text-sm sm:text-base"
|
|
style={{ color: colors.background }}
|
|
>
|
|
Ihr Partner für Web & Support. Moderne Websites. Klare Kommunikation. Persönlicher Support.
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<h4 className="text-base sm:text-lg font-semibold mb-4" style={{ color: colors.tertiary }}>
|
|
Services
|
|
</h4>
|
|
<ul className="space-y-2 text-sm sm:text-base" style={{ color: colors.background }}>
|
|
{['Webdesign', 'E-Commerce', 'SEO', 'Hosting'].map((item) => (
|
|
<li key={item}>
|
|
<a href="#" className="hover:opacity-80 transition-opacity">{item}</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4 className="text-base sm:text-lg font-semibold mb-4" style={{ color: colors.tertiary }}>
|
|
Kontakt
|
|
</h4>
|
|
<ul className="space-y-2 text-sm sm:text-base" style={{ color: colors.background }}>
|
|
<li><Link href="/impressum" className="hover:opacity-80 transition-opacity">Impressum</Link></li>
|
|
<li><Link href="/datenschutz" className="hover:opacity-80 transition-opacity">Datenschutz</Link></li>
|
|
<li><Link href="/agb" className="hover:opacity-80 transition-opacity">AGB</Link></li>
|
|
<li><Link href="/kontakte" className="hover:opacity-80 transition-opacity">Kontakte</Link></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div
|
|
className="border-t mt-6 sm:mt-8 pt-6 sm:pt-8 text-center text-sm"
|
|
style={{
|
|
borderColor: colors.secondary,
|
|
color: colors.background
|
|
}}
|
|
>
|
|
<p>© 2025 Webklar. Alle Rechte vorbehalten.</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|