RC Kosačky: pět archů, katalog v CMS a jeden člověk za cenou

PaedDr. Eduard Drutarovský — EXPORT IMPORT

2026-08-30

Eduard Drutarovský dováží z Asie dálkově ovládané pásové sekačky, mulčovací a lesní frézy. Živnost má registrovanou v Košicích od roku 1995, stroje si vybírá a dováží sám a prodává je přímo, bez marže prodejce — jeho ceny se pohybují mezi 2 000 a 6 200 eury, kde kategoriální lídr začíná nad 33 000. Před webem prodával přes inzeráty na Bazoši pod střídajícími se jmény prodejců, aby obešel bany. Přesně tu díru v důvěře měl web zaplnit: jeden jmenovaný člověk, jedna adresa, jedno telefonní číslo. Není to e-shop — návštěvník pošle poptávku a Eduard mu zavolá. Web má pět samostatných archů namísto jednoho nekonečného scrollu, katalog strojů žije v Sanity a Eduard ho upravuje z telefonu ve vlastní jednoduché administraci, kde umí přidat stroj, ceny i video. Projekt trval 8 dní práce s rozpočtem €300.

Prezentační web s katalogem v CMS a vlastní administrací

Typ projektu

Poptávky na stroje namísto inzerátů pod cizími jmény

Hlavní cíl

€300

Cena tohoto projektu

Zobrazit živý web

Vybrané obrazovky a vizuály

Vizuální náhled projektu ukazuje, jak vypadá web na různých zařízeních. Responzivní design zajišťuje perfektní zobrazení na mobilech, tabletech a desktopech.

Hero s titulkem „Kosím tam, kde vy chcete“ — větou, kterou Eduard nadiktoval doslova.

Netriviální úlohy projektu

Sekce se dají postavit za den. Tento projekt stál na něčem jiném: dát ceně, která je pětkrát nižší než u lídra, jméno a tvář; postavit katalog, který se mění každý den a spravuje se z telefonu; a nedat na web ani jeden údaj, který by se nedal doložit.

Problém #1

Cena pěti- až desetkrát nižší než u lídra kategorie

Známá značka v této kategorii začíná nad 33 000 €, Eduardovy stroje stojí 2 400 až 6 200 €. Takový rozdíl je buď katastrofa důvěry, nebo celá značka. Do té doby prodával přes inzeráty na Bazoši pod střídajícími se jmény prodejců, takže kupující nevěděl, komu vlastně píše.

Naše řešení

Web jsme postavili na jednom jmenovaném člověku, ne na „síti prodejců“: jméno, živnost registrovaná v Košicích od roku 1995, IČO, adresa a jedno telefonní číslo, které zvedá on. Cena je vysvětlená jednou větou — dováží přímo od výrobce, takže v ceně není marže prodejce. Právě proto je i celý ceník zveřejněný, přestože konkurence ho obvykle skrývá: zveřejněná cena je tady argument, ne riziko.

Technologie a implementace

Samostatný arch „Kto som“, firemní záznam v CMS, JSON-LD

1
Problém #2

Katalog, který se mění každý den

Strojů bude asi dvacet a klient je popsal přesně: „jeden vypadne, pribudne, to sa každý deň mení“. Zároveň popsal, jak chce, aby se web četl — „keď klikne na ponuku, ukáže sa mu ďalšia strana“ a „tam si klikne a ide ďalej“. To jsou dvě zadání naráz: architektura čtení i architektura údržby.

Naše řešení

Web jsme rozdělili na pět samostatných archů s rozcestníkem na úvodní stránce — přesně ten model čtení, který klient popsal. Katalog přitom nedostal stránku na stroj, ale řádek na stroj: dvacet záznamů v CMS se udržuje snadno, dvacet samostatných stránek ne. Rozměry řádku jsou z jeho vlastního zadání v centimetrech — dvacet let vedl realitní kancelář a přemýšlí v nabídkách na tištěné straně. Zrušené adresy z předchozí struktury dostaly trvalé přesměrování na kotvu řádku, který je nahradil, aby odkaz v jeho telefonu nikdy nespadl na 404.

Technologie a implementace

Pět archů + rozcestník, řádek na stroj, trvalá přesměrování na kotvy

2
Problém #3

Web spravuje z telefonu, mezi dvěma hovory

Řekl to dvakrát: „Tiež musím sám vedieť editovať ponuky, texty, foto, video, ceny.“ Plné CMS to zvládne, ale vyžaduje vlastní účet, ukazuje typy dokumentů a má publikační krok. Pro člověka, který přidává stroj z telefonu přímo od stroje, je to bariéra navíc.

Naše řešení

