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

2026-08-26 03:05:00 +02:00
parent 3353cee64c
commit 8c6f3d2633
5 changed files with 175 additions and 88 deletions
@@ -23,7 +23,49 @@ const pageMetadata = createPageMetadata({

 export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
  const { locale, slug } = await params
-  return pageMetadata({ payload: await getCachedPayload(), locale, slug: slug ?? [] })
+  const payload = await getCachedPayload()
+  const baseMeta = await pageMetadata({ payload, locale, slug: slug ?? [] })
+
+  const baseUrl = process.env.NEXT_PUBLIC_SERVER_URL || 'http://localhost:3000'
+  const fallbackOgImage = `${baseUrl}/images/paving-hero.webp`
+
+  const ogImages =
+    baseMeta.openGraph?.images && (baseMeta.openGraph.images as unknown[]).length > 0
+      ? baseMeta.openGraph.images
+      : [
+          {
+            url: fallbackOgImage,
+            width: 1920,
+            height: 1080,
+            alt: 'POI Clean House - Czyszczenie Kostki Brukowej',
+          },
+        ]
+
+  return {
+    ...baseMeta,
+    title: baseMeta.title || 'POI Clean House | Profesjonalne Czyszczenie Kostki Brukowej',
+    description:
+      baseMeta.description ||
+      'Specjalistyczne mycie gorącowodne do 100°C, odplamianie oleju, piaskowanie i impregnacja hydrofobowa kostki brukowej. Sprawdź bezpłatną wycenę!',
+    openGraph: {
+      ...baseMeta.openGraph,
+      title: (baseMeta.title as string) || 'POI Clean House | Profesjonalne Czyszczenie Kostki Brukowej',
+      description:
+        baseMeta.description ||
+        'Specjalistyczne mycie gorącowodne do 100°C, odplamianie oleju, piaskowanie i impregnacja hydrofobowa kostki brukowej. Sprawdź bezpłatną wycenę!',
+      images: ogImages,
+      type: 'website',
+      siteName: 'POI Clean House',
+    },
+    twitter: {
+      card: 'summary_large_image',
+      title: (baseMeta.title as string) || 'POI Clean House | Profesjonalne Czyszczenie Kostki Brukowej',
+      description:
+        baseMeta.description ||
+        'Specjalistyczne mycie gorącowodne do 100°C, odplamianie oleju, piaskowanie i impregnacja hydrofobowa kostki brukowej.',
+      images: [fallbackOgImage],
+    },
+  }
 }

 export default async function Page({ params, searchParams }: PageProps) {
@@ -1,4 +1,5 @@
 import React from 'react'
+import Image from 'next/image'
 import { Phone, ArrowRight, Check } from 'lucide-react'
 import { AnimateIn } from '@/components/AnimateIn'

@@ -31,15 +32,20 @@ export function HeroBlockComponent(props: HeroBlockProps) {

  return (
    <div className="w-full">
-      {/* Hero Banner Section with Background Photo */}
-      <section
-        className="relative w-full min-h-[calc(100vh-8rem)] max-h-[780px] flex items-center bg-cover bg-center overflow-hidden"
-        style={{
-          backgroundImage: "url('/images/paving-hero.jpg')",
-        }}
-      >
+      {/* Hero Banner Section with Optimized Next.js LCP Image */}
+      <section className="relative w-full min-h-[calc(100vh-8rem)] max-h-[780px] flex items-center overflow-hidden">
+        {/* Next.js LCP High Priority Image */}
+        <Image
+          src="/images/paving-hero.webp"
+          alt="Profesjonalne czyszczenie i renowacja kostki brukowej"
+          fill
+          priority
+          sizes="100vw"
+          className="object-cover object-center z-0"
+        />
+
        {/* Dark gradient overlay for text readability */}
-        <div className="absolute inset-0 bg-gradient-to-r from-[#141414]/90 via-[#141414]/65 to-black/20" />
+        <div className="absolute inset-0 bg-gradient-to-r from-[#141414]/90 via-[#141414]/65 to-black/20 z-[1]" />

        <div className="container mx-auto px-4 sm:px-6 lg:px-12 max-w-7xl relative z-10 py-10 lg:py-14">
          {/* Compact Architectural Content Card */}
@@ -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}`}
    >
@@ -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>
+      )}
+    </>
  )
 }