初始化项目
This commit is contained in:
338
components/ResourceMenu.tsx
Normal file
338
components/ResourceMenu.tsx
Normal file
@@ -0,0 +1,338 @@
|
||||
'use client';
|
||||
|
||||
import Image from 'next/image';
|
||||
|
||||
interface ResourceMenuProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
language: 'zh' | 'en';
|
||||
}
|
||||
|
||||
export default function ResourceMenu({ isOpen, onClose, language }: ResourceMenuProps) {
|
||||
if (!isOpen) return null;
|
||||
|
||||
const content = {
|
||||
zh: {
|
||||
docLearning: '文档与学习',
|
||||
docs: '文档',
|
||||
docsDesc: '阅读技术文档、智能合约参考和集成指南。',
|
||||
docsBadge: '已更新',
|
||||
trustSecurity: '信任与安全',
|
||||
trustSecurityDesc: '查看审计、合规认证和我们的安全实践。',
|
||||
helpSupport: '帮助与支持',
|
||||
learningCenter: '学习中心',
|
||||
learningCenterDesc: '教程与视频指南。',
|
||||
communityForum: '社区论坛',
|
||||
communityForumDesc: '提问与交流。',
|
||||
contactSupport: '联系支持',
|
||||
contactSupportDesc: '从我们的团队获得帮助。',
|
||||
company: '公司',
|
||||
aboutTeam: '关于团队',
|
||||
aboutTeamDesc: '认识AssetX背后的团队。',
|
||||
careers: '招聘',
|
||||
careersDesc: '加入我们不断成长的团队。',
|
||||
contactUs: '联系我们',
|
||||
contactUsDesc: '合作与媒体咨询。',
|
||||
pressMedia: '新闻媒体',
|
||||
pressMediaDesc: '最新消息与品牌资产。',
|
||||
latestAudit: '最新审计：',
|
||||
auditInfo: 'Oct 2025 (Certik)',
|
||||
privacyPolicy: '隐私政策',
|
||||
termsOfService: '服务条款'
|
||||
},
|
||||
en: {
|
||||
docLearning: 'Documentation & Learning',
|
||||
docs: 'Docs',
|
||||
docsDesc: 'Read technical docs, smart contract references, and integration guides.',
|
||||
docsBadge: 'Updated',
|
||||
trustSecurity: 'Trust & Security',
|
||||
trustSecurityDesc: 'Review audits, compliance attestations, and our security practices.',
|
||||
helpSupport: 'Help & Support',
|
||||
learningCenter: 'Learning Center',
|
||||
learningCenterDesc: 'Tutorials & video guides.',
|
||||
communityForum: 'Community Forum',
|
||||
communityForumDesc: 'Ask questions & connect.',
|
||||
contactSupport: 'Contact Support',
|
||||
contactSupportDesc: 'Get help from our team.',
|
||||
company: 'Company',
|
||||
aboutTeam: 'About Team',
|
||||
aboutTeamDesc: 'Meet the people behind AssetX.',
|
||||
careers: 'Careers',
|
||||
careersDesc: 'Join our growing team.',
|
||||
contactUs: 'Contact Us',
|
||||
contactUsDesc: 'Partnerships & media inquiries.',
|
||||
pressMedia: 'Press & Media',
|
||||
pressMediaDesc: 'Latest news & brand assets.',
|
||||
latestAudit: 'Latest Audit:',
|
||||
auditInfo: 'Oct 2025 (Certik)',
|
||||
privacyPolicy: 'Privacy Policy',
|
||||
termsOfService: 'Terms of Service'
|
||||
}
|
||||
};
|
||||
|
||||
const t = content[language];
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Backdrop */}
|
||||
<div
|
||||
className="fixed inset-0 bg-black/20 z-40 animate-fade-in"
|
||||
onClick={onClose}
|
||||
/>
|
||||
|
||||
{/* Menu */}
|
||||
<div className="fixed left-1/2 -translate-x-1/2 bg-white rounded-2xl shadow-xl border border-[#e5e7eb] p-6 z-50 animate-slide-down"
|
||||
style={{ width: '1080px', top: '90px' }}
|
||||
>
|
||||
<div className="flex flex-row gap-8">
|
||||
{/* Left Column - Documentation & Learning */}
|
||||
<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">
|
||||
{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">
|
||||
<Image
|
||||
src="/component-10.svg"
|
||||
alt="Docs"
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
</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">
|
||||
{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">
|
||||
{t.docsBadge}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-[#9ca1af] font-inter 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">
|
||||
<Image
|
||||
src="/component-11.svg"
|
||||
alt="Trust & Security"
|
||||
width={24}
|
||||
height={24}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1 flex-1">
|
||||
<span className="text-[#111827] font-inter text-sm font-bold">
|
||||
{t.trustSecurity}
|
||||
</span>
|
||||
<p className="text-[#9ca1af] font-inter text-xs leading-relaxed">
|
||||
{t.trustSecurityDesc}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 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">
|
||||
<Image
|
||||
src="/image-280.png"
|
||||
alt="Resource Showcase"
|
||||
width={96}
|
||||
height={96}
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 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">
|
||||
{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">
|
||||
<Image
|
||||
src="/component-12.svg"
|
||||
alt="Learning Center"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="text-[#111827] font-inter text-sm font-bold">
|
||||
{t.learningCenter}
|
||||
</span>
|
||||
<p className="text-[#9ca1af] font-inter 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">
|
||||
<Image
|
||||
src="/communication-chat-conversation0.svg"
|
||||
alt="Community Forum"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="text-[#111827] font-inter text-sm font-bold">
|
||||
{t.communityForum}
|
||||
</span>
|
||||
<p className="text-[#9ca1af] font-inter 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">
|
||||
<Image
|
||||
src="/component-13.svg"
|
||||
alt="Contact Support"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="text-[#111827] font-inter text-sm font-bold">
|
||||
{t.contactSupport}
|
||||
</span>
|
||||
<p className="text-[#9ca1af] font-inter text-xs">
|
||||
{t.contactSupportDesc}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 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">
|
||||
{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">
|
||||
<Image
|
||||
src="/component-14.svg"
|
||||
alt="About Team"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="text-[#111827] font-inter text-sm font-bold">
|
||||
{t.aboutTeam}
|
||||
</span>
|
||||
<p className="text-[#9ca1af] font-inter 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">
|
||||
<Image
|
||||
src="/component-20-dark.svg"
|
||||
alt="Careers"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="text-[#111827] font-inter text-sm font-bold">
|
||||
{t.careers}
|
||||
</span>
|
||||
<p className="text-[#9ca1af] font-inter 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">
|
||||
<Image
|
||||
src="/component-21.svg"
|
||||
alt="Contact Us"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="text-[#111827] font-inter text-sm font-bold">
|
||||
{t.contactUs}
|
||||
</span>
|
||||
<p className="text-[#9ca1af] font-inter 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">
|
||||
<Image
|
||||
src="/component-22.svg"
|
||||
alt="Press & Media"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="text-[#111827] font-inter text-sm font-bold">
|
||||
{t.pressMedia}
|
||||
</span>
|
||||
<p className="text-[#9ca1af] font-inter text-xs">
|
||||
{t.pressMediaDesc}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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">
|
||||
<span className="font-medium">{t.latestAudit}</span>
|
||||
<span className="ml-1 text-[#111827] font-bold">{t.auditInfo}</span>
|
||||
</div>
|
||||
<div className="flex gap-4">
|
||||
<div className="text-[#9ca1af] font-inter text-sm cursor-pointer hover:text-[#111827] transition-colors">
|
||||
{t.privacyPolicy}
|
||||
</div>
|
||||
<div className="text-[#9ca1af] font-inter text-sm cursor-pointer hover:text-[#111827] transition-colors">
|
||||
{t.termsOfService}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user