RC Kosačky: päť hárkov, katalóg v CMS a jeden človek za cenou

PaedDr. Eduard Drutarovský — EXPORT IMPORT

2026-08-30

Eduard Drutarovský dováža z Ázie diaľkovo ovládané pásové kosačky, mulčovacie a lesné frézy. Živnosť má registrovanú v Košiciach od roku 1995, stroje si vyberá a dováža sám a predáva ich priamo, bez marže predajcu — jeho ceny sa pohybujú medzi 2 000 a 6 200 eurami, kde kategórový líder začína nad 33 000. Pred webom predával cez inzeráty na Bazoši pod striedajúcimi sa menami predajcov, aby obišiel bany. Presne tú dieru v dôvere mal web zaplniť: jeden menovaný človek, jedna adresa, jedno telefónne číslo. Nie je to e-shop — návštevník pošle dopyt a Eduard mu zavolá. Web má päť samostatných hárkov namiesto jedného nekonečného scrollu, katalóg strojov žije v Sanity a Eduard ho upravuje z telefónu vo vlastnej jednoduchej administrácii, kde vie pridať stroj, ceny aj video. Projekt trval 8 dní práce s rozpočtom €300.

Prezentačný web s katalógom v CMS a vlastnou administráciou

Typ projektu

Dopyty na stroje namiesto inzerátov pod cudzími menami

Hlavný cieľ

€300

Cena tohto projektu

Pozrieť živý web

Vybrané obrazovky a vizuály

Vizuálny náhľad projektu ukazuje, ako vyzerá web na rôznych zariadeniach. Responzívny dizajn zabezpečuje perfektné zobrazenie na mobiloch, tabletoch a desktopoch.

Hero s titulkom „Kosím tam, kde vy chcete“ — vetou, ktorú Eduard nadiktoval doslova.

Netriviálne úlohy projektu

Sekcie sa dajú postaviť za deň. Tento projekt stál na niečom inom: dať cene, ktorá je päťkrát nižšia než u lídra, meno a tvár; postaviť katalóg, ktorý sa mení každý deň a spravuje sa z telefónu; a nedať na web ani jeden údaj, ktorý by sa nedal doložiť.

Problém #1

Cena päť- až desaťkrát nižšia než u lídra kategórie

Známa značka v tejto kategórii začína nad 33 000 €, Eduardove stroje stoja 2 400 až 6 200 €. Taký rozdiel je buď katastrofa dôvery, alebo celá značka. Dovtedy predával cez inzeráty na Bazoši pod striedajúcimi sa menami predajcov, takže kupujúci nevedel, komu vlastne píše.

Naše riešenie

Web sme postavili na jednom menovanom človeku, nie na „sieti predajcov“: meno, živnosť registrovaná v Košiciach od roku 1995, IČO, adresa a jedno telefónne číslo, ktoré dvíha on. Cena je vysvetlená jednou vetou — dováža priamo od výrobcu, takže v cene nie je marža predajcu. Práve preto je aj celý cenník zverejnený, hoci konkurencia ho zvyčajne skrýva: zverejnená cena je tu argument, nie riziko.

Technológie a implementácia

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

1
Problém #2

Katalóg, ktorý sa mení každý deň

Strojov bude asi dvadsať a klient ich popísal presne: „jeden vypadne, pribudne, to sa každý deň mení“. Zároveň opísal, ako chce, aby sa web čítal — „keď klikne na ponuku, ukáže sa mu ďalšia strana“ a „tam si klikne a ide ďalej“. To sú dve zadania naraz: architektúra čítania aj architektúra údržby.

Naše riešenie

Web sme rozdelili na päť samostatných hárkov s rozcestníkom na úvodnej stránke — presne ten model čítania, ktorý klient opísal. Katalóg pritom nedostal stránku na stroj, ale riadok na stroj: dvadsať záznamov v CMS sa udržiava ľahko, dvadsať samostatných stránok nie. Rozmery riadku sú z jeho vlastného zadania v centimetroch — dvadsať rokov viedol realitnú kanceláriu a rozmýšľa v ponukách na tlačenej strane. Zrušené adresy z predošlej štruktúry dostali trvalé presmerovanie na kotvu riadku, ktorý ich nahradil, aby odkaz v jeho telefóne nikdy nespadol na 404.

