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>
|
||||
|
||||
+114
-55
@@ -1,5 +1,6 @@
|
||||
import React from 'react'
|
||||
import { MapPin, Phone, Mail, ShieldCheck, Cookie } from 'lucide-react'
|
||||
import { Phone, Mail, ShieldCheck, Cookie, FileText } from 'lucide-react'
|
||||
import { Logo } from '@/components/Logo'
|
||||
|
||||
export interface FooterNavItem {
|
||||
id?: string
|
||||
@@ -11,7 +12,9 @@ interface FooterProps {
|
||||
companyName?: string | null
|
||||
footerTagline?: string | null
|
||||
nip?: string | null
|
||||
nipLabel?: string | null
|
||||
regon?: string | null
|
||||
regonLabel?: string | null
|
||||
address?: string | null
|
||||
city?: string | null
|
||||
phone?: string | null
|
||||
@@ -21,15 +24,22 @@ interface FooterProps {
|
||||
privacyLabel?: string | null
|
||||
cookieHref?: string | null
|
||||
cookieLabel?: string | null
|
||||
termsHref?: string | null
|
||||
termsLabel?: string | null
|
||||
navTitle?: string | null
|
||||
contactTitle?: string | null
|
||||
legalTitle?: string | null
|
||||
creditLabel?: string | null
|
||||
creditHref?: string | null
|
||||
}
|
||||
|
||||
export function Footer({
|
||||
companyName,
|
||||
footerTagline,
|
||||
nip,
|
||||
nipLabel,
|
||||
regon,
|
||||
regonLabel,
|
||||
address,
|
||||
city,
|
||||
phone,
|
||||
@@ -39,50 +49,72 @@ export function Footer({
|
||||
privacyLabel,
|
||||
cookieHref,
|
||||
cookieLabel,
|
||||
termsHref,
|
||||
termsLabel,
|
||||
navTitle,
|
||||
contactTitle,
|
||||
legalTitle,
|
||||
creditLabel,
|
||||
creditHref,
|
||||
}: FooterProps) {
|
||||
return (
|
||||
<footer className="bg-[#1f1f1f] text-[#d0d0d0] py-16 border-t-4 border-[#FFED00]">
|
||||
<footer className="bg-dark text-[#d0d0d0] pt-14 pb-8 border-t-4 border-primary">
|
||||
<div className="container mx-auto px-4 sm:px-6 lg:px-12 max-w-7xl">
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-12">
|
||||
{/* Company Info */}
|
||||
<div className="md:col-span-2 space-y-4">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-10 lg:gap-12">
|
||||
{/* 1. Company Info */}
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex h-10 w-10 items-center justify-center bg-[#FFED00] text-[#1f1f1f] font-black text-xl">
|
||||
POI
|
||||
</div>
|
||||
{companyName && (
|
||||
<span className="text-xl font-black uppercase tracking-tight text-white">
|
||||
{companyName}
|
||||
</span>
|
||||
)}
|
||||
<Logo variant="dark" className="h-12 w-auto" alt={companyName || undefined} />
|
||||
</div>
|
||||
{footerTagline && (
|
||||
<p className="text-xs sm:text-sm text-[#a0a0a0] leading-relaxed max-w-md">
|
||||
<p className="text-xs sm:text-sm text-[#a0a0a0] leading-relaxed">
|
||||
{footerTagline}
|
||||
</p>
|
||||
)}
|
||||
{(nip || regon) && (
|
||||
<div className="text-xs text-[#888888] font-mono space-y-1 pt-2 border-t border-[#333333]">
|
||||
{nip && <div>NIP: <span className="text-[#e0e0e0] font-semibold">{nip}</span></div>}
|
||||
{regon && <div>REGON: <span className="text-[#e0e0e0] font-semibold">{regon}</span></div>}
|
||||
{(companyName || address || city || nip || regon) && (
|
||||
<div className="text-xs text-[#a0a0a0] space-y-1.5 pt-3 border-t border-[#363032]">
|
||||
{companyName && (
|
||||
<div className="font-bold text-white uppercase tracking-wide">
|
||||
{companyName}
|
||||
</div>
|
||||
)}
|
||||
{(address || city) && (
|
||||
<div className="text-[#a0a0a0]">
|
||||
{address}
|
||||
{address && city ? ', ' : ''}
|
||||
{city}
|
||||
</div>
|
||||
)}
|
||||
<div className="text-xs text-[#888888] font-mono space-y-1 pt-1">
|
||||
{nip && (
|
||||
<div>
|
||||
{nipLabel ? `${nipLabel}: ` : ''}
|
||||
<span className="text-[#e0e0e0] font-semibold">{nip}</span>
|
||||
</div>
|
||||
)}
|
||||
{regon && (
|
||||
<div>
|
||||
{regonLabel ? `${regonLabel}: ` : ''}
|
||||
<span className="text-[#e0e0e0] font-semibold">{regon}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Navigation Links */}
|
||||
{/* 2. Navigation Links */}
|
||||
{items && items.length > 0 && (
|
||||
<div className="space-y-4">
|
||||
{navTitle && (
|
||||
<div className="text-xs font-black uppercase tracking-widest text-[#FFED00] border-b border-[#333333] pb-2">
|
||||
<div className="text-xs font-black uppercase tracking-widest text-primary border-b border-[#363032] pb-2">
|
||||
{navTitle}
|
||||
</div>
|
||||
)}
|
||||
<ul className="space-y-2.5 text-xs font-bold uppercase tracking-wider">
|
||||
{items.map((item, idx) => (
|
||||
<li key={item.id || idx}>
|
||||
<a href={item.href} className="text-[#d0d0d0] hover:text-[#FFED00] transition-colors block py-0.5">
|
||||
<a href={item.href} className="text-[#d0d0d0] hover:text-primary transition-colors block py-0.5">
|
||||
{item.label}
|
||||
</a>
|
||||
</li>
|
||||
@@ -91,65 +123,92 @@ export function Footer({
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Contact Details */}
|
||||
{(phone || email || address || city) && (
|
||||
{/* 3. Legal & Policies Column */}
|
||||
{(privacyHref || cookieHref || termsHref) && (
|
||||
<div className="space-y-4">
|
||||
{legalTitle && (
|
||||
<div className="text-xs font-black uppercase tracking-widest text-primary border-b border-[#363032] pb-2">
|
||||
{legalTitle}
|
||||
</div>
|
||||
)}
|
||||
<ul className="space-y-2.5 text-xs font-bold uppercase tracking-wider">
|
||||
{privacyHref && privacyLabel && (
|
||||
<li>
|
||||
<a href={privacyHref} className="text-[#d0d0d0] hover:text-primary transition-colors flex items-center gap-2 py-0.5">
|
||||
<ShieldCheck className="h-3.5 w-3.5 text-primary shrink-0" />
|
||||
<span>{privacyLabel}</span>
|
||||
</a>
|
||||
</li>
|
||||
)}
|
||||
{cookieHref && cookieLabel && (
|
||||
<li>
|
||||
<a href={cookieHref} className="text-[#d0d0d0] hover:text-primary transition-colors flex items-center gap-2 py-0.5">
|
||||
<Cookie className="h-3.5 w-3.5 text-primary shrink-0" />
|
||||
<span>{cookieLabel}</span>
|
||||
</a>
|
||||
</li>
|
||||
)}
|
||||
{termsHref && termsLabel && (
|
||||
<li>
|
||||
<a href={termsHref} className="text-[#d0d0d0] hover:text-primary transition-colors flex items-center gap-2 py-0.5">
|
||||
<FileText className="h-3.5 w-3.5 text-primary shrink-0" />
|
||||
<span>{termsLabel}</span>
|
||||
</a>
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 4. Contact Details */}
|
||||
{(phone || email) && (
|
||||
<div className="space-y-4">
|
||||
{contactTitle && (
|
||||
<div className="text-xs font-black uppercase tracking-widest text-[#FFED00] border-b border-[#333333] pb-2">
|
||||
<div className="text-xs font-black uppercase tracking-widest text-primary border-b border-[#363032] pb-2">
|
||||
{contactTitle}
|
||||
</div>
|
||||
)}
|
||||
<ul className="space-y-3 text-xs">
|
||||
{phone && (
|
||||
<li className="flex items-center gap-2.5">
|
||||
<Phone className="h-4 w-4 text-[#FFED00] shrink-0" />
|
||||
<a href={`tel:${phone.replace(/\s+/g, '')}`} className="text-white hover:text-[#FFED00] font-mono font-black text-sm">
|
||||
<Phone className="h-4 w-4 text-primary shrink-0" />
|
||||
<a href={`tel:${phone.replace(/\s+/g, '')}`} className="text-white hover:text-primary font-mono font-black text-sm">
|
||||
{phone}
|
||||
</a>
|
||||
</li>
|
||||
)}
|
||||
{email && (
|
||||
<li className="flex items-center gap-2.5">
|
||||
<Mail className="h-4 w-4 text-[#FFED00] shrink-0" />
|
||||
<Mail className="h-4 w-4 text-primary shrink-0" />
|
||||
<a href={`mailto:${email}`} className="text-[#d0d0d0] hover:text-white font-medium">
|
||||
{email}
|
||||
</a>
|
||||
</li>
|
||||
)}
|
||||
{(address || city) && (
|
||||
<li className="flex items-start gap-2.5">
|
||||
<MapPin className="h-4 w-4 text-[#FFED00] shrink-0 mt-0.5" />
|
||||
<span className="text-[#a0a0a0]">
|
||||
{address}
|
||||
{address && city ? ', ' : ''}
|
||||
{city}
|
||||
</span>
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Bottom Bar with Privacy & Cookie Links */}
|
||||
<div className="mt-12 pt-8 border-t border-[#333333] flex flex-col sm:flex-row items-center justify-between gap-4 text-xs text-[#888888]">
|
||||
<div>
|
||||
© {new Date().getFullYear()} {companyName}
|
||||
</div>
|
||||
<div className="flex items-center gap-6 text-xs font-bold uppercase tracking-wider">
|
||||
{privacyHref && privacyLabel && (
|
||||
<a href={privacyHref} className="text-[#a0a0a0] hover:text-[#FFED00] transition-colors flex items-center gap-1.5">
|
||||
<ShieldCheck className="h-3.5 w-3.5 text-[#FFED00]" />
|
||||
<span>{privacyLabel}</span>
|
||||
{/* Bottom Bar - Evenly balanced spacing */}
|
||||
<div className="mt-8 pt-5 border-t border-[#363032] flex flex-col sm:flex-row items-center justify-between gap-3 text-xs text-[#888888]">
|
||||
{companyName && (
|
||||
<div>
|
||||
© {new Date().getFullYear()} {companyName}
|
||||
</div>
|
||||
)}
|
||||
{creditHref && creditLabel && (
|
||||
<div>
|
||||
<a
|
||||
href={creditHref}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="font-bold text-white hover:text-primary transition-colors underline decoration-primary decoration-2 underline-offset-4"
|
||||
>
|
||||
{creditLabel}
|
||||
</a>
|
||||
)}
|
||||
{cookieHref && cookieLabel && (
|
||||
<a href={cookieHref} className="text-[#a0a0a0] hover:text-[#FFED00] transition-colors flex items-center gap-1.5">
|
||||
<Cookie className="h-3.5 w-3.5 text-[#FFED00]" />
|
||||
<span>{cookieLabel}</span>
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
+23
-36
@@ -3,6 +3,7 @@
|
||||
import React, { useState, useRef, useEffect } from 'react'
|
||||
import { ArrowRight, Globe, ChevronDown } from 'lucide-react'
|
||||
import { usePathname } from 'next/navigation'
|
||||
import { Logo } from '@/components/Logo'
|
||||
|
||||
export interface NavItem {
|
||||
id?: string
|
||||
@@ -57,27 +58,27 @@ export function Header({
|
||||
return `/${targetLocale}${pathname}`
|
||||
}
|
||||
|
||||
// Filter out duplicated "Kontakt" from menu items since it has a dedicated right CTA button
|
||||
// Filter out duplicated CTA item from menu items if it matches contactLabel
|
||||
const filteredNavItems = items?.filter(
|
||||
(item) => !item.label.toLowerCase().includes('kontakt')
|
||||
(item) => !contactLabel || item.label.trim().toLowerCase() !== contactLabel.trim().toLowerCase()
|
||||
)
|
||||
|
||||
const languages = [
|
||||
{ code: 'pl', label: 'PL' },
|
||||
{ code: 'en', label: 'UK' },
|
||||
]
|
||||
const languages = ['pl', 'en'].map((code) => ({
|
||||
code,
|
||||
label: code.toUpperCase(),
|
||||
}))
|
||||
|
||||
const activeLang = languages.find((l) => l.code === currentLocale) || languages[0]
|
||||
|
||||
return (
|
||||
<header className="sticky top-0 z-50 w-full bg-white border-b-2 border-[#1f1f1f] shadow-xs">
|
||||
{/* Top Black Utility Bar */}
|
||||
<header className="sticky top-0 z-50 w-full bg-white border-b-2 border-dark shadow-xs">
|
||||
{/* Top Utility Bar */}
|
||||
{(tagline || phone) && (
|
||||
<div className="bg-[#1f1f1f] text-white text-xs py-2 hidden md:block">
|
||||
<div className="bg-dark text-white text-xs py-2 hidden md:block">
|
||||
<div className="container mx-auto px-4 sm:px-6 lg:px-12 max-w-7xl flex items-center justify-between">
|
||||
{tagline && (
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="inline-block w-2.5 h-2.5 bg-[#FFED00]" />
|
||||
<span className="inline-block w-2.5 h-2.5 bg-primary" />
|
||||
<span className="font-bold uppercase tracking-wider text-[11px] text-[#e0e0e0]">
|
||||
{tagline}
|
||||
</span>
|
||||
@@ -92,7 +93,7 @@ export function Header({
|
||||
)}
|
||||
<a
|
||||
href={`tel:${phone.replace(/\s+/g, '')}`}
|
||||
className="font-black uppercase tracking-wider text-[11px] text-[#FFED00] hover:underline font-mono"
|
||||
className="font-black uppercase tracking-wider text-[11px] text-primary hover:text-accent hover:underline font-mono transition-colors"
|
||||
>
|
||||
{phone}
|
||||
</a>
|
||||
@@ -104,32 +105,18 @@ export function Header({
|
||||
|
||||
{/* Main Navigation Bar */}
|
||||
<div className="container mx-auto flex h-20 items-center justify-between px-4 sm:px-6 lg:px-12 max-w-7xl">
|
||||
<a href={homeHref} className="flex items-center gap-3.5">
|
||||
<div className="flex h-11 w-11 items-center justify-center bg-[#FFED00] text-[#1f1f1f] font-black text-xl border-2 border-[#1f1f1f] shadow-xs">
|
||||
POI
|
||||
</div>
|
||||
<div>
|
||||
{companyName && (
|
||||
<span className="text-xl font-black uppercase tracking-tight text-[#1f1f1f] block leading-none">
|
||||
{companyName}
|
||||
</span>
|
||||
)}
|
||||
{tagline && (
|
||||
<span className="text-[10px] uppercase tracking-widest text-[#666666] font-bold block mt-1">
|
||||
{tagline}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<a href={homeHref} className="flex items-center gap-3">
|
||||
<Logo className="h-12 w-auto" alt={companyName || undefined} />
|
||||
</a>
|
||||
|
||||
{/* Navigation Items */}
|
||||
{filteredNavItems && filteredNavItems.length > 0 && (
|
||||
<nav className="hidden lg:flex items-center gap-8 text-xs font-black uppercase tracking-wider text-[#1f1f1f]">
|
||||
<nav className="hidden lg:flex items-center gap-8 text-xs font-black uppercase tracking-wider text-dark">
|
||||
{filteredNavItems.map((item, idx) => (
|
||||
<a
|
||||
key={item.id || idx}
|
||||
href={item.href}
|
||||
className="hover:text-[#1f1f1f] hover:border-b-2 hover:border-[#FFED00] transition-all py-2"
|
||||
className="hover:text-dark hover:border-b-2 hover:border-primary transition-all py-2"
|
||||
>
|
||||
{item.label}
|
||||
</a>
|
||||
@@ -143,15 +130,15 @@ export function Header({
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setLangDropdownOpen(!langDropdownOpen)}
|
||||
className="flex items-center gap-2 border-2 border-[#1f1f1f] bg-white px-3 py-2 text-xs font-black text-[#1f1f1f] hover:bg-[#f4f4f4] transition-colors cursor-pointer"
|
||||
className="flex items-center gap-2 border-2 border-dark bg-white px-3 py-2 text-xs font-black text-dark hover:bg-surface-gray transition-colors cursor-pointer"
|
||||
>
|
||||
<Globe className="h-3.5 w-3.5 text-[#1f1f1f]" />
|
||||
<Globe className="h-3.5 w-3.5 text-dark" />
|
||||
<span className="uppercase">{activeLang.code.toUpperCase()}</span>
|
||||
<ChevronDown className={`h-3.5 w-3.5 transition-transform duration-200 ${langDropdownOpen ? 'rotate-180' : ''}`} />
|
||||
</button>
|
||||
|
||||
{langDropdownOpen && (
|
||||
<div className="absolute right-0 mt-1 w-28 bg-white border-2 border-[#1f1f1f] shadow-xl z-50 py-1">
|
||||
<div className="absolute right-0 mt-1 w-28 bg-white border-2 border-dark shadow-xl z-50 py-1">
|
||||
{languages.map((lang) => (
|
||||
<a
|
||||
key={lang.code}
|
||||
@@ -159,12 +146,12 @@ export function Header({
|
||||
onClick={() => setLangDropdownOpen(false)}
|
||||
className={`flex items-center justify-between px-3 py-2 text-xs font-bold transition-colors ${
|
||||
currentLocale === lang.code
|
||||
? 'bg-[#1f1f1f] text-[#FFED00]'
|
||||
: 'text-[#1f1f1f] hover:bg-[#FFED00]/20'
|
||||
? 'bg-dark text-primary'
|
||||
: 'text-dark hover:bg-primary/20'
|
||||
}`}
|
||||
>
|
||||
<span>{lang.label}</span>
|
||||
{currentLocale === lang.code && <span className="w-1.5 h-1.5 bg-[#FFED00]" />}
|
||||
{currentLocale === lang.code && <span className="w-1.5 h-1.5 bg-primary" />}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
@@ -175,7 +162,7 @@ export function Header({
|
||||
{contactHref && contactLabel && (
|
||||
<a
|
||||
href={contactHref}
|
||||
className="inline-flex items-center gap-2 bg-[#FFED00] hover:bg-[#fae100] text-[#1f1f1f] border-2 border-[#1f1f1f] px-6 py-3 text-xs font-black uppercase tracking-widest transition-colors shadow-xs"
|
||||
className="inline-flex items-center gap-2 bg-accent hover:bg-accent-hover text-white border-2 border-dark px-6 py-3 text-xs font-black uppercase tracking-widest transition-colors shadow-xs"
|
||||
>
|
||||
<span>{contactLabel}</span>
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
|
||||
@@ -0,0 +1,47 @@
|
||||
import React from 'react'
|
||||
import Image from 'next/image'
|
||||
|
||||
interface LogoProps {
|
||||
className?: string
|
||||
variant?: 'light' | 'dark' // light = dark text on white bg, dark = white text on dark bg
|
||||
height?: number
|
||||
width?: number
|
||||
priority?: boolean
|
||||
alt?: string
|
||||
}
|
||||
|
||||
export function LogoIcon({ className = 'h-11 w-auto', alt = '', ...props }: { className?: string; alt?: string }) {
|
||||
return (
|
||||
<Image
|
||||
src="/images/logo-icon.webp"
|
||||
alt={alt}
|
||||
width={140}
|
||||
height={140}
|
||||
priority
|
||||
className={`object-contain ${className}`}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export function Logo({
|
||||
className = 'h-12 w-auto',
|
||||
variant = 'light',
|
||||
priority = true,
|
||||
alt = '',
|
||||
...props
|
||||
}: LogoProps) {
|
||||
const src = variant === 'dark' ? '/images/logo-white.webp' : '/images/logo.webp'
|
||||
|
||||
return (
|
||||
<Image
|
||||
src={src}
|
||||
alt={alt}
|
||||
width={240}
|
||||
height={84}
|
||||
priority={priority}
|
||||
className={`object-contain select-none ${className}`}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user