This commit is contained in:
knso committed 2026-02-01 22:34:47 +01:00
1 parent 6228945065
commit 1d4584e5d9
7 files changed
+2370 -210

No files matched your search

+91 -99
View File
@@ -1,105 +1,97 @@
const Footer = () => {
const currentYear = new Date().getFullYear();
const links = {
services: [
{ label: "Strategieberatung", href: "#services" },
{ label: "UX/UI Design", href: "#services" },
{ label: "Entwicklung", href: "#services" },
{ label: "SEO & Support", href: "#services" },
],
company: [
{ label: "Über uns", href: "#about" },
{ label: "Projekte", href: "#projects" },
{ label: "Ablauf", href: "#process" },
{ label: "Kontakt", href: "#contact" },
],
legal: [
{ label: "Impressum", href: "/impressum" },
{ label: "Datenschutz", href: "/datenschutz" },
{ label: "AGB", href: "/agb" },
],
};
import React from 'react';
const DevStudio: React.FC = () => {
return (
<footer className="bg-secondary/20 border-t border-border relative">
<div className="container mx-auto px-6 py-16">
<div className="grid md:grid-cols-4 gap-12 mb-16">
{/* Logo & Description */}
<div className="md:col-span-1">
<span className="text-xl font-display font-medium text-foreground tracking-tight mb-6 block">
webklar
</span>
<p className="text-muted-foreground text-sm leading-relaxed">
Maßgeschneiderte Weblösungen für Ihr Unternehmen. Sicher, zuverlässig und modern.
</p>
</div>
{/* Services */}
<div>
<h4 className="label-tag mb-6">Leistungen</h4>
<ul className="space-y-3">
{links.services.map((link) => (
<li key={link.label}>
<a
href={link.href}
className="text-muted-foreground hover:text-foreground transition-colors text-sm"
>
{link.label}
</a>
</li>
))}
</ul>
</div>
{/* Company */}
<div>
<h4 className="label-tag mb-6">Unternehmen</h4>
<ul className="space-y-3">
{links.company.map((link) => (
<li key={link.label}>
<a
href={link.href}
className="text-muted-foreground hover:text-foreground transition-colors text-sm"
>
{link.label}
</a>
</li>
))}
</ul>
</div>
{/* Legal */}
<div>
<h4 className="label-tag mb-6">Rechtliches</h4>
<ul className="space-y-3">
{links.legal.map((link) => (
<li key={link.label}>
<a
href={link.href}
className="text-muted-foreground hover:text-foreground transition-colors text-sm"
>
{link.label}
</a>
</li>
))}
</ul>
</div>
</div>
{/* Bottom Bar */}
<div className="divider mb-8" />
<div className="flex flex-col md:flex-row justify-between items-center gap-4">
<p className="text-muted-foreground text-sm">
© {currentYear} webklar. Alle Rechte vorbehalten.
</p>
<div className="text-muted-foreground text-sm">
Made in Germany
</div>
</div>
</div>
</footer>
<p className="inset-x-0 mt-20 bg-gradient-to-b from-black via-neutral-950 to-neutral-900 bg-clip-text text-center text-5xl font-bold text-transparent md:text-9xl lg:text-[12rem] xl:text-[13rem]">
WEBklar
</p>
);
};
const Footer: React.FC = () => {
return (
<div className="relative w-full overflow-hidden border-t border-white/[0.1] bg-black px-8 py-20 dark:border-white/[0.1] dark:bg-black">
<div className="mx-auto flex max-w-7xl flex-col items-start justify-between text-sm text-neutral-500 sm:flex-row md:px-8">
<div>
<div className="mr-0 mb-4 md:mr-4 md:flex">
<a className="relative z-20 mr-4 flex items-center space-x-2 px-2 py-1 text-sm font-normal text-white" href="/">
<img alt="logo" width="30" height="30" src="https://assets.aceternity.com/logo-dark.png" />
<span className="font-medium text-white">WEBklar</span>
</a>
</div>
<div className="mt-2 ml-2">© copyright WEBklar 2024. All rights reserved.</div>
</div>
<div className="mt-10 grid grid-cols-2 items-start gap-10 sm:mt-0 md:mt-0 lg:grid-cols-4">
<div className="flex w-full flex-col justify-center space-y-4">
<p className="hover:text-neutral-300 font-bold text-neutral-600 transition-colors dark:text-neutral-300">Pages</p>
<ul className="hover:text-neutral-300 list-none space-y-4 text-neutral-600 transition-colors dark:text-neutral-300">
<li className="list-none">
<a className="hover:text-neutral-300 transition-colors" href="/products">All Products</a>
</li>
<li className="list-none">
<a className="hover:text-neutral-300 transition-colors" href="/products">Studio</a>
</li>
<li className="list-none">
<a className="hover:text-neutral-300 transition-colors" href="/products">Clients</a>
</li>
<li className="list-none">
<a className="hover:text-neutral-300 transition-colors" href="/products">Pricing</a>
</li>
<li className="list-none">
<a className="hover:text-neutral-300 transition-colors" href="/products">Blog</a>
</li>
</ul>
</div>
<div className="flex flex-col justify-center space-y-4">
<p className="hover:text-neutral-300 font-bold text-neutral-600 transition-colors dark:text-neutral-300">Socials</p>
<ul className="hover:text-neutral-300 list-none space-y-4 text-neutral-600 transition-colors dark:text-neutral-300">
<li className="list-none">
<a className="hover:text-neutral-300 transition-colors" href="/products">Facebook</a>
</li>
<li className="list-none">
<a className="hover:text-neutral-300 transition-colors" href="/products">Instagram</a>
</li>
<li className="list-none">
<a className="hover:text-neutral-300 transition-colors" href="/products">Twitter</a>
</li>
<li className="list-none">
<a className="hover:text-neutral-300 transition-colors" href="/products">LinkedIn</a>
</li>
</ul>
</div>
<div className="flex flex-col justify-center space-y-4">
<p className="hover:text-neutral-300 font-bold text-neutral-600 transition-colors dark:text-neutral-300">Legal</p>
<ul className="hover:text-neutral-300 list-none space-y-4 text-neutral-600 transition-colors dark:text-neutral-300">
<li className="list-none">
<a className="hover:text-neutral-300 transition-colors" href="/agb">AGBs</a>
</li>
<li className="list-none">
<a className="hover:text-neutral-300 transition-colors" href="/impressum">Impressum</a>
</li>
</ul>
</div>
<div className="flex flex-col justify-center space-y-4">
<p className="hover:text-neutral-300 font-bold text-neutral-600 transition-colors dark:text-neutral-300">Register</p>
<ul className="hover:text-neutral-300 list-none space-y-4 text-neutral-600 transition-colors dark:text-neutral-300">
<li className="list-none">
<a className="hover:text-neutral-300 transition-colors" href="/products">Sign Up</a>
</li>
<li className="list-none">
<a className="hover:text-neutral-300 transition-colors" href="/products">Login</a>
</li>
<li className="list-none">
<a className="hover:text-neutral-300 transition-colors" href="/products">Forgot Password</a>
</li>
</ul>
</div>
</div>
</div>
<p className="inset-x-0 mt-20 bg-gradient-to-b from-black via-neutral-950 to-neutral-900 bg-clip-text text-center text-5xl font-bold text-transparent md:text-9xl lg:text-[12rem] xl:text-[13rem]">
WEBklar
</p>
</div>
);
};
export { DevStudio, Footer };
export default Footer;