feat: add layout components (MarketingNavbar, AppNavbar, Footer, layouts)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/components/layout/MarketingNavbar.tsx

@@ -0,0 +1,124 @@
+import { useState, useRef, useEffect } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import { Languages, ChevronDown, Check, Menu, X } from 'lucide-react';
+import { useLanguage } from '../../contexts/LanguageContext';
+
+export default function MarketingNavbar() {
+  const { language, setLanguage, t } = useLanguage();
+  const location = useLocation();
+  const [showLangMenu, setShowLangMenu] = useState(false);
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const langMenuRef = useRef<HTMLDivElement>(null);
+  const isHome = location.pathname === '/';
+
+  const navLinks = [
+    { to: '/', label: t.marketing.nav.home },
+    { to: '/docs', label: t.marketing.nav.docs },
+    { to: '/blog', label: t.marketing.nav.blog },
+  ];
+
+  const anchorLinks = isHome
+    ? [
+        { href: '#pricing', label: t.marketing.nav.pricing },
+        { href: '#contact', label: t.marketing.nav.contact },
+      ]
+    : [];
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (langMenuRef.current && !langMenuRef.current.contains(event.target as Node)) {
+        setShowLangMenu(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  return (
+    <nav className="h-16 bg-white border-b border-gray-200 flex items-center justify-between px-6 flex-shrink-0 z-[60] relative">
+      <Link to="/" className="flex items-center gap-2">
+        <img src="/texpixel-app-icon.svg" alt="TexPixel" className="w-8 h-8" />
+        <span className="text-xl font-bold text-gray-900 tracking-tight">TexPixel</span>
+      </Link>
+
+      <div className="hidden md:flex items-center gap-6">
+        {navLinks.map((link) => (
+          <Link
+            key={link.to}
+            to={link.to}
+            className={`text-sm font-medium transition-colors ${
+              location.pathname === link.to ? 'text-blue-600' : 'text-gray-700 hover:text-gray-900'
+            }`}
+          >
+            {link.label}
+          </Link>
+        ))}
+        {anchorLinks.map((link) => (
+          <a
+            key={link.href}
+            href={link.href}
+            className="text-sm font-medium text-gray-700 hover:text-gray-900 transition-colors"
+          >
+            {link.label}
+          </a>
+        ))}
+      </div>
+
+      <div className="flex items-center gap-3">
+        <div className="relative" ref={langMenuRef}>
+          <button
+            onClick={() => setShowLangMenu(!showLangMenu)}
+            className="flex items-center gap-2 px-3 py-2 hover:bg-gray-100 rounded-lg text-gray-700 text-sm font-medium transition-colors"
+          >
+            <Languages size={18} />
+            <span className="hidden sm:inline">{language === 'en' ? 'EN' : '中文'}</span>
+            <ChevronDown size={14} className={`transition-transform duration-200 ${showLangMenu ? 'rotate-180' : ''}`} />
+          </button>
+          {showLangMenu && (
+            <div className="absolute right-0 top-full mt-2 w-32 bg-white rounded-xl shadow-lg border border-gray-200 py-1 z-50">
+              {(['en', 'zh'] as const).map((lang) => (
+                <button
+                  key={lang}
+                  onClick={() => { setLanguage(lang); setShowLangMenu(false); }}
+                  className={`w-full flex items-center justify-between px-4 py-2 text-sm transition-colors hover:bg-gray-50 ${language === lang ? 'text-blue-600 font-medium' : 'text-gray-700'}`}
+                >
+                  {lang === 'en' ? 'English' : '简体中文'}
+                  {language === lang && <Check size={14} />}
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+
+        <Link
+          to="/app"
+          className="hidden sm:inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors"
+        >
+          {t.marketing.nav.launchApp}
+        </Link>
+
+        <button className="md:hidden p-2" onClick={() => setMobileMenuOpen(!mobileMenuOpen)}>
+          {mobileMenuOpen ? <X size={20} /> : <Menu size={20} />}
+        </button>
+      </div>
+
+      {mobileMenuOpen && (
+        <div className="absolute top-16 left-0 right-0 bg-white border-b border-gray-200 shadow-lg md:hidden z-50 py-4 px-6 flex flex-col gap-3">
+          {navLinks.map((link) => (
+            <Link key={link.to} to={link.to} className="text-sm font-medium text-gray-700 py-2" onClick={() => setMobileMenuOpen(false)}>
+              {link.label}
+            </Link>
+          ))}
+          {anchorLinks.map((link) => (
+            <a key={link.href} href={link.href} className="text-sm font-medium text-gray-700 py-2" onClick={() => setMobileMenuOpen(false)}>
+              {link.label}
+            </a>
+          ))}
+          <Link to="/app" className="text-sm font-medium text-blue-600 py-2" onClick={() => setMobileMenuOpen(false)}>
+            {t.marketing.nav.launchApp}
+          </Link>
+        </div>
+      )}
+    </nav>
+  );
+}