Overwork of design

app.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="h-screen flex flex-col overflow-hidden">
     <Navigation />
-    <main class="flex-1 overflow-y-auto pt-20">
+    <main class="flex-1 overflow-y-auto pt-20 pb-20 sm:pb-0">
       <NuxtPage />
     </main>
     <Footer />

components/Footer.vue

@@ -1,11 +1,11 @@
 <template>
   <footer class="fixed bottom-0 left-0 right-0 z-40 bg-gray-900 border-t border-gray-800 shadow-2xl">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3">
+    <div class="max-w-7xl mx-auto px-3 sm:px-6 lg:px-8 py-2 sm:py-3">
-      <div class="flex flex-col sm:flex-row justify-between items-center space-y-2 sm:space-y-0">
+      <div class="flex flex-col sm:flex-row justify-between items-center gap-y-1 sm:gap-y-0">
-        <p class="text-sm text-gray-400">
+        <p class="text-xs sm:text-sm text-gray-400 whitespace-nowrap">
           © {{ currentYear }} Harheimer TC 1954 e.V.
         </p>
-        <div class="flex items-center space-x-6 text-sm relative">
+        <div class="flex flex-wrap justify-center items-center gap-x-4 gap-y-1 text-xs sm:text-sm relative">
           <span
             v-if="isLoggedIn && appVersion"
             class="text-xs text-gray-600"

components/Hero.vue

@@ -29,9 +29,9 @@
     </div>
 
     <!-- Content -->
-    <div class="relative z-20 max-w-7xl mx-auto">
+    <div class="relative z-20 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
       <div class="text-center">
-        <h1 class="text-5xl sm:text-6xl lg:text-7xl font-display font-bold text-gray-900 mb-6 leading-tight animate-fade-in">
+        <h1 class="text-4xl sm:text-6xl lg:text-7xl font-display font-bold text-gray-900 mb-6 leading-tight animate-fade-in">
           Willkommen beim<br>
           <span class="text-primary-600">Harheimer TC</span>
         </h1>
@@ -163,4 +163,3 @@ const yearsSinceFounding = new Date().getFullYear() - foundingYear
   animation: fadeIn 0.8s ease-out 0.4s both;
 }
 </style>
-

components/HomeTermine.vue

@@ -1,7 +1,7 @@
 <template>
-  <section class="py-16 sm:py-20 bg-gray-50">
+  <section class="py-12 sm:py-16 bg-gray-50">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-      <div class="text-center mb-12">
+      <div class="text-center mb-8 sm:mb-10">
         <h2 class="text-4xl sm:text-5xl font-display font-bold text-gray-900 mb-4">
           Kommende Termine
         </h2>
@@ -32,4 +32,3 @@
 import { ArrowRight } from 'lucide-vue-next'
 import TermineVorschau from './TermineVorschau.vue'
 </script>
-

components/PublicNews.vue

@@ -1,9 +1,13 @@
 <template>
   <section
-    class="py-16 sm:py-20 bg-white min-h-[32rem]"
+    class="bg-white"
+    :class="news.length === 0 && !isLoading ? 'py-10 sm:py-12' : 'py-16 sm:py-20 min-h-[32rem]'"
   >
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-      <div class="text-center mb-16">
+      <div
+        class="text-center"
+        :class="news.length === 0 && !isLoading ? 'mb-8 sm:mb-10' : 'mb-16'"
+      >
         <h2 class="text-4xl sm:text-5xl font-display font-bold text-gray-900 mb-4">
           Aktuelles
         </h2>
@@ -67,7 +71,7 @@
 
       <div
         v-else
-        class="max-w-xl mx-auto text-center bg-gray-50 border border-gray-200 rounded-xl p-8"
+        class="max-w-xl mx-auto text-center bg-gray-50 border border-gray-200 rounded-xl p-6"
       >
         <p class="text-gray-700 font-semibold mb-2">
           Aktuell keine News
@@ -222,4 +226,3 @@ onUnmounted(() => {
   opacity: 0;
 }
 </style>
-

components/Spielplan.vue

@@ -1,7 +1,7 @@
 <template>
-  <section class="py-16 bg-white">
+  <section class="py-12 sm:py-16 bg-white">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-      <div class="text-center mb-12">
+      <div class="text-center mb-8 sm:mb-10">
         <h2 class="text-3xl font-bold text-gray-900 mb-4">
           Nächste Spiele
         </h2>
@@ -10,7 +10,7 @@
       <!-- Loading State -->
       <div
         v-if="isLoading"
-        class="text-center py-8"
+        class="text-center py-6"
       >
         <svg
           class="w-8 h-8 text-gray-400 mx-auto mb-4 animate-spin"
@@ -33,7 +33,7 @@
       <!-- Error State -->
       <div
         v-else-if="error"
-        class="text-center py-8"
+        class="text-center py-6"
       >
         <svg
           class="w-12 h-12 text-gray-400 mx-auto mb-4"
@@ -62,7 +62,7 @@
       <!-- Empty State -->
       <div
         v-else-if="!upcomingGames || upcomingGames.length === 0"
-        class="text-center py-8"
+        class="text-center py-6"
       >
         <svg
           class="w-12 h-12 text-gray-400 mx-auto mb-4"

components/TermineVorschau.vue

@@ -45,7 +45,7 @@
 
     <div
       v-else
-      class="text-center py-8 bg-gray-50 rounded-lg"
+      class="text-center py-6 bg-gray-50 rounded-lg"
     >
       <Calendar
         :size="32"
@@ -123,4 +123,3 @@ onMounted(() => {
   loadTermine()
 })
 </script>
-