feat: integrate built-in forms, refine footer & parallax, dynamic navigation & branding assets
This commit is contained in:
@@ -61,12 +61,12 @@ export function CustomCookieBanner() {
|
||||
<div
|
||||
role="dialog"
|
||||
aria-label="Cookie consent"
|
||||
className="fixed bottom-0 inset-x-0 z-50 bg-[#1f1f1f] text-white p-4 sm:p-6 border-t-4 border-[#FFED00] shadow-2xl"
|
||||
className="fixed bottom-0 inset-x-0 z-50 bg-dark text-white p-4 sm:p-6 border-t-4 border-primary shadow-2xl"
|
||||
>
|
||||
<div className="container mx-auto max-w-5xl">
|
||||
<div className="flex flex-col lg:flex-row lg:items-center justify-between gap-5">
|
||||
<div className="flex items-start gap-3.5">
|
||||
<div className="p-2 bg-[#FFED00] text-[#1f1f1f] shrink-0 border border-[#1f1f1f]">
|
||||
<div className="p-2 bg-primary text-dark shrink-0 border border-dark">
|
||||
<Cookie className="h-5 w-5" />
|
||||
</div>
|
||||
<div className="text-xs sm:text-sm text-[#e0e0e0] leading-relaxed">
|
||||
@@ -75,7 +75,7 @@ export function CustomCookieBanner() {
|
||||
{texts.privacyLink && (
|
||||
<a
|
||||
href={texts.privacyLink.href}
|
||||
className="text-[#FFED00] underline hover:no-underline font-bold"
|
||||
className="text-primary underline hover:no-underline font-bold"
|
||||
>
|
||||
{texts.privacyLink.label}
|
||||
</a>
|
||||
@@ -88,21 +88,21 @@ export function CustomCookieBanner() {
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowSettings(true)}
|
||||
className="bg-[#2b2b2b] hover:bg-[#383838] text-white border border-[#444444] px-4 py-2.5 text-xs font-bold uppercase tracking-wider transition-colors cursor-pointer"
|
||||
className="bg-[#332d2e] hover:bg-[#423b3c] text-white border border-[#4a4244] px-4 py-2.5 text-xs font-bold uppercase tracking-wider transition-colors cursor-pointer"
|
||||
>
|
||||
{texts.buttons.settings}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleRejectAll}
|
||||
className="bg-[#2b2b2b] hover:bg-[#383838] text-white border border-[#444444] px-4 py-2.5 text-xs font-bold uppercase tracking-wider transition-colors cursor-pointer"
|
||||
className="bg-[#332d2e] hover:bg-[#423b3c] text-white border border-[#4a4244] px-4 py-2.5 text-xs font-bold uppercase tracking-wider transition-colors cursor-pointer"
|
||||
>
|
||||
{texts.buttons.reject}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleAcceptAll}
|
||||
className="bg-[#FFED00] hover:bg-[#fae100] text-[#1f1f1f] border-2 border-[#1f1f1f] px-6 py-2.5 text-xs font-black uppercase tracking-widest transition-all cursor-pointer shadow-xs"
|
||||
className="bg-primary hover:bg-primary-hover text-dark border-2 border-dark px-6 py-2.5 text-xs font-black uppercase tracking-widest transition-all cursor-pointer shadow-xs"
|
||||
>
|
||||
{texts.buttons.acceptAll}
|
||||
</button>
|
||||
@@ -112,7 +112,7 @@ export function CustomCookieBanner() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 2. Modal Window for Cookie Settings (Scroll-locked backdrop & isolated modal scrolling) */}
|
||||
{/* 2. Modal Window for Cookie Settings */}
|
||||
{showSettings && (
|
||||
<div
|
||||
className="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6 bg-black/80 backdrop-blur-xs overflow-y-auto overscroll-contain"
|
||||
@@ -125,13 +125,13 @@ export function CustomCookieBanner() {
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label={texts.settingsTitle}
|
||||
className="w-full max-w-2xl bg-[#1f1f1f] text-white p-6 sm:p-8 border-t-4 border-[#FFED00] shadow-2xl my-auto max-h-[90vh] flex flex-col overscroll-contain"
|
||||
className="w-full max-w-2xl bg-dark text-white p-6 sm:p-8 border-t-4 border-primary shadow-2xl my-auto max-h-[90vh] flex flex-col overscroll-contain"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{/* Modal Header */}
|
||||
<div className="flex items-center justify-between border-b border-[#333333] pb-4 mb-6 shrink-0">
|
||||
<div className="flex items-center justify-between border-b border-[#363032] pb-4 mb-6 shrink-0">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-1.5 bg-[#FFED00] text-[#1f1f1f]">
|
||||
<div className="p-1.5 bg-primary text-dark">
|
||||
<Cookie className="h-5 w-5" />
|
||||
</div>
|
||||
<h2 className="text-base sm:text-lg font-black uppercase tracking-wider text-white">
|
||||
@@ -161,12 +161,12 @@ export function CustomCookieBanner() {
|
||||
<div
|
||||
key={cat}
|
||||
onClick={() => !isDisabled && toggle(cat)}
|
||||
className={`flex items-start justify-between gap-4 p-4 border border-[#333333] bg-[#262626] ${
|
||||
!isDisabled ? 'cursor-pointer hover:border-[#FFED00]' : 'opacity-90'
|
||||
className={`flex items-start justify-between gap-4 p-4 border border-[#363032] bg-[#2d2728] ${
|
||||
!isDisabled ? 'cursor-pointer hover:border-primary' : 'opacity-90'
|
||||
} transition-colors`}
|
||||
>
|
||||
<div className="pr-4 select-none">
|
||||
<div className="text-xs font-black uppercase tracking-wider text-[#FFED00]">
|
||||
<div className="text-xs font-black uppercase tracking-wider text-primary">
|
||||
{catData.title}
|
||||
</div>
|
||||
<p className="text-xs text-[#a0a0a0] mt-1 leading-relaxed">
|
||||
@@ -174,15 +174,15 @@ export function CustomCookieBanner() {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Custom Kärcher Checkbox */}
|
||||
{/* Custom Checkbox */}
|
||||
<div className="relative flex items-center justify-center mt-0.5 shrink-0">
|
||||
<div
|
||||
className={`w-5 h-5 border-2 border-[#1f1f1f] transition-all flex items-center justify-center ${
|
||||
isChecked ? 'bg-[#FFED00]' : 'bg-white'
|
||||
className={`w-5 h-5 border-2 border-dark transition-all flex items-center justify-center ${
|
||||
isChecked ? 'bg-primary' : 'bg-white'
|
||||
}`}
|
||||
>
|
||||
<Check
|
||||
className={`w-3.5 h-3.5 text-[#1f1f1f] stroke-[3] transition-opacity ${
|
||||
className={`w-3.5 h-3.5 text-dark stroke-[3] transition-opacity ${
|
||||
isChecked ? 'opacity-100' : 'opacity-0'
|
||||
}`}
|
||||
/>
|
||||
@@ -194,18 +194,18 @@ export function CustomCookieBanner() {
|
||||
</div>
|
||||
|
||||
{/* Modal Footer Buttons */}
|
||||
<div className="flex flex-wrap items-center justify-end gap-3 pt-6 mt-6 border-t border-[#333333] shrink-0">
|
||||
<div className="flex flex-wrap items-center justify-end gap-3 pt-6 mt-6 border-t border-[#363032] shrink-0">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowSettings(false)}
|
||||
className="bg-[#2b2b2b] hover:bg-[#383838] text-white border border-[#444444] px-5 py-2.5 text-xs font-bold uppercase tracking-wider transition-colors cursor-pointer"
|
||||
className="bg-[#332d2e] hover:bg-[#423b3c] text-white border border-[#4a4244] px-5 py-2.5 text-xs font-bold uppercase tracking-wider transition-colors cursor-pointer"
|
||||
>
|
||||
{texts.buttons.back}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleSave}
|
||||
className="bg-[#FFED00] hover:bg-[#fae100] text-[#1f1f1f] border-2 border-[#1f1f1f] px-6 py-2.5 text-xs font-black uppercase tracking-widest transition-all cursor-pointer shadow-xs"
|
||||
className="bg-primary hover:bg-primary-hover text-dark border-2 border-dark px-6 py-2.5 text-xs font-black uppercase tracking-widest transition-all cursor-pointer shadow-xs"
|
||||
>
|
||||
{texts.buttons.save}
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user