feat: radical premium redesign removing AI slop (full bleed hero, open layouts, editorial typography)

src/blocks/Testimonials/Component.tsx

@@ -1,66 +1,68 @@
 'use client'
-import React from 'react'
-import { Quote } from 'lucide-react'
-import Image from 'next/image'
+import React, { useState, useEffect } from 'react'
 import type { Page } from '../../payload-types'
 
 type Props = Extract<NonNullable<Page['layout']>[0], { blockType: 'testimonials' }>
 
-/* PLACEHOLDER - do podmiany na realne zdjęcia klienta */
-const avatarPlaceholders = [
-  'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=150&h=150&q=80',
-  'https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=150&h=150&q=80',
-  'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=150&h=150&q=80',
-]
-
 export const TestimonialsBlock: React.FC<Props> = ({ title, testimonials }) => {
+  const [currentIndex, setCurrentIndex] = useState(0)
+
+  useEffect(() => {
+    if (!testimonials || testimonials.length <= 1) return
+
+    const timer = setInterval(() => {
+      setCurrentIndex((prev) => (prev + 1) % testimonials.length)
+    }, 7000)
+    
+    return () => clearInterval(timer)
+  }, [testimonials])
+
+  if (!testimonials || testimonials.length === 0) return null
+
   return (
-    <section className="py-16 md:py-24 bg-background">
-      <div className="container-premium">
-        <div className="max-w-2xl mb-12 text-center md:text-left">
-          <h2 className="font-heading text-2xl sm:text-3xl md:text-4xl font-bold text-foreground tracking-tight">
-            {title}
-          </h2>
-        </div>
+    <section className="py-24 md:py-40 bg-background border-y border-border overflow-hidden">
+      <div className="container-premium max-w-4xl mx-auto text-center relative">
+        <h2 className="text-xs font-bold tracking-[0.2em] uppercase text-accent mb-12">
+          {title}
+        </h2>
         
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
-          {testimonials?.map((t: NonNullable<Props['testimonials']>[0], index: number) => {
-            const avatarUrl = avatarPlaceholders[index % avatarPlaceholders.length]
-
-            return (
-              <div 
-                key={t.id || index}
-                className="bg-card border border-border p-6 sm:p-8 rounded-2xl shadow-sm flex flex-col justify-between"
-              >
-                <div>
-                  <Quote className="text-accent/30 mb-4" size={32} />
-                  <p className="text-foreground/80 leading-relaxed text-sm sm:text-base mb-6">
-                    "{t.quote}"
-                  </p>
-                </div>
-
-                <div className="flex items-center gap-3.5 pt-4 border-t border-border/50">
-                  <div className="relative w-11 h-11 rounded-full overflow-hidden border border-border shrink-0 bg-muted">
-                    {/* PLACEHOLDER - do podmiany na realne zdjęcia klienta */}
-                    <Image 
-                      src={avatarUrl}
-                      alt={t.author || "Klient"}
-                      fill
-                      sizes="44px"
-                      className="object-cover"
-                    />
-                  </div>
-                  <div>
-                    <p className="font-heading font-bold text-sm sm:text-base text-foreground">
-                      {t.author}
-                    </p>
-                    <p className="text-xs text-foreground/50">Klient zweryfikowany</p>
-                  </div>
-                </div>
+        <div className="relative min-h-[300px] sm:min-h-[240px] flex items-center justify-center">
+          {testimonials.map((t: NonNullable<Props['testimonials']>[0], index: number) => (
+            <div
+              key={t.id || index}
+              className={`absolute inset-0 flex flex-col items-center justify-center transition-opacity duration-1000 ease-in-out ${
+                index === currentIndex ? 'opacity-100 z-10' : 'opacity-0 z-0 pointer-events-none'
+              }`}
+            >
+              <p className="font-heading text-3xl sm:text-4xl md:text-5xl font-extrabold text-foreground leading-[1.2] mb-10 text-balance tracking-tight">
+                "{t.quote}"
+              </p>
+              
+              <div className="flex items-center gap-4">
+                <div className="w-12 h-px bg-accent/40" />
+                <p className="font-heading font-bold text-lg sm:text-xl text-foreground/80 uppercase tracking-wide">
+                  {t.author}
+                </p>
+                <div className="w-12 h-px bg-accent/40" />
               </div>
-            )
-          })}
+            </div>
+          ))}
         </div>
+
+        {testimonials.length > 1 && (
+          <div className="flex items-center justify-center gap-3 mt-12">
+            {testimonials.map((_, index) => (
+              <button
+                key={index}
+                onClick={() => setCurrentIndex(index)}
+                className={`w-2 h-2 transition-all ${
+                  index === currentIndex ? 'bg-accent w-8' : 'bg-border hover:bg-foreground/30'
+                }`}
+                aria-label={`Pokaż opinię ${index + 1}`}
+              />
+            ))}
+          </div>
+        )}
       </div>
     </section>
   )