forgejo-lila/lila
1
0
Fork 0
Code Issues 50 Pull requests Projects 1 Releases Packages Wiki Activity Actions

complete design overhaul

Browse source
This commit is contained in:
lila 2026-04-19 19:25:55 +02:00
parent d033a08d87
commit 0a0bafa0ec
14 changed files with 505 additions and 160 deletions
Download patch file Download diff file Expand all files Collapse all files

45
apps/web/src/components/landing/FeatureCards.tsx
View file

@ -12,29 +12,52 @@ const features = [
},
{
emoji: "⚔️",
title: "Multiplayer coming",
description: "Challenge friends and see who has the bigger vocabulary.",
title: "Real-time multiplayer",
description: "Create a room, share the code, and race to the best score.",
},
];
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>
<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="grid grid-cols-1 md:grid-cols-3 gap-6">
<div className="mt-10 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)"
className="group relative overflow-hidden rounded-2xl border border-(--color-primary-light) bg-(--color-bg) p-6 shadow-sm hover:shadow-lg transition-shadow"
>
<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">
<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>