64 lines
2.1 KiB
TypeScript
64 lines
2.1 KiB
TypeScript
"use client";
|
||
|
||
import { MapPin, BookOpen, Crown } from "lucide-react";
|
||
import { motion } from "framer-motion";
|
||
import { ECOSYSTEM_COLUMNS } from "~/lib/data";
|
||
|
||
const ICON_MAP = [MapPin, BookOpen, Crown] as const;
|
||
|
||
export function Ecosystem() {
|
||
return (
|
||
<section className="bg-neutral-50 py-16 md:py-24">
|
||
<div className="container mx-auto px-4 md:px-6">
|
||
<motion.h2
|
||
initial={{ opacity: 0, y: 12 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true, margin: "-80px" }}
|
||
className="text-center text-2xl font-semibold text-neutral-900 md:text-3xl"
|
||
>
|
||
已有完整生态
|
||
</motion.h2>
|
||
<motion.p
|
||
initial={{ opacity: 0 }}
|
||
whileInView={{ opacity: 1 }}
|
||
viewport={{ once: true }}
|
||
className="mx-auto mt-3 max-w-2xl text-center text-neutral-600"
|
||
>
|
||
不是从零开始，而是已经搭建好的体系
|
||
</motion.p>
|
||
|
||
<div className="mt-12 grid gap-6 md:grid-cols-3">
|
||
{ECOSYSTEM_COLUMNS.map((col, i) => {
|
||
const Icon = ICON_MAP[i];
|
||
return (
|
||
<motion.div
|
||
key={col.title}
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true, margin: "-40px" }}
|
||
transition={{ delay: i * 0.08 }}
|
||
className="rounded-xl border border-neutral-200 bg-white p-6"
|
||
>
|
||
<Icon className="h-9 w-9 text-neutral-600" />
|
||
<h3 className="mt-4 font-medium text-neutral-900">
|
||
{col.title}
|
||
</h3>
|
||
<div className="mt-3 flex flex-wrap gap-2">
|
||
{col.items.map((item) => (
|
||
<span
|
||
key={item}
|
||
className="rounded-md bg-neutral-100 px-2.5 py-1 text-xs text-neutral-600"
|
||
>
|
||
{item}
|
||
</span>
|
||
))}
|
||
</div>
|
||
</motion.div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|