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)
This commit is contained in:
Do Siki
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"buttons": {
|
||||
"contact": "Kapcsolatfelvétel",
|
||||
"learnMore": "További információk",
|
||||
"webmail": "Webmail belépés",
|
||||
"sendMessage": "Üzenet küldése"
|
||||
},
|
||||
"labels": {
|
||||
"required": "*",
|
||||
"features": "Szolgáltatás jellemzők:"
|
||||
},
|
||||
"validation": {
|
||||
"required": "Ez a mező kötelező",
|
||||
"invalidEmail": "Érvénytelen email cím formátum",
|
||||
"minLength": "Legalább {min} karakter szükséges"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
/**
|
||||
* Content Loader - Centralized content management
|
||||
*
|
||||
* This module provides type-safe access to all JSON content files.
|
||||
* Content can be easily modified by editing the JSON files without code changes.
|
||||
*
|
||||
* Usage:
|
||||
* import { content, getPageContent } from '@/content'
|
||||
*
|
||||
* // Access specific page content
|
||||
* const aboutContent = content.pages.about
|
||||
*
|
||||
* // Or use the helper function
|
||||
* const servicesContent = getPageContent('services')
|
||||
*/
|
||||
|
||||
import type {
|
||||
SiteContent,
|
||||
CommonContent,
|
||||
HomePageContent,
|
||||
AboutPageContent,
|
||||
ServicesPageContent,
|
||||
ContactPageContent
|
||||
} from './types'
|
||||
|
||||
// Import JSON files
|
||||
import commonJson from './common.json'
|
||||
import homeJson from './pages/home.json'
|
||||
import aboutJson from './pages/about.json'
|
||||
import servicesJson from './pages/services.json'
|
||||
import contactJson from './pages/contact.json'
|
||||
|
||||
// Type assertions for JSON imports
|
||||
const common: CommonContent = commonJson as CommonContent
|
||||
const home: HomePageContent = homeJson as HomePageContent
|
||||
const about: AboutPageContent = aboutJson as AboutPageContent
|
||||
const services: ServicesPageContent = servicesJson as ServicesPageContent
|
||||
const contact: ContactPageContent = contactJson as ContactPageContent
|
||||
|
||||
// Combined content object
|
||||
export const content: SiteContent = {
|
||||
common,
|
||||
pages: {
|
||||
home,
|
||||
about,
|
||||
services,
|
||||
contact
|
||||
}
|
||||
}
|
||||
|
||||
// Helper function to get page content with type safety
|
||||
export function getPageContent<T extends keyof SiteContent['pages']>(
|
||||
page: T
|
||||
): SiteContent['pages'][T] {
|
||||
return content.pages[page]
|
||||
}
|
||||
|
||||
// Export individual content for direct imports
|
||||
export { common, home, about, services, contact }
|
||||
|
||||
// Re-export types
|
||||
export * from './types'
|
||||
@@ -0,0 +1,53 @@
|
||||
{
|
||||
"meta": {
|
||||
"title": "Rólunk",
|
||||
"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.",
|
||||
"ogDescription": "Ismerje meg a mozdIT Bt. történetét, küldetését és értékeit."
|
||||
},
|
||||
"hero": {
|
||||
"title": "Rólunk",
|
||||
"subtitle": "Több mint 10 éve biztosítunk megbízható IT infrastruktúrát és személyes ügyfélszolgálatot"
|
||||
},
|
||||
"story": {
|
||||
"title": "Történetünk",
|
||||
"paragraphs": [
|
||||
"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.",
|
||||
"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>.",
|
||||
"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."
|
||||
]
|
||||
},
|
||||
"mission": {
|
||||
"title": "Küldetésünk és értékeink",
|
||||
"subtitle": "Minden nap azért dolgozunk, hogy ügyfeleink digitális jelenléte biztonságos, stabil és hatékony legyen.",
|
||||
"values": [
|
||||
{
|
||||
"icon": "🛡️",
|
||||
"title": "Megbízhatóság",
|
||||
"description": "99.9% uptime és 24/7 monitoring biztosítja, hogy szolgáltatásaink mindig elérhetők legyenek."
|
||||
},
|
||||
{
|
||||
"icon": "👥",
|
||||
"title": "Személyes kapcsolat",
|
||||
"description": "Minden ügyfél számít számunkra. Személyre szabott megoldásokat kínálunk és mindig elérhetők vagyunk."
|
||||
},
|
||||
{
|
||||
"icon": "⚡",
|
||||
"title": "Műszaki kiválóság",
|
||||
"description": "Korszerű technológiák és bevált gyakorlatok alkalmazásával biztosítjuk a legmagasabb színvonalú szolgáltatást."
|
||||
}
|
||||
]
|
||||
},
|
||||
"team": {
|
||||
"title": "Szakértő csapat",
|
||||
"subtitle": "Tapasztalt IT szakemberek, akik szenvedélyesen dolgoznak az ügyfeleink sikeréért",
|
||||
"paragraphs": [
|
||||
"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.",
|
||||
"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."
|
||||
]
|
||||
},
|
||||
"cta": {
|
||||
"title": "Legyen Ön is elégedett ügyfelünk!",
|
||||
"subtitle": "Vegye fel velünk a kapcsolatot, és beszéljük meg, hogyan segíthetünk Önnek.",
|
||||
"button": "Kapcsolatfelvétel"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
{
|
||||
"meta": {
|
||||
"title": "Kapcsolat",
|
||||
"description": "Vegye fel velünk a kapcsolatot! Szívesen segítünk minden IT kérdésében."
|
||||
},
|
||||
"hero": {
|
||||
"title": "Kapcsolat",
|
||||
"subtitle": "Vegye fel velünk a kapcsolatot! Szívesen segítünk minden IT kérdésében."
|
||||
},
|
||||
"form": {
|
||||
"title": "Küldjön üzenetet",
|
||||
"successMessage": "Köszönjük üzenetét! Hamarosan felvesszük Önnel a kapcsolatot.",
|
||||
"errorMessage": "Hiba történt az üzenet küldése során. Kérjük, próbálja újra vagy írjon közvetlenül a {email} címre.",
|
||||
"fields": {
|
||||
"name": {
|
||||
"label": "Név",
|
||||
"placeholder": "Az Ön neve",
|
||||
"error": "A név megadása kötelező"
|
||||
},
|
||||
"email": {
|
||||
"label": "Email cím",
|
||||
"placeholder": "pelda@email.hu",
|
||||
"errorRequired": "Az email cím megadása kötelező",
|
||||
"errorInvalid": "Érvénytelen email cím formátum"
|
||||
},
|
||||
"subject": {
|
||||
"label": "Tárgy",
|
||||
"placeholder": "Miben segíthetünk?",
|
||||
"error": "A tárgy megadása kötelező"
|
||||
},
|
||||
"message": {
|
||||
"label": "Üzenet",
|
||||
"placeholder": "Írja le részletesen kérését vagy kérdését...",
|
||||
"errorRequired": "Az üzenet megadása kötelező",
|
||||
"errorMinLength": "Az üzenet legalább 10 karakter hosszú legyen"
|
||||
},
|
||||
"gdpr": {
|
||||
"label": "Elfogadom az <a href=\"/adatkezelesi-tajekoztato\" class=\"text-blue-600 hover:text-blue-700 underline\">adatkezelési tájékoztatót</a> és hozzájárulok személyes adataim kezeléséhez a kapcsolatfelvétel céljából.",
|
||||
"error": "Az adatkezelési tájékoztató elfogadása kötelező"
|
||||
}
|
||||
},
|
||||
"submitButton": "Üzenet küldése",
|
||||
"submittingButton": "Küldés..."
|
||||
},
|
||||
"info": {
|
||||
"title": "Elérhetőségek",
|
||||
"email": {
|
||||
"title": "Email",
|
||||
"responseTime": "24 órán belül válaszolunk"
|
||||
},
|
||||
"company": {
|
||||
"title": "Cég"
|
||||
},
|
||||
"webmail": {
|
||||
"title": "Webmail hozzáférés",
|
||||
"linkText": "Webmail belépés →",
|
||||
"subtitle": "Ügyfeleink számára"
|
||||
}
|
||||
},
|
||||
"faq": {
|
||||
"title": "Gyakori kérdések",
|
||||
"items": [
|
||||
{
|
||||
"question": "Milyen gyorsan válaszolnak?",
|
||||
"answer": "Email üzenetekre 24 órán belül, sürgős esetekben telefonon is elérhetők vagyunk."
|
||||
},
|
||||
{
|
||||
"question": "Van ingyenes konzultáció?",
|
||||
"answer": "Igen! Az első konzultáció mindig ingyenes, hogy megismerjük az Ön igényeit."
|
||||
},
|
||||
{
|
||||
"question": "Milyen fizetési módokat fogadnak el?",
|
||||
"answer": "Banki átutalás, PayPal és kártyás fizetés is lehetséges."
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"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"
|
||||
},
|
||||
"serviceFeatures": {
|
||||
"title": "Szolgáltatás jellemzők:"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,94 @@
|
||||
{
|
||||
"meta": {
|
||||
"title": "Szolgáltatások",
|
||||
"description": "Webhosting, email szolgáltatás és DNS adminisztráció professzionális szinten. Ismerje meg részletes szolgáltatásainkat.",
|
||||
"ogDescription": "Webhosting, email szolgáltatás és DNS adminisztráció professzionális szinten."
|
||||
},
|
||||
"hero": {
|
||||
"title": "Szolgáltatásaink",
|
||||
"subtitle": "Teljes körű IT megoldások kisvállalkozások és magánszemélyek számára"
|
||||
},
|
||||
"details": {
|
||||
"title": "Részletes szolgáltatásleírás",
|
||||
"subtitle": "Minden szolgáltatásunk mögött évtizedes tapasztalat és modern technológia áll",
|
||||
"services": [
|
||||
{
|
||||
"icon": "🌐",
|
||||
"title": "Web Hosting részletesen",
|
||||
"description": "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.",
|
||||
"specs": {
|
||||
"title": "Technikai specifikációk:",
|
||||
"items": [
|
||||
"SSD tárhely 10GB-tól 500GB-ig",
|
||||
"Havi adatforgalom: korlátlan",
|
||||
"SSL tanúsítványok (Let's Encrypt vagy prémium)",
|
||||
"CDN integráció a gyorsabb betöltésért",
|
||||
"Automatikus napi biztonsági mentés",
|
||||
"cPanel vagy egyedi admin felület"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"icon": "✉️",
|
||||
"title": "Email szolgáltatás részletesen",
|
||||
"description": "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.",
|
||||
"specs": {
|
||||
"title": "Email funkciók:",
|
||||
"items": [
|
||||
"Korlátlan email fiókok létrehozása",
|
||||
"5GB-50GB tárhelyet fiókként",
|
||||
"Webmail hozzáférés (Roundcube/SOGo)",
|
||||
"Mobilalkalmazás szinkronizáció",
|
||||
"Spam és vírusszűrés",
|
||||
"Email továbbítás és automatikus válaszok",
|
||||
"Backup és archiválás"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"icon": "⚙️",
|
||||
"title": "DNS adminisztráció részletesen",
|
||||
"description": "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.",
|
||||
"specs": {
|
||||
"title": "DNS szolgáltatások:",
|
||||
"items": [
|
||||
"Domain regisztráció (.hu, .com, .eu, stb.)",
|
||||
"Domain átvitel más szolgáltatótól",
|
||||
"DNS rekord kezelés (A, CNAME, MX, TXT)",
|
||||
"Subdomain beállítások",
|
||||
"Redirect és forwarding szolgáltatások",
|
||||
"DNSSEC támogatás",
|
||||
"API hozzáférés fejlesztőknek"
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
"support": {
|
||||
"title": "Műszaki támogatás",
|
||||
"subtitle": "Minden szolgáltatásunkhoz teljes körű műszaki támogatást biztosítunk",
|
||||
"channels": [
|
||||
{
|
||||
"icon": "✉️",
|
||||
"title": "Email támogatás",
|
||||
"description": "24 órán belüli válasz"
|
||||
},
|
||||
{
|
||||
"icon": "📞",
|
||||
"title": "Telefonos segítség",
|
||||
"description": "Munkaidőben elérhető"
|
||||
},
|
||||
{
|
||||
"icon": "🚨",
|
||||
"title": "Sürgős esetek",
|
||||
"description": "Azonnali beavatkozás"
|
||||
}
|
||||
]
|
||||
},
|
||||
"cta": {
|
||||
"title": "Kezdjük el a közös munkát!",
|
||||
"subtitle": "Vegye fel velünk a kapcsolatot ingyenes konzultációért és egyedi ajánlatért.",
|
||||
"primaryButton": "Kapcsolatfelvétel",
|
||||
"secondaryButton": "Webmail belépés"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,178 @@
|
||||
/**
|
||||
* Content Types - TypeScript definitions for JSON content files
|
||||
* These types ensure type safety when working with page content
|
||||
*/
|
||||
|
||||
// Common content types
|
||||
export interface CTAContent {
|
||||
text: string
|
||||
href: string
|
||||
external?: boolean
|
||||
}
|
||||
|
||||
export interface IconTextItem {
|
||||
icon: string
|
||||
title: string
|
||||
description: string
|
||||
}
|
||||
|
||||
export interface FAQItem {
|
||||
question: string
|
||||
answer: string
|
||||
}
|
||||
|
||||
export interface TechSpec {
|
||||
title: string
|
||||
items: string[]
|
||||
}
|
||||
|
||||
// Page-specific content types
|
||||
export interface HomePageContent {
|
||||
cta: {
|
||||
title: string
|
||||
subtitle: string
|
||||
button: string
|
||||
}
|
||||
serviceFeatures: {
|
||||
title: string
|
||||
}
|
||||
}
|
||||
|
||||
export interface AboutPageContent {
|
||||
meta: {
|
||||
title: string
|
||||
description: string
|
||||
ogDescription: string
|
||||
}
|
||||
hero: {
|
||||
title: string
|
||||
subtitle: string
|
||||
}
|
||||
story: {
|
||||
title: string
|
||||
paragraphs: string[]
|
||||
}
|
||||
mission: {
|
||||
title: string
|
||||
subtitle: string
|
||||
values: IconTextItem[]
|
||||
}
|
||||
team: {
|
||||
title: string
|
||||
subtitle: string
|
||||
paragraphs: string[]
|
||||
}
|
||||
cta: {
|
||||
title: string
|
||||
subtitle: string
|
||||
button: string
|
||||
}
|
||||
}
|
||||
|
||||
export interface ServiceDetailContent {
|
||||
icon: string
|
||||
title: string
|
||||
description: string
|
||||
specs: TechSpec
|
||||
}
|
||||
|
||||
export interface ServicesPageContent {
|
||||
meta: {
|
||||
title: string
|
||||
description: string
|
||||
ogDescription: string
|
||||
}
|
||||
hero: {
|
||||
title: string
|
||||
subtitle: string
|
||||
}
|
||||
details: {
|
||||
title: string
|
||||
subtitle: string
|
||||
services: ServiceDetailContent[]
|
||||
}
|
||||
support: {
|
||||
title: string
|
||||
subtitle: string
|
||||
channels: IconTextItem[]
|
||||
}
|
||||
cta: {
|
||||
title: string
|
||||
subtitle: string
|
||||
primaryButton: string
|
||||
secondaryButton: string
|
||||
}
|
||||
}
|
||||
|
||||
export interface ContactPageContent {
|
||||
meta: {
|
||||
title: string
|
||||
description: string
|
||||
}
|
||||
hero: {
|
||||
title: string
|
||||
subtitle: string
|
||||
}
|
||||
form: {
|
||||
title: string
|
||||
successMessage: string
|
||||
errorMessage: string
|
||||
fields: {
|
||||
name: { label: string; placeholder: string; error: string }
|
||||
email: { label: string; placeholder: string; errorRequired: string; errorInvalid: string }
|
||||
subject: { label: string; placeholder: string; error: string }
|
||||
message: { label: string; placeholder: string; errorRequired: string; errorMinLength: string }
|
||||
gdpr: { label: string; error: string }
|
||||
}
|
||||
submitButton: string
|
||||
submittingButton: string
|
||||
}
|
||||
info: {
|
||||
title: string
|
||||
email: {
|
||||
title: string
|
||||
responseTime: string
|
||||
}
|
||||
company: {
|
||||
title: string
|
||||
}
|
||||
webmail: {
|
||||
title: string
|
||||
linkText: string
|
||||
subtitle: string
|
||||
}
|
||||
}
|
||||
faq: {
|
||||
title: string
|
||||
items: FAQItem[]
|
||||
}
|
||||
}
|
||||
|
||||
export interface CommonContent {
|
||||
buttons: {
|
||||
contact: string
|
||||
learnMore: string
|
||||
webmail: string
|
||||
sendMessage: string
|
||||
}
|
||||
labels: {
|
||||
required: string
|
||||
features: string
|
||||
}
|
||||
validation: {
|
||||
required: string
|
||||
invalidEmail: string
|
||||
minLength: string
|
||||
}
|
||||
}
|
||||
|
||||
// Main content structure
|
||||
export interface SiteContent {
|
||||
common: CommonContent
|
||||
pages: {
|
||||
home: HomePageContent
|
||||
about: AboutPageContent
|
||||
services: ServicesPageContent
|
||||
contact: ContactPageContent
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user