91 lines
4.0 KiB
TypeScript
91 lines
4.0 KiB
TypeScript
"use client";
|
|
import { getServicesByCategory } from "@/config/services"
|
|
import ServiceCard from "@/components/service-card"
|
|
import Link from "next/link"
|
|
import { ArrowLeft } from "lucide-react"
|
|
import { Button } from "@/components/ui/button"
|
|
|
|
export default function ServicesPage() {
|
|
const servicesByCategory = getServicesByCategory()
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-br from-gray-50 via-white to-gray-100 text-gray-900">
|
|
{/* Enhanced Glass Header */}
|
|
<header className="sticky top-0 z-50 bg-white/30 backdrop-blur-2xl border-b border-white/40 shadow-lg">
|
|
<div className="container mx-auto px-4 py-6">
|
|
<div className="flex items-center justify-between">
|
|
<Link href="/">
|
|
<Button
|
|
variant="ghost"
|
|
className="glass-button-white bg-white/40 backdrop-blur-xl border border-white/50 hover:bg-white/60 transition-all duration-300"
|
|
>
|
|
<ArrowLeft className="mr-2" size={20} />
|
|
返回首页
|
|
</Button>
|
|
</Link>
|
|
|
|
<div className="flex items-center space-x-4">
|
|
<div className="w-10 h-10 bg-gradient-to-br from-blue-500 via-purple-500 to-pink-500 rounded-xl flex items-center justify-center shadow-lg">
|
|
<span className="text-white font-bold text-lg font-mono">XZ</span>
|
|
</div>
|
|
<span className="text-2xl font-bold bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 bg-clip-text text-transparent font-mono">
|
|
鑫泽焓界
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
{/* Hero Section with Enhanced Glass */}
|
|
<section className="py-20 px-4 relative overflow-hidden">
|
|
{/* Enhanced Background */}
|
|
<div className="absolute inset-0 bg-gradient-to-br from-blue-50/80 via-white/60 to-purple-50/80">
|
|
<div className="absolute inset-0 bg-gradient-to-r from-blue-100/20 via-purple-100/20 to-pink-100/20 animate-pulse"></div>
|
|
</div>
|
|
|
|
{/* Glass Pattern Overlay */}
|
|
<div className="absolute inset-0 opacity-10">
|
|
<div className="glass-pattern"></div>
|
|
</div>
|
|
|
|
<div className="container mx-auto max-w-7xl relative z-10">
|
|
<div className="text-center mb-16">
|
|
{/* Enhanced Glass Title Card */}
|
|
<div className="inline-block glass-card-enhanced bg-white/50 backdrop-blur-2xl rounded-3xl p-8 mb-8 border border-white/60 shadow-2xl">
|
|
<h1 className="text-4xl md:text-6xl font-bold bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 bg-clip-text text-transparent mb-4 font-mono">
|
|
服务列表
|
|
</h1>
|
|
<p className="text-xl text-gray-600 max-w-3xl mx-auto font-mono leading-relaxed">
|
|
提供的技术服务和解决方案
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Services by Category */}
|
|
<div className="space-y-16">
|
|
{Object.entries(servicesByCategory).map(([category, services]) => (
|
|
<div key={category} className="space-y-8">
|
|
{/* Category Header with Glass Effect */}
|
|
<div className="text-center">
|
|
<div className="inline-block glass-card-enhanced bg-white/40 backdrop-blur-xl rounded-2xl px-8 py-4 border border-white/50 shadow-lg">
|
|
<h2 className="text-2xl md:text-3xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent font-mono">
|
|
{category}
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Services Grid */}
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
{services.map((service) => (
|
|
<ServiceCard key={service.id} service={service} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
)
|
|
}
|