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
+124
-25
@@ -1,36 +1,92 @@
|
||||
'use client'
|
||||
|
||||
import { siteConfig } from '@/config/site'
|
||||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<footer className="bg-gray-50 border-t border-gray-200">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
|
||||
<footer
|
||||
className="border-t"
|
||||
style={{
|
||||
background: 'var(--color-background-secondary)',
|
||||
borderColor: 'var(--color-border)'
|
||||
}}
|
||||
>
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-8 lg:gap-12">
|
||||
{/* Company Info */}
|
||||
<div className="md:col-span-2">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-4">
|
||||
<a
|
||||
href="/"
|
||||
className="inline-flex items-center gap-2 text-xl font-bold mb-4 transition-colors duration-200"
|
||||
style={{ color: 'var(--color-primary-600)' }}
|
||||
>
|
||||
{siteConfig.general.name}
|
||||
</h3>
|
||||
<p className="text-gray-600 mb-4 max-w-md">
|
||||
<span
|
||||
className="inline-block w-2 h-2 rounded-full animate-pulse-slow"
|
||||
style={{ background: 'var(--color-success-500)' }}
|
||||
/>
|
||||
</a>
|
||||
<p
|
||||
className="mb-6 max-w-md leading-relaxed"
|
||||
style={{ color: 'var(--color-foreground-muted)' }}
|
||||
>
|
||||
{siteConfig.general.description}
|
||||
</p>
|
||||
<div className="flex space-x-4">
|
||||
<div className="text-sm text-gray-500">
|
||||
<p>Email: {siteConfig.contact.email}</p>
|
||||
<p>Cég: {siteConfig.general.name}</p>
|
||||
<p>Székhely: {siteConfig.contact.address}</p>
|
||||
<div className="space-y-2 text-sm" style={{ color: 'var(--color-foreground-muted)' }}>
|
||||
<a
|
||||
href={`mailto:${siteConfig.contact.email}`}
|
||||
className="flex items-center gap-2 group transition-colors duration-200 hover:text-blue-600"
|
||||
style={{ color: 'var(--color-foreground-secondary)' }}
|
||||
>
|
||||
<span
|
||||
className="flex-shrink-0 w-8 h-8 rounded-lg flex items-center justify-center transition-all duration-200 group-hover:scale-110"
|
||||
style={{ background: 'var(--color-primary-100)' }}
|
||||
>
|
||||
✉️
|
||||
</span>
|
||||
<span>{siteConfig.contact.email}</span>
|
||||
</a>
|
||||
<div
|
||||
className="flex items-center gap-2"
|
||||
style={{ color: 'var(--color-foreground-secondary)' }}
|
||||
>
|
||||
<span
|
||||
className="flex-shrink-0 w-8 h-8 rounded-lg flex items-center justify-center"
|
||||
style={{ background: 'var(--color-primary-100)' }}
|
||||
>
|
||||
🏢
|
||||
</span>
|
||||
<span>{siteConfig.contact.address}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Navigation Links */}
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-gray-900 uppercase tracking-wide mb-4">
|
||||
<h3
|
||||
className="text-sm font-semibold uppercase tracking-wider mb-4"
|
||||
style={{ color: 'var(--color-foreground)' }}
|
||||
>
|
||||
Navigáció
|
||||
</h3>
|
||||
<ul className="space-y-2">
|
||||
<ul className="space-y-3">
|
||||
{siteConfig.navigation.footer.map((item) => (
|
||||
<li key={item.href}>
|
||||
<a href={item.href} className="text-gray-600 hover:text-blue-600 transition-colors">
|
||||
<a
|
||||
href={item.href}
|
||||
className="group flex items-center gap-2 text-sm transition-all duration-200"
|
||||
style={{ color: 'var(--color-foreground-muted)' }}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.color = 'var(--color-primary-600)'
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.color = 'var(--color-foreground-muted)'
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className="w-1.5 h-1.5 rounded-full transition-all duration-200 group-hover:scale-150"
|
||||
style={{ background: 'var(--color-primary-500)' }}
|
||||
/>
|
||||
{item.label}
|
||||
</a>
|
||||
</li>
|
||||
@@ -40,32 +96,59 @@ export default function Footer() {
|
||||
|
||||
{/* Services */}
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-gray-900 uppercase tracking-wide mb-4">
|
||||
<h3
|
||||
className="text-sm font-semibold uppercase tracking-wider mb-4"
|
||||
style={{ color: 'var(--color-foreground)' }}
|
||||
>
|
||||
Szolgáltatások
|
||||
</h3>
|
||||
<ul className="space-y-2">
|
||||
<ul className="space-y-3">
|
||||
{siteConfig.services.services.map((service) => (
|
||||
<li key={service.id} className="text-gray-600">
|
||||
<li
|
||||
key={service.id}
|
||||
className="flex items-center gap-2 text-sm"
|
||||
style={{ color: 'var(--color-foreground-muted)' }}
|
||||
>
|
||||
<span className="text-base">{service.icon}</span>
|
||||
{service.title}
|
||||
</li>
|
||||
))}
|
||||
<li className="text-gray-600">Műszaki támogatás</li>
|
||||
<li
|
||||
className="flex items-center gap-2 text-sm"
|
||||
style={{ color: 'var(--color-foreground-muted)' }}
|
||||
>
|
||||
<span className="text-base">🛠️</span>
|
||||
Műszaki támogatás
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom section */}
|
||||
<div className="border-t border-gray-200 pt-8 mt-8">
|
||||
<div className="flex flex-col sm:flex-row justify-between items-center">
|
||||
<p className="text-gray-500 text-sm">
|
||||
<div
|
||||
className="border-t pt-8 mt-8"
|
||||
style={{ borderColor: 'var(--color-border)' }}
|
||||
>
|
||||
<div className="flex flex-col sm:flex-row justify-between items-center gap-4">
|
||||
<p
|
||||
className="text-sm"
|
||||
style={{ color: 'var(--color-foreground-muted)' }}
|
||||
>
|
||||
{siteConfig.footer.copyright}
|
||||
</p>
|
||||
<div className="flex space-x-4 mt-4 sm:mt-0">
|
||||
<div className="flex items-center gap-6">
|
||||
{siteConfig.footer.links.map((link) => (
|
||||
<a
|
||||
key={link.href}
|
||||
href={link.href}
|
||||
className="text-gray-500 hover:text-blue-600 text-sm transition-colors"
|
||||
className="text-sm transition-all duration-200 link-underline relative"
|
||||
style={{ color: 'var(--color-foreground-muted)' }}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.color = 'var(--color-primary-600)'
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.color = 'var(--color-foreground-muted)'
|
||||
}}
|
||||
>
|
||||
{link.label}
|
||||
</a>
|
||||
@@ -73,7 +156,23 @@ export default function Footer() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tech badge */}
|
||||
<div className="mt-8 flex justify-center">
|
||||
<div
|
||||
className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-xs"
|
||||
style={{
|
||||
background: 'var(--color-background-tertiary)',
|
||||
color: 'var(--color-foreground-muted)'
|
||||
}}
|
||||
>
|
||||
<span>Powered by</span>
|
||||
<span className="font-medium" style={{ color: 'var(--color-foreground)' }}>Next.js</span>
|
||||
<span>•</span>
|
||||
<span className="font-medium" style={{ color: 'var(--color-foreground)' }}>Tailwind CSS</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user