|
@@ -1,9 +1,9 @@
|
|
|
'use client';
|
|
'use client';
|
|
|
|
|
|
|
|
-import { ShieldCheck, HelpCircle, AlertTriangle, Mail } from 'lucide-react';
|
|
|
|
|
|
|
+import { ShieldCheck, HelpCircle, AlertTriangle, Mail, Info, CreditCard, Smartphone, Wallet } from 'lucide-react';
|
|
|
import { useLanguage } from '@/lib/i18n/LanguageContext';
|
|
import { useLanguage } from '@/lib/i18n/LanguageContext';
|
|
|
|
|
|
|
|
-// 定义简单的品牌图标组件,避免引入额外的图标库
|
|
|
|
|
|
|
+// 定义简单的品牌图标组件
|
|
|
const TelegramIcon = ({ className }) => (
|
|
const TelegramIcon = ({ className }) => (
|
|
|
<svg viewBox="0 0 24 24" fill="currentColor" className={className}>
|
|
<svg viewBox="0 0 24 24" fill="currentColor" className={className}>
|
|
|
<path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 11.944 0zm4.925 8.531l-1.97 9.28c-.145.658-.537.818-1.084.508l-3-2.21-1.446 1.394c-.16.16-.295.295-.605.295l.213-3.054 5.56-5.022c.242-.213-.054-.333-.373-.121l-6.869 4.326-2.96-.924c-.643-.204-.657-.643.136-.953l11.57-4.458c.535-.196 1.006.128.832.941z"/>
|
|
<path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 11.944 0zm4.925 8.531l-1.97 9.28c-.145.658-.537.818-1.084.508l-3-2.21-1.446 1.394c-.16.16-.295.295-.605.295l.213-3.054 5.56-5.022c.242-.213-.054-.333-.373-.121l-6.869 4.326-2.96-.924c-.643-.204-.657-.643.136-.953l11.57-4.458c.535-.196 1.006.128.832.941z"/>
|
|
@@ -19,10 +19,9 @@ const WhatsAppIcon = ({ className }) => (
|
|
|
export default function RefundPolicyPage() {
|
|
export default function RefundPolicyPage() {
|
|
|
const { t } = useLanguage();
|
|
const { t } = useLanguage();
|
|
|
|
|
|
|
|
- // 请在这里填入你的真实账号
|
|
|
|
|
const TELEGRAM_USERNAME = "Visafly Support"
|
|
const TELEGRAM_USERNAME = "Visafly Support"
|
|
|
- const TELEGRAM_NUMBER = "+8617386033451"; // 例如: visafly_support
|
|
|
|
|
- const WHATSAPP_NUMBER = "353892125284"; // 例如: 1234567890 (不需要加 + 号)
|
|
|
|
|
|
|
+ const TELEGRAM_NUMBER = "+8617386033451";
|
|
|
|
|
+ const WHATSAPP_NUMBER = "353892125284";
|
|
|
|
|
|
|
|
return (
|
|
return (
|
|
|
<div className="min-h-screen bg-slate-50 py-12 px-4 sm:px-6">
|
|
<div className="min-h-screen bg-slate-50 py-12 px-4 sm:px-6">
|
|
@@ -40,17 +39,70 @@ export default function RefundPolicyPage() {
|
|
|
{/* Content */}
|
|
{/* Content */}
|
|
|
<div className="p-8 sm:p-12 space-y-10 text-slate-700 leading-relaxed">
|
|
<div className="p-8 sm:p-12 space-y-10 text-slate-700 leading-relaxed">
|
|
|
|
|
|
|
|
- {/* Section 1: 全额退款 */}
|
|
|
|
|
|
|
+ {/* Section 1: 退款规则与网关手续费 */}
|
|
|
<section>
|
|
<section>
|
|
|
<h2 className="text-xl font-bold text-slate-900 mb-4 flex items-center gap-2">
|
|
<h2 className="text-xl font-bold text-slate-900 mb-4 flex items-center gap-2">
|
|
|
<span className="w-8 h-8 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center text-sm font-bold">1</span>
|
|
<span className="w-8 h-8 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center text-sm font-bold">1</span>
|
|
|
- {t('refund.full_refund_title')}
|
|
|
|
|
|
|
+ {t('refund.standard_refund_title')}
|
|
|
</h2>
|
|
</h2>
|
|
|
- <p className="mb-4">{t('refund.full_refund_desc')}</p>
|
|
|
|
|
|
|
+
|
|
|
|
|
+ {/* 动态费用提示框 */}
|
|
|
|
|
+ <div className="bg-blue-50 border-l-4 border-blue-500 p-5 mb-6 rounded-r-lg">
|
|
|
|
|
+ <p className="font-bold flex items-center gap-2 mb-2 text-blue-900">
|
|
|
|
|
+ <Info size={18} className="text-blue-600" />
|
|
|
|
|
+ {t('refund.fee_notice_title')}
|
|
|
|
|
+ </p>
|
|
|
|
|
+ <p className="text-blue-800 text-sm mb-4">
|
|
|
|
|
+ {t('refund.fee_notice_desc')}
|
|
|
|
|
+ </p>
|
|
|
|
|
+
|
|
|
|
|
+ {/* 支付方式手续费明细表 */}
|
|
|
|
|
+ <div className="bg-white rounded-lg border border-blue-200 overflow-hidden">
|
|
|
|
|
+ <div className="grid grid-cols-2 bg-blue-100/50 p-3 text-sm font-semibold text-blue-900 border-b border-blue-200">
|
|
|
|
|
+ <div>{t('refund.fee_table_method')}</div>
|
|
|
|
|
+ <div className="text-right">{t('refund.fee_table_deduction')}</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ {/* Stripe */}
|
|
|
|
|
+ <div className="grid grid-cols-2 p-3 text-sm border-b border-blue-50 items-center">
|
|
|
|
|
+ <div className="flex items-center gap-2 text-slate-700">
|
|
|
|
|
+ <CreditCard size={16} className="text-slate-400"/>
|
|
|
|
|
+ {t('refund.fee_stripe')}
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div className="text-right text-orange-600 font-semibold bg-orange-50 px-2 py-1 rounded w-fit ml-auto">
|
|
|
|
|
+ {t('refund.fee_stripe_val')}
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ {/* WeChat / Alipay */}
|
|
|
|
|
+ <div className="grid grid-cols-2 p-3 text-sm border-b border-blue-50 items-center">
|
|
|
|
|
+ <div className="flex items-center gap-2 text-slate-700">
|
|
|
|
|
+ <Smartphone size={16} className="text-slate-400"/>
|
|
|
|
|
+ {t('refund.fee_wechat')}
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div className="text-right text-emerald-600 font-semibold bg-emerald-50 px-2 py-1 rounded w-fit ml-auto">
|
|
|
|
|
+ {t('refund.fee_wechat_val')}
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ {/* Others */}
|
|
|
|
|
+ <div className="grid grid-cols-2 p-3 text-sm items-center">
|
|
|
|
|
+ <div className="flex items-center gap-2 text-slate-700">
|
|
|
|
|
+ <Wallet size={16} className="text-slate-400"/>
|
|
|
|
|
+ {t('refund.fee_other')}
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div className="text-right text-slate-600 font-medium">
|
|
|
|
|
+ {t('refund.fee_other_val')}
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <p className="mb-4 font-medium">{t('refund.standard_refund_desc')}</p>
|
|
|
<ul className="list-disc pl-6 space-y-2 text-sm marker:text-blue-500">
|
|
<ul className="list-disc pl-6 space-y-2 text-sm marker:text-blue-500">
|
|
|
- <li>{t('refund.full_refund_item_1')}</li>
|
|
|
|
|
- <li>{t('refund.full_refund_item_2')}</li>
|
|
|
|
|
- <li>{t('refund.full_refund_item_3')}</li>
|
|
|
|
|
|
|
+ <li>{t('refund.standard_refund_item_1')}</li>
|
|
|
|
|
+ <li>{t('refund.standard_refund_item_2')}</li>
|
|
|
|
|
+ <li>{t('refund.standard_refund_item_3')}</li>
|
|
|
</ul>
|
|
</ul>
|
|
|
</section>
|
|
</section>
|
|
|
|
|
|
|
@@ -60,9 +112,10 @@ export default function RefundPolicyPage() {
|
|
|
<span className="w-8 h-8 rounded-full bg-orange-100 text-orange-600 flex items-center justify-center text-sm font-bold">2</span>
|
|
<span className="w-8 h-8 rounded-full bg-orange-100 text-orange-600 flex items-center justify-center text-sm font-bold">2</span>
|
|
|
{t('refund.no_refund_title')}
|
|
{t('refund.no_refund_title')}
|
|
|
</h2>
|
|
</h2>
|
|
|
- <div className="bg-orange-50 border-l-4 border-orange-400 p-4 mb-4 text-sm text-orange-800">
|
|
|
|
|
|
|
+ <div className="bg-orange-50 border-l-4 border-orange-400 p-4 mb-4 text-sm text-orange-800 rounded-r-lg">
|
|
|
<p className="font-bold flex items-center gap-2 mb-1">
|
|
<p className="font-bold flex items-center gap-2 mb-1">
|
|
|
- <AlertTriangle size={16} /> {t('refund.important_note')}
|
|
|
|
|
|
|
+ <AlertTriangle size={18} className="text-orange-600"/>
|
|
|
|
|
+ {t('refund.important_note')}
|
|
|
</p>
|
|
</p>
|
|
|
<p>{t('refund.important_note_desc')}</p>
|
|
<p>{t('refund.important_note_desc')}</p>
|
|
|
</div>
|
|
</div>
|
|
@@ -96,14 +149,13 @@ export default function RefundPolicyPage() {
|
|
|
</div>
|
|
</div>
|
|
|
</section>
|
|
</section>
|
|
|
|
|
|
|
|
- {/* Section 4: 联系方式 (已更新) */}
|
|
|
|
|
|
|
+ {/* Section 4: 联系方式 */}
|
|
|
<section className="border-t pt-8">
|
|
<section className="border-t pt-8">
|
|
|
<h2 className="text-lg font-bold text-slate-900 mb-6 flex items-center gap-2">
|
|
<h2 className="text-lg font-bold text-slate-900 mb-6 flex items-center gap-2">
|
|
|
<HelpCircle size={20} className="text-slate-400" /> {t('refund.contact_title')}
|
|
<HelpCircle size={20} className="text-slate-400" /> {t('refund.contact_title')}
|
|
|
</h2>
|
|
</h2>
|
|
|
|
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
|
- {/* Email Button */}
|
|
|
|
|
<a
|
|
<a
|
|
|
href="mailto:support@visafly.top"
|
|
href="mailto:support@visafly.top"
|
|
|
className="flex items-center gap-3 p-4 rounded-xl border border-slate-200 bg-white hover:border-blue-500 hover:bg-blue-50 transition-all group"
|
|
className="flex items-center gap-3 p-4 rounded-xl border border-slate-200 bg-white hover:border-blue-500 hover:bg-blue-50 transition-all group"
|
|
@@ -117,7 +169,6 @@ export default function RefundPolicyPage() {
|
|
|
</div>
|
|
</div>
|
|
|
</a>
|
|
</a>
|
|
|
|
|
|
|
|
- {/* Telegram Button */}
|
|
|
|
|
<a
|
|
<a
|
|
|
href={`https://t.me/${TELEGRAM_NUMBER}`}
|
|
href={`https://t.me/${TELEGRAM_NUMBER}`}
|
|
|
target="_blank"
|
|
target="_blank"
|
|
@@ -133,7 +184,6 @@ export default function RefundPolicyPage() {
|
|
|
</div>
|
|
</div>
|
|
|
</a>
|
|
</a>
|
|
|
|
|
|
|
|
- {/* WhatsApp Button */}
|
|
|
|
|
<a
|
|
<a
|
|
|
href={`https://wa.me/${WHATSAPP_NUMBER}`}
|
|
href={`https://wa.me/${WHATSAPP_NUMBER}`}
|
|
|
target="_blank"
|
|
target="_blank"
|