Technológie a implementácia

Päť hárkov + rozcestník, riadok na stroj, trvalé presmerovania na kotvy

2
Problém #3

Web spravuje z telefónu, medzi dvoma hovormi

Povedal to dvakrát: „Tiež musím sám vedieť editovať ponuky, texty, foto, video, ceny.“ Plné CMS to zvládne, ale pýta si vlastný účet, ukazuje typy dokumentov a má publikačný krok. Pre človeka, ktorý pridáva stroj z telefónu priamo od stroja, je to bariéra navyše.

Naše riešenie

Dostal dve vstupné plochy, ktoré zapisujú do tých istých dokumentov. `/studio` je plné CMS a celé — vrátane popiskov a nápovied — je po slovensky. `/admin` je jednoduchá administrácia na tej istej doméne za e-mailom a heslom: zoznam strojov, pridať, upraviť, vymazať, nič viac. Uloženie okamžite zneplatní cache, takže zmena je na webe hneď na prvé načítanie. A keby CMS raz nebolo dostupné, web sa ticho vráti k obsahu uloženému v repozitári — návštevník neuvidí ani prázdne miesto, ani chybu.

Technológie a implementácia

Sanity Studio po slovensky, vlastná administrácia, cache tagy, typový fallback

3
Problém #4

Video z terénu je najlepší dôkaz a zároveň najťažšia položka stránky

Stroj sa nedá predať fotografiou — kupujúci potrebuje vidieť, ako ide do vysokej trávy a do svahu. Klientove zábery sú pritom z telefónu, v nízkom rozlíšení, a nahráva ich sám priamo z terénu. Web s dvadsiatimi riadkami a videom v každom z nich by sa dal na mobilných dátach otvárať veľmi dlho.

Naše riešenie

Video sa nikdy nezobrazuje cez celú šírku, ale vždy v skosenej doske so zrnom — zámerné spracovanie, ktoré z technického obmedzenia robí súčasť vizuálneho jazyka. Čo klient nahrá, prekóduje jeho vlastný prehliadač na 1 280 px a približne 1,4 Mbit/s ešte pred odoslaním; podľa veľkosti sa súbor smeruje buď priamo, alebo cez dočasné úložisko. Náhľadový snímok sa berie z pôvodného klipu, pretože žiadna galéria v telefóne ho nedodá v správnych proporciách. Klip dlhší než dvadsať sekúnd sa v galérii nikdy neprehráva sám, takže návštevník, ktorý prechádza dvadsať riadkov, sťahuje náhľady, nie video.

Technológie a implementácia

Prekódovanie v prehliadači (canvas + MediaRecorder), Vercel Blob, poster z klipu

4
Problém #5

Vizuálny jazyk musel vyjsť z jeho vlastnej značky

Klient má vlastný odznak a chcel ho na webe. Zároveň dal jasné mantinely: podklad určite nie čierny, teplé zemité farby, teplá zelená. A jeho reakcia na prvý deliaci prvok bola najlepšie zadanie, aké mohol dať — spýtal sa, čo tie tvary predstavujú. Motív, na ktorý sa treba pýtať, svoju prácu nerobí.

Naše riešenie

Paletu aj motív sme vytiahli priamo z jeho odznaku a z fotografie, ktorú poslal: papierový podklad, zelená ako atrament, hrdzavá ako signál. Motívom sa stal pokos — pás, ktorý kosačka nechá za sebou pri jednom prejazde, nakreslený ako rovnobežné vlásočnice pod uhlom −14 stupňov, kde hustý rozstup znamená nepokosené a otvorený pokosené. Pomenuje ho jedným slovom každý, kto stál na lúke. Na úvodnej stránke sa navyše ovláda: rozcestník má päť pásov a dotyk každý z nich pokosí, takže navigácia po webe predvádza samotný produkt.

