45 lines
1.2 KiB
TypeScript
45 lines
1.2 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: "Multiplayer coming",
|
|
description: "Challenge friends and see who has the bigger vocabulary.",
|
|
},
|
|
];
|
|
|
|
const FeatureCards = () => {
|
|
return (
|
|
<section className="py-16">
|
|
<h2 className="text-center text-3xl font-black tracking-tight text-(--color-text) mb-12">
|
|
Why lila
|
|
</h2>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
{features.map(({ emoji, title, description }) => (
|
|
<div
|
|
key={title}
|
|
className="flex flex-col gap-3 p-6 rounded-2xl border border-(--color-primary-light)"
|
|
>
|
|
<span className="text-3xl">{emoji}</span>
|
|
<h3 className="text-lg font-bold text-(--color-text)">{title}</h3>
|
|
<p className="text-sm text-(--color-text-muted) leading-relaxed">
|
|
{description}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default FeatureCards;
|