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

add

This commit is contained in:
ditiqi 2025-02-24 20:24:17 +08:00
parent e44795ebee
commit cf3e242462
1 changed files with 110 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,160 +1,135 @@
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 { import {
TeamOutlined, TeamOutlined,
BookOutlined, BookOutlined,
StarOutlined, StarOutlined,
ClockCircleOutlined, ClockCircleOutlined,
LeftOutlined, LeftOutlined,
RightOutlined, 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; const { Title, Text } = Typography;
interface CarouselItem { interface CarouselItem {
title: string; title: string;
desc: string; desc: string;
image: string; image: string;
action: string; action: string;
color: string; color: string;
} }
interface PlatformStat { interface PlatformStat {
icon: React.ReactNode; icon: React.ReactNode;
value: string; value: string;
label: string; label: string;
} }
const carouselItems: CarouselItem[] = [ 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[] = [ 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: <StarOutlined />, value: '98%', label: '好评度' },
{ icon: <EyeOutlined />, value: '100万+', label: '观看次数' } { icon: <EyeOutlined />, value: "100万+", label: "观看次数" },
]; ];
const HeroSection = () => { const HeroSection = () => {
const carouselRef = useRef<CarouselRef>(null); const carouselRef = useRef<CarouselRef>(null);
const handlePrev = useCallback(() => { const handlePrev = useCallback(() => {
carouselRef.current?.prev(); carouselRef.current?.prev();
}, []); }, []);
const handleNext = useCallback(() => { const handleNext = useCallback(() => {
carouselRef.current?.next(); carouselRef.current?.next();
}, []); }, []);
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",
}} }}>
> {carouselItems.map((item, index) => (
{carouselItems.map((item, index) => ( <div key={index} className="relative h-[600px]">
<div key={index} className="relative h-[600px]"> <div
<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]"
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={{
style={{ backgroundImage: `url(${item.image})`,
backgroundImage: `url(${item.image})`, backfaceVisibility: "hidden",
backfaceVisibility: 'hidden' }}
}} />
/> <div
<div className={`absolute inset-0 bg-gradient-to-r ${item.color} to-transparent opacity-90 mix-blend-overlay transition-opacity duration-500`}
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 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"> </div>
<Title ))}
className="text-white mb-8 text-5xl md:text-6xl xl:text-7xl !leading-tight font-bold tracking-tight" </Carousel>
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>
{/* 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" />
<LeftOutlined className="text-white text-xl" /> </button>
</button> <button
<button onClick={handleNext}
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"
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>
<RightOutlined className="text-white text-xl" /> </div>
</button>
</div>
{/* Stats Container */} {/* Stats Container */}
<div className="absolute -bottom-24 left-1/2 -translate-x-1/2 w-1/2 max-w-6xl px-4"> <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]"> <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) => ( {platformStats.map((stat, index) => (
<div <div
key={index} 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">
<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}
{stat.icon} </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-2xl font-bold bg-gradient-to-r from-gray-800 to-gray-600 bg-clip-text text-transparent mb-1.5"> {stat.value}
{stat.value} </div>
</div> <div className="text-gray-600 font-medium">
<div className="text-gray-600 font-medium"> {stat.label}
{stat.label} </div>
</div> </div>
</div> ))}
))} </div>
</div> </div>
</div> </section>
</section> );
);
}; };
export default HeroSection; export default HeroSection;