Technológie a implementácia

Paleta z odznaku klienta, motív POKOS, ovládateľný rozcestník

5
Problém #6

Časť technických údajov sa nedala doložiť

Dodávateľský cenník ponúkal parametre, ktoré nikde inde zverejnené neboli, vrátane emisného tvrdenia „EURO5“. Pre stroje tejto triedy je to nesprávny režim — off-road motory spadajú pod inú európsku reguláciu. Na webe by taký údaj vyzeral dôveryhodne a bol by nedoložiteľný, čo je pri predaji techniky riziko pre klienta, nie pre nás.

Naše riešenie

Každá cena a každý parameter na webe je prepísaný z Eduardových vlastných živých inzerátov, ktoré sme zoskupili podľa telefónneho čísla, nie podľa striedajúcich sa mien predajcov. Údaje bez verejného zdroja na web nešli a sú vymenované v poznámkach projektu spolu s tým, čo treba dodať, aby sa mohli doplniť. Emisné tvrdenie čaká na vyhlásenie o zhode. Dva klipy s vodoznakom dodávateľa sme vyradili. To isté pravidlo platí aj pre štruktúrované dáta — aj tie sú zverejnený obsah, ktorý číta Google.

Technológie a implementácia

Prepis z inzerátov, register nedoložených údajov, JSON-LD bez tvrdení navyše

6

Podobné problémy vo vašom biznise? Pomôžeme vám ich vyriešiť moderným tech stackom.

Výsledná štruktúra

Kompletná webová štruktúra navrhnutá pre maximálnu konverziu a user experience. Každá stránka má jasný účel a optimalizovanú navigáciu.

Úvod
Ponuka
Ako to funguje
Kto som
Dopyt
Zásady cookies
Štúdio CMS (neverejné)
Administrácia ponuky (neverejná)

Najdôležitejšie sekcie webu

Každá sekcia riešila konkrétny biznis problém a zvyšovala konverzie

1

Rozcestník, ktorý sa kosí

Úvodný hárok nesie päť pásov na celú šírku, jeden na každú stránku. Každý pás má husté šrafovanie — nepokosenú zem. Pri prejdení myšou alebo dotyku sa rozstup otvára zľava doprava a za ním sa vlieva sýta zelená. Navigácia po webe je doslova kosenie: dotknete sa cieľa a pozeráte, ako pojazd dobehne, skôr než tam prídete. Päť pásov pritom nie je päť rovnakých kariet — ponuka je najvyššia, nesie počet strojov aj cenové dno, dopyt je krátky hrdzavý pás, ktorý sa už nekosí, lebo je koniec pojazdu.

2

Ponuka: jeden riadok na stroj

Každý stroj má vlastný riadok s galériou fotografií a videí, kódom modelu, štyrmi parametrami, cenou a tlačidlom „Mám záujem“. Rozmery riadku sú z Eduardovho zadania v centimetroch — dvadsať rokov viedol realitnú kanceláriu a rozmýšľa v ponukách na tlačenej strane. Detaily sú v rozbaľovacom paneli, takže riadok zostane krátky a kupujúci prejde celý katalóg bez desiatich otočení prstom.

3

Ako to funguje — terén, ovládač, čísla

Hárok vysvetľuje, kde má stroj zmysel: vysoká tráva, kríky, svahy do 60 stupňov — miesta, kde ručná kosačka aj traktor prestávajú byť bezpečné. Ilustrujú to skutočné klipy z klientovho sadu, nie stock zábery. Video je nízkeho rozlíšenia, preto sa nikdy nezobrazuje cez celú šírku, ale vždy v rámiku so zrnom — je to zámerné spracovanie, nie zanedbanie.

4

Kto som — meno namiesto siete predajcov

