radoslaw.smolinski/poi-preview
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(cookies & seo): refactor cookie settings to centered scrollable modal, add OpenGraph share image SEO metadata, and optimize hero LCP image

Browse Source
This commit is contained in:
radoslaw.smolinski
2026-08-26 03:05:00 +02:00
parent 3353cee64c
commit 8c6f3d2633
5 changed files with 175 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/AnimateIn.tsx
+20 -12
View File
@@ -15,22 +15,30 @@ export function AnimateIn({
delay = 0,
direction = 'up',
className = '',
threshold = 0.15,
threshold = 0,
}: AnimateInProps) {
const [isVisible, setIsVisible] = useState(false)
const ref = useRef<HTMLDivElement>(null)
useEffect(() => {
// If IntersectionObserver is not supported, show immediately
if (typeof window === 'undefined' || !('IntersectionObserver' in window)) {
setIsVisible(true)
return
}
const observer = new IntersectionObserver(
([entry]) => {
if (entry.isIntersecting) {
setIsVisible(true)
observer.unobserve(entry.target)
if (ref.current) {
observer.unobserve(ref.current)
}
}
},
{
threshold,
rootMargin: '0px 0px -40px 0px',
rootMargin: '0px 0px 150px 0px',
}
)
@@ -47,20 +55,20 @@ export function AnimateIn({
}, [threshold])
const getTransform = () => {
if (isVisible) return 'translate3d(0, 0, 0) scale(1)'
if (isVisible) return 'translate3d(0, 0, 0)'
switch (direction) {
case 'up':
return 'translate3d(0, 32px, 0)'
return 'translate3d(0, 24px, 0)'
case 'down':
return 'translate3d(0, -32px, 0)'
return 'translate3d(0, -24px, 0)'
case 'left':
return 'translate3d(32px, 0, 0)'
return 'translate3d(24px, 0, 0)'
case 'right':
return 'translate3d(-32px, 0, 0)'
return 'translate3d(-24px, 0, 0)'
case 'none':
return 'scale(0.96)'
return 'scale(0.98)'
default:
return 'translate3d(0, 32px, 0)'
return 'translate3d(0, 24px, 0)'
}
}
@@ -68,11 +76,11 @@ export function AnimateIn({
<div
ref={ref}
style={{
transitionDuration: '700ms',
transitionDuration: '600ms',
transitionTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
transitionDelay: `${delay}ms`,
transform: getTransform(),
opacity: isVisible ? 1 : 0,
opacity: isVisible ? 1 : 0.05,
}}
className={`transition-all ${className}`}
>
src/components/CustomCookieBanner.tsx
+98 -67
View File
@@ -28,80 +28,110 @@ export function CustomCookieBanner() {
}))
}
return (
<div
role="dialog"
aria-label="Cookie consent"
className="fixed bottom-0 inset-x-0 z-50 bg-[#1f1f1f] text-white p-5 sm:p-6 border-t-4 border-[#FFED00] shadow-2xl max-h-[85vh] overflow-y-auto"
>
<div className="container mx-auto max-w-4xl">
{!showSettings ? (
<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]">
<Cookie className="h-5 w-5" />
</div>
<div className="text-xs sm:text-sm text-[#e0e0e0] leading-relaxed">
<p>
{texts.message}{' '}
{texts.privacyLink && (
<a
href={texts.privacyLink.href}
className="text-[#FFED00] underline hover:no-underline font-bold"
>
{texts.privacyLink.label}
</a>
)}
</p>
</div>
</div>
const handleSave = () => {
savePreferences(choices)
setShowSettings(false)
}
<div className="flex flex-wrap items-center gap-2.5 shrink-0">
<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"
>
{texts.buttons.settings}
</button>
<button
type="button"
onClick={rejectAll}
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"
>
{texts.buttons.reject}
</button>
<button
type="button"
onClick={acceptAll}
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"
>
{texts.buttons.acceptAll}
</button>
const handleAcceptAll = () => {
acceptAll()
setShowSettings(false)
}
const handleRejectAll = () => {
rejectAll()
setShowSettings(false)
}
return (
<>
{/* 1. Compact Bottom Banner */}
{!showSettings && (
<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"
>
<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]">
<Cookie className="h-5 w-5" />
</div>
<div className="text-xs sm:text-sm text-[#e0e0e0] leading-relaxed">
<p>
{texts.message}{' '}
{texts.privacyLink && (
<a
href={texts.privacyLink.href}
className="text-[#FFED00] underline hover:no-underline font-bold"
>
{texts.privacyLink.label}
</a>
)}
</p>
</div>
</div>
<div className="flex flex-wrap items-center gap-2.5 shrink-0">
<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"
>
{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"
>
{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"
>
{texts.buttons.acceptAll}
</button>
</div>
</div>
</div>
) : (
<div className="space-y-5">
<div className="flex items-center justify-between border-b border-[#333333] pb-3">
</div>
)}
{/* 2. Modal Window for Cookie Settings (Centered & Scrollable) */}
{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">
<div
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"
>
{/* Modal Header */}
<div className="flex items-center justify-between border-b border-[#333333] pb-4 mb-6 shrink-0">
<div className="flex items-center gap-3">
<div className="p-1.5 bg-[#FFED00] text-[#1f1f1f]">
<Cookie className="h-5 w-5" />
</div>
<h2 className="text-sm sm:text-base font-black uppercase tracking-wider text-white">
<h2 className="text-base sm:text-lg font-black uppercase tracking-wider text-white">
{texts.settingsTitle}
</h2>
</div>
<button
type="button"
onClick={() => setShowSettings(false)}
className="text-[#a0a0a0] hover:text-white p-1"
aria-label="Zamknij ustawienia"
className="text-[#a0a0a0] hover:text-white p-1.5 cursor-pointer transition-colors"
aria-label="Zamknij"
>
<X className="h-5 w-5" />
</button>
</div>
<ul className="space-y-3">
{/* Scrollable Categories List */}
<div className="overflow-y-auto flex-1 pr-1 space-y-3.5">
{CONSENT_CATEGORIES.map((cat) => {
const isChecked = cat === 'necessary' ? true : !!choices[cat]
const isDisabled = cat === 'necessary'
@@ -110,18 +140,18 @@ export function CustomCookieBanner() {
if (!catData) return null
return (
<li
<div
key={cat}
onClick={() => !isDisabled && toggle(cat)}
className={`flex items-start justify-between gap-4 p-3.5 border border-[#333333] bg-[#262626] ${
className={`flex items-start justify-between gap-4 p-4 border border-[#333333] bg-[#262626] ${
!isDisabled ? 'cursor-pointer hover:border-[#FFED00]' : 'opacity-90'
} transition-colors`}
>
<div className="pr-4">
<div className="pr-4 select-none">
<div className="text-xs font-black uppercase tracking-wider text-[#FFED00]">
{catData.title}
</div>
<p className="text-xs text-[#a0a0a0] mt-0.5 leading-relaxed">
<p className="text-xs text-[#a0a0a0] mt-1 leading-relaxed">
{catData.description}
</p>
</div>
@@ -140,12 +170,13 @@ export function CustomCookieBanner() {
/>
</div>
</div>
</li>
</div>
)
})}
</ul>
</div>
<div className="flex justify-end gap-3 pt-2">
{/* Modal Footer Buttons */}
<div className="flex flex-wrap items-center justify-end gap-3 pt-6 mt-6 border-t border-[#333333] shrink-0">
<button
type="button"
onClick={() => setShowSettings(false)}
@@ -155,15 +186,15 @@ export function CustomCookieBanner() {
</button>
<button
type="button"
onClick={() => savePreferences(choices)}
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"
>
{texts.buttons.save}
</button>
</div>
</div>
)}
</div>
</div>
</div>
)}
</>
)
}