feat: enhance README and TODO documentation, implement mobile menu functionality in Header component

- Updated README.md with project details, quick start instructions, and tech stack.
- Expanded TODO.md to reflect current project status and backlog items, including Linear ticket synchronization.
- Added mobile menu toggle functionality in Header component with corresponding tests for user interactions.
- Configured Next.js for Docker deployment and optimized build settings.

proto/src/app/szolgaltatasok/page.tsx

@@ -0,0 +1,222 @@
+import { siteConfig } from '@/config/site'
+import type { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: `Szolgáltatások | ${siteConfig.general.name}`,
+  description: 'Webhosting, email szolgáltatás és DNS adminisztráció professzionális szinten. Ismerje meg részletes szolgáltatásainkat.',
+  openGraph: {
+    title: `Szolgáltatások | ${siteConfig.general.name}`,
+    description: 'Webhosting, email szolgáltatás és DNS adminisztráció professzionális szinten.',
+    url: `${siteConfig.general.url}/szolgaltatasok`,
+  },
+}
+
+export default function ServicesPage() {
+  return (
+    <div className="space-y-16 py-8">
+      {/* Hero Section */}
+      <section className="bg-gradient-to-r from-blue-50 to-indigo-50 py-16">
+        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+          <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
+            Szolgáltatásaink
+          </h1>
+          <p className="text-xl text-gray-600 leading-relaxed">
+            Teljes körű IT megoldások kisvállalkozások és magánszemélyek számára
+          </p>
+        </div>
+      </section>
+
+      {/* 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) => (
+            <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>
+              </div>
+              
+              <h2 className="text-2xl font-bold text-gray-900 mb-4">{service.title}</h2>
+              <p className="text-gray-600 leading-relaxed mb-6">{service.description}</p>
+              
+              <div className="mb-6">
+                <h3 className="text-lg font-semibold text-gray-900 mb-3">Szolgáltatás jellemzők:</h3>
+                <ul className="space-y-2">
+                  {service.features.map((feature, index) => (
+                    <li key={index} className="flex items-start">
+                      <span className="text-blue-500 mr-3 mt-0.5">✓</span>
+                      <span className="text-gray-700">{feature}</span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+              
+              <a 
+                href="/kapcsolat" 
+                className="inline-flex items-center text-blue-600 hover:text-blue-700 font-medium transition-colors"
+              >
+                {service.ctaText}
+                <svg className="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                </svg>
+              </a>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* Detailed Services */}
+      <section className="bg-gray-50 py-16">
+        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-12">
+            <h2 className="text-3xl font-bold text-gray-900 mb-4">
+              Részletes szolgáltatásleírás
+            </h2>
+            <p className="text-lg text-gray-600">
+              Minden szolgáltatásunk mögött évtizedes tapasztalat és modern technológia áll
+            </p>
+          </div>
+
+          <div className="space-y-12">
+            {/* Web Hosting Details */}
+            <div className="bg-white rounded-xl p-8 shadow-sm">
+              <div className="flex items-start space-x-4">
+                <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0">
+                  <span className="text-xl">🌐</span>
+                </div>
+                <div className="flex-1">
+                  <h3 className="text-2xl font-bold text-gray-900 mb-4">Web Hosting részletesen</h3>
+                  <div className="prose prose-lg text-gray-700">
+                    <p>
+                      Weboldalak biztonságos és gyors üzemeltetése SSD tárolással, automatikus biztonsági mentéssel 
+                      és 24/7 monitoringgal. Támogatjuk a PHP, Python, Node.js technológiákat és MySQL/PostgreSQL 
+                      adatbázisokat.
+                    </p>
+                    <h4 className="text-lg font-semibold text-gray-900 mt-6 mb-3">Technikai specifikációk:</h4>
+                    <ul className="space-y-1">
+                      <li>SSD tárhely 10GB-tól 500GB-ig</li>
+                      <li>Havi adatforgalom: korlátlan</li>
+                      <li>SSL tanúsítványok (Let's Encrypt vagy prémium)</li>
+                      <li>CDN integráció a gyorsabb betöltésért</li>
+                      <li>Automatikus napi biztonsági mentés</li>
+                      <li>cPanel vagy egyedi admin felület</li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Email Service Details */}
+            <div className="bg-white rounded-xl p-8 shadow-sm">
+              <div className="flex items-start space-x-4">
+                <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0">
+                  <span className="text-xl">✉️</span>
+                </div>
+                <div className="flex-1">
+                  <h3 className="text-2xl font-bold text-gray-900 mb-4">Email szolgáltatás részletesen</h3>
+                  <div className="prose prose-lg text-gray-700">
+                    <p>
+                      Professzionális email fiókok saját domain névvel, spam szűréssel és vírusvédelemmel. 
+                      Webmail felület és IMAP/POP3/SMTP támogatás minden népszerű email klienssel.
+                    </p>
+                    <h4 className="text-lg font-semibold text-gray-900 mt-6 mb-3">Email funkciók:</h4>
+                    <ul className="space-y-1">
+                      <li>Korlátlan email fiókok létrehozása</li>
+                      <li>5GB-50GB tárhelyet fiókként</li>
+                      <li>Webmail hozzáférés (Roundcube/SOGo)</li>
+                      <li>Mobilalkalmazás szinkronizáció</li>
+                      <li>Spam és vírusszűrés</li>
+                      <li>Email továbbítás és automatikus válaszok</li>
+                      <li>Backup és archiválás</li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* DNS Administration Details */}
+            <div className="bg-white rounded-xl p-8 shadow-sm">
+              <div className="flex items-start space-x-4">
+                <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0">
+                  <span className="text-xl">⚙️</span>
+                </div>
+                <div className="flex-1">
+                  <h3 className="text-2xl font-bold text-gray-900 mb-4">DNS adminisztráció részletesen</h3>
+                  <div className="prose prose-lg text-gray-700">
+                    <p>
+                      Teljes DNS kezelés domain regisztrációval, átvitellel és professzionális beállításokkal. 
+                      Gyors propagáció és megbízható névszerverek világszerte.
+                    </p>
+                    <h4 className="text-lg font-semibold text-gray-900 mt-6 mb-3">DNS szolgáltatások:</h4>
+                    <ul className="space-y-1">
+                      <li>Domain regisztráció (.hu, .com, .eu, stb.)</li>
+                      <li>Domain átvitel más szolgáltatótól</li>
+                      <li>DNS rekord kezelés (A, CNAME, MX, TXT)</li>
+                      <li>Subdomain beállítások</li>
+                      <li>Redirect és forwarding szolgáltatások</li>
+                      <li>DNSSEC támogatás</li>
+                      <li>API hozzáférés fejlesztőknek</li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Support Section */}
+      <section className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="bg-blue-50 rounded-xl p-8 text-center">
+          <h2 className="text-2xl font-bold text-gray-900 mb-4">
+            Műszaki támogatás
+          </h2>
+          <p className="text-lg text-gray-700 mb-6">
+            Minden szolgáltatásunkhoz teljes körű műszaki támogatást biztosítunk
+          </p>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 text-sm">
+            <div>
+              <h3 className="font-semibold text-gray-900 mb-2">Email támogatás</h3>
+              <p className="text-gray-600">24 órán belüli válasz</p>
+            </div>
+            <div>
+              <h3 className="font-semibold text-gray-900 mb-2">Telefonos segítség</h3>
+              <p className="text-gray-600">Munkaidőben elérhető</p>
+            </div>
+            <div>
+              <h3 className="font-semibold text-gray-900 mb-2">Sürgős esetek</h3>
+              <p className="text-gray-600">Azonnali beavatkozás</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* CTA Section */}
+      <section className="bg-gray-900 text-white py-16">
+        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+          <h2 className="text-3xl font-bold mb-4">
+            Kezdjük el a közös munkát!
+          </h2>
+          <p className="text-xl text-gray-300 mb-8">
+            Vegye fel velünk a kapcsolatot ingyenes konzultációért és egyedi ajánlatért.
+          </p>
+          <div className="flex flex-col sm:flex-row gap-4 justify-center">
+            <a
+              href="/kapcsolat"
+              className="inline-block bg-blue-600 hover:bg-blue-700 text-white font-medium px-8 py-3 rounded-md transition-colors"
+            >
+              Kapcsolatfelvétel
+            </a>
+            <a
+              href={siteConfig.hero.cta.primary.href}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-block border-2 border-white text-white hover:bg-white hover:text-gray-900 font-medium px-8 py-3 rounded-md transition-colors"
+            >
+              Webmail belépés
+            </a>
+          </div>
+        </div>
+      </section>
+    </div>
+  )
+}