张翔
276 lines
12 KiB
TypeScript
276 lines
12 KiB
TypeScript
'use client';
|
||
|
||
import { motion } from 'framer-motion';
|
||
import { useInView } from 'framer-motion';
|
||
import { useRef, 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, Phone } from 'lucide-react';
|
||
|
||
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);
|
||
|
||
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: '坚持透明沟通，信守承诺，以诚信赢得客户信任和尊重',
|
||
},
|
||
], []);
|
||
|
||
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等产品陆续上线，为客户提供一站式数字化服务',
|
||
},
|
||
], []);
|
||
|
||
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">
|
||
我们不把"项目交付"当作终点。
|
||
</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">
|
||
这些问题，比"项目是否按时交付"更让我们在意。
|
||
</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]">不做路过就忘的"一锤子买卖"</span>
|
||
</li>
|
||
</ul>
|
||
<p className="text-[#5C5C5C] leading-relaxed font-medium">
|
||
我们只做一件事：成为您数字化转型路上，信得过的成长伙伴。
|
||
</p>
|
||
</div>
|
||
|
||
<FlipClock
|
||
years={operationTime.years}
|
||
months={operationTime.months}
|
||
days={operationTime.days}
|
||
/>
|
||
|
||
<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"
|
||
>
|
||
{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>
|
||
))}
|
||
</motion.div>
|
||
|
||
<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" />
|
||
</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>
|
||
</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>
|
||
</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 className="flex items-center gap-3">
|
||
<div className="p-2 bg-white rounded-lg">
|
||
<Phone 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.phone}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
</motion.div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|