's'

app/components/Community.tsx

@@ -2,16 +2,26 @@
 
 import { Link, useTranslation } from "@/i18n/navigation";
 import ShopCard from "./ShopCard";
+import { TOPIC_IDS } from "@/config";
+
+const linkKeys = ["github", "destinations", "indieDev", "aiAgent", "cloudPhone", "unmannedLive", "appDownload"] as const;
 
-const linkKeys = ["github", "destinations", "appDownload"] as const;
 const linkIcons: Record<(typeof linkKeys)[number], string> = {
   github: "📦",
   destinations: "🗺️",
+  indieDev: "🛠️",
+  aiAgent: "🤖",
+  cloudPhone: "☁️",
+  unmannedLive: "📺",
   appDownload: "📱",
 };
 const linkHrefs: Record<(typeof linkKeys)[number], { href: string; newTab?: boolean }> = {
   github: { href: "https://github.com" },
-  destinations: { href: "#" },
+  destinations: { href: "https://meetup.hackrobot.cn/", newTab: true },
+  indieDev: { href: "/ebook" },
+  aiAgent: { href: "/ebook" },
+  cloudPhone: { href: "https://android.hackrobot.cn", newTab: true },
+  unmannedLive: { href: "/ebook" },
   appDownload: { href: "/app" },
 };
 
@@ -83,13 +93,21 @@ export default function Community() {
         <div className="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
           {linkKeys.map((key) => {
             const { href, newTab } = linkHrefs[key];
+            const isTopic = (TOPIC_IDS as readonly string[]).includes(key);
             const content = (
               <>
                 <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-slate-50 text-xl dark:bg-slate-800">
                   {linkIcons[key]}
                 </span>
-                <div>
-                  <h4 className="font-bold text-slate-900 dark:text-slate-100">{t(`links.${key}.title`)}</h4>
+                <div className="min-w-0 flex-1">
+                  <div className="flex flex-wrap items-center gap-2">
+                    <h4 className="font-bold text-slate-900 dark:text-slate-100">{t(`links.${key}.title`)}</h4>
+                    {isTopic && (
+                      <span className="rounded-md bg-amber-100 px-1.5 py-0.5 text-xs font-medium text-amber-700 dark:bg-amber-900/50 dark:text-amber-400">
+                        {t("topicTag")}
+                      </span>
+                    )}
+                  </div>
                   <p className="mt-1 text-sm text-slate-500 dark:text-slate-400">{t(`links.${key}.desc`)}</p>
                   <span className="mt-2 inline-block text-sm font-medium text-sky-600">
                     {t(`links.${key}.label`)}

app/components/Footer.tsx

@@ -8,7 +8,7 @@ const footerSections = [
     links: [
       { labelKey: "roadmap" as const, href: "#roadmap" },
       { labelKey: "tools" as const, href: "#tools" },
-      { labelKey: "destinations" as const, href: "#" },
+      { labelKey: "destinations" as const, href: "https://meetup.hackrobot.cn/", openInNewTab: true },
     ],
   },
   {
@@ -78,6 +78,8 @@ export default function Footer() {
                     ) : (
                       <a
                         href={link.href}
+                        target={"openInNewTab" in link && link.openInNewTab ? "_blank" : undefined}
+                        rel={"openInNewTab" in link && link.openInNewTab ? "noopener noreferrer" : undefined}
                         className="text-sm text-slate-500 transition-colors hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
                       >
                         {t(`links.${link.labelKey}`)}

app/globals.css

@@ -5,8 +5,8 @@
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
+  --font-sans: "Geist Variable", system-ui, sans-serif;
+  --font-mono: "Geist Mono Variable", ui-monospace, monospace;
   --color-primary: #0ea5e9;
   --color-primary-dark: #0284c7;
   --color-accent: #f59e0b;

app/layout.tsx

@@ -1,19 +1,10 @@
 import type { Metadata, Viewport } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import "@fontsource-variable/geist";
+import "@fontsource-variable/geist-mono";
 import "./globals.css";
 import { ThemeProvider } from "./context/ThemeContext";
 import { getThemeConfig } from "@/config";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
-
 export const viewport: Viewport = {
   width: "device-width",
   initialScale: 1,
@@ -57,7 +48,7 @@ export default function RootLayout({
   return (
     <html lang="zh-CN" suppressHydrationWarning>
       <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+        className="antialiased font-sans"
       >
         <ThemeScript />
         <ThemeProvider>{children}</ThemeProvider>