Dostal dvě vstupní plochy, které zapisují do týchž dokumentů. `/studio` je plné CMS a celé — včetně popisků a nápověd — je slovensky. `/admin` je jednoduchá administrace na téže doméně za e-mailem a heslem: seznam strojů, přidat, upravit, vymazat, nic víc. Uložení okamžitě zneplatní cache, takže změna je na webu hned na první načtení. A kdyby CMS jednou nebylo dostupné, web se tiše vrátí k obsahu uloženému v repozitáři — návštěvník neuvidí ani prázdné místo, ani chybu.

Technologie a implementace

Sanity Studio slovensky, vlastní administrace, cache tagy, typový fallback

3
Problém #4

Video z terénu je nejlepší důkaz a zároveň nejtěžší položka stránky

Stroj se nedá prodat fotografií — kupující potřebuje vidět, jak jde do vysoké trávy a do svahu. Klientovy záběry jsou přitom z telefonu, v nízkém rozlišení, a nahrává je sám přímo z terénu. Web s dvaceti řádky a videem v každém z nich by se dal na mobilních datech otevírat velmi dlouho.

Naše řešení

Video se nikdy nezobrazuje přes celou šířku, ale vždy ve zkosené desce se zrnem — záměrné zpracování, které z technického omezení dělá součást vizuálního jazyka. Co klient nahraje, překóduje jeho vlastní prohlížeč na 1 280 px a přibližně 1,4 Mbit/s ještě před odesláním; podle velikosti se soubor směruje buď přímo, nebo přes dočasné úložiště. Náhledový snímek se bere z původního klipu, protože žádná galerie v telefonu ho nedodá ve správných proporcích. Klip delší než dvacet sekund se v galerii nikdy nepřehrává sám, takže návštěvník, který prochází dvacet řádků, stahuje náhledy, ne video.

Technologie a implementace

Překódování v prohlížeči (canvas + MediaRecorder), Vercel Blob, poster z klipu

4
Problém #5

Vizuální jazyk musel vyjít z jeho vlastní značky

Klient má vlastní odznak a chtěl ho na webu. Zároveň dal jasné mantinely: podklad určitě ne černý, teplé zemité barvy, teplá zelená. A jeho reakce na první dělicí prvek byla nejlepší zadání, jaké mohl dát — zeptal se, co ty tvary představují. Motiv, na který je třeba se ptát, svou práci nedělá.

Naše řešení

Paletu i motiv jsme vytáhli přímo z jeho odznaku a z fotografie, kterou poslal: papírový podklad, zelená jako inkoust, rezavá jako signál. Motivem se stal pokos — pás, který sekačka nechá za sebou při jednom průjezdu, nakreslený jako rovnoběžné vlásečnice pod úhlem −14 stupňů, kde hustý rozestup znamená neposekané a otevřený posekané. Pojmenuje ho jedním slovem každý, kdo stál na louce. Na úvodní stránce se navíc ovládá: rozcestník má pět pásů a dotyk každý z nich poseká, takže navigace po webu předvádí samotný produkt.

Technologie a implementace

Paleta z odznaku klienta, motiv POKOS, ovladatelný rozcestník

5
Problém #6

Část technických údajů se nedala doložit

Dodavatelský ceník nabízel parametry, které nikde jinde zveřejněné nebyly, včetně emisního tvrzení „EURO5“. Pro stroje této třídy je to nesprávný režim — off-road motory spadají pod jinou evropskou regulaci. Na webu by takový údaj vypadal důvěryhodně a byl by nedoložitelný, což je při prodeji techniky riziko pro klienta, ne pro nás.

Naše řešení

Každá cena a každý parametr na webu je přepsaný z Eduardových vlastních živých inzerátů, které jsme seskupili podle telefonního čísla, ne podle střídajících se jmen prodejců. Údaje bez veřejného zdroje na web nešly a jsou vyjmenované v poznámkách projektu spolu s tím, co je třeba dodat, aby se mohly doplnit. Emisní tvrzení čeká na prohlášení o shodě. Dva klipy s vodoznakem dodavatele jsme vyřadili. Totéž pravidlo platí i pro strukturovaná data — i ta jsou zveřejněný obsah, který čte Google.

Technologie a implementace

Přepis z inzerátů, registr nedoložených údajů, JSON-LD bez tvrzení navíc

6

Podobné problémy ve vašem byznysu? Pomůžeme vám je vyřešit moderním tech stackem.

Výsledná struktura

Kompletní webová struktura navržená pro maximální konverzi a user experience. Každá stránka má jasný účel a optimalizovanou navigaci.

Úvod
Nabídka
Jak to funguje
Kdo jsem
Poptávka
Zásady cookies
Studio CMS (neveřejné)
Administrace nabídky (neveřejná)

