style: remove text gradients and hybridize footer styling
All checks were successful
Production Build & Deploy / build-and-deploy (push) Successful in 28s
All checks were successful
Production Build & Deploy / build-and-deploy (push) Successful in 28s
This commit is contained in:
DanielS
@@ -27,15 +27,15 @@ import { FaEye, FaRocket, FaHandshake } from 'react-icons/fa';
|
||||
<!-- Fun facts -->
|
||||
<div class="grid grid-cols-3 gap-6 text-center">
|
||||
<div class="p-4 rounded-2xl bg-white/40 dark:bg-white/5 border border-black/5 dark:border-white/5 backdrop-blur-sm">
|
||||
<span class="block text-3xl sm:text-4xl font-extrabold bg-gradient-to-r from-brand-cyan to-brand-magenta bg-clip-text text-transparent">100%</span>
|
||||
<span class="block text-3xl sm:text-4xl font-extrabold text-brand-arcticBlue">100%</span>
|
||||
<span class="text-xs text-gray-500 dark:text-gray-400 font-semibold uppercase tracking-wider">Zufriedenheit</span>
|
||||
</div>
|
||||
<div class="p-4 rounded-2xl bg-white/40 dark:bg-white/5 border border-black/5 dark:border-white/5 backdrop-blur-sm">
|
||||
<span class="block text-3xl sm:text-4xl font-extrabold bg-gradient-to-r from-brand-cyan to-brand-magenta bg-clip-text text-transparent">48h</span>
|
||||
<span class="block text-3xl sm:text-4xl font-extrabold text-brand-arcticBlue">48h</span>
|
||||
<span class="text-xs text-gray-500 dark:text-gray-400 font-semibold uppercase tracking-wider">Feedback-Zeit</span>
|
||||
</div>
|
||||
<div class="p-4 rounded-2xl bg-white/40 dark:bg-white/5 border border-black/5 dark:border-white/5 backdrop-blur-sm">
|
||||
<span class="block text-3xl sm:text-4xl font-extrabold bg-gradient-to-r from-brand-cyan to-brand-magenta bg-clip-text text-transparent">50+</span>
|
||||
<span class="block text-3xl sm:text-4xl font-extrabold text-brand-arcticBlue">50+</span>
|
||||
<span class="text-xs text-gray-500 dark:text-gray-400 font-semibold uppercase tracking-wider">Webprojekte</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -3,40 +3,40 @@
|
||||
const currentYear = new Date().getFullYear();
|
||||
---
|
||||
|
||||
<footer class="bg-brand-primary border-t border-white/5 py-12 text-gray-400 text-sm">
|
||||
<footer class="bg-slate-100 dark:bg-brand-darkBg border-t border-slate-200 dark:border-white/5 py-12 text-slate-600 dark:text-gray-400 text-sm transition-colors duration-300">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex flex-col md:flex-row items-center justify-between gap-6 border-b border-white/5 pb-8 mb-8">
|
||||
<div class="flex flex-col md:flex-row items-center justify-between gap-6 border-b border-slate-200 dark:border-white/5 pb-8 mb-8">
|
||||
|
||||
<!-- Brand logo/name -->
|
||||
<div>
|
||||
<a href="#" class="text-lg font-bold tracking-wider text-white">
|
||||
N&D <span class="bg-gradient-to-r from-brand-cyan to-brand-magenta bg-clip-text text-transparent">i-t SOLUTIONS</span>
|
||||
<a href="#" class="text-lg font-bold tracking-wider text-slate-900 dark:text-white">
|
||||
N&D <span class="text-brand-arcticBlue">i-t SOLUTIONS</span>
|
||||
</a>
|
||||
<p class="mt-2 text-xs text-gray-500 max-w-sm">
|
||||
<p class="mt-2 text-xs text-slate-500 dark:text-gray-500 max-w-sm">
|
||||
Ihr Partner für professionelles Webdesign, Website-Entwicklung und lokale SEO für Kleinbetriebe & KMU.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Footer Quick Links -->
|
||||
<nav class="flex flex-wrap gap-x-8 gap-y-2 justify-center">
|
||||
<a href="#" class="hover:text-brand-cyan transition-colors">Home</a>
|
||||
<a href="#services" class="hover:text-brand-cyan transition-colors">Services</a>
|
||||
<a href="#tech" class="hover:text-brand-cyan transition-colors">Tech-Stack</a>
|
||||
<a href="#about" class="hover:text-brand-cyan transition-colors">About</a>
|
||||
<a href="#contact" class="hover:text-brand-cyan transition-colors">Kontakt</a>
|
||||
<a href="#" class="hover:text-brand-arcticBlue transition-colors">Home</a>
|
||||
<a href="#services" class="hover:text-brand-arcticBlue transition-colors">Services</a>
|
||||
<a href="#tech" class="hover:text-brand-arcticBlue transition-colors">Tech-Stack</a>
|
||||
<a href="#about" class="hover:text-brand-arcticBlue transition-colors">About</a>
|
||||
<a href="#contact" class="hover:text-brand-arcticBlue transition-colors">Kontakt</a>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Bottom Copyright & Legal Links -->
|
||||
<div class="flex flex-col sm:flex-row items-center justify-between gap-4 text-xs text-gray-500">
|
||||
<div class="flex flex-col sm:flex-row items-center justify-between gap-4 text-xs text-slate-500 dark:text-gray-500">
|
||||
<div>
|
||||
© {currentYear} N&D i-t SOLUTIONS. Alle Rechte vorbehalten.
|
||||
</div>
|
||||
<div class="flex gap-6">
|
||||
<a href="/privacy" class="hover:text-white transition-colors">Datenschutz</a>
|
||||
<span class="text-white/10">|</span>
|
||||
<a href="/privacy#impressum" class="hover:text-white transition-colors">Impressum</a>
|
||||
<a href="/privacy" class="hover:text-slate-900 dark:hover:text-white transition-colors">Datenschutz</a>
|
||||
<span class="text-slate-300 dark:text-white/10">|</span>
|
||||
<a href="/privacy#impressum" class="hover:text-slate-900 dark:hover:text-white transition-colors">Impressum</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -10,7 +10,7 @@ import { FaBars, FaTimes } from 'react-icons/fa';
|
||||
<!-- Logo -->
|
||||
<a href="#" class="flex items-center gap-2 group">
|
||||
<span class="text-lg sm:text-xl font-bold tracking-wider text-slate-900 dark:text-white select-none transition-colors duration-300">
|
||||
N&D <span class="bg-gradient-to-r from-brand-arcticBlue to-blue-500 bg-clip-text text-transparent">i-t SOLUTIONS</span>
|
||||
N&D <span class="text-brand-arcticBlue">i-t SOLUTIONS</span>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
@@ -53,7 +53,7 @@ import { FaBars, FaTimes } from 'react-icons/fa';
|
||||
<div id="mobile-menu" class="fixed inset-0 z-50 bg-white dark:bg-brand-darkBg backdrop-blur-xl md:hidden translate-x-full transition-transform duration-300 ease-in-out">
|
||||
<div class="flex justify-between items-center p-6 border-b border-slate-200 dark:border-brand-darkBorder">
|
||||
<span class="text-lg font-bold tracking-wider text-slate-900 dark:text-white">
|
||||
N&D <span class="bg-gradient-to-r from-brand-arcticBlue to-blue-500 bg-clip-text text-transparent">i-t SOLUTIONS</span>
|
||||
N&D <span class="text-brand-arcticBlue">i-t SOLUTIONS</span>
|
||||
</span>
|
||||
<button id="mobile-close-btn" class="p-2 rounded bg-slate-100 dark:bg-zinc-900 text-slate-700 dark:text-white hover:bg-slate-200 dark:hover:bg-zinc-800 transition-all" aria-label="Close Menu">
|
||||
<FaTimes className="w-5 h-5" aria-hidden="true" />
|
||||
|
||||
@@ -288,11 +288,8 @@ const templates = [
|
||||
|
||||
<!-- Header Section -->
|
||||
<div class="max-w-3xl mb-16">
|
||||
<div class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full border border-brand-arcticBlue/20 bg-brand-arcticBlue/5 text-brand-arcticBlue text-[10px] font-semibold uppercase tracking-wider mb-4">
|
||||
Handwerk trifft moderne Architektur
|
||||
</div>
|
||||
<h1 class="text-4xl sm:text-6xl font-bold tracking-tight mb-4">
|
||||
Die perfekte Struktur für <span class="bg-clip-text text-transparent bg-gradient-to-r from-brand-arcticBlue to-white">jeden Betrieb.</span>
|
||||
Die perfekte Struktur für <span class="text-brand-arcticBlue">jeden Betrieb.</span>
|
||||
</h1>
|
||||
<p class="text-zinc-400 text-sm sm:text-base leading-relaxed">
|
||||
Egal ob klassische Schreinerei, moderne Anwaltskanzlei oder lokaler Handwerker: Wir passen das Design perfekt an Ihren Stil an. Hier sind 20 beispielhafte Bento-Kombinationen, Farbwelten und Layout-Konzepte.
|
||||
|
||||
Reference in New Issue
Block a user