feat: align landing page structure with modern IT layout concepts

docs/IT landing page szerkezeti elem.md

@@ -0,0 +1,131 @@
+<img src="https://r2cdn.perplexity.ai/pplx-full-logo-primary-dark%402x.png" style="height:64px;margin-right:32px"/>
+
+# 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]
+<span style="display:none">[^10][^11][^12][^13][^14][^15][^6][^7][^8][^9]</span>
+
+<div align="center">⁂</div>
+
+[^1]: <https://www.justinmind.com/ui-design/landing-page-examples>
+
+[^2]: <https://www.figma.com/community/file/1510554368393157980/managed-service-website-ui-design>
+
+[^3]: <https://www.ninjaone.com/blog/managed-services-websites-examples/>
+
+[^4]: <https://blog.hubspot.com/marketing/landing-page-examples-list>
+
+[^5]: <https://themeforest.net/category/marketing/landing-pages/technology/hosting>
+
+[^6]: <https://www.landingfolio.com>
+
+[^7]: <https://dribbble.com/search/landing-page>
+
+[^8]: <https://www.behance.net/search/projects/tech> landing page
+
+[^9]: <https://www.lapa.ninja>
+
+[^10]: <https://www.awardspace.com/use-cases/free-landing-page-hosting/>
+
+[^11]: <https://dribbble.com/tags/hosting-landing-page>
+
+[^12]: <https://www.optimizepress.com/21-landing-page-examples-from-top-tech-companies/>
+
+[^13]: <https://themeforest.net/search/managed> it services
+
+[^14]: <https://www.landingfolio.com/inspiration/landing-page/technology>
+
+[^15]: <https://dribbble.com/tags/managed-services>

proto/src/app/page.tsx

