refactor: remove service detail modal component
This commit is contained in:
张翔
@@ -1,6 +1,12 @@
|
||||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import { useInView } from 'framer-motion';
|
||||
import { useRef } from 'react';
|
||||
import { COMPANY_INFO, STATS } from '@/lib/constants';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { PageHeader } from '@/components/ui/page-header';
|
||||
import { Lightbulb, Users, Target, Award, MapPin, Mail, Phone } from 'lucide-react';
|
||||
|
||||
export const metadata = {
|
||||
@@ -60,188 +66,216 @@ export default function AboutPage() {
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="pt-32 pb-20">
|
||||
<div className="container-custom">
|
||||
{/* 头部介绍 */}
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="text-center mb-16">
|
||||
<Badge variant="outline" className="mb-4">
|
||||
关于我们
|
||||
</Badge>
|
||||
<h1 className="text-4xl sm:text-5xl font-bold text-black mb-6">
|
||||
为什么我们自称"伙伴"？
|
||||
</h1>
|
||||
<p className="text-lg text-gray-600">
|
||||
{COMPANY_INFO.slogan}
|
||||
</p>
|
||||
</div>
|
||||
const contentRef = useRef(null);
|
||||
const isContentInView = useInView(contentRef, { once: true, margin: '-100px' });
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
<PageHeader
|
||||
badge="关于我们"
|
||||
title="为什么我们自称'伙伴'？"
|
||||
description={COMPANY_INFO.slogan}
|
||||
/>
|
||||
|
||||
<div className="container-wide relative z-10 py-16" ref={contentRef}>
|
||||
<div className="max-w-4xl mx-auto">
|
||||
{/* 品牌故事 */}
|
||||
<div className="prose prose-lg max-w-none mb-16">
|
||||
<div className="bg-gray-50 rounded-2xl p-8 mb-8">
|
||||
<h2 className="text-2xl font-bold text-black mb-6">痛点引入</h2>
|
||||
<p className="text-gray-600 mb-4 leading-relaxed">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isContentInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="prose prose-lg max-w-none mb-16"
|
||||
>
|
||||
<div className="bg-[#FFFBF5] rounded-2xl p-8 mb-8 border border-[#E5E5E5]">
|
||||
<h2 className="text-2xl font-bold text-[#1C1C1C] mb-6">痛点引入</h2>
|
||||
<p className="text-[#5C5C5C] mb-4 leading-relaxed">
|
||||
在数字化转型的路上，企业往往陷入两难——
|
||||
</p>
|
||||
<p className="text-gray-600 mb-4 leading-relaxed">
|
||||
<p className="text-[#5C5C5C] mb-4 leading-relaxed">
|
||||
找咨询公司？他们做完报告就走了，留下一堆看不懂的PPT。
|
||||
</p>
|
||||
<p className="text-gray-600 mb-4 leading-relaxed">
|
||||
<p className="text-[#5C5C5C] mb-4 leading-relaxed">
|
||||
找技术供应商？他们卖完系统就消失了，出了问题只能自己扛。
|
||||
</p>
|
||||
<p className="text-gray-600 mb-6 leading-relaxed">
|
||||
<p className="text-[#5C5C5C] mb-6 leading-relaxed">
|
||||
企业需要的，不是一个高高在上的"专家"，也不是一个做完就跑的"卖家"，而是一个能坐下来、一起想办法的同行者。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-50 rounded-2xl p-8 mb-8">
|
||||
<h2 className="text-2xl font-bold text-black mb-6">睿新的选择</h2>
|
||||
<p className="text-gray-600 mb-6 leading-relaxed">
|
||||
<div className="bg-[#FFFBF5] rounded-2xl p-8 mb-8 border border-[#E5E5E5]">
|
||||
<h2 className="text-2xl font-bold text-[#1C1C1C] mb-6">睿新的选择</h2>
|
||||
<p className="text-[#5C5C5C] mb-6 leading-relaxed">
|
||||
所以我们选择了一条不同的路。
|
||||
</p>
|
||||
|
||||
<div className="mb-6">
|
||||
<h3 className="text-xl font-semibold text-black mb-3">智连未来</h3>
|
||||
<p className="text-gray-600 mb-3 leading-relaxed">
|
||||
<h3 className="text-xl font-semibold text-[#1C1C1C] mb-3">智连未来</h3>
|
||||
<p className="text-[#5C5C5C] mb-3 leading-relaxed">
|
||||
我们坚持对行业趋势的深度研究，不追逐昙花一现的概念。
|
||||
</p>
|
||||
<p className="text-gray-600 mb-3 leading-relaxed">
|
||||
<p className="text-[#5C5C5C] mb-3 leading-relaxed">
|
||||
每一次方案，都源于对您业务场景的洞察；
|
||||
</p>
|
||||
<p className="text-gray-600 leading-relaxed">
|
||||
<p className="text-[#5C5C5C] leading-relaxed">
|
||||
每一次连接，都为了让技术真正服务于您的未来。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold text-black mb-3">成长伙伴</h3>
|
||||
<p className="text-gray-600 mb-3 leading-relaxed">
|
||||
<h3 className="text-xl font-semibold text-[#1C1C1C] mb-3">成长伙伴</h3>
|
||||
<p className="text-[#5C5C5C] mb-3 leading-relaxed">
|
||||
我们不把"项目交付"当作终点。
|
||||
</p>
|
||||
<p className="text-gray-600 mb-3 leading-relaxed">
|
||||
<p className="text-[#5C5C5C] mb-3 leading-relaxed">
|
||||
您的业务增长了吗？您的团队能力提升了吗？
|
||||
</p>
|
||||
<p className="text-gray-600 leading-relaxed">
|
||||
<p className="text-[#5C5C5C] leading-relaxed">
|
||||
您下一次遇到难题时，还会第一个想到我们吗？
|
||||
</p>
|
||||
<p className="text-gray-600 mt-3 leading-relaxed">
|
||||
<p className="text-[#5C5C5C] mt-3 leading-relaxed">
|
||||
这些问题，比"项目是否按时交付"更让我们在意。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-50 rounded-2xl p-8">
|
||||
<h2 className="text-2xl font-bold text-black mb-6">品牌承诺</h2>
|
||||
<p className="text-gray-600 mb-6 leading-relaxed">
|
||||
<div className="bg-[#FFFBF5] rounded-2xl p-8 border border-[#E5E5E5]">
|
||||
<h2 className="text-2xl font-bold text-[#1C1C1C] mb-6">品牌承诺</h2>
|
||||
<p className="text-[#5C5C5C] mb-6 leading-relaxed">
|
||||
我们承诺：
|
||||
</p>
|
||||
<ul className="space-y-3 mb-6">
|
||||
<li className="flex items-start gap-3">
|
||||
<span className="text-green-600 font-bold">✅</span>
|
||||
<span className="text-gray-600">不卖您用不上的技术</span>
|
||||
<span className="text-[#5C5C5C]">不卖您用不上的技术</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-3">
|
||||
<span className="text-green-600 font-bold">✅</span>
|
||||
<span className="text-gray-600">不说不懂业务的术语</span>
|
||||
<span className="text-[#5C5C5C]">不说不懂业务的术语</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-3">
|
||||
<span className="text-green-600 font-bold">✅</span>
|
||||
<span className="text-gray-600">不做路过就忘的"一锤子买卖"</span>
|
||||
<span className="text-[#5C5C5C]">不做路过就忘的"一锤子买卖"</span>
|
||||
</li>
|
||||
</ul>
|
||||
<p className="text-gray-600 leading-relaxed font-medium">
|
||||
<p className="text-[#5C5C5C] leading-relaxed font-medium">
|
||||
我们只做一件事：成为您数字化转型路上，信得过的成长伙伴。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* 数据统计 */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-16">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isContentInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-16"
|
||||
>
|
||||
{STATS.map((stat, idx) => (
|
||||
<Card key={idx} className="text-center">
|
||||
<Card key={idx} className="text-center border-[#E5E5E5]">
|
||||
<CardContent className="pt-6">
|
||||
<div className="text-3xl sm:text-4xl font-bold text-black mb-2">{stat.value}</div>
|
||||
<div className="text-sm text-gray-600">{stat.label}</div>
|
||||
<div className="text-3xl sm:text-4xl font-bold text-[#C41E3A] mb-2">{stat.value}</div>
|
||||
<div className="text-sm text-[#5C5C5C]">{stat.label}</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* 核心价值观 */}
|
||||
<div className="mb-16">
|
||||
<h2 className="text-2xl font-bold text-black mb-6 text-center">核心价值观</h2>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isContentInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.6, delay: 0.3 }}
|
||||
className="mb-16"
|
||||
>
|
||||
<h2 className="text-2xl font-bold text-[#1C1C1C] mb-6 text-center">核心价值观</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{values.map((value, idx) => (
|
||||
<Card key={idx} className="group hover:shadow-md transition-shadow">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="p-3 bg-gray-100 rounded-lg group-hover:bg-black group-hover:text-white transition-colors">
|
||||
<value.icon className="w-6 h-6" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-lg mb-2">{value.title}</h3>
|
||||
<p className="text-gray-600 text-sm leading-relaxed">{value.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<motion.div
|
||||
key={value.title}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isContentInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.5, delay: 0.4 + idx * 0.1 }}
|
||||
className="flex items-start gap-4 p-6 bg-[#FFFBF5] rounded-xl border border-[#E5E5E5] hover:border-[#1C1C1C] transition-all duration-300"
|
||||
>
|
||||
<div className="w-12 h-12 rounded-lg bg-[#C41E3A] flex items-center justify-center flex-shrink-0">
|
||||
<value.icon className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-lg mb-2 text-[#1C1C1C]">{value.title}</h3>
|
||||
<p className="text-[#5C5C5C] text-sm">{value.description}</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* 发展历程 */}
|
||||
<div className="mb-16">
|
||||
<h2 className="text-2xl font-bold text-black mb-6 text-center">发展历程</h2>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isContentInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.6, delay: 0.5 }}
|
||||
className="mb-16"
|
||||
>
|
||||
<h2 className="text-2xl font-bold text-[#1C1C1C] mb-6 text-center">发展历程</h2>
|
||||
<div className="space-y-6">
|
||||
{milestones.map((milestone, idx) => (
|
||||
<div key={idx} className="flex gap-4 md:gap-6">
|
||||
<div className="w-32 md:w-40 flex-shrink-0">
|
||||
<div className="font-semibold text-black text-sm md:text-base">{milestone.date}</div>
|
||||
<motion.div
|
||||
key={milestone.title}
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={isContentInView ? { opacity: 1, x: 0 } : {}}
|
||||
transition={{ duration: 0.5, delay: 0.6 + idx * 0.1 }}
|
||||
className="flex flex-col md:flex-row md:items-start gap-4 p-6 bg-[#FFFBF5] rounded-xl border border-[#E5E5E5]"
|
||||
>
|
||||
<div className="md:w-32 flex-shrink-0">
|
||||
<span className="text-sm font-medium text-[#C41E3A]">{milestone.date}</span>
|
||||
</div>
|
||||
<div className="flex-1 pb-6 border-l-2 border-gray-200 pl-6 relative">
|
||||
<div className="absolute -left-[9px] top-1 w-4 h-4 bg-black rounded-full" />
|
||||
<h3 className="font-semibold text-black mb-1">{milestone.title}</h3>
|
||||
<p className="text-gray-600 text-sm leading-relaxed">{milestone.description}</p>
|
||||
<div className="flex-1">
|
||||
<h4 className="font-semibold text-[#1A1A2E] mb-1">{milestone.title}</h4>
|
||||
<p className="text-[#718096] text-sm">{milestone.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* 联系我们 */}
|
||||
<div className="bg-gray-50 rounded-2xl p-8">
|
||||
<h2 className="text-2xl font-bold text-black mb-6 text-center">联系我们</h2>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isContentInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.6, delay: 0.7 }}
|
||||
className="bg-[#FFFBF5] rounded-2xl p-8 border border-[#E5E5E5]"
|
||||
>
|
||||
<h2 className="text-2xl font-bold text-[#1C1C1C] mb-6 text-center">联系我们</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-white rounded-lg">
|
||||
<MapPin className="w-5 h-5 text-gray-600" />
|
||||
<MapPin className="w-5 h-5 text-[#C41E3A]" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">公司地址</p>
|
||||
<p className="text-sm font-medium">{COMPANY_INFO.address}</p>
|
||||
<p className="text-sm text-[#5C5C5C]">公司地址</p>
|
||||
<p className="text-sm font-medium text-[#1C1C1C]">{COMPANY_INFO.address}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-white rounded-lg">
|
||||
<Mail className="w-5 h-5 text-gray-600" />
|
||||
<Mail className="w-5 h-5 text-[#C41E3A]" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">电子邮箱</p>
|
||||
<p className="text-sm font-medium">{COMPANY_INFO.email}</p>
|
||||
<p className="text-sm text-[#5C5C5C]">电子邮箱</p>
|
||||
<p className="text-sm font-medium text-[#1C1C1C]">{COMPANY_INFO.email}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-white rounded-lg">
|
||||
<Phone className="w-5 h-5 text-gray-600" />
|
||||
<Phone className="w-5 h-5 text-[#C41E3A]" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">联系电话</p>
|
||||
<p className="text-sm font-medium">{COMPANY_INFO.phone}</p>
|
||||
<p className="text-sm text-[#5C5C5C]">联系电话</p>
|
||||
<p className="text-sm font-medium text-[#1C1C1C]">{COMPANY_INFO.phone}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -65,36 +65,27 @@ export function CaseDetailClient({ caseItem }: CaseDetailClientProps) {
|
||||
|
||||
return (
|
||||
<main className="min-h-screen bg-white">
|
||||
<div className="pt-16">
|
||||
<div className="relative h-[40vh] min-h-[300px] bg-gradient-to-br from-[#C41E3A] to-[#8B1429] overflow-hidden">
|
||||
<div className="absolute inset-0 bg-black/20" />
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<Building2 className="w-32 h-32 text-white/10" />
|
||||
</div>
|
||||
|
||||
<div className="absolute top-6 left-6 z-10">
|
||||
<Link href="/cases">
|
||||
<Button variant="ghost" className="text-white hover:bg-white/10">
|
||||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||
返回案例
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="absolute bottom-0 left-0 right-0 p-8 bg-gradient-to-t from-black/60 to-transparent">
|
||||
<div className="container-wide">
|
||||
<Badge className="mb-4 bg-white/20 text-white hover:bg-white/30">
|
||||
{caseItem.industry}
|
||||
</Badge>
|
||||
<h1 className="text-3xl sm:text-4xl lg:text-5xl font-semibold text-white mb-2">
|
||||
{caseItem.title}
|
||||
</h1>
|
||||
<p className="text-lg text-white/80">
|
||||
{caseItem.client}
|
||||
</p>
|
||||
</div>
|
||||
<div className="relative overflow-hidden bg-gradient-to-b from-[#FAFAFA] to-white">
|
||||
<div className="container-wide relative z-10 pt-32 pb-20">
|
||||
<Link href="/cases">
|
||||
<Button variant="ghost" className="text-[#5C5C5C] hover:text-[#C41E3A] hover:bg-[#C41E3A]/10">
|
||||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||
返回案例
|
||||
</Button>
|
||||
</Link>
|
||||
<div className="max-w-4xl mt-8">
|
||||
<Badge className="mb-4 bg-[#C41E3A]/10 text-[#C41E3A] hover:bg-[#C41E3A]/20">
|
||||
{caseItem.industry}
|
||||
</Badge>
|
||||
<h1 className="text-3xl sm:text-4xl lg:text-5xl font-semibold text-[#1C1C1C] mb-2">
|
||||
{caseItem.title}
|
||||
</h1>
|
||||
<p className="text-lg text-[#5C5C5C]">
|
||||
{caseItem.client}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ref={contentRef} className="container-wide py-12 md:py-16">
|
||||
<div
|
||||
|
||||
@@ -1,82 +1,94 @@
|
||||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
import { motion } from 'framer-motion';
|
||||
import { useInView } from 'framer-motion';
|
||||
import { useRef } from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { PageHeader } from '@/components/ui/page-header';
|
||||
import { ArrowRight, Building2, Calendar, TrendingUp } from 'lucide-react';
|
||||
import { CASES } from '@/lib/constants';
|
||||
|
||||
export default function CasesPage() {
|
||||
const contentRef = useRef(null);
|
||||
const isContentInView = useInView(contentRef, { once: true, margin: '-100px' });
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
<div className="bg-gradient-to-br from-[#C41E3A] to-[#1C1C1C] py-20">
|
||||
<div className="container-wide">
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-white mb-6 text-center">
|
||||
与谁同行，决定能走多远
|
||||
</h1>
|
||||
<p className="text-xl text-white/90 text-center max-w-3xl mx-auto">
|
||||
我们与优秀的企业同行，共同成长，共创未来
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<PageHeader
|
||||
title="与谁同行，决定能走多远"
|
||||
description="我们与优秀的企业同行，共同成长，共创未来"
|
||||
/>
|
||||
|
||||
<div className="container-wide py-16">
|
||||
<div className="container-wide relative z-10 py-16" ref={contentRef}>
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
{CASES.map((caseItem, index) => (
|
||||
<Link
|
||||
<motion.div
|
||||
key={caseItem.id}
|
||||
href={`/cases/${caseItem.id}`}
|
||||
className="group bg-white rounded-2xl border border-[#E5E5E5] overflow-hidden hover:shadow-xl transition-all duration-300"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isContentInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.5, delay: index * 0.1 }}
|
||||
>
|
||||
<div className="relative h-48 bg-gradient-to-br from-[#F5F5F5] to-[#E5E5E5] overflow-hidden">
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<Building2 className="w-24 h-24 text-[#C41E3A]/20 group-hover:scale-110 transition-transform duration-300" />
|
||||
</div>
|
||||
<div className="absolute top-4 right-4">
|
||||
<Badge className="bg-white/90 text-[#1C1C1C] hover:bg-white">
|
||||
{caseItem.industry}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-6">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<Building2 className="w-5 h-5 text-[#C41E3A]" />
|
||||
<span className="font-semibold text-[#1C1C1C]">{caseItem.client}</span>
|
||||
<Link
|
||||
href={`/cases/${caseItem.id}`}
|
||||
className="group bg-white rounded-2xl border border-[#E5E5E5] overflow-hidden hover:shadow-xl transition-all duration-300 block"
|
||||
>
|
||||
<div className="relative h-48 bg-gradient-to-br from-[#F5F5F5] to-[#E5E5E5] overflow-hidden">
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<Building2 className="w-24 h-24 text-[#C41E3A]/20 group-hover:scale-110 transition-transform duration-300" />
|
||||
</div>
|
||||
<div className="absolute top-4 right-4">
|
||||
<Badge className="bg-white/90 text-[#1C1C1C] hover:bg-white">
|
||||
{caseItem.industry}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 className="text-xl font-bold text-[#1C1C1C] mb-3 group-hover:text-[#C41E3A] transition-colors">
|
||||
{caseItem.title}
|
||||
</h3>
|
||||
<div className="p-6">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<Building2 className="w-5 h-5 text-[#C41E3A]" />
|
||||
<span className="font-semibold text-[#1C1C1C]">{caseItem.client}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-2 mb-4">
|
||||
<Badge variant="secondary" className="flex items-center gap-1">
|
||||
<Calendar className="w-3 h-3" />
|
||||
3年合作
|
||||
</Badge>
|
||||
<Badge variant="secondary" className="flex items-center gap-1">
|
||||
<TrendingUp className="w-3 h-3" />
|
||||
数字化转型
|
||||
</Badge>
|
||||
<h3 className="text-xl font-bold text-[#1C1C1C] mb-3 group-hover:text-[#C41E3A] transition-colors">
|
||||
{caseItem.title}
|
||||
</h3>
|
||||
|
||||
<div className="flex flex-wrap gap-2 mb-4">
|
||||
<Badge variant="secondary" className="flex items-center gap-1">
|
||||
<Calendar className="w-3 h-3" />
|
||||
3年合作
|
||||
</Badge>
|
||||
<Badge variant="secondary" className="flex items-center gap-1">
|
||||
<TrendingUp className="w-3 h-3" />
|
||||
数字化转型
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<p className="text-[#5C5C5C] text-sm line-clamp-2 mb-4">
|
||||
{caseItem.description}
|
||||
</p>
|
||||
|
||||
<div className="flex items-center text-[#C41E3A] font-medium group-hover:translate-x-2 transition-transform">
|
||||
查看详情
|
||||
<ArrowRight className="w-4 h-4 ml-2" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-[#5C5C5C] text-sm line-clamp-2 mb-4">
|
||||
{caseItem.description}
|
||||
</p>
|
||||
|
||||
<div className="flex items-center text-[#C41E3A] font-medium group-hover:translate-x-2 transition-transform">
|
||||
查看详情
|
||||
<ArrowRight className="w-4 h-4 ml-2" />
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</Link>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-[#F5F5F5] py-16">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isContentInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.6, delay: 0.4 }}
|
||||
className="bg-[#F5F5F5] py-16"
|
||||
>
|
||||
<div className="container-wide text-center">
|
||||
<h2 className="text-3xl font-bold text-[#1C1C1C] mb-6">
|
||||
准备开始您的数字化转型之旅？
|
||||
@@ -112,7 +124,7 @@ export default function CasesPage() {
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,17 +1,22 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useState, useRef } from 'react';
|
||||
import { useInView } from 'framer-motion';
|
||||
import { motion } from 'framer-motion';
|
||||
import { COMPANY_INFO } from '@/lib/constants';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { PageHeader } from '@/components/ui/page-header';
|
||||
import { Mail, Phone, MapPin, Send, Loader2 } from 'lucide-react';
|
||||
|
||||
export default function ContactPage() {
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [isSubmitted, setIsSubmitted] = useState(false);
|
||||
const contentRef = useRef(null);
|
||||
const isContentInView = useInView(contentRef, { once: true, margin: '-100px' });
|
||||
|
||||
async function handleSubmit(_formData: FormData) {
|
||||
setIsSubmitting(true);
|
||||
@@ -23,75 +28,74 @@ export default function ContactPage() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="pt-32 pb-20">
|
||||
<div className="container-custom">
|
||||
<div className="text-center max-w-3xl mx-auto mb-16">
|
||||
<Badge variant="outline" className="mb-4">
|
||||
联系我们
|
||||
</Badge>
|
||||
<h1 className="text-4xl sm:text-5xl font-bold text-black mb-6">
|
||||
与我们取得联系
|
||||
</h1>
|
||||
<p className="text-lg text-gray-600">
|
||||
无论您有任何问题或合作意向，我们都很乐意与您交流
|
||||
</p>
|
||||
</div>
|
||||
<div className="min-h-screen bg-white">
|
||||
<PageHeader
|
||||
badge="联系我们"
|
||||
title="与我们取得联系"
|
||||
description="无论您有任何问题或合作意向，我们都很乐意与您交流"
|
||||
/>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 max-w-6xl mx-auto">
|
||||
<div className="container-wide relative z-10 py-16" ref={contentRef}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isContentInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="grid grid-cols-1 lg:grid-cols-2 gap-12 max-w-6xl mx-auto"
|
||||
>
|
||||
{/* Contact Info */}
|
||||
<div className="space-y-8">
|
||||
<Card>
|
||||
<Card className="border-[#E5E5E5]">
|
||||
<CardHeader>
|
||||
<CardTitle>联系方式</CardTitle>
|
||||
<CardTitle className="text-[#1C1C1C]">联系方式</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="w-10 h-10 bg-black rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<div className="w-10 h-10 bg-[#C41E3A] rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<MapPin className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-black">公司地址</h3>
|
||||
<p className="text-gray-600">{COMPANY_INFO.address}</p>
|
||||
<h3 className="font-semibold text-[#1C1C1C]">公司地址</h3>
|
||||
<p className="text-[#5C5C5C]">{COMPANY_INFO.address}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="w-10 h-10 bg-black rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<div className="w-10 h-10 bg-[#C41E3A] rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<Phone className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-black">联系电话</h3>
|
||||
<p className="text-gray-600">{COMPANY_INFO.phone}</p>
|
||||
<h3 className="font-semibold text-[#1C1C1C]">联系电话</h3>
|
||||
<p className="text-[#5C5C5C]">{COMPANY_INFO.phone}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="w-10 h-10 bg-black rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<div className="w-10 h-10 bg-[#C41E3A] rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<Mail className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-black">电子邮箱</h3>
|
||||
<p className="text-gray-600">{COMPANY_INFO.email}</p>
|
||||
<h3 className="font-semibold text-[#1C1C1C]">电子邮箱</h3>
|
||||
<p className="text-[#5C5C5C]">{COMPANY_INFO.email}</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<Card className="border-[#E5E5E5]">
|
||||
<CardHeader>
|
||||
<CardTitle>工作时间</CardTitle>
|
||||
<CardTitle className="text-[#1C1C1C]">工作时间</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-600">周一至周五</span>
|
||||
<span className="text-black font-medium">9:00 - 18:00</span>
|
||||
<span className="text-[#5C5C5C]">周一至周五</span>
|
||||
<span className="text-[#1C1C1C] font-medium">9:00 - 18:00</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-600">周六</span>
|
||||
<span className="text-black font-medium">9:00 - 12:00</span>
|
||||
<span className="text-[#5C5C5C]">周六</span>
|
||||
<span className="text-[#1C1C1C] font-medium">9:00 - 12:00</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-600">周日</span>
|
||||
<span className="text-gray-400">休息</span>
|
||||
<span className="text-[#5C5C5C]">周日</span>
|
||||
<span className="text-[#8C8C8C]">休息</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
@@ -99,98 +103,108 @@ export default function ContactPage() {
|
||||
</div>
|
||||
|
||||
{/* Contact Form */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>发送消息</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{isSubmitted ? (
|
||||
<div className="text-center py-12">
|
||||
<div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<Send className="w-8 h-8 text-green-600" />
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isContentInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
>
|
||||
<Card className="border-[#E5E5E5]">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-[#1C1C1C]">发送消息</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{isSubmitted ? (
|
||||
<div className="text-center py-12">
|
||||
<div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<Send className="w-8 h-8 text-green-600" />
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-[#1C1C1C] mb-2">消息已发送</h3>
|
||||
<p className="text-[#5C5C5C]">感谢您的留言，我们会尽快与您联系！</p>
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-black mb-2">消息已发送</h3>
|
||||
<p className="text-gray-600">感谢您的留言，我们会尽快与您联系！</p>
|
||||
</div>
|
||||
) : (
|
||||
<form action={handleSubmit} className="space-y-6">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
) : (
|
||||
<form action={handleSubmit} className="space-y-6">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label htmlFor="name" className="block text-sm font-medium text-[#1C1C1C] mb-2">
|
||||
姓名 *
|
||||
</label>
|
||||
<Input
|
||||
id="name"
|
||||
name="name"
|
||||
placeholder="请输入您的姓名"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="phone" className="block text-sm font-medium text-[#1C1C1C] mb-2">
|
||||
电话
|
||||
</label>
|
||||
<Input
|
||||
id="phone"
|
||||
name="phone"
|
||||
type="tel"
|
||||
placeholder="请输入您的电话"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-2">
|
||||
姓名 *
|
||||
<label htmlFor="email" className="block text-sm font-medium text-[#1C1C1C] mb-2">
|
||||
邮箱 *
|
||||
</label>
|
||||
<Input
|
||||
id="name"
|
||||
name="name"
|
||||
placeholder="请输入您的姓名"
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
placeholder="请输入您的邮箱"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="phone" className="block text-sm font-medium text-gray-700 mb-2">
|
||||
电话
|
||||
<label htmlFor="subject" className="block text-sm font-medium text-[#1C1C1C] mb-2">
|
||||
主题 *
|
||||
</label>
|
||||
<Input
|
||||
id="phone"
|
||||
name="phone"
|
||||
type="tel"
|
||||
placeholder="请输入您的电话"
|
||||
id="subject"
|
||||
name="subject"
|
||||
placeholder="请输入消息主题"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-2">
|
||||
邮箱 *
|
||||
</label>
|
||||
<Input
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
placeholder="请输入您的邮箱"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="subject" className="block text-sm font-medium text-gray-700 mb-2">
|
||||
主题 *
|
||||
</label>
|
||||
<Input
|
||||
id="subject"
|
||||
name="subject"
|
||||
placeholder="请输入消息主题"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="message" className="block text-sm font-medium text-gray-700 mb-2">
|
||||
消息内容 *
|
||||
</label>
|
||||
<Textarea
|
||||
id="message"
|
||||
name="message"
|
||||
placeholder="请输入您想要咨询的内容"
|
||||
rows={5}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<Button type="submit" className="w-full" disabled={isSubmitting}>
|
||||
{isSubmitting ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
发送中...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Send className="mr-2 h-4 w-4" />
|
||||
发送消息
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</form>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="message" className="block text-sm font-medium text-[#1C1C1C] mb-2">
|
||||
消息内容 *
|
||||
</label>
|
||||
<Textarea
|
||||
id="message"
|
||||
name="message"
|
||||
placeholder="请输入您想要咨询的内容"
|
||||
rows={5}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full bg-[#C41E3A] hover:bg-[#A01830] text-white"
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
发送中...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Send className="mr-2 h-4 w-4" />
|
||||
发送消息
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</form>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,26 +1,32 @@
|
||||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import { useInView } from 'framer-motion';
|
||||
import { useRef } from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { ArrowRight, Lightbulb, Cpu, Users, Calendar, CheckCircle2, TrendingUp, Code, FileText } from 'lucide-react';
|
||||
import { PageHeader } from '@/components/ui/page-header';
|
||||
import { ArrowRight, Lightbulb, Cpu, Users, CheckCircle2 } from 'lucide-react';
|
||||
|
||||
export default function SolutionsPage() {
|
||||
const contentRef = useRef(null);
|
||||
const isContentInView = useInView(contentRef, { once: true, margin: '-100px' });
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
<div className="bg-gradient-to-br from-[#C41E3A] to-[#1C1C1C] py-20">
|
||||
<div className="container-wide">
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-white mb-6 text-center">
|
||||
三种角色，一种身份——您的成长伙伴
|
||||
</h1>
|
||||
<p className="text-xl text-white/90 text-center max-w-3xl mx-auto">
|
||||
我们以伙伴的身份，陪您走过数字化转型的每一步
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<PageHeader
|
||||
title="三种角色，一种身份——您的成长伙伴"
|
||||
description="我们以伙伴的身份，陪您走过数字化转型的每一步"
|
||||
/>
|
||||
|
||||
<div className="container-wide py-16">
|
||||
<div className="container-wide relative z-10 py-16" ref={contentRef}>
|
||||
<div className="max-w-6xl mx-auto space-y-24">
|
||||
|
||||
<section className="bg-gradient-to-br from-[#FFFBF5] to-white rounded-2xl p-12 border border-[#C41E3A]/20">
|
||||
<motion.section
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isContentInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="bg-gradient-to-br from-[#FFFBF5] to-white rounded-2xl p-12 border border-[#C41E3A]/20"
|
||||
>
|
||||
<div className="flex items-start gap-6 mb-8">
|
||||
<div className="w-16 h-16 bg-[#C41E3A] rounded-2xl flex items-center justify-center flex-shrink-0">
|
||||
<Lightbulb className="w-8 h-8 text-white" />
|
||||
@@ -83,9 +89,14 @@ export default function SolutionsPage() {
|
||||
<ArrowRight className="ml-2 w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
</motion.section>
|
||||
|
||||
<section className="bg-gradient-to-br from-[#F5F7FA] to-white rounded-2xl p-12 border border-[#4F46E5]/20">
|
||||
<motion.section
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isContentInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
className="bg-gradient-to-br from-[#F5F7FA] to-white rounded-2xl p-12 border border-[#4F46E5]/20"
|
||||
>
|
||||
<div className="flex items-start gap-6 mb-8">
|
||||
<div className="w-16 h-16 bg-[#4F46E5] rounded-2xl flex items-center justify-center flex-shrink-0">
|
||||
<Cpu className="w-8 h-8 text-white" />
|
||||
@@ -149,9 +160,14 @@ export default function SolutionsPage() {
|
||||
<ArrowRight className="ml-2 w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
</motion.section>
|
||||
|
||||
<section className="bg-gradient-to-br from-[#FFFBF5] to-white rounded-2xl p-12 border border-[#C41E3A]/20">
|
||||
<motion.section
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isContentInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.6, delay: 0.4 }}
|
||||
className="bg-gradient-to-br from-[#FFFBF5] to-white rounded-2xl p-12 border border-[#C41E3A]/20"
|
||||
>
|
||||
<div className="flex items-start gap-6 mb-8">
|
||||
<div className="w-16 h-16 bg-[#C41E3A] rounded-2xl flex items-center justify-center flex-shrink-0">
|
||||
<Users className="w-8 h-8 text-white" />
|
||||
@@ -214,12 +230,17 @@ export default function SolutionsPage() {
|
||||
<ArrowRight className="ml-2 w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
</motion.section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-[#F5F5F5] py-16">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isContentInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.6, delay: 0.6 }}
|
||||
className="bg-[#F5F5F5] py-16"
|
||||
>
|
||||
<div className="container-wide text-center">
|
||||
<h2 className="text-3xl font-bold text-[#1C1C1C] mb-6">
|
||||
准备开始您的数字化转型之旅？
|
||||
@@ -255,7 +276,7 @@ export default function SolutionsPage() {
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,131 @@
|
||||
'use client';
|
||||
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { PageHeader } from '@/components/ui/page-header';
|
||||
import { ArrowLeft, Calendar, Share2 } from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
import { motion } from 'framer-motion';
|
||||
import { useInView } from 'framer-motion';
|
||||
import { useRef } from 'react';
|
||||
import { NEWS } from '@/lib/constants';
|
||||
|
||||
interface NewsItem {
|
||||
id: string;
|
||||
title: string;
|
||||
category: string;
|
||||
date: string;
|
||||
excerpt: string;
|
||||
content: string;
|
||||
}
|
||||
|
||||
interface NewsDetailClientProps {
|
||||
news: NewsItem;
|
||||
}
|
||||
|
||||
export function NewsDetailClient({ news }: NewsDetailClientProps) {
|
||||
const contentRef = useRef(null);
|
||||
const isContentInView = useInView(contentRef, { once: true, margin: '-100px' });
|
||||
|
||||
const relatedNews = NEWS
|
||||
.filter((n) => n.id !== news.id && n.category === news.category)
|
||||
.slice(0, 3);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
<div className="relative overflow-hidden bg-gradient-to-b from-[#FAFAFA] to-white">
|
||||
<div className="container-wide relative z-10 pt-32 pb-20">
|
||||
<Link
|
||||
href="/news"
|
||||
className="inline-flex items-center text-[#5C5C5C] hover:text-[#C41E3A] transition-colors mb-6"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||
返回新闻列表
|
||||
</Link>
|
||||
<div className="max-w-4xl">
|
||||
<div className="inline-block px-4 py-2 bg-[#C41E3A]/10 rounded-full text-[#C41E3A] text-sm mb-6">
|
||||
{news.category}
|
||||
</div>
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-6">
|
||||
{news.title}
|
||||
</h1>
|
||||
<div className="flex items-center gap-6 text-[#5C5C5C]">
|
||||
<div className="flex items-center gap-2">
|
||||
<Calendar className="w-5 h-5" />
|
||||
{news.date}
|
||||
</div>
|
||||
<button className="flex items-center gap-2 hover:text-[#C41E3A] transition-colors">
|
||||
<Share2 className="w-5 h-5" />
|
||||
分享
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="container-wide relative z-10 py-16" ref={contentRef}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isContentInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="max-w-4xl"
|
||||
>
|
||||
<article className="prose prose-lg max-w-none">
|
||||
<div className="aspect-video bg-gradient-to-br from-[#C41E3A]/10 to-[#1C1C1C]/10 rounded-lg mb-8 flex items-center justify-center">
|
||||
<span className="text-6xl">📰</span>
|
||||
</div>
|
||||
|
||||
<p className="text-xl text-[#5C5C5C] leading-relaxed mb-8 border-l-4 border-[#C41E3A] pl-6">
|
||||
{news.excerpt}
|
||||
</p>
|
||||
|
||||
<div className="text-[#1C1C1C] leading-relaxed whitespace-pre-line">
|
||||
{news.content}
|
||||
</div>
|
||||
</article>
|
||||
|
||||
{relatedNews.length > 0 && (
|
||||
<div className="mt-16 pt-16 border-t border-[#E5E5E5]">
|
||||
<h2 className="text-2xl font-bold text-[#1C1C1C] mb-8">
|
||||
相关新闻
|
||||
</h2>
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
{relatedNews.map((related) => (
|
||||
<Link key={related.id} href={`/news/${related.id}`}>
|
||||
<div className="group cursor-pointer">
|
||||
<div className="aspect-video bg-gradient-to-br from-[#C41E3A]/10 to-[#1C1C1C]/10 rounded-lg mb-4 flex items-center justify-center group-hover:shadow-lg transition-shadow">
|
||||
<span className="text-4xl">📰</span>
|
||||
</div>
|
||||
<Badge variant="secondary" className="mb-2">
|
||||
{related.category}
|
||||
</Badge>
|
||||
<h3 className="text-lg font-semibold text-[#1C1C1C] mb-2 line-clamp-2 group-hover:text-[#C41E3A] transition-colors">
|
||||
{related.title}
|
||||
</h3>
|
||||
<p className="text-sm text-[#5C5C5C] line-clamp-2">
|
||||
{related.excerpt}
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mt-16 flex justify-center gap-4">
|
||||
<Button variant="outline" size="lg" asChild>
|
||||
<Link href="/news">
|
||||
返回新闻列表
|
||||
</Link>
|
||||
</Button>
|
||||
<Button size="lg" className="bg-[#C41E3A] hover:bg-[#A01830] text-white" asChild>
|
||||
<Link href="/#contact">
|
||||
联系我们
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,9 +1,6 @@
|
||||
import { notFound } from 'next/navigation';
|
||||
import { NEWS } from '@/lib/constants';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { ArrowLeft, Calendar, Share2 } from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
import { NewsDetailClient } from './NewsDetailClient';
|
||||
|
||||
export async function generateStaticParams() {
|
||||
return NEWS.map((news) => ({
|
||||
@@ -35,100 +32,5 @@ export default async function NewsDetailPage({ params }: { params: Promise<{ slu
|
||||
notFound();
|
||||
}
|
||||
|
||||
const relatedNews = NEWS
|
||||
.filter((n) => n.id !== news.id && n.category === news.category)
|
||||
.slice(0, 3);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
<div className="bg-gradient-to-br from-[#C41E3A] to-[#1C1C1C] py-20">
|
||||
<div className="container-wide">
|
||||
<Link
|
||||
href="/news"
|
||||
className="inline-flex items-center text-white/80 hover:text-white transition-colors mb-8"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||
返回新闻列表
|
||||
</Link>
|
||||
<div className="max-w-4xl">
|
||||
<div className="inline-block px-4 py-2 bg-white/10 backdrop-blur-sm rounded-full text-white text-sm mb-6">
|
||||
{news.category}
|
||||
</div>
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-white mb-6">
|
||||
{news.title}
|
||||
</h1>
|
||||
<div className="flex items-center gap-6 text-white/90">
|
||||
<div className="flex items-center gap-2">
|
||||
<Calendar className="w-5 h-5" />
|
||||
{news.date}
|
||||
</div>
|
||||
<button className="flex items-center gap-2 hover:text-white transition-colors">
|
||||
<Share2 className="w-5 h-5" />
|
||||
分享
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="container-wide py-16">
|
||||
<div className="max-w-4xl">
|
||||
<article className="prose prose-lg max-w-none">
|
||||
<div className="aspect-video bg-gradient-to-br from-[#C41E3A]/10 to-[#1C1C1C]/10 rounded-lg mb-8 flex items-center justify-center">
|
||||
<span className="text-6xl">📰</span>
|
||||
</div>
|
||||
|
||||
<p className="text-xl text-[#5C5C5C] leading-relaxed mb-8 border-l-4 border-[#C41E3A] pl-6">
|
||||
{news.excerpt}
|
||||
</p>
|
||||
|
||||
<div className="text-[#1C1C1C] leading-relaxed whitespace-pre-line">
|
||||
{news.content}
|
||||
</div>
|
||||
</article>
|
||||
|
||||
{relatedNews.length > 0 && (
|
||||
<div className="mt-16 pt-16 border-t border-gray-200">
|
||||
<h2 className="text-2xl font-bold text-[#1C1C1C] mb-8">
|
||||
相关新闻
|
||||
</h2>
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
{relatedNews.map((related) => (
|
||||
<Link key={related.id} href={`/news/${related.id}`}>
|
||||
<div className="group cursor-pointer">
|
||||
<div className="aspect-video bg-gradient-to-br from-[#C41E3A]/10 to-[#1C1C1C]/10 rounded-lg mb-4 flex items-center justify-center group-hover:shadow-lg transition-shadow">
|
||||
<span className="text-4xl">📰</span>
|
||||
</div>
|
||||
<Badge variant="secondary" className="mb-2">
|
||||
{related.category}
|
||||
</Badge>
|
||||
<h3 className="text-lg font-semibold text-[#1C1C1C] mb-2 line-clamp-2 group-hover:text-[#C41E3A] transition-colors">
|
||||
{related.title}
|
||||
</h3>
|
||||
<p className="text-sm text-[#5C5C5C] line-clamp-2">
|
||||
{related.excerpt}
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mt-16 flex justify-center gap-4">
|
||||
<Button variant="outline" size="lg" asChild>
|
||||
<Link href="/news">
|
||||
返回新闻列表
|
||||
</Link>
|
||||
</Button>
|
||||
<Button size="lg" className="bg-[#C41E3A] hover:bg-[#A01830] text-white" asChild>
|
||||
<Link href="/#contact">
|
||||
联系我们
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
return <NewsDetailClient news={news} />;
|
||||
}
|
||||
|
||||
+20
-17
@@ -1,11 +1,13 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useMemo } from 'react';
|
||||
import { useState, useMemo, useRef } from 'react';
|
||||
import { useInView } from 'framer-motion';
|
||||
import { NEWS } from '@/lib/constants';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { PageHeader } from '@/components/ui/page-header';
|
||||
import { Search, Calendar, ArrowRight, Filter } from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
import { motion } from 'framer-motion';
|
||||
@@ -15,6 +17,8 @@ const categories = ['全部', '公司新闻', '产品发布', '合作动态', '
|
||||
export default function NewsListPage() {
|
||||
const [selectedCategory, setSelectedCategory] = useState('全部');
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const contentRef = useRef(null);
|
||||
const isContentInView = useInView(contentRef, { once: true, margin: '-100px' });
|
||||
|
||||
const filteredNews = useMemo(() => {
|
||||
return NEWS.filter((news) => {
|
||||
@@ -27,20 +31,19 @@ export default function NewsListPage() {
|
||||
}, [selectedCategory, searchQuery]);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[#F5F7FA]">
|
||||
<div className="bg-gradient-to-br from-[#C41E3A] to-[#1C1C1C] py-20">
|
||||
<div className="container-wide">
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-white mb-4">
|
||||
新闻动态
|
||||
</h1>
|
||||
<p className="text-xl text-white/90 max-w-2xl">
|
||||
了解睿新致远最新动态，把握行业发展脉搏
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="min-h-screen bg-white">
|
||||
<PageHeader
|
||||
title="新闻动态"
|
||||
description="了解睿新致远最新动态，把握行业发展脉搏"
|
||||
/>
|
||||
|
||||
<div className="container-wide py-12">
|
||||
<div className="mb-8 space-y-4">
|
||||
<div className="container-wide relative z-10 py-12" ref={contentRef}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isContentInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="mb-8 space-y-4"
|
||||
>
|
||||
<div className="flex flex-col md:flex-row gap-4 items-start md:items-center">
|
||||
<div className="flex items-center gap-2 text-[#1C1C1C]">
|
||||
<Filter className="w-5 h-5" />
|
||||
@@ -74,7 +77,7 @@ export default function NewsListPage() {
|
||||
className="pl-10"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{filteredNews.length === 0 ? (
|
||||
<div className="text-center py-20">
|
||||
@@ -86,8 +89,8 @@ export default function NewsListPage() {
|
||||
<motion.div
|
||||
key={news.id}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, delay: index * 0.1 }}
|
||||
animate={isContentInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.5, delay: 0.2 + index * 0.1 }}
|
||||
>
|
||||
<Link href={`/news/${news.id}`}>
|
||||
<Card className="h-full hover:shadow-lg transition-shadow cursor-pointer border-[#E5E5E5] hover:border-[#C41E3A]">
|
||||
|
||||
@@ -36,30 +36,30 @@ export default async function ProductDetailPage({ params }: { params: Promise<{
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
<div className="bg-gradient-to-br from-[#C41E3A] to-[#1C1C1C] py-20">
|
||||
<div className="container-wide">
|
||||
<div className="relative overflow-hidden bg-gradient-to-b from-[#FAFAFA] to-white">
|
||||
<div className="container-wide relative z-10 pt-32 pb-20">
|
||||
<Link
|
||||
href="/#products"
|
||||
className="inline-flex items-center text-white/80 hover:text-white transition-colors mb-8"
|
||||
className="inline-flex items-center text-[#5C5C5C] hover:text-[#C41E3A] transition-colors mb-6"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||
返回产品列表
|
||||
</Link>
|
||||
<div className="max-w-4xl">
|
||||
<div className="inline-block px-4 py-2 bg-white/10 backdrop-blur-sm rounded-full text-white text-sm mb-6">
|
||||
<div className="inline-block px-4 py-2 bg-[#C41E3A]/10 rounded-full text-[#C41E3A] text-sm mb-6">
|
||||
{product.category}
|
||||
</div>
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-white mb-6">
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-6">
|
||||
{product.title}
|
||||
</h1>
|
||||
<p className="text-xl text-white/90 leading-relaxed">
|
||||
<p className="text-xl text-[#5C5C5C] leading-relaxed">
|
||||
{product.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="container-wide py-16">
|
||||
<div className="container-wide relative z-10 py-16">
|
||||
<div className="max-w-4xl">
|
||||
<section className="mb-16">
|
||||
<h2 className="text-3xl font-bold text-[#1C1C1C] mb-6">产品概述</h2>
|
||||
@@ -214,7 +214,7 @@ export default async function ProductDetailPage({ params }: { params: Promise<{
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="flex justify-center gap-4 pt-8 border-t border-gray-200">
|
||||
<div className="flex justify-center gap-4 pt-8 border-t border-[#E5E5E5]">
|
||||
<Button variant="outline" size="lg" asChild>
|
||||
<Link href="/#contact">
|
||||
联系我们
|
||||
|
||||
@@ -1,173 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { SERVICES } from '@/lib/constants';
|
||||
import { X, CheckCircle2, ArrowRight, Sparkles, Target, Zap, Shield, Code, Cloud, BarChart3 } from 'lucide-react';
|
||||
import { useState } from 'react';
|
||||
|
||||
interface ServiceDetailModalProps {
|
||||
serviceId: string;
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
}
|
||||
|
||||
const iconMap = {
|
||||
Code,
|
||||
Cloud,
|
||||
BarChart3,
|
||||
Shield,
|
||||
};
|
||||
|
||||
export function ServiceDetailModal({ serviceId, open, onOpenChange }: ServiceDetailModalProps) {
|
||||
const [activeTab, setActiveTab] = useState<'features' | 'benefits' | 'process'>('features');
|
||||
const service = SERVICES.find((s) => s.id === serviceId);
|
||||
const IconComponent = service ? iconMap[service.icon as keyof typeof iconMap] : Code;
|
||||
|
||||
if (!service) return null;
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto p-0">
|
||||
<div className="relative">
|
||||
<button
|
||||
onClick={() => onOpenChange(false)}
|
||||
className="absolute right-4 top-4 z-10 p-2 rounded-full bg-white/80 hover:bg-white transition-colors shadow-lg"
|
||||
>
|
||||
<X className="w-5 h-5 text-gray-600" />
|
||||
</button>
|
||||
|
||||
<div className="bg-gradient-to-br from-[#C41E3A] to-[#1C1C1C] p-8 text-white">
|
||||
<div className="flex items-start gap-4 mb-4">
|
||||
<div className="w-16 h-16 bg-white/10 backdrop-blur-sm rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<IconComponent className="w-8 h-8" />
|
||||
</div>
|
||||
<div>
|
||||
<DialogTitle className="text-3xl font-bold mb-2">{service.title}</DialogTitle>
|
||||
<p className="text-white/80 text-lg">{service.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-8">
|
||||
<div className="mb-8">
|
||||
<h3 className="text-xl font-semibold text-[#1C1C1C] mb-3 flex items-center gap-2">
|
||||
<Sparkles className="w-5 h-5 text-[#C41E3A]" />
|
||||
服务概述
|
||||
</h3>
|
||||
<p className="text-[#5C5C5C] leading-relaxed">{service.overview}</p>
|
||||
</div>
|
||||
|
||||
<div className="mb-6">
|
||||
<div className="flex gap-2 mb-6 border-b border-gray-200">
|
||||
{[
|
||||
{ id: 'features', label: '核心功能', icon: Zap },
|
||||
{ id: 'benefits', label: '服务优势', icon: Target },
|
||||
{ id: 'process', label: '服务流程', icon: CheckCircle2 },
|
||||
].map((tab) => (
|
||||
<button
|
||||
key={tab.id}
|
||||
onClick={() => setActiveTab(tab.id as any)}
|
||||
className={`
|
||||
flex items-center gap-2 px-4 py-3 font-medium transition-all border-b-2 -mb-px
|
||||
${activeTab === tab.id
|
||||
? 'border-[#C41E3A] text-[#C41E3A]'
|
||||
: 'border-transparent text-[#5C5C5C] hover:text-[#1C1C1C]'
|
||||
}
|
||||
`}
|
||||
>
|
||||
<tab.icon className="w-4 h-4" />
|
||||
{tab.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.div
|
||||
key={activeTab}
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -10 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
{activeTab === 'features' && (
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
{service.features.map((feature, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, x: -10 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: index * 0.05 }}
|
||||
className="flex items-start gap-3 p-4 bg-[#F5F7FA] rounded-lg hover:bg-[#FFFBF5] transition-colors group"
|
||||
>
|
||||
<div className="w-6 h-6 bg-[#C41E3A] rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||
<CheckCircle2 className="w-4 h-4 text-white" />
|
||||
</div>
|
||||
<span className="text-[#1C1C1C] group-hover:text-[#C41E3A] transition-colors">{feature}</span>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === 'benefits' && (
|
||||
<div className="space-y-4">
|
||||
{service.benefits.map((benefit, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, x: -10 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: index * 0.05 }}
|
||||
className="flex items-start gap-3 p-4 bg-gradient-to-r from-[#FFFBF5] to-transparent rounded-lg border-l-4 border-[#C41E3A]"
|
||||
>
|
||||
<div className="w-8 h-8 bg-[#C41E3A] rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<Target className="w-4 h-4 text-white" />
|
||||
</div>
|
||||
<span className="text-[#1C1C1C] font-medium">{benefit}</span>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === 'process' && (
|
||||
<div className="space-y-4">
|
||||
{service.process.map((step, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, x: -10 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: index * 0.05 }}
|
||||
className="flex items-start gap-4"
|
||||
>
|
||||
<div className="w-10 h-10 bg-[#C41E3A] rounded-full flex items-center justify-center flex-shrink-0 text-white font-bold">
|
||||
{index + 1}
|
||||
</div>
|
||||
<div className="flex-1 pb-4">
|
||||
<p className="text-[#1C1C1C] font-medium">{step}</p>
|
||||
{index < service.process.length - 1 && (
|
||||
<div className="absolute left-5 top-10 w-0.5 h-8 bg-[#C41E3A]/20" />
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-3 pt-6 border-t border-gray-200">
|
||||
<Button variant="outline" onClick={() => onOpenChange(false)}>
|
||||
关闭
|
||||
</Button>
|
||||
<Button className="bg-[#C41E3A] hover:bg-[#A01830] text-white">
|
||||
立即咨询
|
||||
<ArrowRight className="ml-2 w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import { useInView } from 'framer-motion';
|
||||
import { useRef } from 'react';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { InkBackground } from '@/components/ui/ink-decoration';
|
||||
import { DataParticleFlow } from '@/components/effects/data-particle-flow';
|
||||
import { SubtleDots } from '@/components/effects/subtle-dots';
|
||||
|
||||
interface PageHeaderProps {
|
||||
badge?: string;
|
||||
title: string;
|
||||
description?: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function PageHeader({ badge, title, description, className = '' }: PageHeaderProps) {
|
||||
const ref = useRef(null);
|
||||
const isInView = useInView(ref, { once: true, margin: '-100px' });
|
||||
|
||||
return (
|
||||
<div className="relative overflow-hidden bg-gradient-to-b from-[#FAFAFA] to-white">
|
||||
<InkBackground />
|
||||
<DataParticleFlow
|
||||
particleCount={40}
|
||||
color="#C41E3A"
|
||||
intensity="subtle"
|
||||
shape="square"
|
||||
effect="pulse"
|
||||
/>
|
||||
<SubtleDots color="#C41E3A" count={6} />
|
||||
|
||||
<div className="container-wide relative z-10 pt-32 pb-20" ref={ref}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.6 }}
|
||||
className={`max-w-4xl mx-auto text-center ${className}`}
|
||||
>
|
||||
{badge && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.6, delay: 0.1 }}
|
||||
className="mb-6"
|
||||
>
|
||||
<Badge variant="outline">{badge}</Badge>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
className="text-4xl sm:text-5xl font-bold text-[#1C1C1C] mb-6"
|
||||
>
|
||||
{title}
|
||||
</motion.h1>
|
||||
|
||||
{description && (
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.6, delay: 0.3 }}
|
||||
className="text-lg text-[#5C5C5C] max-w-2xl mx-auto leading-relaxed"
|
||||
>
|
||||
{description}
|
||||
</motion.p>
|
||||
)}
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user