'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}`)}