x
This commit is contained in:
Your Name committed
1 parent
230716933e
commit
3bbe2bb35e
16 files changed
+1815
-109
No files matched your search
@@ -13,6 +13,12 @@ export default function DynamicFeaturedTiles({ payload }: DynamicFeaturedTilesPr
|
||||
const tiles = Array.isArray(payload.tiles) ? payload.tiles : [];
|
||||
const columns = payload.columns || 2;
|
||||
|
||||
const layoutPreset = payload.layoutPreset;
|
||||
const textAlign = payload.textAlign || (layoutPreset === 'editorial' ? 'left' : 'center');
|
||||
const ctaStyle = payload.ctaStyle || (layoutPreset === 'editorial' ? 'arrow_link' : 'pill_button');
|
||||
const sectionAspect = payload.imageAspectRatio || (layoutPreset === 'editorial' ? 'landscape' : undefined);
|
||||
const imageRounded = payload.imageRounded || (layoutPreset === 'editorial' ? 'md' : '3xl');
|
||||
|
||||
const sectionTitle = getLocalizedField(payload.title, lang);
|
||||
const sectionSubtitle = getLocalizedField(payload.subtitle, lang);
|
||||
|
||||
@@ -21,7 +27,7 @@ export default function DynamicFeaturedTiles({ payload }: DynamicFeaturedTilesPr
|
||||
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';
|
||||
@@ -29,7 +35,12 @@ export default function DynamicFeaturedTiles({ payload }: DynamicFeaturedTilesPr
|
||||
};
|
||||
|
||||
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':
|
||||
@@ -42,6 +53,32 @@ export default function DynamicFeaturedTiles({ payload }: DynamicFeaturedTilesPr
|
||||
}
|
||||
};
|
||||
|
||||
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="ui-section-band w-full overflow-hidden"
|
||||
@@ -66,16 +103,17 @@ export default function DynamicFeaturedTiles({ payload }: DynamicFeaturedTilesPr
|
||||
)}
|
||||
|
||||
{/* Campaign Tiles Grid */}
|
||||
<div className={`grid gap-8 md:gap-12 ${getGridColsClass(columns)}`}>
|
||||
<div className={`grid gap-6 md:gap-8 lg:gap-10 ${getGridColsClass(columns)}`}>
|
||||
{tiles.map((tile, idx) => {
|
||||
const tileTitle = getLocalizedField(tile.title, lang);
|
||||
const tileDescription = getLocalizedField(tile.description, lang);
|
||||
const buttonText = getLocalizedField(tile.buttonText, lang);
|
||||
const imageAspectRatio = tile.imageAspectRatio || sectionAspect || 'square';
|
||||
|
||||
const cardContent = (
|
||||
<>
|
||||
<div className={`group flex flex-col ${alignContainerClass} space-y-4 w-full`}>
|
||||
{/* Image Container */}
|
||||
<div className={`relative ${getAspectClass(tile.imageAspectRatio)} w-full overflow-hidden rounded-2xl bg-neutral-100 shadow-md`}>
|
||||
<div className={`relative ${getAspectClass(imageAspectRatio)} w-full overflow-hidden ${getRoundedClass(imageRounded)} bg-neutral-100 shadow-md`}>
|
||||
{tile.imageUrl ? (
|
||||
<img
|
||||
src={tile.imageUrl}
|
||||
@@ -93,43 +131,48 @@ export default function DynamicFeaturedTiles({ payload }: DynamicFeaturedTilesPr
|
||||
</div>
|
||||
|
||||
{/* Content Details */}
|
||||
<div className="space-y-2 max-w-md px-2 flex-1 flex flex-col justify-between w-full">
|
||||
<div className="space-y-2">
|
||||
{tileTitle && (
|
||||
<h3 className="font-serif text-xl md:text-2xl font-light tracking-wide text-neutral-800 group-hover:text-pop-pink transition-colors" style={{ color: payload.textColor }}>
|
||||
{tileTitle}
|
||||
</h3>
|
||||
)}
|
||||
{tileDescription && (
|
||||
<p className="text-xs md:text-sm font-light leading-relaxed opacity-80" style={{ color: payload.textColor }}>
|
||||
{tileDescription}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className={`space-y-2.5 w-full flex flex-col ${alignContainerClass}`}>
|
||||
{tileTitle && (
|
||||
<h3 className="font-serif text-lg md:text-xl font-normal tracking-wide text-neutral-800 group-hover:text-pop-pink transition-colors" style={{ color: payload.textColor }}>
|
||||
{tileTitle}
|
||||
</h3>
|
||||
)}
|
||||
{tileDescription && (
|
||||
<p className="text-xs md:text-sm font-light leading-relaxed opacity-80" style={{ color: payload.textColor }}>
|
||||
{tileDescription}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* CTA Button */}
|
||||
{buttonText && tile.buttonLink && (
|
||||
<div className="pt-3">
|
||||
<span className="inline-block px-7 py-3 text-xs font-medium tracking-wider uppercase transition-all duration-300 bg-neutral-900 text-white group-hover:bg-neutral-800 rounded-sm shadow-sm">
|
||||
{buttonText}
|
||||
</span>
|
||||
{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-neutral-800 group-hover:text-pop-pink transition-colors" style={{ color: payload.textColor }}>
|
||||
<span>{buttonText}</span>
|
||||
<span className="transition-transform duration-200 group-hover:translate-x-1 font-sans">→</span>
|
||||
</span>
|
||||
) : ctaStyle === 'solid_button' ? (
|
||||
<span className="inline-flex rounded-xl bg-neutral-900 text-white px-7 py-2.5 text-xs font-bold uppercase tracking-[0.2em] transition hover:bg-neutral-800 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-neutral-900 hover:text-white">
|
||||
{buttonText}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div key={idx} className="flex flex-col items-center text-center group w-full">
|
||||
{tile.buttonLink ? (
|
||||
<Link to={tile.buttonLink} className="w-full flex flex-col items-center text-center space-y-5">
|
||||
{cardContent}
|
||||
</Link>
|
||||
) : (
|
||||
<div className="w-full flex flex-col items-center text-center space-y-5">
|
||||
{cardContent}
|
||||
</div>
|
||||
)}
|
||||
return tile.buttonLink ? (
|
||||
<Link key={idx} to={tile.buttonLink} className="block w-full focus:outline-none">
|
||||
{cardContent}
|
||||
</Link>
|
||||
) : (
|
||||
<div key={idx} className="w-full">
|
||||
{cardContent}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
Reference in new issue
Block a user