72 lines
2.4 KiB
TypeScript
72 lines
2.4 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import { motion } from 'framer-motion';
|
||
|
|
import HeroTitle from './HeroTitle';
|
||
|
|
import HeroButtons from './HeroButtons';
|
||
|
|
import { useLanguage } from '@/contexts/LanguageContext';
|
||
|
|
|
||
|
|
export default function HeroSection() {
|
||
|
|
const { t } = useLanguage();
|
||
|
|
|
||
|
|
// StatsSection 桌面端高度约 182px
|
||
|
|
const statsHeight = 182;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<section
|
||
|
|
className="relative w-full min-h-[calc(100vh-var(--navbar-height,72px))] md:min-h-[calc(100vh-var(--navbar-height,72px)-182px)]"
|
||
|
|
style={{ overflow: 'hidden' }}
|
||
|
|
>
|
||
|
|
{/* Video background */}
|
||
|
|
<video
|
||
|
|
autoPlay
|
||
|
|
loop
|
||
|
|
muted
|
||
|
|
playsInline
|
||
|
|
className="absolute inset-0 w-full h-full object-cover"
|
||
|
|
style={{
|
||
|
|
zIndex: 0,
|
||
|
|
objectFit: 'cover',
|
||
|
|
objectPosition: 'center center',
|
||
|
|
minWidth: '100%',
|
||
|
|
minHeight: '100%',
|
||
|
|
transform: 'scale(1.3)'
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<source src="https://pub-0b813d5d97b84a06a71fd3d4283fce59.r2.dev/hero-background.mp4" type="video/mp4" />
|
||
|
|
</video>
|
||
|
|
|
||
|
|
<div
|
||
|
|
className="relative flex flex-col items-start justify-center min-h-[calc(100vh-var(--navbar-height,72px))] md:min-h-[calc(100vh-var(--navbar-height,72px)-182px)] px-6 py-20 md:px-[85px] md:py-16"
|
||
|
|
style={{
|
||
|
|
background: 'linear-gradient(to left, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55))',
|
||
|
|
zIndex: 1
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div className="flex flex-col gap-12 md:gap-[88px] w-full max-w-[926px] 2xl:max-w-[1200px] 3xl:max-w-[1500px]">
|
||
|
|
<div className="flex flex-col gap-5">
|
||
|
|
<HeroTitle />
|
||
|
|
<motion.p
|
||
|
|
className="text-base sm:text-xl max-w-[640px] 2xl:max-w-[800px] 3xl:max-w-[1000px]"
|
||
|
|
style={{
|
||
|
|
color: 'rgba(255,255,255,0.65)',
|
||
|
|
fontFamily: 'Inter, sans-serif',
|
||
|
|
lineHeight: '1.625',
|
||
|
|
fontWeight: 400,
|
||
|
|
minHeight: 'calc(3 * 1.625em)',
|
||
|
|
}}
|
||
|
|
initial={{ opacity: 0, y: 16, filter: 'blur(8px)' }}
|
||
|
|
whileInView={{ opacity: 1, y: 0, filter: 'blur(0px)' }}
|
||
|
|
viewport={{ once: true }}
|
||
|
|
transition={{ duration: 0.9, ease: 'easeOut', delay: 0.75 }}
|
||
|
|
>
|
||
|
|
{t('hero.description')}
|
||
|
|
</motion.p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<HeroButtons />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
}
|