xufuhan/asset-homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

使用heroui完成对页面的重构

Browse Source
This commit is contained in:
xufuhan
2026-01-29 16:23:10 +08:00
parent 2377e2dda2
commit d265126035
24 changed files with 5360 additions and 1121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

190
components/ResourceMenu.tsx
View File

@@ -2,6 +2,7 @@
import Image from 'next/image';
import { useState, useEffect } from 'react';
import { useTheme } from '@/contexts/ThemeContext';
interface ResourceMenuProps {
isOpen: boolean;
@@ -10,6 +11,8 @@ interface ResourceMenuProps {
}
export default function ResourceMenu({ isOpen, onClose, language }: ResourceMenuProps) {
const { theme } = useTheme();
const isDark = theme === 'dark';
const [isVisible, setIsVisible] = useState(false);
const [isClosing, setIsClosing] = useState(false);
@@ -101,7 +104,9 @@ export default function ResourceMenu({ isOpen, onClose, language }: ResourceMenu
/>
{/* 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">
@@ -109,53 +114,71 @@ export default function ResourceMenu({ isOpen, onClose, language }: ResourceMenu
<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.docLearning}
</span>
</div>
{/* Docs 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-[#374151] hover:border-[#4b5563]' : '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="/icon-book.svg"
alt="Docs"
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-[#fafafa]' : 'text-[#111827]'
}`}>
{t.docs}
</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.docsBadge}
</span>
</div>
</div>
<p className="text-[#9ca1af] font-inter text-xs leading-relaxed">
<p className="text-[#9ca1af] font-domine text-xs leading-relaxed">
{t.docsDesc}
</p>
</div>
</div>
{/* Trust & Security 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-[#374151] hover:border-[#4b5563]' : 'hover:bg-[#f9fafb] hover:border-[#e5e7eb]'
}`}>
<div className={`rounded-xl w-12 h-12 flex items-center justify-center flex-shrink-0 ${
isDark ? 'bg-[#374151]' : 'bg-[#f3f4f6]'
}`}>
<Image
src="/component-11.svg"
alt="Trust & Security"
width={24}
height={24}
style={{
filter: isDark ? 'invert(1) brightness(0.8)' : 'none'
}}
/>
</div>
<div className="flex flex-col gap-1 flex-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.trustSecurity}
</span>
<p className="text-[#9ca1af] font-inter text-xs leading-relaxed">
<p className="text-[#9ca1af] font-domine text-xs leading-relaxed">
{t.trustSecurityDesc}
</p>
</div>
@@ -165,7 +188,9 @@ export default function ResourceMenu({ isOpen, onClose, language }: ResourceMenu
{/* Middle Column - Image + Help & Support */}
<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-280.png"
alt="Resource Showcase"
@@ -178,66 +203,93 @@ export default function ResourceMenu({ isOpen, onClose, language }: ResourceMenu
{/* Help & Support */}
<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.helpSupport}
</span>
</div>
<div className="flex flex-col gap-2">
{/* Learning Center */}
<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-12.svg"
alt="Learning Center"
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.learningCenter}
</span>
<p className="text-[#9ca1af] font-inter text-xs">
<p className="text-[#9ca1af] font-domine text-xs">
{t.learningCenterDesc}
</p>
</div>
</div>
{/* Community Forum */}
<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="/communication-chat-conversation0.svg"
alt="Community Forum"
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.communityForum}
</span>
<p className="text-[#9ca1af] font-inter text-xs">
<p className="text-[#9ca1af] font-domine text-xs">
{t.communityForumDesc}
</p>
</div>
</div>
{/* Contact Support */}
<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-13.svg"
alt="Contact Support"
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.contactSupport}
</span>
<p className="text-[#9ca1af] font-inter text-xs">
<p className="text-[#9ca1af] font-domine text-xs">
{t.contactSupportDesc}
</p>
</div>
@@ -249,86 +301,122 @@ export default function ResourceMenu({ isOpen, onClose, language }: ResourceMenu
{/* Right Column - Company */}
<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.company}
</span>
</div>
<div className="flex flex-col gap-2">
{/* About Team */}
<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-14.svg"
alt="About Team"
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.aboutTeam}
</span>
<p className="text-[#9ca1af] font-inter text-xs">
<p className="text-[#9ca1af] font-domine text-xs">
{t.aboutTeamDesc}
</p>
</div>
</div>
{/* Careers */}
<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-20-dark.svg"
alt="Careers"
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.careers}
</span>
<p className="text-[#9ca1af] font-inter text-xs">
<p className="text-[#9ca1af] font-domine text-xs">
{t.careersDesc}
</p>
</div>
</div>
{/* Contact Us */}
<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="Contact Us"
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.contactUs}
</span>
<p className="text-[#9ca1af] font-inter text-xs">
<p className="text-[#9ca1af] font-domine text-xs">
{t.contactUsDesc}
</p>
</div>
</div>
{/* Press & Media */}
<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-22.svg"
alt="Press & Media"
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.pressMedia}
</span>
<p className="text-[#9ca1af] font-inter text-xs">
<p className="text-[#9ca1af] font-domine text-xs">
{t.pressMediaDesc}
</p>
</div>
@@ -338,16 +426,24 @@ export default function ResourceMenu({ isOpen, onClose, language }: ResourceMenu
</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="flex gap-4">
<div className="text-[#9ca1af] font-inter text-sm cursor-pointer hover:text-[#111827] transition-colors">
<div className={`text-[#9ca1af] font-domine text-sm cursor-pointer transition-colors ${
isDark ? 'hover:text-[#fafafa]' : 'hover:text-[#111827]'
}`}>
{t.privacyPolicy}
</div>
<div className="text-[#9ca1af] font-inter text-sm cursor-pointer hover:text-[#111827] transition-colors">
<div className={`text-[#9ca1af] font-domine text-sm cursor-pointer transition-colors ${
isDark ? 'hover:text-[#fafafa]' : 'hover:text-[#111827]'
}`}>
{t.termsOfService}
</div>
</div>