96 lines
3.6 KiB
TypeScript
96 lines
3.6 KiB
TypeScript
"use client"
|
||
|
||
import { useEffect, useState } from "react"
|
||
|
||
const technologies = [
|
||
"React",
|
||
"Next.js",
|
||
"TypeScript",
|
||
"Node.js",
|
||
"Python",
|
||
"Docker",
|
||
"Kubernetes",
|
||
"AWS",
|
||
"MongoDB",
|
||
"PostgreSQL",
|
||
"Redis",
|
||
"GraphQL",
|
||
"Tailwind CSS",
|
||
"Three.js",
|
||
"WebGL",
|
||
"Microservices",
|
||
"DevOps",
|
||
"CI/CD",
|
||
]
|
||
|
||
export default function TechStackSection() {
|
||
const [currentIndex, setCurrentIndex] = useState(0)
|
||
|
||
useEffect(() => {
|
||
const timer = setInterval(() => {
|
||
setCurrentIndex((prev) => (prev + 1) % technologies.length)
|
||
}, 2000)
|
||
return () => clearInterval(timer)
|
||
}, [])
|
||
|
||
return (
|
||
<section className="py-20 px-4 relative overflow-hidden">
|
||
<div className="container mx-auto max-w-7xl">
|
||
<div className="text-center mb-16">
|
||
<h2 className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 bg-clip-text text-transparent mb-6 drop-shadow-sm font-mono">
|
||
技术栈
|
||
</h2>
|
||
<p className="text-xl text-gray-600 max-w-3xl mx-auto font-mono">始终跟踪最新技术趋势，应用前沿解决方案</p>
|
||
</div>
|
||
|
||
{/* Enhanced Scrolling Tech Tags */}
|
||
<div className="relative h-40 overflow-hidden mb-16">
|
||
<div className="absolute inset-0 flex items-center">
|
||
<div className="flex animate-scroll-smooth space-x-8">
|
||
{[...technologies, ...technologies].map((tech, index) => (
|
||
<div
|
||
key={index}
|
||
className={`flex-shrink-0 px-8 py-4 rounded-2xl border-2 transition-all duration-700 glass-card-white backdrop-blur-xl ${
|
||
index % technologies.length === currentIndex
|
||
? "border-blue-300 bg-white/50 text-blue-600 shadow-lg scale-110"
|
||
: "border-gray-200/50 bg-white/30 text-gray-600 hover:border-blue-200/50 hover:text-blue-600"
|
||
}`}
|
||
>
|
||
<span className="font-mono font-bold whitespace-nowrap text-lg">{tech}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Enhanced Value Propositions */}
|
||
<div className="grid md:grid-cols-4 gap-6">
|
||
{[
|
||
{ title: "技术领先", desc: "始终跟踪最新技术趋势", gradient: "from-blue-400 to-cyan-500" },
|
||
{ title: "质量保障", desc: "严格的代码规范和测试", gradient: "from-purple-400 to-indigo-500" },
|
||
{ title: "快速交付", desc: "敏捷开发模式", gradient: "from-pink-400 to-rose-500" },
|
||
{ title: "持续支持", desc: "长期技术支持和维护", gradient: "from-indigo-400 to-blue-500" },
|
||
].map((item, index) => (
|
||
<div
|
||
key={index}
|
||
className="text-center p-8 rounded-2xl glass-card-white bg-white/40 border border-gray-200/50 hover:border-blue-200/50 transition-all duration-500 hover:-translate-y-2 group backdrop-blur-xl"
|
||
>
|
||
<div
|
||
className={`w-12 h-12 mx-auto mb-4 rounded-xl bg-gradient-to-br ${item.gradient} flex items-center justify-center group-hover:scale-110 transition-transform duration-300 shadow-lg`}
|
||
>
|
||
<div className={`w-6 h-6 rounded-full bg-white/80`}></div>
|
||
</div>
|
||
<h3
|
||
className={`text-lg font-bold mb-2 font-mono bg-gradient-to-r ${item.gradient} bg-clip-text text-transparent`}
|
||
>
|
||
{item.title}
|
||
</h3>
|
||
<p className="text-gray-600 text-sm font-mono">{item.desc}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
)
|
||
}
|