feat: 统一全站设计风格、导航组件与文案逻辑自洽性修复

- 新增 InkGlowCard 墨韵流光卡片组件,统一全站卡片交互风格
- 新增 PageNav 面包屑组件,统一全站页面导航
- 统一色彩体系、排版层级、间距节奏和动画风格
- 修复 CTA 区品牌名称错误(诺瓦隆→睿新致遠)
- 修复 ERP 产品卖点与年费制定价矛盾
- 导航下拉补充 SDS 和 OA 产品
- 统一全站数据指标为 12+年核心团队经验、6自研产品、10+团队成员
- 移除不可靠的 100%客户满意度和 30+行业专家指标
- 修复新闻时间线不合理问题,调整里程碑节奏
- 统一响应承诺为工作日快速响应
- 服务第4项重命名为行业方案实施,厘清概念
- 服务详情页效果数据改为定性描述
- 删除 cases 模块,精简代码库
This commit is contained in:
张翔
2026-05-02 08:11:47 +08:00
parent 307e0a654e
commit a272e58aaa
64 changed files with 1934 additions and 2995 deletions
+187 -225
View File
@@ -1,267 +1,229 @@
'use client';
import { motion } from 'framer-motion';
import { useInView } from 'framer-motion';
import { useRef, useState, useEffect, useMemo } from 'react';
import { useState, useEffect, useMemo } from 'react';
import { COMPANY_INFO, STATS } from '@/lib/constants';
import { Card, CardContent } from '@/components/ui/card';
import { PageHeader } from '@/components/ui/page-header';
import { FlipClock } from '@/components/ui/flip-clock';
import { Lightbulb, Users, Target, Award, MapPin, Mail } from 'lucide-react';
import { PageNav } from '@/components/layout/page-nav';
import { Users, Target, Award, MapPin, Mail } from 'lucide-react';
import { differenceInYears, differenceInMonths, differenceInDays, subYears, subMonths } from 'date-fns';
export function AboutClient() {
const contentRef = useRef(null);
const isContentInView = useInView(contentRef, { once: true, margin: '-100px' });
const [operationTime, setOperationTime] = useState({ days: 0, months: 0, years: 0 });
useEffect(() => {
const foundingDate = new Date('2026-01-15');
const calculateTime = () => {
const now = new Date();
const diff = now.getTime() - foundingDate.getTime();
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
const years = Math.floor(days / 365);
const months = Math.floor((days % 365) / 30);
const years = differenceInYears(now, foundingDate);
const afterYears = subYears(now, years);
const months = differenceInMonths(afterYears, foundingDate);
const afterMonths = subMonths(afterYears, months);
const days = differenceInDays(afterMonths, foundingDate);
setOperationTime({ days, months, years });
};
calculateTime();
const timer = setInterval(calculateTime, 60000);
return () => clearInterval(timer);
}, []);
const values = useMemo(() => [
{
icon: Lightbulb,
title: '创新驱动',
description: '持续探索前沿技术,以创新思维解决业务挑战,为客户创造差异化价值',
},
{
icon: Users,
title: '客户至上',
description: '深入理解客户需求,提供个性化解决方案,建立长期合作伙伴关系',
},
{
icon: Target,
title: '追求卓越',
description: '以最高标准要求自己,持续优化产品和服务质量,超越客户期望',
},
{
icon: Award,
title: '诚信为本',
description: '坚持透明沟通,信守承诺,以诚信赢得客户信任和尊重',
},
{ icon: Target, title: '务实', description: '不追逐风口,只做真正为客户创造价值的事。' },
{ icon: Users, title: '陪伴', description: '交付只是开始,长期陪跑才是我们的承诺。' },
{ icon: Award, title: '专业', description: '用扎实的工程能力和行业经验赢得信任。' },
], []);
const milestones = useMemo(() => [
{
date: '2026年1月',
title: '公司成立',
description: '四川睿新致远科技有限公司在成都龙泉驿区正式成立,专注于企业数字化转型解决方案',
},
{
date: '2026年1月',
title: '团队组建',
description: '核心团队到位,技术团队拥有丰富的行业经验和专业技能',
},
{
date: '2026年2月',
title: '业务启动',
description: '推出企业数字化转型解决方案,开始服务首批客户',
},
{
date: '2026年2月',
title: '产品发布',
description: '自主研发的ERP、CRM等产品陆续上线,为客户提供一站式数字化服务',
},
{ date: '2026年1月', title: '公司成立', description: '四川睿新致远科技有限公司在成都龙泉驿区正式成立' },
{ date: '2026年1月', title: '团队组建', description: '核心团队到位,成员来自多个大型传统IT企业,具备扎实的工程能力和规范化交付经验' },
{ date: '2026年2月', title: '业务启动', description: '推出企业数字化转型解决方案,开始服务首批客户' },
{ date: '2026年3月', title: '产品研发', description: '自主研发的ERP、CRM等产品启动研发,逐步构建产品矩阵' },
{ date: '2026年5月', title: '产品上线', description: '首批产品完成开发并上线试运行,形成覆盖企业管理核心场景的产品体系' },
], []);
return (
<div className="min-h-screen bg-white">
<PageHeader
title="关于我们"
description="了解睿新致远的品牌故事。我们不只是技术供应商,更是您数字化转型的成长伙伴。以智慧连接数字趋势,以伙伴身份陪您成长。"
/>
<div ref={contentRef} className="container-wide py-12 md:py-16">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={isContentInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.6 }}
className="max-w-4xl mx-auto space-y-8"
>
<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>
<div className="mb-6">
<h3 className="text-xl font-semibold text-[#1C1C1C] mb-3">智连未来</h3>
<p className="text-[#5C5C5C] mb-3 leading-relaxed">
我们坚持对行业趋势的深度研究,不追逐昙花一现的概念。
</p>
<p className="text-[#5C5C5C] mb-3 leading-relaxed">
每一次方案,都源于对您业务场景的洞察;
</p>
<p className="text-[#5C5C5C] leading-relaxed">
每一次连接,都为了让技术真正服务于您的未来。
</p>
</div>
<div>
<h3 className="text-xl font-semibold text-[#1C1C1C] mb-3">成长伙伴</h3>
<p className="text-[#5C5C5C] mb-3 leading-relaxed">
我们不把&ldquo;项目交付&rdquo;当作终点。
</p>
<p className="text-[#5C5C5C] mb-3 leading-relaxed">
您的业务增长了吗?您的团队能力提升了吗?
</p>
<p className="text-[#5C5C5C] leading-relaxed">
您下一次遇到难题时,还会第一个想到我们吗?
</p>
<p className="text-[#5C5C5C] mt-3 leading-relaxed">
这些问题,比&ldquo;项目是否按时交付&rdquo;更让我们在意。
</p>
</div>
</div>
<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-[#5C5C5C]">不卖您用不上的技术</span>
</li>
<li className="flex items-start gap-3">
<span className="text-green-600 font-bold">✅</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-[#5C5C5C]">不做路过就忘的&ldquo;一锤子买卖&rdquo;</span>
</li>
</ul>
<p className="text-[#5C5C5C] leading-relaxed font-medium">
我们只做一件事:成为您数字化转型路上,信得过的成长伙伴。
</p>
</div>
<FlipClock
years={operationTime.years}
months={operationTime.months}
days={operationTime.days}
/>
<section className="pt-32 pb-16">
<div className="container-wide">
<PageNav items={[{ label: '关于我们' }]} />
<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"
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5 }}
className="max-w-3xl"
>
{STATS.map((stat, idx) => (
<Card key={idx} className="text-center border-[#E5E5E5]">
<CardContent className="pt-6">
<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>
))}
<p className="text-sm font-medium text-[#C41E3A] mb-4 tracking-wide uppercase">About</p>
<h1 className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-6 tracking-tight">
关于我们
</h1>
<p className="text-lg text-[#595959] leading-relaxed">
企业需要的,不是一个高高在上的专家,也不是一个做完就跑的卖家,而是一个能坐下来、一起想办法的同行者。
</p>
</motion.div>
</div>
</section>
<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) => (
<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 shrink-0">
<value.icon className="w-6 h-6 text-white" />
<section className="pb-16">
<div className="container-wide">
<div className="max-w-4xl mx-auto space-y-8">
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.5 }}
className="p-8 rounded-xl border border-[#E5E5E5]"
>
<h2 className="text-2xl font-bold text-[#1C1C1C] mb-6">关于 睿新致遠</h2>
<p className="text-xl font-semibold text-[#1C1C1C] mb-4">智连未来,成长伙伴</p>
<p className="text-[#595959] mb-6 leading-relaxed">企业需要的,不是一个高高在上的专家,也不是一个做完就跑的卖家,而是一个能坐下来、一起想办法的同行者。</p>
<div className="mb-6">
<h3 className="text-lg font-semibold text-[#1C1C1C] mb-3">智连未来</h3>
<p className="text-[#595959] mb-2 leading-relaxed">我们坚持对行业趋势的深度研究,不追逐昙花一现的概念。</p>
<p className="text-[#595959] mb-2 leading-relaxed">每一次方案,都源于对您业务场景的洞察;</p>
<p className="text-[#595959] leading-relaxed">每一次连接,都为了让技术真正服务于您的未来。</p>
</div>
<div>
<h3 className="text-lg font-semibold text-[#1C1C1C] mb-3">成长伙伴</h3>
<p className="text-[#595959] mb-2 leading-relaxed">我们不把"项目交付"当作终点。</p>
<p className="text-[#595959] mb-2 leading-relaxed">您的业务增长了吗?您的团队能力提升了吗?</p>
<p className="text-[#595959] mb-2 leading-relaxed">您下一次遇到难题时,还会第一个想到我们吗?</p>
<p className="text-[#595959] mt-3 leading-relaxed">这些问题,比"项目是否按时交付"更让我们在意。</p>
</div>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.5, delay: 0.1 }}
className="p-8 rounded-xl border border-[#E5E5E5]"
>
<h2 className="text-2xl font-bold text-[#1C1C1C] mb-6">品牌承诺</h2>
<p className="text-[#595959] mb-4 leading-relaxed">我们承诺:</p>
<ul className="space-y-2 mb-6">
<li className="flex items-start gap-3">
<span className="text-[#C41E3A] font-bold">✓</span>
<span className="text-[#595959]">不卖您用不上的技术</span>
</li>
<li className="flex items-start gap-3">
<span className="text-[#C41E3A] font-bold">✓</span>
<span className="text-[#595959]">不说不懂业务的术语</span>
</li>
<li className="flex items-start gap-3">
<span className="text-[#C41E3A] font-bold">✓</span>
<span className="text-[#595959]">不做路过就忘的"一锤子买卖"</span>
</li>
</ul>
<p className="text-[#1C1C1C] leading-relaxed font-medium">
我们只做一件事:成为您数字化转型路上,信得过的成长伙伴。
</p>
</motion.div>
<FlipClock
years={operationTime.years}
months={operationTime.months}
days={operationTime.days}
/>
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.5 }}
className="grid grid-cols-2 md:grid-cols-4 gap-4"
>
{STATS.map((stat, idx) => (
<div key={idx} className="p-6 bg-[#F5F5F5] rounded-lg text-center">
<div className="text-3xl font-bold text-[#C41E3A] mb-1">{stat.value}</div>
<div className="text-sm text-[#595959]">{stat.label}</div>
</div>
))}
</motion.div>
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.5 }}
>
<h2 className="text-2xl font-bold text-[#1C1C1C] mb-6 text-center">核心价值观</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
{values.map((value) => (
<div
key={value.title}
className="flex items-start gap-4 p-6 rounded-xl border border-[#E5E5E5] hover:border-[#C41E3A]/30 transition-colors"
>
<div className="w-10 h-10 rounded-lg bg-[#FEF2F4] flex items-center justify-center shrink-0">
<value.icon className="w-5 h-5 text-[#C41E3A]" />
</div>
<div>
<h3 className="font-semibold text-[#1C1C1C] mb-1">{value.title}</h3>
<p className="text-sm text-[#595959]">{value.description}</p>
</div>
</div>
))}
</div>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.5 }}
>
<h2 className="text-2xl font-bold text-[#1C1C1C] mb-6 text-center">发展历程</h2>
<div className="space-y-4">
{milestones.map((milestone) => (
<div
key={milestone.title}
className="flex flex-col md:flex-row md:items-start gap-3 p-5 rounded-lg border border-[#E5E5E5]"
>
<div className="md:w-28 shrink-0">
<span className="text-sm font-medium text-[#C41E3A]">{milestone.date}</span>
</div>
<div className="flex-1">
<h3 className="font-semibold text-[#1C1C1C] mb-1 text-sm">{milestone.title}</h3>
<p className="text-sm text-[#595959]">{milestone.description}</p>
</div>
</div>
))}
</div>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.5 }}
className="p-8 rounded-xl 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-2 gap-6">
<div className="flex items-center gap-3">
<div className="w-10 h-10 bg-[#FEF2F4] rounded-lg flex items-center justify-center">
<MapPin className="w-5 h-5 text-[#C41E3A]" />
</div>
<div>
<h3 className="font-semibold text-lg mb-2 text-[#1C1C1C]">{value.title}</h3>
<p className="text-[#5C5C5C] text-sm">{value.description}</p>
<p className="text-xs text-[#595959]">公司地址</p>
<p className="text-sm font-medium text-[#1C1C1C]">{COMPANY_INFO.address}</p>
</div>
</motion.div>
))}
</div>
</motion.div>
<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) => (
<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 shrink-0">
<span className="text-sm font-medium text-[#C41E3A]">{milestone.date}</span>
</div>
<div className="flex-1">
<h3 className="font-semibold text-[#1A1A2E] mb-1">{milestone.title}</h3>
<p className="text-[#718096] text-sm">{milestone.description}</p>
</div>
</motion.div>
))}
</div>
</motion.div>
<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-[#C41E3A]" />
</div>
<div>
<p className="text-sm text-[#5C5C5C]">公司地址</p>
<p className="text-sm font-medium text-[#1C1C1C]">{COMPANY_INFO.address}</p>
<div className="flex items-center gap-3">
<div className="w-10 h-10 bg-[#FEF2F4] rounded-lg flex items-center justify-center">
<Mail className="w-5 h-5 text-[#C41E3A]" />
</div>
<div>
<p className="text-xs text-[#595959]">电子邮箱</p>
<p className="text-sm font-medium text-[#1C1C1C]">{COMPANY_INFO.email}</p>
</div>
</div>
</div>
<div className="flex items-center gap-3">
<div className="p-2 bg-white rounded-lg">
<Mail className="w-5 h-5 text-[#C41E3A]" />
</div>
<div>
<p className="text-sm text-[#5C5C5C]">电子邮箱</p>
<p className="text-sm font-medium text-[#1C1C1C]">{COMPANY_INFO.email}</p>
</div>
</div>
</div>
</motion.div>
</motion.div>
</div>
</motion.div>
</div>
</div>
</section>
</div>
);
}