add
This commit is contained in:
ditiqi
parent
e44795ebee
commit
cf3e242462
|
|
@ -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;
|
||||
export default HeroSection;
|
||||
|
|
|
|||
Loading…
Reference in New Issue