Nejdůležitější sekce webu

Každá sekce řešila konkrétní byznys problém a zvyšovala konverze

1

Rozcestník, který se seká

Úvodní arch nese pět pásů na celou šířku, jeden na každou stránku. Každý pás má husté šrafování — neposekanou zem. Při přejetí myší nebo dotyku se rozestup otevírá zleva doprava a za ním se vlévá sytá zelená. Navigace po webu je doslova sekání: dotknete se cíle a díváte se, jak pojezd doběhne, dřív než tam přijdete. Pět pásů přitom není pět stejných karet — nabídka je nejvyšší, nese počet strojů i cenové dno, poptávka je krátký rezavý pás, který se už neseká, protože je konec pojezdu.

2

Nabídka: jeden řádek na stroj

Každý stroj má vlastní řádek s galerií fotografií a videí, kódem modelu, čtyřmi parametry, cenou a tlačítkem „Mám záujem“. Rozměry řádku jsou z Eduardova zadání v centimetrech — dvacet let vedl realitní kancelář a přemýšlí v nabídkách na tištěné straně. Detaily jsou v rozbalovacím panelu, takže řádek zůstane krátký a kupující projde celý katalog bez deseti otočení prstem.

3

Jak to funguje — terén, ovladač, čísla

Arch vysvětluje, kde má stroj smysl: vysoká tráva, křoví, svahy do 60 stupňů — místa, kde ruční sekačka i traktor přestávají být bezpečné. Ilustrují to skutečné klipy z klientova sadu, ne stock záběry. Video je nízkého rozlišení, proto se nikdy nezobrazuje přes celou šířku, ale vždy v rámečku se zrnem — je to záměrné zpracování, ne zanedbání.

4

Kdo jsem — jméno namísto sítě prodejců

Arch říká přesně toto: jmenuji se Eduard Drutarovský, živnost Export – Import mám registrovanou v Košicích od roku 1995, stroje si vybírám a dovážím sám, komunikuji přímo s výrobci. A jednou větou i to, proč je cena taková, jaká je. Pod textem stojí firma, IČO a adresa. Sekce záměrně nepoužívá žádné display písmo — je to jediné místo na webu, kde mluví člověk, ne plakát.

5

Poptávka namísto košíku

Poslední arch nežádá objednávku, ale terén a plochu. Odeslání předá kupujícího na WhatsApp nebo přímo na telefon — kanály, které klient reálně používá a ve kterých dokáže odpovědět rychle. Tlačítko „Mám záujem“ u každého stroje vede na tentýž arch s předvyplněným modelem.

Použitý stack

Frontend a designový systém

Papírový podklad namísto černého — přímý pokyn klienta. Zelená je inkoust, rezavá je signál. Tři písmové rodiny s oddělenými rolemi a strategie vah 800 proti 200, bez středních řezů. Nic není zaoblené; jediné zkosení je 14 stupňů na levém dolním rohu.

Bricolage Grotesque · Chivo · Martian MonoKontrasty počítané skriptem, ne odhademRespektovaný prefers-reduced-motion
Next.js 16
React 19
TypeScript
Tailwind CSS v4

Katalog v CMS

Sanity namontovaná v samotné aplikaci na `/studio`, se schématem i deskem napsanými slovensky — je to jediná plocha, kterou klient uvidí. Spravuje stroje, firemní záznam i texty sekcí; dataset je veřejný, protože celý katalog je veřejný obsah, takže čtení nepotřebuje žádný token.

Celé studio slovensky, včetně nápovědVeřejný dataset — čtení bez tokenuUložení se projeví na první načtení, ne na druhé
Sanity 6
next-sanity 13
@sanity/image-url
Cache tags

Administrace pro telefon

`/studio` je plné CMS a vyžaduje účet v Sanity. `/admin` je tentýž katalog za e-mailem a heslem na této doméně, bez typů dokumentů a bez publikačního kroku: seznam, přidat stroj, upravit, vymazat. Fotografie se v prohlížeči zmenší na 2 400 px, takže každá fotka z telefonu projde. Video se v prohlížeči překóduje na 1 280 px a klipy nad limit požadavku jdou přes Vercel Blob — klient se nikdy nedozví, kterou cestou to šlo.

Vlastní relace, `requireSession()` i na server actionsPřekódování videa v prohlížeči (video → canvas → MediaRecorder)Bez tokenu žádná data — editor nikdy neupravuje fallback
Server Actions
Vercel Blob
MediaRecorder API
Sanity API token

Obsahová integrita, SEO a soulad

