soeren/fotospiel-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(i18n): Complete localization of marketing frontend with react-i18next, prefixed URLs, JSON migrations, and automation

Browse Source
This commit is contained in:
Codex Agent
2025-10-03 13:05:13 +02:00
parent 1845d83583
commit 60f8de9162
46 changed files with 3454 additions and 590 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
resources/js/pages/marketing/Blog.tsx
View File

@@ -1,5 +1,6 @@
import React from 'react';
import { Head, Link, usePage } from '@inertiajs/react';
import { useTranslation } from 'react-i18next';
import MarketingLayout from '@/layouts/marketing/MarketingLayout';
interface Props {
@@ -13,6 +14,7 @@ interface Props {
const Blog: React.FC<Props> = ({ posts }) => {
const { url } = usePage();
const { t } = useTranslation('marketing');
const renderPagination = () => {
if (!posts.links || posts.links.length <= 3) return null;
@@ -37,28 +39,28 @@ const Blog: React.FC<Props> = ({ posts }) => {
};
return (
<MarketingLayout title="Blog - Fotospiel">
<Head title="Blog - Fotospiel" />
<MarketingLayout title={t('blog.title')}>
<Head title={t('blog.title')} />
{/* Hero Section */}
<section className="bg-aurora-enhanced text-white py-20 px-4">
<section className="bg-aurora-enhanced text-gray-900 dark:text-gray-100 py-20 px-4">
<div className="container mx-auto text-center">
<h1 className="text-4xl md:text-6xl font-bold mb-4 font-display">Unser Blog</h1>
<p className="text-xl md:text-2xl mb-8 max-w-3xl mx-auto font-sans-marketing">Tipps, Tricks und Inspiration für perfekte Event-Fotos.</p>
<Link href="#posts" className="bg-white text-[#FFB6C1] px-8 py-4 rounded-full font-semibold text-lg font-sans-marketing hover:bg-gray-100 transition">
Zum Blog
<h1 className="text-4xl md:text-6xl font-bold mb-4 font-display">{t('blog.hero_title')}</h1>
<p className="text-xl md:text-2xl mb-8 max-w-3xl mx-auto font-sans-marketing">{t('blog.hero_description')}</p>
<Link href="#posts" className="bg-white dark:bg-gray-800 text-[#FFB6C1] px-8 py-4 rounded-full font-semibold text-lg font-sans-marketing hover:bg-gray-100 dark:hover:bg-gray-700 transition">
{t('blog.hero_cta')}
</Link>
</div>
</section>
{/* Posts Section */}
<section id="posts" className="py-20 px-4 bg-white">
<section id="posts" className="py-20 px-4 bg-white dark:bg-gray-900">
<div className="container mx-auto max-w-4xl">
<h2 className="text-3xl font-bold text-center mb-12 font-display">Neueste Beiträge</h2>
<h2 className="text-3xl font-bold text-center mb-12 font-display text-gray-900 dark:text-gray-100">{t('blog.posts_title')}</h2>
{posts.data.length > 0 ? (
<>
<div className="grid md:grid-cols-2 gap-8">
{posts.data.map((post) => (
<div key={post.id} className="bg-gray-50 p-6 rounded-lg">
<div key={post.id} className="bg-gray-50 dark:bg-gray-800 p-6 rounded-lg">
{post.featured_image && (
<img
src={post.featured_image}
@@ -66,20 +68,20 @@ const Blog: React.FC<Props> = ({ posts }) => {
className="w-full h-48 object-cover rounded mb-4"
/>
)}
<h3 className="text-xl font-semibold mb-2 font-sans-marketing">
<h3 className="text-xl font-semibold mb-2 font-sans-marketing text-gray-900 dark:text-gray-100">
<Link href={`/blog/${post.slug}`} className="hover:text-[#FFB6C1]">
{post.title}
</Link>
</h3>
<p className="mb-4 text-gray-700 font-serif-custom">{post.excerpt}</p>
<p className="text-sm text-gray-500 mb-4 font-sans-marketing">
Veröffentlicht am {post.published_at}
<p className="mb-4 text-gray-700 dark:text-gray-300 font-serif-custom">{post.excerpt}</p>
<p className="text-sm text-gray-500 dark:text-gray-400 mb-4 font-sans-marketing">
{t('blog.by')} {post.author?.name || t('blog.team')} | {t('blog.published_at')} {post.published_at}
</p>
<Link
href={`/blog/${post.slug}`}
className="text-[#FFB6C1] font-semibold font-sans-marketing hover:underline"
>
Weiterlesen
{t('blog.read_more')}
</Link>
</div>
))}
@@ -87,7 +89,7 @@ const Blog: React.FC<Props> = ({ posts }) => {
{renderPagination()}
</>
) : (
<p className="text-center text-gray-600 font-serif-custom">Keine Beiträge verfügbar.</p>
<p className="text-center text-gray-600 dark:text-gray-400 font-serif-custom">{t('blog.empty')}</p>
)}
</div>
</section>