138 lines
5.9 KiB
TypeScript
138 lines
5.9 KiB
TypeScript
'use client'
|
||
|
||
import { motion } from 'framer-motion'
|
||
import { Button } from '@/components/ui/button'
|
||
import { CreditCard, Users, Network, Database } from 'lucide-react'
|
||
|
||
// 根据框图重构四大核心板块
|
||
const products = [
|
||
{
|
||
title: '高效安全的金融科技支撑',
|
||
enTitle: 'Fintech Support',
|
||
description: '收单-分销-结算一体化，多通道AI路由，保障资金安全与高效分账。',
|
||
icon: CreditCard,
|
||
color: 'bg-gradient-to-br from-[#0A1931] to-[#185ADB]',
|
||
features: [
|
||
{ title: "白马智付", desc: "锁粉 / 自动分佣 / AI路由" },
|
||
{ title: "智能设备", desc: "智慧收银系统 / 支持绿色积分 / 智能监控巡店" },
|
||
{ title: "支付能力", desc: "主扫、被扫模式全支持 / 强大技术底座" }
|
||
]
|
||
},
|
||
{
|
||
title: '简单易用的私域运营工具',
|
||
enTitle: 'Private Domain Tools',
|
||
description: 'AI驱动的私域流量运营神器，让获客、留存、转化变得简单高效。',
|
||
icon: Users,
|
||
color: 'bg-gradient-to-br from-[#FF6600] to-[#FF8C00]',
|
||
features: [
|
||
{ title: "AI数字人", desc: "AI直播/AI导购/AI客服/AI私域" },
|
||
{ title: "积分权益", desc: "兑换AI直播 / 营销获客权益" },
|
||
{ title: "企微私域", desc: "AI数字员工自动实现：社群运营/维护/导购/客服" }
|
||
]
|
||
},
|
||
{
|
||
title: '轻松锁客的异业联盟系统',
|
||
enTitle: 'Alliance System',
|
||
description: '打破单打独斗，通过异业联盟锁定客户终身价值，实现跨界收益。',
|
||
icon: Network,
|
||
color: 'bg-gradient-to-br from-[#185ADB] to-[#0A1931]',
|
||
features: [
|
||
{ title: "锁定客户", desc: "扫码即锁定推荐关系，终身享受消费分佣" },
|
||
{ title: "跨界分佣", desc: "赚360行的钱 / 跨门店收益" },
|
||
{ title: "供应链分佣", desc: "分享优质供应链商品获利" }
|
||
]
|
||
},
|
||
{
|
||
title: '统一高效的生态基础设施',
|
||
enTitle: 'Ecological Infrastructure',
|
||
description: '为小微企业提供完整的数智化基建，打通会员、资产与供应链。',
|
||
icon: Database,
|
||
color: 'bg-gradient-to-br from-[#059669] to-[#10B981]',
|
||
features: [
|
||
{ title: "会员系统", desc: "跨平台生态融合 / 统一身份" },
|
||
{ title: "数字资产体系", desc: "RWA资产 / 积分、抵用券、金币等" },
|
||
{ title: "供应链资源", desc: "稳定安全靠谱" }
|
||
]
|
||
}
|
||
]
|
||
|
||
export function ProductPreview() {
|
||
return (
|
||
<section className="py-12 md:py-20 lg:py-24 bg-white">
|
||
<div className="container px-4 md:px-6 mx-auto">
|
||
{/* Section Header */}
|
||
<div className="text-center mb-10 md:mb-16">
|
||
<motion.h2
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-[#0A1931] mb-3 md:mb-4"
|
||
>
|
||
AI时代小微创业 + 消费循环生态圈
|
||
</motion.h2>
|
||
<motion.p
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ delay: 0.1 }}
|
||
className="text-sm sm:text-base md:text-lg text-gray-500 px-4"
|
||
>
|
||
四大核心数智化产品矩阵，全方位赋能实体商业
|
||
</motion.p>
|
||
</div>
|
||
|
||
{/* Product Cards Grid - 2x2 Layout recommended for 4 items */}
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8 lg:gap-10">
|
||
{products.map((product, index) => (
|
||
<motion.div
|
||
key={index}
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.5, delay: index * 0.1 }}
|
||
className="group h-full"
|
||
>
|
||
<div className="card-hover bg-white rounded-xl md:rounded-2xl overflow-hidden border border-gray-100 h-full flex flex-col">
|
||
{/* Header with Icon */}
|
||
<div className="p-6 md:p-8 flex items-start justify-between border-b border-gray-50 bg-gray-50/50">
|
||
<div>
|
||
<h3 className="text-xl md:text-2xl font-bold text-[#0A1931] mb-1">
|
||
{product.title}
|
||
</h3>
|
||
<span className="text-xs font-semibold text-[#FF6600] uppercase tracking-wider">
|
||
{product.enTitle}
|
||
</span>
|
||
</div>
|
||
<div className={`w-12 h-12 md:w-14 md:h-14 rounded-xl flex items-center justify-center text-white shadow-md ${product.color}`}>
|
||
<product.icon className="w-6 h-6 md:w-7 md:h-7" />
|
||
</div>
|
||
</div>
|
||
|
||
{/* Content */}
|
||
<div className="p-6 md:p-8 flex-grow flex flex-col">
|
||
<p className="text-sm text-gray-500 mb-6 leading-relaxed">
|
||
{product.description}
|
||
</p>
|
||
|
||
{/* Features List */}
|
||
<ul className="space-y-3 md:space-y-4 mb-8 flex-grow">
|
||
{product.features.map((feature, fIndex) => (
|
||
<li key={fIndex} className="flex items-start text-sm">
|
||
<span className="w-1.5 h-1.5 bg-[#FF6600] rounded-full mr-3 mt-1.5 shrink-0"></span>
|
||
<div className="flex-1">
|
||
<strong className="text-[#0A1931] block mb-0.5">{feature.title}</strong>
|
||
<span className="text-gray-500 text-xs md:text-sm">{feature.desc}</span>
|
||
</div>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
)
|
||
}
|