Landoló oldal felépítése

Mit tanulsz ebben a modulban?

A landoló oldalad az egyetlen pont, ahol egy idegen ember 5 másodperc alatt eldönti, érdemes-e nálad maradnia. Ez a modul felépíti a hét-szekciós szerkezetet, megmutatja, hogyan generálj HTML+Tailwind kódot Claude Code-dal, és hogyan deployold ingyen Vercel-re. A Copywriting Asszisztens — Főoldal (AI ügynök #2) megírja a szövegeket az 1. modul pozícionálási doca alapján.

01. A hét-szekciós szerkezet

A magyar piac kezdő szakértő-landolóinak ez a 7 szekció működik a legjobban, ebben a sorrendben:

1. Hero — egy mondatban, kinek és miben segítesz, plusz egy CTA gomb.
2. Probléma — mi az a fájdalom, amit a célcsoportod most érez.
3. Megoldás — hogyan oldja meg ezt a te szolgáltatásod.
4. Szolgáltatás — mit kapnak konkrétan (lépések, output).
5. Rólad — egy bekezdés és egy kép, miért te.
6. vélemény — 1-3 visszajelzés (ha még nincs, hagyj helyet és írd: „Az első ügyfeleim visszajelzéseit ide gyűjtöm.").
7. GYIK + CTA — 4-6 gyakori kérdés és egy záró Cal.com gomb.

Ne dobj rá több szekciót — a kezdő látogató 30 másodperc alatt szkennel.

02. Építés Claude Code-dal — VS Code-ban

Ne használj Webflow-t vagy Framert első körben — feleslegesen havidíjas és lock-in.

• Mappa: VS Code-ban hozz létre egy landoló-oldal mappát
• Indítás: Claude Code-ot a claude paranccsal
• Kérés: egyoldalas HTML+Tailwind landoló a 7 szekcióval, saját szövegeiddel
• Tailwind: CDN-en keresztül (egy sor a-be), nem kell build pipeline
• Plan mode (Shift+Tab + Tab) — Claude előbb tervez, te jóváhagyod, csak utána ír kódot
• Output: egyetlen index.html, ami önállóan fut a böngészőben

Az AI ügynök #2 (Copywriting Asszisztens — Főoldal) szöveget generál, beilleszted a Claude Code-os HTML-vázba.

03. Deploy Vercel-re vagy Netlify-ra

Vercel és Netlify is ingyenes statikus oldalakhoz, mindkettő a saját .hu domainedet (Sybell-ről) hozzá tudja kötni. 5 perces folyamat:

1. Regisztrálj Vercel-re vagy Netlify-ra (GitHub-fiókkal)
2. Töltsd fel a weboldal mappáját (Vercel CLI-vel vagy drag-and-drop)
3. DNS-rekordokat (A és CNAME) állítsd be Sybell-en a Vercel/Netlify által megadott IP-re

A weboldalad pár perc múlva él a tedneved.hu címen. A Claude Code-ot ne deployold — azt a saját gépeden futtatod, csak fejlesztéshez kell.

04. A 7-elemes sales-szerkezet — amikor magasabbra veszed

Az 1. leckés szolgáltatás-landingen túl van egy sales-fókuszú változat — akkor egészítsd ki ezzel, amikor sales-oldalt építesz (nem szolgáltatás-bemutatót). 7 elem:

1. főcím — max 6 szavas főcím, konkrét ígéret/eredmény, nem leírás
2. Vizuális — kép vagy grafika közvetlenül a főcím alatt
3. Benefit stack — előnyök és eredmények (nem funkciók) — milyen lesz a vevő élete utána
4. Mechanizmus — hogyan valósul meg az ígéret? Ez építi a bizalmat
5. Történet — személyes hiba vagy ügyfél szituációja, érzelmi kapcsolat
6. Kifogáskezelés / GYIK — leggyakoribb „de mi van ha…" őszinte válaszokkal
7. Garancia — pénzvisszafizetés vagy elégedettségi garancia, oldja a kockázatérzetet

Heti feladat

Generálj egy egyoldalas landolót a 7 szekcióval Claude Code-ban, a saját pozícionálási doc-od alapján, és deployold Vercel-re vagy Netlify-ra a saját domaineden.

Eredmény

Él a saját weboldalad a saját domaineden, 7 szekció a 7 helyen, és a Cal.com gomb a hero-ban várja az első kattintást.