From cf3e242462017286cfd0665f4c5c80097719f0b8 Mon Sep 17 00:00:00 2001
From: ditiqi <ditiqi@163.com>
Date: Mon, 24 Feb 2025 20:24:17 +0800
Subject: [PATCH] add

---
 .../app/main/home/components/HeroSection.tsx  | 245 ++++++++----------
 1 file changed, 110 insertions(+), 135 deletions(-)

diff --git a/apps/web/src/app/main/home/components/HeroSection.tsx b/apps/web/src/app/main/home/components/HeroSection.tsx
index 3dac945..9dae829 100755
--- a/apps/web/src/app/main/home/components/HeroSection.tsx
+++ b/apps/web/src/app/main/home/components/HeroSection.tsx
@@ -1,160 +1,135 @@
-import React, { useRef, useCallback } from 'react';
-import { Button, Carousel, Typography } from 'antd';
+import React, { useRef, useCallback } from "react";
+import { Button, Carousel, Typography } from "antd";
 import {
-  TeamOutlined,
-  BookOutlined,
-  StarOutlined,
-  ClockCircleOutlined,
-  LeftOutlined,
-  RightOutlined,
-  EyeOutlined
-} from '@ant-design/icons';
-import type { CarouselRef } from 'antd/es/carousel';
+	TeamOutlined,
+	BookOutlined,
+	StarOutlined,
+	ClockCircleOutlined,
+	LeftOutlined,
+	RightOutlined,
+	EyeOutlined,
+} from "@ant-design/icons";
+import type { CarouselRef } from "antd/es/carousel";
 
 const { Title, Text } = Typography;
 
 interface CarouselItem {
-  title: string;
-  desc: string;
-  image: string;
-  action: string;
-  color: string;
+	title: string;
+	desc: string;
+	image: string;
+	action: string;
+	color: string;
 }
 
 interface PlatformStat {
-  icon: React.ReactNode;
-  value: string;
-  label: string;
+	icon: React.ReactNode;
+	value: string;
+	label: string;
 }
 
 const carouselItems: CarouselItem[] = [
-  {
-    title: '探索编程世界',
-    desc: '从零开始学习编程，开启你的技术之旅',
-    image: '/images/banner1.jpg',
-    action: '立即开始',
-    color: 'from-blue-600/90'
-  },
-  {
-    title: '人工智能课程',
-    desc: '掌握AI技术，引领未来发展',
-    image: '/images/banner2.jpg',
-    action: '了解更多',
-    color: 'from-purple-600/90'
-  }
+	{
+		title: "探索编程世界",
+		desc: "从零开始学习编程，开启你的技术之旅",
+		image: "/images/banner1.jpg",
+		action: "立即开始",
+		color: "from-blue-600/90",
+	},
+	{
+		title: "人工智能课程",
+		desc: "掌握AI技术，引领未来发展",
+		image: "/images/banner2.jpg",
+		action: "了解更多",
+		color: "from-purple-600/90",
+	},
 ];
 
 const platformStats: PlatformStat[] = [
-  { icon: <TeamOutlined />, value: '50,000+', label: '注册学员' },
-  { icon: <BookOutlined />, value: '1,000+', label: '精品课程' },
-  // { icon: <StarOutlined />, value: '98%', label: '好评度' },
-  { icon: <EyeOutlined />, value: '100万+', label: '观看次数' }
+	{ icon: <TeamOutlined />, value: "50,000+", label: "注册学员" },
+	{ icon: <BookOutlined />, value: "1,000+", label: "精品课程" },
+	// { icon: <StarOutlined />, value: '98%', label: '好评度' },
+	{ icon: <EyeOutlined />, value: "100万+", label: "观看次数" },
 ];
 
 const HeroSection = () => {
-  const carouselRef = useRef<CarouselRef>(null);
+	const carouselRef = useRef<CarouselRef>(null);
 
-  const handlePrev = useCallback(() => {
-    carouselRef.current?.prev();
-  }, []);
+	const handlePrev = useCallback(() => {
+		carouselRef.current?.prev();
+	}, []);
 
-  const handleNext = useCallback(() => {
-    carouselRef.current?.next();
-  }, []);
+	const handleNext = useCallback(() => {
+		carouselRef.current?.next();
+	}, []);
 
-  return (
-    <section className="relative ">
-      <div className="group">
-        <Carousel
-          ref={carouselRef}
-          autoplay
-          effect="fade"
-          className="h-[600px] mb-24"
-          dots={{
-            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'
-                }}
-              />
-              <div
-                className={`absolute inset-0 bg-gradient-to-r ${item.color} to-transparent opacity-90 mix-blend-overlay transition-opacity duration-500`}
-              />
-              <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent" />
+	return (
+		<section className="relative ">
+			<div className="group">
+				<Carousel
+					ref={carouselRef}
+					autoplay
+					effect="fade"
+					className="h-[600px] mb-24"
+					dots={{
+						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",
+								}}
+							/>
+							<div
+								className={`absolute inset-0 bg-gradient-to-r ${item.color} to-transparent opacity-90 mix-blend-overlay transition-opacity duration-500`}
+							/>
+							<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="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>
+							{/* Content Container */}
+							<div className="relative h-full max-w-7xl mx-auto px-6 lg:px-8"></div>
+						</div>
+					))}
+				</Carousel>
 
-        {/* Navigation Buttons */}
-        <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"
-        >
-          <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"
-        >
-          <RightOutlined className="text-white text-xl" />
-        </button>
-      </div>
+				{/* Navigation Buttons */}
+				<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">
+					<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">
+					<RightOutlined className="text-white text-xl" />
+				</button>
+			</div>
 
-      {/* Stats Container */}
-      <div className="absolute -bottom-24 left-1/2 -translate-x-1/2 w-1/2 max-w-6xl px-4">
-        <div className="rounded-2xl grid grid-cols-2 md:grid-cols-3 gap-4 md:gap-8 p-6 md:p-8 bg-white border shadow-xl hover:shadow-2xl transition-shadow duration-500 will-change-[transform,box-shadow]">
-          {platformStats.map((stat, index) => (
-            <div
-              key={index}
-              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>
-              <div className="text-2xl font-bold bg-gradient-to-r from-gray-800 to-gray-600 bg-clip-text text-transparent mb-1.5">
-                {stat.value}
-              </div>
-              <div className="text-gray-600 font-medium">
-                {stat.label}
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-    </section>
-  );
+			{/* Stats Container */}
+			<div className="absolute -bottom-24 left-1/2 -translate-x-1/2 w-1/2 max-w-6xl px-4">
+				<div className="rounded-2xl grid grid-cols-2 md:grid-cols-3 gap-4 md:gap-8 p-6 md:p-8 bg-white border shadow-xl hover:shadow-2xl transition-shadow duration-500 will-change-[transform,box-shadow]">
+					{platformStats.map((stat, index) => (
+						<div
+							key={index}
+							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>
+							<div className="text-2xl font-bold bg-gradient-to-r from-gray-800 to-gray-600 bg-clip-text text-transparent mb-1.5">
+								{stat.value}
+							</div>
+							<div className="text-gray-600 font-medium">
+								{stat.label}
+							</div>
+						</div>
+					))}
+				</div>
+			</div>
+		</section>
+	);
 };
 
-export default HeroSection;
\ No newline at end of file
+export default HeroSection;