feat(ZEE-29): implement design system, dark mode, and JSON content management

- Add comprehensive design system with CSS variables, animations, and utility classes
- Implement dark mode with ThemeProvider (system preference + manual toggle)
- Create JSON-based content management system in src/content/
- Update all pages to use structured JSON content
- Add ThemeProvider component with theme toggle button
- Update Header with glass effect and animated mobile menu
- Update Footer with dark mode support
- Update documentation (README.md, CLAUDE.md, knowledge.md, proto/README.md)
- Sync with Linear (ZEE-29 completed)

proto/src/app/szolgaltatasok/page.tsx

@@ -1,12 +1,15 @@
 import { siteConfig } from '@/config/site'
+import { content } from '@/content'
 import type { Metadata } from 'next'
 
+const { services: pageContent } = content.pages
+
 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.',
+  title: `${pageContent.meta.title} | ${siteConfig.general.name}`,
+  description: pageContent.meta.description,
   openGraph: {
-    title: `Szolgáltatások | ${siteConfig.general.name}`,
-    description: 'Webhosting, email szolgáltatás és DNS adminisztráció professzionális szinten.',
+    title: `${pageContent.meta.title} | ${siteConfig.general.name}`,
+    description: pageContent.meta.ogDescription,
     url: `${siteConfig.general.url}/szolgaltatasok`,
   },
 }
@@ -18,10 +21,10 @@ export default function ServicesPage() {
       <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
+            {pageContent.hero.title}
           </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
+            {pageContent.hero.subtitle}
           </p>
         </div>
       </section>
@@ -39,7 +42,7 @@ export default function ServicesPage() {
               <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>
+                <h3 className="text-lg font-semibold text-gray-900 mb-3">{content.common.labels.features}</h3>
                 <ul className="space-y-2">
                   {service.features.map((feature, index) => (
                     <li key={index} className="flex items-start">
@@ -69,97 +72,35 @@ export default function ServicesPage() {
         <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
+              {pageContent.details.title}
             </h2>
             <p className="text-lg text-gray-600">
-              Minden szolgáltatásunk mögött évtizedes tapasztalat és modern technológia áll
+              {pageContent.details.subtitle}
             </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>
+            {pageContent.details.services.map((service) => (
+              <div key={service.title} 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">{service.icon}</span>
+                  </div>
+                  <div className="flex-1">
+                    <h3 className="text-2xl font-bold text-gray-900 mb-4">{service.title}</h3>
+                    <div className="prose prose-lg text-gray-700">
+                      <p>{service.description}</p>
+                      <h4 className="text-lg font-semibold text-gray-900 mt-6 mb-3">{service.specs.title}</h4>
+                      <ul className="space-y-1">
+                        {service.specs.items.map((item, index) => (
+                          <li key={index}>{item}</li>
+                        ))}
+                      </ul>
+                    </div>
                   </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>
@@ -168,24 +109,18 @@ export default function ServicesPage() {
       <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
+            {pageContent.support.title}
           </h2>
           <p className="text-lg text-gray-700 mb-6">
-            Minden szolgáltatásunkhoz teljes körű műszaki támogatást biztosítunk
+            {pageContent.support.subtitle}
           </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>
+            {pageContent.support.channels.map((channel) => (
+              <div key={channel.title}>
+                <h3 className="font-semibold text-gray-900 mb-2">{channel.title}</h3>
+                <p className="text-gray-600">{channel.description}</p>
+              </div>
+            ))}
           </div>
         </div>
       </section>
@@ -194,17 +129,17 @@ export default function ServicesPage() {
       <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!
+            {pageContent.cta.title}
           </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.
+            {pageContent.cta.subtitle}
           </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
+              {pageContent.cta.primaryButton}
             </a>
             <a
               href={siteConfig.hero.cta.primary.href}
@@ -212,7 +147,7 @@ export default function ServicesPage() {
               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
+              {pageContent.cta.secondaryButton}
             </a>
           </div>
         </div>