fix: add light/dark mode support with Tailwind dark: prefix
This commit is contained in:
张翔
@@ -11,7 +11,7 @@ import { ContactSection } from "@/components/sections/contact-section";
|
||||
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<main className="min-h-screen bg-[var(--color-bg-primary)]">
|
||||
<main className="min-h-screen bg-white dark:bg-[var(--color-bg-primary)]">
|
||||
<Header />
|
||||
<HeroSection />
|
||||
<ServicesSection />
|
||||
|
||||
@@ -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 />
|
||||
|
||||
@@ -43,9 +43,8 @@ export function AboutSection() {
|
||||
const isInView = useInView(ref, { once: true, margin: '-100px' });
|
||||
|
||||
return (
|
||||
<section id="about" className="py-24 bg-[#FAF8F8]" ref={ref}>
|
||||
<section id="about" className="py-24 bg-gray-50 dark:bg-[var(--color-bg-secondary)]" ref={ref}>
|
||||
<div className="container-custom">
|
||||
{/* 头部介绍 */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
@@ -53,25 +52,24 @@ export function AboutSection() {
|
||||
className="max-w-4xl mx-auto"
|
||||
>
|
||||
<div className="text-center mb-16">
|
||||
<span className="inline-block px-4 py-1.5 rounded-full bg-[#FEF2F4] text-[#C41E3A] text-sm font-medium mb-4">
|
||||
<span className="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-[var(--color-tech-blue)]/30 bg-[var(--color-tech-blue)]/5 text-[var(--color-tech-blue)] text-sm font-medium mb-4">
|
||||
关于我们
|
||||
</span>
|
||||
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-[#1A1A1A] mb-6">
|
||||
关于 <span className="text-[#C41E3A]">{COMPANY_INFO.shortName}</span>
|
||||
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-6">
|
||||
关于 <span className="tech-gradient-text">{COMPANY_INFO.shortName}</span>
|
||||
</h2>
|
||||
<p className="text-lg text-[#4A4A4A]">
|
||||
<p className="text-lg text-gray-600 dark:text-gray-400">
|
||||
{COMPANY_INFO.slogan}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 公司简介 */}
|
||||
<div className="prose prose-lg max-w-none mb-16">
|
||||
<h3 className="text-2xl font-bold text-[#1A1A1A] mb-4">公司简介</h3>
|
||||
<p className="text-[#4A4A4A] mb-6 leading-relaxed">
|
||||
<h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">公司简介</h3>
|
||||
<p className="text-gray-600 dark:text-gray-400 mb-6 leading-relaxed">
|
||||
{COMPANY_INFO.name}成立于{COMPANY_INFO.founded}年1月15日，总部位于{COMPANY_INFO.location}龙泉驿区幸福路12号。
|
||||
公司专注于信息技术服务与解决方案，致力于为企业提供全方位的数字化转型支持。
|
||||
</p>
|
||||
<p className="text-[#4A4A4A] mb-6 leading-relaxed">
|
||||
<p className="text-gray-600 dark:text-gray-400 mb-6 leading-relaxed">
|
||||
我们拥有一支经验丰富的技术团队，在软件开发、云计算、数据分析、信息安全等领域具有深厚的技术积累。
|
||||
公司秉承"专注科技创新，驱动智慧未来"的理念，为客户提供高质量的产品和服务，助力企业在数字经济时代实现转型升级。
|
||||
</p>
|
||||
@@ -85,23 +83,22 @@ export function AboutSection() {
|
||||
className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-16"
|
||||
>
|
||||
{STATS.map((stat, idx) => (
|
||||
<Card key={idx} className="text-center border-[#E8E0E0] bg-white hover:shadow-lg hover:shadow-[#C41E3A]/5 transition-all duration-300 hover:-translate-y-1">
|
||||
<Card key={idx} className="text-center">
|
||||
<CardContent className="pt-6">
|
||||
<div className="text-3xl sm:text-4xl font-bold text-[#C41E3A] mb-2">{stat.value}</div>
|
||||
<div className="text-sm text-[#6B6B6B]">{stat.label}</div>
|
||||
<div className="text-3xl sm:text-4xl font-bold tech-gradient-text mb-2">{stat.value}</div>
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400">{stat.label}</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</motion.div>
|
||||
|
||||
{/* 企业价值观 */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.6, delay: 0.3 }}
|
||||
className="mb-16"
|
||||
>
|
||||
<h3 className="text-2xl font-bold text-[#1A1A1A] mb-8 text-center">企业价值观</h3>
|
||||
<h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-8 text-center">企业价值观</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{values.map((value, idx) => (
|
||||
<motion.div
|
||||
@@ -109,27 +106,26 @@ export function AboutSection() {
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.5, delay: 0.4 + idx * 0.1 }}
|
||||
className="flex items-start gap-4 p-6 bg-white rounded-xl border border-[#E8E0E0] hover:border-[#C41E3A]/30 hover:shadow-lg hover:shadow-[#C41E3A]/5 transition-all duration-300"
|
||||
className="flex items-start gap-4 p-6 bg-white dark:bg-[var(--color-bg-secondary)] rounded-xl border border-gray-200 dark:border-gray-800 hover:border-[var(--color-tech-blue)] transition-all duration-300"
|
||||
>
|
||||
<div className="w-12 h-12 bg-[#C41E3A] rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<div className="w-12 h-12 rounded-lg bg-gradient-to-br from-[var(--color-tech-blue)] to-[var(--color-tech-purple)] flex items-center justify-center flex-shrink-0">
|
||||
<value.icon className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-[#1A1A1A] mb-2">{value.title}</h4>
|
||||
<p className="text-[#6B6B6B] text-sm">{value.description}</p>
|
||||
<h4 className="font-semibold text-gray-900 dark:text-white mb-2">{value.title}</h4>
|
||||
<p className="text-gray-600 dark:text-gray-400 text-sm">{value.description}</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* 发展历程 */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.6, delay: 0.5 }}
|
||||
>
|
||||
<h3 className="text-2xl font-bold text-[#1A1A1A] mb-8 text-center">发展历程</h3>
|
||||
<h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-8 text-center">发展历程</h3>
|
||||
<div className="space-y-6">
|
||||
{milestones.map((milestone, idx) => (
|
||||
<motion.div
|
||||
@@ -137,14 +133,14 @@ export function AboutSection() {
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={isInView ? { opacity: 1, x: 0 } : {}}
|
||||
transition={{ duration: 0.5, delay: 0.6 + idx * 0.1 }}
|
||||
className="flex flex-col md:flex-row md:items-start gap-4 p-6 bg-white rounded-xl border border-[#E8E0E0]"
|
||||
className="flex flex-col md:flex-row md:items-start gap-4 p-6 bg-white dark:bg-[var(--color-bg-secondary)] rounded-xl border border-gray-200 dark:border-gray-800"
|
||||
>
|
||||
<div className="md:w-32 flex-shrink-0">
|
||||
<span className="text-sm font-medium text-[#C41E3A]">{milestone.date}</span>
|
||||
<span className="text-sm font-medium text-[var(--color-tech-blue)]">{milestone.date}</span>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className="font-semibold text-[#1A1A1A] mb-1">{milestone.title}</h4>
|
||||
<p className="text-[#6B6B6B] text-sm">{milestone.description}</p>
|
||||
<h4 className="font-semibold text-gray-900 dark:text-white mb-1">{milestone.title}</h4>
|
||||
<p className="text-gray-600 dark:text-gray-400 text-sm">{milestone.description}</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
|
||||
@@ -103,9 +103,9 @@ export function ContactSection() {
|
||||
}
|
||||
|
||||
return (
|
||||
<section id="contact" className="section-padding relative" ref={sectionRef}>
|
||||
<section id="contact" className="section-padding relative bg-gray-50 dark:bg-[var(--color-bg-secondary)]" ref={sectionRef}>
|
||||
<div className="absolute inset-0 pointer-events-none">
|
||||
<div className="absolute bottom-0 left-0 w-96 h-96 bg-gradient-radial from-[#C41E3A]/3 to-transparent rounded-full blur-3xl -translate-x-1/2 translate-y-1/2" />
|
||||
<div className="absolute bottom-0 left-0 w-96 h-96 bg-gradient-radial from-[var(--color-tech-blue)]/3 to-transparent rounded-full blur-3xl -translate-x-1/2 translate-y-1/2" />
|
||||
</div>
|
||||
|
||||
<div className="container-wide relative z-10">
|
||||
@@ -116,13 +116,13 @@ export function ContactSection() {
|
||||
`}
|
||||
>
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="w-8 h-px bg-[#C41E3A]" />
|
||||
<span className="text-sm text-[#525252] tracking-wide">联系我们</span>
|
||||
<div className="w-8 h-px bg-gradient-to-r from-[var(--color-tech-blue)] to-[var(--color-tech-purple)]" />
|
||||
<span className="text-sm text-gray-600 dark:text-gray-400 tracking-wide">联系我们</span>
|
||||
</div>
|
||||
<h2 className="text-3xl sm:text-4xl font-semibold text-[#171717] tracking-tight chapter-title">
|
||||
<h2 className="text-3xl sm:text-4xl font-semibold text-gray-900 dark:text-white tracking-tight chapter-title">
|
||||
开启合作
|
||||
</h2>
|
||||
<p className="mt-4 text-[#737373] max-w-2xl">
|
||||
<p className="mt-4 text-gray-600 dark:text-gray-400 max-w-2xl">
|
||||
无论您有任何问题或合作意向，我们都很乐意与您交流
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -63,7 +63,7 @@ export function HeroSection() {
|
||||
<section
|
||||
id="home"
|
||||
ref={sectionRef}
|
||||
className="relative min-h-screen flex items-center pt-16 overflow-hidden bg-[var(--color-bg-primary)]"
|
||||
className="relative min-h-screen flex items-center pt-16 overflow-hidden bg-white dark:bg-[var(--color-bg-primary)]"
|
||||
>
|
||||
<div className="absolute inset-0 pointer-events-none overflow-hidden">
|
||||
<div className="absolute top-1/4 left-1/4 w-96 h-96 bg-[var(--color-tech-blue)]/5 rounded-full blur-3xl animate-pulse-glow" />
|
||||
@@ -100,18 +100,18 @@ export function HeroSection() {
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isVisible ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.6, delay: 0.1 }}
|
||||
className="text-4xl sm:text-5xl lg:text-6xl font-bold text-white leading-tight tracking-tight mb-6"
|
||||
className="text-4xl sm:text-5xl lg:text-6xl font-bold text-gray-900 dark:text-white leading-tight tracking-tight mb-6"
|
||||
>
|
||||
<span className="tech-gradient-text">{COMPANY_INFO.shortName}</span>
|
||||
<br />
|
||||
<span className="text-gray-300">企业数字化转型服务商</span>
|
||||
<span className="text-gray-600 dark:text-gray-300">企业数字化转型服务商</span>
|
||||
</motion.h1>
|
||||
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isVisible ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
className="text-lg sm:text-xl text-gray-400 mb-8 max-w-2xl mx-auto leading-relaxed"
|
||||
className="text-lg sm:text-xl text-gray-600 dark:text-gray-400 mb-8 max-w-2xl mx-auto leading-relaxed"
|
||||
>
|
||||
{COMPANY_INFO.description}
|
||||
</motion.p>
|
||||
@@ -145,7 +145,7 @@ export function HeroSection() {
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isVisible ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.6, delay: 0.4 }}
|
||||
className="pt-12 border-t border-gray-800"
|
||||
className="pt-12 border-t border-gray-200 dark:border-gray-800"
|
||||
>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-8">
|
||||
{STATS.map((stat, index) => (
|
||||
@@ -161,7 +161,7 @@ export function HeroSection() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-[var(--color-bg-primary)] to-transparent pointer-events-none" />
|
||||
<div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-white dark:from-[var(--color-bg-primary)] to-transparent pointer-events-none" />
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -188,7 +188,7 @@ function StatItem({ stat, index, shouldAnimate }: {
|
||||
`0${suffix}`
|
||||
)}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500 group-hover:text-gray-400 transition-colors">
|
||||
<div className="text-sm text-gray-500 dark:text-gray-500 group-hover:text-gray-600 dark:group-hover:text-gray-400 transition-colors">
|
||||
{stat.label}
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
@@ -12,7 +12,7 @@ export function NewsSection() {
|
||||
const isInView = useInView(ref, { once: true, margin: '-100px' });
|
||||
|
||||
return (
|
||||
<section id="news" className="py-24 bg-white" ref={ref}>
|
||||
<section id="news" className="py-24 bg-white dark:bg-[var(--color-bg-primary)]" ref={ref}>
|
||||
<div className="container-custom">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
@@ -20,13 +20,13 @@ export function NewsSection() {
|
||||
transition={{ duration: 0.6 }}
|
||||
className="text-center max-w-3xl mx-auto mb-16"
|
||||
>
|
||||
<span className="inline-block px-4 py-1.5 rounded-full bg-[#FEF2F4] text-[#C41E3A] text-sm font-medium mb-4">
|
||||
<span className="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-[var(--color-tech-cyan)]/30 bg-[var(--color-tech-cyan)]/5 text-[var(--color-tech-cyan)] text-sm font-medium mb-4">
|
||||
新闻动态
|
||||
</span>
|
||||
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-[#1A1A1A] mb-6">
|
||||
最新<span className="text-[#C41E3A]">资讯</span>
|
||||
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-6">
|
||||
最新<span className="tech-gradient-text">资讯</span>
|
||||
</h2>
|
||||
<p className="text-lg text-[#4A4A4A]">
|
||||
<p className="text-lg text-gray-600 dark:text-gray-400">
|
||||
了解公司最新动态、行业资讯和技术分享
|
||||
</p>
|
||||
</motion.div>
|
||||
@@ -39,26 +39,26 @@ export function NewsSection() {
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.5, delay: 0.1 + idx * 0.1 }}
|
||||
>
|
||||
<Card className="h-full flex flex-col border-[#E8E0E0] bg-white hover:border-[#C41E3A]/30 hover:shadow-lg hover:shadow-[#C41E3A]/5 transition-all duration-300 hover:-translate-y-1 group">
|
||||
<Card className="h-full flex flex-col group cursor-pointer">
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<span className="inline-block px-2 py-0.5 rounded-full bg-[#FEF2F4] text-[#C41E3A] text-xs font-medium">
|
||||
<span className="inline-block px-2 py-0.5 rounded-full bg-[var(--color-tech-cyan)]/10 text-[var(--color-tech-cyan)] text-xs font-medium">
|
||||
{news.category}
|
||||
</span>
|
||||
<span className="text-sm text-[#8A8A8A] flex items-center gap-1">
|
||||
<span className="text-sm text-gray-500 dark:text-gray-500 flex items-center gap-1">
|
||||
<Calendar className="w-3 h-3" />
|
||||
{news.date}
|
||||
</span>
|
||||
</div>
|
||||
<CardTitle className="text-xl leading-tight text-[#1A1A1A]">{news.title}</CardTitle>
|
||||
<CardTitle className="text-xl leading-tight">{news.title}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="flex-1 flex flex-col">
|
||||
<CardDescription className="text-base leading-relaxed mb-6 flex-1 text-[#6B6B6B]">
|
||||
<CardDescription className="text-base leading-relaxed mb-6 flex-1">
|
||||
{news.excerpt}
|
||||
</CardDescription>
|
||||
<a
|
||||
href={`/news/${news.id}`}
|
||||
className="inline-flex items-center text-sm font-medium text-[#C41E3A] hover:text-[#A01830] transition-colors group/link"
|
||||
className="inline-flex items-center text-sm font-medium text-[var(--color-tech-blue)] hover:text-[var(--color-tech-purple)] transition-colors group/link"
|
||||
>
|
||||
阅读更多
|
||||
<ArrowRight className="ml-1 w-4 h-4 transition-transform group-hover/link:translate-x-1" />
|
||||
@@ -80,7 +80,7 @@ export function NewsSection() {
|
||||
onClick={() => {
|
||||
alert('更多新闻功能开发中...');
|
||||
}}
|
||||
className="inline-flex items-center text-sm font-medium text-[#C41E3A] hover:text-[#A01830] transition-colors bg-transparent border-none cursor-pointer group"
|
||||
className="inline-flex items-center text-sm font-medium text-[var(--color-tech-blue)] hover:text-[var(--color-tech-purple)] transition-colors bg-transparent border-none cursor-pointer group"
|
||||
>
|
||||
查看全部新闻
|
||||
<ArrowRight className="ml-1 w-4 h-4 transition-transform group-hover:translate-x-1" />
|
||||
|
||||
@@ -14,7 +14,7 @@ export function ProductsSection() {
|
||||
const isInView = useInView(ref, { once: true, margin: '-100px' });
|
||||
|
||||
return (
|
||||
<section id="products" className="py-24 bg-[var(--color-bg-primary)]" ref={ref}>
|
||||
<section id="products" className="py-24 bg-white dark:bg-[var(--color-bg-primary)]" ref={ref}>
|
||||
<div className="container-custom">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
@@ -25,10 +25,10 @@ export function ProductsSection() {
|
||||
<span className="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-[var(--color-tech-purple)]/30 bg-[var(--color-tech-purple)]/5 text-[var(--color-tech-purple)] text-sm font-medium mb-4">
|
||||
产品服务
|
||||
</span>
|
||||
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-white mb-6">
|
||||
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-6">
|
||||
我们的<span className="tech-gradient-text">产品</span>
|
||||
</h2>
|
||||
<p className="text-lg text-gray-400">
|
||||
<p className="text-lg text-gray-600 dark:text-gray-400">
|
||||
自主研发的企业级产品，助力企业高效运营，实现数字化转型
|
||||
</p>
|
||||
</motion.div>
|
||||
@@ -54,12 +54,12 @@ export function ProductsSection() {
|
||||
</CardDescription>
|
||||
|
||||
<div className="mb-4">
|
||||
<p className="text-sm font-medium text-white mb-2">核心功能</p>
|
||||
<p className="text-sm font-medium text-gray-900 dark:text-white mb-2">核心功能</p>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{product.features.slice(0, 4).map((feature, idx) => (
|
||||
<span
|
||||
key={idx}
|
||||
className="inline-flex items-center text-xs px-2 py-1 bg-[var(--color-bg-tertiary)] text-gray-300 rounded border border-gray-700"
|
||||
className="inline-flex items-center text-xs px-2 py-1 bg-gray-100 dark:bg-[var(--color-bg-tertiary)] text-gray-700 dark:text-gray-300 rounded border border-gray-200 dark:border-gray-700"
|
||||
>
|
||||
<Check className="w-3 h-3 mr-1 text-[var(--color-tech-blue)]" />
|
||||
{feature}
|
||||
@@ -69,13 +69,13 @@ export function ProductsSection() {
|
||||
</div>
|
||||
|
||||
<div className="mb-4">
|
||||
<p className="text-sm font-medium text-white mb-2 flex items-center">
|
||||
<p className="text-sm font-medium text-gray-900 dark:text-white mb-2 flex items-center">
|
||||
<TrendingUp className="w-4 h-4 mr-1 text-[var(--color-tech-blue)]" />
|
||||
核心价值
|
||||
</p>
|
||||
<ul className="space-y-1">
|
||||
{product.benefits.map((benefit, idx) => (
|
||||
<li key={idx} className="text-xs text-gray-400 flex items-start">
|
||||
<li key={idx} className="text-xs text-gray-600 dark:text-gray-400 flex items-start">
|
||||
<span className="text-[var(--color-tech-blue)] mr-1.5">•</span>
|
||||
{benefit}
|
||||
</li>
|
||||
@@ -99,16 +99,16 @@ export function ProductsSection() {
|
||||
transition={{ duration: 0.6, delay: 0.5 }}
|
||||
className="mt-20 text-center"
|
||||
>
|
||||
<div className="bg-gradient-to-r from-[var(--color-bg-secondary)] to-[var(--color-bg-tertiary)] rounded-2xl p-12 border border-gray-800 relative overflow-hidden">
|
||||
<div className="bg-gradient-to-r from-gray-100 to-gray-200 dark:from-[var(--color-bg-secondary)] dark:to-[var(--color-bg-tertiary)] rounded-2xl p-12 border border-gray-200 dark:border-gray-800 relative overflow-hidden">
|
||||
<div className="absolute inset-0 pointer-events-none">
|
||||
<div className="absolute top-0 right-0 w-64 h-64 bg-[var(--color-tech-blue)]/5 rounded-full blur-3xl" />
|
||||
<div className="absolute bottom-0 left-0 w-48 h-48 bg-[var(--color-tech-purple)]/5 rounded-full blur-3xl" />
|
||||
</div>
|
||||
<div className="relative z-10">
|
||||
<h3 className="text-2xl sm:text-3xl font-bold text-white mb-4">
|
||||
<h3 className="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
需要定制化解决方案？
|
||||
</h3>
|
||||
<p className="text-gray-400 mb-8 max-w-2xl mx-auto">
|
||||
<p className="text-gray-600 dark:text-gray-400 mb-8 max-w-2xl mx-auto">
|
||||
我们的专业团队可以根据您的业务需求，提供量身定制的产品开发和系统集成服务
|
||||
</p>
|
||||
<Button size="lg">
|
||||
|
||||
@@ -20,7 +20,7 @@ export function ServicesSection() {
|
||||
const isInView = useInView(ref, { once: true, margin: '-100px' });
|
||||
|
||||
return (
|
||||
<section id="services" className="py-24 bg-[var(--color-bg-secondary)]" ref={ref}>
|
||||
<section id="services" className="py-24 bg-gray-50 dark:bg-[var(--color-bg-secondary)]" ref={ref}>
|
||||
<div className="container-custom">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
@@ -31,10 +31,10 @@ export function ServicesSection() {
|
||||
<span className="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-[var(--color-tech-blue)]/30 bg-[var(--color-tech-blue)]/5 text-[var(--color-tech-blue)] text-sm font-medium mb-4">
|
||||
核心业务
|
||||
</span>
|
||||
<h2 className="text-3xl sm:text-4xl font-bold text-white mb-4">
|
||||
<h2 className="text-3xl sm:text-4xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
专业服务，<span className="tech-gradient-text">助力发展</span>
|
||||
</h2>
|
||||
<p className="text-lg text-gray-400">
|
||||
<p className="text-lg text-gray-600 dark:text-gray-400">
|
||||
我们提供全方位的技术解决方案，帮助企业实现数字化转型
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
@@ -15,9 +15,9 @@ const buttonVariants = cva(
|
||||
outline:
|
||||
"border border-[var(--color-tech-blue)] bg-transparent text-[var(--color-tech-blue)] hover:bg-[var(--color-tech-blue)]/10 hover:shadow-lg hover:shadow-[var(--color-tech-blue)]/20",
|
||||
secondary:
|
||||
"bg-[var(--color-bg-tertiary)] text-white border border-gray-700 hover:border-[var(--color-tech-blue)] hover:shadow-lg hover:shadow-[var(--color-tech-blue)]/20 hover:scale-105 active:scale-95",
|
||||
"bg-gray-100 dark:bg-[var(--color-bg-tertiary)] text-gray-900 dark:text-white border border-gray-200 dark:border-gray-700 hover:border-[var(--color-tech-blue)] hover:shadow-lg hover:shadow-[var(--color-tech-blue)]/20 hover:scale-105 active:scale-95",
|
||||
ghost:
|
||||
"text-gray-300 hover:text-[var(--color-tech-blue)] hover:bg-[var(--color-bg-tertiary)]",
|
||||
"text-gray-600 dark:text-gray-300 hover:text-[var(--color-tech-blue)] hover:bg-gray-100 dark:hover:bg-[var(--color-bg-tertiary)]",
|
||||
link: "text-[var(--color-tech-blue)] underline-offset-4 hover:underline",
|
||||
},
|
||||
size: {
|
||||
|
||||
@@ -7,7 +7,7 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
|
||||
<div
|
||||
data-slot="card"
|
||||
className={cn(
|
||||
"bg-[var(--color-bg-secondary)] text-white flex flex-col gap-6 rounded-xl border border-gray-800 py-6 shadow-lg transition-all duration-300 hover:border-[var(--color-tech-blue)] hover:shadow-[var(--color-tech-blue)]/20",
|
||||
"bg-white dark:bg-[var(--color-bg-secondary)] text-gray-900 dark:text-white flex flex-col gap-6 rounded-xl border border-gray-200 dark:border-gray-800 py-6 shadow-lg transition-all duration-300 hover:border-[var(--color-tech-blue)] hover:shadow-[var(--color-tech-blue)]/20",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
@@ -32,7 +32,7 @@ function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-title"
|
||||
className={cn("leading-none font-semibold text-white", className)}
|
||||
className={cn("leading-none font-semibold text-gray-900 dark:text-white", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
@@ -42,7 +42,7 @@ function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-description"
|
||||
className={cn("text-gray-400 text-sm", className)}
|
||||
className={cn("text-gray-600 dark:text-gray-400 text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
@@ -75,7 +75,7 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-footer"
|
||||
className={cn("flex items-center px-6 [.border-t]:pt-6 border-t border-gray-800", className)}
|
||||
className={cn("flex items-center px-6 [.border-t]:pt-6 border-t border-gray-200 dark:border-gray-800", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user