add

apps/web/src/app/HeroSection.tsx

@@ -1,157 +1,163 @@
 import React, {
-	useRef,
-	useCallback,
-	useEffect,
-	useMemo,
-	useState,
+  useRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
 } from "react";
 import { Carousel, Typography } from "antd";
 import {
-	TeamOutlined,
-	BookOutlined,
-	StarOutlined,
-	LeftOutlined,
-	RightOutlined,
-	EyeOutlined,
+  TeamOutlined,
+  BookOutlined,
+  StarOutlined,
+  LeftOutlined,
+  RightOutlined,
+  EyeOutlined,
 } from "@ant-design/icons";
 import type { CarouselRef } from "antd/es/carousel";
 import { useAppConfig } from "@nice/client";
 import { useNavigate } from "react-router-dom";
 
-interface PlatformStat {
-	icon: React.ReactNode;
-	value: number;
-	label: string;
-}
+// interface PlatformStat {
+//   icon: React.ReactNode;
+//   value: number;
+//   label: string;
+// }
 
 const HeroSection = () => {
-	const carouselRef = useRef<CarouselRef>(null);
-	const { statistics, slides, slideLinks = [] } = useAppConfig();
-	const [countStatistics, setCountStatistics] = useState<number>(4);
-	const navigator = useNavigate()
-	const platformStats: PlatformStat[] = useMemo(() => {
-		return [
-			{
-				icon: <TeamOutlined />,
-				value: statistics.staffs,
-				label: "注册学员",
-			},
-			{
-				icon: <StarOutlined />,
-				value: statistics.courses,
-				label: "精品课程",
-			},
-			{
-				icon: <BookOutlined />,
-				value: statistics.lectures,
-				label: "课程章节",
-			},
-			{
-				icon: <EyeOutlined />,
-				value: statistics.reads,
-				label: "播放次数",
-			},
-		];
-	}, [statistics]);
-	const handlePrev = useCallback(() => {
-		carouselRef.current?.prev();
-	}, []);
+  const carouselRef = useRef<CarouselRef>(null);
+  const { statistics, slides, slideLinks = [] } = useAppConfig();
+  const [countStatistics, setCountStatistics] = useState<number>(4);
+  const navigator = useNavigate();
+//   const platformStats: PlatformStat[] = useMemo(() => {
+//     return [
+//       {
+//         icon: <TeamOutlined />,
+//         value: statistics.staffs,
+//         label: "注册学员",
+//       },
+//       {
+//         icon: <StarOutlined />,
+//         value: statistics.courses,
+//         label: "精品课程",
+//       },
+//       {
+//         icon: <BookOutlined />,
+//         value: statistics.lectures,
+//         label: "课程章节",
+//       },
+//       {
+//         icon: <EyeOutlined />,
+//         value: statistics.reads,
+//         label: "播放次数",
+//       },
+//     ];
+//   }, [statistics]);
+  const handlePrev = useCallback(() => {
+    carouselRef.current?.prev();
+  }, []);
 
-	const handleNext = useCallback(() => {
-		carouselRef.current?.next();
-	}, []);
+  const handleNext = useCallback(() => {
+    carouselRef.current?.next();
+  }, []);
 
-	const countNonZeroValues = (statistics: Record<string, number>): number => {
-		return Object.values(statistics).filter((value) => value !== 0).length;
-	};
+  const countNonZeroValues = (statistics: Record<string, number>): number => {
+    return Object.values(statistics).filter((value) => value !== 0).length;
+  };
 
-	useEffect(() => {
-		const count = countNonZeroValues(statistics);
-		console.log(count);
-		setCountStatistics(count);
-	}, [statistics]);
-	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",
-					}}>
-					{Array.isArray(slides) ? (
-						slides.map((item, index) => (
-							<div key={index} className="relative h-[600px] cursor-pointer"
-								onClick={()=>{
-									if(slideLinks?.[index])window.open(slideLinks?.[index],"_blank")
-								}}
-							>
-								<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(https://s.cn.bing.net/th?id=OHR.GiantCuttlefish_ZH-CN0670915878_1920x1080.webp&qlt=50)`,
-										backgroundImage: `url(${item})`,
-										backfaceVisibility: "hidden",
-									}}
-								/>
-								{/* <div
+  useEffect(() => {
+    const count = countNonZeroValues(statistics);
+    console.log(count);
+    setCountStatistics(count);
+  }, [statistics]);
+  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",
+          }}
+        >
+          {Array.isArray(slides) ? (
+            slides.map((item, index) => (
+              <div
+                key={index}
+                className="relative h-[600px] cursor-pointer"
+                onClick={() => {
+                  if (slideLinks?.[index])
+                    window.open(slideLinks?.[index], "_blank");
+                }}
+              >
+                <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(https://s.cn.bing.net/th?id=OHR.GiantCuttlefish_ZH-CN0670915878_1920x1080.webp&qlt=50)`,
+                    backgroundImage: `url(${item})`,
+                    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" />
+                <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>
-							</div>
-						))
-					) : (
-						<div></div>
-					)}
-				</Carousel>
+                {/* Content Container */}
+                <div className="relative h-full max-w-7xl mx-auto px-6 lg:px-8"></div>
+              </div>
+            ))
+          ) : (
+            <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 */}
-			{countStatistics > 1 && (
-				<div className="absolute -bottom-20 left-1/2 -translate-x-1/2 w-3/5 max-w-6xl px-4">
-					<div
-						className={`rounded-2xl grid grid-cols-${countStatistics} lg:grid-cols-${countStatistics} md:grid-cols-${countStatistics} 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) => {
-							return stat.value ? (
-								<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>
-							) : null;
-						})}
-					</div>
-				</div>
-			)}
-		</section>
-	);
+      {/* Stats Container */}
+      {countStatistics > 1 && (
+        <div className="absolute -bottom-20 left-1/2 -translate-x-1/2 w-3/5 max-w-6xl px-4">
+          <div
+            className={`rounded-2xl grid grid-cols-${countStatistics} lg:grid-cols-${countStatistics} md:grid-cols-${countStatistics} 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) => {
+              return stat.value ? (
+                <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>
+              ) : null;
+            })} */}
+          </div>
+        </div>
+      )}
+    </section>
+  );
 };
 
 export default HeroSection;