68 lines
2.9 KiB
TypeScript
68 lines
2.9 KiB
TypeScript
const features = [
|
|
{
|
|
emoji: "📱",
|
|
title: "Mobile-first",
|
|
description: "Designed for your thumb. Play on the go, anytime.",
|
|
},
|
|
{
|
|
emoji: "🌍",
|
|
title: "5 languages",
|
|
description:
|
|
"English, Italian, German, French, Spanish — with more on the way.",
|
|
},
|
|
{
|
|
emoji: "⚔️",
|
|
title: "Real-time multiplayer",
|
|
description: "Create a room, share the code, and race to the best score.",
|
|
},
|
|
];
|
|
|
|
const FeatureCards = () => {
|
|
return (
|
|
<section className="py-14">
|
|
<div className="text-center">
|
|
<div className="inline-flex items-center gap-2 rounded-full bg-(--color-surface) border border-(--color-primary-light) px-4 py-1 text-xs font-bold tracking-widest uppercase text-(--color-primary)">
|
|
Tiny rounds · big dopamine
|
|
</div>
|
|
<h2 className="text-3xl font-black tracking-tight text-(--color-text)">
|
|
Why lila
|
|
</h2>
|
|
<p className="mt-3 text-(--color-text-muted) max-w-2xl mx-auto">
|
|
Built to be fast to start, satisfying to finish, and fun to repeat.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="mt-10 grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
{features.map(({ emoji, title, description }) => (
|
|
<div
|
|
key={title}
|
|
className="group relative overflow-hidden rounded-2xl border border-(--color-primary-light) bg-(--color-bg) p-6 shadow-sm hover:shadow-lg transition-shadow"
|
|
>
|
|
<div className="absolute -top-24 -right-24 h-48 w-48 rounded-full bg-(--color-primary) opacity-[0.08] blur-2xl transition-transform duration-300 group-hover:translate-x-2 group-hover:-translate-y-2" />
|
|
<div className="flex items-center gap-4">
|
|
<div className="relative h-12 w-12 rounded-2xl bg-(--color-surface) border border-(--color-primary-light) grid place-items-center text-2xl">
|
|
<span aria-hidden>{emoji}</span>
|
|
</div>
|
|
<h3 className="text-lg font-bold text-(--color-text)">{title}</h3>
|
|
</div>
|
|
<p className="mt-3 text-sm text-(--color-text-muted) leading-relaxed">
|
|
{description}
|
|
</p>
|
|
<div className="mt-5 flex flex-wrap gap-2">
|
|
<span className="inline-flex items-center gap-2 rounded-full bg-(--color-surface) border border-(--color-primary-light) px-3 py-1 text-xs font-bold text-(--color-primary-dark)">
|
|
<span className="h-1.5 w-1.5 rounded-full bg-(--color-accent)" />
|
|
Instant feedback
|
|
</span>
|
|
<span className="inline-flex items-center gap-2 rounded-full bg-(--color-surface) border border-(--color-primary-light) px-3 py-1 text-xs font-bold text-(--color-primary-dark)">
|
|
<span className="h-1.5 w-1.5 rounded-full bg-(--color-primary)" />
|
|
Type-safe API
|
|
</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default FeatureCards;
|