feat: 创建详情页面和法律页面
- 创建产品详情页面组件,支持技术架构、应用场景、客户案例展示 - 创建服务详情页面组件,支持服务内容、流程、优势展示 - 创建隐私政策页面,符合中国法律要求 - 创建服务条款页面,规范用户服务协议
This commit is contained in:
张翔
@@ -0,0 +1,152 @@
|
||||
import { COMPANY_INFO } from '@/lib/constants';
|
||||
|
||||
export const metadata = {
|
||||
title: `隐私政策 - ${COMPANY_INFO.name}`,
|
||||
description: `了解${COMPANY_INFO.name}如何收集、使用和保护您的个人信息`,
|
||||
};
|
||||
|
||||
export default function PrivacyPolicyPage() {
|
||||
return (
|
||||
<div className="pt-32 pb-20">
|
||||
<div className="container-custom max-w-4xl">
|
||||
<div className="text-center mb-12">
|
||||
<h1 className="text-4xl font-bold text-black mb-4">隐私政策</h1>
|
||||
<p className="text-gray-600">最后更新日期: 2026年2月</p>
|
||||
</div>
|
||||
|
||||
<div className="prose prose-gray max-w-none">
|
||||
<section className="mb-8">
|
||||
<h2 className="text-2xl font-bold text-black mb-4">1. 引言</h2>
|
||||
<p className="mb-4">
|
||||
{COMPANY_INFO.name}（以下简称"我们"或"本公司"）尊重并保护所有用户的隐私权。
|
||||
本隐私政策旨在向您说明我们在提供服务的过程中如何收集、使用、保存、共享和保护您的个人信息，
|
||||
以及您享有的权利。请在使用我们的服务前仔细阅读并充分理解本隐私政策。
|
||||
</p>
|
||||
<p className="mb-4">
|
||||
本隐私政策适用于我们提供的所有服务。当您使用我们的服务时，即表示您同意我们按照本隐私政策
|
||||
收集、使用和披露您的个人信息。
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="mb-8">
|
||||
<h2 className="text-2xl font-bold text-black mb-4">2. 信息收集</h2>
|
||||
<h3 className="text-xl font-semibold text-gray-800 mb-3">2.1 您主动提供的信息</h3>
|
||||
<p className="mb-4">
|
||||
当您使用我们的服务时，我们可能会收集您主动提供的信息，包括但不限于：
|
||||
</p>
|
||||
<ul className="list-disc pl-6 mb-4 space-y-2">
|
||||
<li>在联系我们的过程中，您提供的姓名、电话号码、电子邮箱地址等联系方式</li>
|
||||
<li>在使用特定服务时，您填写的个人资料、偏好设置等信息</li>
|
||||
<li>您向我们发送的反馈、建议、投诉等信息</li>
|
||||
</ul>
|
||||
|
||||
<h3 className="text-xl font-semibold text-gray-800 mb-3">2.2 自动收集的信息</h3>
|
||||
<p className="mb-4">
|
||||
当您使用我们的服务时，我们可能会自动收集以下信息：
|
||||
</p>
|
||||
<ul className="list-disc pl-6 mb-4 space-y-2">
|
||||
<li>设备信息：包括设备型号、操作系统版本、浏览器类型等</li>
|
||||
<li>网络信息：包括IP地址、网络类型、运营商等</li>
|
||||
<li>日志信息：包括访问时间、访问页面、错误日志等</li>
|
||||
<li>位置信息：在您授权的情况下，我们可能会收集您的位置信息</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section className="mb-8">
|
||||
<h2 className="text-2xl font-bold text-black mb-4">3. 信息使用</h2>
|
||||
<p className="mb-4">
|
||||
我们收集您的个人信息主要用于以下目的：
|
||||
</p>
|
||||
<ul className="list-disc pl-6 mb-4 space-y-2">
|
||||
<li>为您提供服务并维持服务的正常运行</li>
|
||||
<li>回应您的请求、咨询或处理您的订单</li>
|
||||
<li>向您发送重要的通知，如服务变更、安全提醒等</li>
|
||||
<li>改进我们的服务，优化用户体验</li>
|
||||
<li>开展数据分析，以便更好地了解用户需求</li>
|
||||
<li>遵守法律法规的要求</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section className="mb-8">
|
||||
<h2 className="text-2xl font-bold text-black mb-4">4. 信息保护</h2>
|
||||
<p className="mb-4">
|
||||
我们采取各种物理、技术和管理措施来保护您的个人信息免受未经授权的访问、使用或泄露。
|
||||
这些措施包括但不限于：
|
||||
</p>
|
||||
<ul className="list-disc pl-6 mb-4 space-y-2">
|
||||
<li>使用加密技术保护数据传输和存储</li>
|
||||
<li>对员工进行数据保护培训，严格限制访问权限</li>
|
||||
<li>定期进行安全审计和风险评估</li>
|
||||
<li>建立数据备份和恢复机制</li>
|
||||
</ul>
|
||||
<p className="mb-4">
|
||||
尽管我们采取了合理的安全措施，但请您理解，任何安全措施都无法做到绝对安全。
|
||||
如果发生个人信息安全事件，我们将按照相关法律法规的要求及时告知您。
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="mb-8">
|
||||
<h2 className="text-2xl font-bold text-black mb-4">5. 信息共享</h2>
|
||||
<p className="mb-4">
|
||||
我们不会向任何无关的第三方出售、出租或以其他方式披露您的个人信息，
|
||||
除非在以下情况下：
|
||||
</p>
|
||||
<ul className="list-disc pl-6 mb-4 space-y-2">
|
||||
<li>获得您的明确同意</li>
|
||||
<li>为实现服务功能所必需，且我们会要求第三方遵守本隐私政策</li>
|
||||
<li>根据法律法规的规定或行政或司法机构的要求</li>
|
||||
<li>为维护我们的合法权益</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section className="mb-8">
|
||||
<h2 className="text-2xl font-bold text-black mb-4">6. 您的权利</h2>
|
||||
<p className="mb-4">
|
||||
根据相关法律法规，您享有以下权利：
|
||||
</p>
|
||||
<ul className="list-disc pl-6 mb-4 space-y-2">
|
||||
<li>查询：您有权查询我们持有的关于您的个人信息</li>
|
||||
<li>更正：如果您发现我们持有的关于您的信息有误，您有权要求我们更正</li>
|
||||
<li>删除：在特定情况下，您有权要求我们删除您的个人信息</li>
|
||||
<li>撤回同意：您可以随时撤回对个人信息处理的同意</li>
|
||||
<li>数据携带：在技术可行的情况下，您可以要求获取您的个人信息副本</li>
|
||||
</ul>
|
||||
<p className="mb-4">
|
||||
如需行使上述权利，请通过本隐私政策末尾提供的联系方式与我们联系。
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="mb-8">
|
||||
<h2 className="text-2xl font-bold text-black mb-4">7. Cookie 和类似技术</h2>
|
||||
<p className="mb-4">
|
||||
我们可能使用Cookie和类似技术来收集和使用您的信息。这些技术有助于我们提供更好的服务，
|
||||
例如记住您的偏好设置、分析服务使用情况等。您可以根据浏览器设置选择拒绝或管理Cookie。
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="mb-8">
|
||||
<h2 className="text-2xl font-bold text-black mb-4">8. 隐私政策的变更</h2>
|
||||
<p className="mb-4">
|
||||
我们可能会适时更新本隐私政策。当本隐私政策发生重大变更时，我们会在网站显著位置
|
||||
公布变更内容，并通过其他适当方式通知您。我们建议您定期查看本隐私政策，以了解最新内容。
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="mb-8">
|
||||
<h2 className="text-2xl font-bold text-black mb-4">9. 联系我们</h2>
|
||||
<p className="mb-4">
|
||||
如果您对本隐私政策有任何疑问、意见或建议，或者需要行使您的个人信息权利，
|
||||
请通过以下方式与我们联系：
|
||||
</p>
|
||||
<div className="bg-gray-50 p-6 rounded-lg">
|
||||
<p className="mb-2"><strong>公司名称：</strong>{COMPANY_INFO.name}</p>
|
||||
<p className="mb-2"><strong>联系邮箱：</strong>{COMPANY_INFO.email}</p>
|
||||
<p className="mb-2"><strong>联系电话：</strong>{COMPANY_INFO.phone}</p>
|
||||
<p><strong>办公地址：</strong>{COMPANY_INFO.address}</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,256 @@
|
||||
import { notFound } from 'next/navigation';
|
||||
import { PRODUCTS, COMPANY_INFO } from '@/lib/constants';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { ArrowRight, Check, TrendingUp, Code, Cloud, Database, Server, Briefcase, Target, Users, Award } from 'lucide-react';
|
||||
|
||||
interface ProductDetailPageProps {
|
||||
params: Promise<{ id: string }>;
|
||||
}
|
||||
|
||||
export async function generateMetadata({ params }: ProductDetailPageProps) {
|
||||
const { id } = await params;
|
||||
const product = PRODUCTS.find((p) => p.id === id);
|
||||
|
||||
if (!product) {
|
||||
return {
|
||||
title: '产品未找到',
|
||||
description: `未找到ID为${id}的产品`,
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
title: `${product.title} - ${COMPANY_INFO.name}`,
|
||||
description: product.fullDescription || product.description,
|
||||
};
|
||||
}
|
||||
|
||||
export default async function ProductDetailPage({ params }: ProductDetailPageProps) {
|
||||
const { id } = await params;
|
||||
const product = PRODUCTS.find((p) => p.id === id);
|
||||
|
||||
if (!product) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="pt-32 pb-20">
|
||||
<div className="container-custom">
|
||||
{/* 产品详情头部 */}
|
||||
<div className="mb-12">
|
||||
<Badge variant="outline" className="mb-4">
|
||||
产品详情
|
||||
</Badge>
|
||||
<h1 className="text-4xl sm:text-5xl font-bold text-black mb-6">
|
||||
{product.title}
|
||||
</h1>
|
||||
<p className="text-lg text-gray-600 max-w-3xl">
|
||||
{product.fullDescription}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 技术架构 */}
|
||||
<div className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-black mb-6 flex items-center">
|
||||
<Code className="w-6 h-6 mr-3 text-blue-600" />
|
||||
技术架构
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center text-blue-600 mb-2">
|
||||
<Code className="w-5 h-5 mr-2" />
|
||||
<CardTitle className="text-lg">前端技术</CardTitle>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{product.technicalArchitecture.frontend.map((tech) => (
|
||||
<Badge key={tech} variant="secondary">
|
||||
{tech}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center text-green-600 mb-2">
|
||||
<Server className="w-5 h-5 mr-2" />
|
||||
<CardTitle className="text-lg">后端技术</CardTitle>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{product.technicalArchitecture.backend.map((tech) => (
|
||||
<Badge key={tech} variant="secondary">
|
||||
{tech}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center text-purple-600 mb-2">
|
||||
<Database className="w-5 h-5 mr-2" />
|
||||
<CardTitle className="text-lg">数据库</CardTitle>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{product.technicalArchitecture.database.map((tech) => (
|
||||
<Badge key={tech} variant="secondary">
|
||||
{tech}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center text-orange-600 mb-2">
|
||||
<Cloud className="w-5 h-5 mr-2" />
|
||||
<CardTitle className="text-lg">部署方案</CardTitle>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{product.technicalArchitecture.deployment.map((tech) => (
|
||||
<Badge key={tech} variant="secondary">
|
||||
{tech}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 应用场景 */}
|
||||
<div className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-black mb-6 flex items-center">
|
||||
<Target className="w-6 h-6 mr-3 text-blue-600" />
|
||||
应用场景
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
{product.scenarios.map((scenario, idx) => (
|
||||
<Card key={idx} className="hover:shadow-lg transition-shadow">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">{scenario.title}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-gray-600">{scenario.description}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 客户案例 */}
|
||||
<div className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-black mb-6 flex items-center">
|
||||
<Users className="w-6 h-6 mr-3 text-blue-600" />
|
||||
客户案例
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{product.cases.map((caseItem, idx) => (
|
||||
<Card key={idx} className="hover:shadow-lg transition-shadow">
|
||||
<CardHeader>
|
||||
<div className="flex items-center mb-3">
|
||||
<Badge variant="outline" className="mr-2">
|
||||
{caseItem.industry}
|
||||
</Badge>
|
||||
<CardTitle className="text-lg">{caseItem.client}</CardTitle>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
||||
{caseItem.results.map((result, resultIdx) => (
|
||||
<div key={resultIdx} className="text-center p-3 bg-gray-50 rounded-lg">
|
||||
<div className="text-2xl font-bold text-blue-600">{result.value}</div>
|
||||
<div className="text-sm text-gray-600 mt-1">{result.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 核心功能 */}
|
||||
<div className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-black mb-6 flex items-center">
|
||||
<Check className="w-6 h-6 mr-3 text-blue-600" />
|
||||
核心功能
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{product.features.map((feature, idx) => (
|
||||
<div key={idx} className="flex items-start p-4 bg-gray-50 rounded-lg">
|
||||
<Check className="w-5 h-5 mr-3 text-green-600 flex-shrink-0" />
|
||||
<span className="text-gray-700">{feature}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 核心价值 */}
|
||||
<div className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-black mb-6 flex items-center">
|
||||
<TrendingUp className="w-6 h-6 mr-3 text-blue-600" />
|
||||
核心价值
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
||||
{product.benefits.map((benefit, idx) => (
|
||||
<Card key={idx}>
|
||||
<CardContent className="p-6 text-center">
|
||||
<div className="text-xl font-bold text-blue-600 mb-2">{benefit}</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 底部CTA */}
|
||||
<div className="mt-20 text-center">
|
||||
<div className="bg-gradient-to-r from-gray-50 to-gray-100 rounded-2xl p-12">
|
||||
<h2 className="text-2xl sm:text-3xl font-bold text-black mb-4">
|
||||
需要了解更多信息？
|
||||
</h2>
|
||||
<p className="text-gray-600 mb-8 max-w-2xl mx-auto">
|
||||
我们的专业团队可以根据您的业务需求，提供量身定制的产品演示和解决方案咨询
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-black text-white hover:bg-gray-800"
|
||||
onClick={() => {
|
||||
const element = document.getElementById('contact');
|
||||
if (element) {
|
||||
element.scrollIntoView({ behavior: 'smooth' });
|
||||
}
|
||||
}}
|
||||
>
|
||||
联系我们
|
||||
<ArrowRight className="ml-2 w-4 h-4" />
|
||||
</Button>
|
||||
<Button
|
||||
size="lg"
|
||||
variant="outline"
|
||||
onClick={() => window.open('https://wa.me/1234567890', '_blank')}
|
||||
>
|
||||
在线咨询
|
||||
<ArrowRight className="ml-2 w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,165 @@
|
||||
import { notFound } from 'next/navigation';
|
||||
import { SERVICES, COMPANY_INFO } from '@/lib/constants';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { ArrowRight, Check, Target, Users, Award, Briefcase, CheckCircle, FileText, Shield, TrendingUp } from 'lucide-react';
|
||||
|
||||
interface ServiceDetailPageProps {
|
||||
params: Promise<{ id: string }>;
|
||||
}
|
||||
|
||||
export async function generateMetadata({ params }: ServiceDetailPageProps) {
|
||||
const { id } = await params;
|
||||
const service = SERVICES.find((s) => s.id === id);
|
||||
|
||||
if (!service) {
|
||||
return {
|
||||
title: '服务未找到',
|
||||
description: `未找到ID为${id}的服务`,
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
title: `${service.title} - ${COMPANY_INFO.name}`,
|
||||
description: service.fullDescription || service.description,
|
||||
};
|
||||
}
|
||||
|
||||
export default async function ServiceDetailPage({ params }: ServiceDetailPageProps) {
|
||||
const { id } = await params;
|
||||
const service = SERVICES.find((s) => s.id === id);
|
||||
|
||||
if (!service) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="pt-32 pb-20">
|
||||
<div className="container-custom">
|
||||
{/* 服务详情头部 */}
|
||||
<div className="mb-12">
|
||||
<Badge variant="outline" className="mb-4">
|
||||
服务详情
|
||||
</Badge>
|
||||
<h1 className="text-4xl sm:text-5xl font-bold text-black mb-6">
|
||||
{service.title}
|
||||
</h1>
|
||||
<p className="text-lg text-gray-600 max-w-3xl">
|
||||
{service.fullDescription}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 服务内容 */}
|
||||
<div className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-black mb-6 flex items-center">
|
||||
<FileText className="w-6 h-6 mr-3 text-blue-600" />
|
||||
服务内容
|
||||
</h2>
|
||||
<Card className="mb-6">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">服务范围</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-gray-600">{service.content.scope}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">服务流程</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
{service.content.process.map((phase, idx) => (
|
||||
<div key={idx} className="flex items-start">
|
||||
<div className="flex-shrink-0 w-8 h-8 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center font-bold mr-3">
|
||||
{idx + 1}
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-gray-900">{phase.phase}</h4>
|
||||
<p className="text-sm text-gray-600">{phase.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">交付成果</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-3">
|
||||
{service.content.deliverables.map((deliverable, idx) => (
|
||||
<div key={idx} className="flex items-center">
|
||||
<CheckCircle className="w-5 h-5 mr-3 text-green-600 flex-shrink-0" />
|
||||
<span className="text-gray-700">{deliverable}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 服务优势 */}
|
||||
<div className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-black mb-6 flex items-center">
|
||||
<Award className="w-6 h-6 mr-3 text-blue-600" />
|
||||
服务优势
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{service.advantages.map((advantage, idx) => (
|
||||
<Card key={idx} className="text-center hover:shadow-lg transition-shadow">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-sm text-gray-600">{advantage.label}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold text-blue-600">{advantage.value}</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 底部CTA */}
|
||||
<div className="mt-20 text-center">
|
||||
<div className="bg-gradient-to-r from-gray-50 to-gray-100 rounded-2xl p-12">
|
||||
<h2 className="text-2xl sm:text-3xl font-bold text-black mb-4">
|
||||
需要了解更多信息？
|
||||
</h2>
|
||||
<p className="text-gray-600 mb-8 max-w-2xl mx-auto">
|
||||
我们的专业团队可以根据您的业务需求，提供量身定制的服务方案和咨询服务
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-black text-white hover:bg-gray-800"
|
||||
onClick={() => {
|
||||
const element = document.getElementById('contact');
|
||||
if (element) {
|
||||
element.scrollIntoView({ behavior: 'smooth' });
|
||||
}
|
||||
}}
|
||||
>
|
||||
联系我们
|
||||
<ArrowRight className="ml-2 w-4 h-4" />
|
||||
</Button>
|
||||
<Button
|
||||
size="lg"
|
||||
variant="outline"
|
||||
onClick={() => window.open('https://wa.me/1234567890', '_blank')}
|
||||
>
|
||||
在线咨询
|
||||
<ArrowRight className="ml-2 w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,212 @@
|
||||
import { COMPANY_INFO } from '@/lib/constants';
|
||||
|
||||
export const metadata = {
|
||||
title: `服务条款 - ${COMPANY_INFO.name}`,
|
||||
description: `使用${COMPANY_INFO.name}服务前请仔细阅读并理解本服务条款`,
|
||||
};
|
||||
|
||||
export default function TermsOfServicePage() {
|
||||
return (
|
||||
<div className="pt-32 pb-20">
|
||||
<div className="container-custom max-w-4xl">
|
||||
<div className="text-center mb-12">
|
||||
<h1 className="text-4xl font-bold text-black mb-4">服务条款</h1>
|
||||
<p className="text-gray-600">最后更新日期: 2026年2月</p>
|
||||
</div>
|
||||
|
||||
<div className="prose prose-gray max-w-none">
|
||||
<section className="mb-8">
|
||||
<h2 className="text-2xl font-bold text-black mb-4">1. 引言</h2>
|
||||
<p className="mb-4">
|
||||
欢迎使用{COMPANY_INFO.name}（以下简称"本公司"或"我们"）提供的服务。本服务条款（以下简称"条款"）
|
||||
是您（用户）与本公司之间就使用我们的服务所订立的具有法律约束力的协议。请您在使用我们的服务前
|
||||
仔细阅读并充分理解本条款的全部内容。
|
||||
</p>
|
||||
<p className="mb-4">
|
||||
当您点击"同意"或以其他方式接受本条款，或访问、使用我们的服务时，即表示您已充分阅读、理解并
|
||||
同意接受本条款的全部内容，并承诺遵守。如果您不同意本条款的任何内容，请勿访问或使用我们的服务。
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="mb-8">
|
||||
<h2 className="text-2xl font-bold text-black mb-4">2. 服务说明</h2>
|
||||
<h3 className="text-xl font-semibold text-gray-800 mb-3">2.1 服务内容</h3>
|
||||
<p className="mb-4">
|
||||
本公司为用户提供以下服务：
|
||||
</p>
|
||||
<ul className="list-disc pl-6 mb-4 space-y-2">
|
||||
<li>企业软件系统开发与实施</li>
|
||||
<li>云计算解决方案</li>
|
||||
<li>数据分析与商业智能服务</li>
|
||||
<li>信息安全咨询与解决方案</li>
|
||||
<li>其他相关技术咨询与支持服务</li>
|
||||
</ul>
|
||||
|
||||
<h3 className="text-xl font-semibold text-gray-800 mb-3">2.2 服务变更</h3>
|
||||
<p className="mb-4">
|
||||
我们有权根据业务发展需要调整服务内容、功能或形式。当服务发生重大变更时，我们会通过网站公告
|
||||
或其他适当方式通知您。如果您继续使用服务，则视为接受变更后的内容。
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="mb-8">
|
||||
<h2 className="text-2xl font-bold text-black mb-4">3. 用户账户</h2>
|
||||
<h3 className="text-xl font-semibold text-gray-800 mb-3">3.1 账户注册</h3>
|
||||
<p className="mb-4">
|
||||
在使用某些服务时，您可能需要注册账户。您应当提供真实、准确、完整、最新的信息，并及时更新
|
||||
您的注册信息。如因信息不准确、不完整或过时而产生的任何后果，由您自行承担。
|
||||
</p>
|
||||
|
||||
<h3 className="text-xl font-semibold text-gray-800 mb-3">3.2 账户安全</h3>
|
||||
<p className="mb-4">
|
||||
您应当对您的账户密码进行妥善保管，并对通过您的账户和密码进行的所有活动和行为承担全部责任。
|
||||
如发现您的账户存在安全漏洞或未经授权的使用情况，您应立即通知我们。
|
||||
</p>
|
||||
|
||||
<h3 className="text-xl font-semibold text-gray-800 mb-3">3.3 账户管理</h3>
|
||||
<p className="mb-4">
|
||||
我们有权在发现账户存在异常情况时，采取暂停、冻结或终止账户等措施，以保护用户和我们自身的
|
||||
合法权益。对于违反法律法规或本条款的行为，我们有权采取相应措施。
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="mb-8">
|
||||
<h2 className="text-2xl font-bold text-black mb-4">4. 用户行为规范</h2>
|
||||
<p className="mb-4">
|
||||
您在使用我们的服务时，应当遵守相关法律法规及本条款的规定，不得从事以下行为：
|
||||
</p>
|
||||
<ul className="list-disc pl-6 mb-4 space-y-2">
|
||||
<li>违反法律法规、危害国家安全、泄露国家秘密、颠覆国家政权、破坏国家统一的</li>
|
||||
<li>损害国家荣誉和利益的</li>
|
||||
<li>煽动民族仇恨、民族歧视，破坏民族团结的</li>
|
||||
<li>破坏国家宗教政策，宣扬邪教和封建迷信的</li>
|
||||
<li>散布谣言，扰乱社会秩序，破坏社会稳定的</li>
|
||||
<li>散布淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪的</li>
|
||||
<li>侮辱或者诽谤他人，侵害他人合法权益的</li>
|
||||
<li>含有法律、行政法规禁止的其他内容的</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section className="mb-8">
|
||||
<h2 className="text-2xl font-bold text-black mb-4">5. 知识产权</h2>
|
||||
<h3 className="text-xl font-semibold text-gray-800 mb-3">5.1 服务知识产权</h3>
|
||||
<p className="mb-4">
|
||||
本服务的所有知识产权（包括但不限于软件、技术、界面设计、文字、图片、音频、视频等）归本公司
|
||||
或相关权利人所有。未经本公司或相关权利人书面许可，您不得以任何形式复制、修改、传播、出租、
|
||||
出售本服务或其任何部分。
|
||||
</p>
|
||||
|
||||
<h3 className="text-xl font-semibold text-gray-800 mb-3">5.2 用户内容</h3>
|
||||
<p className="mb-4">
|
||||
您通过我们的服务上传、发布或传输的内容，您应当保证您对这些内容拥有合法的知识产权或已获得
|
||||
相关权利人的授权。您授权本公司在全球范围内、免费、非独占、可再许可地使用这些内容，用于
|
||||
提供、推广和改进服务。
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="mb-8">
|
||||
<h2 className="text-2xl font-bold text-black mb-4">6. 免责声明</h2>
|
||||
<p className="mb-4">
|
||||
我们在法律允许的最大范围内提供服务，对于以下情况我们不承担责任：
|
||||
</p>
|
||||
<ul className="list-disc pl-6 mb-4 space-y-2">
|
||||
<li>因不可抗力因素导致的服务中断或中断</li>
|
||||
<li>因网络故障、系统崩溃等技术问题导致的服务中断或中断</li>
|
||||
<li>因您自身原因导致的任何损失或损害</li>
|
||||
<li>因第三方服务或内容导致的任何问题</li>
|
||||
<li>因您违反本条款导致的任何损失或损害</li>
|
||||
</ul>
|
||||
<p className="mb-4">
|
||||
我们对服务的适用性、特定目的的适应性、不侵权性不作任何明示或暗示的保证。
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="mb-8">
|
||||
<h2 className="text-2xl font-bold text-black mb-4">7. 责任限制</h2>
|
||||
<p className="mb-4">
|
||||
在任何情况下，本公司及其关联方、员工、代理人、合作伙伴或供应商对您因使用或无法使用服务
|
||||
而引起的任何直接、间接、偶然、特殊、惩罚性或后果性的损害不承担赔偿责任，除非该损害系
|
||||
由本公司故意或重大过失造成。
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="mb-8">
|
||||
<h2 className="text-2xl font-bold text-black mb-4">8. 服务终止</h2>
|
||||
<h3 className="text-xl font-semibold text-gray-800 mb-3">8.1 用户终止</h3>
|
||||
<p className="mb-4">
|
||||
您可以随时停止使用我们的服务。在法律允许的最大范围内，我们保留终止向您提供服务或关闭您
|
||||
账户的权利，无需提前通知您。
|
||||
</p>
|
||||
|
||||
<h3 className="text-xl font-semibold text-gray-800 mb-3">8.2 我们终止</h3>
|
||||
<p className="mb-4">
|
||||
我们可能因业务调整、技术维护、系统升级等原因暂停或终止服务。我们会通过网站公告或其他适当
|
||||
方式提前通知您。对于因业务调整等原因终止服务的，我们将按照法律法规的要求妥善处理用户数据。
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="mb-8">
|
||||
<h2 className="text-2xl font-bold text-black mb-4">9. 保密义务</h2>
|
||||
<p className="mb-4">
|
||||
双方应对在履行本条款过程中知悉的对方的商业秘密及其他保密信息承担保密义务，未经对方书面同意，
|
||||
不得向任何第三方披露。本义务在本条款终止或解除后仍然有效。
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="mb-8">
|
||||
<h2 className="text-2xl font-bold text-black mb-4">10. 法律适用与争议解决</h2>
|
||||
<h3 className="text-xl font-semibold text-gray-800 mb-3">10.1 法律适用</h3>
|
||||
<p className="mb-4">
|
||||
本条款的订立、效力、解释、履行及争议解决均适用中华人民共和国法律（不包括冲突法）。
|
||||
</p>
|
||||
|
||||
<h3 className="text-xl font-semibold text-gray-800 mb-3">10.2 争议解决</h3>
|
||||
<p className="mb-4">
|
||||
因本条款引起的或与本条款有关的任何争议，双方应首先通过友好协商解决；协商不成的，任何一方
|
||||
均应向本公司住所地有管辖权的人民法院提起诉讼。
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="mb-8">
|
||||
<h2 className="text-2xl font-bold text-black mb-4">11. 其他</h2>
|
||||
<h3 className="text-xl font-semibold text-gray-800 mb-3">11.1 完整协议</h3>
|
||||
<p className="mb-4">
|
||||
本条款构成您与本公司之间就使用服务达成的完整协议，取代双方之前或现在就使用服务达成的任何
|
||||
口头或书面协议或理解。
|
||||
</p>
|
||||
|
||||
<h3 className="text-xl font-semibold text-gray-800 mb-3">11.2 协议转让</h3>
|
||||
<p className="mb-4">
|
||||
未经本公司书面同意，您不得将本条款项下的任何权利或义务转让给任何第三方。
|
||||
</p>
|
||||
|
||||
<h3 className="text-xl font-semibold text-gray-800 mb-3">11.3 可分性</h3>
|
||||
<p className="mb-4">
|
||||
如本条款的任何条款被认定为无效或不可执行，该条款应在最小必要范围内被限制或排除，以使其
|
||||
有效且可执行，并应被视为本条款的一部分；本条款的其余条款应继续完全有效。
|
||||
</p>
|
||||
|
||||
<h3 className="text-xl font-semibold text-gray-800 mb-3">11.4 放弃</h3>
|
||||
<p className="mb-4">
|
||||
任何一方未行使或延迟行使本条款项下的任何权利、权力或特权，不应视为放弃该权利、权力或特权；
|
||||
任何一方单独行使或部分行使权利、权力或特权，也不应妨碍其进一步行使该权利、权力或特权。
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="mb-8">
|
||||
<h2 className="text-2xl font-bold text-black mb-4">12. 联系我们</h2>
|
||||
<p className="mb-4">
|
||||
如果您对本服务条款有任何疑问、意见或建议，请通过以下方式与我们联系：
|
||||
</p>
|
||||
<div className="bg-gray-50 p-6 rounded-lg">
|
||||
<p className="mb-2"><strong>公司名称：</strong>{COMPANY_INFO.name}</p>
|
||||
<p className="mb-2"><strong>联系邮箱：</strong>{COMPANY_INFO.email}</p>
|
||||
<p className="mb-2"><strong>联系电话：</strong>{COMPANY_INFO.phone}</p>
|
||||
<p><strong>办公地址：</strong>{COMPANY_INFO.address}</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user