refactor: 重构所有 Section 组件为医疗健康风格
- ProductsSection: 浅灰背景、蓝红配色 - AboutSection: 白色背景、专业蓝图标 - NewsSection: 浅灰背景、蓝红强调 - ContactSection: 白色背景、蓝图标、红强调
This commit is contained in:
张翔
@@ -14,21 +14,23 @@ export function ProductsSection() {
|
||||
const isInView = useInView(ref, { once: true, margin: '-100px' });
|
||||
|
||||
return (
|
||||
<section id="products" className="py-24 bg-white dark:bg-[var(--color-bg-primary)]" ref={ref}>
|
||||
<div className="container-custom">
|
||||
<section id="products" className="py-24 bg-[#F5F7FA] relative overflow-hidden" ref={ref}>
|
||||
<div className="absolute top-1/2 left-0 w-[400px] h-[400px] bg-[rgba(0,94,184,0.03)] rounded-full blur-3xl" />
|
||||
<div className="absolute top-1/3 right-0 w-[300px] h-[300px] bg-[rgba(196,30,58,0.02)] rounded-full blur-3xl" />
|
||||
<div className="container-wide relative z-10">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="text-center max-w-3xl mx-auto mb-16"
|
||||
>
|
||||
<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 className="inline-flex items-center gap-2 px-5 py-2.5 rounded-full border border-[#005EB8]/30 bg-[#E8F4FD] text-[#005EB8] text-sm font-medium mb-4">
|
||||
产品服务
|
||||
</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 className="text-4xl md:text-5xl font-bold text-[#1A1A2E] mb-6">
|
||||
我们的<span className="text-[#C41E3A]">产品</span>
|
||||
</h2>
|
||||
<p className="text-lg text-gray-600 dark:text-gray-400">
|
||||
<p className="text-lg text-[#718096]">
|
||||
自主研发的企业级产品，助力企业高效运营，实现数字化转型
|
||||
</p>
|
||||
</motion.div>
|
||||
@@ -41,7 +43,7 @@ export function ProductsSection() {
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.5, delay: 0.1 + idx * 0.1 }}
|
||||
>
|
||||
<Card className="h-full flex flex-col group cursor-pointer">
|
||||
<Card className="h-full flex flex-col group cursor-pointer border-[#E2E8F0] hover:border-[#005EB8]">
|
||||
<CardHeader>
|
||||
<Badge variant="secondary" className="w-fit mb-3">
|
||||
{product.category}
|
||||
@@ -54,14 +56,14 @@ export function ProductsSection() {
|
||||
</CardDescription>
|
||||
|
||||
<div className="mb-4">
|
||||
<p className="text-sm font-medium text-gray-900 dark:text-white mb-2">核心功能</p>
|
||||
<p className="text-sm font-medium text-[#1A1A2E] 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-gray-100 dark:bg-[var(--color-bg-tertiary)] text-gray-700 dark:text-gray-300 rounded border border-gray-200 dark:border-gray-700"
|
||||
className="inline-flex items-center text-xs px-2 py-1 bg-white text-[#4A5568] rounded border border-[#E2E8F0]"
|
||||
>
|
||||
<Check className="w-3 h-3 mr-1 text-[var(--color-tech-blue)]" />
|
||||
<Check className="w-3 h-3 mr-1 text-[#005EB8]" />
|
||||
{feature}
|
||||
</span>
|
||||
))}
|
||||
@@ -69,14 +71,14 @@ export function ProductsSection() {
|
||||
</div>
|
||||
|
||||
<div className="mb-4">
|
||||
<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 className="text-sm font-medium text-[#1A1A2E] mb-2 flex items-center">
|
||||
<TrendingUp className="w-4 h-4 mr-1 text-[#C41E3A]" />
|
||||
核心价值
|
||||
</p>
|
||||
<ul className="space-y-1">
|
||||
{product.benefits.map((benefit, idx) => (
|
||||
<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>
|
||||
<li key={idx} className="text-xs text-[#718096] flex items-start">
|
||||
<span className="text-[#005EB8] mr-1.5">•</span>
|
||||
{benefit}
|
||||
</li>
|
||||
))}
|
||||
@@ -99,16 +101,16 @@ export function ProductsSection() {
|
||||
transition={{ duration: 0.6, delay: 0.5 }}
|
||||
className="mt-20 text-center"
|
||||
>
|
||||
<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="bg-white rounded-2xl p-12 border border-[#E2E8F0] 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 className="absolute top-0 right-0 w-64 h-64 bg-[rgba(0,94,184,0.03)] rounded-full blur-3xl" />
|
||||
<div className="absolute bottom-0 left-0 w-48 h-48 bg-[rgba(196,30,58,0.02)] rounded-full blur-3xl" />
|
||||
</div>
|
||||
<div className="relative z-10">
|
||||
<h3 className="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
<h3 className="text-2xl sm:text-3xl font-bold text-[#1A1A2E] mb-4">
|
||||
需要定制化解决方案？
|
||||
</h3>
|
||||
<p className="text-gray-600 dark:text-gray-400 mb-8 max-w-2xl mx-auto">
|
||||
<p className="text-[#718096] mb-8 max-w-2xl mx-auto">
|
||||
我们的专业团队可以根据您的业务需求，提供量身定制的产品开发和系统集成服务
|
||||
</p>
|
||||
<Button size="lg">
|
||||
|
||||
Reference in New Issue
Block a user