lapikud/tipilan
3
0
Fork 0
mirror of https://github.com/Lapikud/tipilan.git synced 2026-05-08 18:08:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add very basic teasercarousel

Browse Source
This commit is contained in:
Rene Arumetsa
2026-04-30 16:13:32 +03:00
parent be3a75752b
commit d20cdc6b98
1 changed files with 69 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
src/components/TeaserCarousel.tsx
View File

@@ -23,15 +23,24 @@ export default function TeaserCarousel() {
const t = useTranslations("home.teaser");
const [current, setCurrent] = useState(0);
const slide = slides[current];
const prev = () => setCurrent((c) => (c - 1 + slides.length) % slides.length);
const next = () => setCurrent((c) => (c + 1) % slides.length);
return (
<div className="border-b-3 border-[#1F5673]">
{/* Sliding track */}
<div className="relative h-[729px] overflow-hidden">
<div
className="flex h-full transition-transform duration-500 ease-in-out"
style={{ transform: `translateX(-${current * 100}%)` }}
>
{slides.map((slide) => {
const title = t(`${slide.key}.title`);
const description = t(`${slide.key}.description`);
const prize = t.raw(`${slide.key}.prize`) as string | null;
return (
<div className="border-b-3 border-[#1F5673]">
{/* Card */}
<div className="relative h-[729px] overflow-hidden">
<div key={slide.key} className="relative flex-none w-full h-full">
{/* Background image */}
<Image
src={slide.image}
@@ -39,23 +48,18 @@ export default function TeaserCarousel() {
fill
className="object-cover object-center"
/>
{/* Dark overlay */}
<div className="absolute inset-0 bg-[#0E0F19]/70" />
{/* Gradient: dark on left, fades out on right */}
<div className="absolute inset-0 bg-gradient-to-r from-[#0E0F19]/90 via-[#0E0F19]/60 to-[#0E0F19]/20" />
{/* Content grid */}
<div className="relative grid grid-cols-1 md:grid-cols-[1fr_1fr] h-full">
{/* Left: text */}
{/* Content */}
<div className="relative grid grid-cols-1 md:grid-cols-2 h-full">
<div className="flex flex-col justify-between gap-4 px-8 py-8 md:px-12 md:py-10">
<div className="flex flex-col gap-3">
<h2
className={`${vipnagorgialla.className} font-bold italic text-[clamp(1.1rem,0.9rem+1vw,1.75rem)] text-[#EEE5E5]`}
>
<h2 className={`${vipnagorgialla.className} font-bold italic text-[clamp(1.1rem,0.9rem+1vw,1.75rem)] text-[#EEE5E5]`}>
{t("heading")}
</h2>
<Link href={slide.href}>
<h3
className={`${vipnagorgialla.className} font-bold italic text-[clamp(2.5rem,2rem+2.5vw,5rem)] leading-none text-[#EEE5E5] hover:text-[#00A3E0] transition`}
>
<h3 className={`${vipnagorgialla.className} font-bold italic text-[clamp(2.5rem,2rem+2.5vw,5rem)] leading-none text-[#EEE5E5] hover:text-[#00A3E0] transition`}>
{title}
</h3>
</Link>
@@ -64,18 +68,35 @@ export default function TeaserCarousel() {
</p>
</div>
{prize && (
<p
className={`${vipnagorgialla.className} font-bold italic text-[clamp(1.5rem,1.2rem+1.5vw,2.75rem)] text-[#00A3E0]`}
>
<p className={`${vipnagorgialla.className} font-bold italic text-[clamp(1.5rem,1.2rem+1.5vw,2.75rem)] text-[#00A3E0]`}>
{prize}
</p>
)}
</div>
{/* Right: spacer (image shows through the overlay) */}
{/* Right side: image shows through */}
<div className="hidden md:block" />
</div>
</div>
);
})}
</div>
{/* Arrow buttons */}
<button
onClick={prev}
className="absolute left-4 top-1/2 -translate-y-1/2 w-10 h-10 flex items-center justify-center bg-[#0E0F19]/50 hover:bg-[#007CAB] text-[#EEE5E5] transition"
aria-label="Previous slide"
>
<span className="material-symbols-outlined">chevron_left</span>
</button>
<button
onClick={next}
className="absolute right-4 top-1/2 -translate-y-1/2 w-10 h-10 flex items-center justify-center bg-[#0E0F19]/50 hover:bg-[#007CAB] text-[#EEE5E5] transition"
aria-label="Next slide"
>
<span className="material-symbols-outlined">chevron_right</span>
</button>
</div>
{/* Navigation dots */}
<div className="flex justify-center gap-3 py-5">
@@ -84,9 +105,7 @@ export default function TeaserCarousel() {
key={i}
onClick={() => setCurrent(i)}
className={`w-3 h-3 rounded-full transition ${
i === current
? "bg-[#007CAB]"
: "bg-[#1F5673] hover:bg-[#007CAB]/60"
i === current ? "bg-[#007CAB]" : "bg-[#1F5673] hover:bg-[#007CAB]/60"
}`}
aria-label={`Slide ${i + 1}`}
/>