feat(website): 三轮视觉改造与页面过渡动画
改造概要（30项）： - 第一轮：Hero重构/Section差异化/SocialProof强化/CTA对比度/About架构 - 第二轮：字体优化/背景交替/Solutions差异化/Footer五列/MegaDropdown修复 - 第三轮：卡片交互/表单层级/CTA统一/时间线标记/连接线/三列布局/移动导航/Button微交互/SEO Schema - P3-2：template.tsx+Framer Motion页面过渡/loading.tsx加载状态 - 清理：删除未用组件/hooks，修复重复移动导航，清理冗余CSS
This commit is contained in:
张翔
@@ -1,31 +1,16 @@
|
||||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import { useState, useEffect, useMemo } from 'react';
|
||||
import { COMPANY_INFO, STATS } from '@/lib/constants';
|
||||
import { FlipClock } from '@/components/ui/flip-clock';
|
||||
import { useMemo } from 'react';
|
||||
import { useReducedMotion } from '@/hooks/use-reduced-motion';
|
||||
import { COMPANY_INFO } from '@/lib/constants';
|
||||
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';
|
||||
import { BreadcrumbSchema } from '@/components/seo/structured-data';
|
||||
import { Users, Target, Award } from 'lucide-react';
|
||||
|
||||
export function AboutClient() {
|
||||
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 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 shouldReduceMotion = useReducedMotion();
|
||||
const fadeUp = shouldReduceMotion ? {} : { initial: { opacity: 0, y: 20 } };
|
||||
|
||||
const values = useMemo(() => [
|
||||
{ icon: Target, title: '务实', description: '不追逐风口，只做真正为客户创造价值的事。' },
|
||||
@@ -34,193 +19,174 @@ export function AboutClient() {
|
||||
], []);
|
||||
|
||||
const milestones = useMemo(() => [
|
||||
{ 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: '多款产品进入核心功能开发阶段，同步开展早期用户体验计划' },
|
||||
{ date: '2026.01', title: '公司成立', description: '四川睿新致远科技有限公司在成都龙泉驿区正式成立' },
|
||||
{ date: '2026.01', title: '团队组建', description: '核心团队到位，成员来自多个大型传统IT企业，具备扎实的工程能力和规范化交付经验' },
|
||||
{ date: '2026.02', title: '业务启动', description: '推出企业数字化转型咨询与解决方案服务，开始接触首批意向客户' },
|
||||
{ date: '2026.03', title: '产品研发', description: '自主研发的ERP、CRM等产品启动研发，逐步构建产品矩阵' },
|
||||
{ date: '2026.05', title: '研发推进', description: '多款产品进入核心功能开发阶段，同步开展早期用户体验计划' },
|
||||
], []);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
<div className="min-h-screen bg-[var(--color-bg-primary)]">
|
||||
<BreadcrumbSchema items={[{ name: '首页', href: '/' }, { name: '关于我们', href: '/about' }]} />
|
||||
<section className="pt-32 pb-16">
|
||||
<div className="container-wide">
|
||||
<PageNav items={[{ label: '关于我们' }]} />
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
{...fadeUp}
|
||||
animate={shouldReduceMotion ? {} : { opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="max-w-3xl"
|
||||
>
|
||||
<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">
|
||||
<p className="text-sm font-medium text-[var(--color-brand-primary)] mb-4 tracking-wide uppercase">About</p>
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-[var(--color-text-primary)] mb-6 tracking-tight">
|
||||
关于我们
|
||||
</h1>
|
||||
<p className="text-lg text-[#595959] leading-relaxed">
|
||||
<p className="text-lg text-[var(--color-text-muted)] leading-relaxed">
|
||||
以智慧连接数字趋势，以伙伴身份陪您成长——您的数字化转型同行者。
|
||||
</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="pb-16">
|
||||
<section className="pb-20">
|
||||
<div className="container-wide">
|
||||
<div className="max-w-4xl mx-auto space-y-8">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
{...fadeUp}
|
||||
whileInView={shouldReduceMotion ? {} : { opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="p-8 rounded-xl border border-[#E5E5E5]"
|
||||
className="bg-[var(--color-bg-section)] rounded-2xl p-8 md:p-12"
|
||||
>
|
||||
<h2 className="text-2xl font-bold text-[#1C1C1C] mb-6">关于 {COMPANY_INFO.shortName}</h2>
|
||||
<p className="text-xl font-semibold text-[#1C1C1C] mb-4">智连未来，成长伙伴</p>
|
||||
<p className="text-[#595959] mb-6 leading-relaxed">企业需要的，不是一个高高在上的专家，也不是一个做完就跑的卖家，而是一个能坐下来、一起想办法的同行者。</p>
|
||||
<h2 className="text-2xl font-bold text-[var(--color-text-primary)] mb-8">
|
||||
关于 {COMPANY_INFO.shortName}
|
||||
</h2>
|
||||
|
||||
<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 className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-[var(--color-brand-primary)] mb-3">智连未来</h3>
|
||||
<p className="text-[var(--color-text-muted)] mb-2 leading-relaxed">我们坚持对行业趋势的深度研究，不追逐昙花一现的概念。</p>
|
||||
<p className="text-[var(--color-text-muted)] mb-2 leading-relaxed">每一次方案，都源于对您业务场景的洞察；</p>
|
||||
<p className="text-[var(--color-text-muted)] leading-relaxed">每一次连接，都为了让技术真正服务于您的未来。</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-[var(--color-brand-primary)] mb-3">成长伙伴</h3>
|
||||
<p className="text-[var(--color-text-muted)] mb-2 leading-relaxed">我们不把“项目完成”当作终点。</p>
|
||||
<p className="text-[var(--color-text-muted)] mb-2 leading-relaxed">您的业务增长了吗？您的团队能力提升了吗？</p>
|
||||
<p className="text-[var(--color-text-muted)] leading-relaxed">您下一次遇到难题时，还会第一个想到我们吗？</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 pt-8 border-t border-[var(--color-border-light)]">
|
||||
<p className="text-[var(--color-text-muted)] mb-4 leading-relaxed">我们承诺：</p>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-3">
|
||||
{[
|
||||
'不卖您用不上的技术',
|
||||
'不说不懂业务的术语',
|
||||
'不做路过就忘的"一锤子买卖"',
|
||||
].map((promise) => (
|
||||
<div key={promise} className="flex items-start gap-2">
|
||||
<span className="text-[var(--color-brand-primary)] font-bold mt-0.5">✓</span>
|
||||
<span className="text-[var(--color-text-muted)] text-sm">{promise}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-[var(--color-text-primary)] leading-relaxed font-medium mt-4">
|
||||
我们只做一件事：成为您数字化转型路上，信得过的成长伙伴。
|
||||
</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="py-20 bg-[var(--color-bg-section)]">
|
||||
<div className="container-wide">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<motion.h2
|
||||
{...fadeUp}
|
||||
whileInView={shouldReduceMotion ? {} : { opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="text-2xl font-bold text-[var(--color-text-primary)] mb-10"
|
||||
>
|
||||
核心价值观
|
||||
</motion.h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
{values.map((value) => (
|
||||
<motion.div
|
||||
key={value.title}
|
||||
{...fadeUp}
|
||||
whileInView={shouldReduceMotion ? {} : { opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="flex items-start gap-4 p-6 rounded-xl bg-[var(--color-bg-primary)] border border-[var(--color-border-primary)] hover:border-[rgba(var(--color-brand-primary-rgb),0.3)] transition-colors"
|
||||
>
|
||||
<div className="w-10 h-10 rounded-lg bg-[var(--color-brand-primary-bg)] flex items-center justify-center shrink-0">
|
||||
<value.icon className="w-5 h-5 text-[var(--color-brand-primary)]" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-[var(--color-text-primary)] mb-1">{value.title}</h3>
|
||||
<p className="text-sm text-[var(--color-text-muted)]">{value.description}</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
<section className="py-20">
|
||||
<div className="container-wide">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<motion.h2
|
||||
{...fadeUp}
|
||||
whileInView={shouldReduceMotion ? {} : { opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="text-2xl font-bold text-[var(--color-text-primary)] mb-10"
|
||||
>
|
||||
<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
|
||||
发展历程
|
||||
</motion.h2>
|
||||
<div className="relative">
|
||||
<div className="absolute left-[4.5rem] top-0 bottom-0 w-px bg-[var(--color-border-primary)] hidden md:block" />
|
||||
<div className="space-y-8">
|
||||
{milestones.map((milestone, idx) => {
|
||||
const isLatest = idx === milestones.length - 1;
|
||||
return (
|
||||
<motion.div
|
||||
key={milestone.title}
|
||||
className="flex flex-col md:flex-row md:items-start gap-3 p-5 rounded-lg border border-[#E5E5E5]"
|
||||
{...fadeUp}
|
||||
whileInView={shouldReduceMotion ? {} : { opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: idx * 0.1 }}
|
||||
className="flex items-start gap-6"
|
||||
>
|
||||
<div className="md:w-28 shrink-0">
|
||||
<span className="text-sm font-medium text-[#C41E3A]">{milestone.date}</span>
|
||||
<div className="md:w-20 shrink-0 text-right hidden md:block">
|
||||
<span className="text-sm font-mono font-medium text-[var(--color-brand-primary)]">{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 className="relative shrink-0 hidden md:block">
|
||||
<div className={`w-3 h-3 rounded-full border-2 border-white shadow-sm mt-1 ${isLatest ? 'bg-[var(--color-brand-primary)] animate-pulse' : 'bg-[var(--color-brand-primary)]'}`} />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<div className="flex-1 pb-2">
|
||||
<div className="md:hidden text-sm font-mono font-medium text-[var(--color-brand-primary)] mb-1">{milestone.date}</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<h3 className="font-semibold text-[var(--color-text-primary)]">{milestone.title}</h3>
|
||||
{isLatest && (
|
||||
<span className="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-medium bg-[var(--color-brand-primary-bg)] text-[var(--color-brand-primary)] border border-[var(--color-brand-primary)]/10">
|
||||
进行中
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-sm text-[var(--color-text-muted)] leading-relaxed">{milestone.description}</p>
|
||||
</div>
|
||||
</motion.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>
|
||||
<p className="text-xs text-[#595959]">公司地址</p>
|
||||
<p className="text-sm font-medium text-[#1C1C1C]">{COMPANY_INFO.address}</p>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -72,17 +72,6 @@ jest.mock('@/components/ui/card', () => {
|
||||
return { Card, CardContent };
|
||||
});
|
||||
|
||||
jest.mock('@/components/ui/page-header', () => {
|
||||
const PageHeader = ({ title, description }: { title: string; description?: string }) => (
|
||||
<header>
|
||||
<h1>{title}</h1>
|
||||
<p>{description}</p>
|
||||
</header>
|
||||
);
|
||||
PageHeader.displayName = 'PageHeader';
|
||||
return { PageHeader };
|
||||
});
|
||||
|
||||
jest.mock('@/components/ui/flip-clock', () => {
|
||||
const FlipClock = ({ years, months, days }: { years: number; months: number; days: number }) => (
|
||||
<div data-testid="flip-clock">
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect, Suspense } from 'react';
|
||||
import { useState, Suspense } from 'react';
|
||||
import { useSearchParams } from 'next/navigation';
|
||||
import { z } from 'zod';
|
||||
import { motion } from 'framer-motion';
|
||||
import { useReducedMotion } from '@/hooks/use-reduced-motion';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
@@ -12,6 +13,7 @@ import { Mail, MapPin, Send, Loader2, Clock, HeadphonesIcon, CheckCircle2 } from
|
||||
import { COMPANY_INFO } from '@/lib/constants';
|
||||
import { PageNav } from '@/components/layout/page-nav';
|
||||
import { trackContactForm, trackConversion } from '@/lib/analytics';
|
||||
import { BreadcrumbSchema } from '@/components/seo/structured-data';
|
||||
|
||||
const contactFormSchema = z.object({
|
||||
name: z.string().min(2, '姓名至少需要2个字符'),
|
||||
@@ -34,6 +36,8 @@ interface FormErrors {
|
||||
function ContactFormContent() {
|
||||
const searchParams = useSearchParams();
|
||||
const isSuccessFromRedirect = searchParams.get('success') === 'true';
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
const fadeUp = shouldReduceMotion ? {} : { initial: { opacity: 0, y: 20 } };
|
||||
const [showToast, setShowToast] = useState(isSuccessFromRedirect);
|
||||
const [toastMessage, setToastMessage] = useState(
|
||||
isSuccessFromRedirect ? '表单提交成功！我们会尽快与您联系。' : ''
|
||||
@@ -52,12 +56,6 @@ function ContactFormContent() {
|
||||
});
|
||||
const [errors, setErrors] = useState<FormErrors>({});
|
||||
|
||||
useEffect(() => {
|
||||
if (isSuccessFromRedirect) {
|
||||
setShowToast(true);
|
||||
}
|
||||
}, [isSuccessFromRedirect]);
|
||||
|
||||
const validateField = (field: keyof ContactFormData, value: string) => {
|
||||
try {
|
||||
contactFormSchema.shape[field].parse(value);
|
||||
@@ -153,7 +151,8 @@ function ContactFormContent() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
<div className="min-h-screen bg-[var(--color-bg-primary)]">
|
||||
<BreadcrumbSchema items={[{ name: '首页', href: '/' }, { name: '联系我们', href: '/contact' }]} />
|
||||
{showToast && (
|
||||
<Toast
|
||||
message={toastMessage}
|
||||
@@ -166,16 +165,16 @@ function ContactFormContent() {
|
||||
<div className="container-wide">
|
||||
<PageNav items={[{ label: '联系我们' }]} />
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
{...fadeUp}
|
||||
animate={shouldReduceMotion ? {} : { opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="max-w-3xl"
|
||||
>
|
||||
<p className="text-sm font-medium text-[#C41E3A] mb-4 tracking-wide uppercase">Contact</p>
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-6 tracking-tight">
|
||||
<p className="text-sm font-medium text-[var(--color-brand-primary)] mb-4 tracking-wide uppercase">Contact</p>
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-[var(--color-text-primary)] mb-6 tracking-tight">
|
||||
联系我们
|
||||
</h1>
|
||||
<p className="text-lg text-[#595959] leading-relaxed">
|
||||
<p className="text-lg text-[var(--color-text-muted)] leading-relaxed">
|
||||
无论您有任何问题或合作意向，我们都很乐意与您交流
|
||||
</p>
|
||||
</motion.div>
|
||||
@@ -186,93 +185,93 @@ function ContactFormContent() {
|
||||
<div className="container-wide">
|
||||
<div className="grid lg:grid-cols-5 gap-12 lg:gap-16">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
{...fadeUp}
|
||||
whileInView={shouldReduceMotion ? {} : { opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="lg:col-span-2 space-y-6"
|
||||
>
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-[#1C1C1C] mb-6">联系方式</h2>
|
||||
<h2 className="text-lg font-semibold text-[var(--color-text-primary)] mb-6">联系方式</h2>
|
||||
<div className="space-y-4" data-testid="contact-info">
|
||||
<div className="flex items-start gap-4 group" data-testid="email-info">
|
||||
<div className="w-10 h-10 bg-[#FEF2F4] rounded-lg flex items-center justify-center shrink-0 group-hover:scale-105 transition-transform duration-200">
|
||||
<Mail className="w-5 h-5 text-[#C41E3A]" />
|
||||
<div className="w-10 h-10 bg-[var(--color-brand-primary-bg)] rounded-lg flex items-center justify-center shrink-0 group-hover:scale-105 transition-transform duration-200">
|
||||
<Mail className="w-5 h-5 text-[var(--color-brand-primary)]" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-[#595959] mb-1">邮箱</p>
|
||||
<a href={`mailto:${COMPANY_INFO.email}`} className="text-[#1C1C1C] hover:text-[#C41E3A] transition-colors duration-200" data-testid="email-link">
|
||||
<p className="text-sm text-[var(--color-text-muted)] mb-1">邮箱</p>
|
||||
<a href={`mailto:${COMPANY_INFO.email}`} className="text-[var(--color-text-primary)] hover:text-[var(--color-brand-primary)] transition-colors duration-200" data-testid="email-link">
|
||||
{COMPANY_INFO.email}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 group" data-testid="address-info">
|
||||
<div className="w-10 h-10 bg-[#FEF2F4] rounded-lg flex items-center justify-center shrink-0 group-hover:scale-105 transition-transform duration-200">
|
||||
<MapPin className="w-5 h-5 text-[#C41E3A]" />
|
||||
<div className="w-10 h-10 bg-[var(--color-brand-primary-bg)] rounded-lg flex items-center justify-center shrink-0 group-hover:scale-105 transition-transform duration-200">
|
||||
<MapPin className="w-5 h-5 text-[var(--color-brand-primary)]" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-[#595959] mb-1">地址</p>
|
||||
<p className="text-[#1C1C1C]" data-testid="address-text">{COMPANY_INFO.address}</p>
|
||||
<p className="text-sm text-[var(--color-text-muted)] mb-1">地址</p>
|
||||
<p className="text-[var(--color-text-primary)]" data-testid="address-text">{COMPANY_INFO.address}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-5 rounded-xl border border-[#E5E5E5]" data-testid="work-hours-card">
|
||||
<div className="p-5 rounded-xl border border-[var(--color-border)]" data-testid="work-hours-card">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<Clock className="w-4 h-4 text-[#C41E3A]" />
|
||||
<h2 className="text-sm font-medium text-[#1C1C1C]">工作时间</h2>
|
||||
<Clock className="w-4 h-4 text-[var(--color-brand-primary)]" />
|
||||
<h2 className="text-sm font-medium text-[var(--color-text-primary)]">工作时间</h2>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm" data-testid="work-hours-row">
|
||||
<span className="text-[#595959]">周一至周五</span>
|
||||
<span className="text-[#C41E3A] font-medium">9:00 - 18:00</span>
|
||||
<span className="text-[var(--color-text-muted)]">周一至周五</span>
|
||||
<span className="text-[var(--color-brand-primary)] font-medium">9:00 - 18:00</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-5 rounded-xl border border-[#E5E5E5]">
|
||||
<div className="p-5 rounded-xl border border-[var(--color-border)]">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<HeadphonesIcon className="w-4 h-4 text-[#C41E3A]" />
|
||||
<h2 className="text-sm font-medium text-[#1C1C1C]">我们的承诺</h2>
|
||||
<HeadphonesIcon className="w-4 h-4 text-[var(--color-brand-primary)]" />
|
||||
<h2 className="text-sm font-medium text-[var(--color-text-primary)]">我们的承诺</h2>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-start gap-2">
|
||||
<div className="w-1.5 h-1.5 bg-[#C41E3A] rounded-full mt-2 shrink-0" />
|
||||
<p className="text-sm text-[#595959]">工作日 2 小时内快速响应您的咨询</p>
|
||||
<div className="w-1.5 h-1.5 bg-[var(--color-brand-primary)] rounded-full mt-2 shrink-0" />
|
||||
<p className="text-sm text-[var(--color-text-muted)]">工作日 2 小时内快速响应您的咨询</p>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<div className="w-1.5 h-1.5 bg-[#C41E3A] rounded-full mt-2 shrink-0" />
|
||||
<p className="text-sm text-[#595959]">提供免费的业务咨询和方案评估服务</p>
|
||||
<div className="w-1.5 h-1.5 bg-[var(--color-brand-primary)] rounded-full mt-2 shrink-0" />
|
||||
<p className="text-sm text-[var(--color-text-muted)]">提供免费的业务咨询和方案评估服务</p>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<div className="w-1.5 h-1.5 bg-[#C41E3A] rounded-full mt-2 shrink-0" />
|
||||
<p className="text-sm text-[#595959]">根据您的需求量身定制最优解决方案</p>
|
||||
<div className="w-1.5 h-1.5 bg-[var(--color-brand-primary)] rounded-full mt-2 shrink-0" />
|
||||
<p className="text-sm text-[var(--color-text-muted)]">根据您的需求量身定制最优解决方案</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
{...fadeUp}
|
||||
whileInView={shouldReduceMotion ? {} : { opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: 0.1 }}
|
||||
className="lg:col-span-3"
|
||||
>
|
||||
<div className="p-6 sm:p-8 rounded-xl border border-[#E5E5E5] bg-[#FAFAFA]">
|
||||
<h2 className="text-lg font-semibold text-[#1C1C1C] mb-6">发送消息</h2>
|
||||
<div className="p-6 sm:p-8 rounded-xl border border-[var(--color-border-primary)] bg-[var(--color-bg-primary)] shadow-md">
|
||||
<h2 className="text-lg font-semibold text-[var(--color-text-primary)] mb-6">发送消息</h2>
|
||||
|
||||
{isSubmitted ? (
|
||||
<div className="text-center py-12">
|
||||
<div className="w-16 h-16 bg-[#C41E3A] rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<div className="w-16 h-16 bg-[var(--color-brand-primary)] rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<CheckCircle2 className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<h4 className="text-xl font-semibold text-[#1C1C1C] mb-2">消息已发送</h4>
|
||||
<p className="text-[#595959]">感谢您的留言，我们会尽快与您联系！</p>
|
||||
<h4 className="text-xl font-semibold text-[var(--color-text-primary)] mb-2">消息已发送</h4>
|
||||
<p className="text-[var(--color-text-muted)]">感谢您的留言，我们会尽快与您联系！</p>
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={handleSubmit} className="space-y-5">
|
||||
<input type="text" name="website" style={{ display: 'none' }} tabIndex={-1} autoComplete="off" />
|
||||
<input type="text" name="website" style={{ display: 'none' }} tabIndex={-1} autoComplete="off" aria-hidden="true" />
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<Input
|
||||
name="name"
|
||||
@@ -342,7 +341,7 @@ function ContactFormContent() {
|
||||
type="submit"
|
||||
data-testid="submit-button"
|
||||
size="lg"
|
||||
className="w-full bg-[#C41E3A] hover:bg-[#A01830] text-white min-h-13 md:min-h-0"
|
||||
className="w-full bg-[var(--color-brand-primary)] hover:bg-[var(--color-brand-primary-hover)] text-white min-h-13 md:min-h-0"
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
{isSubmitting ? (
|
||||
@@ -371,8 +370,8 @@ function ContactFormContent() {
|
||||
export default function ContactPage() {
|
||||
return (
|
||||
<Suspense fallback={
|
||||
<div className="min-h-screen bg-white flex items-center justify-center">
|
||||
<div className="animate-pulse text-[#595959]">加载中...</div>
|
||||
<div className="min-h-screen bg-[var(--color-bg-primary)] flex items-center justify-center">
|
||||
<div className="animate-pulse text-[var(--color-text-muted)]">加载中...</div>
|
||||
</div>
|
||||
}>
|
||||
<ContactFormContent />
|
||||
|
||||
@@ -26,11 +26,11 @@ const CTASection = dynamic(
|
||||
|
||||
function HomeContentV2() {
|
||||
return (
|
||||
<main id="main-content" className="min-h-screen bg-white">
|
||||
<main id="main-content" className="min-h-screen bg-[var(--color-bg-primary)]">
|
||||
<HeroSectionV2 />
|
||||
<SocialProofSection />
|
||||
<ProductMatrixSection />
|
||||
<ChallengeSection />
|
||||
<SocialProofSection />
|
||||
<CTASection />
|
||||
</main>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
export default function Loading() {
|
||||
return (
|
||||
<div className="min-h-[60vh] flex items-center justify-center">
|
||||
<div className="page-transition-loader">
|
||||
<div className="page-transition-loader__bar" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -6,6 +6,7 @@ import { Badge } from '@/components/ui/badge';
|
||||
import { PageNav } from '@/components/layout/page-nav';
|
||||
import { Calendar, ArrowLeft, Newspaper } from 'lucide-react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { useReducedMotion } from '@/hooks/use-reduced-motion';
|
||||
import { NEWS } from '@/lib/constants';
|
||||
|
||||
interface NewsDetailClientProps {
|
||||
@@ -13,28 +14,30 @@ interface NewsDetailClientProps {
|
||||
}
|
||||
|
||||
export function NewsDetailClient({ news }: NewsDetailClientProps) {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
const fadeUp = shouldReduceMotion ? {} : { initial: { opacity: 0, y: 20 } };
|
||||
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="min-h-screen bg-[var(--color-bg-primary)]">
|
||||
<section className="pt-32 pb-12">
|
||||
<div className="container-wide">
|
||||
<PageNav items={[{ label: '新闻动态', href: '/news' }, { label: news.title }]} />
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
{...fadeUp}
|
||||
animate={shouldReduceMotion ? {} : { opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="max-w-4xl mt-6"
|
||||
>
|
||||
<Badge className="mb-4 bg-[#C41E3A]/10 text-[#C41E3A] hover:bg-[#C41E3A]/20 border-0">
|
||||
<Badge className="mb-4 bg-[var(--color-brand-primary-bg)] text-[var(--color-brand-primary)] hover:bg-[var(--color-brand-primary)]/20 border-0">
|
||||
{news.category}
|
||||
</Badge>
|
||||
<h1 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-[#1C1C1C] mb-4 tracking-tight">
|
||||
<h1 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-[var(--color-text-primary)] mb-4 tracking-tight">
|
||||
{news.title}
|
||||
</h1>
|
||||
<div className="flex items-center gap-4 text-[#595959] text-sm">
|
||||
<div className="flex items-center gap-4 text-[var(--color-text-muted)] text-sm">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Calendar className="w-4 h-4" />
|
||||
{news.date}
|
||||
@@ -47,8 +50,8 @@ export function NewsDetailClient({ news }: NewsDetailClientProps) {
|
||||
<section className="pb-16">
|
||||
<div className="container-wide">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
{...fadeUp}
|
||||
whileInView={shouldReduceMotion ? {} : { opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="max-w-4xl"
|
||||
@@ -62,24 +65,24 @@ export function NewsDetailClient({ news }: NewsDetailClientProps) {
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="aspect-video bg-gradient-to-br from-[#FEF2F4] to-[#F5F5F5] rounded-xl mb-8 flex items-center justify-center">
|
||||
<Newspaper className="w-16 h-16 text-[#C41E3A]/30" />
|
||||
<div className="aspect-video bg-gradient-to-br from-[var(--color-brand-primary-bg)] to-[var(--color-bg-tertiary)] rounded-xl mb-8 flex items-center justify-center">
|
||||
<Newspaper className="w-16 h-16 text-[var(--color-brand-primary)]/30" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="border-l-4 border-[#C41E3A] pl-6 mb-8">
|
||||
<p className="text-lg text-[#595959] leading-relaxed">
|
||||
<div className="border-l-4 border-[var(--color-brand-primary)] pl-6 mb-8">
|
||||
<p className="text-lg text-[var(--color-text-muted)] leading-relaxed">
|
||||
{news.excerpt}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="text-[#1C1C1C] leading-relaxed whitespace-pre-line">
|
||||
<div className="text-[var(--color-text-primary)] leading-relaxed whitespace-pre-line">
|
||||
{news.content}
|
||||
</div>
|
||||
|
||||
{relatedNews.length > 0 && (
|
||||
<div className="mt-16 pt-12 border-t border-[#E5E5E5]">
|
||||
<h2 className="text-2xl font-bold text-[#1C1C1C] mb-8">相关新闻</h2>
|
||||
<div className="mt-16 pt-12 border-t border-[var(--color-border)]">
|
||||
<h2 className="text-2xl font-bold text-[var(--color-text-primary)] mb-8">相关新闻</h2>
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
{relatedNews.map((related) => (
|
||||
<StaticLink key={related.id} href={`/news/${related.id}`}>
|
||||
@@ -92,16 +95,16 @@ export function NewsDetailClient({ news }: NewsDetailClientProps) {
|
||||
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-full bg-gradient-to-br from-[#FEF2F4] to-[#F5F5F5] flex items-center justify-center">
|
||||
<Newspaper className="w-8 h-8 text-[#C41E3A]/30" />
|
||||
<div className="w-full h-full bg-gradient-to-br from-[var(--color-brand-primary-bg)] to-[var(--color-bg-tertiary)] flex items-center justify-center">
|
||||
<Newspaper className="w-8 h-8 text-[var(--color-brand-primary)]/30" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<Badge variant="secondary" className="mb-2 text-xs">{related.category}</Badge>
|
||||
<h3 className="text-base font-semibold text-[#1C1C1C] mb-1 line-clamp-2 group-hover:text-[#C41E3A] transition-colors">
|
||||
<h3 className="text-base font-semibold text-[var(--color-text-primary)] mb-1 line-clamp-2 group-hover:text-[var(--color-brand-primary)] transition-colors">
|
||||
{related.title}
|
||||
</h3>
|
||||
<p className="text-sm text-[#595959] line-clamp-2">{related.excerpt}</p>
|
||||
<p className="text-sm text-[var(--color-text-muted)] line-clamp-2">{related.excerpt}</p>
|
||||
</div>
|
||||
</StaticLink>
|
||||
))}
|
||||
@@ -117,7 +120,7 @@ export function NewsDetailClient({ news }: NewsDetailClientProps) {
|
||||
</Button>
|
||||
</StaticLink>
|
||||
<StaticLink href="/contact">
|
||||
<Button size="lg" className="bg-[#C41E3A] hover:bg-[#A01830] text-white">
|
||||
<Button size="lg" className="bg-[var(--color-brand-primary)] hover:bg-[var(--color-brand-primary-hover)] text-white">
|
||||
联系我们
|
||||
</Button>
|
||||
</StaticLink>
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
|
||||
import { useState, useMemo, ChangeEvent } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { useReducedMotion } from '@/hooks/use-reduced-motion';
|
||||
import { NEWS, COMPANY_INFO } from '@/lib/constants';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Input } from '@/components/ui/input';
|
||||
@@ -14,6 +15,8 @@ const categories = ['全部', '公司新闻', '研发动态'];
|
||||
const ITEMS_PER_PAGE = 9;
|
||||
|
||||
export default function NewsListPage() {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
const fadeUp = shouldReduceMotion ? {} : { initial: { opacity: 0, y: 20 } };
|
||||
const [selectedCategory, setSelectedCategory] = useState('全部');
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
@@ -50,21 +53,21 @@ export default function NewsListPage() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
<div className="min-h-screen bg-[var(--color-bg-primary)]">
|
||||
<section className="pt-32 pb-16">
|
||||
<div className="container-wide">
|
||||
<PageNav items={[{ label: '新闻动态' }]} />
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
{...fadeUp}
|
||||
animate={shouldReduceMotion ? {} : { opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="max-w-3xl"
|
||||
>
|
||||
<p className="text-sm font-medium text-[#C41E3A] mb-4 tracking-wide uppercase">News</p>
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-6 tracking-tight">
|
||||
<p className="text-sm font-medium text-[var(--color-brand-primary)] mb-4 tracking-wide uppercase">News</p>
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-[var(--color-text-primary)] mb-6 tracking-tight">
|
||||
新闻动态
|
||||
</h1>
|
||||
<p className="text-lg text-[#595959] leading-relaxed">
|
||||
<p className="text-lg text-[var(--color-text-muted)] leading-relaxed">
|
||||
了解{COMPANY_INFO.displayName}最新动态，把握行业发展脉搏
|
||||
</p>
|
||||
</motion.div>
|
||||
@@ -74,8 +77,8 @@ export default function NewsListPage() {
|
||||
<section className="pb-16">
|
||||
<div className="container-wide">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
{...fadeUp}
|
||||
whileInView={shouldReduceMotion ? {} : { opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="mb-8 space-y-4"
|
||||
@@ -88,7 +91,7 @@ export default function NewsListPage() {
|
||||
onClick={() => handleCategoryChange(category)}
|
||||
className={
|
||||
selectedCategory === category
|
||||
? 'bg-[#C41E3A] hover:bg-[#A01830] text-white'
|
||||
? 'bg-[var(--color-brand-primary)] hover:bg-[var(--color-brand-primary-hover)] text-white'
|
||||
: ''
|
||||
}
|
||||
>
|
||||
@@ -98,7 +101,7 @@ export default function NewsListPage() {
|
||||
</div>
|
||||
|
||||
<div className="relative max-w-md">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[#595959] w-5 h-5" />
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[var(--color-text-muted)] w-5 h-5" />
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="搜索新闻..."
|
||||
@@ -112,8 +115,8 @@ export default function NewsListPage() {
|
||||
|
||||
{paginatedNews.length === 0 ? (
|
||||
<div className="text-center py-20">
|
||||
<Newspaper className="w-12 h-12 text-[#E5E5E5] mx-auto mb-4" />
|
||||
<p className="text-lg text-[#595959]">没有找到相关新闻</p>
|
||||
<Newspaper className="w-12 h-12 text-[var(--color-border)] mx-auto mb-4" />
|
||||
<p className="text-lg text-[var(--color-text-muted)]">没有找到相关新闻</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
@@ -121,15 +124,15 @@ export default function NewsListPage() {
|
||||
{paginatedNews.map((newsItem, index) => (
|
||||
<motion.div
|
||||
key={newsItem.id}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
{...fadeUp}
|
||||
whileInView={shouldReduceMotion ? {} : { opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: index * 0.1 }}
|
||||
>
|
||||
<StaticLink href={`/news/${newsItem.id}`}>
|
||||
<div className="group h-full bg-white rounded-xl border border-[#E5E5E5] overflow-hidden hover:border-[#C41E3A]/30 hover:shadow-md transition-all duration-300">
|
||||
<div className="group h-full bg-[var(--color-bg-primary)] rounded-xl border border-[var(--color-border)] overflow-hidden hover:border-[var(--color-brand-primary)]/30 hover:shadow-md transition-all duration-300">
|
||||
{newsItem.image ? (
|
||||
<div className="aspect-video bg-[#F5F5F5] overflow-hidden">
|
||||
<div className="aspect-video bg-[var(--color-bg-tertiary)] overflow-hidden">
|
||||
<img
|
||||
src={newsItem.image}
|
||||
alt={newsItem.title}
|
||||
@@ -137,25 +140,25 @@ export default function NewsListPage() {
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="aspect-video bg-gradient-to-br from-[#FEF2F4] to-[#F5F5F5] flex items-center justify-center">
|
||||
<Newspaper className="w-12 h-12 text-[#C41E3A]/30" />
|
||||
<div className="aspect-video bg-gradient-to-br from-[var(--color-brand-primary-bg)] to-[var(--color-bg-tertiary)] flex items-center justify-center">
|
||||
<Newspaper className="w-12 h-12 text-[var(--color-brand-primary)]/30" />
|
||||
</div>
|
||||
)}
|
||||
<div className="p-6">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<Badge variant="secondary" className="text-xs">{newsItem.category}</Badge>
|
||||
<div className="flex items-center gap-1 text-xs text-[#595959]">
|
||||
<div className="flex items-center gap-1 text-xs text-[var(--color-text-muted)]">
|
||||
<Calendar className="w-3 h-3" />
|
||||
{newsItem.date}
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-[#1C1C1C] mb-2 line-clamp-2 group-hover:text-[#C41E3A] transition-colors">
|
||||
<h3 className="text-lg font-semibold text-[var(--color-text-primary)] mb-2 line-clamp-2 group-hover:text-[var(--color-brand-primary)] transition-colors">
|
||||
{newsItem.title}
|
||||
</h3>
|
||||
<p className="text-sm text-[#595959] line-clamp-3 mb-4">
|
||||
<p className="text-sm text-[var(--color-text-muted)] line-clamp-3 mb-4">
|
||||
{newsItem.excerpt}
|
||||
</p>
|
||||
<div className="flex items-center text-[#C41E3A] text-sm font-medium">
|
||||
<div className="flex items-center text-[var(--color-brand-primary)] text-sm font-medium">
|
||||
阅读更多
|
||||
<ArrowRight className="ml-1 w-4 h-4 group-hover:translate-x-1 transition-transform" />
|
||||
</div>
|
||||
@@ -184,7 +187,7 @@ export default function NewsListPage() {
|
||||
onClick={() => handlePageChange(page)}
|
||||
className={
|
||||
currentPage === page
|
||||
? 'bg-[#C41E3A] hover:bg-[#A01830] text-white'
|
||||
? 'bg-[var(--color-brand-primary)] hover:bg-[var(--color-brand-primary-hover)] text-white'
|
||||
: ''
|
||||
}
|
||||
>
|
||||
|
||||
@@ -34,28 +34,28 @@ export default async function ProductDetailPage({ params }: { params: Promise<{
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
<div className="min-h-screen bg-[var(--color-bg-primary)]">
|
||||
<div className="pt-32 pb-16">
|
||||
<div className="container-wide">
|
||||
<PageNav items={[{ label: '产品', href: '/products' }, { label: product.title }]} />
|
||||
<div className="max-w-4xl mt-8">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<p className="text-sm font-medium text-[#C41E3A] tracking-wide uppercase">{product.category}</p>
|
||||
<p className="text-sm font-medium text-[var(--color-brand-primary)] tracking-wide uppercase">{product.category}</p>
|
||||
<span
|
||||
className="text-xs font-medium px-3 py-1 rounded-full border"
|
||||
style={{
|
||||
backgroundColor: 'rgba(196, 30, 58, 0.08)',
|
||||
color: '#C41E3A',
|
||||
borderColor: 'rgba(196, 30, 58, 0.15)',
|
||||
backgroundColor: 'rgba(var(--color-brand-primary-rgb), 0.08)',
|
||||
color: 'var(--color-brand-primary)',
|
||||
borderColor: 'rgba(var(--color-brand-primary-rgb), 0.15)',
|
||||
}}
|
||||
>
|
||||
{product.status}
|
||||
</span>
|
||||
</div>
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-6 tracking-tight">
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-[var(--color-text-primary)] mb-6 tracking-tight">
|
||||
{product.title}
|
||||
</h1>
|
||||
<p className="text-xl text-[#595959] leading-relaxed">
|
||||
<p className="text-xl text-[var(--color-text-muted)] leading-relaxed">
|
||||
{product.description}
|
||||
</p>
|
||||
</div>
|
||||
@@ -64,92 +64,92 @@ export default async function ProductDetailPage({ params }: { params: Promise<{
|
||||
|
||||
<div className="container-wide pb-20">
|
||||
<div className="max-w-4xl space-y-16">
|
||||
<section>
|
||||
<h2 className="text-2xl font-bold text-[#1C1C1C] mb-6">产品概述</h2>
|
||||
<p className="text-lg text-[#595959] leading-relaxed">
|
||||
<section aria-labelledby="product-overview">
|
||||
<h2 id="product-overview" className="text-2xl font-bold text-[var(--color-text-primary)] mb-6">产品概述</h2>
|
||||
<p className="text-lg text-[var(--color-text-muted)] leading-relaxed">
|
||||
{product.overview}
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-2xl font-bold text-[#1C1C1C] mb-6 flex items-center gap-3">
|
||||
<Zap className="w-6 h-6 text-[#C41E3A]" />
|
||||
<section aria-labelledby="product-features">
|
||||
<h2 id="product-features" className="text-2xl font-bold text-[var(--color-text-primary)] mb-6 flex items-center gap-3">
|
||||
<Zap className="w-6 h-6 text-[var(--color-brand-primary)]" />
|
||||
规划功能
|
||||
</h2>
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
{product.features.map((feature, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex items-start gap-3 p-4 bg-[#F5F5F5] rounded-lg hover:bg-[#FEF2F4] transition-colors"
|
||||
className="flex items-start gap-3 p-4 bg-[var(--color-bg-tertiary)] rounded-lg hover:bg-[var(--color-brand-primary-bg)] transition-colors"
|
||||
>
|
||||
<CheckCircle2 className="w-5 h-5 text-[#C41E3A] mt-0.5 shrink-0" />
|
||||
<span className="text-[#1C1C1C] text-sm">{feature}</span>
|
||||
<CheckCircle2 className="w-5 h-5 text-[var(--color-brand-primary)] mt-0.5 shrink-0" />
|
||||
<span className="text-[var(--color-text-primary)] text-sm">{feature}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-2xl font-bold text-[#1C1C1C] mb-6 flex items-center gap-3">
|
||||
<Target className="w-6 h-6 text-[#C41E3A]" />
|
||||
<section aria-labelledby="product-benefits">
|
||||
<h2 id="product-benefits" className="text-2xl font-bold text-[var(--color-text-primary)] mb-6 flex items-center gap-3">
|
||||
<Target className="w-6 h-6 text-[var(--color-brand-primary)]" />
|
||||
产品优势
|
||||
</h2>
|
||||
<div className="space-y-3">
|
||||
{product.benefits.map((benefit, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex items-start gap-3 p-4 rounded-lg border-l-4 border-[#C41E3A] bg-[#FAFAFA]"
|
||||
className="flex items-start gap-3 p-4 rounded-lg border-l-4 border-[var(--color-brand-primary)] bg-[var(--color-bg-section)]"
|
||||
>
|
||||
<span className="text-[#1C1C1C] font-medium text-sm">{benefit}</span>
|
||||
<span className="text-[var(--color-text-primary)] font-medium text-sm">{benefit}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-2xl font-bold text-[#1C1C1C] mb-6 flex items-center gap-3">
|
||||
<Layers className="w-6 h-6 text-[#C41E3A]" />
|
||||
<section aria-labelledby="product-process">
|
||||
<h2 id="product-process" className="text-2xl font-bold text-[var(--color-text-primary)] mb-6 flex items-center gap-3">
|
||||
<Layers className="w-6 h-6 text-[var(--color-brand-primary)]" />
|
||||
预期实施流程
|
||||
</h2>
|
||||
<div className="space-y-4">
|
||||
{product.process.map((step, index) => (
|
||||
<div key={index} className="flex items-start gap-4">
|
||||
<div className="w-8 h-8 bg-[#C41E3A] rounded-full flex items-center justify-center shrink-0 text-white text-sm font-bold">
|
||||
<div className="w-8 h-8 bg-[var(--color-brand-primary)] rounded-full flex items-center justify-center shrink-0 text-white text-sm font-bold">
|
||||
{index + 1}
|
||||
</div>
|
||||
<p className="text-[#1C1C1C] pt-1">{step}</p>
|
||||
<p className="text-[var(--color-text-primary)] pt-1">{step}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-2xl font-bold text-[#1C1C1C] mb-6">技术规格</h2>
|
||||
<section aria-labelledby="product-specs">
|
||||
<h2 id="product-specs" className="text-2xl font-bold text-[var(--color-text-primary)] mb-6">技术规格</h2>
|
||||
<div className="grid md:grid-cols-2 gap-3">
|
||||
{product.specs.map((spec, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex items-center gap-3 p-3 bg-[#F5F5F5] rounded-lg"
|
||||
className="flex items-center gap-3 p-3 bg-[var(--color-bg-tertiary)] rounded-lg"
|
||||
>
|
||||
<div className="w-1.5 h-1.5 bg-[#C41E3A] rounded-full" />
|
||||
<span className="text-[#1C1C1C] text-sm">{spec}</span>
|
||||
<div className="w-1.5 h-1.5 bg-[var(--color-brand-primary)] rounded-full" />
|
||||
<span className="text-[var(--color-text-primary)] text-sm">{spec}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="bg-[#FEF2F4] rounded-2xl p-8 md:p-10">
|
||||
<section className="bg-[var(--color-brand-primary-bg)] rounded-2xl p-8 md:p-10" aria-labelledby="product-pricing">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="w-12 h-12 bg-[#C41E3A] rounded-xl flex items-center justify-center shrink-0">
|
||||
<div className="w-12 h-12 bg-[var(--color-brand-primary)] rounded-xl flex items-center justify-center shrink-0">
|
||||
<FlaskConical className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-[#1C1C1C] mb-3">定价待公布</h2>
|
||||
<p className="text-[#595959] leading-relaxed mb-6">
|
||||
<h2 id="product-pricing" className="text-2xl font-bold text-[var(--color-text-primary)] mb-3">定价待公布</h2>
|
||||
<p className="text-[var(--color-text-muted)] leading-relaxed mb-6">
|
||||
本产品正在研发中，正式定价将在产品发布时公布。如果您对产品方向感兴趣，欢迎预约早期体验，您的反馈将帮助我们打造更贴合需求的产品。
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Button size="lg" className="bg-[#C41E3A] hover:bg-[#A01830] text-white" asChild>
|
||||
<Button size="lg" className="bg-[var(--color-brand-primary)] hover:bg-[var(--color-brand-primary-hover)] text-white" asChild>
|
||||
<StaticLink href="/contact">
|
||||
预约体验
|
||||
<ArrowRight className="ml-2 w-4 h-4" />
|
||||
@@ -163,11 +163,11 @@ export default async function ProductDetailPage({ params }: { params: Promise<{
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="flex justify-center gap-4 pt-8 border-t border-[#E5E5E5]">
|
||||
<div className="flex justify-center gap-4 pt-8 border-t border-[var(--color-border-primary)]">
|
||||
<Button variant="outline" size="lg" asChild>
|
||||
<StaticLink href="/contact">关注进展</StaticLink>
|
||||
</Button>
|
||||
<Button size="lg" className="bg-[#C41E3A] hover:bg-[#A01830] text-white" asChild>
|
||||
<Button size="lg" className="bg-[var(--color-brand-primary)] hover:bg-[var(--color-brand-primary-hover)] text-white" asChild>
|
||||
<StaticLink href="/contact">
|
||||
预约体验
|
||||
<ArrowRight className="ml-2 w-4 h-4" />
|
||||
|
||||
@@ -2,29 +2,32 @@
|
||||
|
||||
import { PRODUCTS } from '@/lib/constants';
|
||||
import { ProductCard } from '@/components/ui/product-card';
|
||||
import { StaticLink } from '@/components/ui/static-link';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { ArrowRight } from 'lucide-react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { useReducedMotion } from '@/hooks/use-reduced-motion';
|
||||
import { PageNav } from '@/components/layout/page-nav';
|
||||
import { CTASection } from '@/components/sections/cta-section';
|
||||
import { BreadcrumbSchema } from '@/components/seo/structured-data';
|
||||
|
||||
export default function ProductsPage() {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
const fadeUp = shouldReduceMotion ? {} : { initial: { opacity: 0, y: 20 } };
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
<div className="min-h-screen bg-[var(--color-bg-primary)]">
|
||||
<BreadcrumbSchema items={[{ name: '首页', href: '/' }, { name: '产品', href: '/products' }]} />
|
||||
<section className="pt-32 pb-16">
|
||||
<div className="container-wide">
|
||||
<PageNav items={[{ label: '产品' }]} />
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
{...fadeUp}
|
||||
animate={shouldReduceMotion ? {} : { opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="max-w-3xl"
|
||||
>
|
||||
<p className="text-sm font-medium text-[#C41E3A] mb-4 tracking-wide uppercase">Products</p>
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-6 tracking-tight">
|
||||
<p className="text-sm font-medium text-[var(--color-brand-primary)] mb-4 tracking-wide uppercase">Products</p>
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-[var(--color-text-primary)] mb-6 tracking-tight">
|
||||
产品
|
||||
</h1>
|
||||
<p className="text-lg text-[#595959] leading-relaxed">
|
||||
<p className="text-lg text-[var(--color-text-muted)] leading-relaxed">
|
||||
我们正在打造的企业级产品，致力于助力企业高效运营，实现数字化转型
|
||||
</p>
|
||||
</motion.div>
|
||||
@@ -33,7 +36,7 @@ export default function ProductsPage() {
|
||||
|
||||
<section className="pb-20">
|
||||
<div className="container-wide">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{PRODUCTS.map((product, index) => (
|
||||
<ProductCard
|
||||
key={product.id}
|
||||
@@ -48,26 +51,14 @@ export default function ProductsPage() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="bg-[#F5F5F5] py-20">
|
||||
<div className="container-wide text-center">
|
||||
<h2 className="text-3xl font-bold text-[#1C1C1C] mb-6">
|
||||
期待与您共同打磨产品
|
||||
</h2>
|
||||
<p className="text-lg text-[#595959] mb-8 max-w-2xl mx-auto">
|
||||
我们的产品正在研发中，如果您对产品方向有建议或希望参与早期体验，欢迎联系我们
|
||||
</p>
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-[#C41E3A] hover:bg-[#A01830] text-white"
|
||||
asChild
|
||||
>
|
||||
<StaticLink href="/contact">
|
||||
预约体验
|
||||
<ArrowRight className="ml-2 w-4 h-4" />
|
||||
</StaticLink>
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
<CTASection
|
||||
title="期待与您共同打磨产品"
|
||||
description="我们的产品正在研发中，如果您对产品方向有建议或希望参与早期体验，欢迎联系我们"
|
||||
primaryLabel="预约体验"
|
||||
primaryHref="/contact"
|
||||
secondaryLabel="了解方案"
|
||||
secondaryHref="/solutions"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -72,16 +72,16 @@ export function ServiceDetailClient({ service }: ServiceDetailClientProps) {
|
||||
const serviceOutcomes = outcomes[service.id] ?? [];
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
<div className="min-h-screen bg-[var(--color-bg-primary)]">
|
||||
<div className="pt-32 pb-16">
|
||||
<div className="container-wide">
|
||||
<PageNav items={[{ label: '服务', href: '/services' }, { label: service.title }]} />
|
||||
<div className="max-w-4xl mt-8">
|
||||
<p className="text-sm font-medium text-[#C41E3A] mb-4 tracking-wide uppercase">Services</p>
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-6 tracking-tight">
|
||||
<p className="text-sm font-medium text-[var(--color-brand-primary)] mb-4 tracking-wide uppercase">Services</p>
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-[var(--color-text-primary)] mb-6 tracking-tight">
|
||||
{service.title}
|
||||
</h1>
|
||||
<p className="text-xl text-[#595959] leading-relaxed">
|
||||
<p className="text-xl text-[var(--color-text-muted)] leading-relaxed">
|
||||
{service.description}
|
||||
</p>
|
||||
</div>
|
||||
@@ -92,19 +92,19 @@ export function ServiceDetailClient({ service }: ServiceDetailClientProps) {
|
||||
<div className="max-w-4xl space-y-16">
|
||||
<section>
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-10 h-10 bg-[#FEF2F4] rounded-lg flex items-center justify-center">
|
||||
<MessageCircle className="w-5 h-5 text-[#C41E3A]" />
|
||||
<div className="w-10 h-10 bg-[var(--color-brand-primary-bg)] rounded-lg flex items-center justify-center">
|
||||
<MessageCircle className="w-5 h-5 text-[var(--color-brand-primary)]" />
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold text-[#1C1C1C]">您可能面临的挑战</h2>
|
||||
<h2 className="text-2xl font-bold text-[var(--color-text-primary)]">您可能面临的挑战</h2>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
{serviceChallenges.map((challenge, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="p-4 bg-[#F5F5F5] rounded-lg hover:bg-[#FEF2F4] transition-colors"
|
||||
className="p-4 bg-[var(--color-bg-tertiary)] rounded-lg hover:bg-[var(--color-brand-primary-bg)] transition-colors"
|
||||
>
|
||||
<h3 className="font-semibold text-[#1C1C1C] mb-1 text-sm">{challenge.title}</h3>
|
||||
<p className="text-sm text-[#595959]">{challenge.description}</p>
|
||||
<h3 className="font-semibold text-[var(--color-text-primary)] mb-1 text-sm">{challenge.title}</h3>
|
||||
<p className="text-sm text-[var(--color-text-muted)]">{challenge.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -112,19 +112,19 @@ export function ServiceDetailClient({ service }: ServiceDetailClientProps) {
|
||||
|
||||
<section>
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-10 h-10 bg-[#FEF2F4] rounded-lg flex items-center justify-center">
|
||||
<Target className="w-5 h-5 text-[#C41E3A]" />
|
||||
<div className="w-10 h-10 bg-[var(--color-brand-primary-bg)] rounded-lg flex items-center justify-center">
|
||||
<Target className="w-5 h-5 text-[var(--color-brand-primary)]" />
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold text-[#1C1C1C]">我们如何帮助您</h2>
|
||||
<h2 className="text-2xl font-bold text-[var(--color-text-primary)]">我们如何帮助您</h2>
|
||||
</div>
|
||||
<p className="text-lg text-[#595959] leading-relaxed mb-6">
|
||||
<p className="text-lg text-[var(--color-text-muted)] leading-relaxed mb-6">
|
||||
{service.overview}
|
||||
</p>
|
||||
<div className="space-y-3">
|
||||
{service.features.map((feature, index) => (
|
||||
<div key={index} className="flex items-start gap-3">
|
||||
<CheckCircle2 className="w-5 h-5 text-[#C41E3A] mt-0.5 shrink-0" />
|
||||
<span className="text-[#1C1C1C] text-sm">{feature}</span>
|
||||
<CheckCircle2 className="w-5 h-5 text-[var(--color-brand-primary)] mt-0.5 shrink-0" />
|
||||
<span className="text-[var(--color-text-primary)] text-sm">{feature}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -132,18 +132,18 @@ export function ServiceDetailClient({ service }: ServiceDetailClientProps) {
|
||||
|
||||
<section>
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-10 h-10 bg-[#FEF2F4] rounded-lg flex items-center justify-center">
|
||||
<Clock className="w-5 h-5 text-[#C41E3A]" />
|
||||
<div className="w-10 h-10 bg-[var(--color-brand-primary-bg)] rounded-lg flex items-center justify-center">
|
||||
<Clock className="w-5 h-5 text-[var(--color-brand-primary)]" />
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold text-[#1C1C1C]">服务流程</h2>
|
||||
<h2 className="text-2xl font-bold text-[var(--color-text-primary)]">服务流程</h2>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
{service.process.map((step, index) => (
|
||||
<div key={index} className="flex items-start gap-4">
|
||||
<div className="w-8 h-8 bg-[#C41E3A] rounded-full flex items-center justify-center shrink-0 text-white text-sm font-bold">
|
||||
<div className="w-8 h-8 bg-[var(--color-brand-primary)] rounded-full flex items-center justify-center shrink-0 text-white text-sm font-bold">
|
||||
{index + 1}
|
||||
</div>
|
||||
<p className="text-[#1C1C1C] pt-1">{step}</p>
|
||||
<p className="text-[var(--color-text-primary)] pt-1">{step}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -151,37 +151,37 @@ export function ServiceDetailClient({ service }: ServiceDetailClientProps) {
|
||||
|
||||
<section>
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-10 h-10 bg-[#FEF2F4] rounded-lg flex items-center justify-center">
|
||||
<TrendingUp className="w-5 h-5 text-[#C41E3A]" />
|
||||
<div className="w-10 h-10 bg-[var(--color-brand-primary-bg)] rounded-lg flex items-center justify-center">
|
||||
<TrendingUp className="w-5 h-5 text-[var(--color-brand-primary)]" />
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold text-[#1C1C1C]">您将获得的改变</h2>
|
||||
<h2 className="text-2xl font-bold text-[var(--color-text-primary)]">您将获得的改变</h2>
|
||||
</div>
|
||||
<div className="grid sm:grid-cols-3 gap-4">
|
||||
{serviceOutcomes.map((outcome, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="p-6 bg-[#F5F5F5] rounded-lg text-center hover:bg-[#FEF2F4] transition-colors"
|
||||
className="p-6 bg-[var(--color-bg-tertiary)] rounded-lg text-center hover:bg-[var(--color-brand-primary-bg)] transition-colors"
|
||||
>
|
||||
<div className="text-3xl font-bold text-[#C41E3A] mb-2">
|
||||
<div className="text-3xl font-bold text-[var(--color-brand-primary)] mb-2">
|
||||
{outcome.value}
|
||||
</div>
|
||||
<div className="text-sm text-[#595959]">{outcome.label}</div>
|
||||
<div className="text-sm text-[var(--color-text-muted)]">{outcome.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="mt-4 p-4 bg-[#F5F5F5] rounded-lg">
|
||||
<p className="text-sm text-[#595959]">
|
||||
<div className="mt-4 p-4 bg-[var(--color-bg-tertiary)] rounded-lg">
|
||||
<p className="text-sm text-[var(--color-text-muted)]">
|
||||
{service.benefits.join('；')}
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="flex justify-center gap-4 pt-8 border-t border-[#E5E5E5]">
|
||||
<div className="flex justify-center gap-4 pt-8 border-t border-[var(--color-border-primary)]">
|
||||
<StaticLink href="/services">
|
||||
<Button variant="outline" size="lg">查看其他服务</Button>
|
||||
</StaticLink>
|
||||
<StaticLink href="/contact">
|
||||
<Button size="lg" className="bg-[#C41E3A] hover:bg-[#A01830] text-white">
|
||||
<Button size="lg" className="bg-[var(--color-brand-primary)] hover:bg-[var(--color-brand-primary-hover)] text-white">
|
||||
开始您的转型之旅
|
||||
<ArrowRight className="ml-2 w-4 h-4" />
|
||||
</Button>
|
||||
|
||||
@@ -5,25 +5,28 @@ import { StaticLink } from '@/components/ui/static-link';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { ArrowRight, ArrowUpRight } from 'lucide-react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { useReducedMotion } from '@/hooks/use-reduced-motion';
|
||||
import { PageNav } from '@/components/layout/page-nav';
|
||||
|
||||
export default function ServicesPage() {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
const fadeUp = shouldReduceMotion ? {} : { initial: { opacity: 0, y: 20 } };
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
<div className="min-h-screen bg-[var(--color-bg-primary)]">
|
||||
<section className="pt-32 pb-16">
|
||||
<div className="container-wide">
|
||||
<PageNav items={[{ label: '服务' }]} />
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
{...fadeUp}
|
||||
animate={shouldReduceMotion ? {} : { opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="max-w-3xl"
|
||||
>
|
||||
<p className="text-sm font-medium text-[#C41E3A] mb-4 tracking-wide uppercase">Services</p>
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-6 tracking-tight">
|
||||
<p className="text-sm font-medium text-[var(--color-brand-primary)] mb-4 tracking-wide uppercase">Services</p>
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-[var(--color-text-primary)] mb-6 tracking-tight">
|
||||
服务
|
||||
</h1>
|
||||
<p className="text-lg text-[#595959] leading-relaxed">
|
||||
<p className="text-lg text-[var(--color-text-muted)] leading-relaxed">
|
||||
专业技术团队，为您提供全方位的数字化解决方案
|
||||
</p>
|
||||
</motion.div>
|
||||
@@ -36,32 +39,32 @@ export default function ServicesPage() {
|
||||
{SERVICES.map((service, index) => (
|
||||
<motion.div
|
||||
key={service.id}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
{...fadeUp}
|
||||
whileInView={shouldReduceMotion ? {} : { opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.4, delay: index * 0.1, ease: [0.16, 1, 0.3, 1] }}
|
||||
>
|
||||
<StaticLink
|
||||
href={`/services/${service.id}`}
|
||||
className="group block p-6 rounded-xl border border-[#E5E5E5] bg-white hover:border-[#C41E3A]/40 hover:shadow-lg transition-all duration-300 h-full"
|
||||
className="group block p-6 rounded-xl border border-[var(--color-border-primary)] bg-[var(--color-bg-primary)] hover:border-[var(--color-brand-primary)]/40 hover:shadow-lg transition-all duration-300 h-full"
|
||||
>
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<span className="inline-flex items-center justify-center w-10 h-10 rounded-lg bg-[#FEF2F4] text-[#C41E3A] text-sm font-bold">
|
||||
<span className="inline-flex items-center justify-center w-10 h-10 rounded-lg bg-[var(--color-brand-primary-bg)] text-[var(--color-brand-primary)] text-sm font-bold">
|
||||
{String(index + 1).padStart(2, '0')}
|
||||
</span>
|
||||
<ArrowUpRight className="w-5 h-5 text-[#595959] group-hover:text-[#C41E3A] transition-colors" />
|
||||
<ArrowUpRight className="w-5 h-5 text-[var(--color-text-muted)] group-hover:text-[var(--color-brand-primary)] transition-colors" />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-[#1C1C1C] mb-2 group-hover:text-[#C41E3A] transition-colors">
|
||||
<h3 className="text-lg font-semibold text-[var(--color-text-primary)] mb-2 group-hover:text-[var(--color-brand-primary)] transition-colors">
|
||||
{service.title}
|
||||
</h3>
|
||||
<p className="text-sm text-[#595959] leading-relaxed mb-4">
|
||||
<p className="text-sm text-[var(--color-text-muted)] leading-relaxed mb-4">
|
||||
{service.description}
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{service.features.slice(0, 3).map((feature, idx) => (
|
||||
<span
|
||||
key={idx}
|
||||
className="inline-flex items-center text-xs px-2 py-1 bg-[#F5F5F5] text-[#595959] rounded"
|
||||
className="inline-flex items-center text-xs px-2 py-1 bg-[var(--color-bg-tertiary)] text-[var(--color-text-muted)] rounded"
|
||||
>
|
||||
{feature.split('：')[0]}
|
||||
</span>
|
||||
@@ -74,17 +77,17 @@ export default function ServicesPage() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="bg-[#F5F5F5] py-20">
|
||||
<section className="bg-[var(--color-bg-tertiary)] py-20">
|
||||
<div className="container-wide text-center">
|
||||
<h2 className="text-3xl font-bold text-[#1C1C1C] mb-6">
|
||||
<h2 className="text-3xl font-bold text-[var(--color-text-primary)] mb-6">
|
||||
准备开始您的数字化转型之旅？
|
||||
</h2>
|
||||
<p className="text-lg text-[#595959] mb-8 max-w-2xl mx-auto">
|
||||
<p className="text-lg text-[var(--color-text-muted)] mb-8 max-w-2xl mx-auto">
|
||||
让我们与您同行，共创美好未来
|
||||
</p>
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-[#C41E3A] hover:bg-[#A01830] text-white"
|
||||
className="bg-[var(--color-brand-primary)] hover:bg-[var(--color-brand-primary-hover)] text-white"
|
||||
asChild
|
||||
>
|
||||
<StaticLink href="/contact">
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import { useReducedMotion } from '@/hooks/use-reduced-motion';
|
||||
import { StaticLink } from '@/components/ui/static-link';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { PageNav } from '@/components/layout/page-nav';
|
||||
@@ -14,25 +15,27 @@ interface SolutionDetailClientProps {
|
||||
}
|
||||
|
||||
export function SolutionDetailClient({ solution, relatedProducts }: SolutionDetailClientProps) {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
const fadeUp = shouldReduceMotion ? {} : { initial: { opacity: 0, y: 20 } };
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
<div className="min-h-screen bg-[var(--color-bg-primary)]">
|
||||
<div className="pt-32 pb-16">
|
||||
<div className="container-wide">
|
||||
<PageNav items={[{ label: '解决方案', href: '/solutions' }, { label: solution.title }]} />
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
{...fadeUp}
|
||||
animate={shouldReduceMotion ? {} : { opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="max-w-4xl mt-8"
|
||||
>
|
||||
<p className="text-sm font-medium text-[#C41E3A] mb-4 tracking-wide uppercase">
|
||||
<p className="text-sm font-medium text-[var(--color-brand-primary)] mb-4 tracking-wide uppercase">
|
||||
{solution.industry}
|
||||
</p>
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-4 tracking-tight">
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-[var(--color-text-primary)] mb-4 tracking-tight">
|
||||
{solution.title}
|
||||
</h1>
|
||||
<p className="text-xl text-[#595959] mb-2">{solution.subtitle}</p>
|
||||
<p className="text-lg text-[#595959] leading-relaxed">
|
||||
<p className="text-xl text-[var(--color-text-muted)] mb-2">{solution.subtitle}</p>
|
||||
<p className="text-lg text-[var(--color-text-muted)] leading-relaxed">
|
||||
{solution.description}
|
||||
</p>
|
||||
</motion.div>
|
||||
@@ -42,44 +45,44 @@ export function SolutionDetailClient({ solution, relatedProducts }: SolutionDeta
|
||||
<div className="container-wide pb-20">
|
||||
<div className="max-w-4xl space-y-16">
|
||||
<motion.section
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
{...fadeUp}
|
||||
whileInView={shouldReduceMotion ? {} : { opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5 }}
|
||||
>
|
||||
<h2 className="text-2xl font-bold text-[#1C1C1C] mb-6 flex items-center gap-3">
|
||||
<AlertTriangle className="w-6 h-6 text-[#C41E3A]" />
|
||||
<h2 className="text-2xl font-bold text-[var(--color-text-primary)] mb-6 flex items-center gap-3">
|
||||
<AlertTriangle className="w-6 h-6 text-[var(--color-brand-primary)]" />
|
||||
行业痛点
|
||||
</h2>
|
||||
<div className="space-y-3">
|
||||
{solution.challenges.map((challenge, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex items-start gap-3 p-4 rounded-lg border-l-4 border-[#C41E3A] bg-[#FAFAFA]"
|
||||
className="flex items-start gap-3 p-4 rounded-lg border-l-4 border-[var(--color-brand-primary)] bg-[var(--color-bg-section)]"
|
||||
>
|
||||
<span className="text-[#1C1C1C] text-sm">{challenge}</span>
|
||||
<span className="text-[var(--color-text-primary)] text-sm">{challenge}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</motion.section>
|
||||
|
||||
<motion.section
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
{...fadeUp}
|
||||
whileInView={shouldReduceMotion ? {} : { opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: 0.1 }}
|
||||
>
|
||||
<h2 className="text-2xl font-bold text-[#1C1C1C] mb-6 flex items-center gap-3">
|
||||
<CheckCircle2 className="w-6 h-6 text-[#C41E3A]" />
|
||||
<h2 className="text-2xl font-bold text-[var(--color-text-primary)] mb-6 flex items-center gap-3">
|
||||
<CheckCircle2 className="w-6 h-6 text-[var(--color-brand-primary)]" />
|
||||
解决方案
|
||||
</h2>
|
||||
<div className="space-y-4">
|
||||
{solution.solutions.map((sol, index) => (
|
||||
<div key={index} className="flex items-start gap-4">
|
||||
<div className="w-8 h-8 bg-[#C41E3A] rounded-full flex items-center justify-center shrink-0 text-white text-sm font-bold">
|
||||
<div className="w-8 h-8 bg-[var(--color-brand-primary)] rounded-full flex items-center justify-center shrink-0 text-white text-sm font-bold">
|
||||
{index + 1}
|
||||
</div>
|
||||
<p className="text-[#1C1C1C] pt-1 leading-relaxed">{sol}</p>
|
||||
<p className="text-[var(--color-text-primary)] pt-1 leading-relaxed">{sol}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -87,13 +90,13 @@ export function SolutionDetailClient({ solution, relatedProducts }: SolutionDeta
|
||||
|
||||
{relatedProducts.length > 0 && (
|
||||
<motion.section
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
{...fadeUp}
|
||||
whileInView={shouldReduceMotion ? {} : { opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: 0.2 }}
|
||||
>
|
||||
<h2 className="text-2xl font-bold text-[#1C1C1C] mb-6 flex items-center gap-3">
|
||||
<Package className="w-6 h-6 text-[#C41E3A]" />
|
||||
<h2 className="text-2xl font-bold text-[var(--color-text-primary)] mb-6 flex items-center gap-3">
|
||||
<Package className="w-6 h-6 text-[var(--color-brand-primary)]" />
|
||||
相关产品
|
||||
</h2>
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
@@ -101,26 +104,26 @@ export function SolutionDetailClient({ solution, relatedProducts }: SolutionDeta
|
||||
<StaticLink
|
||||
key={product.id}
|
||||
href={`/products/${product.id}`}
|
||||
className="group block p-6 rounded-xl border border-[#E5E5E5] bg-white hover:border-[#C41E3A]/40 hover:shadow-lg transition-all duration-300"
|
||||
className="group block p-6 rounded-xl border border-[var(--color-border-primary)] bg-[var(--color-bg-primary)] hover:border-[var(--color-brand-primary)]/40 hover:shadow-lg transition-all duration-300"
|
||||
>
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<h3 className="text-lg font-semibold text-[#1C1C1C] group-hover:text-[#C41E3A] transition-colors">
|
||||
<h3 className="text-lg font-semibold text-[var(--color-text-primary)] group-hover:text-[var(--color-brand-primary)] transition-colors">
|
||||
{product.title}
|
||||
</h3>
|
||||
{product.status && (
|
||||
<span
|
||||
className="text-xs font-medium px-3 py-1 rounded-full border shrink-0"
|
||||
style={{
|
||||
backgroundColor: product.status === '研发中' ? 'rgba(196, 30, 58, 0.08)' : product.status === '内测中' ? 'rgba(217, 119, 6, 0.08)' : 'rgba(22, 163, 74, 0.08)',
|
||||
color: product.status === '研发中' ? '#C41E3A' : product.status === '内测中' ? '#D97706' : '#16A34A',
|
||||
borderColor: product.status === '研发中' ? 'rgba(196, 30, 58, 0.15)' : product.status === '内测中' ? 'rgba(217, 119, 6, 0.15)' : 'rgba(22, 163, 74, 0.15)',
|
||||
backgroundColor: product.status === '研发中' ? 'rgba(var(--color-brand-primary-rgb), 0.08)' : product.status === '内测中' ? 'rgba(var(--color-warning-rgb), 0.08)' : 'rgba(var(--color-success-rgb), 0.08)',
|
||||
color: product.status === '研发中' ? 'var(--color-brand-primary)' : product.status === '内测中' ? 'var(--color-warning)' : 'var(--color-success)',
|
||||
borderColor: product.status === '研发中' ? 'rgba(var(--color-brand-primary-rgb), 0.15)' : product.status === '内测中' ? 'rgba(var(--color-warning-rgb), 0.15)' : 'rgba(var(--color-success-rgb), 0.15)',
|
||||
}}
|
||||
>
|
||||
{product.status}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-sm text-[#595959] leading-relaxed">
|
||||
<p className="text-sm text-[var(--color-text-muted)] leading-relaxed">
|
||||
{product.description}
|
||||
</p>
|
||||
</StaticLink>
|
||||
@@ -129,11 +132,11 @@ export function SolutionDetailClient({ solution, relatedProducts }: SolutionDeta
|
||||
</motion.section>
|
||||
)}
|
||||
|
||||
<div className="flex justify-center gap-4 pt-8 border-t border-[#E5E5E5]">
|
||||
<div className="flex justify-center gap-4 pt-8 border-t border-[var(--color-border-primary)]">
|
||||
<Button variant="outline" size="lg" asChild>
|
||||
<StaticLink href="/contact">联系我们</StaticLink>
|
||||
</Button>
|
||||
<Button size="lg" className="bg-[#C41E3A] hover:bg-[#A01830] text-white" asChild>
|
||||
<Button size="lg" className="bg-[var(--color-brand-primary)] hover:bg-[var(--color-brand-primary-hover)] text-white" asChild>
|
||||
<StaticLink href="/contact">
|
||||
立即咨询
|
||||
<ArrowRight className="ml-2 w-4 h-4" />
|
||||
|
||||
@@ -1,11 +1,13 @@
|
||||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import { useReducedMotion } from '@/hooks/use-reduced-motion';
|
||||
import { StaticLink } from '@/components/ui/static-link';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { ArrowRight, Lightbulb, Cpu, Users, CheckCircle2 } from 'lucide-react';
|
||||
import { MethodologySection } from '@/components/sections/methodology-section';
|
||||
import { CTASection } from '@/components/sections/cta-section';
|
||||
import { PageNav } from '@/components/layout/page-nav';
|
||||
import { BreadcrumbSchema } from '@/components/seo/structured-data';
|
||||
|
||||
const modules = [
|
||||
{
|
||||
@@ -19,8 +21,10 @@ const modules = [
|
||||
],
|
||||
values: ['行业趋势洞察报告', '数字化转型成熟度评估', '个性化实施路径规划'],
|
||||
cta: '预约一次免费诊断',
|
||||
ctaVariant: 'default' as const,
|
||||
ctaHref: '/contact',
|
||||
accentColor: 'var(--color-brand-primary)',
|
||||
accentBg: 'var(--color-brand-primary-bg)',
|
||||
accentBorder: 'border-l-[var(--color-brand-primary)]',
|
||||
},
|
||||
{
|
||||
icon: Cpu,
|
||||
@@ -33,8 +37,10 @@ const modules = [
|
||||
],
|
||||
values: ['业务场景深度调研', '技术方案定制开发', '敏捷交付快速迭代'],
|
||||
cta: '了解技术方案',
|
||||
ctaVariant: 'outline' as const,
|
||||
ctaHref: '/products',
|
||||
accentColor: 'var(--color-accent-blue)',
|
||||
accentBg: 'rgba(37, 99, 235, 0.08)',
|
||||
accentBorder: 'border-l-[var(--color-accent-blue)]',
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
@@ -47,28 +53,33 @@ const modules = [
|
||||
],
|
||||
values: ['专属客户成功经理', '季度业务复盘会', '7×24小时响应通道'],
|
||||
cta: '了解陪跑服务',
|
||||
ctaVariant: 'default' as const,
|
||||
ctaHref: '/services',
|
||||
accentColor: 'var(--color-success)',
|
||||
accentBg: 'rgba(22, 163, 74, 0.08)',
|
||||
accentBorder: 'border-l-[var(--color-success)]',
|
||||
},
|
||||
];
|
||||
|
||||
export default function SolutionsPage() {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
const fadeUp = shouldReduceMotion ? {} : { initial: { opacity: 0, y: 20 } };
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
<div className="min-h-screen bg-[var(--color-bg-primary)]">
|
||||
<BreadcrumbSchema items={[{ name: '首页', href: '/' }, { name: '解决方案', href: '/solutions' }]} />
|
||||
<section className="pt-32 pb-16">
|
||||
<div className="container-wide">
|
||||
<PageNav items={[{ label: '解决方案' }]} />
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
{...fadeUp}
|
||||
animate={shouldReduceMotion ? {} : { opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="max-w-3xl"
|
||||
>
|
||||
<p className="text-sm font-medium text-[#C41E3A] mb-4 tracking-wide uppercase">Solutions</p>
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-6 tracking-tight">
|
||||
<p className="text-sm font-medium text-[var(--color-brand-primary)] mb-4 tracking-wide uppercase">Solutions</p>
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-[var(--color-text-primary)] mb-6 tracking-tight">
|
||||
三种角色，一种身份——您的成长伙伴
|
||||
</h1>
|
||||
<p className="text-lg text-[#595959] leading-relaxed">
|
||||
<p className="text-lg text-[var(--color-text-muted)] leading-relaxed">
|
||||
我们以伙伴的身份，陪您走过数字化转型的每一步
|
||||
</p>
|
||||
</motion.div>
|
||||
@@ -84,57 +95,65 @@ export default function SolutionsPage() {
|
||||
<motion.section
|
||||
key={index}
|
||||
id={anchorIds[index]}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
{...fadeUp}
|
||||
whileInView={shouldReduceMotion ? {} : { opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: index * 0.1 }}
|
||||
className="p-8 md:p-12 rounded-xl border border-[#E5E5E5] bg-white hover:border-[#C41E3A]/30 transition-colors"
|
||||
className={`p-8 md:p-12 rounded-xl border border-[var(--color-border-primary)] border-l-4 ${module.accentBorder} bg-[var(--color-bg-primary)] hover:border-[var(--color-border-primary)] transition-colors`}
|
||||
>
|
||||
<div className="flex items-start gap-4 mb-6">
|
||||
<div className="w-12 h-12 bg-[#C41E3A] rounded-xl flex items-center justify-center shrink-0">
|
||||
<module.icon className="w-6 h-6 text-white" />
|
||||
<div className="w-12 h-12 rounded-xl flex items-center justify-center shrink-0" style={{ backgroundColor: module.accentBg }}>
|
||||
<module.icon className="w-6 h-6" style={{ color: module.accentColor }} />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-[#1C1C1C] mb-1">
|
||||
<h2 className="text-2xl font-bold text-[var(--color-text-primary)] mb-1">
|
||||
模块{['一', '二', '三'][index]}：{module.title}
|
||||
</h2>
|
||||
<p className="text-[#595959]">{module.subtitle}</p>
|
||||
<p className="text-[var(--color-text-muted)]">{module.subtitle}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4 mb-8">
|
||||
{module.paragraphs.map((p, i) => (
|
||||
<p key={i} className="text-[#1C1C1C] leading-relaxed">{p}</p>
|
||||
<p key={i} className="text-[var(--color-text-primary)] leading-relaxed">{p}</p>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mb-8">
|
||||
<h3 className="text-lg font-semibold text-[#1C1C1C] mb-4 flex items-center gap-2">
|
||||
<CheckCircle2 className="w-5 h-5 text-[#C41E3A]" />
|
||||
<h3 className="text-lg font-semibold text-[var(--color-text-primary)] mb-4 flex items-center gap-2">
|
||||
<CheckCircle2 className="w-5 h-5" style={{ color: module.accentColor }} />
|
||||
核心价值点
|
||||
</h3>
|
||||
<div className="grid md:grid-cols-3 gap-3">
|
||||
{module.values.map((value, i) => (
|
||||
<div key={i} className="flex items-start gap-2 p-3 bg-[#F5F5F5] rounded-lg">
|
||||
<div className="w-1.5 h-1.5 bg-[#C41E3A] rounded-full mt-2 shrink-0" />
|
||||
<span className="text-sm text-[#1C1C1C]">{value}</span>
|
||||
<div key={i} className="flex items-start gap-2 p-3 rounded-lg" style={{ backgroundColor: module.accentBg }}>
|
||||
<div className="w-1.5 h-1.5 rounded-full mt-2 shrink-0" style={{ backgroundColor: module.accentColor }} />
|
||||
<span className="text-sm text-[var(--color-text-primary)]">{value}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center">
|
||||
<Button
|
||||
size="lg"
|
||||
variant={module.ctaVariant}
|
||||
className={module.ctaVariant === 'default' ? 'bg-[#C41E3A] hover:bg-[#A01830] text-white' : 'border-[#C41E3A] text-[#C41E3A] hover:bg-[#C41E3A] hover:text-white'}
|
||||
asChild
|
||||
<StaticLink
|
||||
href={module.ctaHref}
|
||||
className="inline-flex items-center gap-2 px-6 py-3 rounded-lg border-2 font-medium transition-all duration-200 hover:text-white"
|
||||
style={{
|
||||
borderColor: module.accentColor,
|
||||
color: module.accentColor,
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.backgroundColor = module.accentColor;
|
||||
e.currentTarget.style.color = '#fff';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.backgroundColor = 'transparent';
|
||||
e.currentTarget.style.color = module.accentColor;
|
||||
}}
|
||||
>
|
||||
<StaticLink href={module.ctaHref}>
|
||||
{module.cta}
|
||||
<ArrowRight className="ml-2 w-4 h-4" />
|
||||
</StaticLink>
|
||||
</Button>
|
||||
{module.cta}
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</StaticLink>
|
||||
</div>
|
||||
</motion.section>
|
||||
);
|
||||
@@ -145,27 +164,14 @@ export default function SolutionsPage() {
|
||||
|
||||
<MethodologySection />
|
||||
|
||||
<section className="bg-[#F5F5F5] py-20">
|
||||
<div className="container-wide text-center">
|
||||
<h2 className="text-3xl font-bold text-[#1C1C1C] mb-6">
|
||||
准备开始您的数字化转型之旅？
|
||||
</h2>
|
||||
<p className="text-lg text-[#595959] mb-8 max-w-2xl mx-auto">
|
||||
无论您处于哪个阶段，我们都能为您提供合适的解决方案
|
||||
</p>
|
||||
<div className="flex justify-center gap-4">
|
||||
<Button size="lg" variant="outline" asChild>
|
||||
<StaticLink href="/contact">联系我们</StaticLink>
|
||||
</Button>
|
||||
<Button size="lg" className="bg-[#C41E3A] hover:bg-[#A01830] text-white" asChild>
|
||||
<StaticLink href="/contact">
|
||||
立即咨询
|
||||
<ArrowRight className="ml-2 w-4 h-4" />
|
||||
</StaticLink>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<CTASection
|
||||
title="准备开始您的数字化转型之旅？"
|
||||
description="无论您处于哪个阶段，我们都能为您提供合适的解决方案"
|
||||
primaryLabel="立即咨询"
|
||||
primaryHref="/contact"
|
||||
secondaryLabel="联系我们"
|
||||
secondaryHref="/contact"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import { useReducedMotion } from '@/hooks/use-reduced-motion';
|
||||
import { StaticLink } from '@/components/ui/static-link';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Shield, Building2, Users, Code, Target, ArrowRight } from 'lucide-react';
|
||||
@@ -35,22 +36,24 @@ const TEAM_PILLARS = [
|
||||
];
|
||||
|
||||
export function TeamClient() {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
const fadeUp = shouldReduceMotion ? {} : { initial: { opacity: 0, y: 20 } };
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
<div className="min-h-screen bg-[var(--color-bg-primary)]">
|
||||
<section className="pt-32 pb-16">
|
||||
<div className="container-wide">
|
||||
<PageNav items={[{ label: '核心团队' }]} />
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
{...fadeUp}
|
||||
animate={shouldReduceMotion ? {} : { opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="max-w-3xl"
|
||||
>
|
||||
<p className="text-sm font-medium text-[#C41E3A] mb-4 tracking-wide uppercase">Team</p>
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-6 tracking-tight">
|
||||
<p className="text-sm font-medium text-[var(--color-brand-primary)] mb-4 tracking-wide uppercase">Team</p>
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-[var(--color-text-primary)] mb-6 tracking-tight">
|
||||
核心团队
|
||||
</h1>
|
||||
<p className="text-lg text-[#595959] leading-relaxed">
|
||||
<p className="text-lg text-[var(--color-text-muted)] leading-relaxed">
|
||||
核心团队从事技术咨询、企业数字化等行业 12 年+，开发团队成员来自于多个大型传统 IT 企业
|
||||
</p>
|
||||
</motion.div>
|
||||
@@ -61,21 +64,21 @@ export function TeamClient() {
|
||||
<div className="container-wide">
|
||||
<div className="max-w-5xl mx-auto space-y-8">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
{...fadeUp}
|
||||
whileInView={shouldReduceMotion ? {} : { opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="p-8 rounded-xl border border-[#E5E5E5]"
|
||||
className="p-8 rounded-xl border border-[var(--color-border-primary)]"
|
||||
>
|
||||
<h2 className="text-2xl font-bold text-[#1C1C1C] mb-6 text-center">关于我们的团队</h2>
|
||||
<h2 className="text-2xl font-bold text-[var(--color-text-primary)] mb-6 text-center">关于我们的团队</h2>
|
||||
<div className="space-y-4 max-w-3xl mx-auto text-center">
|
||||
<p className="text-[#595959] leading-relaxed">
|
||||
我们的核心团队长期从事<span className="text-[#C41E3A] font-medium">技术咨询</span>、<span className="text-[#C41E3A] font-medium">企业数字化</span>等行业，拥有 12 年以上的深厚积累。
|
||||
<p className="text-[var(--color-text-muted)] leading-relaxed">
|
||||
我们的核心团队长期从事<span className="text-[var(--color-brand-primary)] font-medium">技术咨询</span>、<span className="text-[var(--color-brand-primary)] font-medium">企业数字化</span>等行业，拥有 12 年以上的深厚积累。
|
||||
</p>
|
||||
<p className="text-[#595959] leading-relaxed">
|
||||
开发团队成员来自于多个<span className="text-[#C41E3A] font-medium">大型传统 IT 企业</span>，具备扎实的工程能力和规范化的交付经验。
|
||||
<p className="text-[var(--color-text-muted)] leading-relaxed">
|
||||
开发团队成员来自于多个<span className="text-[var(--color-brand-primary)] font-medium">大型传统 IT 企业</span>，具备扎实的工程能力和规范化的交付经验。
|
||||
</p>
|
||||
<p className="text-[#595959] leading-relaxed">
|
||||
<p className="text-[var(--color-text-muted)] leading-relaxed">
|
||||
我们相信，优秀的技术咨询不仅需要过硬的技术能力，更需要深入理解客户的业务场景和真实需求。
|
||||
每一位成员都是既懂技术又懂业务的复合型人才。
|
||||
</p>
|
||||
@@ -83,31 +86,31 @@ export function TeamClient() {
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
{...fadeUp}
|
||||
whileInView={shouldReduceMotion ? {} : { opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5 }}
|
||||
>
|
||||
<h2 className="text-2xl font-bold text-[#1C1C1C] mb-8 text-center">团队优势</h2>
|
||||
<h2 className="text-2xl font-bold text-[var(--color-text-primary)] mb-8 text-center">团队优势</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{TEAM_PILLARS.map((item, idx) => {
|
||||
const Icon = item.icon;
|
||||
return (
|
||||
<motion.div
|
||||
key={item.title}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
{...fadeUp}
|
||||
whileInView={shouldReduceMotion ? {} : { opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: idx * 0.1 }}
|
||||
className={idx >= 3 ? 'md:col-span-1 lg:col-start-1' : ''}
|
||||
>
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl border border-[#E5E5E5] hover:border-[#C41E3A]/30 transition-colors h-full">
|
||||
<div className="w-10 h-10 rounded-lg bg-[#FEF2F4] flex items-center justify-center shrink-0">
|
||||
<Icon className="w-5 h-5 text-[#C41E3A]" />
|
||||
<div className="flex items-start gap-4 p-6 rounded-xl border border-[var(--color-border-primary)] hover:border-[var(--color-brand-primary)]/30 transition-colors h-full">
|
||||
<div className="w-10 h-10 rounded-lg bg-[var(--color-brand-primary-bg)] flex items-center justify-center shrink-0">
|
||||
<Icon className="w-5 h-5 text-[var(--color-brand-primary)]" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-[#1C1C1C] mb-1">{item.title}</h3>
|
||||
<p className="text-sm text-[#595959]">{item.description}</p>
|
||||
<h3 className="font-semibold text-[var(--color-text-primary)] mb-1">{item.title}</h3>
|
||||
<p className="text-sm text-[var(--color-text-muted)]">{item.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
@@ -117,14 +120,14 @@ export function TeamClient() {
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
{...fadeUp}
|
||||
whileInView={shouldReduceMotion ? {} : { opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="text-center pt-8"
|
||||
>
|
||||
<p className="text-lg text-[#595959] mb-6">想与我们的团队交流？</p>
|
||||
<Button size="lg" className="bg-[#C41E3A] hover:bg-[#A01830] text-white" asChild>
|
||||
<p className="text-lg text-[var(--color-text-muted)] mb-6">想与我们的团队交流？</p>
|
||||
<Button size="lg" className="bg-[var(--color-brand-primary)] hover:bg-[var(--color-brand-primary-hover)] text-white" asChild>
|
||||
<StaticLink href="/contact">
|
||||
联系我们
|
||||
<ArrowRight className="ml-2 w-4 h-4" />
|
||||
|
||||
@@ -0,0 +1,50 @@
|
||||
'use client';
|
||||
|
||||
import { motion, type Variants } from 'framer-motion';
|
||||
import { useReducedMotion } from '@/hooks/use-reduced-motion';
|
||||
|
||||
const pageVariants: Variants = {
|
||||
initial: {
|
||||
opacity: 0,
|
||||
y: 8,
|
||||
},
|
||||
enter: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
duration: 0.35,
|
||||
ease: [0.16, 1, 0.3, 1] as [number, number, number, number],
|
||||
},
|
||||
},
|
||||
exit: {
|
||||
opacity: 0,
|
||||
y: -4,
|
||||
transition: {
|
||||
duration: 0.2,
|
||||
ease: [0.16, 1, 0.3, 1] as [number, number, number, number],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default function MarketingTemplate({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
|
||||
if (shouldReduceMotion) {
|
||||
return <>{children}</>;
|
||||
}
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
initial="initial"
|
||||
animate="enter"
|
||||
exit="exit"
|
||||
variants={pageVariants}
|
||||
>
|
||||
{children}
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
+24
-24
@@ -17,32 +17,32 @@ export default function Error({
|
||||
}, [error]);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-white flex items-center justify-center">
|
||||
<div className="min-h-screen bg-[var(--color-bg-primary)] flex items-center justify-center">
|
||||
<div className="container-wide px-4 py-20">
|
||||
<div className="max-w-2xl mx-auto text-center">
|
||||
<div className="mb-8">
|
||||
<div className="w-24 h-24 bg-[#C41E3A]/10 rounded-full flex items-center justify-center mx-auto mb-6">
|
||||
<AlertTriangle className="w-12 h-12 text-[#C41E3A]" />
|
||||
<div className="w-24 h-24 bg-[var(--color-brand-primary-bg)] rounded-full flex items-center justify-center mx-auto mb-6">
|
||||
<AlertTriangle className="w-12 h-12 text-[var(--color-brand-primary)]" />
|
||||
</div>
|
||||
<div className="w-32 h-1 bg-[#C41E3A] mx-auto" />
|
||||
<div className="w-32 h-1 bg-[var(--color-brand-primary)] mx-auto" />
|
||||
</div>
|
||||
|
||||
<h1 className="text-3xl font-bold text-[#1C1C1C] mb-4">
|
||||
<h1 className="text-3xl font-bold text-[var(--color-text-primary)] mb-4">
|
||||
出现了一些问题
|
||||
</h1>
|
||||
|
||||
<p className="text-lg text-[#5C5C5C] mb-6 leading-relaxed">
|
||||
<p className="text-lg text-[var(--color-text-placeholder)] mb-6 leading-relaxed">
|
||||
很抱歉，我们遇到了一个意外错误。
|
||||
请尝试刷新页面，或返回首页继续浏览。
|
||||
</p>
|
||||
|
||||
{error.message && (
|
||||
<div className="bg-[#FAFAFA] border border-[#E5E5E5] rounded-lg p-4 mb-8 text-left">
|
||||
<p className="text-sm text-[#5C5C5C] font-mono">
|
||||
<div className="bg-[var(--color-bg-section)] border border-[var(--color-border-primary)] rounded-lg p-4 mb-8 text-left">
|
||||
<p className="text-sm text-[var(--color-text-placeholder)] font-mono">
|
||||
错误信息: {error.message}
|
||||
</p>
|
||||
{error.digest && (
|
||||
<p className="text-xs text-[#5C5C5C] mt-2 font-mono">
|
||||
<p className="text-xs text-[var(--color-text-placeholder)] mt-2 font-mono">
|
||||
错误ID: {error.digest}
|
||||
</p>
|
||||
)}
|
||||
@@ -53,7 +53,7 @@ export default function Error({
|
||||
<Button
|
||||
size="lg"
|
||||
onClick={reset}
|
||||
className="bg-[#C41E3A] hover:bg-[#A01830] text-white"
|
||||
className="bg-[var(--color-brand-primary)] hover:bg-[var(--color-brand-primary-hover)] text-white"
|
||||
>
|
||||
<RefreshCw className="w-5 h-5 mr-2" />
|
||||
重试
|
||||
@@ -71,43 +71,43 @@ export default function Error({
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="bg-[#FAFAFA] rounded-lg p-8">
|
||||
<h3 className="text-xl font-semibold text-[#1C1C1C] mb-6">
|
||||
<div className="bg-[var(--color-bg-section)] rounded-lg p-8">
|
||||
<h3 className="text-xl font-semibold text-[var(--color-text-primary)] mb-6">
|
||||
需要帮助？
|
||||
</h3>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<StaticLink
|
||||
href="/contact"
|
||||
className="flex items-center p-4 bg-white rounded-lg hover:shadow-md transition-shadow group"
|
||||
className="flex items-center p-4 bg-[var(--color-bg-primary)] rounded-lg hover:shadow-md transition-shadow group"
|
||||
>
|
||||
<div className="w-10 h-10 bg-[#C41E3A]/10 rounded-lg flex items-center justify-center mr-4 group-hover:bg-[#C41E3A]/20 transition-colors">
|
||||
<AlertTriangle className="w-5 h-5 text-[#C41E3A]" />
|
||||
<div className="w-10 h-10 bg-[var(--color-brand-primary-bg)] rounded-lg flex items-center justify-center mr-4 group-hover:bg-[var(--color-challenge-isolation-hover)] transition-colors">
|
||||
<AlertTriangle className="w-5 h-5 text-[var(--color-brand-primary)]" />
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<div className="font-semibold text-[#1C1C1C]">联系我们</div>
|
||||
<div className="text-sm text-[#5C5C5C]">获取技术支持</div>
|
||||
<div className="font-semibold text-[var(--color-text-primary)]">联系我们</div>
|
||||
<div className="text-sm text-[var(--color-text-placeholder)]">获取技术支持</div>
|
||||
</div>
|
||||
</StaticLink>
|
||||
|
||||
<StaticLink
|
||||
href="/services"
|
||||
className="flex items-center p-4 bg-white rounded-lg hover:shadow-md transition-shadow group"
|
||||
className="flex items-center p-4 bg-[var(--color-bg-primary)] rounded-lg hover:shadow-md transition-shadow group"
|
||||
>
|
||||
<div className="w-10 h-10 bg-[#C41E3A]/10 rounded-lg flex items-center justify-center mr-4 group-hover:bg-[#C41E3A]/20 transition-colors">
|
||||
<RefreshCw className="w-5 h-5 text-[#C41E3A]" />
|
||||
<div className="w-10 h-10 bg-[var(--color-brand-primary-bg)] rounded-lg flex items-center justify-center mr-4 group-hover:bg-[var(--color-challenge-isolation-hover)] transition-colors">
|
||||
<RefreshCw className="w-5 h-5 text-[var(--color-brand-primary)]" />
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<div className="font-semibold text-[#1C1C1C]">服务</div>
|
||||
<div className="text-sm text-[#5C5C5C]">了解我们的服务</div>
|
||||
<div className="font-semibold text-[var(--color-text-primary)]">服务</div>
|
||||
<div className="text-sm text-[var(--color-text-placeholder)]">了解我们的服务</div>
|
||||
</div>
|
||||
</StaticLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 text-sm text-[#5C5C5C]">
|
||||
<div className="mt-8 text-sm text-[var(--color-text-placeholder)]">
|
||||
如果问题持续存在，请{' '}
|
||||
<StaticLink href="/contact" className="text-[#C41E3A] hover:underline">
|
||||
<StaticLink href="/contact" className="text-[var(--color-brand-primary)] hover:underline">
|
||||
联系我们的技术团队
|
||||
</StaticLink>
|
||||
</div>
|
||||
|
||||
Binary file not shown.
Binary file not shown.
+142
-855
File diff suppressed because it is too large
Load Diff
+16
-19
@@ -1,6 +1,6 @@
|
||||
import type { Metadata, Viewport } from "next";
|
||||
import { Geist, Geist_Mono, Noto_Sans_SC, Ma_Shan_Zheng } from "next/font/google";
|
||||
import localFont from "next/font/local";
|
||||
import { Ma_Shan_Zheng, Noto_Sans_SC } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import { Suspense } from "react";
|
||||
import { ThemeProvider } from "@/contexts/theme-context";
|
||||
@@ -15,24 +15,23 @@ import { ErrorBoundary } from "@/components/ui/error-boundary";
|
||||
import { ScrollProgress } from "@/components/ui/scroll-progress";
|
||||
import { BackToTop } from "@/components/ui/back-to-top";
|
||||
|
||||
const geistSans = Geist({
|
||||
const geistSans = localFont({
|
||||
src: "./fonts/geist-sans.woff2",
|
||||
variable: "--font-geist-sans",
|
||||
subsets: ["latin"],
|
||||
display: "swap",
|
||||
preload: false,
|
||||
});
|
||||
|
||||
const geistMono = Geist_Mono({
|
||||
const geistMono = localFont({
|
||||
src: "./fonts/geist-mono.woff2",
|
||||
variable: "--font-geist-mono",
|
||||
subsets: ["latin"],
|
||||
display: "swap",
|
||||
preload: false,
|
||||
});
|
||||
|
||||
const notoSansSC = Noto_Sans_SC({
|
||||
weight: ["400", "500", "700"],
|
||||
variable: "--font-noto-sans-sc",
|
||||
subsets: ["latin"],
|
||||
const aoyagiReisho = localFont({
|
||||
src: "./fonts/AoyagiReisho-subset.ttf",
|
||||
variable: "--font-aoyagi-reisho",
|
||||
display: "swap",
|
||||
preload: true,
|
||||
});
|
||||
@@ -40,17 +39,16 @@ const notoSansSC = Noto_Sans_SC({
|
||||
const maShanZheng = Ma_Shan_Zheng({
|
||||
weight: "400",
|
||||
variable: "--font-ma-shan-zheng",
|
||||
subsets: ["latin"],
|
||||
display: "swap",
|
||||
preload: true,
|
||||
preload: false,
|
||||
});
|
||||
|
||||
// 青柳隷書 - 仅用于品牌标题"睿新致遠"（子集版本，仅包含4个字符）
|
||||
const aoyagiReisho = localFont({
|
||||
src: "./fonts/AoyagiReisho-subset.ttf",
|
||||
variable: "--font-aoyagi-reisho",
|
||||
const notoSansSC = Noto_Sans_SC({
|
||||
weight: ["400", "500", "700"],
|
||||
variable: "--font-noto-sans-sc",
|
||||
display: "swap",
|
||||
preload: true,
|
||||
subsets: ["latin"],
|
||||
preload: false,
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
@@ -134,12 +132,11 @@ export default function RootLayout({
|
||||
<WebsiteSchema />
|
||||
</head>
|
||||
<body
|
||||
className={`${geistSans.variable} ${geistMono.variable} ${notoSansSC.variable} ${maShanZheng.variable} ${aoyagiReisho.variable} font-sans antialiased`}
|
||||
style={{ fontFamily: "'Noto Sans SC', 'Geist', -apple-system, BlinkMacSystemFont, sans-serif" }}
|
||||
className={`${geistSans.variable} ${geistMono.variable} ${aoyagiReisho.variable} ${maShanZheng.variable} ${notoSansSC.variable} font-sans antialiased`}
|
||||
>
|
||||
<a
|
||||
href="#main-content"
|
||||
className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-[9999] focus:px-4 focus:py-2 focus:bg-[#C41E3A] focus:text-white focus:rounded-md focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-[#C41E3A]"
|
||||
className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-[9999] focus:px-4 focus:py-2 focus:bg-[var(--color-brand-primary)] focus:text-white focus:rounded-md focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-[var(--color-brand-primary)]"
|
||||
>
|
||||
跳转到主内容
|
||||
</a>
|
||||
|
||||
+30
-30
@@ -7,21 +7,21 @@ import { COMPANY_INFO } from '@/lib/constants';
|
||||
|
||||
export default function NotFound() {
|
||||
return (
|
||||
<div className="min-h-screen bg-white flex items-center justify-center">
|
||||
<div className="min-h-screen bg-[var(--color-bg-primary)] flex items-center justify-center">
|
||||
<div className="container-wide px-4 py-20">
|
||||
<div className="max-w-2xl mx-auto text-center">
|
||||
<div className="mb-8">
|
||||
<h1 className="text-[120px] font-bold text-[#C41E3A] leading-none mb-4">
|
||||
<h1 className="text-[120px] font-bold text-[var(--color-brand-primary)] leading-none mb-4">
|
||||
404
|
||||
</h1>
|
||||
<div className="w-32 h-1 bg-[#C41E3A] mx-auto mb-6" />
|
||||
<div className="w-32 h-1 bg-[var(--color-brand-primary)] mx-auto mb-6" />
|
||||
</div>
|
||||
|
||||
<h2 className="text-3xl font-bold text-[#1C1C1C] mb-4">
|
||||
<h2 className="text-3xl font-bold text-[var(--color-text-primary)] mb-4">
|
||||
页面未找到
|
||||
</h2>
|
||||
|
||||
<p className="text-lg text-[#5C5C5C] mb-8 leading-relaxed">
|
||||
<p className="text-lg text-[var(--color-text-placeholder)] mb-8 leading-relaxed">
|
||||
很抱歉，您访问的页面不存在或已被移动。
|
||||
请检查网址是否正确，或使用以下导航继续浏览。
|
||||
</p>
|
||||
@@ -30,7 +30,7 @@ export default function NotFound() {
|
||||
<Button
|
||||
size="lg"
|
||||
asChild
|
||||
className="bg-[#C41E3A] hover:bg-[#A01830] text-white"
|
||||
className="bg-[var(--color-brand-primary)] hover:bg-[var(--color-brand-primary-hover)] text-white"
|
||||
>
|
||||
<StaticLink href="/">
|
||||
<Home className="w-5 h-5 mr-2" />
|
||||
@@ -48,69 +48,69 @@ export default function NotFound() {
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="bg-[#FAFAFA] rounded-lg p-8">
|
||||
<h3 className="text-xl font-semibold text-[#1C1C1C] mb-6">
|
||||
<div className="bg-[var(--color-bg-section)] rounded-lg p-8">
|
||||
<h3 className="text-xl font-semibold text-[var(--color-text-primary)] mb-6">
|
||||
您可能在寻找
|
||||
</h3>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<StaticLink
|
||||
href="/about"
|
||||
className="flex items-center p-4 bg-white rounded-lg hover:shadow-md transition-shadow group"
|
||||
className="flex items-center p-4 bg-[var(--color-bg-primary)] rounded-lg hover:shadow-md transition-shadow group"
|
||||
>
|
||||
<div className="w-10 h-10 bg-[#C41E3A]/10 rounded-lg flex items-center justify-center mr-4 group-hover:bg-[#C41E3A]/20 transition-colors">
|
||||
<Search className="w-5 h-5 text-[#C41E3A]" />
|
||||
<div className="w-10 h-10 bg-[var(--color-brand-primary-bg)] rounded-lg flex items-center justify-center mr-4 group-hover:bg-[var(--color-challenge-isolation-hover)] transition-colors">
|
||||
<Search className="w-5 h-5 text-[var(--color-brand-primary)]" />
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<div className="font-semibold text-[#1C1C1C]">关于我们</div>
|
||||
<div className="text-sm text-[#5C5C5C]">了解{COMPANY_INFO.displayName}</div>
|
||||
<div className="font-semibold text-[var(--color-text-primary)]">关于我们</div>
|
||||
<div className="text-sm text-[var(--color-text-placeholder)]">了解{COMPANY_INFO.displayName}</div>
|
||||
</div>
|
||||
</StaticLink>
|
||||
|
||||
<StaticLink
|
||||
href="/services"
|
||||
className="flex items-center p-4 bg-white rounded-lg hover:shadow-md transition-shadow group"
|
||||
className="flex items-center p-4 bg-[var(--color-bg-primary)] rounded-lg hover:shadow-md transition-shadow group"
|
||||
>
|
||||
<div className="w-10 h-10 bg-[#C41E3A]/10 rounded-lg flex items-center justify-center mr-4 group-hover:bg-[#C41E3A]/20 transition-colors">
|
||||
<Search className="w-5 h-5 text-[#C41E3A]" />
|
||||
<div className="w-10 h-10 bg-[var(--color-brand-primary-bg)] rounded-lg flex items-center justify-center mr-4 group-hover:bg-[var(--color-challenge-isolation-hover)] transition-colors">
|
||||
<Search className="w-5 h-5 text-[var(--color-brand-primary)]" />
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<div className="font-semibold text-[#1C1C1C]">服务</div>
|
||||
<div className="text-sm text-[#5C5C5C]">我们的服务</div>
|
||||
<div className="font-semibold text-[var(--color-text-primary)]">服务</div>
|
||||
<div className="text-sm text-[var(--color-text-placeholder)]">我们的服务</div>
|
||||
</div>
|
||||
</StaticLink>
|
||||
|
||||
<StaticLink
|
||||
href="/products"
|
||||
className="flex items-center p-4 bg-white rounded-lg hover:shadow-md transition-shadow group"
|
||||
className="flex items-center p-4 bg-[var(--color-bg-primary)] rounded-lg hover:shadow-md transition-shadow group"
|
||||
>
|
||||
<div className="w-10 h-10 bg-[#C41E3A]/10 rounded-lg flex items-center justify-center mr-4 group-hover:bg-[#C41E3A]/20 transition-colors">
|
||||
<Search className="w-5 h-5 text-[#C41E3A]" />
|
||||
<div className="w-10 h-10 bg-[var(--color-brand-primary-bg)] rounded-lg flex items-center justify-center mr-4 group-hover:bg-[var(--color-challenge-isolation-hover)] transition-colors">
|
||||
<Search className="w-5 h-5 text-[var(--color-brand-primary)]" />
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<div className="font-semibold text-[#1C1C1C]">产品</div>
|
||||
<div className="text-sm text-[#5C5C5C]">企业级产品</div>
|
||||
<div className="font-semibold text-[var(--color-text-primary)]">产品</div>
|
||||
<div className="text-sm text-[var(--color-text-placeholder)]">企业级产品</div>
|
||||
</div>
|
||||
</StaticLink>
|
||||
|
||||
<StaticLink
|
||||
href="/solutions"
|
||||
className="flex items-center p-4 bg-white rounded-lg hover:shadow-md transition-shadow group"
|
||||
className="flex items-center p-4 bg-[var(--color-bg-primary)] rounded-lg hover:shadow-md transition-shadow group"
|
||||
>
|
||||
<div className="w-10 h-10 bg-[#C41E3A]/10 rounded-lg flex items-center justify-center mr-4 group-hover:bg-[#C41E3A]/20 transition-colors">
|
||||
<Search className="w-5 h-5 text-[#C41E3A]" />
|
||||
<div className="w-10 h-10 bg-[var(--color-brand-primary-bg)] rounded-lg flex items-center justify-center mr-4 group-hover:bg-[var(--color-challenge-isolation-hover)] transition-colors">
|
||||
<Search className="w-5 h-5 text-[var(--color-brand-primary)]" />
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<div className="font-semibold text-[#1C1C1C]">解决方案</div>
|
||||
<div className="text-sm text-[#5C5C5C]">行业方案</div>
|
||||
<div className="font-semibold text-[var(--color-text-primary)]">解决方案</div>
|
||||
<div className="text-sm text-[var(--color-text-placeholder)]">行业方案</div>
|
||||
</div>
|
||||
</StaticLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 text-sm text-[#5C5C5C]">
|
||||
<div className="mt-8 text-sm text-[var(--color-text-placeholder)]">
|
||||
如果您认为这是一个错误，请{' '}
|
||||
<StaticLink href="/contact" className="text-[#C41E3A] hover:underline">
|
||||
<StaticLink href="/contact" className="text-[var(--color-brand-primary)] hover:underline">
|
||||
联系我们
|
||||
</StaticLink>
|
||||
</div>
|
||||
|
||||
+68
-68
@@ -8,8 +8,8 @@ export const metadata: Metadata = {
|
||||
|
||||
export default function PrivacyPolicyPage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
<div className="bg-gradient-to-br from-[#C41E3A] to-[#1C1C1C] py-20">
|
||||
<div className="min-h-screen bg-[var(--color-bg-primary)]">
|
||||
<div className="bg-gradient-to-br from-[var(--color-brand-primary)] to-[var(--color-text-primary)] py-20">
|
||||
<div className="container-wide">
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-white mb-4">
|
||||
隐私政策
|
||||
@@ -24,31 +24,31 @@ export default function PrivacyPolicyPage() {
|
||||
<div className="max-w-4xl">
|
||||
<div className="prose prose-lg max-w-none">
|
||||
<section className="mb-12">
|
||||
<h2 className="text-2xl font-bold text-[#1C1C1C] mb-4">引言</h2>
|
||||
<p className="text-[#5C5C5C] leading-relaxed mb-4">
|
||||
<h2 className="text-2xl font-bold text-[var(--color-text-primary)] mb-4">引言</h2>
|
||||
<p className="text-[var(--color-text-muted)] leading-relaxed mb-4">
|
||||
四川睿新致远科技有限公司（以下简称“我们”、“公司”）深知个人信息对您的重要性，并会尽全力保护您的个人信息安全可靠。我们致力于维持您对我们的信任，恪守以下原则，保护您的个人信息：权责一致原则、目的明确原则、选择同意原则、最少够用原则、确保安全原则、主体参与原则、公开透明原则等。
|
||||
</p>
|
||||
<p className="text-[#5C5C5C] leading-relaxed">
|
||||
<p className="text-[var(--color-text-muted)] leading-relaxed">
|
||||
本隐私政策适用于您通过四川睿新致远科技有限公司官方网站、移动应用、产品服务等渠道访问和使用我们的产品和服务时，我们收集和使用您的个人信息的情形。
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="mb-12">
|
||||
<h2 className="text-2xl font-bold text-[#1C1C1C] mb-4">一、我们如何收集和使用您的个人信息</h2>
|
||||
<p className="text-[#5C5C5C] leading-relaxed mb-4">
|
||||
<h2 className="text-2xl font-bold text-[var(--color-text-primary)] mb-4">一、我们如何收集和使用您的个人信息</h2>
|
||||
<p className="text-[var(--color-text-muted)] leading-relaxed mb-4">
|
||||
我们会遵循正当、合法、必要的原则，仅为实现产品功能，向您提供服务之目的，收集和使用您的个人信息。
|
||||
</p>
|
||||
|
||||
<h3 className="text-xl font-semibold text-[#1C1C1C] mb-3">1.1 我们收集的个人信息</h3>
|
||||
<ul className="list-disc pl-6 text-[#5C5C5C] space-y-2 mb-4">
|
||||
<h3 className="text-xl font-semibold text-[var(--color-text-primary)] mb-3">1.1 我们收集的个人信息</h3>
|
||||
<ul className="list-disc pl-6 text-[var(--color-text-muted)] space-y-2 mb-4">
|
||||
<li>账户信息：当您注册账户时，我们可能收集您的姓名、电子邮箱地址、手机号码、公司名称等。</li>
|
||||
<li>联系信息：当您通过联系表单或客服与我们沟通时，我们可能收集您的姓名、电子邮箱地址、手机号码、留言内容等。</li>
|
||||
<li>使用信息：我们可能收集您使用我们产品和服务的信息，包括访问时间、浏览记录、操作日志等。</li>
|
||||
<li>设备信息：我们可能收集您使用的设备信息，包括设备型号、操作系统、浏览器类型等。</li>
|
||||
</ul>
|
||||
|
||||
<h3 className="text-xl font-semibold text-[#1C1C1C] mb-3">1.2 我们如何使用您的个人信息</h3>
|
||||
<ul className="list-disc pl-6 text-[#5C5C5C] space-y-2">
|
||||
<h3 className="text-xl font-semibold text-[var(--color-text-primary)] mb-3">1.2 我们如何使用您的个人信息</h3>
|
||||
<ul className="list-disc pl-6 text-[var(--color-text-muted)] space-y-2">
|
||||
<li>提供产品和服务：向您提供我们的产品和服务，处理您的请求和订单。</li>
|
||||
<li>客户服务：与您联系，提供客户支持，回复您的咨询和反馈。</li>
|
||||
<li>改进产品和服务：分析使用情况，改进我们的产品和服务质量。</li>
|
||||
@@ -58,33 +58,33 @@ export default function PrivacyPolicyPage() {
|
||||
</section>
|
||||
|
||||
<section className="mb-12">
|
||||
<h2 className="text-2xl font-bold text-[#1C1C1C] mb-4">二、我们如何共享、转让、公开披露您的个人信息</h2>
|
||||
<h2 className="text-2xl font-bold text-[var(--color-text-primary)] mb-4">二、我们如何共享、转让、公开披露您的个人信息</h2>
|
||||
|
||||
<h3 className="text-xl font-semibold text-[#1C1C1C] mb-3">2.1 共享</h3>
|
||||
<p className="text-[#5C5C5C] leading-relaxed mb-4">
|
||||
<h3 className="text-xl font-semibold text-[var(--color-text-primary)] mb-3">2.1 共享</h3>
|
||||
<p className="text-[var(--color-text-muted)] leading-relaxed mb-4">
|
||||
我们不会向其他任何公司、组织和个人分享您的个人信息，但以下情况除外：
|
||||
</p>
|
||||
<ul className="list-disc pl-6 text-[#5C5C5C] space-y-2 mb-4">
|
||||
<ul className="list-disc pl-6 text-[var(--color-text-muted)] space-y-2 mb-4">
|
||||
<li>在获取明确同意的情况下分享：获得您的明确同意后，我们会与其他方共享您的个人信息。</li>
|
||||
<li>根据法律法规、法律程序、强制性的行政或司法要求所必须的情况进行提供。</li>
|
||||
<li>在涉及合并、收购或破产清算时，如涉及到个人信息转让，我们会要求新的持有您个人信息的公司、组织继续受本隐私政策的约束。</li>
|
||||
</ul>
|
||||
|
||||
<h3 className="text-xl font-semibold text-[#1C1C1C] mb-3">2.2 转让</h3>
|
||||
<p className="text-[#5C5C5C] leading-relaxed mb-4">
|
||||
<h3 className="text-xl font-semibold text-[var(--color-text-primary)] mb-3">2.2 转让</h3>
|
||||
<p className="text-[var(--color-text-muted)] leading-relaxed mb-4">
|
||||
我们不会将您的个人信息转让给任何公司、组织和个人，但以下情况除外：
|
||||
</p>
|
||||
<ul className="list-disc pl-6 text-[#5C5C5C] space-y-2 mb-4">
|
||||
<ul className="list-disc pl-6 text-[var(--color-text-muted)] space-y-2 mb-4">
|
||||
<li>在获取明确同意的情况下转让。</li>
|
||||
<li>根据适用的法律法规、法律程序、强制性的行政或司法要求所必须的情况进行提供。</li>
|
||||
<li>在涉及合并、收购或破产清算时，如涉及到个人信息转让，我们会要求新的持有您个人信息的公司、组织继续受本隐私政策的约束。</li>
|
||||
</ul>
|
||||
|
||||
<h3 className="text-xl font-semibold text-[#1C1C1C] mb-3">2.3 公开披露</h3>
|
||||
<p className="text-[#5C5C5C] leading-relaxed">
|
||||
<h3 className="text-xl font-semibold text-[var(--color-text-primary)] mb-3">2.3 公开披露</h3>
|
||||
<p className="text-[var(--color-text-muted)] leading-relaxed">
|
||||
我们仅会在以下情况下，公开披露您的个人信息：
|
||||
</p>
|
||||
<ul className="list-disc pl-6 text-[#5C5C5C] space-y-2">
|
||||
<ul className="list-disc pl-6 text-[var(--color-text-muted)] space-y-2">
|
||||
<li>获得您的明确同意。</li>
|
||||
<li>基于法律法规或法律程序的要求。</li>
|
||||
<li>在涉及合并、收购或破产清算时。</li>
|
||||
@@ -93,11 +93,11 @@ export default function PrivacyPolicyPage() {
|
||||
</section>
|
||||
|
||||
<section className="mb-12">
|
||||
<h2 className="text-2xl font-bold text-[#1C1C1C] mb-4">三、我们如何保护您的个人信息</h2>
|
||||
<p className="text-[#5C5C5C] leading-relaxed mb-4">
|
||||
<h2 className="text-2xl font-bold text-[var(--color-text-primary)] mb-4">三、我们如何保护您的个人信息</h2>
|
||||
<p className="text-[var(--color-text-muted)] leading-relaxed mb-4">
|
||||
我们已使用符合业界标准的安全防护措施保护您提供的个人信息，防止数据遭到未经授权访问、公开披露、使用、修改、损坏或丢失。我们会采取一切合理可行的措施，保护您的个人信息。
|
||||
</p>
|
||||
<ul className="list-disc pl-6 text-[#5C5C5C] space-y-2">
|
||||
<ul className="list-disc pl-6 text-[var(--color-text-muted)] space-y-2">
|
||||
<li>使用加密技术确保数据传输和存储安全。</li>
|
||||
<li>限制访问权限，仅授权人员可访问个人信息。</li>
|
||||
<li>定期进行安全审计和风险评估。</li>
|
||||
@@ -107,11 +107,11 @@ export default function PrivacyPolicyPage() {
|
||||
</section>
|
||||
|
||||
<section className="mb-12">
|
||||
<h2 className="text-2xl font-bold text-[#1C1C1C] mb-4">四、您的权利</h2>
|
||||
<p className="text-[#5C5C5C] leading-relaxed mb-4">
|
||||
<h2 className="text-2xl font-bold text-[var(--color-text-primary)] mb-4">四、您的权利</h2>
|
||||
<p className="text-[var(--color-text-muted)] leading-relaxed mb-4">
|
||||
按照中国相关的法律、法规、标准，以及其他国家、地区的通行做法，我们保障您对自己的个人信息行使以下权利：
|
||||
</p>
|
||||
<ul className="list-disc pl-6 text-[#5C5C5C] space-y-2">
|
||||
<ul className="list-disc pl-6 text-[var(--color-text-muted)] space-y-2">
|
||||
<li>访问您的个人信息。</li>
|
||||
<li>更正您的个人信息。</li>
|
||||
<li>删除您的个人信息。</li>
|
||||
@@ -119,82 +119,82 @@ export default function PrivacyPolicyPage() {
|
||||
<li>注销您的账户。</li>
|
||||
<li>获取您的个人信息副本。</li>
|
||||
</ul>
|
||||
<p className="text-[#5C5C5C] leading-relaxed mt-4">
|
||||
<p className="text-[var(--color-text-muted)] leading-relaxed mt-4">
|
||||
如您需要行使上述权利，请通过本隐私政策提供的联系方式与我们联系。
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="mb-12">
|
||||
<h2 className="text-2xl font-bold text-[#1C1C1C] mb-4">五、未成年人保护</h2>
|
||||
<p className="text-[#5C5C5C] leading-relaxed">
|
||||
<h2 className="text-2xl font-bold text-[var(--color-text-primary)] mb-4">五、未成年人保护</h2>
|
||||
<p className="text-[var(--color-text-muted)] leading-relaxed">
|
||||
我们非常重视对未成年人个人信息的保护。如果您是18周岁以下的未成年人，在使用我们的产品和服务前，应事先取得您家长或法定监护人的同意。如您是未成年人的监护人，当您对您所监护的未成年人的个人信息处理存在疑问时，请通过本隐私政策提供的联系方式与我们联系。
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="mb-12">
|
||||
<h2 className="text-2xl font-bold text-[#1C1C1C] mb-4">六、隐私政策的更新</h2>
|
||||
<p className="text-[#5C5C5C] leading-relaxed">
|
||||
<h2 className="text-2xl font-bold text-[var(--color-text-primary)] mb-4">六、隐私政策的更新</h2>
|
||||
<p className="text-[var(--color-text-muted)] leading-relaxed">
|
||||
我们可能适时更新本隐私政策的条款，该等更新构成本隐私政策的一部分。如该等更新造成您在本隐私政策下权利的实质减少，我们将在更新生效前通过在主页上显著位置提示或向您发送电子邮件或其他方式通知您，在该种情况下，若您继续使用我们的服务，即表示同意受经修订的本隐私政策的约束。
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="mb-12">
|
||||
<h2 className="text-2xl font-bold text-[#1C1C1C] mb-4">七、Cookie 和网站分析工具</h2>
|
||||
<h2 className="text-2xl font-bold text-[var(--color-text-primary)] mb-4">七、Cookie 和网站分析工具</h2>
|
||||
|
||||
<h3 className="text-xl font-semibold text-[#1C1C1C] mb-3">7.1 Cookie 使用说明</h3>
|
||||
<p className="text-[#5C5C5C] leading-relaxed mb-4">
|
||||
<h3 className="text-xl font-semibold text-[var(--color-text-primary)] mb-3">7.1 Cookie 使用说明</h3>
|
||||
<p className="text-[var(--color-text-muted)] leading-relaxed mb-4">
|
||||
我们使用 Cookie 和类似技术来提供、保护和改进我们的服务。Cookie 是存储在您设备上的小型文本文件，帮助我们识别您的设备、记住您的偏好设置。
|
||||
</p>
|
||||
<div className="overflow-x-auto mb-6">
|
||||
<table className="min-w-full border border-gray-200 rounded-lg">
|
||||
<thead className="bg-gray-50">
|
||||
<table className="min-w-full border border-[var(--color-border)] rounded-lg">
|
||||
<thead className="bg-[var(--color-bg-tertiary)]">
|
||||
<tr>
|
||||
<th className="px-4 py-3 text-left text-sm font-semibold text-[#1C1C1C] border-b">Cookie 类型</th>
|
||||
<th className="px-4 py-3 text-left text-sm font-semibold text-[#1C1C1C] border-b">用途</th>
|
||||
<th className="px-4 py-3 text-left text-sm font-semibold text-[#1C1C1C] border-b">持续时间</th>
|
||||
<th className="px-4 py-3 text-left text-sm font-semibold text-[#1C1C1C] border-b">是否必需</th>
|
||||
<th className="px-4 py-3 text-left text-sm font-semibold text-[var(--color-text-primary)] border-b border-[var(--color-border)]">Cookie 类型</th>
|
||||
<th className="px-4 py-3 text-left text-sm font-semibold text-[var(--color-text-primary)] border-b border-[var(--color-border)]">用途</th>
|
||||
<th className="px-4 py-3 text-left text-sm font-semibold text-[var(--color-text-primary)] border-b border-[var(--color-border)]">持续时间</th>
|
||||
<th className="px-4 py-3 text-left text-sm font-semibold text-[var(--color-text-primary)] border-b border-[var(--color-border)]">是否必需</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200">
|
||||
<tbody className="divide-y divide-[var(--color-border)]">
|
||||
<tr>
|
||||
<td className="px-4 py-3 text-sm text-[#5C5C5C]">必要 Cookie</td>
|
||||
<td className="px-4 py-3 text-sm text-[#5C5C5C]">网站基本功能运行</td>
|
||||
<td className="px-4 py-3 text-sm text-[#5C5C5C]">会话期间</td>
|
||||
<td className="px-4 py-3 text-sm text-[#5C5C5C]">是</td>
|
||||
<td className="px-4 py-3 text-sm text-[var(--color-text-muted)]">必要 Cookie</td>
|
||||
<td className="px-4 py-3 text-sm text-[var(--color-text-muted)]">网站基本功能运行</td>
|
||||
<td className="px-4 py-3 text-sm text-[var(--color-text-muted)]">会话期间</td>
|
||||
<td className="px-4 py-3 text-sm text-[var(--color-text-muted)]">是</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="px-4 py-3 text-sm text-[#5C5C5C]">分析 Cookie</td>
|
||||
<td className="px-4 py-3 text-sm text-[#5C5C5C]">了解网站使用情况，改进服务</td>
|
||||
<td className="px-4 py-3 text-sm text-[#5C5C5C]">14个月</td>
|
||||
<td className="px-4 py-3 text-sm text-[#5C5C5C]">否</td>
|
||||
<td className="px-4 py-3 text-sm text-[var(--color-text-muted)]">分析 Cookie</td>
|
||||
<td className="px-4 py-3 text-sm text-[var(--color-text-muted)]">了解网站使用情况，改进服务</td>
|
||||
<td className="px-4 py-3 text-sm text-[var(--color-text-muted)]">14个月</td>
|
||||
<td className="px-4 py-3 text-sm text-[var(--color-text-muted)]">否</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="px-4 py-3 text-sm text-[#5C5C5C]">营销 Cookie</td>
|
||||
<td className="px-4 py-3 text-sm text-[#5C5C5C]">个性化广告（当前未使用）</td>
|
||||
<td className="px-4 py-3 text-sm text-[#5C5C5C]">-</td>
|
||||
<td className="px-4 py-3 text-sm text-[#5C5C5C]">否</td>
|
||||
<td className="px-4 py-3 text-sm text-[var(--color-text-muted)]">营销 Cookie</td>
|
||||
<td className="px-4 py-3 text-sm text-[var(--color-text-muted)]">个性化广告（当前未使用）</td>
|
||||
<td className="px-4 py-3 text-sm text-[var(--color-text-muted)]">-</td>
|
||||
<td className="px-4 py-3 text-sm text-[var(--color-text-muted)]">否</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h3 className="text-xl font-semibold text-[#1C1C1C] mb-3">7.2 Google Analytics 使用说明</h3>
|
||||
<p className="text-[#5C5C5C] leading-relaxed mb-4">
|
||||
<h3 className="text-xl font-semibold text-[var(--color-text-primary)] mb-3">7.2 Google Analytics 使用说明</h3>
|
||||
<p className="text-[var(--color-text-muted)] leading-relaxed mb-4">
|
||||
我们使用 Google Analytics 4（由 Google LLC 提供）分析网站使用情况，帮助我们了解访客如何使用网站，从而改进用户体验。
|
||||
</p>
|
||||
<p className="text-[#5C5C5C] leading-relaxed mb-2">
|
||||
<p className="text-[var(--color-text-muted)] leading-relaxed mb-2">
|
||||
<strong>收集的数据包括：</strong>
|
||||
</p>
|
||||
<ul className="list-disc pl-6 text-[#5C5C5C] space-y-1 mb-4">
|
||||
<ul className="list-disc pl-6 text-[var(--color-text-muted)] space-y-1 mb-4">
|
||||
<li>访问的页面和停留时间</li>
|
||||
<li>设备类型、浏览器类型</li>
|
||||
<li>地理位置（国家/城市级别，IP 地址已匿名化）</li>
|
||||
<li>访问来源（直接访问、搜索引擎、外部链接）</li>
|
||||
</ul>
|
||||
<p className="text-[#5C5C5C] leading-relaxed mb-2">
|
||||
<p className="text-[var(--color-text-muted)] leading-relaxed mb-2">
|
||||
<strong>我们已采取的保护措施：</strong>
|
||||
</p>
|
||||
<ul className="list-disc pl-6 text-[#5C5C5C] space-y-1 mb-4">
|
||||
<ul className="list-disc pl-6 text-[var(--color-text-muted)] space-y-1 mb-4">
|
||||
<li>IP 地址匿名化</li>
|
||||
<li>数据保留期限设为 14 个月</li>
|
||||
<li>禁用广告个性化功能</li>
|
||||
@@ -202,29 +202,29 @@ export default function PrivacyPolicyPage() {
|
||||
<li>不与 Google 其他服务共享数据用于广告目的</li>
|
||||
</ul>
|
||||
|
||||
<h3 className="text-xl font-semibold text-[#1C1C1C] mb-3">7.3 您的选择</h3>
|
||||
<ul className="list-disc pl-6 text-[#5C5C5C] space-y-2 mb-4">
|
||||
<h3 className="text-xl font-semibold text-[var(--color-text-primary)] mb-3">7.3 您的选择</h3>
|
||||
<ul className="list-disc pl-6 text-[var(--color-text-muted)] space-y-2 mb-4">
|
||||
<li>您可以在首次访问时选择接受或拒绝分析 Cookie</li>
|
||||
<li>您可以点击页面右下角的“Cookie 设置”按钮随时更改偏好</li>
|
||||
<li>您可以通过浏览器设置删除或阻止 Cookie（可能影响网站功能）</li>
|
||||
</ul>
|
||||
|
||||
<h3 className="text-xl font-semibold text-[#1C1C1C] mb-3">7.4 数据删除请求</h3>
|
||||
<p className="text-[#5C5C5C] leading-relaxed">
|
||||
<h3 className="text-xl font-semibold text-[var(--color-text-primary)] mb-3">7.4 数据删除请求</h3>
|
||||
<p className="text-[var(--color-text-muted)] leading-relaxed">
|
||||
如您希望删除我们持有的您的个人数据，或撤回您的同意，请通过以下方式联系我们：
|
||||
</p>
|
||||
<ul className="list-none text-[#5C5C5C] space-y-1 mt-2">
|
||||
<ul className="list-none text-[var(--color-text-muted)] space-y-1 mt-2">
|
||||
<li>隐私邮箱：privacy@novalon.cn</li>
|
||||
<li>联系地址：中国四川省成都市龙泉驿区幸福路12号</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section className="mb-12">
|
||||
<h2 className="text-2xl font-bold text-[#1C1C1C] mb-4">八、如何联系我们</h2>
|
||||
<p className="text-[#5C5C5C] leading-relaxed mb-4">
|
||||
<h2 className="text-2xl font-bold text-[var(--color-text-primary)] mb-4">八、如何联系我们</h2>
|
||||
<p className="text-[var(--color-text-muted)] leading-relaxed mb-4">
|
||||
如果您对本隐私政策有任何疑问、意见或建议，或需要行使您的权利，请通过以下方式与我们联系：
|
||||
</p>
|
||||
<ul className="list-none text-[#5C5C5C] space-y-2">
|
||||
<ul className="list-none text-[var(--color-text-muted)] space-y-2">
|
||||
<li>公司名称：四川睿新致远科技有限公司</li>
|
||||
<li>联系邮箱：contact@novalon.cn</li>
|
||||
<li>隐私邮箱：privacy@novalon.cn</li>
|
||||
|
||||
+46
-46
@@ -8,8 +8,8 @@ export const metadata: Metadata = {
|
||||
|
||||
export default function TermsOfServicePage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
<div className="bg-gradient-to-br from-[#C41E3A] to-[#1C1C1C] py-20">
|
||||
<div className="min-h-screen bg-[var(--color-bg-primary)]">
|
||||
<div className="bg-gradient-to-br from-[var(--color-brand-primary)] to-[var(--color-text-primary)] py-20">
|
||||
<div className="container-wide">
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-white mb-4">
|
||||
服务条款
|
||||
@@ -24,48 +24,48 @@ export default function TermsOfServicePage() {
|
||||
<div className="max-w-4xl">
|
||||
<div className="prose prose-lg max-w-none">
|
||||
<section className="mb-12">
|
||||
<h2 className="text-2xl font-bold text-[#1C1C1C] mb-4">引言</h2>
|
||||
<p className="text-[#5C5C5C] leading-relaxed mb-4">
|
||||
<h2 className="text-2xl font-bold text-[var(--color-text-primary)] mb-4">引言</h2>
|
||||
<p className="text-[var(--color-text-muted)] leading-relaxed mb-4">
|
||||
欢迎使用四川睿新致远科技有限公司（以下简称“我们”、“公司”）提供的产品和服务。在使用我们的产品和服务之前，请您仔细阅读并理解本服务条款。如果您不同意本服务条款的任何内容，请停止使用我们的产品和服务。
|
||||
</p>
|
||||
<p className="text-[#5C5C5C] leading-relaxed">
|
||||
<p className="text-[var(--color-text-muted)] leading-relaxed">
|
||||
本服务条款是您与四川睿新致远科技有限公司之间就使用我们的产品和服务所订立的协议。我们有权根据需要不时修改本服务条款，修改后的条款一旦公布即代替原条款，恕不另行通知。
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="mb-12">
|
||||
<h2 className="text-2xl font-bold text-[#1C1C1C] mb-4">一、服务内容</h2>
|
||||
<p className="text-[#5C5C5C] leading-relaxed mb-4">
|
||||
<h2 className="text-2xl font-bold text-[var(--color-text-primary)] mb-4">一、服务内容</h2>
|
||||
<p className="text-[var(--color-text-muted)] leading-relaxed mb-4">
|
||||
我们提供的产品和服务包括但不限于：软件开发、云服务、数据分析、信息安全、企业级软件产品（如ERP、CRM、后台管理系统、BI等）等。具体服务内容以我们官方网站或产品文档为准。
|
||||
</p>
|
||||
<p className="text-[#5C5C5C] leading-relaxed">
|
||||
<p className="text-[var(--color-text-muted)] leading-relaxed">
|
||||
我们保留随时修改、暂停或终止部分或全部服务的权利，无需事先通知。对于因服务修改、暂停或终止而给您造成的任何损失，我们不承担任何责任，除非法律另有规定。
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="mb-12">
|
||||
<h2 className="text-2xl font-bold text-[#1C1C1C] mb-4">二、用户注册与账户</h2>
|
||||
<h2 className="text-2xl font-bold text-[var(--color-text-primary)] mb-4">二、用户注册与账户</h2>
|
||||
|
||||
<h3 className="text-xl font-semibold text-[#1C1C1C] mb-3">2.1 注册资格</h3>
|
||||
<p className="text-[#5C5C5C] leading-relaxed mb-4">
|
||||
<h3 className="text-xl font-semibold text-[var(--color-text-primary)] mb-3">2.1 注册资格</h3>
|
||||
<p className="text-[var(--color-text-muted)] leading-relaxed mb-4">
|
||||
您确认，在您完成注册程序或以其他方式实际使用本服务时，您应当是具备完全民事权利能力和完全民事行为能力的自然人、法人或其他组织。若您不具备前述主体资格，则您及您的监护人应承担因此而导致的一切后果，且我们有权注销或永久冻结您的账户。
|
||||
</p>
|
||||
|
||||
<h3 className="text-xl font-semibold text-[#1C1C1C] mb-3">2.2 账户安全</h3>
|
||||
<p className="text-[#5C5C5C] leading-relaxed mb-4">
|
||||
<h3 className="text-xl font-semibold text-[var(--color-text-primary)] mb-3">2.2 账户安全</h3>
|
||||
<p className="text-[var(--color-text-muted)] leading-relaxed mb-4">
|
||||
您有责任维护您账户的安全性和保密性。您不得向任何第三方泄露您的账户信息，也不得与他人共享您的账户。如果您发现任何未经授权使用您账户的情况，应立即通知我们。
|
||||
</p>
|
||||
<p className="text-[#5C5C5C] leading-relaxed">
|
||||
<p className="text-[var(--color-text-muted)] leading-relaxed">
|
||||
您对您账户下发生的所有活动负责。我们对因您未能维护账户安全而造成的任何损失不承担责任。
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="mb-12">
|
||||
<h2 className="text-2xl font-bold text-[#1C1C1C] mb-4">三、用户行为规范</h2>
|
||||
<p className="text-[#5C5C5C] leading-relaxed mb-4">
|
||||
<h2 className="text-2xl font-bold text-[var(--color-text-primary)] mb-4">三、用户行为规范</h2>
|
||||
<p className="text-[var(--color-text-muted)] leading-relaxed mb-4">
|
||||
在使用我们的产品和服务时，您同意遵守以下行为规范：
|
||||
</p>
|
||||
<ul className="list-disc pl-6 text-[#5C5C5C] space-y-2 mb-4">
|
||||
<ul className="list-disc pl-6 text-[var(--color-text-muted)] space-y-2 mb-4">
|
||||
<li>遵守所有适用的法律法规和本服务条款。</li>
|
||||
<li>不得利用我们的产品和服务进行任何违法或不当活动。</li>
|
||||
<li>不得干扰或破坏我们的产品和服务或与我们的产品和服务相连的服务器和网络。</li>
|
||||
@@ -74,52 +74,52 @@ export default function TermsOfServicePage() {
|
||||
<li>不得进行任何形式的商业欺诈或诈骗活动。</li>
|
||||
<li>不得恶意收集或获取其他用户的信息。</li>
|
||||
</ul>
|
||||
<p className="text-[#5C5C5C] leading-relaxed">
|
||||
<p className="text-[var(--color-text-muted)] leading-relaxed">
|
||||
如果我们认定您违反了本服务条款或任何适用法律，我们有权在不事先通知的情况下，暂停或终止您的账户，并拒绝您现在或将来使用我们的产品和服务。
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="mb-12">
|
||||
<h2 className="text-2xl font-bold text-[#1C1C1C] mb-4">四、知识产权</h2>
|
||||
<p className="text-[#5C5C5C] leading-relaxed mb-4">
|
||||
<h2 className="text-2xl font-bold text-[var(--color-text-primary)] mb-4">四、知识产权</h2>
|
||||
<p className="text-[var(--color-text-muted)] leading-relaxed mb-4">
|
||||
我们的产品和服务中包含的所有内容，包括但不限于软件、设计、文字、图片、音频、视频、商标、服务标识等，均受著作权法、商标法、专利法或其他适用法律的保护。
|
||||
</p>
|
||||
<p className="text-[#5C5C5C] leading-relaxed mb-4">
|
||||
<p className="text-[var(--color-text-muted)] leading-relaxed mb-4">
|
||||
除非另有明确说明，我们拥有或持有我们产品和服务中所有内容的所有知识产权。您不得以任何形式复制、修改、传播、展示、执行、创作衍生作品、转让、出售或以其他方式使用这些内容，除非获得我们的明确书面许可。
|
||||
</p>
|
||||
<p className="text-[#5C5C5C] leading-relaxed">
|
||||
<p className="text-[var(--color-text-muted)] leading-relaxed">
|
||||
您在使用我们的产品和服务时产生的任何内容，您仍保留其知识产权，但您授予我们全球性、非独占性、免版税的许可，以使用、复制、修改、传播、展示和执行这些内容，仅限于提供和改进我们的产品和服务。
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="mb-12">
|
||||
<h2 className="text-2xl font-bold text-[#1C1C1C] mb-4">五、服务费用与支付</h2>
|
||||
<h2 className="text-2xl font-bold text-[var(--color-text-primary)] mb-4">五、服务费用与支付</h2>
|
||||
|
||||
<h3 className="text-xl font-semibold text-[#1C1C1C] mb-3">5.1 费用标准</h3>
|
||||
<p className="text-[#5C5C5C] leading-relaxed mb-4">
|
||||
<h3 className="text-xl font-semibold text-[var(--color-text-primary)] mb-3">5.1 费用标准</h3>
|
||||
<p className="text-[var(--color-text-muted)] leading-relaxed mb-4">
|
||||
我们的产品和服务可能需要支付费用。具体费用标准以我们官方网站或产品文档公布的价格为准。我们保留随时调整价格的权利，调整后的价格适用于调整后的新订单或续费。
|
||||
</p>
|
||||
|
||||
<h3 className="text-xl font-semibold text-[#1C1C1C] mb-3">5.2 支付方式</h3>
|
||||
<p className="text-[#5C5C5C] leading-relaxed mb-4">
|
||||
<h3 className="text-xl font-semibold text-[var(--color-text-primary)] mb-3">5.2 支付方式</h3>
|
||||
<p className="text-[var(--color-text-muted)] leading-relaxed mb-4">
|
||||
我们接受多种支付方式，包括但不限于银行转账、支付宝、微信支付等。具体支付方式以我们官方网站或产品文档为准。
|
||||
</p>
|
||||
|
||||
<h3 className="text-xl font-semibold text-[#1C1C1C] mb-3">5.3 退款政策</h3>
|
||||
<p className="text-[#5C5C5C] leading-relaxed">
|
||||
<h3 className="text-xl font-semibold text-[var(--color-text-primary)] mb-3">5.3 退款政策</h3>
|
||||
<p className="text-[var(--color-text-muted)] leading-relaxed">
|
||||
除非另有明确说明，我们提供的产品和服务一经售出，不予退款。如因我们的原因导致产品或服务无法正常使用，我们将根据实际情况提供相应的补偿或解决方案。
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="mb-12">
|
||||
<h2 className="text-2xl font-bold text-[#1C1C1C] mb-4">六、免责声明</h2>
|
||||
<p className="text-[#5C5C5C] leading-relaxed mb-4">
|
||||
<h2 className="text-2xl font-bold text-[var(--color-text-primary)] mb-4">六、免责声明</h2>
|
||||
<p className="text-[var(--color-text-muted)] leading-relaxed mb-4">
|
||||
我们的产品和服务按“现状”和“可用”基础提供，不提供任何明示或暗示的保证，包括但不限于对适销性、适用性、非侵权性或准确性、可靠性的保证。
|
||||
</p>
|
||||
<p className="text-[#5C5C5C] leading-relaxed mb-4">
|
||||
<p className="text-[var(--color-text-muted)] leading-relaxed mb-4">
|
||||
我们不对以下情况承担责任：
|
||||
</p>
|
||||
<ul className="list-disc pl-6 text-[#5C5C5C] space-y-2">
|
||||
<ul className="list-disc pl-6 text-[var(--color-text-muted)] space-y-2">
|
||||
<li>因您违反本服务条款或任何适用法律而导致的任何损失或损害。</li>
|
||||
<li>因不可抗力、网络故障、设备故障等不可控因素导致的服务中断或数据丢失。</li>
|
||||
<li>因第三方服务或内容导致的任何损失或损害。</li>
|
||||
@@ -128,11 +128,11 @@ export default function TermsOfServicePage() {
|
||||
</section>
|
||||
|
||||
<section className="mb-12">
|
||||
<h2 className="text-2xl font-bold text-[#1C1C1C] mb-4">七、服务终止</h2>
|
||||
<p className="text-[#5C5C5C] leading-relaxed mb-4">
|
||||
<h2 className="text-2xl font-bold text-[var(--color-text-primary)] mb-4">七、服务终止</h2>
|
||||
<p className="text-[var(--color-text-muted)] leading-relaxed mb-4">
|
||||
您可以随时停止使用我们的产品和服务，并注销您的账户。我们也有权在不事先通知的情况下，因以下原因暂停或终止您的账户：
|
||||
</p>
|
||||
<ul className="list-disc pl-6 text-[#5C5C5C] space-y-2">
|
||||
<ul className="list-disc pl-6 text-[var(--color-text-muted)] space-y-2">
|
||||
<li>您违反本服务条款或任何适用法律。</li>
|
||||
<li>我们出于安全、法律或商业考虑，认为有必要终止您的账户。</li>
|
||||
<li>您长时间未使用您的账户。</li>
|
||||
@@ -141,15 +141,15 @@ export default function TermsOfServicePage() {
|
||||
</section>
|
||||
|
||||
<section className="mb-12">
|
||||
<h2 className="text-2xl font-bold text-[#1C1C1C] mb-4">八、争议解决</h2>
|
||||
<p className="text-[#5C5C5C] leading-relaxed mb-4">
|
||||
<h2 className="text-2xl font-bold text-[var(--color-text-primary)] mb-4">八、争议解决</h2>
|
||||
<p className="text-[var(--color-text-muted)] leading-relaxed mb-4">
|
||||
本服务条款的订立、执行、解释及争议解决均适用中华人民共和国法律。如就本服务条款发生任何争议，双方应首先通过友好协商解决；协商不成的，任何一方均可向公司所在地有管辖权的人民法院提起诉讼。
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="mb-12">
|
||||
<h2 className="text-2xl font-bold text-[#1C1C1C] mb-4">九、其他条款</h2>
|
||||
<ul className="list-disc pl-6 text-[#5C5C5C] space-y-2">
|
||||
<h2 className="text-2xl font-bold text-[var(--color-text-primary)] mb-4">九、其他条款</h2>
|
||||
<ul className="list-disc pl-6 text-[var(--color-text-muted)] space-y-2">
|
||||
<li>本服务条款构成您与我们就使用我们的产品和服务所达成的完整协议，取代之前的所有口头或书面协议。</li>
|
||||
<li>如本服务条款的任何条款被认定为无效或不可执行，该条款应被限制或排除，以使其有效和可执行，其余条款继续有效。</li>
|
||||
<li>我们未行使或延迟行使本服务条款项下的任何权利或规定，不构成对该权利或规定的放弃。</li>
|
||||
@@ -158,20 +158,20 @@ export default function TermsOfServicePage() {
|
||||
</section>
|
||||
|
||||
<section className="mb-12">
|
||||
<h2 className="text-2xl font-bold text-[#1C1C1C] mb-4">十、联系我们</h2>
|
||||
<p className="text-[#5C5C5C] leading-relaxed mb-4">
|
||||
<h2 className="text-2xl font-bold text-[var(--color-text-primary)] mb-4">十、联系我们</h2>
|
||||
<p className="text-[var(--color-text-muted)] leading-relaxed mb-4">
|
||||
如果您对本服务条款有任何疑问、意见或建议，请通过以下方式与我们联系：
|
||||
</p>
|
||||
<ul className="list-none text-[#5C5C5C] space-y-2">
|
||||
<ul className="list-none text-[var(--color-text-muted)] space-y-2">
|
||||
<li>公司名称：四川睿新致远科技有限公司</li>
|
||||
<li>联系邮箱：contact@novalon.cn</li>
|
||||
<li>联系地址：中国四川省成都市龙泉驿区幸福路12号</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section className="bg-[#FFFBF5] p-6 rounded-lg border-l-4 border-[#C41E3A]">
|
||||
<p className="text-[#1C1C1C] font-medium mb-2">最后更新日期</p>
|
||||
<p className="text-[#5C5C5C]">2026年2月26日</p>
|
||||
<section className="bg-[var(--color-warning-bg)] p-6 rounded-lg border-l-4 border-[var(--color-brand-primary)]">
|
||||
<p className="text-[var(--color-text-primary)] font-medium mb-2">最后更新日期</p>
|
||||
<p className="text-[var(--color-text-muted)]">2026年2月26日</p>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user