novalon/novalon-website
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 重构网站UI设计并优化布局结构

Browse Source 
重构整体UI设计，采用红色主题配色方案
优化页面布局结构，将Header和Footer移至page组件
更新按钮样式和交互效果，增强视觉反馈
调整全局字体配置，使用思源黑体作为中文字体
改进各区块卡片样式，增加悬停动画效果
优化响应式设计，提升移动端体验
This commit is contained in:
张翔
2026-02-08 16:46:22 +08:00
parent cc55146ba6
commit 522f1e09a7
13 changed files with 392 additions and 322 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/layout/footer.tsx
+27 -28
View File
@@ -1,11 +1,10 @@
import Link from 'next/link';
import Image from 'next/image';
import { Mail, Phone, MapPin } from 'lucide-react';
import { COMPANY_INFO, NAVIGATION, SOCIAL_LINKS } from '@/lib/constants';
import { COMPANY_INFO, NAVIGATION } from '@/lib/constants';
export function Footer() {
return (
<footer className="bg-black text-white">
<footer className="bg-[#1A1A1A] text-white">
<div className="container-custom py-16">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">
{/* Company Info */}
@@ -13,11 +12,11 @@ export function Footer() {
<div className="flex items-center mb-6">
<img src="/logo-white.svg" alt="四川睿新致远科技有限公司" className="h-12 w-auto" />
</div>
<p className="text-gray-400 text-sm leading-relaxed mb-6">
<p className="text-[#8A8A8A] text-sm leading-relaxed mb-6">
{COMPANY_INFO.description}
</p>
<div className="flex flex-col items-start gap-3">
<span className="text-gray-400 text-sm">关注微信公众号</span>
<span className="text-[#8A8A8A] text-sm">关注微信公众号</span>
<div className="w-24 h-24 bg-white rounded-lg p-2">
<img
src="/images/qrcode-wechat.png"
@@ -30,16 +29,16 @@ export function Footer() {
{/* Quick Links */}
<div>
<h3 className="font-semibold text-lg mb-6">快速链接</h3>
<h3 className="font-semibold text-lg mb-6 text-white">快速链接</h3>
<ul className="space-y-3">
{NAVIGATION.map((item) => (
<li key={item.id}>
<Link
<a
href={item.href}
className="text-gray-400 hover:text-white transition-colors"
className="text-[#8A8A8A] hover:text-[#C41E3A] transition-colors"
>
{item.label}
</Link>
</a>
</li>
))}
</ul>
@@ -47,46 +46,46 @@ export function Footer() {
{/* Services */}
<div>
<h3 className="font-semibold text-lg mb-6">服务项目</h3>
<h3 className="font-semibold text-lg mb-6 text-white">服务项目</h3>
<ul className="space-y-3">
<li>
<Link href="/services" className="text-gray-400 hover:text-white transition-colors">
<a href="#services" className="text-[#8A8A8A] hover:text-[#C41E3A] transition-colors">
软件开发
</Link>
</a>
</li>
<li>
<Link href="/services" className="text-gray-400 hover:text-white transition-colors">
<a href="#services" className="text-[#8A8A8A] hover:text-[#C41E3A] transition-colors">
云服务
</Link>
</a>
</li>
<li>
<Link href="/services" className="text-gray-400 hover:text-white transition-colors">
<a href="#services" className="text-[#8A8A8A] hover:text-[#C41E3A] transition-colors">
数据分析
</Link>
</a>
</li>
<li>
<Link href="/services" className="text-gray-400 hover:text-white transition-colors">
<a href="#services" className="text-[#8A8A8A] hover:text-[#C41E3A] transition-colors">
信息安全
</Link>
</a>
</li>
</ul>
</div>
{/* Contact Info */}
<div>
<h3 className="font-semibold text-lg mb-6">联系方式</h3>
<h3 className="font-semibold text-lg mb-6 text-white">联系方式</h3>
<ul className="space-y-4">
<li className="flex items-start gap-3">
<MapPin className="w-5 h-5 text-gray-400 mt-0.5" />
<span className="text-gray-400">{COMPANY_INFO.address}</span>
<MapPin className="w-5 h-5 text-[#C41E3A] mt-0.5" />
<span className="text-[#8A8A8A]">{COMPANY_INFO.address}</span>
</li>
<li className="flex items-center gap-3">
<Phone className="w-5 h-5 text-gray-400" />
<span className="text-gray-400">{COMPANY_INFO.phone}</span>
<Phone className="w-5 h-5 text-[#C41E3A]" />
<span className="text-[#8A8A8A]">{COMPANY_INFO.phone}</span>
</li>
<li className="flex items-center gap-3">
<Mail className="w-5 h-5 text-gray-400" />
<span className="text-gray-400">{COMPANY_INFO.email}</span>
<Mail className="w-5 h-5 text-[#C41E3A]" />
<span className="text-[#8A8A8A]">{COMPANY_INFO.email}</span>
</li>
</ul>
</div>
@@ -95,14 +94,14 @@ export function Footer() {
{/* Bottom */}
<div className="border-t border-white/10 mt-12 pt-8">
<div className="flex flex-col md:flex-row justify-between items-center gap-4">
<p className="text-gray-400 text-sm">
<p className="text-[#8A8A8A] text-sm">
© {new Date().getFullYear()} {COMPANY_INFO.name}. All rights reserved.
</p>
<div className="flex gap-6">
<Link href="#" className="text-gray-400 hover:text-white text-sm transition-colors">
<Link href="#" className="text-[#8A8A8A] hover:text-[#C41E3A] text-sm transition-colors">
隐私政策
</Link>
<Link href="#" className="text-gray-400 hover:text-white text-sm transition-colors">
<Link href="#" className="text-[#8A8A8A] hover:text-[#C41E3A] text-sm transition-colors">
服务条款
</Link>
</div>