init: 初始化 AssetX 项目仓库
包含 webapp(Next.js 用户端)、webapp-back(Go 后端)、 antdesign(管理后台)、landingpage(营销落地页)、 数据库 SQL 和配置文件。
This commit is contained in:
71
landingpage/components/HeroSection.tsx
Normal file
71
landingpage/components/HeroSection.tsx
Normal file
@@ -0,0 +1,71 @@
|
||||
'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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user