Pixel-Perfect PSD to Next.js

Mám hotové 3 .psd soubory e-shopu a potřebuji je převést do produkčního kódu 1 : 1, bez jakýchkoli kompromisů v preciznosti nebo funkčnosti.

Tech stack
Celé řešení musí být postaveno na těchto technologiích:

React 19.2.4 + React DOM 19.2.4 — tvorba UI komponent, správa stavu a vykreslování do prohlížeče.

Next.js 16.1.6 (App Router) — routing mezi stránkami, server-side rendering (SSR), statické generování, optimalizace obrázků přes next/image, navigace přes next/link.

TypeScript 5.9.3 (strict mode) — typová bezpečnost, definice props rozhraní, typování dat, prevence chyb při kompilaci.

Tailwind CSS 3.4.17 — veškeré stylování: layout, barvy, typografie, spacing, responzivita, hover/focus stavy.

clsx 2.1.1 — podmíněné skládání CSS tříd, např. přidání třídy jen když je komponenta aktivní.

tailwind-merge 2.6.1 — inteligentní slučování Tailwind tříd, řeší konflikty kdy pozdější třída správně přepíše dřívější.

class-variance-authority (CVA) 0.7.1 — definice variant komponent, např. Button s variantami primary/secondary/outline a velikostmi sm/md/lg.

lucide-react 0.554.0 — veškeré ikony v UI: košík, šipky, zavřít, menu, sociální sítě atd.

clsx + tailwind-merge se používají společně v jednom cn() helperu:


import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
Tento helper se volá všude místo přímého className.

Pravidla stylování
Veškeré stylování pomocí Tailwind utility tříd — žádné externí CSS soubory, žádný CSS-in-JS. Pro skládání className používej cn() helper (clsx + tailwind-merge). Pro komponenty s variantami (tlačítka, badge, karty apod.) používej CVA. Inline style={} je povolený tam, kde je hodnota dynamická (např. barva nebo obrázek přicházející z dat/props) — nikdy ne pro statické styly. Barvy, fonty a zaoblení navrhni tak, aby šly jednoduše nahradit CSS custom properties (proměnnými) — v budoucnu budou řízeny konfigurací.

Architektura
Kód musí mít modulární architekturu — každá vizuální sekce z PSD je samostatný, nezávislý blok (komponent), který lze v budoucnu přesouvat, odebírat, přidávat nebo nahradit jiným blokem bez dopadu na zbytek stránky.

Struktura:


components/
ui/ ← sdílené UI prvky (Button, Badge, Input, Card, Price…)
blocks/ ← sekce stránky (HeroBlock, ProductGridBlock, CTABlock…)
layouts/ ← layout komponenty (Header, Footer, PageWrapper…)
lib/
cn.ts ← cn() helper
Pravidla:

Každý blok přijímá data výhradně přes props — žádné hardcoded texty, obrázky ani barvy uvnitř komponentu. Bloky nesmí být vzájemně provázané — žádný blok nesmí importovat jiný blok. UI komponenty (ui/) jsou sdílené napříč bloky — tlačítka, karty, badge atd. se neopakují. Všechny komponenty musí být plně typované (props rozhraní, žádné any). Každý blok i UI komponent musí mít vlastní soubor s exportem.

Finálním výstupem očekávám repozitář (nebo zip), který zkompiluji jediným pnpm build a bez úprav rovnou spustím a zkontroluji.

Responzivita
Cíleně podporujeme celé spektrum zařízení s přístupem mobile-first (base třídy = mobil, přidávat breakpointy směrem nahoru):

(base) 0 px — mobilní telefony
sm 640 px — velké mobily
md 768 px — tablety
lg 1024 px — desktopy
xl 1280 px — široké desktopy
2xl 1536 px — širokoúhlé monitory
3xl 1920 px (custom) — Full HD / TV
Kvalitativní požadavky
Před odevzdáním ověř:

HTML validita — sémantické tagy (section, nav, main, article, footer).
Přístupnost — ARIA atributy, dostatečné kontrasty (WCAG 2.1 AA), fokus stavy na interaktivních prvcích, alt texty u obrázků.
Interakce — správné fungování v Next.js (SSR/CSR, 'use client' jen tam kde je nutné, navigace přes Link, formuláře).
Build — kód musí projít tsc --noEmit bez chyb a varování.
Co nedodávat
Žádné další knihovny nad rámec výše uvedeného stacku bez předchozího schválení. Žádné placeholder obrázky — místa pro obrázky připravit jako props (src, alt), obrázky doplním sám.