From 35b0630625f3dac1f188444a194b7081870afc63 Mon Sep 17 00:00:00 2001
From: ZHENG XIAOYI <yxpqazkzxy@126.com>
Date: Wed, 11 Feb 2026 13:45:21 +0800
Subject: [PATCH] feat(ui): add carousel animation to Customization.astro

---
 src/components/sections/Customization.astro | 63 ++++++++++++++-------
 1 file changed, 41 insertions(+), 22 deletions(-)

diff --git a/src/components/sections/Customization.astro b/src/components/sections/Customization.astro
index b559c55..641f595 100644
--- a/src/components/sections/Customization.astro
+++ b/src/components/sections/Customization.astro
@@ -4,23 +4,6 @@
 	<div class="max-w-7xl mx-auto space-y-24 px-4 lg:px-0">
 
 		<style>
-			@keyframes float {
-				0% {
-					transform: translateY(0px);
-				}
-
-				50% {
-					transform: translateY(-10px);
-				}
-
-				100% {
-					transform: translateY(0px);
-				}
-			}
-
-			.animate-float {
-				animation: float 4s ease-in-out infinite;
-			}
 		</style>
 
 		<div class="max-w-7xl mx-auto">
@@ -29,11 +12,22 @@
 				<div class="flex flex-col md:flex-row items-center gap-8 md:gap-16 mb-12">
 					<div class="md:w-5/12 w-[85%] relative">
 						<div class="absolute -inset-4 bg-indigo-400/10 blur-3xl"></div>
-						<div class="animate-float relative overflow-hidden rounded-2xl shadow-[0_20px_50px_rgba(79,70,229,0.2)] border border-white">
-							<img src="/img/product-customization-1.webp" alt="园区IOC" class="w-full h-auto object-cover transform hover:scale-105 transition-transform duration-700">
-							<div class="absolute inset-0 bg-gradient-to-t from-gray-900/70 via-transparent to-transparent"></div>
-							<div class="absolute bottom-4 left-6 text-white">
-								<p class="text-sm font-bold tracking-widest opacity-80 uppercase">园区IOC</p>
+						<div class="relative overflow-hidden rounded-2xl shadow-[0_20px_50px_rgba(79,70,229,0.2)] border border-white">
+							<div id="slider-container" class="flex transition-transform duration-1000 ease-in-out" style="width: 200%;">
+								<div class="w-1/2 relative">
+									<img src="/img/product-customization-1.webp" alt="园区IOC" class="w-full h-auto object-cover transform hover:scale-105 transition-transform duration-700">
+									<div class="absolute inset-0 bg-gradient-to-t from-gray-900/70 via-transparent to-transparent"></div>
+									<div class="absolute bottom-4 left-6 text-white">
+										<p class="text-sm font-bold tracking-widest opacity-80 uppercase">园区IOC</p>
+									</div>
+								</div>
+								<div class="w-1/2 relative">
+									<img src="/img/product-customization-2.webp" alt="数字孪生" class="w-full h-auto object-cover transform hover:scale-105 transition-transform duration-700">
+									<div class="absolute inset-0 bg-gradient-to-t from-gray-900/70 via-transparent to-transparent"></div>
+									<div class="absolute bottom-4 left-6 text-white">
+										<p class="text-sm font-bold tracking-widest opacity-80 uppercase">数字孪生</p>
+									</div>
+								</div>
 							</div>
 						</div>
 					</div>
@@ -347,3 +341,28 @@
 	</div>
 	<div class="mt-24"></div>
 </section>
+
+<script>
+	(function() {
+		const sliderContainer = document.getElementById('slider-container');
+		let currentIndex = 0;
+		const totalSlides = 2;
+
+		function updateSlide() {
+			if (!sliderContainer) return;
+			const translateX = -currentIndex * 50;
+			sliderContainer.style.transform = `translateX(${translateX}%)`;
+		}
+
+		function startAutoSlide() {
+			setInterval(() => {
+				currentIndex = (currentIndex + 1) % totalSlides;
+				updateSlide();
+			}, 5000);
+		}
+
+		if (sliderContainer) {
+			startAutoSlide();
+		}
+	})();
+</script>