102 lines
4.8 KiB
TypeScript
102 lines
4.8 KiB
TypeScript
"use client"
|
||
|
||
import Link from "next/link"
|
||
import { ArrowRight } from "lucide-react"
|
||
import { Button } from "@/components/ui/button"
|
||
|
||
const services = [
|
||
{
|
||
title: "Web程序开发",
|
||
description: "前端和后端开发服务，包括响应式网站、Web应用程序和API接口开发。",
|
||
gradient: "from-blue-400 to-cyan-500",
|
||
borderColor: "border-blue-200/50",
|
||
glowColor: "rgba(59,130,246,0.2)",
|
||
},
|
||
{
|
||
title: "服务器后端计算",
|
||
description: "服务器架构设计、数据库管理、后端服务开发和系统优化。",
|
||
gradient: "from-purple-400 to-indigo-500",
|
||
borderColor: "border-purple-200/50",
|
||
glowColor: "rgba(147,51,234,0.2)",
|
||
},
|
||
{
|
||
title: "网络架构搭建",
|
||
description: "网络基础设施规划、网络安全配置和系统集成服务。",
|
||
gradient: "from-pink-400 to-rose-500",
|
||
borderColor: "border-pink-200/50",
|
||
glowColor: "rgba(236,72,153,0.2)",
|
||
},
|
||
]
|
||
|
||
export default function ServicesSection() {
|
||
return (
|
||
<section className="py-20 px-4 relative">
|
||
<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">
|
||
提供Web开发、服务器管理和网络架构相关的技术服务
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid md:grid-cols-3 gap-8 mb-12">
|
||
{services.map((service, index) => (
|
||
<div
|
||
key={index}
|
||
className={`glass-card-enhanced bg-white/50 ${service.borderColor} backdrop-blur-2xl rounded-2xl shadow-lg hover:shadow-2xl hover:-translate-y-3 transition-all duration-700 group overflow-hidden`}
|
||
>
|
||
<div className="p-8 relative">
|
||
{/* Enhanced Background gradient overlay */}
|
||
<div
|
||
className={`absolute inset-0 bg-gradient-to-br ${service.gradient} opacity-5 group-hover:opacity-15 transition-opacity duration-500`}
|
||
></div>
|
||
|
||
{/* Floating Glass Orbs */}
|
||
<div className="absolute top-4 right-4 w-12 h-12 bg-white/20 rounded-full blur-xl group-hover:bg-white/30 transition-all duration-500 animate-float-orb"></div>
|
||
<div
|
||
className="absolute bottom-4 left-4 w-8 h-8 bg-white/10 rounded-full blur-lg group-hover:bg-white/20 transition-all duration-500 animate-float-orb"
|
||
style={{ animationDelay: "2s" }}
|
||
></div>
|
||
|
||
<div className="relative z-10">
|
||
<div className="mb-6">
|
||
{/* Enhanced 纯色背景图标，无图标内容，增强玻璃效果 */}
|
||
<div
|
||
className={`w-16 h-16 rounded-2xl mb-4 transition-all duration-500 group-hover:scale-110 group-hover:rotate-6 bg-gradient-to-br ${service.gradient} shadow-lg relative overflow-hidden`}
|
||
>
|
||
{/* Glass overlay */}
|
||
<div className="absolute inset-0 bg-white/20 backdrop-blur-sm rounded-2xl"></div>
|
||
</div>
|
||
<h3 className="text-2xl font-bold text-gray-800 mb-4 group-hover:bg-gradient-to-r group-hover:from-blue-600 group-hover:to-purple-600 group-hover:bg-clip-text group-hover:text-transparent transition-all duration-500 font-mono">
|
||
{service.title}
|
||
</h3>
|
||
</div>
|
||
<p className="text-gray-600 leading-relaxed font-mono text-sm">{service.description}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* Enhanced CTA to Services Page */}
|
||
<div className="text-center">
|
||
<div className="glass-card-enhanced bg-white/50 backdrop-blur-2xl rounded-2xl p-8 border border-white/50 shadow-lg inline-block">
|
||
<h3 className="text-2xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent mb-4 font-mono">
|
||
更多服务
|
||
</h3>
|
||
<p className="text-gray-600 mb-6 font-mono">查看完整的服务列表</p>
|
||
<Link href="/services">
|
||
<Button className="glass-button-white bg-white/40 backdrop-blur-xl border border-white/50 text-gray-800 font-bold px-8 py-3 rounded-2xl shadow-lg hover:shadow-xl hover:-translate-y-1 transition-all duration-300 font-mono group">
|
||
查看所有服务
|
||
<ArrowRight className="ml-2 group-hover:translate-x-1 transition-transform" size={20} />
|
||
</Button>
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
)
|
||
}
|