admin/homaroma
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

x

Browse Source
This commit is contained in:
Your Name committed 2026-06-21 01:03:29 -04:00
1 parent c365add07f
commit c449de2482
28 files changed
+694 -300
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/spa/src/components/DynamicEditorialCarousel.tsx
+10 -14
View File
@@ -17,7 +17,7 @@ export default function DynamicEditorialCarousel({ payload }: DynamicEditorialCa
const { i18n } = useTranslation();
const lang = i18n.language;
const title = getLocalizedField(payload.title, lang);
const slides = (payload.slides || []).map((slide: any) => ({
const slides = (payload.slides || []).map((slide) => ({
...slide,
title: getLocalizedField(slide.title, lang),
description: getLocalizedField(slide.description, lang),
@@ -46,17 +46,15 @@ export default function DynamicEditorialCarousel({ payload }: DynamicEditorialCa
};
return (
<section className="w-full bg-[#1F3D2D] text-white py-20 px-6 md:px-16 overflow-hidden">
<div className="max-w-7xl mx-auto space-y-12">
{/* Section Header */}
<div className="text-center space-y-3">
<h2 className="text-3xl md:text-5xl font-light tracking-wide font-serif text-spa-gold">
<section className="ui-dark-shell overflow-hidden">
<div className="ui-section-inner space-y-12">
<div className="space-y-3 text-center">
<h2 className="font-serif text-3xl font-light tracking-wide text-spa-gold md:text-5xl">
{renderTitle(title) || title}
</h2>
<div className="w-16 h-[1px] bg-spa-gold mx-auto"></div>
</div>
{/* Swiper Slider */}
<div className="relative select-none pb-12">
<Swiper
modules={[Autoplay, Pagination]}
@@ -72,8 +70,7 @@ export default function DynamicEditorialCarousel({ payload }: DynamicEditorialCa
>
{slides.map((slide, idx) => (
<SwiperSlide key={idx} className="h-auto flex flex-col">
<div className="bg-white/5 border border-white/5 rounded-3xl overflow-hidden flex flex-col h-full group hover:border-spa-gold/30 transition-all duration-300">
{/* Image wrapper */}
<div className="ui-dark-card group flex h-full flex-col transition-all duration-300 hover:border-spa-gold/30">
<div className="aspect-[4/3] overflow-hidden relative">
<img
src={slide.imageUrl}
@@ -83,19 +80,18 @@ export default function DynamicEditorialCarousel({ payload }: DynamicEditorialCa
(e.target as HTMLImageElement).style.display = 'none';
}}
/>
<div className="absolute inset-0 bg-gradient-to-t from-[#1F3D2D]/60 via-transparent to-transparent"></div>
<div className="absolute inset-0 bg-gradient-to-t from-spa-forest/60 via-transparent to-transparent"></div>
</div>
{/* Content details */}
<div className="p-6 md:p-8 flex flex-col flex-1 justify-between space-y-6">
<div className="space-y-3">
<span className="text-[10px] uppercase font-bold tracking-[0.2em] text-spa-gold block">
<span className="block text-[10px] font-bold uppercase tracking-[0.2em] text-spa-gold">
{slide.category}
</span>
<h3 className="text-xl font-light font-serif tracking-wide text-spa-light">
<h3 className="font-serif text-xl font-light tracking-wide text-spa-light">
{renderTitle(slide.title) || slide.title}
</h3>
<p className="text-xs md:text-sm font-light text-spa-light/70 leading-relaxed line-clamp-3">
<p className="line-clamp-3 text-xs font-light leading-relaxed text-spa-light/70 md:text-sm">
{slide.description}
</p>
</div>