add

apps/web/src/app/HeroSection.tsx

@@ -1,157 +1,163 @@
 import React, {
-	useRef,
+  useRef,
-	useCallback,
+  useCallback,
-	useEffect,
+  useEffect,
-	useMemo,
+  useMemo,
-	useState,
+  useState,
 } from "react";
 import { Carousel, Typography } from "antd";
 import {
-	TeamOutlined,
+  TeamOutlined,
-	BookOutlined,
+  BookOutlined,
-	StarOutlined,
+  StarOutlined,
-	LeftOutlined,
+  LeftOutlined,
-	RightOutlined,
+  RightOutlined,
-	EyeOutlined,
+  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 {
+// interface PlatformStat {
-	icon: React.ReactNode;
+//   icon: React.ReactNode;
-	value: number;
+//   value: number;
-	label: string;
+//   label: string;
-}
+// }
 
 const HeroSection = () => {
-	const carouselRef = useRef<CarouselRef>(null);
+  const carouselRef = useRef<CarouselRef>(null);
-	const { statistics, slides, slideLinks = [] } = useAppConfig();
+  const { statistics, slides, slideLinks = [] } = useAppConfig();
-	const [countStatistics, setCountStatistics] = useState<number>(4);
+  const [countStatistics, setCountStatistics] = useState<number>(4);
-	const navigator = useNavigate()
+  const navigator = useNavigate();
-	const platformStats: PlatformStat[] = useMemo(() => {
+//   const platformStats: PlatformStat[] = useMemo(() => {
-		return [
+//     return [
-			{
+//       {
-				icon: <TeamOutlined />,
+//         icon: <TeamOutlined />,
-				value: statistics.staffs,
+//         value: statistics.staffs,
-				label: "注册学员",
+//         label: "注册学员",
-			},
+//       },
-			{
+//       {
-				icon: <StarOutlined />,
+//         icon: <StarOutlined />,
-				value: statistics.courses,
+//         value: statistics.courses,
-				label: "精品课程",
+//         label: "精品课程",
-			},
+//       },
-			{
+//       {
-				icon: <BookOutlined />,
+//         icon: <BookOutlined />,
-				value: statistics.lectures,
+//         value: statistics.lectures,
-				label: "课程章节",
+//         label: "课程章节",
-			},
+//       },
-			{
+//       {
-				icon: <EyeOutlined />,
+//         icon: <EyeOutlined />,
-				value: statistics.reads,
+//         value: statistics.reads,
-				label: "播放次数",
+//         label: "播放次数",
-			},
+//       },
-		];
+//     ];
-	}, [statistics]);
+//   }, [statistics]);
-	const handlePrev = useCallback(() => {
+  const handlePrev = useCallback(() => {
-		carouselRef.current?.prev();
+    carouselRef.current?.prev();
-	}, []);
+  }, []);
 
-	const handleNext = useCallback(() => {
+  const handleNext = useCallback(() => {
-		carouselRef.current?.next();
+    carouselRef.current?.next();
-	}, []);
+  }, []);
 
-	const countNonZeroValues = (statistics: Record<string, number>): number => {
+  const countNonZeroValues = (statistics: Record<string, number>): number => {
-		return Object.values(statistics).filter((value) => value !== 0).length;
+    return Object.values(statistics).filter((value) => value !== 0).length;
-	};
+  };
 
-	useEffect(() => {
+  useEffect(() => {
-		const count = countNonZeroValues(statistics);
+    const count = countNonZeroValues(statistics);
-		console.log(count);
+    console.log(count);
-		setCountStatistics(count);
+    setCountStatistics(count);
-	}, [statistics]);
+  }, [statistics]);
-	return (
+  return (
-		<section className="relative ">
+    <section className="relative ">
-			<div className="group">
+      <div className="group">
-				<Carousel
+        <Carousel
-					ref={carouselRef}
+          ref={carouselRef}
-					autoplay
+          autoplay
-					effect="fade"
+          effect="fade"
-					className="h-[600px] mb-24"
+          className="h-[600px] mb-24"
-					dots={{
+          dots={{
-						className: "carousel-dots !bottom-32 !z-20",
+            className: "carousel-dots !bottom-32 !z-20",
-					}}>
+          }}
-					{Array.isArray(slides) ? (
+        >
-						slides.map((item, index) => (
+          {Array.isArray(slides) ? (
-							<div key={index} className="relative h-[600px] cursor-pointer"
+            slides.map((item, index) => (
-								onClick={()=>{
+              <div
-									if(slideLinks?.[index])window.open(slideLinks?.[index],"_blank")
+                key={index}
-								}}
+                className="relative h-[600px] cursor-pointer"
-							>
+                onClick={() => {
-								<div
+                  if (slideLinks?.[index])
-									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]"
+                    window.open(slideLinks?.[index], "_blank");
-									style={{
+                }}
-										//backgroundImage: `url(https://s.cn.bing.net/th?id=OHR.GiantCuttlefish_ZH-CN0670915878_1920x1080.webp&qlt=50)`,
+              >
-										backgroundImage: `url(${item})`,
+                <div
-										backfaceVisibility: "hidden",
+                  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)`,
-								{/* <div
+                    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 */}
+                {/* Content Container */}
-								<div className="relative h-full max-w-7xl mx-auto px-6 lg:px-8"></div>
+                <div className="relative h-full max-w-7xl mx-auto px-6 lg:px-8"></div>
-							</div>
+              </div>
-						))
+            ))
-					) : (
+          ) : (
-						<div></div>
+            <div></div>
-					)}
+          )}
-				</Carousel>
+        </Carousel>
 
-				{/* Navigation Buttons */}
+        {/* Navigation Buttons */}
-				<button
+        <button
-					onClick={handlePrev}
+          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"
+          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>
+          <LeftOutlined className="text-white text-xl" />
-				<button
+        </button>
-					onClick={handleNext}
+        <button
-					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"
+          onClick={handleNext}
-					aria-label="Next slide">
+          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"
-					<RightOutlined className="text-white text-xl" />
+          aria-label="Next slide"
-				</button>
+        >
-			</div>
+          <RightOutlined className="text-white text-xl" />
+        </button>
+      </div>
 
-			{/* Stats Container */}
+      {/* Stats Container */}
-			{countStatistics > 1 && (
+      {countStatistics > 1 && (
-				<div className="absolute -bottom-20 left-1/2 -translate-x-1/2 w-3/5 max-w-6xl px-4">
+        <div className="absolute -bottom-20 left-1/2 -translate-x-1/2 w-3/5 max-w-6xl px-4">
-					<div
+          <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]`}>
+            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 ? (
+            {/* {platformStats.map((stat, index) => {
-								<div
+              return stat.value ? (
-									key={index}
+                <div
-									className="text-center transform hover:-translate-y-1 hover:scale-105 transition-transform duration-300 ease-out">
+                  key={index}
-									<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">
+                  className="text-center transform hover:-translate-y-1 hover:scale-105 transition-transform duration-300 ease-out"
-										{stat.icon}
+                >
-									</div>
+                  <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">
-									<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.icon}
-										{stat.value}
+                  </div>
-									</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">
-									<div className="text-gray-600 font-medium">
+                    {stat.value}
-										{stat.label}
+                  </div>
-									</div>
+                  <div className="text-gray-600 font-medium">{stat.label}</div>
-								</div>
+                </div>
-							) : null;
+              ) : null;
-						})}
+            })} */}
-					</div>
+          </div>
-				</div>
+        </div>
-			)}
+      )}
-		</section>
+    </section>
-	);
+  );
 };
 
 export default HeroSection;