style(ui组件): 更新UI组件颜色方案为深色主题
refactor(card): 调整卡片背景色和边框颜色 refactor(badge): 修改徽章颜色变体 refactor(button): 更新按钮颜色样式 refactor(input): 调整输入框颜色方案 refactor(textarea): 修改文本区域颜色样式 refactor(header): 更新导航栏颜色 refactor(hero-section): 调整英雄区域颜色和渐变
This commit is contained in:
@@ -105,7 +105,7 @@ export function ContactSection() {
|
||||
return (
|
||||
<section id="contact" className="section-padding relative bg-white overflow-hidden" ref={sectionRef}>
|
||||
<div className="absolute inset-0 pointer-events-none">
|
||||
<div className="absolute inset-0 bg-gradient-radial from-[rgba(0,94,184,0.03)] via-transparent to-transparent" />
|
||||
<div className="absolute inset-0 bg-gradient-radial from-[rgba(79,70,229,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-[#005EB8] to-[#C41E3A]" />
|
||||
<span className="text-sm text-[#718096] tracking-wide">联系我们</span>
|
||||
<div className="w-8 h-px bg-gradient-to-r from-[#1C1C1C] to-[#C41E3A]" />
|
||||
<span className="text-sm text-[#5C5C5C] tracking-wide">联系我们</span>
|
||||
</div>
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-[#1A1A2E] mb-4">
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-4">
|
||||
开启 <span className="text-[#C41E3A]">合作</span>
|
||||
</h2>
|
||||
<p className="mt-4 text-[#718096] max-w-2xl">
|
||||
<p className="mt-4 text-[#5C5C5C] max-w-2xl">
|
||||
无论您有任何问题或合作意向,我们都很乐意与您交流
|
||||
</p>
|
||||
</div>
|
||||
@@ -136,72 +136,72 @@ export function ContactSection() {
|
||||
`}
|
||||
>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-[#1A1A2E] mb-6">联系方式</h3>
|
||||
<h3 className="text-lg font-semibold text-[#1C1C1C] mb-6">联系方式</h3>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-start gap-4 group">
|
||||
<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">
|
||||
<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">
|
||||
<Mail className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<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">
|
||||
<p className="text-sm text-[#5C5C5C] mb-1">邮箱</p>
|
||||
<a href={`mailto:${COMPANY_INFO.email}`} className="text-[#1C1C1C] hover:text-[#C41E3A] 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-[#005EB8] 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-[#C41E3A] 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-[#718096] mb-1">电话</p>
|
||||
<a href={`tel:${COMPANY_INFO.phone}`} className="text-[#1A1A2E] hover:text-[#005EB8] transition-colors duration-200">
|
||||
<p className="text-sm text-[#5C5C5C] mb-1">电话</p>
|
||||
<a href={`tel:${COMPANY_INFO.phone}`} className="text-[#1C1C1C] hover:text-[#C41E3A] 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-[#005EB8] 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-[#C41E3A] 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-[#718096] mb-1">地址</p>
|
||||
<p className="text-[#1A1A2E]">{COMPANY_INFO.address}</p>
|
||||
<p className="text-sm text-[#5C5C5C] mb-1">地址</p>
|
||||
<p className="text-[#1C1C1C]">{COMPANY_INFO.address}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-[#F5F7FA] p-5 rounded-lg border border-[#E2E8F0]">
|
||||
<div className="bg-[#FFFBF5] p-5 rounded-lg border border-[#E5E5E5]">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<Clock className="w-4 h-4 text-[#005EB8]" />
|
||||
<h4 className="text-sm font-medium text-[#1A1A2E]">工作时间</h4>
|
||||
<Clock className="w-4 h-4 text-[#C41E3A]" />
|
||||
<h4 className="text-sm font-medium text-[#1C1C1C]">工作时间</h4>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-[#718096]">周一至周五</span>
|
||||
<span className="text-[#005EB8]">9:00 - 18:00</span>
|
||||
<span className="text-[#5C5C5C]">周一至周五</span>
|
||||
<span className="text-[#C41E3A]">9:00 - 18:00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-[#F5F7FA] p-5 rounded-lg border border-[#E2E8F0]">
|
||||
<div className="bg-[#FFFBF5] p-5 rounded-lg border border-[#E5E5E5]">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<HeadphonesIcon className="w-4 h-4 text-[#005EB8]" />
|
||||
<h4 className="text-sm font-medium text-[#1A1A2E]">我们的承诺</h4>
|
||||
<HeadphonesIcon className="w-4 h-4 text-[#C41E3A]" />
|
||||
<h4 className="text-sm font-medium text-[#1C1C1C]">我们的承诺</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-[#718096]">工作日 2 小时内快速响应您的咨询</p>
|
||||
<p className="text-sm text-[#5C5C5C]">工作日 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-[#718096]">提供免费的业务咨询和方案评估服务</p>
|
||||
<p className="text-sm text-[#5C5C5C]">提供免费的业务咨询和方案评估服务</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-[#718096]">根据您的需求量身定制最优解决方案</p>
|
||||
<p className="text-sm text-[#5C5C5C]">根据您的需求量身定制最优解决方案</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user