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

127
components/Footer.tsx
View File

@@ -1,10 +1,14 @@
'use client';
import Image from 'next/image';
import { Link, Button } from '@heroui/react';
import { useLanguage } from '@/contexts/LanguageContext';
import { useTheme } from '@/contexts/ThemeContext';
export default function Footer() {
const { t } = useLanguage();
const { theme } = useTheme();
const isDark = theme === 'dark';
const socialIcons = [
{ src: '/component-12.svg', alt: 'Twitter', width: 24, height: 24 },
@@ -14,7 +18,9 @@ export default function Footer() {
];
return (
<footer className="bg-white border-t border-[#e5e7eb] w-full flex flex-col items-center">
<footer className={`w-full flex flex-col items-center border-t ${
isDark ? 'bg-[#0a0a0a] border-[#27272a]' : 'bg-white border-[#e5e7eb]'
}`}>
{/* Main Footer Content */}
<div className="w-full max-w-[1440px] px-6 py-20 flex flex-row gap-8">
@@ -27,12 +33,15 @@ export default function Footer() {
alt="AssetX Logo"
width={160}
height={40}
style={{
filter: isDark ? 'invert(1) brightness(1.2)' : 'none'
}}
/>
</div>
{/* Address */}
<div
className="text-[#9ca1af] text-left font-inter"
className="text-[#9ca1af] text-left font-domine"
style={{
fontSize: '14px',
lineHeight: '150%',
@@ -45,19 +54,24 @@ export default function Footer() {
</div>
{/* Social Icons */}
<div className="flex flex-row gap-4 items-center">
<div className="flex flex-row gap-2 items-center">
{socialIcons.map((icon, index) => (
<div
<Button
key={index}
className="cursor-pointer hover:opacity-70 transition-opacity"
isIconOnly
variant="light"
className="min-w-10 w-10 h-10"
>
<Image
src={icon.src}
alt={icon.alt}
width={icon.width}
height={icon.height}
style={{
filter: isDark ? 'invert(1) brightness(0.8)' : 'none'
}}
/>
</div>
</Button>
))}
</div>
</div>
@@ -68,29 +82,29 @@ export default function Footer() {
{/* Products Column */}
<div className="flex flex-col gap-4 w-[178.67px]">
<h3
className="text-[#111827] font-inter"
className={`font-domine font-bold text-base ${
isDark ? 'text-[#fafafa]' : 'text-[#111827]'
}`}
style={{
fontSize: '16px',
lineHeight: '150%',
fontWeight: 700
lineHeight: '150%'
}}
>
{t('footer.products')}
</h3>
<div className="flex flex-col gap-2">
{[1, 2, 3, 4, 5].map((num) => (
<a
<Link
key={num}
href="#"
className="text-[#9ca1af] hover:text-[#111827] transition-colors font-inter cursor-pointer"
className={`font-domine text-sm ${
isDark ? 'text-[#9ca1af] hover:text-[#fafafa]' : 'text-[#9ca1af] hover:text-[#111827]'
}`}
style={{
fontSize: '14px',
lineHeight: '150%',
fontWeight: 400
lineHeight: '150%'
}}
>
{t(`footer.product${num}`)}
</a>
</Link>
))}
</div>
</div>
@@ -98,29 +112,29 @@ export default function Footer() {
{/* Resources Column */}
<div className="flex flex-col gap-4 w-[178.67px]">
<h3
className="text-[#111827] font-inter"
className={`font-domine font-bold text-base ${
isDark ? 'text-[#fafafa]' : 'text-[#111827]'
}`}
style={{
fontSize: '16px',
lineHeight: '150%',
fontWeight: 700
lineHeight: '150%'
}}
>
{t('footer.resources')}
</h3>
<div className="flex flex-col gap-2">
{[1, 2, 3, 4, 5].map((num) => (
<a
<Link
key={num}
href="#"
className="text-[#9ca1af] hover:text-[#111827] transition-colors font-inter cursor-pointer"
className={`font-domine text-sm ${
isDark ? 'text-[#9ca1af] hover:text-[#fafafa]' : 'text-[#9ca1af] hover:text-[#111827]'
}`}
style={{
fontSize: '14px',
lineHeight: '150%',
fontWeight: 400
lineHeight: '150%'
}}
>
{t(`footer.resource${num}`)}
</a>
</Link>
))}
</div>
</div>
@@ -128,29 +142,29 @@ export default function Footer() {
{/* Company Column */}
<div className="flex flex-col gap-4 w-[178.67px]">
<h3
className="text-[#111827] font-inter"
className={`font-domine font-bold text-base ${
isDark ? 'text-[#fafafa]' : 'text-[#111827]'
}`}
style={{
fontSize: '16px',
lineHeight: '150%',
fontWeight: 700
lineHeight: '150%'
}}
>
{t('footer.company')}
</h3>
<div className="flex flex-col gap-2">
{[1, 2, 3, 4].map((num) => (
<a
<Link
key={num}
href="#"
className="text-[#9ca1af] hover:text-[#111827] transition-colors font-inter cursor-pointer"
className={`font-domine text-sm ${
isDark ? 'text-[#9ca1af] hover:text-[#fafafa]' : 'text-[#9ca1af] hover:text-[#111827]'
}`}
style={{
fontSize: '14px',
lineHeight: '150%',
fontWeight: 400
lineHeight: '150%'
}}
>
{t(`footer.company${num}`)}
</a>
</Link>
))}
</div>
</div>
@@ -158,43 +172,34 @@ export default function Footer() {
</div>
{/* Bottom Section - Copyright and Legal Links */}
<div className="w-full max-w-[1440px] border-t border-[#f3f4f6] px-6 py-8 flex flex-row items-center justify-between">
<div className={`w-full max-w-[1440px] border-t px-6 py-8 flex flex-row items-center justify-between ${
isDark ? 'border-[#27272a]' : 'border-[#f3f4f6]'
}`}>
{/* Copyright */}
<div
className="text-[#9ca1af] font-inter"
style={{
fontSize: '14px',
lineHeight: '150%',
fontWeight: 400
}}
>
<div className="text-[#9ca1af] font-domine text-sm" style={{ lineHeight: '150%' }}>
{t('footer.copyright')}
</div>
{/* Legal Links */}
<div className="flex flex-row gap-6">
<a
<Link
href="#"
className="text-[#9ca1af] hover:text-[#111827] transition-colors font-inter cursor-pointer"
style={{
fontSize: '14px',
lineHeight: '150%',
fontWeight: 400
}}
className={`font-domine text-sm ${
isDark ? 'text-[#9ca1af] hover:text-[#fafafa]' : 'text-[#9ca1af] hover:text-[#111827]'
}`}
style={{ lineHeight: '150%' }}
>
{t('footer.privacy')}
</a>
<a
</Link>
<Link
href="#"
className="text-[#9ca1af] hover:text-[#111827] transition-colors font-inter cursor-pointer"
style={{
fontSize: '14px',
lineHeight: '150%',
fontWeight: 400
}}
className={`font-domine text-sm ${
isDark ? 'text-[#9ca1af] hover:text-[#fafafa]' : 'text-[#9ca1af] hover:text-[#111827]'
}`}
style={{ lineHeight: '150%' }}
>
{t('footer.terms')}
</a>
</Link>
</div>
</div>
</footer>