feat: complete UI rebuild, responsive fixes, dark mode UI, and Team block overhaul

This commit is contained in:
MichalC
2026-09-16 23:33:17 +02:00
parent c2ae27a83b
commit 7cc68b9f36
30 changed files with 964 additions and 339 deletions
+9 -7
View File
@@ -34,14 +34,15 @@ export function Header({ navItems = [], whatsappNumber }: { navItems?: any[], wh
? "bg-background/90 backdrop-blur-md shadow-sm border-b border-border py-4"
: "bg-transparent py-6"
}`}
style={{ paddingRight: 'var(--scrollbar-width)' }}
>
<div className="container-premium flex items-center justify-between">
{/* Logo */}
<Link href={`/${currentLocale.code}`} className="group flex items-center gap-3 z-50">
<Link href={`/${currentLocale.code}`} className="group flex items-center gap-3 z-50" aria-label="Finanz- & Lohnbuchhaltung Dipl.-Ing. Janusz Kędzierski">
<div className="w-10 h-10 rounded-none bg-accent text-white flex items-center justify-center font-heading font-bold text-xl group-hover:bg-accent-hover transition-colors shadow-sm">
JK
</div>
<div className="flex flex-col">
<div className="hidden sm:flex flex-col">
<span className="font-heading font-bold text-lg leading-tight tracking-tight text-foreground">
Finanz- & Lohnbuchhaltung
</span>
@@ -52,7 +53,7 @@ export function Header({ navItems = [], whatsappNumber }: { navItems?: any[], wh
</Link>
{/* Desktop Navigation */}
<nav className="hidden xl:flex items-center gap-10">
<nav className="hidden lg:flex items-center gap-6 xl:gap-10">
{navItems.map((item, index) => {
if (item.page && item.page.slug) {
return (
@@ -72,7 +73,7 @@ export function Header({ navItems = [], whatsappNumber }: { navItems?: any[], wh
href={`/${currentLocale.code}#${item.anchor}`}
className="text-sm font-medium text-foreground/90 hover:text-accent transition-colors"
>
FAQ
{title}
</Link>
)
}
@@ -88,7 +89,7 @@ export function Header({ navItems = [], whatsappNumber }: { navItems?: any[], wh
</div>
<button
className="xl:hidden w-11 h-11 flex shrink-0 items-center justify-center text-foreground rounded-full hover:bg-accent/10 transition-colors ml-1"
className="lg:hidden w-11 h-11 flex shrink-0 items-center justify-center text-foreground rounded-full hover:bg-accent/10 transition-colors ml-1"
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
aria-label="Toggle menu"
>
@@ -100,7 +101,7 @@ export function Header({ navItems = [], whatsappNumber }: { navItems?: any[], wh
{/* Mobile Fullscreen Navigation */}
<div
className={`fixed inset-0 z-40 bg-background/95 backdrop-blur-xl transition-all duration-300 xl:hidden flex flex-col justify-center items-center ${
className={`fixed inset-0 z-40 bg-background/95 backdrop-blur-xl transition-all duration-300 lg:hidden flex flex-col justify-center items-center ${
isMobileMenuOpen ? "opacity-100 visible" : "opacity-0 invisible pointer-events-none"
}`}
>
@@ -117,6 +118,7 @@ export function Header({ navItems = [], whatsappNumber }: { navItems?: any[], wh
/>
)
} else if (item.anchor) {
const title = item.anchor.toUpperCase()
return (
<Link
key={index}
@@ -124,7 +126,7 @@ export function Header({ navItems = [], whatsappNumber }: { navItems?: any[], wh
className="text-2xl font-bold text-foreground hover:text-accent transition-colors"
onClick={() => setIsMobileMenuOpen(false)}
>
FAQ
{title}
</Link>
)
}