Landing minták
5 különböző landing page minta, mindegyikhez teljes Tailwind HTML kód. Ezeket bármikor használhatod, amikor új szolgáltatást vagy kampányt indítasz.
Nem építünk sorrendben — referencia jön.
Mindegyik mintához van letölthető HTML fájl, telepítési útmutató, és technikai dokumentáció.
Minden minta a 2. modul stílusában készült (sötét háttér, dokumentáló-hang), de fókuszáltabb céllal. Nem kötelező sorrendben átmenni rajtuk — bármikor visszanyúlhatsz, amikor egy konkrét feladatra konkrét sablon kell.
Mikor melyiket használd
- 4.1 Konzultációs landingCal.com integrációval. Leggyakoribb használat — alacsony küszöb, magas érték.
- 4.2 Lead magnet landingForm + PDF-küldés. Hosszú távú email-lista építés.
- 4.3 Online előadás landingWebinar regisztráció, élő esemény. Ha élőben tudsz építeni.
- 4.4 Szolgáltatás landingÉrték-stack vizuálisan, fő szolgáltatásra. Magas árú csomagokhoz.
- 4.5 Coming soon landingWaitlist, email gyűjtés terméklaunch előtt. Validációs lépés.
Cal.com integrációval
A leggyakoribb használat. A látogató időpontot foglal — alacsony konverziós küszöb, magas érték.
Egy hős-szekció, az ajánlat-mondat, 3-4 fájdalom-pont, az érték-stack vizuálisan, és lent a Cal.com beágyazott naptár. Mobilra optimalizálva, HTTPS-kompatibilis, GA4 méréssel.
Ezzel indulj, ha most jössz a 3. modulból — a konzultáció a legalacsonyabb belépési pont.
Form + PDF-küldés
Email-cím cseréje értékes PDF-re — a hosszú távú lista alapja.
Egy ígéret a hős-szekcióban (mit tanul a PDF-ből), 3 bullet a tartalomról, mockup a borítóról, és egy form. A form Kit-be vagy Sheets-be ír, és a PDF azonnal megérkezik az inboxba.
Később ezekre a feliratkozókra küldesz szolgáltatás-ajánlatot — a 9. modul szervezi az email-szekvenciát.
Webinar regisztráció
Élő esemény dátummal, idővel, regisztrációs form-mal.
A hős-szekcióban a dátum és az idő nagyban, az előadás 3 fő tanulási pontja, az előadó (te) bemutatása rövid bio-val, és a regisztrációs form. A regisztráció után emlékeztető-emailek mennek (-1 nap, -1 óra).
Magyar piacon a webinar funnel ma is működik, ha élőben tudsz építeni — nem mindenki tudja, és ez a te előnyöd.
Érték-stack vizuálisan
A fő szolgáltatásra fókuszál — magas árú csomagokhoz.
Hosszabb oldal: hős, fájdalom-szekció, megoldás-szekció, érték-stack táblázattal (mit kap, mennyit ér Ft-ban), 3 csomag side-by-side, FAQ, garancia, és a CTA-gomb (Cal.com vagy ajánlat-form).
Itt a 3. modul érték-stack-je vizuálisan jelenik meg — az olvasó látja, hogy az összérték többszöröse az árnak.
Waitlist · terméklaunch előtt
Email-gyűjtés, mielőtt a termék elkészül — validációs lépés.
Egy ígéret a hős-szekcióban (mit építesz), pár bullet (mit kapnak az első feliratkozók — pl. korai hozzáférés, 30% kedvezmény), és egy email-form. Visszaszámláló opcionális.
Ezzel teszteled, hogy van-e érdeklődés, mielőtt heteket invesztálsz a termékbe. Ha 100 email gyűlik 2 hét alatt, érdemes építeni; ha 5 — gondold át.
Mi van mind az 5-ben
- Letölthető boilerplate.htmlEgyetlen szöveges fájl, amit index.html-nek nevezel át és módosítasz.
- Mobilra optimalizálvaTailwind CDN-ről. Reszponzív breakpointok, érintő-friendly CTA-k.
- GDPR-konform alapGA4 IP-anonimizálással, opt-in form. Cookie-banner mintakód mellékelve.
- Claude Code SKILL.mdMegmutatja, hogyan installálod, hogy az AI a saját adataidra szabja.
Egy minta installálása
A boilerplate.html-t másolod a projekt-mappádba, átnevezed index.html-re, és a Claude Code az adataidra szabja.
# 1. minta letöltése cp 4-1-konzultacios-landing/boilerplate.html \ ~/Desktop/sajat-projekt/index.html # 2. Claude Code-ban a projektmappában cd ~/Desktop/sajat-projekt claude # 3. a session-ben # „Olvasd be az index.html-t és cseréld le a placeholder-eket # a tudasod-magja.md alapján."
Boring is beautiful. Egy működő sablon jobb, mint öt félig kész.Tár · 17 · Landing minták
Egy döntési sor
Konzultáció = 4.1. Email-lista = 4.2. Élő esemény = 4.3. Magas árú szolgáltatás = 4.4. Termék-validáció = 4.5.
Ha még nem tudod — kezdj a 4.1-gyel. Ez a legtöbbet hozó forma, mert csak időt kell foglalnia a látogatónak. A többi minta opcionális, kampány-specifikus eszköz.
5 minta, letölthető.
Mindegyik használható azonnal. A SKILL.md megmutatja, hogyan illessze a Claude Code a saját adataidra.