feat(landing): add landing page with Hero, HowItWorks and FeatureCards

apps/web/src/components/landing/FeatureCards.tsx

@@ -0,0 +1,45 @@
+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;