@@ -28,11 +28,25 @@ export default function Home() {
             {pageContent.hero.title}
           </h1>
           <p 
-            className="text-lg md:text-xl max-w-4xl mx-auto mb-10 leading-relaxed animate-fade-in-up"
+            className="text-lg md:text-xl max-w-4xl mx-auto mb-8 leading-relaxed animate-fade-in-up"
             style={{ color: 'var(--color-foreground-muted)', animationDelay: '100ms' }}
           >
             {pageContent.hero.description}
           </p>
+
+          {pageContent.hero.trustBullets && (
+            <div 
+              className="flex flex-wrap justify-center gap-4 md:gap-8 mb-10 text-sm font-medium animate-fade-in-up"
+              style={{ color: 'var(--color-foreground-secondary)', animationDelay: '150ms' }}
+            >
+              {pageContent.hero.trustBullets.map((bullet: string, i: number) => (
+                <div key={i} className="flex items-center gap-2">
+                  <span style={{ color: 'var(--color-primary-500)' }}>✓</span>
+                  {bullet}
+                </div>
+              ))}
+            </div>
+          )}
           <div 
             className="flex flex-col sm:flex-row gap-4 justify-center items-center animate-fade-in-up"
             style={{ animationDelay: '200ms' }}
@@ -76,11 +90,11 @@ export default function Home() {
               className="text-3xl md:text-4xl font-bold mb-4"
               style={{ color: 'var(--color-foreground)' }}
             >
-              {siteConfig.about.title}
+            {pageContent.about.title}
             </h2>
           </div>
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 stagger-children">
-            {siteConfig.about.usps.map((usp, index) => (
+            {pageContent.about.usps.map((usp: any, index: number) => (
               <div 
                 key={usp.id} 
                 className="group text-center p-6 rounded-xl transition-all duration-300 hover-lift animate-fade-in-up"
@@ -121,17 +135,17 @@ export default function Home() {
               className="text-3xl md:text-4xl font-bold mb-4"
               style={{ color: 'var(--color-foreground)' }}
             >
-              {siteConfig.services.title}
+              {pageContent.services.title}
             </h2>
             <p 
               className="text-lg max-w-3xl mx-auto"
               style={{ color: 'var(--color-foreground-muted)' }}
             >
-              {siteConfig.services.subtitle}
+              {pageContent.services.subtitle}
             </p>
           </div>
           <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
-            {siteConfig.services.services.map((service, index) => (
+            {pageContent.services.items.map((service: any, index: number) => (
               <div 
                 key={service.id} 
                 className="group card hover-lift"

proto/src/app/szolgaltatasok/page.tsx

@@ -32,7 +32,7 @@ export default function ServicesPage() {
       {/* Services Grid */}
       <section className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
-          {siteConfig.services.services.map((service) => (
+          {content.pages.home.services.items.map((service: any) => (
             <div key={service.id} className="bg-white rounded-xl shadow-sm border border-gray-200 p-8 hover:shadow-md transition-shadow">
               <div className="w-16 h-16 bg-blue-100 rounded-lg flex items-center justify-center mb-6">
                 <span className="text-2xl">{service.icon}</span>

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
             </h3>
             <ul className="space-y-3">
-              {siteConfig.services.services.map((service) => (
+              {content.pages.home.services.items.map((service: any) => (
                 <li 
                   key={service.id} 
                   className="flex items-center gap-2 text-sm"

proto/src/config/site.ts

@@ -31,90 +31,6 @@ export const siteConfig: SiteConfig = {
     ]
   },
 
-
-  services: {
-    title: 'Szolgáltatásaink',
-    subtitle: 'Komplex megoldásokat kínálunk, amelyek tökéletesen igazodnak a vállalkozás igényeihez.',
-    services: [
-      {
-        id: 'hosting',
-        title: 'Web Hosting',
-        description: 'Stabil és gyors tárhely szolgáltatás megbízható infrastrukturával és folyamatos monitoringgel.',
-        icon: '🔥',
-        features: [
-          '99.9% uptime garancia',
-          'SSD tárhely gyorsabb válaszidőért',
-          '24/7 monitoring és támogatás',
-          'Automatikus backup rendszer',
-          'SSL tanúsítvány belefoglaltva'
-        ],
-        ctaText: 'További információk'
-      },
-      {
-        id: 'email',
-        title: 'Email Szolgáltatás',
-        description: 'Üzembiztos levelezési megoldások modern biztonsággal és anti-spam védelemmel.',
-        icon: '📧',
-        features: [
-          'Domain alapú email címe',
-          'Webmail és IMAP/POP3 támogatása',
-          'Anti-spam és anti-virus védelem',
-          'Mobil szinkronizáció',
-          'Nagy tárterület 10GB/felhasználó'
-        ],
-        ctaText: 'További információk'
-      },
-      {
-        id: 'dns',
-        title: 'DNS Adminisztráció',
-        description: 'Teljeskörű domain névszerver kezelés és optimalizálás gyors névfeloldással.',
-        icon: '🌐',
-        features: [
-          'Biztonságos DNS konfliktus kezelés',
-          'Email routing konfiguráció',
-          'Subdomain management',
-          'DNSSEC támogatás',
-          'FIGYELEM: Senki ne módosítson nélkülem kérem!'
-        ],
-        ctaText: 'További információk'
-      }
-    ]
-  },
-
-  about: {
-    title: 'Miért érdemes minket választani?',
-    description: [
-      'A mozdIT Bt. 2018 óta nyújt megbízható Web Hosting szolgáltatásokat magyar vállalkozások számára.',
-      'Kis ügyfélközpontú csapatunknak köszönhetően személyre szabott és gyors támogatást tudunk biztosítani.'
-    ],
-    usps: [
-      {
-        id: 'personal',
-        title: 'Személyes ügyfélkezelés',
-        description: 'Egyedi figyelem minden ügyfél felé, személyre szabott megoldásokkal.',
-        icon: '👤'
-      },
-      {
-        id: 'fast',
-        title: 'Gyors reagálás',
-        description: 'Azonnali visszajelzés és hatékony problémamegoldás 24 órás támogatással.',
-        icon: '⚡'
-      },
-      {
-        id: 'reliable',
-        title: 'Stabil háttér',
-        description: 'Biztonságos infrastruktúra és rendszeres mentések, megbízhatóság garanciával.',
-        icon: '🛡️'
-      },
-      {
-        id: 'flexible',
-        title: 'Rugalmas támogatás',
-        description: 'A változó igényekhez alkalmazkodó, örökös technikai karbantartás.',
-        icon: '🔧'
-      }
-    ]
-  },
-
   footer: {
     copyright: `© ${new Date().getFullYear()} mozdIT Bt. Minden jog fenntartva.`,
     links: [

proto/src/content/pages/home.json

@@ -3,24 +3,104 @@
     "title": "Megbízható web‑ és email‑szolgáltatás személyre szabott támogatással",
     "subtitle": "Kis ügyfélkör, nagy figyelem: stabil tárhely, üzembiztos levelezés és DNS adminisztráció — gyors reakcióval.",
     "description": "A mozdIT Bt. célja, hogy megbízható, támogató szolgáltatásokkal segítse ügyfeleit a digitális térben való sikerben.",
+    "trustBullets": [
+      "Saját dedikált infrastruktúra",
+      "Webtárhely, domain, e-mail egy helyen",
+      "Kifejezetten kisvállalkozásokra szabva"
+    ],
     "cta": {
       "primary": {
+        "text": "Beszéljük át, mire van szüksége",
+        "href": "/kapcsolat",
+        "external": false
+      },
+      "secondary": {
         "text": "Webmail Ugrás",
         "href": "https://webmail.mozdit.hu",
         "external": true
-      },
-      "secondary": {
-        "text": "Kapcsolatfelvétel",
-        "href": "/kapcsolat"
       }
     }
   },
+  "about": {
+    "title": "Miért érdemes minket választani?",
+    "usps": [
+      {
+        "id": "egyszeru",
+        "title": "Egyszerűen kezelhető szolgáltatások",
+        "description": "Nincs technoblabla. Átlátható és könnyen használható rendszereket biztosítunk, hogy Ön a saját üzletére fókuszálhasson.",
+        "icon": "🎯"
+      },
+      {
+        "id": "nemtomeg",
+        "title": "Nem tömegszolgáltatás",
+        "description": "Egyedi figyelem és rugalmas, személyre szabott csomagok, amelyek tökéletesen igazodnak a vállalkozása igényeihez.",
+        "icon": "👤"
+      },
+      {
+        "id": "egykezben",
+        "title": "Minden egy kézben",
+        "description": "Domain, webtárhely és üzleti e-mail szolgáltatások zökkenőmentes kezelése, mindent egyetlen megbízható helyről.",
+        "icon": "🧩"
+      },
+      {
+        "id": "magyar",
+        "title": "Személyes és gyors ügyintézés",
+        "description": "Azonnali, emberi és magyar nyelvű támogatás – nálunk nem csak egy sorszám, valódi és gyors segítséget kap.",
+        "icon": "⚡"
+      }
+    ]
+  },
+  "services": {
+    "title": "Szolgáltatásaink",
+    "subtitle": "Komplex megoldásokat kínálunk, amelyek tökéletesen igazodnak a vállalkozás igényeihez.",
+    "items": [
+      {
+        "id": "hosting",
+        "title": "Webtárhely (Hosting)",
+        "description": "Stabil és gyors tárhely szolgáltatás saját infrastruktúrán, biztonsági mentésekkel és magas rendelkezésre állással.",
+        "icon": "🔥",
+        "features": [
+          "99.9% uptime garancia",
+          "SSD alapú gyors kiszolgálás",
+          "24/7 rendszeres monitoring",
+          "Automatikus backup rendszer"
+        ],
+        "ctaText": "További információk"
+      },
+      {
+        "id": "email",
+        "title": "E-mail szolgáltatás",
+        "description": "Üzleti, saját domain alapú levelezés magas szintű spamszűréssel, bárhonnan elérhető webmail felülettel.",
+        "icon": "📧",
+        "features": [
+          "Saját domain alapú e-mail címek",
+          "Biztonságos webmail és IMAP/POP3",
+          "Erős spam- és vírusvédelem",
+          "Nagy tárterület"
+        ],
+        "ctaText": "További információk"
+      },
+      {
+        "id": "domain",
+        "title": "Domain és DNS",
+        "description": "Teljes körű domain regisztráció, kezelés és biztonságos névszerver (DNS) adminisztráció.",
+        "icon": "🌐",
+        "features": [
+          "Magyar és nemzetközi domainek",
+          "Biztonságos DNS kezelés",
+          "Email routing (SPF, DKIM, DMARC)",
+          "Gyors ügyintézés"
+        ],
+        "ctaText": "További információk"
+      }
+    ]
+  },
   "cta": {
-    "title": "Kapcsolatfelvétel az első lépés",
-    "subtitle": "Mutassuk meg, hogyan segíthetünk Önnek megvalósítani céljait!",
-    "button": "Kapcsolatfelvétel"
+    "title": "Kérjen személyre szabott ajánlatot",
+    "subtitle": "Legyen szó weboldalról vagy biztonságos levelezésről, megtaláljuk az Ön számára tökéletes megoldást.",
+    "button": "Kérjen ajánlatot"
   },
   "serviceFeatures": {
-    "title": "Szolgáltatás jellemzők:"
+    "title": "A szolgáltatás tartalmazza:"
   }
 }

proto/src/types/site.ts

@@ -1,9 +1,9 @@
 export interface SiteConfig {
   general: GeneralConfig
   navigation: NavigationConfig
-  hero: HeroSectionConfig
-  services: ServiceSectionConfig
-  about: AboutSectionConfig
+  hero?: HeroSectionConfig
+  services?: ServiceSectionConfig
+  about?: AboutSectionConfig
   footer: FooterConfig
   contact: ContactConfig
 }