From 8125c4eaa7d146be75f9cd8f8ab8d83759a8754b Mon Sep 17 00:00:00 2001 From: Haitao Pan Date: Fri, 6 Feb 2026 23:36:42 +0800 Subject: [PATCH] feat: Implement global acceleration guide wizard --- next-env.d.ts | 2 +- src/app/page.tsx | 32 +++++------ src/components/HeroCard.tsx | 107 ++++++++++++++++++++++++++++++++++++ src/i18n/translations.ts | 33 ++++++++++- 4 files changed, 155 insertions(+), 19 deletions(-) create mode 100644 src/components/HeroCard.tsx diff --git a/next-env.d.ts b/next-env.d.ts index 9edff1c..c4b7818 100644 --- a/next-env.d.ts +++ b/next-env.d.ts @@ -1,6 +1,6 @@ /// /// -import "./.next/types/routes.d.ts"; +import "./.next/dev/types/routes.d.ts"; // NOTE: This file should not be edited // see https://nextjs.org/docs/app/api-reference/config/typescript for more information. diff --git a/src/app/page.tsx b/src/app/page.tsx index 2fd9d79..8bc92de 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -26,6 +26,7 @@ import { translations } from "../i18n/translations"; import { useMoltbotStore } from "../lib/moltbotStore"; import { cn } from "../lib/utils"; import { AskAIDialog } from "../components/AskAIDialog"; +import { HeroCard } from "../components/HeroCard"; import useSWR from "swr"; const iconMap: Record = { @@ -147,23 +148,20 @@ export function HeroSection() {
- {t.heroCards.map((card) => { - const Icon = getIcon(card.title, PlusCircle); - return ( -
-
- -
-
-

{card.title}

-

{card.description}

-
-
- ); - })} +
+ {t.heroCards.map((card) => { + const Icon = getIcon(card.title, PlusCircle); + return ( + + ); + })} +
); diff --git a/src/components/HeroCard.tsx b/src/components/HeroCard.tsx new file mode 100644 index 0000000..6f64e7c --- /dev/null +++ b/src/components/HeroCard.tsx @@ -0,0 +1,107 @@ +'use client'; + +import { useState } from 'react'; +import { ArrowRight, X, QrCode } from 'lucide-react'; +import { cn } from '../lib/utils'; +import Link from 'next/link'; + +interface GuideStep { + text: string; + link?: { url: string; label: string }; + code?: string; + image?: string; +} + +interface HeroCardProps { + icon: any; + title: string; + description: string; + guide?: { + title: string; + steps: GuideStep[]; + dismiss: string; + }; +} + +export function HeroCard({ icon: Icon, title, description, guide }: HeroCardProps) { + const [showGuide, setShowGuide] = useState(false); + + return ( +
guide && setShowGuide(true)} + onMouseLeave={() => setShowGuide(false)} + > +
+ +
+
+

{title}

+

{description}

+ + {/* Guide Content Overlay */} + {guide && showGuide && ( +
+
+
+

+ + + + + {guide.title} +

+ +
+ +
+ {guide.steps.map((step, idx) => ( +
+ + {idx + 1} + +
+

{step.text}

+ {step.link && ( + + {step.link.label} + + + )} + + {/* Special handling for VLESS QR code hint */} + {idx === 2 && ( +
+ +
+

VLESS Protocol Ready

+

Scan QR code in panel

+
+
+ )} +
+
+ ))} +
+
+
+ )} +
+
+ ); +} diff --git a/src/i18n/translations.ts b/src/i18n/translations.ts index 6ad9101..3f40433 100644 --- a/src/i18n/translations.ts +++ b/src/i18n/translations.ts @@ -580,7 +580,20 @@ export type Translation = { userCenter: UserCenterTranslation marketing: { home: MarketingHomeTranslation & { - heroCards: { title: string; description: string }[] + heroCards: { + title: string + description: string + guide?: { + title: string + steps: { + text: string + link?: { url: string; label: string } + code?: string // For VLESS link/QR or command + image?: string // For QR code placeholder if needed + }[] + dismiss: string + } + }[] nextSteps: { title: string badge: string @@ -1142,6 +1155,15 @@ export const translations: Record<'en' | 'zh', Translation> = { { title: 'Global Acceleration Network', description: 'Leverage globally distributed edge nodes to achieve high-speed application distribution and stable connections, ensuring users enjoy an ultra-fast access experience.', + guide: { + title: 'Global Acceleration Guide', + dismiss: 'Exit Guide', + steps: [ + { text: 'svc.plus provides underlying overseas acceleration solutions to solve the last-mile barrier for you.' }, + { text: 'Enter the panel to configure your node.', link: { url: '/panel', label: 'Go to Panel' } }, + { text: 'Scan to join via VLESS protocol (clients supported: OneXray, etc.).', link: { url: 'https://github.com/OneXray/OneXray', label: 'Client Download' } }, + ], + }, }, { title: 'Full-link SaaS Hosting', @@ -1909,6 +1931,15 @@ export const translations: Record<'en' | 'zh', Translation> = { { title: '全球加速网络', description: '依托全球分布的边缘节点，实现应用的高速分发与稳定连接，确保用户享受极速的访问体验。', + guide: { + title: '全球加速接入向导', + dismiss: '退出向导', + steps: [ + { text: 'svc.plus 提供的底层海外加速方案将为你解决最后 1 公里的障碍。' }, + { text: '点击下方按钮进入控制台配置节点。', link: { url: '/panel', label: '进入控制台' } }, + { text: '支持 Vless 协议的客户端都可以扫码加入，例如 OneXray。', link: { url: 'https://github.com/OneXray/OneXray', label: '客户端下载' } }, + ], + }, }, { title: '全链路 SaaS 托管',