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

refactor: 重构所有 Section 组件为医疗健康风格

Browse Source 
- ProductsSection: 浅灰背景、蓝红配色
- AboutSection: 白色背景、专业蓝图标
- NewsSection: 浅灰背景、蓝红强调
- ContactSection: 白色背景、蓝图标、红强调
This commit is contained in:
张翔
2026-02-23 08:11:11 +08:00
parent 064f6b9e83
commit ef4b6d1022
4 changed files with 87 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/sections/contact-section.tsx
+32 -32
View File
@@ -103,9 +103,9 @@ export function ContactSection() {
}
return (
<section id="contact" className="section-padding relative bg-gray-50 dark:bg-[var(--color-bg-secondary)]" ref={sectionRef}>
<section id="contact" className="section-padding relative bg-white overflow-hidden" 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-[var(--color-tech-blue)]/3 to-transparent rounded-full blur-3xl -translate-x-1/2 translate-y-1/2" />
<div className="absolute inset-0 bg-gradient-radial from-[rgba(0,94,184,0.03)] via-transparent to-transparent" />
</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-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 className="w-8 h-px bg-gradient-to-r from-[#005EB8] to-[#C41E3A]" />
<span className="text-sm text-[#718096] tracking-wide">联系我们</span>
</div>
<h2 className="text-3xl sm:text-4xl font-semibold text-gray-900 dark:text-white tracking-tight chapter-title">
开启合作
<h2 className="text-4xl md:text-5xl font-bold text-[#1A1A2E] mb-4">
开启 <span className="text-[#C41E3A]">合作</span>
</h2>
<p className="mt-4 text-gray-600 dark:text-gray-400 max-w-2xl">
<p className="mt-4 text-[#718096] max-w-2xl">
无论您有任何问题或合作意向，我们都很乐意与您交流
</p>
</div>
@@ -136,72 +136,72 @@ export function ContactSection() {
`}
>
<div>
<h3 className="text-lg font-semibold text-[#171717] mb-6">联系方式</h3>
<h3 className="text-lg font-semibold text-[#1A1A2E] mb-6">联系方式</h3>
<div className="space-y-4">
<div className="flex items-start gap-4 group">
<div className="w-10 h-10 bg-[#C41E3A] rounded-md flex items-center justify-center flex-shrink-0 transition-transform duration-200 group-hover:scale-105">
<div className="w-10 h-10 bg-[#005EB8] rounded-md flex items-center justify-center flex-shrink-0 transition-transform duration-200 group-hover:scale-105">
<Mail className="w-5 h-5 text-white" />
</div>
<div>
<p className="text-sm text-[#737373] mb-1">邮箱</p>
<a href={`mailto:${COMPANY_INFO.email}`} className="text-[#171717] hover:text-[#C41E3A] transition-colors duration-200">
<p className="text-sm text-[#718096] mb-1">邮箱</p>
<a href={`mailto:${COMPANY_INFO.email}`} className="text-[#1A1A2E] hover:text-[#005EB8] transition-colors duration-200">
{COMPANY_INFO.email}
</a>
</div>
</div>
<div className="flex items-start gap-4 group">
<div className="w-10 h-10 bg-[#C41E3A] rounded-md flex items-center justify-center flex-shrink-0 transition-transform duration-200 group-hover:scale-105">
<div className="w-10 h-10 bg-[#005EB8] rounded-md flex items-center justify-center flex-shrink-0 transition-transform duration-200 group-hover:scale-105">
<Phone className="w-5 h-5 text-white" />
</div>
<div>
<p className="text-sm text-[#737373] mb-1">电话</p>
<a href={`tel:${COMPANY_INFO.phone}`} className="text-[#171717] hover:text-[#C41E3A] transition-colors duration-200">
<p className="text-sm text-[#718096] mb-1">电话</p>
<a href={`tel:${COMPANY_INFO.phone}`} className="text-[#1A1A2E] hover:text-[#005EB8] transition-colors duration-200">
{COMPANY_INFO.phone}
</a>
</div>
</div>
<div className="flex items-start gap-4 group">
<div className="w-10 h-10 bg-[#C41E3A] rounded-md flex items-center justify-center flex-shrink-0 transition-transform duration-200 group-hover:scale-105">
<div className="w-10 h-10 bg-[#005EB8] rounded-md flex items-center justify-center flex-shrink-0 transition-transform duration-200 group-hover:scale-105">
<MapPin className="w-5 h-5 text-white" />
</div>
<div>
<p className="text-sm text-[#737373] mb-1">地址</p>
<p className="text-[#171717]">{COMPANY_INFO.address}</p>
<p className="text-sm text-[#718096] mb-1">地址</p>
<p className="text-[#1A1A2E]">{COMPANY_INFO.address}</p>
</div>
</div>
</div>
</div>
<div className="geometric-card p-5 rounded-lg">
<div className="bg-[#F5F7FA] p-5 rounded-lg border border-[#E2E8F0]">
<div className="flex items-center gap-2 mb-3">
<Clock className="w-4 h-4 text-[#C41E3A]" />
<h4 className="text-sm font-medium text-[#171717]">工作时间</h4>
<Clock className="w-4 h-4 text-[#005EB8]" />
<h4 className="text-sm font-medium text-[#1A1A2E]">工作时间</h4>
</div>
<div className="space-y-1">
<div className="flex justify-between text-sm">
<span className="text-[#737373]">周一至周五</span>
<span className="text-[#C41E3A]">9:00 - 18:00</span>
<span className="text-[#718096]">周一至周五</span>
<span className="text-[#005EB8]">9:00 - 18:00</span>
</div>
</div>
</div>
<div className="geometric-card p-5 rounded-lg">
<div className="bg-[#F5F7FA] p-5 rounded-lg border border-[#E2E8F0]">
<div className="flex items-center gap-2 mb-3">
<HeadphonesIcon className="w-4 h-4 text-[#C41E3A]" />
<h4 className="text-sm font-medium text-[#171717]">我们的承诺</h4>
<HeadphonesIcon className="w-4 h-4 text-[#005EB8]" />
<h4 className="text-sm font-medium text-[#1A1A2E]">我们的承诺</h4>
</div>
<div className="space-y-3">
<div className="flex items-start gap-2">
<div className="w-1.5 h-1.5 bg-[#C41E3A] rounded-full mt-2 flex-shrink-0" />
<p className="text-sm text-[#737373]">工作日 2 小时内快速响应您的咨询</p>
<p className="text-sm text-[#718096]">工作日 2 小时内快速响应您的咨询</p>
</div>
<div className="flex items-start gap-2">
<div className="w-1.5 h-1.5 bg-[#C41E3A] rounded-full mt-2 flex-shrink-0" />
<p className="text-sm text-[#737373]">提供免费的业务咨询和方案评估服务</p>
<p className="text-sm text-[#718096]">提供免费的业务咨询和方案评估服务</p>
</div>
<div className="flex items-start gap-2">
<div className="w-1.5 h-1.5 bg-[#C41E3A] rounded-full mt-2 flex-shrink-0" />
<p className="text-sm text-[#737373]">根据您的需求量身定制最优解决方案</p>
<p className="text-sm text-[#718096]">根据您的需求量身定制最优解决方案</p>
</div>
</div>
</div>
@@ -214,16 +214,16 @@ export function ContactSection() {
${isVisible ? 'animate-fade-in-up stagger-2' : ''}
`}
>
<div className="geometric-card p-6 sm:p-8 rounded-lg">
<h3 className="text-lg font-semibold text-[#171717] mb-6">发送消息</h3>
<div className="bg-[#F5F7FA] p-6 sm:p-8 rounded-lg border border-[#E2E8F0]">
<h3 className="text-lg font-semibold text-[#1A1A2E] mb-6">发送消息</h3>
{isSubmitted ? (
<div className="text-center py-12">
<div className="w-16 h-16 bg-[#C41E3A] rounded-full flex items-center justify-center mx-auto mb-4 animate-stamp-in">
<CheckCircle2 className="w-8 h-8 text-white" />
</div>
<h4 className="text-xl font-semibold text-[#171717] mb-2">消息已发送</h4>
<p className="text-[#737373]">感谢您的留言，我们会尽快与您联系！</p>
<h4 className="text-xl font-semibold text-[#1A1A2E] mb-2">消息已发送</h4>
<p className="text-[#718096]">感谢您的留言，我们会尽快与您联系！</p>
</div>
) : (
<form onSubmit={handleSubmit} className="space-y-5">