From cbf41ec3f950cfc8edee30118c822d2ae9810c36 Mon Sep 17 00:00:00 2001
From: shenlan <xzerolab@gmail.com>
Date: Tue, 2 Dec 2025 08:53:11 +0800
Subject: [PATCH] Refactor footer component (#704)

---
 dashboard/src/app/page.tsx          | 36 +----------
 dashboard/src/components/Footer.tsx | 97 +++++++----------------------
 2 files changed, 25 insertions(+), 108 deletions(-)

diff --git a/dashboard/src/app/page.tsx b/dashboard/src/app/page.tsx
index 7ccf7f4..60974a6 100644
--- a/dashboard/src/app/page.tsx
+++ b/dashboard/src/app/page.tsx
@@ -7,8 +7,6 @@ import {
   ArrowRight,
   BookOpen,
   Command,
-  Github,
-  Globe,
   Layers,
   Link,
   Lock,
@@ -20,6 +18,7 @@ import {
   Terminal,
   Users,
 } from 'lucide-react'
+import Footer from '../components/Footer'
 
 const heroCards = [
   {
@@ -234,39 +233,6 @@ function ShortcutsSection() {
   )
 }
 
-function Footer() {
-  const socials = [
-    { label: 'GitHub', icon: Github, href: 'https://github.com' },
-    { label: 'Docs', icon: BookOpen, href: '#' },
-    { label: 'Globe', icon: Globe, href: '#' },
-    { label: 'API', icon: Link, href: '#' },
-  ]
-
-  return (
-    <footer className="mt-12 flex flex-col items-center justify-between gap-4 rounded-2xl border border-white/10 bg-white/5 px-6 py-4 text-sm text-slate-300 md:flex-row">
-      <div className="flex items-center gap-3">
-        <div className="flex items-center gap-2 text-white">
-          <ShieldCheck className="h-5 w-5" aria-hidden />
-          <span className="font-semibold">Cloud-Neutral</span>
-        </div>
-        <span className="text-slate-400">© 2025</span>
-      </div>
-      <div className="flex items-center gap-3">
-        {socials.map(({ label, icon: Icon, href }) => (
-          <a
-            key={label}
-            href={href}
-            className="flex h-9 w-9 items-center justify-center rounded-full border border-white/10 bg-white/5 text-white transition hover:border-indigo-400/50 hover:text-indigo-100"
-          >
-            <Icon className="h-4 w-4" aria-hidden />
-            <span className="sr-only">{label}</span>
-          </a>
-        ))}
-      </div>
-    </footer>
-  )
-}
-
 function LogoPill({ label }: { label: string }) {
   return (
     <span className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3 py-1 text-xs font-semibold text-white">
diff --git a/dashboard/src/components/Footer.tsx b/dashboard/src/components/Footer.tsx
index 3069bf2..49973d6 100644
--- a/dashboard/src/components/Footer.tsx
+++ b/dashboard/src/components/Footer.tsx
@@ -1,82 +1,33 @@
-'use client'
-import { usePathname } from 'next/navigation'
-
-import { BookOpen, Github, Globe, Link as LinkIcon, ShieldCheck } from 'lucide-react'
-import { useLanguage } from '../i18n/LanguageProvider'
-import { translations } from '../i18n/translations'
-
-const HIDDEN_PATH_PREFIXES = ['/login', '/register']
+import { BookOpen, Github, Globe, Link, ShieldCheck } from 'lucide-react'
 
 export default function Footer() {
-  const pathname = usePathname()
-  const isHidden = pathname ? HIDDEN_PATH_PREFIXES.some((prefix) => pathname.startsWith(prefix)) : false
-  if (isHidden) {
-    return null
-  }
-
-  const { language } = useLanguage()
-  const t = translations[language].footerLinks
-  const [privacy, terms, contact] = t
-
-  const socialLinks = [
-    { label: 'GitHub', href: 'https://github.com/CloudNativeSuite', icon: Github },
-    { label: language === 'zh' ? '文档' : 'Docs', href: '/docs', icon: BookOpen },
-    { label: 'Website', href: 'https://cloudneutralsuite.example', icon: Globe },
-    { label: 'API', href: '/api', icon: LinkIcon },
+  const socials = [
+    { label: 'GitHub', icon: Github, href: 'https://github.com' },
+    { label: 'Docs', icon: BookOpen, href: '#' },
+    { label: 'Globe', icon: Globe, href: '#' },
+    { label: 'API', icon: Link, href: '#' },
   ]
 
   return (
-    <footer className="border-t border-white/10 bg-slate-950/95 text-slate-200">
-      <div className="relative mx-auto flex w-full max-w-6xl flex-col gap-6 px-8 py-8">
-        <div className="absolute inset-0 bg-[radial-gradient(circle_at_20%_20%,rgba(99,102,241,0.18),transparent_35%),radial-gradient(circle_at_80%_0,rgba(14,165,233,0.12),transparent_30%)]" aria-hidden />
-        <div className="relative flex flex-col items-center gap-4 rounded-2xl border border-white/10 bg-white/5 px-6 py-4 shadow-[0_18px_45px_rgba(0,0,0,0.35)] backdrop-blur sm:flex-row sm:justify-between">
-          <div className="flex items-center gap-3 text-sm text-slate-300">
-            <div className="flex items-center gap-2 text-white">
-              <ShieldCheck className="h-5 w-5" aria-hidden />
-              <span className="font-semibold">Cloud-Neutral</span>
-            </div>
-            <span className="rounded-full bg-indigo-500/20 px-2 py-0.5 text-[11px] font-semibold uppercase tracking-wide text-indigo-100">
-              {language === 'zh' ? '云原生安全' : 'Cloud native security'}
-            </span>
-            <span className="text-slate-500">© 2025</span>
-          </div>
-          <div className="flex items-center gap-3">
-            {socialLinks.map(({ label, href, icon: Icon }) => (
-              <a
-                key={label}
-                href={href}
-                className="flex h-9 w-9 items-center justify-center rounded-full border border-white/10 bg-white/5 text-white transition hover:border-indigo-400/50 hover:text-indigo-100"
-                target={href.startsWith('http') ? '_blank' : undefined}
-                rel={href.startsWith('http') ? 'noreferrer' : undefined}
-              >
-                <Icon className="h-4 w-4" aria-hidden />
-                <span className="sr-only">{label}</span>
-              </a>
-            ))}
-          </div>
-        </div>
-        <div className="relative flex flex-col items-center gap-3 text-xs text-slate-400 sm:flex-row sm:justify-between">
-          <div className="flex flex-wrap items-center justify-center gap-3 sm:justify-start">
-            <a href="#privacy" className="transition hover:text-white">
-              {privacy}
-            </a>
-            <span aria-hidden className="text-white/20">
-              •
-            </span>
-            <a href="#terms" className="transition hover:text-white">
-              {terms}
-            </a>
-            <span aria-hidden className="text-white/20">
-              •
-            </span>
-            <a href="#contact" className="transition hover:text-white">
-              {contact}
-            </a>
-          </div>
-          <span className="text-center sm:text-right">
-            {language === 'zh' ? '保持云中立，随时安全上线。' : 'Stay cloud-neutral and ship securely at all times.'}
-          </span>
+    <footer className="mt-12 flex flex-col items-center justify-between gap-4 rounded-2xl border border-white/10 bg-white/5 px-6 py-4 text-sm text-slate-300 md:flex-row">
+      <div className="flex items-center gap-3">
+        <div className="flex items-center gap-2 text-white">
+          <ShieldCheck className="h-5 w-5" aria-hidden />
+          <span className="font-semibold">Cloud-Neutral</span>
         </div>
+        <span className="text-slate-400">© 2025</span>
+      </div>
+      <div className="flex items-center gap-3">
+        {socials.map(({ label, icon: Icon, href }) => (
+          <a
+            key={label}
+            href={href}
+            className="flex h-9 w-9 items-center justify-center rounded-full border border-white/10 bg-white/5 text-white transition hover:border-indigo-400/50 hover:text-indigo-100"
+          >
+            <Icon className="h-4 w-4" aria-hidden />
+            <span className="sr-only">{label}</span>
+          </a>
+        ))}
       </div>
     </footer>
   )