初始化项目
This commit is contained in:
222
components/Footer.tsx
Normal file
222
components/Footer.tsx
Normal file
@@ -0,0 +1,222 @@
|
||||
'use client';
|
||||
|
||||
import Image from 'next/image';
|
||||
|
||||
export default function Footer() {
|
||||
const productLinks = [
|
||||
'AX-Fund',
|
||||
'AX-Matrix',
|
||||
'Launchpad',
|
||||
'Liquid Market',
|
||||
'Token Factory'
|
||||
];
|
||||
|
||||
const resourceLinks = [
|
||||
'Docs',
|
||||
'FAQ & Support',
|
||||
'Trust & Security',
|
||||
'Learning Center',
|
||||
'Community Forum'
|
||||
];
|
||||
|
||||
const companyLinks = [
|
||||
'About Team',
|
||||
'Careers',
|
||||
'Contact Us',
|
||||
'Press & Media'
|
||||
];
|
||||
|
||||
const socialIcons = [
|
||||
{ src: '/component-12.svg', alt: 'Twitter', width: 24, height: 24 },
|
||||
{ src: '/component-13.svg', alt: 'Discord', width: 24, height: 24 },
|
||||
{ src: '/component-14.svg', alt: 'Telegram', width: 24, height: 24 },
|
||||
{ src: '/component-15.svg', alt: 'Medium', width: 24, height: 24 }
|
||||
];
|
||||
|
||||
return (
|
||||
<footer className="bg-white border-t border-[#e5e7eb] w-full flex flex-col items-center">
|
||||
{/* Main Footer Content */}
|
||||
<div className="w-full max-w-[1280px] px-6 py-20 flex flex-row gap-8">
|
||||
|
||||
{/* Left Section - Logo, Address, Social Icons */}
|
||||
<div className="flex flex-col gap-6 w-[389.33px]">
|
||||
{/* Logo */}
|
||||
<div className="flex items-center">
|
||||
<Image
|
||||
src="/logo2.svg"
|
||||
alt="AssetX Logo"
|
||||
width={160}
|
||||
height={40}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Address */}
|
||||
<div
|
||||
className="text-[#9ca1af] text-left font-inter"
|
||||
style={{
|
||||
fontSize: '14px',
|
||||
lineHeight: '150%',
|
||||
fontWeight: 400
|
||||
}}
|
||||
>
|
||||
G/F, Hong Kong Museum Of Art, 10號 Salisbury
|
||||
<br />
|
||||
Rd, Tsim Sha Tsui, HongKong
|
||||
</div>
|
||||
|
||||
{/* Social Icons */}
|
||||
<div className="flex flex-row gap-4 items-center">
|
||||
{socialIcons.map((icon, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="cursor-pointer hover:opacity-70 transition-opacity"
|
||||
>
|
||||
<Image
|
||||
src={icon.src}
|
||||
alt={icon.alt}
|
||||
width={icon.width}
|
||||
height={icon.height}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Section - Links */}
|
||||
<div className="flex flex-row justify-between flex-1">
|
||||
|
||||
{/* Products Column */}
|
||||
<div className="flex flex-col gap-4 w-[178.67px]">
|
||||
<h3
|
||||
className="text-[#111827] font-inter"
|
||||
style={{
|
||||
fontSize: '16px',
|
||||
lineHeight: '150%',
|
||||
fontWeight: 700
|
||||
}}
|
||||
>
|
||||
Products
|
||||
</h3>
|
||||
<div className="flex flex-col gap-2">
|
||||
{productLinks.map((link, index) => (
|
||||
<a
|
||||
key={index}
|
||||
href="#"
|
||||
className="text-[#9ca1af] hover:text-[#111827] transition-colors font-inter cursor-pointer"
|
||||
style={{
|
||||
fontSize: '14px',
|
||||
lineHeight: '150%',
|
||||
fontWeight: 400
|
||||
}}
|
||||
>
|
||||
{link}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Resources Column */}
|
||||
<div className="flex flex-col gap-4 w-[178.67px]">
|
||||
<h3
|
||||
className="text-[#111827] font-inter"
|
||||
style={{
|
||||
fontSize: '16px',
|
||||
lineHeight: '150%',
|
||||
fontWeight: 700
|
||||
}}
|
||||
>
|
||||
Resources
|
||||
</h3>
|
||||
<div className="flex flex-col gap-2">
|
||||
{resourceLinks.map((link, index) => (
|
||||
<a
|
||||
key={index}
|
||||
href="#"
|
||||
className="text-[#9ca1af] hover:text-[#111827] transition-colors font-inter cursor-pointer"
|
||||
style={{
|
||||
fontSize: '14px',
|
||||
lineHeight: '150%',
|
||||
fontWeight: 400
|
||||
}}
|
||||
>
|
||||
{link}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Company Column */}
|
||||
<div className="flex flex-col gap-4 w-[178.67px]">
|
||||
<h3
|
||||
className="text-[#111827] font-inter"
|
||||
style={{
|
||||
fontSize: '16px',
|
||||
lineHeight: '150%',
|
||||
fontWeight: 700
|
||||
}}
|
||||
>
|
||||
Company
|
||||
</h3>
|
||||
<div className="flex flex-col gap-2">
|
||||
{companyLinks.map((link, index) => (
|
||||
<a
|
||||
key={index}
|
||||
href="#"
|
||||
className="text-[#9ca1af] hover:text-[#111827] transition-colors font-inter cursor-pointer"
|
||||
style={{
|
||||
fontSize: '14px',
|
||||
lineHeight: '150%',
|
||||
fontWeight: 400
|
||||
}}
|
||||
>
|
||||
{link}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom Section - Copyright and Legal Links */}
|
||||
<div className="w-full max-w-[1280px] border-t border-[#f3f4f6] px-6 py-8 flex flex-row items-center justify-between">
|
||||
{/* Copyright */}
|
||||
<div
|
||||
className="text-[#9ca1af] font-inter"
|
||||
style={{
|
||||
fontSize: '14px',
|
||||
lineHeight: '150%',
|
||||
fontWeight: 400
|
||||
}}
|
||||
>
|
||||
© 2025 ASSETX Protocol. All rights reserved.
|
||||
</div>
|
||||
|
||||
{/* Legal Links */}
|
||||
<div className="flex flex-row gap-6">
|
||||
<a
|
||||
href="#"
|
||||
className="text-[#9ca1af] hover:text-[#111827] transition-colors font-inter cursor-pointer"
|
||||
style={{
|
||||
fontSize: '14px',
|
||||
lineHeight: '150%',
|
||||
fontWeight: 400
|
||||
}}
|
||||
>
|
||||
Privacy Policy
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="text-[#9ca1af] hover:text-[#111827] transition-colors font-inter cursor-pointer"
|
||||
style={{
|
||||
fontSize: '14px',
|
||||
lineHeight: '150%',
|
||||
fontWeight: 400
|
||||
}}
|
||||
>
|
||||
Terms of Service
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user