From 438ac5439b84da73dc7003ac9cbcd86a1236d0ca Mon Sep 17 00:00:00 2001 From: Do Siki Date: Sun, 26 Apr 2026 23:01:08 +0200 Subject: [PATCH] feat: align landing page structure with modern IT layout concepts --- docs/IT landing page szerkezeti elem.md | 131 ++++++++++++++++++++++++ proto/src/app/page.tsx | 26 +++-- proto/src/app/szolgaltatasok/page.tsx | 2 +- proto/src/components/Footer.tsx | 3 +- proto/src/config/site.ts | 84 --------------- proto/src/content/pages/home.json | 96 +++++++++++++++-- proto/src/types/site.ts | 6 +- 7 files changed, 245 insertions(+), 103 deletions(-) create mode 100644 docs/IT landing page szerkezeti elem.md diff --git a/docs/IT landing page szerkezeti elem.md b/docs/IT landing page szerkezeti elem.md new file mode 100644 index 0000000..b879d79 --- /dev/null +++ b/docs/IT landing page szerkezeti elem.md @@ -0,0 +1,131 @@ + + +# Inkább egy konkrét IT landing page szerkezeti elemeit elemezzük ki + +Igen — vegyünk inkább egy **tipikus modern IT landing page-et**, és bontsuk szét szerkezeti elemekre. Egy jó IT/MSP/hosting landing page általában nem attól modern, hogy tele van effektekkel, hanem attól, hogy világos értékajánlata van, jól vezeti a látogatót, mobilbarát, könnyen olvasható, és minden szekciónak egyértelmű szerepe van a bizalomépítésben vagy a kapcsolatfelvételben.[^1][^2][^3] + +## Fő logika + +A modern landing page lényege, hogy néhány másodperc alatt megválaszolja ezt az 5 kérdést: mit kínáltok, kinek, miért megbízható, miben vagytok jobbak, és mi a következő lépés. Az MSP/IT szolgáltatói oldalaknál különösen fontos a világos nyelvezet, a rövid szakaszok, az olvasható tördelés, valamint az, hogy minden oldalon legyen egy jól látható következő lépés, például ajánlatkérés vagy kapcsolatfelvétel.[^4][^3] + +## Tipikus felépítés + +Egy jól működő IT landing page szerkezete általában így néz ki: hero blokk, rövid szolgáltatás-áttekintés, bizalmi elemek, előnyök vagy megkülönböztető értékek, részletesebb szolgáltatásblokk, gyakori kérdések, majd kapcsolatfelvételi CTA. A managed service sablonok és inspirációs oldalak is ezt a service-focused struktúrát emelik ki, külön blokkokkal a szolgáltatásoknak, iparágaknak, eredményeknek, visszajelzéseknek és kapcsolatnak.[^2][^3] + +## Hero szekció + +A hero rész a legfontosabb: itt kell lennie egy rövid, konkrét főcímnek, egy 1–2 mondatos magyarázatnak és egy elsődleges CTA-nak. A jó landing page-eknél a hero nem általános marketingmondatokkal operál, hanem rögtön leírja az alapajánlatot, miközben a tiszta tipográfia és a sok whitespace segíti a gyors megértést.[^1][^4] + +Például a te esetedben a hero szerkezete lehetne: főcím, alcím, 2 CTA, és 3 rövid bizalmi bullet, mint „Saját infrastruktúra”, „Webtárhely, domain, e-mail egy helyen”, „Kisvállalkozásokra szabva”. Ez közelebb áll ahhoz, amit egy kisebb, megbízható szolgáltató hitelesen tud mondani, mint egy túl általános „digitális megoldások” típusú szöveg.[^2][^3] + +## Szolgáltatási blokk + +A második fontos elem a szolgáltatások gyors áttekintése, általában 3–4 kártyában vagy oszlopban. A managed IT és hosting sablonok is kiemelik, hogy a látogatónak hamar látnia kell, pontosan milyen szolgáltatásokat kap, ezért tipikus elemek a service overview, rövid leírás, és valamilyen ügyféligényhez kötött előny.[^2][^5] + +Nálatok ez lehetne: + +- Webtárhely +- Domain-kezelés +- E-mail szolgáltatás +- Üzemeltetési támogatás + +A modern megoldás itt nem feltétlenül a sok ikon vagy grafika, hanem az, hogy minden kártya ugyanarra a sémára épül: **mi ez + kinek jó + miért hasznos**.[^3][^2] + +## Bizalmi elemek + +Az IT területen a bizalom külön blokkot érdemel, mert a látogató nemcsak árat, hanem stabilitást keres. A szakmai ajánlások szerint a jó MSP oldalak használjanak social proofot, hitelességi elemeket, jól látható megbízhatósági jeleket, és friss, pontos tartalmat.[^3] + +Ez a gyakorlatban jelentheti: + +- „Saját dedikált infrastruktúra” +- „Magyar nyelvű támogatás” +- „Kis- és középvállalkozásoknak, magánszemélyeknek” +- „Átlátható szolgáltatások” +- „Gyors ügyintézés” + +Ha még nincsenek referenciák vagy esettanulmányok, már ezeket az egyszerű működési ígéreteket is lehet szépen, modern módon kiemelni.[^2][^3] + +## Miért minket + +A modern landing page-ek egyik közös jellemzője, hogy nem pusztán felsorolják a szolgáltatásokat, hanem megmutatják, miben más a szolgáltató. A jó példák a látogatói problémák felől fogalmaznak, egyszerű nyelven, nem túl technikai módon, és inkább eredményeket hangsúlyoznak, nem specifikációkat.[^1][^3] + +Nálatok ez a blokk lehetne ilyen címekkel: + +- Egyszerűen kezelhető szolgáltatások +- Nem tömegszolgáltatás, hanem rugalmas csomagok +- Egy kézben a web, domain és e-mail +- Kisebb ügyfelek igényeire szabva + +Ez különösen jól működik kis IT cégnél, mert nem kell nagyvállalati hangot megütni; pont az emberközelibb, rugalmas működés lehet az előny.[^3] + +## CTA és kapcsolat + +A modern landing page egyik legfontosabb szabálya, hogy minden oldalrészből világos legyen, mi a következő lépés. A szakmai ajánlások szerint minden oldalon egyértelmű CTA kell, legyen az ajánlatkérés, kapcsolatfelvétel vagy árajánlatkérés.[^3] + +Nálatok ez lehet például: + +- „Kérjen ajánlatot” +- „Vegye fel velünk a kapcsolatot” +- „Beszéljük át, mire van szüksége” +- „Kérjen személyre szabott ajánlatot” + +Ezek jobban működnek, mint a túl általános „Tudjon meg többet”, mert konkrétabbak és üzletileg is erősebbek.[^4][^3] + +## Javasolt vázlat + +Ha a te cégedre szabom, én egy ilyen szerkezetet javasolnék: + +1. Hero: főcím, alcím, elsődleges CTA, rövid bizalmi sor. +2. 3–4 szolgáltatáskártya: webtárhely, domain, e-mail, támogatás. +3. „Miért minket” blokk: 3–5 rövid előny. +4. Rövid bemutatkozás a csapatról vagy működésről. +5. CTA szekció kapcsolatfelvételi gombbal.[^2][^3] + +## Ami modernné teszi + +A modern hatást leginkább ezek adják: + +- Rövid, egyértelmű főcímek.[^1] +- Sok levegő, kevés zsúfoltság, tiszta tipográfia.[^3][^1] +- Kevés, de jól elhelyezett CTA.[^4][^3] +- Nem technoblablázó, hanem ügyféloldali nyelvezet.[^3] +- Mobilbarát, könnyen szkennelhető elrendezés.[^3] + +Egy konkrét Weboldal minta: + +[text](https://sage.agency/industry/it-company-website-designs/) + +Ha akarod, a következő lépésben megcsinálom neked **a ti konkrét landing page-etek szerkezeti vázát magyarul**, szekciónként, kész címsorokkal és 1-2 mondatos szövegjavaslatokkal.[^2][^3] +[^10][^11][^12][^13][^14][^15][^6][^7][^8][^9] + +
⁂
+ +[^1]: + +[^2]: + +[^3]: + +[^4]: + +[^5]: + +[^6]: + +[^7]: + +[^8]: landing page + +[^9]: + +[^10]: + +[^11]: + +[^12]: + +[^13]: it services + +[^14]: + +[^15]: diff --git a/proto/src/app/page.tsx b/proto/src/app/page.tsx index 102b37d..6a23531 100755 --- a/proto/src/app/page.tsx +++ b/proto/src/app/page.tsx @@ -28,11 +28,25 @@ export default function Home() { {pageContent.hero.title}

{pageContent.hero.description}

+ + {pageContent.hero.trustBullets && ( +
+ {pageContent.hero.trustBullets.map((bullet: string, i: number) => ( +
+ ✓ + {bullet} +
+ ))} +
+ )}
- {siteConfig.about.title} + {pageContent.about.title}
- {siteConfig.about.usps.map((usp, index) => ( + {pageContent.about.usps.map((usp: any, index: number) => (
- {siteConfig.services.title} + {pageContent.services.title}

- {siteConfig.services.subtitle} + {pageContent.services.subtitle}

- {siteConfig.services.services.map((service, index) => ( + {pageContent.services.items.map((service: any, index: number) => (
- {siteConfig.services.services.map((service) => ( + {content.pages.home.services.items.map((service: any) => (
{service.icon} diff --git a/proto/src/components/Footer.tsx b/proto/src/components/Footer.tsx index 7759ffa..104c5f5 100755 --- a/proto/src/components/Footer.tsx +++ b/proto/src/components/Footer.tsx @@ -1,6 +1,7 @@ 'use client' import { siteConfig } from '@/config/site' +import { content } from '@/content' export default function Footer() { return ( @@ -103,7 +104,7 @@ export default function Footer() { Szolgáltatások
    - {siteConfig.services.services.map((service) => ( + {content.pages.home.services.items.map((service: any) => (