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/rolunk/page.tsx

@@ -1,153 +1,191 @@
 import { siteConfig } from '@/config/site'
+import { content } from '@/content'
 import type { Metadata } from 'next'
 
+const { about: pageContent } = content.pages
+
 export const metadata: Metadata = {
-  title: `Rólunk | ${siteConfig.general.name}`,
-  description: 'Ismerje meg a mozdIT Bt. történetét, küldetését és értékeit. Több mint 10 éve nyújtunk megbízható IT szolgáltatásokat.',
+  title: `${pageContent.meta.title} | ${siteConfig.general.name}`,
+  description: pageContent.meta.description,
   openGraph: {
-    title: `Rólunk | ${siteConfig.general.name}`,
-    description: 'Ismerje meg a mozdIT Bt. történetét, küldetését és értékeit.',
+    title: `${pageContent.meta.title} | ${siteConfig.general.name}`,
+    description: pageContent.meta.ogDescription,
     url: `${siteConfig.general.url}/rolunk`,
   },
 }
 
 export default function AboutPage() {
   return (
-    <div className="space-y-16 py-8">
+    <div className="space-y-0">
       {/* 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">
-            Rólunk
+      <section className="bg-gradient-hero py-16 lg:py-24 relative overflow-hidden">
+        <div className="absolute inset-0 overflow-hidden pointer-events-none">
+          <div 
+            className="absolute -top-20 -right-20 w-60 h-60 rounded-full opacity-20 animate-pulse-slow"
+            style={{ background: 'var(--color-primary-300)' }}
+          />
+        </div>
+        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10">
+          <h1 
+            className="text-4xl md:text-5xl font-bold mb-6 animate-fade-in-up"
+            style={{ color: 'var(--color-foreground)' }}
+          >
+            {pageContent.hero.title}
           </h1>
-          <p className="text-xl text-gray-600 leading-relaxed">
-            Több mint 10 éve biztosítunk megbízható IT infrastruktúrát és személyes ügyfélszolgálatot
+          <p 
+            className="text-xl leading-relaxed animate-fade-in-up"
+            style={{ color: 'var(--color-foreground-muted)', animationDelay: '100ms' }}
+          >
+            {pageContent.hero.subtitle}
           </p>
         </div>
       </section>
 
       {/* Story Section */}
-      <section className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div className="prose prose-lg mx-auto">
-          <h2 className="text-3xl font-bold text-gray-900 mb-6">Történetünk</h2>
-          
-          <div className="space-y-6 text-gray-700 leading-relaxed">
-            <p>
-              A <strong>mozdIT Bt.</strong> 2010-ben alakult azzal a céllal, hogy kisvállalkozások és 
-              magánszemélyek számára nyújtson megbízható, személyes IT szolgáltatásokat. 
-              Alapítóink több évtizedes tapasztalattal rendelkeznek a rendszeradminisztráció 
-              és webfejlesztés területén.
-            </p>
+      <section 
+        className="py-16"
+        style={{ background: 'var(--color-background)' }}
+      >
+        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="prose prose-lg mx-auto">
+            <h2 
+              className="text-3xl font-bold mb-6"
+              style={{ color: 'var(--color-foreground)' }}
+            >
+              {pageContent.story.title}
+            </h2>
             
-            <p>
-              Kezdetben néhány ügyfél weboldalának üzemeltetésével indultunk, ma pedig 
-              több száz domain és email fiók működését biztosítjuk. Növekedésünk során 
-              mindig szem előtt tartottuk az alapelveinket: <em>megbízhatóság, személyes 
-              kapcsolat és műszaki kiválóság</em>.
-            </p>
-            
-            <p>
-              Csapatunk folyamatosan képezi magát a legújabb technológiák terén, hogy 
-              ügyfeleink mindig korszerű és biztonságos megoldásokat kapjanak. Büszkék 
-              vagyunk arra, hogy sok ügyfelünkkel évek óta tartjuk a kapcsolatot, és 
-              számos projektet vittünk sikerre közösen.
-            </p>
+            <div 
+              className="space-y-6 leading-relaxed"
+              style={{ color: 'var(--color-foreground-secondary)' }}
+            >
+              {pageContent.story.paragraphs.map((paragraph, index) => (
+                <p 
+                  key={index}
+                  dangerouslySetInnerHTML={{ __html: paragraph }}
+                />
+              ))}
+            </div>
           </div>
         </div>
       </section>
 
       {/* Mission & Values */}
-      <section className="bg-gray-50 py-16">
+      <section 
+        className="py-16"
+        style={{ background: 'var(--color-background-secondary)' }}
+      >
         <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">
-              Küldetésünk és értékeink
+            <h2 
+              className="text-3xl font-bold mb-4"
+              style={{ color: 'var(--color-foreground)' }}
+            >
+              {pageContent.mission.title}
             </h2>
-            <p className="text-lg text-gray-600 max-w-3xl mx-auto">
-              Minden nap azért dolgozunk, hogy ügyfeleink digitális jelenléte biztonságos, 
-              stabil és hatékony legyen.
+            <p 
+              className="text-lg max-w-3xl mx-auto"
+              style={{ color: 'var(--color-foreground-muted)' }}
+            >
+              {pageContent.mission.subtitle}
             </p>
           </div>
           
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-            <div className="text-center">
-              <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
-                <span className="text-2xl">🛡️</span>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 stagger-children">
+            {pageContent.mission.values.map((item, index) => (
+              <div 
+                key={item.title}
+                className="group text-center p-8 rounded-xl hover-lift animate-fade-in-up"
+                style={{ 
+                  background: 'var(--color-background)',
+                  border: '1px solid var(--color-border)',
+                  animationDelay: `${index * 100}ms`
+                }}
+              >
+                <div className="icon-container icon-container-lg mx-auto mb-4">
+                  <span className="text-2xl">{item.icon}</span>
+                </div>
+                <h3 
+                  className="text-xl font-semibold mb-3"
+                  style={{ color: 'var(--color-foreground)' }}
+                >
+                  {item.title}
+                </h3>
+                <p style={{ color: 'var(--color-foreground-muted)' }}>
+                  {item.description}
+                </p>
               </div>
-              <h3 className="text-xl font-semibold text-gray-900 mb-3">Megbízhatóság</h3>
-              <p className="text-gray-600">
-                99.9% uptime és 24/7 monitoring biztosítja, hogy szolgáltatásaink mindig 
-                elérhetők legyenek.
-              </p>
-            </div>
-            
-            <div className="text-center">
-              <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
-                <span className="text-2xl">👥</span>
-              </div>
-              <h3 className="text-xl font-semibold text-gray-900 mb-3">Személyes kapcsolat</h3>
-              <p className="text-gray-600">
-                Minden ügyfél számít számunkra. Személyre szabott megoldásokat kínálunk 
-                és mindig elérhetők vagyunk.
-              </p>
-            </div>
-            
-            <div className="text-center">
-              <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
-                <span className="text-2xl">⚡</span>
-              </div>
-              <h3 className="text-xl font-semibold text-gray-900 mb-3">Műszaki kiválóság</h3>
-              <p className="text-gray-600">
-                Korszerű technológiák és bevált gyakorlatok alkalmazásával biztosítjuk 
-                a legmagasabb színvonalú szolgáltatást.
-              </p>
-            </div>
+            ))}
           </div>
         </div>
       </section>
 
       {/* Team Section */}
-      <section className="max-w-4xl 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">
-            Szakértő csapat
-          </h2>
-          <p className="text-lg text-gray-600">
-            Tapasztalt IT szakemberek, akik szenvedélyesen dolgoznak az ügyfeleink sikeréért
-          </p>
-        </div>
-        
-        <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-8">
-          <div className="prose prose-lg mx-auto">
-            <p className="text-gray-700 leading-relaxed">
-              Csapatunk rendszeradminisztrátorokból, webfejlesztőkből és ügyfélszolgálati 
-              szakértőkből áll. Mindannyian több mint 10 éves tapasztalattal rendelkeznek 
-              a maguk területén, és folyamatosan követik a technológiai újdonságokat.
-            </p>
-            
-            <p className="text-gray-700 leading-relaxed">
-              Hiszünk abban, hogy a jó kommunikáció és a műszaki tudás együtt teremti meg 
-              a tökéletes ügyfélélményt. Ezért minden munkatársunk nemcsak technikai 
-              szakértő, hanem kiváló kommunikátor is.
+      <section 
+        className="py-16"
+        style={{ background: 'var(--color-background)' }}
+      >
+        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-12">
+            <h2 
+              className="text-3xl font-bold mb-4"
+              style={{ color: 'var(--color-foreground)' }}
+            >
+              {pageContent.team.title}
+            </h2>
+            <p 
+              className="text-lg"
+              style={{ color: 'var(--color-foreground-muted)' }}
+            >
+              {pageContent.team.subtitle}
             </p>
           </div>
+          
+          <div className="card">
+            <div className="prose prose-lg mx-auto">
+              {pageContent.team.paragraphs.map((paragraph, index) => (
+                <p 
+                  key={index}
+                  className="leading-relaxed"
+                  style={{ color: 'var(--color-foreground-secondary)' }}
+                >
+                  {paragraph}
+                </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">
-            Legyen Ön is elégedett ügyfelünk!
+      <section 
+        className="py-16 relative overflow-hidden"
+        style={{ background: 'var(--color-foreground)' }}
+      >
+        <div className="absolute inset-0 overflow-hidden pointer-events-none opacity-10">
+          <div 
+            className="absolute top-10 right-20 w-24 h-24 rounded-full animate-float"
+            style={{ background: 'var(--color-primary-500)' }}
+          />
+        </div>
+        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10">
+          <h2 
+            className="text-3xl font-bold mb-4"
+            style={{ color: 'var(--color-background)' }}
+          >
+            {pageContent.cta.title}
           </h2>
-          <p className="text-xl text-gray-300 mb-8">
-            Vegye fel velünk a kapcsolatot, és beszéljük meg, hogyan segíthetünk Önnek.
+          <p 
+            className="text-xl mb-8"
+            style={{ color: 'var(--color-background)', opacity: 0.8 }}
+          >
+            {pageContent.cta.subtitle}
           </p>
           <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"
+            className="btn btn-primary text-lg px-8 py-4 hover-glow"
           >
-            Kapcsolatfelvétel
+            {pageContent.cta.button}
           </a>
         </div>
       </section>