84 lines
3.7 KiB
TypeScript
84 lines
3.7 KiB
TypeScript
"use client"
|
|
|
|
import { useEffect, useState } from "react"
|
|
import { Zap, Sparkles } from "lucide-react"
|
|
import { Button } from "@/components/ui/button"
|
|
|
|
export default function HeroSection() {
|
|
const [displayText, setDisplayText] = useState("")
|
|
const fullText = "构建数字未来，连接无限可能"
|
|
|
|
useEffect(() => {
|
|
let index = 0
|
|
const timer = setInterval(() => {
|
|
if (index < fullText.length) {
|
|
setDisplayText(fullText.slice(0, index + 1))
|
|
index++
|
|
} else {
|
|
clearInterval(timer)
|
|
}
|
|
}, 150)
|
|
|
|
return () => clearInterval(timer)
|
|
}, [])
|
|
|
|
return (
|
|
<section className="relative min-h-screen flex items-center justify-center overflow-hidden">
|
|
{/* Soft Background Gradient */}
|
|
<div className="absolute inset-0 bg-gradient-to-br from-blue-50 via-white to-purple-50">
|
|
<div className="absolute inset-0 bg-gradient-to-r from-blue-100/30 via-purple-100/30 to-pink-100/30 animate-pulse"></div>
|
|
</div>
|
|
|
|
{/* Subtle Pattern */}
|
|
<div className="absolute inset-0 opacity-10">
|
|
<div className="soft-pattern"></div>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="relative z-20 text-center px-4 max-w-6xl mx-auto">
|
|
<div className="mb-12">
|
|
{/* Soft glowing orb behind text */}
|
|
<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-gradient-to-r from-blue-200/20 via-purple-200/20 to-pink-200/20 rounded-full blur-3xl animate-pulse"></div>
|
|
|
|
<h1 className="text-4xl md:text-6xl lg:text-8xl font-bold mb-8 relative">
|
|
<span className="bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 bg-clip-text text-transparent drop-shadow-sm font-mono">
|
|
{displayText}
|
|
<span className="animate-ping">|</span>
|
|
</span>
|
|
</h1>
|
|
|
|
<div className="relative mb-12">
|
|
<p className="text-xl md:text-3xl text-gray-600 mb-8 leading-relaxed font-mono">
|
|
<span className="text-blue-600 font-semibold">Web开发</span> |
|
|
<span className="text-purple-600 font-semibold"> 服务器架构</span> |
|
|
<span className="text-pink-600 font-semibold"> 网络解决方案</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-col sm:flex-row gap-6 justify-center items-center">
|
|
<Button
|
|
className="glass-button-white bg-white/40 backdrop-blur-xl border border-white/50 text-gray-800 font-bold px-10 py-4 rounded-2xl shadow-lg hover:shadow-xl hover:-translate-y-2 transition-all duration-500 text-lg font-mono group"
|
|
onClick={() =>
|
|
window.open(
|
|
"mailto:zichen.hao@entalnet.com?subject=项目合作咨询&body=您好，我想了解更多关于项目合作的信息。",
|
|
"_blank",
|
|
)
|
|
}
|
|
>
|
|
<Zap className="mr-3 group-hover:animate-spin" size={24} />
|
|
开始合作
|
|
<Sparkles className="ml-3 group-hover:animate-pulse" size={20} />
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Soft Floating Elements */}
|
|
<div className="absolute top-20 left-10 w-3 h-3 bg-blue-400 rounded-full animate-bounce shadow-lg opacity-60"></div>
|
|
<div className="absolute top-40 right-20 w-4 h-4 bg-purple-400 rounded-full animate-bounce delay-500 shadow-lg opacity-60"></div>
|
|
<div className="absolute bottom-20 left-20 w-2 h-2 bg-pink-400 rounded-full animate-bounce delay-1000 shadow-lg opacity-60"></div>
|
|
<div className="absolute top-60 right-40 w-3 h-3 bg-indigo-400 rounded-full animate-bounce delay-1500 shadow-lg opacity-60"></div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|