si/websitedev
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source 
- 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
2026-01-24 02:30:27 +01:00
parent db464d1c48
commit d1213f9b3f
27 changed files with 3294 additions and 450 deletions
Download Patch File Download Diff File Expand all files Collapse all files
proto/src/app/page.tsx
+198 -66
View File
@@ -1,25 +1,54 @@
import { siteConfig } from '@/config/site'
import { content } from '@/content'
const { home: pageContent } = content.pages
export default function Home() {
return (
<div className="space-y-16">
<div className="space-y-0">
{/* Hero Section */}
<section className="bg-gradient-to-r from-blue-50 to-indigo-50 py-20">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 mb-6 leading-tight">
<section className="bg-gradient-hero py-20 lg:py-28 relative overflow-hidden">
{/* Background decoration */}
<div className="absolute inset-0 overflow-hidden pointer-events-none">
<div
className="absolute -top-40 -right-40 w-80 h-80 rounded-full opacity-30 animate-pulse-slow"
style={{ background: 'var(--color-primary-200)' }}
/>
<div
className="absolute -bottom-40 -left-40 w-96 h-96 rounded-full opacity-20 animate-pulse-slow"
style={{ background: 'var(--color-accent-200)', animationDelay: '1s' }}
/>
</div>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10">
<h1
className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight animate-fade-in-up"
style={{ color: 'var(--color-foreground)' }}
>
{siteConfig.hero.title}
</h1>
<p className="text-lg md:text-xl text-gray-600 max-w-4xl mx-auto mb-8 leading-relaxed">
<p
className="text-lg md:text-xl max-w-4xl mx-auto mb-10 leading-relaxed animate-fade-in-up"
style={{ color: 'var(--color-foreground-muted)', animationDelay: '100ms' }}
>
{siteConfig.hero.description}
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
<div
className="flex flex-col sm:flex-row gap-4 justify-center items-center animate-fade-in-up"
style={{ animationDelay: '200ms' }}
>
<a
href={siteConfig.hero.cta.primary.href}
target={siteConfig.hero.cta.primary.external ? '_blank' : undefined}
rel={siteConfig.hero.cta.primary.external ? 'noopener noreferrer' : undefined}
className="bg-blue-600 hover:bg-blue-700 text-white font-medium px-8 py-4 rounded-md transition-colors text-lg inline-flex items-center gap-2"
className="btn btn-primary text-lg px-8 py-4 group"
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg
className="w-5 h-5 transition-transform duration-200 group-hover:scale-110"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10" />
</svg>
{siteConfig.hero.cta.primary.text}
@@ -27,7 +56,7 @@ export default function Home() {
{siteConfig.hero.cta.secondary && (
<a
href={siteConfig.hero.cta.secondary.href}
className="border-2 border-blue-600 text-blue-600 hover:bg-blue-50 font-medium px-8 py-4 rounded-md transition-colors text-lg"
className="btn btn-secondary text-lg px-8 py-4"
>
{siteConfig.hero.cta.secondary.text}
</a>
@@ -37,19 +66,44 @@ export default function Home() {
</section>
{/* USP Section */}
<section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 bg-gray-50">
<div className="text-center">
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-8">
{siteConfig.about.title}
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
{siteConfig.about.usps.map((usp) => (
<div key={usp.id} className="text-center">
<div className="w-16 h-16 bg-blue-100 group-hover:bg-blue-200 rounded-full flex items-center justify-center mx-auto mb-4 transition-colors">
<section
className="py-20"
style={{ background: 'var(--color-background-secondary)' }}
>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center mb-12">
<h2
className="text-3xl md:text-4xl font-bold mb-4"
style={{ color: 'var(--color-foreground)' }}
>
{siteConfig.about.title}
</h2>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 stagger-children">
{siteConfig.about.usps.map((usp, index) => (
<div
key={usp.id}
className="group text-center p-6 rounded-xl transition-all duration-300 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">{usp.icon}</span>
</div>
<h3 className="text-lg font-semibold text-gray-900 mb-2">{usp.title}</h3>
<p className="text-gray-600">{usp.description}</p>
<h3
className="text-lg font-semibold mb-2 transition-colors duration-200"
style={{ color: 'var(--color-foreground)' }}
>
{usp.title}
</h3>
<p style={{ color: 'var(--color-foreground-muted)' }}>
{usp.description}
</p>
</div>
))}
</div>
@@ -57,64 +111,142 @@ export default function Home() {
</section>
{/* Services Section */}
<section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
<div className="text-center mb-12">
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-6">
{siteConfig.services.title}
</h2>
<p className="text-lg text-gray-600 max-w-3xl mx-auto">
{siteConfig.services.subtitle}
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
{siteConfig.services.services.map((service) => (
<div key={service.id} className="group bg-white p-8 rounded-xl shadow-sm border border-gray-200 hover:shadow-md transition-all duration-300 hover:border-blue-200">
<div className="w-12 h-12 bg-blue-100 group-hover:bg-blue-200 rounded-lg flex items-center justify-center mb-4 transition-colors">
<span className="text-xl">{service.icon}</span>
<section
className="py-20"
style={{ background: 'var(--color-background)' }}
>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center mb-12">
<h2
className="text-3xl md:text-4xl font-bold mb-4"
style={{ color: 'var(--color-foreground)' }}
>
{siteConfig.services.title}
</h2>
<p
className="text-lg max-w-3xl mx-auto"
style={{ color: 'var(--color-foreground-muted)' }}
>
{siteConfig.services.subtitle}
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
{siteConfig.services.services.map((service, index) => (
<div
key={service.id}
className="group card hover-lift"
style={{ animationDelay: `${index * 100}ms` }}
>
<div className="icon-container mb-4">
<span className="text-xl">{service.icon}</span>
</div>
<h3
className="text-xl font-semibold mb-3 transition-colors duration-200 group-hover:text-blue-600"
style={{ color: 'var(--color-foreground)' }}
>
{service.title}
</h3>
<p
className="leading-relaxed mb-4"
style={{ color: 'var(--color-foreground-muted)' }}
>
{service.description}
</p>
<div className="mb-4">
<h4
className="text-sm font-semibold mb-2"
style={{ color: 'var(--color-foreground-secondary)' }}
>
{pageContent.serviceFeatures.title}
</h4>
<ul
className="text-sm space-y-1.5"
style={{ color: 'var(--color-foreground-muted)' }}
>
{service.features.map((feature, idx) => (
<li key={idx} className="flex items-start group/item">
<span
className="mr-2 transition-transform duration-200 group-hover/item:scale-125"
style={{ color: 'var(--color-success-500)' }}
>
✓
</span>
{feature}
</li>
))}
</ul>
</div>
<a
href="/kapcsolat"
className="inline-flex items-center font-medium transition-all duration-200 group/link"
style={{ color: 'var(--color-primary-600)' }}
>
{service.ctaText}
<svg
className="w-4 h-4 ml-1 transition-transform duration-200 group-hover/link:translate-x-1"
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>
<h3 className="text-xl font-semibold text-gray-900 mb-3 group-hover:text-blue-600 transition-colors">{service.title}</h3>
<p className="text-gray-600 leading-relaxed">
{service.description}
</p>
<div className="mt-4">
<h4 className="text-sm font-semibold text-gray-700 mb-2">Szolgáltatás jellemzők:</h4>
<ul className="text-sm text-gray-600 space-y-1">
{service.features.map((feature, index) => (
<li key={index} className="flex items-start">
<span className="text-blue-500 mr-2">✓</span>
{feature}
</li>
))}
</ul>
</div>
<a href="/kapcsolat" className="inline-flex items-center text-blue-600 hover:text-blue-700 font-medium mt-4 transition-colors">
{service.ctaText}
<svg className="w-4 h-4 ml-1" 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>
</div>
</section>
{/* CTA Section */}
<section className="bg-gray-900 text-white py-16">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 className="text-3xl font-bold mb-4">
Kapcsolatfelvétel az első lépés
<section
className="py-20 relative overflow-hidden"
style={{ background: 'var(--color-foreground)' }}
>
{/* Animated background elements */}
<div className="absolute inset-0 overflow-hidden pointer-events-none opacity-10">
<div
className="absolute top-10 left-10 w-32 h-32 rounded-full animate-float"
style={{ background: 'var(--color-primary-500)' }}
/>
<div
className="absolute bottom-10 right-20 w-24 h-24 rounded-full animate-float"
style={{ background: 'var(--color-accent-500)', animationDelay: '0.5s' }}
/>
<div
className="absolute top-1/2 right-1/4 w-16 h-16 rounded-full animate-float"
style={{ background: 'var(--color-primary-400)', animationDelay: '1s' }}
/>
</div>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10">
<h2
className="text-3xl md:text-4xl font-bold mb-4"
style={{ color: 'var(--color-background)' }}
>
{pageContent.cta.title}
</h2>
<p className="text-xl text-gray-300 mb-8">
Mutassuk meg, hogyan segíthetünk Önnek megvalósítani címeit!
<p
className="text-xl mb-8 max-w-2xl mx-auto"
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}
<svg
className="w-5 h-5 ml-2"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
</svg>
</a>
</div>
</section>
</div>
);
)
}