43 lines
1.7 KiB
TypeScript
43 lines
1.7 KiB
TypeScript
"use client"
|
|
|
|
import { useState, useEffect } from "react"
|
|
|
|
export default function Header() {
|
|
const [isScrolled, setIsScrolled] = useState(false)
|
|
|
|
useEffect(() => {
|
|
const handleScroll = () => {
|
|
setIsScrolled(window.scrollY > 50)
|
|
}
|
|
window.addEventListener("scroll", handleScroll)
|
|
return () => window.removeEventListener("scroll", handleScroll)
|
|
}, [])
|
|
|
|
return (
|
|
<header
|
|
className={`fixed top-0 left-0 right-0 z-50 transition-all duration-500 ${
|
|
isScrolled ? "bg-white/20 backdrop-blur-xl border-b border-white/30 shadow-lg" : "bg-transparent"
|
|
}`}
|
|
>
|
|
<div className="container mx-auto px-4 py-6">
|
|
<div className="flex items-center justify-center">
|
|
{/* Centered Logo */}
|
|
<div className="flex items-center space-x-4 group">
|
|
<div className="relative">
|
|
<div className="w-12 h-12 bg-gradient-to-br from-blue-500 via-purple-500 to-pink-500 rounded-xl flex items-center justify-center shadow-lg group-hover:shadow-xl transition-all duration-500">
|
|
<span className="text-white font-bold text-xl font-mono">XZ</span>
|
|
</div>
|
|
<div className="absolute inset-0 bg-gradient-to-br from-blue-500 via-purple-500 to-pink-500 rounded-xl blur-lg opacity-20 group-hover:opacity-30 transition-opacity duration-500"></div>
|
|
</div>
|
|
<div className="relative">
|
|
<span className="text-3xl font-bold bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 bg-clip-text text-transparent drop-shadow-sm font-mono">
|
|
鑫泽焓界
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
)
|
|
}
|