style: standardize alignment/spacing and add rich imagery to blocks

src/blocks/Affiliation/Component.tsx

@@ -8,28 +8,43 @@ type Props = Extract<NonNullable<Page['layout']>[0], { blockType: 'affiliation'
 
 export const AffiliationBlock: React.FC<Props> = ({ title, description, logo, linkText }) => {
   return (
-    <section className="py-20 md:py-24 bg-background border-t border-border">
+    <section className="py-20 md:py-32 bg-background border-t border-border overflow-hidden">
-      <div className="container mx-auto px-4 max-w-4xl">
+      <div className="container-premium">
-        <div className="flex flex-col md:flex-row items-center gap-12 lg:gap-20">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 lg:gap-24 items-center">
-          <div className="flex-1 text-center md:text-left">
+          <div className="max-w-3xl">
             <div className="font-mono text-sm md:text-base font-bold text-accent tracking-widest uppercase mb-4">
               // Zaufanie
             </div>
-            <h2 className="font-heading text-3xl sm:text-4xl md:text-5xl font-extrabold tracking-tight text-foreground mb-6 text-balance">
+            <h2 className="font-heading text-4xl sm:text-5xl md:text-6xl font-extrabold tracking-tight text-foreground mb-6 text-balance">
               {title}
             </h2>
-            <p className="text-foreground/75 text-lg font-light leading-relaxed mb-8">{description}</p>
+            <p className="text-foreground/75 text-lg md:text-xl font-light leading-relaxed mb-12 max-w-xl">
-            {linkText && (
+              {description}
-              <Link href="/stowarzyszenie" className="text-accent font-semibold hover:text-accent-hover underline underline-offset-4">
+            </p>
-                {linkText}
+            
-              </Link>
+            <div className="flex flex-col sm:flex-row items-start sm:items-center gap-8">
-            )}
+              {logo && typeof logo === 'object' && logo.url && (
-          </div>
+                <div className="w-40 shrink-0">
-          {logo && typeof logo === 'object' && logo.url && (
+                  <img src={logo.url} alt={logo.alt || "Logo stowarzyszenia"} className="max-w-full h-auto grayscale hover:grayscale-0 transition-all duration-300" />
-            <div className="w-48 shrink-0 flex items-center justify-center">
+                </div>
-              <img src={logo.url} alt={logo.alt || "Logo stowarzyszenia"} className="max-w-full h-auto grayscale hover:grayscale-0 transition-all duration-300" />
+              )}
+              {linkText && (
+                <Link href="/stowarzyszenie" className="text-accent font-semibold text-lg hover:text-accent-hover underline underline-offset-4">
+                  {linkText}
+                </Link>
+              )}
             </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>
         </div>
       </div>
     </section>

src/blocks/FAQTeaser/Component.tsx

@@ -8,13 +8,13 @@ type Props = Extract<NonNullable<Page['layout']>[0], { blockType: 'faqTeaser' }>
 
 export const FAQTeaserBlock: React.FC<Props> = ({ title, questions, linkText }) => {
   return (
-    <section className="py-20 md:py-24 bg-card/40 border-t border-border">
+    <section className="py-20 md:py-32 bg-card/40 border-t border-border">
-      <div className="container-premium max-w-4xl mx-auto">
+      <div className="container-premium">
-        <div className="mb-12 text-center">
+        <div className="max-w-3xl mb-16 md:mb-24">
           <div className="font-mono text-sm md:text-base font-bold text-accent tracking-widest uppercase mb-4">
             // FAQ
           </div>
-          <h2 className="font-heading text-3xl md:text-5xl font-extrabold text-foreground tracking-tight">
+          <h2 className="font-heading text-4xl sm:text-5xl md:text-6xl font-extrabold text-foreground tracking-tight text-balance">
             {title}
           </h2>
         </div>
@@ -32,7 +32,7 @@ export const FAQTeaserBlock: React.FC<Props> = ({ title, questions, linkText })
         </div>
 
         {linkText && (
-          <div className="text-center">
+          <div className="mt-12">
             <Link href="/faq" className="inline-block text-accent font-semibold hover:text-accent-hover underline underline-offset-4">
               {linkText}
             </Link>

src/blocks/FinalCTA/Component.tsx

@@ -7,21 +7,22 @@ type Props = Extract<NonNullable<Page['layout']>[0], { blockType: 'finalCta' }>
 
 export const FinalCTABlock: React.FC<Props> = ({ title, subtitle, buttonText }) => {
   return (
-    <section className="py-20 md:py-28 bg-card border-y border-border text-center">
+    <section className="py-20 md:py-32 bg-card border-y border-border text-left">
-      <div className="container-premium max-w-3xl mx-auto">
+      <div className="container-premium">
-        <div className="font-mono text-sm md:text-base font-bold text-accent tracking-widest uppercase mb-4">
+        <div className="max-w-3xl">
-          // Kontakt
+          <div className="font-mono text-sm md:text-base font-bold text-accent tracking-widest uppercase mb-4">
-        </div>
+            // Kontakt
+          </div>
 
-        <h2 className="font-heading text-3xl sm:text-4xl md:text-5xl font-extrabold text-foreground tracking-tight mb-4 leading-tight">
+          <h2 className="font-heading text-4xl sm:text-5xl md:text-6xl font-extrabold text-foreground tracking-tight mb-6 text-balance">
-          {title}
+            {title}
-        </h2>
+          </h2>
 
-        {subtitle && (
+          {subtitle && (
-          <p className="text-base sm:text-lg md:text-xl text-foreground/75 mb-10 max-w-2xl mx-auto leading-relaxed">
+            <p className="text-lg md:text-xl font-light text-foreground/75 mb-12 leading-relaxed">
-            {subtitle}
+              {subtitle}
-          </p>
+            </p>
-        )}
+          )}
 
         <div>
           <a 
@@ -34,6 +35,7 @@ export const FinalCTABlock: React.FC<Props> = ({ title, subtitle, buttonText })
             <span>{buttonText}</span>
           </a>
         </div>
+        </div>
       </div>
     </section>
   )

src/blocks/Process/Component.tsx

@@ -10,59 +10,68 @@ export const ProcessBlock: React.FC<Props> = ({ title, steps, ctaText }) => {
   return (
     <section className="py-20 md:py-32 bg-background text-foreground overflow-hidden">
       <div className="container-premium">
-        <div className="max-w-2xl mb-16 md:mb-24">
+        <div className="max-w-3xl mb-16 md:mb-24">
           <div className="font-mono text-sm md:text-base font-bold text-accent tracking-widest uppercase mb-4">
             // Proces
           </div>
           <h2 className="font-heading text-4xl sm:text-5xl md:text-6xl font-extrabold tracking-tight text-foreground mb-6 text-balance">
             {title}
           </h2>
-          <p className="text-foreground/70 text-lg md:text-xl font-light">
+          <p className="text-foreground/75 text-lg md:text-xl font-light leading-relaxed">
             Prosty i przejrzysty proces rozliczenia w 3 krokach — bez zbędnych formalności.
           </p>
         </div>
 
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-16 md:gap-8 mb-20 relative">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 lg:gap-24 items-center">
-          {/* Opcjonalna pozioma linia łącząca na desktopie (bardzo subtelna) */}
+          <div className="flex flex-col gap-16">
-          <div className="hidden md:block absolute top-[4.5rem] left-0 right-0 h-px bg-border/40 -z-10" />
+            {steps?.map((step: NonNullable<Props['steps']>[0], index: number) => {
+              const stepNumber = String(index + 1).padStart(2, '0')
 
-          {steps?.map((step: NonNullable<Props['steps']>[0], index: number) => {
+              return (
-            const stepNumber = String(index + 1).padStart(2, '0')
+                <div
-
+                  key={step.id || index}
-            return (
+                  className="relative flex flex-col sm:flex-row gap-6 group"
-              <div
+                >
-                key={step.id || index}
+                  <div className="font-heading text-6xl md:text-7xl font-black text-foreground/5 tracking-tighter leading-none sm:-mt-2 group-hover:text-accent/10 transition-colors shrink-0">
-                className="relative flex flex-col group"
+                    {stepNumber}
-              >
+                  </div>
-                <div className="font-heading text-7xl md:text-8xl lg:text-[10rem] font-black text-foreground/5 tracking-tighter leading-none mb-4 -ml-2 group-hover:text-accent/10 transition-colors">
+                  <div className="relative z-10 pt-2 border-t-2 border-transparent group-hover:border-accent transition-colors flex-1">
-                  {stepNumber}
+                    <h3 className="font-heading text-2xl md:text-3xl font-bold text-foreground mb-4">
-                </div>
+                      {step.title}
-                <div className="relative z-10 pt-4 border-t-2 border-transparent group-hover:border-accent transition-colors">
+                    </h3>
-                  <h3 className="font-heading text-2xl md:text-3xl font-bold text-foreground mb-4">
+                    <p className="text-foreground/75 text-lg font-light leading-relaxed">
-                    {step.title}
+                      {step.description}
-                  </h3>
+                    </p>
-                  <p className="text-foreground/75 text-lg font-light leading-relaxed">
+                  </div>
-                    {step.description}
-                  </p>
                 </div>
+              )
+            })}
+            
+            {ctaText && (
+              <div className="mt-4">
+                <Link
+                  href="/jak-sie-umowic"
+                  className="inline-flex items-center gap-4 text-foreground font-semibold text-lg hover:text-accent transition-colors group"
+                >
+                  <span>{ctaText}</span>
+                  <div className="w-10 h-10 rounded-full border border-border flex items-center justify-center group-hover:border-accent transition-colors">
+                    <ArrowRight className="w-4 h-4 group-hover:translate-x-0.5 transition-transform" />
+                  </div>
+                </Link>
               </div>
-            )
+            )}
-          })}
-        </div>
-
-        {ctaText && (
-          <div>
-            <Link
-              href="/jak-sie-umowic"
-              className="inline-flex items-center gap-4 text-foreground font-semibold text-lg hover:text-accent transition-colors group"
-            >
-              <span>{ctaText}</span>
-              <div className="w-10 h-10 rounded-full border border-border flex items-center justify-center group-hover:border-accent transition-colors">
-                <ArrowRight className="w-4 h-4 group-hover:translate-x-0.5 transition-transform" />
-              </div>
-            </Link>
           </div>
-        )}
+          
+          <div className="relative aspect-[4/5] w-full bg-card rounded-none overflow-hidden">
+            {/* PLACEHOLDER - do podmiany na realne zdjęcia klienta */}
+            <img 
+              src="https://images.unsplash.com/photo-1611162617474-5b21e879e113?auto=format&fit=crop&w=1200&q=80" 
+              alt="Osoba pisząca wiadomość na smartfonie, kontakt WhatsApp"
+              className="object-cover w-full h-full grayscale hover:grayscale-0 transition-all duration-700"
+            />
+            <div className="absolute inset-0 bg-gradient-to-t from-background/80 to-transparent mix-blend-multiply pointer-events-none" />
+          </div>
+        </div>
       </div>
     </section>
   )

src/blocks/ServicesList/Component.tsx

@@ -10,7 +10,7 @@ export const ServicesListBlock: React.FC<Props> = ({ title, services }) => {
   return (
     <section className="py-20 md:py-32 bg-background text-foreground">
       <div className="container-premium">
-        <div className="mb-16 md:mb-24">
+        <div className="max-w-3xl mb-16 md:mb-24">
           <div className="font-mono text-sm md:text-base font-bold text-accent tracking-widest uppercase mb-4">
             // Usługi
           </div>

src/blocks/Stats/Component.tsx

@@ -19,17 +19,17 @@ export const StatsBlock: React.FC<StatsProps> = ({ title, subtitle, items }) =>
     <section className="py-20 md:py-32 bg-background border-y border-border">
       <div className="container-premium">
         {(title || subtitle) && (
-          <div className="max-w-2xl mb-16">
+          <div className="max-w-3xl mb-16 md:mb-24">
             <div className="font-mono text-sm md:text-base font-bold text-accent tracking-widest uppercase mb-4">
               // Statystyki
             </div>
             {title && (
-              <h2 className="font-heading text-3xl sm:text-4xl md:text-5xl font-extrabold text-foreground mb-4 tracking-tight">
+              <h2 className="font-heading text-4xl sm:text-5xl md:text-6xl font-extrabold text-foreground mb-6 tracking-tight text-balance">
                 {title}
               </h2>
             )}
             {subtitle && (
-              <p className="text-foreground/70 text-lg sm:text-xl leading-relaxed font-light">
+              <p className="text-foreground/75 text-lg md:text-xl font-light leading-relaxed">
                 {subtitle}
               </p>
             )}

src/blocks/Testimonials/Component.tsx

@@ -20,37 +20,51 @@ export const TestimonialsBlock: React.FC<Props> = ({ title, testimonials }) => {
   if (!testimonials || testimonials.length === 0) return null
 
   return (
-    <section className="py-24 md:py-40 bg-background border-y border-border overflow-hidden">
+    <section className="relative 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">
+      {/* Background Image */}
-        <h2 className="font-mono text-sm md:text-base font-bold text-accent tracking-widest uppercase mb-12">
+      <div className="absolute inset-0 z-0">
-          // {title}
+        <img 
-        </h2>
+          src="https://images.unsplash.com/photo-1577415124269-fc1140a69e91?auto=format&fit=crop&w=2000&q=80" 
+          alt="Biuro, abstrakcyjne tło"
+          className="object-cover w-full h-full grayscale opacity-20"
+        />
+        <div className="absolute inset-0 bg-gradient-to-r from-background via-background/90 to-background/40" />
+      </div>
+
+      <div className="container-premium relative z-10">
+        <div className="max-w-3xl mb-16 md:mb-24">
+          <div className="font-mono text-sm md:text-base font-bold text-accent tracking-widest uppercase mb-4">
+            // {title}
+          </div>
+        </div>
         
-        <div className="relative min-h-[300px] sm:min-h-[240px] flex items-center justify-center">
+        <div className="relative min-h-[300px] sm:min-h-[240px]">
           {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 ${
+              className={`absolute inset-0 flex flex-col items-start justify-start 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">
+              <div className="font-heading text-8xl md:text-9xl text-accent/20 leading-none absolute -top-12 -left-6 md:-top-16 md:-left-10 select-none">
-                "{t.quote}"
+                "
+              </div>
+              <p className="relative z-10 font-heading text-3xl sm:text-4xl md:text-5xl font-extrabold text-foreground leading-[1.2] mb-10 text-balance tracking-tight max-w-4xl">
+                {t.quote}
               </p>
               
               <div className="flex items-center gap-4">
-                <div className="w-12 h-px bg-accent/40" />
+                <div className="w-12 h-px bg-accent/60" />
                 <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">
+          <div className="flex items-center gap-3 mt-16 md:mt-24">
             {testimonials.map((_, index) => (
               <button
                 key={index}

src/blocks/TrustBar/Component.tsx

@@ -18,7 +18,7 @@ export const TrustBarBlock: React.FC<Props> = ({ items }) => {
 
   return (
     <section className="bg-background py-8 border-b border-border">
-      <div className="container mx-auto px-4">
+      <div className="container-premium">
         <div className="grid grid-cols-2 md:grid-cols-4 gap-6 text-center">
           {items.map((item: NonNullable<Props['items']>[0], index: number) => {
             const Icon = item.icon ? iconMap[item.icon as keyof typeof iconMap] : CheckCircle

src/blocks/UniqueValue/Component.tsx

@@ -8,39 +8,38 @@ type Props = Extract<NonNullable<Page['layout']>[0], { blockType: 'uniqueValue'
 
 export const UniqueValueBlock: React.FC<Props> = ({ title, description }) => {
   return (
-    <section className="py-16 md:py-24 bg-card/60 border-y border-border">
+    <section className="py-20 md:py-32 bg-card/60 border-y border-border">
       <div className="container-premium">
-        <div className="grid grid-cols-1 lg:grid-cols-12 gap-10 lg:gap-16 items-center">
+        <div className="grid grid-cols-1 lg:grid-cols-12 gap-16 lg:gap-24 items-center">
           {/* Kolumna ze zdjęciem */}
           <div className="lg:col-span-5 order-2 lg:order-1">
-            <div className="relative aspect-[4/3] rounded-2xl overflow-hidden border border-border shadow-sm bg-card">
+            <div className="relative aspect-[4/5] overflow-hidden border border-border">
               {/* PLACEHOLDER - do podmiany na realne zdjęcia klienta */}
               <Image 
                 src="https://images.unsplash.com/photo-1450133064473-71024230f91b?auto=format&fit=crop&w=1000&q=80"
                 alt="Dokumenty i profesjonalne doradztwo podatkowe"
                 fill
                 sizes="(max-width: 1024px) 100vw, 40vw"
-                className="object-cover"
+                className="object-cover grayscale hover:grayscale-0 transition-all duration-700"
               />
             </div>
           </div>
 
           {/* Kolumna tekstowa */}
-          <div className="lg:col-span-7 order-1 lg:order-2 flex flex-col items-start">
+          <div className="lg:col-span-7 order-1 lg:order-2 flex flex-col items-start max-w-3xl">
-            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-accent/10 text-accent text-xs font-semibold uppercase tracking-wider mb-4">
+            <div className="font-mono text-sm md:text-base font-bold text-accent tracking-widest uppercase mb-4">
-              <CheckCircle size={15} />
+              // Wartość
-              <span>Komfort i pewność</span>
             </div>
 
-            <h2 className="font-heading text-2xl sm:text-3xl md:text-4xl font-bold text-foreground tracking-tight mb-5 leading-snug">
+            <h2 className="font-heading text-4xl sm:text-5xl md:text-6xl font-extrabold text-foreground tracking-tight mb-6 text-balance">
               {title}
             </h2>
             
-            <p className="text-foreground/80 text-base sm:text-lg leading-relaxed mb-6">
+            <p className="text-foreground/75 text-lg md:text-xl font-light leading-relaxed mb-12">
               {description}
             </p>
 
-            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 w-full pt-4 border-t border-border/60 text-sm">
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 w-full pt-6 border-t border-border/60 text-base">
               <div className="flex items-center gap-2.5 text-foreground/80 font-medium">
                 <span className="w-2 h-2 rounded-full bg-accent" />
                 <span>Bez barier językowych</span>