225 lines
7.5 KiB
TypeScript
225 lines
7.5 KiB
TypeScript
"use client";
|
||
|
||
import { useState } from "react";
|
||
import { useTranslation, Link } from "@/i18n/navigation";
|
||
import Footer from "@/app/components/Footer";
|
||
|
||
interface Service {
|
||
id: string;
|
||
icon: string;
|
||
titleZh: string;
|
||
titleEn: string;
|
||
descZh: string;
|
||
descEn: string;
|
||
features: { zh: string; en: string }[];
|
||
priceZh: string;
|
||
priceEn: string;
|
||
color: string;
|
||
gradientFrom: string;
|
||
gradientTo: string;
|
||
}
|
||
|
||
const SERVICES: Service[] = [
|
||
{
|
||
id: "insurance",
|
||
icon: "🛡️",
|
||
titleZh: "旅行保险",
|
||
titleEn: "Travel Insurance",
|
||
descZh: "数字游民定制方案，覆盖全球",
|
||
descEn: "Global coverage for digital nomads",
|
||
features: [
|
||
{ zh: "覆盖中国 + 境外", en: "Coverage in China + overseas" },
|
||
{ zh: "远程工作专属条款", en: "Remote work specific terms" },
|
||
{ zh: "医疗直付服务", en: "Direct medical payment" },
|
||
{ zh: "24/7 中文客服", en: "24/7 Chinese support" },
|
||
],
|
||
priceZh: "¥15/天起",
|
||
priceEn: "From ¥15/day",
|
||
color: "emerald",
|
||
gradientFrom: "from-emerald-500",
|
||
gradientTo: "to-teal-500",
|
||
},
|
||
{
|
||
id: "chat",
|
||
icon: "💬",
|
||
titleZh: "社区聊天",
|
||
titleEn: "Community Chat",
|
||
descZh: "与全球数字游民实时交流",
|
||
descEn: "Connect with nomads worldwide in real-time",
|
||
features: [
|
||
{ zh: "3,200+ 在线成员", en: "3,200+ members online" },
|
||
{ zh: "城市群/兴趣群", en: "City & interest groups" },
|
||
{ zh: "即时信息对接", en: "Instant networking" },
|
||
{ zh: "经验分享互助", en: "Experience sharing" },
|
||
],
|
||
priceZh: "免费",
|
||
priceEn: "Free",
|
||
color: "violet",
|
||
gradientFrom: "from-violet-500",
|
||
gradientTo: "to-purple-500",
|
||
},
|
||
{
|
||
id: "tools",
|
||
icon: "🧰",
|
||
titleZh: "工具箱",
|
||
titleEn: "Tools",
|
||
descZh: "汇率、税务、签证一站式",
|
||
descEn: "Exchange, tax & visa in one place",
|
||
features: [
|
||
{ zh: "实时汇率计算", en: "Real-time exchange rates" },
|
||
{ zh: "税务估算器", en: "Tax calculator" },
|
||
{ zh: "签证倒计时", en: "Visa countdown" },
|
||
{ zh: "FIRE 计算器", en: "FIRE calculator" },
|
||
],
|
||
priceZh: "免费",
|
||
priceEn: "Free",
|
||
color: "blue",
|
||
gradientFrom: "from-blue-500",
|
||
gradientTo: "to-cyan-500",
|
||
},
|
||
{
|
||
id: "coworking",
|
||
icon: "🏢",
|
||
titleZh: "共享办公",
|
||
titleEn: "Coworking",
|
||
descZh: "全球优质办公空间推荐",
|
||
descEn: "Premium workspace recommendations",
|
||
features: [
|
||
{ zh: "全球 10,000+ 空间", en: "10,000+ spaces worldwide" },
|
||
{ zh: "会员专属折扣", en: "Member discounts" },
|
||
{ zh: "实地考察报告", en: "On-site reviews" },
|
||
{ zh: "预订直通车", en: "Direct booking" },
|
||
],
|
||
priceZh: "¥99/月起",
|
||
priceEn: "From ¥99/month",
|
||
color: "orange",
|
||
gradientFrom: "from-orange-500",
|
||
gradientTo: "to-amber-500",
|
||
},
|
||
{
|
||
id: "visa",
|
||
icon: "📋",
|
||
titleZh: "签证服务",
|
||
titleEn: "Visa Services",
|
||
descZh: "专业签证顾问全程护航",
|
||
descEn: "Professional visa consultants",
|
||
features: [
|
||
{ zh: "全球签证办理", en: "Global visa processing" },
|
||
{ zh: "材料翻译公证", en: "Translation & notarization" },
|
||
{ zh: "加急服务", en: "Expedited service" },
|
||
{ zh: "拒签退款保障", en: "Refund guarantee" },
|
||
],
|
||
priceZh: "咨询报价",
|
||
priceEn: "Contact for quote",
|
||
color: "rose",
|
||
gradientFrom: "from-rose-500",
|
||
gradientTo: "to-pink-500",
|
||
},
|
||
{
|
||
id: "mentor",
|
||
icon: "🎓",
|
||
titleZh: "导师计划",
|
||
titleEn: "Mentor Program",
|
||
descZh: "资深游民一对一指导",
|
||
descEn: "1-on-1 guidance from experienced nomads",
|
||
features: [
|
||
{ zh: "职业规划建议", en: "Career planning" },
|
||
{ zh: "创业经验分享", en: "Startup experience" },
|
||
{ zh: "远程工作技巧", en: "Remote work tips" },
|
||
{ zh: "人脉资源对接", en: "Network access" },
|
||
],
|
||
priceZh: "¥299/次",
|
||
priceEn: "¥299/session",
|
||
color: "indigo",
|
||
gradientFrom: "from-indigo-500",
|
||
gradientTo: "to-violet-500",
|
||
},
|
||
];
|
||
|
||
export default function ServicesPage() {
|
||
const { t } = useTranslation("services");
|
||
|
||
return (
|
||
<div className="min-h-screen bg-[#fafafa] dark:bg-gray-950">
|
||
<main className="max-w-[1200px] mx-auto px-4 sm:px-6 py-6 sm:py-8">
|
||
<div className="text-center mb-10 sm:mb-12">
|
||
<h1 className="text-2xl sm:text-3xl md:text-4xl font-bold text-gray-900 dark:text-gray-100 mb-3">
|
||
{t("title")}
|
||
</h1>
|
||
<p className="text-gray-500 dark:text-gray-400 text-sm sm:text-base">
|
||
{t("subtitle")}
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 sm:gap-6">
|
||
{SERVICES.map((service) => (
|
||
<div
|
||
key={service.id}
|
||
className="bg-white dark:bg-gray-900 rounded-2xl overflow-hidden shadow-sm border border-gray-100 dark:border-gray-800 hover:shadow-lg transition-shadow"
|
||
>
|
||
<div className={`h-2 bg-gradient-to-r ${service.gradientFrom} ${service.gradientTo}`} />
|
||
<div className="p-5 sm:p-6">
|
||
<div className="flex items-start justify-between mb-4">
|
||
<div className="flex items-center gap-3">
|
||
<span className="text-3xl">{service.icon}</span>
|
||
<div>
|
||
<h3 className="font-bold text-gray-900 dark:text-gray-100 text-lg">
|
||
{service.titleZh}
|
||
</h3>
|
||
<p className="text-xs text-gray-500 dark:text-gray-400">
|
||
{service.titleEn}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
||
{service.descZh}
|
||
</p>
|
||
|
||
<ul className="space-y-2 mb-5">
|
||
{service.features.map((feature, i) => (
|
||
<li key={i} className="flex items-center gap-2 text-xs sm:text-sm text-gray-500 dark:text-gray-400">
|
||
<span className="text-[#ff4d4f]">✓</span>
|
||
{feature.zh}
|
||
</li>
|
||
))}
|
||
</ul>
|
||
|
||
<div className="flex items-center justify-between pt-4 border-t border-gray-100 dark:border-gray-800">
|
||
<span className="font-bold text-gray-900 dark:text-gray-100">
|
||
{service.priceZh}
|
||
</span>
|
||
<Link
|
||
href="/join"
|
||
className="text-sm font-medium text-[#ff4d4f] hover:text-[#ff7a45] transition-colors"
|
||
>
|
||
{t("learnMore")} →
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<div className="mt-12 sm:mt-16 bg-gradient-to-r from-[#ff4d4f] to-[#ff7a45] rounded-2xl p-6 sm:p-10 text-center">
|
||
<h2 className="text-xl sm:text-2xl font-bold text-white mb-3">
|
||
还没有找到需要的服务？
|
||
</h2>
|
||
<p className="text-white/80 mb-5 text-sm sm:text-base">
|
||
联系我们的客服，获取定制化解决方案
|
||
</p>
|
||
<Link
|
||
href="/contact"
|
||
className="inline-block bg-white text-[#ff4d4f] px-6 py-2.5 rounded-full font-medium hover:bg-gray-100 transition-colors"
|
||
>
|
||
联系客服
|
||
</Link>
|
||
</div>
|
||
</main>
|
||
|
||
<Footer />
|
||
</div>
|
||
);
|
||
}
|