linfeng
/
training_data
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'main' of http://113.45.157.195:3003/insiinc/re-mooc

This commit is contained in:
ditiqi 2025-02-25 08:46:24 +08:00
parent 3d02643de3 b3c1f82c4b
commit 1c0caa3ef5
1 changed files with 26 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
apps/web/src/app/main/home/components/HeroSection.tsx
View File

@ -10,6 +10,7 @@ import {
EyeOutlined,
} from "@ant-design/icons";
import type { CarouselRef } from "antd/es/carousel";
import { useAppConfig } from "@nice/client";
const { Title, Text } = Typography;
@ -53,7 +54,7 @@ const platformStats: PlatformStat[] = [
const HeroSection = () => {
const carouselRef = useRef<CarouselRef>(null);
const handlePrev = useCallback(() => {
carouselRef.current?.prev();
}, []);
@ -61,7 +62,7 @@ const HeroSection = () => {
const handleNext = useCallback(() => {
carouselRef.current?.next();
}, []);
//const {slides:carouselItems} = useAppConfig()
return (
<section className="relative ">
<div className="group">
@ -73,24 +74,30 @@ const HeroSection = () => {
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" />
{Array.isArray(carouselItems)?
(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(https://s.cn.bing.net/th?id=OHR.GiantCuttlefish_ZH-CN0670915878_1920x1080.webp&qlt=50)`,
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>
</div>
))}
{/* Content Container */}
<div className="relative h-full max-w-7xl mx-auto px-6 lg:px-8"></div>
</div>
)))
:(
<div></div>
)
}
</Carousel>
{/* Navigation Buttons */}