Zee Akademija · Lekcija 10 · Frontend Razvoj — Next.js 15, Tailwind & UI Standard

Zee Design UI Standard: Blocky Buttons, Glassmorphism i Dark Estetika

Pravila našeg brenda: zašto zabranjujemo zaobljene "bubbly" gumbe, kako kreiramo duboke tamne tonove (#0A0A09) i neonske glow akcente.

Zatražite besplatnu ponudu Sljedeća lekcija

Što ćete naučiti

Blocky gumbi: Uvijek koristimo oštre, tehničke radijuse (rounded-lg = 8px ili rounded-md = 6px). Bubbly/pill gumbi su strogo zabranjeni!
Podloga i kontrast: Glavna pozadina je ultra-tamna (#0A0A09), a kartice koriste suptilni glassmorphism (bg-white/5 border border-white/10).
Amber & Emerald glow: Akcentne boje su topli amber (primarna) i emerald (uspjeh) uz suptilne pozadinske blur efekte.
Lucide Icons: Standardizirana biblioteka ikona — uvijek iste debljine linija (stroke-width: 1.5 do 2).

Formula za Zee Design karticu

Svaka premium kartica na platformi ima:

Pozadinu: bg-[#0A0A09]/60 backdrop-blur-xl
Obrub: border border-white/10 hover:border-white/20 transition-all
Radijus: rounded-2xl shadow-xl

Korak po korak

Instalacija Lucide ikona i Tailwind alata
```
npm install lucide-react clsx tailwind-merge framer-motion
```
Osnovni paket alata za moderne animacije i rad s Tailwind klasama.

Savjet iz prakse

Za WhatsApp gumbe UVIJEK koristite službenu WhatsApp zelenu boju (#25D366) ili brendiranu ikonu s tekstom "Pošaljite upit na WhatsApp". To donosi 3x više konverzija od email forme!