x

apps/website/src/components/dynamic/DynamicPageRenderer.tsx

@@ -1705,12 +1705,18 @@ function FeaturedTilesSection({ payload, lang }: { payload: Record<string, unkno
   const textColor = typeof payload.textColor === 'string' ? payload.textColor : undefined
   const tiles = Array.isArray(payload.tiles) ? payload.tiles.map(toRecord) : []
 
+  const layoutPreset = typeof payload.layoutPreset === 'string' ? payload.layoutPreset : undefined
+  const textAlign = typeof payload.textAlign === 'string' ? payload.textAlign : (layoutPreset === 'editorial' ? 'left' : 'center')
+  const ctaStyle = typeof payload.ctaStyle === 'string' ? payload.ctaStyle : (layoutPreset === 'editorial' ? 'arrow_link' : 'pill_button')
+  const sectionAspect = typeof payload.imageAspectRatio === 'string' ? payload.imageAspectRatio : (layoutPreset === 'editorial' ? 'landscape' : undefined)
+  const imageRounded = typeof payload.imageRounded === 'string' ? payload.imageRounded : (layoutPreset === 'editorial' ? 'md' : '3xl')
+
   const getColsClass = (cols: number) => {
     switch (cols) {
       case 3:
         return 'grid-cols-1 md:grid-cols-3'
       case 4:
-        return 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4'
+        return 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4'
       case 2:
       default:
         return 'grid-cols-1 md:grid-cols-2'
@@ -1718,7 +1724,12 @@ function FeaturedTilesSection({ payload, lang }: { payload: Record<string, unkno
   }
 
   const getAspectClass = (ratio?: string) => {
-    switch (ratio) {
+    const r = ratio || sectionAspect || 'square'
+    switch (r) {
+      case 'landscape':
+        return 'aspect-[16/9]'
+      case 'wide':
+        return 'aspect-[4/3]'
       case 'portrait':
         return 'aspect-[3/4]'
       case 'tall':
@@ -1731,6 +1742,32 @@ function FeaturedTilesSection({ payload, lang }: { payload: Record<string, unkno
     }
   }
 
+  const getRoundedClass = (rounded?: string) => {
+    switch (rounded) {
+      case 'none':
+        return 'rounded-none'
+      case 'sm':
+        return 'rounded-md'
+      case 'md':
+        return 'rounded-xl'
+      case '2xl':
+        return 'rounded-2xl'
+      case 'full':
+        return 'rounded-full'
+      case '3xl':
+      default:
+        return 'rounded-3xl'
+    }
+  }
+
+  const isLeftAlign = textAlign === 'left'
+  const isRightAlign = textAlign === 'right'
+  const alignContainerClass = isLeftAlign
+    ? 'items-start text-left'
+    : isRightAlign
+      ? 'items-end text-right'
+      : 'items-center text-center'
+
   return (
     <section className="overflow-hidden bg-surface-page ui-section-band" style={{ backgroundColor, color: textColor }}>
       <div className="mx-auto max-w-7xl space-y-12">
@@ -1746,52 +1783,70 @@ function FeaturedTilesSection({ payload, lang }: { payload: Record<string, unkno
           </div>
         )}
 
-        <div className={`grid gap-8 md:gap-12 ${getColsClass(columns)}`}>
+        <div className={`grid gap-6 md:gap-8 lg:gap-10 ${getColsClass(columns)}`}>
           {tiles.map((tile, idx) => {
             const tileTitle = localizedFromRecord(tile, 'title', resolvedLang)
             const tileDesc = localizedFromRecord(tile, 'description', resolvedLang)
             const buttonText = localizedFromRecord(tile, 'buttonText', resolvedLang)
             const buttonLink = typeof tile.buttonLink === 'string' ? tile.buttonLink : ''
             const imageUrl = typeof tile.imageUrl === 'string' ? tile.imageUrl : ''
-            const imageAspectRatio = typeof tile.imageAspectRatio === 'string' ? tile.imageAspectRatio : 'square'
+            const imageAspectRatio = typeof tile.imageAspectRatio === 'string' ? tile.imageAspectRatio : (sectionAspect || 'square')
 
-            return (
-              <div key={idx} className="group flex flex-col items-center text-center space-y-5">
+            const cardContent = (
+              <div className={`group flex flex-col ${alignContainerClass} space-y-4 w-full`}>
                 {imageUrl && (
-                  <div className={`relative ${getAspectClass(imageAspectRatio)} w-full overflow-hidden rounded-3xl shadow-card`}>
+                  <div className={`relative ${getAspectClass(imageAspectRatio)} w-full overflow-hidden ${getRoundedClass(imageRounded)} shadow-card bg-surface-card`}>
                     <Image
                       src={imageUrl}
                       alt={tileTitle || 'Campaign Card'}
                       fill
                       unoptimized
-                      className="h-full w-full object-cover transition duration-700 group-hover:scale-105"
+                      className="h-full w-full object-cover transition duration-700 ease-out group-hover:scale-105"
                     />
                   </div>
                 )}
-                <div className="space-y-3">
+                <div className={`space-y-2.5 w-full flex flex-col ${alignContainerClass}`}>
                   {tileTitle && (
-                    <h3 className="text-xl font-semibold leading-snug text-text-main md:text-2xl" style={{ color: textColor }}>
+                    <h3 className="font-serif text-lg md:text-xl lg:text-2xl font-normal leading-snug text-text-main group-hover:text-brand-primary transition-colors" style={{ color: textColor }}>
                       {tileTitle}
                     </h3>
                   )}
                   {tileDesc && (
-                    <p className="text-sm leading-relaxed text-muted-text md:text-base" style={{ color: textColor }}>
+                    <p className="text-sm leading-relaxed text-muted-text" style={{ color: textColor }}>
                       {tileDesc}
                     </p>
                   )}
-                  {buttonText && buttonLink && (
-                    <div className="pt-2">
-                      <Link
-                        href={buttonLink}
-                        className="inline-flex rounded-full border border-current px-8 py-3 text-xs font-bold uppercase tracking-[0.22em] transition hover:bg-brand-primary hover:text-surface-card"
-                      >
-                        {buttonText}
-                      </Link>
+                  {buttonText && ctaStyle !== 'none' && (
+                    <div className={isLeftAlign ? 'pt-0.5' : 'pt-2'}>
+                      {ctaStyle === 'arrow_link' ? (
+                        <span className="inline-flex items-center gap-1.5 text-xs md:text-sm font-medium tracking-wide text-text-main group-hover:text-brand-primary transition-colors" style={{ color: textColor }}>
+                          <span>{buttonText}</span>
+                          <span className="transition-transform duration-200 group-hover:translate-x-1">→</span>
+                        </span>
+                      ) : ctaStyle === 'solid_button' ? (
+                        <span className="inline-flex rounded-xl bg-brand-primary text-surface-card px-7 py-2.5 text-xs font-bold uppercase tracking-[0.2em] transition hover:opacity-90 shadow-sm">
+                          {buttonText}
+                        </span>
+                      ) : (
+                        <span className="inline-flex rounded-full border border-current px-7 py-2.5 text-xs font-bold uppercase tracking-[0.2em] transition hover:bg-brand-primary hover:text-surface-card">
+                          {buttonText}
+                        </span>
+                      )}
                     </div>
                   )}
                 </div>
               </div>
             )
+
+            return buttonLink ? (
+              <Link key={idx} href={buttonLink} className="block w-full focus:outline-none">
+                {cardContent}
+              </Link>
+            ) : (
+              <div key={idx} className="w-full">
+                {cardContent}
+              </div>
+            )
           })}
         </div>
       </div>