new gui

frontend/src/pages/Home/components/educated_team/EducatedTeam.tsx

@@ -0,0 +1,64 @@
+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>
+	);
+}
+