feat(redesign): update UniqueValue, FAQTeaser, Hero two-tone title, and Affiliation trust cards

src/blocks/Affiliation/Component.tsx

@@ -1,22 +1,24 @@
 'use client'
 import React from 'react'
-import { motion } from 'framer-motion'
+
+import { Landmark, Scale, ShieldCheck } from 'lucide-react'
 import Link from 'next/link'
 import type { Page } from '../../payload-types'
 
 type Props = Extract<NonNullable<Page['layout']>[0], { blockType: 'affiliation' }>
 
-export const AffiliationBlock: React.FC<Props> = ({ eyebrow, title, description, logo, linkText }) => {
+const iconMap = {
+  shield: ShieldCheck,
+  scale: Scale,
+  landmark: Landmark,
+}
+
+export const AffiliationBlock: React.FC<Props> = ({ eyebrow, title, description, logo, linkText, trustPoints }) => {
   return (
     <section className="py-20 md:py-32 bg-background border-t border-border overflow-hidden">
       <div className="container-premium">
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 lg:gap-24 items-center">
+        <div className="flex flex-col gap-16 lg:gap-24">
           <div className="max-w-3xl">
-            {eyebrow && (
-            <div className="font-mono text-sm md:text-base font-bold text-accent tracking-widest uppercase mb-4">
-              // {eyebrow}
-            </div>
-          )}
             <h2 className="font-heading text-3xl sm:text-4xl md:text-5xl font-extrabold tracking-tight text-foreground mb-6 text-balance">
               {title}
             </h2>
@@ -38,15 +40,20 @@ export const AffiliationBlock: React.FC<Props> = ({ eyebrow, title, description,
             </div>
           </div>
           
-          <div className="relative aspect-[4/3] lg:aspect-square w-full bg-card overflow-hidden">
-            {/* PLACEHOLDER - do podmiany na realne zdjęcia klienta */}
-            <img 
-              src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=1200&q=80" 
-              alt="Budynek urzędu, formalna architektura"
-              className="object-cover w-full h-full grayscale opacity-80 hover:grayscale-0 hover:opacity-100 transition-all duration-700"
-            />
-            <div className="absolute inset-0 bg-gradient-to-t from-background via-background/40 to-transparent pointer-events-none" />
-          </div>
+          {trustPoints && trustPoints.length > 0 && (
+            <div className="grid grid-cols-1 sm:grid-cols-3 gap-6">
+              {trustPoints.map((point: any, index: number) => {
+                const Icon = (point.icon && iconMap[point.icon as keyof typeof iconMap]) || ShieldCheck
+                return (
+                  <div key={point.id || index} className="bg-card border border-border p-6 md:p-8 flex flex-col gap-4">
+                    <Icon size={28} className="text-accent" />
+                    <h3 className="font-heading text-xl font-bold text-foreground">{point.title}</h3>
+                    <p className="text-sm text-foreground/70 leading-relaxed">{point.description}</p>
+                  </div>
+                )
+              })}
+            </div>
+          )}
         </div>
       </div>
     </section>