42 lines
2.6 KiB
Plaintext
42 lines
2.6 KiB
Plaintext
<section id="home" class="relative min-h-screen flex items-center overflow-hidden bg-dark">
|
|
<div id="hero-carousel-container" class="absolute inset-0 z-0">
|
|
<div class="hero-carousel-slide absolute inset-0 transition-opacity duration-1000 ease-in-out opacity-100">
|
|
<img src="/img/hero-banner-1.webp" alt="数字化解决方案" class="w-full h-full object-cover scale-105">
|
|
</div>
|
|
<div class="hero-carousel-slide absolute inset-0 transition-opacity duration-1000 ease-in-out opacity-0">
|
|
<img src="/img/hero-banner-2.webp" alt="创新科技应用" class="w-full h-full object-cover">
|
|
</div>
|
|
<div class="hero-carousel-slide absolute inset-0 transition-opacity duration-1000 ease-in-out opacity-0">
|
|
<img src="/img/hero-banner-3.webp" alt="智慧城市远景" class="w-full h-full object-cover">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="absolute inset-0 bg-gradient-to-r from-dark/90 via-dark/40 to-transparent z-10"></div>
|
|
<div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/carbon-fibre.png')] opacity-10 z-10"></div>
|
|
|
|
<div class="max-w-7xl mx-auto px-6 lg:px-0 relative z-20 w-full">
|
|
<div class="max-w-3xl lg:text-left text-center">
|
|
<h1 class="text-[clamp(2.2rem,6vw,3rem)] font-black leading-[1.1] text-white mb-8 scroll-animate">
|
|
<span class="text-transparent bg-clip-text bg-gradient-to-r from-primary to-secondary">
|
|
全场景 ‧ 产业数字化转型服务商
|
|
</span>
|
|
</h1>
|
|
<p class="text-lg md:text-xl text-gray-300 font-light mb-12 max-w-xl lg:mx-0 mx-auto leading-relaxed scroll-animate">
|
|
浙江贝凡是专注互联网科技与云服务的创新型企业，致力于利用 <span class="text-white font-medium">AI、大数据、云计算</span> ，为各行业提供核心智能化解决方案。
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="hero-carousel-dots" class="absolute bottom-10 left-1/2 lg:left-0 lg:ml-0 lg:translate-x-0 -translate-x-1/2 z-20 flex space-x-3 lg:max-w-7xl lg:mx-auto lg:px-4 w-full justify-center lg:justify-start">
|
|
<button class="hero-carousel-dot h-1 w-12 bg-white/30 rounded-full transition-all duration-500 overflow-hidden relative">
|
|
<div class="absolute inset-0 bg-primary w-0 dot-progress"></div>
|
|
</button>
|
|
<button class="hero-carousel-dot h-1 w-12 bg-white/30 rounded-full transition-all duration-500 overflow-hidden relative">
|
|
<div class="absolute inset-0 bg-primary w-0 dot-progress"></div>
|
|
</button>
|
|
<button class="hero-carousel-dot h-1 w-12 bg-white/30 rounded-full transition-all duration-500 overflow-hidden relative">
|
|
<div class="absolute inset-0 bg-primary w-0 dot-progress"></div>
|
|
</button>
|
|
</div>
|
|
</section>
|