feat: redesign Hero block, update global design tokens and fonts to new editorial direction

src/blocks/Hero/Component.tsx

@@ -1,100 +1,65 @@
 'use client'
-import React, { useState, useEffect } from 'react'
-import type { Page } from '../../payload-types'
+import React from 'react'
+import type { Page, Media } from '../../payload-types'
 import Link from 'next/link'
 import Image from 'next/image'
-import { ArrowRight } from 'lucide-react'
 
 type Props = Extract<NonNullable<Page['layout']>[0], { blockType: 'hero' }>
 
-/* PLACEHOLDER - do podmiany na realne zdjęcia klienta */
-const heroImages = [
-  {
-    url: 'https://images.unsplash.com/photo-1554224155-8d04cb21cd6c?auto=format&fit=crop&w=2000&q=80',
-    alt: 'Dokumenty podatkowe i praca biurowa',
-  },
-  {
-    url: 'https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&w=2000&q=80',
-    alt: 'Profesjonalne biuro doradztwa podatkowego',
-  },
-  {
-    url: 'https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?auto=format&fit=crop&w=2000&q=80',
-    alt: 'Praca z rozliczeniami podatkowymi',
-  },
-]
-
-export const HeroBlock: React.FC<Props> = ({ title, subtitle, primaryCta, secondaryCta, yearsOfExperience }) => {
-  const [currentSlide, setCurrentSlide] = useState(0)
-
-  useEffect(() => {
-    const timer = setInterval(() => {
-      setCurrentSlide((prev) => (prev + 1) % heroImages.length)
-    }, 6000)
-    return () => clearInterval(timer)
-  }, [])
+export const HeroBlock: React.FC<Props> = ({ title, subtitle, primaryCta, secondaryCta, image }) => {
+  // Sprawdzamy czy obrazek jest obiektem Media czy tylko ID
+  const heroMedia = typeof image === 'object' && image !== null ? (image as Media) : null;
+  // PLACEHOLDER - do podmiany na zdjęcie klienta jeśli brak w CMS
+  const imageUrl = heroMedia?.url || 'https://images.unsplash.com/photo-1554224155-8d04cb21cd6c?auto=format&fit=crop&w=1200&q=80';
+  const imageAlt = heroMedia?.alt || 'Doradztwo podatkowe - biuro';
 
   return (
-    <section className="relative w-full min-h-[90vh] flex items-end bg-background text-foreground pb-20 md:pb-32 pt-40">
-      {/* Pełnoekranowe tło ze sliderem */}
-      <div className="absolute inset-0 z-0 overflow-hidden">
-        {heroImages.map((img, idx) => (
-          <div
-            key={idx}
-            className={`absolute inset-0 transition-opacity duration-1000 ease-in-out ${
-              idx === currentSlide ? 'opacity-100' : 'opacity-0 pointer-events-none'
-            }`}
-          >
-            {/* PLACEHOLDER - do podmiany na realne zdjęcia klienta */}
-            <Image 
-              src={img.url}
-              alt={img.alt}
-              fill
-              priority={idx === 0}
-              sizes="100vw"
-              className="object-cover object-center"
-            />
-          </div>
-        ))}
-        {/* Potężny, gładki overlay z koloru tła aplikacji od dołu i od lewej, dla idealnej czytelności */}
-        <div className="absolute inset-0 bg-gradient-to-t from-background via-background/80 to-transparent" />
-        <div className="absolute inset-0 bg-gradient-to-r from-background via-background/40 to-transparent" />
-      </div>
-
-      <div className="container-premium relative z-10">
-        <div className="max-w-4xl">
-          {yearsOfExperience && (
-            <div className="font-mono text-sm md:text-base font-bold text-accent tracking-widest uppercase mb-4">
-              // {yearsOfExperience}
-            </div>
-          )}
-
-          <h1 className="font-heading text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-extrabold tracking-tight leading-[1.05] text-foreground mb-8 text-balance">
-            {title}
-          </h1>
+    <section className="w-full bg-background text-foreground pt-32 pb-16 md:pt-48 md:pb-24">
+      <div className="container-premium">
+        <div className="flex flex-col-reverse md:flex-row items-center justify-between gap-12 lg:gap-24">
           
-          <p className="text-xl sm:text-2xl text-foreground/80 mb-12 leading-relaxed max-w-2xl font-light">
-            {subtitle}
-          </p>
-          
-          <div className="flex flex-col sm:flex-row items-start sm:items-center gap-8">
-            <a 
-              href={process.env.NEXT_PUBLIC_WHATSAPP_LINK || '#'}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="px-8 py-4 bg-accent hover:bg-accent/90 text-background font-bold text-base sm:text-lg transition-colors flex items-center justify-center rounded-[var(--radius-button)]"
-            >
-              {primaryCta}
-            </a>
-            {secondaryCta?.text && secondaryCta?.url && (
-              <Link 
-                href={secondaryCta.url}
-                className="group flex items-center gap-3 text-foreground font-semibold text-lg hover:text-accent transition-colors"
+          <div className="w-full md:w-1/2 max-w-xl flex flex-col">
+            <h1 className="font-heading text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold leading-[1.05] text-foreground mb-8 text-balance">
+              {title}
+            </h1>
+            
+            <p className="text-xl sm:text-2xl text-foreground/80 mb-12 leading-relaxed font-light">
+              {subtitle}
+            </p>
+            
+            <div className="flex flex-col sm:flex-row items-start sm:items-center gap-8">
+              <a 
+                href={process.env.NEXT_PUBLIC_WHATSAPP_LINK || '#'}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="btn-primary"
               >
-                <span>{secondaryCta.text}</span>
-                <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
-              </Link>
-            )}
+                {primaryCta}
+              </a>
+              {secondaryCta?.text && secondaryCta?.url && (
+                <Link 
+                  href={secondaryCta.url}
+                  className="text-foreground font-semibold text-lg hover:text-accent hover:underline underline-offset-4 transition-colors"
+                >
+                  {secondaryCta.text}
+                </Link>
+              )}
+            </div>
           </div>
+
+          <div className="w-full md:w-1/2 flex justify-center md:justify-end">
+            <div className="relative w-full aspect-[4/5] max-w-md">
+              <Image 
+                src={imageUrl}
+                alt={imageAlt}
+                fill
+                priority
+                sizes="(max-width: 768px) 100vw, 50vw"
+                className="object-cover object-center"
+              />
+            </div>
+          </div>
+
         </div>
       </div>
     </section>