Každá cena a každý parametr na webu je přepsaný z Eduardových vlastních živých inzerátů. Několik věrohodně znějících parametrů na webu záměrně chybí — pocházejí z dodavatelského ceníku a nejsou nikde zveřejněné. Emisní tvrzení „EURO5“ z dodavatelského listu jsme neuvedli vůbec: stroje této třídy spadají pod jinou regulaci a bez prohlášení o shodě by to bylo tvrzení bez podkladu. Totéž pravidlo platí pro strukturovaná data — i ta jsou zveřejněný obsah.

Nic, co klient neřekl, se nedostane ani do JSON-LDDva klipy s cizím vodoznakem vyřazenéGDPR lišta se souhlasem a zásadami cookies
JSON-LD
robots.txt & sitemap.xml
Cookie consent
Vercel

💡 Moderní tech stack = rychlý web + jednoduchá údržba + dlouhodobá podpora

Průběh realizace

Projekt běžel osm dní, od 23. do 30. srpna 2026. Byly to dva koncepty a pět hovorů s klientem — každý další krok vedlo to, co řekl on, ne to, co se nám zdálo hezčí. Proto se web trefil rychle i přesto, že zadání se během týdne upřesňovalo.

23. srpna

První koncept a brief klienta

1 den

Za den vznikla první kompletní verze webu, aby měl klient co komentovat — a komentoval přesně a věcně. Z jeho čtyř poznámek se stal skutečný brief: chce na webu svůj odznak, podklad určitě ne černý, teplé zemité barvy, a dělicí prvek, který není třeba vysvětlovat. Byla to zadání na art direction, ne kosmetické připomínky, a právě proto měla cenu hned první den.

24.–25. srpna

Art direction z jeho odznaku

2 dny

Paletu jsme vytáhli přímo z klientova odznaku a z fotografie, kterou poslal: papírový podklad, zelená jako inkoust, rezavá jako signál. Dělicí prvek nahradil pokos — pás po jednom průjezdu sekačky, který pojmenuje každý, kdo stál na louce. V této fázi vznikl i první návrh katalogu a s ním otázka, kolik strojů v něm nakonec bude.

26. srpna

Hovor, který určil architekturu

1 den

Na hovoru padla dvě čísla, která rozhodla o stavbě webu: strojů bude asi dvacet a mění se denně. Zároveň popsal, jak chce, aby se web četl — „keď klikne na ponuku, ukáže sa mu ďalšia strana“ a „tam si klikne a ide ďalej“. Podle toho jsme web postavili na pěti arších s rozcestníkem a katalog na řádku na stroj namísto stránky na stroj; starší adresy dostaly trvalá přesměrování. Ten den z nabídky vypadly i grafy šířky záběru, které označil za informaci navíc, a video přestalo mít limit 4 MB.

27.–28. srpna

CMS, vlastní administrace a barva

2 dny

Nasadili jsme Sanity se studiem celým slovensky a k ní jednoduchou administraci `/admin`, aby klient nepotřeboval druhý účet. Vyžádal si sytější zeleň — rozdělili jsme ji proto na textovou, která musí projít kontrastem, a plošnou, která se smí pouze lít do ploch, a všechny poměry kontrastu přepočítali skriptem namísto odhadu. Uložení v administraci od té doby okamžitě zneplatní cache, takže je změna na webu hned na první načtení.

29.–30. srpna

Poptávka, ověření a předání

2 dny

Dotáhli jsme poptávkový tok a administraci tak, aby klientovi nic nezmizelo v tichosti: chyba formuláře se ukáže tam, kam se dívá, a každé zamítnuté uložení řekne proč. Nakonec jsme mu zdokumentovali, jak si sám ověří, že poptávka opravdu dorazila — bez toho, aby se musel na někoho spoléhat. Web byl předán 30. srpna a spuštěn na doméně rc-kosacky-slovensko.sk.

FAQ k projektu

Rychlé shrnutí case study

Case study ukazuje konkrétní problém, řešení a výsledek. Pomáhá porovnat váš projekt s podobným scénářem.

Definice: case study je popis reálného projektu s jasnými vstupy a výsledkem.

Prodáváte techniku nebo zboží, které se neobjednává kliknutím?

Postavíme web, který řekne, kdo jste a proč je ta cena taková — s katalogem, který si spravujete sami z telefonu, a s poptávkou, která vám opravdu chodí. Ceny a parametry pouze ty, které umíte doložit.

Nechte nám kontakt (stačí e-mail nebo telefon)

Napsat na WhatsApp

Tato stránka je chráněna službou reCAPTCHA od Google. Platí Zásady ochrany osobních údajů a Podmínky služby společnosti Google.

✨ Katalog v CMS • Správa z telefonu • Bez vymyšlených parametrů