From 2b8733dea077876daa18b8f225ceb7c064a88463 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=B6rdle=20Bot?= <bot@hoerdle.local>
Date: Mon, 1 Dec 2025 17:15:03 +0100
Subject: [PATCH] refactor: update layout and styling for upcoming specials and
 language switcher

- Adjusted the layout of the upcoming specials section for improved readability and alignment.
- Enhanced the styling of the language switcher for better visibility and accessibility.
- Simplified the structure of the tour genres section to improve overall user experience.
---
 app/[locale]/page.tsx | 51 ++++++++++++++++++++++---------------------
 1 file changed, 26 insertions(+), 25 deletions(-)

diff --git a/app/[locale]/page.tsx b/app/[locale]/page.tsx
index 2ebcaa5..fba6928 100644
--- a/app/[locale]/page.tsx
+++ b/app/[locale]/page.tsx
@@ -45,10 +45,9 @@ export default async function Home({
 
     return (
         <>
-            <div id="tour-genres" style={{ textAlign: 'center', padding: '1rem', background: '#f3f4f6' }}>
-                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.5rem', maxWidth: '1200px', margin: '0 auto', padding: '0 1rem' }}>
-                    <div style={{ flex: 1 }} />
-                    <div style={{ display: 'flex', justifyContent: 'center', gap: '1rem', flexWrap: 'wrap', alignItems: 'center', flex: 2 }}>
+            <div id="tour-genres" style={{ textAlign: 'center', padding: '1rem', background: '#f3f4f6', position: 'relative' }}>
+                <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', marginBottom: '0.5rem', maxWidth: '1200px', margin: '0 auto', padding: '0 1rem' }}>
+                    <div style={{ display: 'flex', justifyContent: 'center', gap: '1rem', flexWrap: 'wrap', alignItems: 'center' }}>
                         <div className="tooltip">
                             <Link href="/" style={{ fontWeight: 'bold', textDecoration: 'underline' }}>{tNav('global')}</Link>
                             <span className="tooltip-text">{t('globalTooltip')}</span>
@@ -101,28 +100,30 @@ export default async function Home({
                             );
                         })}
                     </div>
-
-                    {/* Upcoming Specials */}
-                    {upcomingSpecials.length > 0 && (
-                        <div style={{ marginTop: '0.5rem', fontSize: '0.875rem', color: '#666' }}>
-                            {t('comingSoon')}: {upcomingSpecials.map(s => {
-                                const name = getLocalizedValue(s.name, locale);
-                                return (
-                                    <span key={s.id} style={{ marginLeft: '0.5rem' }}>
-                                        ★ {name} ({s.launchDate ? new Date(s.launchDate).toLocaleDateString(locale, {
-                                            day: '2-digit',
-                                            month: '2-digit',
-                                            year: 'numeric',
-                                            timeZone: process.env.TZ
-                                        }) : ''})
-                                        {s.curator && <span style={{ fontStyle: 'italic', marginLeft: '0.25rem' }}>{t('curatedBy')} {s.curator}</span>}
-                                    </span>
-                                );
-                            })}
-                        </div>
-                    )}
                 </div>
-                <div style={{ flex: 1, display: 'flex', justifyContent: 'flex-end' }}>
+                
+                {/* Upcoming Specials */}
+                {upcomingSpecials.length > 0 && (
+                    <div style={{ marginTop: '0.5rem', fontSize: '0.875rem', color: '#666', maxWidth: '1200px', margin: '0 auto', padding: '0 1rem' }}>
+                        {t('comingSoon')}: {upcomingSpecials.map(s => {
+                            const name = getLocalizedValue(s.name, locale);
+                            return (
+                                <span key={s.id} style={{ marginLeft: '0.5rem' }}>
+                                    ★ {name} ({s.launchDate ? new Date(s.launchDate).toLocaleDateString(locale, {
+                                        day: '2-digit',
+                                        month: '2-digit',
+                                        year: 'numeric',
+                                        timeZone: process.env.TZ
+                                    }) : ''})
+                                    {s.curator && <span style={{ fontStyle: 'italic', marginLeft: '0.25rem' }}>{t('curatedBy')} {s.curator}</span>}
+                                </span>
+                            );
+                        })}
+                    </div>
+                )}
+                
+                {/* Language Switcher - rechts oben */}
+                <div style={{ position: 'absolute', top: '1rem', right: '1rem' }}>
                     <LanguageSwitcher />
                 </div>
             </div>