feat(ui): add ctaUrl field to Process block and link ArrowLink

src/blocks/Process/Component.tsx

@@ -6,7 +6,7 @@ import { ArrowLink } from '../../components/ArrowLink'
 
 type Props = Extract<NonNullable<Page['layout']>[0], { blockType: 'process' }>
 
-export const ProcessBlock: React.FC<Props> = ({ subtitle, title, steps, ctaText, image }) => {
+export const ProcessBlock: React.FC<Props> = ({ subtitle, title, steps, ctaText, ctaUrl, 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';
@@ -52,7 +52,7 @@ export const ProcessBlock: React.FC<Props> = ({ subtitle, title, steps, ctaText,
             
             {ctaText && (
               <div className="mt-4">
-                <ArrowLink href="/jak-sie-umowic">
+                <ArrowLink href={ctaUrl || '#'}>
                   {ctaText}
                 </ArrowLink>
               </div>

src/blocks/Process/config.ts

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

src/components/ArrowLink/index.tsx

@@ -23,15 +23,30 @@ export const ArrowLink: React.FC<ArrowLinkProps> = ({
   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}`}
-    >
+  const isAnchor = href?.startsWith('#')
+
+  const innerContent = (
+    <>
       {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>
+    </>
+  )
+
+  const classes = `group flex items-center gap-3 text-foreground font-semibold hover:text-accent transition-colors ${className}`
+
+  if (isAnchor) {
+    return (
+      <a href={href} className={classes}>
+        {innerContent}
+      </a>
+    )
+  }
+
+  return (
+    <Link href={href} className={classes}>
+      {innerContent}
     </Link>
   )
 }

src/payload-types.ts

@@ -365,6 +365,7 @@ export interface Page {
                 }[]
               | null;
             ctaText?: string | null;
+            ctaUrl?: string | null;
             image: number | Media;
             id?: string | null;
             blockName?: string | null;
@@ -792,6 +793,7 @@ export interface PagesSelect<T extends boolean = true> {
                     id?: T;
                   };
               ctaText?: T;
+              ctaUrl?: T;
               image?: T;
               id?: T;
               blockName?: T;