Hárok hovorí presne toto: volám sa Eduard Drutarovský, živnosť Export – Import mám registrovanú v Košiciach od roku 1995, stroje si vyberám a dovážam sám, komunikujem priamo s výrobcami. A jednou vetou aj to, prečo je cena taká, aká je. Pod textom stojí firma, IČO a adresa. Sekcia zámerne nepoužíva žiadne display písmo — je to jediné miesto na webe, kde hovorí človek, nie plagát.

5

Dopyt namiesto košíka

Posledný hárok nepýta objednávku, ale terén a plochu. Odoslanie odovzdá kupujúceho na WhatsApp alebo priamo na telefón — kanály, ktoré klient reálne používa a v ktorých dokáže odpovedať rýchlo. Tlačidlo „Mám záujem“ pri každom stroji vedie na ten istý hárok s predvyplneným modelom.

Použitý stack

Frontend a dizajnový systém

Papierový podklad namiesto čierneho — priamy pokyn klienta. Zelená je atrament, hrdzavá je signál. Tri garnitúry s oddelenými rolami a stratégia váh 800 proti 200, bez stredných rezov. Nič nie je zaoblené; jediné skosenie je 14 stupňov na ľavom dolnom rohu.

Bricolage Grotesque · Chivo · Martian MonoKontrasty počítané skriptom, nie odhadomRešpektovaný prefers-reduced-motion
Next.js 16
React 19
TypeScript
Tailwind CSS v4

Katalóg v CMS

Sanity namontovaná v samotnej aplikácii na `/studio`, so schémou aj deskom napísanými po slovensky — je to jediná plocha, ktorú klient uvidí. Spravuje stroje, firemný záznam aj texty sekcií; dataset je verejný, pretože celý katalóg je verejný obsah, takže čítanie nepotrebuje žiadny token.

Celé štúdio po slovensky, vrátane nápoviedVerejný dataset — čítanie bez tokenuUloženie sa prejaví na prvé načítanie, nie na druhé
Sanity 6
next-sanity 13
@sanity/image-url
Cache tags

Administrácia pre telefón

`/studio` je plné CMS a pýta si účet v Sanity. `/admin` je ten istý katalóg za e-mailom a heslom na tejto doméne, bez typov dokumentov a bez publikačného kroku: zoznam, pridať stroj, upraviť, vymazať. Fotografie sa v prehliadači zmenšia na 2 400 px, takže každá fotka z telefónu prejde. Video sa v prehliadači prekóduje na 1 280 px a klipy nad limit požiadavky idú cez Vercel Blob — klient sa nikdy nedozvie, ktorou cestou to šlo.

Vlastná relácia, `requireSession()` aj na server actionsPrekódovanie videa v prehliadači (video → canvas → MediaRecorder)Bez tokenu žiadne dáta — editor nikdy neupravuje fallback
Server Actions
Vercel Blob
MediaRecorder API
Sanity API token

Obsahová integrita, SEO a súlad

Každá cena a každý parameter na webe je prepísaný z Eduardových vlastných živých inzerátov. Niekoľko vierohodne znejúcich parametrov na webe zámerne chýba — pochádzajú z dodávateľského cenníka a nie sú nikde zverejnené. Emisné tvrdenie „EURO5“ z dodávateľského listu sme neuviedli vôbec: stroje tejto triedy spadajú pod inú reguláciu a bez vyhlásenia o zhode by to bolo tvrdenie bez podkladu. To isté pravidlo platí pre štruktúrované dáta — aj tie sú zverejnený obsah.

Nič, čo klient nepovedal, sa nedostane ani do JSON-LDDva klipy s cudzím vodoznakom vyradenéGDPR lišta so súhlasom a zásadami cookies
JSON-LD
robots.txt & sitemap.xml
Cookie consent
Vercel

💡 Moderný tech stack = rýchly web + jednoduchá údržba + dlhodobá podpora

Priebeh realizácie

