Svajál: prodejní landing pro přírodní bylinný čaj

Svajál

2026-06-20

Svajál je nová slovenská značka s jediným produktem: přírodním bylinným čajem na uvolnění svalstva a regeneraci po sportu. Zadání bylo jasné — postavit jednostránkový prodejní web, který odprezentuje složení, vybuduje důvěru bez existující reputace a přivede návštěvníka k objednávce. Srdcem řešení je objednávkový formulář s živým přepočtem ceny a balíčkovou slevou (1 balení €6,90 vs. 3 balení €18,90). Projekt jsme dodali za 7 dní s rozpočtem €280.

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

Typ projektu

Edukovat, získat důvěru a dovést k objednávce

Hlavní cíl

€280

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.

Jak jsme rozložili zadání

Projekt měl nízký rozpočet, krátký čas a jediný produkt. Proto jsme ho postavili okolo jedné věci, která rozhoduje o prodeji: důvěra, která plynule přejde do objednávky.

Problém #1

Nová značka musela vzbudit důvěru bez recenzí

U konzumovatelného produktu je důvěra klíčová, ale Svajál neměl žádnou historii ani reference.

Naše řešení

Postavili jsme transparentní edukaci o bylinách a doplnili reálné firemní údaje.

Technologie a implementace

Obsahová architektura + Next.js komponenty

1
Problém #2

Objednávka měla být jednoduchá a cenově transparentní

Návštěvník měl vidět přesnou cenu s DPH a výhodu balíčku ještě před odesláním.

Naše řešení

Navrhli jsme formulář s −/+ výběrem množství a živým přepočtem ceny včetně slevy.

Technologie a implementace

React logika + TypeScript stav

2
Problém #3

Bez online platby bylo třeba udržet důvěru v objednávce

Doručení i platba se upřesňují e-mailem, takže formulář musel působit důvěryhodně a jasně.

Naše řešení

Přidali jsme srozumitelnou poznámku „Spôsob doručenia a platby upresníme e-mailom" přímo k formuláři.

Technologie a implementace

Formulářová logika + e-mailová notifikace

3
Problém #4

Bylo třeba udržet pozornost na jedné stránce

Single-product web nesmí rozptylovat — každá sekce měla vést blíž k objednávce.

Naše řešení

Použili jsme kotevní navigaci a opakovaná CTA, aby byl formulář vždy na dosah.

Technologie a implementace

Komponentová architektura + kotevní navigace

4

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.

Byliny
Rituál
Příběh
Složení
Objednávka
Časté otázky

Nejdůležitější sekce webu

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

1

Hero s jasným CTA

Produktová fotka, headline a opakované CTA „Objednať čaj" vedou návštěvníka přímo k objednávce.

2

Edukace o pěti bylinách

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

3

Večerní rituál

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

4

Objednávkový formulář s živým součtem

Výběr množství −/+ s okamžitým přepočtem ceny a balíčkovou slevou; způsob doručení a platby se potvrzuje e-mailem.

Použitý stack

Frontend

Rychlá jednostránková landing optimalizovaná pro SEO, výkon a konverzi k objednávce.

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

Obsah a funkce

Objednávkový formulář s živým součtem a balíčkovou slevou, edukační bloky o bylinách a newsletter.

Živý přepočet cenyBalíčková slevaNewsletter capture
Order form logic
Payment integration
Newsletter signup

Hosting a nasazení

Rychlý deployment, škálování a jednoduchá údržba i při budoucím rozšíření sortimentu.

Fast deploymentŠkálováníStabilita
Vercel
CDN delivery
GitLab

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

Průběh realizace

Abychom se vešli do 7 dní, pracovali jsme po fázích s rychlým schvalováním a záměrně úzkým prvním releasem.

Den 1

Obsah, struktura a copy

1 den

Zadefinovali jsme tok jednostránky, pořadí sekcí a texty orientované na důvěru a objednávku.

Den 2–3

Hero, byliny a rituál

2 dny

Složili jsme hero, edukační bloky bylin a sekci večerního rituálu s mandala ikonografií.

Den 4–6

Objednávkový formulář a složení

3 dny

Naprogramovali jsme formulář s živým součtem, balíčkovou slevou, blok složení a newsletter.

Den 7

Finalizace a deployment

1 den

Proběhlo finální ladění, nasazení přes Vercel a předání klientovi.

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.

Potřebujete prodejní landing pro jeden produkt nebo značku?

Navrhneme strukturu, copy i objednávkový tok tak, aby web budoval důvěru a plynule vedl k objednávce.

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.

✨ Rychlý first release • Jasné CTA • Bez zbytečné komplexity