add

apps/web/src/app/main/home/components/HeroSection.tsx

@@ -1,5 +1,5 @@
-import React, { useRef, useCallback } from 'react';
+import React, { useRef, useCallback } from "react";
-import { Button, Carousel, Typography } from 'antd';
+import { Button, Carousel, Typography } from "antd";
 import {
 	TeamOutlined,
 	BookOutlined,
@@ -7,9 +7,9 @@ import {
 	ClockCircleOutlined,
 	LeftOutlined,
 	RightOutlined,
-  EyeOutlined
+	EyeOutlined,
-} from '@ant-design/icons';
+} from "@ant-design/icons";
-import type { CarouselRef } from 'antd/es/carousel';
+import type { CarouselRef } from "antd/es/carousel";
 
 const { Title, Text } = Typography;
 
@@ -29,26 +29,26 @@ interface PlatformStat {
 
 const carouselItems: CarouselItem[] = [
 	{
-    title: '探索编程世界',
+		title: "探索编程世界",
-    desc: '从零开始学习编程，开启你的技术之旅',
+		desc: "从零开始学习编程，开启你的技术之旅",
-    image: '/images/banner1.jpg',
+		image: "/images/banner1.jpg",
-    action: '立即开始',
+		action: "立即开始",
-    color: 'from-blue-600/90'
+		color: "from-blue-600/90",
 	},
 	{
-    title: '人工智能课程',
+		title: "人工智能课程",
-    desc: '掌握AI技术，引领未来发展',
+		desc: "掌握AI技术，引领未来发展",
-    image: '/images/banner2.jpg',
+		image: "/images/banner2.jpg",
-    action: '了解更多',
+		action: "了解更多",
-    color: 'from-purple-600/90'
+		color: "from-purple-600/90",
-  }
+	},
 ];
 
 const platformStats: PlatformStat[] = [
-  { icon: <TeamOutlined />, value: '50,000+', label: '注册学员' },
+	{ icon: <TeamOutlined />, value: "50,000+", label: "注册学员" },
-  { icon: <BookOutlined />, value: '1,000+', label: '精品课程' },
+	{ icon: <BookOutlined />, value: "1,000+", label: "精品课程" },
 	// { icon: <StarOutlined />, value: '98%', label: '好评度' },
-  { icon: <EyeOutlined />, value: '100万+', label: '观看次数' }
+	{ icon: <EyeOutlined />, value: "100万+", label: "观看次数" },
 ];
 
 const HeroSection = () => {
@@ -71,16 +71,15 @@ const HeroSection = () => {
 					effect="fade"
 					className="h-[600px] mb-24"
 					dots={{
-            className: 'carousel-dots !bottom-32 !z-20',
+						className: "carousel-dots !bottom-32 !z-20",
-          }}
+					}}>
-        >
 					{carouselItems.map((item, index) => (
 						<div key={index} className="relative h-[600px]">
 							<div
 								className="absolute inset-0 bg-cover bg-center transform transition-[transform,filter] duration-[2000ms] group-hover:scale-105 group-hover:brightness-110 will-change-[transform,filter]"
 								style={{
 									backgroundImage: `url(${item.image})`,
-                  backfaceVisibility: 'hidden'
+									backfaceVisibility: "hidden",
 								}}
 							/>
 							<div
@@ -89,28 +88,7 @@ const HeroSection = () => {
 							<div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent" />
 
 							{/* Content Container */}
-              <div className="relative h-full max-w-7xl mx-auto px-6 lg:px-8">
+							<div className="relative h-full max-w-7xl mx-auto px-6 lg:px-8"></div>
-                <div className="absolute left-0 top-1/2 -translate-y-1/2 max-w-2xl">
-                  <Title
-                    className="text-white mb-8 text-5xl md:text-6xl xl:text-7xl !leading-tight font-bold tracking-tight"
-                    style={{
-                      transform: 'translateZ(0)'
-                    }}
-                  >
-                    {item.title}
-                  </Title>
-                  <Text className="text-white/95 text-lg md:text-xl block mb-12 font-light leading-relaxed">
-                    {item.desc}
-                  </Text>
-                  <Button
-                    type="primary"
-                    size="large"
-                    className="h-14 px-12 text-lg font-semibold bg-gradient-to-r from-primary to-primary-600 border-0 shadow-lg hover:shadow-xl hover:from-primary-600 hover:to-primary-700 hover:scale-105 transform transition-all duration-300 ease-out"
-                  >
-                    {item.action}
-                  </Button>
-                </div>
-              </div>
 						</div>
 					))}
 				</Carousel>
@@ -119,15 +97,13 @@ const HeroSection = () => {
 				<button
 					onClick={handlePrev}
 					className="absolute left-4 md:left-8 top-1/2 -translate-y-1/2 z-10 opacity-0 group-hover:opacity-100 transition-all duration-300 bg-black/20 hover:bg-black/30 w-12 h-12 flex items-center justify-center rounded-full transform hover:scale-110 hover:shadow-lg"
-          aria-label="Previous slide"
+					aria-label="Previous slide">
-        >
 					<LeftOutlined className="text-white text-xl" />
 				</button>
 				<button
 					onClick={handleNext}
 					className="absolute right-4 md:right-8 top-1/2 -translate-y-1/2 z-10 opacity-0 group-hover:opacity-100 transition-all duration-300 bg-black/20 hover:bg-black/30 w-12 h-12 flex items-center justify-center rounded-full transform hover:scale-110 hover:shadow-lg"
-          aria-label="Next slide"
+					aria-label="Next slide">
-        >
 					<RightOutlined className="text-white text-xl" />
 				</button>
 			</div>
@@ -138,8 +114,7 @@ const HeroSection = () => {
 					{platformStats.map((stat, index) => (
 						<div
 							key={index}
-              className="text-center transform hover:-translate-y-1 hover:scale-105 transition-transform duration-300 ease-out"
+							className="text-center transform hover:-translate-y-1 hover:scale-105 transition-transform duration-300 ease-out">
-            >
 							<div className="inline-flex items-center justify-center w-16 h-16 mb-4 rounded-full bg-primary-50 text-primary-600 text-3xl transition-colors duration-300 group-hover:text-primary-700">
 								{stat.icon}
 							</div>