71 lines
2.6 KiB
TypeScript
71 lines
2.6 KiB
TypeScript
'use client'
|
||
|
||
import { motion } from 'framer-motion'
|
||
import { Diamond, Truck, Eye, Coins } from 'lucide-react'
|
||
|
||
const infraItems = [
|
||
{
|
||
icon: Diamond,
|
||
title: "智慧会员体系",
|
||
description: "一次注册，全城打通<br/>全平台消费数据互通"
|
||
},
|
||
{
|
||
icon: Truck,
|
||
title: "供应链赋能",
|
||
description: "积分当钱花，进货更便宜<br/>源头工厂直供去库存"
|
||
},
|
||
{
|
||
icon: Eye,
|
||
title: "智能巡店系统",
|
||
description: "手机看店，AI管店<br/>客流热力图实时分析"
|
||
},
|
||
{
|
||
icon: Coins,
|
||
title: "数智积分体系",
|
||
description: "基于真实消费产生<br/>拒绝泡沫，价值恒定"
|
||
}
|
||
]
|
||
|
||
export function Infrastructure() {
|
||
return (
|
||
<section className="py-12 md:py-16 lg:py-20 bg-[#F4F7FB]">
|
||
<div className="container px-4 md:px-6 mx-auto">
|
||
{/* Section Header - 响应式 */}
|
||
<div className="text-center mb-10 md:mb-16">
|
||
<h2 className="text-xl sm:text-2xl md:text-3xl lg:text-4xl font-bold text-[#0A1931] mb-3 md:mb-4">
|
||
统一高效的生态基础设施
|
||
</h2>
|
||
{/* 已移除：为上市合规打造的底层架构 */}
|
||
</div>
|
||
|
||
{/* Grid - 响应式布局 */}
|
||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6">
|
||
{infraItems.map((item, index) => (
|
||
<motion.div
|
||
key={index}
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.5, delay: index * 0.1 }}
|
||
className="bg-white p-4 md:p-6 lg:p-8 text-center rounded-lg md:rounded-xl border-b-4 border-transparent hover:border-[#FF6600] hover:shadow-lg transition-all duration-300"
|
||
>
|
||
{/* Icon - 响应式 */}
|
||
<div className="w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 bg-[#0A1931]/5 rounded-lg md:rounded-xl flex items-center justify-center mx-auto mb-4 md:mb-6">
|
||
<item.icon className="w-5 h-5 sm:w-6 sm:h-6 md:w-8 md:h-8 text-[#185ADB]" />
|
||
</div>
|
||
{/* Title - 响应式 */}
|
||
<h3 className="text-sm sm:text-base md:text-lg font-bold text-[#0A1931] mb-2 md:mb-3">
|
||
{item.title}
|
||
</h3>
|
||
{/* Description - 响应式 */}
|
||
<p className="text-xs sm:text-sm text-gray-500 leading-relaxed"
|
||
dangerouslySetInnerHTML={{ __html: item.description }}>
|
||
</p>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
)
|
||
}
|