feat: redesign ServicesList and Process blocks, introduce ArrowLink component

src/blocks/Process/Component.tsx

@@ -1,21 +1,20 @@
 'use client'
 import React from 'react'
-import Link from 'next/link'
-import type { Page } from '../../payload-types'
-import { ArrowRight } from 'lucide-react'
+import type { Page, Media } from '../../payload-types'
+import Image from 'next/image'
+import { ArrowLink } from '../../components/ArrowLink'
 
 type Props = Extract<NonNullable<Page['layout']>[0], { blockType: 'process' }>
 
-export const ProcessBlock: React.FC<Props> = ({ eyebrow, subtitle, title, steps, ctaText }) => {
+export const ProcessBlock: React.FC<Props> = ({ subtitle, title, steps, ctaText, image }) => {
+  const processMedia = typeof image === 'object' && image !== null ? (image as Media) : null;
+  const imageUrl = processMedia?.url || 'https://images.unsplash.com/photo-1611162617474-5b21e879e113?auto=format&fit=crop&w=1200&q=80';
+  const imageAlt = processMedia?.alt || 'Proces współpracy';
+
   return (
     <section className="py-20 md:py-32 bg-background text-foreground overflow-hidden">
       <div className="container-premium">
         <div className="max-w-3xl mb-16 md:mb-24">
-          {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>
@@ -53,24 +52,19 @@ export const ProcessBlock: React.FC<Props> = ({ eyebrow, subtitle, title, steps,
             
             {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>
+                <ArrowLink href="/jak-sie-umowic">
+                  {ctaText}
+                </ArrowLink>
               </div>
             )}
           </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"
+            <Image 
+              src={imageUrl}
+              alt={imageAlt}
+              fill
+              sizes="(max-width: 1024px) 100vw, 50vw"
               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" />

src/blocks/Process/config.ts

@@ -18,5 +18,6 @@ export const Process: Block = {
       ],
     },
     { name: 'ctaText', type: 'text', localized: true },
+    { name: 'image', type: 'upload', relationTo: 'media', required: true },
   ],
 }

src/blocks/ServicesList/Component.tsx

@@ -1,21 +1,15 @@
 'use client'
 import React from 'react'
-import Link from 'next/link'
 import type { Page } from '../../payload-types'
-import { ArrowRight } from 'lucide-react'
+import { ArrowLink } from '../../components/ArrowLink'
 
 type Props = Extract<NonNullable<Page['layout']>[0], { blockType: 'servicesList' }>
 
-export const ServicesListBlock: React.FC<Props> = ({ eyebrow, title, services }) => {
+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="max-w-3xl mb-16 md:mb-24">
-          {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 text-foreground tracking-tight max-w-2xl text-balance">
             {title}
           </h2>
@@ -38,15 +32,9 @@ export const ServicesListBlock: React.FC<Props> = ({ eyebrow, title, services })
                 </p>
               </div>
               <div className="md:w-1/12 flex justify-end shrink-0">
-                <Link 
-                  href="/uslugi"
-                  className="flex items-center gap-3 text-foreground font-semibold hover:text-accent transition-colors"
-                >
+                <ArrowLink href="/uslugi">
                   <span className="md:hidden">{service.linkText}</span>
-                  <div className="w-12 h-12 rounded-full border border-border flex items-center justify-center group-hover:border-accent group-hover:bg-accent/5 transition-all">
-                    <ArrowRight className="w-5 h-5 group-hover:translate-x-0.5 transition-transform" />
-                  </div>
-                </Link>
+                </ArrowLink>
               </div>
             </div>
           ))}

src/components/ArrowLink/index.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import Link from 'next/link'
+import { ArrowRight } from 'lucide-react'
+
+type ArrowLinkProps = {
+  href: string
+  children?: React.ReactNode
+  size?: 'sm' | 'md'
+  className?: string
+}
+
+// UWAGA: Komponent sam w sobie ma wbudowaną klasę "group" na tagu Link,
+// co zapewnia poprawne działanie efektów hover na strzałce i obramowaniu (group-hover).
+// Klasa "group" nie musi być podawana z zewnątrz, ale jeśli chcesz kontrolować ten
+// element nadrzędnym hoverem, nadrzędny div nie będzie bezpośrednio triggerował
+// group-hovera na strzałce bez modyfikacji - najlepiej polegać na najeździe na sam Link.
+export const ArrowLink: React.FC<ArrowLinkProps> = ({ 
+  href, 
+  children, 
+  size = 'md', 
+  className = '' 
+}) => {
+  const circleSize = size === 'sm' ? 'w-10 h-10' : 'w-12 h-12';
+  const iconSize = size === 'sm' ? 'w-4 h-4' : 'w-5 h-5';
+  
+  return (
+    <Link 
+      href={href}
+      className={`group flex items-center gap-3 text-foreground font-semibold hover:text-accent transition-colors ${className}`}
+    >
+      {children}
+      <div className={`${circleSize} rounded-full border border-border flex items-center justify-center group-hover:border-accent group-hover:bg-accent/5 transition-all`}>
+        <ArrowRight className={`${iconSize} group-hover:translate-x-0.5 transition-transform`} />
+      </div>
+    </Link>
+  )
+}

src/payload-types.ts

@@ -332,6 +332,7 @@ export interface Page {
                 }[]
               | null;
             ctaText?: string | null;
+            image: number | Media;
             id?: string | null;
             blockName?: string | null;
             blockType: 'process';
@@ -702,6 +703,7 @@ export interface PagesSelect<T extends boolean = true> {
                     id?: T;
                   };
               ctaText?: T;
+              image?: T;
               id?: T;
               blockName?: T;
             };