init: 初始化 AssetX 项目仓库
包含 webapp（Next.js 用户端）、webapp-back（Go 后端）、 antdesign（管理后台）、landingpage（营销落地页）、 数据库 SQL 和配置文件。
This commit is contained in:
726
landingpage/components/Navbar.tsx
Normal file
726
landingpage/components/Navbar.tsx
Normal file
@@ -0,0 +1,726 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import Image from 'next/image';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import {
|
||||
Navbar as HeroNavbar,
|
||||
NavbarBrand,
|
||||
NavbarContent,
|
||||
NavbarItem,
|
||||
Button,
|
||||
Dropdown,
|
||||
DropdownTrigger,
|
||||
DropdownMenu,
|
||||
DropdownItem
|
||||
} from '@heroui/react';
|
||||
import { ArrowRight, ChevronDown, Menu, X, Sun, Moon, Globe, Layers, Rocket, ArrowLeftRight, Coins, LayoutDashboard, Radio, BookOpen, ShieldCheck, GraduationCap, MessageCircle, Headphones, Users, Briefcase, Mail, Newspaper, Rainbow } from 'lucide-react';
|
||||
import ProductMenu from './ProductMenu';
|
||||
import ResourceMenu from './ResourceMenu';
|
||||
import { useLanguage } from '@/contexts/LanguageContext';
|
||||
import { useTheme } from '@/contexts/ThemeContext';
|
||||
|
||||
export default function Navbar() {
|
||||
const [scrolled, setScrolled] = useState(false);
|
||||
const { language, setLanguage, t } = useLanguage();
|
||||
const { theme, toggleTheme } = useTheme();
|
||||
const [showProductMenu, setShowProductMenu] = useState(false);
|
||||
const [showResourceMenu, setShowResourceMenu] = useState(false);
|
||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
||||
const [mobileProductOpen, setMobileProductOpen] = useState(false);
|
||||
const [mobileResourceOpen, setMobileResourceOpen] = useState(false);
|
||||
const [navBottom, setNavBottom] = useState(64);
|
||||
const navRef = useRef<HTMLElement | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
setScrolled(window.scrollY > 50);
|
||||
};
|
||||
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
return () => window.removeEventListener('scroll', handleScroll);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (mobileMenuOpen) {
|
||||
document.body.style.overflow = 'hidden';
|
||||
} else {
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
return () => { document.body.style.overflow = ''; };
|
||||
}, [mobileMenuOpen]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!showProductMenu && !showResourceMenu) return;
|
||||
|
||||
const handleClickOutside = (e: MouseEvent) => {
|
||||
const target = e.target as Element;
|
||||
if (showProductMenu && !target.closest('.product-menu-container')) {
|
||||
setShowProductMenu(false);
|
||||
}
|
||||
if (showResourceMenu && !target.closest('.resource-menu-container')) {
|
||||
setShowResourceMenu(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 延迟注册，避免当前 click 事件冒泡立即触发
|
||||
const timer = requestAnimationFrame(() => {
|
||||
document.addEventListener('click', handleClickOutside);
|
||||
});
|
||||
return () => {
|
||||
cancelAnimationFrame(timer);
|
||||
document.removeEventListener('click', handleClickOutside);
|
||||
};
|
||||
}, [showProductMenu, showResourceMenu]);
|
||||
|
||||
useEffect(() => {
|
||||
const handleResize = () => {
|
||||
if (window.innerWidth >= 1024) {
|
||||
setMobileMenuOpen(false);
|
||||
setMobileProductOpen(false);
|
||||
setMobileResourceOpen(false);
|
||||
}
|
||||
};
|
||||
window.addEventListener('resize', handleResize);
|
||||
return () => window.removeEventListener('resize', handleResize);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const measure = () => {
|
||||
const el = navRef.current ?? (document.querySelector('header, nav') as HTMLElement);
|
||||
if (el) {
|
||||
navRef.current = el;
|
||||
const h = Math.ceil(el.getBoundingClientRect().height);
|
||||
setNavBottom(h);
|
||||
document.documentElement.style.setProperty('--navbar-height', `${h}px`);
|
||||
}
|
||||
};
|
||||
measure();
|
||||
const ro = new ResizeObserver(measure);
|
||||
const el = document.querySelector('header, nav') as HTMLElement;
|
||||
if (el) ro.observe(el);
|
||||
return () => ro.disconnect();
|
||||
}, []);
|
||||
|
||||
const isDark = theme === 'dark';
|
||||
|
||||
return (
|
||||
<>
|
||||
<HeroNavbar
|
||||
maxWidth="full"
|
||||
position="static"
|
||||
style={{
|
||||
position: 'fixed',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
zIndex: 50,
|
||||
backgroundColor: isDark
|
||||
? scrolled ? 'rgba(10, 10, 10, 0.7)' : 'rgba(10, 10, 10, 0.9)'
|
||||
: scrolled ? 'rgba(255, 255, 255, 0.7)' : 'rgba(255, 255, 255, 0.9)',
|
||||
backdropFilter: 'blur(50px)',
|
||||
borderTop: 'none',
|
||||
borderLeft: 'none',
|
||||
borderRight: 'none',
|
||||
borderBottom: isDark
|
||||
? scrolled ? '1px solid #27272a' : '1px solid #18181b'
|
||||
: '1px solid #f3f4f6',
|
||||
boxShadow: 'none',
|
||||
transition: 'background-color 0.3s ease-out, border-color 0.3s ease-out'
|
||||
}}
|
||||
classNames={{
|
||||
wrapper: "px-4 lg:px-10 2xl:px-20 3xl:px-32 py-5"
|
||||
}}
|
||||
>
|
||||
{/* Logo */}
|
||||
<NavbarBrand>
|
||||
<motion.div
|
||||
initial={{ y: '-3rem', opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
transition={{ duration: 1, ease: 'easeOut' }}
|
||||
>
|
||||
<Image
|
||||
src="/logo0.svg"
|
||||
alt="Logo"
|
||||
width={160}
|
||||
height={40}
|
||||
priority
|
||||
style={{
|
||||
filter: isDark ? 'invert(1) brightness(1.2)' : 'none',
|
||||
transition: 'filter 0.3s ease-out'
|
||||
}}
|
||||
/>
|
||||
</motion.div>
|
||||
</NavbarBrand>
|
||||
|
||||
{/* Center Menu */}
|
||||
<NavbarContent className="hidden lg:flex gap-6" justify="center">
|
||||
{/* Product */}
|
||||
<NavbarItem className="product-menu-container">
|
||||
<Button
|
||||
variant="light"
|
||||
className="font-bold text-sm select-none bg-transparent"
|
||||
style={{ color: showProductMenu ? '#059669' : (isDark ? '#a1a1aa' : '#4b5563') }}
|
||||
endContent={
|
||||
<ChevronDown
|
||||
size={14}
|
||||
color={showProductMenu ? '#059669' : (isDark ? '#a1a1aa' : '#4b5563')}
|
||||
style={{
|
||||
transform: showProductMenu ? 'rotate(180deg)' : 'rotate(0deg)',
|
||||
transition: 'transform 0.2s ease'
|
||||
}}
|
||||
/>
|
||||
}
|
||||
onPress={() => {
|
||||
setShowProductMenu(!showProductMenu);
|
||||
setShowResourceMenu(false);
|
||||
}}
|
||||
>
|
||||
{t('nav.product')}
|
||||
</Button>
|
||||
</NavbarItem>
|
||||
|
||||
{/* Ecosystem */}
|
||||
<NavbarItem>
|
||||
<Button
|
||||
variant="light"
|
||||
className="font-bold text-sm select-none bg-transparent"
|
||||
style={{ color: isDark ? '#a1a1aa' : '#4b5563' }}
|
||||
>
|
||||
{t('nav.ecosystem')}
|
||||
</Button>
|
||||
</NavbarItem>
|
||||
|
||||
{/* Resource */}
|
||||
<NavbarItem className="resource-menu-container">
|
||||
<Button
|
||||
variant="light"
|
||||
className="font-bold text-sm select-none bg-transparent"
|
||||
style={{ color: showResourceMenu ? '#059669' : (isDark ? '#a1a1aa' : '#4b5563') }}
|
||||
endContent={
|
||||
<ChevronDown
|
||||
size={14}
|
||||
color={showResourceMenu ? '#059669' : (isDark ? '#a1a1aa' : '#4b5563')}
|
||||
style={{
|
||||
transform: showResourceMenu ? 'rotate(180deg)' : 'rotate(0deg)',
|
||||
transition: 'transform 0.2s ease'
|
||||
}}
|
||||
/>
|
||||
}
|
||||
onPress={() => {
|
||||
setShowResourceMenu(!showResourceMenu);
|
||||
setShowProductMenu(false);
|
||||
}}
|
||||
>
|
||||
{t('nav.resource')}
|
||||
</Button>
|
||||
</NavbarItem>
|
||||
</NavbarContent>
|
||||
|
||||
{/* Right Content */}
|
||||
<NavbarContent justify="end" className="gap-2 lg:gap-4">
|
||||
{/* Launch App Button */}
|
||||
<NavbarItem>
|
||||
<motion.div
|
||||
initial={{ y: '-3rem', opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
transition={{ duration: 1, ease: 'easeOut', delay: 0.2 }}
|
||||
>
|
||||
<Button
|
||||
className="font-bold text-sm hover:scale-105 transition-transform duration-200 ease-out"
|
||||
style={{
|
||||
backgroundColor: isDark ? '#ffffff' : '#111827',
|
||||
color: isDark ? '#0a0a0a' : '#fafafa',
|
||||
borderRadius: '9999px',
|
||||
padding: '10px 20px',
|
||||
transition: 'background-color 0.3s ease-out, color 0.3s ease-out, transform 0.2s ease-out',
|
||||
boxShadow: '0px 4px 6px -4px rgba(229,231,235,1), 0px 10px 15px -3px rgba(229,231,235,1)'
|
||||
}}
|
||||
endContent={
|
||||
<ArrowRight size={16} color={isDark ? '#0a0a0a' : '#ffffff'} />
|
||||
}
|
||||
onPress={() => window.open('http://152.69.205.186:3010/market', '_blank')}
|
||||
>
|
||||
{t('nav.launchApp')}
|
||||
</Button>
|
||||
</motion.div>
|
||||
</NavbarItem>
|
||||
|
||||
{/* Theme Toggle - desktop only */}
|
||||
<NavbarItem className="hidden lg:flex">
|
||||
<Button
|
||||
isIconOnly
|
||||
variant="light"
|
||||
onPress={toggleTheme}
|
||||
className="transition-colors"
|
||||
>
|
||||
<div className="relative w-5 h-5">
|
||||
<AnimatePresence mode="wait" initial={false}>
|
||||
{isDark ? (
|
||||
<motion.div key="moon" className="absolute inset-0 flex items-center justify-center"
|
||||
initial={{ opacity: 0, rotate: -90, scale: 0.5 }}
|
||||
animate={{ opacity: 1, rotate: 0, scale: 1 }}
|
||||
exit={{ opacity: 0, rotate: 90, scale: 0.5 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
<Moon size={18} color="#a1a1aa" />
|
||||
</motion.div>
|
||||
) : (
|
||||
<motion.div key="sun" className="absolute inset-0 flex items-center justify-center"
|
||||
initial={{ opacity: 0, rotate: 90, scale: 0.5 }}
|
||||
animate={{ opacity: 1, rotate: 0, scale: 1 }}
|
||||
exit={{ opacity: 0, rotate: -90, scale: 0.5 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
<Sun size={18} color="#4B5563" />
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</Button>
|
||||
</NavbarItem>
|
||||
|
||||
{/* Language Selector - desktop only */}
|
||||
<NavbarItem className="hidden lg:flex">
|
||||
<Dropdown
|
||||
classNames={{
|
||||
content: 'bg-bg-surface border-none shadow-lg min-w-[120px] w-[120px]'
|
||||
}}
|
||||
>
|
||||
<DropdownTrigger>
|
||||
<Button
|
||||
variant="light"
|
||||
className="font-bold text-sm text-text-secondary"
|
||||
startContent={<Globe size={16} color={isDark ? '#a1a1aa' : '#4B5563'} />}
|
||||
endContent={<ChevronDown size={12} color={isDark ? '#a1a1aa' : '#4B5563'} />}
|
||||
>
|
||||
{language === 'zh' ? '中文' : 'EN'}
|
||||
</Button>
|
||||
</DropdownTrigger>
|
||||
<DropdownMenu
|
||||
aria-label="Language selection"
|
||||
onAction={(key) => setLanguage(key as 'zh' | 'en')}
|
||||
selectedKeys={new Set([language])}
|
||||
classNames={{
|
||||
list: "py-2"
|
||||
}}
|
||||
itemClasses={{
|
||||
base: "py-3 flex items-center justify-center"
|
||||
}}
|
||||
>
|
||||
<DropdownItem
|
||||
key="zh"
|
||||
className="text-text-primary hover:bg-bg-elevated text-center"
|
||||
>
|
||||
中文
|
||||
</DropdownItem>
|
||||
<DropdownItem
|
||||
key="en"
|
||||
className="text-text-primary hover:bg-bg-elevated text-center"
|
||||
>
|
||||
English
|
||||
</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
</NavbarItem>
|
||||
{/* Hamburger - mobile only */}
|
||||
<NavbarItem className="lg:hidden">
|
||||
<Button
|
||||
isIconOnly
|
||||
variant="light"
|
||||
onPress={() => setMobileMenuOpen(!mobileMenuOpen)}
|
||||
aria-label="Toggle menu"
|
||||
>
|
||||
<AnimatePresence mode="wait" initial={false}>
|
||||
{mobileMenuOpen ? (
|
||||
<motion.div
|
||||
key="close"
|
||||
initial={{ opacity: 0, rotate: -90 }}
|
||||
animate={{ opacity: 1, rotate: 0 }}
|
||||
exit={{ opacity: 0, rotate: 90 }}
|
||||
transition={{ duration: 0.15 }}
|
||||
>
|
||||
<X size={20} color={isDark ? '#a1a1aa' : '#4b5563'} />
|
||||
</motion.div>
|
||||
) : (
|
||||
<motion.div
|
||||
key="menu"
|
||||
initial={{ opacity: 0, rotate: 90 }}
|
||||
animate={{ opacity: 1, rotate: 0 }}
|
||||
exit={{ opacity: 0, rotate: -90 }}
|
||||
transition={{ duration: 0.15 }}
|
||||
>
|
||||
<Menu size={20} color={isDark ? '#a1a1aa' : '#4b5563'} />
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</Button>
|
||||
</NavbarItem>
|
||||
</NavbarContent>
|
||||
</HeroNavbar>
|
||||
|
||||
{/* Mobile Menu */}
|
||||
<AnimatePresence>
|
||||
{mobileMenuOpen && (
|
||||
<>
|
||||
{/* Backdrop — click outside to close */}
|
||||
<motion.div
|
||||
key="mobile-backdrop"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.15 }}
|
||||
className="lg:hidden fixed inset-0 z-[45]"
|
||||
onClick={() => {
|
||||
setMobileMenuOpen(false);
|
||||
setMobileProductOpen(false);
|
||||
setMobileResourceOpen(false);
|
||||
}}
|
||||
/>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -8 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -8 }}
|
||||
transition={{ duration: 0.2, ease: 'easeOut' }}
|
||||
className="lg:hidden fixed left-0 right-0 z-[50]"
|
||||
style={{
|
||||
top: navBottom,
|
||||
backgroundColor: isDark ? 'rgba(10, 10, 10, 0.97)' : 'rgba(255, 255, 255, 0.97)',
|
||||
backdropFilter: 'blur(50px)',
|
||||
outline: 'none',
|
||||
border: 'none',
|
||||
borderBottom: isDark ? '1px solid #27272a' : '1px solid #e5e7eb',
|
||||
maxHeight: `calc(100vh - ${navBottom}px)`,
|
||||
overflowY: 'auto'
|
||||
}}
|
||||
>
|
||||
<div className="flex flex-col px-4 py-3">
|
||||
|
||||
{/* Product */}
|
||||
<button
|
||||
className="flex items-center justify-between w-full px-3 py-4 text-sm font-bold rounded-lg transition-colors"
|
||||
style={{ color: mobileProductOpen ? '#059669' : (isDark ? '#a1a1aa' : '#4b5563') }}
|
||||
onClick={() => {
|
||||
setMobileProductOpen(!mobileProductOpen);
|
||||
setMobileResourceOpen(false);
|
||||
}}
|
||||
>
|
||||
{t('nav.product')}
|
||||
<ChevronDown
|
||||
size={14}
|
||||
color={mobileProductOpen ? '#059669' : (isDark ? '#a1a1aa' : '#4b5563')}
|
||||
style={{ transform: mobileProductOpen ? 'rotate(180deg)' : 'rotate(0deg)', transition: 'transform 0.2s ease' }}
|
||||
/>
|
||||
</button>
|
||||
|
||||
{/* Product Accordion */}
|
||||
<AnimatePresence>
|
||||
{mobileProductOpen && (
|
||||
<motion.div
|
||||
key="product-accordion"
|
||||
initial={{ height: 0, opacity: 0 }}
|
||||
animate={{ height: 'auto', opacity: 1 }}
|
||||
exit={{ height: 0, opacity: 0 }}
|
||||
transition={{ duration: 0.2, ease: 'easeOut' }}
|
||||
style={{ overflow: 'hidden' }}
|
||||
>
|
||||
<div className="px-2 pb-3 flex flex-col gap-4">
|
||||
{/* Core Yield Assets */}
|
||||
<div>
|
||||
<span className={`text-[10px] font-bold uppercase tracking-[1.2px] font-domine px-1 ${isDark ? 'text-[#52525b]' : 'text-[#9CA3AF]'}`}>
|
||||
{language === 'zh' ? '核心收益资产' : 'Core Yield Assets'}
|
||||
</span>
|
||||
<div className="flex flex-col gap-2 mt-2">
|
||||
<div className={`flex items-center gap-3 p-3 rounded-xl cursor-pointer ${isDark ? 'bg-[#27272a]' : 'bg-[#F9FAFB]'}`}>
|
||||
<div className="w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0" style={{ background: isDark ? '#ffffff' : '#000000' }}>
|
||||
<Rainbow size={16} color={isDark ? '#000000' : '#ffffff'} />
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={`text-sm font-bold font-domine ${isDark ? 'text-[#fafafa]' : 'text-[#111827]'}`}>AX-Fund</span>
|
||||
<div className="px-1.5 py-0.5 rounded flex-shrink-0" style={{ background: '#D1FAE5' }}>
|
||||
<span className="text-[9px] font-bold uppercase font-domine" style={{ color: '#047857' }}>
|
||||
{language === 'zh' ? '最高22% APY' : 'up to 22% APY'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={`flex items-center gap-3 p-3 rounded-xl cursor-pointer ${isDark ? 'bg-[#27272a]' : 'bg-[#F9FAFB]'}`}>
|
||||
<div className="w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0" style={{ background: isDark ? '#27272a' : '#ffffff', outline: `1px solid ${isDark ? '#3f3f46' : '#E5E7EB'}`, outlineOffset: '-1px' }}>
|
||||
<Layers size={16} color={isDark ? '#d1d5db' : '#111827'} />
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={`text-sm font-bold font-domine ${isDark ? 'text-[#fafafa]' : 'text-[#111827]'}`}>AX-Pool</span>
|
||||
<div className="px-1.5 py-0.5 rounded flex-shrink-0" style={{ background: isDark ? '#3f3f46' : '#E5E7EB' }}>
|
||||
<span className={`text-[9px] font-bold uppercase font-domine ${isDark ? 'text-[#a1a1aa]' : 'text-[#4B5563]'}`}>
|
||||
{language === 'zh' ? '多元化' : 'Diversified'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Platforms & Protocols */}
|
||||
<div>
|
||||
<span className={`text-[10px] font-bold uppercase tracking-[1.2px] font-domine px-1 ${isDark ? 'text-[#52525b]' : 'text-[#9CA3AF]'}`}>
|
||||
{language === 'zh' ? '平台与协议' : 'Platforms & Protocols'}
|
||||
</span>
|
||||
<div className="flex flex-col gap-0.5 mt-2">
|
||||
{[
|
||||
{ Icon: Rocket, titleZh: 'Launchpad', titleEn: 'Launchpad' },
|
||||
{ Icon: ArrowLeftRight, titleZh: 'DeFi市场', titleEn: 'DeFi Market' },
|
||||
{ Icon: Coins, titleZh: 'Token Factory', titleEn: 'Token Factory' },
|
||||
].map(({ Icon, titleZh, titleEn }) => (
|
||||
<div key={titleEn} className={`flex items-center gap-3 px-2 py-2.5 rounded-lg cursor-pointer transition-colors ${isDark ? 'hover:bg-[#27272a]' : 'hover:bg-[#F9FAFB]'}`}>
|
||||
<div className={`w-7 h-7 rounded-lg flex items-center justify-center flex-shrink-0 ${isDark ? 'bg-[#27272a] outline outline-1 outline-[#3f3f46]' : 'bg-[#F9FAFB] outline outline-1 outline-[#F3F4F6]'}`} style={{ outlineOffset: '-1px' }}>
|
||||
<Icon size={14} color={isDark ? '#d1d5db' : '#111827'} />
|
||||
</div>
|
||||
<span className={`text-sm font-bold font-domine ${isDark ? 'text-[#fafafa]' : 'text-black'}`}>
|
||||
{language === 'zh' ? titleZh : titleEn}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Infrastructure */}
|
||||
<div>
|
||||
<span className={`text-[10px] font-bold uppercase tracking-[1.2px] font-domine px-1 ${isDark ? 'text-[#52525b]' : 'text-[#9CA3AF]'}`}>
|
||||
{language === 'zh' ? '基础设施' : 'Infrastructure'}
|
||||
</span>
|
||||
<div className="flex flex-col gap-0.5 mt-2">
|
||||
{[
|
||||
{ Icon: LayoutDashboard, titleZh: 'Asset Cockpit', titleEn: 'Asset Cockpit' },
|
||||
{ Icon: Radio, titleZh: 'Oracle Network', titleEn: 'Oracle Network' },
|
||||
].map(({ Icon, titleZh, titleEn }) => (
|
||||
<div key={titleEn} className={`flex items-center gap-3 px-2 py-2.5 rounded-lg cursor-pointer transition-colors ${isDark ? 'hover:bg-[#27272a]' : 'hover:bg-[#F9FAFB]'}`}>
|
||||
<div className={`w-7 h-7 rounded-lg flex items-center justify-center flex-shrink-0 ${isDark ? 'bg-[#27272a] outline outline-1 outline-[#3f3f46]' : 'bg-[#F9FAFB] outline outline-1 outline-[#F3F4F6]'}`} style={{ outlineOffset: '-1px' }}>
|
||||
<Icon size={14} color={isDark ? '#d1d5db' : '#111827'} />
|
||||
</div>
|
||||
<span className={`text-sm font-bold font-domine ${isDark ? 'text-[#fafafa]' : 'text-black'}`}>
|
||||
{language === 'zh' ? titleZh : titleEn}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom */}
|
||||
<div className={`pt-2 border-t flex items-center justify-between ${isDark ? 'border-[#27272a]' : 'border-[#F3F4F6]'}`}>
|
||||
<span className="text-xs font-domine text-[#9CA3AF]">
|
||||
{language === 'zh' ? '最新审计：' : 'Latest Audit: '}
|
||||
<span className={`font-medium ${isDark ? 'text-[#fafafa]' : 'text-black'}`}>Oct 2025 (Certik)</span>
|
||||
</span>
|
||||
<span className="text-xs font-bold uppercase font-domine cursor-pointer hover:opacity-70 tracking-[0.3px]" style={{ color: '#059669' }}>
|
||||
{language === 'zh' ? '查看文档 →' : 'View Docs →'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
<div style={{ height: '1px', backgroundColor: isDark ? '#27272a' : '#f3f4f6' }} />
|
||||
|
||||
{/* Ecosystem */}
|
||||
<button
|
||||
className="flex items-center w-full px-3 py-4 text-sm font-bold rounded-lg transition-colors"
|
||||
style={{ color: isDark ? '#a1a1aa' : '#4b5563' }}
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
>
|
||||
{t('nav.ecosystem')}
|
||||
</button>
|
||||
<div style={{ height: '1px', backgroundColor: isDark ? '#27272a' : '#f3f4f6' }} />
|
||||
|
||||
{/* Resource */}
|
||||
<button
|
||||
className="flex items-center justify-between w-full px-3 py-4 text-sm font-bold rounded-lg transition-colors"
|
||||
style={{ color: mobileResourceOpen ? '#059669' : (isDark ? '#a1a1aa' : '#4b5563') }}
|
||||
onClick={() => {
|
||||
setMobileResourceOpen(!mobileResourceOpen);
|
||||
setMobileProductOpen(false);
|
||||
}}
|
||||
>
|
||||
{t('nav.resource')}
|
||||
<ChevronDown
|
||||
size={14}
|
||||
color={mobileResourceOpen ? '#059669' : (isDark ? '#a1a1aa' : '#4b5563')}
|
||||
style={{ transform: mobileResourceOpen ? 'rotate(180deg)' : 'rotate(0deg)', transition: 'transform 0.2s ease' }}
|
||||
/>
|
||||
</button>
|
||||
|
||||
{/* Resource Accordion */}
|
||||
<AnimatePresence>
|
||||
{mobileResourceOpen && (
|
||||
<motion.div
|
||||
key="resource-accordion"
|
||||
initial={{ height: 0, opacity: 0 }}
|
||||
animate={{ height: 'auto', opacity: 1 }}
|
||||
exit={{ height: 0, opacity: 0 }}
|
||||
transition={{ duration: 0.2, ease: 'easeOut' }}
|
||||
style={{ overflow: 'hidden' }}
|
||||
>
|
||||
<div className="px-2 pb-3 flex flex-col gap-4">
|
||||
{/* Documentation & Learning */}
|
||||
<div>
|
||||
<span className={`text-[10px] font-bold uppercase tracking-[1.2px] font-domine px-1 ${isDark ? 'text-[#52525b]' : 'text-[#9CA3AF]'}`}>
|
||||
{language === 'zh' ? '文档与学习' : 'Documentation & Learning'}
|
||||
</span>
|
||||
<div className="flex flex-col gap-2 mt-2">
|
||||
<div className={`flex items-center gap-3 p-3 rounded-xl cursor-pointer ${isDark ? 'bg-[#27272a]' : 'bg-[#F9FAFB]'}`}>
|
||||
<div className="w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0" style={{ background: isDark ? '#ffffff' : '#000000' }}>
|
||||
<BookOpen size={16} color={isDark ? '#000000' : '#ffffff'} />
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={`text-sm font-bold font-domine ${isDark ? 'text-[#fafafa]' : 'text-[#111827]'}`}>
|
||||
{language === 'zh' ? '文档' : 'Docs'}
|
||||
</span>
|
||||
<div className="px-1.5 py-0.5 rounded flex-shrink-0" style={{ background: '#D1FAE5' }}>
|
||||
<span className="text-[9px] font-bold uppercase font-domine" style={{ color: '#047857' }}>
|
||||
{language === 'zh' ? '已更新' : 'Updated'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={`flex items-center gap-3 p-3 rounded-xl cursor-pointer ${isDark ? 'bg-[#27272a]' : 'bg-[#F9FAFB]'}`}>
|
||||
<div className="w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0" style={{ background: isDark ? '#052e16' : '#ffffff', outline: '2px solid #10B981', outlineOffset: '-2px' }}>
|
||||
<ShieldCheck size={16} color="#059669" />
|
||||
</div>
|
||||
<span className={`text-sm font-bold font-domine ${isDark ? 'text-[#fafafa]' : 'text-[#111827]'}`}>
|
||||
{language === 'zh' ? '信任与安全' : 'Trust & Security'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Help & Support */}
|
||||
<div>
|
||||
<span className={`text-[10px] font-bold uppercase tracking-[1.2px] font-domine px-1 ${isDark ? 'text-[#52525b]' : 'text-[#9CA3AF]'}`}>
|
||||
{language === 'zh' ? '帮助与支持' : 'Help & Support'}
|
||||
</span>
|
||||
<div className="flex flex-col gap-0.5 mt-2">
|
||||
{[
|
||||
{ Icon: GraduationCap, titleZh: '学习中心', titleEn: 'Learning Center' },
|
||||
{ Icon: MessageCircle, titleZh: '社区论坛', titleEn: 'Community Forum' },
|
||||
{ Icon: Headphones, titleZh: '联系支持', titleEn: 'Contact Support' },
|
||||
].map(({ Icon, titleZh, titleEn }) => (
|
||||
<div key={titleEn} className={`flex items-center gap-3 px-2 py-2.5 rounded-lg cursor-pointer transition-colors ${isDark ? 'hover:bg-[#27272a]' : 'hover:bg-[#F9FAFB]'}`}>
|
||||
<div className={`w-7 h-7 rounded-lg flex items-center justify-center flex-shrink-0 ${isDark ? 'bg-[#27272a] outline outline-1 outline-[#3f3f46]' : 'bg-[#F9FAFB] outline outline-1 outline-[#F3F4F6]'}`} style={{ outlineOffset: '-1px' }}>
|
||||
<Icon size={14} color={isDark ? '#d1d5db' : '#111827'} />
|
||||
</div>
|
||||
<span className={`text-sm font-bold font-domine ${isDark ? 'text-[#fafafa]' : 'text-black'}`}>
|
||||
{language === 'zh' ? titleZh : titleEn}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Company */}
|
||||
<div>
|
||||
<span className={`text-[10px] font-bold uppercase tracking-[1.2px] font-domine px-1 ${isDark ? 'text-[#52525b]' : 'text-[#9CA3AF]'}`}>
|
||||
{language === 'zh' ? '公司' : 'Company'}
|
||||
</span>
|
||||
<div className="flex flex-col gap-0.5 mt-2">
|
||||
{[
|
||||
{ Icon: Users, titleZh: '关于团队', titleEn: 'About Team' },
|
||||
{ Icon: Briefcase, titleZh: '招聘', titleEn: 'Careers' },
|
||||
{ Icon: Mail, titleZh: '联系我们', titleEn: 'Contact Us' },
|
||||
{ Icon: Newspaper, titleZh: '新闻媒体', titleEn: 'Press & Media' },
|
||||
].map(({ Icon, titleZh, titleEn }) => (
|
||||
<div key={titleEn} className={`flex items-center gap-3 px-2 py-2.5 rounded-lg cursor-pointer transition-colors ${isDark ? 'hover:bg-[#27272a]' : 'hover:bg-[#F9FAFB]'}`}>
|
||||
<div className={`w-7 h-7 rounded-lg flex items-center justify-center flex-shrink-0 ${isDark ? 'bg-[#27272a] outline outline-1 outline-[#3f3f46]' : 'bg-[#F9FAFB] outline outline-1 outline-[#F3F4F6]'}`} style={{ outlineOffset: '-1px' }}>
|
||||
<Icon size={14} color={isDark ? '#d1d5db' : '#111827'} />
|
||||
</div>
|
||||
<span className={`text-sm font-bold font-domine ${isDark ? 'text-[#fafafa]' : 'text-black'}`}>
|
||||
{language === 'zh' ? titleZh : titleEn}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom */}
|
||||
<div className={`pt-2 border-t flex items-center justify-between ${isDark ? 'border-[#27272a]' : 'border-[#F3F4F6]'}`}>
|
||||
<span className="text-xs font-domine text-[#9CA3AF]">
|
||||
{language === 'zh' ? '最新更新：' : 'Latest Update: '}
|
||||
<span className={`font-medium ${isDark ? 'text-[#fafafa]' : 'text-black'}`}>December 2025</span>
|
||||
</span>
|
||||
<div className="flex gap-4">
|
||||
<span className={`text-xs font-bold font-domine cursor-pointer ${isDark ? 'text-[#6b7280]' : 'text-[#6B7280]'}`}>
|
||||
{language === 'zh' ? '隐私政策' : 'Privacy Policy'}
|
||||
</span>
|
||||
<span className={`text-xs font-bold font-domine cursor-pointer ${isDark ? 'text-[#6b7280]' : 'text-[#6B7280]'}`}>
|
||||
{language === 'zh' ? '服务条款' : 'Terms of Service'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{/* Theme + Language */}
|
||||
<div style={{ height: '1px', backgroundColor: isDark ? '#27272a' : '#f3f4f6', margin: '4px 0' }} />
|
||||
<div className="flex items-center gap-2 px-3 py-3">
|
||||
{/* Theme Toggle */}
|
||||
<Button
|
||||
isIconOnly
|
||||
variant="light"
|
||||
onPress={toggleTheme}
|
||||
>
|
||||
<div className="relative w-5 h-5">
|
||||
<AnimatePresence mode="wait" initial={false}>
|
||||
{isDark ? (
|
||||
<motion.div key="moon" className="absolute inset-0 flex items-center justify-center"
|
||||
initial={{ opacity: 0, rotate: -90, scale: 0.5 }} animate={{ opacity: 1, rotate: 0, scale: 1 }} exit={{ opacity: 0, rotate: 90, scale: 0.5 }} transition={{ duration: 0.3 }}>
|
||||
<Moon size={18} color="#a1a1aa" />
|
||||
</motion.div>
|
||||
) : (
|
||||
<motion.div key="sun" className="absolute inset-0 flex items-center justify-center"
|
||||
initial={{ opacity: 0, rotate: 90, scale: 0.5 }} animate={{ opacity: 1, rotate: 0, scale: 1 }} exit={{ opacity: 0, rotate: -90, scale: 0.5 }} transition={{ duration: 0.3 }}>
|
||||
<Sun size={18} color="#4B5563" />
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</Button>
|
||||
|
||||
{/* Language */}
|
||||
<Dropdown classNames={{ content: 'bg-bg-surface border-none shadow-lg min-w-[120px] w-[120px]' }}>
|
||||
<DropdownTrigger>
|
||||
<Button variant="light" className="font-bold text-sm text-text-secondary"
|
||||
startContent={<Globe size={16} color={isDark ? '#a1a1aa' : '#4B5563'} />}
|
||||
endContent={<ChevronDown size={12} color={isDark ? '#a1a1aa' : '#4B5563'} />}
|
||||
>
|
||||
{language === 'zh' ? '中文' : 'EN'}
|
||||
</Button>
|
||||
</DropdownTrigger>
|
||||
<DropdownMenu aria-label="Language selection" onAction={(key) => setLanguage(key as 'zh' | 'en')} selectedKeys={new Set([language])} classNames={{ list: "py-2" }} itemClasses={{ base: "py-3 flex items-center justify-center" }}>
|
||||
<DropdownItem key="zh" className="text-text-primary hover:bg-bg-elevated text-center">中文</DropdownItem>
|
||||
<DropdownItem key="en" className="text-text-primary hover:bg-bg-elevated text-center">English</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{/* Custom Menus */}
|
||||
<ProductMenu
|
||||
isOpen={showProductMenu}
|
||||
onClose={() => setShowProductMenu(false)}
|
||||
language={language}
|
||||
top={navBottom}
|
||||
/>
|
||||
<ResourceMenu
|
||||
isOpen={showResourceMenu}
|
||||
onClose={() => setShowResourceMenu(false)}
|
||||
language={language}
|
||||
top={navBottom}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user