feat: integrate built-in forms, refine footer & parallax, dynamic navigation & branding assets
This commit is contained in:
+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>
|
||||
|
||||
Reference in New Issue
Block a user