Projekt bežal osem dní, od 23. do 30. augusta 2026. Boli to dva koncepty a päť hovorov s klientom — každý ďalší krok viedlo to, čo povedal on, nie to, čo sa nám zdalo krajšie. Preto sa web trafil rýchlo aj napriek tomu, že zadanie sa počas týždňa spresňovalo.

23. august

Prvý koncept a brief klienta

1 deň

Za deň vznikla prvá kompletná verzia webu, aby mal klient čo komentovať — a komentoval presne a vecne. Z jeho štyroch poznámok sa stal skutočný brief: chce na webe svoj odznak, podklad určite nie čierny, teplé zemité farby, a deliaci prvok, ktorý netreba vysvetľovať. Boli to zadania na art direction, nie kozmetické pripomienky, a práve preto mali cenu hneď v prvý deň.

24.–25. august

Art direction z jeho odznaku

2 dni

Paletu sme vytiahli priamo z klientovho odznaku a z fotografie, ktorú poslal: papierový podklad, zelená ako atrament, hrdzavá ako signál. Deliaci prvok nahradil pokos — pás po jednom prejazde kosačky, ktorý pomenuje každý, kto stál na lúke. V tejto fáze vznikol aj prvý návrh katalógu a s ním otázka, koľko strojov v ňom nakoniec bude.

26. august

Hovor, ktorý určil architektúru

1 deň

Na hovore padli dve čísla, ktoré rozhodli o stavbe webu: strojov bude asi dvadsať a menia sa denne. Zároveň opísal, ako chce, aby sa web čítal — „keď klikne na ponuku, ukáže sa mu ďalšia strana“ a „tam si klikne a ide ďalej“. Podľa toho sme web postavili na piatich hárkoch s rozcestníkom a katalóg na riadku na stroj namiesto stránky na stroj; staršie adresy dostali trvalé presmerovania. V ten deň z ponuky vypadli aj grafy šírky záberu, ktoré označil za informáciu navyše, a video prestalo mať limit 4 MB.

27.–28. august

CMS, vlastná administrácia a farba

2 dni

Nasadili sme Sanity so štúdiom celým po slovensky a k nej jednoduchú administráciu `/admin`, aby klient nepotreboval druhý účet. Vypýtal si sýtejšiu zeleň — rozdelili sme ju preto na textovú, ktorá musí prejsť kontrastom, a plošnú, ktorá sa smie iba liať do plôch, a všetky pomery kontrastu prepočítali skriptom namiesto odhadu. Uloženie v administrácii odvtedy okamžite zneplatní cache, takže je zmena na webe hneď na prvé načítanie.

29.–30. august

Dopyt, overenie a odovzdanie

2 dni

Dotiahli sme dopytový tok a administráciu tak, aby klientovi nič nezmizlo v tichosti: chyba formulára sa ukáže tam, kde sa na ňu pozerá, a každé zamietnuté uloženie povie prečo. Nakoniec sme mu zdokumentovali, ako si sám overí, že dopyt naozaj dorazil — bez toho, aby sa musel na niekoho spoliehať. Web bol odovzdaný 30. augusta a spustený na doméne rc-kosacky-slovensko.sk.

FAQ k projektu

Rýchle zhrnutie case study

Case study ukazuje konkrétny problém, riešenie a výsledok. Pomáha porovnať váš projekt s podobným scenárom.

Definícia: case study je opis reálneho projektu s jasnými vstupmi a výsledkom.

Predávate techniku alebo tovar, ktorý sa neobjednáva kliknutím?

Postavíme web, ktorý povie, kto ste a prečo je tá cena taká — s katalógom, ktorý si spravujete sami z telefónu, a s dopytom, ktorý vám naozaj chodí. Ceny a parametre iba tie, ktoré viete doložiť.

Nechajte nám kontakt (stačí e-mail alebo telefón)

Napísať na WhatsApp

Táto stránka je chránená službou reCAPTCHA od Google. Platia Zásady ochrany osobných údajov a Podmienky poskytovania služieb spoločnosti Google.

✨ Katalóg v CMS • Správa z telefónu • Bez vymyslených parametrov