Svajál: predajná landing pre prírodný bylinný čaj

Svajál

2026-06-20

Svajál je nová slovenská značka s jediným produktom: prírodným bylinným čajom na uvoľnenie svalstva a regeneráciu po športe. Zadanie bolo jasné — postaviť jednostránkový predajný web, ktorý odprezentuje zloženie, vybuduje dôveru bez existujúcej reputácie a privedie návštevníka k objednávke. Srdcom riešenia je objednávkový formulár so živým prepočtom ceny a balíčkovou zľavou (1 balenie €6,90 vs. 3 balenia €18,90). Projekt sme dodali za 7 dní s rozpočtom €280.

Single-product landing + objednávkový formulár

Typ projektu

Edukovať, získať dôveru a doviesť k objednávke

Hlavný cieľ

€280

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.

Ako sme rozložili zadanie

Projekt mal nízky rozpočet, krátky čas a jediný produkt. Preto sme ho postavili okolo jednej veci, ktorá rozhoduje o predaji: dôvera, ktorá plynule prejde do objednávky.

Problém #1

Nová značka musela vzbudiť dôveru bez recenzií

Pri konzumovateľnom produkte je dôvera kľúčová, no Svajál nemal žiadnu históriu ani referencie.

Naše riešenie

Postavili sme transparentnú edukáciu o bylinách a doplnili reálne firemné údaje.

Technológie a implementácia

Obsahová architektúra + Next.js komponenty

1
Problém #2

Objednávka mala byť jednoduchá a cenovo transparentná

Návštevník mal vidieť presnú cenu s DPH a výhodu balíčka ešte pred odoslaním.

Naše riešenie

Navrhli sme formulár s −/+ výberom množstva a živým prepočtom ceny vrátane zľavy.

Technológie a implementácia

React logika + TypeScript stav

2
Problém #3

Bez online platby bolo treba udržať dôveru v objednávke

Doručenie aj platba sa upresňujú e-mailom, takže formulár musel pôsobiť dôveryhodne a jasne.

Naše riešenie

Pridali sme zrozumiteľnú poznámku „Spôsob doručenia a platby upresníme e-mailom" priamo k formuláru.

Technológie a implementácia

Formulárová logika + e-mail notifikácia

3
Problém #4

Bolo treba udržať pozornosť na jednej stránke

Single-product web nesmie rozptyľovať — každá sekcia mala viesť bližšie k objednávke.

Naše riešenie

Použili sme kotvovú navigáciu a opakované CTA, aby bol formulár vždy na dosah.

Technológie a implementácia

Komponentová architektúra + kotvová navigácia

4

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.

Byliny
Rituál
Príbeh
Zloženie
Objednávka
Časté otázky

Najdôležitejšie sekcie webu

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

1

Hero s jasným CTA

Produktová fotka, headline a opakované CTA „Objednať čaj" vedú návštevníka priamo k objednávke.

2

Edukácia o piatich bylinách

Curcuma longa, Withania somnifera, Rhodiola rosea, Lavandula angustifolia a Passiflora incarnata s latinskými názvami a mandala ikonografiou.

3

Večerný rituál

Štvorkrokový návod („Jedno vrecúško zalejte horúcou vodou a nechajte 5–7 minút lúhovať") mení produkt na každodenný regeneračný rituál.

4

Objednávkový formulár so živým súčtom

Výber množstva −/+ s okamžitým prepočtom ceny a balíčkovou zľavou; spôsob doručenia a platby sa potvrdzuje e-mailom.

Použitý stack

Frontend

Rýchla jednostránková landing optimalizovaná pre SEO, výkon a konverziu k objednávke.

SEO-readyVysoký výkonKonverzný základ
TypeScript
React
Next.js
Tailwind CSS

Obsah a funkcie

Objednávkový formulár so živým súčtom a balíčkovou zľavou, edukačné bloky o bylinách a newsletter.

Živý prepočet cenyBalíčková zľavaNewsletter capture
Order form logic
Payment integration
Newsletter signup

Hosting a nasadenie

Rýchly deployment, škálovanie a jednoduchá údržba aj pri budúcom rozšírení sortimentu.

Fast deploymentŠkálovanieStabilita
Vercel
CDN delivery
GitLab

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

Priebeh realizácie

Aby sme sa zmestili do 7 dní, pracovali sme po fázach s rýchlym schvaľovaním a zámerne úzkym prvým releasom.

Deň 1

Obsah, štruktúra a copy

1 deň

Zadefinovali sme tok jednostránky, poradie sekcií a texty orientované na dôveru a objednávku.

Deň 2–3

Hero, byliny a rituál

2 dni

Poskladali sme hero, edukačné bloky bylín a sekciu večerného rituálu s mandala ikonografiou.

Deň 4–6

Objednávkový formulár a zloženie

3 dni

Naprogramovali sme formulár so živým súčtom, balíčkovou zľavou, blok zloženia a newsletter.

Deň 7

Finalizácia a deployment

1 deň

Prebehlo finálne ladenie, nasadenie cez Vercel a odovzdanie klientovi.

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.

Potrebujete predajnú landing pre jeden produkt alebo značku?

Navrhneme štruktúru, copy aj objednávkový tok tak, aby web budoval dôveru a plynulo viedol k objednávke.

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.

✨ Rýchly first release • Jasné CTA • Bez zbytočnej komplexity