feat: V2/V3组件体系与水墨雅致视觉改造
- 新增detail-v2组件库(HeroV2/V3, TrustSectionV2, CTASectionV2等) - Hero组件水墨雅致改造:浅色宣纸底/深色墨色文字/墨韵纹理 - 方案卡片添加推荐组合徽标(Package图标) - 独立产品页从V1组件迁移到V2/V3 - 修复why-us-section未使用导入和ESLint引号转义错误
This commit is contained in:
张翔
@@ -0,0 +1,158 @@
|
||||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import { AlertTriangle, CheckCircle2, ArrowRight, Package, Wrench } from 'lucide-react';
|
||||
import type { Solution } from '@/lib/constants/solutions';
|
||||
import { PRODUCTS } from '@/lib/constants/products';
|
||||
import { SERVICES } from '@/lib/constants/services';
|
||||
|
||||
interface SolutionValueSectionProps {
|
||||
solution: Solution;
|
||||
}
|
||||
|
||||
export function SolutionValueSection({ solution }: SolutionValueSectionProps) {
|
||||
const primaryProducts = solution.suiteCombination.primaryProducts
|
||||
.map((id) => PRODUCTS.find((p) => p.id === id))
|
||||
.filter(Boolean);
|
||||
|
||||
const complementaryServices = solution.suiteCombination.complementaryServices
|
||||
.map((id) => SERVICES.find((s) => s.id === id))
|
||||
.filter(Boolean);
|
||||
|
||||
return (
|
||||
<section className="bg-white py-16 lg:py-20">
|
||||
<div className="container-wide">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="mb-12 text-center"
|
||||
>
|
||||
<h2 className="text-2xl font-bold text-gray-900 lg:text-3xl">
|
||||
{solution.valueProposition.headline}
|
||||
</h2>
|
||||
</motion.div>
|
||||
|
||||
<div className="mb-12 grid grid-cols-1 gap-6 md:grid-cols-3">
|
||||
{solution.valueProposition.points.map((point, index) => (
|
||||
<motion.div
|
||||
key={point.title}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.4, delay: index * 0.1 }}
|
||||
className="rounded-xl border border-gray-100 bg-gray-50/50 p-6 text-center"
|
||||
>
|
||||
<div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-[#C41E3A]/10 text-[#C41E3A]">
|
||||
<span className="text-lg">{point.icon}</span>
|
||||
</div>
|
||||
<h3 className="mb-2 text-base font-semibold text-gray-900">{point.title}</h3>
|
||||
<p className="text-sm leading-relaxed text-gray-600">{point.description}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5 }}
|
||||
>
|
||||
<h3 className="mb-4 flex items-center gap-2 text-lg font-bold text-gray-900">
|
||||
<AlertTriangle className="h-5 w-5 text-orange-500" />
|
||||
行业挑战
|
||||
</h3>
|
||||
<ul className="space-y-3">
|
||||
{solution.challenges.map((challenge, index) => (
|
||||
<motion.li
|
||||
key={challenge}
|
||||
initial={{ opacity: 0, x: -10 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.3, delay: index * 0.05 }}
|
||||
className="flex items-start gap-2 text-sm text-gray-700"
|
||||
>
|
||||
<span className="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-orange-400" />
|
||||
{challenge}
|
||||
</motion.li>
|
||||
))}
|
||||
</ul>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 20 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: 0.15 }}
|
||||
>
|
||||
<h3 className="mb-4 flex items-center gap-2 text-lg font-bold text-gray-900">
|
||||
<CheckCircle2 className="h-5 w-5 text-green-500" />
|
||||
解决方案
|
||||
</h3>
|
||||
<ul className="space-y-3">
|
||||
{solution.solutions.map((sol, index) => (
|
||||
<motion.li
|
||||
key={sol}
|
||||
initial={{ opacity: 0, x: 10 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.3, delay: index * 0.05 }}
|
||||
className="flex items-start gap-2 text-sm text-gray-700"
|
||||
>
|
||||
<CheckCircle2 className="mt-0.5 h-4 w-4 shrink-0 text-green-500" />
|
||||
{sol}
|
||||
</motion.li>
|
||||
))}
|
||||
</ul>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{(primaryProducts.length > 0 || complementaryServices.length > 0) && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: 0.2 }}
|
||||
className="mt-12 rounded-2xl bg-gradient-to-br from-gray-50 to-gray-100 p-8"
|
||||
>
|
||||
<h3 className="mb-2 text-lg font-bold text-gray-900">推荐套装组合</h3>
|
||||
<p className="mb-6 text-sm leading-relaxed text-gray-600">
|
||||
{solution.suiteCombination.rationale}
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-4">
|
||||
{primaryProducts.map((product) =>
|
||||
product ? (
|
||||
<a
|
||||
key={product.id}
|
||||
href={`/products/${product.id}`}
|
||||
className="inline-flex items-center gap-2 rounded-lg border border-blue-200 bg-white px-4 py-2 text-sm font-medium text-blue-700 transition-all hover:bg-blue-50 hover:border-blue-300"
|
||||
>
|
||||
<Package className="h-4 w-4" />
|
||||
{product.title}
|
||||
<ArrowRight className="h-3 w-3" />
|
||||
</a>
|
||||
) : null,
|
||||
)}
|
||||
{complementaryServices.map((service) =>
|
||||
service ? (
|
||||
<a
|
||||
key={service.id}
|
||||
href={`/services/${service.id}`}
|
||||
className="inline-flex items-center gap-2 rounded-lg border border-purple-200 bg-white px-4 py-2 text-sm font-medium text-purple-700 transition-all hover:bg-purple-50 hover:border-purple-300"
|
||||
>
|
||||
<Wrench className="h-4 w-4" />
|
||||
{service.title}
|
||||
<ArrowRight className="h-3 w-3" />
|
||||
</a>
|
||||
) : null,
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user