update docs

monkeyWie · monkeyWie · commit 522ad70fefb5 · 2025-07-29T18:19:49.000+08:00
diff --git a/.github/workflows/deploy-docs.yml b/.github/workflows/deploy-docs.yml
@@ -30,18 +30,3 @@ jobs:
           cd docs
           pnpm install
           npm run deploy
-
-      # - name: Wrangler Login
-      #   uses: cloudflare/wrangler-action@v3
-      #   with:
-      #     apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
-      #     accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
-      #     workingDirectory: "docs"
-      #     command: "versions"
-
-      # - name: Deploy
-      #   env:
-      #     CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
-      #   run: |
-      #     cd docs
-      #     npm run deploy
diff --git a/docs/messages/en.json b/docs/messages/en.json
@@ -1,4 +1,7 @@
 {
+  "language": {
+    "name": "English"
+  },
   "nav": {
     "features": "Features",
     "gallery": "Gallery",
@@ -8,8 +11,7 @@
   "hero": {
     "title": "Chat Your Way to Amazing Images",
     "subtitle": "Simply describe what you want to see, and watch as Typix transforms your words into stunning AI-generated images through natural conversation.",
-    "primaryBtn": "Try Now",
-    "secondaryBtn": "View Examples",
+    "primaryBtn": "TRY NOW",
     "stats": {
       "images": "Images Created",
       "users": "Happy Users",
diff --git a/docs/messages/zh.json b/docs/messages/zh.json
@@ -1,4 +1,7 @@
 {
+  "language": {
+    "name": "中文"
+  },
   "nav": {
     "features": "功能特色",
     "gallery": "作品画廊",
@@ -9,7 +12,6 @@
     "title": "通过聊天创造精美图像",
     "subtitle": "只需描述您想要看到的内容，观看 Typix 如何通过自然对话将您的文字转化为令人惊叹的 AI 生成图像。",
     "primaryBtn": "开始使用",
-    "secondaryBtn": "查看示例",
     "stats": {
       "images": "创建图像",
       "users": "满意用户",
diff --git a/docs/src/components/footer.tsx b/docs/src/components/footer.tsx
@@ -2,6 +2,7 @@
 
 import { useTranslations } from 'next-intl';
 import { Palette, Github, Twitter, MessageCircle, Sparkles, Zap } from 'lucide-react';
+import { TextLinkButton } from './text-link-button';
 
 export function Footer() {
   const t = useTranslations('footer');
@@ -71,13 +72,12 @@ export function Footer() {
                 <ul className="space-y-4">
                   {links.map((link) => (
                     <li key={link}>
-                      <a
+                      <TextLinkButton
                         href={category === 'product' ? `#${link}` : '#'}
-                        className="text-muted-foreground hover:text-foreground transition-all duration-300 micro-interaction relative group"
+                        variant="footer"
                       >
                         {link.charAt(0).toUpperCase() + link.slice(1)}
-                        <div className="absolute bottom-0 left-0 w-0 h-px bg-gradient-to-r from-purple-500 via-blue-500 to-cyan-500 group-hover:w-full transition-all duration-300" />
-                      </a>
+                      </TextLinkButton>
                     </li>
                   ))}
                 </ul>
@@ -97,14 +97,13 @@ export function Footer() {
             </p>
             <div className="flex items-center space-x-8 text-sm">
               {['Privacy Policy', 'Terms of Service'].map((item) => (
-                <a 
+                <TextLinkButton
                   key={item}
-                  href="#" 
-                  className="text-muted-foreground hover:text-foreground transition-all duration-300 micro-interaction relative group"
+                  href="#"
+                  variant="footer"
                 >
                   {item}
-                  <div className="absolute bottom-0 left-0 w-0 h-px bg-gradient-to-r from-purple-500 via-blue-500 to-cyan-500 group-hover:w-full transition-all duration-300" />
-                </a>
+                </TextLinkButton>
               ))}
             </div>
           </div>
diff --git a/docs/src/components/header.tsx b/docs/src/components/header.tsx
@@ -1,12 +1,59 @@
 'use client';
 
+import { useState } from 'react';
 import { useTranslations } from 'next-intl';
-import { Github, ExternalLink } from 'lucide-react';
+import { Github, ExternalLink, Menu, X, LucideIcon } from 'lucide-react';
 import { ThemeToggle } from './theme-toggle';
 import { LanguageToggle } from './language-toggle';
+import { TextLinkButton } from './text-link-button';
+
+// Navigation items configuration
+interface NavItem {
+  key: string;
+  href: string;
+  icon: LucideIcon;
+  external?: boolean;
+}
+
+const navigationItems: NavItem[] = [
+  {
+    key: 'github',
+    href: 'https://github.com',
+    icon: Github,
+    external: true,
+  },
+  {
+    key: 'docs',
+    href: '#',
+    icon: ExternalLink,
+    external: true,
+  },
+];
 
 export function Header() {
   const t = useTranslations('nav');
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  const toggleMenu = () => {
+    setIsMenuOpen(!isMenuOpen);
+  };
+
+  const renderNavItem = (item: NavItem, isMobile = false) => {
+    const label = item.key === 'docs' ? 'Docs' : t(item.key);
+    
+    return (
+      <TextLinkButton
+        key={item.key}
+        href={item.href}
+        external={item.external}
+        variant={isMobile ? 'header-mobile' : 'header-desktop'}
+        icon={item.icon}
+        onClick={isMobile ? () => setIsMenuOpen(false) : undefined}
+      >
+        {label}
+      </TextLinkButton>
+    );
+  };
 
   return (
     <header className="absolute top-0 left-0 right-0 py-6 px-4 sm:px-6 lg:px-8 z-50">
@@ -29,41 +76,44 @@ export function Header() {
             </div>
           </div>
 
-          {/* Right Navigation */}
+          {/* Right Side */}
           <div className="flex items-center space-x-2">
-            {/* GitHub Link */}
-            <a
-              href="https://github.com"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="group flex items-center space-x-2 px-3 py-2 text-sm font-medium text-muted-foreground hover:text-foreground transition-all duration-300 rounded-full border border-border/20 hover:border-border/40 backdrop-blur-sm hover:backdrop-blur-md hover:bg-accent/10"
-            >
-              <Github className="w-4 h-4 group-hover:scale-110 transition-transform duration-300" />
-              <span className="hidden sm:inline">{t('github')}</span>
-            </a>
-
-            {/* Docs Link */}
-            <a
-              href="#"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="group flex items-center space-x-2 px-3 py-2 text-sm font-medium text-muted-foreground hover:text-foreground transition-all duration-300 rounded-full border border-border/20 hover:border-border/40 backdrop-blur-sm hover:backdrop-blur-md hover:bg-accent/10"
-            >
-              <ExternalLink className="w-4 h-4 group-hover:scale-110 transition-transform duration-300" />
-              <span className="hidden sm:inline">Docs</span>
-            </a>
-
-            {/* Divider */}
-            <div className="w-px h-6 bg-border/30 mx-2"></div>
+            {/* Desktop Navigation */}
+            <div className="hidden md:flex items-center space-x-2">
+              {navigationItems.map(item => renderNavItem(item))}
+              
+              {/* Divider */}
+              <div className="w-px h-6 bg-border/30 mx-2"></div>
+            </div>
 
-            {/* Theme Toggle */}
+            {/* Theme and Language Toggles - Always visible */}
             <ThemeToggle />
-
-            {/* Language Toggle */}
             <LanguageToggle />
+
+            {/* Mobile Menu Button */}
+            <button
+              onClick={toggleMenu}
+              className="md:hidden p-2 text-muted-foreground hover:text-foreground transition-colors duration-300 rounded-full border border-border/20 hover:border-border/40 backdrop-blur-sm hover:backdrop-blur-md hover:bg-accent/10"
+              aria-label="Toggle menu"
+            >
+              {isMenuOpen ? (
+                <X className="w-5 h-5" />
+              ) : (
+                <Menu className="w-5 h-5" />
+              )}
+            </button>
           </div>
         </div>
+
+        {/* Mobile Navigation Menu */}
+        {isMenuOpen && (
+          <div className="md:hidden mt-4 p-4 rounded-2xl border border-border/20 backdrop-blur-md bg-background/80 shadow-lg">
+            <div className="flex flex-col space-y-3">
+              {navigationItems.map(item => renderNavItem(item, true))}
+            </div>
+          </div>
+        )}
       </div>
     </header>
   );
-}
+}
diff --git a/docs/src/components/hero.tsx b/docs/src/components/hero.tsx
@@ -5,7 +5,8 @@ import { useState, useEffect } from 'react';
 import { motion, AnimatePresence } from 'motion/react';
 import { 
   Send, 
-  Sparkles
+  Sparkles,
+  Github
 } from 'lucide-react';
 
 // Simple Typewriter Component
@@ -119,7 +120,7 @@ export function Hero() {
 
   return (
     <motion.section 
-      className="pt-48 pb-20 px-4 sm:px-6 lg:px-8 relative overflow-hidden"
+      className="pt-28 lg:pt-48 pb-20 px-4 sm:px-6 lg:px-8 relative overflow-hidden"
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
       transition={{ 
@@ -167,15 +168,18 @@ export function Hero() {
               {t('subtitle')}
             </motion.p>
 
-            {/* Single CTA Button */}
+            {/* CTA Buttons */}
             <motion.div 
-              className="flex justify-center lg:justify-start"
+              className="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start max-w-lg mx-auto lg:mx-0"
               initial={{ opacity: 0, y: 20 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.6, delay: 0.4 }}
             >
-              <motion.button 
-                className="linear-button text-lg px-8 py-4 glow cursor-pointer"
+              <motion.a
+                href="https://app.typix.art"
+                target="_blank"
+                className="linear-button px-8 py-5 glow cursor-pointer font-semibold flex-1 inline-flex items-center justify-center"
+                style={{ fontSize: '1.25rem' }}
                 whileHover={{ 
                   scale: 1.05,
                   boxShadow: "0 8px 25px rgba(168, 85, 247, 0.4)"
@@ -184,7 +188,22 @@ export function Hero() {
                 transition={{ duration: 0.3 }}
               >
                 {t('primaryBtn')}
-              </motion.button>
+              </motion.a>
+              
+              <motion.a
+                href="https://github.com/monkeyWie/typix"
+                target="_blank"
+                className="flex items-center justify-center gap-3 text-xl px-8 py-5 bg-card/50 backdrop-blur-sm border border-border/20 rounded-2xl font-semibold text-foreground hover:bg-card/70 transition-all duration-300 flex-1 glow"
+                whileHover={{ 
+                  scale: 1.05,
+                  boxShadow: "0 8px 25px rgba(0, 0, 0, 0.1)"
+                }}
+                whileTap={{ scale: 0.95 }}
+                transition={{ duration: 0.3 }}
+              >
+                <Github className="w-6 h-6" />
+                GitHub
+              </motion.a>
             </motion.div>
           </motion.div>
 
diff --git a/docs/src/components/language-toggle.tsx b/docs/src/components/language-toggle.tsx
@@ -4,16 +4,37 @@ import { Languages } from 'lucide-react';
 import { useRouter, usePathname } from 'next/navigation';
 import { useLocale } from 'next-intl';
 import { useState, useEffect } from 'react';
+import { locales } from '@/i18n';
+
+// Helper function to get language name from messages
+const getLanguageName = async (localeCode: string): Promise<string> => {
+  try {
+    const messages = await import(`../../messages/${localeCode}.json`);
+    return messages.default.language?.name || localeCode;
+  } catch {
+    return localeCode;
+  }
+};
 
 export function LanguageToggle() {
   const router = useRouter();
   const pathname = usePathname();
   const locale = useLocale();
   const [isOpen, setIsOpen] = useState(false);
   const [mounted, setMounted] = useState(false);
+  const [languageNames, setLanguageNames] = useState<Record<string, string>>({});
 
-  // Only enable client-side features after hydration
+  // Load language names from i18n messages
   useEffect(() => {
+    const loadLanguageNames = async () => {
+      const names: Record<string, string> = {};
+      for (const localeCode of locales) {
+        names[localeCode] = await getLanguageName(localeCode);
+      }
+      setLanguageNames(names);
+    };
+
+    loadLanguageNames();
     setMounted(true);
   }, []);
 
@@ -31,7 +52,7 @@ export function LanguageToggle() {
     <div className="relative">
       <button
         onClick={() => mounted && setIsOpen(!isOpen)}
-        className="group w-9 h-9 rounded-full flex items-center justify-center border border-border/20 hover:border-border/40 backdrop-blur-sm hover:backdrop-blur-md hover:bg-accent/10 transition-all duration-300"
+        className="group w-9 h-9 rounded-full flex items-center justify-center border border-border/20 hover:border-border/40 backdrop-blur-sm hover:backdrop-blur-md hover:bg-accent/10 transition-all duration-300 cursor-pointer disabled:cursor-default"
         aria-label="Toggle language"
         disabled={!mounted}
       >
@@ -44,24 +65,24 @@ export function LanguageToggle() {
             className="fixed inset-0 z-10"
             onClick={() => setIsOpen(false)}
           />
-          <div className="absolute right-0 top-full mt-2 w-32 backdrop-blur-md border border-border/30 rounded-xl shadow-2xl z-20 overflow-hidden bg-background/80">
-            <button
-              onClick={() => toggleLanguage('en')}
-              className={`w-full px-4 py-3 text-left text-sm hover:bg-accent/50 transition-all duration-200 ${
-                locale === 'en' ? 'text-foreground font-medium bg-accent/20' : 'text-muted-foreground'
-              }`}
-            >
-              English
-            </button>
-            <div className="w-full h-px bg-border/30"></div>
-            <button
-              onClick={() => toggleLanguage('zh')}
-              className={`w-full px-4 py-3 text-left text-sm hover:bg-accent/50 transition-all duration-200 ${
-                locale === 'zh' ? 'text-foreground font-medium bg-accent/20' : 'text-muted-foreground'
-              }`}
-            >
-              中文
-            </button>
+          <div className="absolute right-0 top-full mt-2 w-32 backdrop-blur-md border border-border/30 rounded-xl shadow-2xl z-20 overflow-hidden bg-background/95">
+            {locales.map((localeCode, index) => (
+              <div key={localeCode}>
+                <button
+                  onClick={() => toggleLanguage(localeCode)}
+                  className={`w-full px-4 py-3 text-left text-sm transition-all duration-200 cursor-pointer hover:bg-slate-100 dark:hover:bg-slate-800 hover:text-slate-900 dark:hover:text-slate-100 ${
+                    locale === localeCode 
+                      ? 'text-foreground font-semibold bg-slate-200 dark:bg-slate-700' 
+                      : 'text-muted-foreground'
+                  }`}
+                >
+                  {languageNames[localeCode] || localeCode}
+                </button>
+                {index < locales.length - 1 && (
+                  <div className="w-full h-px bg-border/30"></div>
+                )}
+              </div>
+            ))}
           </div>
         </>
       )}
diff --git a/docs/src/components/text-link-button.tsx b/docs/src/components/text-link-button.tsx
diff --git a/docs/src/components/theme-toggle.tsx b/docs/src/components/theme-toggle.tsx
