fix: add light/dark mode support with Tailwind dark: prefix
This commit is contained in:
张翔
@@ -4,14 +4,15 @@ import { COMPANY_INFO, NAVIGATION } from '@/lib/constants';
|
||||
|
||||
export function Footer() {
|
||||
return (
|
||||
<footer className="bg-[var(--color-bg-secondary)] border-t border-gray-800">
|
||||
<footer className="bg-gray-100 dark:bg-[var(--color-bg-secondary)] border-t border-gray-200 dark:border-gray-800">
|
||||
<div className="container-custom py-16">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">
|
||||
<div className="lg:col-span-1">
|
||||
<div className="flex items-center mb-6">
|
||||
<img src="/logo-white.svg" alt="四川睿新致远科技有限公司" className="h-12 w-auto" />
|
||||
<img src="/logo.svg" alt="四川睿新致远科技有限公司" className="h-12 w-auto dark:hidden" />
|
||||
<img src="/logo-white.svg" alt="四川睿新致远科技有限公司" className="h-12 w-auto hidden dark:block" />
|
||||
</div>
|
||||
<p className="text-gray-400 text-sm leading-relaxed mb-6">
|
||||
<p className="text-gray-600 dark:text-gray-400 text-sm leading-relaxed mb-6">
|
||||
{COMPANY_INFO.description}
|
||||
</p>
|
||||
<div className="flex flex-col items-start gap-3">
|
||||
@@ -27,13 +28,13 @@ export function Footer() {
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="font-semibold text-lg mb-6 text-white">快速链接</h3>
|
||||
<h3 className="font-semibold text-lg mb-6 text-gray-900 dark:text-white">快速链接</h3>
|
||||
<ul className="space-y-3">
|
||||
{NAVIGATION.map((item) => (
|
||||
<li key={item.id}>
|
||||
<a
|
||||
href={item.href}
|
||||
className="text-gray-400 hover:text-[var(--color-tech-blue)] transition-colors"
|
||||
className="text-gray-600 dark:text-gray-400 hover:text-[var(--color-tech-blue)] transition-colors"
|
||||
>
|
||||
{item.label}
|
||||
</a>
|
||||
@@ -43,25 +44,25 @@ export function Footer() {
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="font-semibold text-lg mb-6 text-white">服务项目</h3>
|
||||
<h3 className="font-semibold text-lg mb-6 text-gray-900 dark:text-white">服务项目</h3>
|
||||
<ul className="space-y-3">
|
||||
<li>
|
||||
<a href="#services" className="text-gray-400 hover:text-[var(--color-tech-blue)] transition-colors">
|
||||
<a href="#services" className="text-gray-600 dark:text-gray-400 hover:text-[var(--color-tech-blue)] transition-colors">
|
||||
软件开发
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#services" className="text-gray-400 hover:text-[var(--color-tech-blue)] transition-colors">
|
||||
<a href="#services" className="text-gray-600 dark:text-gray-400 hover:text-[var(--color-tech-blue)] transition-colors">
|
||||
云服务
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#services" className="text-gray-400 hover:text-[var(--color-tech-blue)] transition-colors">
|
||||
<a href="#services" className="text-gray-600 dark:text-gray-400 hover:text-[var(--color-tech-blue)] transition-colors">
|
||||
数据分析
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#services" className="text-gray-400 hover:text-[var(--color-tech-blue)] transition-colors">
|
||||
<a href="#services" className="text-gray-600 dark:text-gray-400 hover:text-[var(--color-tech-blue)] transition-colors">
|
||||
信息安全
|
||||
</a>
|
||||
</li>
|
||||
@@ -69,25 +70,25 @@ export function Footer() {
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="font-semibold text-lg mb-6 text-white">联系方式</h3>
|
||||
<h3 className="font-semibold text-lg mb-6 text-gray-900 dark:text-white">联系方式</h3>
|
||||
<ul className="space-y-4">
|
||||
<li className="flex items-start gap-3">
|
||||
<MapPin className="w-5 h-5 text-[var(--color-tech-blue)] mt-0.5" />
|
||||
<span className="text-gray-400">{COMPANY_INFO.address}</span>
|
||||
<span className="text-gray-600 dark:text-gray-400">{COMPANY_INFO.address}</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<Phone className="w-5 h-5 text-[var(--color-tech-blue)]" />
|
||||
<span className="text-gray-400">{COMPANY_INFO.phone}</span>
|
||||
<span className="text-gray-600 dark:text-gray-400">{COMPANY_INFO.phone}</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<Mail className="w-5 h-5 text-[var(--color-tech-blue)]" />
|
||||
<span className="text-gray-400">{COMPANY_INFO.email}</span>
|
||||
<span className="text-gray-600 dark:text-gray-400">{COMPANY_INFO.email}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-gray-800 mt-12 pt-8">
|
||||
<div className="border-t border-gray-200 dark:border-gray-800 mt-12 pt-8">
|
||||
<div className="flex flex-col md:flex-row justify-between items-center gap-4">
|
||||
<p className="text-gray-500 text-sm">
|
||||
© {new Date().getFullYear()} {COMPANY_INFO.name}. All rights reserved.
|
||||
|
||||
@@ -64,7 +64,7 @@ export function Header() {
|
||||
fixed top-0 left-0 right-0 z-50
|
||||
transition-all duration-300 ease-out
|
||||
${isScrolled
|
||||
? 'bg-[var(--color-bg-primary)]/95 backdrop-blur-md border-b border-gray-800 shadow-lg shadow-black/20'
|
||||
? 'bg-white/95 dark:bg-[var(--color-bg-primary)]/95 backdrop-blur-md border-b border-gray-200 dark:border-gray-800 shadow-lg shadow-gray-200/50 dark:shadow-black/20'
|
||||
: 'bg-transparent'
|
||||
}
|
||||
`}
|
||||
@@ -94,7 +94,7 @@ export function Header() {
|
||||
transition-all duration-300
|
||||
${activeSection === item.id.replace('#', '')
|
||||
? 'text-[var(--color-tech-blue)]'
|
||||
: 'text-gray-400 hover:text-[var(--color-tech-blue)]'
|
||||
: 'text-gray-600 dark:text-gray-400 hover:text-[var(--color-tech-blue)]'
|
||||
}
|
||||
`}
|
||||
>
|
||||
@@ -138,7 +138,7 @@ export function Header() {
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="md:hidden p-2 -mr-2 text-gray-400 hover:text-[var(--color-tech-blue)] transition-colors"
|
||||
className="md:hidden p-2 -mr-2 text-gray-600 dark:text-gray-400 hover:text-[var(--color-tech-blue)] transition-colors"
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
>
|
||||
{isOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
|
||||
@@ -164,7 +164,7 @@ export function Header() {
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
exit={{ y: -20, opacity: 0 }}
|
||||
transition={{ type: "spring", stiffness: 300, damping: 30 }}
|
||||
className="absolute top-16 left-0 right-0 bg-[var(--color-bg-secondary)] border-b border-gray-800 shadow-xl"
|
||||
className="absolute top-16 left-0 right-0 bg-white dark:bg-[var(--color-bg-secondary)] border-b border-gray-200 dark:border-gray-800 shadow-xl"
|
||||
>
|
||||
<nav className="container-wide py-4">
|
||||
{NAVIGATION.map((item, index) => (
|
||||
@@ -181,14 +181,14 @@ export function Header() {
|
||||
border-l-2
|
||||
${activeSection === item.id.replace('#', '')
|
||||
? 'text-[var(--color-tech-blue)] border-[var(--color-tech-blue)] bg-[var(--color-tech-blue)]/10'
|
||||
: 'text-gray-400 border-transparent hover:text-[var(--color-tech-blue)] hover:bg-[var(--color-bg-tertiary)]'
|
||||
: 'text-gray-600 dark:text-gray-400 border-transparent hover:text-[var(--color-tech-blue)] hover:bg-gray-100 dark:hover:bg-[var(--color-bg-tertiary)]'
|
||||
}
|
||||
`}
|
||||
>
|
||||
{item.label}
|
||||
</motion.a>
|
||||
))}
|
||||
<div className="mt-4 px-4 pt-4 border-t border-gray-800 space-y-3">
|
||||
<div className="mt-4 px-4 pt-4 border-t border-gray-200 dark:border-gray-800 space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-gray-500">主题模式</span>
|
||||
<ThemeToggle />
|
||||
|
||||
Reference in New Issue
Block a user