使用heroui完成对页面的重构
This commit is contained in:
@@ -2,6 +2,7 @@
|
||||
|
||||
import Image from 'next/image';
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useTheme } from '@/contexts/ThemeContext';
|
||||
|
||||
interface ProductMenuProps {
|
||||
isOpen: boolean;
|
||||
@@ -10,6 +11,8 @@ interface ProductMenuProps {
|
||||
}
|
||||
|
||||
export default function ProductMenu({ isOpen, onClose, language }: ProductMenuProps) {
|
||||
const { theme } = useTheme();
|
||||
const isDark = theme === 'dark';
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
const [isClosing, setIsClosing] = useState(false);
|
||||
|
||||
@@ -93,7 +96,9 @@ export default function ProductMenu({ isOpen, onClose, language }: ProductMenuPr
|
||||
/>
|
||||
|
||||
{/* Menu */}
|
||||
<div className={`fixed left-1/2 -translate-x-1/2 bg-white rounded-2xl shadow-xl border border-[#e5e7eb] p-6 z-50 ${isClosing ? 'animate-slide-up' : 'animate-slide-down'}`}
|
||||
<div className={`fixed left-1/2 -translate-x-1/2 rounded-2xl shadow-xl border p-6 z-50 transition-colors ${
|
||||
isDark ? 'bg-[#18181b] border-[#27272a]' : 'bg-white border-[#e5e7eb]'
|
||||
} ${isClosing ? 'animate-slide-up' : 'animate-slide-down'}`}
|
||||
style={{ width: '1080px', top: '90px' }}
|
||||
>
|
||||
<div className="flex flex-row gap-8">
|
||||
@@ -101,60 +106,78 @@ export default function ProductMenu({ isOpen, onClose, language }: ProductMenuPr
|
||||
<div className="flex flex-col gap-2 w-[340px]">
|
||||
{/* Section Title */}
|
||||
<div className="px-4 py-2">
|
||||
<span className="text-[#9ca1af] font-inter text-xs font-medium tracking-wider">
|
||||
<span className="text-[#9ca1af] font-domine text-xs font-medium tracking-wider">
|
||||
{t.coreYieldAssets}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* AX-Fund Card */}
|
||||
<div className="bg-transparent hover:bg-[#f9fafb] border border-transparent hover:border-[#e5e7eb] rounded-xl p-3 flex gap-2 cursor-pointer transition-all">
|
||||
<div className="bg-[#111827] rounded-xl w-12 h-12 flex items-center justify-center flex-shrink-0">
|
||||
<div className={`bg-transparent border border-transparent rounded-xl p-3 flex gap-2 cursor-pointer transition-all ${
|
||||
isDark ? 'hover:bg-[#27272a] hover:border-[#3f3f46]' : 'hover:bg-[#f9fafb] hover:border-[#e5e7eb]'
|
||||
}`}>
|
||||
<div className={`rounded-xl w-12 h-12 flex items-center justify-center flex-shrink-0 ${
|
||||
isDark ? 'bg-[#f9fafb]' : 'bg-[#111827]'
|
||||
}`}>
|
||||
<Image
|
||||
src="/environment-rainbow0.svg"
|
||||
alt="AX-Fund"
|
||||
width={24}
|
||||
height={24}
|
||||
style={{
|
||||
filter: isDark ? 'invert(1)' : 'none'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1 flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-[#111827] font-inter text-sm font-bold">
|
||||
<span className={`font-domine text-sm font-bold ${
|
||||
isDark ? 'text-[#f9fafb]' : 'text-[#111827]'
|
||||
}`}>
|
||||
{t.axFund}
|
||||
</span>
|
||||
<div className="bg-green-50 rounded px-2 py-0.5">
|
||||
<span className="text-green-600 font-inter text-xs font-medium">
|
||||
<span className="text-green-600 font-domine text-xs font-medium">
|
||||
{t.axFundBadge}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-[#9ca1af] font-inter text-xs leading-relaxed">
|
||||
<p className="text-[#9ca1af] font-domine text-xs leading-relaxed">
|
||||
{t.axFundDesc}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* AX-Pool Card */}
|
||||
<div className="bg-transparent hover:bg-[#f9fafb] border border-transparent hover:border-[#e5e7eb] rounded-xl p-3 flex gap-2 cursor-pointer transition-all">
|
||||
<div className="bg-[#f3f4f6] rounded-xl w-12 h-12 flex items-center justify-center flex-shrink-0">
|
||||
<div className={`bg-transparent border border-transparent rounded-xl p-3 flex gap-2 cursor-pointer transition-all ${
|
||||
isDark ? 'hover:bg-[#27272a] hover:border-[#3f3f46]' : 'hover:bg-[#f9fafb] hover:border-[#e5e7eb]'
|
||||
}`}>
|
||||
<div className={`rounded-xl w-12 h-12 flex items-center justify-center flex-shrink-0 ${
|
||||
isDark ? 'bg-[#27272a]' : 'bg-[#f3f4f6]'
|
||||
}`}>
|
||||
<Image
|
||||
src="/environment-planet0.svg"
|
||||
alt="AX-Pool"
|
||||
width={24}
|
||||
height={24}
|
||||
style={{
|
||||
filter: isDark ? 'invert(1) brightness(0.8)' : 'none'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1 flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-[#111827] font-inter text-sm font-bold">
|
||||
<span className={`font-domine text-sm font-bold ${
|
||||
isDark ? 'text-[#f9fafb]' : 'text-[#111827]'
|
||||
}`}>
|
||||
{t.axPool}
|
||||
</span>
|
||||
<div className="bg-blue-50 rounded px-2 py-0.5">
|
||||
<span className="text-blue-600 font-inter text-xs font-medium">
|
||||
<span className="text-blue-600 font-domine text-xs font-medium">
|
||||
{t.axPoolBadge}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-[#9ca1af] font-inter text-xs leading-relaxed">
|
||||
<p className="text-[#9ca1af] font-domine text-xs leading-relaxed">
|
||||
{t.axPoolDesc}
|
||||
</p>
|
||||
</div>
|
||||
@@ -164,7 +187,9 @@ export default function ProductMenu({ isOpen, onClose, language }: ProductMenuPr
|
||||
{/* Middle Column - Image + Platforms */}
|
||||
<div className="flex flex-col gap-6 flex-1 min-w-[380px]">
|
||||
{/* Image */}
|
||||
<div className="bg-[#f9fafb] rounded-xl p-3 flex items-center justify-center">
|
||||
<div className={`rounded-xl p-3 flex items-center justify-center ${
|
||||
isDark ? 'bg-[#374151]' : 'bg-[#f9fafb]'
|
||||
}`}>
|
||||
<Image
|
||||
src="/image-270.png"
|
||||
alt="Product Showcase"
|
||||
@@ -177,66 +202,93 @@ export default function ProductMenu({ isOpen, onClose, language }: ProductMenuPr
|
||||
{/* Platforms & Protocols */}
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="px-4 py-2">
|
||||
<span className="text-[#9ca1af] font-inter text-xs font-medium tracking-wider">
|
||||
<span className="text-[#9ca1af] font-domine text-xs font-medium tracking-wider">
|
||||
{t.platformsProtocols}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
{/* Launchpad */}
|
||||
<div className="bg-transparent hover:bg-[#f9fafb] border border-transparent hover:border-[#e5e7eb] rounded-xl p-3 flex gap-2 cursor-pointer transition-all">
|
||||
<div className="bg-[#111827] rounded-xl w-8 h-8 flex items-center justify-center flex-shrink-0">
|
||||
<div className={`bg-transparent border border-transparent rounded-xl p-3 flex gap-2 cursor-pointer transition-all ${
|
||||
isDark ? 'hover:bg-[#27272a] hover:border-[#3f3f46]' : 'hover:bg-[#f9fafb] hover:border-[#e5e7eb]'
|
||||
}`}>
|
||||
<div className={`rounded-xl w-8 h-8 flex items-center justify-center flex-shrink-0 ${
|
||||
isDark ? 'bg-[#f9fafb]' : 'bg-[#111827]'
|
||||
}`}>
|
||||
<Image
|
||||
src="/component-20.svg"
|
||||
alt="Launchpad"
|
||||
width={16}
|
||||
height={16}
|
||||
style={{
|
||||
filter: isDark ? 'invert(1)' : 'none'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="text-[#111827] font-inter text-sm font-bold">
|
||||
<span className={`font-domine text-sm font-bold ${
|
||||
isDark ? 'text-[#fafafa]' : 'text-[#111827]'
|
||||
}`}>
|
||||
{t.launchpad}
|
||||
</span>
|
||||
<p className="text-[#9ca1af] font-inter text-xs">
|
||||
<p className="text-[#9ca1af] font-domine text-xs">
|
||||
{t.launchpadDesc}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* DeFi Market */}
|
||||
<div className="bg-transparent hover:bg-[#f9fafb] border border-transparent hover:border-[#e5e7eb] rounded-xl p-3 flex gap-2 cursor-pointer transition-all">
|
||||
<div className="bg-[#f3f4f6] rounded-xl w-8 h-8 flex items-center justify-center flex-shrink-0">
|
||||
<div className={`bg-transparent border border-transparent rounded-xl p-3 flex gap-2 cursor-pointer transition-all ${
|
||||
isDark ? 'hover:bg-[#27272a] hover:border-[#3f3f46]' : 'hover:bg-[#f9fafb] hover:border-[#e5e7eb]'
|
||||
}`}>
|
||||
<div className={`rounded-xl w-8 h-8 flex items-center justify-center flex-shrink-0 ${
|
||||
isDark ? 'bg-[#27272a]' : 'bg-[#f3f4f6]'
|
||||
}`}>
|
||||
<Image
|
||||
src="/component-21.svg"
|
||||
alt="DeFi Market"
|
||||
width={16}
|
||||
height={16}
|
||||
style={{
|
||||
filter: isDark ? 'invert(1) brightness(0.8)' : 'none'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="text-[#111827] font-inter text-sm font-bold">
|
||||
<span className={`font-domine text-sm font-bold ${
|
||||
isDark ? 'text-[#fafafa]' : 'text-[#111827]'
|
||||
}`}>
|
||||
{t.defiMarket}
|
||||
</span>
|
||||
<p className="text-[#9ca1af] font-inter text-xs">
|
||||
<p className="text-[#9ca1af] font-domine text-xs">
|
||||
{t.defiMarketDesc}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Token Factory */}
|
||||
<div className="bg-transparent hover:bg-[#f9fafb] border border-transparent hover:border-[#e5e7eb] rounded-xl p-3 flex gap-2 cursor-pointer transition-all">
|
||||
<div className="bg-[#f3f4f6] rounded-xl w-8 h-8 flex items-center justify-center flex-shrink-0">
|
||||
<div className={`bg-transparent border border-transparent rounded-xl p-3 flex gap-2 cursor-pointer transition-all ${
|
||||
isDark ? 'hover:bg-[#27272a] hover:border-[#3f3f46]' : 'hover:bg-[#f9fafb] hover:border-[#e5e7eb]'
|
||||
}`}>
|
||||
<div className={`rounded-xl w-8 h-8 flex items-center justify-center flex-shrink-0 ${
|
||||
isDark ? 'bg-[#27272a]' : 'bg-[#f3f4f6]'
|
||||
}`}>
|
||||
<Image
|
||||
src="/vuesax-linear-buy-crypto1.svg"
|
||||
alt="Token Factory"
|
||||
width={16}
|
||||
height={16}
|
||||
style={{
|
||||
filter: isDark ? 'invert(1) brightness(0.8)' : 'none'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="text-[#111827] font-inter text-sm font-bold">
|
||||
<span className={`font-domine text-sm font-bold ${
|
||||
isDark ? 'text-[#fafafa]' : 'text-[#111827]'
|
||||
}`}>
|
||||
{t.tokenFactory}
|
||||
</span>
|
||||
<p className="text-[#9ca1af] font-inter text-xs">
|
||||
<p className="text-[#9ca1af] font-domine text-xs">
|
||||
{t.tokenFactoryDesc}
|
||||
</p>
|
||||
</div>
|
||||
@@ -248,46 +300,64 @@ export default function ProductMenu({ isOpen, onClose, language }: ProductMenuPr
|
||||
{/* Right Column - Infrastructure */}
|
||||
<div className="flex flex-col gap-2 w-[280px]">
|
||||
<div className="px-4 py-2">
|
||||
<span className="text-[#9ca1af] font-inter text-xs font-medium tracking-wider">
|
||||
<span className="text-[#9ca1af] font-domine text-xs font-medium tracking-wider">
|
||||
{t.infrastructure}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
{/* Asset Cockpit */}
|
||||
<div className="bg-transparent hover:bg-[#f9fafb] border border-transparent hover:border-[#e5e7eb] rounded-xl p-3 flex gap-2 cursor-pointer transition-all">
|
||||
<div className="bg-[#f3f4f6] rounded-xl w-8 h-8 flex items-center justify-center flex-shrink-0">
|
||||
<div className={`bg-transparent border border-transparent rounded-xl p-3 flex gap-2 cursor-pointer transition-all ${
|
||||
isDark ? 'hover:bg-[#27272a] hover:border-[#3f3f46]' : 'hover:bg-[#f9fafb] hover:border-[#e5e7eb]'
|
||||
}`}>
|
||||
<div className={`rounded-xl w-8 h-8 flex items-center justify-center flex-shrink-0 ${
|
||||
isDark ? 'bg-[#27272a]' : 'bg-[#f3f4f6]'
|
||||
}`}>
|
||||
<Image
|
||||
src="/navigation-map0.svg"
|
||||
alt="Asset Cockpit"
|
||||
width={16}
|
||||
height={16}
|
||||
style={{
|
||||
filter: isDark ? 'invert(1) brightness(0.8)' : 'none'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="text-[#111827] font-inter text-sm font-bold">
|
||||
<span className={`font-domine text-sm font-bold ${
|
||||
isDark ? 'text-[#fafafa]' : 'text-[#111827]'
|
||||
}`}>
|
||||
{t.assetCockpit}
|
||||
</span>
|
||||
<p className="text-[#9ca1af] font-inter text-xs">
|
||||
<p className="text-[#9ca1af] font-domine text-xs">
|
||||
{t.assetCockpitDesc}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Oracle Network */}
|
||||
<div className="bg-transparent hover:bg-[#f9fafb] border border-transparent hover:border-[#e5e7eb] rounded-xl p-3 flex gap-2 cursor-pointer transition-all">
|
||||
<div className="bg-[#f3f4f6] rounded-xl w-8 h-8 flex items-center justify-center flex-shrink-0">
|
||||
<div className={`bg-transparent border border-transparent rounded-xl p-3 flex gap-2 cursor-pointer transition-all ${
|
||||
isDark ? 'hover:bg-[#27272a] hover:border-[#3f3f46]' : 'hover:bg-[#f9fafb] hover:border-[#e5e7eb]'
|
||||
}`}>
|
||||
<div className={`rounded-xl w-8 h-8 flex items-center justify-center flex-shrink-0 ${
|
||||
isDark ? 'bg-[#27272a]' : 'bg-[#f3f4f6]'
|
||||
}`}>
|
||||
<Image
|
||||
src="/component-10.svg"
|
||||
alt="Oracle Network"
|
||||
width={16}
|
||||
height={16}
|
||||
style={{
|
||||
filter: isDark ? 'invert(1) brightness(0.8)' : 'none'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="text-[#111827] font-inter text-sm font-bold">
|
||||
<span className={`font-domine text-sm font-bold ${
|
||||
isDark ? 'text-[#fafafa]' : 'text-[#111827]'
|
||||
}`}>
|
||||
{t.oracleNetwork}
|
||||
</span>
|
||||
<p className="text-[#9ca1af] font-inter text-xs">
|
||||
<p className="text-[#9ca1af] font-domine text-xs">
|
||||
{t.oracleNetworkDesc}
|
||||
</p>
|
||||
</div>
|
||||
@@ -297,12 +367,16 @@ export default function ProductMenu({ isOpen, onClose, language }: ProductMenuPr
|
||||
</div>
|
||||
|
||||
{/* Bottom Border */}
|
||||
<div className="border-t border-[#f3f4f6] mt-6 pt-4 flex items-center justify-between">
|
||||
<div className="text-[#9ca1af] font-inter text-sm">
|
||||
<div className={`border-t mt-6 pt-4 flex items-center justify-between ${
|
||||
isDark ? 'border-[#27272a]' : 'border-[#f3f4f6]'
|
||||
}`}>
|
||||
<div className="text-[#9ca1af] font-domine text-sm">
|
||||
<span className="font-medium">{t.latestAudit}</span>
|
||||
<span className="ml-1 text-[#111827] font-bold">{t.auditInfo}</span>
|
||||
<span className={`ml-1 font-bold ${
|
||||
isDark ? 'text-[#fafafa]' : 'text-[#111827]'
|
||||
}`}>{t.auditInfo}</span>
|
||||
</div>
|
||||
<div className="text-green-600 font-inter text-sm font-bold cursor-pointer hover:opacity-70 transition-opacity">
|
||||
<div className="text-green-600 font-domine text-sm font-bold cursor-pointer hover:opacity-70 transition-opacity">
|
||||
{t.viewDocs}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user