feat(marketing): 重构营销页面与四层叙事组件体系
- 重构 About、Contact、Team 等静态营销页面 - 重构 News 新闻列表与详情页 - 重构 Products 产品目录、详情与独立产品页面 - 重构 Services 与 Solutions 服务/解决方案页面 - 重构 Detail 四层叙事组件 (Hero → Value → Trust → CTA) - 重构 Sections 页面区块组件 (Hero, CTA, SocialProof, WhyUs 等) - 新增 SectionHeader、ServiceCard、CaseCard 等可复用组件
This commit is contained in:
张翔
@@ -0,0 +1,221 @@
|
||||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import {
|
||||
CheckCircle2,
|
||||
Lightbulb,
|
||||
Target,
|
||||
TrendingUp,
|
||||
} from 'lucide-react';
|
||||
import { TiltCard } from './micro-interactions';
|
||||
import { SectionHeader, InkDivider } from './brand-elements';
|
||||
import type { Solution } from '@/lib/constants/solutions';
|
||||
|
||||
interface SolutionValueSectionProps {
|
||||
solution: Solution;
|
||||
}
|
||||
|
||||
export function SolutionValueSection({ solution }: SolutionValueSectionProps) {
|
||||
return (
|
||||
<section className="relative bg-white py-24 lg:py-32 overflow-hidden">
|
||||
<div className="container-wide relative">
|
||||
<SectionHeader
|
||||
badge="解决方案"
|
||||
title={
|
||||
<>
|
||||
为<span className="text-brand">{solution.industry}</span>量身定制
|
||||
</>
|
||||
}
|
||||
subtitle={solution.description}
|
||||
icon={Lightbulb}
|
||||
/>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-10 mt-16">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -30 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true, margin: '-80px' }}
|
||||
transition={{ duration: 0.7, ease: [0.22, 1, 0.36, 1] as const }}
|
||||
>
|
||||
<div className="bg-brand-soft/30 rounded-2xl p-8 border border-brand/20">
|
||||
<h3 className="text-xl font-bold text-ink mb-6 flex items-center gap-3">
|
||||
<span className="w-10 h-10 rounded-xl bg-brand flex items-center justify-center">
|
||||
<Target className="w-5 h-5 text-white" />
|
||||
</span>
|
||||
行业痛点挑战
|
||||
</h3>
|
||||
|
||||
<ul className="space-y-4">
|
||||
{solution.challenges.map((challenge, index) => (
|
||||
<motion.li
|
||||
key={index}
|
||||
initial={{ opacity: 0, y: 15 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{
|
||||
delay: index * 0.08,
|
||||
duration: 0.45,
|
||||
ease: [0.22, 1, 0.36, 1] as const,
|
||||
}}
|
||||
className="flex items-start gap-3 text-text-secondary"
|
||||
>
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-brand mt-2 shrink-0" />
|
||||
<span className="text-sm leading-relaxed">{challenge}</span>
|
||||
</motion.li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 30 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true, margin: '-80px' }}
|
||||
transition={{ duration: 0.7, delay: 0.15, ease: [0.22, 1, 0.36, 1] as const }}
|
||||
>
|
||||
<div className="bg-blue-50/50 rounded-2xl p-8 border border-blue-100/60">
|
||||
<h3 className="text-xl font-bold text-ink mb-6 flex items-center gap-3">
|
||||
<span className="w-10 h-10 rounded-xl bg-blue-600 flex items-center justify-center">
|
||||
<Lightbulb className="w-5 h-5 text-white" />
|
||||
</span>
|
||||
睿新致远解决方案
|
||||
</h3>
|
||||
|
||||
<ul className="space-y-4">
|
||||
{solution.solutions.map((solutionItem, index) => (
|
||||
<motion.li
|
||||
key={index}
|
||||
initial={{ opacity: 0, y: 15 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{
|
||||
delay: 0.25 + index * 0.08,
|
||||
duration: 0.45,
|
||||
ease: [0.22, 1, 0.36, 1] as const,
|
||||
}}
|
||||
className="flex items-start gap-3 text-text-secondary"
|
||||
>
|
||||
<CheckCircle2 className="w-4.5 h-4.5 text-blue-600 mt-0.5 shrink-0" />
|
||||
<span className="text-sm leading-relaxed">{solutionItem}</span>
|
||||
</motion.li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{solution.valueProposition && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 32 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-80px' }}
|
||||
transition={{ duration: 0.75, delay: 0.3 }}
|
||||
className="mt-20"
|
||||
>
|
||||
<InkDivider variant="decorative" />
|
||||
|
||||
<div className="text-center mb-12">
|
||||
<h3 className="text-2xl md:text-3xl font-bold tracking-tight text-ink">
|
||||
{solution.valueProposition.headline}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-7">
|
||||
{solution.valueProposition.points.map((point, index) => (
|
||||
<TiltCard
|
||||
key={index}
|
||||
tiltAmount={6}
|
||||
className="p-7 rounded-2xl bg-white border border-border-primary hover:border-blue-200 hover:shadow-md transition-shadow"
|
||||
>
|
||||
<div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center mb-5 shadow-md shadow-blue-500/20">
|
||||
<TrendingUp className="w-7 h-7 text-white" />
|
||||
</div>
|
||||
<h4 className="text-lg font-bold text-ink mb-2">{point.title}</h4>
|
||||
<p className="text-sm text-text-secondary leading-relaxed">{point.description}</p>
|
||||
</TiltCard>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{solution.suiteCombination && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 32 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-80px' }}
|
||||
transition={{ duration: 0.75, delay: 0.4 }}
|
||||
className="mt-20"
|
||||
>
|
||||
<InkDivider variant="subtle" />
|
||||
|
||||
<div className="bg-bg-secondary rounded-2xl p-10 border border-border-primary">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-10">
|
||||
<div>
|
||||
<h4 className="text-lg font-bold text-ink mb-5 flex items-center gap-2.5">
|
||||
<span className="w-8 h-8 rounded-lg bg-brand flex items-center justify-center">
|
||||
<span className="text-white text-xs font-bold">核</span>
|
||||
</span>
|
||||
核心产品组合
|
||||
</h4>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{solution.suiteCombination.primaryProducts.map((product, index) => (
|
||||
<motion.span
|
||||
key={product}
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{
|
||||
delay: 0.5 + index * 0.06,
|
||||
duration: 0.35,
|
||||
}}
|
||||
className="px-5 py-2.5 bg-brand-soft/50 text-brand text-sm font-semibold rounded-xl border border-brand/20"
|
||||
>
|
||||
{product}
|
||||
</motion.span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-lg font-bold text-ink mb-5 flex items-center gap-2.5">
|
||||
<span className="w-8 h-8 rounded-lg bg-blue-600 flex items-center justify-center">
|
||||
<span className="text-white text-xs font-bold">配</span>
|
||||
</span>
|
||||
配套专业服务
|
||||
</h4>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{solution.suiteCombination.complementaryServices.map((service, index) => (
|
||||
<motion.span
|
||||
key={service}
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{
|
||||
delay: 0.65 + index * 0.06,
|
||||
duration: 0.35,
|
||||
}}
|
||||
className="px-5 py-2.5 bg-blue-50/80 text-blue-700 text-sm font-semibold rounded-xl border border-blue-200"
|
||||
>
|
||||
{service}
|
||||
</motion.span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<motion.p
|
||||
initial={{ opacity: 0 }}
|
||||
whileInView={{ opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.85, duration: 0.55 }}
|
||||
className="mt-8 p-5 bg-white rounded-xl text-sm text-text-secondary leading-relaxed border border-border-primary"
|
||||
>
|
||||
<strong className="text-ink">组合逻辑：</strong>{solution.suiteCombination.rationale}
|
||||
</motion.p>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user