108 lines
4.7 KiB
TypeScript
108 lines
4.7 KiB
TypeScript
'use client'
|
||
|
||
import { motion } from 'framer-motion'
|
||
import { CheckCircle2, TrendingUp, Users, Building2 } from 'lucide-react'
|
||
import { Button } from '@/components/ui/button'
|
||
import Link from 'next/link'
|
||
|
||
export function Ecosystem() {
|
||
return (
|
||
<section className="py-24 bg-secondary text-white relative overflow-hidden">
|
||
{/* Background Effects */}
|
||
<div className="absolute inset-0 overflow-hidden">
|
||
<div className="absolute -top-40 -right-40 w-80 h-80 bg-primary/20 rounded-full blur-3xl"></div>
|
||
<div className="absolute -bottom-40 -left-40 w-80 h-80 bg-primary/10 rounded-full blur-3xl"></div>
|
||
</div>
|
||
|
||
<div className="container px-4 md:px-6 mx-auto relative z-10">
|
||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
|
||
{/* Left Content */}
|
||
<motion.div
|
||
initial={{ opacity: 0, x: -50 }}
|
||
whileInView={{ opacity: 1, x: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.6 }}
|
||
>
|
||
<h2 className="text-3xl md:text-5xl font-bold mb-6">
|
||
数据收益
|
||
<span className="text-primary"> 优先分配</span>
|
||
</h2>
|
||
<p className="text-lg text-gray-300 mb-8 leading-relaxed">
|
||
白马家园首创"数据收益优先分配权"，让创造数据的人优先分享数据带来的增值红利。
|
||
我们相信，只有相互成就，才能共建可持续发展的商业生态。
|
||
</p>
|
||
|
||
{/* Features List */}
|
||
<div className="space-y-5 mb-10">
|
||
{[
|
||
{ icon: TrendingUp, text: '时时/单单/天天补贴，立即到账' },
|
||
{ icon: Users, text: '用户消费即参与利润分配' },
|
||
{ icon: Building2, text: '商家让利即获得流量回馈' },
|
||
{ icon: CheckCircle2, text: '透明公开，无泡沫正向拨比' }
|
||
].map((item, index) => (
|
||
<div key={index} className="flex items-center gap-4">
|
||
<div className="w-10 h-10 bg-primary/20 rounded-lg flex items-center justify-center">
|
||
<item.icon className="w-5 h-5 text-primary" />
|
||
</div>
|
||
<span className="text-gray-200">{item.text}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<Button asChild className="bg-primary hover:bg-primary/90 text-white rounded-full px-8 h-12">
|
||
<Link href="/contact">立即加入生态</Link>
|
||
</Button>
|
||
</motion.div>
|
||
|
||
{/* Right Visual */}
|
||
<motion.div
|
||
initial={{ opacity: 0, scale: 0.9 }}
|
||
whileInView={{ opacity: 1, scale: 1 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.6 }}
|
||
className="relative"
|
||
>
|
||
{/* Central Circle */}
|
||
<div className="relative aspect-square w-full max-w-md mx-auto">
|
||
{/* Outer Ring */}
|
||
<div className="absolute inset-0 border-2 border-white/10 rounded-full"></div>
|
||
|
||
{/* Inner Content */}
|
||
<div className="absolute inset-8 border border-white/10 rounded-full flex items-center justify-center">
|
||
<div className="w-32 h-32 bg-primary rounded-full flex items-center justify-center shadow-lg shadow-primary/30">
|
||
<span className="font-bold text-white text-lg">白马家园</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Orbiting Elements */}
|
||
{[
|
||
{ angle: 0, label: '消费者' },
|
||
{ angle: 90, label: '商家' },
|
||
{ angle: 180, label: '供应链' },
|
||
{ angle: 270, label: '平台' }
|
||
].map((item, index) => (
|
||
<div
|
||
key={index}
|
||
className="absolute w-20 h-20 bg-white/10 backdrop-blur-sm rounded-xl flex items-center justify-center border border-white/20"
|
||
style={{
|
||
top: '50%',
|
||
left: '50%',
|
||
transform: `translate(-50%, -50%) rotate(${item.angle}deg) translateY(-140px) rotate(-${item.angle}deg)`
|
||
}}
|
||
>
|
||
<span className="text-sm font-medium">{item.label}</span>
|
||
</div>
|
||
))}
|
||
|
||
{/* Connection Lines */}
|
||
<svg className="absolute inset-0 w-full h-full pointer-events-none opacity-20">
|
||
<circle cx="50%" cy="50%" r="140" fill="none" stroke="white" strokeWidth="1" strokeDasharray="5,5" />
|
||
</svg>
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
)
|
||
}
|