x
This commit is contained in:
Your Name committed
1 parent
e405af357c
commit
e1cf9e62e7
51 files changed
+2598
-168
No files matched your search
@@ -73,10 +73,13 @@ export default function DynamicEditorialCarousel({ payload }: DynamicEditorialCa
|
||||
const bgClass = payload.backgroundColor && bgMap[payload.backgroundColor] ? bgMap[payload.backgroundColor] : 'bg-pop-bg';
|
||||
const textClass = payload.textColor && textMap[payload.textColor] ? textMap[payload.textColor] : 'text-pop-black';
|
||||
|
||||
const isSplitScreen = payload.layout === 'split_screen';
|
||||
const imagePosition = payload.imagePosition || 'left';
|
||||
|
||||
return (
|
||||
<section className={`overflow-hidden py-16 md:py-24 ${bgClass} ${textClass}`}>
|
||||
<div className="ui-section-inner space-y-12">
|
||||
<div className="space-y-3 text-center">
|
||||
<div className={isSplitScreen ? "w-full space-y-12" : "ui-section-inner space-y-12"}>
|
||||
<div className={`space-y-3 text-center ${isSplitScreen ? 'px-4 md:px-8' : ''}`}>
|
||||
<h2 className="font-serif text-3xl font-light tracking-wide text-pop-pink md:text-5xl">
|
||||
{renderTitle(title) || title}
|
||||
</h2>
|
||||
@@ -86,9 +89,9 @@ export default function DynamicEditorialCarousel({ payload }: DynamicEditorialCa
|
||||
<div className="relative select-none pb-12">
|
||||
<Swiper
|
||||
modules={[Autoplay, Pagination, Navigation]}
|
||||
spaceBetween={30}
|
||||
spaceBetween={isSplitScreen ? 0 : 30}
|
||||
slidesPerView={1}
|
||||
breakpoints={{
|
||||
breakpoints={isSplitScreen ? undefined : {
|
||||
640: { slidesPerView: 2 },
|
||||
1024: { slidesPerView: 3 }
|
||||
}}
|
||||
@@ -99,44 +102,91 @@ export default function DynamicEditorialCarousel({ payload }: DynamicEditorialCa
|
||||
>
|
||||
{slides.map((slide, idx) => (
|
||||
<SwiperSlide key={idx} className="h-auto flex flex-col">
|
||||
<div className="ui-dark-card group flex h-full flex-col transition-all duration-300 hover:border-pop-pink/30">
|
||||
<div className="aspect-[4/3] overflow-hidden relative">
|
||||
<img
|
||||
src={slide.imageUrl}
|
||||
alt={slide.title}
|
||||
className="w-full h-full object-cover transition-transform duration-700 ease-out group-hover:scale-105"
|
||||
onError={(e) => {
|
||||
(e.target as HTMLImageElement).style.display = 'none';
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="p-6 md:p-8 flex flex-col flex-1 justify-between space-y-6">
|
||||
<div className="space-y-3">
|
||||
<span className="block text-[10px] font-bold uppercase tracking-[0.2em] text-pop-pink">
|
||||
{slide.category}
|
||||
</span>
|
||||
<h3 className="font-serif text-xl font-light tracking-wide text-pop-black">
|
||||
{renderTitle(slide.title) || slide.title}
|
||||
</h3>
|
||||
<p className="line-clamp-3 text-xs font-light leading-relaxed text-pop-black/70 md:text-sm">
|
||||
{slide.description}
|
||||
</p>
|
||||
{isSplitScreen ? (
|
||||
<div className={`group grid grid-cols-1 bg-night-900 overflow-hidden transition-all duration-300 ${
|
||||
imagePosition === 'left' ? 'md:grid-cols-[65%_35%]' : 'md:grid-cols-[35%_65%]'
|
||||
}`}>
|
||||
<div className={`overflow-hidden relative ${
|
||||
imagePosition === 'left' ? 'order-1 md:order-1' : 'order-1 md:order-2'
|
||||
} aspect-[4/3] md:aspect-auto h-64 md:h-full min-h-[300px] md:min-h-[500px] lg:min-h-[600px]`}>
|
||||
<img
|
||||
src={slide.imageUrl}
|
||||
alt={slide.title}
|
||||
className="w-full h-full object-cover transition-transform duration-700 ease-out group-hover:scale-105"
|
||||
onError={(e) => {
|
||||
(e.target as HTMLImageElement).style.display = 'none';
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{slide.buttonText && slide.buttonLink && (
|
||||
<div className="pt-2">
|
||||
<Link
|
||||
to={slide.buttonLink}
|
||||
className="inline-flex items-center gap-2 text-xs font-bold uppercase tracking-widest text-pop-pink hover:text-pop-black transition-colors group/link"
|
||||
>
|
||||
{slide.buttonText}
|
||||
<span className="group-hover/link:translate-x-1 transition-transform">→</span>
|
||||
</Link>
|
||||
<div className={`p-6 md:p-16 lg:p-24 flex flex-col justify-center space-y-8 ${
|
||||
imagePosition === 'left' ? 'order-2 md:order-2' : 'order-2 md:order-1'
|
||||
}`}>
|
||||
<div className="space-y-3">
|
||||
<span className="block text-[10px] font-bold uppercase tracking-[0.2em] text-pop-pink">
|
||||
{slide.category}
|
||||
</span>
|
||||
<h3 className="font-serif text-xl font-light tracking-wide text-pop-black">
|
||||
{renderTitle(slide.title) || slide.title}
|
||||
</h3>
|
||||
<p className="line-clamp-6 text-xs font-light leading-relaxed text-pop-black/70 md:text-sm">
|
||||
{slide.description}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{slide.buttonText && slide.buttonLink && (
|
||||
<div className="pt-2">
|
||||
<Link
|
||||
to={slide.buttonLink}
|
||||
className="inline-flex items-center gap-2 text-xs font-bold uppercase tracking-widest text-pop-pink hover:text-pop-black transition-colors group/link"
|
||||
>
|
||||
{slide.buttonText}
|
||||
<span className="group-hover/link:translate-x-1 transition-transform">→</span>
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="ui-dark-card group flex h-full flex-col transition-all duration-300 hover:border-pop-pink/30">
|
||||
<div className="aspect-[4/3] overflow-hidden relative">
|
||||
<img
|
||||
src={slide.imageUrl}
|
||||
alt={slide.title}
|
||||
className="w-full h-full object-cover transition-transform duration-700 ease-out group-hover:scale-105"
|
||||
onError={(e) => {
|
||||
(e.target as HTMLImageElement).style.display = 'none';
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="p-6 md:p-8 flex flex-col flex-1 justify-between space-y-6">
|
||||
<div className="space-y-3">
|
||||
<span className="block text-[10px] font-bold uppercase tracking-[0.2em] text-pop-pink">
|
||||
{slide.category}
|
||||
</span>
|
||||
<h3 className="font-serif text-xl font-light tracking-wide text-pop-black">
|
||||
{renderTitle(slide.title) || slide.title}
|
||||
</h3>
|
||||
<p className="line-clamp-3 text-xs font-light leading-relaxed text-pop-black/70 md:text-sm">
|
||||
{slide.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{slide.buttonText && slide.buttonLink && (
|
||||
<div className="pt-2">
|
||||
<Link
|
||||
to={slide.buttonLink}
|
||||
className="inline-flex items-center gap-2 text-xs font-bold uppercase tracking-widest text-pop-pink hover:text-pop-black transition-colors group/link"
|
||||
>
|
||||
{slide.buttonText}
|
||||
<span className="group-hover/link:translate-x-1 transition-transform">→</span>
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</SwiperSlide>
|
||||
))}
|
||||
</Swiper>
|
||||
|
||||
Reference in new issue
Block a user