65 lines
2.0 KiB
TypeScript
65 lines
2.0 KiB
TypeScript
import { motion } from "framer-motion";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
type Slide = {
|
|
src: string;
|
|
alt: string;
|
|
};
|
|
|
|
export default function EducatedTeam() {
|
|
const { t } = useTranslation();
|
|
|
|
const slides: Slide[] = [
|
|
{ src: "/images/Seminar/team.jpg", alt: "Team in training" },
|
|
{ src: "/images/Seminar/teacher.jpg", alt: "Seminar teacher" },
|
|
{ src: "/images/Seminar/poster.jpg", alt: "Training poster" },
|
|
];
|
|
|
|
const duplicated = [...slides, ...slides]; // seamless loop
|
|
|
|
return (
|
|
<section className="mx-auto my-16 w-full max-w-7xl px-6 sm:px-8">
|
|
<div className="relative overflow-hidden rounded-xl">
|
|
{/* Background continuous slider */}
|
|
<div className="relative h-72 w-full sm:h-80 md:h-[26rem]">
|
|
<motion.div
|
|
className="absolute inset-0 flex"
|
|
animate={{ x: ["0%", "-50%"] }}
|
|
transition={{ duration: 25, ease: "linear", repeat: Infinity }}
|
|
aria-hidden
|
|
>
|
|
{duplicated.map((s, i) => (
|
|
<div key={i} className="relative h-full w-full flex-shrink-0">
|
|
<img
|
|
src={s.src}
|
|
alt={s.alt}
|
|
className="h-full w-full object-cover"
|
|
loading={i === 0 ? "eager" : "lazy"}
|
|
/>
|
|
{/* Subtle vignette for readability */}
|
|
<div className="absolute inset-0 bg-gradient-to-t from-black/50 via-black/20 to-transparent" />
|
|
</div>
|
|
))}
|
|
</motion.div>
|
|
|
|
{/* Centered text overlay */}
|
|
<div className="relative z-10 flex h-full w-full items-center justify-center">
|
|
<div className="mx-auto max-w-2xl text-center text-white">
|
|
<h2 className="text-2xl font-extrabold tracking-tight sm:text-3xl md:text-4xl drop-shadow">
|
|
{t("home.educated.title")}
|
|
</h2>
|
|
<p className="mt-3 text-sm leading-6 text-white/90 sm:text-base md:text-lg drop-shadow">
|
|
{t("home.educated.subtitle")}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Outer gradient edges */}
|
|
<div className="pointer-events-none absolute inset-0 bg-gradient-to-r from-black/30 via-transparent to-black/30" />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|