张翔
f7024b1cf4
- 更新 globals.css 全局样式 - 优化 not-found 404 页面 - 升级 footer, mega-dropdown, mobile-tab-bar 布局组件 - 改进 challenge, cta, hero 等核心 section 组件 - 优化 challenge-card, ink-glow-card, product-card 等 UI 组件 - 更新产品常量配置
76 lines
3.1 KiB
TypeScript
76 lines
3.1 KiB
TypeScript
'use client';
|
|
|
|
import { motion } from 'framer-motion';
|
|
import { Shield, Users, Cpu, Handshake } from 'lucide-react';
|
|
import { useReducedMotion } from '@/hooks/use-reduced-motion';
|
|
|
|
const TRUST_PILLARS = [
|
|
{
|
|
icon: Shield,
|
|
title: '私有化部署',
|
|
description: '数据不出企业，满足安全合规与数据主权要求',
|
|
},
|
|
{
|
|
icon: Users,
|
|
title: '资深团队',
|
|
description: '核心成员来自大型 IT 企业，具备扎实的工程能力与规范化交付经验',
|
|
},
|
|
{
|
|
icon: Cpu,
|
|
title: '全栈自研',
|
|
description: '6 款产品自主研发中，覆盖 ERP、CRM、BI 等企业核心场景',
|
|
},
|
|
{
|
|
icon: Handshake,
|
|
title: '长期陪跑',
|
|
description: '不做完就跑，从需求理解到产品打磨，持续陪伴客户成长',
|
|
},
|
|
];
|
|
|
|
export function SocialProofSection() {
|
|
const shouldReduceMotion = useReducedMotion();
|
|
|
|
return (
|
|
<section id="social-proof" role="region" aria-labelledby="social-proof-heading" className="py-12 md:py-16 lg:py-20 bg-[var(--color-bg-section)]">
|
|
<div className="container-wide">
|
|
<motion.div
|
|
initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true, margin: '-100px' }}
|
|
transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
|
|
className="text-center max-w-3xl mx-auto mb-14"
|
|
>
|
|
<h2 id="social-proof-heading" className="text-3xl sm:text-4xl font-semibold text-[var(--color-text-primary)] mb-4">
|
|
值得信赖
|
|
</h2>
|
|
<p className="text-base text-[var(--color-text-muted)]">
|
|
用心打磨产品，以专业赢得信赖
|
|
</p>
|
|
</motion.div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8">
|
|
{TRUST_PILLARS.map((pillar, idx) => {
|
|
const Icon = pillar.icon;
|
|
return (
|
|
<motion.div
|
|
key={pillar.title}
|
|
initial={shouldReduceMotion ? {} : { opacity: 0, y: 24, scale: 0.94 }}
|
|
whileInView={{ opacity: 1, y: 0, scale: 1 }}
|
|
viewport={{ once: true, margin: '-60px' }}
|
|
transition={{ duration: 0.5, delay: idx * 0.1 + 0.05, ease: [0.16, 1, 0.3, 1] }}
|
|
className="text-center p-6 md:p-8 rounded-xl bg-[var(--color-bg-primary)] border border-[var(--color-border-primary)] hover:border-[rgba(var(--color-brand-primary-rgb),0.3)] transition-colors duration-300"
|
|
>
|
|
<div className="w-12 h-12 rounded-xl bg-[var(--color-brand-primary)]/5 flex items-center justify-center mx-auto mb-4">
|
|
<Icon className="w-5 h-5 text-[var(--color-brand-primary)]" strokeWidth={1.8} />
|
|
</div>
|
|
<h3 className="text-base font-semibold text-[var(--color-text-primary)] mb-2">{pillar.title}</h3>
|
|
<p className="text-sm text-[var(--color-text-muted)] leading-relaxed">{pillar.description}</p>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|